diff --git a/.editorconfig b/.editorconfig index 49601a81f..347f00f8a 100644 --- a/.editorconfig +++ b/.editorconfig @@ -17,6 +17,7 @@ trim_trailing_whitespace = false [*.ts] ij_typescript_use_double_quotes = false ij_typescript_enforce_trailing_comma = keep +ij_typescript_spaces_within_imports = true [{*.json, .prettierrc, .eslintrc}] indent_size = 2 diff --git a/.gitignore b/.gitignore index a920879bb..7bfea35e2 100644 --- a/.gitignore +++ b/.gitignore @@ -45,3 +45,4 @@ version.properties paligo-styles/style.css* migrations.json +*.iml diff --git a/angular.json b/angular.json index 990116c5b..6706ca3d2 100644 --- a/angular.json +++ b/angular.json @@ -1,23 +1,8 @@ { - "version": 1, "cli": { - "defaultCollection": "@nrwl/angular", - "analytics": false, - "packageManager": "yarn" - }, - "defaultProject": "red-ui", - "schematics": { - "@nrwl/angular:application": { - "linter": "eslint", - "unitTestRunner": "jest", - "e2eTestRunner": "cypress" - }, - "@nrwl/angular:library": { - "linter": "eslint", - "unitTestRunner": "jest" - }, - "@nrwl/angular:component": {} + "analytics": "d22ff5ae-c863-4253-83e3-0a969e4bb5fe" }, + "version": 1, "projects": { "common-ui": { "projectType": "library", @@ -40,30 +25,8 @@ }, "outputs": ["{options.outputFile}"] } - } - }, - "red-domain": { - "projectType": "library", - "root": "libs/red-domain", - "sourceRoot": "libs/red-domain/src", - "prefix": "red", - "architect": { - "test": { - "builder": "@nrwl/jest:jest", - "outputs": ["coverage/libs/red-domain"], - "options": { - "jestConfig": "libs/red-domain/jest.config.js", - "passWithNoTests": true - } - }, - "lint": { - "builder": "@nrwl/linter:eslint", - "options": { - "lintFilePatterns": ["libs/red-domain/src/**/*.ts", "libs/red-domain/src/**/*.html"] - }, - "outputs": ["{options.outputFile}"] - } - } + }, + "tags": [] }, "red-cache": { "projectType": "library", @@ -91,6 +54,30 @@ "@schematics/angular:component": { "style": "scss" } + }, + "tags": [] + }, + "red-domain": { + "projectType": "library", + "root": "libs/red-domain", + "sourceRoot": "libs/red-domain/src", + "prefix": "red", + "architect": { + "test": { + "builder": "@nrwl/jest:jest", + "outputs": ["coverage/libs/red-domain"], + "options": { + "jestConfig": "libs/red-domain/jest.config.js", + "passWithNoTests": true + } + }, + "lint": { + "builder": "@nrwl/linter:eslint", + "options": { + "lintFilePatterns": ["libs/red-domain/src/**/*.ts", "libs/red-domain/src/**/*.html"] + }, + "outputs": ["{options.outputFile}"] + } } }, "red-ui": { @@ -152,7 +139,14 @@ "with": "apps/red-ui/src/environments/environment.prod.ts" } ], - "optimization": true, + "optimization": { + "scripts": true, + "styles": { + "minify": true, + "inlineCritical": false + }, + "fonts": true + }, "outputHashing": "all", "sourceMap": false, "namedChunks": false, @@ -209,7 +203,8 @@ }, "outputs": ["coverage/apps/red-ui"] } - } + }, + "tags": [] } } } diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts index 92d9eae7a..24a5d3557 100644 --- a/apps/red-ui/src/app/app-routing.module.ts +++ b/apps/red-ui/src/app/app-routing.module.ts @@ -3,13 +3,13 @@ import { AuthGuard } from './modules/auth/auth.guard'; import { CompositeRouteGuard, CustomRouteReuseStrategy } from '@iqser/common-ui'; import { RedRoleGuard } from './modules/auth/red-role.guard'; import { BaseScreenComponent } from '@components/base-screen/base-screen.component'; -import { RouteReuseStrategy, RouterModule } from '@angular/router'; +import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router'; import { NgModule } from '@angular/core'; import { DownloadsListScreenComponent } from '@components/downloads-list-screen/downloads-list-screen.component'; import { AppStateGuard } from '@state/app-state.guard'; -import { UserProfileScreenComponent } from '@components/user-profile/user-profile-screen.component'; +import { DossiersGuard } from '@guards/dossiers.guard'; -const routes = [ +const routes: Routes = [ { path: '', redirectTo: 'main/dossiers', @@ -21,18 +21,9 @@ const routes = [ canActivate: [AuthGuard], }, { - path: 'main/my-profile', + path: 'main/account', component: BaseScreenComponent, - children: [ - { - path: '', - component: UserProfileScreenComponent, - }, - ], - canActivate: [CompositeRouteGuard], - data: { - routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard], - }, + loadChildren: () => import('./modules/account/account.module').then(m => m.AccountModule), }, { path: 'main/admin', @@ -43,6 +34,12 @@ const routes = [ path: 'main/dossiers', component: BaseScreenComponent, loadChildren: () => import('./modules/dossier/dossiers.module').then(m => m.DossiersModule), + canActivate: [CompositeRouteGuard], + canDeactivate: [DossiersGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard, DossiersGuard], + requiredRoles: ['RED_USER', 'RED_MANAGER'], + }, }, { path: 'main/downloads', diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 67dfac44c..241a83554 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -20,7 +20,6 @@ import { DownloadsListScreenComponent } from '@components/downloads-list-screen/ import { AppRoutingModule } from './app-routing.module'; import { SharedModule } from '@shared/shared.module'; import { FileUploadDownloadModule } from '@upload-download/file-upload-download.module'; -import { UserProfileScreenComponent } from '@components/user-profile/user-profile-screen.component'; import { PlatformLocation } from '@angular/common'; import { BASE_HREF } from './tokens'; import { MONACO_PATH, MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'; @@ -36,6 +35,7 @@ import * as links from '../assets/help-mode/links.json'; import { HELP_DOCS, IqserHelpModeModule, MAX_RETRIES_ON_SERVER_ERROR, ServerErrorInterceptor, ToastComponent } from '@iqser/common-ui'; import { KeycloakService } from 'keycloak-angular'; import { GeneralSettingsService } from '@services/general-settings.service'; +import { BreadcrumbsComponent } from '@components/breadcrumbs/breadcrumbs.component'; export function httpLoaderFactory(httpClient: HttpClient): PruningTranslationLoader { return new PruningTranslationLoader(httpClient, '/assets/i18n/', '.json'); @@ -51,9 +51,9 @@ function cleanupBaseUrl(baseUrl: string) { } } -const screens = [BaseScreenComponent, DownloadsListScreenComponent, UserProfileScreenComponent]; +const screens = [BaseScreenComponent, DownloadsListScreenComponent]; -const components = [AppComponent, AuthErrorComponent, NotificationsComponent, SpotlightSearchComponent, ...screens]; +const components = [AppComponent, AuthErrorComponent, NotificationsComponent, SpotlightSearchComponent, BreadcrumbsComponent, ...screens]; @NgModule({ declarations: [...components], diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html index 2c927f27c..6a7584830 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html @@ -4,41 +4,7 @@
- - - {{ 'top-bar.navigation-items.back' | translate }} - - - - - - - - - - {{ dossier.dossierName }} - - - - - - - - {{ activeFile.filename }} - - - +
@@ -54,16 +20,16 @@ *ngIf="(isSearchScreen$ | async) === false && (currentUser.isUser || currentUser.isManager)" [actions]="searchActions" [placeholder]="'search.placeholder' | translate" - iqserHelpMode="search" + iqserHelpMode="search-in-entire-application" > - +
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts index e51e82711..3bfa76673 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts @@ -8,8 +8,10 @@ import { FileDownloadService } from '@upload-download/services/file-download.ser import { TranslateService } from '@ngx-translate/core'; import { SpotlightSearchAction } from '@components/spotlight-search/spotlight-search-action'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { distinctUntilChanged, filter, map, startWith } from 'rxjs/operators'; +import { filter, map, startWith } from 'rxjs/operators'; import { DossiersService } from '@services/entity-services/dossiers.service'; +import { shareDistinctLast } from '@iqser/common-ui'; +import { BreadcrumbsService } from '@services/breadcrumbs.service'; interface MenuItem { readonly name: string; @@ -20,7 +22,6 @@ interface MenuItem { } const isNavigationStart = event => event instanceof NavigationStart; -const isDossiersView = url => url.includes('/main/dossiers') && !url.includes('/search'); const isSearchScreen = url => url.includes('/main/dossiers') && url.includes('/search'); @Component({ @@ -31,9 +32,10 @@ export class BaseScreenComponent { readonly currentUser = this.userService.currentUser; readonly userMenuItems: readonly MenuItem[] = [ { - name: _('top-bar.navigation-items.my-account.children.my-profile'), - routerLink: '/main/my-profile', - show: true, + name: _('top-bar.navigation-items.my-account.children.account'), + routerLink: '/main/account', + show: this.currentUser.isUser, + action: this.appStateService.reset, showDot: () => false, }, { @@ -60,8 +62,8 @@ export class BaseScreenComponent { { text: this._translateService.instant('search.this-dossier'), icon: 'red:enter', - hide: (): boolean => !this.dossiersService.activeDossier, - action: (query): void => this._search(query, this.dossiersService.activeDossierId), + hide: (): boolean => this._hideSearchThisDossier, + action: (query): void => this._searchThisDossier(query), }, { text: this._translateService.instant('search.entire-platform'), @@ -73,9 +75,8 @@ export class BaseScreenComponent { filter(isNavigationStart), map((event: NavigationStart) => event.url), startWith(this._router.url), - distinctUntilChanged(), + shareDistinctLast(), ); - readonly isDossiersView$ = this._navigationStart$.pipe(map(isDossiersView)); readonly isSearchScreen$ = this._navigationStart$.pipe(map(isSearchScreen)); constructor( @@ -87,8 +88,19 @@ export class BaseScreenComponent { readonly fileDownloadService: FileDownloadService, private readonly _router: Router, private readonly _translateService: TranslateService, + readonly breadcrumbsService: BreadcrumbsService, ) {} + private get _hideSearchThisDossier() { + const routerLink = this.breadcrumbsService.breadcrumbs[1]?.routerLink; + if (!routerLink) { + return true; + } + + const isDossierOverview = routerLink.includes('dossiers') && routerLink.length === 3; + return !isDossierOverview; + } + trackByName(index: number, item: MenuItem) { return item.name; } @@ -97,4 +109,13 @@ export class BaseScreenComponent { const queryParams = { query, dossierId }; this._router.navigate(['main/dossiers/search'], { queryParams }).then(); } + + private _searchThisDossier(query: string) { + const routerLink = this.breadcrumbsService.breadcrumbs[1]?.routerLink; + if (!routerLink) { + return this._search(query); + } + const dossierId = routerLink[2]; + return this._search(query, dossierId); + } } diff --git a/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html new file mode 100644 index 000000000..e1993a09b --- /dev/null +++ b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.html @@ -0,0 +1,25 @@ + + + + {{ 'top-bar.navigation-items.back' | translate }} + + + + + + + + {{ breadcrumb.name$ | async }} + + + + diff --git a/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.scss b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.scss new file mode 100644 index 000000000..e04aa5995 --- /dev/null +++ b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.scss @@ -0,0 +1,10 @@ +:host { + display: flex; + align-items: center; + overflow: hidden; + height: 100%; + + > *:not(:last-child) { + margin-right: 6px; + } +} diff --git a/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.ts b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.ts new file mode 100644 index 000000000..9b2256831 --- /dev/null +++ b/apps/red-ui/src/app/components/breadcrumbs/breadcrumbs.component.ts @@ -0,0 +1,12 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { BreadcrumbsService } from '@services/breadcrumbs.service'; + +@Component({ + selector: 'redaction-breadcrumbs', + templateUrl: './breadcrumbs.component.html', + styleUrls: ['./breadcrumbs.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class BreadcrumbsComponent { + constructor(readonly breadcrumbsService: BreadcrumbsService) {} +} diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html index a7ef00a67..c1d447aab 100644 --- a/apps/red-ui/src/app/components/notifications/notifications.component.html +++ b/apps/red-ui/src/app/components/notifications/notifications.component.html @@ -6,7 +6,7 @@ diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.ts b/apps/red-ui/src/app/components/notifications/notifications.component.ts index 01a4289f4..1e4d7fbd1 100644 --- a/apps/red-ui/src/app/components/notifications/notifications.component.ts +++ b/apps/red-ui/src/app/components/notifications/notifications.component.ts @@ -6,9 +6,11 @@ import { UserService } from '@services/user.service'; import { DossiersService } from '@services/entity-services/dossiers.service'; import { NotificationsService } from '@services/notifications.service'; import { Notification } from '@red/domain'; -import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators'; -import { BehaviorSubject, Observable } from 'rxjs'; -import { List } from '@iqser/common-ui'; +import { distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators'; +import { BehaviorSubject, Observable, timer } from 'rxjs'; +import { AutoUnsubscribe, CHANGED_CHECK_INTERVAL, List, shareLast } from '@iqser/common-ui'; + +const INCLUDE_SEEN = false; interface NotificationsGroup { date: string; @@ -21,11 +23,11 @@ interface NotificationsGroup { styleUrls: ['./notifications.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class NotificationsComponent implements OnInit { +export class NotificationsComponent extends AutoUnsubscribe implements OnInit { notifications$: Observable; hasUnreadNotifications$: Observable; groupedNotifications$: Observable; - private _notifications$ = new BehaviorSubject([]); + private _notifications$ = new BehaviorSubject([]); constructor( private readonly _translateService: TranslateService, @@ -35,17 +37,25 @@ export class NotificationsComponent implements OnInit { private readonly _dossiersService: DossiersService, private readonly _datePipe: DatePipe, ) { - this.notifications$ = this._notifications$.asObservable(); + super(); + this.notifications$ = this._notifications$.asObservable().pipe(shareLast()); this.groupedNotifications$ = this.notifications$.pipe(map(notifications => this._groupNotifications(notifications))); this.hasUnreadNotifications$ = this.notifications$.pipe( map(notifications => notifications.filter(n => !n.readDate).length > 0), distinctUntilChanged(), - shareReplay(1), + shareLast(), ); } async ngOnInit(): Promise { await this._loadData(); + + this.addSubscription = timer(CHANGED_CHECK_INTERVAL, CHANGED_CHECK_INTERVAL) + .pipe( + switchMap(() => this._notificationsService.getNotificationsIfChanged(INCLUDE_SEEN)), + tap(notifications => this._notifications$.next(notifications)), + ) + .subscribe(); } async markRead($event, notifications: List = this._notifications$.getValue().map(n => n.id), isRead = true): Promise { @@ -55,7 +65,7 @@ export class NotificationsComponent implements OnInit { } private async _loadData(): Promise { - const notifications = await this._notificationsService.getNotifications(false).toPromise(); + const notifications = await this._notificationsService.getNotifications(INCLUDE_SEEN).toPromise(); this._notifications$.next(notifications); } diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html deleted file mode 100644 index c643dc6b2..000000000 --- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html +++ /dev/null @@ -1,50 +0,0 @@ -
-
-
-
-
-
-
-
-
-
-
- - -
- -
- - -
- -
- - -
-
- - - - {{ translations[language] | translate }} - - -
-
-
- -
- - {{ 'user-profile.actions.change-password' | translate }} -
-
-
-
-
diff --git a/apps/red-ui/src/app/guards/dossier-files-guard.ts b/apps/red-ui/src/app/guards/dossier-files-guard.ts new file mode 100644 index 000000000..fc849eb96 --- /dev/null +++ b/apps/red-ui/src/app/guards/dossier-files-guard.ts @@ -0,0 +1,55 @@ +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, CanActivate, CanDeactivate, Router, RouterStateSnapshot } from '@angular/router'; +import { DossiersService } from '../services/entity-services/dossiers.service'; +import { BreadcrumbsService } from '../services/breadcrumbs.service'; +import { pluck } from 'rxjs/operators'; +import { AppStateService } from '../state/app-state.service'; +import { FilesMapService } from '../services/entity-services/files-map.service'; + +@Injectable({ providedIn: 'root' }) +export class DossierFilesGuard implements CanActivate, CanDeactivate { + constructor( + private readonly _dossiersService: DossiersService, + private readonly _appStateService: AppStateService, + private readonly _breadcrumbsService: BreadcrumbsService, + private readonly _filesMapService: FilesMapService, + private readonly _router: Router, + ) {} + + async canActivate(route: ActivatedRouteSnapshot): Promise { + const dossierId = route.paramMap.get('dossierId'); + const dossier = this._dossiersService.find(dossierId); + + if (!dossier) { + await this._router.navigate(['/main', 'dossiers']); + return false; + } + + if (!this._filesMapService.has(dossierId)) { + await this._appStateService.getFiles(dossier); + } + + this._breadcrumbsService.append({ + name$: this._dossiersService.getEntityChanged$(dossierId).pipe(pluck('dossierName')), + routerLink: ['/main', 'dossiers', dossierId], + routerLinkActiveOptions: { exact: true }, + }); + + this._breadcrumbsService.hideGoBack(); + return true; + } + + canDeactivate( + component: unknown, + currentRoute: ActivatedRouteSnapshot, + currentState: RouterStateSnapshot, + nextState?: RouterStateSnapshot, + ) { + const dossierId = currentRoute.paramMap.get('dossierId'); + this._breadcrumbsService.remove(['/main', 'dossiers', dossierId]); + if (!nextState.url.startsWith('/main/dossiers')) { + this._breadcrumbsService.showGoBack(); + } + return true; + } +} diff --git a/apps/red-ui/src/app/guards/dossiers.guard.ts b/apps/red-ui/src/app/guards/dossiers.guard.ts new file mode 100644 index 000000000..d9c5c9938 --- /dev/null +++ b/apps/red-ui/src/app/guards/dossiers.guard.ts @@ -0,0 +1,33 @@ +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, CanActivate, CanDeactivate, Router, RouterStateSnapshot } from '@angular/router'; +import { DossiersService } from '@services/entity-services/dossiers.service'; +import { BreadcrumbsService } from '@services/breadcrumbs.service'; +import { AppStateService } from '@state/app-state.service'; + +@Injectable({ providedIn: 'root' }) +export class DossiersGuard implements CanActivate, CanDeactivate { + constructor( + private readonly _dossiersService: DossiersService, + private readonly _appStateService: AppStateService, + private readonly _breadcrumbsService: BreadcrumbsService, + private readonly _router: Router, + ) {} + + async canActivate(): Promise { + await this._dossiersService.loadAll().toPromise(); + this._breadcrumbsService.hideGoBack(); + return true; + } + + canDeactivate( + component: unknown, + currentRoute: ActivatedRouteSnapshot, + currentState: RouterStateSnapshot, + nextState?: RouterStateSnapshot, + ) { + if (!nextState.url.startsWith('/main/dossiers')) { + this._breadcrumbsService.showGoBack(); + } + return true; + } +} diff --git a/apps/red-ui/src/app/guards/file-preview.guard.ts b/apps/red-ui/src/app/guards/file-preview.guard.ts new file mode 100644 index 000000000..e27768d70 --- /dev/null +++ b/apps/red-ui/src/app/guards/file-preview.guard.ts @@ -0,0 +1,54 @@ +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, CanActivate, CanDeactivate, Router, RouterStateSnapshot } from '@angular/router'; +import { FilesMapService } from '../services/entity-services/files-map.service'; +import { AppStateService } from '../state/app-state.service'; +import { DossiersService } from '../services/entity-services/dossiers.service'; +import { BreadcrumbsService } from '../services/breadcrumbs.service'; +import { pluck } from 'rxjs/operators'; + +@Injectable({ providedIn: 'root' }) +export class FilePreviewGuard implements CanActivate, CanDeactivate { + constructor( + private readonly _filesMapService: FilesMapService, + private readonly _dossiersService: DossiersService, + private readonly _appStateService: AppStateService, + private readonly _breadcrumbsService: BreadcrumbsService, + private readonly _router: Router, + ) {} + + async canActivate(route: ActivatedRouteSnapshot): Promise { + const dossierId = route.paramMap.get('dossierId'); + const fileId = route.paramMap.get('fileId'); + + const dossier = this._dossiersService.find(dossierId); + + if (!this._filesMapService.get(dossierId, fileId)) { + await this._router.navigate([dossier.routerLink]); + return false; + } + + this._breadcrumbsService.append({ + name$: this._filesMapService.watch$(dossierId, fileId).pipe(pluck('filename')), + routerLink: ['/main', 'dossiers', dossierId, 'file', fileId], + }); + + return true; + } + + canDeactivate( + component: unknown, + currentRoute: ActivatedRouteSnapshot, + currentState: RouterStateSnapshot, + nextState?: RouterStateSnapshot, + ) { + const dossierId = currentRoute.paramMap.get('dossierId'); + const fileId = currentRoute.paramMap.get('fileId'); + this._breadcrumbsService.remove(['/main', 'dossiers', dossierId, 'file', fileId]); + + if (!nextState.url.startsWith('/main/dossiers')) { + this._breadcrumbsService.showGoBack(); + } + + return true; + } +} diff --git a/apps/red-ui/src/app/guards/go-back-guard.service.ts b/apps/red-ui/src/app/guards/go-back-guard.service.ts new file mode 100644 index 000000000..893f470f4 --- /dev/null +++ b/apps/red-ui/src/app/guards/go-back-guard.service.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; +import { CanActivate, CanDeactivate } from '@angular/router'; +import { BreadcrumbsService } from '@services/breadcrumbs.service'; + +@Injectable({ providedIn: 'root' }) +export class GoBackGuard implements CanActivate, CanDeactivate { + constructor(private readonly _breadcrumbsService: BreadcrumbsService) {} + + canActivate(): boolean { + this._breadcrumbsService.showGoBack(); + return true; + } + + canDeactivate() { + this._breadcrumbsService.hideGoBack(); + return true; + } +} diff --git a/apps/red-ui/src/app/models/file/annotation.permissions.ts b/apps/red-ui/src/app/models/file/annotation.permissions.ts index 62b5645c5..ca2f1f911 100644 --- a/apps/red-ui/src/app/models/file/annotation.permissions.ts +++ b/apps/red-ui/src/app/models/file/annotation.permissions.ts @@ -12,6 +12,7 @@ export class AnnotationPermissions { canRejectSuggestion = true; canForceRedaction = true; canChangeLegalBasis = true; + canResizeAnnotation = true; canRecategorizeImage = true; static forUser(isApprover: boolean, user: User, annotations: AnnotationWrapper | AnnotationWrapper[]) { @@ -23,7 +24,10 @@ export class AnnotationPermissions { for (const annotation of annotations) { const permissions: AnnotationPermissions = new AnnotationPermissions(); + permissions.canUndo = !isApprover && annotation.isSuggestion; + permissions.canAcceptSuggestion = isApprover && (annotation.isSuggestion || annotation.isDeclinedSuggestion); + permissions.canRejectSuggestion = isApprover && annotation.isSuggestion; permissions.canForceRedaction = annotation.isSkipped && !annotation.isFalsePositive; permissions.canAcceptRecommendation = annotation.isRecommendation; @@ -34,12 +38,11 @@ export class AnnotationPermissions { permissions.canRemoveOrSuggestToRemoveFromDictionary = annotation.isModifyDictionary && (annotation.isRedacted || annotation.isSkipped || annotation.isHint); - permissions.canAcceptSuggestion = isApprover && (annotation.isSuggestion || annotation.isDeclinedSuggestion); - permissions.canRejectSuggestion = isApprover && annotation.isSuggestion; - permissions.canChangeLegalBasis = annotation.isRedacted; - permissions.canRecategorizeImage = annotation.isImage; + permissions.canRecategorizeImage = (annotation.isImage && !annotation.isSuggestion) || annotation.isSuggestionRecategorizeImage; + permissions.canResizeAnnotation = + ((annotation.isRedacted || annotation.isImage) && !annotation.isSuggestion) || annotation.isSuggestionResize; summedPermissions._merge(permissions); } diff --git a/apps/red-ui/src/app/models/file/annotation.wrapper.ts b/apps/red-ui/src/app/models/file/annotation.wrapper.ts index ff1c95d17..b7994d106 100644 --- a/apps/red-ui/src/app/models/file/annotation.wrapper.ts +++ b/apps/red-ui/src/app/models/file/annotation.wrapper.ts @@ -4,14 +4,11 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { IComment, IPoint, IRectangle } from '@red/domain'; export type AnnotationSuperType = - | 'add-dictionary' - | 'remove-dictionary' - | 'remove-only-here' - | 'change-legal-basis' | 'suggestion-change-legal-basis' | 'suggestion-recategorize-image' | 'suggestion-add-dictionary' | 'suggestion-force-redaction' + | 'suggestion-resize' | 'suggestion-remove-dictionary' | 'suggestion-add' | 'suggestion-remove' @@ -20,7 +17,6 @@ export type AnnotationSuperType = | 'manual-redaction' | 'recommendation' | 'hint' - | 'pending-analysis' | 'declined-suggestion'; export class AnnotationWrapper { @@ -45,6 +41,7 @@ export class AnnotationWrapper { recommendationType: string; legalBasisValue: string; legalBasisChangeValue?: string; + resizing?: boolean; manual?: boolean; @@ -82,7 +79,7 @@ export class AnnotationWrapper { } get isSuperTypeBasedColor() { - return this.isSkipped || this.isSuggestion || this.isReadyForAnalysis || this.isDeclinedSuggestion; + return this.isSkipped || this.isSuggestion || this.isDeclinedSuggestion; } get isSkipped() { @@ -120,16 +117,6 @@ export class AnnotationWrapper { return this.superType === 'declined-suggestion'; } - get isReadyForAnalysis() { - return ( - this.superType === 'add-dictionary' || - this.superType === 'remove-dictionary' || - this.superType === 'remove-only-here' || - this.superType === 'pending-analysis' || - this.superType === 'change-legal-basis' - ); - } - get isApproved() { return this.status === 'APPROVED'; } @@ -143,7 +130,17 @@ export class AnnotationWrapper { } get isSuggestion() { - return this.isSuggestionAdd || this.isSuggestionRemove || this.isSuggestionChangeLegalBasis || this.isSuggestionRecategorizeImage; + return ( + this.isSuggestionAdd || + this.isSuggestionRemove || + this.isSuggestionChangeLegalBasis || + this.isSuggestionRecategorizeImage || + this.isSuggestionResize + ); + } + + get isSuggestionResize() { + return this.superType === 'suggestion-resize'; } get isSuggestionRecategorizeImage() { @@ -171,7 +168,7 @@ export class AnnotationWrapper { } get isConvertedRecommendation() { - return this.isRecommendation && (this.superType === 'suggestion-add-dictionary' || this.superType === 'add-dictionary'); + return this.isRecommendation && this.superType === 'suggestion-add-dictionary'; } get isRecommendation() { @@ -245,6 +242,13 @@ export class AnnotationWrapper { return; } + if (redactionLogEntryWrapper.manualRedactionType === 'RESIZE') { + if (redactionLogEntryWrapper.status === 'REQUESTED') { + annotationWrapper.superType = 'suggestion-resize'; + return; + } + } + if (redactionLogEntryWrapper.manualRedactionType === 'FORCE_REDACT') { annotationWrapper.force = true; @@ -263,10 +267,6 @@ export class AnnotationWrapper { annotationWrapper.superType = 'suggestion-add-dictionary'; return; } - if (redactionLogEntryWrapper.status === 'APPROVED') { - annotationWrapper.superType = 'add-dictionary'; - return; - } if (redactionLogEntryWrapper.status === 'DECLINED') { annotationWrapper.superType = 'declined-suggestion'; return; @@ -318,10 +318,6 @@ export class AnnotationWrapper { annotationWrapper.superType = 'suggestion-add-dictionary'; return; } - if (redactionLogEntryWrapper.status === 'APPROVED') { - annotationWrapper.superType = 'add-dictionary'; - return; - } if (redactionLogEntryWrapper.status === 'DECLINED') { annotationWrapper.superType = 'declined-suggestion'; return; @@ -369,11 +365,16 @@ export class AnnotationWrapper { if (redactionLogEntryWrapper.status === 'APPROVED') { if (redactionLogEntryWrapper.dictionaryEntry) { - annotationWrapper.superType = - redactionLogEntryWrapper.manualRedactionType === 'ADD' ? 'add-dictionary' : 'remove-dictionary'; + annotationWrapper.superType = annotationWrapper.redaction ? 'redaction' : annotationWrapper.hint ? 'hint' : 'skipped'; } else { annotationWrapper.superType = - redactionLogEntryWrapper.manualRedactionType === 'ADD' ? 'manual-redaction' : 'remove-only-here'; + redactionLogEntryWrapper.manualRedactionType === 'ADD' + ? 'manual-redaction' + : annotationWrapper.redaction + ? 'redaction' + : annotationWrapper.hint + ? 'hint' + : 'skipped'; } return; } diff --git a/apps/red-ui/src/app/models/file/file-data.model.ts b/apps/red-ui/src/app/models/file/file-data.model.ts index 4a82bd0a4..6407c15fd 100644 --- a/apps/red-ui/src/app/models/file/file-data.model.ts +++ b/apps/red-ui/src/app/models/file/file-data.model.ts @@ -24,7 +24,7 @@ export class FileDataModel { const entries: RedactionLogEntryWrapper[] = this._convertData(); let allAnnotations = entries .map(entry => AnnotationWrapper.fromData(entry)) - .filter(ann => !this.file.excludedPages.includes(ann.pageNumber)); + .filter(ann => ann.manual || !this.file.excludedPages.includes(ann.pageNumber)); if (!areDevFeaturesEnabled) { allAnnotations = allAnnotations.filter(annotation => !annotation.isFalsePositive); diff --git a/apps/red-ui/src/app/models/file/manual-redaction-entry.wrapper.ts b/apps/red-ui/src/app/models/file/manual-redaction-entry.wrapper.ts index 39714983c..79504dea3 100644 --- a/apps/red-ui/src/app/models/file/manual-redaction-entry.wrapper.ts +++ b/apps/red-ui/src/app/models/file/manual-redaction-entry.wrapper.ts @@ -1,10 +1,18 @@ import { IManualRedactionEntry } from '@red/domain'; +export const ManualRedactionEntryTypes = { + DICTIONARY: 'DICTIONARY', + REDACTION: 'REDACTION', + FALSE_POSITIVE: 'FALSE_POSITIVE', +} as const; + +export type ManualRedactionEntryType = keyof typeof ManualRedactionEntryTypes; + export class ManualRedactionEntryWrapper { constructor( readonly quads: any, readonly manualRedactionEntry: IManualRedactionEntry, - readonly type: 'DICTIONARY' | 'REDACTION' | 'FALSE_POSITIVE', + readonly type: ManualRedactionEntryType, readonly annotationType: 'TEXT' | 'RECTANGLE' = 'TEXT', readonly rectId?: string, ) {} diff --git a/apps/red-ui/src/app/models/file/redaction-log-entry.wrapper.ts b/apps/red-ui/src/app/models/file/redaction-log-entry.wrapper.ts index 251b5bd77..72a70f608 100644 --- a/apps/red-ui/src/app/models/file/redaction-log-entry.wrapper.ts +++ b/apps/red-ui/src/app/models/file/redaction-log-entry.wrapper.ts @@ -17,7 +17,7 @@ export interface RedactionLogEntryWrapper { id?: string; legalBasis?: string; manual?: boolean; - manualRedactionType?: 'ADD' | 'REMOVE' | 'UNDO' | 'LEGAL_BASIS_CHANGE' | 'FORCE_REDACT' | 'RECATEGORIZE'; + manualRedactionType?: 'ADD' | 'REMOVE' | 'LEGAL_BASIS_CHANGE' | 'FORCE_REDACT' | 'RECATEGORIZE' | 'RESIZE'; matchedRule?: number; positions?: Array; reason?: string; diff --git a/apps/red-ui/src/app/modules/account/account-routing.module.ts b/apps/red-ui/src/app/modules/account/account-routing.module.ts new file mode 100644 index 000000000..777b82c0c --- /dev/null +++ b/apps/red-ui/src/app/modules/account/account-routing.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { CompositeRouteGuard } from '@iqser/common-ui'; +import { AuthGuard } from '../auth/auth.guard'; +import { RedRoleGuard } from '../auth/red-role.guard'; +import { AppStateGuard } from '../../state/app-state.guard'; +import { BaseAccountScreenComponent } from './base-account-screen/base-account-screen-component'; + +const routes = [ + { path: '', redirectTo: 'user-profile', pathMatch: 'full' }, + { + path: 'user-profile', + component: BaseAccountScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard], + requiredRoles: ['RED_USER'], + }, + loadChildren: () => import('./screens/user-profile/user-profile.module').then(m => m.UserProfileModule), + }, + { + path: 'notifications', + component: BaseAccountScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard], + }, + loadChildren: () => import('./screens/notifications/notifications.module').then(m => m.NotificationsModule), + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class AccountRoutingModule {} diff --git a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html new file mode 100644 index 000000000..8ebc033dc --- /dev/null +++ b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html @@ -0,0 +1,7 @@ + + +
+ {{ item.label | translate }} +
+ + diff --git a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.scss b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.scss new file mode 100644 index 000000000..15c54cccf --- /dev/null +++ b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.scss @@ -0,0 +1,7 @@ +:host { + height: calc(100vh - 61px); + + &.dossier-templates { + height: calc(100vh - 111px); + } +} diff --git a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts new file mode 100644 index 000000000..f4cf007ae --- /dev/null +++ b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts @@ -0,0 +1,26 @@ +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +interface NavItem { + readonly label: string; + readonly screen: string; +} + +@Component({ + selector: 'redaction-account-side-nav', + templateUrl: './account-side-nav.component.html', + styleUrls: ['./account-side-nav.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class AccountSideNavComponent { + readonly items: NavItem[] = [ + { + screen: 'user-profile', + label: _('user-profile'), + }, + { + screen: 'notifications', + label: _('notifications'), + }, + ]; +} diff --git a/apps/red-ui/src/app/modules/account/account.module.ts b/apps/red-ui/src/app/modules/account/account.module.ts new file mode 100644 index 000000000..28b2ee431 --- /dev/null +++ b/apps/red-ui/src/app/modules/account/account.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SharedModule } from '../shared/shared.module'; +import { AccountRoutingModule } from './account-routing.module'; +import { AccountSideNavComponent } from './account-side-nav/account-side-nav.component'; +import { BaseAccountScreenComponent } from './base-account-screen/base-account-screen-component'; +import { NotificationPreferencesService } from './services/notification-preferences.service'; + +@NgModule({ + declarations: [AccountSideNavComponent, BaseAccountScreenComponent], + imports: [CommonModule, SharedModule, AccountRoutingModule], + providers: [NotificationPreferencesService], +}) +export class AccountModule {} diff --git a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.html b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.html new file mode 100644 index 000000000..1597a1874 --- /dev/null +++ b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.html @@ -0,0 +1,20 @@ +
+
+ + + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss similarity index 64% rename from apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss rename to apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss index 677b2c3d2..fd508d3c9 100644 --- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.scss +++ b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.scss @@ -1,11 +1,16 @@ -@use 'variables'; -@use 'common-mixins'; +@use 'apps/red-ui/src/assets/styles/variables'; +@use 'libs/common-ui/src/assets/styles/common-mixins'; .content-container { background-color: variables.$grey-2; justify-content: center; @include common-mixins.scroll-bar; overflow: auto; + + .dialog { + width: var(--width); + min-height: unset; + } } .full-height { @@ -17,11 +22,3 @@ height: calc(100% + 50px); z-index: 1; } - -iframe { - background: white; - width: 500px; - height: 500px; - position: absolute; - z-index: 100; -} diff --git a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts new file mode 100644 index 000000000..c87363a82 --- /dev/null +++ b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts @@ -0,0 +1,27 @@ +import { ChangeDetectionStrategy, Component, OnInit, ViewContainerRef } from '@angular/core'; +import { Router } from '@angular/router'; +import { notificationsTranslations } from '../translations/notifications-translations'; + +@Component({ + selector: 'redaction-base-account-screen', + templateUrl: './base-account-screen-component.html', + styleUrls: ['./base-account-screen-component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class BaseAccountScreenComponent implements OnInit { + readonly translations = notificationsTranslations; + path: string; + + constructor(private readonly _router: Router, private readonly _hostRef: ViewContainerRef) { + this.path = this._router.url.split('/').pop(); + } + + ngOnInit(): void { + this._setDialogWidth(); + } + + private _setDialogWidth() { + const element = this._hostRef.element.nativeElement as HTMLElement; + element.style.setProperty('--width', this.path === 'user-profile' ? 'unset' : '100%'); + } +} diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/constants.ts b/apps/red-ui/src/app/modules/account/screens/notifications/constants.ts new file mode 100644 index 000000000..3c98f33b1 --- /dev/null +++ b/apps/red-ui/src/app/modules/account/screens/notifications/constants.ts @@ -0,0 +1,38 @@ +export const NotificationCategories = { + inAppNotifications: 'inAppNotifications', + emailNotifications: 'emailNotifications', +} as const; + +export const NotificationCategoriesValues = Object.values(NotificationCategories); + +export const OwnDossiersNotificationsTypes = { + dossierStatusChanges: 'dossierStatusChanges', + requestToJoinTheDossier: 'requestToJoinTheDossier', + documentStatusChanges: 'documentStatusChanges', + documentIsSentForApproval: 'documentIsSentForApproval', +} as const; + +export const OwnDossiersNotificationsTypesValues = Object.values(OwnDossiersNotificationsTypes); + +export const ReviewerOnDossiersNotificationsTypes = { + whenIAmAssignedOnADocument: 'whenIAmAssignedOnADocument', + whenIAmUnassignedFromADocument: 'whenIAmUnassignedFromADocument', + whenADocumentIsApproved: 'whenADocumentIsApproved', +} as const; + +export const ReviewerOnDossiersNotificationsTypesValues = Object.values(ReviewerOnDossiersNotificationsTypes); + +export const ApproverOnDossiersNotificationsTypes = { + whenADocumentIsSentForApproval: 'whenADocumentIsSentForApproval', + whenADocumentIsAssignedToAReviewer: 'whenADocumentIsAssignedToAReviewer', + whenAReviewerIsUnassignedFromADocument: 'whenAReviewerIsUnassignedFromADocument', +} as const; + +export const ApproverOnDossiersNotificationsTypesValues = Object.values(ApproverOnDossiersNotificationsTypes); + +export const NotificationGroupsKeys = ['own', 'reviewer', 'approver'] as const; +export const NotificationGroupsValues = [ + OwnDossiersNotificationsTypesValues, + ReviewerOnDossiersNotificationsTypesValues, + ApproverOnDossiersNotificationsTypesValues, +] as const; diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.html b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.html new file mode 100644 index 000000000..8c76795dc --- /dev/null +++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.html @@ -0,0 +1,43 @@ +
+
+
+
+ {{ + translations[category] | translate + }} +
+ +
+
+
+ + + {{ translations[type.toLocaleLowerCase()] | translate }} +
+
+ +
+ +
+
+
+ + {{ translations[preference] | translate }} + +
+
+
+
+
+ +
+ +
+
diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss new file mode 100644 index 000000000..82f2afa68 --- /dev/null +++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.scss @@ -0,0 +1,51 @@ +@use 'variables'; +@use 'libs/common-ui/src/assets/styles/common-mixins'; + +.dialog-content { + flex-direction: column; + + .header { + grid-column: span 2; + padding: 10px 10px; + margin-bottom: -1px; + border-top: 1px solid variables.$separator; + border-bottom: 1px solid variables.$separator; + } + + .options-content { + padding: 10px 48px; + + .statement { + opacity: 0.7; + color: variables.$grey-1; + font-weight: 500; + padding: 10px 0; + } + + .radio-container { + display: flex; + padding: 10px 0 10px; + .radio-button { + display: flex; + align-items: center; + padding-right: 30px; + iqser-round-checkbox { + margin-right: 8px; + } + } + } + + .group { + padding: 10px 0; + + .group-title { + color: variables.$grey-1; + font-weight: 600; + } + + .iqser-input-group { + margin-top: 5px; + } + } + } +} diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts new file mode 100644 index 000000000..e6b8f4a2a --- /dev/null +++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts @@ -0,0 +1,89 @@ +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { notificationsTranslations } from '../../../translations/notifications-translations'; +import { NotificationPreferencesService } from '../../../services/notification-preferences.service'; +import { LoadingService, Toaster } from '@iqser/common-ui'; +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; +import { NotificationCategoriesValues, NotificationGroupsKeys, NotificationGroupsValues } from '../constants'; +import { EmailNotificationScheduleTypesValues } from '@red/domain'; + +@Component({ + selector: 'redaction-notifications-screen', + templateUrl: './notifications-screen.component.html', + styleUrls: ['./notifications-screen.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class NotificationsScreenComponent implements OnInit { + readonly emailNotificationScheduleTypes = EmailNotificationScheduleTypesValues; + readonly notificationCategories = NotificationCategoriesValues; + readonly notificationGroupsKeys = NotificationGroupsKeys; + readonly notificationGroupsValues = NotificationGroupsValues; + readonly translations = notificationsTranslations; + + formGroup: FormGroup; + + constructor( + private readonly _toaster: Toaster, + private readonly _formBuilder: FormBuilder, + private readonly _loadingService: LoadingService, + private readonly _notificationPreferencesService: NotificationPreferencesService, + ) { + this.formGroup = this._formBuilder.group({ + inAppNotificationsEnabled: [undefined], + emailNotificationsEnabled: [undefined], + emailNotificationType: [undefined], + emailNotifications: [undefined], + inAppNotifications: [undefined], + }); + } + + async ngOnInit(): Promise { + await this._initializeForm(); + } + + isCategoryActive(category: string) { + return this.formGroup.get(`${category}Enabled`).value; + } + + setEmailNotificationType(type: string) { + this.formGroup.get('emailNotificationType').setValue(type); + } + + getEmailNotificationType() { + return this.formGroup.get('emailNotificationType').value; + } + + isPreferenceChecked(category: string, preference: string) { + return this.formGroup.get(category).value.includes(preference); + } + + addRemovePreference(checked: boolean, category: string, preference: string) { + const preferences = this.formGroup.get(category).value; + if (checked) { + preferences.push(preference); + } else { + const indexOfPreference = preferences.indexOf(preference); + preferences.splice(indexOfPreference, 1); + } + this.formGroup.get(category).setValue(preferences); + } + + async save() { + this._loadingService.start(); + try { + await this._notificationPreferencesService.update(this.formGroup.value).toPromise(); + } catch (e) { + this._toaster.error(_('notifications-screen.error.generic')); + } + this._loadingService.stop(); + } + + private async _initializeForm() { + this._loadingService.start(); + + const notificationPreferences = await this._notificationPreferencesService.get().toPromise(); + this.formGroup.patchValue(notificationPreferences); + + this._loadingService.stop(); + } +} diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications.module.ts b/apps/red-ui/src/app/modules/account/screens/notifications/notifications.module.ts new file mode 100644 index 000000000..bc6d3f30a --- /dev/null +++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { CommonModule } from '@angular/common'; +import { SharedModule } from '../../../shared/shared.module'; +import { NotificationsScreenComponent } from './notifications-screen/notifications-screen.component'; + +const routes = [{ path: '', component: NotificationsScreenComponent }]; + +@NgModule({ + declarations: [NotificationsScreenComponent], + imports: [RouterModule.forChild(routes), CommonModule, SharedModule], +}) +export class NotificationsModule {} diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html new file mode 100644 index 000000000..25d5a5a44 --- /dev/null +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html @@ -0,0 +1,37 @@ +
+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ + + + {{ translations[language] | translate }} + + +
+
+ {{ 'user-profile-screen.actions.change-password' | translate }} +
+
+
+ +
+ +
+
diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.scss b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.scss new file mode 100644 index 000000000..e1573c569 --- /dev/null +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.scss @@ -0,0 +1,3 @@ +a { + color: black; +} diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts similarity index 87% rename from apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts rename to apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts index 1601afc46..f1a23936a 100644 --- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.ts +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts @@ -1,19 +1,20 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { UserService } from '@services/user.service'; -import { PermissionsService } from '@services/permissions.service'; -import { LanguageService } from '@i18n/language.service'; -import { TranslateService } from '@ngx-translate/core'; -import { ConfigService } from '@services/config.service'; import { DomSanitizer } from '@angular/platform-browser'; -import { languagesTranslations } from '../../translations/languages-translations'; +import { TranslateService } from '@ngx-translate/core'; import { LoadingService } from '@iqser/common-ui'; import { IProfile } from '@red/domain'; +import { languagesTranslations } from '../../../translations/languages-translations'; +import { PermissionsService } from '../../../../../services/permissions.service'; +import { UserService } from '../../../../../services/user.service'; +import { ConfigService } from '../../../../../services/config.service'; +import { LanguageService } from '../../../../../i18n/language.service'; @Component({ selector: 'redaction-user-profile-screen', templateUrl: './user-profile-screen.component.html', styleUrls: ['./user-profile-screen.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class UserProfileScreenComponent implements OnInit { formGroup: FormGroup; diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.module.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.module.ts new file mode 100644 index 000000000..928581695 --- /dev/null +++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { CommonModule } from '@angular/common'; +import { SharedModule } from '../../../shared/shared.module'; +import { UserProfileScreenComponent } from './user-profile-screen/user-profile-screen.component'; + +const routes = [{ path: '', component: UserProfileScreenComponent }]; + +@NgModule({ + declarations: [UserProfileScreenComponent], + imports: [RouterModule.forChild(routes), CommonModule, SharedModule], +}) +export class UserProfileModule {} diff --git a/apps/red-ui/src/app/modules/account/services/notification-preferences.service.ts b/apps/red-ui/src/app/modules/account/services/notification-preferences.service.ts new file mode 100644 index 000000000..acd23a718 --- /dev/null +++ b/apps/red-ui/src/app/modules/account/services/notification-preferences.service.ts @@ -0,0 +1,31 @@ +import { Injectable, Injector } from '@angular/core'; +import { GenericService } from '@iqser/common-ui'; +import { Observable, of } from 'rxjs'; +import { UserService } from '../../../services/user.service'; +import { EmailNotificationScheduleTypes, INotificationPreferences } from '@red/domain'; +import { catchError } from 'rxjs/operators'; + +@Injectable() +export class NotificationPreferencesService extends GenericService { + constructor(protected readonly _injector: Injector, private readonly _userService: UserService) { + super(_injector, 'notification-preferences'); + } + + get(): Observable { + return super.get().pipe(catchError(() => of(this._defaultPreferences))); + } + + update(notificationPreferences: INotificationPreferences): Observable { + return super._post(notificationPreferences); + } + + private get _defaultPreferences(): INotificationPreferences { + return { + emailNotificationType: EmailNotificationScheduleTypes.INSTANT, + emailNotifications: [], + emailNotificationsEnabled: false, + inAppNotifications: [], + inAppNotificationsEnabled: true, + }; + } +} diff --git a/apps/red-ui/src/app/translations/languages-translations.ts b/apps/red-ui/src/app/modules/account/translations/languages-translations.ts similarity index 100% rename from apps/red-ui/src/app/translations/languages-translations.ts rename to apps/red-ui/src/app/modules/account/translations/languages-translations.ts diff --git a/apps/red-ui/src/app/modules/account/translations/notifications-translations.ts b/apps/red-ui/src/app/modules/account/translations/notifications-translations.ts new file mode 100644 index 000000000..c85d03104 --- /dev/null +++ b/apps/red-ui/src/app/modules/account/translations/notifications-translations.ts @@ -0,0 +1,24 @@ +import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; + +export const notificationsTranslations: { [key: string]: string } = { + daily: _('notifications-screen.schedule.instant'), + daily_summary: _('notifications-screen.schedule.daily'), + weekly_summary: _('notifications-screen.schedule.weekly'), + inAppNotifications: _('notifications-screen.category.in-app-notifications'), + emailNotifications: _('notifications-screen.category.email-notifications'), + documentIsSentForApproval: _('notifications-screen.options.document-is-sent-for-approval'), + documentStatusChanges: _('notifications-screen.options.document-status-changes'), + dossierStatusChanges: _('notifications-screen.options.dossier-status-changes'), + requestToJoinTheDossier: _('notifications-screen.options.request-to-join-the-dossier'), + whenADocumentIsApproved: _('notifications-screen.options.when-a-document-is-approved'), + whenADocumentIsAssignedToAReviewer: _('notifications-screen.options.when-a-document-is-assigned-to-a-reviewer'), + whenADocumentIsSentForApproval: _('notifications-screen.options.when-a-document-is-sent-for-approval'), + whenAReviewerIsUnassignedFromADocument: _('notifications-screen.options.when-a-reviewer-is-unassigned-from-a-document'), + whenIAmAssignedOnADocument: _('notifications-screen.options.when-i-am-assigned-on-a-document'), + whenIAmUnassignedFromADocument: _('notifications-screen.options.when-i-am-unassigned-from-a-document'), + approver: _('notifications-screen.groups.approver'), + own: _('notifications-screen.groups.own'), + reviewer: _('notifications-screen.groups.reviewer'), + notifications: _('notifications-screen.title'), + 'user-profile': _('user-profile-screen.title'), +} as const; diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts index 127bf919b..276e1b59d 100644 --- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts +++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts @@ -15,14 +15,14 @@ import { UserListingScreenComponent } from './screens/user-listing/user-listing- import { LicenseInformationScreenComponent } from './screens/license-information/license-information-screen.component'; import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component'; import { AuditScreenComponent } from './screens/audit/audit-screen.component'; -import { RouterModule } from '@angular/router'; +import { RouterModule, Routes } from '@angular/router'; import { ReportsScreenComponent } from './screens/reports/reports-screen.component'; import { DossierAttributesListingScreenComponent } from './screens/dossier-attributes-listing/dossier-attributes-listing-screen.component'; import { TrashScreenComponent } from './screens/trash/trash-screen.component'; import { GeneralConfigScreenComponent } from './screens/general-config/general-config-screen.component'; import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen.component'; -const routes = [ +const routes: Routes = [ { path: '', redirectTo: 'dossier-templates', pathMatch: 'full' }, { path: 'dossier-templates', diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts index 932ecd4fa..e31f6c9a9 100644 --- a/apps/red-ui/src/app/modules/admin/admin.module.ts +++ b/apps/red-ui/src/app/modules/admin/admin.module.ts @@ -45,7 +45,7 @@ import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen. import { LicenseReportService } from './services/licence-report.service'; import { RulesService } from './services/rules.service'; import { SmtpConfigService } from './services/smtp-config.service'; -import { WatermarkService } from './services/watermark.service'; +import { UploadDictionaryDialogComponent } from './dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component'; const dialogs = [ AddEditDossierTemplateDialogComponent, @@ -58,6 +58,7 @@ const dialogs = [ ConfirmDeleteUsersDialogComponent, FileAttributesCsvImportDialogComponent, AddEditDossierAttributeDialogComponent, + UploadDictionaryDialogComponent, ]; const screens = [ @@ -96,15 +97,7 @@ const components = [ @NgModule({ declarations: [...components], - providers: [ - AdminDialogService, - AuditService, - DigitalSignatureService, - LicenseReportService, - RulesService, - SmtpConfigService, - WatermarkService, - ], + providers: [AdminDialogService, AuditService, DigitalSignatureService, LicenseReportService, RulesService, SmtpConfigService], imports: [CommonModule, SharedModule, AdminRoutingModule, NgxChartsModule, ColorPickerModule, MonacoEditorModule], }) export class AdminModule {} diff --git a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts index bd7cc22a0..b435bca35 100644 --- a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts +++ b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts @@ -6,6 +6,7 @@ import { CircleButtonTypes, LoadingService, Toaster } from '@iqser/common-ui'; import { UserService } from '@services/user.service'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service'; +import { HttpStatusCode } from '@angular/common/http'; @Component({ selector: 'redaction-dossier-template-actions', @@ -57,7 +58,7 @@ export class DossierTemplateActionsComponent implements OnInit { await this._router.navigate(['main', 'admin']); }) .catch(error => { - if (error.status === 409) { + if (error.status === HttpStatusCode.Conflict) { this._toaster.error(_('dossier-templates-listing.error.conflict')); } else { this._toaster.error(_('dossier-templates-listing.error.generic')); diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html index a056d7d3c..ea0944da4 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html @@ -7,16 +7,16 @@
-
{{ dictionary?.type || technicalName || '-' }}
+
{{ dictionary?.type || (technicalName$ | async) || '-' }}
-
+
{{ dictionary.label }}
-
+
- +
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts index 6fe2d7c2e..4c8d470b9 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts @@ -1,39 +1,48 @@ -import { Component, Inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import { Observable } from 'rxjs'; -import { BaseDialogComponent, Toaster } from '@iqser/common-ui'; +import { BaseDialogComponent, shareDistinctLast, Toaster } from '@iqser/common-ui'; import { TranslateService } from '@ngx-translate/core'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { AppStateService } from '@state/app-state.service'; import { toKebabCase } from '@utils/functions'; import { DictionaryService } from '@shared/services/dictionary.service'; import { Dictionary, IDictionary } from '@red/domain'; +import { UserService } from '@services/user.service'; +import { map } from 'rxjs/operators'; +import { HttpStatusCode } from '@angular/common/http'; @Component({ selector: 'redaction-add-edit-dictionary-dialog', templateUrl: './add-edit-dictionary-dialog.component.html', styleUrls: ['./add-edit-dictionary-dialog.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class AddEditDictionaryDialogComponent extends BaseDialogComponent { - form: FormGroup; - readonly dictionary: Dictionary; - technicalName = ''; - private readonly _dossierTemplateId: string; + readonly form: FormGroup; + readonly dictionary = this._data.dictionary; + readonly canEditLabel$ = this._canEditLabel$; + readonly technicalName$: Observable; + readonly dialogHeader = this._translateService.instant('add-edit-dictionary.title', { + type: this._data.dictionary ? 'edit' : 'create', + name: this._data.dictionary?.label, + }); + readonly hasColor$: Observable; + private readonly _dossierTemplateId = this._data.dossierTemplateId; constructor( - private readonly _dictionaryService: DictionaryService, - private readonly _appStateService: AppStateService, - private readonly _formBuilder: FormBuilder, + readonly userService: UserService, private readonly _toaster: Toaster, + private readonly _formBuilder: FormBuilder, + private readonly _appStateService: AppStateService, private readonly _translateService: TranslateService, + private readonly _dictionaryService: DictionaryService, private readonly _dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) - private readonly _data: { dictionary: Dictionary; dossierTemplateId: string }, + private readonly _data: { readonly dictionary: Dictionary; readonly dossierTemplateId: string }, ) { super(); - this.dictionary = _data.dictionary; - this._dossierTemplateId = _data.dossierTemplateId; this.form = _formBuilder.group({ label: [this.dictionary?.label, [Validators.required, Validators.minLength(3)]], description: [this.dictionary?.description], @@ -43,21 +52,8 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent { addToDictionaryAction: [!!this.dictionary?.addToDictionaryAction], caseSensitive: [this.dictCaseSensitive], }); - this.form.get('label').valueChanges.subscribe(() => { - this._updateTechnicalName(); - }); - } - - get dialogHeader(): string { - return this._translateService.instant('add-edit-dictionary.title', { - type: this.dictionary ? 'edit' : 'create', - name: this.dictionary?.label, - }); - } - - get hasColor(): boolean { - const hexColorValue = this.form.get('hexColor').value; - return !hexColorValue || hexColorValue?.length === 0; + this.hasColor$ = this._colorEmpty$; + this.technicalName$ = this.form.get('label').valueChanges.pipe(map(value => this._toTechnicalName(value))); } get dictCaseSensitive(): boolean { @@ -82,47 +78,58 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent { return false; } - save(): void { + private get _canEditLabel$() { + return this.userService.currentUser$.pipe( + map(user => user.isAdmin || !this._data.dictionary), + shareDistinctLast(), + ); + } + + private get _colorEmpty$() { + return this.form.get('hexColor').valueChanges.pipe(map((value: string) => !value || value?.length === 0)); + } + + async save(): Promise { const dictionary = this._formToObject(); let observable: Observable; + const dossierTemplateId = this._data.dossierTemplateId; if (this.dictionary) { // edit mode - observable = this._dictionaryService.updateDictionary(dictionary, this._dossierTemplateId, dictionary.type); + observable = this._dictionaryService.updateDictionary(dictionary, dossierTemplateId, dictionary.type); } else { // create mode - observable = this._dictionaryService.addDictionary({ ...dictionary, dossierTemplateId: this._dossierTemplateId }); + observable = this._dictionaryService.addDictionary({ ...dictionary, dossierTemplateId }); } - observable.subscribe( - () => this._dialogRef.close(true), - error => { - if (error.status === 409) { + return observable + .toPromise() + .then(() => this._dialogRef.close(true)) + .catch(error => { + if (error.status === HttpStatusCode.Conflict) { this._toaster.error(_('add-edit-dictionary.error.dictionary-already-exists')); - } else if (error.status === 400) { + } else if (error.status === HttpStatusCode.BadRequest) { this._toaster.error(_('add-edit-dictionary.error.invalid-color-or-rank')); } else { this._toaster.error(_('add-edit-dictionary.error.generic')); } - }, - ); + }); } - private _updateTechnicalName() { - const displayName = this.form.get('label').value.trim(); + private _toTechnicalName(value: string) { const existingTechnicalNames = Object.keys(this._appStateService.dictionaryData[this._dossierTemplateId]); - const baseTechnicalName: string = toKebabCase(displayName); + const baseTechnicalName = toKebabCase(value.trim()); let technicalName = baseTechnicalName; let suffix = 1; while (existingTechnicalNames.includes(technicalName)) { technicalName = [baseTechnicalName, suffix++].join('-'); } - this.technicalName = technicalName; + return technicalName; } private _formToObject(): IDictionary { return { - type: this.dictionary?.type || this.technicalName, + type: this.dictionary?.type || this._toTechnicalName(this.form.get('label').value), label: this.form.get('label').value, caseInsensitive: !this.form.get('caseSensitive').value, description: this.form.get('description').value, @@ -130,7 +137,7 @@ export class AddEditDictionaryDialogComponent extends BaseDialogComponent { hint: this.form.get('hint').value, rank: this.form.get('rank').value, addToDictionaryAction: this.form.get('addToDictionaryAction').value, - dossierTemplateId: this._dossierTemplateId, + dossierTemplateId: this._data.dossierTemplateId, }; } } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts index d39d36831..507204c97 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts @@ -7,9 +7,10 @@ import { Moment } from 'moment'; import { applyIntervalConstraints } from '@utils/date-inputs-utils'; import { downloadTypesTranslations } from '../../../../translations/download-types-translations'; import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service'; -import { BaseDialogComponent, CONFLICT_ERROR_CODE, Toaster } from '@iqser/common-ui'; +import { BaseDialogComponent, Toaster } from '@iqser/common-ui'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { DownloadFileType, IDossierTemplate } from '@red/domain'; +import { HttpStatusCode } from '@angular/common/http'; @Component({ templateUrl: './add-edit-dossier-template-dialog.component.html', @@ -108,7 +109,7 @@ export class AddEditDossierTemplateDialogComponent extends BaseDialogComponent { this.dialogRef.close(true); } catch (error: any) { const message = - error.status === CONFLICT_ERROR_CODE + error.status === HttpStatusCode.Conflict ? _('add-edit-dossier-template.error.conflict') : _('add-edit-dossier-template.error.generic'); this._toaster.error(message, { error }); diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts index 515a3f642..a4941ee7d 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts @@ -6,6 +6,7 @@ import { rolesTranslations } from '../../../../../translations/roles-translation import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { User } from '@red/domain'; import { UserService } from '@services/user.service'; +import { HttpStatusCode } from '@angular/common/http'; @Component({ selector: 'redaction-user-details', @@ -119,7 +120,7 @@ export class UserDetailsComponent implements OnInit { this.closeDialog.emit(true); }) .catch(error => { - if (error.status === 409) { + if (error.status === HttpStatusCode.Conflict) { this._toaster.error(_('add-edit-user.error.email-already-used')); } else { this._toaster.error(_('add-edit-user.error.generic')); diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts index 1a0df33c3..f9b5f38ad 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts @@ -1,9 +1,8 @@ import { Component, EventEmitter, forwardRef, Injector, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; -import { Field } from '../file-attributes-csv-import-dialog.component'; import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui'; import { fileAttributeTypesTranslations } from '../../../translations/file-attribute-types-translations'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { FileAttributeConfigTypes } from '@red/domain'; +import { FileAttributeConfigTypes, IField } from '@red/domain'; @Component({ selector: 'redaction-active-fields-listing', @@ -11,11 +10,11 @@ import { FileAttributeConfigTypes } from '@red/domain'; styleUrls: ['./active-fields-listing.component.scss'], providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => ActiveFieldsListingComponent) }], }) -export class ActiveFieldsListingComponent extends ListingComponent implements OnChanges { +export class ActiveFieldsListingComponent extends ListingComponent implements OnChanges { readonly circleButtonTypes = CircleButtonTypes; readonly translations = fileAttributeTypesTranslations; readonly tableHeaderLabel = _('file-attributes-csv-import.table-header.title'); - readonly tableColumnConfigs: TableColumnConfig[] = [ + readonly tableColumnConfigs: TableColumnConfig[] = [ { label: _('file-attributes-csv-import.table-col-names.name'), class: 'name', @@ -40,10 +39,10 @@ export class ActiveFieldsListingComponent extends ListingComponent implem }, ]; readonly typeOptions = Object.keys(FileAttributeConfigTypes); - @Input() entities: Field[]; - @Output() readonly entitiesChange = new EventEmitter(); + @Input() entities: IField[]; + @Output() readonly entitiesChange = new EventEmitter(); @Output() readonly setHoveredColumn = new EventEmitter(); - @Output() readonly toggleFieldActive = new EventEmitter(); + @Output() readonly toggleFieldActive = new EventEmitter(); constructor(protected readonly _injector: Injector) { super(_injector); @@ -56,8 +55,8 @@ export class ActiveFieldsListingComponent extends ListingComponent implem } deactivateSelection() { - this.allEntities.filter(field => this.isSelected(field)).forEach(field => (field.primaryAttribute = false)); - this.entitiesService.setEntities(this.allEntities.filter(field => !this.isSelected(field))); + this.allEntities.filter(field => this.listingService.isSelected(field)).forEach(field => (field.primaryAttribute = false)); + this.entitiesService.setEntities(this.allEntities.filter(field => !this.listingService.isSelected(field))); this.entitiesChange.emit(this.allEntities); this.listingService.setSelected([]); } @@ -68,7 +67,7 @@ export class ActiveFieldsListingComponent extends ListingComponent implem } } - togglePrimary(field: Field) { + togglePrimary(field: IField) { if (field.primaryAttribute) { field.primaryAttribute = false; return; @@ -80,6 +79,6 @@ export class ActiveFieldsListingComponent extends ListingComponent implem field.primaryAttribute = true; } - itemMouseEnterFn = (field: Field) => this.setHoveredColumn.emit(field.csvColumn); + itemMouseEnterFn = (field: IField) => this.setHoveredColumn.emit(field.csvColumn); itemMouseLeaveFn = () => this.setHoveredColumn.emit(); } diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html index ed7b2cde6..05fe95637 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html @@ -102,7 +102,7 @@ (click)="toggleFieldActive(field)" (mouseenter)="setHoveredColumn(field.csvColumn)" (mouseleave)="setHoveredColumn()" - *ngFor="let field of fields" + *ngFor="let field of fields; trackBy: trackBy" class="csv-header-pill-wrapper" >
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts index e0d094671..63e81cb84 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts @@ -1,33 +1,25 @@ -import { Component, Inject, Injector } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Inject, Injector } from '@angular/core'; import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; import * as Papa from 'papaparse'; import { Observable } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; -import { DefaultListingServices, IListable, ListingComponent, TableColumnConfig, Toaster } from '@iqser/common-ui'; +import { DefaultListingServices, ListingComponent, TableColumnConfig, Toaster, trackBy } from '@iqser/common-ui'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; -import { FileAttributeConfig, FileAttributeConfigType, FileAttributeConfigTypes, IFileAttributesConfig } from '@red/domain'; +import { FileAttributeConfig, FileAttributeConfigTypes, IField, IFileAttributesConfig } from '@red/domain'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; -export interface Field extends IListable { - id: string; - csvColumn: string; - name: string; - type: FileAttributeConfigType; - readonly: boolean; - primaryAttribute: boolean; -} - @Component({ templateUrl: './file-attributes-csv-import-dialog.component.html', styleUrls: ['./file-attributes-csv-import-dialog.component.scss'], providers: [...DefaultListingServices], + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FileAttributesCsvImportDialogComponent extends ListingComponent { - readonly tableColumnConfigs: TableColumnConfig[] = []; - parseResult: { data: any[]; errors: any[]; meta: any; fields: Field[] }; +export class FileAttributesCsvImportDialogComponent extends ListingComponent { + readonly tableColumnConfigs: TableColumnConfig[] = []; + parseResult: { data: any[]; errors: any[]; meta: any; fields: IField[] }; hoveredColumn: string; - activeFields: Field[] = []; + activeFields: IField[] = []; readonly baseConfigForm: FormGroup; isSearchOpen = false; previewExpanded = true; @@ -36,6 +28,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent a.csvColumnHeader === entity.csvColumn); + const existing = this.data.existingConfiguration.fileAttributeConfigs?.find(a => a.csvColumnHeader === entity.csvColumn); if (existing) { entity.id = existing.id; entity.name = existing.label; @@ -142,21 +135,20 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent f.id === field.id); } - toggleFieldActive(field: Field) { + toggleFieldActive(field: IField) { if (!this.isActive(field)) { this.activeFields = [...this.activeFields, { ...field, searchKey: field.csvColumn }]; } else { - this.activeFields.splice(this.activeFields.indexOf(field), 1); - this.activeFields = [...this.activeFields]; + this.activeFields = this.activeFields.filter(f => f.id !== field.id); } } activateAll() { - this.activeFields = [...this.allEntities.map(item => ({ ...item, searchKey: item.csvColumn }))]; + this.activeFields = this.allEntities.map(item => ({ ...item, searchKey: item.csvColumn })); } deactivateAll() { @@ -165,12 +157,12 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent attr.primaryAttribute); - let fileAttributeConfigs = this.data.existingConfiguration.fileAttributeConfigs; + let fileAttributeConfigs = this.data.existingConfiguration.fileAttributeConfigs ?? []; if (newPrimary) { fileAttributeConfigs = fileAttributeConfigs.map(attr => new FileAttributeConfig({ ...attr, primaryAttribute: false })); } - const fileAttributes = { + const fileAttributes: IFileAttributesConfig = { ...this.baseConfigForm.getRawValue(), fileAttributeConfigs: [ ...fileAttributeConfigs.filter(a => !this.allEntities.find(entity => entity.csvColumn === a.csvColumnHeader)), @@ -181,12 +173,14 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent +
+ +
+

+
+ +
+ + +
+
+ diff --git a/apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.scss new file mode 100644 index 000000000..ffe8bc1fb --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.scss @@ -0,0 +1,11 @@ +.dialog-header { + color: var(--iqser-primary); +} + +.dialog-actions > *:not(:last-child) { + margin-right: 16px; +} + +.cancel { + margin-left: 8px; +} diff --git a/apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.ts new file mode 100644 index 000000000..2117b1040 --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.ts @@ -0,0 +1,23 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; +import { MatDialogRef } from '@angular/material/dialog'; +import { IconButtonTypes } from '@iqser/common-ui'; + +@Component({ + templateUrl: './upload-dictionary-dialog.component.html', + styleUrls: ['./upload-dictionary-dialog.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class UploadDictionaryDialogComponent { + readonly iconButtonTypes = IconButtonTypes; + + constructor(private readonly _translateService: TranslateService, public dialogRef: MatDialogRef) {} + + cancel() { + this.dialogRef.close(); + } + + selectOption(option: 'overwrite' | 'merge') { + this.dialogRef.close({ option }); + } +} diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts index b6630892b..729330eb0 100644 --- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts @@ -1,7 +1,6 @@ import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit } from '@angular/core'; import { AppStateService } from '@state/app-state.service'; import { DefaultColorType, IColors } from '@red/domain'; -import { ActivatedRoute } from '@angular/router'; import { AdminDialogService } from '../../services/admin-dialog.service'; import { CircleButtonTypes, @@ -43,7 +42,6 @@ export class DefaultColorsScreenComponent extends ListingComponent imp protected readonly _injector: Injector, private readonly _userService: UserService, private readonly _loadingService: LoadingService, - private readonly _activatedRoute: ActivatedRoute, private readonly _appStateService: AppStateService, private readonly _dossierTemplatesService: DossierTemplatesService, private readonly _dialogService: AdminDialogService, diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts index b5667eed1..07c195482 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts @@ -3,7 +3,6 @@ import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/si import { AppStateService } from '@state/app-state.service'; import { catchError, defaultIfEmpty, tap } from 'rxjs/operators'; import { forkJoin, of } from 'rxjs'; -import { ActivatedRoute } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { CircleButtonTypes, @@ -47,7 +46,6 @@ export class DictionaryListingScreenComponent extends ListingComponent - this._dictionaryService.getFor(this._dossierTemplatesService.activeDossierTemplateId, dict.type).pipe( + this._dictionaryService.getForType(this._dossierTemplatesService.activeDossierTemplateId, dict.type).pipe( tap(values => (dict.entries = [...values.entries] ?? [])), catchError(() => { dict.entries = []; diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html index 4600f2688..d7c10b8b8 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html @@ -58,7 +58,7 @@ (saveDictionary)="saveEntries($event)" [canEdit]="currentUser.isAdmin" [filterByDossierTemplate]="true" - [initialEntries]="entries" + [initialEntries]="initialEntries" >
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts index a11c347d3..6f32d193a 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts @@ -20,7 +20,7 @@ export class DictionaryOverviewScreenComponent extends ComponentHasChanges imple readonly circleButtonTypes = CircleButtonTypes; readonly currentUser = this._userService.currentUser; - entries: string[] = []; + initialEntries: string[] = []; dictionary: Dictionary; @ViewChild('dictionaryManager', { static: false }) @@ -98,7 +98,18 @@ export class DictionaryOverviewScreenComponent extends ComponentHasChanges imple if (file) { fileReader.onload = () => { - this._dictionaryManager.editor.value = fileReader.result as string; + const fileContent = fileReader.result as string; + if (this._dictionaryManager.editor.value) { + this._dialogService.openDialog('uploadDictionary', null, null, ({ option }) => { + if (option === 'overwrite') { + this._overwrite(fileContent); + } else if (option === 'merge') { + this._merge(fileContent); + } + }); + } else { + this._overwrite(fileContent); + } this._fileInput.nativeElement.value = null; }; fileReader.readAsText(file); @@ -107,38 +118,55 @@ export class DictionaryOverviewScreenComponent extends ComponentHasChanges imple saveEntries(entries: string[]) { this._loadingService.start(); - this._dictionaryService.saveEntries(entries, this.entries, this.dictionary.dossierTemplateId, this.dictionary.type, null).subscribe( - async () => { - await this._loadEntries(); - }, - () => { - this._loadingService.stop(); - }, - ); + this._dictionaryService + .saveEntries(entries, this.initialEntries, this.dictionary.dossierTemplateId, this.dictionary.type, null) + .subscribe( + async () => { + await this._loadEntries(); + }, + () => { + this._loadingService.stop(); + }, + ); } ngOnDestroy(): void { this._appStateService.reset(); } + private _overwrite(fileContent: string): void { + this._dictionaryManager.editor.value = fileContent; + } + + private _merge(fileContent: string): void { + const currentEntries = this._dictionaryManager.editor.value.split('\n'); + fileContent + .split('\n') + .filter(entry => !currentEntries.includes(entry)) + .forEach(entry => currentEntries.push(entry)); + this._dictionaryManager.editor.value = currentEntries.join('\n'); + } + private async _loadEntries() { this._loadingService.start(); await this._dictionaryService - .getFor(this.dictionary.dossierTemplateId, this.dictionary.type) + .getForType(this.dictionary.dossierTemplateId, this.dictionary.type) .toPromise() .then( data => { this._loadingService.stop(); - this.entries = [...data.entries].sort((str1, str2) => str1.localeCompare(str2, undefined, { sensitivity: 'accent' })); + this.initialEntries = [...data.entries].sort((str1, str2) => + str1.localeCompare(str2, undefined, { sensitivity: 'accent' }), + ); }, () => { this._loadingService.stop(); - this.entries = []; + this.initialEntries = []; }, ) .catch(() => { this._loadingService.stop(); - this.entries = []; + this.initialEntries = []; }); } } diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss index d9f77b434..4526cdf81 100644 --- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss @@ -17,6 +17,6 @@ form { /* target the input field inexplicably to throw Chrome's AI off. * feel free to use a more complicated selector */ -input[name='keySecret'] { +input[name='keySecret']:not(:placeholder-shown) { font-family: 'secret'; } diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts index 7dff45c3b..54dd0a374 100644 --- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts @@ -7,6 +7,7 @@ import { UserService } from '@services/user.service'; import { RouterHistoryService } from '@services/router-history.service'; import { DigitalSignatureService } from '../../services/digital-signature.service'; import { IDigitalSignature } from '@red/domain'; +import { HttpStatusCode } from '@angular/common/http'; @Component({ selector: 'redaction-digital-signature-screen', @@ -55,7 +56,7 @@ export class DigitalSignatureScreenComponent extends AutoUnsubscribe implements this._toaster.success(_('digital-signature-screen.action.save-success')); }, error => { - if (error.status === 400) { + if (error.status === HttpStatusCode.BadRequest) { this._toaster.error(_('digital-signature-screen.action.certificate-not-valid-error')); } else { this._toaster.error(_('digital-signature-screen.action.save-error')); diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts index c9d02247d..5ad935999 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts @@ -9,7 +9,6 @@ import { TableColumnConfig, } from '@iqser/common-ui'; import { AppStateService } from '@state/app-state.service'; -import { ActivatedRoute } from '@angular/router'; import { AdminDialogService } from '../../services/admin-dialog.service'; import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service'; import { dossierAttributeTypesTranslations } from '../../translations/dossier-attribute-types-translations'; @@ -43,7 +42,6 @@ export class DossierAttributesListingScreenComponent extends ListingComponent
-
- {{ dossierTemplate.dateAdded | date: 'd MMM. yyyy' }} +
+
+ {{ dossierTemplate.dateAdded | date: 'd MMM. yyyy' }} +
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts index e905389d8..94dbda669 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts @@ -17,6 +17,7 @@ import { UserService } from '@services/user.service'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { RouterHistoryService } from '@services/router-history.service'; import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service'; +import { HttpStatusCode } from '@angular/common/http'; @Component({ templateUrl: './dossier-templates-listing-screen.component.html', @@ -89,7 +90,7 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent { - if (error.status === 409) { + if (error.status === HttpStatusCode.Conflict) { this._toaster.error(_('dossier-templates-listing.error.conflict')); } else { this._toaster.error(_('dossier-templates-listing.error.generic')); diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts index 7aac12a90..63c984f73 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts @@ -1,6 +1,5 @@ import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { AppStateService } from '@state/app-state.service'; -import { ActivatedRoute } from '@angular/router'; import { AdminDialogService } from '../../services/admin-dialog.service'; import { CircleButtonTypes, @@ -9,6 +8,7 @@ import { ListingComponent, LoadingService, TableColumnConfig, + Toaster, } from '@iqser/common-ui'; import { fileAttributeTypesTranslations } from '../../translations/file-attribute-types-translations'; import { UserService } from '@services/user.service'; @@ -16,6 +16,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { FileAttributeConfig, IFileAttributeConfig, IFileAttributesConfig } from '@red/domain'; import { FileAttributesService } from '@services/entity-services/file-attributes.service'; import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service'; +import { HttpStatusCode } from '@angular/common/http'; @Component({ templateUrl: './file-attributes-listing-screen.component.html', @@ -51,8 +52,8 @@ export class FileAttributesListingScreenComponent extends ListingComponent { - this._loadingService.start(); - await this._fileAttributesService - .setFileAttributesConfig(newValue, this._dossierTemplatesService.activeDossierTemplateId) - .toPromise(); - await this._appStateService.refreshDossierTemplate(this._dossierTemplatesService.activeDossierTemplateId); - await this._loadData(); + (newValue: IFileAttributeConfig) => { + this._loadingService.loadWhile(this._createNewFileAttributeAndRefreshView(newValue)); }, ); } @@ -117,6 +113,23 @@ export class FileAttributesListingScreenComponent extends ListingComponent { + await this._fileAttributesService + .setFileAttributesConfig(newValue, this._dossierTemplatesService.activeDossierTemplateId) + .toPromise() + .catch(error => { + console.log('error'); + if (error.status === HttpStatusCode.Conflict) { + this._toaster.error(_('file-attributes-listing.error.conflict')); + } else { + this._toaster.error(_('file-attributes-listing.error.generic')); + } + this._loadingService.stop(); + }); + await this._appStateService.refreshDossierTemplate(this._dossierTemplatesService.activeDossierTemplateId); + await this._loadData(); + } + private async _loadData() { this._loadingService.start(); diff --git a/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-dialog.service.ts b/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-dialog.service.ts index 523bbee1d..a4ee07326 100644 --- a/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-dialog.service.ts +++ b/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-dialog.service.ts @@ -5,7 +5,6 @@ import { ConfirmationDialogInput, DialogConfig, DialogService, - ListingService, LoadingService, TitleColors, } from '@iqser/common-ui'; @@ -38,7 +37,7 @@ export class JustificationsDialogService extends DialogService { super(_dialog); } - confirmDelete(justifications: Justification[], listingService: ListingService) { + confirmDelete(justifications: Justification[]) { const data = new ConfirmationDialogInput({ title: _('confirmation-dialog.delete-justification.title'), titleColor: TitleColors.WARN, diff --git a/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-screen/justifications-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-screen/justifications-screen.component.ts index d7aa71663..7a2008ccb 100644 --- a/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-screen/justifications-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-screen/justifications-screen.component.ts @@ -59,6 +59,6 @@ export class JustificationsScreenComponent extends ListingComponent { @@ -76,6 +78,9 @@ export class AdminDialogService extends DialogService { component: AddEditJustificationDialogComponent, dialogConfig: { autoFocus: true }, }, + uploadDictionary: { + component: UploadDictionaryDialogComponent, + }, }; constructor(protected readonly _dialog: MatDialog) { diff --git a/apps/red-ui/src/app/modules/auth/auth.module.ts b/apps/red-ui/src/app/modules/auth/auth.module.ts index b4bbe3a24..1246d36fd 100644 --- a/apps/red-ui/src/app/modules/auth/auth.module.ts +++ b/apps/red-ui/src/app/modules/auth/auth.module.ts @@ -5,7 +5,6 @@ import { HttpClientModule } from '@angular/common/http'; import { KeycloakAngularModule, KeycloakOptions, KeycloakService } from 'keycloak-angular'; import { ConfigService } from '@services/config.service'; import { BASE_HREF } from '../../tokens'; -import { environment } from '@environments/environment'; function getKeycloakOptions(configService: ConfigService, baseUrl: string) { let url: string = configService.values.OAUTH_URL; @@ -21,9 +20,7 @@ function getKeycloakOptions(configService: ConfigService, baseUrl: string) { initOptions: { checkLoginIframe: false, onLoad: 'check-sso', - silentCheckSsoRedirectUri: environment.production - ? window.location.origin + baseUrl + '/assets/oauth/silent-refresh.html' - : null, + silentCheckSsoRedirectUri: window.location.origin + baseUrl + '/assets/oauth/silent-refresh.html', flow: 'standard', }, enableBearerInterceptor: true, diff --git a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html index e7ca4524f..661024ca0 100644 --- a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html @@ -1,109 +1,142 @@
- + + + - + + - + + + - + - + - + - + - + - + - + - + - + + + + + + + +
diff --git a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts index 2b86746fd..10bcfa8b4 100644 --- a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts @@ -1,11 +1,12 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; -import { AppStateService } from '@state/app-state.service'; import { PermissionsService } from '@services/permissions.service'; import { AnnotationPermissions } from '@models/file/annotation.permissions'; import { AnnotationActionsService } from '../../services/annotation-actions.service'; import { WebViewerInstance } from '@pdftron/webviewer'; import { UserService } from '@services/user.service'; +import { Dossier } from '@red/domain'; +import { Required } from '@iqser/common-ui'; export const AnnotationButtonTypes = { dark: 'dark', @@ -19,17 +20,17 @@ export type AnnotationButtonType = keyof typeof AnnotationButtonTypes; templateUrl: './annotation-actions.component.html', styleUrls: ['./annotation-actions.component.scss'], }) -export class AnnotationActionsComponent implements OnInit { +export class AnnotationActionsComponent implements OnChanges { @Input() buttonType: AnnotationButtonType = AnnotationButtonTypes.dark; @Input() tooltipPosition: 'before' | 'above' = 'before'; @Input() canPerformAnnotationActions: boolean; @Input() viewer: WebViewerInstance; @Input() alwaysVisible: boolean; + @Input() @Required() dossier!: Dossier; @Output() annotationsChanged = new EventEmitter(); annotationPermissions: AnnotationPermissions; constructor( - readonly appStateService: AppStateService, readonly annotationActionsService: AnnotationActionsService, private readonly _permissionsService: PermissionsService, private readonly _userService: UserService, @@ -44,7 +45,6 @@ export class AnnotationActionsComponent implements OnInit { @Input() set annotations(value: AnnotationWrapper[]) { this._annotations = value.filter(a => a !== undefined); - this._setPermissions(); } get viewerAnnotations() { @@ -63,17 +63,27 @@ export class AnnotationActionsComponent implements OnInit { return this.annotations?.reduce((accumulator, annotation) => annotation.isImage && accumulator, true); } - ngOnInit(): void { + get resizing() { + return this.annotations?.length === 1 && this.annotations?.[0].resizing; + } + + ngOnChanges(): void { this._setPermissions(); } suggestRemoveAnnotations($event, removeFromDict: boolean) { $event.stopPropagation(); - this.annotationActionsService.suggestRemoveAnnotation($event, this.annotations, removeFromDict, this.annotationsChanged); + this.annotationActionsService.suggestRemoveAnnotation( + $event, + this.annotations, + this.dossier, + removeFromDict, + this.annotationsChanged, + ); } markAsFalsePositive($event) { - this.annotationActionsService.markAsFalsePositive($event, this.annotations, this.annotationsChanged); + this.annotationActionsService.markAsFalsePositive($event, this.annotations, this.dossier, this.annotationsChanged); } hideAnnotation($event: MouseEvent) { @@ -90,9 +100,21 @@ export class AnnotationActionsComponent implements OnInit { this.annotationActionsService.updateHiddenAnnotation(this.annotations, this.viewerAnnotations, false); } + resize($event: MouseEvent) { + this.annotationActionsService.resize($event, this.viewer, this.annotations[0]); + } + + acceptResize($event: MouseEvent) { + this.annotationActionsService.acceptResize($event, this.viewer, this.dossier, this.annotations[0], this.annotationsChanged); + } + + cancelResize($event: MouseEvent) { + this.annotationActionsService.cancelResize($event, this.viewer, this.annotations[0], this.annotationsChanged); + } + private _setPermissions() { this.annotationPermissions = AnnotationPermissions.forUser( - this._permissionsService.isApprover(), + this._permissionsService.isApprover(this.dossier), this._userService.currentUser, this.annotations, ); diff --git a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html index 190e5a2c7..8686a4b2e 100644 --- a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html @@ -1,32 +1,34 @@ -
-
-
- {{ comment.user | name }} - {{ comment.date | date: 'sophisticatedDate' }} + +
+
+
+ {{ comment.user | name }} + {{ comment.date | date: 'sophisticatedDate' }} +
+ +
+ +
-
- -
+
{{ comment.text }}
-
{{ comment.text }}
-
- - + +
diff --git a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.ts b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.ts index 0412ddced..454d090e4 100644 --- a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.ts @@ -1,10 +1,13 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, ViewChild } from '@angular/core'; -import { IComment } from '@red/domain'; +import { File, IComment } from '@red/domain'; import { ManualAnnotationService } from '../../services/manual-annotation.service'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { UserService } from '@services/user.service'; import { PermissionsService } from '@services/permissions.service'; import { InputWithActionComponent, trackBy } from '@iqser/common-ui'; +import { FilesMapService } from '@services/entity-services/files-map.service'; +import { ActivatedRoute } from '@angular/router'; +import { Observable } from 'rxjs'; @Component({ selector: 'redaction-comments', @@ -15,27 +18,37 @@ import { InputWithActionComponent, trackBy } from '@iqser/common-ui'; export class CommentsComponent { @Input() annotation: AnnotationWrapper; readonly trackBy = trackBy(); + readonly file$: Observable; @HostBinding('class.hidden') private _hidden = true; @ViewChild(InputWithActionComponent) private readonly _input: InputWithActionComponent; + private readonly _fileId: string; + private readonly _dossierId: string; constructor( readonly permissionsService: PermissionsService, private readonly _userService: UserService, private readonly _manualAnnotationService: ManualAnnotationService, private readonly _changeDetectorRef: ChangeDetectorRef, - ) {} + readonly filesMapService: FilesMapService, + activatedRoute: ActivatedRoute, + ) { + this._fileId = activatedRoute.snapshot.paramMap.get('fileId'); + this._dossierId = activatedRoute.snapshot.paramMap.get('dossierId'); + this.file$ = filesMapService.watch$(this._dossierId, this._fileId); + } addComment(value: string): void { if (!value) { return; } this._manualAnnotationService - .addComment(value, this.annotation.id) + .addComment(value, this.annotation.id, this._dossierId, this._fileId) .toPromise() .then(commentId => { this.annotation.comments.push({ text: value, id: commentId, + annotationId: this.annotation.id, user: this._userService.currentUser.id, }); this._input.reset(); @@ -50,7 +63,7 @@ export class CommentsComponent { deleteComment(comment: IComment): void { this._manualAnnotationService - .deleteComment(comment.id, this.annotation.id) + .deleteComment(comment.id, this.annotation.id, this._dossierId, this._fileId) .toPromise() .then(() => { this.annotation.comments.splice(this.annotation.comments.indexOf(comment), 1); diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.html index 74539ea38..9527825e8 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.html @@ -11,7 +11,7 @@
- +
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.ts index a09b7aba9..152023efa 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/components/annotations-list/annotations-list.component.ts @@ -1,6 +1,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { IqserEventTarget } from '@iqser/common-ui'; +import { File } from '@red/domain'; @Component({ selector: 'redaction-annotations-list', @@ -9,6 +10,7 @@ import { IqserEventTarget } from '@iqser/common-ui'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class AnnotationsListComponent { + @Input() file: File; @Input() annotations: AnnotationWrapper[]; @Input() selectedAnnotations: AnnotationWrapper[]; @Input() annotationActionsTemplate: TemplateRef; diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html index ad93dcfe9..79d5cc468 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html @@ -5,11 +5,13 @@ *ngIf="!multiSelectActive && !isReadOnly" class="all-caps-label primary pointer" translate="file-preview.tabs.annotations.select" + iqserHelpMode="bulk-select-annotations" >
@@ -26,17 +28,20 @@
-
-
- - -
+
+
+
+ + +
+
+
-
- - {{ activeViewerPage }} - - {{ activeAnnotations?.length || 0 }} - +
+ + + + + {{ activeViewerPage }} - + {{ activeAnnotations?.length || 0 }} + +
@@ -141,13 +159,9 @@ [verticalPadding]="40" icon="iqser:document" > - + {{ 'file-preview.tabs.annotations.page-is' | translate }} - . @@ -173,13 +187,15 @@
@@ -187,7 +203,7 @@
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss index 7636f6bec..46fc452ab 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss @@ -167,3 +167,11 @@ } } } + +.padding-left-0 { + padding-left: 0 !important; +} + +::ng-deep .page-separator iqser-circle-button mat-icon { + color: var(--iqser-primary); +} diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts index abeb97c36..ea23c01ed 100644 --- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts @@ -1,14 +1,25 @@ -import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + HostListener, + Input, + Output, + TemplateRef, + ViewChild, +} from '@angular/core'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { AnnotationProcessingService } from '../../services/annotation-processing.service'; import { MatDialogRef, MatDialogState } from '@angular/material/dialog'; import scrollIntoView from 'scroll-into-view-if-needed'; -import { CircleButtonTypes, Debounce, FilterService, IconButtonTypes, INestedFilter, IqserEventTarget } from '@iqser/common-ui'; -import { FileDataModel } from '@models/file/file-data.model'; +import { CircleButtonTypes, Debounce, FilterService, IconButtonTypes, INestedFilter, IqserEventTarget, Required } from '@iqser/common-ui'; import { PermissionsService } from '@services/permissions.service'; import { WebViewerInstance } from '@pdftron/webviewer'; import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; import { map } from 'rxjs/operators'; +import { Dossier, File, IViewedPage } from '@red/domain'; const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape']; const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; @@ -17,6 +28,7 @@ const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; selector: 'redaction-file-workload', templateUrl: './file-workload.component.html', styleUrls: ['./file-workload.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class FileWorkloadComponent { readonly iconButtonTypes = IconButtonTypes; @@ -27,7 +39,9 @@ export class FileWorkloadComponent { @Input() activeViewerPage: number; @Input() shouldDeselectAnnotationsOnPageChange: boolean; @Input() dialogRef: MatDialogRef; - @Input() fileData: FileDataModel; + @Input() viewedPages: IViewedPage[]; + @Input() @Required() file!: File; + @Input() @Required() dossier!: Dossier; @Input() hideSkipped: boolean; @Input() excludePages: boolean; @Input() annotationActionsTemplate: TemplateRef; @@ -78,16 +92,16 @@ export class FileWorkloadComponent { } } - get isProcessing(): boolean { - return this.fileData?.file?.isProcessing; - } - get activeAnnotations(): AnnotationWrapper[] | undefined { return this.displayedAnnotations.get(this.activeViewerPage); } get isReadOnly(): boolean { - return !this._permissionsService.canPerformAnnotationActions(); + return !this._permissionsService.canPerformAnnotationActions(this.file); + } + + get currentPageIsExcluded(): boolean { + return this.file?.excludedPages?.includes(this.activeViewerPage); } private get _firstSelectedAnnotation() { @@ -114,6 +128,11 @@ export class FileWorkloadComponent { } } + hasOnlyManualRedactionsAndNotExcluded(pageNumber: number): boolean { + const hasOnlyManualRedactions = this.displayedAnnotations.get(pageNumber).every(annotation => annotation.manual); + return hasOnlyManualRedactions && this.file.excludedPages.includes(pageNumber); + } + pageHasSelection(page: number) { return this.multiSelectActive && !!this.selectedAnnotations?.find(a => a.pageNumber === page); } @@ -162,7 +181,7 @@ export class FileWorkloadComponent { this._navigatePages($event); } - this._changeDetectorRef.detectChanges(); + this._changeDetectorRef.markForCheck(); } scrollAnnotations(): void { @@ -203,7 +222,7 @@ export class FileWorkloadComponent { } scrollQuickNavLast(): void { - this.selectPage.emit(this.fileData.file.numberOfPages); + this.selectPage.emit(this.file.numberOfPages); } pageSelectedByClick($event: number): void { @@ -225,6 +244,10 @@ export class FileWorkloadComponent { this.selectPage.emit(this._nextPageWithAnnotations()); } + viewExcludePages(): void { + this.actionPerformed.emit('view-exclude-pages'); + } + private _filterAnnotations( annotations: AnnotationWrapper[], primary: INestedFilter[], diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html index e1923ce1f..623b48ca9 100644 --- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html @@ -1,4 +1,4 @@ -
+
{{ range.startPage }} -{{ range.endPage }} @@ -29,7 +29,7 @@
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts index 14c4a721f..122980e03 100644 --- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts @@ -40,8 +40,9 @@ export class PageExclusionComponent implements OnChanges { }, []); } - async excludePagesRange(value: string): Promise { + async excludePagesRange(inputValue: string): Promise { this._loadingService.start(); + const value = inputValue.replace(/[^0-9-,]/g, ''); try { const pageRanges = value.split(',').map(range => { const splitted = range.split('-'); diff --git a/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.html b/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.html index c7db169f4..420ce5f46 100644 --- a/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.html @@ -6,7 +6,7 @@ [id]="'quick-nav-page-' + number" class="page-wrapper" > - +
{{ number }}
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.ts b/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.ts index 29ea3b674..cc63a24e3 100644 --- a/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/page-indicator/page-indicator.component.ts @@ -1,19 +1,26 @@ -import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core'; -import { AppStateService } from '@state/app-state.service'; +import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core'; import { PermissionsService } from '@services/permissions.service'; import { ConfigService } from '@services/config.service'; -import { Subscription } from 'rxjs'; import { DossiersService } from '@services/entity-services/dossiers.service'; import { ViewedPagesService } from '../../shared/services/viewed-pages.service'; -import { IViewedPage } from '@red/domain'; +import { File, IViewedPage } from '@red/domain'; +import { AutoUnsubscribe } from '@iqser/common-ui'; +import { FilesMapService } from '@services/entity-services/files-map.service'; @Component({ selector: 'redaction-page-indicator', templateUrl: './page-indicator.component.html', styleUrls: ['./page-indicator.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class PageIndicatorComponent implements OnChanges, OnInit, OnDestroy { - @Input() active: boolean; +export class PageIndicatorComponent extends AutoUnsubscribe implements OnDestroy, OnChanges { + @Input() + file: File; + + @Input() + active = false; + + @Input() showDottedIcon = false; @Input() number: number; @Input() viewedPages: IViewedPage[]; @Input() activeSelection = false; @@ -21,16 +28,16 @@ export class PageIndicatorComponent implements OnChanges, OnInit, OnDestroy { @Output() readonly pageSelected = new EventEmitter(); pageReadTimeout: number = null; - canMarkPagesAsViewed: boolean; - private _subscription: Subscription; constructor( private readonly _viewedPagesService: ViewedPagesService, - private readonly _appStateService: AppStateService, + private readonly _filesMapService: FilesMapService, private readonly _dossiersService: DossiersService, private readonly _configService: ConfigService, private readonly _permissionService: PermissionsService, - ) {} + ) { + super(); + } get activePage() { return this.viewedPages?.find(p => p.page === this.number); @@ -45,49 +52,35 @@ export class PageIndicatorComponent implements OnChanges, OnInit, OnDestroy { } } - ngOnInit(): void { - this._subscription = this._appStateService.fileChanged$.subscribe(() => { - if (this.canMarkPagesAsViewed !== this._permissionService.canMarkPagesAsViewed()) { - this.canMarkPagesAsViewed = this._permissionService.canMarkPagesAsViewed(); - this._handlePageRead(); - } - }); + ngOnChanges() { + this.handlePageRead(); } - ngOnChanges(changes: SimpleChanges): void { - if (changes.active) { - this._handlePageRead(); - } - } - - toggleReadState() { - if (this.canMarkPagesAsViewed) { + async toggleReadState() { + if (this._permissionService.canMarkPagesAsViewed(this.file)) { if (this.read) { - this._markPageUnread(); + await this._markPageUnread(); } else { - this._markPageRead(); + await this._markPageRead(); } } } - ngOnDestroy(): void { - if (this._subscription) { - this._subscription.unsubscribe(); + handlePageRead() { + if (!this._permissionService.canMarkPagesAsViewed(this.file)) { + return; } - } - private _handlePageRead() { - if (this.canMarkPagesAsViewed) { - if (this.pageReadTimeout) { - clearTimeout(this.pageReadTimeout); - } - if (this.active && !this.read) { - this.pageReadTimeout = window.setTimeout(() => { - if (this.active && !this.read) { - this._markPageRead(); - } - }, this._configService.values.AUTO_READ_TIME * 1000); - } + if (this.pageReadTimeout) { + clearTimeout(this.pageReadTimeout); + } + + if (this.active && !this.read) { + this.pageReadTimeout = window.setTimeout(async () => { + if (this.active && !this.read) { + await this._markPageRead(); + } + }, this._configService.values.AUTO_READ_TIME * 1000); } } @@ -108,26 +101,20 @@ export class PageIndicatorComponent implements OnChanges, OnInit, OnDestroy { // } // } - private _markPageRead() { - this._viewedPagesService - .addPage({ page: this.number }, this._dossiersService.activeDossierId, this._appStateService.activeFileId) - .subscribe(() => { - if (this.activePage) { - this.activePage.hasChanges = false; - } else { - this.viewedPages?.push({ page: this.number, fileId: this._appStateService.activeFileId }); - } - }); + private async _markPageRead() { + await this._viewedPagesService.addPage({ page: this.number }, this.file.dossierId, this.file.fileId).toPromise(); + if (this.activePage) { + this.activePage.hasChanges = false; + } else { + this.viewedPages?.push({ page: this.number, fileId: this.file.fileId }); + } } - private _markPageUnread() { - this._viewedPagesService - .removePage(this._dossiersService.activeDossierId, this._appStateService.activeFileId, this.number) - .subscribe(() => { - this.viewedPages?.splice( - this.viewedPages?.findIndex(p => p.page === this.number), - 1, - ); - }); + private async _markPageUnread() { + await this._viewedPagesService.removePage(this.file.dossierId, this.file.fileId, this.number).toPromise(); + this.viewedPages?.splice( + this.viewedPages?.findIndex(p => p.page === this.number), + 1, + ); } } diff --git a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts index 4cd21ba90..2b98ab406 100644 --- a/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/pdf-viewer/pdf-viewer.component.ts @@ -11,10 +11,14 @@ import { SimpleChanges, ViewChild, } from '@angular/core'; -import { File, IManualRedactionEntry, ViewMode } from '@red/domain'; +import { Dossier, File, IManualRedactionEntry, ViewMode } from '@red/domain'; import WebViewer, { Core, WebViewerInstance } from '@pdftron/webviewer'; import { TranslateService } from '@ngx-translate/core'; -import { ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper'; +import { + ManualRedactionEntryType, + ManualRedactionEntryTypes, + ManualRedactionEntryWrapper, +} from '@models/file/manual-redaction-entry.wrapper'; import { AnnotationWrapper } from '@models/file/annotation.wrapper'; import { ManualAnnotationService } from '../../services/manual-annotation.service'; import { environment } from '@environments/environment'; @@ -29,10 +33,26 @@ import { loadCompareDocumentWrapper } from '../../utils/compare-mode.utils'; import { PdfViewerUtils } from '../../utils/pdf-viewer.utils'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { ActivatedRoute } from '@angular/router'; +import { toPosition } from '../../utils/pdf-calculation.utils'; +import { DossiersService } from '@services/entity-services/dossiers.service'; import Tools = Core.Tools; import TextTool = Tools.TextTool; import Annotation = Core.Annotations.Annotation; +const ALLOWED_KEYBOARD_SHORTCUTS = ['+', '-', 'p', 'r', 'Escape'] as const; +const dataElements = { + ADD_REDACTION: 'add-redaction', + ADD_DICTIONARY: 'add-dictionary', + ADD_RECTANGLE: 'add-rectangle', + ADD_FALSE_POSITIVE: 'add-false-positive', + SHAPE_TOOL_GROUP_BUTTON: 'shapeToolGroupButton', + RECTANGLE_TOOL_DIVIDER: 'rectangleToolDivider', + ANNOTATION_POPUP: 'annotationPopup', + COMPARE_BUTTON: 'compareButton', + CLOSE_COMPARE_BUTTON: 'closeCompareButton', + COMPARE_TOOL_DIVIDER: 'compareToolDivider', +} as const; + @Component({ selector: 'redaction-pdf-viewer', templateUrl: './pdf-viewer.component.html', @@ -55,10 +75,11 @@ export class PdfViewerComponent implements OnInit, OnChanges { @ViewChild('viewer', { static: true }) viewer: ElementRef; @ViewChild('compareFileInput', { static: true }) compareFileInput: ElementRef; instance: WebViewerInstance; + documentViewer: Core.DocumentViewer; + annotationManager: Core.AnnotationManager; utils: PdfViewerUtils; private _selectedText = ''; private _firstPageChange = true; - private readonly _allowedKeyboardShortcuts = ['+', '-', 'p', 'r', 'Escape']; constructor( @Inject(BASE_HREF) private readonly _baseHref: string, @@ -72,6 +93,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { private readonly _annotationActionsService: AnnotationActionsService, private readonly _configService: ConfigService, private readonly _loadingService: LoadingService, + private readonly _dossiersService: DossiersService, ) {} private _viewMode: ViewMode = 'STANDARD'; @@ -85,97 +107,95 @@ export class PdfViewerComponent implements OnInit, OnChanges { this.utils.viewMode = value; } + private get _dossier(): Dossier { + return this._dossiersService.find(this.file.dossierId); + } + async ngOnInit() { - this._documentLoaded = this._documentLoaded.bind(this); + this._setReadyAndInitialState = this._setReadyAndInitialState.bind(this); await this._loadViewer(); } ngOnChanges(changes: SimpleChanges): void { - if (this.instance) { - if (changes.fileData) { - this._loadDocument(); - } - if (changes.canPerformActions) { - this._handleCustomActions(); - } - if (changes.multiSelectActive) { - this.utils.multiSelectActive = this.multiSelectActive; - } + if (!this.instance) { + return; } - } - setInitialViewerState() { - // viewer init - this.instance.UI.setFitMode('FitPage'); + if (changes.fileData) { + this._loadDocument(); + } - const instanceDisplayMode = this.instance.Core.documentViewer.getDisplayModeManager().getDisplayMode(); - instanceDisplayMode.mode = this.viewMode === 'STANDARD' ? 'Single' : 'Facing'; - this.instance.Core.documentViewer.getDisplayModeManager().setDisplayMode(instanceDisplayMode); + if (changes.canPerformActions) { + this._handleCustomActions(); + } + + if (changes.multiSelectActive) { + this.utils.multiSelectActive = this.multiSelectActive; + } } uploadFile(files: any) { const fileToCompare = files[0]; this.compareFileInput.nativeElement.value = null; - const fileReader = new FileReader(); - - if (fileToCompare) { - fileReader.onload = async () => { - const pdfData = fileReader.result; - const pdfNet = this.instance.Core.PDFNet; - - await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null); - - const mergedDocument = await pdfNet.PDFDoc.create(); - const compareDocument = await pdfNet.PDFDoc.createFromBuffer(pdfData); - const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this.fileData.arrayBuffer()); - - const currentDocumentPageCount = await currentDocument.getPageCount(); - const compareDocumentPageCount = await compareDocument.getPageCount(); - - const loadCompareDocument = async () => { - this._loadingService.start(); - this.utils.ready = false; - await loadCompareDocumentWrapper( - currentDocumentPageCount, - compareDocumentPageCount, - currentDocument, - compareDocument, - mergedDocument, - this.instance, - this.file, - () => { - this.viewMode = 'COMPARE'; - }, - () => { - this.utils.navigateToPage(1); - }, - this.instance.Core.PDFNet, - ); - this._loadingService.stop(); - }; - - if (currentDocumentPageCount !== compareDocumentPageCount) { - this._dialogService.openDialog( - 'confirm', - null, - new ConfirmationDialogInput({ - title: _('confirmation-dialog.compare-file.title'), - question: _('confirmation-dialog.compare-file.question'), - translateParams: { - fileName: fileToCompare.name, - currentDocumentPageCount, - compareDocumentPageCount, - }, - }), - loadCompareDocument, - ); - } else { - await loadCompareDocument(); - } - }; + if (!fileToCompare) { + console.error('No file to compare!'); + return; } + const fileReader = new FileReader(); + fileReader.onload = async () => { + const pdfNet = this.instance.Core.PDFNet; + + await pdfNet.initialize(environment.licenseKey ? atob(environment.licenseKey) : null); + + const compareDocument = await pdfNet.PDFDoc.createFromBuffer(fileReader.result as ArrayBuffer); + const currentDocument = await pdfNet.PDFDoc.createFromBuffer(await this.fileData.arrayBuffer()); + + const loadCompareDocument = async () => { + this._loadingService.start(); + this.utils.ready = false; + const mergedDocument = await pdfNet.PDFDoc.create(); + await loadCompareDocumentWrapper( + currentDocument, + compareDocument, + mergedDocument, + this.instance, + this.file, + () => { + this.viewMode = 'COMPARE'; + }, + () => { + this.utils.navigateToPage(1); + }, + this.instance.Core.PDFNet, + ); + this._loadingService.stop(); + }; + + const currentDocumentPageCount = await currentDocument.getPageCount(); + const compareDocumentPageCount = await compareDocument.getPageCount(); + + if (currentDocumentPageCount !== compareDocumentPageCount) { + this._dialogService.openDialog( + 'confirm', + null, + new ConfirmationDialogInput({ + title: _('confirmation-dialog.compare-file.title'), + question: _('confirmation-dialog.compare-file.question'), + translateParams: { + fileName: fileToCompare.name, + currentDocumentPageCount, + compareDocumentPageCount, + }, + }), + loadCompareDocument, + ); + } else { + await loadCompareDocument(); + } + }; + fileReader.readAsArrayBuffer(fileToCompare); } @@ -187,11 +207,18 @@ export class PdfViewerComponent implements OnInit, OnChanges { this.instance.UI.loadDocument(currentDocument, { filename: this.file ? this.file.filename : 'document.pdf', }); - this.instance.UI.disableElements(['closeCompareButton']); - this.instance.UI.enableElements(['compareButton']); + this.instance.UI.disableElements([dataElements.CLOSE_COMPARE_BUTTON]); + this.instance.UI.enableElements([dataElements.COMPARE_BUTTON]); this.utils.navigateToPage(1); } + private _setInitialDisplayMode() { + this.instance.UI.setFitMode('FitPage'); + const instanceDisplayMode = this.documentViewer.getDisplayModeManager().getDisplayMode(); + instanceDisplayMode.mode = this.viewMode === 'STANDARD' ? 'Single' : 'Facing'; + this.documentViewer.getDisplayModeManager().setDisplayMode(instanceDisplayMode); + } + private _convertPath(path: string): string { return this._baseHref + path; } @@ -208,6 +235,8 @@ export class PdfViewerComponent implements OnInit, OnChanges { this.viewer.nativeElement, ); + this.documentViewer = this.instance.Core.documentViewer; + this.annotationManager = this.instance.Core.annotationManager; this.utils = new PdfViewerUtils(this.instance, this.viewMode, this.multiSelectActive); this._setSelectionMode(); @@ -215,8 +244,8 @@ export class PdfViewerComponent implements OnInit, OnChanges { this.utils.disableHotkeys(); this._configureTextPopup(); - this.instance.Core.annotationManager.on('annotationSelected', (annotations, action) => { - this.annotationSelected.emit(this.instance.Core.annotationManager.getSelectedAnnotations().map(ann => ann.Id)); + this.annotationManager.on('annotationSelected', (annotations, action) => { + this.annotationSelected.emit(this.annotationManager.getSelectedAnnotations().map(ann => ann.Id)); if (action === 'deselected') { this._toggleRectangleAnnotationAction(true); } else { @@ -225,16 +254,17 @@ export class PdfViewerComponent implements OnInit, OnChanges { } }); - this.instance.Core.annotationManager.on('annotationChanged', annotations => { + this.annotationManager.on('annotationChanged', annotations => { // when a rectangle is drawn, // it returns one annotation with tool name 'AnnotationCreateRectangle; // this will auto select rectangle after drawing if (annotations.length === 1 && annotations[0].ToolName === 'AnnotationCreateRectangle') { - this.instance.Core.annotationManager.selectAnnotations(annotations); + this.annotationManager.selectAnnotations(annotations); + annotations[0].setRotationControlEnabled(false); } }); - this.instance.Core.documentViewer.on('pageNumberUpdated', pageNumber => { + this.documentViewer.on('pageNumberUpdated', pageNumber => { if (this.shouldDeselectAnnotationsOnPageChange) { this.utils.deselectAllAnnotations(); } @@ -250,9 +280,9 @@ export class PdfViewerComponent implements OnInit, OnChanges { this._handleCustomActions(); }); - this.instance.Core.documentViewer.on('documentLoaded', this._documentLoaded); + this.documentViewer.on('documentLoaded', this._setReadyAndInitialState); - this.instance.Core.documentViewer.on('keyUp', $event => { + this.documentViewer.on('keyUp', $event => { // arrows and full-screen if ($event.target?.tagName?.toLowerCase() !== 'input') { if ($event.key.startsWith('Arrow') || $event.key === 'f') { @@ -264,18 +294,20 @@ export class PdfViewerComponent implements OnInit, OnChanges { } } - if (this._allowedKeyboardShortcuts.indexOf($event.key) < 0) { + if (ALLOWED_KEYBOARD_SHORTCUTS.indexOf($event.key) < 0) { $event.preventDefault(); $event.stopPropagation(); } }); - this.instance.Core.documentViewer.on('textSelected', (quads, selectedText) => { + this.documentViewer.on('textSelected', (quads, selectedText) => { this._selectedText = selectedText; - if (selectedText.length > 2 && this.canPerformActions) { - this.instance.UI.enableElements(['add-dictionary', 'add-false-positive']); + const textActions = [dataElements.ADD_DICTIONARY, dataElements.ADD_FALSE_POSITIVE]; + + if (selectedText.length > 2 && this.canPerformActions && !this.utils.isCurrentPageExcluded) { + this.instance.UI.enableElements(textActions); } else { - this.instance.UI.disableElements(['add-dictionary', 'add-false-positive']); + this.instance.UI.disableElements(textActions); } }); @@ -286,7 +318,7 @@ export class PdfViewerComponent implements OnInit, OnChanges { inputElement.value = ''; }, 0); if (!event.detail.isVisible) { - this.instance.Core.documentViewer.clearSearchResults(); + this.documentViewer.clearSearchResults(); } } }); @@ -295,15 +327,15 @@ export class PdfViewerComponent implements OnInit, OnChanges { } private _setSelectionMode(): void { - const textTool = ( this.instance.Core.Tools.TextTool) as TextTool; + const textTool = this.instance.Core.Tools.TextTool as unknown as TextTool; textTool.SELECTION_MODE = this._configService.values.SELECTION_MODE; } - private _toggleRectangleAnnotationAction(readonly: boolean) { + private _toggleRectangleAnnotationAction(readonly = false) { if (!readonly) { - this.instance.UI.enableElements(['add-rectangle']); + this.instance.UI.enableElements([dataElements.ADD_RECTANGLE]); } else { - this.instance.UI.disableElements(['add-rectangle']); + this.instance.UI.disableElements([dataElements.ADD_RECTANGLE]); } } @@ -331,53 +363,64 @@ export class PdfViewerComponent implements OnInit, OnChanges { 'annotationGroupButton', ]); - this.instance.UI.setHeaderItems(header => { - const originalHeaderItems = header.getItems(); - originalHeaderItems.splice(8, 0, { + const headerItems = [ + { type: 'divider', - dataElement: 'rectangleToolDivider', - }); - originalHeaderItems.splice(9, 0, { + dataElement: dataElements.RECTANGLE_TOOL_DIVIDER, + }, + { type: 'toolGroupButton', toolGroup: 'rectangleTools', - dataElement: 'shapeToolGroupButton', + dataElement: dataElements.SHAPE_TOOL_GROUP_BUTTON, img: this._convertPath('/assets/icons/general/rectangle.svg'), title: 'annotation.rectangle', - }); + }, + ]; + + this.instance.UI.setHeaderItems(header => { + const originalHeaderItems = header.getItems(); + originalHeaderItems.splice(8, 0, ...headerItems); + if (this._userPreferenceService.areDevFeaturesEnabled) { - originalHeaderItems.splice(11, 0, { - type: 'actionButton', - element: 'compare', - dataElement: 'compareButton', - img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'), - title: 'Compare', - onClick: () => { - this.compareFileInput.nativeElement.click(); + const devHeaderItems = [ + { + type: 'actionButton', + element: 'compare', + dataElement: dataElements.COMPARE_BUTTON, + img: this._convertPath('/assets/icons/general/pdftron-action-compare.svg'), + title: 'Compare', + onClick: () => { + this.compareFileInput.nativeElement.click(); + }, }, - }); - originalHeaderItems.splice(11, 0, { - type: 'actionButton', - element: 'closeCompare', - dataElement: 'closeCompareButton', - img: this._convertPath('/assets/icons/general/pdftron-action-close-compare.svg'), - title: 'Leave Compare Mode', - onClick: () => { - this.closeCompareMode(); + { + type: 'actionButton', + element: 'closeCompare', + dataElement: dataElements.CLOSE_COMPARE_BUTTON, + img: this._convertPath('/assets/icons/general/pdftron-action-close-compare.svg'), + title: 'Leave Compare Mode', + onClick: async () => { + await this.closeCompareMode(); + }, }, - }); - originalHeaderItems.splice(13, 0, { - type: 'divider', - dataElement: 'compareToolDivider', - }); + { + type: 'divider', + dataElement: dataElements.COMPARE_TOOL_DIVIDER, + }, + ]; + + originalHeaderItems.splice(11, 0, ...devHeaderItems); } }); - this.instance.UI.disableElements(['closeCompareButton']); + this.instance.UI.disableElements([dataElements.CLOSE_COMPARE_BUTTON]); - this.instance.Core.documentViewer.getTool('AnnotationCreateRectangle').setStyles(() => ({ + const dossierTemplateId = this._dossier.dossierTemplateId; + + this.documentViewer.getTool('AnnotationCreateRectangle').setStyles(() => ({ StrokeThickness: 2, - StrokeColor: this._annotationDrawService.getColor(this.instance, 'manual'), - FillColor: this._annotationDrawService.getColor(this.instance, 'manual'), + StrokeColor: this._annotationDrawService.getColor(this.instance, dossierTemplateId, 'manual'), + FillColor: this._annotationDrawService.getColor(this.instance, dossierTemplateId, 'manual'), Opacity: 0.6, })); } @@ -410,11 +453,11 @@ export class PdfViewerComponent implements OnInit, OnChanges { onClick: () => { this._ngZone.run(() => { if (allAreVisible) { - this.instance.Core.annotationManager.hideAnnotations(viewerAnnotations); + this.annotationManager.hideAnnotations(viewerAnnotations); } else { - this.instance.Core.annotationManager.showAnnotations(viewerAnnotations); + this.annotationManager.showAnnotations(viewerAnnotations); } - this.instance.Core.annotationManager.deselectAllAnnotations(); + this.annotationManager.deselectAllAnnotations(); this._annotationActionsService.updateHiddenAnnotation(this.annotations, viewerAnnotations, allAreVisible); }); }, @@ -423,43 +466,53 @@ export class PdfViewerComponent implements OnInit, OnChanges { } this.instance.UI.annotationPopup.add( - this._annotationActionsService.getViewerAvailableActions(annotationWrappers, this.annotationsChanged), + this._annotationActionsService.getViewerAvailableActions( + this.instance, + this._dossier, + annotationWrappers, + this.annotationsChanged, + ), ); } private _configureRectangleAnnotationPopup() { - this.instance.UI.annotationPopup.add({ - type: 'actionButton', - dataElement: 'add-rectangle', - img: this._convertPath('/assets/icons/general/pdftron-action-add-redaction.svg'), - title: this._translateService.instant(this._manualAnnotationService.getTitle('REDACTION')), - onClick: () => { - const selectedAnnotations = this.instance.Core.annotationManager.getSelectedAnnotations(); - const activeAnnotation = selectedAnnotations[0]; - const activePage = selectedAnnotations[0].getPageNumber(); - const quad = this._annotationDrawService.annotationToQuads(activeAnnotation, this.instance); - const quadsObject = {}; - quadsObject[activePage] = [quad]; - const mre = this._getManualRedactionEntry(quadsObject, 'Rectangle'); - // cleanup selection and button state - this.utils.deselectAllAnnotations(); - this.instance.UI.disableElements(['shapeToolGroupButton', 'rectangleToolDivider']); - this.instance.UI.enableElements(['shapeToolGroupButton', 'rectangleToolDivider']); - // dispatch event - this.manualAnnotationRequested.emit( - new ManualRedactionEntryWrapper([quad], mre, 'REDACTION', 'RECTANGLE', activeAnnotation.Id), - ); + this.instance.UI.annotationPopup.add([ + { + type: 'actionButton', + dataElement: dataElements.ADD_RECTANGLE, + img: this._convertPath('/assets/icons/general/pdftron-action-add-redaction.svg'), + title: this._translateService.instant(this._manualAnnotationService.getTitle('REDACTION', this._dossier)), + onClick: () => this._addRectangleManualRedaction(), }, - }); + ]); + } + + private _addRectangleManualRedaction() { + const activeAnnotation = this.annotationManager.getSelectedAnnotations()[0]; + const activePage = activeAnnotation.getPageNumber(); + const quads = [this._annotationDrawService.annotationToQuads(activeAnnotation, this.instance)]; + const manualRedaction = this._getManualRedaction({ [activePage]: quads }, 'Rectangle'); + this._cleanUpSelectionAndButtonState(); + + this.manualAnnotationRequested.emit( + new ManualRedactionEntryWrapper(quads, manualRedaction, 'REDACTION', 'RECTANGLE', activeAnnotation.Id), + ); + } + + private _cleanUpSelectionAndButtonState() { + const rectangleElements = [dataElements.SHAPE_TOOL_GROUP_BUTTON, dataElements.RECTANGLE_TOOL_DIVIDER]; + this.utils.deselectAllAnnotations(); + this.instance.UI.disableElements(rectangleElements); + this.instance.UI.enableElements(rectangleElements); } private _configureTextPopup() { - this.instance.UI.textPopup.add({ + const searchButton = { type: 'actionButton', img: this._convertPath('/assets/icons/general/pdftron-action-search.svg'), title: this._translateService.instant('pdf-viewer.text-popup.actions.search'), onClick: () => { - const text = this.instance.Core.documentViewer.getSelectedText(); + const text = this.documentViewer.getSelectedText(); const searchOptions = { caseSensitive: true, // match case wholeWord: true, // match whole words only @@ -469,117 +522,128 @@ export class PdfViewerComponent implements OnInit, OnChanges { ambientString: true, // return ambient string as part of the result }; this.instance.UI.openElements(['searchPanel']); - setTimeout(() => { - this.instance.UI.searchTextFull(text, searchOptions); - }, 250); + setTimeout(() => this.instance.UI.searchTextFull(text, searchOptions), 250); }, - }); + }; + + this.instance.UI.textPopup.add([searchButton]); // Adding directly to the false-positive dict is only available in dev-mode if (this._userPreferenceService.areDevFeaturesEnabled) { - this.instance.UI.textPopup.add({ - type: 'actionButton', - dataElement: 'add-false-positive', - img: this._convertPath('/assets/icons/general/pdftron-action-false-positive.svg'), - title: this._translateService.instant(this._manualAnnotationService.getTitle('FALSE_POSITIVE')), - onClick: () => { - const selectedQuads = this.instance.Core.documentViewer.getSelectedTextQuads(); - const text = this.instance.Core.documentViewer.getSelectedText(); - const mre = this._getManualRedactionEntry(selectedQuads, text, true); - this.manualAnnotationRequested.emit( - new ManualRedactionEntryWrapper(this.instance.Core.documentViewer.getSelectedTextQuads(), mre, 'FALSE_POSITIVE'), - ); + this.instance.UI.textPopup.add([ + { + type: 'actionButton', + dataElement: 'add-false-positive', + img: this._convertPath('/assets/icons/general/pdftron-action-false-positive.svg'), + title: this._translateService.instant( + this._manualAnnotationService.getTitle(ManualRedactionEntryTypes.FALSE_POSITIVE, this._dossier), + ), + onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.FALSE_POSITIVE), }, - }); + ]); } - this.instance.UI.textPopup.add({ - type: 'actionButton', - dataElement: 'add-dictionary', - img: this._convertPath('/assets/icons/general/pdftron-action-add-dict.svg'), - title: this._translateService.instant(this._manualAnnotationService.getTitle('DICTIONARY')), - onClick: () => { - const selectedQuads = this.instance.Core.documentViewer.getSelectedTextQuads(); - const text = this.instance.Core.documentViewer.getSelectedText(); - const mre = this._getManualRedactionEntry(selectedQuads, text, true); - this.manualAnnotationRequested.emit( - new ManualRedactionEntryWrapper(this.instance.Core.documentViewer.getSelectedTextQuads(), mre, 'DICTIONARY'), - ); + this.instance.UI.textPopup.add([ + { + type: 'actionButton', + dataElement: dataElements.ADD_REDACTION, + img: this._convertPath('/assets/icons/general/pdftron-action-add-redaction.svg'), + title: this._translateService.instant( + this._manualAnnotationService.getTitle(ManualRedactionEntryTypes.REDACTION, this._dossier), + ), + onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.REDACTION), }, - }); + { + type: 'actionButton', + dataElement: dataElements.ADD_DICTIONARY, + img: this._convertPath('/assets/icons/general/pdftron-action-add-dict.svg'), + title: this._translateService.instant( + this._manualAnnotationService.getTitle(ManualRedactionEntryTypes.DICTIONARY, this._dossier), + ), + onClick: () => this._addManualRedactionOfType(ManualRedactionEntryTypes.DICTIONARY), + }, + ]); - this.instance.UI.textPopup.add({ - type: 'actionButton', - dataElement: 'add-redaction', - img: this._convertPath('/assets/icons/general/pdftron-action-add-redaction.svg'), - title: this._translateService.instant(this._manualAnnotationService.getTitle('REDACTION')), - onClick: () => { - const selectedQuads = this.instance.Core.documentViewer.getSelectedTextQuads(); - const text = this.instance.Core.documentViewer.getSelectedText(); - const mre = this._getManualRedactionEntry(selectedQuads, text, true); - this.manualAnnotationRequested.emit( - new ManualRedactionEntryWrapper(this.instance.Core.documentViewer.getSelectedTextQuads(), mre, 'REDACTION'), - ); - }, - }); this._handleCustomActions(); } + private _addManualRedactionOfType(type: ManualRedactionEntryType) { + const selectedQuads = this.documentViewer.getSelectedTextQuads(); + const text = this.documentViewer.getSelectedText(); + const manualRedaction = this._getManualRedaction(selectedQuads, text, true); + this.manualAnnotationRequested.emit(new ManualRedactionEntryWrapper(selectedQuads, manualRedaction, type)); + } + private _handleCustomActions() { this.instance.UI.setToolMode('AnnotationEdit'); + const { ANNOTATION_POPUP, ADD_RECTANGLE, ADD_REDACTION, SHAPE_TOOL_GROUP_BUTTON } = dataElements; + const elements = [ + ADD_REDACTION, + ADD_RECTANGLE, + 'add-false-positive', + SHAPE_TOOL_GROUP_BUTTON, + 'rectangleToolDivider', + ANNOTATION_POPUP, + ]; + if (this.canPerformActions && !this.utils.isCurrentPageExcluded) { this.instance.UI.enableTools(['AnnotationCreateRectangle']); - this.instance.UI.enableElements([ - 'add-redaction', - 'add-rectangle', - 'add-false-positive', - 'shapeToolGroupButton', - 'rectangleToolDivider', - 'annotationPopup', - ]); + this.instance.UI.enableElements(elements); + if (this._selectedText.length > 2) { - this.instance.UI.enableElements(['add-dictionary', 'add-false-positive']); + this.instance.UI.enableElements([dataElements.ADD_DICTIONARY, dataElements.ADD_FALSE_POSITIVE]); } + + return; + } + + let elementsToDisable = [...elements, ADD_RECTANGLE]; + + if (this.utils.isCurrentPageExcluded) { + const allowedActionsWhenPageExcluded: string[] = [ANNOTATION_POPUP, ADD_RECTANGLE, ADD_REDACTION, SHAPE_TOOL_GROUP_BUTTON]; + elementsToDisable = elementsToDisable.filter(element => !allowedActionsWhenPageExcluded.includes(element)); } else { this.instance.UI.disableTools(['AnnotationCreateRectangle']); - this.instance.UI.disableElements([ - 'add-redaction', - 'add-dictionary', - 'add-false-positive', - 'add-rectangle', - 'shapeToolGroupButton', - 'rectangleToolDivider', - 'annotationPopup', - ]); } + + this.instance.UI.disableElements(elementsToDisable); } - private _getManualRedactionEntry(quads: any, text: string, convertQuads: boolean = false): IManualRedactionEntry { + private _getManualRedaction( + quads: Readonly>, + text: string, + convertQuads = false, + ): IManualRedactionEntry { const entry: IManualRedactionEntry = { positions: [] }; + for (const key of Object.keys(quads)) { for (const quad of quads[key]) { const page = parseInt(key, 10); - entry.positions.push(this.utils.toPosition(page, convertQuads ? this.utils.translateQuads(page, quad) : quad)); + const pageHeight = this.documentViewer.getPageHeight(page); + entry.positions.push(toPosition(page, pageHeight, convertQuads ? this.utils.translateQuads(page, quad) : quad)); } } + entry.value = text; return entry; } private _loadDocument() { - if (this.fileData) { - this.instance.UI.loadDocument(this.fileData, { - filename: this.file ? this.file.filename : 'document.pdf', - }); + if (!this.fileData) { + return; } + + this.instance.UI.loadDocument(this.fileData, { + filename: this.file ? this.file.filename : 'document.pdf', + }); } - private _documentLoaded(): void { + private _setReadyAndInitialState(): void { this._ngZone.run(() => { this.utils.ready = true; this._firstPageChange = true; this.viewerReady.emit(this.instance); - this.setInitialViewerState(); + this._setInitialDisplayMode(); }); } } diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html index c2fa279d7..e48a1fc4a 100644 --- a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html +++ b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html @@ -1,4 +1,4 @@ -
+
{{ 'assign-dossier-owner.dialog.single-user' | translate }} @@ -28,15 +28,19 @@ [canAdd]="false" [canRemove]="true" [largeSpacing]="true" - [memberIds]="selectedReviewersList" + [memberIds]="selectedReviewers$ | async" [perLine]="13" [unremovableMembers]="[selectedOwnerId]" > - 

+    

 
     ();
+    @Output() readonly updateDossier = new EventEmitter();
 
     readonly ownersSelectOptions = this.userService.managerUsers.map(m => m.id);
-    selectedReviewersList: string[] = [];
     membersSelectOptions: string[] = [];
-    changed = false;
+    readonly selectedReviewers$ = new BehaviorSubject([]);
 
     constructor(
         readonly userService: UserService,
-        private readonly _toaster: Toaster,
         private readonly _formBuilder: FormBuilder,
         private readonly _dossiersService: DossiersService,
-    ) {}
+    ) {
+        super();
+    }
 
     get selectedOwnerId(): string {
-        return this.teamForm.get('owner').value;
+        return this.form.get('owner').value;
     }
 
     get selectedApproversList(): string[] {
-        return this.teamForm.get('approvers').value;
+        return this.form.get('approvers').value;
     }
 
     get selectedMembersList(): string[] {
-        return this.teamForm.get('members').value;
+        return this.form.get('members').value;
     }
 
     get valid(): boolean {
-        return this.teamForm.valid;
+        return this.form.valid;
+    }
+
+    get disabled() {
+        return !this.userService.currentUser.isManager;
+    }
+
+    get changed() {
+        if (this.dossier.ownerId !== this.selectedOwnerId) {
+            return true;
+        }
+
+        const initialMembers = [...this.dossier.memberIds].sort();
+        const currentMembers = this.selectedMembersList.sort();
+
+        const initialApprovers = [...this.dossier.approverIds].sort();
+        const currentApprovers = this.selectedApproversList.sort();
+        return this._compareLists(initialMembers, currentMembers) || this._compareLists(initialApprovers, currentApprovers);
     }
 
     isOwner(userId: string): boolean {
         return userId === this.selectedOwnerId;
     }
 
-    async saveMembers() {
+    async save() {
         const dossier = {
             ...this.dossier,
             memberIds: this.selectedMembersList,
@@ -59,8 +79,7 @@ export class TeamMembersManagerComponent implements OnInit {
 
         const result = await this._dossiersService.createOrUpdate(dossier).toPromise();
         if (result) {
-            this.save.emit(result);
-            this._updateChanged();
+            this.updateDossier.emit();
         }
     }
 
@@ -112,39 +131,25 @@ export class TeamMembersManagerComponent implements OnInit {
         this._loadData();
     }
 
-    setMembersSelectOptions(): void {
+    setMembersSelectOptions(value = this.searchQuery): void {
         this.membersSelectOptions = this.userService.eligibleUsers
-            .filter(user => this.userService.getNameForId(user.id).toLowerCase().includes(this.searchQuery.toLowerCase()))
+            .filter(user => this.userService.getNameForId(user.id).toLowerCase().includes(value.toLowerCase()))
             .filter(user => this.selectedOwnerId !== user.id)
             .map(user => user.id);
     }
 
-    private _updateChanged() {
-        if (this.dossier.ownerId !== this.selectedOwnerId) {
-            this.changed = true;
-            return;
-        }
-
-        const initialMembers = [...this.dossier.memberIds].sort();
-        const currentMembers = this.selectedMembersList.sort();
-
-        const initialApprovers = [...this.dossier.approverIds].sort();
-        const currentApprovers = this.selectedApproversList.sort();
-
-        this.changed = this._compareLists(initialMembers, currentMembers) || this._compareLists(initialApprovers, currentApprovers);
-    }
-
     private _setSelectedReviewersList() {
-        this.selectedReviewersList = this.selectedMembersList.filter(m => this.selectedApproversList.indexOf(m) === -1);
+        const selectedReviewers = this.selectedMembersList.filter(m => this.selectedApproversList.indexOf(m) === -1);
+        this.selectedReviewers$.next(selectedReviewers);
     }
 
     private _loadData() {
-        this.teamForm = this._formBuilder.group({
+        this.form = this._formBuilder.group({
             owner: [this.dossier?.ownerId, Validators.required],
             approvers: [[...this.dossier?.approverIds]],
             members: [[...this.dossier?.memberIds]],
         });
-        this.teamForm.get('owner').valueChanges.subscribe(owner => {
+        this.addSubscription = this.form.get('owner').valueChanges.subscribe(owner => {
             if (!this.isApprover(owner)) {
                 this.toggleApprover(owner);
             }
@@ -157,7 +162,6 @@ export class TeamMembersManagerComponent implements OnInit {
     private _updateLists() {
         this._setSelectedReviewersList();
         this.setMembersSelectOptions();
-        this._updateChanged();
     }
 
     private _compareLists(l1: string[], l2: string[]) {
diff --git a/apps/red-ui/src/app/modules/dossier/components/type-annotation-icon/type-annotation-icon.component.ts b/apps/red-ui/src/app/modules/dossier/components/type-annotation-icon/type-annotation-icon.component.ts
index d018c12b1..7476a9027 100644
--- a/apps/red-ui/src/app/modules/dossier/components/type-annotation-icon/type-annotation-icon.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/type-annotation-icon/type-annotation-icon.component.ts
@@ -1,6 +1,8 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { AppStateService } from '@state/app-state.service';
+import { DossiersService } from '@services/entity-services/dossiers.service';
+import { File } from '@red/domain';
 
 @Component({
     selector: 'redaction-type-annotation-icon',
@@ -9,19 +11,24 @@ import { AppStateService } from '@state/app-state.service';
 })
 export class TypeAnnotationIconComponent implements OnChanges {
     @Input() annotation: AnnotationWrapper;
+    @Input() file: File;
 
     label: string;
     color: string;
     type: 'square' | 'rhombus' | 'circle' | 'hexagon';
 
-    constructor(private _appStateService: AppStateService) {}
+    constructor(private _appStateService: AppStateService, private readonly _dossiersService: DossiersService) {}
+
+    private get _dossierTemplateId(): string {
+        return this._dossiersService.find(this.file.dossierId).dossierTemplateId;
+    }
 
     ngOnChanges(): void {
         if (this.annotation) {
             if (this.annotation.isSuperTypeBasedColor) {
-                this.color = this._appStateService.getDictionaryColor(this.annotation.superType);
+                this.color = this._appStateService.getDictionaryColor(this.annotation.superType, this._dossierTemplateId);
             } else {
-                this.color = this._appStateService.getDictionaryColor(this.annotation.type);
+                this.color = this._appStateService.getDictionaryColor(this.annotation.type, this._dossierTemplateId);
             }
             this.type =
                 this.annotation.isSuggestion || this.annotation.isDeclinedSuggestion
@@ -36,8 +43,6 @@ export class TypeAnnotationIconComponent implements OnChanges {
                     ? 'S'
                     : this.annotation.isSkipped
                     ? 'S'
-                    : this.annotation.isReadyForAnalysis
-                    ? 'A'
                     : this.annotation.type[0].toUpperCase();
         }
     }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
index 88a3666fd..bba61223a 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
@@ -41,9 +41,17 @@
                 >
             

 
-            
-                {{ 'add-dossier-dialog.form.watermark' | translate }}
-            
+            

+                
+                    {{ 'add-dossier-dialog.form.watermark' | translate }}
+                
+            

+
+            

+                
+                    {{ 'add-dossier-dialog.form.watermark-preview' | translate }}
+                
+            

 
             

                 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss
index 6b5cbee1d..077d4cb22 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.scss
@@ -2,6 +2,10 @@
     margin-top: 24px;
 }
 
+.watermark-preview {
+    margin-top: 8px;
+}
+
 .due-date {
     margin-top: 8px;
     min-height: 34px;
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
index 65acb031a..753241a6d 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
@@ -42,6 +42,7 @@ export class AddDossierDialogComponent {
                 description: [null],
                 dueDate: [null],
                 watermarkEnabled: [true],
+                watermarkPreviewEnabled: [false],
             },
             {
                 validators: control =>
@@ -123,6 +124,7 @@ export class AddDossierDialogComponent {
             downloadFileTypes: this.dossierForm.get('downloadFileTypes').value,
             reportTemplateIds: this.dossierForm.get('reportTemplateIds').value,
             watermarkEnabled: this.dossierForm.get('watermarkEnabled').value,
+            watermarkPreviewEnabled: this.dossierForm.get('watermarkPreviewEnabled').value,
         };
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
index 8c7d61eb1..1e851ab46 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
@@ -7,13 +7,13 @@
         class="dialog-header heading-l"
     >

 
-    
+    
         

             

                 
                     {{ 'assign-owner.dialog.label' | translate: { type: data.mode } }}
-                    
-                        
+                    
+                        
                             {{ userId | name: { defaultValue: 'initials-avatar.unassigned' | translate } }}
                         
                     
@@ -22,7 +22,7 @@
         

 
         

-            
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
index 277be4ad2..b8029ff73 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
@@ -12,8 +12,7 @@ import { PermissionsService } from '@services/permissions.service';
 
 class DialogData {
     mode: 'approver' | 'reviewer';
-    dossier?: Dossier;
-    files?: File[];
+    files: File[];
     ignoreChanged?: boolean;
     withCurrentUserAsDefault?: boolean;
 }
@@ -23,8 +22,8 @@ class DialogData {
     styleUrls: ['./assign-reviewer-approver-dialog.component.scss'],
 })
 export class AssignReviewerApproverDialogComponent {
-    usersForm: FormGroup;
-    searchForm: FormGroup;
+    form: FormGroup;
+    dossier: Dossier;
 
     constructor(
         readonly userService: UserService,
@@ -37,18 +36,19 @@ export class AssignReviewerApproverDialogComponent {
         private readonly _dialogRef: MatDialogRef,
         @Inject(MAT_DIALOG_DATA) readonly data: DialogData,
     ) {
+        this.dossier = this._dossiersService.find(this.data.files[0].dossierId);
         this._loadData();
     }
 
-    get selectedSingleUser(): string {
-        return this.usersForm.get('singleUser').value;
+    get selectedUser(): string {
+        return this.form.get('user').value;
     }
 
-    get singleUsersSelectOptions() {
+    get userOptions() {
         const unassignUser = this._canUnassignFiles ? [undefined] : [];
         return this.data.mode === 'approver'
-            ? [...this._dossiersService.activeDossier.approverIds, ...unassignUser]
-            : [...this._dossiersService.activeDossier.memberIds, ...unassignUser];
+            ? [...this.dossier.approverIds, ...unassignUser]
+            : [...this.dossier.memberIds, ...unassignUser];
     }
 
     get changed(): boolean {
@@ -57,7 +57,7 @@ export class AssignReviewerApproverDialogComponent {
         }
 
         for (const file of this.data.files) {
-            if (file.currentReviewer !== this.selectedSingleUser) {
+            if (file.currentReviewer !== this.selectedUser) {
                 return true;
             }
         }
@@ -70,27 +70,25 @@ export class AssignReviewerApproverDialogComponent {
     }
 
     isOwner(userId: string): boolean {
-        return userId === this.selectedSingleUser;
+        return userId === this.selectedUser;
     }
 
     async save() {
         try {
-            const selectedUser = this.selectedSingleUser;
-
             if (this.data.mode === 'reviewer') {
                 await this._filesService
                     .setReviewerFor(
                         this.data.files.map(f => f.fileId),
-                        this._dossiersService.activeDossierId,
-                        selectedUser,
+                        this.dossier.id,
+                        this.selectedUser,
                     )
                     .toPromise();
             } else {
                 await this._filesService
                     .setUnderApprovalFor(
                         this.data.files.map(f => f.fileId),
-                        this._dossiersService.activeDossierId,
-                        selectedUser,
+                        this.dossier.id,
+                        this.selectedUser,
                     )
                     .toPromise();
             }
@@ -112,17 +110,16 @@ export class AssignReviewerApproverDialogComponent {
                 uniqueReviewers.add(file.currentReviewer);
             }
         }
+        let user: string = uniqueReviewers.size === 1 ? uniqueReviewers.values().next().value : this.userService.currentUser.id;
+        user = this.userOptions.indexOf(user) >= 0 ? user : this.userOptions[0];
 
-        let singleUser: string = uniqueReviewers.size === 1 ? uniqueReviewers.values().next().value : this.userService.currentUser.id;
-        singleUser = this.singleUsersSelectOptions.indexOf(singleUser) >= 0 ? singleUser : this.singleUsersSelectOptions[0];
-
-        if (this.data.withCurrentUserAsDefault && this.singleUsersSelectOptions.includes(this.userService.currentUser.id)) {
-            singleUser = this.userService.currentUser.id;
+        if (this.data.withCurrentUserAsDefault && this.userOptions.includes(this.userService.currentUser.id)) {
+            user = this.userService.currentUser.id;
         }
 
-        this.usersForm = this._formBuilder.group({
+        this.form = this._formBuilder.group({
             // Allow a null reviewer if a previous reviewer exists (= it's not the first assignment) & current user is allowed to unassign
-            singleUser: [singleUser, this._canUnassignFiles && !singleUser ? Validators.required : null],
+            user: [user, this._canUnassignFiles && !user ? Validators.required : null],
         });
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts
index e9fc4bce4..08cd4eda4 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts
@@ -1,12 +1,11 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { AppStateService } from '@state/app-state.service';
 import { PermissionsService } from '@services/permissions.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { JustificationsService } from '@services/entity-services/justifications.service';
+import { Dossier } from '@red/domain';
 
 export interface LegalBasisOption {
     label?: string;
@@ -15,9 +14,7 @@ export interface LegalBasisOption {
 }
 
 @Component({
-    selector: 'redaction-change-legal-basis-dialog',
     templateUrl: './change-legal-basis-dialog.component.html',
-    styleUrls: ['./change-legal-basis-dialog.component.scss'],
 })
 export class ChangeLegalBasisDialogComponent implements OnInit {
     legalBasisForm: FormGroup;
@@ -25,34 +22,30 @@ export class ChangeLegalBasisDialogComponent implements OnInit {
     legalOptions: LegalBasisOption[] = [];
 
     constructor(
-        private readonly _translateService: TranslateService,
         private readonly _justificationsService: JustificationsService,
-        private readonly _appStateService: AppStateService,
         private readonly _dossiersService: DossiersService,
         private readonly _permissionsService: PermissionsService,
         private readonly _formBuilder: FormBuilder,
-        public dialogRef: MatDialogRef,
-        @Inject(MAT_DIALOG_DATA) public annotations: AnnotationWrapper[],
+        readonly dialogRef: MatDialogRef,
+        @Inject(MAT_DIALOG_DATA) private readonly _data: { annotations: AnnotationWrapper[]; dossier: Dossier },
     ) {}
 
     get changed(): boolean {
-        return this.legalBasisForm.get('reason').value.legalBasis !== this.annotations[0].legalBasis;
+        return this.legalBasisForm.get('reason').value.legalBasis !== this._data.annotations[0].legalBasis;
     }
 
     async ngOnInit() {
-        this.isDocumentAdmin = this._permissionsService.isApprover();
+        this.isDocumentAdmin = this._permissionsService.isApprover(this._data.dossier);
 
         this.legalBasisForm = this._formBuilder.group({
             reason: [null, Validators.required],
             comment: this.isDocumentAdmin ? [null] : [null, Validators.required],
         });
 
-        const data = await this._justificationsService
-            .getForDossierTemplate(this._dossiersService.activeDossier.dossierTemplateId)
-            .toPromise();
+        const data = await this._justificationsService.getForDossierTemplate(this._data.dossier.dossierTemplateId).toPromise();
 
         this.legalOptions = data
-            .map(lbm => ({
+            .map(lbm => ({
                 legalBasis: lbm.reason,
                 description: lbm.description,
                 label: lbm.name,
@@ -60,7 +53,7 @@ export class ChangeLegalBasisDialogComponent implements OnInit {
             .sort((a, b) => a.label.localeCompare(b.label));
 
         this.legalBasisForm.patchValue({
-            reason: this.legalOptions.find(option => option.legalBasis === this.annotations[0].legalBasis),
+            reason: this.legalOptions.find(option => option.legalBasis === this._data.annotations[0].legalBasis),
         });
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
index 9d823f2dc..e79710824 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
@@ -65,7 +65,7 @@
                     (change)="uploadImage($event, attr)"
                     [id]="attr.id"
                     [name]="attr.id"
-                    accept="image/*"
+                    accept="image/jpg, image/jpeg, image/png"
                     class="file-upload-input"
                     hidden
                     type="file"
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
index e46cb671f..e190bbe6d 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
@@ -62,7 +62,6 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
     }
 
     async save() {
-        this._loadingService.start();
         const dossierAttributeList = this.attributes.map(attr => ({
             dossierAttributeConfigId: attr.id,
             value: this.currentAttrValue(attr),
@@ -70,7 +69,6 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa
         await this._dossierAttributesService.setAttributes(this.dossier, dossierAttributeList).toPromise();
         await this._loadAttributes();
         this.updateDossier.emit();
-        this._loadingService.stop();
     }
 
     fileInputClick(attr: DossierAttributeWithValue) {
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
index 19ec288a5..1ef89bd72 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
@@ -115,7 +115,7 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent f.fileId);
         await this._fileManagementService.restore(fileIds, this.dossier.id).toPromise();
         this._removeFromList(fileIds);
-        await this._appStateService.reloadActiveDossierFiles();
+        await this._appStateService.reloadDossierFiles(files[0].dossierId);
         this.updateDossier.emit();
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html
index 06dee2be4..6cd5f9d5f 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.html
@@ -1,10 +1,10 @@
 

     

-        
{{ dossier.type?.label }}

+        
{{ dossierDictionary?.label }}

         

             

                 
-                {{ 'edit-dossier-dialog.dictionary.entries' | translate: { length: (dossier.type?.entries || []).length } }}
+                {{ 'edit-dossier-dialog.dictionary.entries' | translate: { length: (dossierDictionary?.entries || []).length } }}
             

         

     

@@ -19,13 +19,13 @@
             [placeholder]="'edit-dossier-dialog.dictionary.display-name.placeholder' | translate"
             [saveTooltip]="'edit-dossier-dialog.dictionary.display-name.save' | translate"
             [showPreview]="false"
-            [value]="dossier.type?.label"
+            [value]="dossierDictionary?.label"
         >
     

 

 
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts
index 956ab598e..e59bca316 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts
@@ -18,6 +18,7 @@ export class EditDossierDictionaryComponent implements EditDossierSectionInterfa
     @Output() readonly updateDossier = new EventEmitter();
     canEdit = false;
     readonly circleButtonTypes = CircleButtonTypes;
+    dossierDictionary: IDictionary;
 
     @ViewChild(DictionaryManagerComponent, { static: false }) private readonly _dictionaryManager: DictionaryManagerComponent;
 
@@ -40,16 +41,16 @@ export class EditDossierDictionaryComponent implements EditDossierSectionInterfa
     async ngOnInit() {
         this._loadingService.start();
         this.canEdit = this._permissionsService.isDossierMember(this.dossier);
-        await this._dossiersService.updateDossierDictionary(this.dossier.dossierTemplateId, this.dossier.id);
+        await this._updateDossierDictionary();
         this._loadingService.stop();
     }
 
     async updateDisplayName(label: string) {
-        const dictionary: IDictionary = { ...this.dossier.type, label };
+        const dictionary: IDictionary = { ...this.dossierDictionary, label };
         await this._dictionaryService
             .updateDictionary(dictionary, this.dossier.dossierTemplateId, 'dossier_redaction', this.dossier.id)
             .toPromise();
-        await this._dossiersService.updateDossierDictionary(this.dossier.dossierTemplateId, this.dossier.id);
+        await this._updateDossierDictionary();
         this.updateDossier.emit();
     }
 
@@ -64,11 +65,16 @@ export class EditDossierDictionaryComponent implements EditDossierSectionInterfa
                 false,
             )
             .toPromise();
-        await this._dossiersService.updateDossierDictionary(this.dossier.dossierTemplateId, this.dossier.id);
+        await this._updateDossierDictionary();
         this.updateDossier.emit();
     }
 
     revert() {
         this._dictionaryManager.revert();
     }
+
+    private async _updateDossierDictionary() {
+        const { dossierId, dossierTemplateId } = this.dossier;
+        this.dossierDictionary = await this._dictionaryService.getForType(dossierTemplateId, 'dossier_redaction', dossierId).toPromise();
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts
index dc9931e08..9766ac1e5 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts
@@ -58,7 +58,7 @@ export class EditDossierDownloadPackageComponent implements OnInit, EditDossierS
     }
 
     get disabled() {
-        return this.dossierForm?.invalid;
+        return this.dossierForm?.invalid || !this.dossierForm?.value?.downloadFileTypes?.length;
     }
 
     reportTemplateValueMapper = (reportTemplate: IReportTemplate) => reportTemplate.templateId;
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
index 915d29570..7e5df0c58 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
@@ -1,4 +1,4 @@
-

+

     

         {{ 'edit-dossier-dialog.header' | translate: { dossierName: dossier.dossierName } }}
     

@@ -13,6 +13,7 @@
                 class="item"
             >

         
+
         

             

                 

@@ -37,11 +38,11 @@
                     [dossier]="dossier"
                 >
 
-                
+                >
 
                 
                     {{ 'edit-dossier-dialog.actions.save' | translate }}
                 
+                
+                
 
                 

             

diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
index daef546a9..75851073a 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
@@ -1,18 +1,20 @@
 import { ChangeDetectorRef, Component, Inject, ViewChild } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Dossier } from '@red/domain';
 import { EditDossierGeneralInfoComponent } from './general-info/edit-dossier-general-info.component';
 import { EditDossierDownloadPackageComponent } from './download-package/edit-dossier-download-package.component';
 import { EditDossierSectionInterface } from './edit-dossier-section.interface';
-import { Toaster } from '@iqser/common-ui';
+import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
 import { EditDossierDictionaryComponent } from './dictionary/edit-dossier-dictionary.component';
-import { EditDossierTeamMembersComponent } from './team-members/edit-dossier-team-members.component';
 import { EditDossierAttributesComponent } from './attributes/edit-dossier-attributes.component';
 
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { EditDossierDeletedDocumentsComponent } from './deleted-documents/edit-dossier-deleted-documents.component';
 import { AppStateService } from '@state/app-state.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
+import { TeamMembersManagerComponent } from '../../components/team-members-manager/team-members-manager.component';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
 
 type Section = 'dossierInfo' | 'downloadPackage' | 'dossierDictionary' | 'members' | 'dossierAttributes' | 'deletedDocuments';
 
@@ -22,24 +24,28 @@ type Section = 'dossierInfo' | 'downloadPackage' | 'dossierDictionary' | 'member
 })
 export class EditDossierDialogComponent {
     readonly navItems: { key: Section; title?: string; sideNavTitle?: string }[];
+    readonly iconButtonTypes = IconButtonTypes;
     activeNav: Section;
-    dossier: Dossier;
+    readonly dossier$: Observable;
 
     @ViewChild(EditDossierGeneralInfoComponent) generalInfoComponent: EditDossierGeneralInfoComponent;
     @ViewChild(EditDossierDownloadPackageComponent) downloadPackageComponent: EditDossierDownloadPackageComponent;
     @ViewChild(EditDossierDictionaryComponent) dictionaryComponent: EditDossierDictionaryComponent;
-    @ViewChild(EditDossierTeamMembersComponent) membersComponent: EditDossierTeamMembersComponent;
+    @ViewChild(TeamMembersManagerComponent) membersComponent: TeamMembersManagerComponent;
     @ViewChild(EditDossierAttributesComponent) attributesComponent: EditDossierAttributesComponent;
     @ViewChild(EditDossierDeletedDocumentsComponent) deletedDocumentsComponent: EditDossierDeletedDocumentsComponent;
+    private _dossierName: string;
 
     constructor(
         private readonly _toaster: Toaster,
         private readonly _appStateService: AppStateService,
         private readonly _dossiersService: DossiersService,
         private readonly _changeRef: ChangeDetectorRef,
+        private readonly _dialogRef: MatDialogRef,
+        private readonly _loadingService: LoadingService,
         @Inject(MAT_DIALOG_DATA)
         private readonly _data: {
-            dossier: Dossier;
+            dossierId: string;
             afterSave: Function;
             section?: Section;
         },
@@ -75,7 +81,9 @@ export class EditDossierDialogComponent {
             },
         ];
 
-        this.dossier = _data.dossier;
+        this.dossier$ = this._dossiersService
+            .getEntityChanged$(_data.dossierId)
+            .pipe(tap(dossier => (this._dossierName = dossier.dossierName)));
         this.activeNav = _data.section || 'dossierInfo';
     }
 
@@ -107,9 +115,7 @@ export class EditDossierDialogComponent {
     }
 
     updatedDossier() {
-        this._toaster.success(_('edit-dossier-dialog.change-successful'), { params: { dossierName: this.dossier.dossierName } });
-        this.dossier = this._dossiersService.find(this.dossier.id);
-        this._changeRef.detectChanges();
+        this._toaster.success(_('edit-dossier-dialog.change-successful'), { params: { dossierName: this._dossierName } });
         this.afterSave();
     }
 
@@ -119,8 +125,14 @@ export class EditDossierDialogComponent {
         }
     }
 
-    async save() {
+    async save(closeAfterSave: boolean = false) {
+        this._loadingService.start();
         await this.activeComponent.save();
+        this._loadingService.stop();
+
+        if (closeAfterSave) {
+            this._dialogRef.close();
+        }
     }
 
     revert() {
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index e42b607f1..f27c24b26 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -37,9 +37,17 @@
         >
     

 
-    
-        {{ 'edit-dossier-dialog.general-info.form.watermark' | translate }}
-    
+    

+        
+            {{ 'edit-dossier-dialog.general-info.form.watermark' | translate }}
+        
+    

+
+    

+        
+            {{ 'edit-dossier-dialog.general-info.form.watermark-preview' | translate }}
+        
+    

 
     

         
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
index aae48e38a..695782375 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
@@ -2,6 +2,10 @@
     margin-top: 24px;
 }
 
+.watermark-preview {
+    margin-top: 8px;
+}
+
 .due-date {
     margin-top: 8px;
     min-height: 34px;
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index fb680d5fe..df28a625e 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -12,6 +12,7 @@ import { ConfirmationDialogInput, IconButtonTypes, TitleColors, Toaster } from '
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
+import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
 
 @Component({
     selector: 'redaction-edit-dossier-general-info',
@@ -32,6 +33,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
         readonly permissionsService: PermissionsService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _dossiersService: DossiersService,
+        private readonly _dossierStatsService: DossierStatsService,
         private readonly _formBuilder: FormBuilder,
         private readonly _dialogService: DossiersDialogService,
         private readonly _router: Router,
@@ -71,13 +73,14 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
             dossierTemplateId: [
                 {
                     value: this.dossier.dossierTemplateId,
-                    disabled: this.dossier.hasFiles,
+                    disabled: this._dossierStatsService.get(this.dossier.dossierId).hasFiles,
                 },
                 Validators.required,
             ],
             description: [this.dossier.description],
             dueDate: [this.dossier.dueDate],
             watermarkEnabled: [this.dossier.watermarkEnabled],
+            watermarkPreviewEnabled: [this.dossier.watermarkPreviewEnabled],
         });
         this.hasDueDate = !!this.dossier.dueDate;
     }
@@ -88,6 +91,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
             dossierTemplateId: this.dossier.dossierTemplateId,
             description: this.dossier.description,
             watermarkEnabled: this.dossier.watermarkEnabled,
+            watermarkPreviewEnabled: this.dossier.watermarkPreviewEnabled,
             dueDate: this.dossier.dueDate,
         });
     }
@@ -98,6 +102,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
             dossierName: this.dossierForm.get('dossierName').value,
             description: this.dossierForm.get('description').value,
             watermarkEnabled: this.dossierForm.get('watermarkEnabled').value,
+            watermarkPreviewEnabled: this.dossierForm.get('watermarkPreviewEnabled').value,
             dueDate: this.hasDueDate ? this.dossierForm.get('dueDate').value : undefined,
             dossierTemplateId: this.dossierForm.get('dossierTemplateId').value,
         } as IDossierRequest;
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/team-members/edit-dossier-team-members.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/team-members/edit-dossier-team-members.component.html
deleted file mode 100644
index cb8de7e94..000000000
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/team-members/edit-dossier-team-members.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/team-members/edit-dossier-team-members.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/team-members/edit-dossier-team-members.component.ts
deleted file mode 100644
index cf0521c84..000000000
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/team-members/edit-dossier-team-members.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { Dossier } from '@red/domain';
-import { EditDossierSectionInterface } from '../edit-dossier-section.interface';
-import { TeamMembersManagerComponent } from '../../../components/team-members-manager/team-members-manager.component';
-import { UserService } from '@services/user.service';
-
-@Component({
-    selector: 'redaction-edit-dossier-team-members',
-    templateUrl: './edit-dossier-team-members.component.html',
-    styleUrls: ['./edit-dossier-team-members.component.scss'],
-})
-export class EditDossierTeamMembersComponent implements EditDossierSectionInterface {
-    readonly currentUser = this._userService.currentUser;
-
-    @Input() dossier: Dossier;
-    @Output() readonly updateDossier = new EventEmitter();
-
-    @ViewChild(TeamMembersManagerComponent) managerComponent: TeamMembersManagerComponent;
-
-    constructor(private readonly _userService: UserService) {}
-
-    get changed() {
-        return this.managerComponent.changed;
-    }
-
-    get disabled() {
-        return !this.currentUser.isManager;
-    }
-
-    async save() {
-        await this.managerComponent.saveMembers();
-    }
-
-    revert() {
-        this.managerComponent.revert();
-    }
-}
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts
index 934cb3dcd..ab74193d5 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Toaster } from '@iqser/common-ui';
 import { TranslateService } from '@ngx-translate/core';
 import { UserService } from '@services/user.service';
@@ -8,7 +8,7 @@ import { ManualAnnotationService } from '../../services/manual-annotation.servic
 import { PermissionsService } from '@services/permissions.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { JustificationsService } from '@services/entity-services/justifications.service';
-import { ILegalBasisChangeRequest } from '@red/domain';
+import { Dossier, ILegalBasisChangeRequest } from '@red/domain';
 
 export interface LegalBasisOption {
     label?: string;
@@ -36,8 +36,9 @@ export class ForceRedactionDialogComponent implements OnInit {
         private readonly _manualAnnotationService: ManualAnnotationService,
         private readonly _permissionsService: PermissionsService,
         public dialogRef: MatDialogRef,
+        @Inject(MAT_DIALOG_DATA) private readonly _data: { readonly dossier: Dossier },
     ) {
-        this.isDocumentAdmin = this._permissionsService.isApprover();
+        this.isDocumentAdmin = this._permissionsService.isApprover(this._data.dossier);
 
         this.redactionForm = this._formBuilder.group({
             reason: [null, Validators.required],
@@ -46,9 +47,7 @@ export class ForceRedactionDialogComponent implements OnInit {
     }
 
     async ngOnInit() {
-        const data = await this._justificationsService
-            .getForDossierTemplate(this._dossiersService.activeDossier.dossierTemplateId)
-            .toPromise();
+        const data = await this._justificationsService.getForDossierTemplate(this._data.dossier.dossierTemplateId).toPromise();
 
         this.legalOptions = data.map(lbm => ({
             legalBasis: lbm.reason,
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index 8696056f2..1788ae51a 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -3,14 +3,14 @@
         

 
         

-            
+            
                 

                     
                 

-                {{ format(manualRedactionEntryWrapper.manualRedactionEntry.value) }}
+                {{ format(data.manualRedactionEntryWrapper.manualRedactionEntry.value) }}
             
 
-            
+            
                 

                     
                 

diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
index afe1b932d..51a87aeb4 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
@@ -2,16 +2,12 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AppStateService } from '@state/app-state.service';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { Toaster } from '@iqser/common-ui';
-import { TranslateService } from '@ngx-translate/core';
-import { UserService } from '@services/user.service';
 import { ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper';
 import { ManualAnnotationService } from '../../services/manual-annotation.service';
 import { ManualAnnotationResponse } from '@models/file/manual-annotation-response';
 import { PermissionsService } from '@services/permissions.service';
-import { DossiersService } from '@services/entity-services/dossiers.service';
 import { JustificationsService } from '@services/entity-services/justifications.service';
-import { Dictionary, IAddRedactionRequest } from '@red/domain';
+import { Dictionary, Dossier, IAddRedactionRequest } from '@red/domain';
 
 export interface LegalBasisOption {
     label?: string;
@@ -36,21 +32,17 @@ export class ManualAnnotationDialogComponent implements OnInit {
 
     constructor(
         private readonly _appStateService: AppStateService,
-        private readonly _dossiersService: DossiersService,
-        private readonly _userService: UserService,
         private readonly _formBuilder: FormBuilder,
-        private readonly _notificationService: Toaster,
-        private readonly _translateService: TranslateService,
         private readonly _justificationsService: JustificationsService,
         private readonly _manualAnnotationService: ManualAnnotationService,
         private readonly _permissionsService: PermissionsService,
         public dialogRef: MatDialogRef,
-        @Inject(MAT_DIALOG_DATA) public manualRedactionEntryWrapper: ManualRedactionEntryWrapper,
+        @Inject(MAT_DIALOG_DATA) public data: { manualRedactionEntryWrapper: ManualRedactionEntryWrapper; dossier: Dossier },
     ) {
-        this.isDocumentAdmin = this._permissionsService.isApprover();
+        this.isDocumentAdmin = this._permissionsService.isApprover(this.data.dossier);
 
-        this.isFalsePositiveRequest = this.manualRedactionEntryWrapper.type === 'FALSE_POSITIVE';
-        this.isDictionaryRequest = this.manualRedactionEntryWrapper.type === 'DICTIONARY' || this.isFalsePositiveRequest;
+        this.isFalsePositiveRequest = this.data.manualRedactionEntryWrapper.type === 'FALSE_POSITIVE';
+        this.isDictionaryRequest = this.data.manualRedactionEntryWrapper.type === 'DICTIONARY' || this.isFalsePositiveRequest;
 
         this.redactionForm = this._formBuilder.group({
             reason: this.isDictionaryRequest ? [null] : [null, Validators.required],
@@ -60,8 +52,8 @@ export class ManualAnnotationDialogComponent implements OnInit {
             comment: this.isDocumentAdmin ? [null] : [null, Validators.required],
         });
 
-        for (const key of Object.keys(this._appStateService.dictionaryData[this._dossiersService.activeDossier.dossierTemplateId])) {
-            const dictionaryData = this._appStateService.getDictionary(key);
+        for (const key of Object.keys(this._appStateService.dictionaryData[data.dossier.dossierTemplateId])) {
+            const dictionaryData = this._appStateService.getDictionary(key, data.dossier.dossierTemplateId);
             if (!dictionaryData.virtual && dictionaryData.addToDictionaryAction) {
                 this.redactionDictionaries.push(dictionaryData);
             }
@@ -70,7 +62,7 @@ export class ManualAnnotationDialogComponent implements OnInit {
     }
 
     get title() {
-        return this._manualAnnotationService.getTitle(this.manualRedactionEntryWrapper.type);
+        return this._manualAnnotationService.getTitle(this.data.manualRedactionEntryWrapper.type, this.data.dossier);
     }
 
     get displayedDictionaryLabel() {
@@ -82,9 +74,7 @@ export class ManualAnnotationDialogComponent implements OnInit {
     }
 
     async ngOnInit() {
-        const data = await this._justificationsService
-            .getForDossierTemplate(this._dossiersService.activeDossier.dossierTemplateId)
-            .toPromise();
+        const data = await this._justificationsService.getForDossierTemplate(this.data.dossier.dossierTemplateId).toPromise();
 
         this.legalOptions = data.map(lbm => ({
             legalBasis: lbm.reason,
@@ -96,11 +86,13 @@ export class ManualAnnotationDialogComponent implements OnInit {
     }
 
     handleAddRedaction() {
-        this._enhanceManualRedaction(this.manualRedactionEntryWrapper.manualRedactionEntry);
-        this._manualAnnotationService.addAnnotation(this.manualRedactionEntryWrapper.manualRedactionEntry).subscribe(
-            response => this.dialogRef.close(new ManualAnnotationResponse(this.manualRedactionEntryWrapper, response)),
-            () => this.dialogRef.close(),
-        );
+        this._enhanceManualRedaction(this.data.manualRedactionEntryWrapper.manualRedactionEntry);
+        this._manualAnnotationService
+            .addAnnotation(this.data.manualRedactionEntryWrapper.manualRedactionEntry, this.data.dossier)
+            .subscribe(
+                response => this.dialogRef.close(new ManualAnnotationResponse(this.data.manualRedactionEntryWrapper, response)),
+                () => this.dialogRef.close(),
+            );
     }
 
     format(value: string) {
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.ts
index 807d1134a..3e6771b28 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.ts
@@ -5,11 +5,10 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { imageCategoriesTranslations } from '../../translations/image-categories-translations';
 import { ImageCategory } from '../../models/image-category.model';
+import { Dossier } from '@red/domain';
 
 @Component({
-    selector: 'redaction-recategorize-image-dialog',
     templateUrl: './recategorize-image-dialog.component.html',
-    styleUrls: ['./recategorize-image-dialog.component.scss'],
 })
 export class RecategorizeImageDialogComponent implements OnInit {
     recategorizeImageForm: FormGroup;
@@ -21,18 +20,18 @@ export class RecategorizeImageDialogComponent implements OnInit {
         private readonly _permissionsService: PermissionsService,
         private readonly _formBuilder: FormBuilder,
         public dialogRef: MatDialogRef,
-        @Inject(MAT_DIALOG_DATA) public annotations: AnnotationWrapper[],
+        @Inject(MAT_DIALOG_DATA) public data: { annotations: AnnotationWrapper[]; dossier: Dossier },
     ) {}
 
     get changed(): boolean {
-        return this.recategorizeImageForm.get('type').value !== this.annotations[0].type;
+        return this.recategorizeImageForm.get('type').value !== this.data.annotations[0].type;
     }
 
     ngOnInit() {
-        this.isDocumentAdmin = this._permissionsService.isApprover();
+        this.isDocumentAdmin = this._permissionsService.isApprover(this.data.dossier);
 
         this.recategorizeImageForm = this._formBuilder.group({
-            type: [this.annotations[0].type, Validators.required],
+            type: [this.data.annotations[0].type, Validators.required],
             comment: this.isDocumentAdmin ? [null] : [null, Validators.required],
         });
     }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
index be51531b1..5a7e4f1a5 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
@@ -39,7 +39,7 @@
                 
             
 
-            

+            

                 
                 
             

diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts
index f049be409..8c8f00246 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.ts
@@ -5,14 +5,15 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { PermissionsService } from '@services/permissions.service';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { humanize } from '@iqser/common-ui';
+import { Dossier } from '@red/domain';
 
 export interface RemoveAnnotationsDialogInput {
     annotationsToRemove: AnnotationWrapper[];
     removeFromDictionary: boolean;
+    dossier: Dossier;
 }
 
 @Component({
-    selector: 'redaction-remove-annotations-dialog',
     templateUrl: './remove-annotations-dialog.component.html',
     styleUrls: ['./remove-annotations-dialog.component.scss'],
 })
@@ -27,7 +28,7 @@ export class RemoveAnnotationsDialogComponent {
         @Inject(MAT_DIALOG_DATA) public data: RemoveAnnotationsDialogInput,
     ) {
         this.redactionForm = this._formBuilder.group({
-            comment: this.permissionsService.isApprover() ? [null] : [null, Validators.required],
+            comment: this.permissionsService.isApprover(this.data.dossier) ? [null] : [null, Validators.required],
         });
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.html
new file mode 100644
index 000000000..72a505f70
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.html
@@ -0,0 +1,21 @@
+

+    
+        

+
+        

+            

+                
+                
+            

+        

+
+        

+            
+            

+        

+    
+
+    
+

diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.ts
new file mode 100644
index 000000000..51e55a1ef
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/resize-annotation-dialog/resize-annotation-dialog.component.ts
@@ -0,0 +1,34 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { PermissionsService } from '@services/permissions.service';
+import { Dossier } from '@red/domain';
+
+@Component({
+    templateUrl: './resize-annotation-dialog.component.html',
+})
+export class ResizeAnnotationDialogComponent implements OnInit {
+    resizeForm: FormGroup;
+    isDocumentAdmin: boolean;
+
+    constructor(
+        private readonly _permissionsService: PermissionsService,
+        private readonly _formBuilder: FormBuilder,
+        public dialogRef: MatDialogRef,
+        @Inject(MAT_DIALOG_DATA) private readonly _data: { dossier: Dossier },
+    ) {}
+
+    ngOnInit() {
+        this.isDocumentAdmin = this._permissionsService.isApprover(this._data.dossier);
+
+        this.resizeForm = this._formBuilder.group({
+            comment: this.isDocumentAdmin ? [null] : [null, Validators.required],
+        });
+    }
+
+    save() {
+        this.dialogRef.close({
+            comment: this.resizeForm.get('comment').value,
+        });
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts b/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts
index e20b57beb..ed4a66bfc 100644
--- a/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts
@@ -1,27 +1,25 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CompositeRouteGuard } from '@iqser/common-ui';
-import { AuthGuard } from '../auth/auth.guard';
-import { RedRoleGuard } from '../auth/red-role.guard';
-import { AppStateGuard } from '@state/app-state.guard';
 import { SearchScreenComponent } from './screens/search-screen/search-screen.component';
 import { FilePreviewScreenComponent } from './screens/file-preview-screen/file-preview-screen.component';
+import { FilePreviewGuard } from '../../guards/file-preview.guard';
+import { DossierFilesGuard } from '../../guards/dossier-files-guard';
+import { GoBackGuard } from '@guards/go-back-guard.service';
+import { CompositeRouteGuard } from '@iqser/common-ui';
 
 const routes: Routes = [
     {
         path: 'search',
         component: SearchScreenComponent,
-        canActivate: [CompositeRouteGuard],
-        data: {
-            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
-        },
+        canActivate: [GoBackGuard],
+        canDeactivate: [GoBackGuard],
     },
     {
         path: ':dossierId',
         canActivate: [CompositeRouteGuard],
+        canDeactivate: [DossierFilesGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
-            reuse: true,
+            routeGuards: [DossierFilesGuard],
         },
         loadChildren: () => import('./screens/dossier-overview/dossier-overview.module').then(m => m.DossierOverviewModule),
     },
@@ -30,18 +28,14 @@ const routes: Routes = [
         component: FilePreviewScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
-            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
+            routeGuards: [DossierFilesGuard, FilePreviewGuard],
             reuse: true,
         },
+        canDeactivate: [FilePreviewGuard],
     },
     {
         path: '',
         pathMatch: 'full',
-        canActivate: [CompositeRouteGuard],
-        data: {
-            routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
-            reuse: true,
-        },
         loadChildren: () => import('./screens/dossiers-listing/dossiers-listing.module').then(m => m.DossiersListingModule),
     },
 ];
diff --git a/apps/red-ui/src/app/modules/dossier/dossiers.module.ts b/apps/red-ui/src/app/modules/dossier/dossiers.module.ts
index 4a1007320..dd543cd5d 100644
--- a/apps/red-ui/src/app/modules/dossier/dossiers.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/dossiers.module.ts
@@ -27,7 +27,6 @@ import { EditDossierDialogComponent } from './dialogs/edit-dossier-dialog/edit-d
 import { EditDossierGeneralInfoComponent } from './dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component';
 import { EditDossierDownloadPackageComponent } from './dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component';
 import { EditDossierDictionaryComponent } from './dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component';
-import { EditDossierTeamMembersComponent } from './dialogs/edit-dossier-dialog/team-members/edit-dossier-team-members.component';
 import { TeamMembersManagerComponent } from './components/team-members-manager/team-members-manager.component';
 import { ChangeLegalBasisDialogComponent } from './dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component';
 import { PageExclusionComponent } from './components/page-exclusion/page-exclusion.component';
@@ -40,6 +39,10 @@ import { AnnotationSourceComponent } from './components/file-workload/components
 import { OverlayModule } from '@angular/cdk/overlay';
 import { SharedDossiersModule } from './shared/shared-dossiers.module';
 import { PlatformSearchService } from './shared/services/platform-search.service';
+import { ResizeAnnotationDialogComponent } from './dialogs/resize-annotation-dialog/resize-annotation-dialog.component';
+import { BreadcrumbsService } from '@services/breadcrumbs.service';
+import { of } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
 
 const screens = [FilePreviewScreenComponent, SearchScreenComponent];
 
@@ -49,6 +52,7 @@ const dialogs = [
     ManualAnnotationDialogComponent,
     ForceRedactionDialogComponent,
     RemoveAnnotationsDialogComponent,
+    ResizeAnnotationDialogComponent,
     DocumentInfoDialogComponent,
     AssignReviewerApproverDialogComponent,
     ChangeLegalBasisDialogComponent,
@@ -66,7 +70,6 @@ const components = [
     EditDossierGeneralInfoComponent,
     EditDossierDownloadPackageComponent,
     EditDossierDictionaryComponent,
-    EditDossierTeamMembersComponent,
     EditDossierAttributesComponent,
     TeamMembersManagerComponent,
     PageExclusionComponent,
@@ -93,4 +96,12 @@ const services = [
     providers: [...services],
     imports: [CommonModule, SharedModule, SharedDossiersModule, FileUploadDownloadModule, DossiersRoutingModule, OverlayModule],
 })
-export class DossiersModule {}
+export class DossiersModule {
+    constructor(breadcrumbsService: BreadcrumbsService, translateService: TranslateService) {
+        breadcrumbsService.append({
+            name$: of(translateService.instant('top-bar.navigation-items.dossiers')),
+            routerLink: ['/main', 'dossiers'],
+            routerLinkActiveOptions: { exact: true },
+        });
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/models/annotation-action-mode.model.ts b/apps/red-ui/src/app/modules/dossier/models/annotation-action-mode.model.ts
index eabbda0a9..83f3965a0 100644
--- a/apps/red-ui/src/app/modules/dossier/models/annotation-action-mode.model.ts
+++ b/apps/red-ui/src/app/modules/dossier/models/annotation-action-mode.model.ts
@@ -11,4 +11,6 @@ export type AnnotationActionMode =
     | 'suggest'
     | 'undo'
     | 'force-redaction'
-    | 'request-force-redaction';
+    | 'request-force-redaction'
+    | 'resize'
+    | 'request-resize';
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html
index b343383f7..0dd90ce37 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html
@@ -1,4 +1,4 @@
-
+
     
 
-    
+    
 
     
     ,
+        readonly listingService: ListingService,
         private readonly _userPreferenceService: UserPreferenceService,
     ) {}
 
     get selectedFiles(): File[] {
-        return this._listingService.selected;
-    }
-
-    get areAllFilesSelected() {
-        return this.dossier.files.length !== 0 && this.selectedFiles.length === this.dossier.files.length;
-    }
-
-    get areSomeFilesSelected() {
-        return this.selectedFiles.length > 0;
+        return this.listingService.selected;
     }
 
     get allSelectedFilesCanBeAssignedIntoSameState() {
-        if (this.areSomeFilesSelected) {
-            const allFilesAreUnderReviewOrUnassigned = this.selectedFiles.reduce(
-                (acc, file) => acc && (file.isUnderReview || file.isUnassigned),
-                true,
-            );
-            const allFilesAreUnderApproval = this.selectedFiles.reduce((acc, file) => acc && file.isUnderApproval, true);
-            return allFilesAreUnderReviewOrUnassigned || allFilesAreUnderApproval;
-        }
-        return false;
+        const allFilesAreUnderReviewOrUnassigned = this.selectedFiles.reduce(
+            (acc, file) => acc && (file.isUnderReview || file.isUnassigned),
+            true,
+        );
+        const allFilesAreUnderApproval = this.selectedFiles.reduce((acc, file) => acc && file.isUnderApproval, true);
+        return allFilesAreUnderReviewOrUnassigned || allFilesAreUnderApproval;
     }
 
     get canAssignToSelf() {
@@ -92,10 +82,6 @@ export class DossierOverviewBulkActionsComponent {
         return this.selectedFiles.reduce((acc, file) => acc && file.canBeOCRed, true);
     }
 
-    get files() {
-        return this.selectedFiles.map(file => file.status);
-    }
-
     get canSetToUnderReview() {
         return this.selectedFiles.reduce((acc, file) => acc && this._permissionsService.canSetUnderReview(file), true);
     }
@@ -143,7 +129,6 @@ export class DossierOverviewBulkActionsComponent {
                         this.dossier.dossierId,
                     )
                     .toPromise();
-                await this._appStateService.reloadActiveDossierFiles();
                 this.reload.emit();
                 this._loadingService.stop();
             },
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.html
index 7ac4f3f4c..d350e144d 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.html
@@ -1,68 +1,74 @@
-
+
     

         
-        {{ 'dossier-overview.dossier-details.stats.documents' | translate: { count: dossier.files.length } }}
+        {{ 'dossier-overview.dossier-details.stats.documents' | translate: { count: stats.numberOfFiles } }}
     

+
+    

+        
+        {{
+            'dossier-overview.dossier-details.stats.processing-documents' | translate: { count: stats.numberOfProcessingFiles }
+        }}
+    

+
     

         
         {{ 'dossier-overview.dossier-details.stats.people' | translate: { count: dossier.memberIds.length } }}
     

+
     

         
-        {{
-            'dossier-overview.dossier-details.stats.analysed-pages' | translate: { count: dossier.totalNumberOfPages | number }
-        }}
+        {{ 'dossier-overview.dossier-details.stats.analysed-pages' | translate: { count: stats.numberOfPages | number } }}
     

-    

-        
-        {{
-                'dossier-overview.dossier-details.stats.created-on'
-                    | translate
-                        : {
-                              date: dossier.date | date: 'd MMM. yyyy'
-                          }
-            }}
-        
-    

-    

-        
-        {{
-            'dossier-overview.dossier-details.stats.due-date'
-                | translate
-                    : {
-                          date: dossier.dueDate | date: 'd MMM. yyyy'
-                      }
-        }}
-    

-    

-        
-        {{ dossierTemplate(dossier).name }} 
-    

-    

-        
-        {{ 'dossier-overview.dossier-details.dictionary' | translate }} 
+
+
+

+    
+    {{ 'dossier-overview.dossier-details.stats.created-on' | translate: { date: date } }}
+

+
+

+    
+    {{ 'dossier-overview.dossier-details.stats.due-date' | translate: { date: dueDate } }}
+

+
+

+    
+    {{ dossierTemplate(dossier).name }} 
+

+
+

+    
+    {{ 'dossier-overview.dossier-details.dictionary' | translate }} 
+

+
+

+    
+    {{ 'dossier-overview.dossier-details.stats.deleted' | translate: { count: deletedFilesCount$ | async } }}
+

+
+
+    

+        {{ 'dossier-overview.dossier-details.attributes.expand' | translate: { count: dossierAttributes.length } }}
     

 
-    
-        

-            {{ 'dossier-overview.dossier-details.attributes.expand' | translate: { count: dossierAttributes.length } }}
+    
+        

+            
+             {{ attr.label + ': -' }}
+             {{ attr.label + ': ' + (attr.value | date: 'd MMM. yyyy') }}
+            
+                {{ attr.label + ': ' + ('dossier-overview.dossier-details.attributes.image-uploaded' | translate) }}
+             {{ attr.label + ': ' + attr.value }}
         

 
-        
-            

-                
-                 {{ attr.label + ': -' }}
-                 {{ attr.label + ': ' + (attr.value | date: 'd MMM. yyyy') }}
-                
-                    {{ attr.label + ': ' + ('dossier-overview.dossier-details.attributes.image-uploaded' | translate) }}
-                 {{ attr.label + ': ' + attr.value }}
-            

-
-            

-                {{ 'dossier-overview.dossier-details.attributes.show-less' | translate }}
-            

-        
+        

+            {{ 'dossier-overview.dossier-details.attributes.show-less' | translate }}
+        

     
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
index ffc75ae44..f1bc2739c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
@@ -1,35 +1,55 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { AppStateService } from '@state/app-state.service';
-import { Dossier, DossierAttributeWithValue, DossierTemplate } from '@red/domain';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Dossier, DossierAttributeWithValue, DossierStats, DossierTemplate } from '@red/domain';
 import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
+import { FilesService } from '@services/entity-services/files.service';
+import { Observable } from 'rxjs';
+import { map, switchMapTo } from 'rxjs/operators';
+import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
+import { FilesMapService } from '@services/entity-services/files-map.service';
 
 @Component({
     selector: 'redaction-dossier-details-stats',
     templateUrl: './dossier-details-stats.component.html',
     styleUrls: ['./dossier-details-stats.component.scss'],
 })
-export class DossierDetailsStatsComponent {
+export class DossierDetailsStatsComponent implements OnInit {
     attributesExpanded = false;
-    @Input() dossierAttributes: DossierAttributeWithValue[];
-    @Output() readonly openDossierDictionaryDialog = new EventEmitter();
+    deletedFilesCount$: Observable;
+    dossierStats$: Observable;
+    @Input()
+    dossierAttributes: DossierAttributeWithValue[];
+    @Input()
+    dossier: Dossier;
+    @Output()
+    readonly openDossierDictionaryDialog = new EventEmitter();
 
     constructor(
-        private readonly _appStateService: AppStateService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _dialogService: DossiersDialogService,
+        private readonly _filesService: FilesService,
+        private readonly _dossierStatsService: DossierStatsService,
+        private readonly _filesMapService: FilesMapService,
         readonly dossiersService: DossiersService,
     ) {}
 
+    ngOnInit() {
+        this.dossierStats$ = this._dossierStatsService.watch$(this.dossier.dossierId);
+        this.deletedFilesCount$ = this._filesMapService.get$(this.dossier.dossierId).pipe(
+            switchMapTo(this._filesService.getDeletedFilesFor(this.dossier.id)),
+            map(files => files.length),
+        );
+    }
+
     dossierTemplate(dossier: Dossier): DossierTemplate {
         return this._dossierTemplatesService.find(dossier.dossierTemplateId);
     }
 
-    openEditDossierAttributesDialog(dossier: Dossier) {
+    openEditDossierAttributesDialog(dossierId: string, section: string) {
         this._dialogService.openDialog('editDossier', null, {
-            dossier,
-            section: 'dossierAttributes',
+            dossierId,
+            section: section,
         });
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html
index d47576b64..c56fb0f9c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html
@@ -1,4 +1,4 @@
-
+
     

         
         

@@ -15,7 +15,7 @@
         

         

             
-                
+                
 
                 
             
@@ -32,53 +33,60 @@
     

         

         
     

 
-    

-        
-    

-
-    

-        

-            
+    
+        

+            
         

-    

 
-    

-        
-    

+        

+            

+                
+            

+        

+
+        

+            
+        

+    
 
     

         

         
{{ description }}

     

-
 
-
-    
-
+    
+        
+    
+
 
 
     ;
+    readonly dossierStats$: Observable;
 
     constructor(
         readonly appStateService: AppStateService,
@@ -37,44 +40,48 @@ export class DossierDetailsComponent implements OnInit {
         readonly filterService: FilterService,
         private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _userService: UserService,
+        private readonly _dossierStatsService: DossierStatsService,
         private readonly _toaster: Toaster,
-    ) {}
+        private readonly _dialogService: DossiersDialogService,
+        activatedRoute: ActivatedRoute,
+    ) {
+        this.dossierId = activatedRoute.snapshot.paramMap.get('dossierId');
+        this.dossier$ = this.dossiersService.getEntityChanged$(this.dossierId).pipe(shareLast());
+        this.dossierStats$ = this.dossier$.pipe(
+            pluck('dossierId'),
+            switchMap(dossierId => this._dossierStatsService.watch$(dossierId)),
+        );
+    }
 
     get managers() {
-        return this._userService.managerUsers;
+        return this._userService.managerUsers.map(manager => manager.id);
     }
 
-    ngOnInit(): void {
-        this.owner = this._userService.find(this.dossiersService.activeDossier.ownerId);
-    }
-
-    calculateChartConfig(): void {
-        const activeDossier = this.dossiersService.activeDossier;
-        if (!activeDossier) {
-            return;
-        }
-
-        const groups = groupBy(activeDossier?.files, 'status');
-        let documentsChartData: DoughnutChartConfig[] = Object.keys(groups).map(status => ({
-            value: groups[status].length,
+    calculateChartConfig(stats: DossierStats): DoughnutChartConfig[] {
+        const documentsChartData: DoughnutChartConfig[] = Object.keys(stats.fileCountPerWorkflowStatus).map(status => ({
+            value: stats.fileCountPerWorkflowStatus[status],
             color: status,
-            label: fileStatusTranslations[status],
+            label: workflowFileStatusTranslations[status],
             key: status,
         }));
         documentsChartData.sort((a, b) => StatusSorter.byStatus(a.key, b.key));
-        documentsChartData = this.translateChartService.translateStatus(documentsChartData);
-        this.documentsChartData = documentsChartData;
-        this._changeDetectorRef.detectChanges();
+        return this.translateChartService.translateStatus(documentsChartData);
     }
 
-    async assignOwner(user: User | string) {
-        this.owner = typeof user === 'string' ? this._userService.find(user) : user;
-        const activeDossier = this.dossiersService.activeDossier;
-        const dossierRequest: IDossierRequest = { ...activeDossier, dossierId: activeDossier.dossierId, ownerId: this.owner.id };
+    async assignOwner(user: User | string, dossier: Dossier) {
+        const owner = typeof user === 'string' ? this._userService.find(user) : user;
+        const dossierRequest: IDossierRequest = { ...dossier, ownerId: owner.id };
         await this.dossiersService.createOrUpdate(dossierRequest).toPromise();
 
-        const ownerName = this._userService.getNameForId(this.owner.id);
-        const dossierName = activeDossier.dossierName;
+        const ownerName = this._userService.getNameForId(owner.id);
+        const dossierName = dossier.dossierName;
         this._toaster.info(_('assignment.owner'), { params: { ownerName, dossierName } });
     }
+
+    openEditDossierDialog(dossier: Dossier, section: string): void {
+        const data = { dossierId: this.dossierId, section };
+        this._dialogService.openDialog('editDossier', null, data, async () => {
+            await this.appStateService.getFiles(dossier);
+        });
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.html
new file mode 100644
index 000000000..0078aa46a
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.html
@@ -0,0 +1,14 @@
+

+    

+        
+        {{ file.numberOfPages }}
+    

+    

+        
+        {{ file.excludedPages.length }}
+    

+    

+        
+        {{ file.lastOCRTime | date: 'mediumDate' }}
+    

+

diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.scss
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.ts
new file mode 100644
index 000000000..e7b619086
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/file-stats/file-stats.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { File } from '@red/domain';
+
+@Component({
+    selector: 'redaction-file-stats',
+    templateUrl: './file-stats.component.html',
+    styleUrls: ['./file-stats.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileStatsComponent {
+    @Input() file: File;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/screen-header/screen-header.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/screen-header/screen-header.component.html
new file mode 100644
index 000000000..55e963335
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/screen-header/screen-header.component.html
@@ -0,0 +1,39 @@
+
+    
+
+    
+
+    
+
+    
+
+
+
+    
+
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/team-members/edit-dossier-team-members.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/screen-header/screen-header.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/team-members/edit-dossier-team-members.component.scss
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/screen-header/screen-header.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/screen-header/screen-header.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/screen-header/screen-header.component.ts
new file mode 100644
index 000000000..c31056276
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/screen-header/screen-header.component.ts
@@ -0,0 +1,82 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import { RouterHistoryService } from '@services/router-history.service';
+import { ActionConfig, CircleButtonTypes, EntitiesService, List, ListingService, SortingService, Toaster } from '@iqser/common-ui';
+import { Dossier, File } from '@red/domain';
+import { PermissionsService } from '@services/permissions.service';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { ReanalysisService } from '@services/reanalysis.service';
+import { map, take } from 'rxjs/operators';
+import { saveAsCSV } from '@utils/csv-utils';
+import { UserService } from '@services/user.service';
+import { ConfigService } from '../../config.service';
+
+@Component({
+    selector: 'redaction-screen-header',
+    templateUrl: './screen-header.component.html',
+    styleUrls: ['./screen-header.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScreenHeaderComponent implements OnInit {
+    @Input() viewModeSelection: TemplateRef;
+    @Input() dossier: Dossier;
+    @Input() analysisForced: boolean;
+    @Output() readonly actionPerformed = new EventEmitter();
+    readonly circleButtonTypes = CircleButtonTypes;
+    actionConfigs: List;
+
+    constructor(
+        private readonly _toaster: Toaster,
+        readonly configService: ConfigService,
+        private readonly _userService: UserService,
+        readonly listingService: ListingService,
+        readonly sortingService: SortingService,
+        readonly permissionsService: PermissionsService,
+        readonly entitiesService: EntitiesService,
+        readonly routerHistoryService: RouterHistoryService,
+        private readonly _reanalysisService: ReanalysisService,
+    ) {}
+
+    ngOnInit() {
+        this.actionConfigs = this.configService.actionConfig(this.dossier.dossierId);
+    }
+
+    async reanalyseDossier() {
+        try {
+            await this._reanalysisService.reanalyzeDossier(this.dossier.dossierId, true).toPromise();
+            this.actionPerformed.emit('reload');
+            this._toaster.success(_('dossier-overview.reanalyse-dossier.success'));
+        } catch (e) {
+            this._toaster.error(_('dossier-overview.reanalyse-dossier.error'));
+        }
+    }
+
+    exportFilesAsCSV() {
+        const sortedEntities$ = this.listingService.displayed$.pipe(map(entities => this.sortingService.defaultSort(entities)));
+        sortedEntities$.pipe(take(1)).subscribe(entities => {
+            const fileName = this.dossier.dossierName + '.export.csv';
+            saveAsCSV(
+                fileName,
+                entities,
+                [
+                    'dossierId',
+                    'fileId',
+                    'filename',
+                    'primaryAttribute',
+                    'numberOfPages',
+                    'assignee',
+                    'workflowStatus',
+                    'processingStatus',
+                    'lastUpdated',
+                    'lastUploaded',
+                    'lastProcessed',
+                    'hasHints',
+                    'hasImages',
+                    'hasRedactions',
+                    'hasUpdates',
+                    'excluded',
+                ],
+                fsv => ({ ...fsv, assignee: this._userService.getNameForId(fsv.currentReviewer) }),
+            );
+        });
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.html
new file mode 100644
index 000000000..b26d7ba2d
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.html
@@ -0,0 +1,3 @@
+

+    {{ file.added | date: 'd MMM. yyyy, hh:mm a' }}
+

diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.scss
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.ts
new file mode 100644
index 000000000..594582c75
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/added-column/added-column.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { File } from '@red/domain';
+
+@Component({
+    selector: 'redaction-added-column',
+    templateUrl: './added-column.component.html',
+    styleUrls: ['./added-column.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddedColumnComponent {
+    @Input() file: File;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.html
new file mode 100644
index 000000000..b8e13117d
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.html
@@ -0,0 +1,15 @@
+

+    

+        {{ file.filename }}
+    

+

+
+

+    

+        
+            {{ file.primaryAttribute }}
+        
+    

+

+
+
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.scss
new file mode 100644
index 000000000..bcbf74f08
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.scss
@@ -0,0 +1,10 @@
+@use 'common-mixins';
+
+.table-item-title {
+    max-width: 25vw;
+}
+
+.primary-attribute {
+    padding-top: 6px;
+    @include common-mixins.line-clamp(1);
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.ts
new file mode 100644
index 000000000..bc764a9c7
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-name-column/file-name-column.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { File } from '@red/domain';
+
+@Component({
+    selector: 'redaction-file-name-column',
+    templateUrl: './file-name-column.component.html',
+    styleUrls: ['./file-name-column.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileNameColumnComponent {
+    @Input() file: File;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.html
new file mode 100644
index 000000000..f5d0bc0e4
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.html
@@ -0,0 +1,9 @@
+

+    
+    
+    
+    
+    
+    
+    
+

diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.scss
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.ts
new file mode 100644
index 000000000..5894045a9
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/file-workload-column/file-workload-column.component.ts
@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { AppStateService } from '@state/app-state.service';
+import { File } from '@red/domain';
+import { DossiersService } from '@services/entity-services/dossiers.service';
+
+@Component({
+    selector: 'redaction-file-workload-column',
+    templateUrl: './file-workload-column.component.html',
+    styleUrls: ['./file-workload-column.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FileWorkloadColumnComponent {
+    @Input() file: File;
+
+    constructor(private readonly _appStateService: AppStateService, private readonly _dossiersService: DossiersService) {}
+
+    get suggestionColor() {
+        return this._getDictionaryColor('suggestion');
+    }
+
+    get imageColor() {
+        return this._getDictionaryColor('image');
+    }
+
+    get updatedColor() {
+        return this._getDictionaryColor('updated');
+    }
+
+    get analysisColor() {
+        return this._getDictionaryColor('analysis');
+    }
+
+    get hintColor() {
+        return this._getDictionaryColor('hint');
+    }
+
+    get redactionColor() {
+        return this._getDictionaryColor('redaction');
+    }
+
+    private _getDictionaryColor(type: string) {
+        return this._appStateService.getDictionaryColor(type, this._dossiersService.find(this.file.dossierId).dossierTemplateId);
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html
index 9662de4d3..1a9f75c89 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html
@@ -1,23 +1,9 @@
 

-    

-        

-            {{ file.filename }}
-        

-    

-    

-        

-            
-                {{ file.primaryAttribute }}
-            
-        

-    

-    
+    
 

 
 

-    

-        {{ file.added | date: 'd MMM. yyyy, hh:mm a' }}
-    

+    
 

 
 

@@ -29,36 +15,44 @@
     
 

 
-

-    
-

+
+    

+        
+    

 
-

-    
-

+    

+        
+    

 
-

-    

-        

-            
-            {{ file.numberOfPages }}
+    

+        

+            

+                
+                {{ file.numberOfPages }}
+            

         

     

-

+
 
 

     

     

-    

-    
+
+    

+        

+            
+        

+
+        
+    

 
      *:not(:last-child) {
+            margin-right: 16px;
+        }
+
+        .spinning > mat-icon {
+            height: 10px;
+            width: 10px;
+            opacity: 0.5;
+        }
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.ts
index 423bb01b7..d7bfd0034 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { File, IFileAttributeConfig } from '@red/domain';
 import { Required } from '@iqser/common-ui';
 
@@ -10,7 +10,6 @@ import { Required } from '@iqser/common-ui';
 })
 export class TableItemComponent {
     @Input() @Required() file!: File;
-    @Input() @Required() statsTemplate!: TemplateRef;
     @Input() @Required() displayedAttributes!: IFileAttributeConfig[];
     @Output() readonly calculateData = new EventEmitter();
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/view-mode-selection/view-mode-selection.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/view-mode-selection/view-mode-selection.component.html
new file mode 100644
index 000000000..1ce54287c
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/view-mode-selection/view-mode-selection.component.html
@@ -0,0 +1,19 @@
+

+    

+
+    
+
+    
+

diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/view-mode-selection/view-mode-selection.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/view-mode-selection/view-mode-selection.component.scss
new file mode 100644
index 000000000..85b2b0d54
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/view-mode-selection/view-mode-selection.component.scss
@@ -0,0 +1,17 @@
+@use 'apps/red-ui/src/assets/styles/variables';
+
+.view-mode-selection {
+    border-right: 1px solid variables.$separator;
+    padding-right: 16px;
+    margin-right: 16px !important;
+    display: flex;
+    align-items: center;
+
+    > iqser-circle-button:not(:last-child) {
+        margin-right: 2px;
+    }
+
+    > div {
+        margin-right: 8px;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts
new file mode 100644
index 000000000..9132282d1
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts
@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ConfigService } from '../../config.service';
+import { CircleButtonTypes, ListingModes } from '@iqser/common-ui';
+
+@Component({
+    selector: 'redaction-view-mode-selection',
+    templateUrl: './view-mode-selection.component.html',
+    styleUrls: ['./view-mode-selection.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ViewModeSelectionComponent {
+    readonly listingModes = ListingModes;
+    readonly circleButtonTypes = CircleButtonTypes;
+
+    constructor(readonly configService: ConfigService) {}
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html
new file mode 100644
index 000000000..6148644a7
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.html
@@ -0,0 +1,22 @@
+

+    

+        

+            

+                {{ file.filename }}
+            

+
+            
+        

+
+        

+            
+        

+    

+
+    
+

diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss
new file mode 100644
index 000000000..75bdb518a
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.scss
@@ -0,0 +1,34 @@
+@use 'common-mixins';
+
+.workflow-item {
+    padding: 10px;
+
+    > div {
+        display: flex;
+        justify-content: space-between;
+
+        .details {
+            max-width: calc(100% - 28px);
+
+            .filename {
+                font-weight: 600;
+                line-height: 18px;
+                @include common-mixins.line-clamp(1);
+            }
+        }
+
+        .user {
+            display: flex;
+            align-items: flex-end;
+        }
+    }
+
+    redaction-file-actions {
+        margin-top: 10px;
+        display: none;
+    }
+
+    &:hover redaction-file-actions {
+        display: block;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts
new file mode 100644
index 000000000..5fcbfd743
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/workflow-item/workflow-item.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { File } from '@red/domain';
+
+@Component({
+    selector: 'redaction-workflow-item',
+    templateUrl: './workflow-item.component.html',
+    styleUrls: ['./workflow-item.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WorkflowItemComponent {
+    @Input() file: File;
+    @Output() readonly actionPerformed = new EventEmitter();
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts
index 63001ca7e..e40d44079 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts
@@ -1,8 +1,10 @@
 import { Injectable, TemplateRef } from '@angular/core';
 import {
+    ActionConfig,
     IFilterGroup,
     INestedFilter,
     keyChecker,
+    List,
     ListingMode,
     ListingModes,
     LoadingService,
@@ -10,8 +12,8 @@ import {
     TableColumnConfig,
     WorkflowConfig,
 } from '@iqser/common-ui';
-import { File, FileStatus, FileStatuses, IFileAttributeConfig, StatusSorter } from '@red/domain';
-import { fileStatusTranslations } from '../../translations/file-status-translations';
+import { File, IFileAttributeConfig, StatusSorter, WorkflowFileStatus, WorkflowFileStatuses } from '@red/domain';
+import { workflowFileStatusTranslations } from '../../translations/file-status-translations';
 import { FileActionService } from '../../shared/services/file-action.service';
 import { AppStateService } from '@state/app-state.service';
 import { PermissionsService } from '@services/permissions.service';
@@ -25,9 +27,13 @@ import * as moment from 'moment';
 import { ConfigService as AppConfigService } from '@services/config.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { FilesService } from '@services/entity-services/files.service';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 @Injectable()
 export class ConfigService {
+    readonly listingMode$: Observable;
+    private readonly _listingMode$ = new BehaviorSubject(ListingModes.table);
+
     constructor(
         private readonly _fileActionService: FileActionService,
         private readonly _filesService: FilesService,
@@ -39,13 +45,23 @@ export class ConfigService {
         private readonly _userService: UserService,
         private readonly _dialogService: DossiersDialogService,
         private readonly _appConfigService: AppConfigService,
-    ) {}
+    ) {
+        this.listingMode$ = this._listingMode$.asObservable();
+    }
 
-    get actionConfig() {
+    get listingMode(): ListingMode {
+        return this._listingMode$.value;
+    }
+
+    set listingMode(listingMode: ListingMode) {
+        this._listingMode$.next(listingMode);
+    }
+
+    actionConfig(dossierId: string): List {
         return [
             {
                 label: this._translateService.instant('dossier-overview.header-actions.edit'),
-                action: $event => this._openEditDossierDialog($event),
+                action: $event => this._openEditDossierDialog($event, dossierId),
                 icon: 'iqser:edit',
                 hide: !this._userService.currentUser.isManager,
             },
@@ -90,41 +106,41 @@ export class ConfigService {
         ];
     }
 
-    workflowConfig(reloadDossiers: () => Promise): WorkflowConfig {
+    workflowConfig(reloadDossiers: () => Promise): WorkflowConfig {
         return {
-            columnIdentifierFn: entity => entity.status,
+            columnIdentifierFn: entity => entity.workflowStatus,
             itemVersionFn: (entity: File) => `${entity.lastUpdated}-${entity.numberOfAnalyses}`,
             columns: [
                 {
-                    label: fileStatusTranslations[FileStatuses.UNASSIGNED],
-                    key: FileStatuses.UNASSIGNED,
+                    label: workflowFileStatusTranslations[WorkflowFileStatuses.UNASSIGNED],
+                    key: WorkflowFileStatuses.UNASSIGNED,
                     enterFn: this._unassignFn(reloadDossiers),
                     enterPredicate: (file: File) => this._permissionsService.canUnassignUser(file),
                     color: '#D3D5DA',
                 },
                 {
-                    label: fileStatusTranslations[FileStatuses.UNDER_REVIEW],
+                    label: workflowFileStatusTranslations[WorkflowFileStatuses.UNDER_REVIEW],
                     enterFn: this._underReviewFn(reloadDossiers),
                     enterPredicate: (file: File) =>
                         this._permissionsService.canSetUnderReview(file) ||
                         this._permissionsService.canAssignToSelf(file) ||
                         this._permissionsService.canAssignUser(file),
-                    key: FileStatuses.UNDER_REVIEW,
+                    key: WorkflowFileStatuses.UNDER_REVIEW,
                     color: '#FDBD00',
                 },
                 {
-                    label: fileStatusTranslations[FileStatuses.UNDER_APPROVAL],
+                    label: workflowFileStatusTranslations[WorkflowFileStatuses.UNDER_APPROVAL],
                     enterFn: this._underApprovalFn(reloadDossiers),
                     enterPredicate: (file: File) =>
                         this._permissionsService.canSetUnderApproval(file) || this._permissionsService.canUndoApproval(file),
-                    key: FileStatuses.UNDER_APPROVAL,
+                    key: WorkflowFileStatuses.UNDER_APPROVAL,
                     color: '#374C81',
                 },
                 {
-                    label: fileStatusTranslations[FileStatuses.APPROVED],
+                    label: workflowFileStatusTranslations[WorkflowFileStatuses.APPROVED],
                     enterFn: this._approveFn(reloadDossiers),
                     enterPredicate: (file: File) => this._permissionsService.isReadyForApproval(file) && file.canBeApproved,
-                    key: FileStatuses.APPROVED,
+                    key: WorkflowFileStatuses.APPROVED,
                     color: '#48C9F7',
                 },
             ],
@@ -133,13 +149,12 @@ export class ConfigService {
 
     filterGroups(
         entities: File[],
-        listingMode: ListingMode,
         fileAttributeConfigs: IFileAttributeConfig[],
         needsWorkFilterTemplate: TemplateRef,
         checkedRequiredFilters: () => NestedFilter[],
         checkedNotRequiredFilters: () => NestedFilter[],
     ) {
-        const allDistinctFileStatuses = new Set();
+        const allDistinctWorkflowFileStatuses = new Set();
         const allDistinctPeople = new Set();
         const allDistinctAddedDates = new Set();
         const allDistinctNeedsWork = new Set();
@@ -150,7 +165,7 @@ export class ConfigService {
 
         entities.forEach(file => {
             allDistinctPeople.add(file.currentReviewer);
-            allDistinctFileStatuses.add(file.status);
+            allDistinctWorkflowFileStatuses.add(file.workflowStatus);
             allDistinctAddedDates.add(moment(file.added).format('DD/MM/YYYY'));
 
             if (file.analysisRequired) {
@@ -193,12 +208,12 @@ export class ConfigService {
             });
         });
 
-        if (listingMode === ListingModes.table) {
-            const statusFilters = [...allDistinctFileStatuses].map(
+        if (this.listingMode === ListingModes.table) {
+            const statusFilters = [...allDistinctWorkflowFileStatuses].map(
                 status =>
                     new NestedFilter({
                         id: status,
-                        label: this._translateService.instant(fileStatusTranslations[status]),
+                        label: this._translateService.instant(workflowFileStatusTranslations[status]),
                     }),
             );
 
@@ -207,7 +222,7 @@ export class ConfigService {
                 label: this._translateService.instant('filters.status'),
                 icon: 'red:status',
                 filters: statusFilters.sort((a, b) => StatusSorter[a.id] - StatusSorter[b.id]),
-                checker: keyChecker('status'),
+                checker: keyChecker('workflowStatus'),
             });
         }
 
@@ -331,28 +346,26 @@ export class ConfigService {
             {
                 id: 'unassigned',
                 label: this._translateService.instant('dossier-overview.quick-filters.unassigned'),
-                checker: (file: File) => !file.currentReviewer,
+                checker: (file: File) => file.isUnassigned,
             },
             {
                 id: 'assigned-to-others',
                 label: this._translateService.instant('dossier-overview.quick-filters.assigned-to-others'),
-                checker: (file: File) => !!file.currentReviewer && file.currentReviewer !== this._userService.currentUser.id,
+                checker: (file: File) => !file.isUnassigned && file.currentReviewer !== this._userService.currentUser.id,
             },
         ].map(filter => new NestedFilter(filter));
     }
 
-    private _openEditDossierDialog($event: MouseEvent) {
-        this._dialogService.openDialog('editDossier', $event, {
-            dossier: this._dossiersService.activeDossier,
-        });
+    private _openEditDossierDialog($event: MouseEvent, dossierId: string) {
+        this._dialogService.openDialog('editDossier', $event, { dossierId });
     }
 
     private _unassignFn = (reloadDossiers: () => Promise) => async (file: File) => {
         this._loadingService.start();
         if (file.isUnderReview) {
-            await this._filesService.setReviewerFor([file.fileId], this._dossiersService.activeDossierId, null).toPromise();
+            await this._filesService.setReviewerFor([file.fileId], file.dossierId, null).toPromise();
         } else if (file.isUnderApproval) {
-            await this._filesService.setUnderApprovalFor([file.fileId], this._dossiersService.activeDossierId, null).toPromise();
+            await this._filesService.setUnderApprovalFor([file.fileId], file.dossierId, null).toPromise();
         }
         this._loadingService.loadWhile(reloadDossiers());
     };
@@ -362,7 +375,8 @@ export class ConfigService {
     };
 
     private _underApprovalFn = (reloadDossiers: () => Promise) => async (file: File) => {
-        if (this._dossiersService.activeDossier.approverIds.length > 1) {
+        const dossier = this._dossiersService.find(file.dossierId);
+        if (dossier.approverIds.length > 1) {
             this._fileActionService.assignFile('approver', null, file, () => this._loadingService.loadWhile(reloadDossiers()), true);
         } else {
             this._loadingService.start();
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts
index 8a0293c3a..3d7b9fb5c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
 import { IqserIconsModule } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
@@ -11,12 +11,22 @@ import { DossierDetailsStatsComponent } from './components/dossier-details-stats
 import { TableItemComponent } from './components/table-item/table-item.component';
 import { ConfigService } from './config.service';
 import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
+import { FileWorkloadColumnComponent } from './components/table-item/file-workload-column/file-workload-column.component';
+import { FileStatsComponent } from './components/file-stats/file-stats.component';
+import { WorkflowItemComponent } from './components/workflow-item/workflow-item.component';
+import { ScreenHeaderComponent } from './components/screen-header/screen-header.component';
+import { ViewModeSelectionComponent } from './components/view-mode-selection/view-mode-selection.component';
+import { FileNameColumnComponent } from './components/table-item/file-name-column/file-name-column.component';
+import { AddedColumnComponent } from './components/table-item/added-column/added-column.component';
 
-const routes = [
+const routes: Routes = [
     {
         path: '',
         component: DossierOverviewScreenComponent,
         pathMatch: 'full',
+        data: {
+            reuse: true,
+        },
     },
 ];
 
@@ -26,7 +36,14 @@ const routes = [
         DossierOverviewBulkActionsComponent,
         DossierDetailsComponent,
         DossierDetailsStatsComponent,
+        FileWorkloadColumnComponent,
         TableItemComponent,
+        FileStatsComponent,
+        WorkflowItemComponent,
+        ScreenHeaderComponent,
+        ViewModeSelectionComponent,
+        FileNameColumnComponent,
+        AddedColumnComponent,
     ],
     providers: [ConfigService],
     imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, IqserIconsModule, TranslateModule],
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
index 1f173e733..f95dc48ab 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
@@ -1,168 +1,77 @@
-

-    
-        
+
+    

+        
 
-        
+        

 
-        
+        

+            

+                
 
-        
-    
+                
+            

 
-    

-
-    

-        

-            
-
-            
+            

+                
+            

         

+    

 
-        

-            
-        

-    

-
+    
+        
+    
+
 
 
-    
+    
 
 
 
 
-
-    
-
-
-
-    

-        

-        
-
-        
-    

-
-
 
     
 
 
 
-    

-        

-            

-                

-                    {{ file.filename }}
-                

-                
-            

-            

-                
-            

-        

-        
-    

-
-
-
-    

-        

-            
-            {{ file.numberOfPages }}
-        

-        

-            
-            {{ file.excludedPages.length }}
-        

-        

-            
-            {{ file.lastOCRTime | date: 'mediumDate' }}
-        

-    

+    
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss
index 6b70634b3..e27270951 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss
@@ -43,52 +43,3 @@
         background-color: inherit;
     }
 }
-
-.view-mode-selection {
-    border-right: 1px solid variables.$separator;
-    padding-right: 16px;
-    margin-right: 16px !important;
-    display: flex;
-    align-items: center;
-
-    > iqser-circle-button:not(:last-child) {
-        margin-right: 2px;
-    }
-
-    > div {
-        margin-right: 8px;
-    }
-}
-
-.workflow-item {
-    padding: 10px;
-
-    > div {
-        display: flex;
-        justify-content: space-between;
-
-        .details {
-            max-width: calc(100% - 28px);
-
-            .filename {
-                font-weight: 600;
-                line-height: 18px;
-                @include common-mixins.line-clamp(1);
-            }
-        }
-
-        .user {
-            display: flex;
-            align-items: flex-end;
-        }
-    }
-
-    redaction-file-actions {
-        margin-top: 10px;
-        display: none;
-    }
-
-    &:hover redaction-file-actions {
-        display: block;
-    }
-}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts
index 45a43391c..7b226b0c4 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts
@@ -1,6 +1,5 @@
 import {
     ChangeDetectionStrategy,
-    ChangeDetectorRef,
     Component,
     ElementRef,
     forwardRef,
@@ -11,22 +10,18 @@ import {
     TemplateRef,
     ViewChild,
 } from '@angular/core';
-import { Dossier, DossierAttributeWithValue, File, FileStatus, IFileAttributeConfig } from '@red/domain';
+import { Dossier, DossierAttributeWithValue, File, IFileAttributeConfig, WorkflowFileStatus } from '@red/domain';
 import { AppStateService } from '@state/app-state.service';
 import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
 import { FileUploadModel } from '@upload-download/model/file-upload.model';
 import { FileUploadService } from '@upload-download/services/file-upload.service';
 import { StatusOverlayService } from '@upload-download/services/status-overlay.service';
-import { TranslateService } from '@ngx-translate/core';
 import * as moment from 'moment';
-import { DossierDetailsComponent } from '../components/dossier-details/dossier-details.component';
-import { UserService } from '@services/user.service';
-import { timer } from 'rxjs';
-import { take, tap } from 'rxjs/operators';
+import { Observable, timer } from 'rxjs';
+import { filter, switchMap, tap } from 'rxjs/operators';
 import { convertFiles, Files, handleFileDrop } from '@utils/index';
-import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
 import {
-    ActionConfig,
+    CHANGED_CHECK_INTERVAL,
     CircleButtonTypes,
     DefaultListingServices,
     ListingComponent,
@@ -37,14 +32,12 @@ import {
     OnDetach,
     TableColumnConfig,
     TableComponent,
-    Toaster,
     WorkflowConfig,
 } from '@iqser/common-ui';
 import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { PermissionsService } from '@services/permissions.service';
-import { RouterHistoryService } from '@services/router-history.service';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 import { ConfigService as AppConfigService } from '@services/config.service';
 import { ConfigService } from '../config.service';
@@ -52,7 +45,9 @@ import { DossiersService } from '@services/entity-services/dossiers.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
 import { LongPressEvent } from '@shared/directives/long-press.directive';
 import { UserPreferenceService } from '@services/user-preference.service';
-import { saveAsCSV } from '@utils/csv-utils';
+import { FilesMapService } from '@services/entity-services/files-map.service';
+import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
+import { FilesService } from '@services/entity-services/files.service';
 
 @Component({
     templateUrl: './dossier-overview-screen.component.html',
@@ -63,49 +58,56 @@ import { saveAsCSV } from '@utils/csv-utils';
 export class DossierOverviewScreenComponent extends ListingComponent implements OnInit, OnDestroy, OnDetach, OnAttach {
     readonly listingModes = ListingModes;
     readonly circleButtonTypes = CircleButtonTypes;
-    readonly currentUser = this._userService.currentUser;
     readonly tableHeaderLabel = _('dossier-overview.table-header.title');
 
-    currentDossier = this._dossiersService.activeDossier;
     collapsedDetails = false;
     dossierAttributes: DossierAttributeWithValue[] = [];
     tableColumnConfigs: readonly TableColumnConfig[];
     analysisForced: boolean;
     displayedInFileListAttributes: IFileAttributeConfig[] = [];
     displayedAttributes: IFileAttributeConfig[] = [];
-    readonly workflowConfig: WorkflowConfig = this._configService.workflowConfig(() => this.reloadDossiers());
-    readonly actionConfigs: readonly ActionConfig[] = this._configService.actionConfig;
-    @ViewChild(DossierDetailsComponent, { static: false }) private readonly _dossierDetailsComponent: DossierDetailsComponent;
-    private _lastScrolledIndex: number;
+    readonly workflowConfig: WorkflowConfig = this.configService.workflowConfig(() => this.reloadFiles());
+    readonly dossier$: Observable;
+    readonly dossierId: string;
+    currentDossier: Dossier;
+    dossierTemplateId: string;
     @ViewChild('needsWorkFilterTemplate', { read: TemplateRef, static: true })
     private readonly _needsWorkFilterTemplate: TemplateRef;
-    @ViewChild('fileInput') private readonly _fileInput: ElementRef;
+    @ViewChild('fileInput', { static: true }) private readonly _fileInput: ElementRef;
     @ViewChild(TableComponent) private readonly _tableComponent: TableComponent;
 
     constructor(
-        private readonly _toaster: Toaster,
         protected readonly _injector: Injector,
         private readonly _router: Router,
-        private readonly _userService: UserService,
         readonly permissionsService: PermissionsService,
         private readonly _loadingService: LoadingService,
         private readonly _appStateService: AppStateService,
         private readonly _dossiersService: DossiersService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
-        readonly routerHistoryService: RouterHistoryService,
         private readonly _appConfigService: AppConfigService,
-        private readonly _translateService: TranslateService,
-        private readonly _dialogService: DossiersDialogService,
-        private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _fileUploadService: FileUploadService,
+        private readonly _filesService: FilesService,
         private readonly _statusOverlayService: StatusOverlayService,
         private readonly _fileDropOverlayService: FileDropOverlayService,
         private readonly _dossierAttributesService: DossierAttributesService,
         private readonly _fileAttributesService: FileAttributesService,
-        private readonly _configService: ConfigService,
+        readonly configService: ConfigService,
         private readonly _userPreferenceService: UserPreferenceService,
+        private readonly _fileMapService: FilesMapService,
+        private readonly _dossierStatsService: DossierStatsService,
+        activatedRoute: ActivatedRoute,
     ) {
         super(_injector);
+        this.dossierId = activatedRoute.snapshot.paramMap.get('dossierId');
+        this.dossier$ = this._dossiersService
+            .getEntityChanged$(this.dossierId)
+            .pipe(tap(dossier => (this.dossierTemplateId = dossier.dossierTemplateId)));
+        this.currentDossier = this._dossiersService.find(this.dossierId);
+
+        this.fileAttributeConfigs = this._fileAttributesService.getFileAttributeConfig(
+            this.currentDossier.dossierTemplateId,
+        )?.fileAttributeConfigs;
+        this.tableColumnConfigs = this.configService.tableConfig(this.displayedAttributes);
     }
 
     private _fileAttributeConfigs: IFileAttributeConfig[];
@@ -125,62 +127,63 @@ export class DossierOverviewScreenComponent extends ListingComponent imple
     }
 
     async actionPerformed(action?: string, file?: File) {
-        if (action === 'assign-reviewer') {
-            return this.reloadDossiers();
+        if (['assign-reviewer', 'reload'].includes(action)) {
+            return this.reloadFiles();
         }
 
-        this.calculateData();
+        if (action === 'upload') {
+            return this._fileInput.nativeElement.click();
+        }
+
+        this._loadEntitiesFromState();
 
         if (action === 'navigate') {
             await this._router.navigate([file.routerLink]);
         }
     }
 
-    disabledFn = (fileStatus: File) => fileStatus.excluded;
+    disabledFn = (file: File) => file.excluded;
 
-    lastOpenedFn = (fileStatus: File) => fileStatus.lastOpened;
+    lastOpenedFn = (file: File) => this._userPreferenceService.getLastOpenedFileForDossier(file.dossierId) === file.id;
 
     async ngOnInit(): Promise {
-        this._loadingService.start();
         this._loadEntitiesFromState();
-        this.fileAttributeConfigs = this._fileAttributesService.getFileAttributeConfig(
-            this.currentDossier.dossierTemplateId,
-        )?.fileAttributeConfigs;
-        this.tableColumnConfigs = this._configService.tableConfig(this.displayedAttributes);
+
+        this.addSubscription = this._fileMapService
+            .get$(this.dossierId)
+            .pipe(
+                tap(files => this.entitiesService.setEntities(files)),
+                tap(() => this._computeAllFilters()),
+            )
+            .subscribe();
+
+        this._fileDropOverlayService.initFileDropHandling(this.dossierId);
+
+        this.addSubscription = timer(CHANGED_CHECK_INTERVAL, CHANGED_CHECK_INTERVAL)
+            .pipe(
+                switchMap(() => this._filesService.hasChanges$(this.dossierId)),
+                filter(changed => changed),
+                switchMap(() => this.reloadFiles()),
+            )
+            .subscribe();
+
+        this.addSubscription = this.configService.listingMode$.subscribe(() => {
+            this._computeAllFilters();
+        });
+
+        this.addSubscription = this._dossierTemplatesService.entityChanged$.subscribe(() => {
+            this.fileAttributeConfigs = this._fileAttributesService.getFileAttributeConfig(
+                this.currentDossier.dossierTemplateId,
+            )?.fileAttributeConfigs;
+        });
+
         try {
-            this._fileDropOverlayService.initFileDropHandling();
-
-            this.calculateData();
-
-            this.addSubscription = timer(0, 20 * 1000).subscribe(async () => {
-                await this._appStateService.reloadActiveDossierFilesIfNecessary();
-                this.calculateData();
-            });
-
-            this.addSubscription = this.listingMode$.subscribe(() => {
-                this._computeAllFilters();
-            });
-
-            // this.addSubscription = this._appStateService.fileChanged$.subscribe(() => {
-            //     this.calculateData();
-            // });
-
-            this.addSubscription = this._dossierTemplatesService.entityChanged$.subscribe(() => {
-                this.fileAttributeConfigs = this._fileAttributesService.getFileAttributeConfig(
-                    this.currentDossier.dossierTemplateId,
-                )?.fileAttributeConfigs;
-            });
-
-            this.addSubscription = this._tableComponent.scrollViewport.scrolledIndexChange
-                .pipe(tap(index => (this._lastScrolledIndex = index)))
-                .subscribe();
-
             this.dossierAttributes = await this._dossierAttributesService.getWithValues(this.currentDossier);
         } catch (e) {
             console.log('Error from dossier overview screen: ', e);
-        } finally {
-            this._loadingService.stop();
         }
+
+        this._loadingService.stop();
     }
 
     ngOnDestroy(): void {
@@ -189,10 +192,8 @@ export class DossierOverviewScreenComponent extends ListingComponent imple
     }
 
     async ngOnAttach() {
-        await this._appStateService.reloadActiveDossierFiles();
-        this._loadEntitiesFromState();
         await this.ngOnInit();
-        this._tableComponent.scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
+        this._tableComponent?.scrollToLastIndex();
     }
 
     ngOnDetach() {
@@ -203,36 +204,16 @@ export class DossierOverviewScreenComponent extends ListingComponent imple
         this.analysisForced = !$event.touchEnd && this._userPreferenceService.areDevFeaturesEnabled;
     }
 
-    async reanalyseDossier() {
-        try {
-            await this._appStateService.reanalyzeDossier();
-            await this.reloadDossiers();
-            this._toaster.success(_('dossier-overview.reanalyse-dossier.success'));
-        } catch (e) {
-            this._toaster.error(_('dossier-overview.reanalyse-dossier.error'));
-        }
-    }
-
-    async reloadDossiers() {
-        await this._appStateService.getFiles(this.currentDossier, false);
-        this.calculateData();
-    }
-
-    calculateData(): void {
-        if (!this._dossiersService.activeDossierId) {
-            return;
-        }
-
-        this._loadEntitiesFromState();
+    async reloadFiles() {
+        await this._appStateService.getFiles(this.currentDossier);
+        await this._dossierStatsService.getFor([this.dossierId]).toPromise();
         this._computeAllFilters();
-
-        this._dossierDetailsComponent?.calculateChartConfig();
-        this._changeDetectorRef.detectChanges();
     }
 
     @HostListener('drop', ['$event'])
     onDrop(event: DragEvent): void {
-        handleFileDrop(event, this.currentDossier, this._uploadFiles.bind(this));
+        const currentDossier = this._dossiersService.find(this.dossierId);
+        handleFileDrop(event, currentDossier, this._uploadFiles.bind(this));
     }
 
     @HostListener('dragover', ['$event'])
@@ -241,84 +222,29 @@ export class DossierOverviewScreenComponent extends ListingComponent imple
         event.preventDefault();
     }
 
-    exportFilesAsCSV() {
-        this.sortedDisplayedEntities$.pipe(take(1)).subscribe(entities => {
-            const fileName = this._dossiersService.activeDossier.dossierName + '.export.csv';
-            saveAsCSV(
-                fileName,
-                entities,
-                [
-                    'dossierId',
-                    'fileId',
-                    'filename',
-                    'primaryAttribute',
-                    'numberOfPages',
-                    'assignee',
-                    'status',
-                    'lastUpdated',
-                    'lastUploaded',
-                    'lastProcessed',
-                    'hasHints',
-                    'hasImages',
-                    'hasRedactions',
-                    'hasUpdates',
-                    'excluded',
-                ],
-                fsv => ({ ...fsv, assignee: this._userService.getNameForId(fsv.currentReviewer) }),
-            );
-        });
-    }
-
     async uploadFiles(files: Files): Promise {
         await this._uploadFiles(convertFiles(files, this.currentDossier));
-        this._fileInput.nativeElement.value = null;
-    }
-
-    async bulkActionPerformed(): Promise {
-        await this.reloadDossiers();
-    }
-
-    openAssignDossierMembersDialog(): void {
-        const data = { dossier: this.currentDossier, section: 'members' };
-        this._dialogService.openDialog('editDossier', null, data, async () => this.reloadDossiers());
-    }
-
-    openDossierDictionaryDialog() {
-        const data = { dossier: this.currentDossier, section: 'dossierDictionary' };
-        this._dialogService.openDialog('editDossier', null, data, async () => {
-            await this.reloadDossiers();
-        });
-    }
-
-    toggleCollapsedDetails() {
-        this.collapsedDetails = !this.collapsedDetails;
+        (this._fileInput as any).nativeElement.value = null;
     }
 
     recentlyModifiedChecker = (file: File) =>
         moment(file.lastUpdated).add(this._appConfigService.values.RECENT_PERIOD_IN_HOURS, 'hours').isAfter(moment());
 
     private _loadEntitiesFromState() {
-        this.currentDossier = this._dossiersService.activeDossier;
-        if (this.currentDossier) {
-            this.entitiesService.setEntities([...this.currentDossier.files]);
-        }
+        this.currentDossier = this._dossiersService.find(this.dossierId);
+        this._computeAllFilters();
     }
 
     private async _uploadFiles(files: FileUploadModel[]) {
-        const fileCount = await this._fileUploadService.uploadFiles(files);
+        const fileCount = await this._fileUploadService.uploadFiles(files, this.dossierId);
         if (fileCount) {
             this._statusOverlayService.openUploadStatusOverlay();
         }
     }
 
     private _computeAllFilters() {
-        if (!this.currentDossier) {
-            return;
-        }
-
-        const filterGroups = this._configService.filterGroups(
+        const filterGroups = this.configService.filterGroups(
             this.entitiesService.all,
-            this.listingMode,
             this._fileAttributeConfigs,
             this._needsWorkFilterTemplate,
             () => this.checkedRequiredFilters,
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.html
new file mode 100644
index 000000000..361790fd9
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.html
@@ -0,0 +1,22 @@
+

+    
+
+    
+
+    
+

diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.scss
new file mode 100644
index 000000000..ab462620f
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.scss
@@ -0,0 +1,17 @@
+.needs-work {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+
+    > *:not(:last-child) {
+        margin-right: 4px;
+    }
+
+    mat-icon {
+        min-width: 16px;
+        width: 16px;
+        height: 16px;
+        fill-opacity: 0.6;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts
new file mode 100644
index 000000000..4989a0a84
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts
@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { AppStateService } from '@state/app-state.service';
+import { Dossier, DossierStats } from '@red/domain';
+
+@Component({
+    selector: 'redaction-dossier-workload-column',
+    templateUrl: './dossier-workload-column.component.html',
+    styleUrls: ['./dossier-workload-column.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DossierWorkloadColumnComponent {
+    @Input() dossier: Dossier;
+    @Input() dossierStats: DossierStats;
+
+    constructor(private readonly _appStateService: AppStateService) {}
+
+    get suggestionColor() {
+        return this._appStateService.getDictionaryColor('suggestion', this.dossier.dossierTemplateId);
+    }
+
+    get hintColor() {
+        return this._appStateService.getDictionaryColor('hint', this.dossier.dossierTemplateId);
+    }
+
+    get redactionColor() {
+        return this._appStateService.getDictionaryColor('redaction', this.dossier.dossierTemplateId);
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
index 204ab224f..6c1bd51a1 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
@@ -1,7 +1,8 @@
-
-

+
+
+

     
 
     
 
-    
+    
 

diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
index 0b865647f..611d05fdb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
@@ -1,13 +1,15 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
-import { StatusSorter } from '../../../../../../../../../../libs/red-domain/src/lib/shared/sorters/status-sorter';
-import { CircleButtonTypes, StatusBarConfig } from '@iqser/common-ui';
+import { CircleButtonTypes, List, StatusBarConfig } from '@iqser/common-ui';
 import { UserService } from '@services/user.service';
-import { AppStateService } from '@state/app-state.service';
-import { Dossier } from '@red/domain';
+import { Dossier, DossierStats, File, StatusSorter } from '@red/domain';
 import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
 import { LongPressEvent } from '@shared/directives/long-press.directive';
 import { UserPreferenceService } from '@services/user-preference.service';
+import { FilesMapService } from '@services/entity-services/files-map.service';
+import { ReanalysisService } from '@services/reanalysis.service';
+import { switchMapTo, tap } from 'rxjs/operators';
+import { DossiersService } from '@services/entity-services/dossiers.service';
 
 @Component({
     selector: 'redaction-dossiers-listing-actions',
@@ -15,58 +17,56 @@ import { UserPreferenceService } from '@services/user-preference.service';
     styleUrls: ['./dossiers-listing-actions.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DossiersListingActionsComponent {
+export class DossiersListingActionsComponent implements OnChanges {
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
 
     analysisForced: boolean;
+    statusBarConfig: List>;
+    files: File[];
+    displayReanalyseBtn = false;
 
     @Input() dossier: Dossier;
+    @Input() stats: DossierStats;
+
     @Output() readonly actionPerformed = new EventEmitter();
 
     constructor(
-        readonly permissionsService: PermissionsService,
-        readonly appStateService: AppStateService,
-        private readonly _dialogService: DossiersDialogService,
+        private readonly _reanalysisService: ReanalysisService,
         private readonly _userService: UserService,
+        private readonly _dossiersService: DossiersService,
+        readonly permissionsService: PermissionsService,
+        readonly filesMapService: FilesMapService,
+        private readonly _dialogService: DossiersDialogService,
         private readonly _userPreferenceService: UserPreferenceService,
     ) {}
 
-    get statusConfig(): readonly StatusBarConfig[] {
-        if (!this.dossier) {
-            return [];
-        }
+    private get _statusConfig(): List> {
+        const { fileCountPerWorkflowStatus } = this.stats;
+        const statuses = Object.keys(fileCountPerWorkflowStatus).sort(StatusSorter.byStatus);
+        return statuses.map(status => ({ length: fileCountPerWorkflowStatus[status], color: status }));
+    }
 
-        const obj = this.dossier.files.reduce((acc, file) => {
-            const status = file.status;
-            if (!acc[status]) {
-                acc[status] = 1;
-            } else {
-                acc[status]++;
-            }
-            return acc;
-        }, {});
-
-        return Object.keys(obj)
-            .sort(StatusSorter.byStatus)
-            .map(status => ({ length: obj[status], color: status }));
+    ngOnChanges() {
+        this.statusBarConfig = this._statusConfig;
+        this.files = this.filesMapService.get(this.dossier.dossierId);
+        this.displayReanalyseBtn = this.permissionsService.displayReanalyseBtn(this.dossier) && this.analysisForced;
     }
 
     forceReanalysisAction($event: LongPressEvent) {
         this.analysisForced = !$event.touchEnd && this._userPreferenceService.areDevFeaturesEnabled;
     }
 
-    openEditDossierDialog($event: MouseEvent, dossier: Dossier): void {
+    openEditDossierDialog($event: MouseEvent, dossierId: string): void {
         this._dialogService.openDialog('editDossier', $event, {
-            dossier,
+            dossierId,
             afterSave: () => this.actionPerformed.emit(),
         });
     }
 
-    reanalyseDossier($event: MouseEvent, dossier: Dossier): void {
+    async reanalyseDossier($event: MouseEvent, id: string): Promise {
         $event.stopPropagation();
-        this.appStateService.reanalyzeDossier(dossier).then(() => {
-            this.appStateService.loadAllDossiers().then(() => this.actionPerformed.emit());
-        });
+        const reanalysis$ = this._reanalysisService.reanalyzeDossier(id).pipe(switchMapTo(this._dossiersService.loadAll()));
+        await reanalysis$.pipe(tap(() => this.actionPerformed.emit())).toPromise();
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html
index 8bcc76779..ffcf42195 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html
@@ -1,12 +1,13 @@
 

     
 
-    

+    

         

             
             

@@ -24,9 +25,11 @@
         

     

 

+
 

     ;
+    readonly dossiersChartData$: Observable;
 
-    constructor(readonly filterService: FilterService, readonly dossiersService: DossiersService) {}
+    constructor(
+        readonly filterService: FilterService,
+        readonly dossiersService: DossiersService,
+        private readonly _dossierStatsMap: DossierStatsService,
+        private readonly _translateChartService: TranslateChartService,
+    ) {
+        this.documentsChartData$ = this.dossiersService.all$.pipe(
+            mapEach(dossier => _dossierStatsMap.watch$(dossier.dossierId)),
+            switchMap(stats$ => combineLatest(stats$)),
+            filter(stats => !stats.some(s => s === undefined)),
+            map(stats => this._toChartData(stats)),
+        );
+
+        this.dossiersChartData$ = this.dossiersService.all$.pipe(switchMap(dossiers => this._toDossierChartData(dossiers)));
+    }
+
+    private async _toDossierChartData(dossiers: Dossier[]): Promise {
+        // TODO: deleted dossiers count should come with stats
+        const deletedDossiers = await this.dossiersService.getDeleted();
+        return [
+            { value: dossiers.length, color: 'ACTIVE', label: _('active') },
+            { value: deletedDossiers.length, color: 'DELETED', label: _('archived') },
+        ];
+    }
+
+    private _toChartData(stats: DossierStats[]) {
+        const chartData: FileCountPerWorkflowStatus = {};
+        stats.forEach(stat => {
+            const statuses: FileCountPerWorkflowStatus = stat.fileCountPerWorkflowStatus;
+            Object.keys(statuses).forEach(status => {
+                chartData[status] = chartData[status] ? (chartData[status] as number) + (statuses[status] as number) : statuses[status];
+            });
+        });
+
+        const documentsChartData = Object.keys(chartData).map(
+            status =>
+                ({
+                    value: chartData[status],
+                    color: status,
+                    label: workflowFileStatusTranslations[status],
+                    key: status,
+                } as DoughnutChartConfig),
+        );
+        documentsChartData.sort((a, b) => StatusSorter.byStatus(a.key, b.key));
+        return this._translateChartService.translateStatus(documentsChartData);
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html
index 754cdc5b7..7f8d42a1e 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html
@@ -1,29 +1,35 @@
 

     {{ dossier.dossierName }}
 

+
 

     

         
         {{ getDossierTemplateNameFor(dossier.dossierTemplateId) }}
     

 

+
 

     

         
-        {{ dossier.filesLength }}
+        {{ dossierStats.numberOfFiles }}
     

+
     

         
-        {{ dossier.totalNumberOfPages }}
+        {{ dossierStats.numberOfPages }}
     

+
     

         
         {{ dossier.memberIds.length }}
     

+
     

         
         {{ dossier.date | date: 'mediumDate' }}
     

+
     

         
         {{ dossier.dueDate | date: 'mediumDate' }}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts
index 8454d65aa..5a270d9fc 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts
@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { Dossier } from '@red/domain';
+import { Dossier, DossierStats } from '@red/domain';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
+import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
+import { DossiersService } from '@services/entity-services/dossiers.service';
 
 @Component({
     selector: 'redaction-dossiers-listing-dossier-name',
@@ -10,8 +12,13 @@ import { DossierTemplatesService } from '@services/entity-services/dossier-templ
 })
 export class DossiersListingDossierNameComponent {
     @Input() dossier: Dossier;
+    @Input() dossierStats: DossierStats;
 
-    constructor(private readonly _dossierTemplatesService: DossierTemplatesService) {}
+    constructor(
+        private readonly _dossierTemplatesService: DossierTemplatesService,
+        private readonly _dossierStatsService: DossierStatsService,
+        private readonly _dossiersService: DossiersService,
+    ) {}
 
     getDossierTemplateNameFor(dossierTemplateId: string): string {
         return this._dossierTemplatesService.find(dossierTemplateId).name;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
index 8bc85208b..646b60adc 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
@@ -1,12 +1,19 @@
 

-    
+    
 

+
 

-    
+    
 

+
 

     
 

+
 

-    
+    
 

diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
index 62ffd1013..c4700f034 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
@@ -1,13 +1,23 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Dossier } from '@red/domain';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Dossier, DossierStats } from '@red/domain';
 import { Required } from '@iqser/common-ui';
+import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
 
 @Component({
     selector: 'redaction-table-item',
     templateUrl: './table-item.component.html',
     styleUrls: ['./table-item.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TableItemComponent {
+export class TableItemComponent implements OnChanges {
     @Input() @Required() dossier!: Dossier;
     @Output() readonly calculateData = new EventEmitter();
+
+    stats: DossierStats;
+
+    constructor(readonly dossierStatsService: DossierStatsService) {}
+
+    ngOnChanges() {
+        this.stats = this.dossierStatsService.get(this.dossier.dossierId);
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts
index d929ebb50..c12b9f8e5 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts
@@ -1,21 +1,16 @@
 import { Injectable, TemplateRef } from '@angular/core';
-import { ButtonConfig, IFilterGroup, keyChecker, NestedFilter, TableColumnConfig } from '@iqser/common-ui';
+import { ButtonConfig, IFilterGroup, INestedFilter, keyChecker, NestedFilter, TableColumnConfig } from '@iqser/common-ui';
 import { Dossier, StatusSorter, User } from '@red/domain';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
 import { UserPreferenceService } from '@services/user-preference.service';
 import { UserService } from '@services/user.service';
-import { fileStatusTranslations } from '../../translations/file-status-translations';
-import {
-    annotationFilterChecker,
-    dossierMemberChecker,
-    dossierStatusChecker,
-    dossierTemplateChecker,
-    RedactionFilterSorter,
-} from '@utils/index';
+import { workflowFileStatusTranslations } from '../../translations/file-status-translations';
+import { dossierMemberChecker, dossierTemplateChecker, RedactionFilterSorter } from '@utils/index';
 import { workloadTranslations } from '../../translations/workload-translations';
 import { AppStateService } from '@state/app-state.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
+import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
 
 @Injectable()
 export class ConfigService {
@@ -25,6 +20,7 @@ export class ConfigService {
         private readonly _userService: UserService,
         private readonly _appStateService: AppStateService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
+        private readonly _dossierStatsService: DossierStatsService,
     ) {}
 
     get tableConfig(): TableColumnConfig[] {
@@ -76,6 +72,7 @@ export class ConfigService {
                 hide: !this._currentUser.isManager,
                 icon: 'iqser:plus',
                 type: 'primary',
+                helpModeKey: 'new-dossier-button',
             },
         ];
     }
@@ -89,36 +86,35 @@ export class ConfigService {
         const filterGroups: IFilterGroup[] = [];
 
         entities?.forEach(entry => {
-            // all people
             entry.memberIds.forEach(f => allDistinctPeople.add(f));
-            // Needs work
-            entry.files.forEach(file => {
-                allDistinctFileStatus.add(file.status);
-                if (file.analysisRequired) {
-                    allDistinctNeedsWork.add('analysis');
-                }
-                if (entry.hintsOnly) {
-                    allDistinctNeedsWork.add('hint');
-                }
-                if (entry.hasRedactions) {
-                    allDistinctNeedsWork.add('redaction');
-                }
-                if (entry.hasSuggestions) {
-                    allDistinctNeedsWork.add('suggestion');
-                }
-                if (entry.hasNone) {
-                    allDistinctNeedsWork.add('none');
-                }
-            });
-
             allDistinctDossierTemplates.add(entry.dossierTemplateId);
+            const stats = this._dossierStatsService.get(entry.dossierId);
+
+            if (!stats) {
+                return;
+            }
+
+            Object.keys(stats?.fileCountPerWorkflowStatus).forEach(status => allDistinctFileStatus.add(status));
+
+            if (stats.hasHintsNoRedactionsFilePresent) {
+                allDistinctNeedsWork.add('hint');
+            }
+            if (stats.hasRedactionsFilePresent) {
+                allDistinctNeedsWork.add('redaction');
+            }
+            if (stats.hasSuggestionsFilePresent) {
+                allDistinctNeedsWork.add('suggestion');
+            }
+            if (stats.hasNoFlagsFilePresent) {
+                allDistinctNeedsWork.add('none');
+            }
         });
 
         const statusFilters = [...allDistinctFileStatus].map(
             status =>
                 new NestedFilter({
                     id: status,
-                    label: this._translateService.instant(fileStatusTranslations[status]),
+                    label: this._translateService.instant(workflowFileStatusTranslations[status]),
                 }),
         );
 
@@ -127,7 +123,7 @@ export class ConfigService {
             label: this._translateService.instant('filters.status'),
             icon: 'red:status',
             filters: statusFilters.sort((a, b) => StatusSorter[a.id] - StatusSorter[b.id]),
-            checker: dossierStatusChecker,
+            checker: (dossier: Dossier, filter: INestedFilter) => this._dossierStatusChecker(dossier, filter),
         });
 
         const peopleFilters = [...allDistinctPeople].map(
@@ -160,7 +156,7 @@ export class ConfigService {
             icon: 'red:needs-work',
             filterTemplate: needsWorkFilterTemplate,
             filters: needsWorkFilters.sort((a, b) => RedactionFilterSorter[a.id] - RedactionFilterSorter[b.id]),
-            checker: annotationFilterChecker,
+            checker: (dossier: Dossier, filter: INestedFilter) => this._annotationFilterChecker(dossier, filter),
             matchAll: true,
         });
 
@@ -206,4 +202,30 @@ export class ConfigService {
 
         return filterGroups;
     }
+
+    private _dossierStatusChecker = (dossier: Dossier, filter: INestedFilter) => {
+        const stats = this._dossierStatsService.get(dossier.dossierId);
+        return stats?.fileCountPerWorkflowStatus[filter.id];
+    };
+
+    private _annotationFilterChecker = (dossier: Dossier, filter: INestedFilter) => {
+        const stats = this._dossierStatsService.get(dossier.dossierId);
+        switch (filter.id) {
+            // case 'analysis': {
+            // return stats.reanalysisRequired;
+            // }
+            case 'suggestion': {
+                return stats.hasSuggestionsFilePresent;
+            }
+            case 'redaction': {
+                return stats.hasRedactionsFilePresent;
+            }
+            case 'hint': {
+                return stats.hasHintsNoRedactionsFilePresent;
+            }
+            case 'none': {
+                return stats.hasNoFlagsFilePresent;
+            }
+        }
+    };
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
index fb95409d3..f04907531 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { IqserIconsModule } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { DossiersListingScreenComponent } from './screen/dossiers-listing-screen.component';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 import { DossiersListingActionsComponent } from './components/dossiers-listing-actions/dossiers-listing-actions.component';
 import { SharedModule } from '@shared/shared.module';
 import { DossiersListingDetailsComponent } from './components/dossiers-listing-details/dossiers-listing-details.component';
@@ -11,12 +11,14 @@ import { DossiersListingDossierNameComponent } from './components/dossiers-listi
 import { ConfigService } from './config.service';
 import { TableItemComponent } from './components/table-item/table-item.component';
 import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
+import { DossierWorkloadColumnComponent } from './components/dossier-workload-column/dossier-workload-column.component';
 
-const routes = [
+const routes: Routes = [
     {
         path: '',
         component: DossiersListingScreenComponent,
         pathMatch: 'full',
+        data: { reuse: true },
     },
 ];
 
@@ -26,6 +28,7 @@ const routes = [
         DossiersListingActionsComponent,
         DossiersListingDetailsComponent,
         DossiersListingDossierNameComponent,
+        DossierWorkloadColumnComponent,
         TableItemComponent,
     ],
     providers: [ConfigService],
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.html
index 3994773e7..7652f0d5c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.html
@@ -1,5 +1,5 @@
 

-    
+    
 
     

 
@@ -18,19 +18,15 @@
         

 
         

-            
+            
         

     

 
 
 
-    
+    
 
 
 
-    
+    
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts
index 4a5321717..873d0e2ea 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts
@@ -1,30 +1,27 @@
-import {
-    AfterViewInit,
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    Injector,
-    OnDestroy,
-    OnInit,
-    TemplateRef,
-    ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { AppStateService } from '@state/app-state.service';
-import { Dossier, DossierStatuses, StatusSorter } from '@red/domain';
+import { Dossier } from '@red/domain';
 import { UserService } from '@services/user.service';
 import { PermissionsService } from '@services/permissions.service';
 import { TranslateChartService } from '@services/translate-chart.service';
-import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component';
 import { timer } from 'rxjs';
-import { tap } from 'rxjs/operators';
 import { Router } from '@angular/router';
 import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
-import { groupBy } from '@utils/index';
-import { DefaultListingServicesTmp, EntitiesService, ListingComponent, OnAttach, OnDetach, TableComponent } from '@iqser/common-ui';
-import { fileStatusTranslations } from '../../../translations/file-status-translations';
+import {
+    CHANGED_CHECK_INTERVAL,
+    DefaultListingServicesTmp,
+    EntitiesService,
+    ListingComponent,
+    OnAttach,
+    OnDetach,
+    TableComponent,
+} from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ConfigService } from '../config.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
+import { FilesService } from '@services/entity-services/files.service';
+import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
+import { switchMap, tap } from 'rxjs/operators';
 
 @Component({
     templateUrl: './dossiers-listing-screen.component.html',
@@ -36,16 +33,11 @@ import { DossiersService } from '@services/entity-services/dossiers.service';
     ],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DossiersListingScreenComponent
-    extends ListingComponent
-    implements OnInit, AfterViewInit, OnDestroy, OnAttach, OnDetach {
+export class DossiersListingScreenComponent extends ListingComponent implements OnInit, OnDestroy, OnAttach, OnDetach {
     readonly currentUser = this._userService.currentUser;
     readonly tableColumnConfigs = this._configService.tableConfig;
     readonly tableHeaderLabel = _('dossier-listing.table-header.title');
     readonly buttonConfigs = this._configService.buttonsConfig(() => this.openAddDossierDialog());
-    dossiersChartData: DoughnutChartConfig[] = [];
-    documentsChartData: DoughnutChartConfig[] = [];
-    private _lastScrolledIndex: number;
     @ViewChild('needsWorkFilterTemplate', {
         read: TemplateRef,
         static: true,
@@ -63,43 +55,30 @@ export class DossiersListingScreenComponent
         private readonly _dialogService: DossiersDialogService,
         private readonly _translateChartService: TranslateChartService,
         private readonly _configService: ConfigService,
+        private readonly _filesService: FilesService,
+        private readonly _dossierTemplatesService: DossierTemplatesService,
     ) {
         super(_injector);
-        this._appStateService.reset();
     }
 
-    private get _activeDossiersCount(): number {
-        return this.entitiesService.all.filter(p => p.status === DossierStatuses.ACTIVE).length;
-    }
-
-    private get _inactiveDossiersCount(): number {
-        return this.entitiesService.all.length - this._activeDossiersCount;
+    get defaultDossierTemplateId(): string {
+        return this._dossierTemplatesService.all[0].id;
     }
 
     ngOnInit(): void {
-        this.calculateData();
+        this.computeAllFilters();
 
-        this.addSubscription = timer(0, 20000).subscribe(async () => {
-            await this._appStateService.loadAllDossiers();
-            this.calculateData();
-        });
-
-        this.addSubscription = this._appStateService.fileChanged$.subscribe(() => {
-            this.calculateData();
-        });
-    }
-
-    ngAfterViewInit(): void {
-        this.addSubscription = this._tableComponent.scrollViewport.scrolledIndexChange
-            .pipe(tap(index => (this._lastScrolledIndex = index)))
+        this.addSubscription = timer(CHANGED_CHECK_INTERVAL, CHANGED_CHECK_INTERVAL)
+            .pipe(
+                switchMap(() => this._dossiersService.loadAllIfChanged()),
+                tap(() => this.computeAllFilters()),
+            )
             .subscribe();
     }
 
     ngOnAttach(): void {
-        this._appStateService.reset();
         this.ngOnInit();
-        this.ngAfterViewInit();
-        this._tableComponent.scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
+        this._tableComponent?.scrollToLastIndex();
     }
 
     ngOnDetach(): void {
@@ -108,39 +87,17 @@ export class DossiersListingScreenComponent
 
     openAddDossierDialog(): void {
         this._dialogService.openDialog('addDossier', null, null, async (addResponse: { dossier: Dossier; addMembers: boolean }) => {
-            await this._router.navigate([`/main/dossiers/${addResponse.dossier.id}`]);
+            await this._router.navigate([addResponse.dossier.routerLink]);
             if (addResponse.addMembers) {
                 this._dialogService.openDialog('editDossier', null, {
-                    dossier: addResponse.dossier,
+                    dossierId: addResponse.dossier.dossierId,
                     section: 'members',
                 });
             }
         });
     }
 
-    calculateData(): void {
-        this._computeAllFilters();
-
-        this.dossiersChartData = [
-            { value: this._activeDossiersCount, color: 'ACTIVE', label: _('active') },
-            { value: this._inactiveDossiersCount, color: 'DELETED', label: _('archived') },
-        ];
-        const groups = groupBy(this._dossiersService.allFiles, 'status');
-        this.documentsChartData = [];
-
-        for (const status of Object.keys(groups)) {
-            this.documentsChartData.push({
-                value: groups[status].length,
-                color: status,
-                label: fileStatusTranslations[status],
-                key: status,
-            });
-        }
-        this.documentsChartData.sort((a, b) => StatusSorter.byStatus(a.key, b.key));
-        this.documentsChartData = this._translateChartService.translateStatus(this.documentsChartData);
-    }
-
-    private _computeAllFilters() {
+    computeAllFilters() {
         const filterGroups = this._configService.filterGroups(this.entitiesService.all, this._needsWorkFilterTemplate);
         this.filterService.addFilterGroups(filterGroups);
     }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
index f46c6c24b..f8724f975 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
@@ -1,204 +1,218 @@
-

-    

-        

-            

-                {{ 'file-preview.standard' | translate }}
-            

-            

-                {{ 'file-preview.delta' | translate }}
-            

-            

-                {{ 'file-preview.redacted' | translate }}
-            

-        

+
+    

+        

+            

+                

+                    {{ 'file-preview.standard' | translate }}
+                

 
-        

-            
-                
-                    
+                

+                    {{ 'file-preview.delta' | translate }}
+                

 
-                    

-                        {{ translations[status] | translate }}
-                        {{ 'by' | translate }}:
-                    

-                
+                

+                    {{ 'file-preview.redacted' | translate }}
+                

+            

+
+            

+                
+
+                

+                    {{ translations[file.workflowStatus] | translate }}
+                    {{ 'by' | translate }}:
+                

 
                 
                 

-            
 
-            
+                
+
+                

+                    
+
+                    
+                

+
+                
+                    

+                    

+                    
+                
+                

+
+                
 
-            

                 
 
+                
                 
+                
+
+                
             

-
-            
-                

-                

-                
-            
-            

-
-            
-
-            
-
-            
-            
-            
-
-            
-        

-    

-
-    

-
-    

-        

-            
         

 
-        

-            
+        

 
-            
+        

+            

+                
+            

 
-            
+            

+                
+
+                
+
+                
+            

         

-    

-

+    

 
-
-    
-
+    
+        
+    
 
-
-    
-    
-        
-        {{ filter.id | humanize: false }}
-    
-
+    
+        
+        
+            
+            
+            {{ filter.id | humanize: false }}
+        
+    
+
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
index 1bd12b1e4..896d62199 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
@@ -1,4 +1,14 @@
-import { ChangeDetectorRef, Component, HostListener, NgZone, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    HostListener,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    ViewChild,
+} from '@angular/core';
 import { ActivatedRoute, ActivatedRouteSnapshot, NavigationExtras, Router } from '@angular/router';
 import { AppStateService } from '@state/app-state.service';
 import { Core, WebViewerInstance } from '@pdftron/webviewer';
@@ -8,7 +18,6 @@ import {
     CircleButtonTypes,
     Debounce,
     FilterService,
-    INestedFilter,
     List,
     LoadingService,
     OnAttach,
@@ -24,9 +33,9 @@ import { AnnotationData, FileDataModel } from '@models/file/file-data.model';
 import { FileActionService } from '../../shared/services/file-action.service';
 import { AnnotationDrawService } from '../../services/annotation-draw.service';
 import { AnnotationProcessingService } from '../../services/annotation-processing.service';
-import { Dossier, File, FileStatus, User, ViewMode } from '@red/domain';
+import { Dossier, File, User, ViewMode, WorkflowFileStatus } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
-import { timer } from 'rxjs';
+import { Observable, timer } from 'rxjs';
 import { UserPreferenceService } from '@services/user-preference.service';
 import { UserService } from '@services/user.service';
 import { PdfViewerDataService } from '../../services/pdf-viewer-data.service';
@@ -35,14 +44,18 @@ import { FileWorkloadComponent } from '../../components/file-workload/file-workl
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
 import { clearStamps, stampPDFPage } from '@utils/page-stamper';
 import { TranslateService } from '@ngx-translate/core';
-import { fileStatusTranslations } from '../../translations/file-status-translations';
+import { workflowFileStatusTranslations } from '../../translations/file-status-translations';
 import { handleFilterDelta } from '@utils/filter-utils';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FileActionsComponent } from '../../shared/components/file-actions/file-actions.component';
 import { FilesService } from '@services/entity-services/files.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { FileManagementService } from '../../shared/services/file-management.service';
+import { filter, switchMap, switchMapTo, tap } from 'rxjs/operators';
+import { FilesMapService } from '@services/entity-services/files-map.service';
+import { WatermarkService } from '../../../shared/services/watermark.service';
 import Annotation = Core.Annotations.Annotation;
+import PDFNet = Core.PDFNet;
 
 const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
 
@@ -50,10 +63,11 @@ const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
     templateUrl: './file-preview-screen.component.html',
     styleUrls: ['./file-preview-screen.component.scss'],
     providers: [FilterService],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach {
     readonly circleButtonTypes = CircleButtonTypes;
-    readonly translations = fileStatusTranslations;
+    readonly translations = workflowFileStatusTranslations;
 
     dialogRef: MatDialogRef;
     viewMode: ViewMode = 'STANDARD';
@@ -70,15 +84,19 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     excludePages = false;
     @ViewChild(PdfViewerComponent) readonly viewerComponent: PdfViewerComponent;
     @ViewChild('fileActions') fileActions: FileActionsComponent;
+    readonly dossierId: string;
+    readonly dossier$: Observable;
+    readonly file$: Observable;
+    readonly fileId: string;
     private _instance: WebViewerInstance;
     private _lastPage: string;
     private _reloadFileOnReanalysis = false;
     @ViewChild('fileWorkloadComponent') private readonly _workloadComponent: FileWorkloadComponent;
     @ViewChild('annotationFilterTemplate', {
         read: TemplateRef,
-        static: true,
+        static: false,
     })
-    private readonly _filterTemplate: TemplateRef;
+    private readonly _filterTemplate: TemplateRef;
 
     constructor(
         readonly appStateService: AppStateService,
@@ -86,6 +104,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         readonly permissionsService: PermissionsService,
         readonly userPreferenceService: UserPreferenceService,
         readonly userService: UserService,
+        private readonly _watermarkService: WatermarkService,
         private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _activatedRoute: ActivatedRoute,
         private readonly _dialogService: DossiersDialogService,
@@ -101,9 +120,16 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         private readonly _loadingService: LoadingService,
         private readonly _filterService: FilterService,
         private readonly _translateService: TranslateService,
+        private readonly _filesMapService: FilesMapService,
+        private readonly _dossiersService: DossiersService,
+        private readonly _userPreferenceService: UserPreferenceService,
     ) {
         super();
-        this._loadingService.start();
+        this.dossierId = _activatedRoute.snapshot.paramMap.get('dossierId');
+        this.dossier$ = _dossiersService.getEntityChanged$(this.dossierId);
+        this.fileId = _activatedRoute.snapshot.paramMap.get('fileId');
+        this.file$ = _filesMapService.watch$(this.dossierId, this.fileId);
+
         document.documentElement.addEventListener('fullscreenchange', () => {
             if (!document.fullscreenElement) {
                 this.fullScreen = false;
@@ -111,12 +137,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         });
     }
 
-    get assignTooltip(): string {
-        return this.appStateService.activeFile.isUnderApproval
-            ? this._translateService.instant('dossier-overview.assign-approver')
-            : this.assignOrChangeReviewerTooltip;
-    }
-
     get annotations(): AnnotationWrapper[] {
         return this.annotationData ? this.annotationData.visibleAnnotations : [];
     }
@@ -137,73 +157,61 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
             : (currentPage + 1) / 2;
     }
 
-    get canSwitchToRedactedView(): boolean {
-        return this.fileData && !this.fileData.file.analysisRequired && !this.fileData.file.excluded;
-    }
-
     get canSwitchToDeltaView(): boolean {
         return this.fileData?.hasChangeLog;
     }
 
-    get canAssign(): boolean {
-        return (
-            !this.editingReviewer &&
-            (this.permissionsService.canAssignUser() ||
-                this.permissionsService.canAssignToSelf() ||
-                this.permissionsService.canUnassignUser())
-        );
-    }
-
     get displayData(): Blob {
         return this.fileData?.fileData;
     }
 
-    get fileId(): string {
-        return this.appStateService.activeFileId;
-    }
-
     get multiSelectActive(): boolean {
         return !!this._workloadComponent?.multiSelectActive;
     }
 
-    get lastReviewer(): string | undefined {
-        return this.appStateService.activeFile.lastReviewer;
+    assignTooltip(file: File): string {
+        return file.isUnderApproval
+            ? this._translateService.instant('dossier-overview.assign-approver')
+            : this.assignOrChangeReviewerTooltip(file);
     }
 
-    get assignOrChangeReviewerTooltip(): string {
-        return this.currentReviewer
+    canSwitchToRedactedView(file: File): boolean {
+        return this.fileData && !file.analysisRequired && !file.excluded;
+    }
+
+    assignOrChangeReviewerTooltip(file: File): string {
+        return file.currentReviewer
             ? this._translateService.instant('file-preview.change-reviewer')
             : this._translateService.instant('file-preview.assign-reviewer');
     }
 
-    get currentReviewer(): string {
-        return this.appStateService.activeFile.currentReviewer;
+    statusBarConfig(file: File): [{ length: number; color: WorkflowFileStatus }] {
+        return [{ length: 1, color: file.workflowStatus }];
     }
 
-    get status(): FileStatus {
-        return this.appStateService.activeFile.status;
+    isUnderReviewOrApproval(file: File): boolean {
+        return file.isUnderReview || file.isUnderApproval;
     }
 
-    get statusBarConfig(): [{ length: number; color: FileStatus }] {
-        return [{ length: 1, color: this.status }];
+    canAssign(file: File): boolean {
+        return (
+            !this.editingReviewer &&
+            (this.permissionsService.canAssignUser(file) ||
+                this.permissionsService.canAssignToSelf(file) ||
+                this.permissionsService.canUnassignUser(file))
+        );
     }
 
-    get isUnderReviewOrApproval(): boolean {
-        return this.status === 'UNDER_REVIEW' || this.status === 'UNDER_APPROVAL';
+    usersOptions(file: File, dossier: Dossier): List {
+        const unassignUser = this.permissionsService.canUnassignUser(file) ? [undefined] : [];
+        return file.isUnderApproval ? [...dossier.approverIds, ...unassignUser] : [...dossier.memberIds, ...unassignUser];
     }
 
-    singleUsersSelectOptions(dossier: Dossier): List {
-        const unassignUser = this.permissionsService.canUnassignUser() ? [undefined] : [];
-        return this.appStateService.activeFile?.isUnderApproval
-            ? [...dossier.approverIds, ...unassignUser]
-            : [...dossier.memberIds, ...unassignUser];
+    canAssignReviewer(file: File, dossier: Dossier): boolean {
+        return !file.currentReviewer && this.permissionsService.canAssignUser(file) && dossier.hasReviewers;
     }
 
-    canAssignReviewer(dossier: Dossier): boolean {
-        return !this.currentReviewer && this.permissionsService.canAssignUser() && dossier.hasReviewers;
-    }
-
-    updateViewMode(): void {
+    async updateViewMode(): Promise {
         const annotations = this._getAnnotations(a => a.getCustomData('redacto-manager'));
         const redactions = annotations.filter(a => a.getCustomData('redaction'));
 
@@ -233,19 +241,21 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
             }
         }
 
+        await this._stampPDF();
         this.rebuildFilters();
-
         this._updateCanPerformActions();
     }
 
     ngOnDetach(): void {
         this.displayPDFViewer = false;
+        this._changeDetectorRef.markForCheck();
         super.ngOnDestroy();
     }
 
-    async ngOnAttach(previousRoute: ActivatedRouteSnapshot): Promise {
-        if (!this.appStateService.activeFile.canBeOpened) {
-            return this.dossiersService.goToActiveDossier();
+    async ngOnAttach(previousRoute: ActivatedRouteSnapshot): Promise {
+        const file = this._filesMapService.get(this.dossierId, this.fileId);
+        if (!file.canBeOpened) {
+            return this._router.navigate([this.dossiersService.find(this.dossierId)?.routerLink]);
         }
 
         await this.ngOnInit();
@@ -253,14 +263,18 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     }
 
     async ngOnInit(): Promise {
+        this._loadingService.start();
+        await this._userPreferenceService.saveLastOpenedFileForDossier(this.dossierId, this.fileId);
         await this._loadFileData();
-        this.displayPDFViewer = true;
         this._updateCanPerformActions();
         this._subscribeToFileUpdates();
 
-        if (this.fileData?.file?.analysisRequired) {
+        const file = this._filesMapService.get(this.dossierId, this.fileId);
+        if (file?.analysisRequired) {
             this.fileActions.reanalyseFile();
         }
+
+        this.displayPDFViewer = true;
     }
 
     rebuildFilters(deletePreviousAnnotations = false): void {
@@ -278,8 +292,9 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         }
         console.log(`[REDACTION] Delete previous annotations time: ${new Date().getTime() - startTime} ms`);
         const processStartTime = new Date().getTime();
+        const dossier = this._dossiersService.find(this.dossierId);
         const newAnnotationsData = this.fileData.getAnnotations(
-            this.appStateService.dictionaryData[this.dossiersService.activeDossier.dossierTemplateId],
+            this.appStateService.dictionaryData[dossier.dossierTemplateId],
             this.userService.currentUser,
             this.viewMode,
             this.userPreferenceService.areDevFeaturesEnabled,
@@ -311,6 +326,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     }
 
     handleAnnotationSelected(annotationIds: string[]) {
+        // TODO: use includes() here
         this.selectedAnnotations = annotationIds
             .map(id => this.annotations.find(annotationWrapper => annotationWrapper.id === id))
             .filter(ann => ann !== undefined);
@@ -318,7 +334,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
             this._workloadComponent.multiSelectActive = true;
         }
         this._workloadComponent.scrollToSelectedAnnotation();
-        this._changeDetectorRef.detectChanges();
+        this._changeDetectorRef.markForCheck();
     }
 
     selectAnnotations(annotations?: AnnotationWrapper[] | { annotations: AnnotationWrapper[]; multiSelect: boolean }) {
@@ -338,20 +354,21 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         this._workloadComponent?.scrollAnnotationsToPage(pageNumber, 'always');
     }
 
-    openManualAnnotationDialog(entryWrapper: ManualRedactionEntryWrapper) {
+    openManualAnnotationDialog(manualRedactionEntryWrapper: ManualRedactionEntryWrapper) {
         this._ngZone.run(() => {
+            const dossier = this._dossiersService.find(this.dossierId);
             this.dialogRef = this._dialogService.openDialog(
                 'manualAnnotation',
                 null,
-                entryWrapper,
+                { manualRedactionEntryWrapper, dossier },
                 async (response: ManualAnnotationResponse) => {
                     if (response?.annotationId) {
                         const annotation = this._instance.Core.annotationManager.getAnnotationById(
                             response.manualRedactionEntryWrapper.rectId,
                         );
                         this._instance.Core.annotationManager.deleteAnnotation(annotation);
-                        this.fileData.file = await this.appStateService.reloadActiveFile();
-                        const distinctPages = entryWrapper.manualRedactionEntry.positions
+                        await this.appStateService.reloadFile(this.dossierId, this.fileId);
+                        const distinctPages = manualRedactionEntryWrapper.manualRedactionEntry.positions
                             .map(p => p.page)
                             .filter((item, pos, self) => self.indexOf(item) === pos);
                         for (const page of distinctPages) {
@@ -396,7 +413,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
             return;
         }
 
-        this._changeDetectorRef.detectChanges();
+        this._changeDetectorRef.markForCheck();
     }
 
     viewerPageChanged($event: any) {
@@ -416,13 +433,13 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         };
         this._router.navigate([], extras).then();
 
-        this._changeDetectorRef.detectChanges();
+        this._changeDetectorRef.markForCheck();
     }
 
     async viewerReady($event: WebViewerInstance) {
         this._instance = $event;
-        await this._stampExcludedPages();
-        this._cleanupAndRedrawManualAnnotations();
+        await this._stampPDF();
+        this._cleanupAndRedrawManualAnnotations$();
         this._updateCanPerformActions();
 
         // Go to initial page from query params
@@ -453,19 +470,19 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
                 break;
 
             case 'delete':
-                return this.dossiersService.goToActiveDossier();
+                return this._router.navigate([this.dossiersService.find(this.dossierId).routerLink]);
 
             case 'reanalyse':
                 await this._loadFileData(true);
                 this._updateCanPerformActions();
-                await this.appStateService.reloadActiveDossierFiles();
+                await this.appStateService.reloadDossierFiles(this.dossierId);
                 return;
 
             case 'exclude-pages':
-                await this.appStateService.reloadActiveDossierFiles();
+                await this.appStateService.reloadDossierFiles(this.dossierId);
                 await this._loadFileData(true);
-                this._cleanupAndRedrawManualAnnotations();
-                await this._stampExcludedPages();
+                this._cleanupAndRedrawManualAnnotations$();
+                await this._stampPDF();
                 this._loadingService.stop();
                 return;
 
@@ -489,22 +506,22 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         }
     }
 
-    async assignToMe() {
-        await this._fileActionService.assignToMe([this.fileData.file], async () => {
-            await this.appStateService.reloadActiveFile();
+    async assignToMe(file: File) {
+        await this._fileActionService.assignToMe([file], async () => {
+            await this.appStateService.reloadFile(this.dossierId, this.fileId);
             this._updateCanPerformActions();
         });
     }
 
-    async assignReviewer(user: User | string) {
+    async assignReviewer(file: File, user: User | string) {
         const reviewerId = typeof user === 'string' ? user : user?.id;
         const reviewerName = this.userService.getNameForId(reviewerId);
 
-        const { dossierId, fileId, filename } = this.fileData.file;
+        const { dossierId, fileId, filename } = file;
         await this._filesService.setReviewerFor([fileId], dossierId, reviewerId).toPromise();
 
         this._toaster.info(_('assignment.reviewer'), { params: { reviewerName, filename } });
-        await this.appStateService.reloadActiveFile();
+        await this.appStateService.reloadFile(this.dossierId, this.fileId);
         this._updateCanPerformActions();
         this.editingReviewer = false;
     }
@@ -515,18 +532,17 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         }
     }
 
-    switchView(viewMode: ViewMode) {
+    async switchView(viewMode: ViewMode) {
         this.viewMode = viewMode;
-        this.updateViewMode();
+        await this.updateViewMode();
         this._scrollViews();
     }
 
-    downloadOriginalFile() {
-        this.addSubscription = this._fileManagementService
-            .downloadOriginalFile(this.fileData.file.dossierId, this.fileId, 'response', true, this.fileData.file.cacheIdentifier)
-            .subscribe(data => {
-                download(data, this.fileData.file.filename);
-            });
+    async downloadOriginalFile(file: File) {
+        const data = await this._fileManagementService
+            .downloadOriginalFile(this.dossierId, this.fileId, 'response', true, file.cacheIdentifier)
+            .toPromise();
+        download(data, file.filename);
     }
 
     toggleSkipped($event) {
@@ -540,25 +556,54 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     }
 
     private _setHiddenPropertyToNewAnnotations(newAnnotations: AnnotationWrapper[], oldAnnotations: AnnotationWrapper[]) {
-        newAnnotations.map((newAnnotation: AnnotationWrapper) => {
-            const oldAnnotation = oldAnnotations.find((a: AnnotationWrapper) => a.annotationId === newAnnotation.annotationId);
+        newAnnotations.map(newAnnotation => {
+            const oldAnnotation = oldAnnotations.find(a => a.annotationId === newAnnotation.annotationId);
             if (oldAnnotation) {
                 newAnnotation.hidden = oldAnnotation.hidden;
             }
         });
     }
 
-    private async _doStampExcludedPages(excludedPages: number[]) {
+    private async _stampPDF() {
         const pdfNet = this._instance.Core.PDFNet;
         const document = await this._instance.Core.documentViewer.getDocument().getPDFDoc();
-        const allPages = [...Array(this.fileData.file.numberOfPages).keys()].map(page => page + 1);
+        const file = this._filesMapService.get(this.dossierId, this.fileId);
+        const allPages = [...Array(file.numberOfPages).keys()].map(page => page + 1);
         await clearStamps(document, pdfNet, allPages);
 
+        if (this.viewMode === 'REDACTED') {
+            const dossier = this.dossiersService.find(this.dossierId);
+            if (dossier.watermarkPreviewEnabled) {
+                await this._stampPreview(document, dossier.dossierTemplateId);
+            }
+        } else {
+            await this._stampExcludedPages(document, file.excludedPages);
+        }
+        this._instance.Core.documentViewer.refreshAll();
+        this._instance.Core.documentViewer.updateView([this.activeViewerPage], this.activeViewerPage);
+        this._changeDetectorRef.detectChanges();
+    }
+
+    private async _stampPreview(document: PDFNet.PDFDoc, dossierTemplateId: string) {
+        const watermark = await this._watermarkService.getWatermark(dossierTemplateId).toPromise();
+        await stampPDFPage(
+            document,
+            this._instance.Core.PDFNet,
+            watermark.text,
+            watermark.fontSize,
+            watermark.fontType,
+            watermark.orientation,
+            watermark.opacity,
+            watermark.hexColor,
+            Array.from({ length: await document.getPageCount() }, (x, i) => i + 1),
+        );
+    }
+
+    private async _stampExcludedPages(document: PDFNet.PDFDoc, excludedPages: number[]) {
         if (excludedPages && excludedPages.length > 0) {
-            this.viewerComponent.utils.excludedPages = excludedPages;
             await stampPDFPage(
                 document,
-                pdfNet,
+                this._instance.Core.PDFNet,
                 this._translateService.instant('file-preview.excluded-from-redaction'),
                 25,
                 'courier',
@@ -570,41 +615,37 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         }
     }
 
-    private async _stampExcludedPages() {
-        await this._doStampExcludedPages(this.fileData.file.excludedPages);
-        this._instance.Core.documentViewer.refreshAll();
-        this._instance.Core.documentViewer.updateView([this.activeViewerPage], this.activeViewerPage);
-        this._changeDetectorRef.detectChanges();
-    }
-
     private _subscribeToFileUpdates(): void {
-        this.addSubscription = timer(0, 10000).subscribe(async () => this.appStateService.reloadActiveFile());
-        this.addSubscription = this.appStateService.fileReanalysed$.subscribe(async (file: File) => {
-            if (file.fileId === this.fileId) {
+        this.addSubscription = timer(0, 5000)
+            .pipe(switchMap(() => this.appStateService.reloadFile(this.dossierId, this.fileId)))
+            .subscribe();
+        this.addSubscription = this._filesMapService.fileReanalysed$
+            .pipe(filter(file => file.fileId === this.fileId))
+            .subscribe(async () => {
                 await this._loadFileData(!this._reloadFileOnReanalysis);
                 this._reloadFileOnReanalysis = false;
                 this._loadingService.stop();
                 this._updateCanPerformActions();
-                this._cleanupAndRedrawManualAnnotations();
-            }
-        });
+                this._cleanupAndRedrawManualAnnotations$();
+            });
     }
 
     private _updateCanPerformActions() {
+        const file = this._filesMapService.get(this.dossierId, this.fileId);
         this.canPerformAnnotationActions =
-            this.permissionsService.canPerformAnnotationActions() &&
+            this.permissionsService.canPerformAnnotationActions(file) &&
             this.viewMode === 'STANDARD' &&
             !this.viewerComponent?.utils.isCompareMode;
     }
 
     private async _loadFileData(performUpdate = false): Promise {
-        const fileData = await this._fileDownloadService.loadActiveFileData().toPromise();
+        const file = this._filesMapService.get(this.dossierId, this.fileId);
+        const fileData = await this._fileDownloadService.loadDataFor(file).toPromise();
 
-        if (!fileData.file?.isPending && !fileData.file?.isError) {
+        if (!file?.isPending && !file?.isError) {
             if (performUpdate) {
                 this.fileData.redactionLog = fileData.redactionLog;
                 this.fileData.viewedPages = fileData.viewedPages;
-                this.fileData.file = fileData.file;
                 this.rebuildFilters(true);
             } else {
                 this.fileData = fileData;
@@ -614,8 +655,8 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
             return;
         }
 
-        if (fileData.file.isError) {
-            await this.dossiersService.goToActiveDossier();
+        if (file.isError) {
+            await this._router.navigate([this.dossiersService.find(this.dossierId).routerLink]);
         }
     }
 
@@ -627,24 +668,19 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
 
     /* Get the documentElement () to display the page in fullscreen */
 
-    private _cleanupAndRedrawManualAnnotations() {
-        this._fileDownloadService.loadActiveFileRedactionLog().subscribe(async redactionLogPreview => {
-            this.fileData.redactionLog = redactionLogPreview;
-            await this._annotationDrawService.drawAnnotations(
-                this._instance,
-                this.annotationData.allAnnotations,
-                this.hideSkipped,
-                this.viewerComponent.utils.isCompareMode,
-            );
-        });
+    private _cleanupAndRedrawManualAnnotations$() {
+        return this._fileDownloadService.loadRedactionLogFor(this.dossierId, this.fileId).pipe(
+            tap(redactionLog => (this.fileData.redactionLog = redactionLog)),
+            switchMapTo(this._redrawAnnotations()),
+        );
     }
 
     private async _cleanupAndRedrawManualAnnotationsForEntirePage(page: number) {
         const currentPageAnnotations = this.annotations.filter(a => a.pageNumber === page);
         const currentPageAnnotationIds = currentPageAnnotations.map(a => a.id);
 
-        this.fileData.file = await this.appStateService.reloadActiveFile();
-        this.fileData.redactionLog = await this._fileDownloadService.loadActiveFileRedactionLog().toPromise();
+        await this.appStateService.reloadFile(this.dossierId, this.fileId);
+        this.fileData.redactionLog = await this._fileDownloadService.loadRedactionLogFor(this.dossierId, this.fileId).toPromise();
 
         this.rebuildFilters();
 
@@ -654,15 +690,21 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
             });
             const newPageAnnotations = this.annotations.filter(item => item.pageNumber === page);
             this._handleDeltaAnnotationFilters(currentPageAnnotations, newPageAnnotations);
-            await this._annotationDrawService.drawAnnotations(
-                this._instance,
-                newPageAnnotations,
-                this.hideSkipped,
-                this.viewerComponent.utils.isCompareMode,
-            );
+            await this._redrawAnnotations(newPageAnnotations);
         }
     }
 
+    private _redrawAnnotations(annotations = this.annotationData.allAnnotations) {
+        return this._annotationDrawService.drawAnnotations(
+            this._instance,
+            annotations,
+            this.fileId,
+            this.dossierId,
+            this.hideSkipped,
+            this.viewerComponent.utils.isCompareMode,
+        );
+    }
+
     private _handleDeltaAnnotationFilters(currentPageAnnotations: AnnotationWrapper[], newPageAnnotations: AnnotationWrapper[]) {
         const primaryFilterGroup = this._filterService.getGroup('primaryFilters');
         const primaryFilters = primaryFilterGroup.filters;
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
index a6be19bf0..768955d41 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
@@ -47,9 +47,7 @@
                     {{ 'search-screen.missing' | translate }}: {{ term }}. {{ 'search-screen.must-contain' | translate }}:
-                     {{ term }}
                 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
index 7f63f7a04..ad23466f1 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
@@ -1,62 +1,58 @@
-import { Component, forwardRef, Injector, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnDestroy } from '@angular/core';
 import {
     DefaultListingServices,
-    IListable,
+    IFilterGroup,
     keyChecker,
     List,
     ListingComponent,
     LoadingService,
     NestedFilter,
     SearchPositions,
+    SortingOrders,
     TableColumnConfig,
 } from '@iqser/common-ui';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { debounceTime, map, skip, switchMap, tap } from 'rxjs/operators';
+import { merge, Observable } from 'rxjs';
+import { debounceTime, map, startWith, switchMap, tap } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { fileStatusTranslations } from '../../translations/file-status-translations';
+import { workflowFileStatusTranslations } from '../../translations/file-status-translations';
 import { TranslateService } from '@ngx-translate/core';
 import { RouterHistoryService } from '@services/router-history.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { PlatformSearchService } from '../../shared/services/platform-search.service';
-import { IMatchedDocument, ISearchResponse } from '@red/domain';
+import { Dossier, IMatchedDocument, ISearchInput, ISearchListItem, ISearchResponse } from '@red/domain';
+import { FilesMapService } from '@services/entity-services/files-map.service';
 
-interface ListItem extends IListable {
-    readonly dossierId: string;
-    readonly filename: string;
-    readonly unmatched: List | null;
-    readonly highlights: Record;
-    readonly routerLink: string;
-    readonly status: string;
-    readonly dossierName: string;
-    readonly numberOfPages: number;
-}
-
-interface SearchInput {
-    readonly query: string;
-    readonly dossierIds?: List;
+function toSearchInput(query: string, dossierIds: List | string): ISearchInput {
+    return {
+        query,
+        dossierIds: dossierIds ? (typeof dossierIds === 'string' ? [dossierIds] : dossierIds) : [],
+    };
 }
 
 @Component({
     templateUrl: './search-screen.component.html',
     styleUrls: ['./search-screen.component.scss'],
     providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => SearchScreenComponent) }],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SearchScreenComponent extends ListingComponent implements OnDestroy {
-    readonly fileStatusTranslations = fileStatusTranslations;
+export class SearchScreenComponent extends ListingComponent implements OnDestroy {
+    readonly fileStatusTranslations = workflowFileStatusTranslations;
     readonly searchPositions = SearchPositions;
 
     readonly tableHeaderLabel = _('search-screen.table-header');
-    readonly tableColumnConfigs: TableColumnConfig[] = [
+    readonly tableColumnConfigs: TableColumnConfig[] = [
         { label: _('search-screen.cols.document'), width: '2fr' },
         { label: _('search-screen.cols.status') },
         { label: _('search-screen.cols.dossier') },
         { label: _('search-screen.cols.pages'), width: 'auto' },
     ];
-    readonly search$ = new BehaviorSubject(null);
-    readonly searchResults$: Observable = this.search$.asObservable().pipe(
+
+    readonly searchResults$ = merge(this._searchChanged$, this._filtersChanged$).pipe(
+        startWith(this._routeQuery),
         tap(() => this._loadingService.start()),
-        switchMap(query => this._search(query)),
+        tap(value => this.updateNavigation(value.query)),
+        switchMap(query => this._platformSearchService.search(query)),
         map(searchResult => this._toMatchedDocuments(searchResult)),
         map(docs => this._toListItems(docs)),
         tap(result => this.entitiesService.setEntities(result)),
@@ -71,74 +67,69 @@ export class SearchScreenComponent extends ListingComponent implements
         private readonly _dossiersService: DossiersService,
         readonly routerHistoryService: RouterHistoryService,
         private readonly _translateService: TranslateService,
+        private readonly _filesMapService: FilesMapService,
         private readonly _platformSearchService: PlatformSearchService,
     ) {
         super(_injector);
         this.searchService.skip = true;
+        this.sortingService.setSortingOption({ column: 'searchKey', order: SortingOrders.desc });
 
-        this.filterService.addFilterGroups([
-            {
-                slug: 'dossiers',
-                label: this._translateService.instant('search-screen.filters.by-dossier'),
-                filterceptionPlaceholder: this._translateService.instant('search-screen.filters.search-placeholder'),
-                icon: 'red:folder',
-                filters: this._dossiersService.all.map(
-                    dossier =>
-                        new NestedFilter({
-                            id: dossier.id,
-                            label: dossier.dossierName,
-                        }),
-                ),
-                checker: keyChecker('dossierId'),
-            },
-        ]);
-
-        this.addSubscription = _activatedRoute.queryParamMap
-            .pipe(map(value => ({ query: value.get('query'), dossierId: value.get('dossierId') })))
-            .subscribe(mappedValue => this._updateValues(mappedValue));
-
-        this.addSubscription = this.searchService.valueChanges$.pipe(debounceTime(300)).subscribe(value => this.updateNavigation(value));
-
-        this.addSubscription = this.filterService.filterGroups$.pipe(skip(1)).subscribe(group => {
-            const dossierIds = group[0].filters.filter(v => v.checked).map(v => v.id);
-            this.search$.next({ query: this.searchService.searchValue, dossierIds: dossierIds });
-        });
+        const dossierId = _activatedRoute.snapshot.queryParamMap.get('dossierId');
+        const dossierToFilter = ({ dossierName, id }: Dossier) => {
+            const checked = id === dossierId;
+            return new NestedFilter({ id, label: dossierName, checked });
+        };
+        const dossierNameFilter: IFilterGroup = {
+            slug: 'dossiers',
+            label: this._translateService.instant('search-screen.filters.by-dossier'),
+            filterceptionPlaceholder: this._translateService.instant('search-screen.filters.search-placeholder'),
+            icon: 'red:folder',
+            filters: this._dossiersService.all.map(dossierToFilter),
+            checker: keyChecker('dossierId'),
+        };
+        this.filterService.addFilterGroups([dossierNameFilter]);
     }
 
-    updateNavigation(query: string, mustContain?: string): void {
-        const newQuery = query?.replace(mustContain, `"${mustContain}"`);
-        const queryParams = newQuery && newQuery !== '' ? { query: newQuery } : {};
-        this._router.navigate([], { queryParams }).then();
+    private get _searchChanged$(): Observable {
+        return this.searchService.valueChanges$.pipe(
+            debounceTime(300),
+            map(value => ({ query: value, dossierIds: [] })),
+        );
     }
 
-    private _search(searchInput: SearchInput): Observable {
-        return this._platformSearchService.search({
-            dossierIds: [...searchInput.dossierIds],
-            queryString: searchInput.query ?? '',
-            page: 1,
-            returnSections: false,
-            pageSize: 300,
-        });
+    private get _filtersChanged$() {
+        return this.filterService.filterGroups$.pipe(
+            map(groups => groups[0].filters.filter(v => v.checked).map(v => v.id)),
+            map(dossierIds => toSearchInput(this.searchService.searchValue, dossierIds)),
+        );
     }
 
-    private _updateValues({ query, dossierId }: { readonly query: string; readonly dossierId: string }) {
-        if (dossierId) {
-            this.filterService.toggleFilter('dossiers', dossierId);
-        }
+    private get _routeQuery(): ISearchInput {
+        const query = this._activatedRoute.snapshot.queryParamMap.get('query');
+        const dossierId = this._activatedRoute.snapshot.queryParamMap.get('dossierId');
         this.searchService.searchValue = query;
-        this.search$.next({ query, dossierIds: dossierId ? [dossierId] : [] });
+        return { query, dossierIds: dossierId ? [dossierId] : [] };
+    }
+
+    updateNavigation(query: string) {
+        return this._router.navigate([], { queryParams: { query } });
+    }
+
+    mustContain(value: string) {
+        const newQuery = this.searchService.searchValue.replace(value, `"${value}"`);
+        this.searchService.searchValue = newQuery ?? '';
     }
 
     private _toMatchedDocuments({ matchedDocuments }: ISearchResponse): IMatchedDocument[] {
         return matchedDocuments.filter(doc => doc.score > 0 && doc.matchedTerms.length > 0);
     }
 
-    private _toListItems(matchedDocuments: IMatchedDocument[]): ListItem[] {
+    private _toListItems(matchedDocuments: IMatchedDocument[]): ISearchListItem[] {
         return matchedDocuments.map(document => this._toListItem(document)).filter(value => value);
     }
 
-    private _toListItem({ dossierId, fileId, unmatchedTerms, highlights }: IMatchedDocument): ListItem {
-        const file = this._dossiersService.find(dossierId, fileId);
+    private _toListItem({ dossierId, fileId, unmatchedTerms, highlights, score }: IMatchedDocument): ISearchListItem {
+        const file = this._filesMapService.get(dossierId, fileId);
         if (!file) {
             return undefined;
         }
@@ -148,11 +139,11 @@ export class SearchScreenComponent extends ListingComponent implements
             dossierId,
             unmatched: unmatchedTerms || null,
             highlights,
-            status: file.status,
+            status: file.workflowStatus,
             numberOfPages: file.numberOfPages,
             dossierName: this._dossiersService.find(dossierId).dossierName,
             filename: file.filename,
-            searchKey: file.filename,
+            searchKey: score.toString(),
             routerLink: `/main/dossiers/${dossierId}/file/${fileId}`,
         };
     }
diff --git a/apps/red-ui/src/app/modules/dossier/services/annotation-actions.service.ts b/apps/red-ui/src/app/modules/dossier/services/annotation-actions.service.ts
index c2836a9f7..acc4b9e9a 100644
--- a/apps/red-ui/src/app/modules/dossier/services/annotation-actions.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/annotation-actions.service.ts
@@ -9,8 +9,12 @@ import { AnnotationPermissions } from '@models/file/annotation.permissions';
 import { DossiersDialogService } from './dossiers-dialog.service';
 import { BASE_HREF } from '../../../tokens';
 import { UserService } from '@services/user.service';
-import { Core } from '@pdftron/webviewer';
-import { IAddRedactionRequest, ILegalBasisChangeRequest } from '@red/domain';
+import { Core, WebViewerInstance } from '@pdftron/webviewer';
+import { Dossier, IAddRedactionRequest, ILegalBasisChangeRequest, IRectangle, IResizeRequest } from '@red/domain';
+import { AppStateService } from '../../../state/app-state.service';
+import { toPosition } from '../utils/pdf-calculation.utils';
+import { AnnotationDrawService } from './annotation-draw.service';
+import { translateQuads } from '../../../utils';
 import Annotation = Core.Annotations.Annotation;
 
 @Injectable()
@@ -18,39 +22,63 @@ export class AnnotationActionsService {
     constructor(
         @Inject(BASE_HREF) private readonly _baseHref: string,
         private readonly _ngZone: NgZone,
+        private readonly _appStateService: AppStateService,
         private readonly _userService: UserService,
         private readonly _permissionsService: PermissionsService,
         private readonly _manualAnnotationService: ManualAnnotationService,
         private readonly _translateService: TranslateService,
         private readonly _dialogService: DossiersDialogService,
+        private readonly _annotationDrawService: AnnotationDrawService,
     ) {}
 
-    acceptSuggestion($event: MouseEvent, annotations: AnnotationWrapper[], annotationsChanged: EventEmitter) {
+    acceptSuggestion(
+        $event: MouseEvent,
+        annotations: AnnotationWrapper[],
+        dossier: Dossier,
+        annotationsChanged: EventEmitter,
+    ) {
         $event?.stopPropagation();
         annotations.forEach(annotation => {
             this._processObsAndEmit(
-                this._manualAnnotationService.approve(annotation.id, annotation.isModifyDictionary),
+                this._manualAnnotationService.approve(annotation.id, dossier, annotation.isModifyDictionary),
                 annotation,
                 annotationsChanged,
             );
         });
     }
 
-    rejectSuggestion($event: MouseEvent, annotations: AnnotationWrapper[], annotationsChanged: EventEmitter) {
+    rejectSuggestion(
+        $event: MouseEvent,
+        annotations: AnnotationWrapper[],
+        dossier: Dossier,
+        annotationsChanged: EventEmitter,
+    ) {
         $event?.stopPropagation();
         annotations.forEach(annotation => {
-            this._processObsAndEmit(this._manualAnnotationService.declineOrRemoveRequest(annotation), annotation, annotationsChanged);
+            this._processObsAndEmit(
+                this._manualAnnotationService.declineOrRemoveRequest(annotation, dossier),
+                annotation,
+                annotationsChanged,
+            );
         });
     }
 
-    forceRedaction($event: MouseEvent, annotations: AnnotationWrapper[], annotationsChanged: EventEmitter) {
-        this._dialogService.openDialog('forceRedaction', $event, null, (request: ILegalBasisChangeRequest) => {
+    forceRedaction(
+        $event: MouseEvent,
+        annotations: AnnotationWrapper[],
+        dossier: Dossier,
+        annotationsChanged: EventEmitter,
+    ) {
+        this._dialogService.openDialog('forceRedaction', $event, { dossier }, (request: ILegalBasisChangeRequest) => {
             annotations.forEach(annotation => {
                 this._processObsAndEmit(
-                    this._manualAnnotationService.force({
-                        ...request,
-                        annotationId: annotation.id,
-                    }),
+                    this._manualAnnotationService.force(
+                        {
+                            ...request,
+                            annotationId: annotation.id,
+                        },
+                        dossier,
+                    ),
                     annotation,
                     annotationsChanged,
                 );
@@ -58,29 +86,45 @@ export class AnnotationActionsService {
         });
     }
 
-    changeLegalBasis($event: MouseEvent, annotations: AnnotationWrapper[], annotationsChanged: EventEmitter) {
-        this._dialogService.openDialog('changeLegalBasis', $event, annotations, (data: { comment: string; legalBasis: string }) => {
-            annotations.forEach(annotation => {
-                this._processObsAndEmit(
-                    this._manualAnnotationService.changeLegalBasis(annotation.annotationId, data.legalBasis, data.comment),
-                    annotation,
-                    annotationsChanged,
-                );
-            });
-        });
+    changeLegalBasis(
+        $event: MouseEvent,
+        annotations: AnnotationWrapper[],
+        dossier: Dossier,
+        annotationsChanged: EventEmitter,
+    ) {
+        this._dialogService.openDialog(
+            'changeLegalBasis',
+            $event,
+            { annotations, dossier },
+            (data: { comment: string; legalBasis: string }) => {
+                annotations.forEach(annotation => {
+                    this._processObsAndEmit(
+                        this._manualAnnotationService.changeLegalBasis(annotation.annotationId, dossier, data.legalBasis, data.comment),
+                        annotation,
+                        annotationsChanged,
+                    );
+                });
+            },
+        );
     }
 
     suggestRemoveAnnotation(
         $event: MouseEvent,
         annotations: AnnotationWrapper[],
+        dossier: Dossier,
         removeFromDictionary: boolean,
         annotationsChanged: EventEmitter,
     ) {
-        const data = { annotationsToRemove: annotations, removeFromDictionary };
+        const data = { annotationsToRemove: annotations, removeFromDictionary, dossier };
         this._dialogService.openDialog('removeAnnotations', $event, data, (result: { comment: string }) => {
             annotations.forEach(annotation => {
                 this._processObsAndEmit(
-                    this._manualAnnotationService.removeOrSuggestRemoveAnnotation(annotation, removeFromDictionary, result.comment),
+                    this._manualAnnotationService.removeOrSuggestRemoveAnnotation(
+                        annotation,
+                        dossier,
+                        removeFromDictionary,
+                        result.comment,
+                    ),
                     annotation,
                     annotationsChanged,
                 );
@@ -88,17 +132,27 @@ export class AnnotationActionsService {
         });
     }
 
-    markAsFalsePositive($event: MouseEvent, annotations: AnnotationWrapper[], annotationsChanged: EventEmitter) {
+    markAsFalsePositive(
+        $event: MouseEvent,
+        annotations: AnnotationWrapper[],
+        dossier: Dossier,
+        annotationsChanged: EventEmitter,
+    ) {
         annotations.forEach(annotation => {
-            this._markAsFalsePositive($event, annotation, this._getFalsePositiveText(annotation), annotationsChanged);
+            this._markAsFalsePositive($event, annotation, dossier, this._getFalsePositiveText(annotation), annotationsChanged);
         });
     }
 
-    recategorizeImages($event: MouseEvent, annotations: AnnotationWrapper[], annotationsChanged: EventEmitter) {
-        this._dialogService.openDialog('recategorizeImage', $event, annotations, (data: { type: string; comment: string }) => {
+    recategorizeImages(
+        $event: MouseEvent,
+        annotations: AnnotationWrapper[],
+        dossier: Dossier,
+        annotationsChanged: EventEmitter,
+    ) {
+        this._dialogService.openDialog('recategorizeImage', $event, { annotations, dossier }, (data: { type: string; comment: string }) => {
             annotations.forEach(annotation => {
                 this._processObsAndEmit(
-                    this._manualAnnotationService.recategorizeImg(annotation.annotationId, data.type, data.comment),
+                    this._manualAnnotationService.recategorizeImg(annotation.annotationId, dossier, data.type, data.comment),
                     annotation,
                     annotationsChanged,
                 );
@@ -106,23 +160,35 @@ export class AnnotationActionsService {
         });
     }
 
-    undoDirectAction($event: MouseEvent, annotations: AnnotationWrapper[], annotationsChanged: EventEmitter) {
+    undoDirectAction(
+        $event: MouseEvent,
+        annotations: AnnotationWrapper[],
+        dossier: Dossier,
+        annotationsChanged: EventEmitter,
+    ) {
         $event?.stopPropagation();
 
         annotations.forEach(annotation => {
-            this._processObsAndEmit(this._manualAnnotationService.undoRequest(annotation), annotation, annotationsChanged);
+            this._processObsAndEmit(this._manualAnnotationService.undoRequest(annotation, dossier), annotation, annotationsChanged);
         });
     }
 
-    convertRecommendationToAnnotation($event: any, annotations: AnnotationWrapper[], annotationsChanged: EventEmitter) {
+    convertRecommendationToAnnotation(
+        $event: any,
+        annotations: AnnotationWrapper[],
+        dossier: Dossier,
+        annotationsChanged: EventEmitter,
+    ) {
         $event?.stopPropagation();
 
         annotations.forEach(annotation => {
-            this._processObsAndEmit(this._manualAnnotationService.addRecommendation(annotation), annotation, annotationsChanged);
+            this._processObsAndEmit(this._manualAnnotationService.addRecommendation(annotation, dossier), annotation, annotationsChanged);
         });
     }
 
     getViewerAvailableActions(
+        viewer: WebViewerInstance,
+        dossier: Dossier,
         annotations: AnnotationWrapper[],
         annotationsChanged: EventEmitter,
     ): Record[] {
@@ -130,9 +196,54 @@ export class AnnotationActionsService {
 
         const annotationPermissions = annotations.map(annotation => ({
             annotation,
-            permissions: AnnotationPermissions.forUser(this._permissionsService.isApprover(), this._userService.currentUser, annotation),
+            permissions: AnnotationPermissions.forUser(
+                this._permissionsService.isApprover(dossier),
+                this._userService.currentUser,
+                annotation,
+            ),
         }));
 
+        // you can only resize one annotation at a time
+        const canResize = annotationPermissions.length === 1 && annotationPermissions[0].permissions.canResizeAnnotation;
+        if (canResize) {
+            const firstAnnotation = annotations[0];
+            // if we already entered resize-mode previously
+            if (firstAnnotation.resizing) {
+                availableActions.push({
+                    type: 'actionButton',
+                    img: this._convertPath('/assets/icons/general/check.svg'),
+                    title: this._translateService.instant('annotation-actions.resize-accept.label'),
+                    onClick: () => {
+                        this._ngZone.run(() => {
+                            this.acceptResize(null, viewer, dossier, firstAnnotation, annotationsChanged);
+                        });
+                    },
+                });
+                availableActions.push({
+                    type: 'actionButton',
+                    img: this._convertPath('/assets/icons/general/close.svg'),
+                    title: this._translateService.instant('annotation-actions.resize-cancel.label'),
+                    onClick: () => {
+                        this._ngZone.run(() => {
+                            this.cancelResize(null, viewer, firstAnnotation, annotationsChanged);
+                        });
+                    },
+                });
+                return availableActions;
+            }
+
+            availableActions.push({
+                type: 'actionButton',
+                img: this._convertPath('/assets/icons/general/resize.svg'),
+                title: this._translateService.instant('annotation-actions.resize.label'),
+                onClick: () => {
+                    this._ngZone.run(() => {
+                        this.resize(null, viewer, annotations[0]);
+                    });
+                },
+            });
+        }
+
         const canChangeLegalBasis = annotationPermissions.reduce((acc, next) => acc && next.permissions.canChangeLegalBasis, true);
         if (canChangeLegalBasis) {
             availableActions.push({
@@ -141,7 +252,7 @@ export class AnnotationActionsService {
                 title: this._translateService.instant('annotation-actions.edit-reason.label'),
                 onClick: () => {
                     this._ngZone.run(() => {
-                        this.changeLegalBasis(null, annotations, annotationsChanged);
+                        this.changeLegalBasis(null, annotations, dossier, annotationsChanged);
                     });
                 },
             });
@@ -155,7 +266,7 @@ export class AnnotationActionsService {
                 title: this._translateService.instant('annotation-actions.recategorize-image'),
                 onClick: () => {
                     this._ngZone.run(() => {
-                        this.recategorizeImages(null, annotations, annotationsChanged);
+                        this.recategorizeImages(null, annotations, dossier, annotationsChanged);
                     });
                 },
             });
@@ -172,7 +283,7 @@ export class AnnotationActionsService {
                 title: this._translateService.instant('annotation-actions.remove-annotation.remove-from-dict'),
                 onClick: () => {
                     this._ngZone.run(() => {
-                        this.suggestRemoveAnnotation(null, annotations, true, annotationsChanged);
+                        this.suggestRemoveAnnotation(null, annotations, dossier, true, annotationsChanged);
                     });
                 },
             });
@@ -186,7 +297,7 @@ export class AnnotationActionsService {
                 title: this._translateService.instant('annotation-actions.accept-recommendation.label'),
                 onClick: () => {
                     this._ngZone.run(() => {
-                        this.convertRecommendationToAnnotation(null, annotations, annotationsChanged);
+                        this.convertRecommendationToAnnotation(null, annotations, dossier, annotationsChanged);
                     });
                 },
             });
@@ -200,7 +311,7 @@ export class AnnotationActionsService {
                 title: this._translateService.instant('annotation-actions.accept-suggestion.label'),
                 onClick: () => {
                     this._ngZone.run(() => {
-                        this.acceptSuggestion(null, annotations, annotationsChanged);
+                        this.acceptSuggestion(null, annotations, dossier, annotationsChanged);
                     });
                 },
             });
@@ -214,7 +325,7 @@ export class AnnotationActionsService {
                 title: this._translateService.instant('annotation-actions.undo'),
                 onClick: () => {
                     this._ngZone.run(() => {
-                        this.undoDirectAction(null, annotations, annotationsChanged);
+                        this.undoDirectAction(null, annotations, dossier, annotationsChanged);
                     });
                 },
             });
@@ -228,7 +339,7 @@ export class AnnotationActionsService {
                 title: this._translateService.instant('annotation-actions.remove-annotation.false-positive'),
                 onClick: () => {
                     this._ngZone.run(() => {
-                        this.markAsFalsePositive(null, annotations, annotationsChanged);
+                        this.markAsFalsePositive(null, annotations, dossier, annotationsChanged);
                     });
                 },
             });
@@ -242,7 +353,7 @@ export class AnnotationActionsService {
                 title: this._translateService.instant('annotation-actions.force-redaction.label'),
                 onClick: () => {
                     this._ngZone.run(() => {
-                        this.forceRedaction(null, annotations, annotationsChanged);
+                        this.forceRedaction(null, annotations, dossier, annotationsChanged);
                     });
                 },
             });
@@ -256,7 +367,7 @@ export class AnnotationActionsService {
                 title: this._translateService.instant('annotation-actions.reject-suggestion'),
                 onClick: () => {
                     this._ngZone.run(() => {
-                        this.rejectSuggestion(null, annotations, annotationsChanged);
+                        this.rejectSuggestion(null, annotations, dossier, annotationsChanged);
                     });
                 },
             });
@@ -273,7 +384,7 @@ export class AnnotationActionsService {
                 title: this._translateService.instant('annotation-actions.remove-annotation.only-here'),
                 onClick: () => {
                     this._ngZone.run(() => {
-                        this.suggestRemoveAnnotation(null, annotations, false, annotationsChanged);
+                        this.suggestRemoveAnnotation(null, annotations, dossier, false, annotationsChanged);
                     });
                 },
             });
@@ -288,6 +399,67 @@ export class AnnotationActionsService {
         annotationToBeUpdated.hidden = hidden;
     }
 
+    resize($event: MouseEvent, viewer: WebViewerInstance, annotationWrapper: AnnotationWrapper) {
+        $event?.stopPropagation();
+
+        annotationWrapper.resizing = true;
+
+        const annotationManager = viewer.Core.annotationManager;
+        const viewerAnnotation = annotationManager.getAnnotationById(annotationWrapper.id);
+        viewerAnnotation.ReadOnly = false;
+        viewerAnnotation.Hidden = false;
+        viewerAnnotation.setRotationControlEnabled(false);
+        annotationManager.redrawAnnotation(viewerAnnotation);
+        annotationManager.selectAnnotation(viewerAnnotation);
+
+        this._annotationDrawService.annotationToQuads(viewerAnnotation, viewer);
+    }
+
+    acceptResize(
+        $event: MouseEvent,
+        viewer: WebViewerInstance,
+        dossier: Dossier,
+        annotationWrapper: AnnotationWrapper,
+        annotationsChanged: EventEmitter,
+    ) {
+        this._dialogService.openDialog('resizeAnnotation', $event, { dossier }, async (result: { comment: string }) => {
+            const textAndPositions = await this._extractTextAndPositions(viewer, annotationWrapper.id);
+            const text =
+                annotationWrapper.value === 'Rectangle' ? 'Rectangle' : annotationWrapper.isImage ? 'Image' : textAndPositions.text;
+
+            const resizeRequest: IResizeRequest = {
+                annotationId: annotationWrapper.id,
+                comment: result.comment,
+                positions: textAndPositions.positions,
+                value: text,
+            };
+
+            this._processObsAndEmit(
+                this._manualAnnotationService.resizeOrSuggestToResize(annotationWrapper, dossier, resizeRequest),
+                annotationWrapper,
+                annotationsChanged,
+            );
+        });
+    }
+
+    cancelResize(
+        $event: MouseEvent,
+        viewer: WebViewerInstance,
+        annotationWrapper: AnnotationWrapper,
+        annotationsChanged: EventEmitter,
+    ) {
+        $event?.stopPropagation();
+
+        annotationWrapper.resizing = false;
+
+        const annotationManager = viewer.Core.annotationManager;
+        const viewerAnnotation = annotationManager.getAnnotationById(annotationWrapper.id);
+        viewerAnnotation.ReadOnly = false;
+        annotationManager.redrawAnnotation(viewerAnnotation);
+        annotationManager.deselectAllAnnotations();
+        annotationsChanged.emit(annotationWrapper);
+    }
+
     private _processObsAndEmit(obs: Observable, annotation: AnnotationWrapper, annotationsChanged: EventEmitter) {
         obs.subscribe(
             () => {
@@ -318,6 +490,7 @@ export class AnnotationActionsService {
     private _markAsFalsePositive(
         $event: MouseEvent,
         annotation: AnnotationWrapper,
+        dossier: Dossier,
         text: string,
         annotationsChanged: EventEmitter,
     ) {
@@ -331,10 +504,72 @@ export class AnnotationActionsService {
         falsePositiveRequest.addToDictionary = true;
         falsePositiveRequest.comment = { text: 'False Positive' };
 
-        this._processObsAndEmit(this._manualAnnotationService.addAnnotation(falsePositiveRequest), annotation, annotationsChanged);
+        this._processObsAndEmit(this._manualAnnotationService.addAnnotation(falsePositiveRequest, dossier), annotation, annotationsChanged);
     }
 
     private _convertPath(path: string): string {
         return this._baseHref + path;
     }
+
+    private async _extractTextAndPositions(viewer: WebViewerInstance, annotationId: string) {
+        const viewerAnnotation = viewer.Core.annotationManager.getAnnotationById(annotationId);
+
+        const document = await viewer.Core.documentViewer.getDocument().getPDFDoc();
+        const page = await document.getPage(viewerAnnotation.getPageNumber());
+        if (viewerAnnotation instanceof viewer.Core.Annotations.TextHighlightAnnotation) {
+            const words = [];
+            const rectangles: IRectangle[] = [];
+            for (const quad of viewerAnnotation.Quads) {
+                const rect = toPosition(
+                    viewerAnnotation.getPageNumber(),
+                    viewer.Core.documentViewer.getPageHeight(viewerAnnotation.getPageNumber()),
+                    this._translateQuads(viewer, viewerAnnotation.getPageNumber(), quad),
+                );
+                rectangles.push(rect);
+                const pdfNetRect = new viewer.Core.PDFNet.Rect(
+                    rect.topLeft.x,
+                    rect.topLeft.y,
+                    rect.topLeft.x + rect.width,
+                    rect.topLeft.y + rect.height,
+                );
+                const quadWords = await this._extractTextFromRect(viewer, page, pdfNetRect);
+                words.push(...quadWords);
+            }
+
+            return {
+                text: words.join(' '),
+                positions: rectangles,
+            };
+        } else {
+            const rect = toPosition(
+                viewerAnnotation.getPageNumber(),
+                viewer.Core.documentViewer.getPageHeight(viewerAnnotation.getPageNumber()),
+                this._annotationDrawService.annotationToQuads(viewerAnnotation, viewer),
+            );
+            return {
+                positions: [rect],
+                text: null,
+            };
+        }
+    }
+
+    private _translateQuads(viewer: WebViewerInstance, page: number, quads: any) {
+        const rotation = viewer.Core.documentViewer.getCompleteRotation(page);
+        return translateQuads(page, rotation, quads);
+    }
+
+    private async _extractTextFromRect(viewer: WebViewerInstance, page: Core.PDFNet.Page, rect: Core.PDFNet.Rect) {
+        const txt = await viewer.Core.PDFNet.TextExtractor.create();
+        txt.begin(page, rect); // Read the page.
+
+        const words = [];
+        // Extract words one by one.
+        let line = await txt.getFirstLine();
+        for (; await line.isValid(); line = await line.getNextLine()) {
+            for (let word = await line.getFirstWord(); await word.isValid(); word = await word.getNextWord()) {
+                words.push(await word.getString());
+            }
+        }
+        return words;
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/services/annotation-draw.service.ts b/apps/red-ui/src/app/modules/dossier/services/annotation-draw.service.ts
index f87dda6db..f777317a6 100644
--- a/apps/red-ui/src/app/modules/dossier/services/annotation-draw.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/annotation-draw.service.ts
@@ -23,6 +23,8 @@ export class AnnotationDrawService {
     async drawAnnotations(
         activeViewer: WebViewerInstance,
         annotationWrappers: AnnotationWrapper[],
+        fileId: string,
+        dossierId: string,
         hideSkipped = false,
         compareMode = false,
     ) {
@@ -34,25 +36,25 @@ export class AnnotationDrawService {
 
         await pdfNet.runWithCleanup(
             async () => {
-                await this._drawAnnotations(activeViewer, annotationWrappers, hideSkipped, compareMode);
+                await this._drawAnnotations(activeViewer, annotationWrappers, fileId, dossierId, hideSkipped, compareMode);
             },
             environment.licenseKey ? atob(environment.licenseKey) : null,
         );
     }
 
-    getColor(activeViewer: WebViewerInstance, superType: string, dictionary?: string) {
+    getColor(activeViewer: WebViewerInstance, dossierTemplateId: string, superType: string, dictionary?: string) {
         let color;
         switch (superType) {
             case 'hint':
             case 'redaction':
             case 'recommendation':
-                color = this._appStateService.getDictionaryColor(dictionary);
+                color = this._appStateService.getDictionaryColor(dictionary, dossierTemplateId);
                 break;
             case 'skipped':
-                color = this._appStateService.getDictionaryColor(superType);
+                color = this._appStateService.getDictionaryColor(superType, dossierTemplateId);
                 break;
             default:
-                color = this._appStateService.getDictionaryColor(superType);
+                color = this._appStateService.getDictionaryColor(superType, dossierTemplateId);
                 break;
         }
         const rgbColor = hexToRgb(color);
@@ -78,11 +80,13 @@ export class AnnotationDrawService {
     private async _drawAnnotations(
         activeViewer: WebViewerInstance,
         annotationWrappers: AnnotationWrapper[],
-        hideSkipped = false,
-        compareMode = false,
+        fileId: string,
+        dossierId: string,
+        hideSkipped: boolean,
+        compareMode: boolean,
     ) {
         const annotations = annotationWrappers.map(annotation =>
-            this._computeAnnotation(activeViewer, annotation, hideSkipped, compareMode),
+            this._computeAnnotation(activeViewer, annotation, dossierId, hideSkipped, compareMode),
         );
         const annotationManager = activeViewer.Core.annotationManager;
         annotationManager.addAnnotations(annotations, { imported: true });
@@ -90,19 +94,19 @@ export class AnnotationDrawService {
 
         if (this._userPreferenceService.areDevFeaturesEnabled) {
             const sectionsGrid = await this._redactionLogService
-                .getSectionGrid(this._dossiersService.activeDossierId, this._appStateService.activeFileId)
+                .getSectionGrid(dossierId, fileId)
                 .toPromise()
                 .catch(() => ({ rectanglesPerPage: {} }));
-            await this._drawSections(activeViewer, sectionsGrid);
+            await this._drawSections(activeViewer, sectionsGrid, dossierId);
         }
     }
 
-    private async _drawSections(activeViewer: WebViewerInstance, sectionGrid: ISectionGrid) {
+    private async _drawSections(activeViewer: WebViewerInstance, sectionGrid: ISectionGrid, dossierId: string) {
         const sections = [];
         for (const page of Object.keys(sectionGrid.rectanglesPerPage)) {
             const sectionRectangles = sectionGrid.rectanglesPerPage[page];
             sectionRectangles.forEach(sectionRectangle => {
-                sections.push(this._computeSection(activeViewer, parseInt(page, 10), sectionRectangle));
+                sections.push(this._computeSection(activeViewer, parseInt(page, 10), sectionRectangle, dossierId));
                 // sectionRectangle.tableCells?.forEach(cell =>{
                 //    sections.push(this.computeSection(activeViewer, parseInt(page, 10), cell));
                 // })
@@ -113,7 +117,8 @@ export class AnnotationDrawService {
         await annotationManager.drawAnnotationsFromList(sections);
     }
 
-    private _computeSection(activeViewer: WebViewerInstance, pageNumber: number, sectionRectangle: ISectionRectangle) {
+    private _computeSection(activeViewer: WebViewerInstance, pageNumber: number, sectionRectangle: ISectionRectangle, dossierId: string) {
+        const dossierTemplateId = this._dossiersService.find(dossierId).dossierTemplateId;
         const rectangleAnnot = new activeViewer.Core.Annotations.RectangleAnnotation();
         const pageHeight = activeViewer.Core.documentViewer.getPageHeight(pageNumber);
         const rectangle: IRectangle = {
@@ -128,7 +133,7 @@ export class AnnotationDrawService {
         rectangleAnnot.Width = rectangle.width + 2;
         rectangleAnnot.Height = rectangle.height + 2;
         rectangleAnnot.ReadOnly = true;
-        rectangleAnnot.StrokeColor = this.getColor(activeViewer, 'analysis', 'analysis');
+        rectangleAnnot.StrokeColor = this.getColor(activeViewer, dossierTemplateId, 'analysis', 'analysis');
         rectangleAnnot.StrokeThickness = 1;
 
         return rectangleAnnot;
@@ -137,36 +142,56 @@ export class AnnotationDrawService {
     private _computeAnnotation(
         activeViewer: WebViewerInstance,
         annotationWrapper: AnnotationWrapper,
-        hideSkipped = false,
-        compareMode = false,
+        dossierId: string,
+        hideSkipped: boolean,
+        compareMode: boolean,
     ) {
         const pageNumber = compareMode ? annotationWrapper.pageNumber * 2 - 1 : annotationWrapper.pageNumber;
-        const highlight = new activeViewer.Core.Annotations.TextHighlightAnnotation();
-        highlight.PageNumber = pageNumber;
-        highlight.StrokeColor = this.getColor(activeViewer, annotationWrapper.superType, annotationWrapper.type);
-        highlight.setContents(annotationWrapper.content);
-        highlight.Quads = this._rectanglesToQuads(annotationWrapper.positions, activeViewer, pageNumber);
-        highlight.Id = annotationWrapper.id;
-        highlight.ReadOnly = true;
+        const dossierTemplateId = this._dossiersService.find(dossierId).dossierTemplateId;
+
+        let annotation;
+        if (annotationWrapper.value === 'Rectangle' || annotationWrapper.isImage) {
+            annotation = new activeViewer.Core.Annotations.RectangleAnnotation();
+            const pageHeight = activeViewer.Core.documentViewer.getPageHeight(pageNumber);
+            const firstPosition = annotationWrapper.positions[0];
+            annotation.X = firstPosition.topLeft.x;
+            annotation.Y = pageHeight - (firstPosition.topLeft.y + firstPosition.height);
+            annotation.Width = firstPosition.width;
+            annotation.FillColor = this.getColor(activeViewer, dossierTemplateId, annotationWrapper.superType, annotationWrapper.type);
+            annotation.Opacity = annotationWrapper.isChangeLogRemoved ? 0.2 : 0.6;
+            annotation.Height = firstPosition.height;
+            annotation.Intensity = 100;
+        } else {
+            annotation = new activeViewer.Core.Annotations.TextHighlightAnnotation();
+            annotation.Quads = this._rectanglesToQuads(annotationWrapper.positions, activeViewer, pageNumber);
+            annotation.Opacity = annotationWrapper.isChangeLogRemoved ? 0.2 : 1;
+        }
+
+        annotation.setContents(annotationWrapper.content);
+
+        annotation.PageNumber = pageNumber;
+        annotation.StrokeColor = this.getColor(activeViewer, dossierTemplateId, annotationWrapper.superType, annotationWrapper.type);
+        annotation.Id = annotationWrapper.id;
+        annotation.ReadOnly = true;
         // change log entries are drawn lighter
-        highlight.Opacity = annotationWrapper.isChangeLogRemoved ? 0.2 : 1;
-        highlight.Hidden =
+
+        annotation.Hidden =
             annotationWrapper.isChangeLogRemoved ||
             (hideSkipped && annotationWrapper.isSkipped) ||
             annotationWrapper.isOCR ||
             annotationWrapper.hidden;
-        highlight.setCustomData('redacto-manager', 'true');
-        highlight.setCustomData('redaction', String(annotationWrapper.isRedacted));
-        highlight.setCustomData('skipped', String(annotationWrapper.isSkipped));
-        highlight.setCustomData('changeLog', String(annotationWrapper.isChangeLogEntry));
-        highlight.setCustomData('changeLogRemoved', String(annotationWrapper.isChangeLogRemoved));
-        highlight.setCustomData('redactionColor', String(this.getColor(activeViewer, 'redaction', 'redaction')));
-        highlight.setCustomData(
+        annotation.setCustomData('redacto-manager', 'true');
+        annotation.setCustomData('redaction', String(annotationWrapper.isRedacted));
+        annotation.setCustomData('skipped', String(annotationWrapper.isSkipped));
+        annotation.setCustomData('changeLog', String(annotationWrapper.isChangeLogEntry));
+        annotation.setCustomData('changeLogRemoved', String(annotationWrapper.isChangeLogRemoved));
+        annotation.setCustomData('redactionColor', String(this.getColor(activeViewer, dossierTemplateId, 'redaction', 'redaction')));
+        annotation.setCustomData(
             'annotationColor',
-            String(this.getColor(activeViewer, annotationWrapper.superType, annotationWrapper.type)),
+            String(this.getColor(activeViewer, dossierTemplateId, annotationWrapper.superType, annotationWrapper.type)),
         );
 
-        return highlight;
+        return annotation;
     }
 
     private _rectanglesToQuads(positions: IRectangle[], activeViewer: WebViewerInstance, pageNumber: number): any[] {
diff --git a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
index 331349a4c..4e14a62ba 100644
--- a/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/dossiers-dialog.service.ts
@@ -10,6 +10,7 @@ import { AssignReviewerApproverDialogComponent } from '../dialogs/assign-reviewe
 import { ChangeLegalBasisDialogComponent } from '../dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component';
 import { RecategorizeImageDialogComponent } from '../dialogs/recategorize-image-dialog/recategorize-image-dialog.component';
 import { ConfirmationDialogComponent, DialogConfig, DialogService, largeDialogConfig } from '@iqser/common-ui';
+import { ResizeAnnotationDialogComponent } from '../dialogs/resize-annotation-dialog/resize-annotation-dialog.component';
 
 type DialogType =
     | 'confirm'
@@ -20,6 +21,7 @@ type DialogType =
     | 'recategorizeImage'
     | 'changeLegalBasis'
     | 'removeAnnotations'
+    | 'resizeAnnotation'
     | 'forceRedaction'
     | 'manualAnnotation';
 
@@ -53,6 +55,9 @@ export class DossiersDialogService extends DialogService {
         removeAnnotations: {
             component: RemoveAnnotationsDialogComponent,
         },
+        resizeAnnotation: {
+            component: ResizeAnnotationDialogComponent,
+        },
         forceRedaction: {
             component: ForceRedactionDialogComponent,
         },
diff --git a/apps/red-ui/src/app/modules/dossier/services/injector.ts b/apps/red-ui/src/app/modules/dossier/services/injector.ts
deleted file mode 100644
index 871abbb46..000000000
--- a/apps/red-ui/src/app/modules/dossier/services/injector.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Injector } from '@angular/core';
-import { FilterService, SearchService } from '@iqser/common-ui';
-
-/**
- * This should be removed when refactoring is done
- * @param injector
- * @constructor
- */
-export const TEMPORARY_INJECTOR = injector =>
-    Injector.create({
-        providers: [
-            { provide: FilterService, useClass: FilterService },
-            { provide: SearchService, useClass: SearchService },
-        ],
-        parent: injector,
-    });
diff --git a/apps/red-ui/src/app/modules/dossier/services/manual-annotation.service.ts b/apps/red-ui/src/app/modules/dossier/services/manual-annotation.service.ts
index 991478045..f1a81dc1f 100644
--- a/apps/red-ui/src/app/modules/dossier/services/manual-annotation.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/manual-annotation.service.ts
@@ -1,24 +1,23 @@
 import { Injectable, Injector } from '@angular/core';
 import { AppStateService } from '@state/app-state.service';
 import {
+    Dossier,
     IAddRedactionRequest,
     IApproveRequest,
     IImageRecategorizationRequest,
     ILegalBasisChangeRequest,
     IManualAddResponse,
     IRemoveRedactionRequest,
+    IResizeRequest,
 } from '@red/domain';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
-import { CONFLICT_ERROR_CODE, ErrorMessageService, GenericService, RequiredParam, Toaster, Validate } from '@iqser/common-ui';
-import { TranslateService } from '@ngx-translate/core';
+import { GenericService, RequiredParam, Toaster, Validate } from '@iqser/common-ui';
 import { map, tap } from 'rxjs/operators';
-import { UserService } from '@services/user.service';
 import { PermissionsService } from '@services/permissions.service';
 import { AnnotationActionMode } from '../models/annotation-action-mode.model';
 import { annotationActionsTranslations } from '../translations/annotation-actions-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { DossiersService } from '@services/entity-services/dossiers.service';
-import { HttpErrorResponse } from '@angular/common/http';
+import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
 
 @Injectable()
 export class ManualAnnotationService extends GenericService {
@@ -28,12 +27,8 @@ export class ManualAnnotationService extends GenericService
 
     constructor(
         private readonly _appStateService: AppStateService,
-        private readonly _dossiersService: DossiersService,
-        private readonly _userService: UserService,
-        private readonly _translateService: TranslateService,
         private readonly _toaster: Toaster,
         private readonly _permissionsService: PermissionsService,
-        private readonly _errorMessageService: ErrorMessageService,
         protected readonly _injector: Injector,
     ) {
         super(_injector, 'manualRedaction');
@@ -51,23 +46,25 @@ export class ManualAnnotationService extends GenericService
             suggest: 'requestAddRedaction',
             'force-redaction': 'forceRedaction',
             'request-force-redaction': 'requestForceRedaction',
+            resize: 'resize',
+            'request-resize': 'requestResize',
         };
     }
 
-    _makeRequest(mode: AnnotationActionMode, body: any, secondParam: any = null, modifyDictionary = false) {
+    _makeRequest(mode: AnnotationActionMode, dossier: Dossier, body: any, secondParam: any = null, modifyDictionary = false) {
         const obs = !secondParam
-            ? this[this.CONFIG[mode]](body, this._dossiersService.activeDossierId, this._appStateService.activeFileId)
-            : this[this.CONFIG[mode]](body, secondParam, this._dossiersService.activeDossierId, this._appStateService.activeFileId);
+            ? this[this.CONFIG[mode]](body, dossier.id, this._appStateService.activeFileId)
+            : this[this.CONFIG[mode]](body, secondParam, dossier.id, this._appStateService.activeFileId);
 
         return obs.pipe(
             tap(
                 () => this._toaster.success(this._getMessage(mode, modifyDictionary), { positionClass: 'toast-file-preview' }),
                 (error: HttpErrorResponse) => {
-                    const isConflict = error.status === CONFLICT_ERROR_CODE;
+                    const isConflict = error.status === HttpStatusCode.Conflict;
                     this._toaster.error(this._getMessage(mode, modifyDictionary, true, isConflict), {
                         error,
                         params: {
-                            dictionaryName: this._appStateService.getDictionary(body.type).label,
+                            dictionaryName: this._appStateService.getDictionary(body.type, dossier.dossierTemplateId).label,
                             content: body.value,
                         },
                         positionClass: 'toast-file-preview',
@@ -78,28 +75,18 @@ export class ManualAnnotationService extends GenericService
     }
 
     @Validate()
-    addComment(
-        @RequiredParam() comment: string,
-        @RequiredParam() annotationId: string,
-        dossierId = this._dossiersService.activeDossierId,
-        fileId = this._appStateService.activeFileId,
-    ) {
+    addComment(@RequiredParam() comment: string, @RequiredParam() annotationId: string, dossierId: string, fileId: string) {
         const url = `${this._defaultModelPath}/comment/add/${dossierId}/${fileId}/${annotationId}`;
         return this._post<{ commentId: string }>({ text: comment }, url).pipe(map(res => res.commentId));
     }
 
     @Validate()
-    deleteComment(
-        @RequiredParam() commentId: string,
-        @RequiredParam() annotationId: string,
-        dossierId = this._dossiersService.activeDossierId,
-        fileId = this._appStateService.activeFileId,
-    ) {
+    deleteComment(@RequiredParam() commentId: string, @RequiredParam() annotationId: string, dossierId: string, fileId: string) {
         const url = `${this._defaultModelPath}/comment/undo/${dossierId}/${fileId}/${annotationId}/${commentId}`;
         return super.delete({}, url);
     }
 
-    addRecommendation(annotation: AnnotationWrapper) {
+    addRecommendation(annotation: AnnotationWrapper, dossier: Dossier) {
         const manualRedactionEntry: IAddRedactionRequest = {};
         manualRedactionEntry.addToDictionary = true;
         // set the ID as reason, so we can hide the suggestion
@@ -108,69 +95,86 @@ export class ManualAnnotationService extends GenericService
         manualRedactionEntry.positions = annotation.positions;
         manualRedactionEntry.type = annotation.recommendationType;
         manualRedactionEntry.comment = { text: 'Accepted Recommendation' };
-        return this.addAnnotation(manualRedactionEntry);
+        return this.addAnnotation(manualRedactionEntry, dossier);
     }
 
     // this wraps
     // /manualRedaction/redaction/legalBasisChange
     // /manualRedaction/request/legalBasis
-    changeLegalBasis(annotationId: string, legalBasis: string, comment?: string) {
-        const mode: AnnotationActionMode = this._permissionsService.isApprover() ? 'change-legal-basis' : 'request-change-legal-basis';
-        return this._makeRequest(mode, { annotationId, legalBasis, comment });
+    changeLegalBasis(annotationId: string, dossier: Dossier, legalBasis: string, comment?: string) {
+        const mode: AnnotationActionMode = this._permissionsService.isApprover(dossier)
+            ? 'change-legal-basis'
+            : 'request-change-legal-basis';
+        return this._makeRequest(mode, dossier, { annotationId, legalBasis, comment });
     }
 
     // this wraps
     // /manualRedaction/redaction/recategorize
     // /manualRedaction/request/recategorize
-    recategorizeImg(annotationId: string, type: string, comment: string) {
-        const mode: AnnotationActionMode = this._permissionsService.isApprover() ? 'recategorize-image' : 'request-image-recategorization';
-        return this._makeRequest(mode, { annotationId, type, comment });
+    recategorizeImg(annotationId: string, dossier: Dossier, type: string, comment: string) {
+        const mode: AnnotationActionMode = this._permissionsService.isApprover(dossier)
+            ? 'recategorize-image'
+            : 'request-image-recategorization';
+        return this._makeRequest(mode, dossier, { annotationId, type, comment });
     }
 
     // this wraps
     // /manualRedaction/redaction/add
     // /manualRedaction/request/add
-    addAnnotation(manualRedactionEntry: IAddRedactionRequest) {
-        const mode: AnnotationActionMode = this._permissionsService.isApprover() ? 'add' : 'suggest';
-        return this._makeRequest(mode, manualRedactionEntry, null, manualRedactionEntry.addToDictionary);
+    addAnnotation(manualRedactionEntry: IAddRedactionRequest, dossier: Dossier) {
+        const mode: AnnotationActionMode = this._permissionsService.isApprover(dossier) ? 'add' : 'suggest';
+        return this._makeRequest(mode, dossier, manualRedactionEntry, null, manualRedactionEntry.addToDictionary);
     }
 
     // this wraps
     // /manualRedaction/redaction/force
     // /manualRedaction/request/force
-    force(request: ILegalBasisChangeRequest) {
-        const mode: AnnotationActionMode = this._permissionsService.isApprover() ? 'force-redaction' : 'request-force-redaction';
-        return this._makeRequest(mode, request);
+    force(request: ILegalBasisChangeRequest, dossier: Dossier) {
+        const mode: AnnotationActionMode = this._permissionsService.isApprover(dossier) ? 'force-redaction' : 'request-force-redaction';
+        return this._makeRequest(mode, dossier, request);
     }
 
     // this wraps
     // /manualRedaction/approve
-    approve(annotationId: string, addToDictionary: boolean = false) {
+    approve(annotationId: string, dossier: Dossier, addToDictionary: boolean = false) {
         // for only here - approve the request
-        return this._makeRequest('approve', { addOrRemoveFromDictionary: addToDictionary }, annotationId, addToDictionary);
+        return this._makeRequest('approve', dossier, { addOrRemoveFromDictionary: addToDictionary }, annotationId, addToDictionary);
     }
 
-    undoRequest(annotationWrapper: AnnotationWrapper) {
-        return this._makeRequest('undo', annotationWrapper.id, null, annotationWrapper.isModifyDictionary);
+    undoRequest(annotationWrapper: AnnotationWrapper, dossier: Dossier) {
+        return this._makeRequest('undo', dossier, annotationWrapper.id, null, annotationWrapper.isModifyDictionary);
     }
 
     // this wraps
     // /manualRedaction/decline/remove
     // /manualRedaction/undo
-    declineOrRemoveRequest(annotationWrapper: AnnotationWrapper) {
-        const mode: AnnotationActionMode = this._permissionsService.isApprover() ? 'decline' : 'undo';
-        return this._makeRequest(mode, annotationWrapper.id, null, annotationWrapper.isModifyDictionary);
+    declineOrRemoveRequest(annotationWrapper: AnnotationWrapper, dossier: Dossier) {
+        const mode: AnnotationActionMode = this._permissionsService.isApprover(dossier) ? 'decline' : 'undo';
+        return this._makeRequest(mode, dossier, annotationWrapper.id, null, annotationWrapper.isModifyDictionary);
+    }
+
+    // this wraps
+    // /manualRedaction/redaction/resize/
+    // /manualRedaction/request/resize/
+    resizeOrSuggestToResize(annotationWrapper: AnnotationWrapper, dossier: Dossier, resizeRequest: IResizeRequest) {
+        const mode: AnnotationActionMode = this._permissionsService.isApprover(dossier) ? 'resize' : 'request-resize';
+        return this._makeRequest(mode, dossier, resizeRequest);
     }
 
     // this wraps
     // /manualRedaction/redaction/remove/
     // /manualRedaction/request/remove/
-    removeOrSuggestRemoveAnnotation(annotationWrapper: AnnotationWrapper, removeFromDictionary: boolean = false, comment: string) {
+    removeOrSuggestRemoveAnnotation(
+        annotationWrapper: AnnotationWrapper,
+        dossier: Dossier,
+        removeFromDictionary: boolean = false,
+        comment: string,
+    ) {
         let mode: AnnotationActionMode,
             body: any,
             removeDict = false;
 
-        if (this._permissionsService.isApprover()) {
+        if (this._permissionsService.isApprover(dossier)) {
             // if it was something manual simply decline the existing request
             if (annotationWrapper.type === 'manual') {
                 mode = 'undo';
@@ -194,11 +198,11 @@ export class ManualAnnotationService extends GenericService
             removeDict = removeFromDictionary;
         }
 
-        return this._makeRequest(mode, body, null, removeDict);
+        return this._makeRequest(mode, dossier, body, null, removeDict);
     }
 
-    getTitle(type: 'DICTIONARY' | 'REDACTION' | 'FALSE_POSITIVE') {
-        if (this._permissionsService.isApprover()) {
+    getTitle(type: 'DICTIONARY' | 'REDACTION' | 'FALSE_POSITIVE', dossier: Dossier) {
+        if (this._permissionsService.isApprover(dossier)) {
             switch (type) {
                 case 'DICTIONARY':
                     return _('manual-annotation.dialog.header.dictionary');
@@ -322,6 +326,18 @@ export class ManualAnnotationService extends GenericService
         return this._post(body, url);
     }
 
+    @Validate()
+    resize(@RequiredParam() body: IResizeRequest, @RequiredParam() dossierId: string, @RequiredParam() fileId: string) {
+        const url = `${this._defaultModelPath}/redaction/resize/${dossierId}/${fileId}`;
+        return this._post(body, url);
+    }
+
+    @Validate()
+    requestResize(@RequiredParam() body: IResizeRequest, @RequiredParam() dossierId: string, @RequiredParam() fileId: string) {
+        const url = `${this._defaultModelPath}/request/resize/${dossierId}/${fileId}`;
+        return this._post(body, url);
+    }
+
     private _getMessage(mode: AnnotationActionMode, modifyDictionary?: boolean, error = false, isConflict = false) {
         const type = modifyDictionary ? 'dictionary' : 'manual-redaction';
         const resultType = error ? (isConflict ? 'conflictError' : 'error') : 'success';
diff --git a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts
index 268bbd861..f757b9100 100644
--- a/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/pdf-viewer-data.service.ts
@@ -2,10 +2,8 @@ import { Injectable } from '@angular/core';
 import { forkJoin, Observable, of } from 'rxjs';
 import { catchError, map, tap } from 'rxjs/operators';
 import { FileDataModel } from '@models/file/file-data.model';
-import { AppStateService } from '@state/app-state.service';
 import { PermissionsService } from '@services/permissions.service';
 import { File } from '@red/domain';
-import { DossiersService } from '@services/entity-services/dossiers.service';
 import { FileManagementService } from '../shared/services/file-management.service';
 import { RedactionLogService } from './redaction-log.service';
 import { ViewedPagesService } from '../shared/services/viewed-pages.service';
@@ -13,36 +11,30 @@ import { ViewedPagesService } from '../shared/services/viewed-pages.service';
 @Injectable()
 export class PdfViewerDataService {
     constructor(
-        private readonly _appStateService: AppStateService,
-        private readonly _dossiersService: DossiersService,
         private readonly _permissionsService: PermissionsService,
         private readonly _fileManagementService: FileManagementService,
         private readonly _redactionLogService: RedactionLogService,
         private readonly _viewedPagesService: ViewedPagesService,
     ) {}
 
-    loadActiveFileRedactionLog() {
-        return this._redactionLogService.getRedactionLog(this._dossiersService.activeDossierId, this._appStateService.activeFileId).pipe(
+    loadRedactionLogFor(dossierId: string, fileId: string) {
+        return this._redactionLogService.getRedactionLog(dossierId, fileId).pipe(
             tap(redactionLog => redactionLog.redactionLogEntry.sort((a, b) => a.positions[0].page - b.positions[0].page)),
             catchError(() => of({})),
         );
     }
 
-    loadActiveFileData(): Observable {
-        const file$ = this.downloadOriginalFile(this._appStateService.activeFile);
-        const reactionLog$ = this.loadActiveFileRedactionLog();
-        const viewedPages$ = this.getViewedPagesForActiveFile();
+    loadDataFor(file: File): Observable {
+        const file$ = this.downloadOriginalFile(file);
+        const reactionLog$ = this.loadRedactionLogFor(file.dossierId, file.fileId);
+        const viewedPages$ = this.getViewedPagesFor(file);
 
-        return forkJoin([file$, reactionLog$, viewedPages$]).pipe(
-            map(data => new FileDataModel(this._appStateService.activeFile, ...data)),
-        );
+        return forkJoin([file$, reactionLog$, viewedPages$]).pipe(map(data => new FileDataModel(file, ...data)));
     }
 
-    getViewedPagesForActiveFile() {
-        if (this._permissionsService.canMarkPagesAsViewed()) {
-            return this._viewedPagesService
-                .getViewedPages(this._dossiersService.activeDossierId, this._appStateService.activeFileId)
-                .pipe(catchError(() => of([])));
+    getViewedPagesFor(file: File) {
+        if (this._permissionsService.canMarkPagesAsViewed(file)) {
+            return this._viewedPagesService.getViewedPages(file.dossierId, file.fileId).pipe(catchError(() => of([])));
         }
         return of([]);
     }
diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html
index 90a51c1e5..7955ceb8f 100644
--- a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html
@@ -1,6 +1,14 @@
 

     
-    
+    

+        
+    

+    
 

 
 
@@ -47,7 +55,6 @@
 
         
         
+
         
         

              mat-icon {
+        height: 10px;
+        width: 10px;
+        opacity: 0.5;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts
index 1375aa11f..12566dfe4 100644
--- a/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts
@@ -1,6 +1,6 @@
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
-import { File, FileStatus } from '@red/domain';
+import { File } from '@red/domain';
 import { AppStateService } from '@state/app-state.service';
 import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
 import {
@@ -8,14 +8,13 @@ import {
     CircleButtonType,
     CircleButtonTypes,
     ConfirmationDialogInput,
+    IqserTooltipPosition,
     LoadingService,
     Required,
-    StatusBarConfig,
     Toaster,
 } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { UserService } from '@services/user.service';
-import { filter } from 'rxjs/operators';
 import { UserPreferenceService } from '@services/user-preference.service';
 import { LongPressEvent } from '@shared/directives/long-press.directive';
 import { FileActionService } from '../../services/file-action.service';
@@ -26,8 +25,9 @@ import { FileManagementService } from '../../services/file-management.service';
     selector: 'redaction-file-actions',
     templateUrl: './file-actions.component.html',
     styleUrls: ['./file-actions.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnChanges {
+export class FileActionsComponent extends AutoUnsubscribe implements OnDestroy, OnChanges {
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
 
@@ -37,8 +37,6 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
     @Input() @Required() type: 'file-preview' | 'dossier-overview-list' | 'dossier-overview-workflow';
     @Output() readonly actionPerformed = new EventEmitter();
 
-    statusBarConfig?: readonly StatusBarConfig[];
-    tooltipPosition?: 'below' | 'above';
     toggleTooltip?: string;
     assignTooltip?: string;
     buttonType?: CircleButtonType;
@@ -58,6 +56,11 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
     showStatusBar: boolean;
     showOpenDocument: boolean;
     analysisForced: boolean;
+    isDossierOverview = false;
+    isDossierOverviewList = false;
+    isDossierOverviewWorkflow = false;
+    isFilePreview = false;
+    tooltipPosition: IqserTooltipPosition;
 
     constructor(
         readonly permissionsService: PermissionsService,
@@ -74,22 +77,6 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
         super();
     }
 
-    get isDossierOverviewList(): boolean {
-        return this.type === 'dossier-overview-list';
-    }
-
-    get isDossierOverviewWorkflow(): boolean {
-        return this.type === 'dossier-overview-workflow';
-    }
-
-    get isFilePreview(): boolean {
-        return this.type === 'file-preview';
-    }
-
-    get isDossierOverview(): boolean {
-        return this.type.startsWith('dossier-overview-list');
-    }
-
     private get _toggleTooltip(): string {
         if (!this.currentUser.isManager) {
             return _('file-preview.toggle-analysis.only-managers');
@@ -98,19 +85,8 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
         return this.file?.excluded ? _('file-preview.toggle-analysis.enable') : _('file-preview.toggle-analysis.disable');
     }
 
-    ngOnInit(): void {
-        if (!this.file) {
-            this.file = this.appStateService.activeFile;
-        }
-        this._setup();
-        this.addSubscription = this.appStateService.fileChanged$.pipe(filter(file => file.fileId === this.file?.fileId)).subscribe(file => {
-            this.file = file;
-            this._setup();
-        });
-
-        this.addSubscription = this.dossiersService.entityChanged$.subscribe(() => {
-            this._setup();
-        });
+    ngOnChanges() {
+        this.setup();
     }
 
     toggleViewDocumentInfo() {
@@ -141,7 +117,7 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
                     .catch(error => {
                         this._toaster.error(_('error.http.generic'), { params: error });
                     });
-                await this.appStateService.reloadActiveDossierFiles();
+                await this.appStateService.reloadDossierFiles(this.file.dossierId);
                 this.actionPerformed.emit('delete');
                 this._loadingService.stop();
             },
@@ -160,7 +136,7 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
         $event.stopPropagation();
 
         await this._fileActionService.assignToMe([this.file], () => {
-            this.reloadDossiers('reanalyse');
+            this.reloadFiles('reanalyse');
         });
     }
 
@@ -169,45 +145,45 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
             $event.stopPropagation();
         }
         this.addSubscription = this._fileActionService.reanalyseFile(this.file).subscribe(() => {
-            this.reloadDossiers('reanalyse');
+            this.reloadFiles('reanalyse');
         });
     }
 
     async setFileUnderApproval($event: MouseEvent) {
         $event.stopPropagation();
-        if (this.dossiersService.activeDossier.approverIds.length > 1) {
-            await this._fileActionService.assignFile('approver', $event, this.file, () => this.reloadDossiers('assign-reviewer'), true);
+        const dossier = this.dossiersService.find(this.file.dossierId);
+        if (dossier.approverIds.length > 1) {
+            await this._fileActionService.assignFile('approver', $event, this.file, () => this.reloadFiles('assign-reviewer'), true);
         } else {
-            this.addSubscription = this._fileActionService.setFilesUnderApproval([this.file]).subscribe(() => {
-                this.reloadDossiers('set-under-approval');
-            });
+            await this._fileActionService.setFilesUnderApproval([this.file]).toPromise();
+            this.reloadFiles('set-under-approval');
         }
     }
 
-    setFileApproved($event: MouseEvent) {
+    async setFileApproved($event: MouseEvent) {
         $event.stopPropagation();
-        if (this.file.hasUpdates) {
-            this._dialogService.openDialog(
-                'confirm',
-                $event,
-                new ConfirmationDialogInput({
-                    title: _('confirmation-dialog.approve-file.title'),
-                    question: _('confirmation-dialog.approve-file.question'),
-                }),
-                () => {
-                    this._setFileApproved();
-                },
-            );
-        } else {
-            this._setFileApproved();
+        if (!this.file.hasUpdates) {
+            await this._setFileApproved();
+            return;
         }
+
+        this._dialogService.openDialog(
+            'confirm',
+            $event,
+            new ConfirmationDialogInput({
+                title: _('confirmation-dialog.approve-file.title'),
+                question: _('confirmation-dialog.approve-file.question'),
+            }),
+            async () => {
+                await this._setFileApproved();
+            },
+        );
     }
 
-    ocrFile($event: MouseEvent) {
+    async ocrFile($event: MouseEvent) {
         $event.stopPropagation();
-        this.addSubscription = this._fileActionService.ocrFiles([this.file]).subscribe(() => {
-            this.reloadDossiers('ocr-file');
-        });
+        await this._fileActionService.ocrFiles([this.file]).toPromise();
+        this.reloadFiles('ocr-file');
     }
 
     async setFileUnderReview($event: MouseEvent, ignoreDialogChanges = false) {
@@ -215,42 +191,35 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
             'reviewer',
             $event,
             this.file,
-            () => this.reloadDossiers('assign-reviewer'),
+            () => this.reloadFiles('assign-reviewer'),
             ignoreDialogChanges,
         );
     }
 
-    reloadDossiers(action: string) {
-        this.appStateService.getFiles().then(() => {
+    reloadFiles(action: string) {
+        this.appStateService.getFiles(this.dossiersService.find(this.file.dossierId)).then(() => {
             this.actionPerformed.emit(action);
         });
     }
 
     async toggleAnalysis() {
         await this._fileActionService.toggleAnalysis(this.file).toPromise();
-        await this.appStateService.getFiles();
+        await this.appStateService.getFiles(this.dossiersService.find(this.file.dossierId));
         this.actionPerformed.emit(this.file?.excluded ? 'enable-analysis' : 'disable-analysis');
     }
 
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes.file) {
-            this._setup();
-        }
-    }
-
     forceReanalysisAction($event: LongPressEvent) {
         this.analysisForced = !$event.touchEnd && this._userPreferenceService.areDevFeaturesEnabled;
     }
 
-    private _setFileApproved() {
-        this.addSubscription = this._fileActionService.setFilesApproved([this.file]).subscribe(() => {
-            this.reloadDossiers('set-approved');
-        });
-    }
+    setup() {
+        this.isDossierOverview = this.type.startsWith('dossier-overview-list');
+        this.isDossierOverviewList = this.type === 'dossier-overview-list';
+        this.isDossierOverviewWorkflow = this.type === 'dossier-overview-workflow';
+        this.isFilePreview = this.type === 'file-preview';
 
-    private _setup() {
-        this.statusBarConfig = [{ color: this.file.status, length: 1 }];
         this.tooltipPosition = this.isFilePreview ? 'below' : 'above';
+
         this.assignTooltip = this.file.isUnderApproval ? _('dossier-overview.assign-approver') : _('dossier-overview.assign-reviewer');
         this.buttonType = this.isFilePreview ? CircleButtonTypes.default : CircleButtonTypes.dark;
         this.toggleTooltip = this._toggleTooltip;
@@ -265,7 +234,7 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
         this.showOCR = this.file.canBeOCRed;
         this.canReanalyse = this.permissionsService.canReanalyseFile(this.file);
 
-        this.showStatusBar = this.file.isWorkable && this.isDossierOverviewList;
+        this.showStatusBar = !this.file.isError && !this.file.isPending && this.isDossierOverviewList;
 
         this.showAssignToSelf = this.permissionsService.canAssignToSelf(this.file) && this.isDossierOverview;
         this.showAssign =
@@ -277,4 +246,9 @@ export class FileActionsComponent extends AutoUnsubscribe implements OnInit, OnD
         this.showExcludePages = this.isFilePreview;
         this.showDocumentInfo = this.isFilePreview;
     }
+
+    private async _setFileApproved() {
+        await this._fileActionService.setFilesApproved([this.file]).toPromise();
+        this.reloadFiles('set-approved');
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.html b/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.html
deleted file mode 100644
index 26af32665..000000000
--- a/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.html
+++ /dev/null
@@ -1,19 +0,0 @@
-

-    
-    
-    
-    
-    
-    
-    
-

diff --git a/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts b/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts
deleted file mode 100644
index 847c1e6c1..000000000
--- a/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { AppStateService } from '@state/app-state.service';
-import { Dossier, File } from '@red/domain';
-
-@Component({
-    selector: 'redaction-needs-work-badge',
-    templateUrl: './needs-work-badge.component.html',
-    styleUrls: ['./needs-work-badge.component.scss'],
-})
-export class NeedsWorkBadgeComponent {
-    @Input() needsWorkInput: File | Dossier;
-
-    constructor(private readonly _appStateService: AppStateService) {}
-
-    get suggestionColor() {
-        return this._getDictionaryColor('suggestion');
-    }
-
-    get imageColor() {
-        return this._getDictionaryColor('image');
-    }
-
-    get updatedColor() {
-        return this._getDictionaryColor('updated');
-    }
-
-    get analysisColor() {
-        return this._getDictionaryColor('analysis');
-    }
-
-    get hintColor() {
-        return this._getDictionaryColor('hint');
-    }
-
-    get redactionColor() {
-        return this._getDictionaryColor('redaction');
-    }
-
-    get hasImages() {
-        return this.needsWorkInput instanceof File && this.needsWorkInput.hasImages;
-    }
-
-    get hasUpdates() {
-        return this.needsWorkInput instanceof File && this.needsWorkInput.hasUpdates;
-    }
-
-    get hasAnnotationComments(): boolean {
-        return this.needsWorkInput instanceof File && ( this.needsWorkInput).hasAnnotationComments;
-    }
-
-    reanalysisRequired() {
-        if (this.needsWorkInput instanceof Dossier) {
-            return this.needsWorkInput.reanalysisRequired;
-        } else {
-            return this.needsWorkInput.analysisRequired;
-        }
-    }
-
-    private _getDictionaryColor(type: string) {
-        return this._appStateService.getDictionaryColor(type);
-    }
-}
diff --git a/apps/red-ui/src/app/modules/dossier/shared/services/file-action.service.ts b/apps/red-ui/src/app/modules/dossier/shared/services/file-action.service.ts
index 882121e1c..7e96dfea8 100644
--- a/apps/red-ui/src/app/modules/dossier/shared/services/file-action.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/shared/services/file-action.service.ts
@@ -1,8 +1,6 @@
 import { Injectable } from '@angular/core';
-import { AppStateService } from '@state/app-state.service';
 import { UserService } from '@services/user.service';
-import { File } from '@red/domain';
-import { PermissionsService } from '@services/permissions.service';
+import { Dossier, File } from '@red/domain';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FilesService } from '@services/entity-services/files.service';
@@ -14,25 +12,22 @@ import { ReanalysisService } from '@services/reanalysis.service';
 export class FileActionService {
     constructor(
         private readonly _dialogService: DossiersDialogService,
-        private readonly _permissionsService: PermissionsService,
         private readonly _userService: UserService,
-        private readonly _fileService: FilesService,
-        private readonly _reanalysisService: ReanalysisService,
-        private readonly _appStateService: AppStateService,
-        private readonly _dossiersService: DossiersService,
         private readonly _filesService: FilesService,
+        private readonly _reanalysisService: ReanalysisService,
+        private readonly _dossiersService: DossiersService,
         private readonly _toaster: Toaster,
     ) {}
 
-    reanalyseFile(file = this._appStateService.activeFile) {
-        return this._reanalysisService.reanalyzeFilesForDossier([file.fileId], this._dossiersService.activeDossier.id, true);
+    reanalyseFile(file: File) {
+        return this._reanalysisService.reanalyzeFilesForDossier([file.fileId], file.dossierId, true);
     }
 
-    toggleAnalysis(file = this._appStateService.activeFile) {
+    toggleAnalysis(file: File) {
         return this._reanalysisService.toggleAnalysis(file.dossierId, file.fileId, !file.excluded);
     }
 
-    async assignToMe(files?: File[], callback?: Function) {
+    async assignToMe(files: File[], callback?: Function) {
         return new Promise((resolve, reject) => {
             const atLeastOneFileHasReviewer = files.reduce((acc, fs) => acc || !!fs.currentReviewer, false);
             if (atLeastOneFileHasReviewer) {
@@ -54,57 +49,54 @@ export class FileActionService {
     }
 
     setFilesUnderApproval(files: File[], approverId?: string) {
+        const dossier = this._getDossier(files[0]);
+
         if (!approverId) {
-            approverId = this._dossiersService.activeDossier.approverIds[0];
+            approverId = dossier.approverIds[0];
         }
 
-        return this._fileService.setUnderApprovalFor(
+        return this._filesService.setUnderApprovalFor(
             files.map(f => f.fileId),
-            this._dossiersService.activeDossierId,
+            dossier.id,
             approverId,
         );
     }
 
     setFilesApproved(files: File[]) {
-        return this._fileService.setApprovedFor(
+        return this._filesService.setApprovedFor(
             files.map(f => f.fileId),
-            this._dossiersService.activeDossierId,
+            files[0].dossierId,
         );
     }
 
     setFilesUnderReview(files: File[]) {
-        return this._fileService.setUnderReviewFor(
+        return this._filesService.setUnderReviewFor(
             files.map(f => f.fileId),
-            this._dossiersService.activeDossierId,
+            files[0].dossierId,
         );
     }
 
     ocrFiles(files: File[]) {
         return this._reanalysisService.ocrFiles(
             files.map(f => f.fileId),
-            this._dossiersService.activeDossierId,
+            files[0].dossierId,
         );
     }
 
-    async assignFile(
-        mode: 'reviewer' | 'approver',
-        $event: MouseEvent,
-        file = this._appStateService.activeFile,
-        callback?: Function,
-        ignoreChanged = false,
-    ) {
+    async assignFile(mode: 'reviewer' | 'approver', $event: MouseEvent, file: File, callback?: Function, ignoreChanged = false) {
         $event?.stopPropagation();
 
         const currentUserId = this._userService.currentUser.id;
-        const eligibleUsersIds = this._getUserIds(mode);
+        const currentDossier = this._dossiersService.find(file.dossierId);
+        const eligibleUsersIds = this._getUserIds(mode, currentDossier);
 
         if (file.isUnassigned) {
-            await this._assignFile(currentUserId, mode, file, callback);
+            await this._assignFile(currentUserId, mode, [file], callback);
         } else if (file.currentReviewer === currentUserId) {
             if (eligibleUsersIds.includes(currentUserId)) {
-                await this._assignFile(currentUserId, mode, file, callback);
+                await this._assignFile(currentUserId, mode, [file], callback);
             } else if (eligibleUsersIds.length === 1) {
-                await this._assignFile(eligibleUsersIds[0], mode, file, callback);
+                await this._assignFile(eligibleUsersIds[0], mode, [file], callback);
             } else {
                 const files = [file];
                 this._dialogService.openDialog('assignFile', null, { mode, files, ignoreChanged }, async () => {
@@ -115,7 +107,7 @@ export class FileActionService {
             }
         } else {
             if (eligibleUsersIds.length === 1) {
-                await this._assignFile(eligibleUsersIds[0], mode, file, callback);
+                await this._assignFile(eligibleUsersIds[0], mode, [file], callback);
             } else {
                 const files = [file];
                 this._dialogService.openDialog(
@@ -132,21 +124,25 @@ export class FileActionService {
         }
     }
 
-    private async _assignFile(userId: string, mode: 'reviewer' | 'approver', file: File, callback?: Function) {
+    private _getDossier(file: File): Dossier {
+        return this._dossiersService.find(file.dossierId);
+    }
+
+    private async _assignFile(userId: string, mode: 'reviewer' | 'approver', files: File[], callback?: Function) {
         try {
             if (mode === 'reviewer') {
                 await this._filesService
                     .setReviewerFor(
-                        [file].map(f => f.fileId),
-                        this._dossiersService.activeDossierId,
+                        files.map(f => f.fileId),
+                        files[0].dossierId,
                         userId,
                     )
                     .toPromise();
             } else {
                 await this._filesService
                     .setUnderApprovalFor(
-                        [file].map(f => f.fileId),
-                        this._dossiersService.activeDossierId,
+                        files.map(f => f.fileId),
+                        files[0].dossierId,
                         userId,
                     )
                     .toPromise();
@@ -160,15 +156,15 @@ export class FileActionService {
         }
     }
 
-    private _getUserIds(mode: 'reviewer' | 'approver') {
-        return mode === 'approver' ? this._dossiersService.activeDossier.approverIds : this._dossiersService.activeDossier.memberIds;
+    private _getUserIds(mode: 'reviewer' | 'approver', dossier: Dossier) {
+        return mode === 'approver' ? dossier.approverIds : dossier.memberIds;
     }
 
     private async _assignReviewerToCurrentUser(files: File[], callback?: Function) {
-        await this._fileService
+        await this._filesService
             .setReviewerFor(
                 files.map(f => f.fileId),
-                this._dossiersService.activeDossierId,
+                files[0].dossierId,
                 this._userService.currentUser.id,
             )
             .toPromise();
diff --git a/apps/red-ui/src/app/modules/dossier/shared/services/platform-search.service.ts b/apps/red-ui/src/app/modules/dossier/shared/services/platform-search.service.ts
index 1eb744b27..4ca679922 100644
--- a/apps/red-ui/src/app/modules/dossier/shared/services/platform-search.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/shared/services/platform-search.service.ts
@@ -1,14 +1,53 @@
 import { Injectable, Injector } from '@angular/core';
 import { GenericService } from '@iqser/common-ui';
-import { ISearchRequest, ISearchResponse } from '@red/domain';
+import { IMatchedDocument, ISearchInput, ISearchRequest, ISearchResponse } from '@red/domain';
+import { Observable, of, zip } from 'rxjs';
+import { mapTo, switchMap } from 'rxjs/operators';
+import { AppStateService } from '@state/app-state.service';
+import { DossiersService } from '@services/entity-services/dossiers.service';
+import { FilesMapService } from '@services/entity-services/files-map.service';
 
 @Injectable()
 export class PlatformSearchService extends GenericService {
-    constructor(protected readonly _injector: Injector) {
+    constructor(
+        protected readonly _injector: Injector,
+        private readonly _appStateService: AppStateService,
+        private readonly _dossiersService: DossiersService,
+        private readonly _filesMapService: FilesMapService,
+    ) {
         super(_injector, 'search');
     }
 
-    search(body: ISearchRequest) {
-        return this._post(body);
+    search({ dossierIds, query }: ISearchInput): Observable {
+        if (!query) {
+            return of({
+                matchedDocuments: [],
+                total: 0,
+            });
+        }
+
+        const body: ISearchRequest = {
+            dossierIds,
+            queryString: query ?? '',
+            page: 1,
+            returnSections: false,
+            pageSize: 300,
+        };
+
+        return this._post(body).pipe(switchMap(searchValue => this._loadMissingFiles$(searchValue)));
+    }
+
+    private _loadMissingFiles$(searchResponse: ISearchResponse): Observable {
+        const documentsOfActiveDossiers = searchResponse.matchedDocuments.filter(document => this._dossiersService.has(document.dossierId));
+        const fileNotLoaded = ({ dossierId, fileId }: IMatchedDocument) => !this._filesMapService.get(dossierId, fileId);
+        const dossiersWithNotLoadedFiles = documentsOfActiveDossiers.filter(fileNotLoaded).map(document => document.dossierId);
+
+        const dossierIds = Array.from(new Set(dossiersWithNotLoadedFiles));
+        return dossierIds.length ? this._loadFilesFor$(dossierIds).pipe(mapTo(searchResponse)) : of(searchResponse);
+    }
+
+    private _loadFilesFor$(dossierIds: string[]) {
+        const dossiers = dossierIds.map(dossierId => this._dossiersService.find(dossierId));
+        return zip(...dossiers.map(dossier => this._appStateService.getFiles(dossier)));
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts b/apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts
index 2691d256e..4645adce4 100644
--- a/apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts
@@ -2,11 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FileActionService } from './services/file-action.service';
 import { FileActionsComponent } from './components/file-actions/file-actions.component';
-import { NeedsWorkBadgeComponent } from './components/needs-work-badge/needs-work-badge.component';
 import { IqserIconsModule } from '@iqser/common-ui';
 import { SharedModule } from '@shared/shared.module';
 
-const components = [FileActionsComponent, NeedsWorkBadgeComponent];
+const components = [FileActionsComponent];
 
 @NgModule({
     declarations: [...components],
diff --git a/apps/red-ui/src/app/modules/dossier/translations/file-status-translations.ts b/apps/red-ui/src/app/modules/dossier/translations/file-status-translations.ts
index 4d01b3ed2..d8cc442a4 100644
--- a/apps/red-ui/src/app/modules/dossier/translations/file-status-translations.ts
+++ b/apps/red-ui/src/app/modules/dossier/translations/file-status-translations.ts
@@ -1,18 +1,21 @@
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { FileStatus } from '@red/domain';
+import { ProcessingFileStatus, WorkflowFileStatus } from '@red/domain';
 
-export const fileStatusTranslations: { [key in FileStatus]: string } = {
+export const workflowFileStatusTranslations: { [key in WorkflowFileStatus]: string } = {
     APPROVED: _('file-status.approved'),
+    UNASSIGNED: _('file-status.unassigned'),
+    UNDER_APPROVAL: _('file-status.under-approval'),
+    UNDER_REVIEW: _('file-status.under-review'),
+};
+
+export const processingFileStatusTranslations: { [key in ProcessingFileStatus]: string } = {
+    PROCESSED: _('file-status.processed'),
     DELETED: _('file-status.deleted'),
     ERROR: _('file-status.error'),
-    EXCLUDED: _('file-status.excluded'),
     FULLREPROCESS: _('file-status.full-reprocess'),
     INDEXING: _('file-status.indexing'),
     OCR_PROCESSING: _('file-status.ocr-processing'),
     PROCESSING: _('file-status.processing'),
     REPROCESS: _('file-status.reprocess'),
-    UNASSIGNED: _('file-status.unassigned'),
-    UNDER_APPROVAL: _('file-status.under-approval'),
-    UNDER_REVIEW: _('file-status.under-review'),
     UNPROCESSED: _('file-status.unprocessed'),
 };
diff --git a/apps/red-ui/src/app/modules/dossier/utils/compare-mode.utils.ts b/apps/red-ui/src/app/modules/dossier/utils/compare-mode.utils.ts
index 3074b808b..06876a51b 100644
--- a/apps/red-ui/src/app/modules/dossier/utils/compare-mode.utils.ts
+++ b/apps/red-ui/src/app/modules/dossier/utils/compare-mode.utils.ts
@@ -1,34 +1,42 @@
 import { stampPDFPage } from '@utils/page-stamper';
+import { Core, WebViewerInstance } from '@pdftron/webviewer';
+import { File } from '@red/domain';
 
-const processPage = async (pageNumber, document1, document2, mergedDocument, pdfNet) => {
+const processPage = async (
+    pageNumber: number,
+    document1: Core.PDFNet.PDFDoc,
+    document2: Core.PDFNet.PDFDoc,
+    mergedDocument: Core.PDFNet.PDFDoc,
+    pdfNet: typeof Core.PDFNet,
+) => {
     const document1PageCount = await document1.getPageCount();
+
     if (document1PageCount >= pageNumber) {
         await mergedDocument.insertPages(pageNumber * 2, document1, pageNumber, pageNumber, pdfNet.PDFDoc.InsertFlag.e_none);
-    } else {
-        const pageToCopy = await document2.getPage(pageNumber);
-        const blankPage = await mergedDocument.pageCreate(await pageToCopy.getCropBox());
-        await blankPage.setRotation(await pageToCopy.getRotation());
-        await mergedDocument.pagePushBack(blankPage);
-        await stampPDFPage(mergedDocument, pdfNet, '<< Compare Placeholder Page >>', 20, 'courier', 'DIAGONAL', 33, '#ffb83b', [
-            await mergedDocument.getPageCount(),
-        ]);
+        return;
     }
+
+    const pageToCopy = await document2.getPage(pageNumber);
+    const blankPage = await mergedDocument.pageCreate(await pageToCopy.getCropBox());
+    await blankPage.setRotation(await pageToCopy.getRotation());
+    await mergedDocument.pagePushBack(blankPage);
+    await stampPDFPage(mergedDocument, pdfNet, '<< Compare Placeholder Page >>', 20, 'courier', 'DIAGONAL', 33, '#ffb83b', [
+        await mergedDocument.getPageCount(),
+    ]);
 };
 
 export const loadCompareDocumentWrapper = async (
-    currentDocumentPageCount,
-    compareDocumentPageCount,
-    currentDocument,
-    compareDocument,
-    mergedDocument,
-    instance,
-    file,
+    currentDocument: Core.PDFNet.PDFDoc,
+    compareDocument: Core.PDFNet.PDFDoc,
+    mergedDocument: Core.PDFNet.PDFDoc,
+    instance: WebViewerInstance,
+    file: File,
     setCompareViewMode: () => void,
     navigateToPage: () => void,
-    pdfNet: any,
+    pdfNet: typeof Core.PDFNet,
 ) => {
     try {
-        const maxPageCount = Math.max(currentDocumentPageCount, compareDocumentPageCount);
+        const maxPageCount = Math.max(await currentDocument.getPageCount(), await compareDocument.getPageCount());
 
         for (let idx = 1; idx <= maxPageCount; idx++) {
             await processPage(idx, currentDocument, compareDocument, mergedDocument, pdfNet);
@@ -43,11 +51,11 @@ export const loadCompareDocumentWrapper = async (
 
         setCompareViewMode();
 
-        instance.loadDocument(mergedDocumentBuffer, {
+        instance.UI.loadDocument(mergedDocumentBuffer, {
             filename: file?.filename ?? 'document.pdf',
         });
-        instance.disableElements(['compareButton']);
-        instance.enableElements(['closeCompareButton']);
+        instance.UI.disableElements(['compareButton']);
+        instance.UI.enableElements(['closeCompareButton']);
 
         navigateToPage();
     } catch (e) {
diff --git a/apps/red-ui/src/app/modules/dossier/utils/pdf-calculation.utils.ts b/apps/red-ui/src/app/modules/dossier/utils/pdf-calculation.utils.ts
new file mode 100644
index 000000000..7d53d0a12
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/utils/pdf-calculation.utils.ts
@@ -0,0 +1,18 @@
+import { IRectangle } from '@red/domain';
+
+export const toPosition = (
+    page: number,
+    pageHeight: number,
+    selectedQuad: { x1: number; x2: number; x3: number; x4: number; y4: number; y2: number },
+): IRectangle => {
+    const height = selectedQuad.y2 - selectedQuad.y4;
+    return {
+        page: page,
+        topLeft: {
+            x: Math.min(selectedQuad.x3, selectedQuad.x4, selectedQuad.x2, selectedQuad.x1),
+            y: pageHeight - (selectedQuad.y4 + height),
+        },
+        height: height,
+        width: Math.max(4, Math.abs(selectedQuad.x3 - selectedQuad.x4), Math.abs(selectedQuad.x3 - selectedQuad.x1)),
+    };
+};
diff --git a/apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts b/apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts
index 224d58bf2..1146630af 100644
--- a/apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts
+++ b/apps/red-ui/src/app/modules/dossier/utils/pdf-viewer.utils.ts
@@ -1,4 +1,4 @@
-import { IRectangle, ViewMode } from '@red/domain';
+import { ViewMode } from '@red/domain';
 import { translateQuads } from '@utils/pdf-coordinates';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { Core, WebViewerInstance } from '@pdftron/webviewer';
@@ -120,20 +120,6 @@ export class PdfViewerUtils {
         return translateQuads(page, rotation, quads);
     }
 
-    toPosition(page: number, selectedQuad: { x1: number; x2: number; x3: number; x4: number; y4: number; y2: number }): IRectangle {
-        const pageHeight = this._documentViewer.getPageHeight(page);
-        const height = selectedQuad.y2 - selectedQuad.y4;
-        return {
-            page: page,
-            topLeft: {
-                x: Math.min(selectedQuad.x3, selectedQuad.x4, selectedQuad.x2, selectedQuad.x1),
-                y: pageHeight - (selectedQuad.y4 + height),
-            },
-            height: height,
-            width: Math.max(4, Math.abs(selectedQuad.x3 - selectedQuad.x4), Math.abs(selectedQuad.x3 - selectedQuad.x1)),
-        };
-    }
-
     deselectAllAnnotations() {
         this._annotationManager.deselectAllAnnotations();
     }
diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts
index 73a9cfcff..2448bfd6a 100644
--- a/apps/red-ui/src/app/modules/icons/icons.module.ts
+++ b/apps/red-ui/src/app/modules/icons/icons.module.ts
@@ -12,7 +12,6 @@ export class IconsModule {
     constructor(private readonly _iconRegistry: MatIconRegistry, private readonly _sanitizer: DomSanitizer) {
         const icons = [
             'ai',
-            'analyse',
             'approved',
             'arrow-up',
             'assign',
@@ -29,6 +28,7 @@ export class IconsModule {
             'enter',
             'entries',
             'exclude-pages',
+            'excluded-page',
             'exit-fullscreen',
             'folder',
             'fullscreen',
@@ -48,9 +48,11 @@ export class IconsModule {
             'put-back',
             'read-only',
             'ready-for-approval',
+            'reanalyse',
             'reason',
             'remove-from-dict',
             'report',
+            'resize',
             'rule',
             'secret',
             'status',
diff --git a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
index 2dad2d4e3..50fd141f2 100644
--- a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
@@ -12,6 +12,7 @@
 
     ;
     @Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above';
     @Input() type: CircleButtonType = CircleButtonTypes.default;
@@ -27,9 +26,7 @@ export class FileDownloadBtnComponent extends AutoUnsubscribe implements OnDestr
         private readonly _fileDownloadService: FileDownloadService,
         private readonly _toaster: Toaster,
         private readonly _translateService: TranslateService,
-    ) {
-        super();
-    }
+    ) {}
 
     get canDownloadFiles() {
         return this.files.length > 0 && this.files.reduce((acc, file) => acc && this._permissionsService.canDownloadFiles(file), true);
@@ -41,13 +38,11 @@ export class FileDownloadBtnComponent extends AutoUnsubscribe implements OnDestr
             : this._translateService.instant('dossier-overview.download-file-disabled', { count: this.files.length });
     }
 
-    downloadFiles($event: MouseEvent) {
+    async downloadFiles($event: MouseEvent) {
         $event.stopPropagation();
-        this.addSubscription = this._fileDownloadService
-            .downloadFiles(
-                this.files.map(f => f.fileId),
-                this.dossier.dossierId,
-            )
-            .subscribe(() => this._toaster.info(_('download-status.queued')));
+        const dossierId = this.files[0].dossierId;
+        const filesIds = this.files.map(f => f.fileId);
+        await this._fileDownloadService.downloadFiles(filesIds, dossierId).toPromise();
+        this._toaster.info(_('download-status.queued'));
     }
 }
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
index 9daa1733e..43a61d1f5 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
@@ -111,7 +111,7 @@ export class DictionaryManagerComponent implements OnChanges {
         }
 
         this._dictionaryService
-            .getFor(this._dictionary.dossierTemplateId, this._dictionary.type)
+            .getForType(this._dictionary.dossierTemplateId, this._dictionary.type)
             .pipe(
                 tap(values => (this._dictionary.entries = [...values.entries] ?? [])),
                 catchError(() => {
@@ -206,7 +206,7 @@ export class DictionaryManagerComponent implements OnChanges {
     }
 
     private _onDossierChanged(dossierTemplateId: string, dossierId?: string, type = 'dossier_redaction'): Observable {
-        const dictionary$ = this._dictionaryService.getFor(dossierTemplateId, type, dossierId);
+        const dictionary$ = this._dictionaryService.getForType(dossierTemplateId, type, dossierId);
 
         return dictionary$.pipe(map(data => this._toString([...data.entries])));
     }
diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html
index 4834d2b2a..dc7e0038e 100644
--- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html
@@ -1,5 +1,6 @@
 
diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss
index 7707ea433..862b53102 100644
--- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.scss
@@ -4,3 +4,17 @@ ngx-monaco-editor {
     height: 100%;
     width: 100%;
 }
+
+%arrow {
+    border: solid var(--iqser-grey-1);
+    border-width: 2px 0 0 2px;
+    height: 4px !important;
+    width: 4px !important;
+}
+
+::ng-deep ngx-monaco-diff-editor .arrow-left {
+    @extend %arrow;
+    transform: translate(6px, 6px) rotate(-45deg);
+    cursor: pointer;
+    z-index: 1;
+}
diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
index a30b2322c..29526bf6e 100644
--- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
@@ -1,68 +1,74 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
-import { Debounce, List } from '@iqser/common-ui';
+import { Component, Input, OnInit } from '@angular/core';
+import { Debounce, List, OnChange } from '@iqser/common-ui';
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IDiffEditor = monaco.editor.IDiffEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
+import ILineChange = monaco.editor.ILineChange;
+import IEditorMouseEvent = monaco.editor.IEditorMouseEvent;
 
 const MIN_WORD_LENGTH = 2;
+const lineChangeToDecoration = ({ originalEndLineNumber, originalStartLineNumber }: ILineChange) =>
+    ({
+        range: new monaco.Range(originalStartLineNumber, 1, originalEndLineNumber, 1),
+        options: {
+            glyphMarginClassName: 'arrow-left',
+            isWholeLine: true,
+        },
+    } as IModelDeltaDecoration);
+const isPositive = (lineChange: ILineChange) => lineChange.originalEndLineNumber - lineChange.originalStartLineNumber >= 0;
+const notZero = (lineChange: ILineChange) => lineChange.originalEndLineNumber !== 0 && lineChange.originalStartLineNumber !== 0;
 
 @Component({
     selector: 'redaction-editor',
     templateUrl: './editor.component.html',
     styleUrls: ['./editor.component.scss'],
 })
-export class EditorComponent implements OnInit, OnChanges {
-    editorOptions: IStandaloneEditorConstructionOptions = {};
+export class EditorComponent implements OnInit {
     @Input() showDiffEditor = false;
-    @Input() initialEntries: List;
+    @Input() diffEditorText: string;
+    @Input() @OnChange('revert') initialEntries: List;
     @Input() canEdit = false;
-    currentEntries: string[] = [];
+
+    /** Used as [modified] input on diff editor, shouldn't be updated when editing in diff editor. */ diffValue: string;
+    editorOptions: IStandaloneEditorConstructionOptions = {};
     codeEditor: ICodeEditor;
-    diffEditor: IDiffEditor;
+    value: string;
+    private _diffEditor: IDiffEditor;
     private _decorations: string[] = [];
-    _diffEditorText = '';
 
-    get diffEditorText() {
-        return this._diffEditorText;
-    }
-
-    @Input()
-    set diffEditorText(value: string) {
-        this._diffEditorText = value;
-        this.diffEditor?.getOriginalEditor().setValue(value);
-    }
-
-    get value(): string {
-        return this.currentEntries.join('\n');
-    }
-
-    set value(text: string) {
-        this.currentEntries = text.split('\n');
-        this.codeEditorTextChanged();
+    get currentEntries(): string[] {
+        return this.value.split('\n');
     }
 
     get hasChanges(): boolean {
         return this.currentEntries.toString() !== this.initialEntries.toString();
     }
 
+    private get _currentEntriesCount(): number {
+        return this.currentEntries.length;
+    }
+
     ngOnInit(): void {
-        this.currentEntries = [...this.initialEntries];
+        this.revert();
 
         this.editorOptions = {
             theme: 'vs',
             language: 'text/plain',
+            glyphMargin: true,
             automaticLayout: true,
             readOnly: !this.canEdit,
         };
     }
 
-    ngOnChanges() {
-        this.revert();
-    }
-
     onDiffEditorInit(editor: IDiffEditor): void {
-        this.diffEditor = editor;
+        this._diffEditor = editor;
+        this.codeEditor = editor.getModifiedEditor();
+        this._addMarginButtons();
+        this._diffEditor.getOriginalEditor().onMouseDown(event => this._handleMarginButtonClick(event));
+        this._diffEditor.getModifiedEditor().onDidChangeModelContent(() => {
+            this.value = this._diffEditor.getModel().modified.getValue();
+        });
     }
 
     onCodeEditorInit(editor: ICodeEditor): void {
@@ -81,12 +87,53 @@ export class EditorComponent implements OnInit, OnChanges {
     @Debounce()
     codeEditorTextChanged() {
         const newDecorations = this.currentEntries.filter(entry => this._isNew(entry)).map(entry => this._getDecoration(entry));
-
         this._decorations = this.codeEditor.deltaDecorations(this._decorations, newDecorations);
+        this.diffValue = this.value;
     }
 
     revert() {
-        this.currentEntries = [...this.initialEntries];
+        this.value = this.initialEntries.join('\n');
+        this.diffValue = this.value;
+        this._diffEditor?.getModifiedEditor().setValue(this.diffValue);
+    }
+
+    private _handleMarginButtonClick(event: IEditorMouseEvent) {
+        const isNotMarginButtonClick = event.target.position.column !== 1;
+        if (isNotMarginButtonClick) {
+            return;
+        }
+        this._addContentFromOriginalAtLine(event.target.position.lineNumber);
+    }
+
+    private _addContentFromOriginalAtLine(lineNumber: number) {
+        const lineContent = this._diffEditor.getOriginalEditor().getModel().getLineContent(lineNumber) + '\n';
+        const lineChanges = this._diffEditor.getLineChanges();
+        let targetLineNumber = lineNumber;
+        for (const lineChange of lineChanges) {
+            const { originalStartLineNumber, originalEndLineNumber, modifiedStartLineNumber } = lineChange;
+            if (originalStartLineNumber <= lineNumber && originalEndLineNumber >= lineNumber) {
+                targetLineNumber = modifiedStartLineNumber + 1;
+                break;
+            }
+        }
+        const prefix =
+            targetLineNumber > this._currentEntriesCount && this.currentEntries[this._currentEntriesCount - 1] !== '' ? '\n' : '';
+        const range = new monaco.Range(targetLineNumber, 1, targetLineNumber, 1);
+        this._diffEditor.getModifiedEditor().executeEdits(null, [{ range, text: prefix + lineContent, forceMoveMarkers: true }]);
+    }
+
+    private _addMarginButtons() {
+        let glyphDecorations = [];
+        this._diffEditor.onDidUpdateDiff(() => {
+            /**
+             * Sometimes diff editor thinks that there's a change that starts on a line greater than 0 and ends on line 0.
+             * We must get all change that started on a line and ended on the same or greater line
+             * Otherwise margin buttons will have an odd behaviour
+             */
+            const lineChanges = this._diffEditor.getLineChanges().filter(change => isPositive(change) && notZero(change));
+            const decorations = lineChanges.map(lineChangeToDecoration);
+            glyphDecorations = this._diffEditor.getOriginalEditor().deltaDecorations(glyphDecorations, decorations);
+        });
     }
 
     private _isNew(entry: string): boolean {
diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
index 20f99feb5..3d79a2c10 100644
--- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
@@ -59,7 +59,6 @@ export class InitialsAvatarComponent extends AutoUnsubscribe implements OnInit,
         if (this.color.includes('-')) {
             return this.color;
         }
-
         return `${this.color}-dark`;
     }
 
diff --git a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
index fb0477d48..8c5a1381e 100644
--- a/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/simple-doughnut-chart/simple-doughnut-chart.component.html
@@ -23,7 +23,7 @@
     

 
     

-        

+        

             

 

 

diff --git a/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.ts b/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.ts
index 7f1510892..47339744f 100644
--- a/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.ts
@@ -1,14 +1,15 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { AppStateService } from '@state/app-state.service';
-import { INestedFilter } from '@iqser/common-ui';
+import { INestedFilter, Required } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-type-filter',
     templateUrl: './type-filter.component.html',
     styleUrls: ['./type-filter.component.scss'],
 })
-export class TypeFilterComponent implements OnInit {
+export class TypeFilterComponent implements OnChanges {
     @Input() filter: INestedFilter;
+    @Input() @Required() dossierTemplateId!: string;
 
     dictionaryColor: string;
 
@@ -20,14 +21,7 @@ export class TypeFilterComponent implements OnInit {
         'suggestion-remove-dictionary',
         'suggestion-add-dictionary',
     ];
-    private _needsAnalysisKeys = [
-        'add-dictionary',
-        'remove-dictionary',
-        'remove-only-here',
-        'pending-analysis',
-        'change-legal-basis',
-        'analysis',
-    ];
+    private _needsAnalysisKeys = ['add-dictionary', 'remove-only-here', 'change-legal-basis', 'analysis'];
 
     constructor(private readonly _appStateService: AppStateService) {}
 
@@ -35,7 +29,7 @@ export class TypeFilterComponent implements OnInit {
 
     needsAnalysis = (key: string) => this._needsAnalysisKeys.includes(key);
 
-    ngOnInit(): void {
-        this.dictionaryColor = this._appStateService.getDictionaryColor(this.filter.id);
+    ngOnChanges(): void {
+        this.dictionaryColor = this._appStateService.getDictionaryColor(this.filter.id, this.dossierTemplateId);
     }
 }
diff --git a/apps/red-ui/src/app/modules/shared/services/dictionary.service.ts b/apps/red-ui/src/app/modules/shared/services/dictionary.service.ts
index 3e6aad186..5f953475a 100644
--- a/apps/red-ui/src/app/modules/shared/services/dictionary.service.ts
+++ b/apps/red-ui/src/app/modules/shared/services/dictionary.service.ts
@@ -19,7 +19,7 @@ export class DictionaryService extends EntitiesService
      * Retrieves all dictionary entries of an entry type
      */
     @Validate()
-    getFor(@RequiredParam() dossierTemplateId: string, @RequiredParam() type: string, dossierId?: string) {
+    getForType(@RequiredParam() dossierTemplateId: string, @RequiredParam() type: string, dossierId?: string) {
         const queryParams = dossierId ? [{ key: 'dossierId', value: dossierId }] : undefined;
         return this._getOne([type, dossierTemplateId], this._defaultModelPath, queryParams);
     }
diff --git a/apps/red-ui/src/app/modules/admin/services/watermark.service.ts b/apps/red-ui/src/app/modules/shared/services/watermark.service.ts
similarity index 95%
rename from apps/red-ui/src/app/modules/admin/services/watermark.service.ts
rename to apps/red-ui/src/app/modules/shared/services/watermark.service.ts
index de2805af5..aef6ef9bc 100644
--- a/apps/red-ui/src/app/modules/admin/services/watermark.service.ts
+++ b/apps/red-ui/src/app/modules/shared/services/watermark.service.ts
@@ -2,7 +2,9 @@ import { Injectable, Injector } from '@angular/core';
 import { GenericService, RequiredParam, Validate } from '@iqser/common-ui';
 import { IWatermark } from '@red/domain';
 
-@Injectable()
+@Injectable({
+    providedIn: 'root',
+})
 export class WatermarkService extends GenericService {
     constructor(protected readonly _injector: Injector) {
         super(_injector, 'watermark');
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index c98a54456..15067cdb9 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -56,6 +56,9 @@ const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, Rea
         {
             provide: MAT_DATE_FORMATS,
             useValue: {
+                parse: {
+                    dateInput: 'DD/MM/YY',
+                },
                 display: {
                     dateInput: 'DD/MM/YY',
                     monthYearLabel: 'YYYY',
diff --git a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.ts b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.ts
index 77826af5d..ca0b84888 100644
--- a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.ts
+++ b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.ts
@@ -1,13 +1,13 @@
-import { ChangeDetectorRef, Component, HostListener } from '@angular/core';
+import { ChangeDetectorRef, Component, HostListener, Inject } from '@angular/core';
 import { FileUploadService } from '../services/file-upload.service';
-import { FileUploadModel } from '../model/file-upload.model';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { StatusOverlayService } from '../services/status-overlay.service';
-import { handleFileDrop } from '@utils/file-drop-utils';
 import { DossiersService } from '@services/entity-services/dossiers.service';
+import { handleFileDrop } from '@utils/file-drop-utils';
+import { FileUploadModel } from '@upload-download/model/file-upload.model';
+import { DOSSIER_ID } from '../../../tokens';
 
 @Component({
-    selector: 'redaction-file-drop',
     templateUrl: './file-drop.component.html',
     styleUrls: ['./file-drop.component.scss'],
 })
@@ -18,6 +18,7 @@ export class FileDropComponent {
         private readonly _dossiersService: DossiersService,
         private readonly _changeDetectorRef: ChangeDetectorRef,
         private readonly _statusOverlayService: StatusOverlayService,
+        @Inject(DOSSIER_ID) private readonly _dossierId: string,
     ) {}
 
     close() {
@@ -33,7 +34,8 @@ export class FileDropComponent {
 
     @HostListener('drop', ['$event'])
     onDrop(event: DragEvent) {
-        handleFileDrop(event, this._dossiersService.activeDossier, this.uploadFiles.bind(this));
+        const dossier = this._dossiersService.find(this._dossierId);
+        handleFileDrop(event, dossier, this.uploadFiles.bind(this));
     }
 
     @HostListener('dragover', ['$event'])
@@ -43,11 +45,11 @@ export class FileDropComponent {
     }
 
     async uploadFiles(files: FileUploadModel[]) {
-        const fileCount = await this._fileUploadService.uploadFiles(files);
+        const fileCount = await this._fileUploadService.uploadFiles(files, this._dossierId);
         if (fileCount) {
             this._statusOverlayService.openUploadStatusOverlay();
         }
         this._dialogRef.detach();
-        this._changeDetectorRef.detectChanges();
+        this._changeDetectorRef.markForCheck();
     }
 }
diff --git a/apps/red-ui/src/app/modules/upload-download/services/file-download.service.ts b/apps/red-ui/src/app/modules/upload-download/services/file-download.service.ts
index 770411ec7..a9f4373ce 100644
--- a/apps/red-ui/src/app/modules/upload-download/services/file-download.service.ts
+++ b/apps/red-ui/src/app/modules/upload-download/services/file-download.service.ts
@@ -9,10 +9,10 @@ import {
 } from '@red/domain';
 import { interval, Observable } from 'rxjs';
 import { ConfigService } from '@services/config.service';
-import { map, mergeMap, tap } from 'rxjs/operators';
+import { filter, map, switchMapTo, tap, withLatestFrom } from 'rxjs/operators';
 import { KeycloakService } from 'keycloak-angular';
 import { UserService } from '@services/user.service';
-import { EntitiesService, List, RequiredParam, Validate } from '@iqser/common-ui';
+import { EntitiesService, List, mapEach, RequiredParam, Validate } from '@iqser/common-ui';
 
 @Injectable()
 export class FileDownloadService extends EntitiesService {
@@ -25,23 +25,25 @@ export class FileDownloadService extends EntitiesService {
-            if (_userService.currentUser.isUser) {
-                this.loadAll().subscribe(() => {});
-            }
-        });
+        interval(5000)
+            .pipe(
+                withLatestFrom(_userService.currentUser$),
+                filter(([, user]) => user.isUser),
+                switchMapTo(this.loadAll()),
+            )
+            .subscribe();
     }
 
-    downloadFiles(fileIds: List, dossierId: string): Observable {
+    downloadFiles(fileIds: List, dossierId: string): Observable {
         return this.prepareDownload({
             fileIds,
             dossierId,
-        }).pipe(mergeMap(() => this.loadAll()));
+        }).pipe(switchMapTo(this.loadAll()));
     }
 
     loadAll(): Observable {
         return this.getStatuses().pipe(
-            map(entities => entities.map(entity => new DownloadStatus(entity))),
+            mapEach(entity => new DownloadStatus(entity)),
             tap(entities => this.setEntities(entities)),
             tap(() => (this.hasPendingDownloads = !!this.all.find(f => !f.lastDownload && f.isReady))),
         );
diff --git a/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts b/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts
index 870081285..cc0a95a92 100644
--- a/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts
+++ b/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts
@@ -2,10 +2,12 @@ import { Injectable, Injector } from '@angular/core';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { FileDropComponent } from '../file-drop/file-drop.component';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { DOSSIER_ID } from '../../../tokens';
 
 @Injectable()
 export class FileDropOverlayService {
     private readonly _dropOverlayRef: OverlayRef;
+    private _dossierId: string;
 
     constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) {
         this._dropOverlayRef = this._overlay.create({
@@ -32,7 +34,8 @@ export class FileDropOverlayService {
         return false;
     };
 
-    initFileDropHandling() {
+    initFileDropHandling(dossierId: string) {
+        this._dossierId = dossierId;
         document.getElementsByTagName('body')[0].addEventListener('dragenter', this.dragEnter, false);
         document.getElementsByTagName('body')[0].addEventListener('dragleave', this.dragLeave, false);
     }
@@ -57,7 +60,10 @@ export class FileDropOverlayService {
 
     private _createInjector() {
         return Injector.create({
-            providers: [{ provide: OverlayRef, useValue: this._dropOverlayRef }],
+            providers: [
+                { provide: OverlayRef, useValue: this._dropOverlayRef },
+                { provide: DOSSIER_ID, useValue: this._dossierId },
+            ],
             parent: this._injector,
         });
     }
diff --git a/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts b/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
index 46d233762..880abbc58 100644
--- a/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
+++ b/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
@@ -1,15 +1,16 @@
-import { ApplicationRef, Injectable, Injector } from '@angular/core';
+import { ApplicationRef, Injectable, Injector, OnDestroy } from '@angular/core';
 import { FileUploadModel } from '../model/file-upload.model';
 import { AppStateService } from '@state/app-state.service';
 import { HttpErrorResponse, HttpEventType } from '@angular/common/http';
-import { interval, Subscription } from 'rxjs';
+import { interval, Subject, Subscription } from 'rxjs';
 import { ConfigService } from '@services/config.service';
 import { TranslateService } from '@ngx-translate/core';
 import { UploadDownloadDialogService } from './upload-download-dialog.service';
 import { IFileUploadResult } from '@red/domain';
 import { isCsv } from '@utils/file-drop-utils';
 import { ErrorMessageService, GenericService, HeadersConfiguration, RequiredParam, Validate } from '@iqser/common-ui';
-import { DossiersService } from '@services/entity-services/dossiers.service';
+import { FilesMapService } from '@services/entity-services/files-map.service';
+import { switchMap, tap, throttleTime } from 'rxjs/operators';
 
 export interface ActiveUpload {
     subscription: Subscription;
@@ -17,18 +18,20 @@ export interface ActiveUpload {
 }
 
 @Injectable()
-export class FileUploadService extends GenericService {
+export class FileUploadService extends GenericService implements OnDestroy {
     static readonly MAX_PARALLEL_UPLOADS = 5;
     files: FileUploadModel[] = [];
     groupedFiles: { [key: string]: FileUploadModel[] } = {};
-
     activeUploads = 0;
     private _pendingUploads: FileUploadModel[] = [];
     private _activeUploads: ActiveUpload[] = [];
 
+    private readonly _fetchFiles$ = new Subject();
+    private readonly _subscriptions = new Subscription();
+
     constructor(
         private readonly _appStateService: AppStateService,
-        private readonly _dossiersService: DossiersService,
+        private readonly _filesMapService: FilesMapService,
         private readonly _applicationRef: ApplicationRef,
         private readonly _translateService: TranslateService,
         private readonly _configService: ConfigService,
@@ -37,15 +40,23 @@ export class FileUploadService extends GenericService {
         protected readonly _injector: Injector,
     ) {
         super(_injector, 'upload');
-        interval(2500).subscribe(() => {
-            this._handleUploads();
-        });
+        const fileFetch$ = this._fetchFiles$.pipe(
+            throttleTime(1500),
+            switchMap(dossierId => this._appStateService.reloadDossierFiles(dossierId)),
+        );
+        this._subscriptions.add(fileFetch$.subscribe());
+        const interval$ = interval(2500).pipe(tap(() => this._handleUploads()));
+        this._subscriptions.add(interval$.subscribe());
     }
 
     get activeDossierKeys() {
         return Object.keys(this.groupedFiles).filter(dossierId => this.groupedFiles[dossierId].length > 0);
     }
 
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+
     scheduleUpload(item: FileUploadModel) {
         if (!item.sizeError) {
             item.progress = 0;
@@ -55,10 +66,10 @@ export class FileUploadService extends GenericService {
         }
     }
 
-    async uploadFiles(files: FileUploadModel[]): Promise {
+    async uploadFiles(files: FileUploadModel[], dossierId: string): Promise {
         const maxSizeMB = this._configService.values.MAX_FILE_SIZE_MB;
         const maxSizeBytes = maxSizeMB * 1024 * 1024;
-        const dossierFiles = this._dossiersService.activeDossier.files;
+        const dossierFiles = this._filesMapService.get(dossierId);
         let option: 'overwrite' | 'skip';
         for (let idx = 0; idx < files.length; ++idx) {
             const file = files[idx];
@@ -116,6 +127,7 @@ export class FileUploadService extends GenericService {
         const index = this.files.indexOf(item);
         if (index > -1) {
             this._removeFileFromGroup(item);
+            this._fetchFiles$.next(item.dossierId);
             this.files.splice(index, 1);
         }
     }
@@ -174,7 +186,7 @@ export class FileUploadService extends GenericService {
         this.activeUploads++;
         const obs = this.uploadFileForm(uploadFile.dossierId, uploadFile.file);
         return obs.subscribe(
-            async event => {
+            event => {
                 if (event.type === HttpEventType.UploadProgress) {
                     uploadFile.progress = Math.round((event.loaded / (event.total || event.loaded)) * 100);
                     this._applicationRef.tick();
@@ -190,7 +202,6 @@ export class FileUploadService extends GenericService {
                         };
                     }
                     this._removeUpload(uploadFile);
-                    await this._appStateService.reloadActiveDossierFiles();
                 }
             },
             (err: HttpErrorResponse) => {
@@ -219,6 +230,7 @@ export class FileUploadService extends GenericService {
                     console.error(e);
                 }
             }
+
             this._activeUploads.splice(index, 1);
             this.activeUploads--;
         }
diff --git a/apps/red-ui/src/app/services/breadcrumbs.service.ts b/apps/red-ui/src/app/services/breadcrumbs.service.ts
new file mode 100644
index 000000000..4d6b7d478
--- /dev/null
+++ b/apps/red-ui/src/app/services/breadcrumbs.service.ts
@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { List, shareDistinctLast } from '@iqser/common-ui';
+import { IsActiveMatchOptions } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+export type RouterLinkActiveOptions = { exact: boolean } | IsActiveMatchOptions;
+
+export interface Breadcrumb {
+    readonly name$: Observable;
+    readonly routerLink?: string[];
+    readonly routerLinkActiveOptions?: RouterLinkActiveOptions;
+}
+
+export type Breadcrumbs = List;
+
+@Injectable({
+    providedIn: 'root',
+})
+export class BreadcrumbsService {
+    readonly breadcrumbs$: Observable;
+    readonly showGoBack$: Observable;
+    private readonly _showGoBack$ = new BehaviorSubject(false);
+    private readonly _store$ = new BehaviorSubject([]);
+
+    constructor() {
+        this.breadcrumbs$ = this._store$.asObservable();
+        this.showGoBack$ = this._showGoBack$.asObservable().pipe(shareDistinctLast());
+    }
+
+    get breadcrumbs() {
+        return this._store$.value;
+    }
+
+    append(breadcrumb: Breadcrumb) {
+        const existing = this._store$.value.find(item => item.routerLink.toString() === breadcrumb.routerLink.toString());
+        if (existing) {
+            this.remove(existing.routerLink);
+        }
+        this._store$.next([...this._store$.value, breadcrumb]);
+    }
+
+    clear() {
+        this._store$.next([]);
+    }
+
+    remove(routerLink: string[]) {
+        this._store$.next(this._store$.value.filter(item => item.routerLink.toString() !== routerLink.toString()));
+    }
+
+    showGoBack() {
+        this._showGoBack$.next(true);
+    }
+
+    hideGoBack() {
+        this._showGoBack$.next(false);
+    }
+}
diff --git a/apps/red-ui/src/app/services/entity-services/dossier-stats.service.ts b/apps/red-ui/src/app/services/entity-services/dossier-stats.service.ts
new file mode 100644
index 000000000..aeb845a64
--- /dev/null
+++ b/apps/red-ui/src/app/services/entity-services/dossier-stats.service.ts
@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { HeadersConfiguration, mapEach, RequiredParam, Validate } from '@iqser/common-ui';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { DossierStats, IDossierStats } from '@red/domain';
+import { HttpClient } from '@angular/common/http';
+import { tap } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class DossierStatsService {
+    private readonly _map = new Map>();
+
+    constructor(private readonly _http: HttpClient) {}
+
+    @Validate()
+    getFor(@RequiredParam() dossierIds: string[]): Observable {
+        const request = this._http.post(`/${encodeURI('dossier-stats')}`, dossierIds, {
+            headers: HeadersConfiguration.getHeaders(),
+            observe: 'body',
+        });
+
+        return request.pipe(
+            mapEach(entity => new DossierStats(entity)),
+            tap(entities => entities.forEach(entity => this.set(entity))),
+        );
+    }
+
+    get(key: string): DossierStats {
+        return this._map.get(key)?.value;
+    }
+
+    set(stats: DossierStats): void {
+        if (!this._map.has(stats.dossierId)) {
+            this._map.set(stats.dossierId, new BehaviorSubject(stats));
+            return;
+        }
+
+        const old = this.get(stats.dossierId);
+        if (JSON.stringify(old) !== JSON.stringify(stats)) {
+            this._map.get(stats.dossierId).next(stats);
+        }
+    }
+
+    watch$(key: string): Observable {
+        return this._map.get(key)?.asObservable();
+    }
+}
diff --git a/apps/red-ui/src/app/services/entity-services/dossiers.service.ts b/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
index c89b8fcd2..7f4bbdc68 100644
--- a/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/dossiers.service.ts
@@ -1,12 +1,11 @@
 import { Injectable, Injector } from '@angular/core';
-import { EntitiesService, List, QueryParam, RequiredParam, Toaster, Validate } from '@iqser/common-ui';
-import { Dossier, File, IDossier, IDossierRequest } from '@red/domain';
-import { catchError, map, tap } from 'rxjs/operators';
-import { BehaviorSubject, Observable, of } from 'rxjs';
-import { ActivationEnd, Router } from '@angular/router';
-import { DictionaryService } from '@shared/services/dictionary.service';
+import { EntitiesService, List, mapEach, QueryParam, RequiredParam, shareLast, Toaster, Validate } from '@iqser/common-ui';
+import { Dossier, IDossier, IDossierRequest } from '@red/domain';
+import { catchError, filter, map, mapTo, switchMap, tap } from 'rxjs/operators';
+import { combineLatest, iif, Observable, of, throwError } from 'rxjs';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { currentComponentRoute } from '@utils/functions';
+import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
+import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
 
 export interface IDossiersStats {
     totalPeople: number;
@@ -20,90 +19,40 @@ const GENERIC_MGS = _('add-dossier-dialog.errors.generic');
     providedIn: 'root',
 })
 export class DossiersService extends EntitiesService {
-    readonly stats$ = this.all$.pipe(map(entities => this._computeStats(entities)));
-    readonly activeDossier$: Observable;
-    private readonly _activeDossier$ = new BehaviorSubject(undefined);
+    readonly generalStats$ = this.all$.pipe(switchMap(entities => this._generalStats$(entities)));
 
     constructor(
-        protected readonly _injector: Injector,
-        private readonly _router: Router,
-        private readonly _dictionaryService: DictionaryService,
         private readonly _toaster: Toaster,
+        protected readonly _injector: Injector,
+        private readonly _dossierStatsService: DossierStatsService,
     ) {
         super(_injector, Dossier, 'dossier');
-        this.activeDossier$ = this._activeDossier$.asObservable();
-
-        _router.events.pipe(currentComponentRoute).subscribe((event: ActivationEnd) => {
-            const dossierId = event.snapshot.paramMap.get('dossierId');
-            const sameIdAsCurrentActive = dossierId === this._activeDossier$.getValue()?.dossierId;
-
-            if (sameIdAsCurrentActive) {
-                return;
-            }
-
-            if (dossierId === null || dossierId === undefined) {
-                return this._activeDossier$.next(undefined);
-            }
-
-            if (!this.has(dossierId)) {
-                this._activeDossier$.next(undefined);
-                return this._router.navigate(['/main/dossiers']).then();
-            }
-
-            this._activeDossier$.next(this.find(dossierId));
-            this.updateDossierDictionary(this.activeDossier.dossierTemplateId, dossierId).then();
-        });
     }
 
-    get allFiles(): File[] {
-        return this.all.reduce((acc: File[], { files }) => [...acc, ...files], []);
+    loadAll(): Observable {
+        const dossierIds = (dossiers: Dossier[]) => dossiers.map(d => d.dossierId);
+        return this.getAll().pipe(
+            mapEach(entity => new Dossier(entity)),
+            /* Load stats before updating entities */
+            switchMap(dossiers => this._dossierStatsService.getFor(dossierIds(dossiers)).pipe(mapTo(dossiers))),
+            tap(dossiers => this.setEntities(dossiers)),
+        );
     }
 
-    get activeDossier(): Dossier | undefined {
-        return this._activeDossier$.value;
-    }
-
-    get activeDossierId(): string | undefined {
-        return this._activeDossier$.value?.dossierId;
-    }
-
-    goToActiveDossier(): Promise {
-        return this._router.navigate([this.activeDossier?.routerLink]).then();
-    }
-
-    find(dossierId: string): Dossier | undefined;
-    find(dossierId: string, fileId: string): File | undefined;
-    find(dossierId: string, fileId?: string): Dossier | File | undefined {
-        const dossier = super.find(dossierId);
-        return fileId ? dossier?.files.find(file => file.fileId === fileId) : dossier;
-    }
-
-    replace(newDossier: Dossier) {
-        super.replace(newDossier);
-        if (newDossier.dossierId === this.activeDossierId) {
-            this._activeDossier$.next(newDossier);
-        }
-    }
-
-    async updateDossierDictionary(dossierTemplateId: string, dossierId: string) {
-        // dossier exists, load its dictionary
-        const dossier = this.find(dossierId);
-        try {
-            dossier.type = await this._dictionaryService.getFor(dossierTemplateId, 'dossier_redaction', dossierId).toPromise();
-        } catch (e) {
-            dossier.type = null;
-        }
+    loadAllIfChanged(): Observable {
+        return this.hasChanges$().pipe(switchMap(changed => iif(() => changed, this.loadAll()).pipe(mapTo(changed))));
     }
 
     @Validate()
     createOrUpdate(@RequiredParam() dossier: IDossierRequest): Observable {
+        const showToast = (error: HttpErrorResponse) => {
+            this._toaster.error(error.status === HttpStatusCode.Conflict ? DOSSIER_EXISTS_MSG : GENERIC_MGS);
+            return throwError(error);
+        };
+
         return this._post(dossier).pipe(
-            map(updatedDossier => new Dossier(updatedDossier, this.find(updatedDossier.dossierId)?.files ?? [])),
-            tap(newDossier => this.replace(newDossier)),
-            catchError(error => {
-                this._toaster.error(error.status === 409 ? DOSSIER_EXISTS_MSG : GENERIC_MGS);
-                return of(undefined);
-            }),
+            switchMap(newDossier => this.loadAll().pipe(map(() => this.find(newDossier.dossierId)))),
+            catchError(showToast),
         );
     }
 
@@ -139,7 +88,7 @@ export class DossiersService extends EntitiesService {
 
         entities.forEach(dossier => {
             dossier.memberIds?.forEach(m => totalPeople.add(m));
-            totalAnalyzedPages += dossier.totalNumberOfPages;
+            totalAnalyzedPages += this._dossierStatsService.get(dossier.dossierId).numberOfPages;
         });
 
         return {
@@ -147,4 +96,13 @@ export class DossiersService extends EntitiesService {
             totalAnalyzedPages,
         };
     }
+
+    private _generalStats$(entities: List): Observable {
+        const stats$ = entities.map(entity => this._dossierStatsService.watch$(entity.dossierId));
+        return combineLatest(stats$).pipe(
+            filter(stats => stats.every(s => !!s)),
+            map(() => this._computeStats(entities)),
+            shareLast(),
+        );
+    }
 }
diff --git a/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts b/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts
index 576e0fb53..a1a0d14b1 100644
--- a/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/file-attributes.service.ts
@@ -42,7 +42,9 @@ export class FileAttributesService extends EntitiesService c1.placeholder.localeCompare(c2.placeholder));
+        return fileAttributesConfig;
     }
 
     /**
diff --git a/apps/red-ui/src/app/services/entity-services/files-map.service.ts b/apps/red-ui/src/app/services/entity-services/files-map.service.ts
new file mode 100644
index 000000000..d0758a22a
--- /dev/null
+++ b/apps/red-ui/src/app/services/entity-services/files-map.service.ts
@@ -0,0 +1,73 @@
+import { Injectable } from '@angular/core';
+import { FilesService } from '@services/entity-services/files.service';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { File } from '@red/domain';
+import { filter, startWith } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class FilesMapService {
+    readonly fileReanalysed$ = new Subject();
+    private readonly _entityChanged$ = new Subject();
+    private readonly _map = new Map>();
+
+    constructor(private readonly _filesService: FilesService) {}
+
+    get$(dossierId: string) {
+        if (!this._map.has(dossierId)) {
+            this._map.set(dossierId, new BehaviorSubject([]));
+        }
+
+        return this._map.get(dossierId).asObservable();
+    }
+
+    has(dossierId: string) {
+        return this._map.has(dossierId);
+    }
+
+    get(key: string): File[];
+    get(key: string, id: string): File | undefined;
+    get(key: string, id?: string): File | File[] | undefined {
+        const value = this._map.get(key)?.value;
+        if (!id) {
+            return value ?? [];
+        }
+        return value?.find(item => item.id === id);
+    }
+
+    set(key: string, entities: File[]): void {
+        if (!this._map.has(key)) {
+            this._map.set(key, new BehaviorSubject(entities));
+            return entities.forEach(entity => this._entityChanged$.next(entity));
+        }
+
+        // Keep old object references for unchanged entities
+        const newEntities = entities.map(newEntity => {
+            const oldEntity = this.get(key, newEntity.id);
+
+            if (oldEntity?.lastProcessed !== newEntity.lastProcessed) {
+                this.fileReanalysed$.next(newEntity);
+            }
+
+            if (newEntity.isEqual(oldEntity)) {
+                return oldEntity;
+            }
+
+            this._entityChanged$.next(newEntity);
+            return newEntity;
+        });
+
+        this._map.get(key).next(newEntities);
+    }
+
+    replace(entity: File) {
+        const all = this.get(entity.dossierId).filter(file => file.fileId !== entity.fileId);
+        this.set(entity.dossierId, [...all, entity]);
+    }
+
+    watch$(key: string, entityId: string): Observable {
+        return this._entityChanged$.pipe(
+            filter(entity => entity.id === entityId),
+            startWith(this.get(key, entityId)),
+        );
+    }
+}
diff --git a/apps/red-ui/src/app/services/entity-services/files.service.ts b/apps/red-ui/src/app/services/entity-services/files.service.ts
index 17892bc02..ba8a1db0d 100644
--- a/apps/red-ui/src/app/services/entity-services/files.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/files.service.ts
@@ -13,38 +13,12 @@ export class FilesService extends EntitiesService {
         super(_injector, File, 'status');
     }
 
-    getExistingFilesFor(dossierId: string): List {
-        return this.all.filter(file => file.dossierId === dossierId);
-    }
-
     fetch() {
         this.get().pipe(map(files => files.map(file => new File(file, this._userService.getNameForId(file.currentReviewer)))));
     }
 
-    /**
-     * Gets the status for all files.
-     */
-    get(): Observable;
-    /**
-     * Gets the status for a file from a dossier.
-     */
-    get(dossierId: string, fileId: string): Observable;
-    get(dossierId?: string, fileId?: string): Observable {
-        if (dossierId && fileId) {
-            return super._getOne([dossierId, fileId]);
-        }
-
-        return super.getAll();
-    }
-
-    getFor(dossierId: string): Observable;
-    getFor(dossierIds: List): Observable>;
-    getFor(args: string | List) {
-        if (typeof args === 'string') {
-            return super.getAll(`${this._defaultModelPath}/${args}`);
-        }
-
-        return this._post>(args);
+    getOne(dossierId: string, fileId: string): Observable {
+        return super._getOne([dossierId, fileId]);
     }
 
     @Validate()
diff --git a/apps/red-ui/src/app/services/general-settings.service.ts b/apps/red-ui/src/app/services/general-settings.service.ts
index b817352c8..9eae86e67 100644
--- a/apps/red-ui/src/app/services/general-settings.service.ts
+++ b/apps/red-ui/src/app/services/general-settings.service.ts
@@ -1,17 +1,19 @@
 import { Injectable, Injector } from '@angular/core';
 import { GenericService, RequiredParam, Validate } from '@iqser/common-ui';
 import { IGeneralConfiguration } from '@red/domain';
+import { UserService } from '@services/user.service';
+import { of } from 'rxjs';
 
 @Injectable({
     providedIn: 'root',
 })
 export class GeneralSettingsService extends GenericService {
-    constructor(protected readonly _injector: Injector) {
+    constructor(protected readonly _injector: Injector, private readonly _userService: UserService) {
         super(_injector, 'configuration');
     }
 
     getGeneralConfigurations() {
-        return this._getOne(['general']);
+        return this._userService.currentUser?.hasAnyREDRoles ? this._getOne(['general']) : of({ displayName: 'RedactManager' });
     }
 
     @Validate()
diff --git a/apps/red-ui/src/app/services/notifications.service.ts b/apps/red-ui/src/app/services/notifications.service.ts
index 7563f5dca..3425ca5c8 100644
--- a/apps/red-ui/src/app/services/notifications.service.ts
+++ b/apps/red-ui/src/app/services/notifications.service.ts
@@ -2,23 +2,25 @@ import { Injectable, Injector } from '@angular/core';
 import { GenericService, List, mapEach, QueryParam, RequiredParam, Validate } from '@iqser/common-ui';
 import * as moment from 'moment';
 import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
+import { iif, Observable } from 'rxjs';
 import { INotification, Notification, NotificationTypes } from '@red/domain';
-import { map } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { notificationsTranslations } from '../translations/notifications-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { UserService } from '@services/user.service';
+import { FilesMapService } from '@services/entity-services/files-map.service';
 
 @Injectable({
     providedIn: 'root',
 })
-export class NotificationsService extends GenericService {
+export class NotificationsService extends GenericService {
     constructor(
         protected readonly _injector: Injector,
         private readonly _translateService: TranslateService,
         private readonly _dossiersService: DossiersService,
         private readonly _userService: UserService,
+        private readonly _filesMapService: FilesMapService,
     ) {
         super(_injector, 'notification');
     }
@@ -30,12 +32,17 @@ export class NotificationsService extends GenericService {
             queryParam = { key: 'includeSeen', value: includeSeen };
         }
 
-        return this._getOne<{ notifications: INotification[] }>([], this._defaultModelPath, [queryParam]).pipe(
+        return this.getAll<{ notifications: Notification[] }>(this._defaultModelPath, [queryParam]).pipe(
             map(response => response.notifications.filter(n => n.notificationType in NotificationTypes)),
             mapEach(notification => this._new(notification)),
         );
     }
 
+    @Validate()
+    getNotificationsIfChanged(@RequiredParam() includeSeen: boolean): Observable {
+        return this.hasChanges$().pipe(switchMap(changed => iif(() => changed, this.getNotifications(includeSeen))));
+    }
+
     @Validate()
     toggleNotificationRead(@RequiredParam() body: List, @RequiredParam() setRead: boolean) {
         let queryParam: QueryParam;
@@ -61,7 +68,8 @@ export class NotificationsService extends GenericService {
         const fileId = notification.target.fileId;
         const dossierId = notification.target.dossierId;
         const dossier = this._dossiersService.find(dossierId);
-        const file = dossier?.files?.find(f => f.fileId === fileId);
+        const files = this._filesMapService.get(dossierId);
+        const file = files?.find(f => f.fileId === fileId);
 
         return this._translateService.instant(translation, {
             fileHref: file?.routerLink,
diff --git a/apps/red-ui/src/app/services/permissions.service.ts b/apps/red-ui/src/app/services/permissions.service.ts
index 75e12021f..bbecfdf7c 100644
--- a/apps/red-ui/src/app/services/permissions.service.ts
+++ b/apps/red-ui/src/app/services/permissions.service.ts
@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { AppStateService } from '@state/app-state.service';
 import { UserService } from './user.service';
 import { Dossier, File, IComment } from '@red/domain';
 import { DossiersService } from './entity-services/dossiers.service';
@@ -8,22 +7,11 @@ import { DossiersService } from './entity-services/dossiers.service';
     providedIn: 'root',
 })
 export class PermissionsService {
-    constructor(
-        private readonly _appStateService: AppStateService,
-        private readonly _userService: UserService,
-        private readonly _dossiersService: DossiersService,
-    ) {}
+    constructor(private readonly _userService: UserService, private readonly _dossiersService: DossiersService) {}
 
-    private get _activeFile(): File | undefined {
-        return this._appStateService.activeFile;
-    }
-
-    private get _activeDossier(): Dossier | undefined {
-        return this._dossiersService.activeDossier;
-    }
-
-    isReviewerOrApprover(file?: File): boolean {
-        return this.isFileReviewer(file) || this.isApprover();
+    isReviewerOrApprover(file: File): boolean {
+        const dossier = this._getDossier(file);
+        return this.isFileReviewer(file) || this.isApprover(dossier);
     }
 
     displayReanalyseBtn(dossier: Dossier): boolean {
@@ -31,30 +19,32 @@ export class PermissionsService {
     }
 
     canToggleAnalysis(file: File): boolean {
-        return this.isReviewerOrApprover(file) && ['UNASSIGNED', 'UNDER_REVIEW', 'UNDER_APPROVAL'].includes(file.status);
+        return this.isReviewerOrApprover(file) && (file.isUnassigned || file.isUnderReview || file.isUnderApproval);
     }
 
-    canReanalyseFile(file = this._activeFile): boolean {
+    canReanalyseFile(file: File): boolean {
         return this.isReviewerOrApprover(file) || file.isUnassigned || (file.isError && file.isUnassigned);
     }
 
-    isFileReviewer(file = this._activeFile): boolean {
+    isFileReviewer(file: File): boolean {
         return file.currentReviewer === this._userService.currentUser.id;
     }
 
-    canDeleteFile(file = this._activeFile, dossier?: Dossier): boolean {
+    canDeleteFile(file: File): boolean {
+        const dossier = this._getDossier(file);
         return (this.isOwner(dossier) && !file.isApproved) || file.isUnassigned;
     }
 
-    canAssignToSelf(file = this._activeFile): boolean {
-        const precondition = this.isDossierMember() && !file.isProcessing && !file.isError && !file.isApproved;
+    canAssignToSelf(file: File): boolean {
+        const dossier = this._getDossier(file);
+        const precondition = this.isDossierMember(dossier) && !file.isProcessing && !file.isError && !file.isApproved;
 
-        const isTheOnlyReviewer = !this._activeDossier?.hasReviewers;
+        const isTheOnlyReviewer = !dossier.hasReviewers;
 
         if (precondition) {
             if (
                 (file.isUnassigned || (file.isUnderReview && !this.isFileReviewer(file))) &&
-                (this.isApprover() || isTheOnlyReviewer || (this.isDossierReviewer() && file.isUnassigned))
+                (this.isApprover(dossier) || isTheOnlyReviewer || (this.isDossierReviewer(dossier) && file.isUnassigned))
             ) {
                 return true;
             }
@@ -62,66 +52,70 @@ export class PermissionsService {
         return false;
     }
 
-    canAssignUser(file = this._activeFile): boolean {
-        const precondition = !file.isProcessing && !file.isError && !file.isApproved && this.isApprover();
+    canAssignUser(file: File): boolean {
+        const dossier = this._getDossier(file);
+        const precondition = !file.isProcessing && !file.isError && !file.isApproved && this.isApprover(dossier);
 
         if (precondition) {
-            if ((file.isUnassigned || file.isUnderReview) && this._activeDossier.hasReviewers) {
+            if ((file.isUnassigned || file.isUnderReview) && dossier.hasReviewers) {
                 return true;
             }
-            if (file.isUnderApproval && this._activeDossier.approverIds.length > 1) {
+            if (file.isUnderApproval && dossier.approverIds.length > 1) {
                 return true;
             }
         }
         return false;
     }
 
-    canUnassignUser(file = this._activeFile): boolean {
-        return (file.isUnderReview || file.isUnderApproval) && (this.isFileReviewer(file) || this.isApprover());
+    canUnassignUser(file: File): boolean {
+        const dossier = this._getDossier(file);
+        return (file.isUnderReview || file.isUnderApproval) && (this.isFileReviewer(file) || this.isApprover(dossier));
     }
 
-    canSetUnderReview(file = this._activeFile): boolean {
-        return file?.isUnderApproval && this.isApprover();
+    canSetUnderReview(file: File): boolean {
+        const dossier = this._getDossier(file);
+        return file.isUnderApproval && this.isApprover(dossier);
     }
 
-    isReadyForApproval(file = this._activeFile): boolean {
+    isReadyForApproval(file: File): boolean {
         return this.canSetUnderReview(file);
     }
 
-    canSetUnderApproval(file = this._activeFile): boolean {
-        return file?.isUnderReview && this.isReviewerOrApprover(file);
+    canSetUnderApproval(file: File): boolean {
+        return file.isUnderReview && this.isReviewerOrApprover(file);
     }
 
-    isOwner(dossier = this._activeDossier, user = this._userService.currentUser): boolean {
-        return dossier?.ownerId === user.id;
+    isOwner(dossier: Dossier, user = this._userService.currentUser): boolean {
+        return dossier.ownerId === user.id;
     }
 
-    isApprover(dossier = this._activeDossier, user = this._userService.currentUser): boolean {
-        return dossier?.approverIds.indexOf(user.id) >= 0;
+    isApprover(dossier: Dossier, user = this._userService.currentUser): boolean {
+        return dossier.approverIds.indexOf(user.id) >= 0;
     }
 
-    isDossierReviewer(dossier = this._activeDossier, user = this._userService.currentUser): boolean {
+    isDossierReviewer(dossier: Dossier, user = this._userService.currentUser): boolean {
         return this.isDossierMember(dossier, user) && !this.isApprover(dossier, user);
     }
 
-    isDossierMember(dossier = this._activeDossier, user = this._userService.currentUser): boolean {
-        return dossier?.memberIds.includes(user.id);
+    isDossierMember(dossier: Dossier, user = this._userService.currentUser): boolean {
+        return dossier.memberIds.includes(user.id);
     }
 
-    canPerformAnnotationActions(file = this._activeFile): boolean {
-        return ['UNDER_REVIEW', 'UNDER_APPROVAL'].includes(file?.status) && this.isFileReviewer(file);
+    // TODO: Remove '?', after we make sure file is loaded before page
+    canPerformAnnotationActions(file: File): boolean {
+        return (file?.isUnderReview || file?.isUnderApproval) && this.isFileReviewer(file);
     }
 
-    canUndoApproval(file = this._activeFile): boolean {
-        return file?.isApproved && this.isApprover();
+    canUndoApproval(file: File): boolean {
+        return file.isApproved && this.isApprover(this._getDossier(file));
     }
 
-    canMarkPagesAsViewed(file = this._activeFile): boolean {
-        return ['UNDER_REVIEW', 'UNDER_APPROVAL'].includes(file?.status) && this.isFileReviewer(file);
+    canMarkPagesAsViewed(file: File): boolean {
+        return (file.isUnderReview || file.isUnderApproval) && this.isFileReviewer(file);
     }
 
     canDownloadFiles(file: File): boolean {
-        const dossier = this._dossiersService.find(file?.dossierId);
+        const dossier = this._getDossier(file);
         if (!dossier) {
             return false;
         }
@@ -129,7 +123,7 @@ export class PermissionsService {
         return file.isApproved && this.isApprover(dossier);
     }
 
-    canDeleteDossier(dossier = this._activeDossier): boolean {
+    canDeleteDossier(dossier: Dossier): boolean {
         return dossier.ownerId === this._userService.currentUser.id;
     }
 
@@ -137,15 +131,21 @@ export class PermissionsService {
         return user.isAdmin;
     }
 
-    canAddComment(file = this._activeFile): boolean {
-        return (this.isFileReviewer(file) || this.isApprover()) && !file.isApproved;
+    canAddComment(file: File): boolean {
+        return (this.isFileReviewer(file) || this.isApprover(this._getDossier(file))) && !file.isApproved;
     }
 
-    canExcludePages(file = this._activeFile): boolean {
-        return ['UNDER_REVIEW', 'UNDER_APPROVAL'].includes(file.status) && (this.isFileReviewer(file) || this.isApprover());
+    canExcludePages(file: File): boolean {
+        const dossier = this._getDossier(file);
+        return (file.isUnderReview || file.isUnderApproval) && (this.isFileReviewer(file) || this.isApprover(dossier));
     }
 
-    canDeleteComment(comment: IComment, file = this._activeFile) {
-        return (comment.user === this._userService.currentUser.id || this.isApprover()) && !file.isApproved;
+    canDeleteComment(comment: IComment, file: File) {
+        const dossier = this._getDossier(file);
+        return (comment.user === this._userService.currentUser.id || this.isApprover(dossier)) && !file.isApproved;
+    }
+
+    private _getDossier(file: File): Dossier {
+        return this._dossiersService.find(file.dossierId);
     }
 }
diff --git a/apps/red-ui/src/app/state/app-state.guard.ts b/apps/red-ui/src/app/state/app-state.guard.ts
index 437bb8cb4..a3f815db5 100644
--- a/apps/red-ui/src/app/state/app-state.guard.ts
+++ b/apps/red-ui/src/app/state/app-state.guard.ts
@@ -4,6 +4,7 @@ import { AppStateService } from './app-state.service';
 import { UserService } from '@services/user.service';
 import { DossiersService } from '@services/entity-services/dossiers.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
+import { FilesMapService } from '@services/entity-services/files-map.service';
 
 @Injectable({
     providedIn: 'root',
@@ -12,6 +13,7 @@ export class AppStateGuard implements CanActivate {
     constructor(
         private readonly _appStateService: AppStateService,
         private readonly _dossiersService: DossiersService,
+        private readonly _filesMapService: FilesMapService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _userService: UserService,
         private readonly _router: Router,
@@ -28,21 +30,7 @@ export class AppStateGuard implements CanActivate {
             await this._appStateService.loadDictionaryDataIfNecessary();
         }
 
-        if (this._userService.currentUser.isUser) {
-            await this._appStateService.loadAllDossiersIfNecessary();
-        }
-
-        const { dossierId, fileId, dossierTemplateId, type } = route.params;
-
-        if (dossierId && !this._dossiersService.find(dossierId)) {
-            await this._router.navigate(['main', 'dossiers']);
-            return false;
-        }
-
-        if (fileId && !this._dossiersService.find(dossierId, fileId)) {
-            await this._router.navigate(['main', 'dossiers', dossierId]);
-            return false;
-        }
+        const { dossierTemplateId, type } = route.params;
 
         if (dossierTemplateId && !this._dossierTemplatesService.find(dossierTemplateId)) {
             await this._router.navigate(['main', 'admin', 'dossier-templates']);
diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts
index 95323132d..fd157f62c 100644
--- a/apps/red-ui/src/app/state/app-state.service.ts
+++ b/apps/red-ui/src/app/state/app-state.service.ts
@@ -1,17 +1,17 @@
 import { Injectable } from '@angular/core';
-import { Dictionary, Dossier, DossierTemplate, File, IColors, IDossier, IFile } from '@red/domain';
+import { Dictionary, Dossier, DossierTemplate, File, IColors } from '@red/domain';
 import { ActivationEnd, Router } from '@angular/router';
 import { UserService } from '@services/user.service';
-import { forkJoin, Observable, of, Subject } from 'rxjs';
-import { catchError, filter, first, map, tap } from 'rxjs/operators';
+import { forkJoin, Observable, of } from 'rxjs';
+import { catchError, map, tap } from 'rxjs/operators';
 import { currentComponentRoute, FALLBACK_COLOR, hexToRgb } from '@utils/functions';
 import { DossiersService } from '@services/entity-services/dossiers.service';
-import { UserPreferenceService } from '@services/user-preference.service';
 import { FilesService } from '@services/entity-services/files.service';
 import { DictionaryService } from '@shared/services/dictionary.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
-import { ReanalysisService } from '@services/reanalysis.service';
+import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
+import { FilesMapService } from '@services/entity-services/files-map.service';
 
 export interface AppState {
     activeFileId?: string;
@@ -22,23 +22,21 @@ export interface AppState {
     providedIn: 'root',
 })
 export class AppStateService {
-    readonly fileChanged$ = new Subject();
-    readonly fileReanalysed$ = new Subject();
-
     private _appState: AppState = {};
+    private _activeDossierId: string; // TODO: Temporary
 
     constructor(
         private readonly _router: Router,
         private readonly _userService: UserService,
         private readonly _dossiersService: DossiersService,
         private readonly _filesService: FilesService,
-        private readonly _reanalysisService: ReanalysisService,
         private readonly _dictionaryService: DictionaryService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
+        private readonly _dossierStatsService: DossierStatsService,
         private readonly _fileAttributesService: FileAttributesService,
-        private readonly _userPreferenceService: UserPreferenceService,
+        private readonly _filesMapService: FilesMapService,
     ) {
-        _router.events.pipe(currentComponentRoute).subscribe(async (event: ActivationEnd) => {
+        _router.events.pipe(currentComponentRoute).subscribe((event: ActivationEnd) => {
             const fileId = event.snapshot.paramMap.get('fileId');
             const sameIdAsCurrentActive = fileId === this.activeFileId;
 
@@ -50,14 +48,8 @@ export class AppStateService {
                 return (this._appState.activeFileId = undefined);
             }
 
-            await _dossiersService.activeDossier$
-                .pipe(
-                    filter(dossier => !!dossier),
-                    first(),
-                )
-                .toPromise();
-            const dossierId = event.snapshot.paramMap.get('dossierId');
-            return this.activateFile(dossierId, fileId);
+            this._activeDossierId = event.snapshot.paramMap.get('dossierId');
+            return this._activateFile(this._activeDossierId, fileId);
         });
     }
 
@@ -82,35 +74,17 @@ export class AppStateService {
             : undefined;
     }
 
-    get activeFile(): File | undefined {
-        return this._dossiersService.activeDossier?.files.find(f => f.fileId === this.activeFileId);
-    }
-
     get activeFileId(): string | undefined {
         return this._appState.activeFileId;
     }
 
-    async reloadActiveDossierFilesIfNecessary() {
-        await this.reloadActiveDossierFiles();
+    getDictionaryColor(type: string, dossierTemplateId: string) {
+        return !this._dictionaryData
+            ? '#cccccc'
+            : this._dictionaryData[dossierTemplateId][type]?.hexColor || this._dictionaryData[dossierTemplateId]['default'].hexColor;
     }
 
-    getDictionaryColor(type?: string, dossierTemplateId = this._dossiersService.activeDossier?.dossierTemplateId) {
-        if (!dossierTemplateId) {
-            dossierTemplateId = this.dossierTemplates[0]?.dossierTemplateId;
-        }
-
-        if (!dossierTemplateId || !this._dictionaryData) {
-            return '#cccccc';
-        }
-
-        let color;
-        if (type) {
-            color = this._dictionaryData[dossierTemplateId][type]?.hexColor;
-        }
-        return color ?? this._dictionaryData[dossierTemplateId]['default'].hexColor;
-    }
-
-    getDictionary(key: string, dossierTemplateId = this._dossiersService.activeDossier.dossierTemplateId): Dictionary | undefined {
+    getDictionary(key: string, dossierTemplateId: string): Dictionary | undefined {
         if (!dossierTemplateId) {
             dossierTemplateId = this.dossierTemplates.length > 0 ? this.dossierTemplates[0].dossierTemplateId : undefined;
         }
@@ -122,76 +96,35 @@ export class AppStateService {
         return data ? data : this._dictionaryData[dossierTemplateId]['default'];
     }
 
-    async loadAllDossiers(emitEvents = true) {
-        const dossiers = await this._dossiersService.get().toPromise();
-        if (!dossiers) {
-            return;
-        }
+    async reloadFile(dossierId: string, fileId: string): Promise {
+        const dossier = this._dossiersService.find(dossierId);
+        const oldFile = this._filesMapService.get(dossierId, fileId);
 
-        const mappedDossiers$ = dossiers.map(async p => {
-            const oldDossier = this._dossiersService.find(p.dossierId);
-            const type = oldDossier?.type ?? (await this._getDictionaryFor(p));
-            return new Dossier(p, oldDossier?.files ?? [], type);
-        });
-        const mappedDossiers = await Promise.all(mappedDossiers$);
-        const fileData = await this._filesService.getFor(mappedDossiers.map(p => p.id)).toPromise();
-
-        for (const dossierId of Object.keys(fileData)) {
-            const dossier = mappedDossiers.find(p => p.id === dossierId);
-            if (dossier) {
-                this._processFiles(dossier, fileData[dossierId], emitEvents);
-            }
-        }
-    }
-
-    async reloadActiveFile() {
-        const activeDossier = this._dossiersService.activeDossier;
-
-        if (!this.activeFile || !activeDossier) {
+        if (!oldFile || !dossier) {
             return null;
         }
-        const oldProcessedDate = this.activeFile.lastProcessed;
-        const iFile = await this._filesService.get(activeDossier.dossierId, this.activeFileId).toPromise();
 
-        const activeFile = new File(
+        const iFile = await this._filesService.getOne(dossierId, fileId).toPromise();
+
+        const newFile = new File(
             iFile,
             this._userService.getNameForId(iFile.currentReviewer),
-            this._fileAttributesService.getFileAttributeConfig(activeDossier.dossierTemplateId),
+            this._fileAttributesService.getFileAttributeConfig(dossier.dossierTemplateId),
         );
-        const files = activeDossier.files.filter(file => file.fileId !== activeFile.fileId);
-        files.push(activeFile);
-        const newDossier = new Dossier(activeDossier, files, activeDossier.type);
-        this._dossiersService.replace(newDossier);
 
-        if (activeFile.lastProcessed !== oldProcessedDate) {
-            this.fileReanalysed$.next(activeFile);
-        }
-        this.fileChanged$.next(activeFile);
-        return activeFile;
+        this._filesMapService.replace(newFile);
+        return newFile;
     }
 
-    async getFiles(dossier = this._dossiersService.activeDossier, emitEvents = true) {
+    async getFiles(dossier: Dossier) {
         const files = await this._filesService.getFor(dossier.id).toPromise();
+        await this._dossierStatsService.getFor([dossier.id]).toPromise();
 
-        return this._processFiles(dossier, files, emitEvents);
-    }
+        const fileAttributes = this._fileAttributesService.getFileAttributeConfig(dossier.dossierTemplateId);
+        const newFiles = files.map(iFile => new File(iFile, this._userService.getNameForId(iFile.currentReviewer), fileAttributes));
+        this._filesMapService.set(dossier.dossierId, newFiles);
 
-    async reanalyzeDossier({ id } = this._dossiersService.activeDossier) {
-        await this._reanalysisService.reanalyzeDossier(id, true).toPromise();
-    }
-
-    async activateFile(dossierId: string, fileId: string) {
-        if (this._dossiersService.activeDossierId === dossierId && this.activeFileId === fileId) {
-            return;
-        }
-        if (this._dossiersService.activeDossier) {
-            this._appState.activeFileId = fileId;
-            if (!this.activeFile) {
-                this._appState.activeFileId = null;
-                await this._dossiersService.goToActiveDossier();
-            }
-        }
-        await this._updateLastActiveFileForDossier(dossierId, fileId);
+        return newFiles;
     }
 
     activateDictionary(dictionaryType: string) {
@@ -209,9 +142,9 @@ export class AppStateService {
         this._appState.activeDictionaryType = null;
     }
 
-    async reloadActiveDossierFiles() {
-        if (this._dossiersService.activeDossierId) {
-            await this.getFiles();
+    async reloadDossierFiles(dossierId: string) {
+        if (dossierId) {
+            return this.getFiles(this._dossiersService.find(dossierId));
         }
     }
 
@@ -226,12 +159,6 @@ export class AppStateService {
         await this.refreshDossierTemplateDictionaryData(dossierTemplateId);
     }
 
-    async loadAllDossiersIfNecessary() {
-        if (!this._dossiersService.all.length) {
-            await this.loadAllDossiers();
-        }
-    }
-
     async loadDictionaryDataIfNecessary() {
         if (!this._dictionaryData) {
             await this.loadDictionaryData();
@@ -278,8 +205,14 @@ export class AppStateService {
         );
     }
 
-    private _getDictionaryFor(dossier: IDossier) {
-        return this._dictionaryService.getFor(dossier.dossierTemplateId, 'dossier_redaction', dossier.dossierId).toPromise();
+    private _activateFile(dossierId: string, fileId: string) {
+        if (this._activeDossierId === dossierId && this.activeFileId === fileId) {
+            return;
+        }
+
+        if (this._dossiersService.find(this._activeDossierId)) {
+            this._appState.activeFileId = fileId;
+        }
     }
 
     private _getDictionaryDataForDossierTemplate$(dossierTemplateId: string): Observable<{ [key: string]: any }> {
@@ -338,21 +271,7 @@ export class AppStateService {
                     },
                     true,
                 );
-                // dictionary actions
-                dictionaryData['add-dictionary'] = new Dictionary(
-                    {
-                        hexColor: colors.analysisColor || FALLBACK_COLOR,
-                        type: 'add-dictionary',
-                    },
-                    true,
-                );
-                dictionaryData['remove-dictionary'] = new Dictionary(
-                    {
-                        hexColor: colors.analysisColor || FALLBACK_COLOR,
-                        type: 'remove-dictionary',
-                    },
-                    true,
-                );
+
                 dictionaryData['remove-only-here'] = new Dictionary(
                     {
                         hexColor: colors.analysisColor || FALLBACK_COLOR,
@@ -376,6 +295,7 @@ export class AppStateService {
                     },
                     true,
                 );
+
                 // add suggestions
                 dictionaryData['suggestion-change-legal-basis'] = new Dictionary(
                     {
@@ -384,6 +304,7 @@ export class AppStateService {
                     },
                     true,
                 );
+
                 dictionaryData['suggestion-recategorize-image'] = new Dictionary(
                     {
                         hexColor: colors.requestAdd || FALLBACK_COLOR,
@@ -391,6 +312,7 @@ export class AppStateService {
                     },
                     true,
                 );
+
                 dictionaryData['suggestion-add-dictionary'] = new Dictionary(
                     {
                         hexColor: colors.dictionaryRequestColor || FALLBACK_COLOR,
@@ -399,6 +321,14 @@ export class AppStateService {
                     true,
                 );
 
+                dictionaryData['suggestion-resize'] = new Dictionary(
+                    {
+                        hexColor: colors.dictionaryRequestColor || FALLBACK_COLOR,
+                        type: 'suggestion-resize',
+                    },
+                    true,
+                );
+
                 dictionaryData['suggestion-remove'] = new Dictionary(
                     {
                         hexColor: colors.requestRemove || FALLBACK_COLOR,
@@ -447,22 +377,6 @@ export class AppStateService {
                     true,
                 );
 
-                dictionaryData['pending-analysis'] = new Dictionary(
-                    {
-                        hexColor: colors.analysisColor || FALLBACK_COLOR,
-                        type: 'analysis',
-                    },
-                    true,
-                );
-
-                dictionaryData['change-legal-basis'] = new Dictionary(
-                    {
-                        hexColor: colors.analysisColor || FALLBACK_COLOR,
-                        type: 'analysis',
-                    },
-                    true,
-                );
-
                 dictionaryData['hint'] = new Dictionary(
                     {
                         hexColor: '#fa98f7',
@@ -492,48 +406,4 @@ export class AppStateService {
 
         return forkJoin([typeObs, colorsObs]).pipe(map(() => dictionaryData));
     }
-
-    private async _updateLastActiveFileForDossier(dossierId: string, fileId: string) {
-        this._dossiersService.activeDossier.files.forEach(f => {
-            f.lastOpened = f.fileId === fileId;
-        });
-
-        await this._userPreferenceService.saveLastOpenedFileForDossier(dossierId, fileId);
-    }
-
-    private _processFiles(dossier: Dossier, iFiles: IFile[], emitEvents = true) {
-        const oldFiles = dossier.files;
-        const fileAttributes = this._fileAttributesService.getFileAttributeConfig(dossier.dossierTemplateId);
-        const newFiles = iFiles.map(iFile => new File(iFile, this._userService.getNameForId(iFile.currentReviewer), fileAttributes));
-
-        const lastOpenedFileId = this._userPreferenceService.getLastOpenedFileForDossier(dossier.id);
-        newFiles.forEach(file => (file.lastOpened = file.fileId === lastOpenedFileId));
-
-        for (const newFile of newFiles) {
-            let found = false;
-
-            for (const oldFile of oldFiles) {
-                if (oldFile.fileId === newFile.fileId) {
-                    // emit when analysis count changed
-                    if (JSON.stringify(oldFile) !== JSON.stringify(newFile) && emitEvents) {
-                        this.fileChanged$.next(newFile);
-                    }
-                    if (oldFile.lastProcessed !== newFile.lastProcessed && emitEvents) {
-                        this.fileReanalysed$.next(newFile);
-                    }
-                    found = true;
-                    break;
-                }
-            }
-            // emit for new file
-            if (!found && emitEvents) {
-                this.fileChanged$.next(newFile);
-            }
-        }
-
-        const newDossier = new Dossier(dossier, newFiles, dossier.type);
-        this._dossiersService.replace(newDossier);
-
-        return newFiles;
-    }
 }
diff --git a/apps/red-ui/src/app/tokens.ts b/apps/red-ui/src/app/tokens.ts
index 2a85092ed..ca56f808f 100644
--- a/apps/red-ui/src/app/tokens.ts
+++ b/apps/red-ui/src/app/tokens.ts
@@ -1,3 +1,4 @@
 import { InjectionToken } from '@angular/core';
 
 export const BASE_HREF: InjectionToken = new InjectionToken('BASE_HREF');
+export const DOSSIER_ID: InjectionToken = new InjectionToken('DOSSIER_ID');
diff --git a/apps/red-ui/src/app/translations/annotation-types-translations.ts b/apps/red-ui/src/app/translations/annotation-types-translations.ts
index a65bb59f3..25bc736f1 100644
--- a/apps/red-ui/src/app/translations/annotation-types-translations.ts
+++ b/apps/red-ui/src/app/translations/annotation-types-translations.ts
@@ -2,16 +2,11 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { AnnotationSuperType } from '../models/file/annotation.wrapper';
 
 export const annotationTypesTranslations: { [key in AnnotationSuperType]: string } = {
-    'add-dictionary': _('annotation-type.add-dictionary'),
-    'change-legal-basis': _('annotation-type.change-legal-basis'),
     'declined-suggestion': _('annotation-type.declined-suggestion'),
     hint: _('annotation-type.hint'),
     'manual-redaction': _('annotation-type.manual-redaction'),
-    'pending-analysis': _('annotation-type.pending-analysis'),
     recommendation: _('annotation-type.recommendation'),
     redaction: _('annotation-type.redaction'),
-    'remove-dictionary': _('annotation-type.remove-dictionary'),
-    'remove-only-here': _('annotation-type.remove-only-here'),
     skipped: _('annotation-type.skipped'),
     'suggestion-add': _('annotation-type.suggestion-add'),
     'suggestion-add-dictionary': _('annotation-type.suggestion-add-dictionary'),
@@ -20,4 +15,5 @@ export const annotationTypesTranslations: { [key in AnnotationSuperType]: string
     'suggestion-force-redaction': _('annotation-type.suggestion-force-redaction'),
     'suggestion-remove': _('annotation-type.suggestion-remove'),
     'suggestion-remove-dictionary': _('annotation-type.suggestion-remove-dictionary'),
+    'suggestion-resize': _('annotation-type.suggestion-resize'),
 } as const;
diff --git a/apps/red-ui/src/app/utils/configuration.initializer.ts b/apps/red-ui/src/app/utils/configuration.initializer.ts
index 2b9010baf..d111c02af 100644
--- a/apps/red-ui/src/app/utils/configuration.initializer.ts
+++ b/apps/red-ui/src/app/utils/configuration.initializer.ts
@@ -1,4 +1,4 @@
-import { catchError, filter, mergeMap, take, tap } from 'rxjs/operators';
+import { catchError, filter, mergeMapTo, take, tap } from 'rxjs/operators';
 import { ConfigService } from '@services/config.service';
 import { Title } from '@angular/platform-browser';
 import { of } from 'rxjs';
@@ -15,7 +15,7 @@ export function configurationInitializer(
         keycloakService.keycloakEvents$
             .pipe(
                 filter(event => event.type === KeycloakEventType.OnReady),
-                mergeMap(() => generalSettingsService.getGeneralConfigurations()),
+                mergeMapTo(generalSettingsService.getGeneralConfigurations()),
                 tap(configuration => configService.updateDisplayName(configuration.displayName)),
                 catchError(() => {
                     title.setTitle('RedactManager');
diff --git a/apps/red-ui/src/app/utils/filter-utils.ts b/apps/red-ui/src/app/utils/filter-utils.ts
index 0e011eeaa..1b08223df 100644
--- a/apps/red-ui/src/app/utils/filter-utils.ts
+++ b/apps/red-ui/src/app/utils/filter-utils.ts
@@ -44,41 +44,35 @@ export function handleFilterDelta(oldFilters: INestedFilter[], newFilters: INest
     });
 }
 
-export const annotationFilterChecker = (input: File | Dossier, filter: INestedFilter) => {
+export const annotationFilterChecker = (file: File, filter: INestedFilter) => {
     switch (filter.id) {
         case 'analysis': {
-            if (input instanceof Dossier) {
-                return input.reanalysisRequired;
-            } else {
-                return input.analysisRequired;
-            }
+            return file.analysisRequired;
         }
         case 'suggestion': {
-            return input.hasSuggestions;
+            return file.hasSuggestions;
         }
         case 'redaction': {
-            return input.hasRedactions;
+            return file.hasRedactions;
         }
         case 'hint': {
-            return input.hintsOnly;
+            return file.hintsOnly;
         }
         case 'none': {
-            return input.hasNone;
+            return file.hasNone;
         }
         case 'updated': {
-            return input instanceof File && input.hasUpdates;
+            return file.hasUpdates;
         }
         case 'image': {
-            return input instanceof File && input.hasImages;
+            return file.hasImages;
         }
         case 'comment': {
-            return input instanceof File && input.hasAnnotationComments;
+            return file.hasAnnotationComments;
         }
     }
 };
 
-export const dossierStatusChecker = (dw: Dossier, filter: INestedFilter) => dw.hasStatus(filter.id);
-
 export const dossierMemberChecker = (dw: Dossier, filter: INestedFilter) => dw.hasMember(filter.id);
 
 export const dossierTemplateChecker = (dw: Dossier, filter: INestedFilter) => dw.dossierTemplateId === filter.id;
diff --git a/apps/red-ui/src/app/utils/sorters/super-type-sorter.ts b/apps/red-ui/src/app/utils/sorters/super-type-sorter.ts
index 87793d0dc..1be4b46d7 100644
--- a/apps/red-ui/src/app/utils/sorters/super-type-sorter.ts
+++ b/apps/red-ui/src/app/utils/sorters/super-type-sorter.ts
@@ -4,12 +4,8 @@ export const SuperTypeSorter: { [key in AnnotationSuperType]: number } = {
     'suggestion-change-legal-basis': 14,
     'suggestion-force-redaction': 15,
     'suggestion-recategorize-image': 16,
+    'suggestion-resize': 18,
     recommendation: 7,
-    'add-dictionary': 2,
-    'remove-dictionary': 3,
-    'pending-analysis': 4,
-    'change-legal-basis': 5,
-    'remove-only-here': 6,
     'suggestion-add-dictionary': 12,
     'suggestion-remove-dictionary': 13,
     'suggestion-add': 10,
diff --git a/apps/red-ui/src/assets/help-mode/links.json b/apps/red-ui/src/assets/help-mode/links.json
index 75250e5c3..73181a882 100644
--- a/apps/red-ui/src/assets/help-mode/links.json
+++ b/apps/red-ui/src/assets/help-mode/links.json
@@ -1,35 +1,119 @@
 {
-  "user-menu": {
-    "en": "https://docs.redactmanager.com/preview/en/user-menu.html",
+  "open-usermenu": {
+    "en": "https://docs.redactmanager.com/2.2/en/user-menu-and-profile.html",
     "de": "",
     "it": "",
     "fr": ""
   },
-  "filters": {
+  "filter-dossier-list": {
+    "en": "https://docs.redactmanager.com/2.2/en/creating-and-managing-dossiers/dossier-overview/dossier-list.html#UUID-e5177955-3e92-8627-0732-af8d4a2036e2",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "filter-document-list": {
     "en": "https://docs.redactmanager.com/preview/en/create-and-manage-dossier/dossier-overview/dossier-list.html",
     "de": "",
     "it": "",
     "fr": ""
   },
-  "quick-filters": {
+  "dossiers-quickfilter-my-dossiers": {
     "en": "https://docs.redactmanager.com/preview/en/create-and-manage-dossier/dossier-overview/dossier-list.html",
     "de": "",
     "it": "",
     "fr": ""
   },
-  "new-dossier": {
-    "en": "https://docs.redactmanager.com/preview/en/create-and-manage-dossier.html",
+  "search-in-entire-application": {
+    "en": "https://docs.redactmanager.com/2.2/en/searching-the-application.html",
     "de": "",
     "it": "",
     "fr": ""
   },
-  "search": {
+  "open-notifications": {
+    "en": "https://docs.redactmanager.com/2.2/en/notifications.html",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "dossier-list": {
     "en": "",
     "de": "",
     "it": "",
     "fr": ""
   },
-  "notifications": {
+  "new-dossier-button": {
+    "en": "https://docs.redactmanager.com/2.2/en/creating-and-managing-dossiers/dossier-overview/creating-a-new-dossier.html",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "edit-dossier-owner": {
+    "en": "",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "edit-dossier-member": {
+    "en": "",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "filter-for-editing-notes": {
+    "en": "",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "filter-for-status": {
+    "en": "",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "edit-dossier": {
+    "en": "",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "standard-view": {
+    "en": "https://docs.redactmanager.com/2.2/en/editing-documents-in-the-editor/views-in-the-editor/standard-view.html",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "delta-view": {
+    "en": "https://docs.redactmanager.com/2.2/en/editing-documents-in-the-editor/views-in-the-editor/delta-view.html",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "preview-view": {
+    "en": "https://docs.redactmanager.com/2.2/en/editing-documents-in-the-editor/views-in-the-editor/preview.html",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "bulk-select-annotations": {
+    "en": "",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "workload-filter": {
+    "en": "",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "workload-annotations-list": {
+    "en": "",
+    "de": "",
+    "it": "",
+    "fr": ""
+  },
+  "assign-reviewer": {
     "en": "",
     "de": "",
     "it": "",
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index 7a0edcc5f..d480549e2 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -1,395 +1,482 @@
 {
+  "account-settings": "Account Einstellungen",
   "actions": {
     "all": "Alle",
-    "none": "Keiner"
+    "none": "Keine"
   },
   "active": "Aktiv",
   "add-dossier-dialog": {
     "actions": {
-      "save": "",
-      "save-and-add-members": ""
+      "save": "Speichern",
+      "save-and-add-members": "Speichern und Team zusammenstellen"
     },
     "errors": {
-      "dossier-already-exists": "",
-      "generic": ""
+      "dossier-already-exists": "Dieser Dossier-Name ist bereits vergeben!",
+      "generic": "Dossier konnte nicht gespeichert werden."
     },
     "form": {
       "description": {
-        "label": "",
-        "placeholder": ""
+        "label": "Beschreibung",
+        "placeholder": "Bitte geben Sie eine Beschreibung ein."
       },
-      "due-date": "",
+      "due-date": "Termin",
       "name": {
-        "label": "",
-        "placeholder": ""
+        "label": "Dossier-Name",
+        "placeholder": "Geben Sie einen Namen ein."
       },
-      "template": "",
-      "watermark": ""
+      "template": "Dossier-Vorlage",
+      "watermark": "Geschwärzte Dokumente mit Wasserzeichen versehen",
+      "watermark-preview": "Vorschau Dokumente mit Wasserzeichen versehen"
     },
-    "header-new": ""
+    "header-new": "Dossier erstellen"
   },
   "add-edit-dictionary": {
     "error": {
-      "dictionary-already-exists": "Wörterbuch mit diesem Namen existiert bereits!",
+      "dictionary-already-exists": "Ein Wörterbuch mit diesem Namen existiert bereits!",
       "generic": "Wörterbuch konnte nicht gespeichert werden!",
-      "invalid-color-or-rank": "Ungültige Farbe oder Rang! Der Rang wird bereits von einem anderen Wörterbuch verwendet oder die Farbe ist keine gültige HexColor!"
+      "invalid-color-or-rank": "Ungültige Farbe oder Rang! Der Rang wird bereits von einem anderen Wörterbuch verwendet oder die Farbe ist kein gültiger Hex-Farbcode!"
     },
     "form": {
-      "add-to-dictionary-action": "Verfügbar zum Hinzufügen zum Wörterbuch",
-      "case-sensitive": "Groß- und Kleinschreibung beachten",
-      "color": "Hex Farbe",
+      "add-to-dictionary-action": "Anwender können Einträge hinzufügen",
+      "case-sensitive": "Groß-/Kleinschreibung berücksichtigen",
+      "color": "Hex-Farbcode",
       "color-placeholder": "#",
       "description": "Beschreibung",
       "description-placeholder": "Beschreibung eingeben",
       "hint": "Hinweis",
-      "name": "Wörterbuchname",
-      "name-hint": "Kann nach dem Speichern nicht bearbeitet werden.",
-      "name-placeholder": "Name eingeben",
+      "name": "Name des Wörterbuches",
+      "name-hint": "Kann nach dem Speichern nicht mehr bearbeitet werden.",
+      "name-placeholder": "Namen eingeben",
       "rank": "Rang",
       "rank-placeholder": "1000",
-      "redaction": "Redaktion"
+      "redaction": "Schwärzung",
+      "technical-name": "Technischer Name"
     },
     "save": "Wörterbuch speichern",
-    "title": ""
+    "title": "{type, select, edit{Wörterbuch {name} bearbeiten} create{Wörterbuch erstellen} other{}}"
   },
   "add-edit-dossier-attribute": {
     "error": {
-      "generic": ""
+      "generic": "Attribut konnte nicht gespeichert werden!"
     },
     "form": {
-      "label": "",
-      "label-placeholder": "",
-      "placeholder": "",
-      "type": ""
+      "label": "Name des Attributs",
+      "label-placeholder": "Namen eingeben",
+      "placeholder": "Platzhalter für Attribut",
+      "type": "Attributtyp"
     },
-    "save": "",
-    "title": ""
+    "save": "Attribut speichern",
+    "title": "{type, select, edit{Dossier-Attribut {name} bearbeiten} create{Neues Dossier-Attribut hinzufügen} other{}}"
   },
   "add-edit-dossier-template": {
+    "error": {
+      "conflict": "Dossiervorlage konnte nicht erstellt werden: Es existiert bereits eine Dossiervorlage mit demselben Namen.",
+      "generic": "Fehler beim Erstellen der Dossiervorlage."
+    },
     "form": {
       "description": "Beschreibung",
       "description-placeholder": "Beschreibung eingeben",
-      "name": "Name der Dossiervorlage",
-      "name-placeholder": "Name eingeben",
+      "name": "Name der Dossier-Vorlage",
+      "name-placeholder": "Namen eingeben",
       "valid-from": "Gültig ab",
       "valid-to": "Gültig bis"
     },
-    "save": "Speichern Sie die Dossiervorlage",
-    "title": ""
+    "save": "Dossier-Vorlage speichern",
+    "title": "{type, select, edit{Dossier-Vorlage {name} bearbeiten} create{Dossier-Vorlage erstellen} other{}}"
   },
   "add-edit-file-attribute": {
     "form": {
       "column-header": "CSV-Spaltenüberschrift",
-      "column-header-placeholder": "Geben Sie den CSV-Spaltenkopf ein",
-      "name": "Attributname",
-      "name-placeholder": "Name eingeben",
-      "primary": "Als primär festlegen",
-      "read-only": "Schreibgeschützt machen",
-      "type": "Art"
+      "column-header-placeholder": "Spaltenüberschrift für CSV eingeben",
+      "displayedInFileList": "Wird in der Dokumentenliste angezeigt",
+      "filterable": "Filterbar",
+      "name": "Name des Attributs",
+      "name-placeholder": "Namen eingeben",
+      "primary": "Zum Primärattribut machen",
+      "read-only": "Schreibgeschützt",
+      "type": "Typ"
     },
     "save": "Attribut speichern",
-    "title": ""
+    "title": "{type, select, edit{Edit {name}} create{Add New} other{}} Datei-Attribut"
+  },
+  "add-edit-justification": {
+    "actions": {
+      "cancel": "Abbrechen",
+      "save": "Begründung speichern"
+    },
+    "form": {
+      "description": "Beschreibung",
+      "description-placeholder": "Beschreibung eingeben",
+      "name": "Name",
+      "name-placeholder": "Name eingeben",
+      "reason": "Rechtliche Grundlage",
+      "reason-placeholder": "Rechtsgrundlage eingeben"
+    },
+    "title": "{type, select, edit{Edit {name}} create{Add New} other{}} Begründung"
   },
   "add-edit-user": {
     "actions": {
-      "cancel": "Stornieren",
+      "cancel": "Abbrechen",
       "delete": "Benutzer löschen",
       "save": "Benutzer speichern",
       "save-changes": "Änderungen speichern"
     },
+    "error": {
+      "email-already-used": "Diese E-Mail-Adresse wird bereits von einem anderen Benutzer verwendet!",
+      "generic": "Benutzer konnte nicht gespeichert werden!"
+    },
     "form": {
-      "email": "Email",
+      "email": "E-Mail",
       "first-name": "Vorname",
       "last-name": "Nachname",
-      "reset-password": "",
+      "reset-password": "Passwort zurücksetzen",
       "role": "Rolle"
     },
-    "title": ""
+    "title": "{type, select, edit{Benutzer bearbeiten} create{Neuen Benutzer hinzufügen} other{}}"
   },
   "admin-side-nav": {
-    "dossier-templates": "",
-    "settings": ""
+    "dossier-templates": "Dossier-Vorlage",
+    "settings": "Einstellungen"
   },
   "annotation": "Anmerkung",
   "annotation-actions": {
+    "resize": {
+      "label": "Größe ändern"
+    },
+    "resize-accept": {
+      "label": "Größe speichern"
+    },
+    "resize-cancel": {
+      "label": "Größenänderung abbrechen"
+    },
     "accept-recommendation": {
       "label": "Empfehlung annehmen"
     },
     "accept-suggestion": {
-      "label": "Vorschlag annehmen"
+      "label": "Genehmigen und zum Wörterbuch hinzufügen"
     },
     "edit-reason": {
-      "label": ""
+      "label": "Begründung bearbeiten"
     },
     "force-redaction": {
-      "label": "Redaktion erzwingen"
+      "label": "Schwärzung erzwingen"
     },
     "hide": "Ausblenden",
     "message": {
       "dictionary": {
         "add": {
-          "error": "Fehler beim Hinzufügen des Eintrags zum Wörterbuch: {error}",
-          "success": "Eintrag zum Wörterbuch hinzugefügt. Änderungen werden nach einer erneuten Analyse sichtbar."
+          "conflict-error": "''{content}'' kann nicht zum {dictionaryName}-Wörterbuch hinzugefügt werden, da es als allgemeiner Begriff erkannt wurde, der zu oft in Texten vorkommt.",
+          "error": "Fehler beim Hinzufügen des neuen Wörterbucheintrags: {error}",
+          "success": "Eintrag zum Wörterbuch hinzugefügt. Änderungen nach der Reanalyse sichtbar."
         },
         "approve": {
-          "error": "Wörterbucheintrag konnte nicht genehmigt werden: {error}",
-          "success": "Wörterbucheintrag genehmigt. Änderungen werden nach einer erneuten Analyse sichtbar."
+          "error": "Fehler beim Genehmigen des Wörterbucheintrags: {error}",
+          "success": "Neuer Wörterbucheintrag wurde genehmigt. Änderungen sind nach der Reanalyse sichtbar."
         },
         "decline": {
-          "error": "Fehler beim Ablehnen des Wörterbuchvorschlags: {error}",
-          "success": "Wörterbuchvorschlag abgelehnt."
+          "error": "Fehler beim Ablehnen des neuen Wörterbucheintrags: {error}",
+          "success": "Vorschlag für das Wörterbuch abgelehnt."
         },
         "remove": {
           "error": "Fehler beim Entfernen des Wörterbucheintrags: {error}",
-          "success": "Wörterbucheintrag entfernt!"
+          "success": "Wörterbucheintrag wurde gelöscht!"
         },
         "request-remove": {
-          "error": "Das Entfernen des Wörterbucheintrags konnte nicht angefordert werden: {error}",
-          "success": "Angefordert, Wörterbucheintrag zu entfernen!"
+          "error": "Dossier-Vorlage",
+          "success": "Löschung des Wörterbucheintrags wurde vorgeschlagen!"
         },
         "suggest": {
-          "error": "Vorschlag zum Ändern des Wörterbuchs konnte nicht gespeichert werden: {error}",
-          "success": "Vorschlag zur Wörterbuchänderung gespeichert!"
+          "error": "Vorschlag für Änderung des Wörterbuchs konnte nicht gespeichert werden: {error}",
+          "success": "Vorschlag für die Änderung des Wörterbuchs gespeichert!"
         },
         "undo": {
-          "error": "Fehler beim Rückgängigmachen: {error}",
-          "success": "Rückgängig machen erfolgreich"
+          "error": "Die Aktion konnte nicht rückgängig gemacht werden. Fehler: {error}",
+          "success": "Rückgängigmachen erfolgreich"
         }
       },
       "manual-redaction": {
         "add": {
-          "error": "Fehler beim Speichern der Redaktion: {error}",
-          "success": "Redaktion hinzugefügt!"
+          "error": "Fehler beim Speichern der Schwärzung: {error}",
+          "success": "Schwärzung hinzugefügt!"
         },
         "approve": {
-          "error": "Fehler beim Genehmigen der Redaktion: {error}",
-          "success": "Redaktionsvorschlag genehmigt!"
+          "error": "Fehler beim Genehmigen des Vorschlags: {error}",
+          "success": "Vorschlag genehmigt"
         },
         "change-legal-basis": {
-          "error": "",
-          "success": ""
+          "error": "Fehler beim Bearbeiten der in der Anmerkung genannten Begründung: {error}",
+          "success": "In der Anmerkung genannte Begründung wurde bearbeitet."
         },
         "decline": {
-          "error": "Redaktion konnte nicht abgelehnt werden: {error}",
-          "success": "Redaktionsvorschlag abgelehnt!"
+          "error": "Fehler beim Ablehnen des Vorschlags: {error}",
+          "success": "Vorschlag abgelehnt"
         },
         "force-redaction": {
-          "error": "",
-          "success": ""
+          "error": "Die Schwärzung konnte nicht gespeichert werden!",
+          "success": "Schwärzung eingefügt!"
         },
         "recategorize-image": {
-          "error": "",
-          "success": ""
+          "error": "Rekategorisierung des Bildes gescheitert: {error}",
+          "success": "Bild wurde einer neuen Kategorie zugeordnet."
+        },
+        "remove": {
+          "error": "Fehler beim Entfernen der Schwärzung: {error}",
+          "success": "Schwärzung entfernt!"
         },
         "request-change-legal-basis": {
-          "error": "",
-          "success": ""
+          "error": "Fehler beim Vorschlagen der Änderung der Begründung:",
+          "success": "Die Änderung der in der Anmerkung genannten Begründung wurde beantragt."
         },
         "request-force-redaction": {
-          "error": "",
-          "success": ""
+          "error": "Fehler beim Speichern des Schwärzungsvorschlags: {error}",
+          "success": "Vorschlag einer Schwärzung gespeichert"
         },
         "request-image-recategorization": {
-          "error": "",
-          "success": ""
+          "error": "Fehler beim Vorschlagen der Neukategorisierung des Bilds: {error}",
+          "success": "Bild-Neuklassifizierung angefordert."
+        },
+        "request-remove": {
+          "error": "Fehler beim Erstellen des Vorschlags für das Entfernen der Schwärzung: {error}",
+          "success": "Entfernen der Schwärzung wurde vorgeschlagen!"
         },
         "suggest": {
-          "error": "Fehler beim Speichern des Redaktionsvorschlags: {error}",
-          "success": "Redaktionsvorschlag gespeichert"
+          "error": "Vorschlag einer Schwärzung wurde nicht gespeichert: {error}",
+          "success": "Vorschlag einer Schwärzung gespeichert"
         },
         "undo": {
-          "error": "Fehler beim Rückgängigmachen: {error}",
-          "success": "Rückgängig machen erfolgreich"
+          "error": "Die Aktion konnte nicht rückgängig gemacht werden. Fehler: {error}",
+          "success": "erfolgreich Rückgängig gemacht"
         }
       }
     },
-    "recategorize-image": "",
+    "recategorize-image": "neu kategorisieren",
     "reject-suggestion": "Vorschlag ablehnen",
     "remove-annotation": {
       "false-positive": "Falsch positiv",
-      "only-here": "Nur hier entfernen",
+      "only-here": "nur hier entfernen",
       "remove-from-dict": "Aus dem Wörterbuch entfernen"
     },
-    "show": "Show",
-    "undo": "Rückgängig machen"
+    "show": "Zeigen",
+    "undo": "Rückgängig"
+  },
+  "annotation-engines": {
+    "dictionary": "{isHint, select, true{Hint} other{Redaction}} basierend auf Wörterbuch",
+    "ner": "Redaktion basierend auf KI",
+    "rule": "Schwärzung basierend auf Regel {rule}"
   },
   "annotation-type": {
-    "add-dictionary": "Ausstehend zum Wörterbuch hinzufügen",
-    "change-legal-basis": "",
+    "suggestion-resize": "Vorgeschlagene Größenänderung",
     "declined-suggestion": "Abgelehnter Vorschlag",
     "hint": "Hinweis",
-    "manual-redaction": "Manuelle Redaktion",
-    "pending-analysis": "Bis zur erneuten Analyse",
+    "manual-redaction": "Manuelle Schwärzung",
     "recommendation": "Empfehlung",
-    "redaction": "Redaktion",
-    "remove-dictionary": "Ausstehend aus dem Wörterbuch entfernen",
-    "remove-only-here": "Ausstehende Entfernung (nur hier)",
+    "redaction": "Schwärzung",
+    "remove-only-here": "Ausstehende Löschung (nur hier)",
     "skipped": "Übersprungen",
-    "suggestion-add": "Vorgeschlagene Redaktion",
-    "suggestion-add-dictionary": "Vorgeschlagenes Wörterbuch hinzufügen",
-    "suggestion-change-legal-basis": "",
-    "suggestion-force-redaction": "Redaktion der Vorschlagskraft",
-    "suggestion-recategorize-image": "",
-    "suggestion-remove": "Vorgeschlagene Redaktionsentfernung",
-    "suggestion-remove-dictionary": "Vorgeschlagene Wörterbuchentfernung"
+    "suggestion-add": "Vorschlag für Schwärzung",
+    "suggestion-add-dictionary": "Vorschlag für neuen Wörterbucheintrag",
+    "suggestion-change-legal-basis": "Vorschlag für Änderung der Rechtsgrundlage",
+    "suggestion-force-redaction": "Vorschlag für erzwungene Schwärzung",
+    "suggestion-recategorize-image": "Vorschlag für Rekategorisierung eines Bilds",
+    "suggestion-remove": "Vorschlagen, die Schwärzung zu entfernen",
+    "suggestion-remove-dictionary": "Vorschlag für Löschung eines Wörterbucheintrags"
   },
   "annotations": "Anmerkungen",
   "archived": "Archiviert",
   "assign-dossier-owner": {
     "dialog": {
-      "approvers": "",
-      "make-approver": "",
-      "no-approvers": "",
-      "no-reviewers": "",
-      "reviewers": "",
-      "search": "Suche...",
-      "single-user": "Inhaber"
+      "approvers": "Genehmiger",
+      "make-approver": "Zum Genehmiger ernennen",
+      "no-approvers": "Es gibt noch keine Genehmiger. Bitte aus der Listen unten auswählen.",
+      "no-reviewers": "Es gibt noch keine Reviewer.\nBitte aus der Liste unten auswählen.",
+      "reviewers": "Reviewer",
+      "search": "Suche ...",
+      "single-user": "Besitzer"
     }
   },
   "assign-owner": {
     "dialog": {
-      "cancel": "",
-      "label": "",
-      "save": "",
-      "title": ""
+      "cancel": "Abbrechen",
+      "label": "{type, select, approver{Genehmiger} reviewer{Reviewer} other{}}",
+      "save": "Speichern",
+      "title": "Datei verwalten: {type, select, approver{Genehmiger} reviewer{Reviewer} other{}}"
     }
   },
   "assign-user": {
-    "cancel": "",
-    "save": ""
+    "cancel": "Abbrechen",
+    "save": "Speichern"
   },
-  "audit": "Prüfung",
+  "assignment": {
+    "owner": "{ownerName} wurde erfolgreich zum Dossier {dossierName} hinzugefügt.",
+    "reviewer": "{reviewerName} wurde erfolgreich zum Dokument {filename} hinzugefügt."
+  },
+  "audit": "Aktivitätenprotokoll",
   "audit-screen": {
-    "all-users": "Alle Nutzer",
+    "all-users": "Alle Benutzer",
     "categories": {
-      "all-categories": "",
-      "audit": "",
-      "audit-log": "",
-      "dictionary": "",
-      "document": "",
-      "dossier": "",
-      "dossier-template": "",
-      "download": "",
-      "license": "",
-      "project": "",
-      "project-template": "",
-      "user": ""
+      "all-categories": "Alle Bereiche",
+      "audit": "Aktivitätenprotokoll",
+      "audit-log": "Aktivitätenprotokoll",
+      "dictionary": "Wörterbuch",
+      "document": "Dokument",
+      "dossier": "Dossier",
+      "dossier-template": "Dossier-Vorlage",
+      "download": "Download",
+      "license": "Lizenz",
+      "project": "Projekt",
+      "project-template": "Projekt-Vorlage",
+      "user": "Nutzer"
     },
     "no-data": {
-      "title": "Keine verfügbaren Protokolle."
+      "title": "Keine Protokolle verfügbar."
     },
     "table-col-names": {
       "category": "Kategorie",
       "date": "Datum",
-      "message": "Botschaft",
-      "user": "Benutzer"
+      "message": "Nachricht",
+      "user": "Nutzer"
     },
     "table-header": {
-      "title": "{length} Protokolle"
+      "title": "{length} {length, plural, one{Log} other{Logs}}"
     },
-    "to": "zu"
+    "to": "bis"
   },
   "auth-error": {
-    "heading": "Ihr Benutzer verfügt nicht über die erforderlichen RED- * -Rollen, um auf diese Anwendung zuzugreifen. Bitte kontaktieren Sie Ihren Administrator für den Zugriff!",
-    "heading-with-link": "Ihr Benutzer verfügt nicht über die erforderlichen RED- * -Rollen, um auf diese Anwendung zuzugreifen. Bitte kontaktieren Sie Ihren Administrator für den Zugriff!",
-    "heading-with-name": "Ihr Benutzer verfügt nicht über die erforderlichen RED- * -Rollen, um auf diese Anwendung zuzugreifen. Bitte kontaktieren Sie {adminName} für den Zugriff!",
-    "heading-with-name-and-link": "Ihr Benutzer verfügt nicht über die erforderlichen RED- * -Rollen, um auf diese Anwendung zuzugreifen. Bitte kontaktieren Sie {adminName} für den Zugriff!",
+    "heading": "Ihr Benutzer verfügt nicht über die erforderlichen RED-*-Rollen, um auf diese Applikation zugreifen zu können. Bitte kontaktieren Sie Ihren Admin, um den Zugang anzufordern!",
+    "heading-with-link": "Ihr Benutzer verfügt nicht über die erforderlichen RED-*-Rollen, um auf diese Applikation zugreifen zu können. Bitte kontaktieren Sie Ihren Admin, um den Zugang anzufordern!",
+    "heading-with-name": "Ihr Benutzer verfügt nicht über die erforderlichen RED-*-Rollen, um auf diese Applikation zugreifen zu können. Bitte kontaktieren Sie {adminName}, um den Zugang anzufordern!",
+    "heading-with-name-and-link": "Ihr Benutzer verfügt nicht über die erforderlichen RED-*-Rollen, um auf diese Applikation zugreifen zu können. Bitte kontaktieren Sie {adminName}, um den Zugang anzufordern!",
     "logout": "Ausloggen"
   },
-  "by": "durch",
-  "change-legal-basis-dialog": {
+  "by": "von",
+  "resize-annotation-dialog": {
     "actions": {
-      "cancel": "",
-      "save": ""
+      "cancel": "Abbrechen",
+      "save": "Änderungen speichern"
     },
     "content": {
-      "comment": "",
-      "legalBasis": "",
-      "reason": "",
-      "reason-placeholder": ""
+      "comment": "Kommentar"
     },
-    "header": ""
+    "header": "Schwärzung ändern"
+  },
+  "change-legal-basis-dialog": {
+    "actions": {
+      "cancel": "Abbrechen",
+      "save": "Änderungen speichern"
+    },
+    "content": {
+      "comment": "Kommentar",
+      "legalBasis": "Rechtsgrundlage",
+      "reason": "Begründung für die Schwärzung auswählen",
+      "reason-placeholder": "Wählen Sie eine Begründung aus ..."
+    },
+    "header": "Begründung für die Schwärzung bearbeiten"
   },
   "comments": {
-    "add-comment": "Einen Kommentar hinzufügen",
-    "comments": "{count} Kommentare",
-    "hide-comments": "Ausblenden"
+    "add-comment": "Kommentar eingeben",
+    "comments": "{count} {count, plural, one{Kommentar} other{Kommentare}}",
+    "hide-comments": "Kommentare verbergen"
   },
   "common": {
     "close": "Ansicht schließen",
     "confirmation-dialog": {
       "confirm": "Ja",
       "deny": "Nein",
-      "description": "Diese Aktion muss bestätigt werden. Möchten Sie fortfahren?",
+      "description": "Diese Aktion erfordert eine Bestätigung. Möchten Sie fortfahren?",
       "title": "Aktion bestätigen"
     }
   },
-  "configurations": "Konfigurationen",
+  "configurations": "Einstellungen",
   "confirm-delete-file-attribute": {
-    "cancel": "",
-    "delete": "",
-    "impacted-documents": "",
-    "lost-details": "Alle eingegebenen Details in den Dokumenten gehen verloren",
-    "title": "",
-    "toast-error": "Bitte bestätigen Sie, dass Sie die Auswirkungen Ihrer Handlung verstehen!",
-    "warning": "Achtung: Dies kann nicht rückgängig gemacht werden!"
+    "cancel": "{type, select, single{Attribut} bulk{Attribute} other{}} behalten",
+    "delete": "{type, select, single{Attribut} bulk{Attribute} other{}} löschen",
+    "impacted-documents": "Alle Dokumente {type, select, single{ist} bulk{sind} other{}} betroffen",
+    "lost-details": "Alle in die Dokumente eingegebenen Daten gehen verloren",
+    "title": "{type, select, single{{name}} bulk{Datei-Attribute} other{}} löschen",
+    "toast-error": "Bitte bestätigen Sie, dass Ihnen die Konsequenzen dieser Aktion bewusst sind!",
+    "warning": "Achtung: Diese Aktion kann nicht rückgängig gemacht werden!"
   },
   "confirm-delete-users": {
-    "cancel": "",
-    "delete": "",
-    "impacted-documents": "",
-    "impacted-dossiers": "{dossiersCount} Dossiers sind betroffen",
-    "title": "",
-    "toast-error": "Bitte bestätigen Sie, dass Sie die Auswirkungen Ihrer Handlung verstehen!",
-    "warning": "Achtung: Dies kann nicht rückgängig gemacht werden!"
+    "cancel": "{usersCount, plural, one{Benutzer} other{Benutzer}} behalten",
+    "delete": "{usersCount, plural, one{Benutzer} other{Benutzer}} löschen",
+    "impacted-documents": "Betroffen sind alle Dokumente, deren Review durch den/die {usersCount, plural, one{user} other{users}} noch aussteht",
+    "impacted-dossiers": "{dossiersCount} {dossiersCount, plural, one{Dossier} other{Dossiers}} sind betroffen",
+    "title": "{usersCount, plural, one{Benutzer} other{Benutzer}} aus dem Arbeitsbereich entfernen",
+    "toast-error": "Bitte bestätigen Sie, dass Ihnen die Konsequenzen dieser Aktion bewusst sind!",
+    "warning": "Achtung: Diese Aktion kann nicht rückgängig gemacht werden!"
   },
   "confirmation-dialog": {
+    "approve-file": {
+      "question": "Dieses Dokument enthält ungesehene Änderungen. Möchten Sie es trotzdem genehmigen?",
+      "title": "Warnung!"
+    },
+    "approve-multiple-files": {
+      "question": "Mindestens eine der ausgewählten Dateien enthält ungesehene Änderungen. Möchten Sie sie trotzdem genehmigen?",
+      "title": "Warnung!"
+    },
     "assign-file-to-me": {
-      "question": "Dieses Dokument wird derzeit von einer anderen Person geprüft. Möchten Sie der Prüfer werden und sich diesem Dokument zuordnen?",
-      "title": "Prüfer neu zuweisen"
+      "question": "Dieses Dokument wird gerade von einer anderen Person geprüft. Möchten Sie Reviewer werden und sich selbst dem Dokument zuweisen?",
+      "title": "Neuen Reviewer zuweisen"
     },
     "compare-file": {
-      "question": "",
-      "title": ""
+      "question": "Achtung! 

 Seitenzahl stimmt nicht überein, aktuelles Dokument hat {currentDocumentPageCount} Seite(n). Das hochgeladene Dokument hat {compareDocumentPageCount} Seite(n). 

 Möchten Sie fortfahren?",
+      "title": "Vergleichen mit: {fileName}"
     },
     "delete-dossier": {
-      "confirmation-text": "Lösche Dossier",
-      "deny-text": "",
-      "input-label": "",
-      "question": "Möchten Sie fortfahren?",
-      "title": "Dossier {dossierName}"
+      "confirmation-text": "Dossier löschen",
+      "deny-text": "Dossier behalten",
+      "question": "Möchten Sie dieses Dokument wirklich löschen?",
+      "title": "{dossierName} löschen"
     },
     "delete-file": {
       "question": "Möchten Sie fortfahren?",
       "title": "Dokument löschen"
+    },
+    "delete-justification": {
+      "question": "Möchten Sie {count, plural, one{diese Begründung} other{diese Begründung}} wirklich löschen?",
+      "title": "{count, plural, one{{justificationName}} other{ausgewählte Begründungen}} löschen"
+    },
+    "input-label": "Bitte geben Sie unten Folgendes ein, um fortzufahren",
+    "permanently-delete-file": {
+      "confirmation-text": "{filesCount, plural, one{Document} other{Documents}} löschen",
+      "deny-text": "{filesCount, plural, one{Dokument} other{Dokumente}} behalten",
+      "question": "Möchten Sie {filesCount, plural, one{dieses Dokument} other{diese Dokumente}} wirklich löschen?",
+      "title": "{filesCount, plural, one{{fileName}} other{ausgewählte Dokumente}} löschen"
+    },
+    "upload-report-template": {
+      "alternate-confirmation-text": "Als Bericht für mehrere Dokumente hochladen",
+      "confirmation-text": "Als Bericht für ein Dokument hochladen",
+      "deny-text": "Uploads abbrechen",
+      "question": "Wählen Sie bitte aus, ob {fileName} eine Berichtsvorlage für eine oder für mehrere Dateien ist",
+      "title": "Upload der Berichtsvorlage"
     }
   },
-  "content": "Grund",
-  "default-colors": "Standardfarben",
+  "content": "Begründung",
+  "default-colors": "Farbeinstellungen",
   "default-colors-screen": {
     "action": {
       "edit": "Farbe bearbeiten"
     },
     "table-col-names": {
       "color": "Farbe",
-      "key": "Art"
+      "key": "Typ"
     },
     "table-header": {
-      "title": "{length} Standardfarben"
+      "title": "{length} Standard{length, plural, one{farbe} other{farben}}"
     },
     "types": {
       "analysisColor": "Analyse",
       "defaultColor": "Standardfarbe",
-      "dictionaryRequestColor": "Wörterbuchanforderung",
-      "manualRedactionColor": "Manuelle Redaktion",
+      "dictionaryRequestColor": "Wörterbuch",
+      "manualRedactionColor": "Manuelle Schwärzung",
       "notRedacted": "Übersprungen",
       "previewColor": "Vorschau",
-      "requestAdd": "Anfrage hinzufügen",
-      "requestRemove": "Anfrage entfernen",
+      "requestAdd": "Neuen Wörterbucheintrag vorschlagen",
+      "requestRemove": "Anfrage entfernt",
       "updatedColor": "Aktualisiert"
     }
   },
-  "dev-mode": "[DEV-MODUS]",
+  "dev-mode": "DEV",
   "dictionaries": "Wörterbücher",
   "dictionary": "Wörterbuch",
   "dictionary-listing": {
@@ -399,17 +486,17 @@
     },
     "add-new": "Neues Wörterbuch",
     "bulk": {
-      "delete": ""
+      "delete": "Ausgewählte Wörterbücher löschen"
     },
-    "case-sensitive": "Groß- und Kleinschreibung beachten",
+    "case-sensitive": "Klein-/Großschreibung berücksichtigen",
     "no-data": {
       "action": "Neues Wörterbuch",
       "title": "Es gibt noch keine Wörterbücher."
     },
     "no-match": {
-      "title": "Keine Wörterbücher stimmen mit Ihren aktuellen Filtern überein."
+      "title": "Die ausgewählten Filter treffen auf kein Wörterbuch zu."
     },
-    "search": "Suche...",
+    "search": "Suche ...",
     "stats": {
       "charts": {
         "entries": "Einträge",
@@ -417,12 +504,12 @@
       }
     },
     "table-col-names": {
-      "hint-redaction": "Hinweis / Redaktion",
-      "rank": "Reihenfolge der Wichtigkeit",
-      "type": "Art"
+      "hint-redaction": "Hinweis/Schwärzung",
+      "rank": "Rang",
+      "type": "Typ"
     },
     "table-header": {
-      "title": "{length} Wörterbücher"
+      "title": "{length} {length, plural, one{Wörterbuch} other{Wörterbücher}}"
     }
   },
   "dictionary-overview": {
@@ -433,45 +520,45 @@
       "upload": "Wörterbuch hochladen"
     },
     "compare": {
-      "compare": "Vergleichen Sie",
-      "select-dossier": "Wählen Sie Dossiervorlage",
-      "select-dossier-template": "",
-      "select-dictionary": ""
+      "compare": "Vergleichen",
+      "select-dictionary": "Wörterbuch auswählen",
+      "select-dossier": "Dossier auswählen",
+      "select-dossier-template": "Dossiervorlage auswählen"
     },
     "dictionary-details": {
       "description": "Beschreibung"
     },
     "error": {
-      "entries-too-short": "Einige Einträge des Wörterbuchs liegen unter der Mindestlänge von 2. Diese sind rot hervorgehoben!",
-      "generic": "Etwas ist schief gelaufen ... Wörterbuch-Update fehlgeschlagen!"
+      "entries-too-short": "Einige Einträge im Wörterbuch unterschreiten die Mindestlänge von 2 Zeichen. Diese sind rot markiert.",
+      "generic": "Es ist ein Fehler aufgetreten ... Das Wörterbuch konnte nicht aktualisiert werden!"
     },
-    "revert-changes": "Zurückkehren",
+    "revert-changes": "Rückgängig machen",
     "save-changes": "Änderungen speichern",
-    "search": "Suche...",
-    "select-dictionary": "Wählen Sie oben ein Wörterbuch aus, um es mit dem aktuellen zu vergleichen.",
+    "search": "Suche ...",
+    "select-dictionary": "Wählen Sie oben das Wörterbuch aus, das Sie mit dem aktuellen Wörterbuch vergleichen möchten.",
     "success": {
       "generic": "Wörterbuch aktualisiert!"
     }
   },
-  "digital-signature": "Digitale Unterschrift",
+  "digital-signature": "Digitale Signatur",
   "digital-signature-screen": {
     "action": {
-      "certificate-not-valid-error": "Das hochgeladene Zertifikat gilt nicht zum Signieren von PDFs. Das PCKS.12-Format ist erforderlich.",
+      "certificate-not-valid-error": "Das hochgeladene Zertifikat eignet sich nicht zum Signieren von PDF-Dokumenten. Sie benötigen das Format PCKS#12.",
       "delete": "Digitale Signatur löschen",
-      "delete-error": "Fehler beim Entfernen der digitalen Signatur. Versuchen Sie es erneut.",
-      "delete-success": "Digitale Signatur entfernt. Redigierte Dateien werden nicht mehr signiert!",
+      "delete-error": "Die digitale Signatur konnte nicht entfernt werden, bitte versuchen Sie es erneut.",
+      "delete-success": "Die digitale Signatur wurde gelöscht. Geschwärzte Dateien werden nicht länger mit einer Signatur versehen!",
       "reset": "Zurücksetzen",
       "save": "Digitale Signatur speichern",
       "save-error": "Fehler beim Speichern der digitalen Signatur",
       "save-success": "Digitale Signatur erfolgreich gespeichert"
     },
     "certificate-name": {
-      "label": "Zertifikatname",
-      "placeholder": "Zertifikatname"
+      "label": "Name des Zertifikats",
+      "placeholder": "Name des Zertifikats"
     },
     "contact-info": {
-      "label": "Kontakt Informationen",
-      "placeholder": "Kontakt Informationen"
+      "label": "Kontaktdaten",
+      "placeholder": "Kontaktdaten"
     },
     "location": {
       "label": "Ort",
@@ -479,122 +566,118 @@
     },
     "no-data": {
       "action": "Zertifikat hochladen",
-      "title": "Es ist kein Zertifikat für digitale Signatur konfiguriert. Laden Sie zum Signieren redigierter Dokumente ein PCKS.12-Zertifikat hoch."
+      "title": "Es ist kein Zertifikat für die digitale Signatur konfiguriert. Laden Sie ein PCKS#12-Zertifikat hoch, um Ihre geschwärzten Dokumente zu signieren."
     },
     "password": {
-      "label": "Zertifikat Passwort / Schlüssel",
+      "label": "Zertifikatspasswort/-schlüssel",
       "placeholder": "Passwort"
     },
     "reason": {
-      "label": "Grund",
-      "placeholder": "Grund"
+      "label": "Begründung",
+      "placeholder": "Begründung"
     }
   },
   "document-info": {
-    "save": "Dokumentinformationen speichern",
-    "title": "Dateiattribute einführen"
+    "save": "Dokumenteninformation speichern",
+    "title": "Datei-Attribute anlegen"
   },
+  "dossier": "Dossier",
   "dossier-attribute-types": {
-    "date": "",
-    "image": "",
-    "number": "",
-    "text": ""
+    "date": "Datum",
+    "image": "Bild",
+    "number": "Nummer",
+    "text": "Text"
   },
-  "dossier-attributes": "",
+  "dossier-attributes": "Dossier-Attribut",
   "dossier-attributes-listing": {
     "action": {
-      "delete": "",
-      "edit": ""
+      "delete": "Attribut löschen",
+      "edit": "Attribut bearbeiten"
     },
-    "add-new": "",
+    "add-new": "Neues Attribut",
     "bulk": {
-      "delete": ""
+      "delete": "Ausgewähltes Attribut löschen"
     },
     "no-data": {
-      "action": "",
-      "title": ""
+      "action": "Neues Attribut",
+      "title": "Es sind keine Dossier-Attribute vorhanden"
     },
     "no-match": {
-      "title": ""
+      "title": "Die ausgewählten Filter treffen auf kein Attribut zu."
     },
-    "search": "",
+    "search": "Suche ...",
     "table-col-names": {
-      "label": "",
-      "placeholder": "",
-      "type": ""
+      "label": "Label",
+      "placeholder": "Platzhalter",
+      "type": "Typ"
     },
     "table-header": {
-      "title": ""
+      "title": "{length} {length, plural, one{Dossier-Attribut} other{Dossier-Attribute}}"
     }
   },
   "dossier-details": {
     "assign-members": "Mitglieder zuweisen",
     "collapse": "Details ausblenden",
-    "edit-owner": "",
-    "expand": "Zeige Details",
+    "edit-owner": "Eigentümer bearbeiten",
+    "expand": "Details zeigen",
     "members": "Mitglieder",
-    "owner": "Inhaber",
-    "see-less": "Weniger sehen",
-    "title": "Dossier Details"
-  },
-  "dossier-dictionary-dialog": {
-    "cancel": "",
-    "save-changes": "",
-    "title": ""
+    "owner": "Eigentümer",
+    "see-less": "Weniger anzeigen",
+    "title": "Dossier-Details"
   },
   "dossier-listing": {
     "add-new": "Neues Dossier",
     "delete": {
       "action": "Dossier löschen",
-      "delete-failed": "Fehler beim Löschen des Dossiers: {dossierName}"
+      "delete-failed": "Das Dossier {dossierName} konnte nicht gelöscht werden"
     },
     "edit": {
       "action": "Dossier bearbeiten"
     },
-    "no-data": {
-      "action": "Neues Dossier",
-      "title": "Sie haben derzeit keine Dossiers."
-    },
-    "no-match": {
-      "title": "Keine Dossiers stimmen mit Ihren aktuellen Filtern überein."
-    },
-    "quick-filters": {
-      "my-dossiers": "",
-      "other": "",
-      "to-approve": "",
-      "to-review": ""
-    },
-    "reanalyse": {
-      "action": "Analysieren Sie das gesamte Dossier"
-    },
     "filters": {
       "label": "Dossiername",
       "search": "Dossiername..."
     },
+    "no-data": {
+      "action": "Neues Dossier",
+      "title": "Sie haben momentan keine Dossiers."
+    },
+    "no-match": {
+      "title": "Die ausgewählten Filter treffen auf kein Dossier zu."
+    },
+    "quick-filters": {
+      "my-dossiers": "Meine Dossiers",
+      "other": "Sonstige",
+      "to-approve": "Zu Genehmigen",
+      "to-review": "Zu Überprüfen"
+    },
+    "reanalyse": {
+      "action": "Gesamtes Dossier analysieren"
+    },
     "stats": {
       "analyzed-pages": "Seiten",
       "charts": {
         "dossiers": "Dossiers",
-        "total-documents": "Gesamtdokument (e)"
+        "total-documents": "Anzahl der Dokumente"
       },
-      "total-people": "Benutzer insgesamt"
+      "total-people": "Anzahl der Benutzer"
     },
     "table-col-names": {
       "name": "Name",
-      "needs-work": "Arbeitsbelastung",
-      "owner": "Inhaber",
+      "needs-work": "Arbeitsvorrat",
+      "owner": "Besitzer",
       "status": "Status"
     },
     "table-header": {
-      "title": "{length} aktive Dossiers"
+      "title": "{length} {length, plural, one{aktives Dossier} other{aktive Dossiers}}"
     }
   },
   "dossier-overview": {
     "approve": "Genehmigen",
-    "approve-disabled": "Die Datei kann erst genehmigt werden, wenn sie mit den neuesten Wörterbüchern analysiert und alle Vorschläge verarbeitet wurden.",
-    "assign-approver": "",
-    "assign-me": "Zuweisen zu mir",
-    "assign-reviewer": "",
+    "approve-disabled": "Das Dokument kann erst genehmigt werden, wenn eine Analyse auf Basis der aktuellen Wörterbücher durchgeführt wurde und die Vorschläge bearbeitet wurden.",
+    "assign-approver": "Genehmiger zuordnen",
+    "assign-me": "Mir zuteilen",
+    "assign-reviewer": "Überprüfer zuordnen",
     "bulk": {
       "delete": "Dokumente löschen",
       "reanalyse": "Dokumente analysieren"
@@ -604,102 +687,109 @@
     },
     "dossier-details": {
       "attributes": {
-        "expand": "",
-        "image-uploaded": "",
-        "show-less": ""
+        "expand": "{count} {count, plural, one{benutzerdefiniertes Attribut} other{benutzerdefinierte Attribute}}",
+        "image-uploaded": "Bild hochgeladen",
+        "show-less": "weniger anzeigen"
       },
       "charts": {
         "documents-in-dossier": "Dokumente im Dossier"
       },
       "description": "Beschreibung",
-      "dictionary": "",
+      "dictionary": "Dossier-Wörterbuch",
       "stats": {
-        "analysed-pages": "{count} Seiten",
+        "analysed-pages": "{count} {count, plural, one{Seite} other{Seiten}}",
         "created-on": "Erstellt am {date}",
-        "documents": "{count} Dokumente",
-        "due-date": "Geburtstermin",
-        "people": "{count} Benutzer"
+        "deleted": "{count} gelöschte Dateien",
+        "documents": "{count} {count, plural, one{Dokument} other{Dokumente}}",
+        "due-date": "Fällig am {date}",
+        "people": "{count} {count, plural, one{Benutzer} other{Benutzer}}"
       }
     },
     "download-file": "Herunterladen",
-    "download-file-disabled": "Das Herunterladen ist nur für genehmigte Dateien zulässig",
+    "download-file-disabled": "Nur genehmigte Dateien können heruntergeladen werden",
     "file-listing": {
       "file-entry": {
-        "file-error": "Nachbearbeitung erforderlich",
-        "file-pending": "Steht aus...",
-        "file-processing": "wird bearbeitet"
+        "file-error": "Reanalyse erforderlich",
+        "file-pending": "Ausstehend ...",
+        "file-processing": "Wird analysiert"
       }
     },
-    "header-actions": {
-      "edit": "Bearbeiten",
-      "upload-document": "Dokument hochladen"
-    },
-    "new-rule": {
-      "toast": {
-        "actions": {
-          "reanalyse-all": "Analysieren Sie alle"
-        }
-      }
-    },
-    "no-data": {
-      "action": "Dokument hochladen",
-      "title": "Es liegen noch keine Dokumente vor."
-    },
-    "no-match": {
-      "title": "Keine Dokumente stimmen mit Ihren aktuellen Filtern überein."
-    },
-    "ocr-file": "OCR-Dokument",
-    "ocr-performed": "Für diese Datei wurde eine OCR durchgeführt.",
-    "quick-filters": {
-      "assigned-to-me": "",
-      "assigned-to-others": "",
-      "recent": "",
-      "unassigned": ""
-    },
-    "reanalyse-dossier": {
-      "error": "Dateien für die erneute Analyse konnten nicht geplant werden. Bitte versuche es erneut.",
-      "success": "Dateien, die erneut analysiert werden sollen."
-    },
-    "reanalyse": {
-      "action": "Datei analysieren"
-    },
     "filters": {
       "label": "Dokumentname",
       "search": "Dokumentname..."
     },
+    "header-actions": {
+      "download-csv": "CSV-Dateibericht herunterladen",
+      "edit": "Dossier bearbeiten",
+      "upload-document": "Dokument hochgeladen"
+    },
+    "new-rule": {
+      "toast": {
+        "actions": {
+          "reanalyse-all": "Alle analysieren"
+        }
+      }
+    },
+    "no-data": {
+      "action": "Dokument hochladen",
+      "title": "Noch gibt es keine Dokumente."
+    },
+    "no-match": {
+      "title": "Die ausgewählten Filter treffen auf kein Dokument zu."
+    },
+    "ocr-file": "OCR-Dokument",
+    "ocr-performed": "Diese Datei wurde mithilfe von OCR konvertiert.",
+    "open-document": "Dokument öffnen",
+    "quick-filters": {
+      "assigned-to-me": "Mir zuweisen",
+      "assigned-to-others": "Anderen zugewiesen",
+      "recent": "Neu ({hours} h)",
+      "unassigned": "Niemandem zugewiesen"
+    },
+    "reanalyse-dossier": {
+      "error": "Die Dateien konnten nicht für eine Reanalyse eingeplant werden. Bitte versuchen Sie es erneut.",
+      "success": "Dateien für Reanalyse vorgesehen."
+    },
+    "reanalyse": {
+      "action": "Datei analysieren"
+    },
     "table-col-names": {
       "added-on": "Hinzugefügt",
       "assigned-to": "Zugewiesen an",
       "name": "Name",
-      "needs-work": "Arbeitsbelastung",
+      "needs-work": "Arbeitsvorrat",
       "pages": "Seiten",
       "status": "Status"
     },
     "table-header": {
-      "title": "{length} Dokumente"
+      "title": "{length} {length, plural, one{document} other{documents}}"
     },
     "under-approval": "Zur Genehmigung",
-    "under-review": "Wird überprüft",
-    "upload-files": "Ziehen"
+    "under-review": "In Review",
+    "upload-files": "Sie können Dateien überall per Drag and Drop platzieren..."
   },
-  "dossier-templates": "Dossiervorlagen",
+  "dossier-templates": "Dossier-Vorlagen",
   "dossier-templates-listing": {
     "action": {
-      "delete": "Vorlage löschen",
+      "delete": "Dossier-Vorlage",
       "edit": "Vorlage bearbeiten"
     },
-    "add-new": "Neue Dossiervorlage",
+    "add-new": "Neue Dossier-Vorlage",
     "bulk": {
-      "delete": ""
+      "delete": "Ausgewählte Dossier-Vorlagen löschen"
+    },
+    "dictionaries": "{length} {length, plural, one{dictionary} other{dictionaries}}",
+    "error": {
+      "conflict": "Dieses DossierTemplate kann nicht gelöscht werden! Zumindest auf Dossier wird diese Vorlage verwendet!",
+      "generic": "Dieses DossierTemplate kann nicht gelöscht werden!"
     },
-    "dictionaries": "{length} Wörterbücher",
     "no-data": {
-      "title": "Es gibt noch keine Dossiervorlagen."
+      "title": "Es gibt noch keine Dossier-Vorlagen."
     },
     "no-match": {
-      "title": "Keine Dossiervorlagen stimmen mit Ihren aktuellen Filtern überein."
+      "title": "Die ausgewählten Filter treffen auf keine Dossier-Vorlage zu."
     },
-    "search": "Suche...",
+    "search": "Suchen ...",
     "table-col-names": {
       "created-by": "Erstellt von",
       "created-on": "Erstellt am",
@@ -707,26 +797,29 @@
       "name": "Name"
     },
     "table-header": {
-      "title": "{length} Dossiervorlagen"
+      "title": "{length} {length, plural, one{Dossier-Vorlage} other{Dossier-Vorlagen}}"
     }
   },
-  "download-includes": "Wählen Sie aus, was beim Download enthalten ist:",
+  "download-includes": "Wählen Sie die Dokumente für Ihr Download-Paket aus",
   "download-status": {
-    "queued": "Ihr Download wurde in die Warteschlange gestellt. Alle angeforderten Downloads finden Sie hier: Meine Downloads ."
+    "queued": "Ihr Download wurde zur Warteschlange hinzugefügt. Hier finden Sie alle angeforderten Downloads: My Downloads."
   },
   "download-type": {
-    "annotated": "",
-    "flatten": "",
-    "label": "{length} Dokumentversionen",
-    "original": "",
-    "preview": "",
-    "redacted": ""
+    "annotated": "PDF mit Anmerkungen",
+    "flatten": "PDF verflachen",
+    "label": "{length} Dokumenten{length, plural, one{version} other{versionen}}",
+    "original": "Optimiertes PDF",
+    "preview": "PDF-Vorschau",
+    "redacted": "geschwärztes PDF"
   },
   "downloads-list": {
     "actions": {
       "delete": "Löschen",
       "download": "Herunterladen"
     },
+    "bulk": {
+      "delete": "Ausgewählte Downloads löschen"
+    },
     "no-data": {
       "title": "Keine aktiven Downloads."
     },
@@ -737,7 +830,7 @@
       "status": "Status"
     },
     "table-header": {
-      "title": "{length} Downloads"
+      "title": "{length} {length, plural, one{download} other{downloads}}"
     }
   },
   "edit-color-dialog": {
@@ -746,337 +839,417 @@
       "color": "Farbe",
       "color-placeholder": "Farbe"
     },
-    "save": "speichern",
-    "success": "Die Farbe für {color} wurde erfolgreich aktualisiert."
+    "save": "Speichern",
+    "success": "Farbe erfolgreich aktualisiert auf {color}."
   },
   "edit-dossier-dialog": {
     "actions": {
-      "revert": "",
-      "save": ""
+      "revert": "Rückgängig machen",
+      "save": "Änderungen speichern",
+      "save-and-close": "Speichern"
     },
     "attributes": {
-      "custom-attributes": "",
-      "delete-image": "",
-      "image-attributes": "",
-      "no-custom-attributes": "",
-      "no-image-attributes": "",
-      "upload-image": ""
+      "custom-attributes": "Benutzerdefinierte Dossier-Attribute",
+      "delete-image": "Bild löschen",
+      "image-attributes": "Bild-Attribute",
+      "no-custom-attributes": "Es sind keine Text-Attribute vorhanden",
+      "no-image-attributes": "Es sind keine Bild-Attribute vorhanden",
+      "upload-image": "Bild hochladen"
+    },
+    "change-successful": "Dossier wurde aktualisiert.",
+    "delete-successful": "Dossier wurde gelöscht.",
+    "deleted-documents": {
+      "action": {
+        "delete": "Endgültig löschen",
+        "restore": "Wiederherstellen"
+      },
+      "bulk": {
+        "delete": "Ausgewählte Dokumente endgültig löschen",
+        "restore": "Ausgewählte Dokumente wiederherstellen"
+      },
+      "instructions": "Gelöschte Objekte können bis zu {hours} Stunden nach ihrer Löschung wiederhergestellt werden",
+      "no-data": {
+        "title": "Es sind keine gelöschten Dokumente vorhanden."
+      },
+      "table-col-names": {
+        "deleted-on": "Gelöscht am",
+        "name": "Name",
+        "pages": "Seiten",
+        "time-to-restore": "Verbleibende Zeit für Wiederherstellung"
+      },
+      "table-header": {
+        "label": "{length} {length, plural, one{gelöschtes Dokument} other{gelöschte Dokumente}}"
+      }
     },
-    "change-successful": "",
-    "delete-successful": "",
     "dictionary": {
-      "entries": ""
+      "display-name": {
+        "cancel": "Abbrechen",
+        "edit": "Anzeigenamen bearbeiten",
+        "placeholder": "Anzeigenamen eingeben",
+        "save": "Anzeigenamen speichern"
+      },
+      "entries": "{length} {length, plural, one{entry} other{entries}}"
     },
     "general-info": {
       "form": {
         "description": {
-          "label": "",
-          "placeholder": ""
+          "label": "Beschreibung",
+          "placeholder": "Beschreibung eingeben"
         },
-        "due-date": "",
+        "due-date": "Termin",
         "name": {
-          "label": "",
-          "placeholder": ""
+          "label": "Dossier-Name",
+          "placeholder": "Namen eingeben"
         },
-        "template": "",
-        "watermark": ""
+        "template": "Dossier-Vorlage",
+        "watermark": "Geschwärzte Dokumente mit Wasserzeichen versehen",
+        "watermark-preview": "Vorschau Dokumente mit Wasserzeichen versehen"
       }
     },
-    "header": "",
+    "header": "{dossierName} bearbeiten",
     "nav-items": {
-      "choose-download": "",
-      "dictionary": "",
-      "dossier-attributes": "",
-      "dossier-dictionary": "",
-      "dossier-info": "",
-      "download-package": "",
-      "general-info": "",
-      "members": "",
-      "team-members": ""
+      "choose-download": "Wählen Sie die Dokumente für Ihr Download-Paket aus:",
+      "deleted-documents": "Gelöschte Dokumente",
+      "dictionary": "Wörterbuch",
+      "dossier-attributes": "Dossier-Attribute",
+      "dossier-dictionary": "Dossier-Wörterbuch",
+      "dossier-info": "Dossier-Info",
+      "download-package": "Download-Paket",
+      "general-info": "Allgemeine Informationen",
+      "members": "Mitglieder",
+      "team-members": "Team-Mitglieder"
     },
-    "side-nav-title": "",
-    "unsaved-changes": ""
+    "side-nav-title": "Konfiguration",
+    "unsaved-changes": "Sie haben nicht gespeicherte Änderungen. Speichern Sie oder machen Sie die Änderungen rückgängig, bevor Sie die Registerkarte wechseln."
   },
+  "error": {
+    "close": "Nah dran",
+    "http": {
+      "generic": "Aktion mit Code {status} fehlgeschlagen"
+    },
+    "offline": "Du bist offline",
+    "online": "Du bist online",
+    "reload": "Neu laden",
+    "title": "Hoppla! Etwas ist schief gelaufen..."
+  },
+  "exact-date": "{day} {month} {year} um {hour}:{minute} Uhr",
+  "file": "Datei",
   "file-attribute-types": {
-    "date": "",
-    "number": "",
-    "text": ""
+    "date": "Datum",
+    "number": "Nummer",
+    "text": "Freier Text"
   },
-  "file-attributes": "Dateiattribute",
+  "file-attributes": "Datei-Attribute",
   "file-attributes-csv-import": {
     "action": {
-      "cancel-edit-name": "Stornieren",
+      "cancel-edit-name": "Abbrechen",
       "edit-name": "Namen bearbeiten",
       "remove": "Entfernen",
-      "save-name": "speichern"
+      "save-name": "Speichern"
     },
     "available": "{value} verfügbar",
-    "cancel": "Stornieren",
+    "cancel": "Abbrechen",
     "csv-column": "CSV-Spalte",
     "delimiter": "Trennzeichen",
     "delimiter-placeholder": ",",
-    "encoding": "Codierung",
+    "encoding": "Wird verschlüsselt",
     "encoding-placeholder": "UTF-8",
     "file": "Datei:",
     "key-column": "Schlüsselspalte",
     "key-column-placeholder": "Spalte auswählen ...",
     "no-data": {
-      "title": "Keine Dateiattribute definiert. Wählen Sie im linken Bereich eine Spalte aus, um mit der Definition der Dateiattribute zu beginnen."
+      "title": "Keine Datei-Attribute definiert. Wählen Sie links eine Spalte aus, um Datei-Attribute zu definieren."
     },
-    "no-hovered-column": "Zeigen Sie eine Vorschau der CSV-Spalte an, indem Sie den Mauszeiger über den Eintrag bewegen.",
+    "no-hovered-column": "Fahren Sie mit der Maus über den Eintrag, um eine Vorschau der CSV-Spalte zu sehen.",
     "no-sample-data-for": "Keine Beispieldaten für {column}.",
-    "parse-csv": "Analysieren Sie CSV mit neuen Optionen",
+    "parse-csv": "CSV-Datei mit neuen Optionen parsen",
     "quick-activation": {
       "all": "Alle",
-      "none": "Keiner"
+      "none": "Keine"
     },
     "save": {
-      "error": "Fehler beim Erstellen der Dateiattribute!",
+      "error": "Fehler beim Erstellen der Datei-Attribute!",
       "label": "Attribute speichern",
-      "success": "{count} Dateiattribute erfolgreich erstellt!"
+      "success": "{count} Datei-{count, plural, one{Attribut} other{Attribute}} erfolgreich erstellt!"
     },
     "search": {
-      "placeholder": "Suche nach Spaltennamen ..."
+      "placeholder": "Nach Spaltennamen suchen ..."
     },
     "selected": "{value} ausgewählt",
     "table-col-names": {
       "name": "Name",
-      "primary": "primär",
-      "primary-info-tooltip": "Der Wert des als primär eingestellten Attributs wird unter dem Dateinamen in der Dokumentenliste angezeigt.",
+      "primary": "Primärattribut",
+      "primary-info-tooltip": "Der Wert des Attributs, das als Primärattribut ausgewählt wurde, wird in der Dokumentenliste unter dem Dateinamen angezeigt.",
       "read-only": "Schreibgeschützt",
-      "type": "Art"
+      "type": "Typ"
     },
     "table-header": {
       "actions": {
-        "disable-read-only": "Deaktivieren Sie Schreibgeschützt für alle Attribute",
-        "enable-read-only": "Aktivieren Sie Schreibgeschützt für alle Attribute",
-        "read-only": "Nur schreibgeschützt machen",
+        "disable-read-only": "Schreibschutz für alle Attribute aufheben",
+        "enable-read-only": "Schreibschutz für alle Attribute aktivieren",
+        "read-only": "Schreibschutz aktivieren",
         "remove-selected": "Ausgewählte entfernen",
-        "type": "Art"
+        "type": "Typ"
       },
-      "title": "{length} Dateiattribute"
+      "title": "{length} Datei-{length, plural, one{Attribut} other{Attribute}}"
     },
-    "title": "Wählen Sie CSV-Spalten aus, die als Dateiattribute verwendet werden sollen",
+    "title": "CSV-Spalten auswählen, die als Datei-Attribute verwendet werden sollen",
     "total-rows": "{rows} Zeilen insgesamt"
   },
   "file-attributes-listing": {
+    "error": {
+      "generic": "Attribute konnte nicht erstellt werden!",
+      "conflict": "Es gibt bereits ein Attribute mit diesem Name!"
+    },
     "action": {
       "delete": "Attribut löschen",
-      "edit": "Attribut bearbeiten"
+      "edit": "Attribute bearbeiten"
     },
-    "add-new": "Neues Attribut",
+    "add-new": "Neue Attribute",
     "bulk-actions": {
       "delete": "Ausgewählte Attribute löschen"
     },
     "no-data": {
-      "title": "Es sind noch keine Dateiattribute vorhanden."
+      "title": "Es sind noch keine Datei-Attribute vorhanden."
     },
     "no-match": {
-      "title": "Keine Dateiattribute stimmen mit Ihren aktuellen Filtern überein."
+      "title": "Die aktuell ausgewählten Filter treffen auf kein Datei-Attribut zu."
     },
     "read-only": "Schreibgeschützt",
-    "search": "Suche nach Attributnamen ...",
+    "search": "Nach Attribut-Namen suchen ...",
     "table-col-names": {
       "csv-column": "CSV-Spalte",
+      "displayed-in-file-list": "In Dokumentenliste anzeigen",
+      "filterable": "Filterbar",
       "name": "Name",
-      "primary": "Primär",
-      "primary-info-tooltip": "Der Wert des als primär eingestellten Attributs wird unter dem Dateinamen in der Dokumentenliste angezeigt.",
+      "primary": "Primärattribut",
+      "primary-info-tooltip": "Der Wert des Attributs, das als Primärattribut ausgewählt wurde, wird in der Dokumentenliste unter dem Dateinamen angezeigt.",
       "read-only": "Schreibgeschützt",
       "type": "Eingabetyp"
     },
     "table-header": {
-      "title": "{length} Dateiattribute"
+      "title": "{length} {length, plural, one{Datei-Attribut} other{Datei-Attribute}}"
     },
-    "upload-csv": "Konfiguration der Dateiattribute hochladen"
+    "upload-csv": "Datei-Attribute hochladen"
   },
   "file-preview": {
-    "assign-me": "Weisen Sie mir zu",
-    "assign-reviewer": "Prüfer zuweisen",
-    "change-reviewer": "",
+    "assign-me": "Mir zuweisen",
+    "assign-reviewer": "Reviewer zuweisen",
+    "change-reviewer": "Reviewer wechseln",
     "delta": "Delta",
-    "delta-tooltip": "Delta View zeigt nur die Änderungen seit der letzten erneuten Analyse an. Diese Ansicht ist nur verfügbar, wenn mindestens eine Änderung vorliegt",
-    "document-info": "Ihre Dokumenteninfo lebt hier. Dies schließt Metadaten ein, die für jedes Dokument erforderlich sind.",
+    "delta-tooltip": "Die Delta-Ansicht zeigt nur die Änderungen seit der letzten Reanalyse an. Die Ansicht ist nur verfügbar, wenn es seit der letzten Analyse mindestens 1 Änderung gab",
+    "document-info": "Dok-Infos: Hier finden Sie die zu Ihrem Dokument hinterlegten Informationen; u. a. die für das Dokument erforderlichen Metadaten.",
     "download-original-file": "Originaldatei herunterladen",
-    "exclude-pages": "",
-    "excluded-from-redaction": "",
-    "fullscreen": "Vollbild (F)",
+    "exclude-pages": "Seiten von Schwärzung ausschließen",
+    "excluded-from-redaction": "Von Schwärzung ausgeschlossen",
+    "fullscreen": "Vollbildmodus",
     "last-reviewer": "Zuletzt überprüft von:",
     "no-data": {
-      "title": "Auf dieser Seite befinden sich keine Anmerkungen."
+      "title": "Auf dieser Seite gibt es keine Anmerkungen."
     },
     "quick-nav": {
-      "jump-first": "Zur ersten Anmerkung springen",
-      "jump-last": "Zur letzten Anmerkung springen"
+      "jump-first": "Zur ersten Seite springen",
+      "jump-last": "Zur letzten Seite springen"
     },
-    "reanalyse-notification": "Dieses Dokument wurde nicht mit dem neuesten Regel- / Wörterbuchsatz verarbeitet. Analysieren Sie jetzt, um aktualisierte Anmerkungen zu erhalten.",
+    "reanalyse-notification": "Dieses Dokument wurde nicht auf Basis des neuesten Regel-/Wörterbuchsatzes bearbeitet. Analysieren Sie es jetzt, um die Anmerkungen zu analysieren.",
     "redacted": "Vorschau",
-    "redacted-tooltip": "Die Redaktionsvorschau zeigt nur Redaktionen an. Betrachten Sie dies als Vorschau für die endgültige redigierte Version. Diese Ansicht ist nur verfügbar, wenn für die Datei keine Änderungen ausstehen",
+    "redacted-tooltip": "In der Schwärzungsvorschau sehen Sie nur die Schwärzungen. Es handelt sich also um eine Vorschau der endgültigen geschwärzten Version. Diese Ansicht ist nur verfügbar, wenn für die Datei keine Änderungen ausstehen und keine Reanalyse erforderlich ist",
     "standard": "Standard",
-    "standard-tooltip": "In der Standard-Workload-Ansicht werden alle Hinweise, Redaktionen und Empfehlungen angezeigt",
+    "standard-tooltip": "In der Standard-Ansicht des Workloads werden alle Hinweise, Schwärzungen, Empfehlungen und Vorschläge angezeigt. In dieser Ansicht ist die Bearbeitung möglich.",
     "tabs": {
       "annotations": {
-        "jump-to-next": "Zum nächsten springen",
-        "jump-to-previous": "Zum vorherigen springen",
-        "label": "Arbeitsbelastung",
-        "page-is": "",
-        "select": "Wählen",
-        "select-all": "",
-        "select-none": ""
+        "jump-to-next": "Springe zu Nächster",
+        "jump-to-previous": "Springe zu Vorheriger",
+        "label": "Arbeitsvorrat",
+        "page-is": "Diese Seite ist",
+        "select": "Auswählen",
+        "select-all": "Alle",
+        "select-none": "Keine"
       },
       "document-info": {
-        "close": "Dokumentinfo schließen",
+        "close": "Dokumenteninformation schließen",
         "details": {
           "created-on": "Erstellt am: {date}",
           "dossier": "in {dossierName}",
-          "due": "Geburtstermin",
+          "due": "Termin: {date}",
           "pages": "{pages} Seiten"
         },
-        "edit": "Dokumentinformationen bearbeiten",
-        "label": "Dokumentinfo"
+        "edit": "Infos zum Dokument bearbeiten",
+        "label": "Infos zum Dokument"
       },
       "exclude-pages": {
-        "close": "",
-        "error": "",
-        "hint": "",
-        "input-placeholder": "",
-        "label": "",
-        "no-excluded": "",
-        "put-back": "",
-        "removed-from-redaction": ""
+        "close": "Schließen",
+        "error": "Fehler! Seitenauswahl ungültig.",
+        "hint": "Minus (-) für Bereich und Komma (,) für Aufzählung.",
+        "input-placeholder": "z. B. 1-20,22,32",
+        "label": "Seiten ausschließen",
+        "no-excluded": "Es sind keine Seiten ausgeschlossen.",
+        "put-back": "Rückgängig machen",
+        "removed-from-redaction": "Von der Schwärzung ausgeschlossen"
       },
-      "is-excluded": "Die Redaktion ist für dieses Dokument deaktiviert."
+      "is-excluded": "Schwärzungen für dieses Dokument deaktiviert."
     },
     "toggle-analysis": {
-      "disable": "Deaktivieren Sie die Redaktion",
-      "enable": "Zur Redaktion aktivieren",
-      "only-managers": "Das Aktivieren / Deaktivieren ist nur für Manager zulässig"
+      "disable": "Schwärzen deaktivieren",
+      "enable": "Schwärzen aktivieren",
+      "only-managers": "Aktivieren/deaktivieren ist nur Managern gestattet"
     }
   },
   "file-status": {
-    "approved": "",
-    "error": "",
-    "excluded": "",
-    "full-reprocess": "",
-    "indexing": "",
-    "ocr-processing": "",
-    "processing": "",
-    "reprocess": "",
-    "unassigned": "",
-    "under-approval": "",
-    "under-review": "",
-    "unprocessed": ""
+    "approved": "Genehmigt",
+    "deleted": "Gelöscht",
+    "error": "Reanalyse erforderlich",
+    "excluded": "Ausgeschlossen",
+    "full-reprocess": "Wird analysiert",
+    "indexing": "Wird analysiert",
+    "ocr-processing": "OCR-Analyse",
+    "processing": "Wird analysiert...",
+    "reprocess": "Wird analysiert",
+    "unassigned": "Nicht zugewiesen",
+    "under-approval": "In Genehmigung",
+    "under-review": "In Review",
+    "unprocessed": "Unbearbeitet"
   },
   "filter-menu": {
     "filter-options": "Filteroptionen",
-    "filter-types": "Filtertypen",
+    "filter-types": "Filter",
     "label": "Filter",
-    "with-comments": "Nur Anmerkungen mit Kommentaren anzeigen",
-    "with-reason-changes": ""
+    "with-comments": "Nur Anmerkungen mit Kommentaren",
+    "with-reason-changes": "Nur Schwärzungen, deren Begründungen geändert wurden"
   },
   "filter": {
     "analysis": "Analyse erforderlich",
-    "hint": "Nur Hinweise",
+    "comment": "Kommentare",
+    "hint": "Nut Hinweise",
     "image": "Bilder",
     "none": "Keine Anmerkungen",
-    "redaction": "Redigiert",
-    "suggestion": "Vorgeschlagene Redaktion",
+    "redaction": "Geschwärzt",
+    "suggestion": "Vorgeschlagene Schwärzung",
     "updated": "Aktualisiert"
   },
   "filters": {
-    "assigned-people": "Beauftragter",
+    "assigned-people": "Beauftragt",
     "dossier-templates": "Regelsätze",
+    "empty": "Leer",
     "filter-by": "Filter:",
-    "needs-work": "Arbeitsbelastung",
-    "people": "Dossiermitglied (e)",
+    "needs-work": "Arbeitsvorrat",
+    "people": "Dossier-Mitglied(er)",
     "status": "Status"
   },
   "general-config-screen": {
     "actions": {
-      "save": "Konfigurationen speichern",
-      "test-connection": "Testverbindung"
+      "save": "Einstellungen speichern",
+      "test-connection": "Verbindung testen"
     },
     "app-name": {
-      "label": "",
-      "placeholder": ""
+      "label": "Name der Applikation",
+      "placeholder": "RedactManager"
     },
     "form": {
-      "auth": "Aktivieren Sie die Authentifizierung",
-      "change-credentials": "Anmeldeinformationen ändern",
-      "envelope-from": "Umschlag von",
-      "envelope-from-hint": "Infotext zum Umschlag aus dem Feld.",
-      "envelope-from-placeholder": "E-Mail-Adresse des Absenderumschlags",
+      "auth": "Authentifizierung aktivieren",
+      "change-credentials": "Zugangsdaten ändern",
+      "envelope-from": "Ausgangsadresse",
+      "envelope-from-hint": "Infotext zum Feld „Ausgangsadresse“.",
+      "envelope-from-placeholder": "Ausgangsadresse",
       "from": "Von",
-      "from-display-name": "Name für Absender",
-      "from-display-name-hint": "Infotext zum Namen des Absenders.",
-      "from-display-name-placeholder": "Anzeigename für die Absender-E-Mail-Adresse",
-      "from-placeholder": "Absender-E-Mail-Adresse",
-      "host": "Gastgeber",
+      "from-display-name": "Antworten an",
+      "from-display-name-hint": "Info-Text zum Absendernamen.",
+      "from-display-name-placeholder": "Anzeigename zur Ausgangsadresse",
+      "from-placeholder": "E-Mail-Adresse des Absenders",
+      "host": "Host",
       "host-placeholder": "SMTP-Host",
-      "port": "Hafen",
-      "reply-to": "Antwort an",
-      "reply-to-display-name": "Name für die Antwort an",
-      "reply-to-display-name-placeholder": "Anzeigename für die Antwort auf die E-Mail-Adresse",
-      "reply-to-placeholder": "Antwort an E-Mail-Adresse",
-      "ssl": "Aktivieren Sie SSL",
-      "starttls": "Aktivieren Sie StartTLS"
+      "port": "Port",
+      "reply-to": "Antwortadresse",
+      "reply-to-display-name": "Name für Antwortadresse",
+      "reply-to-display-name-placeholder": "Anzeigename zu Antwort-E-Mail",
+      "reply-to-placeholder": "Antwort-E-Mail",
+      "ssl": "SSL aktivieren",
+      "starttls": "StartTLS aktivieren"
     },
     "general": {
       "form": {
-        "forgot-password": ""
+        "forgot-password": "„Passwort vergessen?“-Link auf der Login-Seite anzeigen"
       },
-      "subtitle": " ",
-      "title": ""
+      "subtitle": "",
+      "title": "Allgemeine Einstellungen"
     },
-    "subtitle": "Mit SMTP (Simple Mail Transfer Protocol) können Sie Ihre E-Mails über die angegebenen Servereinstellungen senden.",
+    "subtitle": "SMTP (Simple Mail Transfer Protocol) ermöglicht es Ihnen, Ihre E-Mails über die angegebenen Servereinstellungen zu versenden.",
     "test": {
-      "error": "Test-E-Mail konnte nicht gesendet werden! Bitte überarbeiten Sie die E-Mail-Adresse.",
-      "success": "Test-E-Mail wurde erfolgreich gesendet!"
+      "error": "Die Test-E-Mail konnte nicht gesendet werden! Bitte überprüfen Sie die E-Mail-Adresse.",
+      "success": "Die Test-E-Mail wurde erfolgreich versendet!"
     },
-    "title": "Konfigurieren Sie das SMTP-Konto"
+    "title": "SMTP-Konto konfigurieren"
+  },
+  "help-mode": {
+    "button-text": "Hilfe-Modus (H)",
+    "clicking-anywhere-on": "Klicken Sie auf eine beliebige Stelle des Bildschirms  um zu sehen, welche Bereiche interaktiv sind. Wenn Sie mit der Maus über einen interaktiven Bereich fahren, verändert sich der Mauszeiger, um Ihnen zu zeigen, ob ein Element interaktiv ist.",
+    "instructions": "Hilfe-Modus-Anleitungen öffnen",
+    "text": "Hilfe-Modus",
+    "welcome-to-help-mode": " Willkommen im Hilfe-Modus! 
 Klicken Sie auf interaktive Elemente, um in einem neuen Tab Infos dazu zu erhalten. "
   },
   "hint": "Hinweis",
   "image-category": {
-    "formula": "",
-    "image": "",
-    "logo": "",
-    "signature": ""
+    "formula": "Formel",
+    "image": "Bild",
+    "logo": "Logo",
+    "signature": "Signatur"
   },
   "initials-avatar": {
-    "unassigned": "Nicht zugewiesen",
+    "unassigned": "Unbekannt",
     "you": "Sie"
   },
+  "justifications": "Begründungen",
+  "justifications-listing": {
+    "actions": {
+      "delete": "Begründung löschen",
+      "edit": "Begründung bearbeiten"
+    },
+    "add-new": "Neue Begründung hinzufügen",
+    "bulk": {
+      "delete": "Ausgewählte Begründungen löschen"
+    },
+    "no-data": {
+      "title": "Es gibt noch keine Begründungen."
+    },
+    "table-col-names": {
+      "description": "Beschreibung",
+      "name": "Name",
+      "reason": "Rechtliche Grundlage"
+    },
+    "table-header": "{length} {length, plural, one{Begründung} other{Begründung}}"
+  },
   "license-info-screen": {
     "analyzed-pages": "Analysierte Seiten",
-    "backend-version": "Backend-Anwendungsversion",
+    "backend-version": "Backend-Version der Anwendung",
     "chart": {
-      "cumulative": "Kumulative Seiten",
+      "cumulative": "Seiten insgesamt",
       "legend": "Legende",
-      "licensed-total": "Lizenzierte Summe",
+      "licensed-total": "Insgesamt lizensiert",
       "pages-per-month": "Seiten pro Monat",
-      "total-pages": "Alle Seiten"
+      "total-pages": "Gesamtzahl der Seiten"
     },
-    "copyright-claim-text": "Copyright © 2020 - {currentYear} knecon AG (unterstützt von IQSER)",
-    "copyright-claim-title": "Urheberrechtsanspruch",
-    "current-analyzed": "Analysierte Seiten im aktuellen Lizenzierungszeitraum",
-    "custom-app-title": "Titel der benutzerdefinierten Anwendung",
+    "copyright-claim-text": "Copyright © 2020 - {currentYear} knecon AG (powered by IQSER)",
+    "copyright-claim-title": "Copyright",
+    "current-analyzed": "In aktuellem Lizenzzeitraum analysierte Seiten",
+    "custom-app-title": "Name der Anwendung",
     "email-report": "E-Mail-Bericht",
     "email": {
       "body": {
-        "analyzed": "Insgesamt analysierte Seiten im aktuellen Lizenzzeitraum: {pages}.",
+        "analyzed": "Im aktuellen Lizenzzeitraum insgesamt analysierte Seiten: {pages}.",
         "licensed": "Lizenzierte Seiten: {pages}."
       },
       "title": "Lizenzbericht {licenseCustomer}"
     },
-    "end-user-license-text": "Die Verwendung dieses Produkts unterliegt den Bestimmungen der Redaction End User Agreement, sofern nicht anders angegeben.",
+    "end-user-license-text": "Die Nutzung dieses Produkts unterliegt den Bedingungen der Endbenutzer-Lizenzvereinbarung für den RedactManager, sofern darin nichts anderweitig festgelegt.",
     "end-user-license-title": "Endbenutzer-Lizenzvereinbarung",
-    "frontend-version": "Frontend-Anwendungsversion",
     "licensed-page-count": "Anzahl der lizenzierten Seiten",
-    "licensed-to": "Lizenziert an",
+    "licensed-to": "Lizenziert für",
     "licensing-details": "Lizenzdetails",
-    "licensing-period": "Lizenzzeitraum",
-    "total-analyzed": "Insgesamt analysierte Seiten seit {date}",
-    "unlicensed-analyzed": "Nicht lizenzierte analysierte Seiten",
-    "usage-details": "Verwendungsdetails"
+    "licensing-period": "Laufzeit der Lizenz",
+    "ocr-analyzed-pages": "Mit OCR konvertierte Seiten",
+    "total-analyzed": "Seit {date} insgesamt analysierte Seiten",
+    "unlicensed-analyzed": "Über Lizenz hinaus analysierte Seiten",
+    "usage-details": "Nutzungsdetails"
   },
   "license-information": "Lizenzinformationen",
   "manual-annotation": {
@@ -1087,176 +1260,254 @@
       "content": {
         "comment": "Kommentar",
         "dictionary": "Wörterbuch",
-        "legalBasis": "Rechtliche Grundlage",
-        "reason": "Grund",
-        "reason-placeholder": "Wähle einen Grund ...",
-        "rectangle": "Benutzerdefiniertes Rechteck",
+        "legalBasis": "Rechtsgrundlage",
+        "reason": "Begründung",
+        "reason-placeholder": "Wählen Sie eine Begründung aus ...",
+        "rectangle": "Benutzerdefinierter Bereich",
         "text": "Ausgewählter Text:"
       },
       "header": {
         "dictionary": "Zum Wörterbuch hinzufügen",
-        "false-positive": "Falsch positiv setzen",
-        "force": "Redaktion erzwingen",
-        "redaction": "Redaktion",
-        "request-dictionary": "Anfrage zum Wörterbuch hinzufügen",
-        "request-false-positive": "Falsch positiv anfordern",
-        "request-redaction": "Redaktion anfordern"
+        "false-positive": "Als Falsch-Positiv definieren",
+        "force": "Schwärzung erzwingen",
+        "redaction": "Schwärzung",
+        "request-dictionary": "Neuen Wörterbucheintrag vorschlagen",
+        "request-false-positive": "Als Falsch-Positiv vorschlagen",
+        "request-redaction": "Schwärzung vorschlagen"
       }
     }
   },
-  "notifications": {
-    "mark-as": "als {type, select, read{gelesen} unread{ungelesen} other{}} markieren"
+  "months": {
+    "apr": "Apr.",
+    "aug": "August",
+    "dec": "Dez.",
+    "feb": "Feb.",
+    "jan": "Jan.",
+    "jul": "Jul.",
+    "jun": "März",
+    "mar": "März",
+    "may": "Nov.",
+    "nov": "Nov.",
+    "oct": "Okt.",
+    "sep": "Sept."
+  },
+  "notification": {
+    "no-data": "Du hast aktuell keine Benachrichtigungen",
+    "assign-approver": "Sie wurden dem Dokument {fileName} im Dossier {dossierName} als Genehmiger zugewiesen!",
+    "assign-reviewer": "Sie wurden dem Dokument {fileName} im Dossier {dossierName} als Reviewer zugewiesen!",
+    "document-approved": "{fileName} wurde genehmigt!",
+    "dossier-deleted": "Dossier: {dossierName} wurde gelöscht!",
+    "dossier-owner-deleted": "Der Dossier-Owner von {dossierName} wurde entfernt!",
+    "dossier-owner-removed": "Der Dossier-Owner von {dossierName} wurde entfernt!",
+    "dossier-owner-set": "Eigentümer von {dossierName} geändert zu {user}!",
+    "unassigned-from-file": "Sie wurden vom Dokument {fileName} im Dossier {dossierName} entfernt!",
+    "user-becomes-dossier-member": "{user} ist jetzt Mitglied des Dossiers {dossierName}!",
+    "user-demoted-to-reviewer": "{user} wurde im Dossier {dossierName} auf die Reviewer-Berechtigung heruntergestuft!",
+    "user-promoted-to-approver": "{user} wurde im Dossier {dossierName} zum Genehmiger ernannt!",
+    "user-removed-as-dossier-member": "{user} wurde als Mitglied von: {dossierName}  entfernt!"
+  },
+  "notifications": "Benachrichtigungen",
+  "notifications-screen": {
+    "category": {
+      "email-notifications": "E-Mail Benachrichtigungen",
+      "in-app-notifications": "In-App-Benachrichtigungen"
+    },
+    "error": {
+      "generic": "Ein Fehler ist aufgetreten... Aktualisierung der Einstellungen fehlgeschlagen!"
+    },
+    "groups": {
+      "approver": "Dossiers, für die Sie genehmigend sind",
+      "own": "Dossiers, die Sie besitzen",
+      "reviewer": "Dossiers, für die Sie Bewerter sind"
+    },
+    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
+    "options": {
+      "document-is-sent-for-approval": "Dokument wird zur Genehmigung gesendet",
+      "document-status-changes": "Dokumentstatusänderungen",
+      "dossier-status-changes": "Änderungen des Dossierstatus",
+      "request-to-join-the-dossier": "Antrag auf Beitritt zum Dossier",
+      "when-a-document-is-approved": "Wenn ein Dokument genehmigt wird",
+      "when-a-document-is-assigned-to-a-reviewer": "Wenn ein Dokument einem Prüfer zugewiesen wird",
+      "when-a-document-is-sent-for-approval": "Wenn ein Dokument zur Genehmigung gesendet wird",
+      "when-a-reviewer-is-unassigned-from-a-document": "Wenn die Zuweisung eines Prüfers zu einem Dokument aufgehoben wird",
+      "when-i-am-assigned-on-a-document": "Wenn ich einem Dokument zugewiesen bin",
+      "when-i-am-unassigned-from-a-document": "Wenn ich einem Dokument nicht zugewiesen bin"
+    },
+    "schedule": {
+      "daily": "Tägliche Zusammenfassung",
+      "instant": "Sofortig",
+      "weekly": "Wöchentliche Zusammenfassung"
+    },
+    "title": "Benachrichtigungseinstellungen"
   },
   "overwrite-files-dialog": {
     "options": {
       "cancel": "Alle Uploads abbrechen",
-      "overwrite": "Ersetzen Sie das vorhandene Dokument",
-      "remember": "Erinnere dich an die Wahl und frag mich nicht noch einmal",
+      "overwrite": "Vorhandenes Dokument ersetzen",
+      "remember": "Auswahl speichern und nicht noch einmal fragen",
       "skip": "Vorhandenes Dokument behalten"
     },
-    "question": "{filename} existiert bereits. Wählen Sie, wie Sie fortfahren möchten:",
-    "title": "Dokument existiert bereits!"
+    "question": "{filename} ist bereits vorhanden. Wie möchten Sie fortfahren?",
+    "title": "Das Dokument existiert bereits!"
   },
   "page": "Seite",
   "pagination": {
-    "next": "Nächster",
-    "previous": "Zurück"
+    "next": "Nächste",
+    "previous": "Vorherige"
   },
   "pdf-viewer": {
     "text-popup": {
       "actions": {
-        "search": "Suche nach Auswahl"
+        "search": "Nach Auswahl suchen"
       }
     }
   },
-  "pending-changes-guard": "WARNUNG: Sie haben nicht gespeicherte Änderungen. Drücken Sie Abbrechen, um zurück zu gehen und diese Änderungen zu speichern, oder OK, um diese Änderungen zu verlieren.",
-  "readonly": "Schreibgeschützt",
+  "pending-changes-guard": "ACHTUNG: Sie haben ungespeicherte Änderungen. Klicken Sie auf „Abbrechen“, wenn Sie zurückkehren und die Änderungen speichern möchten. Klicken Sie auf „OK“, um die Änderungen zu speichern.",
+  "readonly": "Lesemodus",
   "recategorize-image-dialog": {
     "actions": {
-      "cancel": "",
-      "save": ""
+      "cancel": "Abbrechen",
+      "save": "Änderungen speichern"
     },
     "content": {
-      "comment": "",
-      "type": "",
-      "type-placeholder": ""
+      "comment": "Kommentar",
+      "type": "Ausgewählter Bildtyp",
+      "type-placeholder": "Einen Typ auswählen ..."
     },
-    "header": ""
+    "header": "Bildtypen bearbeiten"
   },
-  "redaction": "Redaktion",
+  "redaction": "Schwärzung",
   "remove-annotations-dialog": {
-    "confirm": "Ja, fortfahren und entfernen!",
-    "cancel": "Stornieren",
+    "cancel": "Abbrechen",
+    "confirm": "Ja, fortfahren und löschen!",
     "dictionary": "Wörterbuch",
-    "image-type": "",
+    "image-type": "Bild: {typeLabel}",
     "remove-from-dictionary": {
-      "question": "Folgende Einträge werden aus ihren jeweiligen Wörterbüchern entfernt:",
-      "title": "Aus dem Wörterbuch entfernen"
+      "question": "Folgende Einträge werden aus den jeweiligen Wörterbüchern gelöscht:",
+      "title": "Aus dem Wörterbuch löschen"
     },
     "remove-only-here": {
-      "question": "Folgende Redaktionen werden nur hier entfernt:",
-      "title": "Redaktion entfernen"
+      "question": "Folgende Schwärzungen werden nur hier entfernt:",
+      "title": "Schwärzung entfernen"
     },
     "value": "Wert"
   },
   "report-type": {
-    "label": "{length} Berichtstypen"
+    "label": "{length} {length, plural, one{Berichtstyp} other{Berichtstypen}}"
   },
-  "reports": "",
+  "reports": "Berichte",
   "reports-screen": {
-    "description": "",
-    "document-setup-description": "",
-    "document-setup-heading": "",
-    "report-documents": "",
-    "title": "",
-    "upload-document": ""
+    "description": "Ein kurzer Text, der erläutert, was Platzhalter sind und wie Sie sie in Ihrer Berichtsvorlage einsetzen können. Es ist bekannt, dass ein Leser vom lesbaren Inhalt einer Seite abgelenkt wird, wenn er sich das Layout ansieht.",
+    "descriptions": {
+      "dossier-attributes": "Dieser Platzhalter wird durch den Wert des Dossier-Attributs {attribute} ersetzt.",
+      "file-attributes": "Dieser Platzhalter wird durch den Wert des Dateiattributs {attribute} ersetzt.",
+      "general": {
+        "date": {
+          "d-m-y": "Dieser Platzhalter wird durch das Erstellungsdatum des Berichts in der üblichen Tag-Monat-Jahr-Notation (TT.MM.JJJJ) ersetzt, zB 15.10.2021.",
+          "m-d-y": "Dieser Platzhalter wird durch das Erstellungsdatum des Berichts im amerikanischen rein numerischen Datumsformat (MM/dd/yyyy) ersetzt, zB 15.10.2021.",
+          "y-m-d": "Dieser Platzhalter wird durch das Erstellungsdatum des Berichts im internationalen ISO 8601-Format (yyyy-MM-dd) ersetzt, zB 2021-10-15."
+        },
+        "dossier": {
+          "name": "Dieser Platzhalter wird durch den Namen des Dossiers ersetzt, in dem die geschwärzten Dateien gespeichert sind."
+        },
+        "file": {
+          "name": "Dieser Platzhalter wird durch den Dateinamen ersetzt."
+        },
+        "redaction": {
+          "excerpt": "Dieser Platzhalter wird durch einen Textausschnitt ersetzt, der die Schwärzung enthält.",
+          "justification": "Dieser Platzhalter wird durch die Begründung der Schwärzung ersetzt. Es ist eine Kombination aus dem Rechtsverweis (justificationParagraph) und dem Begründungstext (justificationReason).",
+          "justification-paragraph": "Dieser Platzhalter wird durch den Rechtshinweis der Begründung der Redaktion ersetzt.",
+          "justification-reason": "Dieser Platzhalter wird durch den Begründungstext der Schwärzung ersetzt.",
+          "page": "Dieser Platzhalter wird durch die Seitenzahl der Redaktion ersetzt.",
+          "paragraph": "Dieser Platzhalter wird durch den Absatz ersetzt, der die Schwärzung enthält."
+        },
+        "time": {
+          "h-m": "Dieser Platzhalter wird durch den Zeitpunkt ersetzt, zu dem der Bericht erstellt wurde."
+        }
+      }
+    },
+    "document-setup-description": "Ein kurzer Text, der erläutert, was Platzhalter sind und wie Sie sie in Ihrer Berichtsvorlage einsetzen können. Es ist bekannt, dass ein Leser vom lesbaren Inhalt einer Seite abgelenkt wird, wenn er sich das Layout ansieht.",
+    "document-setup-heading": "Dokumenten-Konfiguration",
+    "invalid-upload": "Ungültiges Upload-Format ausgewählt! Unterstützt werden Dokumente im .xlsx- und im .docx-Format",
+    "multi-file-report": "(Mehrere Dateien)",
+    "report-documents": "Dokumente für den Bericht",
+    "table-header": {
+      "description": "Beschreibung",
+      "placeholders": "Platzhalter"
+    },
+    "title": "Berichte",
+    "upload-document": "Ein Dokument hochladen"
   },
-  "reset-filters": "Filter zurücksetzen",
+  "reset-filters": "Zurücksetzen",
   "reset-password-dialog": {
     "actions": {
-      "cancel": "",
-      "save": ""
+      "cancel": "Abbrechen",
+      "save": "Speichern"
     },
     "form": {
-      "password": ""
+      "password": "Temporäres Passwort"
     },
-    "header": ""
+    "header": "Temporäres Passwort für {userName} festlegen"
   },
   "roles": {
-    "inactive": "",
-    "manager-admin": "",
-    "no-role": "",
-    "red-admin": "",
-    "red-manager": "",
-    "red-user": "",
-    "red-user-admin": "",
-    "regular": ""
+    "inactive": "Inaktiv",
+    "manager-admin": "Manager & Admin",
+    "no-role": "Keine Rolle definiert",
+    "red-admin": "Anwendungsadministrator",
+    "red-manager": "Manager",
+    "red-user": "Benutzer",
+    "red-user-admin": "Benutzer-Admin",
+    "regular": "Regulär"
   },
-  "rule-editor": "Regeleditor",
+  "rule-editor": "Regel-Editor",
   "rules-screen": {
     "error": {
-      "generic": "Etwas ist schief gelaufen ... Regelaktualisierung fehlgeschlagen!"
+      "generic": "Es ist ein Fehler aufgetreten ... Die Regeln konnten nicht aktualisiert werden!"
     },
-    "revert-changes": "Zurückkehren",
+    "revert-changes": "Anmeldedaten speichern",
     "save-changes": "Änderungen speichern",
     "success": {
-      "generic": "Regeln aktualisiert!"
+      "generic": "Die Regeln wurden aktualisiert!"
     }
   },
   "search-screen": {
     "cols": {
-      "document": "",
-      "dossier": "",
-      "pages": "",
-      "status": ""
+      "document": "Dokument",
+      "dossier": "Dossier",
+      "pages": "Seiten",
+      "status": "Status"
     },
     "filters": {
-      "by-dossier": "",
-      "search-placeholder": "Dossier..."
+      "by-dossier": "Nach Dossier filtern",
+      "search-placeholder": "Dossiername..."
     },
-    "missing": "",
-    "must-contain": "",
-    "no-data": "",
-    "table-header": ""
+    "missing": "Fehlt",
+    "must-contain": "Muss enthalten",
+    "no-data": "Geben Sie einen Suchbegriff in die Suchleiste, um nach Dokumenten oder Inhalten von Dokumenten zu suchen.",
+    "table-header": "{length} {length, plural, one{Suchergebnis} other{Suchergebnisse}}"
   },
   "search": {
-    "entire-platform": "",
-    "placeholder": "",
-    "this-dossier": ""
+    "entire-platform": "ganze Plattform",
+    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
+    "this-dossier": "in diesem Dossier"
   },
   "smtp-auth-config": {
     "actions": {
-      "cancel": "Stornieren",
-      "save": "Anmeldeinformationen speichern"
+      "cancel": "Abbrechen",
+      "save": "Anmeldedaten speichern"
     },
     "form": {
       "password": "Passwort",
-      "username": "Nutzername",
-      "username-placeholder": "Login Benutzername"
+      "username": "Benutzername",
+      "username-placeholder": "Login-Benutzername"
     },
-    "title": "Aktivieren Sie die Authentifizierung"
+    "title": "Authentifizierung aktivieren"
   },
   "time": {
-    "days": "",
-    "hours": "",
-    "less-than-an-hour": "",
-    "no-time-left": ""
-  },
-  "yesterday": "",
-  "exact-date": "",
-  "months": {
-    "jan": "",
-    "feb": "",
-    "mar": "",
-    "apr": "",
-    "may": "",
-    "jun": "",
-    "jul": "",
-    "aug": "",
-    "sep": "",
-    "oct": "",
-    "nov": "",
-    "dec": ""
+    "days": "{days} {days, plural, one{Tag} other{Tage}}",
+    "hours": "{hours} {hours, plural, one{Stunde} other{Stunden}}",
+    "less-than-an-hour": "< 1 Stunde",
+    "no-time-left": "Frist für Wiederherstellung verstrichen"
   },
   "top-bar": {
     "navigation-items": {
@@ -1264,58 +1515,59 @@
       "dossiers": "Aktives Dossier",
       "my-account": {
         "children": {
-          "admin": "Die Einstellungen",
+          "account": "Konto",
+          "admin": "Einstellungen",
           "downloads": "Meine Downloads",
           "language": {
-            "de": "Deutsche",
+            "de": "Deutsch",
             "en": "Englisch",
             "label": "Sprache"
           },
-          "logout": "Ausloggen",
-          "my-profile": "Mein Profil",
-          "trash": ""
+          "logout": "Abmelden",
+          "trash": "Papierkorb"
         }
       }
     }
   },
   "trash": {
     "action": {
-      "delete": "",
-      "restore": ""
+      "delete": "Endgültig löschen",
+      "restore": "Wiederherstellen"
     },
     "bulk": {
-      "delete": "",
-      "restore": ""
+      "delete": "Ausgewählte Dossiert endgültig löschen",
+      "restore": "Ausgewählte Dossiers wiederherstellen"
     },
-    "label": "",
+    "label": "Papierkorb",
     "no-data": {
-      "title": ""
+      "title": "Es wurde noch kein Dossier angelegt."
     },
     "no-match": {
-      "title": ""
+      "title": "Die ausgewählten Filter treffen auf kein Dossier zu."
     },
     "table-col-names": {
-      "deleted-on": "",
-      "name": "",
-      "owner": "",
-      "time-to-restore": ""
+      "deleted-on": "Gelöscht am",
+      "name": "Name",
+      "owner": "Eigentümer",
+      "time-to-restore": "Verbleibende Zeit für Wiederherstellung"
     },
     "table-header": {
-      "title": ""
+      "title": "{length} {length, plural, one{gelöschtes Dossier} other{gelöschte Dossiers}}"
     }
   },
-  "type": "Art",
+  "type": "Typ",
+  "unknown": "Unbekannt",
   "upload-status": {
     "dialog": {
       "actions": {
         "cancel": "Upload abbrechen",
-        "re-upload": "Wiederholen Sie den Upload"
+        "re-upload": "Upload erneut versuchen"
       },
       "title": "Datei-Uploads ({len})"
     },
     "error": {
-      "file-size": "Datei zu groß. Das Limit ist {size} MB.",
-      "generic": "Datei konnte nicht hochgeladen werden."
+      "file-size": "Datei zu groß. Die maximal zulässige Größe beträgt {size} MB.",
+      "generic": "Fehler beim Hochladen des Dokuments"
     }
   },
   "user-listing": {
@@ -1329,62 +1581,64 @@
       "delete-disabled": "Sie können Ihr eigenes Konto nicht löschen."
     },
     "no-match": {
-      "title": "Keine Benutzer stimmen mit Ihren aktuellen Filtern überein."
+      "title": "Die ausgewählten Filter treffen auf keinen Benutzer zu."
     },
-    "search": "Suche...",
+    "search": "Suche ...",
     "table-col-names": {
       "active": "Aktiv",
-      "email": "Email",
+      "email": "E-Mail-Adresse",
       "name": "Name",
       "roles": "Rollen"
     },
     "table-header": {
-      "title": "{length} Benutzer"
+      "title": "{length} {length, plural, one{user} other{users}}"
     }
   },
   "user-management": "Benutzerverwaltung",
-  "user-profile": {
+  "user-profile": "Mein Profil",
+  "user-profile-screen": {
     "actions": {
-      "change-password": "",
-      "save": "Profil speichern"
+      "change-password": "Passwort ändern",
+      "save": "Änderungen speichern"
     },
     "form": {
       "email": "Email",
       "first-name": "Vorname",
       "last-name": "Nachname"
     },
-    "title": "Mein Profil"
+    "title": "Profil bearbeiten"
   },
   "user-stats": {
     "chart": {
       "users": "Benutzer im Arbeitsbereich"
     },
     "collapse": "Details ausblenden",
-    "expand": "Zeige Details",
+    "expand": "Details anzeigen",
     "title": "Benutzer"
   },
+  "view-mode": {
+    "list": "Liste",
+    "view-as": "Ansicht als:",
+    "workflow": "Arbeitsablauf"
+  },
   "watermark": "Wasserzeichen",
   "watermark-screen": {
     "action": {
-      "change-success": "Wasserzeichen aktualisiert!",
-      "delete-success": "Wasserzeichen gelöscht.",
-      "error": "Wasserzeichen konnte nicht aktualisiert werden",
-      "revert": "Zurückkehren",
+      "change-success": "Das Wasserzeichen wurde aktualisiert!",
+      "delete-success": "Das Wasserzeichen wurde gelöscht.",
+      "error": "Fehler beim Aktualisieren des Wasserzeichens",
+      "revert": "Rückgängig machen",
       "save": "Änderungen speichern"
     },
     "form": {
       "color": "Farbe",
       "font-size": "Schriftgröße",
       "font-type": "Schriftart",
-      "opacity": "Opazität",
-      "orientation": "Orientierung",
+      "opacity": "Deckkraft",
+      "orientation": "Ausrichtung",
       "text-placeholder": "Text eingeben"
     },
     "title": "Wasserzeichen"
   },
-  "annotation-engines": {
-    "dictionary": "",
-    "ner": "",
-    "rule": ""
-  }
+  "yesterday": "Gestern"
 }
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index a45e72a65..737ad3f96 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1,4 +1,5 @@
 {
+  "account-settings": "Account Settings",
   "actions": {
     "all": "All",
     "none": "None"
@@ -24,7 +25,8 @@
         "placeholder": "Enter Name"
       },
       "template": "Dossier Template",
-      "watermark": "Watermark application on redacted documents"
+      "watermark": "Watermark application on redacted documents",
+      "watermark-preview": "Watermark application on preview documents"
     },
     "header-new": "Create Dossier"
   },
@@ -245,6 +247,15 @@
       "only-here": "Remove only here",
       "remove-from-dict": "Remove from dictionary"
     },
+    "resize-accept": {
+      "label": "Save Resize"
+    },
+    "resize-cancel": {
+      "label": "Abort Resize"
+    },
+    "resize": {
+      "label": "Resize"
+    },
     "show": "Show",
     "undo": "Undo"
   },
@@ -254,16 +265,11 @@
     "rule": "Redaction based on rule {rule}"
   },
   "annotation-type": {
-    "add-dictionary": "Pending add to dictionary",
-    "change-legal-basis": "Pending Change of Legal Basis",
     "declined-suggestion": "Declined Suggestion",
     "hint": "Hint",
     "manual-redaction": "Manual Redaction",
-    "pending-analysis": "Pending Re-Analysis",
     "recommendation": "Recommendation",
     "redaction": "Redaction",
-    "remove-dictionary": "Pending remove from dictionary",
-    "remove-only-here": "Pending removal ( only here )",
     "skipped": "Skipped",
     "suggestion-add": "Suggested redaction",
     "suggestion-add-dictionary": "Suggested dictionary add",
@@ -271,7 +277,8 @@
     "suggestion-force-redaction": "Suggestion force redaction",
     "suggestion-recategorize-image": "Suggested recategorize image",
     "suggestion-remove": "Suggested redaction removal",
-    "suggestion-remove-dictionary": "Suggested dictionary removal"
+    "suggestion-remove-dictionary": "Suggested dictionary removal",
+    "suggestion-resize": "Suggested Resize"
   },
   "annotations": "Annotations",
   "archived": "Archived",
@@ -681,9 +688,11 @@
       "stats": {
         "analysed-pages": "{count} {count, plural, one{page} other{pages}}",
         "created-on": "Created on {date}",
+        "deleted": "{count} deleted files",
         "documents": "{count} {count, plural, one{document} other{documents}}",
         "due-date": "Due {date}",
-        "people": "{count} {count, plural, one{user} other{users}}"
+        "people": "{count} {count, plural, one{user} other{users}}",
+        "processing-documents": "{count} processing {count, plural, one{document} other{documents}}"
       }
     },
     "download-file": "Download",
@@ -691,8 +700,7 @@
     "file-listing": {
       "file-entry": {
         "file-error": "Re-processing required",
-        "file-pending": "Pending...",
-        "file-processing": "Processing"
+        "file-pending": "Pending..."
       }
     },
     "filters": {
@@ -700,9 +708,9 @@
       "search": "Document name..."
     },
     "header-actions": {
+      "download-csv": "Download CSV File Report",
       "edit": "Edit Dossier",
-      "upload-document": "Upload Document",
-      "download-csv": "Download CSV File Report"
+      "upload-document": "Upload Document"
     },
     "new-rule": {
       "toast": {
@@ -826,7 +834,8 @@
   "edit-dossier-dialog": {
     "actions": {
       "revert": "Revert",
-      "save": "Save Changes"
+      "save": "Save",
+      "save-and-close": "Save & Close"
     },
     "attributes": {
       "custom-attributes": "Custom Dossier Attributes",
@@ -882,7 +891,8 @@
           "placeholder": "Enter Name"
         },
         "template": "Dossier Template",
-        "watermark": "Watermark application on redacted documents"
+        "watermark": "Watermark application on redacted documents",
+        "watermark-preview": "Watermark application on preview documents"
       }
     },
     "header": "Edit {dossierName}",
@@ -902,11 +912,11 @@
     "unsaved-changes": "You have unsaved changes. Save or revert before changing the tab."
   },
   "error": {
-    "close": "Close",
     "http": {
       "generic": "Action failed with code {status}"
     },
-    "offline": "You're offline",
+    "offline": "Disconnected",
+    "online": "Reconnected",
     "reload": "Reload",
     "title": "Oops! Something went wrong..."
   },
@@ -983,6 +993,10 @@
     "bulk-actions": {
       "delete": "Delete Selected Attributes"
     },
+    "error": {
+      "conflict": "File-Attribute with this name already exists!",
+      "generic": "Failed to add File-Attribute"
+    },
     "no-data": {
       "title": "There are no file attributes yet."
     },
@@ -993,7 +1007,7 @@
     "search": "Search by attribute name...",
     "table-col-names": {
       "csv-column": "CSV Column",
-      "displayed-in-file-list": "Dis. In File List",
+      "displayed-in-file-list": "Displayed in File List",
       "filterable": "Filterable",
       "name": "Name",
       "primary": "Primary",
@@ -1015,7 +1029,7 @@
     "document-info": "Your Document Info lives here. This includes metadata required on each document.",
     "download-original-file": "Download Original File",
     "exclude-pages": "Exclude pages from redaction",
-    "excluded-from-redaction": "excluded from redaction",
+    "excluded-from-redaction": "excluded from automatic redaction",
     "fullscreen": "Full Screen (F)",
     "last-reviewer": "Last Reviewed by:",
     "no-data": {
@@ -1073,11 +1087,11 @@
     "approved": "Approved",
     "deleted": "Deleted",
     "error": "Re-processing required",
-    "excluded": "Excluded",
     "full-reprocess": "Processing",
     "indexing": "Processing",
     "ocr-processing": "OCR Processing",
-    "processing": "Processing",
+    "processed": "Processed",
+    "processing": "Processing...",
     "reprocess": "Processing",
     "unassigned": "Unassigned",
     "under-approval": "Under Approval",
@@ -1273,15 +1287,46 @@
     "dossier-owner-deleted": "{dossierName} owner removed!",
     "dossier-owner-removed": "{dossierName} owner removed!",
     "dossier-owner-set": " {dossierName} owner changed to {user}!",
+    "no-data": "You currently have no notifications",
     "unassigned-from-file": "You have been unassigned from {fileName} in the {dossierName}!",
     "user-becomes-dossier-member": "{user} joined dossier: {dossierName}!",
     "user-demoted-to-reviewer": "{user} demoted to reviewer in dossier: {dossierName}!",
     "user-promoted-to-approver": "{user} promoted to approver in dossier: {dossierName}!",
     "user-removed-as-dossier-member": "{user} removed as a member of: {dossierName} !"
   },
-  "notifications": {
-    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}",
-    "no-data": "You have no notifications."
+  "notifications": "Notifications",
+  "notifications-screen": {
+    "category": {
+      "email-notifications": "Email Notifications",
+      "in-app-notifications": "In-App Notifications"
+    },
+    "error": {
+      "generic": "Something went wrong... Preferences update failed!"
+    },
+    "groups": {
+      "approver": "Dossiers you are approver on",
+      "own": "Dossiers you own",
+      "reviewer": "Dossiers you are reviewer on"
+    },
+    "options-title": "Choose on which category you want to be notified",
+    "options": {
+      "document-is-sent-for-approval": "Document is sent for approval",
+      "document-status-changes": "Document status changes",
+      "dossier-status-changes": "Dossier status changes",
+      "request-to-join-the-dossier": "Request to join the dossier",
+      "when-a-document-is-approved": "When a document is approved",
+      "when-a-document-is-assigned-to-a-reviewer": "When a document is assigned to a reviewer",
+      "when-a-document-is-sent-for-approval": "When a document is sent for approval",
+      "when-a-reviewer-is-unassigned-from-a-document": "When a reviewer is unassigned from a document",
+      "when-i-am-assigned-on-a-document": "When I am assigned on a document",
+      "when-i-am-unassigned-from-a-document": "When I am unassigned from a document"
+    },
+    "schedule": {
+      "daily": "Daily Summary",
+      "instant": "Instant",
+      "weekly": "Weekly Summary"
+    },
+    "title": "Notifications Preferences"
   },
   "overwrite-files-dialog": {
     "options": {
@@ -1392,6 +1437,16 @@
     },
     "header": "Set Temporary Password for {userName}"
   },
+  "resize-annotation-dialog": {
+    "actions": {
+      "cancel": "Cancel",
+      "save": "Save Changes"
+    },
+    "content": {
+      "comment": "Comment"
+    },
+    "header": "Resize Redaction"
+  },
   "roles": {
     "inactive": "Inactive",
     "manager-admin": "Manager & Admin",
@@ -1458,6 +1513,7 @@
       "dossiers": "Active Dossiers",
       "my-account": {
         "children": {
+          "account": "Account",
           "admin": "Settings",
           "downloads": "My Downloads",
           "language": {
@@ -1466,7 +1522,6 @@
             "label": "Language"
           },
           "logout": "Logout",
-          "my-profile": "My Profile",
           "trash": "Trash"
         }
       }
@@ -1500,6 +1555,15 @@
   },
   "type": "Type",
   "unknown": "Unknown",
+  "upload-dictionary-dialog": {
+    "options": {
+      "cancel": "Cancel",
+      "merge": "Merge entries",
+      "overwrite": "Overwrite"
+    },
+    "question": "Choose how you want to proceed:",
+    "title": "The dictionary already has entries!"
+  },
   "upload-status": {
     "dialog": {
       "actions": {
@@ -1538,17 +1602,18 @@
     }
   },
   "user-management": "User Management",
-  "user-profile": {
+  "user-profile": "My Profile",
+  "user-profile-screen": {
     "actions": {
       "change-password": "Change Password",
-      "save": "Save profile"
+      "save": "Save Changes"
     },
     "form": {
       "email": "Email",
       "first-name": "First name",
       "last-name": "Last name"
     },
-    "title": "My profile"
+    "title": "Edit Profile"
   },
   "user-stats": {
     "chart": {
diff --git a/apps/red-ui/src/assets/icons/general/analyse.svg b/apps/red-ui/src/assets/icons/general/analyse.svg
deleted file mode 100644
index 9f087414c..000000000
--- a/apps/red-ui/src/assets/icons/general/analyse.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-    
-        
-    
-
diff --git a/apps/red-ui/src/assets/icons/general/excluded-page.svg b/apps/red-ui/src/assets/icons/general/excluded-page.svg
new file mode 100644
index 000000000..5857d07cf
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/excluded-page.svg
@@ -0,0 +1,16 @@
+
+
+    
+        
+            
+                
+                    
+                        
+                    
+                
+            
+        
+    
+
diff --git a/apps/red-ui/src/assets/icons/general/reanalyse.svg b/apps/red-ui/src/assets/icons/general/reanalyse.svg
new file mode 100644
index 000000000..e1a919b1a
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/reanalyse.svg
@@ -0,0 +1,16 @@
+
+
+    
+        
+            
+            
+            
+                
+                    
+                
+            
+        
+    
+
diff --git a/apps/red-ui/src/assets/icons/general/resize.svg b/apps/red-ui/src/assets/icons/general/resize.svg
new file mode 100644
index 000000000..d0bd1e4c2
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/resize.svg
@@ -0,0 +1,26 @@
+
+
+    
+        
+            
+                
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                    
+                
+            
+        
+    
+
diff --git a/apps/red-ui/src/assets/oauth/silent-refresh.html b/apps/red-ui/src/assets/oauth/silent-refresh.html
index d16b2ffea..5d975507c 100644
--- a/apps/red-ui/src/assets/oauth/silent-refresh.html
+++ b/apps/red-ui/src/assets/oauth/silent-refresh.html
@@ -1,7 +1,5 @@
 
     
-        
+        
     
 
diff --git a/apps/red-ui/src/assets/oauth/silent-refresh.js b/apps/red-ui/src/assets/oauth/silent-refresh.js
new file mode 100644
index 000000000..7e7c47d1c
--- /dev/null
+++ b/apps/red-ui/src/assets/oauth/silent-refresh.js
@@ -0,0 +1 @@
+parent.postMessage(location.href, location.origin);
diff --git a/apps/red-ui/src/main.ts b/apps/red-ui/src/main.ts
index 500b00076..31e466364 100644
--- a/apps/red-ui/src/main.ts
+++ b/apps/red-ui/src/main.ts
@@ -10,7 +10,7 @@ if (environment.production) {
 }
 
 platformBrowserDynamic()
-    .bootstrapModule(AppModule)
+    .bootstrapModule(AppModule, { ngZoneEventCoalescing: true })
     .then(moduleRef => {
         if (!environment.production) {
             const applicationRef = moduleRef.injector.get(ApplicationRef);
diff --git a/bamboo-specs/src/main/resources/scripts/build.sh b/bamboo-specs/src/main/resources/scripts/build.sh
index 2a06e4b94..d145c55e2 100755
--- a/bamboo-specs/src/main/resources/scripts/build.sh
+++ b/bamboo-specs/src/main/resources/scripts/build.sh
@@ -52,14 +52,16 @@ then
 
 else
     echo "Not on a relevant branch $bamboo_planRepository_branchName ... skipping."
+    echo "APP_VERSION=BRANCH-$bamboo_planRepository_branchName-$bamboo_buildNumber" > version.properties
 
     if [[ ! -z "$bamboo_version_tag" ]]
     then
+      echo "$BAMBOO_DOWNLOAD_PASS" | docker login -u "$BAMBOO_DOWNLOAD_USER" --password-stdin nexus.iqser.com:5001
       echo "Pushing custom tag: $bamboo_version_tag"
       docker tag "$imageName:latest" "$imageName:$bamboo_version_tag"
       docker push "$imageName:$bamboo_version_tag"
     fi
 
-    echo "APP_VERSION=BRANCH-$bamboo_planRepository_branchName-$bamboo_buildNumber" > version.properties
+
 fi
 
diff --git a/docker/common/nginx/nginx.conf b/docker/common/nginx/nginx.conf
index e8e4015e6..752051c54 100644
--- a/docker/common/nginx/nginx.conf
+++ b/docker/common/nginx/nginx.conf
@@ -1,5 +1,4 @@
 server {
-
   listen 8080;
   proxy_hide_header WWW-Authenticate;
   port_in_redirect off;
@@ -7,6 +6,8 @@ server {
   root /usr/share/nginx/html;
   # SSL stuff for cloudflare proxy-ing - ignores SSL certificate and uses SNI
 
+  add_header Content-Security-Policy "default-src 'self'; script-src 'self' data: 'unsafe-eval'; script-src-elem 'self' data: blob: 'unsafe-inline'; script-src-attr 'self' data:; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:";
+
   proxy_ssl_verify off;
   proxy_read_timeout 1m;
   proxy_ssl_server_name on;
@@ -17,7 +18,7 @@ server {
 
   location /ui/ {
    proxy_hide_header WWW-Authenticate;
-   try_files $uri$args $uri$args/ $uri $uri/ /ui/index.html =404;
+   try_files $uri $uri/ /ui/index.html =404;
   }
 
   client_max_body_size 0;
diff --git a/docker/red-ui/Dockerfile b/docker/red-ui/Dockerfile
index b099b8d23..017b7067f 100644
--- a/docker/red-ui/Dockerfile
+++ b/docker/red-ui/Dockerfile
@@ -1,12 +1,20 @@
+FROM node:14.17-alpine as prep
+RUN apk add --update jq && rm -rf /var/cache/apk/*
+
+COPY package.json /tmp
+
+RUN jq '{ dependencies, devDependencies, peerDependencies, scripts: (.scripts | { postinstall }) }' < /tmp/package.json > /tmp/deps.json
+# keep postinstall script
+
 ### STAGE 1: Build ###
 
 # We label our stage as ‘builder’
 FROM node:14.17-alpine as builder
-RUN apk add --update jq && rm -rf /var/cache/apk/*
-COPY package.json yarn.lock ./
+COPY --from=prep /tmp/deps.json ./package.json
+COPY yarn.lock ./
 
 ## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
-RUN yarn install --verbose && mkdir /ng-app && mv ./node_modules ./ng-app
+RUN yarn install && mkdir /ng-app && mv ./node_modules ./ng-app
 
 WORKDIR /ng-app
 
@@ -31,6 +39,7 @@ CMD ["/bin/cp", "-r", "/ng-app/dist/paligo-styles", "/tmp/styles-export"]
 
 
 FROM nginx:1.19.2-alpine
+RUN apk add --update nano && rm -rf /var/cache/apk/*
 
 ## Copy our default nginx config
 COPY docker/common/nginx/nginx.conf /etc/nginx/conf.d/default.conf
@@ -46,5 +55,7 @@ RUN chmod g+r -R /usr/share/nginx/html
 ## Change permissions to enable openShift functionality
 RUN chmod -R g+rwx /var/cache/nginx /var/run /var/log/nginx /usr/share /etc/nginx
 
+USER 1001
+
 COPY docker/red-ui/docker-entrypoint.sh /
 CMD ["/docker-entrypoint.sh"]
diff --git a/docker/red-ui/docker-entrypoint.sh b/docker/red-ui/docker-entrypoint.sh
index 35e958736..396003f96 100755
--- a/docker/red-ui/docker-entrypoint.sh
+++ b/docker/red-ui/docker-entrypoint.sh
@@ -2,7 +2,7 @@
 
 ADMIN_CONTACT_NAME="${ADMIN_CONTACT_NAME:-}"
 ADMIN_CONTACT_URL="${ADMIN_CONTACT_URL:-}"
-API_URL="${API_URL:-}"
+API_URL="${API_URL:-/redaction-gateway-v1}"
 APP_NAME="${APP_NAME:-}"
 AUTO_READ_TIME="${AUTO_READ_TIME:-1.5}"
 BACKEND_APP_VERSION="${BACKEND_APP_VERSION:-4.7.0}"
@@ -12,7 +12,7 @@ FRONTEND_APP_VERSION="${FRONTEND_APP_VERSION:-}"
 
 LICENSE_CUSTOMER="${LICENSE_CUSTOMER:-Developement License}"
 LICENSE_EMAIL="${LICENSE_EMAIL:-license@iqser.com}"
-LICENSE_END="${LICENSE_END:-31-12-2021}"
+LICENSE_END="${LICENSE_END:-31-12-2022}"
 LICENSE_PAGE_COUNT="${LICENSE_PAGE_COUNT:-1000000}"
 LICENSE_START="${LICENSE_START:-01-01-2021}"
 
@@ -20,7 +20,7 @@ MAX_FILE_SIZE_MB="${MAX_FILE_SIZE_MB:-50}"
 MAX_RETRIES_ON_SERVER_ERROR="${MAX_RETRIES_ON_SERVER_ERROR:-3}"
 OAUTH_CLIENT_ID="${OAUTH_CLIENT_ID:-gin-client}"
 OAUTH_IDP_HINT="${OAUTH_IDP_HINT:-}"
-OAUTH_URL="${OAUTH_URL:-https://keycloak-dev.iqser.cloud/auth/realms/dev}"
+OAUTH_URL="${OAUTH_URL:-/auth}"
 RECENT_PERIOD_IN_HOURS="${RECENT_PERIOD_IN_HOURS:-24}"
 SELECTION_MODE="${SELECTION_MODE:-structural}"
 
diff --git a/libs/common-ui b/libs/common-ui
index 1df1b1ab8..aebdfd0f2 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 1df1b1ab899e21093eb07c444acf90def933cb02
+Subproject commit aebdfd0f2eaaf6b4551c5c822ca9533a7f37fda2
diff --git a/libs/red-domain/.eslintrc.json b/libs/red-domain/.eslintrc.json
index c3a38e5bf..a4e2637cd 100644
--- a/libs/red-domain/.eslintrc.json
+++ b/libs/red-domain/.eslintrc.json
@@ -1,15 +1,9 @@
 {
-  "extends": [
-    "../../.eslintrc.json"
-  ],
-  "ignorePatterns": [
-    "!**/*"
-  ],
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
       "extends": [
         "plugin:@nrwl/nx/angular",
         "plugin:@angular-eslint/template/process-inline-templates",
@@ -20,9 +14,7 @@
         "plugin:@angular-eslint/recommended--extra"
       ],
       "parserOptions": {
-        "project": [
-          "libs/red-domain/tsconfig.*?.json"
-        ]
+        "project": ["libs/red-domain/tsconfig.*?.json"]
       },
       "rules": {
         "@angular-eslint/directive-selector": [
@@ -55,33 +47,20 @@
           "error",
           {
             "selector": "memberLike",
-            "modifiers": [
-              "private"
-            ],
-            "format": [
-              "camelCase"
-            ],
+            "modifiers": ["private"],
+            "format": ["camelCase"],
             "leadingUnderscore": "require"
           },
           {
             "selector": "memberLike",
-            "modifiers": [
-              "protected"
-            ],
-            "format": [
-              "camelCase"
-            ],
+            "modifiers": ["protected"],
+            "format": ["camelCase"],
             "leadingUnderscore": "require"
           },
           {
             "selector": "memberLike",
-            "modifiers": [
-              "private"
-            ],
-            "format": [
-              "UPPER_CASE",
-              "camelCase"
-            ],
+            "modifiers": ["private"],
+            "format": ["UPPER_CASE", "camelCase"],
             "leadingUnderscore": "require"
           }
         ],
@@ -94,22 +73,12 @@
         "@typescript-eslint/no-unsafe-member-access": "off",
         "@typescript-eslint/restrict-template-expressions": "off"
       },
-      "plugins": [
-        "@angular-eslint/eslint-plugin",
-        "@typescript-eslint"
-      ]
+      "plugins": ["@angular-eslint/eslint-plugin", "@typescript-eslint"]
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@nrwl/nx/angular-template",
-        "plugin:@angular-eslint/template/recommended"
-      ],
-      "plugins": [
-        "prettier"
-      ],
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template", "plugin:@angular-eslint/template/recommended"],
+      "plugins": ["prettier"],
       "rules": {}
     }
   ]
diff --git a/libs/red-domain/src/index.ts b/libs/red-domain/src/index.ts
index 5365dabd6..aee8ff159 100644
--- a/libs/red-domain/src/index.ts
+++ b/libs/red-domain/src/index.ts
@@ -6,6 +6,7 @@ export * from './lib/users';
 export * from './lib/pages';
 export * from './lib/audit';
 export * from './lib/notifications';
+export * from './lib/notifications-preferences';
 export * from './lib/dossier-templates';
 export * from './lib/dictionaries';
 export * from './lib/redaction-log';
@@ -17,3 +18,4 @@ export * from './lib/reports';
 export * from './lib/configuration';
 export * from './lib/signature';
 export * from './lib/legal-basis';
+export * from './lib/dossier-stats';
diff --git a/libs/red-domain/src/lib/dictionaries/dictionary.model.ts b/libs/red-domain/src/lib/dictionaries/dictionary.model.ts
index b26199467..a93bcec16 100644
--- a/libs/red-domain/src/lib/dictionaries/dictionary.model.ts
+++ b/libs/red-domain/src/lib/dictionaries/dictionary.model.ts
@@ -4,7 +4,7 @@ import { IDictionary } from './dictionary';
 export class Dictionary implements IDictionary, IListable {
     readonly addToDictionaryAction: boolean;
     readonly caseInsensitive: boolean;
-    readonly description?: string;
+    readonly description: string;
     readonly dossierTemplateId?: string;
     entries: List;
     readonly hexColor?: string;
@@ -17,7 +17,7 @@ export class Dictionary implements IDictionary, IListable {
     constructor(dictionary: IDictionary, readonly virtual = false) {
         this.addToDictionaryAction = !!dictionary.addToDictionaryAction;
         this.caseInsensitive = !!dictionary.caseInsensitive;
-        this.description = dictionary.description;
+        this.description = dictionary.description ?? '';
         this.dossierTemplateId = dictionary.dossierTemplateId;
         this.entries = dictionary.entries ?? [];
         this.hexColor = dictionary.hexColor;
diff --git a/libs/red-domain/src/lib/dossier-stats/dossier-stats.model.ts b/libs/red-domain/src/lib/dossier-stats/dossier-stats.model.ts
new file mode 100644
index 000000000..b872f4709
--- /dev/null
+++ b/libs/red-domain/src/lib/dossier-stats/dossier-stats.model.ts
@@ -0,0 +1,37 @@
+import { IDossierStats } from './dossier-stats';
+import { FileCountPerProcessingStatus, FileCountPerWorkflowStatus } from './types';
+import { isProcessingStatuses, ProcessingFileStatus } from '../files';
+
+export class DossierStats implements IDossierStats {
+    readonly dossierId: string;
+    readonly fileCountPerProcessingStatus: FileCountPerProcessingStatus;
+    readonly fileCountPerWorkflowStatus: FileCountPerWorkflowStatus;
+    readonly hasHintsNoRedactionsFilePresent: boolean;
+    readonly hasNoFlagsFilePresent: boolean;
+    readonly hasRedactionsFilePresent: boolean;
+    readonly hasSuggestionsFilePresent: boolean;
+    readonly hasUpdatesFilePresent: boolean;
+    readonly numberOfPages: number;
+    readonly numberOfFiles: number;
+    readonly numberOfProcessingFiles: number;
+
+    readonly hasFiles: boolean;
+
+    constructor(stats: IDossierStats) {
+        this.dossierId = stats.dossierId;
+        this.fileCountPerProcessingStatus = stats.fileCountPerProcessingStatus;
+        this.fileCountPerWorkflowStatus = stats.fileCountPerWorkflowStatus;
+        this.hasHintsNoRedactionsFilePresent = stats.hasHintsNoRedactionsFilePresent;
+        this.hasNoFlagsFilePresent = stats.hasNoFlagsFilePresent;
+        this.hasRedactionsFilePresent = stats.hasRedactionsFilePresent;
+        this.hasSuggestionsFilePresent = stats.hasSuggestionsFilePresent;
+        this.hasUpdatesFilePresent = stats.hasUpdatesFilePresent;
+        this.numberOfPages = stats.numberOfPages;
+        this.numberOfFiles = stats.numberOfFiles;
+        this.numberOfProcessingFiles = Object.entries(this.fileCountPerProcessingStatus)
+            .filter(([key, _]) => isProcessingStatuses.includes(key as ProcessingFileStatus))
+            .reduce((count, [_, value]) => count + value, 0);
+
+        this.hasFiles = this.numberOfFiles > 0;
+    }
+}
diff --git a/libs/red-domain/src/lib/dossier-stats/dossier-stats.ts b/libs/red-domain/src/lib/dossier-stats/dossier-stats.ts
new file mode 100644
index 000000000..022673a00
--- /dev/null
+++ b/libs/red-domain/src/lib/dossier-stats/dossier-stats.ts
@@ -0,0 +1,14 @@
+import { FileCountPerProcessingStatus, FileCountPerWorkflowStatus } from './types';
+
+export interface IDossierStats {
+    dossierId: string;
+    fileCountPerProcessingStatus: FileCountPerProcessingStatus;
+    fileCountPerWorkflowStatus: FileCountPerWorkflowStatus;
+    hasHintsNoRedactionsFilePresent: boolean;
+    hasNoFlagsFilePresent: boolean;
+    hasRedactionsFilePresent: boolean;
+    hasSuggestionsFilePresent: boolean;
+    hasUpdatesFilePresent: boolean;
+    numberOfPages: number;
+    numberOfFiles: number;
+}
diff --git a/libs/red-domain/src/lib/dossier-stats/index.ts b/libs/red-domain/src/lib/dossier-stats/index.ts
new file mode 100644
index 000000000..82cf12c13
--- /dev/null
+++ b/libs/red-domain/src/lib/dossier-stats/index.ts
@@ -0,0 +1,3 @@
+export * from './dossier-stats';
+export * from './dossier-stats.model';
+export * from './types';
diff --git a/libs/red-domain/src/lib/dossier-stats/types.ts b/libs/red-domain/src/lib/dossier-stats/types.ts
new file mode 100644
index 000000000..54a188567
--- /dev/null
+++ b/libs/red-domain/src/lib/dossier-stats/types.ts
@@ -0,0 +1,4 @@
+import { ProcessingFileStatus, WorkflowFileStatus } from '../files';
+
+export type FileCountPerWorkflowStatus = { [key in WorkflowFileStatus]?: number };
+export type FileCountPerProcessingStatus = { [key in ProcessingFileStatus]?: number };
diff --git a/libs/red-domain/src/lib/dossiers/dossier.model.ts b/libs/red-domain/src/lib/dossiers/dossier.model.ts
index 5afb12bbb..8c8ab6e5b 100644
--- a/libs/red-domain/src/lib/dossiers/dossier.model.ts
+++ b/libs/red-domain/src/lib/dossiers/dossier.model.ts
@@ -1,9 +1,7 @@
-import { File } from '../files';
 import { IListable, List } from '@iqser/common-ui';
 import { IDossier } from './dossier';
 import { DossierStatus } from './types';
 import { DownloadFileType } from '../shared';
-import { IDictionary } from '../dictionaries';
 
 export class Dossier implements IDossier, IListable {
     readonly dossierId: string;
@@ -22,20 +20,10 @@ export class Dossier implements IDossier, IListable {
     readonly startDate?: string;
     readonly status: DossierStatus;
     readonly watermarkEnabled: boolean;
+    readonly watermarkPreviewEnabled: boolean;
     readonly hasReviewers: boolean;
 
-    readonly reanalysisRequired = this.files.some(file => file.analysisRequired);
-    readonly hasFiles = this.files.length > 0;
-    readonly filesLength = this.files.length;
-
-    readonly totalNumberOfPages: number;
-    readonly hintsOnly: boolean;
-    readonly hasRedactions: boolean;
-    readonly hasSuggestions: boolean;
-    readonly hasNone: boolean;
-    readonly hasPendingOrProcessing: boolean;
-
-    constructor(dossier: IDossier, readonly files: List = [], public type?: IDictionary) {
+    constructor(dossier: IDossier) {
         this.dossierId = dossier.dossierId;
         this.approverIds = dossier.approverIds;
         this.date = dossier.date;
@@ -52,28 +40,8 @@ export class Dossier implements IDossier, IListable {
         this.startDate = dossier.startDate;
         this.status = dossier.status;
         this.watermarkEnabled = dossier.watermarkEnabled;
+        this.watermarkPreviewEnabled = dossier.watermarkPreviewEnabled;
         this.hasReviewers = !!this.memberIds && this.memberIds.length > 1;
-
-        let hintsOnly = false;
-        let hasRedactions = false;
-        let hasSuggestions = false;
-        let totalNumberOfPages = 0;
-        let hasPendingOrProcessing = false;
-
-        this.files.forEach(f => {
-            hintsOnly = hintsOnly || f.hintsOnly;
-            hasRedactions = hasRedactions || f.hasRedactions;
-            hasSuggestions = hasSuggestions || f.hasSuggestions;
-            totalNumberOfPages += f.numberOfPages ?? 0;
-            hasPendingOrProcessing = hasPendingOrProcessing || f.isPending || f.isProcessing;
-        });
-
-        this.hintsOnly = hintsOnly;
-        this.hasRedactions = hasRedactions;
-        this.hasSuggestions = hasSuggestions;
-        this.totalNumberOfPages = totalNumberOfPages;
-        this.hasPendingOrProcessing = hasPendingOrProcessing;
-        this.hasNone = !this.hasSuggestions && !this.hasRedactions && !this.hintsOnly;
     }
 
     get id(): string {
@@ -88,10 +56,6 @@ export class Dossier implements IDossier, IListable {
         return this.dossierName;
     }
 
-    hasStatus(status: string): boolean {
-        return !!this.files.find(f => f.status === status);
-    }
-
     hasMember(memberId: string): boolean {
         return !!this.memberIds && this.memberIds.indexOf(memberId) >= 0;
     }
diff --git a/libs/red-domain/src/lib/dossiers/dossier.request.ts b/libs/red-domain/src/lib/dossiers/dossier.request.ts
index 1de6d997e..d816d7571 100644
--- a/libs/red-domain/src/lib/dossiers/dossier.request.ts
+++ b/libs/red-domain/src/lib/dossiers/dossier.request.ts
@@ -49,4 +49,8 @@ export interface IDossierRequest {
      * Whether a watermark will be applied to the redacted files or not.
      */
     readonly watermarkEnabled?: boolean;
+    /**
+     * Whether a watermark will be applied to the preview files or not.
+     */
+    readonly watermarkPreviewEnabled?: boolean;
 }
diff --git a/libs/red-domain/src/lib/dossiers/dossier.ts b/libs/red-domain/src/lib/dossiers/dossier.ts
index 2a96e2e5d..9b4883801 100644
--- a/libs/red-domain/src/lib/dossiers/dossier.ts
+++ b/libs/red-domain/src/lib/dossiers/dossier.ts
@@ -19,4 +19,5 @@ export interface IDossier {
     readonly startDate?: string;
     readonly status: DossierStatus;
     readonly watermarkEnabled: boolean;
+    readonly watermarkPreviewEnabled: boolean;
 }
diff --git a/libs/red-domain/src/lib/file-attributes/field.ts b/libs/red-domain/src/lib/file-attributes/field.ts
new file mode 100644
index 000000000..3cf3fe9e0
--- /dev/null
+++ b/libs/red-domain/src/lib/file-attributes/field.ts
@@ -0,0 +1,11 @@
+import { IListable } from '@iqser/common-ui';
+import { FileAttributeConfigType } from './file-attribute-config';
+
+export interface IField extends IListable {
+    id: string;
+    csvColumn: string;
+    name: string;
+    type: FileAttributeConfigType;
+    readonly: boolean;
+    primaryAttribute: boolean;
+}
diff --git a/libs/red-domain/src/lib/file-attributes/index.ts b/libs/red-domain/src/lib/file-attributes/index.ts
index ee91c20a8..0380a37e4 100644
--- a/libs/red-domain/src/lib/file-attributes/index.ts
+++ b/libs/red-domain/src/lib/file-attributes/index.ts
@@ -2,3 +2,4 @@ export * from './file-attribute-config';
 export * from './file-attribute-config.model';
 export * from './file-attributes';
 export * from './file-attributes-config';
+export * from './field';
diff --git a/libs/red-domain/src/lib/files/file.model.ts b/libs/red-domain/src/lib/files/file.model.ts
index 897c8f64c..805cc5757 100644
--- a/libs/red-domain/src/lib/files/file.model.ts
+++ b/libs/red-domain/src/lib/files/file.model.ts
@@ -1,18 +1,10 @@
-import { IListable, List } from '@iqser/common-ui';
+import { Entity } from '@iqser/common-ui';
 import { StatusSorter } from '../shared';
-import { FileStatus, FileStatuses } from './types';
+import { isProcessingStatuses, ProcessingFileStatus, ProcessingFileStatuses, WorkflowFileStatus, WorkflowFileStatuses } from './types';
 import { IFile } from './file';
 import { FileAttributes, IFileAttributesConfig } from '../file-attributes';
 
-const processingStatuses: List = [
-    FileStatuses.REPROCESS,
-    FileStatuses.FULLREPROCESS,
-    FileStatuses.OCR_PROCESSING,
-    FileStatuses.INDEXING,
-    FileStatuses.PROCESSING,
-] as const;
-
-export class File implements IFile, IListable {
+export class File extends Entity implements IFile {
     readonly added?: string;
     readonly allManualRedactionsApplied: boolean;
     readonly analysisDuration?: number;
@@ -37,16 +29,16 @@ export class File implements IFile, IListable {
     readonly lastUpdated?: string;
     readonly lastUploaded?: string;
     readonly legalBasisVersion?: number;
-    readonly numberOfAnalyses?: number;
+    readonly numberOfAnalyses: number;
     readonly numberOfPages?: number;
     readonly rulesVersion?: number;
-    readonly status: FileStatus;
     readonly uploader?: string;
     readonly excludedPages?: number[];
     readonly hasSuggestions: boolean;
+    readonly processingStatus: ProcessingFileStatus;
+    readonly workflowStatus: WorkflowFileStatus;
 
     readonly primaryAttribute?: string;
-    lastOpened = false;
     readonly statusSort: number;
     readonly cacheIdentifier?: string;
     readonly hintsOnly: boolean;
@@ -60,10 +52,10 @@ export class File implements IFile, IListable {
     readonly isUnderApproval: boolean;
     readonly canBeApproved: boolean;
     readonly canBeOpened: boolean;
-    readonly isWorkable: boolean;
     readonly canBeOCRed: boolean;
 
     constructor(file: IFile, readonly reviewerName: string, fileAttributesConfig?: IFileAttributesConfig) {
+        super(file);
         this.added = file.added;
         this.allManualRedactionsApplied = !!file.allManualRedactionsApplied;
         this.analysisDuration = file.analysisDuration;
@@ -89,30 +81,30 @@ export class File implements IFile, IListable {
         this.lastUploaded = file.lastUploaded;
         this.legalBasisVersion = file.legalBasisVersion;
         this.numberOfAnalyses = file.numberOfAnalyses;
-        this.status = ['REPROCESS', 'FULLREPROCESS', 'INDEXING'].includes(file.status) ? FileStatuses.PROCESSING : file.status;
-        this.isError = this.status === FileStatuses.ERROR;
+        this.processingStatus = file.processingStatus;
+        this.workflowStatus = file.workflowStatus;
+        this.isError = this.processingStatus === ProcessingFileStatuses.ERROR;
         this.numberOfPages = this.isError ? 0 : file.numberOfPages ?? 0;
         this.rulesVersion = file.rulesVersion;
         this.uploader = file.uploader;
         this.excludedPages = file.excludedPages;
         this.hasSuggestions = !!file.hasSuggestions;
 
-        this.statusSort = StatusSorter[this.status];
+        this.statusSort = StatusSorter[this.workflowStatus];
         if (this.lastUpdated && this.lastOCRTime) {
             this.cacheIdentifier = btoa((this.lastUploaded ?? '') + this.lastOCRTime);
         }
         this.hintsOnly = this.hasHints && !this.hasRedactions;
         this.hasNone = !this.hasRedactions && !this.hasHints && !this.hasSuggestions;
-        this.isUnassigned = !this.currentReviewer;
-        this.isProcessing = processingStatuses.includes(this.status);
-        this.isApproved = this.status === FileStatuses.APPROVED;
-        this.isPending = this.status === FileStatuses.UNPROCESSED;
-        this.isUnderReview = this.status === FileStatuses.UNDER_REVIEW;
-        this.isUnderApproval = this.status === FileStatuses.UNDER_APPROVAL;
+        this.isPending = this.processingStatus === ProcessingFileStatuses.UNPROCESSED;
+        this.isProcessing = isProcessingStatuses.includes(this.processingStatus);
+        this.isApproved = this.workflowStatus === WorkflowFileStatuses.APPROVED;
+        this.isUnassigned = this.workflowStatus === WorkflowFileStatuses.UNASSIGNED;
+        this.isUnderReview = this.workflowStatus === WorkflowFileStatuses.UNDER_REVIEW;
+        this.isUnderApproval = this.workflowStatus === WorkflowFileStatuses.UNDER_APPROVAL;
         this.canBeApproved = !this.analysisRequired && !this.hasSuggestions;
-        this.canBeOpened = !this.isError && !this.isPending;
-        this.isWorkable = !this.isProcessing && this.canBeOpened;
-        this.canBeOCRed = !this.excluded && !this.lastOCRTime && ['UNASSIGNED', 'UNDER_REVIEW', 'UNDER_APPROVAL'].includes(this.status);
+        this.canBeOpened = !this.isError && !this.isPending && this.numberOfAnalyses > 0;
+        this.canBeOCRed = !this.excluded && !this.lastOCRTime && (this.isUnassigned || this.isUnderReview || this.isUnderApproval);
 
         if (fileAttributesConfig) {
             const primary = fileAttributesConfig.fileAttributeConfigs?.find(c => c.primaryAttribute);
diff --git a/libs/red-domain/src/lib/files/file.ts b/libs/red-domain/src/lib/files/file.ts
index 6b35bbea9..73ea1584b 100644
--- a/libs/red-domain/src/lib/files/file.ts
+++ b/libs/red-domain/src/lib/files/file.ts
@@ -1,7 +1,7 @@
 /**
  * Object containing information on a specific file.
  */
-import { FileStatus } from './types';
+import { ProcessingFileStatus, WorkflowFileStatus } from './types';
 import { FileAttributes } from '../file-attributes';
 
 export interface IFile {
@@ -117,7 +117,7 @@ export interface IFile {
     /**
      * The number of times the file has been analyzed.
      */
-    readonly numberOfAnalyses?: number;
+    readonly numberOfAnalyses: number;
     /**
      * The number of pages of the file.
      */
@@ -130,12 +130,12 @@ export interface IFile {
      * Shows if the file is soft deleted.
      */
     readonly softDeleted?: string;
-    /**
-     * The status of the file with regard to its analysis an review processes.
-     */
-    readonly status: FileStatus;
     /**
      * The ID of the user who uploaded the file.
      */
     readonly uploader?: string;
+
+    readonly processingStatus: ProcessingFileStatus;
+
+    readonly workflowStatus: WorkflowFileStatus;
 }
diff --git a/libs/red-domain/src/lib/files/types.ts b/libs/red-domain/src/lib/files/types.ts
index 83f856bd4..9cc7eb301 100644
--- a/libs/red-domain/src/lib/files/types.ts
+++ b/libs/red-domain/src/lib/files/types.ts
@@ -1,17 +1,32 @@
-export const FileStatuses = {
+import { List } from '@iqser/common-ui';
+
+export const WorkflowFileStatuses = {
     APPROVED: 'APPROVED',
-    DELETED: 'DELETED',
-    ERROR: 'ERROR',
-    EXCLUDED: 'EXCLUDED',
-    FULLREPROCESS: 'FULLREPROCESS',
-    INDEXING: 'INDEXING',
-    OCR_PROCESSING: 'OCR_PROCESSING',
-    PROCESSING: 'PROCESSING',
-    REPROCESS: 'REPROCESS',
     UNASSIGNED: 'UNASSIGNED',
     UNDER_APPROVAL: 'UNDER_APPROVAL',
     UNDER_REVIEW: 'UNDER_REVIEW',
+} as const;
+
+export type WorkflowFileStatus = keyof typeof WorkflowFileStatuses;
+
+export const ProcessingFileStatuses = {
+    DELETED: 'DELETED',
+    ERROR: 'ERROR',
+    FULLREPROCESS: 'FULLREPROCESS',
+    INDEXING: 'INDEXING',
+    OCR_PROCESSING: 'OCR_PROCESSING',
+    PROCESSED: 'PROCESSED',
+    PROCESSING: 'PROCESSING',
+    REPROCESS: 'REPROCESS',
     UNPROCESSED: 'UNPROCESSED',
 } as const;
 
-export type FileStatus = keyof typeof FileStatuses;
+export type ProcessingFileStatus = keyof typeof ProcessingFileStatuses;
+
+export const isProcessingStatuses: List = [
+    ProcessingFileStatuses.REPROCESS,
+    ProcessingFileStatuses.FULLREPROCESS,
+    ProcessingFileStatuses.OCR_PROCESSING,
+    ProcessingFileStatuses.INDEXING,
+    ProcessingFileStatuses.PROCESSING,
+] as const;
diff --git a/libs/red-domain/src/lib/notifications-preferences/index.ts b/libs/red-domain/src/lib/notifications-preferences/index.ts
new file mode 100644
index 000000000..f2fedd47f
--- /dev/null
+++ b/libs/red-domain/src/lib/notifications-preferences/index.ts
@@ -0,0 +1,2 @@
+export * from './notification-preferences';
+export * from './types';
diff --git a/libs/red-domain/src/lib/notifications-preferences/notification-preferences.ts b/libs/red-domain/src/lib/notifications-preferences/notification-preferences.ts
new file mode 100644
index 000000000..394af0193
--- /dev/null
+++ b/libs/red-domain/src/lib/notifications-preferences/notification-preferences.ts
@@ -0,0 +1,9 @@
+import { EmailNotificationScheduleType } from './types';
+
+export interface INotificationPreferences {
+    emailNotificationType: EmailNotificationScheduleType;
+    emailNotifications: string[];
+    emailNotificationsEnabled: boolean;
+    inAppNotifications: string[];
+    inAppNotificationsEnabled: boolean;
+}
diff --git a/libs/red-domain/src/lib/notifications-preferences/types.ts b/libs/red-domain/src/lib/notifications-preferences/types.ts
new file mode 100644
index 000000000..31c6061e1
--- /dev/null
+++ b/libs/red-domain/src/lib/notifications-preferences/types.ts
@@ -0,0 +1,8 @@
+export const EmailNotificationScheduleTypes = {
+    INSTANT: 'DAILY',
+    DAILY: 'DAILY_SUMMARY',
+    WEEKLY: 'WEEKLY_SUMMARY',
+} as const;
+
+export type EmailNotificationScheduleType = keyof typeof EmailNotificationScheduleTypes;
+export const EmailNotificationScheduleTypesValues = Object.values(EmailNotificationScheduleTypes);
diff --git a/libs/red-domain/src/lib/redaction-log/index.ts b/libs/red-domain/src/lib/redaction-log/index.ts
index eef5f3805..e2abbc277 100644
--- a/libs/red-domain/src/lib/redaction-log/index.ts
+++ b/libs/red-domain/src/lib/redaction-log/index.ts
@@ -9,3 +9,4 @@ export * from './remove-redaction.request';
 export * from './manual-add.response';
 export * from './approve-request';
 export * from './image-recategorization.request';
+export * from './resize.request';
diff --git a/libs/red-domain/src/lib/redaction-log/resize.request.ts b/libs/red-domain/src/lib/redaction-log/resize.request.ts
new file mode 100644
index 000000000..faf9331f8
--- /dev/null
+++ b/libs/red-domain/src/lib/redaction-log/resize.request.ts
@@ -0,0 +1,8 @@
+import { IRectangle } from '../geometry';
+
+export interface IResizeRequest {
+    annotationId: string;
+    comment: string;
+    positions: IRectangle[];
+    value: string;
+}
diff --git a/libs/red-domain/src/lib/search/index.ts b/libs/red-domain/src/lib/search/index.ts
index 78ecaf160..536d4fccf 100644
--- a/libs/red-domain/src/lib/search/index.ts
+++ b/libs/red-domain/src/lib/search/index.ts
@@ -2,3 +2,5 @@ export * from './matched-document';
 export * from './matched-section';
 export * from './search.request';
 export * from './search.response';
+export * from './search-list-item';
+export * from './search-input';
diff --git a/libs/red-domain/src/lib/search/search-input.ts b/libs/red-domain/src/lib/search/search-input.ts
new file mode 100644
index 000000000..597b6391f
--- /dev/null
+++ b/libs/red-domain/src/lib/search/search-input.ts
@@ -0,0 +1,6 @@
+import { List } from '@iqser/common-ui';
+
+export interface ISearchInput {
+    readonly query: string;
+    readonly dossierIds?: List;
+}
diff --git a/libs/red-domain/src/lib/search/search-list-item.ts b/libs/red-domain/src/lib/search/search-list-item.ts
new file mode 100644
index 000000000..c1b2b700b
--- /dev/null
+++ b/libs/red-domain/src/lib/search/search-list-item.ts
@@ -0,0 +1,12 @@
+import { IListable, List } from '@iqser/common-ui';
+
+export interface ISearchListItem extends IListable {
+    readonly dossierId: string;
+    readonly filename: string;
+    readonly unmatched: List | null;
+    readonly highlights: Record;
+    readonly routerLink: string;
+    readonly status: string;
+    readonly dossierName: string;
+    readonly numberOfPages: number;
+}
diff --git a/libs/red-domain/src/lib/shared/sorters/status-sorter.ts b/libs/red-domain/src/lib/shared/sorters/status-sorter.ts
index fc6b88f52..8598dc56e 100644
--- a/libs/red-domain/src/lib/shared/sorters/status-sorter.ts
+++ b/libs/red-domain/src/lib/shared/sorters/status-sorter.ts
@@ -1,32 +1,22 @@
-import { FileStatus } from '../../files';
+import { WorkflowFileStatus } from '../../files';
 
-type StatusSorterItem = { key: FileStatus } | FileStatus | string;
-type Sorter = Record & {
+type StatusSorterItem = { key: WorkflowFileStatus } | WorkflowFileStatus | string;
+type Sorter = Record & {
     byStatus: (a: T, b: T) => number;
 };
 
 export const StatusSorter: Sorter = {
-    ERROR: 0,
-    DELETED: 0,
-    FULLREPROCESS: 0,
-    EXCLUDED: 0,
-    INDEXING: 0,
-    UNPROCESSED: 1,
-    REPROCESS: 5,
-    PROCESSING: 5,
-    OCR_PROCESSING: 7,
-
-    UNASSIGNED: 10,
-    UNDER_REVIEW: 15,
-    UNDER_APPROVAL: 20,
-    APPROVED: 25,
+    UNASSIGNED: 1,
+    UNDER_REVIEW: 2,
+    UNDER_APPROVAL: 3,
+    APPROVED: 4,
     byStatus: (a: StatusSorterItem, b: StatusSorterItem): number => {
         if (typeof a !== typeof b) {
             throw TypeError('Used different types when calling StatusSorter.byStatus1');
         }
 
-        const x = typeof a === 'string' ? (a as FileStatus) : a.key;
-        const y = typeof b === 'string' ? (b as FileStatus) : b.key;
+        const x = typeof a === 'string' ? (a as WorkflowFileStatus) : a.key;
+        const y = typeof b === 'string' ? (b as WorkflowFileStatus) : b.key;
         return StatusSorter[x] - StatusSorter[y];
     },
 };
diff --git a/nx.json b/nx.json
index 4d8d0e89b..79b42c989 100644
--- a/nx.json
+++ b/nx.json
@@ -21,17 +21,6 @@
       }
     }
   },
-  "projects": {
-    "common-ui": {
-      "tags": []
-    },
-    "red-cache": {
-      "tags": []
-    },
-    "red-ui": {
-      "tags": []
-    }
-  },
   "targetDependencies": {
     "build": [
       {
@@ -39,5 +28,23 @@
         "projects": "dependencies"
       }
     ]
+  },
+  "cli": {
+    "defaultCollection": "@nrwl/angular",
+    "analytics": false,
+    "packageManager": "yarn"
+  },
+  "defaultProject": "red-ui",
+  "generators": {
+    "@nrwl/angular:application": {
+      "linter": "eslint",
+      "unitTestRunner": "jest",
+      "e2eTestRunner": "cypress"
+    },
+    "@nrwl/angular:library": {
+      "linter": "eslint",
+      "unitTestRunner": "jest"
+    },
+    "@nrwl/angular:component": {}
   }
 }
diff --git a/package.json b/package.json
index 168f47ea0..db5b04eb2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "redaction",
-  "version": "2.334.0",
+  "version": "3.48.0",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -39,14 +39,14 @@
     "@materia-ui/ngx-monaco-editor": "^5.1.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
-    "@nrwl/angular": "12.9.0",
+    "@nrwl/angular": "13.1.3",
     "@pdftron/webviewer": "8.1.0",
     "@swimlane/ngx-charts": "^17.0.1",
     "file-saver": "^2.0.5",
     "jwt-decode": "^3.1.2",
     "keycloak-angular": "^8.4.0",
     "keycloak-js": "15.0.2",
-    "lodash": "^4.17.21",
+    "lodash.orderby": "^4.6.0",
     "messageformat": "^2.3.0",
     "moment": "^2.29.1",
     "ngx-color-picker": "^11.0.0",
@@ -69,19 +69,20 @@
     "@angular/compiler-cli": "12.2.5",
     "@angular/language-service": "12.2.5",
     "@biesbjerg/ngx-translate-extract": "^7.0.4",
-    "@nrwl/cli": "12.9.0",
-    "@nrwl/cypress": "12.9.0",
-    "@nrwl/eslint-plugin-nx": "12.9.0",
-    "@nrwl/jest": "12.9.0",
-    "@nrwl/linter": "12.9.0",
-    "@nrwl/tao": "12.9.0",
-    "@nrwl/workspace": "12.9.0",
+    "@nrwl/cli": "13.1.3",
+    "@nrwl/cypress": "13.1.3",
+    "@nrwl/eslint-plugin-nx": "13.1.3",
+    "@nrwl/jest": "13.1.3",
+    "@nrwl/linter": "13.1.3",
+    "@nrwl/tao": "13.1.3",
+    "@nrwl/workspace": "13.1.3",
     "@types/cypress": "^1.1.3",
-    "@types/jest": "27.0.1",
-    "@types/lodash": "^4.14.172",
+    "@types/jest": "27.0.2",
+    "@types/lodash": "^4.14.177",
     "@types/node": "16.9.1",
-    "@typescript-eslint/eslint-plugin": "4.31.0",
-    "@typescript-eslint/parser": "4.31.0",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "axios": "^0.24.0",
     "cypress": "^6.9.1",
     "cypress-file-upload": "^5.0.8",
     "cypress-keycloak": "^1.7.0",
@@ -96,9 +97,13 @@
     "eslint-plugin-prettier": "^4.0.0",
     "google-translate-api-browser": "^1.1.71",
     "husky": "4.3.8",
-    "jest": "27.1.1",
-    "jest-preset-angular": "9.0.7",
-    "ng-packagr": "12.2.1",
+    "jest": "27.2.3",
+    "jest-preset-angular": "10.0.1",
+    "ng-packagr": "12.2.5",
+    "postcss": "^8.3.9",
+    "postcss-import": "^14.0.2",
+    "postcss-preset-env": "^6.7.0",
+    "postcss-url": "^10.1.1",
     "prettier": "2.4.0",
     "pretty-quick": "^3.1.1",
     "sonarqube-scanner": "^2.8.1",
diff --git a/paligo-styles/manual.scss b/paligo-styles/manual.scss
index 19970ef14..8b7d02fb3 100644
--- a/paligo-styles/manual.scss
+++ b/paligo-styles/manual.scss
@@ -100,7 +100,21 @@ section > .titlepage .title {
 }
 
 .topic-content > section > p {
-    margin: 24px 0;
+    margin: 12px 0;
+}
+
+.panel {
+    padding: 12px 0;
+
+    .panel-body {
+        > p {
+            margin-bottom: 12px;
+
+            &:not(:first-of-type) {
+                margin-top: 18px;
+            }
+        }
+    }
 }
 
 .mediaobject {
@@ -140,6 +154,13 @@ main ul {
     }
 }
 
+.procedure > li.step::before {
+    background-color: transparent;
+    border: 1px solid variables.$primary;
+    color: variables.$primary;
+    line-height: 23px;
+}
+
 // FAQ
 
 .question {
diff --git a/paligo-theme.tar.gz b/paligo-theme.tar.gz
index 555f94a8f..a6b27f9a0 100644
Binary files a/paligo-theme.tar.gz and b/paligo-theme.tar.gz differ
diff --git a/paligo-theme/paligo-styles/redacto-theme.css b/paligo-theme/paligo-styles/redacto-theme.css
index a6388498e..badc0a6c1 100644
--- a/paligo-theme/paligo-styles/redacto-theme.css
+++ b/paligo-theme/paligo-styles/redacto-theme.css
@@ -1,507 +1,507 @@
 @charset "UTF-8";
 @font-face {
-  font-family: "OpenSans";
-  font-weight: 300;
-  src: url("../fonts/OpenSans-VariableFont.ttf") format("truetype");
+    font-family: 'OpenSans';
+    font-weight: 300;
+    src: url('../fonts/OpenSans-VariableFont.ttf') format('truetype');
 }
 @font-face {
-  font-family: "OpenSans";
-  font-weight: 400;
-  src: url("../fonts/OpenSans-VariableFont.ttf") format("truetype");
+    font-family: 'OpenSans';
+    font-weight: 400;
+    src: url('../fonts/OpenSans-VariableFont.ttf') format('truetype');
 }
 @font-face {
-  font-family: "OpenSans";
-  font-weight: 500;
-  src: url("../fonts/OpenSans-VariableFont.ttf") format("truetype");
+    font-family: 'OpenSans';
+    font-weight: 500;
+    src: url('../fonts/OpenSans-VariableFont.ttf') format('truetype');
 }
 @font-face {
-  font-family: "OpenSans";
-  font-weight: 600;
-  src: url("../fonts/OpenSans-VariableFont.ttf") format("truetype");
+    font-family: 'OpenSans';
+    font-weight: 600;
+    src: url('../fonts/OpenSans-VariableFont.ttf') format('truetype');
 }
 @font-face {
-  font-family: "OpenSans";
-  font-weight: 700;
-  src: url("../font/OpenSans-VariableFont.ttf") format("truetype");
+    font-family: 'OpenSans';
+    font-weight: 700;
+    src: url('../font/OpenSans-VariableFont.ttf') format('truetype');
 }
 .portal-header {
-  z-index: 1;
-  height: 450px;
+    z-index: 1;
+    height: 450px;
 }
 .portal-header::before {
-  background-color: #283241;
+    background-color: #283241;
 }
 .portal-header h1 {
-  font-size: 64px;
-  font-weight: 300;
-  line-height: 87px;
-  margin-top: 68px;
-  margin-bottom: 40px;
+    font-size: 64px;
+    font-weight: 300;
+    line-height: 87px;
+    margin-top: 68px;
+    margin-bottom: 40px;
 }
 .portal-header .portal-search {
-  max-width: 600px;
-  margin: auto;
-  position: relative;
+    max-width: 600px;
+    margin: auto;
+    position: relative;
 }
 .portal-header .portal-search .search-field {
-  width: 100%;
-  border: 1px solid #d3d5da;
-  border-radius: 8px;
-  background-color: #fff;
+    width: 100%;
+    border: 1px solid #d3d5da;
+    border-radius: 8px;
+    background-color: #fff;
 }
 .portal-header .portal-search .search-field::placeholder {
-  opacity: 0.7;
+    opacity: 0.7;
 }
 .portal-header .portal-search .search-field,
 .portal-header .portal-search .search-field::placeholder {
-  color: #283241;
-  font-size: 14px;
-  line-height: 18px;
+    color: #283241;
+    font-size: 14px;
+    line-height: 18px;
 }
 .portal-header .portal-search .search-field {
-  padding: 12px 17px;
+    padding: 12px 17px;
 }
 .portal-header .portal-search .btn {
-  position: absolute;
-  right: 0;
-  padding: 11px 18px;
-  background-color: transparent;
-  color: #283241;
-  cursor: pointer;
-  border-radius: 0 8px 8px 0;
+    position: absolute;
+    right: 0;
+    padding: 11px 18px;
+    background-color: transparent;
+    color: #283241;
+    cursor: pointer;
+    border-radius: 0 8px 8px 0;
 }
 .portal-header .portal-search .btn:hover {
-  background-color: #dd4d50;
+    background-color: #dd4d50;
 }
 
 @media only screen and (max-width: 768px) {
-  .portal-header h1 {
-    font-size: 42px;
-    font-weight: 300;
-    line-height: 57px;
-  }
+    .portal-header h1 {
+        font-size: 42px;
+        font-weight: 300;
+        line-height: 57px;
+    }
 }
 .featured-content-label {
-  display: none;
+    display: none;
 }
 
 .featured-content {
-  display: none;
+    display: none;
 }
 
 .portal-single-publication .publication-icon {
-  background-color: #dd4d50;
+    background-color: #dd4d50;
 }
 
 .portal-contents {
-  margin-top: 100px;
-  margin-bottom: 0;
+    margin-top: 100px;
+    margin-bottom: 0;
 }
 .portal-contents .inner {
-  margin: 0;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 24px;
+    margin: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 24px;
 }
 .portal-contents .inner::before {
-  content: none;
+    content: none;
 }
 
 .publication-contents {
-  padding: 24px 40px;
-  border: 1px solid #e2e4e9;
-  width: 100%;
-  margin: 0;
-  background-color: #fff;
-  border-radius: 4px;
+    padding: 24px 40px;
+    border: 1px solid #e2e4e9;
+    width: 100%;
+    margin: 0;
+    background-color: #fff;
+    border-radius: 4px;
 }
 .publication-contents:first-child {
-  grid-column: 1/span 2;
+    grid-column: 1 / span 2;
 }
 .publication-contents h4.featured-title,
 .publication-contents .section-toc-title {
-  font-size: 26px;
-  font-weight: 300;
-  line-height: 36px;
-  margin: 0;
+    font-size: 26px;
+    font-weight: 300;
+    line-height: 36px;
+    margin: 0;
 }
 .publication-contents h4.featured-title a,
 .publication-contents .section-toc-title a {
-  color: #283241;
+    color: #283241;
 }
 .publication-contents h4.featured-title a:hover,
 .publication-contents .section-toc-title a:hover {
-  color: #283241;
-  text-decoration: underline;
+    color: #283241;
+    text-decoration: underline;
 }
 .publication-contents ul {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 .publication-contents li {
-  margin: 4px 0;
+    margin: 4px 0;
 }
 .publication-contents li:first-child {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 .publication-contents li:last-child {
-  margin-bottom: 40px;
+    margin-bottom: 40px;
 }
 .publication-contents li a {
-  color: #dd4d50;
-  font-size: 16px;
-  line-height: 24px;
+    color: #dd4d50;
+    font-size: 16px;
+    line-height: 24px;
 }
 .publication-contents li a:hover {
-  color: #dd4d50;
-  text-decoration: underline;
+    color: #dd4d50;
+    text-decoration: underline;
 }
 .publication-contents h4 span,
 .publication-contents li::before {
-  display: none;
+    display: none;
 }
 
 @media only screen and (max-width: 768px) {
-  .portal-contents .inner {
-    grid-template-columns: 1fr;
-  }
+    .portal-contents .inner {
+        grid-template-columns: 1fr;
+    }
 
-  .publication-contents:first-child {
-    grid-column: auto;
-  }
+    .publication-contents:first-child {
+        grid-column: auto;
+    }
 }
 /* Einleitung */
 .cat-panel-1:before {
-  content: "\f277";
+    content: '\f277';
 }
 
 /* Workflow */
 .cat-panel-2:before {
-  content: "\f0c1";
+    content: '\f0c1';
 }
 
 /* Voraussetzungen */
 .cat-panel-3:before {
-  content: "\f109";
+    content: '\f109';
 }
 
 /* Benutzermenü und -profil */
 .cat-panel-4:before {
-  content: "\f007";
+    content: '\f007';
 }
 
 /* Benachrichtigungen */
 .cat-panel-5:before {
-  content: "\f0f3";
+    content: '\f0f3';
 }
 
 /* Suchfunktion */
 .cat-panel-6:before {
-  content: "\f002";
+    content: '\f002';
 }
 
 /* Ebenen in der Benutzeroberfläche des RedactManagers */
 .cat-panel-7:before {
-  content: "\f248";
+    content: '\f248';
 }
 
 /* Rollen und Berechtigungen */
 .cat-panel-8:before {
-  content: "\f084";
+    content: '\f084';
 }
 
 /* Dossier erstellen und verwalten */
 .cat-panel-9:before {
-  content: "\f07c";
+    content: '\f07c';
 }
 
 /* Dokumente bearbeiten im Editor */
 .cat-panel-10:before {
-  content: "\f15c";
+    content: '\f15c';
 }
 
 /* Dossier abschließen und herunterladen */
 .cat-panel-11:before {
-  content: "\f019";
+    content: '\f019';
 }
 
 /* Funktionsübersicht */
 .cat-panel-12:before {
-  content: "\f03a";
+    content: '\f03a';
 }
 
 /* Glossar */
 .cat-panel-13:before {
-  content: "\f02d";
+    content: '\f02d';
 }
 
 /* FAQ’s (häufige Fragen) */
 .cat-panel-14:before {
-  content: "\f059";
+    content: '\f059';
 }
 
 .portal-search-result {
-  background-color: #f5f5f7;
+    background-color: #f5f5f7;
 }
 
 .search-container {
-  padding-bottom: 100px;
+    padding-bottom: 100px;
 }
 .search-container h2 {
-  font-size: 42px;
-  font-weight: 300;
-  line-height: 57px;
+    font-size: 42px;
+    font-weight: 300;
+    line-height: 57px;
 }
 
 .portal-search-result {
-  padding: 80px 0 0 0;
+    padding: 80px 0 0 0;
 }
 
 ul.searchresults {
-  border: 1px solid #e2e4e9;
-  background-color: #fff;
-  border-radius: 4px;
-  margin-top: 32px;
+    border: 1px solid #e2e4e9;
+    background-color: #fff;
+    border-radius: 4px;
+    margin-top: 32px;
 }
 ul.searchresults .search-highlight {
-  font-style: normal;
+    font-style: normal;
 }
 
 li.searchresultitem {
-  margin: 0 32px;
-  border-bottom: 1px solid #e2e4e9;
-  padding: 32px 8px;
+    margin: 0 32px;
+    border-bottom: 1px solid #e2e4e9;
+    padding: 32px 8px;
 }
 
 .searchresultitem.selected-searchresultitem {
-  background-color: transparent;
-  border-radius: 0;
+    background-color: transparent;
+    border-radius: 0;
 }
 
 .searchresulttitle {
-  font-size: 26px;
-  font-weight: 300;
-  line-height: 36px;
-  color: #283241;
+    font-size: 26px;
+    font-weight: 300;
+    line-height: 36px;
+    color: #283241;
 }
 
 .searchresultsnippet {
-  margin: 16px 0;
-  color: #283241;
+    margin: 16px 0;
+    color: #283241;
 }
 
 .search-result-breadcrumbs {
-  color: #dd4d50;
+    color: #dd4d50;
 }
 
 .portal-footer,
 .site-footer {
-  border-top: 1px solid #e2e4e9;
-  padding: 0;
+    border-top: 1px solid #e2e4e9;
+    padding: 0;
 }
 .portal-footer.portal-footer,
 .site-footer.portal-footer {
-  margin-top: 100px;
+    margin-top: 100px;
 }
 .portal-footer .inner,
 .site-footer .inner {
-  margin: 0;
-  padding: 8px 0 64px 0;
-  font-size: 16px;
-  line-height: 24px;
+    margin: 0;
+    padding: 8px 0 64px 0;
+    font-size: 16px;
+    line-height: 24px;
 }
 .portal-footer .inner > *,
 .site-footer .inner > * {
-  padding: 0;
+    padding: 0;
 }
 .portal-footer .inner .copyright,
 .site-footer .inner .copyright {
-  width: 50%;
+    width: 50%;
 }
 
 :root {
-  --iqser-primary: lightblue;
-  --iqser-primary-rgb: 220, 230, 234;
-  --iqser-primary-2: orange;
-  --iqser-accent: blue;
-  --iqser-accent-rgb: 123, 234, 111;
-  --iqser-disabled: #9398a0;
-  --iqser-not-disabled-table-item: #f9fafb;
-  --iqser-btn-bg-hover: #e2e4e9;
-  --iqser-btn-bg: #f0f1f4;
-  --iqser-warn: #fdbd00;
-  --iqser-white: white;
-  --iqser-black: black;
-  --iqser-light: white;
-  --iqser-separator: rgba(226, 228, 233, 0.9);
-  --iqser-quick-filter-border: #d3d5da;
-  --iqser-grey-1: #283241;
-  --iqser-grey-2: #f4f5f7;
-  --iqser-grey-3: #aaacb3;
-  --iqser-grey-4: #e2e4e9;
-  --iqser-grey-5: #d3d5da;
-  --iqser-grey-6: #f0f1f4;
-  --iqser-grey-7: #9398a0;
-  --iqser-green-1: #00ff00;
-  --iqser-green-2: #5ce594;
-  --iqser-yellow-1: #ffb83b;
-  --iqser-yellow-2: #fdbd00;
-  --iqser-red-1: #dd4d50;
-  --iqser-blue-5: #c5d3eb;
-  --iqser-helpmode-primary: green;
+    --iqser-primary: lightblue;
+    --iqser-primary-rgb: 220, 230, 234;
+    --iqser-primary-2: orange;
+    --iqser-accent: blue;
+    --iqser-accent-rgb: 123, 234, 111;
+    --iqser-disabled: #9398a0;
+    --iqser-not-disabled-table-item: #f9fafb;
+    --iqser-btn-bg-hover: #e2e4e9;
+    --iqser-btn-bg: #f0f1f4;
+    --iqser-warn: #fdbd00;
+    --iqser-white: white;
+    --iqser-black: black;
+    --iqser-light: white;
+    --iqser-separator: rgba(226, 228, 233, 0.9);
+    --iqser-quick-filter-border: #d3d5da;
+    --iqser-grey-1: #283241;
+    --iqser-grey-2: #f4f5f7;
+    --iqser-grey-3: #aaacb3;
+    --iqser-grey-4: #e2e4e9;
+    --iqser-grey-5: #d3d5da;
+    --iqser-grey-6: #f0f1f4;
+    --iqser-grey-7: #9398a0;
+    --iqser-green-1: #00ff00;
+    --iqser-green-2: #5ce594;
+    --iqser-yellow-1: #ffb83b;
+    --iqser-yellow-2: #fdbd00;
+    --iqser-red-1: #dd4d50;
+    --iqser-blue-5: #c5d3eb;
+    --iqser-helpmode-primary: green;
 }
 
 .site-sidebar {
-  background-color: #283241;
-  scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2);
-  scrollbar-width: thin;
-  /* Track */
-  /* Handle */
+    background-color: #283241;
+    scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2);
+    scrollbar-width: thin;
+    /* Track */
+    /* Handle */
 }
 .site-sidebar .logo {
-  padding: 24px 0 30px 0 !important;
+    padding: 24px 0 30px 0 !important;
 }
 .site-sidebar::-webkit-scrollbar {
-  width: 11px;
+    width: 11px;
 }
 .site-sidebar::-webkit-scrollbar-track {
-  background: var(--iqser-grey-2);
+    background: var(--iqser-grey-2);
 }
 .site-sidebar::-webkit-scrollbar-thumb {
-  background: var(--iqser-quick-filter-border);
+    background: var(--iqser-quick-filter-border);
 }
 
 .site-sidebar-search {
-  padding: 0 24px;
+    padding: 0 24px;
 }
 .site-sidebar-search .search-field {
-  width: 100%;
-  border: 1px solid #d3d5da;
-  border-radius: 8px;
-  background-color: #fff;
+    width: 100%;
+    border: 1px solid #d3d5da;
+    border-radius: 8px;
+    background-color: #fff;
 }
 .site-sidebar-search .search-field::placeholder {
-  opacity: 0.7;
+    opacity: 0.7;
 }
 .site-sidebar-search .search-field,
 .site-sidebar-search .search-field::placeholder {
-  color: #283241;
-  font-size: 14px;
-  line-height: 18px;
+    color: #283241;
+    font-size: 14px;
+    line-height: 18px;
 }
 .site-sidebar-search .search-field {
-  padding: 7px 13px;
+    padding: 7px 13px;
 }
 
 .nav-site-sidebar {
-  margin-top: 16px;
+    margin-top: 16px;
 }
 .nav-site-sidebar .topic-link {
-  padding-top: 11px;
-  padding-bottom: 11px;
-  font-size: 14px;
-  line-height: 18px;
-  color: #d3d5da;
+    padding-top: 11px;
+    padding-bottom: 11px;
+    font-size: 14px;
+    line-height: 18px;
+    color: #d3d5da;
 }
 .nav-site-sidebar .topic-link:hover {
-  background-color: #313d4e;
+    background-color: #313d4e;
 }
 .nav-site-sidebar .active > .topic-link {
-  background-color: #313d4e;
+    background-color: #313d4e;
 }
 .nav-site-sidebar .active > a {
-  color: #fff;
-  font-weight: 600;
+    color: #fff;
+    font-weight: 600;
 }
 .nav-site-sidebar > li > a {
-  padding-left: 24px;
+    padding-left: 24px;
 }
 .nav-site-sidebar > li > ul > li > a {
-  padding-left: 32px;
+    padding-left: 32px;
 }
 .nav-site-sidebar > li > ul > li > ul > li > a {
-  padding-left: 40px;
+    padding-left: 40px;
 }
 
 .toc .glyphicon {
-  top: 5px;
+    top: 5px;
 }
 .toc > li > .topic-link > .glyphicon {
-  margin-top: 4px;
+    margin-top: 4px;
 }
 
 .toolbar {
-  box-shadow: none;
-  padding: 21px 24px;
-  margin-bottom: 50px;
+    box-shadow: none;
+    padding: 21px 24px;
+    margin-bottom: 50px;
 }
 
 .topic-content .breadcrumb-container {
-  margin-top: 40px;
+    margin-top: 40px;
 }
 .topic-content .breadcrumb {
-  font-size: 14px;
-  line-height: 18px;
-  font-weight: 600;
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 600;
 }
 .topic-content .breadcrumb a {
-  color: #283241;
+    color: #283241;
 }
 .topic-content .breadcrumb a:hover {
-  color: #dd4d50;
-  text-decoration: underline;
+    color: #dd4d50;
+    text-decoration: underline;
 }
 .topic-content .breadcrumb .breadcrumb-node {
-  color: #dd4d50;
+    color: #dd4d50;
 }
 
 main article {
-  margin-bottom: 0;
-  padding: 0;
+    margin-bottom: 0;
+    padding: 0;
 }
 
 section > .titlepage .title {
-  margin: 24px 0 16px 0;
+    margin: 24px 0 16px 0;
 }
 
 #topic-content > section > .titlepage h2.title {
-  margin: 0 0 24px;
-  font-size: 32px;
-  font-weight: 300;
-  line-height: 43px;
+    margin: 0 0 24px;
+    font-size: 32px;
+    font-weight: 300;
+    line-height: 43px;
 }
 
 .image-viewport {
-  margin: auto;
+    margin: auto;
 }
 .image-viewport img {
-  margin: 16px auto;
-  box-shadow: 0 3px 12px 5px rgba(40, 50, 65, 0.14);
+    margin: 16px auto;
+    box-shadow: 0 3px 12px 5px rgba(40, 50, 65, 0.14);
 }
 
 .pager {
-  margin-top: 30px;
-  margin-bottom: 30px;
-  padding: 0;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    padding: 0;
 }
 
 .pager li > a,
 .pager li > span {
-  color: #dd4d50;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 19px;
-  text-transform: uppercase;
-  padding: 0;
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
+    color: #dd4d50;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 19px;
+    text-transform: uppercase;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
 }
 .pager li > a:hover,
 .pager li > span:hover {
-  text-decoration: underline;
-  background-color: transparent;
-  color: #dd4d50;
+    text-decoration: underline;
+    background-color: transparent;
+    color: #dd4d50;
 }
 
 .warning,
@@ -509,152 +509,169 @@ section > .titlepage .title {
 .important,
 .caution,
 .tip {
-  margin-top: 32px;
-  margin-bottom: 32px;
-  padding: 16px 24px 16px 68px;
-  background-color: #fff;
-  border-left: 4px solid #dd4d50;
+    margin-top: 32px;
+    margin-bottom: 32px;
+    padding: 16px 24px 16px 68px;
+    background-color: #fff;
+    border-left: 4px solid #dd4d50;
 }
 .warning:before,
 .note:before,
 .important:before,
 .caution:before,
 .tip:before {
-  color: #dd4d50;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  left: 24px;
-  top: calc(50% - 15px);
+    color: #dd4d50;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    left: 24px;
+    top: calc(50% - 15px);
 }
 .warning h3,
 .note h3,
 .important h3,
 .caution h3,
 .tip h3 {
-  padding: 0;
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 24px;
-  margin-bottom: 8px;
+    padding: 0;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px;
+    margin-bottom: 8px;
 }
 .warning p,
 .note p,
 .important p,
 .caution p,
 .tip p {
-  line-height: 20px;
+    line-height: 20px;
 }
 
 .topic-content > section > p {
-  margin: 24px 0;
+    margin: 12px 0;
+}
+
+.panel {
+    padding: 12px 0;
+}
+.panel .panel-body > p {
+    margin-bottom: 12px;
+}
+.panel .panel-body > p:not(:first-of-type) {
+    margin-top: 18px;
 }
 
 .mediaobject {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 .mediaobject img {
-  border-radius: 4px;
-  margin: 0;
+    border-radius: 4px;
+    margin: 0;
 }
 .mediaobject .caption > p {
-  font-size: 14px;
-  text-align: center;
-  font-style: italic;
-  margin: 0;
+    font-size: 14px;
+    text-align: center;
+    font-style: italic;
+    margin: 0;
 }
 
 .inlinemediaobject {
-  vertical-align: unset;
+    vertical-align: unset;
 }
 
 main ol,
 main ul {
-  margin: 0 0 24px;
+    margin: 0 0 24px;
 }
 
 .section-toc {
-  padding: 24px 40px;
-  border: 1px solid #e2e4e9;
-  width: 100%;
-  margin: 0;
-  background-color: #fff;
-  border-radius: 4px;
+    padding: 24px 40px;
+    border: 1px solid #e2e4e9;
+    width: 100%;
+    margin: 0;
+    background-color: #fff;
+    border-radius: 4px;
 }
 .section-toc:first-child {
-  grid-column: 1/span 2;
+    grid-column: 1 / span 2;
 }
 .section-toc h4.featured-title,
 .section-toc .section-toc-title {
-  font-size: 26px;
-  font-weight: 300;
-  line-height: 36px;
-  margin: 0;
+    font-size: 26px;
+    font-weight: 300;
+    line-height: 36px;
+    margin: 0;
 }
 .section-toc h4.featured-title a,
 .section-toc .section-toc-title a {
-  color: #283241;
+    color: #283241;
 }
 .section-toc h4.featured-title a:hover,
 .section-toc .section-toc-title a:hover {
-  color: #283241;
-  text-decoration: underline;
+    color: #283241;
+    text-decoration: underline;
 }
 .section-toc ul {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 .section-toc li {
-  margin: 4px 0;
+    margin: 4px 0;
 }
 .section-toc li:first-child {
-  margin-top: 20px;
+    margin-top: 20px;
 }
 .section-toc li:last-child {
-  margin-bottom: 40px;
+    margin-bottom: 40px;
 }
 .section-toc li a {
-  color: #dd4d50;
-  font-size: 16px;
-  line-height: 24px;
+    color: #dd4d50;
+    font-size: 16px;
+    line-height: 24px;
 }
 .section-toc li a:hover {
-  color: #dd4d50;
-  text-decoration: underline;
+    color: #dd4d50;
+    text-decoration: underline;
 }
 .section-toc h4 span,
 .section-toc li::before {
-  display: none;
+    display: none;
 }
 .section-toc li:first-child {
-  margin-top: 16px;
+    margin-top: 16px;
 }
 .section-toc li:last-child {
-  margin-bottom: 8px;
+    margin-bottom: 8px;
+}
+
+.procedure > li.step::before {
+    background-color: transparent;
+    border: 1px solid #dd4d50;
+    color: #dd4d50;
+    line-height: 23px;
 }
 
 .question {
-  font-weight: 600;
+    font-weight: 600;
 }
 .question > td > p {
-  margin: 32px 0 18px 0;
+    margin: 32px 0 18px 0;
 }
 .question > td:first-child {
-  padding-right: 4px;
+    padding-right: 4px;
 }
 
 .fixed-toolbar article.topic :target.question:before {
-  content: none;
+    content: none;
 }
 
 body {
-  color: #283241;
-  background-color: #f5f5f7;
-  font-family: "OpenSans", sans-serif;
-  scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2);
-  scrollbar-width: thin;
-  /* Track */
-  /* Handle */
+    color: #283241;
+    background-color: #f5f5f7;
+    font-family: 'OpenSans', sans-serif;
+    scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2);
+    scrollbar-width: thin;
+    /* Track */
+    /* Handle */
 }
 body h1,
 body h2,
@@ -664,31 +681,31 @@ body h5,
 body h6,
 body p,
 body pre {
-  margin: 0;
-  font-family: "OpenSans", sans-serif;
+    margin: 0;
+    font-family: 'OpenSans', sans-serif;
 }
 body::-webkit-scrollbar {
-  width: 11px;
+    width: 11px;
 }
 body::-webkit-scrollbar-track {
-  background: var(--iqser-grey-2);
+    background: var(--iqser-grey-2);
 }
 body::-webkit-scrollbar-thumb {
-  background: var(--iqser-quick-filter-border);
+    background: var(--iqser-quick-filter-border);
 }
 body h3 {
-  font-size: 32px;
-  font-weight: 300;
-  line-height: 43px;
+    font-size: 32px;
+    font-weight: 300;
+    line-height: 43px;
 }
 body p {
-  font-size: 16px;
-  line-height: 24px;
+    font-size: 16px;
+    line-height: 24px;
 }
 body a {
-  color: #dd4d50;
+    color: #dd4d50;
 }
 body a:hover {
-  text-decoration: underline;
-  color: #dd4d50;
+    text-decoration: underline;
+    color: #dd4d50;
 }
diff --git a/tools/auto-i18n/README.md b/tools/auto-i18n/README.md
deleted file mode 100644
index 9318bba79..000000000
--- a/tools/auto-i18n/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# Run Example
-
-node translate.js ./../../apps/red-ui/src/assets/i18n/en.json de AIzaSyC2fOUHLV6nhmCSwKcacaNqumn20k8Ic_M
-
-# API KEY
-
-AIzaSyC2fOUHLV6nhmCSwKcacaNqumn20k8Ic_M
diff --git a/tools/auto-i18n/i18n-cleanup.ts b/tools/auto-i18n/i18n-cleanup.ts
new file mode 100644
index 000000000..96feb5476
--- /dev/null
+++ b/tools/auto-i18n/i18n-cleanup.ts
@@ -0,0 +1,106 @@
+import * as fs from 'fs';
+import axios from 'axios';
+import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
+
+function flatten(data: any) {
+    const result: any = {};
+
+    function recurse(cur: any, prop: any) {
+        if (Object(cur) !== cur) {
+            result[prop] = cur;
+        } else if (Array.isArray(cur)) {
+            let l = 0;
+            for (let i = 0, l = cur.length; i < l; i++) recurse(cur[i], prop + '[' + i + ']');
+            if (l === 0) result[prop] = [];
+        } else {
+            let isEmpty = true;
+            for (const p in cur) {
+                isEmpty = false;
+                recurse(cur[p], prop ? prop + '.' + p : p);
+            }
+            if (isEmpty && prop) result[prop] = {};
+        }
+    }
+
+    recurse(data, '');
+    return result;
+}
+
+function unflatten(data: any) {
+    if (Object(data) !== data || Array.isArray(data)) return data;
+    const regex = /\.?([^.\[\]]+)|\[(\d+)\]/g,
+        resultholder: any = {};
+    for (const p in data) {
+        let cur: any = resultholder,
+            prop = '',
+            m: any;
+        while ((m = regex.exec(p))) {
+            cur = cur[prop] || (cur[prop] = m[2] ? [] : {});
+            prop = m[2] || m[1];
+        }
+        cur[prop] = data[p];
+    }
+    return resultholder[''] || resultholder;
+}
+
+async function execute() {
+    // const flatGerman = JSON.parse(fs.readFileSync('de-flat.json', 'utf-8'));
+
+    const german = JSON.parse(fs.readFileSync('./../../apps/red-ui/src/assets/i18n/de.json', 'utf-8'));
+    const flatGerman = flatten(german);
+
+    const english = JSON.parse(fs.readFileSync('./../../apps/red-ui/src/assets/i18n/en.json', 'utf-8'));
+
+    const flatEnglish = flatten(english);
+
+    const apiKey = 'AIzaSyBiqNTundSKFjAJnSb4wSVLDU6w0Kv651M';
+
+    const tmfc = new TranslateMessageFormatCompiler();
+
+    for (const key of Object.keys(flatEnglish)) {
+        if (!flatGerman[key]) {
+            const value = flatEnglish[key];
+            const apiUrl = `https://www.googleapis.com/language/translate/v2?key=${apiKey}&q=${value}&source=en&target=de`;
+
+            const response = await axios.get(apiUrl);
+            let translated = flatEnglish[key];
+            try {
+                translated = response.data.data.translations[0].translatedText;
+            } catch (e) {}
+            console.log('missing: ' + key + ' -> ' + flatEnglish[key] + ' -> ' + translated);
+            flatGerman[key] = translated;
+        }
+    }
+
+    for (let key of Object.keys(flatGerman)) {
+        if (!flatEnglish[key]) {
+            delete flatGerman[key];
+        }
+    }
+
+    for (let key of Object.keys(flatGerman)) {
+        try {
+            const result = tmfc.compile(flatGerman[key], 'de');
+            //console.log(result);
+        } catch (e) {
+            console.error('ERROR AT: ', flatGerman[key]);
+        }
+    }
+
+    for (let key of Object.keys(flatEnglish)) {
+        try {
+            const result = tmfc.compile(flatEnglish[key], 'de');
+            console.log(result);
+        } catch (e) {
+            console.error('ERROR AT: ', flatEnglish[key]);
+        }
+    }
+
+    const mergedGerman = { ...flatEnglish, ...flatGerman };
+
+    const finalGerman = unflatten(mergedGerman);
+
+    fs.writeFileSync('./../../apps/red-ui/src/assets/i18n/de.json', JSON.stringify(finalGerman));
+}
+
+execute().then();
diff --git a/tools/auto-i18n/translate.js b/tools/auto-i18n/translate.js
deleted file mode 100644
index 7fe53e9db..000000000
--- a/tools/auto-i18n/translate.js
+++ /dev/null
@@ -1,133 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const moment = require('moment');
-const _ = require('lodash');
-const path = require('path');
-const agent = require('superagent-promise')(require('superagent'), Promise);
-const { translate } = require('google-translate-api-browser');
-let dicc = {};
-
-//Lang Codes https://ctrlq.org/code/19899-google-translate-languages
-
-if (process.argv.length >= 4) {
-    //Args
-    const inputFile = process.argv[2];
-    const destinationCodes = process.argv[3].split(',');
-    const apiKey = process.argv.length > 4 && process.argv[4];
-
-    const apiUrl = _.template('https://www.googleapis.com/language/translate/v2?key=<%= apiKey %>&q=<%= value %>&source=en&target=<%= languageKey %>');
-
-    const transformResponse = (res) => {
-        return _.get(JSON.parse(res.text), ['data', 'translations', 0, 'translatedText'], '');
-    };
-
-    const getCache = (languageKey) => {
-        try {
-            dicc[languageKey] = {};
-            let fileContent = fs.readFileSync(`./translateCache-${languageKey}.txt`, 'utf-8').split('\n');
-            fileContent.map((line) => {
-                let cached = line.split('|');
-                if (cached[0]) dicc[languageKey][cached[0]] = cached[1];
-            });
-        } catch (error) {}
-    };
-    const cachedIndex = (key, value, languageKey) => {
-        const line = key + '|' + value + '\n';
-        dicc[languageKey][key] = value;
-        fs.appendFileSync(`./translateCache-${languageKey}.txt`, line);
-        return value;
-    };
-
-    function iterLeaves(value, keyChain, accumulator, languageKey) {
-        accumulator = accumulator || {};
-        keyChain = keyChain || [];
-        if (_.isObject(value)) {
-            return _.chain(value)
-                .reduce((handlers, v, k) => {
-                    return handlers.concat(iterLeaves(v, keyChain.concat(k), accumulator, languageKey));
-                }, [])
-                .flattenDeep()
-                .value();
-        } else {
-            if (typeof value !== 'string') return value;
-
-            return function () {
-                if (!(value in dicc[languageKey])) {
-                    console.log(
-                        _.template('Translating <%= value %> to <%= languageKey %>')({
-                            value,
-                            languageKey
-                        })
-                    );
-
-                    let prom;
-                    //Translates individual string to language code
-                    if (apiKey != '') {
-                        //using apiKey
-                        prom = agent(
-                            'GET',
-                            apiUrl({
-                                value: encodeURI(value),
-                                languageKey,
-                                apiKey
-                            })
-                        ).then(transformResponse);
-                    } else {
-                        //using free api key
-                        prom = translate(value, { to: languageKey });
-                    }
-
-                    return prom
-                        .then((res) => cachedIndex(value, res, languageKey))
-                        .catch((err) => console.log(err))
-                        .then((text) => {
-                            //Sets the value in the accumulator
-                            _.set(accumulator, keyChain, text);
-
-                            //This needs to be returned to it's eventually written to json
-                            return accumulator;
-                        });
-                } else {
-                    console.log(value + ' cached: ' + dicc[languageKey][value]);
-                    _.set(accumulator, keyChain, dicc[languageKey][value]);
-                    return accumulator;
-                }
-            };
-        }
-    }
-
-    Promise.all(
-        _.reduce(
-            destinationCodes,
-            (sum, languageKey) => {
-                const fileName = _.template('<%= languageKey %>.json')({
-                    languageKey
-                });
-
-                //read languageKey Cache.
-                getCache(languageKey);
-
-                //Starts with the top level strings
-                return sum.concat(
-                    _.reduce(
-                        iterLeaves(JSON.parse(fs.readFileSync(path.resolve(inputFile), 'utf-8')), undefined, undefined, languageKey),
-                        (promiseChain, fn) => {
-                            return promiseChain.then(fn);
-                        },
-                        Promise.resolve()
-                    )
-                        .then((payload) => {
-                            fs.writeFileSync('./../../apps/red-ui/src/assets/i18n/' + fileName, JSON.stringify(payload));
-                        })
-                        .then(_.partial(console.log, 'Successfully translated all nodes, file output at ' + fileName))
-                );
-            },
-            []
-        )
-    ).then(() => {
-        process.exit();
-    });
-} else {
-    console.error('You must provide an input json file and a comma-separated list of destination language codes.');
-}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 6fc38e69f..7266ccaf4 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -23,13 +23,13 @@
       "@i18n/*": ["apps/red-ui/src/app/i18n/*"],
       "@iqser/common-ui": ["libs/common-ui/src/index.ts"],
       "@models/*": ["apps/red-ui/src/app/models/*"],
+      "@red/domain": ["libs/red-domain/src/index.ts"],
       "@redaction/red-cache": ["libs/red-cache/src/index.ts"],
       "@services/*": ["apps/red-ui/src/app/services/*"],
       "@shared/*": ["apps/red-ui/src/app/modules/shared/*"],
       "@state/*": ["apps/red-ui/src/app/state/*"],
       "@upload-download/*": ["apps/red-ui/src/app/modules/upload-download/*"],
-      "@utils/*": ["apps/red-ui/src/app/utils/*"],
-      "@red/domain": ["libs/red-domain/src/index.ts"]
+      "@utils/*": ["apps/red-ui/src/app/utils/*"]
     }
   },
   "exclude": ["node_modules", "tmp"],
diff --git a/yarn.lock b/yarn.lock
index 42868a507..a41ce5f58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -323,15 +323,6 @@
   dependencies:
     "@babel/highlight" "^7.14.5"
 
-"@babel/compat-data@^7.10.4", "@babel/compat-data@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.11.0.tgz#e9f73efe09af1355b723a7f39b11bad637d7c99c"
-  integrity sha512-TPSvJfv73ng0pfnEOh17bYMPQbI95+nGWc71Ss4vZdRBHTDqmM9Z8ZV4rYz8Ks7sfzc95n30k6ODIq5UGnXcYQ==
-  dependencies:
-    browserslist "^4.12.0"
-    invariant "^2.2.4"
-    semver "^5.5.0"
-
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.13.15":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.0.tgz#a901128bce2ad02565df95e6ecbf195cf9465919"
@@ -368,7 +359,7 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/core@^7.0.1", "@babel/core@^7.1.0", "@babel/core@^7.7.5":
+"@babel/core@^7.1.0", "@babel/core@^7.7.5":
   version "7.11.6"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.11.6.tgz#3a9455dc7387ff1bac45770650bc13ba04a15651"
   integrity sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==
@@ -508,14 +499,6 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3"
-  integrity sha512-L0zGlFrGWZK4PbT8AszSfLTM5sDU1+Az/En9VrdT8/LmEiJt4zXt+Jve9DCAnQcbqDhCI+29y/L93mrDzddCcg==
-  dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.10.4"
-    "@babel/types" "^7.10.4"
-
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.14.5":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.15.4.tgz#21ad815f609b84ee0e3058676c33cf6d1670525f"
@@ -524,17 +507,6 @@
     "@babel/helper-explode-assignable-expression" "^7.15.4"
     "@babel/types" "^7.15.4"
 
-"@babel/helper-compilation-targets@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz#804ae8e3f04376607cc791b9d47d540276332bd2"
-  integrity sha512-a3rYhlsGV0UHNDvrtOXBg8/OpfV0OKTkxKPzIplS1zpx7CygDcWWxckxZeDd3gzPzC4kUT0A4nVFDK0wGMh4MQ==
-  dependencies:
-    "@babel/compat-data" "^7.10.4"
-    browserslist "^4.12.0"
-    invariant "^2.2.4"
-    levenary "^1.1.1"
-    semver "^5.5.0"
-
 "@babel/helper-compilation-targets@^7.13.0":
   version "7.13.16"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.16.tgz#6e91dccf15e3f43e5556dffe32d860109887563c"
@@ -565,18 +537,6 @@
     browserslist "^4.16.6"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz#9f61446ba80e8240b0a5c85c6fdac8459d6f259d"
-  integrity sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==
-  dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-member-expression-to-functions" "^7.10.5"
-    "@babel/helper-optimise-call-expression" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.10.4"
-    "@babel/helper-split-export-declaration" "^7.10.4"
-
 "@babel/helper-create-class-features-plugin@^7.14.5", "@babel/helper-create-class-features-plugin@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.15.4.tgz#7f977c17bd12a5fba363cb19bea090394bf37d2e"
@@ -606,15 +566,6 @@
     "@babel/helper-annotate-as-pure" "^7.14.5"
     regexpu-core "^4.7.1"
 
-"@babel/helper-define-map@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.10.5.tgz#b53c10db78a640800152692b13393147acb9bb30"
-  integrity sha512-fMw4kgFB720aQFXSVaXr79pjjcW5puTCM16+rECJ/plGS+zByelE8l9nCpV1GibxTnFVmUuYG9U8wYfQHdzOEQ==
-  dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/types" "^7.10.5"
-    lodash "^4.17.19"
-
 "@babel/helper-define-polyfill-provider@^0.2.2":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.3.tgz#0525edec5094653a282688d34d846e4c75e9c0b6"
@@ -629,13 +580,6 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
-"@babel/helper-explode-assignable-expression@^7.10.4":
-  version "7.11.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.11.4.tgz#2d8e3470252cc17aba917ede7803d4a7a276a41b"
-  integrity sha512-ux9hm3zR4WV1Y3xXxXkdG/0gxF9nvI0YVmKVhvK9AfMoaQkemL3sJpXw+Xbz65azo8qJiEz2XVDUpK3KYhH3ZQ==
-  dependencies:
-    "@babel/types" "^7.10.4"
-
 "@babel/helper-explode-assignable-expression@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.15.4.tgz#f9aec9d219f271eaf92b9f561598ca6b2682600c"
@@ -707,13 +651,6 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
-"@babel/helper-hoist-variables@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e"
-  integrity sha512-wljroF5PgCk2juF69kanHVs6vrLwIPNp6DLD+Lrl3hoQ3PpPPikaDRNFA+0t81NOoMt2DL6WW/mdU8k4k6ZzuA==
-  dependencies:
-    "@babel/types" "^7.10.4"
-
 "@babel/helper-hoist-variables@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz#e0dd27c33a78e577d7c8884916a3e7ef1f7c7f8d"
@@ -728,7 +665,7 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
-"@babel/helper-member-expression-to-functions@^7.10.4", "@babel/helper-member-expression-to-functions@^7.10.5":
+"@babel/helper-member-expression-to-functions@^7.10.4":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz#ae69c83d84ee82f4b42f96e2a09410935a8f26df"
   integrity sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q==
@@ -791,7 +728,7 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
-"@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.10.5", "@babel/helper-module-transforms@^7.11.0":
+"@babel/helper-module-transforms@^7.11.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz#b16f250229e47211abdd84b34b64737c2ab2d359"
   integrity sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==
@@ -890,16 +827,6 @@
   dependencies:
     lodash "^4.17.19"
 
-"@babel/helper-remap-async-to-generator@^7.10.4":
-  version "7.11.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.11.4.tgz#4474ea9f7438f18575e30b0cac784045b402a12d"
-  integrity sha512-tR5vJ/vBa9wFy3m5LLv2faapJLnDFxNWff2SAYkSE4rLUdbp7CdObYFgI7wK4T/Mj4UzpjPwzR8Pzmr5m7MHGA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-wrap-function" "^7.10.4"
-    "@babel/template" "^7.10.4"
-    "@babel/types" "^7.10.4"
-
 "@babel/helper-remap-async-to-generator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz#51439c913612958f54a987a4ffc9ee587a2045d6"
@@ -987,13 +914,6 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
-"@babel/helper-skip-transparent-expression-wrappers@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.11.0.tgz#eec162f112c2f58d3af0af125e3bb57665146729"
-  integrity sha512-0XIdiQln4Elglgjbwo9wuJpL/K7AGCY26kmEt0+pRP0TAj4jjyNq1MjoRvikrTVqKcx4Gysxt4cXvVFXP/JO2Q==
-  dependencies:
-    "@babel/types" "^7.11.0"
-
 "@babel/helper-skip-transparent-expression-wrappers@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz#96f486ac050ca9f44b009fbe5b7d394cab3a0ee4"
@@ -1008,7 +928,7 @@
   dependencies:
     "@babel/types" "^7.15.4"
 
-"@babel/helper-split-export-declaration@^7.10.4", "@babel/helper-split-export-declaration@^7.11.0":
+"@babel/helper-split-export-declaration@^7.11.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz#f8a491244acf6a676158ac42072911ba83ad099f"
   integrity sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==
@@ -1066,16 +986,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
   integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
 
-"@babel/helper-wrap-function@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz#8a6f701eab0ff39f765b5a1cfef409990e624b87"
-  integrity sha512-6py45WvEF0MhiLrdxtRjKjufwLL1/ob2qDJgg5JgNdojBAZSAKnAjkyOCNug6n+OBl4VW76XjvgSFTdaMcW0Ug==
-  dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.10.4"
-    "@babel/types" "^7.10.4"
-
 "@babel/helper-wrap-function@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.14.5.tgz#5919d115bf0fe328b8a5d63bcb610f51601f2bff"
@@ -1207,15 +1117,6 @@
     "@babel/helper-remap-async-to-generator" "^7.14.5"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-proposal-async-generator-functions@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz#3491cabf2f7c179ab820606cec27fed15e0e8558"
-  integrity sha512-cNMCVezQbrRGvXJwm9fu/1sJj9bHdGAgKodZdLqOQIpfoH3raqmRPBM17+lh7CzhiKRRBrGtZL9WcjxSoGYUSg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-remap-async-to-generator" "^7.10.4"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
-
 "@babel/plugin-proposal-async-generator-functions@^7.14.7":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.15.4.tgz#f82aabe96c135d2ceaa917feb9f5fca31635277e"
@@ -1225,14 +1126,6 @@
     "@babel/helper-remap-async-to-generator" "^7.15.4"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-proposal-class-properties@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz#a33bf632da390a59c7a8c570045d1115cd778807"
-  integrity sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-proposal-class-properties@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.14.5.tgz#40d1ee140c5b1e31a350f4f5eed945096559b42e"
@@ -1250,14 +1143,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
-"@babel/plugin-proposal-dynamic-import@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.4.tgz#ba57a26cb98b37741e9d5bca1b8b0ddf8291f17e"
-  integrity sha512-up6oID1LeidOOASNXgv/CFbgBqTuKJ0cJjz6An5tWD+NVBNlp3VNSBxv2ZdU7SYl3NxJC7agAQDApZusV6uFwQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-
 "@babel/plugin-proposal-dynamic-import@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.5.tgz#0c6617df461c0c1f8fff3b47cd59772360101d2c"
@@ -1266,14 +1151,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
-"@babel/plugin-proposal-export-namespace-from@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.10.4.tgz#570d883b91031637b3e2958eea3c438e62c05f54"
-  integrity sha512-aNdf0LY6/3WXkhh0Fdb6Zk9j1NMD8ovj3F6r0+3j837Pn1S1PdNtcwJ5EG9WkVPNHPxyJDaxMaAOVq4eki0qbg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-
 "@babel/plugin-proposal-export-namespace-from@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.5.tgz#dbad244310ce6ccd083072167d8cea83a52faf76"
@@ -1282,14 +1159,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-json-strings@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz#593e59c63528160233bd321b1aebe0820c2341db"
-  integrity sha512-fCL7QF0Jo83uy1K0P2YXrfX11tj3lkpN7l4dMv9Y9VkowkhkQDwFHFd8IiwyK5MZjE8UpbgokkgtcReH88Abaw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
-
 "@babel/plugin-proposal-json-strings@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.5.tgz#38de60db362e83a3d8c944ac858ddf9f0c2239eb"
@@ -1298,14 +1167,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.11.0.tgz#9f80e482c03083c87125dee10026b58527ea20c8"
-  integrity sha512-/f8p4z+Auz0Uaf+i8Ekf1iM7wUNLcViFUGiPxKeXvxTSl63B875YPiVdUDdem7hREcI0E0kSpEhS8tF5RphK7Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-
 "@babel/plugin-proposal-logical-assignment-operators@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.5.tgz#6e6229c2a99b02ab2915f82571e0cc646a40c738"
@@ -1314,14 +1175,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a"
-  integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
-
 "@babel/plugin-proposal-nullish-coalescing-operator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz#ee38589ce00e2cc59b299ec3ea406fcd3a0fdaf6"
@@ -1330,14 +1183,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-proposal-numeric-separator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz#ce1590ff0a65ad12970a609d78855e9a4c1aef06"
-  integrity sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-
 "@babel/plugin-proposal-numeric-separator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.5.tgz#83631bf33d9a51df184c2102a069ac0c58c05f18"
@@ -1346,15 +1191,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.11.0.tgz#bd81f95a1f746760ea43b6c2d3d62b11790ad0af"
-  integrity sha512-wzch41N4yztwoRw0ak+37wxwJM2oiIiy6huGCoqkvSTA9acYWcPfn9Y4aJqmFFJ70KTJUu29f3DQ43uJ9HXzEA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-transform-parameters" "^7.10.4"
-
 "@babel/plugin-proposal-object-rest-spread@^7.14.7":
   version "7.15.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.15.6.tgz#ef68050c8703d07b25af402cb96cf7f34a68ed11"
@@ -1366,14 +1202,6 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.15.4"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.4.tgz#31c938309d24a78a49d68fdabffaa863758554dd"
-  integrity sha512-LflT6nPh+GK2MnFiKDyLiqSqVHkQnVf7hdoAvyTnnKj9xB3docGRsdPuxp6qqqW19ifK3xgc9U5/FwrSaCNX5g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-
 "@babel/plugin-proposal-optional-catch-binding@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz#939dd6eddeff3a67fdf7b3f044b5347262598c3c"
@@ -1382,15 +1210,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.11.0.tgz#de5866d0646f6afdaab8a566382fe3a221755076"
-  integrity sha512-v9fZIu3Y8562RRwhm1BbMRxtqZNFmFA2EG+pT2diuU8PT3H6T/KXoZ54KgYisfOFZHV6PfvAiBIZ9Rcz+/JCxA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-
 "@babel/plugin-proposal-optional-chaining@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz#fa83651e60a360e3f13797eef00b8d519695b603"
@@ -1400,14 +1219,6 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.14.5"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
-"@babel/plugin-proposal-private-methods@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.4.tgz#b160d972b8fdba5c7d111a145fc8c421fc2a6909"
-  integrity sha512-wh5GJleuI8k3emgTg5KkJK6kHNsGEr0uBTDBuQUBJwckk9xs1ez79ioheEVVxMLyPscB0LfkbVHslQqIzWV6Bw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-proposal-private-methods@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.14.5.tgz#37446495996b2945f30f5be5b60d5e2aa4f5792d"
@@ -1426,14 +1237,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.10.4", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz#4483cda53041ce3413b7fe2f00022665ddfaa75d"
-  integrity sha512-H+3fOgPnEXFL9zGYtKQe4IDOPKYlZdF1kqFDQRRb8PK4B8af1vAGK04tF5iQAAsui+mHNBQSAtd2/ndEDe9wuA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-proposal-unicode-property-regex@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz#0f95ee0e757a5d647f378daa0eca7e93faa8bbe8"
@@ -1442,7 +1245,15 @@
     "@babel/helper-create-regexp-features-plugin" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
+"@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz#4483cda53041ce3413b7fe2f00022665ddfaa75d"
+  integrity sha512-H+3fOgPnEXFL9zGYtKQe4IDOPKYlZdF1kqFDQRRb8PK4B8af1vAGK04tF5iQAAsui+mHNBQSAtd2/ndEDe9wuA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
   integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
@@ -1456,13 +1267,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-class-properties@^7.10.4", "@babel/plugin-syntax-class-properties@^7.8.3":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.4.tgz#6644e6a0baa55a61f9e3231f6c9eeb6ee46c124c"
-  integrity sha512-GCSBF7iUle6rNugfURwNmCGG3Z/2+opxAMLs1nND4bhEG5PuxTIggDBoeYYSujAlLtsupzOHYJQgPS3pivwXIA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-syntax-class-properties@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
@@ -1470,6 +1274,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
+"@babel/plugin-syntax-class-properties@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.4.tgz#6644e6a0baa55a61f9e3231f6c9eeb6ee46c124c"
+  integrity sha512-GCSBF7iUle6rNugfURwNmCGG3Z/2+opxAMLs1nND4bhEG5PuxTIggDBoeYYSujAlLtsupzOHYJQgPS3pivwXIA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-class-static-block@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz#195df89b146b4b78b3bf897fd7a257c84659d406"
@@ -1477,7 +1288,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
+"@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
   integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
@@ -1498,7 +1309,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-json-strings@^7.8.0", "@babel/plugin-syntax-json-strings@^7.8.3":
+"@babel/plugin-syntax-json-strings@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
   integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
@@ -1512,7 +1323,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
   integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
@@ -1526,21 +1337,21 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-object-rest-spread@^7.8.0", "@babel/plugin-syntax-object-rest-spread@^7.8.3":
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
   integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.8.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
   integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
   integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
@@ -1554,13 +1365,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-top-level-await@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.4.tgz#4bbeb8917b54fcf768364e0a81f560e33a3ef57d"
-  integrity sha512-ni1brg4lXEmWyafKr0ccFWkJG0CeMt4WV1oyeBW6EFObF4oOHclbkj5cARxAPQyAQ2UTuplJyK4nfkXIMMFvsQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-syntax-top-level-await@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
@@ -1582,13 +1386,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-arrow-functions@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.4.tgz#e22960d77e697c74f41c501d44d73dbf8a6a64cd"
-  integrity sha512-9J/oD1jV0ZCBcgnoFWFq1vJd4msoKb/TCpGNFyyLt0zABdcvgK3aYikZ8HjzB14c26bc7E3Q1yugpwGy2aTPNA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-arrow-functions@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.14.5.tgz#f7187d9588a768dd080bf4c9ffe117ea62f7862a"
@@ -1605,22 +1402,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/helper-remap-async-to-generator" "^7.14.5"
 
-"@babel/plugin-transform-async-to-generator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.4.tgz#41a5017e49eb6f3cda9392a51eef29405b245a37"
-  integrity sha512-F6nREOan7J5UXTLsDsZG3DXmZSVofr2tGNwfdrVwkDWHfQckbQXnXSPfD7iO+c/2HGqycwyLST3DnZ16n+cBJQ==
-  dependencies:
-    "@babel/helper-module-imports" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-remap-async-to-generator" "^7.10.4"
-
-"@babel/plugin-transform-block-scoped-functions@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.4.tgz#1afa595744f75e43a91af73b0d998ecfe4ebc2e8"
-  integrity sha512-WzXDarQXYYfjaV1szJvN3AD7rZgZzC1JtjJZ8dMHUyiK8mxPRahynp14zzNjU3VkPqPsO38CzxiWO1c9ARZ8JA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-block-scoped-functions@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.14.5.tgz#e48641d999d4bc157a67ef336aeb54bc44fd3ad4"
@@ -1628,13 +1409,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-block-scoping@^7.10.4":
-  version "7.11.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.11.1.tgz#5b7efe98852bef8d652c0b28144cd93a9e4b5215"
-  integrity sha512-00dYeDE0EVEHuuM+26+0w/SCL0BH2Qy7LwHuI4Hi4MH5gkC8/AqMN5uWFJIsoXZrAphiMm1iXzBw6L2T+eA0ew==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-block-scoping@^7.14.5":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.15.3.tgz#94c81a6e2fc230bcce6ef537ac96a1e4d2b3afaf"
@@ -1642,20 +1416,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-classes@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.4.tgz#405136af2b3e218bc4a1926228bc917ab1a0adc7"
-  integrity sha512-2oZ9qLjt161dn1ZE0Ms66xBncQH4In8Sqw1YWgBUZuGVJJS5c0OFZXL6dP2MRHrkU/eKhWg8CzFJhRQl50rQxA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-define-map" "^7.10.4"
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-optimise-call-expression" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.10.4"
-    "@babel/helper-split-export-declaration" "^7.10.4"
-    globals "^11.1.0"
-
 "@babel/plugin-transform-classes@^7.14.5":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.15.4.tgz#50aee17aaf7f332ae44e3bce4c2e10534d5d3bf1"
@@ -1669,13 +1429,6 @@
     "@babel/helper-split-export-declaration" "^7.15.4"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.4.tgz#9ded83a816e82ded28d52d4b4ecbdd810cdfc0eb"
-  integrity sha512-JFwVDXcP/hM/TbyzGq3l/XWGut7p46Z3QvqFMXTfk6/09m7xZHJUN9xHfsv7vqqD4YnfI5ueYdSJtXqqBLyjBw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-computed-properties@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz#1b9d78987420d11223d41195461cc43b974b204f"
@@ -1683,13 +1436,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-destructuring@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.4.tgz#70ddd2b3d1bea83d01509e9bb25ddb3a74fc85e5"
-  integrity sha512-+WmfvyfsyF603iPa6825mq6Qrb7uLjTOsa3XOFzlYcYDHSS4QmpOWOL0NNBY5qMbvrcf3tq0Cw+v4lxswOBpgA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-destructuring@^7.14.7":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.7.tgz#0ad58ed37e23e22084d109f185260835e5557576"
@@ -1697,14 +1443,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-dotall-regex@^7.10.4", "@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.4.tgz#469c2062105c1eb6a040eaf4fac4b488078395ee"
-  integrity sha512-ZEAVvUTCMlMFAbASYSVQoxIbHm2OkG2MseW6bV2JjIygOjdVv8tuxrCTzj1+Rynh7ODb8GivUy7dzEXzEhuPaA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-dotall-regex@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.14.5.tgz#2f6bf76e46bdf8043b4e7e16cf24532629ba0c7a"
@@ -1713,11 +1451,12 @@
     "@babel/helper-create-regexp-features-plugin" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-duplicate-keys@^7.10.4":
+"@babel/plugin-transform-dotall-regex@^7.4.4":
   version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.4.tgz#697e50c9fee14380fe843d1f306b295617431e47"
-  integrity sha512-GL0/fJnmgMclHiBTTWXNlYjYsA7rDrtsazHG6mglaGSTh0KsrW04qml+Bbz9FL0LcJIRwBWL5ZqlNHKTkU3xAA==
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.4.tgz#469c2062105c1eb6a040eaf4fac4b488078395ee"
+  integrity sha512-ZEAVvUTCMlMFAbASYSVQoxIbHm2OkG2MseW6bV2JjIygOjdVv8tuxrCTzj1+Rynh7ODb8GivUy7dzEXzEhuPaA==
   dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-transform-duplicate-keys@^7.14.5":
@@ -1727,14 +1466,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-exponentiation-operator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.4.tgz#5ae338c57f8cf4001bdb35607ae66b92d665af2e"
-  integrity sha512-S5HgLVgkBcRdyQAHbKj+7KyuWx8C6t5oETmUuwz1pt3WTWJhsUV0WIIXuVvfXMxl/QQyHKlSCNNtaIamG8fysw==
-  dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-exponentiation-operator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.14.5.tgz#5154b8dd6a3dfe6d90923d61724bd3deeb90b493"
@@ -1743,13 +1474,6 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-for-of@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.4.tgz#c08892e8819d3a5db29031b115af511dbbfebae9"
-  integrity sha512-ItdQfAzu9AlEqmusA/65TqJ79eRcgGmpPPFvBnGILXZH975G0LNjP1yjHvGgfuCxqrPPueXOPe+FsvxmxKiHHQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-for-of@^7.14.5":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.15.4.tgz#25c62cce2718cfb29715f416e75d5263fb36a8c2"
@@ -1757,14 +1481,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-function-name@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.4.tgz#6a467880e0fc9638514ba369111811ddbe2644b7"
-  integrity sha512-OcDCq2y5+E0dVD5MagT5X+yTRbcvFjDI2ZVAottGH6tzqjx/LKpgkUepu3hp/u4tZBzxxpNGwLsAvGBvQ2mJzg==
-  dependencies:
-    "@babel/helper-function-name" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-function-name@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.14.5.tgz#e81c65ecb900746d7f31802f6bed1f52d915d6f2"
@@ -1773,13 +1489,6 @@
     "@babel/helper-function-name" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-literals@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.4.tgz#9f42ba0841100a135f22712d0e391c462f571f3c"
-  integrity sha512-Xd/dFSTEVuUWnyZiMu76/InZxLTYilOSr1UlHV+p115Z/Le2Fi1KXkJUYz0b42DfndostYlPub3m8ZTQlMaiqQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-literals@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.14.5.tgz#41d06c7ff5d4d09e3cf4587bd3ecf3930c730f78"
@@ -1787,13 +1496,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-member-expression-literals@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.4.tgz#b1ec44fcf195afcb8db2c62cd8e551c881baf8b7"
-  integrity sha512-0bFOvPyAoTBhtcJLr9VcwZqKmSjFml1iVxvPL0ReomGU53CX53HsM4h2SzckNdkQcHox1bpAqzxBI1Y09LlBSw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-member-expression-literals@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.14.5.tgz#b39cd5212a2bf235a617d320ec2b48bcc091b8a7"
@@ -1801,15 +1503,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-modules-amd@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.5.tgz#1b9cddaf05d9e88b3aad339cb3e445c4f020a9b1"
-  integrity sha512-elm5uruNio7CTLFItVC/rIzKLfQ17+fX7EVz5W0TMgIHFo1zY0Ozzx+lgwhL4plzl8OzVn6Qasx5DeEFyoNiRw==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.10.5"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
 "@babel/plugin-transform-modules-amd@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.5.tgz#4fd9ce7e3411cb8b83848480b7041d83004858f7"
@@ -1819,16 +1512,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-commonjs@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.4.tgz#66667c3eeda1ebf7896d41f1f16b17105a2fbca0"
-  integrity sha512-Xj7Uq5o80HDLlW64rVfDBhao6OX89HKUmb+9vWYaLXBZOma4gA6tw4Ni1O5qVDoZWUV0fxMYA0aYzOawz0l+1w==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-simple-access" "^7.10.4"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
 "@babel/plugin-transform-modules-commonjs@^7.14.5":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.15.4.tgz#8201101240eabb5a76c08ef61b2954f767b6b4c1"
@@ -1839,16 +1522,6 @@
     "@babel/helper-simple-access" "^7.15.4"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-systemjs@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz#6270099c854066681bae9e05f87e1b9cadbe8c85"
-  integrity sha512-f4RLO/OL14/FP1AEbcsWMzpbUz6tssRaeQg11RH1BP/XnPpRoVwgeYViMFacnkaw4k4wjRSjn3ip1Uw9TaXuMw==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.10.4"
-    "@babel/helper-module-transforms" "^7.10.5"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
 "@babel/plugin-transform-modules-systemjs@^7.14.5":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.15.4.tgz#b42890c7349a78c827719f1d2d0cd38c7d268132"
@@ -1860,14 +1533,6 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-umd@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.4.tgz#9a8481fe81b824654b3a0b65da3df89f3d21839e"
-  integrity sha512-mohW5q3uAEt8T45YT7Qc5ws6mWgJAaL/8BfWD9Dodo1A3RKWli8wTS+WiQ/knF+tXlPirW/1/MqzzGfCExKECA==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-modules-umd@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz#fb662dfee697cce274a7cda525190a79096aa6e0"
@@ -1876,13 +1541,6 @@
     "@babel/helper-module-transforms" "^7.14.5"
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.10.4.tgz#78b4d978810b6f3bcf03f9e318f2fc0ed41aecb6"
-  integrity sha512-V6LuOnD31kTkxQPhKiVYzYC/Jgdq53irJC/xBSmqcNcqFGV+PER4l6rU5SH2Vl7bH9mLDHcc0+l9HUOe4RNGKA==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
-
 "@babel/plugin-transform-named-capturing-groups-regex@^7.14.7":
   version "7.14.9"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.9.tgz#c68f5c5d12d2ebaba3762e57c2c4f6347a46e7b2"
@@ -1890,13 +1548,6 @@
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.14.5"
 
-"@babel/plugin-transform-new-target@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.4.tgz#9097d753cb7b024cb7381a3b2e52e9513a9c6888"
-  integrity sha512-YXwWUDAH/J6dlfwqlWsztI2Puz1NtUAubXhOPLQ5gjR/qmQ5U96DY4FQO8At33JN4XPBhrjB8I4eMmLROjjLjw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-new-target@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.14.5.tgz#31bdae8b925dc84076ebfcd2a9940143aed7dbf8"
@@ -1904,14 +1555,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-object-super@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.4.tgz#d7146c4d139433e7a6526f888c667e314a093894"
-  integrity sha512-5iTw0JkdRdJvr7sY0vHqTpnruUpTea32JHmq/atIWqsnNussbRzjEDyWep8UNztt1B5IusBYg8Irb0bLbiEBCQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-replace-supers" "^7.10.4"
-
 "@babel/plugin-transform-object-super@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz#d0b5faeac9e98597a161a9cf78c527ed934cdc45"
@@ -1920,14 +1563,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/helper-replace-supers" "^7.14.5"
 
-"@babel/plugin-transform-parameters@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz#59d339d58d0b1950435f4043e74e2510005e2c4a"
-  integrity sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-parameters@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.5.tgz#49662e86a1f3ddccac6363a7dfb1ff0a158afeb3"
@@ -1942,13 +1577,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-property-literals@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.4.tgz#f6fe54b6590352298785b83edd815d214c42e3c0"
-  integrity sha512-ofsAcKiUxQ8TY4sScgsGeR2vJIsfrzqvFb9GvJ5UdXDzl+MyYCaBj/FGzXuv7qE0aJcjWMILny1epqelnFlz8g==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-property-literals@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.14.5.tgz#0ddbaa1f83db3606f1cdf4846fa1dfb473458b34"
@@ -1956,13 +1584,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-regenerator@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.4.tgz#2015e59d839074e76838de2159db421966fd8b63"
-  integrity sha512-3thAHwtor39A7C04XucbMg17RcZ3Qppfxr22wYzZNcVIkPHfpM9J0SO8zuCV6SZa265kxBJSrfKTvDCYqBFXGw==
-  dependencies:
-    regenerator-transform "^0.14.2"
-
 "@babel/plugin-transform-regenerator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.14.5.tgz#9676fd5707ed28f522727c5b3c0aa8544440b04f"
@@ -1970,13 +1591,6 @@
   dependencies:
     regenerator-transform "^0.14.2"
 
-"@babel/plugin-transform-reserved-words@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.4.tgz#8f2682bcdcef9ed327e1b0861585d7013f8a54dd"
-  integrity sha512-hGsw1O6Rew1fkFbDImZIEqA8GoidwTAilwCyWqLBM9f+e/u/sQMQu7uX6dyokfOayRuuVfKOW4O7HvaBWM+JlQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-reserved-words@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.14.5.tgz#c44589b661cfdbef8d4300dcc7469dffa92f8304"
@@ -1996,13 +1610,6 @@
     babel-plugin-polyfill-regenerator "^0.2.2"
     semver "^6.3.0"
 
-"@babel/plugin-transform-shorthand-properties@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.4.tgz#9fd25ec5cdd555bb7f473e5e6ee1c971eede4dd6"
-  integrity sha512-AC2K/t7o07KeTIxMoHneyX90v3zkm5cjHJEokrPEAGEy3UCp8sLKfnfOIGdZ194fyN4wfX/zZUWT9trJZ0qc+Q==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-shorthand-properties@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz#97f13855f1409338d8cadcbaca670ad79e091a58"
@@ -2010,14 +1617,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-spread@^7.11.0":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.11.0.tgz#fa84d300f5e4f57752fe41a6d1b3c554f13f17cc"
-  integrity sha512-UwQYGOqIdQJe4aWNyS7noqAnN2VbaczPLiEtln+zPowRNlD+79w3oi2TWfYe0eZgd+gjZCbsydN7lzWysDt+gw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
-
 "@babel/plugin-transform-spread@^7.14.6":
   version "7.14.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz#6bd40e57fe7de94aa904851963b5616652f73144"
@@ -2026,14 +1625,6 @@
     "@babel/helper-plugin-utils" "^7.14.5"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.14.5"
 
-"@babel/plugin-transform-sticky-regex@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.4.tgz#8f3889ee8657581130a29d9cc91d7c73b7c4a28d"
-  integrity sha512-Ddy3QZfIbEV0VYcVtFDCjeE4xwVTJWTmUtorAJkn6u/92Z/nWJNV+mILyqHKrUxXYKA2EoCilgoPePymKL4DvQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-regex" "^7.10.4"
-
 "@babel/plugin-transform-sticky-regex@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.14.5.tgz#5b617542675e8b7761294381f3c28c633f40aeb9"
@@ -2041,14 +1632,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-template-literals@^7.10.4":
-  version "7.10.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.5.tgz#78bc5d626a6642db3312d9d0f001f5e7639fde8c"
-  integrity sha512-V/lnPGIb+KT12OQikDvgSuesRX14ck5FfJXt6+tXhdkJ+Vsd0lDCVtF6jcB4rNClYFzaB2jusZ+lNISDk2mMMw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-template-literals@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.14.5.tgz#a5f2bc233937d8453885dc736bdd8d9ffabf3d93"
@@ -2056,13 +1639,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-typeof-symbol@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.4.tgz#9509f1a7eec31c4edbffe137c16cc33ff0bc5bfc"
-  integrity sha512-QqNgYwuuW0y0H+kUE/GWSR45t/ccRhe14Fs/4ZRouNNQsyd4o3PG4OtHiIrepbM2WKUBDAXKCAK/Lk4VhzTaGA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-typeof-symbol@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.14.5.tgz#39af2739e989a2bd291bf6b53f16981423d457d4"
@@ -2070,13 +1646,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-unicode-escapes@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.4.tgz#feae523391c7651ddac115dae0a9d06857892007"
-  integrity sha512-y5XJ9waMti2J+e7ij20e+aH+fho7Wb7W8rNuu72aKRwCHFqQdhkdU2lo3uZ9tQuboEJcUFayXdARhcxLQ3+6Fg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-unicode-escapes@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz#9d4bd2a681e3c5d7acf4f57fa9e51175d91d0c6b"
@@ -2084,14 +1653,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-unicode-regex@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.4.tgz#e56d71f9282fac6db09c82742055576d5e6d80a8"
-  integrity sha512-wNfsc4s8N2qnIwpO/WP2ZiSyjfpTamT2C9V9FDH/Ljub9zw6P3SjkXcFmc0RQUt96k2fmIvtla2MMjgTwIAC+A==
-  dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
 "@babel/plugin-transform-unicode-regex@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.14.5.tgz#4cd09b6c8425dd81255c7ceb3fb1836e7414382e"
@@ -2179,81 +1740,7 @@
     core-js-compat "^3.15.0"
     semver "^6.3.0"
 
-"@babel/preset-env@^7.0.0":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.11.5.tgz#18cb4b9379e3e92ffea92c07471a99a2914e4272"
-  integrity sha512-kXqmW1jVcnB2cdueV+fyBM8estd5mlNfaQi6lwLgRwCby4edpavgbFhiBNjmWA3JpB/yZGSISa7Srf+TwxDQoA==
-  dependencies:
-    "@babel/compat-data" "^7.11.0"
-    "@babel/helper-compilation-targets" "^7.10.4"
-    "@babel/helper-module-imports" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-proposal-async-generator-functions" "^7.10.4"
-    "@babel/plugin-proposal-class-properties" "^7.10.4"
-    "@babel/plugin-proposal-dynamic-import" "^7.10.4"
-    "@babel/plugin-proposal-export-namespace-from" "^7.10.4"
-    "@babel/plugin-proposal-json-strings" "^7.10.4"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.11.0"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.4"
-    "@babel/plugin-proposal-numeric-separator" "^7.10.4"
-    "@babel/plugin-proposal-object-rest-spread" "^7.11.0"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.10.4"
-    "@babel/plugin-proposal-optional-chaining" "^7.11.0"
-    "@babel/plugin-proposal-private-methods" "^7.10.4"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.10.4"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
-    "@babel/plugin-syntax-class-properties" "^7.10.4"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
-    "@babel/plugin-syntax-top-level-await" "^7.10.4"
-    "@babel/plugin-transform-arrow-functions" "^7.10.4"
-    "@babel/plugin-transform-async-to-generator" "^7.10.4"
-    "@babel/plugin-transform-block-scoped-functions" "^7.10.4"
-    "@babel/plugin-transform-block-scoping" "^7.10.4"
-    "@babel/plugin-transform-classes" "^7.10.4"
-    "@babel/plugin-transform-computed-properties" "^7.10.4"
-    "@babel/plugin-transform-destructuring" "^7.10.4"
-    "@babel/plugin-transform-dotall-regex" "^7.10.4"
-    "@babel/plugin-transform-duplicate-keys" "^7.10.4"
-    "@babel/plugin-transform-exponentiation-operator" "^7.10.4"
-    "@babel/plugin-transform-for-of" "^7.10.4"
-    "@babel/plugin-transform-function-name" "^7.10.4"
-    "@babel/plugin-transform-literals" "^7.10.4"
-    "@babel/plugin-transform-member-expression-literals" "^7.10.4"
-    "@babel/plugin-transform-modules-amd" "^7.10.4"
-    "@babel/plugin-transform-modules-commonjs" "^7.10.4"
-    "@babel/plugin-transform-modules-systemjs" "^7.10.4"
-    "@babel/plugin-transform-modules-umd" "^7.10.4"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.10.4"
-    "@babel/plugin-transform-new-target" "^7.10.4"
-    "@babel/plugin-transform-object-super" "^7.10.4"
-    "@babel/plugin-transform-parameters" "^7.10.4"
-    "@babel/plugin-transform-property-literals" "^7.10.4"
-    "@babel/plugin-transform-regenerator" "^7.10.4"
-    "@babel/plugin-transform-reserved-words" "^7.10.4"
-    "@babel/plugin-transform-shorthand-properties" "^7.10.4"
-    "@babel/plugin-transform-spread" "^7.11.0"
-    "@babel/plugin-transform-sticky-regex" "^7.10.4"
-    "@babel/plugin-transform-template-literals" "^7.10.4"
-    "@babel/plugin-transform-typeof-symbol" "^7.10.4"
-    "@babel/plugin-transform-unicode-escapes" "^7.10.4"
-    "@babel/plugin-transform-unicode-regex" "^7.10.4"
-    "@babel/preset-modules" "^0.1.3"
-    "@babel/types" "^7.11.5"
-    browserslist "^4.12.0"
-    core-js-compat "^3.6.2"
-    invariant "^2.2.2"
-    levenary "^1.1.1"
-    semver "^5.5.0"
-
-"@babel/preset-modules@^0.1.3", "@babel/preset-modules@^0.1.4":
+"@babel/preset-modules@^0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
   integrity sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==
@@ -2412,7 +1899,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.8.6":
+"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.8.6":
   version "7.11.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
   integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
@@ -2543,17 +2030,14 @@
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-"@cypress/webpack-preprocessor@4.1.5":
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/@cypress/webpack-preprocessor/-/webpack-preprocessor-4.1.5.tgz#b47d515d2540af977ee8b69d7c4eed64e3027668"
-  integrity sha512-B4miSaS3VCMVSlfuvbWCjytTywdnquRsF1tQ3quC7TGUzEXnQZ4+o8WUKibjMozrOomALkUdMxqOJ1ib5oFkKw==
+"@cypress/webpack-preprocessor@^5.9.1":
+  version "5.9.1"
+  resolved "https://registry.yarnpkg.com/@cypress/webpack-preprocessor/-/webpack-preprocessor-5.9.1.tgz#2694aa832baf3984d90bcb899e1ecff377560904"
+  integrity sha512-cg1ikftIo7NdlRA8ocNSxWjHJlh1JlTkN9ZfXUuKWWcJgrEdYLjXk0UzY6gYbLLaFka4oIhN6SvL5Y/7iELvgg==
   dependencies:
-    bluebird "3.7.1"
-    debug "4.1.1"
-  optionalDependencies:
-    "@babel/core" "^7.0.1"
-    "@babel/preset-env" "^7.0.0"
-    babel-loader "^8.0.2"
+    bluebird "^3.7.1"
+    debug "4.3.2"
+    lodash "^4.17.20"
 
 "@cypress/xvfb@^1.2.4":
   version "1.2.4"
@@ -2618,49 +2102,48 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
   integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
 
-"@jest/console@^27.0.6", "@jest/console@^27.1.1":
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.1.1.tgz#e1eb8ef8a410e75e80bb17429047ed5d43411d20"
-  integrity sha512-VpQJRsWSeAem0zpBjeRtDbcD6DlbNoK11dNYt+PSQ+DDORh9q2/xyEpErfwgnLjWX0EKkSZmTGx/iH9Inzs6vQ==
+"@jest/console@^27.2.2", "@jest/console@^27.3.1":
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.3.1.tgz#e8ea3a475d3f8162f23d69efbfaa9cbe486bee93"
+  integrity sha512-RkFNWmv0iui+qsOr/29q9dyfKTTT5DCuP31kUwg7rmOKPT/ozLeGLKJKVIiOfbiKyleUZKIrHwhmiZWVe8IMdw==
   dependencies:
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
     "@types/node" "*"
     chalk "^4.0.0"
-    jest-message-util "^27.1.1"
-    jest-util "^27.1.1"
+    jest-message-util "^27.3.1"
+    jest-util "^27.3.1"
     slash "^3.0.0"
 
-"@jest/core@^27.1.1":
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.1.1.tgz#d9d42214920cb96c2a6cc48517cf62d4351da3aa"
-  integrity sha512-oCkKeTgI0emznKcLoq5OCD0PhxCijA4l7ejDnWW3d5bgSi+zfVaLybVqa+EQOxpNejQWtTna7tmsAXjMN9N43Q==
+"@jest/core@^27.2.3", "@jest/core@^27.3.1":
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.3.1.tgz#04992ef1b58b17c459afb87ab56d81e63d386925"
+  integrity sha512-DMNE90RR5QKx0EA+wqe3/TNEwiRpOkhshKNxtLxd4rt3IZpCt+RSL+FoJsGeblRZmqdK4upHA/mKKGPPRAifhg==
   dependencies:
-    "@jest/console" "^27.1.1"
-    "@jest/reporters" "^27.1.1"
-    "@jest/test-result" "^27.1.1"
-    "@jest/transform" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/console" "^27.3.1"
+    "@jest/reporters" "^27.3.1"
+    "@jest/test-result" "^27.3.1"
+    "@jest/transform" "^27.3.1"
+    "@jest/types" "^27.2.5"
     "@types/node" "*"
     ansi-escapes "^4.2.1"
     chalk "^4.0.0"
     emittery "^0.8.1"
     exit "^0.1.2"
     graceful-fs "^4.2.4"
-    jest-changed-files "^27.1.1"
-    jest-config "^27.1.1"
-    jest-haste-map "^27.1.1"
-    jest-message-util "^27.1.1"
+    jest-changed-files "^27.3.0"
+    jest-config "^27.3.1"
+    jest-haste-map "^27.3.1"
+    jest-message-util "^27.3.1"
     jest-regex-util "^27.0.6"
-    jest-resolve "^27.1.1"
-    jest-resolve-dependencies "^27.1.1"
-    jest-runner "^27.1.1"
-    jest-runtime "^27.1.1"
-    jest-snapshot "^27.1.1"
-    jest-util "^27.1.1"
-    jest-validate "^27.1.1"
-    jest-watcher "^27.1.1"
+    jest-resolve "^27.3.1"
+    jest-resolve-dependencies "^27.3.1"
+    jest-runner "^27.3.1"
+    jest-runtime "^27.3.1"
+    jest-snapshot "^27.3.1"
+    jest-util "^27.3.1"
+    jest-validate "^27.3.1"
+    jest-watcher "^27.3.1"
     micromatch "^4.0.4"
-    p-each-series "^2.1.0"
     rimraf "^3.0.0"
     slash "^3.0.0"
     strip-ansi "^6.0.0"
@@ -2675,15 +2158,15 @@
     "@types/node" "*"
     jest-mock "^27.0.3"
 
-"@jest/environment@^27.1.1":
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.1.1.tgz#a1f7a552f7008f773988b9c0e445ede35f77bbb7"
-  integrity sha512-+y882/ZdxhyqF5RzxIrNIANjHj991WH7jifdcplzMDosDUOyCACFYUyVTBGbSTocbU+s1cesroRzkwi8hZ9SHg==
+"@jest/environment@^27.3.1":
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.3.1.tgz#2182defbce8d385fd51c5e7c7050f510bd4c86b1"
+  integrity sha512-BCKCj4mOVLme6Tanoyc9k0ultp3pnmuyHw73UHRPeeZxirsU/7E3HC4le/VDb/SMzE1JcPnto+XBKFOcoiJzVw==
   dependencies:
-    "@jest/fake-timers" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/fake-timers" "^27.3.1"
+    "@jest/types" "^27.2.5"
     "@types/node" "*"
-    jest-mock "^27.1.1"
+    jest-mock "^27.3.0"
 
 "@jest/fake-timers@^27.0.3":
   version "27.0.3"
@@ -2697,66 +2180,36 @@
     jest-mock "^27.0.3"
     jest-util "^27.0.2"
 
-"@jest/fake-timers@^27.1.1":
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.1.1.tgz#557a1c0d067d33bcda4dfae9a7d8f96a15a954b5"
-  integrity sha512-u8TJ5VlsVYTsGFatoyIae2l25pku4Bu15QCPTx2Gs5z+R//Ee3tHN85462Vc9yGVcdDvgADbqNkhOLxbEwPjMQ==
+"@jest/fake-timers@^27.3.1":
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.3.1.tgz#1fad860ee9b13034762cdb94266e95609dfce641"
+  integrity sha512-M3ZFgwwlqJtWZ+QkBG5NmC23A9w+A6ZxNsO5nJxJsKYt4yguBd3i8TpjQz5NfCX91nEve1KqD9RA2Q+Q1uWqoA==
   dependencies:
-    "@jest/types" "^27.1.1"
-    "@sinonjs/fake-timers" "^7.0.2"
+    "@jest/types" "^27.2.5"
+    "@sinonjs/fake-timers" "^8.0.1"
     "@types/node" "*"
-    jest-message-util "^27.1.1"
-    jest-mock "^27.1.1"
-    jest-util "^27.1.1"
+    jest-message-util "^27.3.1"
+    jest-mock "^27.3.0"
+    jest-util "^27.3.1"
 
-"@jest/globals@^27.1.1":
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.1.1.tgz#cfe5f4d5b37483cef62b79612128ccc7e3c951d8"
-  integrity sha512-Q3JcTPmY+DAEHnr4MpnBV3mwy50EGrTC6oSDTNnW7FNGGacTJAfpWNk02D7xv422T1OzK2A2BKx+26xJOvHkyw==
+"@jest/globals@^27.3.1":
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.3.1.tgz#ce1dfb03d379237a9da6c1b99ecfaca1922a5f9e"
+  integrity sha512-Q651FWiWQAIFiN+zS51xqhdZ8g9b88nGCobC87argAxA7nMfNQq0Q0i9zTfQYgLa6qFXk2cGANEqfK051CZ8Pg==
   dependencies:
-    "@jest/environment" "^27.1.1"
-    "@jest/types" "^27.1.1"
-    expect "^27.1.1"
+    "@jest/environment" "^27.3.1"
+    "@jest/types" "^27.2.5"
+    expect "^27.3.1"
 
-"@jest/reporters@27.0.6":
-  version "27.0.6"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.0.6.tgz#91e7f2d98c002ad5df94d5b5167c1eb0b9fd5b00"
-  integrity sha512-TIkBt09Cb2gptji3yJXb3EE+eVltW6BjO7frO7NEfjI9vSIYoISi5R3aI3KpEDXlB1xwB+97NXIqz84qYeYsfA==
+"@jest/reporters@27.2.2":
+  version "27.2.2"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.2.2.tgz#e2d41cd9f8088676b81b9a9908cb1ba67bdbee78"
+  integrity sha512-ufwZ8XoLChEfPffDeVGroYbhbcYPom3zKDiv4Flhe97rr/o2IfUXoWkDUDoyJ3/V36RFIMjokSu0IJ/pbFtbHg==
   dependencies:
     "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^27.0.6"
-    "@jest/test-result" "^27.0.6"
-    "@jest/transform" "^27.0.6"
-    "@jest/types" "^27.0.6"
-    chalk "^4.0.0"
-    collect-v8-coverage "^1.0.0"
-    exit "^0.1.2"
-    glob "^7.1.2"
-    graceful-fs "^4.2.4"
-    istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-instrument "^4.0.3"
-    istanbul-lib-report "^3.0.0"
-    istanbul-lib-source-maps "^4.0.0"
-    istanbul-reports "^3.0.2"
-    jest-haste-map "^27.0.6"
-    jest-resolve "^27.0.6"
-    jest-util "^27.0.6"
-    jest-worker "^27.0.6"
-    slash "^3.0.0"
-    source-map "^0.6.0"
-    string-length "^4.0.1"
-    terminal-link "^2.0.0"
-    v8-to-istanbul "^8.0.0"
-
-"@jest/reporters@^27.1.1":
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.1.1.tgz#ee5724092f197bb78c60affb9c6f34b6777990c2"
-  integrity sha512-cEERs62n1P4Pqox9HWyNOEkP57G95aK2mBjB6D8Ruz1Yc98fKH53b58rlVEnsY5nLmkLNZk65fxNi9C0Yds/8w==
-  dependencies:
-    "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^27.1.1"
-    "@jest/test-result" "^27.1.1"
-    "@jest/transform" "^27.1.1"
+    "@jest/console" "^27.2.2"
+    "@jest/test-result" "^27.2.2"
+    "@jest/transform" "^27.2.2"
     "@jest/types" "^27.1.1"
     chalk "^4.0.0"
     collect-v8-coverage "^1.0.0"
@@ -2768,16 +2221,47 @@
     istanbul-lib-report "^3.0.0"
     istanbul-lib-source-maps "^4.0.0"
     istanbul-reports "^3.0.2"
-    jest-haste-map "^27.1.1"
-    jest-resolve "^27.1.1"
-    jest-util "^27.1.1"
-    jest-worker "^27.1.1"
+    jest-haste-map "^27.2.2"
+    jest-resolve "^27.2.2"
+    jest-util "^27.2.0"
+    jest-worker "^27.2.2"
     slash "^3.0.0"
     source-map "^0.6.0"
     string-length "^4.0.1"
     terminal-link "^2.0.0"
     v8-to-istanbul "^8.0.0"
 
+"@jest/reporters@^27.3.1":
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.3.1.tgz#28b5c1f5789481e23788048fa822ed15486430b9"
+  integrity sha512-m2YxPmL9Qn1emFVgZGEiMwDntDxRRQ2D58tiDQlwYTg5GvbFOKseYCcHtn0WsI8CG4vzPglo3nqbOiT8ySBT/w==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^27.3.1"
+    "@jest/test-result" "^27.3.1"
+    "@jest/transform" "^27.3.1"
+    "@jest/types" "^27.2.5"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.4"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.3"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.2"
+    jest-haste-map "^27.3.1"
+    jest-resolve "^27.3.1"
+    jest-util "^27.3.1"
+    jest-worker "^27.3.1"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^8.1.0"
+
 "@jest/source-map@^27.0.6":
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.0.6.tgz#be9e9b93565d49b0548b86e232092491fb60551f"
@@ -2787,51 +2271,51 @@
     graceful-fs "^4.2.4"
     source-map "^0.6.0"
 
-"@jest/test-result@27.0.6":
-  version "27.0.6"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.0.6.tgz#3fa42015a14e4fdede6acd042ce98c7f36627051"
-  integrity sha512-ja/pBOMTufjX4JLEauLxE3LQBPaI2YjGFtXexRAjt1I/MbfNlMx0sytSX3tn5hSLzQsR3Qy2rd0hc1BWojtj9w==
+"@jest/test-result@27.2.2":
+  version "27.2.2"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.2.2.tgz#cd4ba1ca9b0521e463bd4b32349ba1842277563b"
+  integrity sha512-yENoDEoWlEFI7l5z7UYyJb/y5Q8RqbPd4neAVhKr6l+vVaQOPKf8V/IseSMJI9+urDUIxgssA7RGNyCRhGjZvw==
   dependencies:
-    "@jest/console" "^27.0.6"
-    "@jest/types" "^27.0.6"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    collect-v8-coverage "^1.0.0"
-
-"@jest/test-result@^27.0.6", "@jest/test-result@^27.1.1":
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.1.1.tgz#1086b39af5040b932a55e7f1fa1bc4671bed4781"
-  integrity sha512-8vy75A0Jtfz9DqXFUkjC5Co/wRla+D7qRFdShUY8SbPqBS3GBx3tpba7sGKFos8mQrdbe39n+c1zgVKtarfy6A==
-  dependencies:
-    "@jest/console" "^27.1.1"
+    "@jest/console" "^27.2.2"
     "@jest/types" "^27.1.1"
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
-"@jest/test-sequencer@^27.0.6", "@jest/test-sequencer@^27.1.1":
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.1.1.tgz#cea3722ec6f6330000240fd999ad3123adaf5992"
-  integrity sha512-l8zD3EdeixvwmLNlJoMX3hhj8iIze95okj4sqmBzOq/zW8gZLElUveH4bpKEMuR+Nweazjlwc7L6g4C26M/y6Q==
+"@jest/test-result@^27.2.2", "@jest/test-result@^27.3.1":
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.3.1.tgz#89adee8b771877c69b3b8d59f52f29dccc300194"
+  integrity sha512-mLn6Thm+w2yl0opM8J/QnPTqrfS4FoXsXF2WIWJb2O/GBSyResL71BRuMYbYRsGt7ELwS5JGcEcGb52BNrumgg==
   dependencies:
-    "@jest/test-result" "^27.1.1"
-    graceful-fs "^4.2.4"
-    jest-haste-map "^27.1.1"
-    jest-runtime "^27.1.1"
+    "@jest/console" "^27.3.1"
+    "@jest/types" "^27.2.5"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
 
-"@jest/transform@^27.0.6", "@jest/transform@^27.1.1":
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.1.1.tgz#51a22f5a48d55d796c02757117c02fcfe4da13d7"
-  integrity sha512-qM19Eu75U6Jc5zosXXVnq900Nl9JDpoGaZ4Mg6wZs7oqbu3heYSMOZS19DlwjlhWdfNRjF4UeAgkrCJCK3fEXg==
+"@jest/test-sequencer@^27.2.2", "@jest/test-sequencer@^27.3.1":
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.3.1.tgz#4b3bde2dbb05ee74afdae608cf0768e3354683b1"
+  integrity sha512-siySLo07IMEdSjA4fqEnxfIX8lB/lWYsBPwNFtkOvsFQvmBrL3yj3k3uFNZv/JDyApTakRpxbKLJ3CT8UGVCrA==
+  dependencies:
+    "@jest/test-result" "^27.3.1"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^27.3.1"
+    jest-runtime "^27.3.1"
+
+"@jest/transform@^27.2.2", "@jest/transform@^27.3.1":
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.3.1.tgz#ff80eafbeabe811e9025e4b6f452126718455220"
+  integrity sha512-3fSvQ02kuvjOI1C1ssqMVBKJpZf6nwoCiSu00zAKh5nrp3SptNtZy/8s5deayHnqxhjD9CWDJ+yqQwuQ0ZafXQ==
   dependencies:
     "@babel/core" "^7.1.0"
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
     babel-plugin-istanbul "^6.0.0"
     chalk "^4.0.0"
     convert-source-map "^1.4.0"
     fast-json-stable-stringify "^2.0.0"
     graceful-fs "^4.2.4"
-    jest-haste-map "^27.1.1"
+    jest-haste-map "^27.3.1"
     jest-regex-util "^27.0.6"
-    jest-util "^27.1.1"
+    jest-util "^27.3.1"
     micromatch "^4.0.4"
     pirates "^4.0.1"
     slash "^3.0.0"
@@ -2849,7 +2333,7 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
-"@jest/types@^27.0.6", "@jest/types@^27.1.1":
+"@jest/types@^27.1.1":
   version "27.1.1"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.1.1.tgz#77a3fc014f906c65752d12123a0134359707c0ad"
   integrity sha512-yqJPDDseb0mXgKqmNqypCsb85C22K1aY5+LUxh7syIM9n/b0AsaltxNy+o6tt29VcfGDpYEve175bm3uOhcehA==
@@ -2860,6 +2344,17 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@jest/types@^27.2.5":
+  version "27.2.5"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.2.5.tgz#420765c052605e75686982d24b061b4cbba22132"
+  integrity sha512-nmuM4VuDtCZcY+eTpw+0nvstwReMsjPoj7ZR80/BbixulhLaiX+fbv8oeLW8WZlJMcsGQsTmMKT/iTZu1Uy/lQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+
 "@jridgewell/resolve-uri@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-1.0.0.tgz#3fdf5798f0b49e90155896f6291df186eac06c83"
@@ -2983,26 +2478,26 @@
     node-gyp "^7.1.0"
     read-package-json-fast "^2.0.1"
 
-"@nrwl/angular@12.9.0":
-  version "12.9.0"
-  resolved "https://registry.yarnpkg.com/@nrwl/angular/-/angular-12.9.0.tgz#3fab6d1b2e649d78f17c6c879072e05e8c10bf23"
-  integrity sha512-Tkh4VXRqRFmJwIdQG4M2I/YPOgo5M3g6SUyhwPBRjvSfQPhmr493jvTDnpeyQgQ6K4etIYH5MrtX4SP24skFLQ==
+"@nrwl/angular@13.1.3":
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/angular/-/angular-13.1.3.tgz#52b17887881c8410e2153804858414db7d430fae"
+  integrity sha512-nF16lFyJ8+bfD8W2K+nP05JtyVjhuUzdiOREqki10Ogj7JeHfz0pjHN/7Xsgt+VotxpF0nvM36IAnwLXzym7xg==
   dependencies:
     "@angular-devkit/schematics" "~12.2.0"
-    "@nrwl/cypress" "12.9.0"
-    "@nrwl/devkit" "12.9.0"
-    "@nrwl/jest" "12.9.0"
-    "@nrwl/linter" "12.9.0"
-    "@nrwl/storybook" "12.9.0"
+    "@nrwl/cypress" "13.1.3"
+    "@nrwl/devkit" "13.1.3"
+    "@nrwl/jest" "13.1.3"
+    "@nrwl/linter" "13.1.3"
+    "@nrwl/storybook" "13.1.3"
     "@phenomnomnominal/tsquery" "4.1.1"
     "@schematics/angular" "~12.2.0"
     ignore "^5.0.4"
-    jasmine-marbles "~0.8.3"
+    jasmine-marbles "~0.8.4"
     rxjs-for-await "0.0.2"
     tslib "^2.2.0"
     webpack-merge "5.7.3"
 
-"@nrwl/cli@*", "@nrwl/cli@12.9.0":
+"@nrwl/cli@*":
   version "12.9.0"
   resolved "https://registry.yarnpkg.com/@nrwl/cli/-/cli-12.9.0.tgz#f5fccd973006ad2802d7c823b28820ac1fa6c27c"
   integrity sha512-YKTZ3G07f6Y4MedOOkBmCi1Y72gu3ssCk2J50wL76SaiSjJTUSAz1NkKLsPwO6S8/QloMSR71tI42HJG2bbpwQ==
@@ -3013,88 +2508,103 @@
     yargs "15.4.1"
     yargs-parser "20.0.0"
 
-"@nrwl/cypress@12.9.0":
-  version "12.9.0"
-  resolved "https://registry.yarnpkg.com/@nrwl/cypress/-/cypress-12.9.0.tgz#7e451569b53764b5aa5160d428de8d29d7c6725e"
-  integrity sha512-hiPo8zDCBwAEcedTxH3zmXIlgAObeG3K5S1QeVOrJbrNYscz7l69h9fXKJ8CLmCZcflijgK2/6ZwC85DGhllhg==
+"@nrwl/cli@13.1.3":
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/cli/-/cli-13.1.3.tgz#c5d21ea5d878c8aa0438e52a2f39236bcd37085a"
+  integrity sha512-pwHMOy8MEKdPWf3qbTfSWt33tYq8p5mRE0RAdA9iXcxk7+2TZkU+ScVHZz4asmrZlsTC+UYJIzWJWTSCwaGL5A==
   dependencies:
-    "@cypress/webpack-preprocessor" "4.1.5"
-    "@nrwl/devkit" "12.9.0"
-    "@nrwl/linter" "12.9.0"
-    "@nrwl/workspace" "12.9.0"
+    "@nrwl/tao" "13.1.3"
     chalk "4.1.0"
-    fork-ts-checker-webpack-plugin "6.2.10"
-    rxjs "^6.5.4"
-    ts-loader "5.4.5"
-    tsconfig-paths-webpack-plugin "3.4.1"
-    tslib "^2.0.0"
-    webpack-node-externals "1.7.2"
+    enquirer "~2.3.6"
+    v8-compile-cache "2.3.0"
+    yargs "15.4.1"
     yargs-parser "20.0.0"
 
-"@nrwl/devkit@12.9.0":
-  version "12.9.0"
-  resolved "https://registry.yarnpkg.com/@nrwl/devkit/-/devkit-12.9.0.tgz#fbf6eb715d1deb22fa919bceb3dff7a5c990d415"
-  integrity sha512-mobW2XKmQicTdhn0XQStNnYmhMC0Aj7qqX9lS/8IX561PtgocR0MPH9rTWOfNECpwHhj2YwTRTHjQfgv29btxw==
+"@nrwl/cypress@13.1.3":
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/cypress/-/cypress-13.1.3.tgz#8863c5c489fcb33caaefe6e3ef5f1932187f7ae3"
+  integrity sha512-lM/q0AdhUSTIWO/elSlVdjXztMDB0z7b818MeeD5I/dDEUCzIg/GDhcWigCiYfOys2MwBSOz++FrMfkNT8Z+Cw==
   dependencies:
-    "@nrwl/tao" "12.9.0"
+    "@cypress/webpack-preprocessor" "^5.9.1"
+    "@nrwl/devkit" "13.1.3"
+    "@nrwl/linter" "13.1.3"
+    "@nrwl/workspace" "13.1.3"
+    chalk "4.1.0"
+    enhanced-resolve "^5.8.3"
+    fork-ts-checker-webpack-plugin "6.2.10"
+    rxjs "^6.5.4"
+    ts-loader "^9.2.6"
+    tsconfig-paths "^3.9.0"
+    tsconfig-paths-webpack-plugin "3.4.1"
+    tslib "^2.0.0"
+    webpack-node-externals "^3.0.0"
+    yargs-parser "20.0.0"
+
+"@nrwl/devkit@13.1.3":
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/devkit/-/devkit-13.1.3.tgz#8b119587984371a4caf0b3601a7481e04bac65a3"
+  integrity sha512-TAAsZJvVc/obeH0rZKY6miVhyM2GHGb8qIWp9MAIdLlXf4VDcNC7rxwb5OrGVSwuTTjqGYBGPUx0yEogOOJthA==
+  dependencies:
+    "@nrwl/tao" "13.1.3"
     ejs "^3.1.5"
     ignore "^5.0.4"
     rxjs "^6.5.4"
     semver "7.3.4"
     tslib "^2.0.0"
 
-"@nrwl/eslint-plugin-nx@12.9.0":
-  version "12.9.0"
-  resolved "https://registry.yarnpkg.com/@nrwl/eslint-plugin-nx/-/eslint-plugin-nx-12.9.0.tgz#4e8fb2ffbf2528702f182ccff9074375b60cebfd"
-  integrity sha512-j1TL2GfgEEifKY74mupq9z0FRnE1RAtng640TomtqVYHNifAHp21e2i055S6Mf1Q7pT5OefYBzwtCxBiCNlDpg==
+"@nrwl/eslint-plugin-nx@13.1.3":
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/eslint-plugin-nx/-/eslint-plugin-nx-13.1.3.tgz#e97c43f0ccc71c5a44f49dfba133fdb67464db35"
+  integrity sha512-s0h6V2NuNCmAHUdovnYQlD//Si+BZ9yzP3SMLzBB0DywStN6VKJiFaCIHAuA7lK+lyiIwkDj7Cz/DJR7j7KnAQ==
   dependencies:
-    "@nrwl/devkit" "12.9.0"
-    "@nrwl/workspace" "12.9.0"
-    "@typescript-eslint/experimental-utils" "~4.28.3"
+    "@nrwl/devkit" "13.1.3"
+    "@nrwl/workspace" "13.1.3"
+    "@typescript-eslint/experimental-utils" "~4.33.0"
     confusing-browser-globals "^1.0.9"
     ts-node "^9.1.1"
     tsconfig-paths "^3.9.0"
 
-"@nrwl/jest@12.9.0":
-  version "12.9.0"
-  resolved "https://registry.yarnpkg.com/@nrwl/jest/-/jest-12.9.0.tgz#fb20631274c2462b73a0cb88d73ba7897c35e303"
-  integrity sha512-PHPG6DlwNgrT4+uplJqM814k+gqNV/m85FIes6JkzRO8XMK9jmqF0hwJvyymCZHDmGXMqwa0muoxkjoJs2CI/A==
+"@nrwl/jest@13.1.3":
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/jest/-/jest-13.1.3.tgz#67a70dfc88c3e2ff9dedfe6be24c13259019547e"
+  integrity sha512-6ogg6TOOneVtJuIW02wKrkO35EDGtpiuIdB58syQOYbG3SwqsHvy0MPGqzz+A1q4esOE3+qyn/9M+DtTGiAwbQ==
   dependencies:
-    "@jest/reporters" "27.0.6"
-    "@jest/test-result" "27.0.6"
-    "@nrwl/devkit" "12.9.0"
+    "@jest/reporters" "27.2.2"
+    "@jest/test-result" "27.2.2"
+    "@nrwl/devkit" "13.1.3"
     chalk "4.1.0"
     identity-obj-proxy "3.0.0"
-    jest-config "27.0.6"
-    jest-resolve "27.0.6"
-    jest-util "27.0.6"
+    jest-config "27.2.2"
+    jest-resolve "27.2.2"
+    jest-util "27.2.0"
     rxjs "^6.5.4"
     tslib "^2.0.0"
 
-"@nrwl/linter@12.9.0":
-  version "12.9.0"
-  resolved "https://registry.yarnpkg.com/@nrwl/linter/-/linter-12.9.0.tgz#1633045cb64871fb89eaced8c5b66664211237c6"
-  integrity sha512-8acZTT0nkwi914uJ6fMhZT6fZMMKOUGGjEWhvw9D3Lhe0aACsnXXSB+hJh+E8qchcGMYliqXuSi3X4Liq/fUFw==
+"@nrwl/linter@13.1.3":
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/linter/-/linter-13.1.3.tgz#d34397531cf47c29f1dc084513bba953b674ca6b"
+  integrity sha512-aUIHKenNTZxqv3RZ2KVgMuZRAoyDIowp0r8qoH+Xfhxkq+PpLHDsk+Z3C0LDzk7sbqQeIbq+bbSleUtHYDh5qg==
   dependencies:
-    "@nrwl/devkit" "12.9.0"
-    "@nrwl/jest" "12.9.0"
+    "@nrwl/devkit" "13.1.3"
+    "@nrwl/jest" "13.1.3"
+    eslint "7.32.0"
     glob "7.1.4"
     minimatch "3.0.4"
     tmp "~0.2.1"
     tslib "^2.0.0"
 
-"@nrwl/storybook@12.9.0":
-  version "12.9.0"
-  resolved "https://registry.yarnpkg.com/@nrwl/storybook/-/storybook-12.9.0.tgz#7af62231f58994546c33ee386967ca5a68e26863"
-  integrity sha512-J6hAfPVh3WK97qvs7vI2xTYx2Afn3hxFkew19Z4HQeJjsKpJ0xVz9OFPVmWnAmL9A3NpYzfIvE7aRwNAKlA8oQ==
+"@nrwl/storybook@13.1.3":
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/storybook/-/storybook-13.1.3.tgz#7ec6898eeb2263c4adf7949858cd0dd273b1c37c"
+  integrity sha512-MUKpYFCb0TIOEPw80sckY8NRwwFAC7q+qj5p9WD6+eYdWqB3In6pPuJg69EYjRlefgrP2CwvvZVG0HrIiJLa4w==
   dependencies:
-    "@nrwl/cypress" "12.9.0"
-    "@nrwl/devkit" "12.9.0"
-    "@nrwl/linter" "12.9.0"
-    "@nrwl/workspace" "12.9.0"
+    "@nrwl/cypress" "13.1.3"
+    "@nrwl/devkit" "13.1.3"
+    "@nrwl/linter" "13.1.3"
+    "@nrwl/workspace" "13.1.3"
     core-js "^3.6.5"
     semver "7.3.4"
-    ts-loader "5.4.5"
+    ts-loader "^9.2.6"
     tsconfig-paths-webpack-plugin "3.4.1"
 
 "@nrwl/tao@12.9.0":
@@ -3114,15 +2624,33 @@
     tslib "^2.0.0"
     yargs-parser "20.0.0"
 
-"@nrwl/workspace@12.9.0":
-  version "12.9.0"
-  resolved "https://registry.yarnpkg.com/@nrwl/workspace/-/workspace-12.9.0.tgz#218ac0bba8f1cd84235bc636ed6a928ec3550f86"
-  integrity sha512-P8jab7DebwU1fMnpA9A+7oBXNLxVYPqdGPIusOsvpRaJ9tjzhXhVM4OCYu3ZnmcpHboskmSwUMcIvOARRcwWLg==
+"@nrwl/tao@13.1.3":
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/tao/-/tao-13.1.3.tgz#5a88029b0aa9dfd4bca0a86d3dde2b608c468b36"
+  integrity sha512-/IwJgSgCBD1SaF+n8RuXX2OxDAh8ut/+P8pMswjm8063ac30UlAHjQ4XTYyskLH8uoUmNi2hNaGgHUrkwt7tQA==
   dependencies:
-    "@nrwl/cli" "12.9.0"
-    "@nrwl/devkit" "12.9.0"
-    "@nrwl/jest" "12.9.0"
-    "@nrwl/linter" "12.9.0"
+    chalk "4.1.0"
+    enquirer "~2.3.6"
+    fs-extra "^9.1.0"
+    jsonc-parser "3.0.0"
+    nx "13.1.3"
+    rxjs "^6.5.4"
+    rxjs-for-await "0.0.2"
+    semver "7.3.4"
+    tmp "~0.2.1"
+    tslib "^2.0.0"
+    yargs-parser "20.0.0"
+
+"@nrwl/workspace@13.1.3":
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/@nrwl/workspace/-/workspace-13.1.3.tgz#6cc6efc580b4ff27f7b824de76e247fde68d0560"
+  integrity sha512-qNsHiLFDUwD8xR0lnN08Wcu+7ouNKqqeUcAzYb/jxL0HDw/bKD1oUqO8Z+L7IaYG7Iqd0+lwv4kPNvhKPm0lAQ==
+  dependencies:
+    "@nrwl/cli" "13.1.3"
+    "@nrwl/devkit" "13.1.3"
+    "@nrwl/jest" "13.1.3"
+    "@nrwl/linter" "13.1.3"
+    "@parcel/watcher" "2.0.0-alpha.11"
     chalk "4.1.0"
     chokidar "^3.5.1"
     cosmiconfig "^4.0.0"
@@ -3134,14 +2662,24 @@
     ignore "^5.0.4"
     minimatch "3.0.4"
     npm-run-all "^4.1.5"
+    npm-run-path "^4.0.1"
     open "^7.4.2"
     rxjs "^6.5.4"
     semver "7.3.4"
+    strip-ansi "6.0.0"
     tmp "~0.2.1"
     tslib "^2.0.0"
     yargs "15.4.1"
     yargs-parser "20.0.0"
 
+"@parcel/watcher@2.0.0-alpha.11":
+  version "2.0.0-alpha.11"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-2.0.0-alpha.11.tgz#8d6233d4416880810438cd2628e6a35273241ab3"
+  integrity sha512-zMIAsFLcnB82kkk0kSOZ/zgyihb8sty0zVrsz+3ruoYXkchymWsCDsxiX4v+X2s8Jppk3JE8vlnD4DKs3QTOEQ==
+  dependencies:
+    node-addon-api "^3.0.2"
+    node-gyp-build "^4.2.3"
+
 "@pdftron/webviewer@8.1.0":
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/@pdftron/webviewer/-/webviewer-8.1.0.tgz#df0c48f1c81e76119e0dceb2233d1f26e6beaee0"
@@ -3225,6 +2763,13 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@sinonjs/fake-timers@^8.0.1":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz#3fdc2b6cb58935b21bfb8d1625eb1300484316e7"
+  integrity sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
 "@swimlane/ngx-charts@^17.0.1":
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/@swimlane/ngx-charts/-/ngx-charts-17.0.1.tgz#7d86d4725f864d798659c0c0a2eabb6f9f60982c"
@@ -3401,10 +2946,10 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@27.0.1":
-  version "27.0.1"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.0.1.tgz#fafcc997da0135865311bb1215ba16dba6bdf4ca"
-  integrity sha512-HTLpVXHrY69556ozYkcq47TtQJXpcWAWfkoqz+ZGz2JnmZhzlRjprCIyFnetSy8gpDWwTTGBcRVv1J1I1vBrHw==
+"@types/jest@27.0.2":
+  version "27.0.2"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.0.2.tgz#ac383c4d4aaddd29bbf2b916d8d105c304a5fcd7"
+  integrity sha512-4dRxkS/AFX0c5XW6IPMNOydLn2tEhNhJV7DnYK+0bjoJZ+QTmfucBlihX7aoEsh/ocYtkLC73UbnBXBXIxsULA==
   dependencies:
     jest-diff "^27.0.0"
     pretty-format "^27.0.0"
@@ -3429,10 +2974,10 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/lodash@^4.14.172":
-  version "4.14.172"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.172.tgz#aad774c28e7bfd7a67de25408e03ee5a8c3d028a"
-  integrity sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==
+"@types/lodash@^4.14.177":
+  version "4.14.177"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.177.tgz#f70c0d19c30fab101cad46b52be60363c43c4578"
+  integrity sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==
 
 "@types/minimatch@*", "@types/minimatch@^3.0.3":
   version "3.0.3"
@@ -3512,15 +3057,16 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@4.31.0":
-  version "4.31.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.31.0.tgz#9c3fa6f44bad789a962426ad951b54695bd3af6b"
-  integrity sha512-iPKZTZNavAlOhfF4gymiSuUkgLne/nh5Oz2/mdiUmuZVD42m9PapnCnzjxuDsnpnbH3wT5s2D8bw6S39TC6GNw==
+"@typescript-eslint/eslint-plugin@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz#c24dc7c8069c7706bc40d99f6fa87edcb2005276"
+  integrity sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.31.0"
-    "@typescript-eslint/scope-manager" "4.31.0"
+    "@typescript-eslint/experimental-utils" "4.33.0"
+    "@typescript-eslint/scope-manager" "4.33.0"
     debug "^4.3.1"
     functional-red-black-tree "^1.0.1"
+    ignore "^5.1.8"
     regexpp "^3.1.0"
     semver "^7.3.5"
     tsutils "^3.21.0"
@@ -3537,38 +3083,26 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/experimental-utils@4.31.0":
-  version "4.31.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.31.0.tgz#0ef1d5d86c334f983a00f310e43c1ce4c14e054d"
-  integrity sha512-Hld+EQiKLMppgKKkdUsLeVIeEOrwKc2G983NmznY/r5/ZtZCDvIOXnXtwqJIgYz/ymsy7n7RGvMyrzf1WaSQrw==
+"@typescript-eslint/experimental-utils@4.33.0", "@typescript-eslint/experimental-utils@~4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz#6f2a786a4209fa2222989e9380b5331b2810f7fd"
+  integrity sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==
   dependencies:
     "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.31.0"
-    "@typescript-eslint/types" "4.31.0"
-    "@typescript-eslint/typescript-estree" "4.31.0"
+    "@typescript-eslint/scope-manager" "4.33.0"
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/typescript-estree" "4.33.0"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/experimental-utils@~4.28.3":
-  version "4.28.5"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.5.tgz#66c28bef115b417cf9d80812a713e0e46bb42a64"
-  integrity sha512-bGPLCOJAa+j49hsynTaAtQIWg6uZd8VLiPcyDe4QPULsvQwLHGLSGKKcBN8/lBxIX14F74UEMK2zNDI8r0okwA==
+"@typescript-eslint/parser@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899"
+  integrity sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==
   dependencies:
-    "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.28.5"
-    "@typescript-eslint/types" "4.28.5"
-    "@typescript-eslint/typescript-estree" "4.28.5"
-    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
-
-"@typescript-eslint/parser@4.31.0":
-  version "4.31.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.31.0.tgz#87b7cd16b24b9170c77595d8b1363f8047121e05"
-  integrity sha512-oWbzvPh5amMuTmKaf1wp0ySxPt2ZXHnFQBN2Szu1O//7LmOvgaKTCIDNLK2NvzpmVd5A2M/1j/rujBqO37hj3w==
-  dependencies:
-    "@typescript-eslint/scope-manager" "4.31.0"
-    "@typescript-eslint/types" "4.31.0"
-    "@typescript-eslint/typescript-estree" "4.31.0"
+    "@typescript-eslint/scope-manager" "4.33.0"
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/typescript-estree" "4.33.0"
     debug "^4.3.1"
 
 "@typescript-eslint/scope-manager@4.28.2":
@@ -3579,36 +3113,23 @@
     "@typescript-eslint/types" "4.28.2"
     "@typescript-eslint/visitor-keys" "4.28.2"
 
-"@typescript-eslint/scope-manager@4.28.5":
-  version "4.28.5"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.28.5.tgz#3a1b70c50c1535ac33322786ea99ebe403d3b923"
-  integrity sha512-PHLq6n9nTMrLYcVcIZ7v0VY1X7dK309NM8ya9oL/yG8syFINIMHxyr2GzGoBYUdv3NUfCOqtuqps0ZmcgnZTfQ==
+"@typescript-eslint/scope-manager@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3"
+  integrity sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==
   dependencies:
-    "@typescript-eslint/types" "4.28.5"
-    "@typescript-eslint/visitor-keys" "4.28.5"
-
-"@typescript-eslint/scope-manager@4.31.0":
-  version "4.31.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.31.0.tgz#9be33aed4e9901db753803ba233b70d79a87fc3e"
-  integrity sha512-LJ+xtl34W76JMRLjbaQorhR0hfRAlp3Lscdiz9NeI/8i+q0hdBZ7BsiYieLoYWqy+AnRigaD3hUwPFugSzdocg==
-  dependencies:
-    "@typescript-eslint/types" "4.31.0"
-    "@typescript-eslint/visitor-keys" "4.31.0"
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/visitor-keys" "4.33.0"
 
 "@typescript-eslint/types@4.28.2":
   version "4.28.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.28.2.tgz#e6b9e234e0e9a66c4d25bab881661e91478223b5"
   integrity sha512-Gr15fuQVd93uD9zzxbApz3wf7ua3yk4ZujABZlZhaxxKY8ojo448u7XTm/+ETpy0V0dlMtj6t4VdDvdc0JmUhA==
 
-"@typescript-eslint/types@4.28.5":
-  version "4.28.5"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.28.5.tgz#d33edf8e429f0c0930a7c3d44e9b010354c422e9"
-  integrity sha512-MruOu4ZaDOLOhw4f/6iudyks/obuvvZUAHBDSW80Trnc5+ovmViLT2ZMDXhUV66ozcl6z0LJfKs1Usldgi/WCA==
-
-"@typescript-eslint/types@4.31.0":
-  version "4.31.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.31.0.tgz#9a7c86fcc1620189567dc4e46cad7efa07ee8dce"
-  integrity sha512-9XR5q9mk7DCXgXLS7REIVs+BaAswfdHhx91XqlJklmqWpTALGjygWVIb/UnLh4NWhfwhR5wNe1yTyCInxVhLqQ==
+"@typescript-eslint/types@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
+  integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
 
 "@typescript-eslint/typescript-estree@4.28.2":
   version "4.28.2"
@@ -3623,26 +3144,13 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@4.28.5":
-  version "4.28.5"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.5.tgz#4906d343de693cf3d8dcc301383ed638e0441cd1"
-  integrity sha512-FzJUKsBX8poCCdve7iV7ShirP8V+ys2t1fvamVeD1rWpiAnIm550a+BX/fmTHrjEpQJ7ZAn+Z7ZZwJjytk9rZw==
+"@typescript-eslint/typescript-estree@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
+  integrity sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==
   dependencies:
-    "@typescript-eslint/types" "4.28.5"
-    "@typescript-eslint/visitor-keys" "4.28.5"
-    debug "^4.3.1"
-    globby "^11.0.3"
-    is-glob "^4.0.1"
-    semver "^7.3.5"
-    tsutils "^3.21.0"
-
-"@typescript-eslint/typescript-estree@4.31.0":
-  version "4.31.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.31.0.tgz#4da4cb6274a7ef3b21d53f9e7147cc76f278a078"
-  integrity sha512-QHl2014t3ptg+xpmOSSPn5hm4mY8D4s97ftzyk9BZ8RxYQ3j73XcwuijnJ9cMa6DO4aLXeo8XS3z1omT9LA/Eg==
-  dependencies:
-    "@typescript-eslint/types" "4.31.0"
-    "@typescript-eslint/visitor-keys" "4.31.0"
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/visitor-keys" "4.33.0"
     debug "^4.3.1"
     globby "^11.0.3"
     is-glob "^4.0.1"
@@ -3657,20 +3165,12 @@
     "@typescript-eslint/types" "4.28.2"
     eslint-visitor-keys "^2.0.0"
 
-"@typescript-eslint/visitor-keys@4.28.5":
-  version "4.28.5"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.5.tgz#ffee2c602762ed6893405ee7c1144d9cc0a29675"
-  integrity sha512-dva/7Rr+EkxNWdJWau26xU/0slnFlkh88v3TsyTgRS/IIYFi5iIfpCFM4ikw0vQTFUR9FYSSyqgK4w64gsgxhg==
+"@typescript-eslint/visitor-keys@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
+  integrity sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==
   dependencies:
-    "@typescript-eslint/types" "4.28.5"
-    eslint-visitor-keys "^2.0.0"
-
-"@typescript-eslint/visitor-keys@4.31.0":
-  version "4.31.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.31.0.tgz#4e87b7761cb4e0e627dc2047021aa693fc76ea2b"
-  integrity sha512-HUcRp2a9I+P21+O21yu3ezv3GEPGjyGiXoEUQwZXjR8UxRApGeLyWH4ZIIUSalE28aG4YsV6GjtaAVB3QKOu0w==
-  dependencies:
-    "@typescript-eslint/types" "4.31.0"
+    "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
 "@webassemblyjs/ast@1.11.1":
@@ -4190,6 +3690,11 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -4477,21 +3982,28 @@ axios@^0.18.0:
     follow-redirects "1.5.10"
     is-buffer "^2.0.2"
 
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+  dependencies:
+    follow-redirects "^1.14.4"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
-babel-jest@^27.0.6, babel-jest@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.1.1.tgz#9359c45995d0940b84d2176ab83423f9eed07617"
-  integrity sha512-JA+dzJl4n2RBvWQEnph6HJaTHrsIPiXGQYatt/D8nR4UpX9UG4GaDzykVVPQBbrdTebZREkRb6SOxyIXJRab6Q==
+babel-jest@^27.2.2, babel-jest@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.3.1.tgz#0636a3404c68e07001e434ac4956d82da8a80022"
+  integrity sha512-SjIF8hh/ir0peae2D6S6ZKRhUy7q/DnpH7k/V6fT4Bgs/LXXUztOpX4G2tCgq8mLo5HA9mN6NmlFMeYtKmIsTQ==
   dependencies:
-    "@jest/transform" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/transform" "^27.3.1"
+    "@jest/types" "^27.2.5"
     "@types/babel__core" "^7.1.14"
     babel-plugin-istanbul "^6.0.0"
-    babel-preset-jest "^27.0.6"
+    babel-preset-jest "^27.2.0"
     chalk "^4.0.0"
     graceful-fs "^4.2.4"
     slash "^3.0.0"
@@ -4506,17 +4018,6 @@ babel-loader@8.2.2:
     make-dir "^3.1.0"
     schema-utils "^2.6.5"
 
-babel-loader@^8.0.2:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
-  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
-  dependencies:
-    find-cache-dir "^2.1.0"
-    loader-utils "^1.4.0"
-    mkdirp "^0.5.3"
-    pify "^4.0.1"
-    schema-utils "^2.6.5"
-
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
@@ -4535,10 +4036,10 @@ babel-plugin-istanbul@^6.0.0:
     istanbul-lib-instrument "^4.0.0"
     test-exclude "^6.0.0"
 
-babel-plugin-jest-hoist@^27.0.6:
-  version "27.0.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.0.6.tgz#f7c6b3d764af21cb4a2a1ab6870117dbde15b456"
-  integrity sha512-CewFeM9Vv2gM7Yr9n5eyyLVPRSiBnk6lKZRjgwYnGKSl9M14TMn2vkN02wTF04OGuSDLEzlWiMzvjXuW9mB6Gw==
+babel-plugin-jest-hoist@^27.2.0:
+  version "27.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.2.0.tgz#79f37d43f7e5c4fdc4b2ca3e10cc6cf545626277"
+  integrity sha512-TOux9khNKdi64mW+0OIhcmbAn75tTlzKhxmiNXevQaPbrBYK7YKjP1jl6NHTJ6XR5UgUrJbCnWlKVnJn29dfjw==
   dependencies:
     "@babel/template" "^7.3.3"
     "@babel/types" "^7.3.3"
@@ -4587,12 +4088,12 @@ babel-preset-current-node-syntax@^1.0.0:
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-top-level-await" "^7.8.3"
 
-babel-preset-jest@^27.0.6:
-  version "27.0.6"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.0.6.tgz#909ef08e9f24a4679768be2f60a3df0856843f9d"
-  integrity sha512-WObA0/Biw2LrVVwZkF/2GqbOdzhKD6Fkdwhoy9ASIrOWr/zodcSpQh72JOkEn6NWyjmnPDjNSqaGN4KnpKzhXw==
+babel-preset-jest@^27.2.0:
+  version "27.2.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.2.0.tgz#556bbbf340608fed5670ab0ea0c8ef2449fba885"
+  integrity sha512-z7MgQ3peBwN5L5aCqBKnF6iqdlvZvFUQynEhu0J+X9nHLU72jO3iY331lcYrg+AssJ8q7xsv5/3AICzVmJ/wvg==
   dependencies:
-    babel-plugin-jest-hoist "^27.0.6"
+    babel-plugin-jest-hoist "^27.2.0"
     babel-preset-current-node-syntax "^1.0.0"
 
 balanced-match@^1.0.0:
@@ -4679,12 +4180,7 @@ blob-util@2.0.2:
   resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
   integrity sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==
 
-bluebird@3.7.1:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.1.tgz#df70e302b471d7473489acf26a93d63b53f874de"
-  integrity sha512-DdmyoGCleJnkbp3nkbxTLJ18rjDsE4yCggEwKNXkeV123sPNfOCYeDoeuOY+F2FrSjO1YXcTU+dsy96KMy+gcg==
-
-bluebird@^3.5.5, bluebird@^3.7.2:
+bluebird@^3.5.5, bluebird@^3.7.1, bluebird@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -4848,7 +4344,7 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.8.5, browserslist@^4.9.1:
+browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.9.1:
   version "4.14.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.2.tgz#1b3cec458a1ba87588cc5e9be62f19b6d48813ce"
   integrity sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==
@@ -5206,7 +4702,7 @@ chalk@^1.0.0, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -5332,7 +4828,7 @@ ci-info@^2.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
-ci-info@^3.1.1:
+ci-info@^3.1.1, ci-info@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.2.0.tgz#2876cb948a498797b5236f0095bc057d0dca38b6"
   integrity sha512-dVqRX7fLUm8J6FgHJ418XuIgDLZDkYcDFTeL6TA2gt5WlIZUQrrH6EZrNClwT/H0FateUsZkGIOPRrLbP+PR9A==
@@ -5741,14 +5237,6 @@ core-js-compat@^3.14.0, core-js-compat@^3.15.0:
     browserslist "^4.17.0"
     semver "7.0.0"
 
-core-js-compat@^3.6.2:
-  version "3.6.5"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.5.tgz#2a51d9a4e25dfd6e690251aa81f99e3c05481f1c"
-  integrity sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==
-  dependencies:
-    browserslist "^4.8.5"
-    semver "7.0.0"
-
 core-js-pure@^3.0.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.12.0.tgz#c59d45954a6569232f0704d085916a5e8c3b272f"
@@ -6359,13 +5847,6 @@ debug@4, debug@^4.3.1:
   dependencies:
     ms "2.1.2"
 
-debug@4.1.1, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
-  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
-  dependencies:
-    ms "^2.1.1"
-
 debug@4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
@@ -6394,6 +5875,13 @@ debug@^3.2.6, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+  dependencies:
+    ms "^2.1.1"
+
 decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -6842,15 +6330,6 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^4.0.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz#3b806f3bfafc1ec7de69551ef93cca46c1704126"
-  integrity sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==
-  dependencies:
-    graceful-fs "^4.1.2"
-    memory-fs "^0.5.0"
-    tapable "^1.0.0"
-
 enhanced-resolve@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
@@ -6860,6 +6339,14 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
+enhanced-resolve@^5.0.0, enhanced-resolve@^5.8.3:
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz#6d552d465cce0423f5b3d718511ea53826a7b2f0"
+  integrity sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 enhanced-resolve@^5.7.0, enhanced-resolve@^5.8.0:
   version "5.8.2"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.8.2.tgz#15ddc779345cbb73e97c611cd00c01c1e7bf4d8b"
@@ -7030,6 +6517,11 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+esbuild-wasm@^0.12.15:
+  version "0.12.29"
+  resolved "https://registry.yarnpkg.com/esbuild-wasm/-/esbuild-wasm-0.12.29.tgz#1d210bb7d463b2ca51c54d69bb4192d9709f6100"
+  integrity sha512-amSuB/qOGnTFYLOxGHDGosQbOKZnrinniPHFf6ZxzeNH7WAjLkjXluKyKAtX2YuhTkUXm9XV9igl13iqYZ44fQ==
+
 esbuild@0.12.24:
   version "0.12.24"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.24.tgz#21966fad25a80f368ed308101e88102bce0dc68f"
@@ -7412,16 +6904,16 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-expect@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-27.1.1.tgz#020215da67d41cd6ad805fa00bd030985ca7c093"
-  integrity sha512-JQAzp0CJoFFHF1RnOtrMUNMdsfx/Tl0+FhRzVl8q0fa23N+JyWdPXwb3T5rkHCvyo9uttnK7lVdKCBl1b/9EDw==
+expect@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-27.3.1.tgz#d0f170b1f5c8a2009bab0beffd4bb94f043e38e7"
+  integrity sha512-MrNXV2sL9iDRebWPGOGFdPQRl2eDQNu/uhxIMShjjx74T6kC6jFIkmQ6OqXDtevjGUkyB2IT56RzDBqXf/QPCg==
   dependencies:
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
     ansi-styles "^5.0.0"
-    jest-get-type "^27.0.6"
-    jest-matcher-utils "^27.1.1"
-    jest-message-util "^27.1.1"
+    jest-get-type "^27.3.1"
+    jest-matcher-utils "^27.3.1"
+    jest-message-util "^27.3.1"
     jest-regex-util "^27.0.6"
 
 express@^4.17.1:
@@ -7838,6 +7330,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
   integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
 
+follow-redirects@^1.14.4:
+  version "1.14.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.5.tgz#f09a5848981d3c772b5392309778523f8d85c381"
+  integrity sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -8662,6 +8159,11 @@ ignore@^5.0.4, ignore@^5.1.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+ignore@^5.1.8:
+  version "5.1.9"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.9.tgz#9ec1a5cbe8e1446ec60d4420060d43aa6e7382fb"
+  integrity sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ==
+
 image-size@~0.5.0:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
@@ -8811,13 +8313,6 @@ internmap@^1.0.0:
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.0.tgz#3c6bf0944b0eae457698000412108752bbfddb56"
   integrity sha512-SdoDWwNOTE2n4JWUsLn4KXZGuZPjPF9yyOGc8bnfWnBQh7BD/l80rzSznKc/r4Y0aQ7z3RTk9X+tV4tHBpu+dA==
 
-invariant@^2.2.2, invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -9371,120 +8866,120 @@ jake@^10.6.1:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
-jasmine-marbles@~0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/jasmine-marbles/-/jasmine-marbles-0.8.3.tgz#a27253d1d52dfe49d8f145aba63f0bf18147b4ff"
-  integrity sha512-aaf7ObOC9X1jZ8VyIG49+vOTycRqIWT5Jt3vHHbECE9tN7U05mnpxi20thth02HzasOv/Fmqf+uGhcLE/f8NYg==
+jasmine-marbles@~0.8.4:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/jasmine-marbles/-/jasmine-marbles-0.8.4.tgz#67f840012634c453e986fcf48860d6ea92ae144e"
+  integrity sha512-zbtuXABpSWrSswYPiZ5m6EQhluNmKcRQs+82AqJHSN+PMx3ASpDmTvRfqe9Pk2hPh9Ge5zrzOsorIlw3kdwTXQ==
   dependencies:
     lodash "^4.17.20"
 
-jest-changed-files@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.1.1.tgz#9b3f67a34cc58e3e811e2e1e21529837653e4200"
-  integrity sha512-5TV9+fYlC2A6hu3qtoyGHprBwCAn0AuGA77bZdUgYvVlRMjHXo063VcWTEAyx6XAZ85DYHqp0+aHKbPlfRDRvA==
+jest-changed-files@^27.3.0:
+  version "27.3.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.3.0.tgz#22a02cc2b34583fc66e443171dc271c0529d263c"
+  integrity sha512-9DJs9garMHv4RhylUMZgbdCJ3+jHSkpL9aaVKp13xtXAD80qLTLrqcDZL1PHA9dYA0bCI86Nv2BhkLpLhrBcPg==
   dependencies:
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
     execa "^5.0.0"
     throat "^6.0.1"
 
-jest-circus@^27.0.6, jest-circus@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.1.1.tgz#08dd3ec5cbaadce68ce6388ebccbe051d1b34bc6"
-  integrity sha512-Xed1ApiMFu/yzqGMBToHr8sp2gkX/ARZf4nXoGrHJrXrTUdVIWiVYheayfcOaPdQvQEE/uyBLgW7I7YBLIrAXQ==
+jest-circus@^27.2.2, jest-circus@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.3.1.tgz#1679e74387cbbf0c6a8b42de963250a6469e0797"
+  integrity sha512-v1dsM9II6gvXokgqq6Yh2jHCpfg7ZqV4jWY66u7npz24JnhP3NHxI0sKT7+ZMQ7IrOWHYAaeEllOySbDbWsiXw==
   dependencies:
-    "@jest/environment" "^27.1.1"
-    "@jest/test-result" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/environment" "^27.3.1"
+    "@jest/test-result" "^27.3.1"
+    "@jest/types" "^27.2.5"
     "@types/node" "*"
     chalk "^4.0.0"
     co "^4.6.0"
     dedent "^0.7.0"
-    expect "^27.1.1"
+    expect "^27.3.1"
     is-generator-fn "^2.0.0"
-    jest-each "^27.1.1"
-    jest-matcher-utils "^27.1.1"
-    jest-message-util "^27.1.1"
-    jest-runtime "^27.1.1"
-    jest-snapshot "^27.1.1"
-    jest-util "^27.1.1"
-    pretty-format "^27.1.1"
+    jest-each "^27.3.1"
+    jest-matcher-utils "^27.3.1"
+    jest-message-util "^27.3.1"
+    jest-runtime "^27.3.1"
+    jest-snapshot "^27.3.1"
+    jest-util "^27.3.1"
+    pretty-format "^27.3.1"
     slash "^3.0.0"
     stack-utils "^2.0.3"
     throat "^6.0.1"
 
-jest-cli@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.1.1.tgz#6491a0278231ffee61083ad468809328e96a8eb2"
-  integrity sha512-LCjfEYp9D3bcOeVUUpEol9Y1ijZYMWVqflSmtw/wX+6Fb7zP4IlO14/6s9v1pxsoM4Pn46+M2zABgKuQjyDpTw==
+jest-cli@^27.2.3:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.3.1.tgz#b576f9d146ba6643ce0a162d782b40152b6b1d16"
+  integrity sha512-WHnCqpfK+6EvT62me6WVs8NhtbjAS4/6vZJnk7/2+oOr50cwAzG4Wxt6RXX0hu6m1169ZGMlhYYUNeKBXCph/Q==
   dependencies:
-    "@jest/core" "^27.1.1"
-    "@jest/test-result" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/core" "^27.3.1"
+    "@jest/test-result" "^27.3.1"
+    "@jest/types" "^27.2.5"
     chalk "^4.0.0"
     exit "^0.1.2"
     graceful-fs "^4.2.4"
     import-local "^3.0.2"
-    jest-config "^27.1.1"
-    jest-util "^27.1.1"
-    jest-validate "^27.1.1"
+    jest-config "^27.3.1"
+    jest-util "^27.3.1"
+    jest-validate "^27.3.1"
     prompts "^2.0.1"
-    yargs "^16.0.3"
+    yargs "^16.2.0"
 
-jest-config@27.0.6:
-  version "27.0.6"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.0.6.tgz#119fb10f149ba63d9c50621baa4f1f179500277f"
-  integrity sha512-JZRR3I1Plr2YxPBhgqRspDE2S5zprbga3swYNrvY3HfQGu7p/GjyLOqwrYad97tX3U3mzT53TPHVmozacfP/3w==
+jest-config@27.2.2:
+  version "27.2.2"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.2.2.tgz#970d8466c60ac106ac9d7d0b8dcf3ff150fa713a"
+  integrity sha512-2nhms3lp52ZpU0636bB6zIFHjDVtYxzFQIOHZjBFUeXcb6b41sEkWojbHaJ4FEIO44UbccTLa7tvNpiFCgPE7w==
   dependencies:
     "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^27.0.6"
-    "@jest/types" "^27.0.6"
-    babel-jest "^27.0.6"
-    chalk "^4.0.0"
-    deepmerge "^4.2.2"
-    glob "^7.1.1"
-    graceful-fs "^4.2.4"
-    is-ci "^3.0.0"
-    jest-circus "^27.0.6"
-    jest-environment-jsdom "^27.0.6"
-    jest-environment-node "^27.0.6"
-    jest-get-type "^27.0.6"
-    jest-jasmine2 "^27.0.6"
-    jest-regex-util "^27.0.6"
-    jest-resolve "^27.0.6"
-    jest-runner "^27.0.6"
-    jest-util "^27.0.6"
-    jest-validate "^27.0.6"
-    micromatch "^4.0.4"
-    pretty-format "^27.0.6"
-
-jest-config@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.1.1.tgz#cde823ad27f7ec0b9440035eabc75d4ac1ea024c"
-  integrity sha512-2iSd5zoJV4MsWPcLCGwUVUY/j6pZXm4Qd3rnbCtrd9EHNTg458iHw8PZztPQXfxKBKJxLfBk7tbZqYF8MGtxJA==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^27.1.1"
+    "@jest/test-sequencer" "^27.2.2"
     "@jest/types" "^27.1.1"
-    babel-jest "^27.1.1"
+    babel-jest "^27.2.2"
     chalk "^4.0.0"
     deepmerge "^4.2.2"
     glob "^7.1.1"
     graceful-fs "^4.2.4"
     is-ci "^3.0.0"
-    jest-circus "^27.1.1"
-    jest-environment-jsdom "^27.1.1"
-    jest-environment-node "^27.1.1"
+    jest-circus "^27.2.2"
+    jest-environment-jsdom "^27.2.2"
+    jest-environment-node "^27.2.2"
     jest-get-type "^27.0.6"
-    jest-jasmine2 "^27.1.1"
+    jest-jasmine2 "^27.2.2"
     jest-regex-util "^27.0.6"
-    jest-resolve "^27.1.1"
-    jest-runner "^27.1.1"
-    jest-util "^27.1.1"
-    jest-validate "^27.1.1"
+    jest-resolve "^27.2.2"
+    jest-runner "^27.2.2"
+    jest-util "^27.2.0"
+    jest-validate "^27.2.2"
     micromatch "^4.0.4"
-    pretty-format "^27.1.1"
+    pretty-format "^27.2.2"
 
-jest-diff@^27.0.0, jest-diff@^27.1.1:
+jest-config@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.3.1.tgz#cb3b7f6aaa8c0a7daad4f2b9573899ca7e09bbad"
+  integrity sha512-KY8xOIbIACZ/vdYCKSopL44I0xboxC751IX+DXL2+Wx6DKNycyEfV3rryC3BPm5Uq/BBqDoMrKuqLEUNJmMKKg==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^27.3.1"
+    "@jest/types" "^27.2.5"
+    babel-jest "^27.3.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.4"
+    jest-circus "^27.3.1"
+    jest-environment-jsdom "^27.3.1"
+    jest-environment-node "^27.3.1"
+    jest-get-type "^27.3.1"
+    jest-jasmine2 "^27.3.1"
+    jest-regex-util "^27.0.6"
+    jest-resolve "^27.3.1"
+    jest-runner "^27.3.1"
+    jest-util "^27.3.1"
+    jest-validate "^27.3.1"
+    micromatch "^4.0.4"
+    pretty-format "^27.3.1"
+
+jest-diff@^27.0.0:
   version "27.1.1"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.1.1.tgz#1d1629ca2e3933b10cb27dc260e28e3dba182684"
   integrity sha512-m/6n5158rqEriTazqHtBpOa2B/gGgXJijX6nsEgZfbJ/3pxQcdpVXBe+FP39b1dxWHyLVVmuVXddmAwtqFO4Lg==
@@ -9494,6 +8989,16 @@ jest-diff@^27.0.0, jest-diff@^27.1.1:
     jest-get-type "^27.0.6"
     pretty-format "^27.1.1"
 
+jest-diff@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.3.1.tgz#d2775fea15411f5f5aeda2a5e02c2f36440f6d55"
+  integrity sha512-PCeuAH4AWUo2O5+ksW4pL9v5xJAcIKPUPfIhZBcG1RKv/0+dvaWTQK1Nrau8d67dp65fOqbeMdoil+6PedyEPQ==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.0.6"
+    jest-get-type "^27.3.1"
+    pretty-format "^27.3.1"
+
 jest-docblock@^27.0.6:
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.0.6.tgz#cc78266acf7fe693ca462cbbda0ea4e639e4e5f3"
@@ -9501,16 +9006,16 @@ jest-docblock@^27.0.6:
   dependencies:
     detect-newline "^3.0.0"
 
-jest-each@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.1.1.tgz#caa1e7eed77144be346eb18712885b990389348a"
-  integrity sha512-r6hOsTLavUBb1xN0uDa89jdDeBmJ+K49fWpbyxeGRA2pLY46PlC4z551/cWNQzrj+IUa5/gSRsCIV/01HdNPug==
+jest-each@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.3.1.tgz#14c56bb4f18dd18dc6bdd853919b5f16a17761ff"
+  integrity sha512-E4SwfzKJWYcvOYCjOxhZcxwL+AY0uFMvdCOwvzgutJiaiodFjkxQQDxHm8FQBeTqDnSmKsQWn7ldMRzTn2zJaQ==
   dependencies:
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
     chalk "^4.0.0"
-    jest-get-type "^27.0.6"
-    jest-util "^27.1.1"
-    pretty-format "^27.1.1"
+    jest-get-type "^27.3.1"
+    jest-util "^27.3.1"
+    pretty-format "^27.3.1"
 
 jest-environment-jsdom@^27.0.0:
   version "27.0.3"
@@ -9525,42 +9030,47 @@ jest-environment-jsdom@^27.0.0:
     jest-util "^27.0.2"
     jsdom "^16.6.0"
 
-jest-environment-jsdom@^27.0.6, jest-environment-jsdom@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.1.1.tgz#e53e98a16e6a764b8ee8db3b29b3a8c27db06f66"
-  integrity sha512-6vOnoZ6IaExuw7FvnuJhA1qFYv1DDSnN0sQowzolNwxQp7bG1YhLxj2YU1sVXAYA3IR3MbH2mbnJUsLUWfyfzw==
+jest-environment-jsdom@^27.2.2, jest-environment-jsdom@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.3.1.tgz#63ac36d68f7a9303494df783494856222b57f73e"
+  integrity sha512-3MOy8qMzIkQlfb3W1TfrD7uZHj+xx8Olix5vMENkj5djPmRqndMaXtpnaZkxmxM+Qc3lo+yVzJjzuXbCcZjAlg==
   dependencies:
-    "@jest/environment" "^27.1.1"
-    "@jest/fake-timers" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/environment" "^27.3.1"
+    "@jest/fake-timers" "^27.3.1"
+    "@jest/types" "^27.2.5"
     "@types/node" "*"
-    jest-mock "^27.1.1"
-    jest-util "^27.1.1"
+    jest-mock "^27.3.0"
+    jest-util "^27.3.1"
     jsdom "^16.6.0"
 
-jest-environment-node@^27.0.6, jest-environment-node@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.1.1.tgz#97425d4762b2aeab15892ffba08c6cbed7653e75"
-  integrity sha512-OEGeZh0PwzngNIYWYgWrvTcLygopV8OJbC9HNb0j70VBKgEIsdZkYhwcFnaURX83OHACMqf1pa9Tv5Pw5jemrg==
+jest-environment-node@^27.2.2, jest-environment-node@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.3.1.tgz#af7d0eed04edafb740311b303f3fe7c8c27014bb"
+  integrity sha512-T89F/FgkE8waqrTSA7/ydMkcc52uYPgZZ6q8OaZgyiZkJb5QNNCF6oPZjH9IfPFfcc9uBWh1574N0kY0pSvTXw==
   dependencies:
-    "@jest/environment" "^27.1.1"
-    "@jest/fake-timers" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/environment" "^27.3.1"
+    "@jest/fake-timers" "^27.3.1"
+    "@jest/types" "^27.2.5"
     "@types/node" "*"
-    jest-mock "^27.1.1"
-    jest-util "^27.1.1"
+    jest-mock "^27.3.0"
+    jest-util "^27.3.1"
 
 jest-get-type@^27.0.6:
   version "27.0.6"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.0.6.tgz#0eb5c7f755854279ce9b68a9f1a4122f69047cfe"
   integrity sha512-XTkK5exIeUbbveehcSR8w0bhH+c0yloW/Wpl+9vZrjzztCPWrxhHwkIFpZzCt71oRBsgxmuUfxEqOYoZI2macg==
 
-jest-haste-map@^27.0.6, jest-haste-map@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.1.1.tgz#f7c646b0e417ec29b80b96cf785b57b581384adf"
-  integrity sha512-NGLYVAdh5C8Ezg5QBFzrNeYsfxptDBPlhvZNaicLiZX77F/rS27a9M6u9ripWAaaD54xnWdZNZpEkdjD5Eo5aQ==
+jest-get-type@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.3.1.tgz#a8a2b0a12b50169773099eee60a0e6dd11423eff"
+  integrity sha512-+Ilqi8hgHSAdhlQ3s12CAVNd8H96ZkQBfYoXmArzZnOfAtVAJEiPDBirjByEblvG/4LPJmkL+nBqPO3A1YJAEg==
+
+jest-haste-map@^27.2.2, jest-haste-map@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.3.1.tgz#7656fbd64bf48bda904e759fc9d93e2c807353ee"
+  integrity sha512-lYfNZIzwPccDJZIyk9Iz5iQMM/MH56NIIcGj7AFU1YyA4ewWFBl8z+YPJuSCRML/ee2cCt2y3W4K3VXPT6Nhzg==
   dependencies:
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
     "@types/graceful-fs" "^4.1.2"
     "@types/node" "*"
     anymatch "^3.0.3"
@@ -9568,54 +9078,54 @@ jest-haste-map@^27.0.6, jest-haste-map@^27.1.1:
     graceful-fs "^4.2.4"
     jest-regex-util "^27.0.6"
     jest-serializer "^27.0.6"
-    jest-util "^27.1.1"
-    jest-worker "^27.1.1"
+    jest-util "^27.3.1"
+    jest-worker "^27.3.1"
     micromatch "^4.0.4"
     walker "^1.0.7"
   optionalDependencies:
     fsevents "^2.3.2"
 
-jest-jasmine2@^27.0.6, jest-jasmine2@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.1.1.tgz#efb9e7b70ce834c35c91e1a2f01bb41b462fad43"
-  integrity sha512-0LAzUmcmvQwjIdJt0cXUVX4G5qjVXE8ELt6nbMNDzv2yAs2hYCCUtQq+Eje70GwAysWCGcS64QeYj5VPHYVxPg==
+jest-jasmine2@^27.2.2, jest-jasmine2@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.3.1.tgz#df6d3d07c7dafc344feb43a0072a6f09458d32b0"
+  integrity sha512-WK11ZUetDQaC09w4/j7o4FZDUIp+4iYWH/Lik34Pv7ukL+DuXFGdnmmi7dT58J2ZYKFB5r13GyE0z3NPeyJmsg==
   dependencies:
     "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^27.1.1"
+    "@jest/environment" "^27.3.1"
     "@jest/source-map" "^27.0.6"
-    "@jest/test-result" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/test-result" "^27.3.1"
+    "@jest/types" "^27.2.5"
     "@types/node" "*"
     chalk "^4.0.0"
     co "^4.6.0"
-    expect "^27.1.1"
+    expect "^27.3.1"
     is-generator-fn "^2.0.0"
-    jest-each "^27.1.1"
-    jest-matcher-utils "^27.1.1"
-    jest-message-util "^27.1.1"
-    jest-runtime "^27.1.1"
-    jest-snapshot "^27.1.1"
-    jest-util "^27.1.1"
-    pretty-format "^27.1.1"
+    jest-each "^27.3.1"
+    jest-matcher-utils "^27.3.1"
+    jest-message-util "^27.3.1"
+    jest-runtime "^27.3.1"
+    jest-snapshot "^27.3.1"
+    jest-util "^27.3.1"
+    pretty-format "^27.3.1"
     throat "^6.0.1"
 
-jest-leak-detector@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.1.1.tgz#8e05ec4b339814fc4202f07d875da65189e3d7d4"
-  integrity sha512-gwSgzmqShoeEsEVpgObymQPrM9P6557jt1EsFW5aCeJ46Cme0EdjYU7xr6llQZ5GpWDl56eOstUaPXiZOfiTKw==
+jest-leak-detector@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.3.1.tgz#7fb632c2992ef707a1e73286e1e704f9cc1772b2"
+  integrity sha512-78QstU9tXbaHzwlRlKmTpjP9k4Pvre5l0r8Spo4SbFFVy/4Abg9I6ZjHwjg2QyKEAMg020XcjP+UgLZIY50yEg==
   dependencies:
-    jest-get-type "^27.0.6"
-    pretty-format "^27.1.1"
+    jest-get-type "^27.3.1"
+    pretty-format "^27.3.1"
 
-jest-matcher-utils@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.1.1.tgz#1f444d7491ccf9edca746336b056178789a59651"
-  integrity sha512-Q1a10w9Y4sh0wegkdP6reQOa/Dtz7nAvDqBgrat1ItZAUvk4jzXAqyhXPu/ZuEtDaXaNKpdRPRQA8bvkOh2Eaw==
+jest-matcher-utils@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.3.1.tgz#257ad61e54a6d4044e080d85dbdc4a08811e9c1c"
+  integrity sha512-hX8N7zXS4k+8bC1Aj0OWpGb7D3gIXxYvPNK1inP5xvE4ztbz3rc4AkI6jGVaerepBnfWB17FL5lWFJT3s7qo8w==
   dependencies:
     chalk "^4.0.0"
-    jest-diff "^27.1.1"
-    jest-get-type "^27.0.6"
-    pretty-format "^27.1.1"
+    jest-diff "^27.3.1"
+    jest-get-type "^27.3.1"
+    pretty-format "^27.3.1"
 
 jest-message-util@^27.0.2:
   version "27.0.2"
@@ -9632,18 +9142,18 @@ jest-message-util@^27.0.2:
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
-jest-message-util@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.1.1.tgz#980110fb72fcfa711cd9a95e8f10d335207585c6"
-  integrity sha512-b697BOJV93+AVGvzLRtVZ0cTVRbd59OaWnbB2D75GRaIMc4I+Z9W0wHxbfjW01JWO+TqqW4yevT0aN7Fd0XWng==
+jest-message-util@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.3.1.tgz#f7c25688ad3410ab10bcb862bcfe3152345c6436"
+  integrity sha512-bh3JEmxsTZ/9rTm0jQrPElbY2+y48Rw2t47uMfByNyUVR+OfPh4anuyKsGqsNkXk/TI4JbLRZx+7p7Hdt6q1yg==
   dependencies:
     "@babel/code-frame" "^7.12.13"
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
     "@types/stack-utils" "^2.0.0"
     chalk "^4.0.0"
     graceful-fs "^4.2.4"
     micromatch "^4.0.4"
-    pretty-format "^27.1.1"
+    pretty-format "^27.3.1"
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
@@ -9655,12 +9165,12 @@ jest-mock@^27.0.3:
     "@jest/types" "^27.0.2"
     "@types/node" "*"
 
-jest-mock@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.1.1.tgz#c7a2e81301fdcf3dab114931d23d89ec9d0c3a82"
-  integrity sha512-SClsFKuYBf+6SSi8jtAYOuPw8DDMsTElUWEae3zq7vDhH01ayVSIHUSIa8UgbDOUalCFp6gNsaikN0rbxN4dbw==
+jest-mock@^27.3.0:
+  version "27.3.0"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.3.0.tgz#ddf0ec3cc3e68c8ccd489bef4d1f525571a1b867"
+  integrity sha512-ziZiLk0elZOQjD08bLkegBzv5hCABu/c8Ytx45nJKkysQwGaonvmTxwjLqEA4qGdasq9o2I8/HtdGMNnVsMTGw==
   dependencies:
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
     "@types/node" "*"
 
 jest-pnp-resolver@^1.2.2:
@@ -9668,10 +9178,10 @@ jest-pnp-resolver@^1.2.2:
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
   integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
 
-jest-preset-angular@9.0.7:
-  version "9.0.7"
-  resolved "https://registry.yarnpkg.com/jest-preset-angular/-/jest-preset-angular-9.0.7.tgz#16c006158d32d9d66bf4f86efd136d943308ba78"
-  integrity sha512-yK4TdbNBwO5Nq55nYq8uJqs8+xKWVXjBVv3glndm/gx4EjVMmxJO2FB5q7JJ8M5Uf/jxANSu0PjS65opti2DXA==
+jest-preset-angular@10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/jest-preset-angular/-/jest-preset-angular-10.0.1.tgz#fb9f12ae3ccad0c586079da1df92b6ac003cd218"
+  integrity sha512-+Rxi47jRJTX5BDhB4DqIELCWnJ319vHGI4MGcIVl+AXVXUKXe7zZiy7yC2Pdbs6SNUrwHObWq3yFkSt6jFtEPQ==
   dependencies:
     jest-environment-jsdom "^27.0.0"
     pretty-format "^27.0.0"
@@ -9682,87 +9192,87 @@ jest-regex-util@^27.0.6:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.0.6.tgz#02e112082935ae949ce5d13b2675db3d8c87d9c5"
   integrity sha512-SUhPzBsGa1IKm8hx2F4NfTGGp+r7BXJ4CulsZ1k2kI+mGLG+lxGrs76veN2LF/aUdGosJBzKgXmNCw+BzFqBDQ==
 
-jest-resolve-dependencies@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.1.1.tgz#6f3e0916c1764dd1853c6111ed9d66c66c792e40"
-  integrity sha512-sYZR+uBjFDCo4VhYeazZf/T+ryYItvdLKu9vHatqkUqHGjDMrdEPOykiqC2iEpaCFTS+3iL/21CYiJuKdRbniw==
+jest-resolve-dependencies@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.3.1.tgz#85b99bdbdfa46e2c81c6228fc4c91076f624f6e2"
+  integrity sha512-X7iLzY8pCiYOnvYo2YrK3P9oSE8/3N2f4pUZMJ8IUcZnT81vlSonya1KTO9ZfKGuC+svE6FHK/XOb8SsoRUV1A==
   dependencies:
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
     jest-regex-util "^27.0.6"
-    jest-snapshot "^27.1.1"
+    jest-snapshot "^27.3.1"
 
-jest-resolve@27.0.6:
-  version "27.0.6"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.0.6.tgz#e90f436dd4f8fbf53f58a91c42344864f8e55bff"
-  integrity sha512-yKmIgw2LgTh7uAJtzv8UFHGF7Dm7XfvOe/LQ3Txv101fLM8cx2h1QVwtSJ51Q/SCxpIiKfVn6G2jYYMDNHZteA==
-  dependencies:
-    "@jest/types" "^27.0.6"
-    chalk "^4.0.0"
-    escalade "^3.1.1"
-    graceful-fs "^4.2.4"
-    jest-pnp-resolver "^1.2.2"
-    jest-util "^27.0.6"
-    jest-validate "^27.0.6"
-    resolve "^1.20.0"
-    slash "^3.0.0"
-
-jest-resolve@^27.0.6, jest-resolve@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.1.1.tgz#3a86762f9affcad9697bc88140b0581b623add33"
-  integrity sha512-M41YFmWhvDVstwe7XuV21zynOiBLJB5Sk0GrIsYYgTkjfEWNLVXDjAyq1W7PHseaYNOxIc0nOGq/r5iwcZNC1A==
+jest-resolve@27.2.2:
+  version "27.2.2"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.2.2.tgz#1bad93dbc6c20edb874e6720e82e4e48900b120b"
+  integrity sha512-tfbHcBs/hJTb3fPQ/3hLWR+TsLNTzzK98TU+zIAsrL9nNzWfWROwopUOmiSUqmHMZW5t9au/433kSF2/Af+tTw==
   dependencies:
     "@jest/types" "^27.1.1"
     chalk "^4.0.0"
     escalade "^3.1.1"
     graceful-fs "^4.2.4"
-    jest-haste-map "^27.1.1"
+    jest-haste-map "^27.2.2"
     jest-pnp-resolver "^1.2.2"
-    jest-util "^27.1.1"
-    jest-validate "^27.1.1"
+    jest-util "^27.2.0"
+    jest-validate "^27.2.2"
     resolve "^1.20.0"
     slash "^3.0.0"
 
-jest-runner@^27.0.6, jest-runner@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.1.1.tgz#1991fdf13a8fe6e49cef47332db33300649357cd"
-  integrity sha512-lP3MBNQhg75/sQtVkC8dsAQZumvy3lHK/YIwYPfEyqGIX1qEcnYIRxP89q0ZgC5ngvi1vN2P5UFHszQxguWdng==
+jest-resolve@^27.2.2, jest-resolve@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.3.1.tgz#0e5542172a1aa0270be6f66a65888647bdd74a3e"
+  integrity sha512-Dfzt25CFSPo3Y3GCbxynRBZzxq9AdyNN+x/v2IqYx6KVT5Z6me2Z/PsSGFSv3cOSUZqJ9pHxilao/I/m9FouLw==
   dependencies:
-    "@jest/console" "^27.1.1"
-    "@jest/environment" "^27.1.1"
-    "@jest/test-result" "^27.1.1"
-    "@jest/transform" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^27.3.1"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^27.3.1"
+    jest-validate "^27.3.1"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
+    slash "^3.0.0"
+
+jest-runner@^27.2.2, jest-runner@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.3.1.tgz#1d594dcbf3bd8600a7e839e790384559eaf96e3e"
+  integrity sha512-r4W6kBn6sPr3TBwQNmqE94mPlYVn7fLBseeJfo4E2uCTmAyDFm2O5DYAQAFP7Q3YfiA/bMwg8TVsciP7k0xOww==
+  dependencies:
+    "@jest/console" "^27.3.1"
+    "@jest/environment" "^27.3.1"
+    "@jest/test-result" "^27.3.1"
+    "@jest/transform" "^27.3.1"
+    "@jest/types" "^27.2.5"
     "@types/node" "*"
     chalk "^4.0.0"
     emittery "^0.8.1"
     exit "^0.1.2"
     graceful-fs "^4.2.4"
     jest-docblock "^27.0.6"
-    jest-environment-jsdom "^27.1.1"
-    jest-environment-node "^27.1.1"
-    jest-haste-map "^27.1.1"
-    jest-leak-detector "^27.1.1"
-    jest-message-util "^27.1.1"
-    jest-resolve "^27.1.1"
-    jest-runtime "^27.1.1"
-    jest-util "^27.1.1"
-    jest-worker "^27.1.1"
+    jest-environment-jsdom "^27.3.1"
+    jest-environment-node "^27.3.1"
+    jest-haste-map "^27.3.1"
+    jest-leak-detector "^27.3.1"
+    jest-message-util "^27.3.1"
+    jest-resolve "^27.3.1"
+    jest-runtime "^27.3.1"
+    jest-util "^27.3.1"
+    jest-worker "^27.3.1"
     source-map-support "^0.5.6"
     throat "^6.0.1"
 
-jest-runtime@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.1.1.tgz#bd0a0958a11c2f7d94d2e5f6f71864ad1c65fe44"
-  integrity sha512-FEwy+tSzmsvuKaQpyYsUyk31KG5vMmA2r2BSTHgv0yNfcooQdm2Ke91LM9Ud8D3xz8CLDHJWAI24haMFTwrsPg==
+jest-runtime@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.3.1.tgz#80fa32eb85fe5af575865ddf379874777ee993d7"
+  integrity sha512-qtO6VxPbS8umqhEDpjA4pqTkKQ1Hy4ZSi9mDVeE9Za7LKBo2LdW2jmT+Iod3XFaJqINikZQsn2wEi0j9wPRbLg==
   dependencies:
-    "@jest/console" "^27.1.1"
-    "@jest/environment" "^27.1.1"
-    "@jest/fake-timers" "^27.1.1"
-    "@jest/globals" "^27.1.1"
+    "@jest/console" "^27.3.1"
+    "@jest/environment" "^27.3.1"
+    "@jest/globals" "^27.3.1"
     "@jest/source-map" "^27.0.6"
-    "@jest/test-result" "^27.1.1"
-    "@jest/transform" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/test-result" "^27.3.1"
+    "@jest/transform" "^27.3.1"
+    "@jest/types" "^27.2.5"
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
     cjs-module-lexer "^1.0.0"
@@ -9771,17 +9281,17 @@ jest-runtime@^27.1.1:
     exit "^0.1.2"
     glob "^7.1.3"
     graceful-fs "^4.2.4"
-    jest-haste-map "^27.1.1"
-    jest-message-util "^27.1.1"
-    jest-mock "^27.1.1"
+    jest-haste-map "^27.3.1"
+    jest-message-util "^27.3.1"
+    jest-mock "^27.3.0"
     jest-regex-util "^27.0.6"
-    jest-resolve "^27.1.1"
-    jest-snapshot "^27.1.1"
-    jest-util "^27.1.1"
-    jest-validate "^27.1.1"
+    jest-resolve "^27.3.1"
+    jest-snapshot "^27.3.1"
+    jest-util "^27.3.1"
+    jest-validate "^27.3.1"
     slash "^3.0.0"
     strip-bom "^4.0.0"
-    yargs "^16.0.3"
+    yargs "^16.2.0"
 
 jest-serializer@^27.0.6:
   version "27.0.6"
@@ -9791,10 +9301,10 @@ jest-serializer@^27.0.6:
     "@types/node" "*"
     graceful-fs "^4.2.4"
 
-jest-snapshot@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.1.1.tgz#3b816e0ca4352fbbd1db48dc692e3d9641d2531b"
-  integrity sha512-Wi3QGiuRFo3lU+EbQmZnBOks0CJyAMPHvYoG7iJk00Do10jeOyuOEO0Jfoaoun8+8TDv+Nzl7Aswir/IK9+1jg==
+jest-snapshot@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.3.1.tgz#1da5c0712a252d70917d46c037054f5918c49ee4"
+  integrity sha512-APZyBvSgQgOT0XumwfFu7X3G5elj6TGhCBLbBdn3R1IzYustPGPE38F51dBWMQ8hRXa9je0vAdeVDtqHLvB6lg==
   dependencies:
     "@babel/core" "^7.7.2"
     "@babel/generator" "^7.7.2"
@@ -9802,31 +9312,31 @@ jest-snapshot@^27.1.1:
     "@babel/plugin-syntax-typescript" "^7.7.2"
     "@babel/traverse" "^7.7.2"
     "@babel/types" "^7.0.0"
-    "@jest/transform" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/transform" "^27.3.1"
+    "@jest/types" "^27.2.5"
     "@types/babel__traverse" "^7.0.4"
     "@types/prettier" "^2.1.5"
     babel-preset-current-node-syntax "^1.0.0"
     chalk "^4.0.0"
-    expect "^27.1.1"
+    expect "^27.3.1"
     graceful-fs "^4.2.4"
-    jest-diff "^27.1.1"
-    jest-get-type "^27.0.6"
-    jest-haste-map "^27.1.1"
-    jest-matcher-utils "^27.1.1"
-    jest-message-util "^27.1.1"
-    jest-resolve "^27.1.1"
-    jest-util "^27.1.1"
+    jest-diff "^27.3.1"
+    jest-get-type "^27.3.1"
+    jest-haste-map "^27.3.1"
+    jest-matcher-utils "^27.3.1"
+    jest-message-util "^27.3.1"
+    jest-resolve "^27.3.1"
+    jest-util "^27.3.1"
     natural-compare "^1.4.0"
-    pretty-format "^27.1.1"
+    pretty-format "^27.3.1"
     semver "^7.3.2"
 
-jest-util@27.0.6:
-  version "27.0.6"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.0.6.tgz#e8e04eec159de2f4d5f57f795df9cdc091e50297"
-  integrity sha512-1JjlaIh+C65H/F7D11GNkGDDZtDfMEM8EBXsvd+l/cxtgQ6QhxuloOaiayt89DxUvDarbVhqI98HhgrM1yliFQ==
+jest-util@27.2.0:
+  version "27.2.0"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.2.0.tgz#bfccb85cfafae752257319e825a5b8d4ada470dc"
+  integrity sha512-T5ZJCNeFpqcLBpx+Hl9r9KoxBCUqeWlJ1Htli+vryigZVJ1vuLB9j35grEBASp4R13KFkV7jM52bBGnArpJN6A==
   dependencies:
-    "@jest/types" "^27.0.6"
+    "@jest/types" "^27.1.1"
     "@types/node" "*"
     chalk "^4.0.0"
     graceful-fs "^4.2.4"
@@ -9845,41 +9355,41 @@ jest-util@^27.0.0, jest-util@^27.0.2:
     is-ci "^3.0.0"
     picomatch "^2.2.3"
 
-jest-util@^27.0.6, jest-util@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.1.1.tgz#2b06db1391d779ec2bd406ab3690ddc56ac728b9"
-  integrity sha512-zf9nEbrASWn2mC/L91nNb0K+GkhFvi4MP6XJG2HqnHzHvLYcs7ou/In68xYU1i1dSkJlrWcYfWXQE8nVR+nbOA==
+jest-util@^27.2.0, jest-util@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.3.1.tgz#a58cdc7b6c8a560caac9ed6bdfc4e4ff23f80429"
+  integrity sha512-8fg+ifEH3GDryLQf/eKZck1DEs2YuVPBCMOaHQxVVLmQwl/CDhWzrvChTX4efLZxGrw+AA0mSXv78cyytBt/uw==
   dependencies:
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
     "@types/node" "*"
     chalk "^4.0.0"
+    ci-info "^3.2.0"
     graceful-fs "^4.2.4"
-    is-ci "^3.0.0"
     picomatch "^2.2.3"
 
-jest-validate@^27.0.6, jest-validate@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.1.1.tgz#0783733af02c988d503995fc0a07bbdc58c7dd50"
-  integrity sha512-N5Er5FKav/8m2dJwn7BGnZwnoD1BSc8jx5T+diG2OvyeugvZDhPeAt5DrNaGkkaKCrSUvuE7A5E4uHyT7Vj0Mw==
+jest-validate@^27.2.2, jest-validate@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.3.1.tgz#3a395d61a19cd13ae9054af8cdaf299116ef8a24"
+  integrity sha512-3H0XCHDFLA9uDII67Bwi1Vy7AqwA5HqEEjyy934lgVhtJ3eisw6ShOF1MDmRPspyikef5MyExvIm0/TuLzZ86Q==
   dependencies:
-    "@jest/types" "^27.1.1"
+    "@jest/types" "^27.2.5"
     camelcase "^6.2.0"
     chalk "^4.0.0"
-    jest-get-type "^27.0.6"
+    jest-get-type "^27.3.1"
     leven "^3.1.0"
-    pretty-format "^27.1.1"
+    pretty-format "^27.3.1"
 
-jest-watcher@^27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.1.1.tgz#a8147e18703b5d753ada4b287451f2daf40f4118"
-  integrity sha512-XQzyHbxziDe+lZM6Dzs40fEt4q9akOGwitJnxQasJ9WG0bv3JGiRlsBgjw13znGapeMtFaEsyhL0Cl04IbaoWQ==
+jest-watcher@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.3.1.tgz#ba5e0bc6aa843612b54ddb7f009d1cbff7e05f3e"
+  integrity sha512-9/xbV6chABsGHWh9yPaAGYVVKurWoP3ZMCv6h+O1v9/+pkOroigs6WzZ0e9gLP/njokUwM7yQhr01LKJVMkaZA==
   dependencies:
-    "@jest/test-result" "^27.1.1"
-    "@jest/types" "^27.1.1"
+    "@jest/test-result" "^27.3.1"
+    "@jest/types" "^27.2.5"
     "@types/node" "*"
     ansi-escapes "^4.2.1"
     chalk "^4.0.0"
-    jest-util "^27.1.1"
+    jest-util "^27.3.1"
     string-length "^4.0.1"
 
 jest-worker@^27.0.2:
@@ -9891,7 +9401,7 @@ jest-worker@^27.0.2:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest-worker@^27.0.6, jest-worker@^27.1.1:
+jest-worker@^27.0.6:
   version "27.1.1"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.1.1.tgz#eb5f05c4657fdcb702c36c48b20d785bd4599378"
   integrity sha512-XJKCL7tu+362IUYTWvw8+3S75U7qMiYiRU6u5yqscB48bTvzwN6i8L/7wVTXiFLwkRsxARNM7TISnTvcgv9hxA==
@@ -9900,21 +9410,30 @@ jest-worker@^27.0.6, jest-worker@^27.1.1:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jest@27.1.1:
-  version "27.1.1"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-27.1.1.tgz#49f0497fa0fb07dc78898318cc1b737b5fbf72d8"
-  integrity sha512-LFTEZOhoZNR/2DQM3OCaK5xC6c55c1OWhYh0njRsoHX0qd6x4nkcgenkSH0JKjsAGMTmmJAoL7/oqYHMfwhruA==
+jest-worker@^27.2.2, jest-worker@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.3.1.tgz#0def7feae5b8042be38479799aeb7b5facac24b2"
+  integrity sha512-ks3WCzsiZaOPJl/oMsDjaf0TRiSv7ctNgs0FqRr2nARsovz6AWWy4oLElwcquGSz692DzgZQrCLScPNs5YlC4g==
   dependencies:
-    "@jest/core" "^27.1.1"
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
+
+jest@27.2.3:
+  version "27.2.3"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-27.2.3.tgz#9c2af9ce874a3eb202f83d92fbc1cc61ccc73248"
+  integrity sha512-r4ggA29J5xUg93DpvbsX+AXlFMWE3hZ5Y6BfgTl8PJvWelVezNPkmrsixuGoDBTHTCwScRSH0O4wsoeUgLie2w==
+  dependencies:
+    "@jest/core" "^27.2.3"
     import-local "^3.0.2"
-    jest-cli "^27.1.1"
+    jest-cli "^27.2.3"
 
 js-sha256@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.9.0.tgz#0b89ac166583e91ef9123644bd3c5334ce9d0966"
   integrity sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA==
 
-"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -10158,13 +9677,6 @@ leven@^3.1.0:
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
-levenary@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
-  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
-  dependencies:
-    leven "^3.1.0"
-
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -10282,7 +9794,7 @@ loader-utils@2.0.0, loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
-loader-utils@^1.0.2, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -10351,6 +9863,11 @@ lodash.once@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
+lodash.orderby@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.orderby/-/lodash.orderby-4.6.0.tgz#e697f04ce5d78522f54d9338b32b81a3393e4eb3"
+  integrity sha1-5pfwTOXXhSL1TZM4syuBozk+TrM=
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -10412,13 +9929,6 @@ loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0"
   integrity sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ==
 
-loose-envify@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
-  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
 lowercase-keys@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
@@ -10647,6 +10157,14 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.0, micromatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.2.3"
+
 micromatch@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
@@ -10655,14 +10173,6 @@ micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.0.5"
 
-micromatch@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
-  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.2.3"
-
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -10960,6 +10470,11 @@ nanoid@^3.1.23:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
   integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
 
+nanoid@^3.1.30:
+  version "3.1.30"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
+  integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -11001,10 +10516,10 @@ neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-ng-packagr@12.2.1:
-  version "12.2.1"
-  resolved "https://registry.yarnpkg.com/ng-packagr/-/ng-packagr-12.2.1.tgz#4a68f4bbee3394d7afcdd9fdf06794b219915bb1"
-  integrity sha512-awX/sRmURikw6YjcDzrz2+/SJ4yOr1MTgv4OitSeMXfwBlG5zJLN36mLQn49fYBFecBV+lcAosh0OYJuAueU5g==
+ng-packagr@12.2.5:
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/ng-packagr/-/ng-packagr-12.2.5.tgz#94e965102bdeca672e942f9b7b5e203f9abe2262"
+  integrity sha512-iNxX8lgAMNYAfXDBJomD7SeFpG47uoyKkGCWQo78AlFS4q3fGiFEIRrX842MTuASshYVAqMaBkaKPOajPx7VXw==
   dependencies:
     "@rollup/plugin-commonjs" "^20.0.0"
     "@rollup/plugin-json" "^4.1.0"
@@ -11016,7 +10531,7 @@ ng-packagr@12.2.1:
     chokidar "^3.5.1"
     commander "^8.0.0"
     dependency-graph "^0.11.0"
-    esbuild "^0.12.15"
+    esbuild-wasm "^0.12.15"
     find-cache-dir "^3.3.1"
     glob "^7.1.6"
     injection-js "^2.4.0"
@@ -11032,6 +10547,8 @@ ng-packagr@12.2.1:
     rxjs "^6.5.0"
     sass "^1.32.8"
     stylus "^0.54.8"
+  optionalDependencies:
+    esbuild "^0.12.15"
 
 ngx-color-picker@^11.0.0:
   version "11.0.0"
@@ -11067,7 +10584,7 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-node-addon-api@^3.0.0:
+node-addon-api@^3.0.0, node-addon-api@^3.0.2:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.2.1.tgz#81325e0a2117789c0128dab65e7e38f07ceba161"
   integrity sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==
@@ -11082,6 +10599,11 @@ node-gyp-build@^4.2.2:
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.2.3.tgz#ce6277f853835f718829efb47db20f3e4d9c4739"
   integrity sha512-MN6ZpzmfNCRM+3t57PTJHgHyw/h4OWnZ6mR8P5j/uZtqQr46RRuDE/P+g3n0YR/AiYXeWixZZzaip77gdICfRg==
 
+node-gyp-build@^4.2.3:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.3.0.tgz#9f256b03e5826150be39c764bf51e993946d71a3"
+  integrity sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==
+
 node-gyp@^7.1.0:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-7.1.2.tgz#21a810aebb187120251c3bcec979af1587b188ae"
@@ -11357,6 +10879,13 @@ nx@12.9.0:
   dependencies:
     "@nrwl/cli" "*"
 
+nx@13.1.3:
+  version "13.1.3"
+  resolved "https://registry.yarnpkg.com/nx/-/nx-13.1.3.tgz#0b2db9b5bc87a47fb3a90014d2b2abb44f568851"
+  integrity sha512-clM0NQhQKYkqcNz2E3uYRMLwhp2L/9dBhJhQi9XBX4IAyA2gWAomhRIlLm5Xxg3g4h1xwSpP3eJ5t89VikY8Pw==
+  dependencies:
+    "@nrwl/cli" "*"
+
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
@@ -11619,11 +11148,6 @@ p-defer@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
   integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
 
-p-each-series@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.1.0.tgz#961c8dd3f195ea96c747e636b262b800a6b1af48"
-  integrity sha512-ZuRs1miPT4HrjFa+9fRfOFXxGJfORgelKV9f9nNOWw2gl6gVsRaVDOQP0+MI0G0wGKns1Yacsu0GjOFbTK0JFQ==
-
 p-event@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-event/-/p-event-1.3.0.tgz#8e6b4f4f65c72bc5b6fe28b75eda874f96a4a085"
@@ -11953,6 +11477,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
@@ -12247,7 +11776,7 @@ postcss-image-set-function@^3.0.1:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
-postcss-import@14.0.2:
+postcss-import@14.0.2, postcss-import@^14.0.2:
   version "14.0.2"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.0.2.tgz#60eff77e6be92e7b67fe469ec797d9424cae1aa1"
   integrity sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g==
@@ -12674,6 +12203,15 @@ postcss@^8.2.4:
     nanoid "^3.1.22"
     source-map "^0.6.1"
 
+postcss@^8.3.9:
+  version "8.3.11"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
+  integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
+  dependencies:
+    nanoid "^3.1.30"
+    picocolors "^1.0.0"
+    source-map-js "^0.6.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -12721,7 +12259,7 @@ pretty-format@^27.0.0, pretty-format@^27.0.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-format@^27.0.6, pretty-format@^27.1.1:
+pretty-format@^27.1.1:
   version "27.1.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.1.1.tgz#cbaf9ec6cd7cfc3141478b6f6293c0ccdbe968e0"
   integrity sha512-zdBi/xlstKJL42UH7goQti5Hip/B415w1Mfj+WWWYMBylAYtKESnXGUtVVcMVid9ReVjypCotUV6CEevYPHv2g==
@@ -12731,6 +12269,16 @@ pretty-format@^27.0.6, pretty-format@^27.1.1:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.2.2, pretty-format@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.3.1.tgz#7e9486365ccdd4a502061fa761d3ab9ca1b78df5"
+  integrity sha512-DR/c+pvFc52nLimLROYjnXPtolawm+uWDxr4FjuLDLUn+ktWnSN851KoHwHzzqq6rfCOjkzN8FLgDrSub6UDuA==
+  dependencies:
+    "@jest/types" "^27.2.5"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-quick@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/pretty-quick/-/pretty-quick-3.1.1.tgz#93ca4e2dd38cc4e970e3f54a0ead317a25454688"
@@ -13231,6 +12779,11 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
+resolve.exports@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
+  integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
+
 resolve@1.20.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
@@ -13509,7 +13062,7 @@ semver-regex@^3.1.2:
   resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-3.1.2.tgz#34b4c0d361eef262e07199dbef316d0f2ab11807"
   integrity sha512-bXWyL6EAKOJa81XG1OZ/Yyuq+oT0b2YLlxx7c+mrdYPaPbnj6WgVULXhinMIeZGufuUBu/eVRqXEhiv4imfwxA==
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -14154,6 +13707,13 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
+strip-ansi@6.0.0, strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  dependencies:
+    ansi-regex "^5.0.0"
+
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -14175,13 +13735,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
-  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
-  dependencies:
-    ansi-regex "^5.0.0"
-
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -14691,16 +14244,15 @@ ts-jest@^27.0.0:
     semver "7.x"
     yargs-parser "20.x"
 
-ts-loader@5.4.5:
-  version "5.4.5"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-5.4.5.tgz#a0c1f034b017a9344cef0961bfd97cc192492b8b"
-  integrity sha512-XYsjfnRQCBum9AMRZpk2rTYSVpdZBpZK+kDh0TeT3kxmQNBDVIeUjdPjY5RZry4eIAb8XHc4gYSUiUWPYvzSRw==
+ts-loader@^9.2.6:
+  version "9.2.6"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.2.6.tgz#9937c4dd0a1e3dbbb5e433f8102a6601c6615d74"
+  integrity sha512-QMTC4UFzHmu9wU2VHZEmWWE9cUajjfcdcws+Gh7FhiO+Dy0RnR1bNz0YCHqhI0yRowCE9arVnNxYHqELOy9Hjw==
   dependencies:
-    chalk "^2.3.0"
-    enhanced-resolve "^4.0.0"
-    loader-utils "^1.0.2"
-    micromatch "^3.1.4"
-    semver "^5.0.1"
+    chalk "^4.1.0"
+    enhanced-resolve "^5.0.0"
+    micromatch "^4.0.0"
+    semver "^7.3.4"
 
 ts-node@10.2.1:
   version "10.2.1"
@@ -15095,6 +14647,15 @@ v8-to-istanbul@^8.0.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
+v8-to-istanbul@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.0.tgz#0aeb763894f1a0a1676adf8a8b7612a38902446c"
+  integrity sha512-/PRhfd8aTNp9Ggr62HPzXg2XasNFGy5PBt0Rp04du7/8GNNSgxFL6WBTkgMKSL9bFjH+8kKEG3f37FmxiTqUUA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -15291,10 +14852,10 @@ webpack-merge@5.8.0:
     clone-deep "^4.0.1"
     wildcard "^2.0.0"
 
-webpack-node-externals@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-1.7.2.tgz#6e1ee79ac67c070402ba700ef033a9b8d52ac4e3"
-  integrity sha512-ajerHZ+BJKeCLviLUUmnyd5B4RavLF76uv3cs6KNuO8W+HuQaEs0y0L7o40NQxdPy5w0pcv8Ew7yPUAQG0UdCg==
+webpack-node-externals@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz#1a3407c158d547a9feb4229a9e3385b7b60c9917"
+  integrity sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==
 
 webpack-sources@^1.2.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
   version "1.4.3"
@@ -15663,7 +15224,7 @@ yargs@^13.3.2:
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
 
-yargs@^16.0.3, yargs@^16.2.0:
+yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
   integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==