From 46e016d55e8fa179b3dca9832502c7273e525efd Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Thu, 28 Mar 2024 12:27:36 +0200
Subject: [PATCH 01/21] RED-8748 - extracted file preview header logic in
 another component

---
 .../annotation-card.component.ts              |   2 -
 .../file-header/file-header.component.html    |  86 +++++++
 .../file-header/file-header.component.scss    |   9 +
 .../file-header/file-header.component.ts      | 217 ++++++++++++++++++
 ...component-management-dialog.component.html |   0
 ...component-management-dialog.component.scss |   0
 ...d-component-management-dialog.component.ts |  43 ++--
 .../file-preview-screen.component.html        |  91 +-------
 .../file-preview-screen.component.scss        |  10 -
 .../file-preview-screen.component.ts          | 178 +-------------
 .../file-preview/file-preview.module.ts       |   2 +
 .../services/file-preview-dialog.service.ts   |  14 +-
 .../services/pdf-proxy.service.ts             |   8 +-
 apps/red-ui/src/assets/config/config.json     |  10 +-
 14 files changed, 359 insertions(+), 311 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.scss
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
 rename apps/red-ui/src/app/modules/file-preview/dialogs/{ => docu-mine}/structured-component-management-dialog/structured-component-management-dialog.component.html (100%)
 rename apps/red-ui/src/app/modules/file-preview/dialogs/{ => docu-mine}/structured-component-management-dialog/structured-component-management-dialog.component.scss (100%)
 rename apps/red-ui/src/app/modules/file-preview/dialogs/{ => docu-mine}/structured-component-management-dialog/structured-component-management-dialog.component.ts (89%)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
index 322593075..8fb71348f 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
@@ -3,8 +3,6 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { annotationTypesTranslations } from '@translations/annotation-types-translations';
 import { Roles } from '@users/roles';
-import { ImageCategory } from '../../utils/constants';
-import { ManualRedactionTypes } from '@red/domain';
 
 @Component({
     selector: 'redaction-annotation-card',
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html
new file mode 100644
index 000000000..c351dfd24
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html
@@ -0,0 +1,86 @@
+<div class="page-header">
+    <div class="flex flex-1">
+        <redaction-view-switch></redaction-view-switch>
+    </div>
+
+    <!-- TODO: mode this file preview header to a separate component-->
+    <div #actionsWrapper class="flex-2 actions-container">
+        <redaction-processing-indicator [file]="file" class="mr-16"></redaction-processing-indicator>
+
+        <redaction-user-management></redaction-user-management>
+
+        <ng-container *ngIf="permissionsService.isApprover(state.dossier()) && !!file.lastReviewer">
+            <div class="vertical-line"></div>
+
+            <div class="all-caps-label mr-16 ml-8 label">
+                {{ 'file-preview.last-assignee' | translate }}
+            </div>
+
+            <iqser-initials-avatar [user]="lastAssignee()" [withName]="true"></iqser-initials-avatar>
+        </ng-container>
+
+        <div class="vertical-line"></div>
+
+        <!-- TODO: mode these actions to a separate component -->
+        <iqser-circle-button
+            (action)="openComponentLogView()"
+            *allow="roles.getRss"
+            [attr.help-mode-key]="'editor_scm'"
+            [tooltip]="'file-preview.open-rss-view' | translate"
+            class="ml-8"
+            icon="red:extract"
+            tooltipPosition="below"
+            iqserDisableStopPropagation
+        ></iqser-circle-button>
+
+        <redaction-file-actions
+            [dossier]="state.dossier()"
+            [file]="file"
+            [helpModeKeyPrefix]="'editor'"
+            [minWidth]="width"
+            type="file-preview"
+            iqserDisableStopPropagation
+        ></redaction-file-actions>
+
+        <iqser-circle-button
+            (action)="getTables()"
+            *allow="roles.getTables"
+            [icon]="'red:csv'"
+            [tooltip]="'file-preview.get-tables' | translate"
+            class="ml-2"
+            iqserDisableStopPropagation
+        ></iqser-circle-button>
+
+        <iqser-circle-button
+            (action)="toggleFullScreen()"
+            [attr.help-mode-key]="'editor_full_screen'"
+            [icon]="fullScreen ? 'red:exit-fullscreen' : 'red:fullscreen'"
+            [tooltip]="'file-preview.fullscreen' | translate"
+            class="ml-2"
+            iqserDisableStopPropagation
+        ></iqser-circle-button>
+
+        <!-- Dev Mode Features-->
+        <iqser-circle-button
+            (action)="downloadOriginalFile(file)"
+            *ngIf="isIqserDevMode"
+            [tooltip]="'file-preview.download-original-file' | translate"
+            [type]="circleButtonTypes.primary"
+            class="ml-8"
+            icon="iqser:download"
+            iqserDisableStopPropagation
+        ></iqser-circle-button>
+
+        <!-- End Dev Mode Features-->
+
+        <iqser-circle-button
+            *ngIf="!fullScreen"
+            [attr.help-mode-key]="'editor_close'"
+            [routerLink]="state.dossier().routerLink"
+            [tooltip]="'common.close' | translate"
+            class="ml-8"
+            icon="iqser:close"
+            iqserDisableStopPropagation
+        ></iqser-circle-button>
+    </div>
+</div>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.scss b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.scss
new file mode 100644
index 000000000..cc61e02a9
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.scss
@@ -0,0 +1,9 @@
+.page-header {
+    max-width: 100vw;
+}
+
+.actions-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
new file mode 100644
index 000000000..c023dfa27
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
@@ -0,0 +1,217 @@
+import {
+    AfterViewInit,
+    ChangeDetectorRef,
+    Component,
+    computed,
+    ElementRef,
+    HostListener,
+    Input,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    ViewChild,
+} from '@angular/core';
+import { Roles } from '@users/roles';
+import { CircleButtonTypes, HelpModeService, IqserDialog, IqserPermissionsService, isIqserDevMode, LoadingService } from '@iqser/common-ui';
+import { Bind, Debounce, OnDetach } from '@iqser/common-ui/lib/utils';
+import { File } from '@red/domain';
+import { PermissionsService } from '@services/permissions.service';
+import { FilePreviewStateService } from '../../services/file-preview-state.service';
+import { UserPreferenceService } from '@users/user-preference.service';
+import JSZip from 'jszip';
+import { saveAs } from 'file-saver';
+import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
+import { AnnotationDrawService } from '../../../pdf-viewer/services/annotation-draw.service';
+import { TablesService } from '../../services/tables.service';
+import { ALL_HOTKEYS } from '../../utils/constants';
+import { Router } from '@angular/router';
+import { AnnotationActionsService } from '../../services/annotation-actions.service';
+import { FileDataService } from '../../services/file-data.service';
+import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
+import { MatDialog } from '@angular/material/dialog';
+import { download } from '@utils/file-download-utils';
+import { firstValueFrom } from 'rxjs';
+import { FileManagementService } from '@services/files/file-management.service';
+import { StructuredComponentManagementDialogComponent } from '../../dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component';
+
+@Component({
+    selector: 'redaction-file-header',
+    templateUrl: './file-header.component.html',
+    styleUrls: ['/file-header.component.scss'],
+})
+export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnDestroy {
+    @ViewChild('actionsWrapper', { static: false }) private readonly _actionsWrapper: ElementRef;
+    @Input() file: File;
+
+    protected readonly roles = Roles;
+    protected readonly circleButtonTypes = CircleButtonTypes;
+
+    readonly lastAssignee = computed(() => this.getLastAssignee());
+    readonly isIqserDevMode = isIqserDevMode();
+    width: number;
+    fullScreen = false;
+
+    constructor(
+        private readonly _changeRef: ChangeDetectorRef,
+        private readonly _iqserPermissionsService: IqserPermissionsService,
+        private readonly _userPreferenceService: UserPreferenceService,
+        private readonly _iqserDialog: IqserDialog,
+        private readonly _loadingService: LoadingService,
+        private readonly _pdf: PdfViewer,
+        private readonly _annotationDrawService: AnnotationDrawService,
+        private readonly _tablesService: TablesService,
+        private readonly _router: Router,
+        private readonly _ngZone: NgZone,
+        private readonly _helpModeService: HelpModeService,
+        private readonly _annotationActionsService: AnnotationActionsService,
+        private readonly _fileDataService: FileDataService,
+        private readonly _annotationManager: REDAnnotationManager,
+        private readonly _dialog: MatDialog,
+        private readonly _fileManagementService: FileManagementService,
+        readonly state: FilePreviewStateService,
+        readonly permissionsService: PermissionsService,
+    ) {}
+
+    ngOnInit() {
+        this.#openComponentLogDialogIfDefault();
+        document.documentElement.addEventListener('fullscreenchange', this.fullscreenListener);
+    }
+
+    ngAfterViewInit() {
+        const _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+            this._updateItemWidth(entries[0]);
+        });
+        _observer.observe(this._actionsWrapper.nativeElement);
+    }
+
+    ngOnDetach() {
+        document.documentElement.removeEventListener('fullscreenchange', this.fullscreenListener);
+    }
+
+    ngOnDestroy() {
+        document.documentElement.removeEventListener('fullscreenchange', this.fullscreenListener);
+    }
+
+    async downloadOriginalFile({ cacheIdentifier, dossierId, fileId, filename }: File) {
+        const originalFile = this._fileManagementService.downloadOriginal(dossierId, fileId, 'response', cacheIdentifier);
+        download(await firstValueFrom(originalFile), filename);
+    }
+
+    getLastAssignee() {
+        const { isApproved, lastReviewer, lastApprover } = this.state.file();
+        const isRss = this._iqserPermissionsService.has(this.roles.getRss);
+        return isApproved ? (isRss ? lastReviewer : lastApprover) : lastReviewer;
+    }
+
+    openComponentLogView() {
+        const data = { file: this.state.file(), dictionaries: this.state.dictionaries };
+        this._iqserDialog.openDefault(StructuredComponentManagementDialogComponent, { data });
+    }
+
+    async getTables() {
+        this._loadingService.start();
+
+        const currentPage = this._pdf.currentPage();
+        const tables = await this._tablesService.get(this.state.dossierId, this.state.fileId, this._pdf.currentPage());
+        await this._annotationDrawService.drawTables(tables, currentPage, this.state.dossierTemplateId);
+
+        const filename = this.state.file().filename;
+        const zip = new JSZip();
+
+        tables.forEach((t, index) => {
+            const blob = new Blob([atob(t.csvAsBytes)], {
+                type: 'text/csv;charset=utf-8',
+            });
+            zip.file(filename + '_page' + currentPage + '_table' + (index + 1) + '.csv', blob);
+        });
+
+        saveAs(await zip.generateAsync({ type: 'blob' }), filename + '_tables.zip');
+
+        this._loadingService.stop();
+    }
+
+    toggleFullScreen() {
+        this.fullScreen = !this.fullScreen;
+        if (this.fullScreen) {
+            this.#openFullScreen();
+        } else {
+            this.closeFullScreen();
+        }
+    }
+
+    closeFullScreen() {
+        if (!!document.fullscreenElement && document.exitFullscreen) {
+            document.exitFullscreen().then();
+        }
+    }
+
+    @Bind()
+    fullscreenListener() {
+        if (!document.fullscreenElement) {
+            this.fullScreen = false;
+        }
+    }
+
+    @HostListener('document:keyup', ['$event'])
+    handleKeyEvent($event: KeyboardEvent) {
+        if (this._router.url.indexOf('/file/') < 0) {
+            return;
+        }
+
+        if (!ALL_HOTKEYS.includes($event.key) || this._dialog.openDialogs.length) {
+            return;
+        }
+
+        if (['Escape'].includes($event.key)) {
+            $event.preventDefault();
+            if (this._annotationManager.resizingAnnotationId) {
+                const resizedAnnotation = this._fileDataService
+                    .annotations()
+                    .find(annotation => annotation.id === this._annotationManager.resizingAnnotationId);
+                this._annotationActionsService.cancelResize(resizedAnnotation).then();
+            }
+            this.fullScreen = false;
+            this.closeFullScreen();
+            this._changeRef.markForCheck();
+        }
+
+        if (!$event.ctrlKey && !$event.metaKey && ['f', 'F'].includes($event.key)) {
+            // if you type in an input, don't toggle full-screen
+            if ($event.target instanceof HTMLInputElement || $event.target instanceof HTMLTextAreaElement) {
+                return;
+            }
+            this.toggleFullScreen();
+            return;
+        }
+
+        if (['h', 'H'].includes($event.key)) {
+            if ($event.target instanceof HTMLInputElement || $event.target instanceof HTMLTextAreaElement) {
+                return;
+            }
+            this._ngZone.run(() => {
+                window.focus();
+                this._helpModeService.activateHelpMode(false);
+            });
+            return;
+        }
+    }
+
+    #openFullScreen() {
+        const documentElement = document.documentElement;
+        if (documentElement.requestFullscreen) {
+            documentElement.requestFullscreen().then();
+        }
+    }
+
+    #openComponentLogDialogIfDefault() {
+        if (this.permissionsService.canViewRssDialog() && this._userPreferenceService.getOpenScmDialogByDefault()) {
+            this.openComponentLogView();
+        }
+    }
+
+    @Debounce(30)
+    private _updateItemWidth(entry: ResizeObserverEntry): void {
+        this.width = entry.contentRect.width;
+        this._changeRef.detectChanges();
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.html
rename to apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.html
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.scss
rename to apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.scss
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.ts
similarity index 89%
rename from apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.ts
rename to apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.ts
index f8193d7c2..a656a8cf1 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/structured-component-management-dialog/structured-component-management-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.ts
@@ -1,21 +1,30 @@
-import { KeyValuePipe, NgForOf, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Inject, OnInit, signal } from '@angular/core';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
-import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
-import { BaseDialogComponent, CircleButtonComponent, EditableInputComponent, IconButtonComponent } from '@iqser/common-ui';
-import { TranslateModule } from '@ngx-translate/core';
 import { ComponentLogEntry, Dictionary, IFile, WorkflowFileStatuses } from '@red/domain';
-import { FilesMapService } from '@services/files/files-map.service';
-import { UserPreferenceService } from '@users/user-preference.service';
-import { firstValueFrom } from 'rxjs';
+import { ChangeDetectionStrategy, Component, Inject, OnInit, signal } from '@angular/core';
+import { KeyValuePipe, NgForOf, NgIf } from '@angular/common';
+import {
+    CircleButtonComponent,
+    EditableInputComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDialogComponent,
+    LoadingService,
+} from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
 import { ComponentLogService } from '@services/files/component-log.service';
+import { UserPreferenceService } from '@users/user-preference.service';
+import { FilesMapService } from '@services/files/files-map.service';
+import { firstValueFrom } from 'rxjs';
 
 interface ScmData {
     file: IFile;
     dictionaries: Dictionary[];
 }
 
+interface ScmResult {}
+
 @Component({
     templateUrl: './structured-component-management-dialog.component.html',
     styleUrls: ['./structured-component-management-dialog.component.scss'],
@@ -34,18 +43,22 @@ interface ScmData {
         ReplaceNbspPipe,
     ],
 })
-export class StructuredComponentManagementDialogComponent extends BaseDialogComponent implements OnInit {
+export class StructuredComponentManagementDialogComponent
+    extends IqserDialogComponent<StructuredComponentManagementDialogComponent, ScmData, ScmResult>
+    implements OnInit
+{
     readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
     readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
+    readonly iconButtonTypes = IconButtonTypes;
 
     constructor(
-        protected readonly _dialogRef: MatDialogRef<StructuredComponentManagementDialogComponent>,
         private readonly _componentLogService: ComponentLogService,
-        readonly userPreferences: UserPreferenceService,
         private readonly _filesMapService: FilesMapService,
+        private readonly _loadingService: LoadingService,
+        readonly userPreferences: UserPreferenceService,
         @Inject(MAT_DIALOG_DATA) readonly data: ScmData,
     ) {
-        super(_dialogRef);
+        super();
     }
 
     get canEdit() {
@@ -60,8 +73,6 @@ export class StructuredComponentManagementDialogComponent extends BaseDialogComp
         return `value-cell-${index}`;
     }
 
-    originalOrder = (): number => 0;
-
     exportJSON() {
         return firstValueFrom(
             this._componentLogService.exportJSON(this.data.file.dossierTemplateId, this.data.file.dossierId, this.data.file),
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
index 1e4eea900..2e3214931 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
@@ -1,90 +1,5 @@
 <section *ngIf="state.file() as file">
-    <div class="page-header">
-        <div class="flex flex-1">
-            <redaction-view-switch></redaction-view-switch>
-        </div>
-
-        <!-- TODO: mode this file preview header to a separate component-->
-        <div #actionsWrapper class="flex-2 actions-container">
-            <redaction-processing-indicator [file]="file" class="mr-16"></redaction-processing-indicator>
-
-            <redaction-user-management></redaction-user-management>
-
-            <ng-container *ngIf="permissionsService.isApprover(state.dossier()) && !!file.lastReviewer">
-                <div class="vertical-line"></div>
-
-                <div class="all-caps-label mr-16 ml-8 label">
-                    {{ 'file-preview.last-assignee' | translate }}
-                </div>
-
-                <iqser-initials-avatar [user]="lastAssignee()" [withName]="true"></iqser-initials-avatar>
-            </ng-container>
-
-            <div class="vertical-line"></div>
-
-            <!-- TODO: mode these actions to a separate component -->
-            <iqser-circle-button
-                (action)="openComponentLogView()"
-                *allow="roles.getRss"
-                [attr.help-mode-key]="'editor_scm'"
-                [tooltip]="'file-preview.open-rss-view' | translate"
-                class="ml-8"
-                icon="red:extract"
-                tooltipPosition="below"
-                iqserDisableStopPropagation
-            ></iqser-circle-button>
-
-            <redaction-file-actions
-                [dossier]="state.dossier()"
-                [file]="file"
-                [helpModeKeyPrefix]="'editor'"
-                [minWidth]="width"
-                type="file-preview"
-                iqserDisableStopPropagation
-            ></redaction-file-actions>
-
-            <iqser-circle-button
-                (action)="getTables()"
-                *allow="roles.getTables"
-                [icon]="'red:csv'"
-                [tooltip]="'file-preview.get-tables' | translate"
-                class="ml-2"
-                iqserDisableStopPropagation
-            ></iqser-circle-button>
-
-            <iqser-circle-button
-                (action)="toggleFullScreen()"
-                [attr.help-mode-key]="'editor_full_screen'"
-                [icon]="fullScreen ? 'red:exit-fullscreen' : 'red:fullscreen'"
-                [tooltip]="'file-preview.fullscreen' | translate"
-                class="ml-2"
-                iqserDisableStopPropagation
-            ></iqser-circle-button>
-
-            <!-- Dev Mode Features-->
-            <iqser-circle-button
-                (action)="downloadOriginalFile(file)"
-                *ngIf="isIqserDevMode"
-                [tooltip]="'file-preview.download-original-file' | translate"
-                [type]="circleButtonTypes.primary"
-                class="ml-8"
-                icon="iqser:download"
-                iqserDisableStopPropagation
-            ></iqser-circle-button>
-
-            <!-- End Dev Mode Features-->
-
-            <iqser-circle-button
-                *ngIf="!fullScreen"
-                [attr.help-mode-key]="'editor_close'"
-                [routerLink]="state.dossier().routerLink"
-                [tooltip]="'common.close' | translate"
-                class="ml-8"
-                icon="iqser:close"
-                iqserDisableStopPropagation
-            ></iqser-circle-button>
-        </div>
-    </div>
+    <redaction-file-header [file]="file"></redaction-file-header>
 
     <div class="overlay-shadow"></div>
 
@@ -94,7 +9,9 @@
         </div>
 
         <div class="right-container">
-            <redaction-file-preview-right-container [iqserDisableStopPropagation]="state.isEditingReviewer()"></redaction-file-preview-right-container>
+            <redaction-file-preview-right-container
+                [iqserDisableStopPropagation]="state.isEditingReviewer()"
+            ></redaction-file-preview-right-container>
         </div>
     </div>
 </section>
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
index bdae60f2f..55ac580d8 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
@@ -5,16 +5,6 @@
     margin: 0 16px;
 }
 
-.page-header {
-    max-width: 100vw;
-}
-
-.actions-container {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-}
-
 .content-inner {
     position: absolute;
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
index f52cb6fa0..805a9f0e9 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
@@ -1,18 +1,4 @@
-import {
-    AfterViewInit,
-    ChangeDetectorRef,
-    Component,
-    computed,
-    effect,
-    ElementRef,
-    HostListener,
-    NgZone,
-    OnDestroy,
-    OnInit,
-    TemplateRef,
-    ViewChild,
-} from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { ChangeDetectorRef, Component, effect, NgZone, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { ActivatedRouteSnapshot, NavigationExtras, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ComponentCanDeactivate } from '@guards/can-deactivate.guard';
@@ -23,16 +9,13 @@ import {
     CustomError,
     ErrorService,
     getConfig,
-    HelpModeService,
     IConfirmationDialogData,
     IqserDialog,
-    IqserPermissionsService,
-    isIqserDevMode,
     LoadingService,
     Toaster,
 } from '@iqser/common-ui';
 import { copyLocalStorageFiltersValues, FilterService, NestedFilter, processFilters } from '@iqser/common-ui/lib/filtering';
-import { AutoUnsubscribe, Bind, bool, Debounce, List, OnAttach, OnDetach } from '@iqser/common-ui/lib/utils';
+import { AutoUnsubscribe, Bind, bool, List, OnAttach, OnDetach } from '@iqser/common-ui/lib/utils';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { ManualRedactionEntryTypes, ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper';
 import { Dictionary, File, ViewModes } from '@red/domain';
@@ -46,8 +29,6 @@ import { PermissionsService } from '@services/permissions.service';
 import { ReanalysisService } from '@services/reanalysis.service';
 import { Roles } from '@users/roles';
 import { PreferencesKeys, UserPreferenceService } from '@users/user-preference.service';
-import { saveAs } from 'file-saver';
-import JSZip from 'jszip';
 import { NGXLogger } from 'ngx-logger';
 import { combineLatest, first, firstValueFrom, Observable, of, pairwise } from 'rxjs';
 import { catchError, filter, map, startWith, switchMap, tap } from 'rxjs/operators';
@@ -73,36 +54,25 @@ import { ManualRedactionService } from './services/manual-redaction.service';
 import { PdfProxyService } from './services/pdf-proxy.service';
 import { SkippedService } from './services/skipped.service';
 import { StampService } from './services/stamp.service';
-import { TablesService } from './services/tables.service';
 import { ViewModeService } from './services/view-mode.service';
-import { ALL_HOTKEYS } from './utils/constants';
 import { RedactTextData } from './utils/dialog-types';
-import { AnnotationActionsService } from './services/annotation-actions.service';
 
 @Component({
     templateUrl: './file-preview-screen.component.html',
     styleUrls: ['./file-preview-screen.component.scss'],
     providers: filePreviewScreenProviders,
 })
-export class FilePreviewScreenComponent
-    extends AutoUnsubscribe
-    implements AfterViewInit, OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate
-{
+export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate {
     readonly circleButtonTypes = CircleButtonTypes;
     readonly roles = Roles;
-    fullScreen = false;
     readonly fileId = this.state.fileId;
     readonly dossierId = this.state.dossierId;
-    readonly lastAssignee = computed(() => this.getLastAssignee());
-    width: number;
-    readonly isIqserDevMode = isIqserDevMode();
     @ViewChild('annotationFilterTemplate', {
         read: TemplateRef,
         static: false,
     })
     private readonly _filterTemplate: TemplateRef<unknown>;
     #loadAllAnnotationsEnabled = false;
-    @ViewChild('actionsWrapper', { static: false }) private readonly _actionsWrapper: ElementRef;
     readonly #isDocumine = getConfig().IS_DOCUMINE;
 
     constructor(
@@ -112,7 +82,6 @@ export class FilePreviewScreenComponent
         readonly userPreferenceService: UserPreferenceService,
         readonly pdfProxyService: PdfProxyService,
         readonly configService: ConfigService,
-        private readonly _iqserPermissionsService: IqserPermissionsService,
         private readonly _listingService: AnnotationsListingService,
         private readonly _router: Router,
         private readonly _ngZone: NgZone,
@@ -141,11 +110,7 @@ export class FilePreviewScreenComponent
         private readonly _filesService: FilesService,
         private readonly _fileManagementService: FileManagementService,
         private readonly _readableRedactionsService: ReadableRedactionsService,
-        private readonly _helpModeService: HelpModeService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
-        private readonly _dialog: MatDialog,
-        private readonly _tablesService: TablesService,
-        private readonly _annotationActionsService: AnnotationActionsService,
     ) {
         super();
         effect(() => {
@@ -211,12 +176,6 @@ export class FilePreviewScreenComponent
         );
     }
 
-    getLastAssignee() {
-        const { isApproved, lastReviewer, lastApprover } = this.state.file();
-        const isRss = this._iqserPermissionsService.has(this.roles.getRss);
-        return isApproved ? (isRss ? lastReviewer : lastApprover) : lastReviewer;
-    }
-
     deleteEarmarksOnViewChange$() {
         const isChangingFromEarmarksViewMode$ = this._viewModeService.viewMode$.pipe(
             pairwise(),
@@ -293,24 +252,15 @@ export class FilePreviewScreenComponent
         this._viewerHeaderService.resetCompareButtons();
         this._viewerHeaderService.enableLoadAllAnnotations(); // Reset the button state (since the viewer is reused between files)
         super.ngOnDetach();
-        document.documentElement.removeEventListener('fullscreenchange', this.fullscreenListener);
         this.pdf.instance.UI.hotkeys.off('esc');
         this._changeRef.markForCheck();
     }
 
     ngOnDestroy() {
-        document.documentElement.removeEventListener('fullscreenchange', this.fullscreenListener);
         this.pdf.instance.UI.hotkeys.off('esc');
         super.ngOnDestroy();
     }
 
-    @Bind()
-    fullscreenListener() {
-        if (!document.fullscreenElement) {
-            this.fullScreen = false;
-        }
-    }
-
     @Bind()
     handleDeleteRectangleOnEsc($event: KeyboardEvent) {
         $event.preventDefault();
@@ -355,19 +305,10 @@ export class FilePreviewScreenComponent
 
         this.pdfProxyService.configureElements();
         this.#restoreOldFilters();
-        document.documentElement.addEventListener('fullscreenchange', this.fullscreenListener);
         this.pdf.instance.UI.hotkeys.on('esc', this.handleDeleteRectangleOnEsc);
-        this.#openComponentLogDialogIfDefault();
         this._viewerHeaderService.resetLayers();
     }
 
-    ngAfterViewInit() {
-        const _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-            this._updateItemWidth(entries[0]);
-        });
-        _observer.observe(this._actionsWrapper.nativeElement);
-    }
-
     openManualAnnotationDialog(manualRedactionEntryWrapper: ManualRedactionEntryWrapper) {
         const file = this.state.file();
 
@@ -393,59 +334,6 @@ export class FilePreviewScreenComponent
         );
     }
 
-    toggleFullScreen() {
-        this.fullScreen = !this.fullScreen;
-        if (this.fullScreen) {
-            this.#openFullScreen();
-        } else {
-            this.closeFullScreen();
-        }
-    }
-
-    @HostListener('document:keyup', ['$event'])
-    handleKeyEvent($event: KeyboardEvent) {
-        if (this._router.url.indexOf('/file/') < 0) {
-            return;
-        }
-
-        if (!ALL_HOTKEYS.includes($event.key) || this._dialog.openDialogs.length) {
-            return;
-        }
-
-        if (['Escape'].includes($event.key)) {
-            $event.preventDefault();
-            if (this._annotationManager.resizingAnnotationId) {
-                const resizedAnnotation = this._fileDataService
-                    .annotations()
-                    .find(annotation => annotation.id === this._annotationManager.resizingAnnotationId);
-                this._annotationActionsService.cancelResize(resizedAnnotation).then();
-            }
-            this.fullScreen = false;
-            this.closeFullScreen();
-            this._changeRef.markForCheck();
-        }
-
-        if (!$event.ctrlKey && !$event.metaKey && ['f', 'F'].includes($event.key)) {
-            // if you type in an input, don't toggle full-screen
-            if ($event.target instanceof HTMLInputElement || $event.target instanceof HTMLTextAreaElement) {
-                return;
-            }
-            this.toggleFullScreen();
-            return;
-        }
-
-        if (['h', 'H'].includes($event.key)) {
-            if ($event.target instanceof HTMLInputElement || $event.target instanceof HTMLTextAreaElement) {
-                return;
-            }
-            this._ngZone.run(() => {
-                window.focus();
-                this._helpModeService.activateHelpMode(false);
-            });
-            return;
-        }
-    }
-
     async viewerReady(pageNumber?: string) {
         if (pageNumber) {
             const file = this.state.file();
@@ -467,21 +355,6 @@ export class FilePreviewScreenComponent
         this._changeRef.markForCheck();
     }
 
-    closeFullScreen() {
-        if (!!document.fullscreenElement && document.exitFullscreen) {
-            document.exitFullscreen().then();
-        }
-    }
-
-    async downloadOriginalFile({ cacheIdentifier, dossierId, fileId, filename }: File) {
-        const originalFile = this._fileManagementService.downloadOriginal(dossierId, fileId, 'response', cacheIdentifier);
-        download(await firstValueFrom(originalFile), filename);
-    }
-
-    openComponentLogView() {
-        this._dialogService.openDialog('componentLog', { file: this.state.file(), dictionaries: this.state.dictionaries });
-    }
-
     loadAnnotations$() {
         const annotations$ = this._fileDataService.annotations$.pipe(
             startWith([] as AnnotationWrapper[]),
@@ -527,28 +400,6 @@ export class FilePreviewScreenComponent
         return this.#cleanupAndRedrawAnnotations(annotationsToDraw);
     }
 
-    async getTables() {
-        this._loadingService.start();
-
-        const currentPage = this.pdf.currentPage();
-        const tables = await this._tablesService.get(this.state.dossierId, this.state.fileId, this.pdf.currentPage());
-        await this._annotationDrawService.drawTables(tables, currentPage, this.state.dossierTemplateId);
-
-        const filename = this.state.file().filename;
-        const zip = new JSZip();
-
-        tables.forEach((t, index) => {
-            const blob = new Blob([atob(t.csvAsBytes)], {
-                type: 'text/csv;charset=utf-8',
-            });
-            zip.file(filename + '_page' + currentPage + '_table' + (index + 1) + '.csv', blob);
-        });
-
-        saveAs(await zip.generateAsync({ type: 'blob' }), filename + '_tables.zip');
-
-        this._loadingService.stop();
-    }
-
     async #openRedactTextDialog(manualRedactionEntryWrapper: ManualRedactionEntryWrapper) {
         const file = this.state.file();
 
@@ -572,12 +423,6 @@ export class FilePreviewScreenComponent
         return firstValueFrom(addAndReload$.pipe(catchError(() => of(undefined))));
     }
 
-    @Debounce(30)
-    private _updateItemWidth(entry: ResizeObserverEntry): void {
-        this.width = entry.contentRect.width;
-        this._changeRef.detectChanges();
-    }
-
     #getAnnotationsToDraw(oldAnnotations: AnnotationWrapper[], newAnnotations: AnnotationWrapper[]) {
         const currentPage = this.pdf.currentPage();
         const currentPageAnnotations = this._annotationManager.get(a => a.getPageNumber() === currentPage);
@@ -711,10 +556,6 @@ export class FilePreviewScreenComponent
             .pipe(tap(() => this.#handleDeletedFile()))
             .subscribe();
 
-        this.addActiveScreenSubscription = this._documentViewer.keyUp$.subscribe($event => {
-            this.handleKeyEvent($event);
-        });
-
         this.addActiveScreenSubscription = this.#earmarks$.subscribe();
         this.addActiveScreenSubscription = this.deleteEarmarksOnViewChange$().subscribe();
 
@@ -845,13 +686,6 @@ export class FilePreviewScreenComponent
         });
     }
 
-    #openFullScreen() {
-        const documentElement = document.documentElement;
-        if (documentElement.requestFullscreen) {
-            documentElement.requestFullscreen().then();
-        }
-    }
-
     #navigateToDossier() {
         this._logger.info('Navigating to ', this.state.dossier().dossierName);
         return this._router.navigate([this.state.dossier().routerLink]);
@@ -878,12 +712,6 @@ export class FilePreviewScreenComponent
         });
     }
 
-    #openComponentLogDialogIfDefault() {
-        if (this.permissionsService.canViewRssDialog() && this.userPreferenceService.getOpenScmDialogByDefault()) {
-            this.openComponentLogView();
-        }
-    }
-
     #getRedactTextDialog(data: RedactTextData) {
         if (this.#isDocumine) {
             return this._iqserDialog.openDefault(AddAnnotationDialogComponent, { data });
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
index 8bad2b0f3..05a4c955a 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
@@ -70,6 +70,7 @@ import { DocumentUnloadedGuard } from './services/document-unloaded.guard';
 import { FilePreviewDialogService } from './services/file-preview-dialog.service';
 import { ManualRedactionService } from './services/manual-redaction.service';
 import { TablesService } from './services/tables.service';
+import { FileHeaderComponent } from './components/file-header/file-header.component';
 
 const routes: IqserRoutes = [
     {
@@ -119,6 +120,7 @@ const components = [
     FilePreviewScreenComponent,
     FilePreviewRightContainerComponent,
     ReadonlyBannerComponent,
+    FileHeaderComponent,
 ];
 
 @NgModule({
diff --git a/apps/red-ui/src/app/modules/file-preview/services/file-preview-dialog.service.ts b/apps/red-ui/src/app/modules/file-preview/services/file-preview-dialog.service.ts
index 283eed614..59af5fef2 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/file-preview-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/file-preview-dialog.service.ts
@@ -6,16 +6,8 @@ import { DocumentInfoDialogComponent } from '../dialogs/document-info-dialog/doc
 import { ForceAnnotationDialogComponent } from '../dialogs/force-redaction-dialog/force-annotation-dialog.component';
 import { HighlightActionDialogComponent } from '../dialogs/highlight-action-dialog/highlight-action-dialog.component';
 import { ManualAnnotationDialogComponent } from '../dialogs/manual-redaction-dialog/manual-annotation-dialog.component';
-import { StructuredComponentManagementDialogComponent } from '../dialogs/structured-component-management-dialog/structured-component-management-dialog.component';
 
-type DialogType =
-    | 'confirm'
-    | 'documentInfo'
-    | 'componentLog'
-    | 'changeLegalBasis'
-    | 'forceAnnotation'
-    | 'manualAnnotation'
-    | 'highlightAction';
+type DialogType = 'confirm' | 'documentInfo' | 'changeLegalBasis' | 'forceAnnotation' | 'manualAnnotation' | 'highlightAction';
 
 @Injectable()
 export class FilePreviewDialogService extends DialogService<DialogType> {
@@ -41,10 +33,6 @@ export class FilePreviewDialogService extends DialogService<DialogType> {
         highlightAction: {
             component: HighlightActionDialogComponent,
         },
-        componentLog: {
-            component: StructuredComponentManagementDialogComponent,
-            dialogConfig: { width: '90vw' },
-        },
     };
 
     constructor(protected readonly _dialog: MatDialog) {
diff --git a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts
index 68797a6e7..0f6ab7b36 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/pdf-proxy.service.ts
@@ -133,9 +133,11 @@ export class PdfProxyService {
     }
 
     configureElements() {
-        const hexColor = this._dictionariesMapService.get(this._state.dossierTemplateId, 'manual').hexColor;
-        const color = this._annotationDrawService.convertColor(hexColor);
-        this._documentViewer.setRectangleToolStyles(color);
+        const hexColor = this._dictionariesMapService.get(this._state.dossierTemplateId, 'manual')?.hexColor;
+        if (hexColor) {
+            const color = this._annotationDrawService.convertColor(hexColor);
+            this._documentViewer.setRectangleToolStyles(color);
+        }
     }
 
     #configureRectangleAnnotationPopup(annotation: Annotation) {
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index deb14e6da..2ccc6f6d1 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,9 +1,9 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://dan1.iqser.cloud",
+  "API_URL": "https://frontend2.iqser.cloud",
   "APP_NAME": "RedactManager",
-  "IS_DOCUMINE": false,
+  "IS_DOCUMINE": true,
   "RULE_EDITOR_DEV_ONLY": false,
   "AUTO_READ_TIME": 3,
   "BACKEND_APP_VERSION": "4.4.40",
@@ -13,13 +13,13 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://dan1.iqser.cloud/auth",
+  "OAUTH_URL": "https://frontend2.iqser.cloud/auth",
   "RECENT_PERIOD_IN_HOURS": 24,
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",
   "ANNOTATIONS_THRESHOLD": 1000,
-  "THEME": "redact",
-  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/",
+  "THEME": "scm",
+  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/",
   "AVAILABLE_NOTIFICATIONS_DAYS": 30,
   "AVAILABLE_OLD_NOTIFICATIONS_MINUTES": 60,
   "NOTIFICATIONS_THRESHOLD": 1000,

From 48bc514f5b80d4e6e4afc95a686674c62bb52cf3 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 2 Apr 2024 21:57:50 +0300
Subject: [PATCH 02/21] RED-8748 - added DocuMine component view

---
 .../documine-export.component.html            |   7 +
 .../documine-export.component.ts              |   7 +
 .../file-header/file-header.component.html    |  39 ++--
 .../file-header/file-header.component.scss    |  18 +-
 .../file-header/file-header.component.ts      |  24 +--
 .../file-workload.component.html              |  80 ++++----
 .../file-workload.component.scss              |   9 +-
 .../file-workload/file-workload.component.ts  |   6 +-
 .../components/pages/pages.component.ts       |   1 -
 ...ctured-component-management.component.html |  92 +++++++++
 ...tured-component-management.component.scss} |   8 +-
 ...uctured-component-management.component.ts} |  87 +++------
 ...component-management-dialog.component.html |  97 ----------
 .../file-preview-screen.component.html        |   8 +-
 .../file-preview-screen.component.scss        |  15 +-
 .../file-preview-screen.component.ts          |   5 +-
 .../file-preview/file-preview.module.ts       |   4 +
 apps/red-ui/src/assets/i18n/redact/de.json    | 174 +++++++++---------
 apps/red-ui/src/assets/i18n/redact/en.json    |  28 +--
 apps/red-ui/src/assets/i18n/scm/de.json       | 174 +++++++++---------
 apps/red-ui/src/assets/i18n/scm/en.json       |  28 +--
 apps/red-ui/src/styles.scss                   |  16 +-
 22 files changed, 442 insertions(+), 485 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.html
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
 rename apps/red-ui/src/app/modules/file-preview/{dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.scss => components/structured-component-management/structured-component-management.component.scss} (83%)
 rename apps/red-ui/src/app/modules/file-preview/{dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.ts => components/structured-component-management/structured-component-management.component.ts} (55%)
 delete mode 100644 apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.html

diff --git a/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.html b/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.html
new file mode 100644
index 000000000..9baaaabdf
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.html
@@ -0,0 +1,7 @@
+<button [class.active]="true" [matTooltipPosition]="'above'" [matTooltip]="'documine-export.document-tooltip' | translate" class="red-tab">
+    {{ 'documine-export.document' | translate }}
+</button>
+
+<button [matTooltipPosition]="'above'" [matTooltip]="'documine-export.export-tooltip' | translate" class="red-tab">
+    {{ 'documine-export.export' | translate }}
+</button>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts b/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts
new file mode 100644
index 000000000..01b3ef135
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'redaction-documine-export',
+    templateUrl: './documine-export.component.html',
+})
+export class DocumineExportComponent {}
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html
index c351dfd24..8ef995925 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html
@@ -1,37 +1,32 @@
 <div class="page-header">
-    <div class="flex flex-1">
-        <redaction-view-switch></redaction-view-switch>
+    <div class="flex">
+        <redaction-view-switch *ngIf="!isDocumine"></redaction-view-switch>
+        <redaction-documine-export *ngIf="isDocumine"></redaction-documine-export>
     </div>
 
     <!-- TODO: mode this file preview header to a separate component-->
     <div #actionsWrapper class="flex-2 actions-container">
-        <redaction-processing-indicator [file]="file" class="mr-16"></redaction-processing-indicator>
+        <div class="assignee" [class.documine]="isDocumine">
+            <div class="vertical-line" *ngIf="isDocumine"></div>
 
-        <redaction-user-management></redaction-user-management>
+            <redaction-processing-indicator [file]="file" class="mr-16"></redaction-processing-indicator>
 
-        <ng-container *ngIf="permissionsService.isApprover(state.dossier()) && !!file.lastReviewer">
-            <div class="vertical-line"></div>
+            <redaction-user-management></redaction-user-management>
 
-            <div class="all-caps-label mr-16 ml-8 label">
-                {{ 'file-preview.last-assignee' | translate }}
-            </div>
+            <ng-container *ngIf="permissionsService.isApprover(state.dossier()) && !!file.lastReviewer">
+                <div class="vertical-line"></div>
 
-            <iqser-initials-avatar [user]="lastAssignee()" [withName]="true"></iqser-initials-avatar>
-        </ng-container>
+                <div class="all-caps-label mr-16 ml-8 label">
+                    {{ 'file-preview.last-assignee' | translate }}
+                </div>
 
-        <div class="vertical-line"></div>
+                <iqser-initials-avatar [user]="lastAssignee()" [withName]="true"></iqser-initials-avatar>
+            </ng-container>
+        </div>
+
+        <div class="vertical-line" *ngIf="!isDocumine"></div>
 
         <!-- TODO: mode these actions to a separate component -->
-        <iqser-circle-button
-            (action)="openComponentLogView()"
-            *allow="roles.getRss"
-            [attr.help-mode-key]="'editor_scm'"
-            [tooltip]="'file-preview.open-rss-view' | translate"
-            class="ml-8"
-            icon="red:extract"
-            tooltipPosition="below"
-            iqserDisableStopPropagation
-        ></iqser-circle-button>
 
         <redaction-file-actions
             [dossier]="state.dossier()"
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.scss b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.scss
index cc61e02a9..2c45650f8 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.scss
@@ -4,6 +4,22 @@
 
 .actions-container {
     display: flex;
-    justify-content: flex-end;
     align-items: center;
+    justify-content: flex-end;
+
+    .assignee {
+        display: flex;
+        align-items: center;
+
+        &.documine {
+            flex: 1;
+        }
+    }
+}
+
+.vertical-line {
+    width: 1px;
+    height: 30px;
+    background-color: var(--iqser-separator);
+    margin: 0 16px;
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
index c023dfa27..864537c77 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
@@ -12,7 +12,15 @@ import {
     ViewChild,
 } from '@angular/core';
 import { Roles } from '@users/roles';
-import { CircleButtonTypes, HelpModeService, IqserDialog, IqserPermissionsService, isIqserDevMode, LoadingService } from '@iqser/common-ui';
+import {
+    CircleButtonTypes,
+    getConfig,
+    HelpModeService,
+    IqserDialog,
+    IqserPermissionsService,
+    isIqserDevMode,
+    LoadingService,
+} from '@iqser/common-ui';
 import { Bind, Debounce, OnDetach } from '@iqser/common-ui/lib/utils';
 import { File } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
@@ -32,7 +40,6 @@ import { MatDialog } from '@angular/material/dialog';
 import { download } from '@utils/file-download-utils';
 import { firstValueFrom } from 'rxjs';
 import { FileManagementService } from '@services/files/file-management.service';
-import { StructuredComponentManagementDialogComponent } from '../../dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component';
 
 @Component({
     selector: 'redaction-file-header',
@@ -48,6 +55,7 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
 
     readonly lastAssignee = computed(() => this.getLastAssignee());
     readonly isIqserDevMode = isIqserDevMode();
+    readonly isDocumine = getConfig().IS_DOCUMINE;
     width: number;
     fullScreen = false;
 
@@ -73,7 +81,6 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
     ) {}
 
     ngOnInit() {
-        this.#openComponentLogDialogIfDefault();
         document.documentElement.addEventListener('fullscreenchange', this.fullscreenListener);
     }
 
@@ -103,11 +110,6 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
         return isApproved ? (isRss ? lastReviewer : lastApprover) : lastReviewer;
     }
 
-    openComponentLogView() {
-        const data = { file: this.state.file(), dictionaries: this.state.dictionaries };
-        this._iqserDialog.openDefault(StructuredComponentManagementDialogComponent, { data });
-    }
-
     async getTables() {
         this._loadingService.start();
 
@@ -203,12 +205,6 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
         }
     }
 
-    #openComponentLogDialogIfDefault() {
-        if (this.permissionsService.canViewRssDialog() && this._userPreferenceService.getOpenScmDialogByDefault()) {
-            this.openComponentLogView();
-        }
-    }
-
     @Debounce(30)
     private _updateItemWidth(entry: ResizeObserverEntry): void {
         this.width = entry.contentRect.width;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
index 47999770b..bd7105d31 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
@@ -1,41 +1,43 @@
-<div
-    *ngIf="excludedPagesService.shown(); else selectAndFilter"
-    class="right-title heading"
-    translate="file-preview.tabs.exclude-pages.label"
->
-    <div>
-        <iqser-circle-button
-            (action)="excludedPagesService.toggle()"
-            [tooltip]="'file-preview.tabs.exclude-pages.close' | translate"
-            icon="iqser:close"
-            tooltipPosition="before"
-        ></iqser-circle-button>
-    </div>
-</div>
-
-<ng-template #selectAndFilter>
-    <div class="right-title heading">
-        {{ title() | translate }}
+<ng-container *ngIf="!isDocumine">
+    <div
+        *ngIf="excludedPagesService.shown(); else selectAndFilter"
+        class="right-title heading"
+        translate="file-preview.tabs.exclude-pages.label"
+    >
         <div>
-            <div
-                (click)="multiSelectService.activate()"
-                *ngIf="multiSelectService.enabled() && multiSelectService.inactive()"
-                [attr.help-mode-key]="'workload_bulk_selection'"
-                class="all-caps-label primary pointer"
-                translate="file-preview.tabs.annotations.select"
-            ></div>
-
-            <iqser-popup-filter
-                *ngIf="documentInfoService.hidden()"
-                [actionsTemplate]="annotationFilterActionTemplate"
-                [attr.help-mode-key]="'workload_filter'"
-                [fileId]="state.file()?.id"
-                [primaryFiltersSlug]="'primaryFilters'"
-                [secondaryFiltersSlug]="'secondaryFilters'"
-            ></iqser-popup-filter>
+            <iqser-circle-button
+                (action)="excludedPagesService.toggle()"
+                [tooltip]="'file-preview.tabs.exclude-pages.close' | translate"
+                icon="iqser:close"
+                tooltipPosition="before"
+            ></iqser-circle-button>
         </div>
     </div>
-</ng-template>
+
+    <ng-template #selectAndFilter>
+        <div class="right-title heading">
+            {{ title() | translate }}
+            <div>
+                <div
+                    (click)="multiSelectService.activate()"
+                    *ngIf="multiSelectService.enabled() && multiSelectService.inactive()"
+                    [attr.help-mode-key]="'workload_bulk_selection'"
+                    class="all-caps-label primary pointer"
+                    translate="file-preview.tabs.annotations.select"
+                ></div>
+
+                <iqser-popup-filter
+                    *ngIf="documentInfoService.hidden()"
+                    [actionsTemplate]="annotationFilterActionTemplate"
+                    [attr.help-mode-key]="'workload_filter'"
+                    [fileId]="state.file()?.id"
+                    [primaryFiltersSlug]="'primaryFilters'"
+                    [secondaryFiltersSlug]="'secondaryFilters'"
+                ></iqser-popup-filter>
+            </div>
+        </div>
+    </ng-template>
+</ng-container>
 
 <div class="right-content">
     <redaction-readonly-banner
@@ -92,11 +94,7 @@
                 <mat-icon svgIcon="iqser:nav-first"></mat-icon>
             </div>
 
-            <redaction-pages
-                (click)="pagesPanelActive = true"
-                [displayedAnnotations]="displayedAnnotations"
-                [pages]="displayedPages"
-            ></redaction-pages>
+            <redaction-pages (click)="pagesPanelActive = true" [pages]="displayedPages"></redaction-pages>
 
             <div
                 (click)="scrollQuickNavLast()"
@@ -109,7 +107,7 @@
             </div>
         </div>
 
-        <div class="content">
+        <div class="content" [class.documine-content]="isDocumine">
             <div
                 *ngIf="!viewModeService.isEarmarks()"
                 [attr.anotation-page-header]="pdf.currentPage()"
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
index 5ca2bfd51..fedaf987a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
@@ -32,7 +32,14 @@
             width: 100%;
             display: flex;
             flex-direction: column;
+
+            &.documine-content {
+                width: var(--documine-workload-content-width);
+            }
         }
+
+        flex-direction: row-reverse;
+        justify-content: space-between;
     }
 
     .quick-navigation,
@@ -46,7 +53,7 @@
 
     .quick-navigation {
         border-right: 1px solid var(--iqser-separator);
-        min-width: 61px;
+        min-width: var(--qiuck-navigation-width);
         overflow: hidden;
         display: flex;
         flex-direction: column;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts
index 612a81a33..a7cc66f3f 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts
@@ -38,7 +38,6 @@ const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
 export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, OnDestroy {
     @ViewChild('annotationsElement') private readonly _annotationsElement: ElementRef;
     @ViewChild('quickNavigation') private readonly _quickNavigationElement: ElementRef;
-    readonly #isDocumine = getConfig().IS_DOCUMINE;
     readonly #isIqserDevMode = this._userPreferenceService.isIqserDevMode;
     displayedAnnotations = new Map<number, AnnotationWrapper[]>();
     displayedPages: number[] = [];
@@ -51,6 +50,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
     );
     protected readonly currentPageIsExcluded = computed(() => this.state.file().excludedPages.includes(this.pdf.currentPage()));
     protected readonly translations = workloadTranslations;
+    protected readonly isDocumine = getConfig().IS_DOCUMINE;
 
     constructor(
         readonly filterService: FilterService,
@@ -362,7 +362,7 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
             annotations = annotations.filter(a => !a.isRemoved);
         }
 
-        if (this.#isDocumine && !this.#isIqserDevMode) {
+        if (this.isDocumine && !this.#isIqserDevMode) {
             annotations = annotations.filter(a => !a.isOCR);
         }
 
@@ -476,6 +476,6 @@ export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, On
 
     get showAnalysisDisabledBanner() {
         const file = this.state.file();
-        return this.#isDocumine && file.excludedFromAutomaticAnalysis && file.workflowStatus !== WorkflowFileStatuses.APPROVED;
+        return this.isDocumine && file.excludedFromAutomaticAnalysis && file.workflowStatus !== WorkflowFileStatuses.APPROVED;
     }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts b/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts
index 892636f9a..99e5dfd88 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts
@@ -20,7 +20,6 @@ export class PagesComponent implements AfterViewInit {
     readonly #listingService = inject(AnnotationsListingService);
     protected readonly _pdf = inject(PdfViewer);
     @Input({ required: true }) pages: List<number>;
-    @Input({ required: true }) displayedAnnotations: Map<number, AnnotationWrapper[]>;
     readonly viewedPages$ = inject(ViewedPagesMapService).get$(this.#state.fileId);
 
     ngAfterViewInit() {
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
new file mode 100644
index 000000000..98a89f099
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
@@ -0,0 +1,92 @@
+<section class="dialog">
+    <div class="dialog-content" id="scm-edit">
+        <div *ngIf="componentLogData() as componentLogEntries" class="table output-data">
+            <div class="table-header">{{ 'component-log-dialog.table-header.component' | translate }}</div>
+            <div class="table-header">{{ 'component-log-dialog.table-header.value' | translate }}</div>
+            <!--            <div class="table-header">{{ 'component-log-dialog.table-header.transformation-rule' | translate }}</div>-->
+            <!--            <div class="table-header">{{ 'component-log-dialog.table-header.annotation-references' | translate }}</div>-->
+
+            <ng-container *ngFor="let entry of componentLogEntries; let index = index">
+                <div class="bold">{{ entry.name }}</div>
+                <div [id]="getValueCellId(index)">
+                    <iqser-editable-input
+                        (save)="saveEdit($event, entry.originalKey)"
+                        [canEdit]="canEdit"
+                        [cancelTooltip]="'component-log-dialog.actions.cancel-edit' | translate"
+                        [editTooltip]="'component-log-dialog.actions.edit' | translate"
+                        [id]="'value-' + index"
+                        [parentId]="getValueCellId(index)"
+                        [saveTooltip]="'component-log-dialog.actions.save' | translate"
+                        [value]="entry.componentValues[0].value ?? entry.componentValues[0].originalValue"
+                        [attr.helpModeKey]="'scm_edit_DIALOG'"
+                    >
+                        <ng-container slot="editing">
+                            <iqser-circle-button
+                                (action)="undo(entry.originalKey)"
+                                *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"
+                                [showDot]="true"
+                                [tooltip]="
+                                    'component-log-dialog.actions.undo'
+                                        | translate: { value: entry.componentValues[0].originalValue }
+                                        | replaceNbsp
+                                "
+                                [attr.help-mode-key]="'scm_undo_DIALOG'"
+                                class="ml-2"
+                                icon="red:undo"
+                            ></iqser-circle-button>
+                        </ng-container>
+                    </iqser-editable-input>
+                </div>
+                <!--                <div>{{ entry.componentValues[0].valueDescription }}</div>-->
+                <!--                <div>-->
+                <!--                    <ul *ngIf="entry.componentValues[0].entityReferences; else noReferences" class="pl-0">-->
+                <!--                        <li-->
+                <!--                            *ngFor="let reference of entry.componentValues[0].entityReferences"-->
+                <!--                            [innerHTML]="-->
+                <!--                                'component-log-dialog.annotations'-->
+                <!--                                    | translate-->
+                <!--                                        : {-->
+                <!--                                              type: parseType(reference.displayValue),-->
+                <!--                                              page: reference.page,-->
+                <!--                                              ruleNumber: reference.entityRuleId-->
+                <!--                                          }-->
+                <!--                            "-->
+                <!--                            class="mb-8"-->
+                <!--                        ></li>-->
+                <!--                    </ul>-->
+
+                <!--                    <ng-template #noReferences>-</ng-template>-->
+                <!--                </div>-->
+            </ng-container>
+        </div>
+    </div>
+
+    <!--    <div class="dialog-actions">-->
+    <!--        <iqser-icon-button-->
+    <!--            (action)="exportJSON()"-->
+    <!--            [label]="'component-log-dialog.actions.export-json' | translate"-->
+    <!--            [submit]="true"-->
+    <!--            [type]="iconButtonTypes.primary"-->
+    <!--            [attr.help-mode-key]="'scm_export_DIALOG'"-->
+    <!--        ></iqser-icon-button>-->
+
+    <!--        <iqser-icon-button-->
+    <!--            (action)="exportXML()"-->
+    <!--            [label]="'component-log-dialog.actions.export-xml' | translate"-->
+    <!--            [type]="iconButtonTypes.primary"-->
+    <!--            [attr.help-mode-key]="'scm_export_DIALOG'"-->
+    <!--        ></iqser-icon-button>-->
+
+    <!--        <iqser-icon-button-->
+    <!--            (action)="exportAllInDossier()"-->
+    <!--            *ngIf="userPreferences.isIqserDevMode"-->
+    <!--            [type]="iconButtonTypes.primary"-->
+    <!--            label="Export All"-->
+    <!--        ></iqser-icon-button>-->
+
+    <!--        <div [translate]="'component-log-dialog.actions.close'" class="all-caps-label cancel" mat-dialog-close></div>-->
+    <!--        <mat-checkbox (change)="toggleOpenScmDialogByDefault()" [checked]="openScmDialogByDefault()" class="ml-auto" color="primary"-->
+    <!--        >{{ 'component-log-dialog.actions.display-by-default' | translate }}-->
+    <!--        </mat-checkbox>-->
+    <!--    </div>-->
+</section>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
similarity index 83%
rename from apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.scss
rename to apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
index c75e9dc4a..f245e8a71 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
@@ -22,7 +22,7 @@
 
 .table {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(2, 1fr);
 
     > div {
         padding: 8px 10px;
@@ -50,9 +50,9 @@ ul {
 }
 
 .output-data > div:nth-child(8n + 9),
-.output-data > div:nth-child(8n + 10),
-.output-data > div:nth-child(8n + 11),
-.output-data > div:nth-child(8n + 12) {
+.output-data > div:nth-child(8n + 10) {
+    //.output-data > div:nth-child(8n + 11),
+    //.output-data > div:nth-child(8n + 12) {
     background: var(--iqser-grey-8);
 }
 
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
similarity index 55%
rename from apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.ts
rename to apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
index a656a8cf1..e50e41ef1 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
@@ -1,52 +1,20 @@
-import { ComponentLogEntry, Dictionary, IFile, WorkflowFileStatuses } from '@red/domain';
-import { ChangeDetectionStrategy, Component, Inject, OnInit, signal } from '@angular/core';
-import { KeyValuePipe, NgForOf, NgIf } from '@angular/common';
-import {
-    CircleButtonComponent,
-    EditableInputComponent,
-    IconButtonComponent,
-    IconButtonTypes,
-    IqserDialogComponent,
-    LoadingService,
-} from '@iqser/common-ui';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
+import { Component, Input, signal } from '@angular/core';
+import { ComponentLogEntry, Dictionary, File, WorkflowFileStatuses } from '@red/domain';
+import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { ComponentLogService } from '@services/files/component-log.service';
-import { UserPreferenceService } from '@users/user-preference.service';
 import { FilesMapService } from '@services/files/files-map.service';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { firstValueFrom } from 'rxjs';
 
-interface ScmData {
-    file: IFile;
-    dictionaries: Dictionary[];
-}
-
-interface ScmResult {}
-
 @Component({
-    templateUrl: './structured-component-management-dialog.component.html',
-    styleUrls: ['./structured-component-management-dialog.component.scss'],
-    standalone: true,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
-        NgIf,
-        EditableInputComponent,
-        NgForOf,
-        KeyValuePipe,
-        TranslateModule,
-        CircleButtonComponent,
-        IconButtonComponent,
-        MatCheckboxModule,
-        MatDialogModule,
-        ReplaceNbspPipe,
-    ],
+    selector: 'redaction-structured-component-management',
+    templateUrl: './structured-component-management.component.html',
+    styleUrls: ['/structured-component-management.component.scss'],
 })
-export class StructuredComponentManagementDialogComponent
-    extends IqserDialogComponent<StructuredComponentManagementDialogComponent, ScmData, ScmResult>
-    implements OnInit
-{
+export class StructuredComponentManagementComponent {
+    @Input() file: File;
+    @Input() dictionaries: Dictionary[];
+
     readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
     readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
     readonly iconButtonTypes = IconButtonTypes;
@@ -56,13 +24,10 @@ export class StructuredComponentManagementDialogComponent
         private readonly _filesMapService: FilesMapService,
         private readonly _loadingService: LoadingService,
         readonly userPreferences: UserPreferenceService,
-        @Inject(MAT_DIALOG_DATA) readonly data: ScmData,
-    ) {
-        super();
-    }
+    ) {}
 
     get canEdit() {
-        return this.data.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
+        return this.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
     }
 
     async ngOnInit(): Promise<void> {
@@ -74,22 +39,18 @@ export class StructuredComponentManagementDialogComponent
     }
 
     exportJSON() {
-        return firstValueFrom(
-            this._componentLogService.exportJSON(this.data.file.dossierTemplateId, this.data.file.dossierId, this.data.file),
-        );
+        return firstValueFrom(this._componentLogService.exportJSON(this.file.dossierTemplateId, this.file.dossierId, this.file));
     }
 
     exportXML() {
-        return firstValueFrom(
-            this._componentLogService.exportXML(this.data.file.dossierTemplateId, this.data.file.dossierId, this.data.file),
-        );
+        return firstValueFrom(this._componentLogService.exportXML(this.file.dossierTemplateId, this.file.dossierId, this.file));
     }
 
     async exportAllInDossier() {
-        const allFilesInDossier = this._filesMapService.get(this.data.file.dossierId);
+        const allFilesInDossier = this._filesMapService.get(this.file.dossierId);
         for (const file of allFilesInDossier) {
-            await firstValueFrom(this._componentLogService.exportJSON(this.data.file.dossierTemplateId, file.dossierId, file));
-            await firstValueFrom(this._componentLogService.exportXML(this.data.file.dossierTemplateId, file.dossierId, file));
+            await firstValueFrom(this._componentLogService.exportJSON(this.file.dossierTemplateId, file.dossierId, file));
+            await firstValueFrom(this._componentLogService.exportXML(this.file.dossierTemplateId, file.dossierId, file));
         }
     }
 
@@ -109,24 +70,20 @@ export class StructuredComponentManagementDialogComponent
 
     async undo(originalKey: string) {
         this._loadingService.start();
-        await firstValueFrom(this._componentLogService.revertOverride(this.data.file.dossierId, this.data.file.fileId, [originalKey]));
+        await firstValueFrom(this._componentLogService.revertOverride(this.file.dossierId, this.file.fileId, [originalKey]));
         await this.#loadData();
     }
 
     async saveEdit(event: string, originalKey: string) {
         this._loadingService.start();
-        await firstValueFrom(this._componentLogService.override(this.data.file.dossierId, this.data.file.fileId, { [originalKey]: event }));
+        await firstValueFrom(this._componentLogService.override(this.file.dossierId, this.file.fileId, { [originalKey]: event }));
         await this.#loadData();
     }
 
     async #loadData(): Promise<void> {
         this._loadingService.start();
         const componentLogData = await firstValueFrom(
-            this._componentLogService.getComponentLogData(
-                this.data.file.dossierTemplateId,
-                this.data.file.dossierId,
-                this.data.file.fileId,
-            ),
+            this._componentLogService.getComponentLogData(this.file.dossierTemplateId, this.file.dossierId, this.file.fileId),
         );
         this.#updateDisplayValue(componentLogData);
         this.componentLogData.set(componentLogData);
@@ -134,7 +91,7 @@ export class StructuredComponentManagementDialogComponent
     }
 
     #updateDisplayValue(componentLogs: ComponentLogEntry[]) {
-        const dictionaries = this.data.dictionaries;
+        const dictionaries = this.dictionaries;
         for (const componentLog of componentLogs) {
             let foundDictionary: Dictionary;
             for (const reference of componentLog.componentValues[0].entityReferences) {
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.html
deleted file mode 100644
index fd8552a97..000000000
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/structured-component-management-dialog/structured-component-management-dialog.component.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<section class="dialog">
-    <div [translate]="'component-log-dialog.title'" class="dialog-header heading-l"></div>
-
-    <hr />
-    <div class="dialog-content" id="scm-edit">
-        <div *ngIf="componentLogData() as componentLogEntries" class="table output-data">
-            <div class="table-header">{{ 'component-log-dialog.table-header.component' | translate }}</div>
-            <div class="table-header">{{ 'component-log-dialog.table-header.value' | translate }}</div>
-            <div class="table-header">{{ 'component-log-dialog.table-header.transformation-rule' | translate }}</div>
-            <div class="table-header">{{ 'component-log-dialog.table-header.annotation-references' | translate }}</div>
-
-            <ng-container *ngFor="let entry of componentLogEntries; let index = index">
-                <div class="bold">{{ entry.name }}</div>
-                <div [id]="getValueCellId(index)">
-                    <iqser-editable-input
-                        (save)="saveEdit($event, entry.originalKey)"
-                        [canEdit]="canEdit"
-                        [cancelTooltip]="'component-log-dialog.actions.cancel-edit' | translate"
-                        [editTooltip]="'component-log-dialog.actions.edit' | translate"
-                        [id]="'value-' + index"
-                        [parentId]="getValueCellId(index)"
-                        [saveTooltip]="'component-log-dialog.actions.save' | translate"
-                        [value]="entry.componentValues[0].value ?? entry.componentValues[0].originalValue"
-                        [attr.helpModeKey]="'scm_edit_DIALOG'"
-                    >
-                        <ng-container slot="editing">
-                            <iqser-circle-button
-                                (action)="undo(entry.originalKey)"
-                                *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"
-                                [showDot]="true"
-                                [tooltip]="
-                                    'component-log-dialog.actions.undo'
-                                        | translate: { value: entry.componentValues[0].originalValue }
-                                        | replaceNbsp
-                                "
-                                [attr.help-mode-key]="'scm_undo_DIALOG'"
-                                class="ml-2"
-                                icon="red:undo"
-                            ></iqser-circle-button>
-                        </ng-container>
-                    </iqser-editable-input>
-                </div>
-                <div>{{ entry.componentValues[0].valueDescription }}</div>
-                <div>
-                    <ul *ngIf="entry.componentValues[0].entityReferences; else noReferences" class="pl-0">
-                        <li
-                            *ngFor="let reference of entry.componentValues[0].entityReferences"
-                            [innerHTML]="
-                                'component-log-dialog.annotations'
-                                    | translate
-                                        : {
-                                              type: parseType(reference.displayValue),
-                                              page: reference.page,
-                                              ruleNumber: reference.entityRuleId
-                                          }
-                            "
-                            class="mb-8"
-                        ></li>
-                    </ul>
-
-                    <ng-template #noReferences>-</ng-template>
-                </div>
-            </ng-container>
-        </div>
-    </div>
-
-    <div class="dialog-actions">
-        <iqser-icon-button
-            (action)="exportJSON()"
-            [label]="'component-log-dialog.actions.export-json' | translate"
-            [submit]="true"
-            [type]="iconButtonTypes.primary"
-            [attr.help-mode-key]="'scm_export_DIALOG'"
-        ></iqser-icon-button>
-
-        <iqser-icon-button
-            (action)="exportXML()"
-            [label]="'component-log-dialog.actions.export-xml' | translate"
-            [type]="iconButtonTypes.primary"
-            [attr.help-mode-key]="'scm_export_DIALOG'"
-        ></iqser-icon-button>
-
-        <iqser-icon-button
-            (action)="exportAllInDossier()"
-            *ngIf="userPreferences.isIqserDevMode"
-            [type]="iconButtonTypes.primary"
-            label="Export All"
-        ></iqser-icon-button>
-
-        <div [translate]="'component-log-dialog.actions.close'" class="all-caps-label cancel" mat-dialog-close></div>
-        <mat-checkbox (change)="toggleOpenScmDialogByDefault()" [checked]="openScmDialogByDefault()" class="ml-auto" color="primary"
-            >{{ 'component-log-dialog.actions.display-by-default' | translate }}
-        </mat-checkbox>
-    </div>
-
-    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
-</section>
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
index 2e3214931..41b9e50a3 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
@@ -5,10 +5,14 @@
 
     <div class="content-inner">
         <div class="content-container">
-            <!-- Here comes PDF Viewer-->
+            <redaction-structured-component-management
+                *ngIf="isDocumine"
+                [file]="file"
+                [dictionaries]="state.dictionaries"
+            ></redaction-structured-component-management>
         </div>
 
-        <div class="right-container">
+        <div class="right-container" [class.documine-container]="isDocumine">
             <redaction-file-preview-right-container
                 [iqserDisableStopPropagation]="state.isEditingReviewer()"
             ></redaction-file-preview-right-container>
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
index 55ac580d8..4c42b4fc9 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
@@ -1,10 +1,3 @@
-.vertical-line {
-    width: 1px;
-    height: 30px;
-    background-color: var(--iqser-separator);
-    margin: 0 16px;
-}
-
 .content-inner {
     position: absolute;
 }
@@ -15,12 +8,16 @@
 
 .right-container {
     padding: 0;
-    width: 350px;
-    min-width: 350px;
+    width: var(--workload-width);
+    min-width: var(--workload-width);
     position: relative;
     display: flex;
     flex-direction: column;
 
+    &.documine-container {
+        width: 70%;
+    }
+
     ::ng-deep .right-title {
         min-height: 70px;
         display: flex;
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
index 805a9f0e9..863e75186 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
@@ -73,7 +73,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     })
     private readonly _filterTemplate: TemplateRef<unknown>;
     #loadAllAnnotationsEnabled = false;
-    readonly #isDocumine = getConfig().IS_DOCUMINE;
+    protected readonly isDocumine = getConfig().IS_DOCUMINE;
 
     constructor(
         readonly pdf: PdfViewer,
@@ -289,6 +289,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     }
 
     async ngOnInit(): Promise<void> {
+        document.getElementById('viewer').classList.add(this.isDocumine ? 'documine-viewer' : 'redaction-viewer');
         const file = this.state.file();
 
         if (!file) {
@@ -713,7 +714,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     }
 
     #getRedactTextDialog(data: RedactTextData) {
-        if (this.#isDocumine) {
+        if (this.isDocumine) {
             return this._iqserDialog.openDefault(AddAnnotationDialogComponent, { data });
         }
 
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
index 05a4c955a..2d49bb83e 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
@@ -71,6 +71,8 @@ import { FilePreviewDialogService } from './services/file-preview-dialog.service
 import { ManualRedactionService } from './services/manual-redaction.service';
 import { TablesService } from './services/tables.service';
 import { FileHeaderComponent } from './components/file-header/file-header.component';
+import { DocumineExportComponent } from './components/documine-export/documine-export.component';
+import { StructuredComponentManagementComponent } from './components/structured-component-management/structured-component-management.component';
 
 const routes: IqserRoutes = [
     {
@@ -121,6 +123,8 @@ const components = [
     FilePreviewRightContainerComponent,
     ReadonlyBannerComponent,
     FileHeaderComponent,
+    DocumineExportComponent,
+    StructuredComponentManagementComponent,
 ];
 
 @NgModule({
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 484810a04..7190b5637 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -250,9 +250,6 @@
     "watermarks": "Watermarks"
   },
   "analysis-disabled": "",
-  "annotation": {
-    "pending": "(Pending analysis)"
-  },
   "annotation-actions": {
     "accept-recommendation": {
       "label": "Empfehlung annehmen"
@@ -311,14 +308,14 @@
           "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!"
-        },
         "remove-hint": {
           "error": "Failed to remove hint: {error}",
           "success": "Hint removed!"
         },
+        "remove": {
+          "error": "Fehler beim Entfernen der Schwärzung: {error}",
+          "success": "Schwärzung entfernt!"
+        },
         "undo": {
           "error": "Die Aktion konnte nicht rückgängig gemacht werden. Fehler: {error}",
           "success": "erfolgreich Rückgängig gemacht"
@@ -331,15 +328,15 @@
     "remove-highlights": {
       "label": "Remove selected earmarks"
     },
-    "resize": {
-      "label": "Größe ändern"
-    },
     "resize-accept": {
       "label": "Größe speichern"
     },
     "resize-cancel": {
       "label": "Größenänderung abbrechen"
     },
+    "resize": {
+      "label": "Größe ändern"
+    },
     "see-references": {
       "label": "See references"
     },
@@ -358,7 +355,6 @@
   "annotation-engines": {
     "dictionary": "{isHint, select, true{Hint} other{Redaction}} basierend auf Wörterbuch",
     "imported": "Imported",
-    "manual": "Manual",
     "ner": "Redaktion basierend auf KI",
     "rule": "Schwärzung basierend auf Regel {rule}"
   },
@@ -372,6 +368,9 @@
     "skipped": "Übersprungen",
     "text-highlight": "Earmark"
   },
+  "annotation": {
+    "pending": "(Pending analysis)"
+  },
   "archived-dossiers-listing": {
     "no-data": {
       "title": "No archived dossiers."
@@ -500,22 +499,14 @@
   "component-log-dialog": {
     "actions": {
       "cancel-edit": "Cancel",
-      "close": "Close",
-      "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
-      "export-json": "Export JSON",
-      "export-xml": "Export XML",
       "save": "Save",
       "undo": "Undo to: {value}"
     },
-    "annotations": "<strong>{type}</strong> found on page {page} by rule #{ruleNumber}",
     "table-header": {
-      "annotation-references": "Annotation references",
       "component": "Component",
-      "transformation-rule": "Transformation rule",
       "value": "Value"
-    },
-    "title": "Component view"
+    }
   },
   "component-rules-screen": {
     "error": {
@@ -577,18 +568,14 @@
     "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-file-without-analysis": {
       "confirmationText": "Approve without analysis",
       "denyText": "Cancel",
       "question": "Analysis required to detect new redactions.",
       "title": "Warning!"
     },
-    "approve-multiple-files": {
-      "question": "Mindestens eine der ausgewählten Dateien enthält ungesehene Änderungen. Möchten Sie sie trotzdem genehmigen?",
+    "approve-file": {
+      "question": "Dieses Dokument enthält ungesehene Änderungen. Möchten Sie es trotzdem genehmigen?",
       "title": "Warnung!"
     },
     "approve-multiple-files-without-analysis": {
@@ -597,6 +584,10 @@
       "question": "Analysis required to detect new redactions for at least one file.",
       "title": "Warning"
     },
+    "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": {
         "multiple": "Dieses Dokument wird gerade von einer anderen Person geprüft. Möchten Sie Reviewer werden und sich selbst dem Dokument zuweisen?",
@@ -771,6 +762,12 @@
     "save": "Dokumenteninformation speichern",
     "title": "Datei-Attribute anlegen"
   },
+  "documine-export": {
+    "document": "",
+    "document-tooltip": "",
+    "export": "",
+    "export-tooltip": ""
+  },
   "dossier-attribute-types": {
     "date": "Datum",
     "image": "Bild",
@@ -941,13 +938,13 @@
       "recent": "Neu ({hours} h)",
       "unassigned": "Niemandem zugewiesen"
     },
-    "reanalyse": {
-      "action": "Datei analysieren"
-    },
     "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"
+    },
     "start-auto-analysis": "Enable auto-analysis",
     "stop-auto-analysis": "Stop auto-analysis",
     "table-col-names": {
@@ -1016,14 +1013,6 @@
     "total-documents": "Anzahl der Dokumente",
     "total-people": "<strong>{count}</strong> {count, plural, one{user} other {users}}"
   },
-  "dossier-templates": {
-    "label": "Dossier-Vorlagen",
-    "status": {
-      "active": "Active",
-      "inactive": "Inactive",
-      "incomplete": "Incomplete"
-    }
-  },
   "dossier-templates-listing": {
     "action": {
       "clone": "Clone template",
@@ -1059,6 +1048,14 @@
       "title": "{length} {length, plural, one{Dossier-Vorlage} other{Dossier-Vorlagen}}"
     }
   },
+  "dossier-templates": {
+    "label": "Dossier-Vorlagen",
+    "status": {
+      "active": "Active",
+      "inactive": "Inactive",
+      "incomplete": "Incomplete"
+    }
+  },
   "dossier-watermark-selector": {
     "heading": "Watermarks on documents",
     "no-watermark": "There is no watermark defined for the dossier template.<br>Contact your app admin to define one.",
@@ -1244,15 +1241,6 @@
       "title": "{length} {length, plural, one{Wörterbuch} other{Wörterbücher}}"
     }
   },
-  "entity": {
-    "info": {
-      "actions": {
-        "revert": "Revert",
-        "save": "Save changes"
-      },
-      "heading": "Edit entity"
-    }
-  },
   "entity-rules-screen": {
     "error": {
       "generic": "Something went wrong... Entity rules update failed!"
@@ -1267,19 +1255,28 @@
     "warning-text": "Warning: experimental feature!",
     "warnings-found": "{warnings, plural, one{A warning} other{{warnings} warnings}} found in rules"
   },
+  "entity": {
+    "info": {
+      "actions": {
+        "revert": "Revert",
+        "save": "Save changes"
+      },
+      "heading": "Edit entity"
+    }
+  },
   "error": {
     "deleted-entity": {
       "dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Dieses Dossier wurde gelöscht!"
       },
-      "file": {
-        "action": "Zurück zum Dossier",
-        "label": "Diese Datei wurde gelöscht!"
-      },
       "file-dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Das Dossier dieser Datei wurde gelöscht!"
+      },
+      "file": {
+        "action": "Zurück zum Dossier",
+        "label": "Diese Datei wurde gelöscht!"
       }
     },
     "file-preview": {
@@ -1297,12 +1294,6 @@
   },
   "exact-date": "{day} {month} {year} um {hour}:{minute} Uhr",
   "file": "Datei",
-  "file-attribute": {
-    "update": {
-      "error": "Failed to update file attribute value!",
-      "success": "File attribute value has been updated successfully!"
-    }
-  },
   "file-attribute-encoding-types": {
     "ascii": "ASCII",
     "iso": "ISO-8859-1",
@@ -1313,6 +1304,12 @@
     "number": "Nummer",
     "text": "Freier Text"
   },
+  "file-attribute": {
+    "update": {
+      "error": "Failed to update file attribute value!",
+      "success": "File attribute value has been updated successfully!"
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "Cancel",
     "form": {
@@ -1440,7 +1437,6 @@
     "no-data": {
       "title": "Auf dieser Seite gibt es keine Anmerkungen."
     },
-    "open-rss-view": "Open Structured Component Management View",
     "quick-nav": {
       "jump-first": "Zur ersten Seite springen",
       "jump-last": "Zur letzten Seite springen"
@@ -1528,15 +1524,6 @@
       "csv": "File attributes were imported successfully from uploaded CSV file."
     }
   },
-  "filter": {
-    "analysis": "Analyse erforderlich",
-    "comment": "Kommentare",
-    "hint": "Nut Hinweise",
-    "image": "Bilder",
-    "none": "Keine Anmerkungen",
-    "redaction": "Geschwärzt",
-    "updated": "Aktualisiert"
-  },
   "filter-menu": {
     "filter-options": "Filteroptionen",
     "filter-types": "Filter",
@@ -1546,6 +1533,15 @@
     "unseen-pages": "Nur Anmerkungen auf unsichtbaren Seiten",
     "with-comments": "Nur Anmerkungen mit Kommentaren"
   },
+  "filter": {
+    "analysis": "Analyse erforderlich",
+    "comment": "Kommentare",
+    "hint": "Nut Hinweise",
+    "image": "Bilder",
+    "none": "Keine Anmerkungen",
+    "redaction": "Geschwärzt",
+    "updated": "Aktualisiert"
+  },
   "filters": {
     "assigned-people": "Beauftragt",
     "documents-status": "Documents state",
@@ -1816,13 +1812,6 @@
     "user-promoted-to-approver": "<b>{user}</b> wurde im Dossier <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b> zum Genehmiger ernannt!",
     "user-removed-as-dossier-member": "<b>{user}</b> wurde als Mitglied von: <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b>  entfernt!"
   },
-  "notifications": {
-    "button-text": "Notifications",
-    "deleted-dossier": "Deleted dossier",
-    "label": "Benachrichtigungen",
-    "mark-all-as-read": "Alle als gelesen markieren",
-    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
-  },
   "notifications-screen": {
     "category": {
       "email-notifications": "E-Mail Benachrichtigungen",
@@ -1836,6 +1825,7 @@
       "dossier": "Dossierbezogene Benachrichtigungen",
       "other": "Andere Benachrichtigungen"
     },
+    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "options": {
       "ASSIGN_APPROVER": "Wenn ich einem Dokument als Genehmiger zugewiesen bin",
       "ASSIGN_REVIEWER": "Wenn ich einem Dokument als Überprüfer zugewiesen bin",
@@ -1853,7 +1843,6 @@
       "USER_PROMOTED_TO_APPROVER": "Wenn ich Genehmiger in einem Dossier werde",
       "USER_REMOVED_AS_DOSSIER_MEMBER": "Wenn ich die Dossier-Mitgliedschaft verliere"
     },
-    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "schedule": {
       "daily": "Tägliche Zusammenfassung",
       "instant": "Sofortig",
@@ -1861,6 +1850,13 @@
     },
     "title": "Benachrichtigungseinstellungen"
   },
+  "notifications": {
+    "button-text": "Notifications",
+    "deleted-dossier": "Deleted dossier",
+    "label": "Benachrichtigungen",
+    "mark-all-as-read": "Alle als gelesen markieren",
+    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
+  },
   "ocr": {
     "confirmation-dialog": {
       "cancel": "Cancel",
@@ -1952,16 +1948,16 @@
     "warnings-subtitle": "Do not show again options",
     "warnings-title": "Prompts and dialogs settings"
   },
-  "processing": {
-    "basic": "Processing",
-    "ocr": "OCR"
-  },
   "processing-status": {
     "ocr": "OCR",
     "pending": "Pending",
     "processed": "processed",
     "processing": "Processing"
   },
+  "processing": {
+    "basic": "Processing",
+    "ocr": "OCR"
+  },
   "readonly": "Lesemodus",
   "readonly-archived": "Read only (archived)",
   "redact-text": {
@@ -1990,7 +1986,6 @@
         "reason-placeholder": "Select a reason...",
         "revert-text": "Revert to selected text",
         "selected-text": "Selected text:",
-        "text": "Text:",
         "type": "Type",
         "type-placeholder": "Select type..."
       },
@@ -2042,9 +2037,6 @@
       "content": {
         "comment": "Comment",
         "comment-placeholder": "Add remarks or mentions...",
-        "list-item": "{text}",
-        "list-item-false-positive": "<b>{text}</b> as <i>{type}</i> in the context: <b>{context}</b>",
-        "list-item-false-recommendation": "<b>{text}</b> as <i>{type}</i>",
         "options": {
           "do-not-recommend": {
             "description": "Do not recommend the selected term in any document of this dossier.",
@@ -2071,9 +2063,7 @@
             "description-bulk": "Do not redact the selected terms at this position in the current document.",
             "label": "Remove here"
           }
-        },
-        "redacted-text": "Selected {type}",
-        "redacted-text-bulk": "Selected {type, select, redaction{redactions} recommendation{recommendations} other{hints}}"
+        }
       },
       "title": "Remove {type, select, redaction{redaction} recommendation{recommendation} other{hint}}",
       "title-bulk": "Remove {type, select, redaction{redactions} recommendation{recommendations} other{hints}}"
@@ -2191,12 +2181,6 @@
     "red-user-admin": "Benutzer-Admin",
     "regular": "Regulär"
   },
-  "search": {
-    "active-dossiers": "ganze Plattform",
-    "all-dossiers": "all documents",
-    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
-    "this-dossier": "in diesem Dossier"
-  },
   "search-screen": {
     "cols": {
       "assignee": "Bevollmächtigter",
@@ -2220,6 +2204,12 @@
     "no-match": "Keine Dokumente entsprechen Ihren aktuellen Filtern.",
     "table-header": "{length} {length, plural, one{Suchergebnis} other{Suchergebnisse}}"
   },
+  "search": {
+    "active-dossiers": "ganze Plattform",
+    "all-dossiers": "all documents",
+    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
+    "this-dossier": "in diesem Dossier"
+  },
   "seconds": "seconds",
   "size": "Size",
   "smtp-auth-config": {
@@ -2471,4 +2461,4 @@
     }
   },
   "yesterday": "Gestern"
-}
\ No newline at end of file
+}
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index f1d56e326..150e91580 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -355,7 +355,6 @@
   "annotation-engines": {
     "dictionary": "Based on dictionary",
     "imported": "Imported",
-    "manual": "Manual",
     "ner": "Based on AI",
     "rule": "Based on rule"
   },
@@ -500,22 +499,14 @@
   "component-log-dialog": {
     "actions": {
       "cancel-edit": "Cancel",
-      "close": "Close",
-      "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
-      "export-json": "Export JSON",
-      "export-xml": "Export XML",
       "save": "Save",
       "undo": "Undo to: {value}"
     },
-    "annotations": "<strong>{type}</strong> found on page {page} by rule #{ruleNumber}",
     "table-header": {
-      "annotation-references": "Annotation references",
       "component": "Component",
-      "transformation-rule": "Transformation rule",
       "value": "Value"
-    },
-    "title": "Component view"
+    }
   },
   "component-rules-screen": {
     "error": {
@@ -771,6 +762,12 @@
     "save": "Save document info",
     "title": "Enter file attributes"
   },
+  "documine-export": {
+    "document": "Document",
+    "document-tooltip": "Document",
+    "export": "Export",
+    "export-tooltip": "Export"
+  },
   "dossier-attribute-types": {
     "date": "Date",
     "image": "Image",
@@ -1440,7 +1437,6 @@
     "no-data": {
       "title": "There have been no changes to this page."
     },
-    "open-rss-view": "Open Structured Component Management View",
     "quick-nav": {
       "jump-first": "Jump to first page",
       "jump-last": "Jump to last page"
@@ -1990,7 +1986,6 @@
         "reason-placeholder": "Select a reason...",
         "revert-text": "Revert to selected text",
         "selected-text": "Selected text:",
-        "text": "Text:",
         "type": "Type",
         "type-placeholder": "Select type..."
       },
@@ -2042,9 +2037,6 @@
       "content": {
         "comment": "Comment",
         "comment-placeholder": "Add remarks or mentions...",
-        "list-item": "{text}",
-        "list-item-false-positive": "<b>{text}</b> as <i>{type}</i> in the context: <b>{context}</b>",
-        "list-item-false-recommendation": "<b>{text}</b> as <i>{type}</i>",
         "options": {
           "do-not-recommend": {
             "description": "Do not recommend the selected term in any document of this dossier.",
@@ -2071,9 +2063,7 @@
             "description-bulk": "Do not redact the selected terms at this position in the current document.",
             "label": "Remove here"
           }
-        },
-        "redacted-text": "Selected {type}",
-        "redacted-text-bulk": "Selected {type, select, redaction{redactions} recommendation{recommendations} other{hints}}"
+        }
       },
       "title": "Remove {type, select, redaction{redaction} recommendation{recommendation} other{hint}}",
       "title-bulk": "Remove {type, select, redaction{redactions} recommendation{recommendations} other{hints}}"
@@ -2471,4 +2461,4 @@
     }
   },
   "yesterday": "Yesterday"
-}
\ No newline at end of file
+}
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index 6fabc707b..fa9caf08c 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -250,9 +250,6 @@
     "watermarks": "Watermarks"
   },
   "analysis-disabled": "Analysis disabled",
-  "annotation": {
-    "pending": "(Pending analysis)"
-  },
   "annotation-actions": {
     "accept-recommendation": {
       "label": "Empfehlung annehmen"
@@ -311,14 +308,14 @@
           "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!"
-        },
         "remove-hint": {
           "error": "Failed to remove hint: {error}",
           "success": "Hint removed!"
         },
+        "remove": {
+          "error": "Fehler beim Entfernen der Schwärzung: {error}",
+          "success": "Schwärzung entfernt!"
+        },
         "undo": {
           "error": "Die Aktion konnte nicht rückgängig gemacht werden. Fehler: {error}",
           "success": "erfolgreich Rückgängig gemacht"
@@ -331,15 +328,15 @@
     "remove-highlights": {
       "label": "Remove selected earmarks"
     },
-    "resize": {
-      "label": "Größe ändern"
-    },
     "resize-accept": {
       "label": "Größe speichern"
     },
     "resize-cancel": {
       "label": "Größenänderung abbrechen"
     },
+    "resize": {
+      "label": "Größe ändern"
+    },
     "see-references": {
       "label": "See references"
     },
@@ -358,7 +355,6 @@
   "annotation-engines": {
     "dictionary": "{isHint, select, true{Hint} other{Redaction}} basierend auf Wörterbuch",
     "imported": "Annotation is imported",
-    "manual": "Manual",
     "ner": "Redaktion basierend auf KI",
     "rule": "Schwärzung basierend auf Regel {rule}"
   },
@@ -372,6 +368,9 @@
     "skipped": "Übersprungen",
     "text-highlight": "Earmark"
   },
+  "annotation": {
+    "pending": "(Pending analysis)"
+  },
   "archived-dossiers-listing": {
     "no-data": {
       "title": "No archived dossiers."
@@ -500,22 +499,14 @@
   "component-log-dialog": {
     "actions": {
       "cancel-edit": "Cancel",
-      "close": "Close",
-      "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
-      "export-json": "Export JSON",
-      "export-xml": "Export XML",
       "save": "Save",
       "undo": "Undo"
     },
-    "annotations": "<strong>{type}</strong> found on page {page} by rule #{ruleNumber}",
     "table-header": {
-      "annotation-references": "Annotation references",
       "component": "Component",
-      "transformation-rule": "Transformation rule",
       "value": "Value"
-    },
-    "title": "Structured Component Management"
+    }
   },
   "component-rules-screen": {
     "error": {
@@ -577,18 +568,14 @@
     "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-file-without-analysis": {
       "confirmationText": "Approve without analysis",
       "denyText": "Cancel",
       "question": "Analysis required to detect new components.",
       "title": "Warning!"
     },
-    "approve-multiple-files": {
-      "question": "Mindestens eine der ausgewählten Dateien enthält ungesehene Änderungen. Möchten Sie sie trotzdem genehmigen?",
+    "approve-file": {
+      "question": "Dieses Dokument enthält ungesehene Änderungen. Möchten Sie es trotzdem genehmigen?",
       "title": "Warnung!"
     },
     "approve-multiple-files-without-analysis": {
@@ -597,6 +584,10 @@
       "question": "Analysis required to detect new components for at least one file.",
       "title": "Warning"
     },
+    "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": {
         "multiple": "Dieses Dokument wird gerade von einer anderen Person geprüft. Möchten Sie Reviewer werden und sich selbst dem Dokument zuweisen?",
@@ -771,6 +762,12 @@
     "save": "Dokumenteninformation speichern",
     "title": "Datei-Attribute anlegen"
   },
+  "documine-export": {
+    "document": "",
+    "document-tooltip": "",
+    "export": "",
+    "export-tooltip": ""
+  },
   "dossier-attribute-types": {
     "date": "Datum",
     "image": "Bild",
@@ -941,13 +938,13 @@
       "recent": "Neu ({hours} h)",
       "unassigned": "Niemandem zugewiesen"
     },
-    "reanalyse": {
-      "action": "Datei analysieren"
-    },
     "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"
+    },
     "start-auto-analysis": "Enable auto-analysis",
     "stop-auto-analysis": "Stop auto-analysis",
     "table-col-names": {
@@ -1016,14 +1013,6 @@
     "total-documents": "Anzahl der Dokumente",
     "total-people": "<strong>{count}</strong> {count, plural, one{user} other {users}}"
   },
-  "dossier-templates": {
-    "label": "Dossier-Vorlagen",
-    "status": {
-      "active": "Active",
-      "inactive": "Inactive",
-      "incomplete": "Incomplete"
-    }
-  },
   "dossier-templates-listing": {
     "action": {
       "clone": "Clone template",
@@ -1059,6 +1048,14 @@
       "title": "{length} dossier {length, plural, one{template} other{templates}}"
     }
   },
+  "dossier-templates": {
+    "label": "Dossier-Vorlagen",
+    "status": {
+      "active": "Active",
+      "inactive": "Inactive",
+      "incomplete": "Incomplete"
+    }
+  },
   "dossier-watermark-selector": {
     "heading": "Watermarks on documents",
     "no-watermark": "There is no watermark defined for the dossier template.<br>Contact your app admin to define one.",
@@ -1244,15 +1241,6 @@
       "title": "{length} {length, plural, one{entity} other{entities}}"
     }
   },
-  "entity": {
-    "info": {
-      "actions": {
-        "revert": "Revert",
-        "save": "Save changes"
-      },
-      "heading": "Edit entity"
-    }
-  },
   "entity-rules-screen": {
     "error": {
       "generic": "Something went wrong... Entity rules update failed!"
@@ -1267,19 +1255,28 @@
     "warning-text": "Warning: experimental feature!",
     "warnings-found": "{warnings, plural, one{A warning} other{{warnings} warnings}} found in rules"
   },
+  "entity": {
+    "info": {
+      "actions": {
+        "revert": "Revert",
+        "save": "Save changes"
+      },
+      "heading": "Edit entity"
+    }
+  },
   "error": {
     "deleted-entity": {
       "dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Dieses Dossier wurde gelöscht!"
       },
-      "file": {
-        "action": "Zurück zum Dossier",
-        "label": "Diese Datei wurde gelöscht!"
-      },
       "file-dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Das Dossier dieser Datei wurde gelöscht!"
+      },
+      "file": {
+        "action": "Zurück zum Dossier",
+        "label": "Diese Datei wurde gelöscht!"
       }
     },
     "file-preview": {
@@ -1297,12 +1294,6 @@
   },
   "exact-date": "{day} {month} {year} um {hour}:{minute} Uhr",
   "file": "Datei",
-  "file-attribute": {
-    "update": {
-      "error": "Failed to update file attribute value!",
-      "success": "File attribute value has been updated successfully!"
-    }
-  },
   "file-attribute-encoding-types": {
     "ascii": "ASCII",
     "iso": "ISO-8859-1",
@@ -1313,6 +1304,12 @@
     "number": "Nummer",
     "text": "Freier Text"
   },
+  "file-attribute": {
+    "update": {
+      "error": "Failed to update file attribute value!",
+      "success": "File attribute value has been updated successfully!"
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "Cancel",
     "form": {
@@ -1440,7 +1437,6 @@
     "no-data": {
       "title": "Auf dieser Seite gibt es keine Anmerkungen."
     },
-    "open-rss-view": "Open component view",
     "quick-nav": {
       "jump-first": "Zur ersten Seite springen",
       "jump-last": "Zur letzten Seite springen"
@@ -1528,15 +1524,6 @@
       "csv": "File attributes were imported successfully from uploaded CSV file."
     }
   },
-  "filter": {
-    "analysis": "Analyse erforderlich",
-    "comment": "Kommentare",
-    "hint": "Nut Hinweise",
-    "image": "Bilder",
-    "none": "Keine Anmerkungen",
-    "redaction": "Geschwärzt",
-    "updated": "Aktualisiert"
-  },
   "filter-menu": {
     "filter-options": "Filteroptionen",
     "filter-types": "Filter",
@@ -1546,6 +1533,15 @@
     "unseen-pages": "Nur Anmerkungen auf unsichtbaren Seiten",
     "with-comments": "Nur Anmerkungen mit Kommentaren"
   },
+  "filter": {
+    "analysis": "Analyse erforderlich",
+    "comment": "Kommentare",
+    "hint": "Nut Hinweise",
+    "image": "Bilder",
+    "none": "Keine Anmerkungen",
+    "redaction": "Geschwärzt",
+    "updated": "Aktualisiert"
+  },
   "filters": {
     "assigned-people": "Beauftragt",
     "documents-status": "Documents state",
@@ -1816,13 +1812,6 @@
     "user-promoted-to-approver": "<b>{user}</b> wurde im Dossier <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b> zum Genehmiger ernannt!",
     "user-removed-as-dossier-member": "<b>{user}</b> wurde als Mitglied von: <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b>  entfernt!"
   },
-  "notifications": {
-    "button-text": "Notifications",
-    "deleted-dossier": "Deleted dossier",
-    "label": "Benachrichtigungen",
-    "mark-all-as-read": "Alle als gelesen markieren",
-    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
-  },
   "notifications-screen": {
     "category": {
       "email-notifications": "E-Mail Benachrichtigungen",
@@ -1836,6 +1825,7 @@
       "dossier": "Dossierbezogene Benachrichtigungen",
       "other": "Andere Benachrichtigungen"
     },
+    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "options": {
       "ASSIGN_APPROVER": "Wenn ich einem Dokument als Genehmiger zugewiesen bin",
       "ASSIGN_REVIEWER": "Wenn ich einem Dokument als Überprüfer zugewiesen bin",
@@ -1853,7 +1843,6 @@
       "USER_PROMOTED_TO_APPROVER": "Wenn ich Genehmiger in einem Dossier werde",
       "USER_REMOVED_AS_DOSSIER_MEMBER": "Wenn ich die Dossier-Mitgliedschaft verliere"
     },
-    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "schedule": {
       "daily": "Tägliche Zusammenfassung",
       "instant": "Sofortig",
@@ -1861,6 +1850,13 @@
     },
     "title": "Benachrichtigungseinstellungen"
   },
+  "notifications": {
+    "button-text": "Notifications",
+    "deleted-dossier": "Deleted dossier",
+    "label": "Benachrichtigungen",
+    "mark-all-as-read": "Alle als gelesen markieren",
+    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
+  },
   "ocr": {
     "confirmation-dialog": {
       "cancel": "Cancel",
@@ -1952,16 +1948,16 @@
     "warnings-subtitle": "Do not show again options",
     "warnings-title": "Prompts and dialogs settings"
   },
-  "processing": {
-    "basic": "Processing",
-    "ocr": "OCR"
-  },
   "processing-status": {
     "ocr": "OCR",
     "pending": "Pending",
     "processed": "Processed",
     "processing": "Processing"
   },
+  "processing": {
+    "basic": "Processing",
+    "ocr": "OCR"
+  },
   "readonly": "Lesemodus",
   "readonly-archived": "Read only (archived)",
   "redact-text": {
@@ -1990,7 +1986,6 @@
         "reason-placeholder": "Select a reasons...",
         "revert-text": "",
         "selected-text": "Selected text:",
-        "text": "",
         "type": "Type",
         "type-placeholder": "Select type..."
       },
@@ -2042,9 +2037,6 @@
       "content": {
         "comment": "Comment",
         "comment-placeholder": "Add remarks or mentions...",
-        "list-item": "",
-        "list-item-false-positive": "",
-        "list-item-false-recommendation": "",
         "options": {
           "do-not-recommend": {
             "description": "Do not recommend ''{value}'' as {type} in any document of the current dossier.",
@@ -2071,9 +2063,7 @@
             "description-bulk": "",
             "label": "Remove here"
           }
-        },
-        "redacted-text": "",
-        "redacted-text-bulk": ""
+        }
       },
       "title": "Remove {type}",
       "title-bulk": ""
@@ -2191,12 +2181,6 @@
     "red-user-admin": "Benutzer-Admin",
     "regular": "Regulär"
   },
-  "search": {
-    "active-dossiers": "ganze Plattform",
-    "all-dossiers": "all documents",
-    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
-    "this-dossier": "in diesem Dossier"
-  },
   "search-screen": {
     "cols": {
       "assignee": "Bevollmächtigter",
@@ -2220,6 +2204,12 @@
     "no-match": "Keine Dokumente entsprechen Ihren aktuellen Filtern.",
     "table-header": "{length} search {length, plural, one{result} other{results}}"
   },
+  "search": {
+    "active-dossiers": "ganze Plattform",
+    "all-dossiers": "all documents",
+    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
+    "this-dossier": "in diesem Dossier"
+  },
   "seconds": "seconds",
   "size": "Size",
   "smtp-auth-config": {
@@ -2471,4 +2461,4 @@
     }
   },
   "yesterday": "Gestern"
-}
\ No newline at end of file
+}
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index e46d88176..5eef7d43a 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -355,7 +355,6 @@
   "annotation-engines": {
     "dictionary": "{isHint, select, true{Hint} other{Annotation}} based on dictionary",
     "imported": "Annotation is imported",
-    "manual": "Manual",
     "ner": "Annotation based on AI",
     "rule": "Annotation based on rule {rule}"
   },
@@ -500,22 +499,14 @@
   "component-log-dialog": {
     "actions": {
       "cancel-edit": "Cancel",
-      "close": "Close",
-      "display-by-default": "Display by default when opening documents",
       "edit": "Edit",
-      "export-json": "Export JSON",
-      "export-xml": "Export XML",
       "save": "Save",
       "undo": "Undo to: {value}"
     },
-    "annotations": "<strong>{type}</strong> found on page {page} by rule #{ruleNumber}",
     "table-header": {
-      "annotation-references": "Annotation references",
       "component": "Component",
-      "transformation-rule": "Transformation rule",
       "value": "Value"
-    },
-    "title": "Component view"
+    }
   },
   "component-rules-screen": {
     "error": {
@@ -771,6 +762,12 @@
     "save": "Save document info",
     "title": "Enter file attributes"
   },
+  "documine-export": {
+    "document": "Document",
+    "document-tooltip": "Document",
+    "export": "Export",
+    "export-tooltip": "Export"
+  },
   "dossier-attribute-types": {
     "date": "Date",
     "image": "Image",
@@ -1440,7 +1437,6 @@
     "no-data": {
       "title": "There have been no changes to this page."
     },
-    "open-rss-view": "Open component view",
     "quick-nav": {
       "jump-first": "Jump to first page",
       "jump-last": "Jump to last page"
@@ -1990,7 +1986,6 @@
         "reason-placeholder": "Select a reasons...",
         "revert-text": "",
         "selected-text": "Selected text:",
-        "text": "",
         "type": "Type",
         "type-placeholder": "Select type..."
       },
@@ -2042,9 +2037,6 @@
       "content": {
         "comment": "Comment",
         "comment-placeholder": "Add remarks or mentions...",
-        "list-item": "",
-        "list-item-false-positive": "",
-        "list-item-false-recommendation": "",
         "options": {
           "do-not-recommend": {
             "description": "Do not recommend ''{value}'' as {type} in any document of the current dossier.",
@@ -2071,9 +2063,7 @@
             "description-bulk": "",
             "label": "Remove here"
           }
-        },
-        "redacted-text": "",
-        "redacted-text-bulk": ""
+        }
       },
       "title": "Remove {type}",
       "title-bulk": ""
@@ -2471,4 +2461,4 @@
     }
   },
   "yesterday": "Yesterday"
-}
\ No newline at end of file
+}
diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss
index a09022d4c..4849387ca 100644
--- a/apps/red-ui/src/styles.scss
+++ b/apps/red-ui/src/styles.scss
@@ -163,12 +163,15 @@ $dark-accent-10: darken(vars.$accent, 10%);
 
 body {
     --workload-width: 350px;
+    --documine-workload-content-width: 200px;
+    --structured-component-management-width: 30%;
+    --qiuck-navigation-width: 61px;
     --iqser-app-name-font-family: OpenSans Extrabold, sans-serif;
     --iqser-app-name-font-size: 13px;
     --iqser-logo-size: 28px;
 }
 
-#viewer {
+.redaction-viewer {
     visibility: hidden;
     width: calc(100% - var(--workload-width));
     height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
@@ -176,3 +179,14 @@ body {
     left: 0;
     position: absolute;
 }
+
+.documine-viewer {
+    visibility: hidden;
+    width: calc(
+        100% - var(--structured-component-management-width) - var(--documine-workload-content-width) - var(--qiuck-navigation-width)
+    );
+    height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
+    bottom: 0;
+    right: calc(var(--qiuck-navigation-width) + 1px);
+    position: absolute;
+}

From 5e548798a5e60854a6ebe455642d591234f3f700 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 2 Apr 2024 22:25:46 +0300
Subject: [PATCH 03/21] Merge branch 'master' into VM/RED-8748

---
 .../src/app/models/file/annotation-permissions.utils.ts  | 3 ++-
 .../components/file-header/file-header.component.ts      | 5 +++++
 .../file-workload/file-workload.component.html           | 2 ++
 .../edit-redaction-dialog.component.ts                   | 4 +---
 .../remove-redaction-dialog.component.html               | 2 +-
 .../remove-redaction-dialog.component.scss               | 3 +++
 .../remove-redaction-dialog.component.ts                 | 1 -
 .../file-preview/file-preview-screen.component.ts        | 9 +++++++--
 apps/red-ui/src/app/services/notifications.service.ts    | 9 +--------
 apps/red-ui/src/assets/i18n/redact/de.json               | 5 ++++-
 apps/red-ui/src/assets/i18n/redact/en.json               | 5 ++++-
 apps/red-ui/src/assets/i18n/scm/de.json                  | 5 ++++-
 apps/red-ui/src/assets/i18n/scm/en.json                  | 5 ++++-
 13 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/apps/red-ui/src/app/models/file/annotation-permissions.utils.ts b/apps/red-ui/src/app/models/file/annotation-permissions.utils.ts
index 168cd371b..ec313b6de 100644
--- a/apps/red-ui/src/app/models/file/annotation-permissions.utils.ts
+++ b/apps/red-ui/src/app/models/file/annotation-permissions.utils.ts
@@ -56,6 +56,7 @@ export const canResizeAnnotation = (
 
 export const canEditAnnotation = (annotation: AnnotationWrapper) => (annotation.isRedacted || annotation.isSkipped) && !annotation.isImage;
 
-export const canEditHint = (annotation: AnnotationWrapper) => (annotation.isHint && !annotation.isRuleBased) || annotation.isIgnoredHint;
+export const canEditHint = (annotation: AnnotationWrapper) =>
+    ((annotation.isHint && !annotation.isRuleBased) || annotation.isIgnoredHint) && !annotation.isImage;
 
 export const canEditImage = (annotation: AnnotationWrapper) => annotation.isImage;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
index 864537c77..92a5bc574 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
@@ -40,6 +40,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { download } from '@utils/file-download-utils';
 import { firstValueFrom } from 'rxjs';
 import { FileManagementService } from '@services/files/file-management.service';
+import { MultiSelectService } from '../../services/multi-select.service';
 
 @Component({
     selector: 'redaction-file-header',
@@ -76,6 +77,7 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
         private readonly _annotationManager: REDAnnotationManager,
         private readonly _dialog: MatDialog,
         private readonly _fileManagementService: FileManagementService,
+        private readonly _multiSelectService: MultiSelectService,
         readonly state: FilePreviewStateService,
         readonly permissionsService: PermissionsService,
     ) {}
@@ -172,6 +174,9 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
                     .find(annotation => annotation.id === this._annotationManager.resizingAnnotationId);
                 this._annotationActionsService.cancelResize(resizedAnnotation).then();
             }
+            if (this._multiSelectService.active()) {
+                this._multiSelectService.deactivate();
+            }
             this.fullScreen = false;
             this.closeFullScreen();
             this._changeRef.markForCheck();
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
index bd7105d31..b5ed2090a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
@@ -71,7 +71,9 @@
         <iqser-circle-button
             (action)="multiSelectService.deactivate()"
             [type]="circleButtonTypes.primary"
+            [tooltip]="'file-preview.tabs.multi-select.close' | translate"
             icon="iqser:close"
+            tooltipPosition="before"
         ></iqser-circle-button>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
index bfa171555..7c3b94304 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
@@ -9,7 +9,6 @@ import { firstValueFrom } from 'rxjs';
 import { getEditRedactionOptions, RedactOrHintOption } from '../../utils/dialog-options';
 import { EditRedactionData, EditRedactResult } from '../../utils/dialog-types';
 import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
-import { editRedactionLabelsTranslations } from '@translations/redact-text-translations';
 import { Roles } from '@users/roles';
 import { DialogHelpModeKeys } from '../../utils/constants';
 
@@ -31,11 +30,10 @@ export class EditRedactionDialogComponent
     readonly #applyToAllDossiers = this.data.applyToAllDossiers;
     readonly annotations = this.data.annotations;
     readonly iconButtonTypes = IconButtonTypes;
-    readonly editRedactionLabelsTranslations = editRedactionLabelsTranslations;
     readonly isModifyDictionary = this.annotations.every(annotation => annotation.isModifyDictionary);
     readonly isImage = this.annotations.reduce((acc, next) => acc && next.isImage, true);
     readonly redactedTexts = !this.isImage ? this.annotations.map(annotation => annotation.value).filter(value => !!value) : null;
-    readonly isManualRedaction = this.annotations.every(annotation => annotation.type === SuperTypes.ManualRedaction);
+    readonly isManualRedaction = this.annotations.some(annotation => annotation.type === SuperTypes.ManualRedaction);
     readonly isHint = this.annotations.every(annotation => annotation.HINT || annotation.IMAGE_HINT);
     readonly isRedacted = this.annotations.every(annotation => annotation.isRedacted);
     readonly isImported: boolean = this.annotations.every(annotation => annotation.imported);
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html
index e7468fd7a..d2bdeca2b 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.html
@@ -6,7 +6,7 @@
         ></div>
 
         <div [ngStyle]="{ height: dialogContentHeight + redactedTextsAreaHeight + 'px' }" class="dialog-content redaction">
-            <div *ngIf="!isImage" class="iqser-input-group">
+            <div class="iqser-input-group">
                 <table>
                     <thead>
                         <tr>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss
index da4f7c52d..d4f4cecd5 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.scss
@@ -40,12 +40,15 @@ table {
             text-overflow: ellipsis;
             list-style-position: inside;
             overflow: hidden;
+
+            padding-right: 8px;
         }
 
         th:last-child,
         td:last-child {
             max-width: 0;
             width: 50%;
+            padding-right: 0;
         }
     }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
index acc251e7d..f6d556571 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
@@ -28,7 +28,6 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
     readonly hint = this.data.redactions[0].HINT;
     readonly skipped = this.data.redactions.some(annotation => annotation.isSkipped);
     readonly redactedTexts = this.data.redactions.map(annotation => annotation.value);
-    readonly isImage = this.data.redactions.every(redaction => redaction.isImage);
 
     protected readonly roles = Roles;
     form: UntypedFormGroup = this._formBuilder.group({
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
index 863e75186..d6629c346 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
@@ -56,6 +56,7 @@ import { SkippedService } from './services/skipped.service';
 import { StampService } from './services/stamp.service';
 import { ViewModeService } from './services/view-mode.service';
 import { RedactTextData } from './utils/dialog-types';
+import { MultiSelectService } from './services/multi-select.service';
 
 @Component({
     templateUrl: './file-preview-screen.component.html',
@@ -111,6 +112,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         private readonly _fileManagementService: FileManagementService,
         private readonly _readableRedactionsService: ReadableRedactionsService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
+        private readonly _multiSelectService: MultiSelectService,
     ) {
         super();
         effect(() => {
@@ -262,8 +264,11 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     }
 
     @Bind()
-    handleDeleteRectangleOnEsc($event: KeyboardEvent) {
+    handleEscInsideViewer($event: KeyboardEvent) {
         $event.preventDefault();
+        if (this._multiSelectService.active()) {
+            this._multiSelectService.deactivate();
+        }
         if (!!this._annotationManager.selected[0]) {
             const doesHaveWrapper = this._fileDataService.find(this._annotationManager.selected[0]?.Id);
             if (!doesHaveWrapper) {
@@ -306,7 +311,7 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
 
         this.pdfProxyService.configureElements();
         this.#restoreOldFilters();
-        this.pdf.instance.UI.hotkeys.on('esc', this.handleDeleteRectangleOnEsc);
+        this.pdf.instance.UI.hotkeys.on('esc', this.handleEscInsideViewer);
         this._viewerHeaderService.resetLayers();
     }
 
diff --git a/apps/red-ui/src/app/services/notifications.service.ts b/apps/red-ui/src/app/services/notifications.service.ts
index c5658c501..ad596231b 100644
--- a/apps/red-ui/src/app/services/notifications.service.ts
+++ b/apps/red-ui/src/app/services/notifications.service.ts
@@ -12,8 +12,6 @@ import { DossiersCacheService } from './dossiers/dossiers-cache.service';
 import dayjs from 'dayjs';
 import { List, mapEach } from '@iqser/common-ui/lib/utils';
 import { APP_BASE_HREF } from '@angular/common';
-import { Router } from '@angular/router';
-import { filterEventsOnPages } from '@utils/operators';
 
 const INCLUDE_SEEN = false;
 
@@ -35,7 +33,6 @@ export class NotificationsService extends EntitiesService<INotification, Notific
         private readonly _translateService: TranslateService,
         private readonly _userService: UserService,
         private readonly _dossiersCacheService: DossiersCacheService,
-        private readonly _router: Router,
     ) {
         super();
 
@@ -107,16 +104,12 @@ export class NotificationsService extends EntitiesService<INotification, Notific
 
     #initTimerAndChanges() {
         const timer$ = timer(0, CHANGED_CHECK_INTERVAL).pipe(
-            filterEventsOnPages(this._router),
             switchMap(() => (this._dossiersCacheService.empty ? this._dossiersCacheService.load() : of(null))),
             switchMap(() => this.#loadNotificationsIfChanged()),
         );
 
         // Rebuild notifications when cached dossiers are updated
-        const changed$ = this._dossiersCacheService.changed$.pipe(
-            filterEventsOnPages(this._router),
-            tap(() => this.setEntities(this.all.map(e => this._new(e)))),
-        );
+        const changed$ = this._dossiersCacheService.changed$.pipe(tap(() => this.setEntities(this.all.map(e => this._new(e)))));
         return merge(timer$, changed$);
     }
 
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 7190b5637..668c31b32 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -1486,7 +1486,10 @@
       "highlights": {
         "label": "Earmarks"
       },
-      "is-excluded": "Schwärzungen für dieses Dokument deaktiviert."
+      "is-excluded": "Schwärzungen für dieses Dokument deaktiviert.",
+      "multi-select": {
+        "close": ""
+      }
     },
     "text-highlights": "Earmarks",
     "text-highlights-tooltip": "Shows all text earmarks and allows removing or importing them as redactions",
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 150e91580..4dc4952c1 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -1486,7 +1486,10 @@
       "highlights": {
         "label": "Earmarks"
       },
-      "is-excluded": "Redaction is disabled for this document."
+      "is-excluded": "Redaction is disabled for this document.",
+      "multi-select": {
+        "close": "Deactivate multi select"
+      }
     },
     "text-highlights": "Earmarks",
     "text-highlights-tooltip": "Shows all text earmarks and allows removing or importing them as redactions",
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index fa9caf08c..0d2ed27e0 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -1486,7 +1486,10 @@
       "highlights": {
         "label": "Earmarks"
       },
-      "is-excluded": "Schwärzungen für dieses Dokument deaktiviert."
+      "is-excluded": "Schwärzungen für dieses Dokument deaktiviert.",
+      "multi-select": {
+        "close": ""
+      }
     },
     "text-highlights": "Earmarks",
     "text-highlights-tooltip": "Shows all text-earmarks and allows removing or importing them as components",
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index 5eef7d43a..d70100934 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -1486,7 +1486,10 @@
       "highlights": {
         "label": "Earmarks"
       },
-      "is-excluded": "Extraction is disabled for this document."
+      "is-excluded": "Extraction is disabled for this document.",
+      "multi-select": {
+        "close": ""
+      }
     },
     "text-highlights": "Earmarks",
     "text-highlights-tooltip": "Shows all text-earmarks and allows removing or importing them as components",

From a41f4a66393bcb04c4e0f238ae92bbad15dfd276 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 8 Apr 2024 13:59:14 +0300
Subject: [PATCH 04/21] RED-8748 - updated DocuMine component view based on
 active tenant

---
 .../file-workload.component.html              |  75 +++++---
 .../file-workload.component.scss              |  28 ++-
 ...ctured-component-management.component.html | 173 +++++++++---------
 ...ctured-component-management.component.scss | 130 +++++++------
 .../file-preview-screen.component.scss        |   8 +-
 .../pdf-viewer/pdf-viewer.component.html      |   2 +-
 .../pdf-viewer/pdf-viewer.component.ts        |   5 +-
 .../services/viewer-header.service.ts         |  18 +-
 apps/red-ui/src/assets/i18n/redact/de.json    |   4 +
 apps/red-ui/src/assets/i18n/redact/en.json    |   4 +
 apps/red-ui/src/assets/i18n/scm/de.json       |   4 +
 apps/red-ui/src/assets/i18n/scm/en.json       |   4 +
 apps/red-ui/src/assets/pdftron/stylesheet.css |   8 +
 apps/red-ui/src/styles.scss                   |   4 +-
 14 files changed, 281 insertions(+), 186 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
index b5ed2090a..91024767a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
@@ -26,27 +26,22 @@
                     translate="file-preview.tabs.annotations.select"
                 ></div>
 
-                <iqser-popup-filter
-                    *ngIf="documentInfoService.hidden()"
-                    [actionsTemplate]="annotationFilterActionTemplate"
-                    [attr.help-mode-key]="'workload_filter'"
-                    [fileId]="state.file()?.id"
-                    [primaryFiltersSlug]="'primaryFilters'"
-                    [secondaryFiltersSlug]="'secondaryFilters'"
-                ></iqser-popup-filter>
+                <ng-container *ngTemplateOutlet="annotationsFilter"></ng-container>
             </div>
         </div>
     </ng-template>
 </ng-container>
 
 <div class="right-content">
-    <redaction-readonly-banner
-        *ngIf="showAnalysisDisabledBanner; else readOnlyBanner"
-        [customTranslation]="translations.analysisDisabled"
-    ></redaction-readonly-banner>
-    <ng-template #readOnlyBanner>
-        <redaction-readonly-banner *ngIf="state.isReadonly()"></redaction-readonly-banner>
-    </ng-template>
+    <ng-container *ngIf="!isDocumine">
+        <redaction-readonly-banner
+            *ngIf="showAnalysisDisabledBanner; else readOnlyBanner"
+            [customTranslation]="translations.analysisDisabled"
+        ></redaction-readonly-banner>
+        <ng-template #readOnlyBanner>
+            <redaction-readonly-banner *ngIf="state.isReadonly()"></redaction-readonly-banner>
+        </ng-template>
+    </ng-container>
 
     <div *ngIf="multiSelectService.active()" class="multi-select">
         <div class="selected-wrapper">
@@ -90,6 +85,7 @@
                 (click)="scrollQuickNavFirst()"
                 [class.disabled]="pdf.currentPage() === 1"
                 [matTooltip]="'file-preview.quick-nav.jump-first' | translate"
+                [class.documine-height]="isDocumine"
                 class="jump"
                 matTooltipPosition="above"
             >
@@ -102,6 +98,7 @@
                 (click)="scrollQuickNavLast()"
                 [class.disabled]="pdf.currentPage() === state.file()?.numberOfPages"
                 [matTooltip]="'file-preview.quick-nav.jump-last' | translate"
+                [class.documine-height]="isDocumine"
                 class="jump"
                 matTooltipPosition="above"
             >
@@ -109,7 +106,7 @@
             </div>
         </div>
 
-        <div class="content" [class.documine-content]="isDocumine">
+        <div class="content" [class.documine-width]="isDocumine">
             <div
                 *ngIf="!viewModeService.isEarmarks()"
                 [attr.anotation-page-header]="pdf.currentPage()"
@@ -117,21 +114,23 @@
                 class="workload-separator"
             >
                 <span *ngIf="!!pdf.currentPage()" class="flex-align-items-center">
-                    <iqser-circle-button
-                        (action)="excludedPagesService.toggle()"
-                        *ngIf="currentPageIsExcluded()"
-                        [size]="14"
-                        [tooltip]="'file-preview.excluded-from-redaction' | translate | capitalize"
-                        class="mr-10 primary"
-                        icon="red:exclude-pages"
-                        tooltipPosition="above"
-                    ></iqser-circle-button>
+                    <ng-container *ngIf="!isDocumine; else documineHeader">
+                        <iqser-circle-button
+                            (action)="excludedPagesService.toggle()"
+                            *ngIf="currentPageIsExcluded()"
+                            [size]="14"
+                            [tooltip]="'file-preview.excluded-from-redaction' | translate | capitalize"
+                            class="mr-10 primary"
+                            icon="red:exclude-pages"
+                            tooltipPosition="above"
+                        ></iqser-circle-button>
 
-                    <span
-                        [translateParams]="{ page: pdf.currentPage(), count: activeAnnotations.length }"
-                        [translate]="'page'"
-                        class="all-caps-label"
-                    ></span>
+                        <span
+                            [translateParams]="{ page: pdf.currentPage(), count: activeAnnotations.length }"
+                            [translate]="'page'"
+                            class="all-caps-label"
+                        ></span>
+                    </ng-container>
                 </span>
 
                 <div *ngIf="multiSelectService.active()">
@@ -229,3 +228,19 @@
         iqserPreventDefault
     ></iqser-circle-button>
 </ng-template>
+
+<ng-template #documineHeader>
+    <span [translate]="'annotations'"></span>
+    <ng-container *ngTemplateOutlet="annotationsFilter"></ng-container>
+</ng-template>
+
+<ng-template #annotationsFilter>
+    <iqser-popup-filter
+        *ngIf="documentInfoService.hidden()"
+        [actionsTemplate]="annotationFilterActionTemplate"
+        [attr.help-mode-key]="'workload_filter'"
+        [fileId]="state.file()?.id"
+        [primaryFiltersSlug]="'primaryFilters'"
+        [secondaryFiltersSlug]="'secondaryFilters'"
+    ></iqser-popup-filter>
+</ng-template>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
index fedaf987a..86cb091fa 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.scss
@@ -33,8 +33,27 @@
             display: flex;
             flex-direction: column;
 
-            &.documine-content {
-                width: var(--documine-workload-content-width);
+            &.documine-width {
+                width: calc(var(--documine-workload-content-width));
+                border-right: 1px solid var(--iqser-separator);
+                z-index: 1;
+
+                .workload-separator {
+                    min-height: 37px;
+                    background: var(--iqser-grey-8);
+
+                    .flex-align-items-center {
+                        width: 100%;
+                        justify-content: space-between;
+
+                        ::ng-deep span {
+                            color: var(--iqser-text);
+                            font-size: var(--iqser-font-size);
+                            line-height: 20px;
+                            font-weight: 600;
+                        }
+                    }
+                }
             }
         }
 
@@ -53,6 +72,7 @@
 
     .quick-navigation {
         border-right: 1px solid var(--iqser-separator);
+        border-left: 1px solid var(--iqser-separator);
         min-width: var(--qiuck-navigation-width);
         overflow: hidden;
         display: flex;
@@ -66,6 +86,10 @@
             cursor: pointer;
             transition: background-color 0.25s;
 
+            &.documine-height {
+                min-height: 37px;
+            }
+
             &:not(.disabled):hover {
                 background-color: var(--iqser-tab-hover);
             }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
index 98a89f099..2a5a6d1c4 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
@@ -1,92 +1,93 @@
-<section class="dialog">
-    <div class="dialog-content" id="scm-edit">
-        <div *ngIf="componentLogData() as componentLogEntries" class="table output-data">
-            <div class="table-header">{{ 'component-log-dialog.table-header.component' | translate }}</div>
-            <div class="table-header">{{ 'component-log-dialog.table-header.value' | translate }}</div>
-            <!--            <div class="table-header">{{ 'component-log-dialog.table-header.transformation-rule' | translate }}</div>-->
-            <!--            <div class="table-header">{{ 'component-log-dialog.table-header.annotation-references' | translate }}</div>-->
+<div class="components-header">
+    <span [translate]="'component-management.components'"></span>
+    <iqser-popup-filter [primaryFiltersSlug]="'primaryFilters'" [secondaryFiltersSlug]="'secondaryFilters'"></iqser-popup-filter>
+</div>
 
-            <ng-container *ngFor="let entry of componentLogEntries; let index = index">
-                <div class="bold">{{ entry.name }}</div>
-                <div [id]="getValueCellId(index)">
-                    <iqser-editable-input
-                        (save)="saveEdit($event, entry.originalKey)"
-                        [canEdit]="canEdit"
-                        [cancelTooltip]="'component-log-dialog.actions.cancel-edit' | translate"
-                        [editTooltip]="'component-log-dialog.actions.edit' | translate"
-                        [id]="'value-' + index"
-                        [parentId]="getValueCellId(index)"
-                        [saveTooltip]="'component-log-dialog.actions.save' | translate"
-                        [value]="entry.componentValues[0].value ?? entry.componentValues[0].originalValue"
-                        [attr.helpModeKey]="'scm_edit_DIALOG'"
-                    >
-                        <ng-container slot="editing">
-                            <iqser-circle-button
-                                (action)="undo(entry.originalKey)"
-                                *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"
-                                [showDot]="true"
-                                [tooltip]="
-                                    'component-log-dialog.actions.undo'
-                                        | translate: { value: entry.componentValues[0].originalValue }
-                                        | replaceNbsp
-                                "
-                                [attr.help-mode-key]="'scm_undo_DIALOG'"
-                                class="ml-2"
-                                icon="red:undo"
-                            ></iqser-circle-button>
-                        </ng-container>
-                    </iqser-editable-input>
-                </div>
-                <!--                <div>{{ entry.componentValues[0].valueDescription }}</div>-->
-                <!--                <div>-->
-                <!--                    <ul *ngIf="entry.componentValues[0].entityReferences; else noReferences" class="pl-0">-->
-                <!--                        <li-->
-                <!--                            *ngFor="let reference of entry.componentValues[0].entityReferences"-->
-                <!--                            [innerHTML]="-->
-                <!--                                'component-log-dialog.annotations'-->
-                <!--                                    | translate-->
-                <!--                                        : {-->
-                <!--                                              type: parseType(reference.displayValue),-->
-                <!--                                              page: reference.page,-->
-                <!--                                              ruleNumber: reference.entityRuleId-->
-                <!--                                          }-->
-                <!--                            "-->
-                <!--                            class="mb-8"-->
-                <!--                        ></li>-->
-                <!--                    </ul>-->
+<!--<div *ngIf="componentLogData() as componentLogEntries" class="table output-data">-->
+<!--    <div class="table-header">{{ 'component-log-dialog.table-header.component' | translate }}</div>-->
+<!--    <div class="table-header">{{ 'component-log-dialog.table-header.value' | translate }}</div>-->
+<!--    &lt;!&ndash;            <div class="table-header">{{ 'component-log-dialog.table-header.transformation-rule' | translate }}</div>&ndash;&gt;-->
+<!--    &lt;!&ndash;            <div class="table-header">{{ 'component-log-dialog.table-header.annotation-references' | translate }}</div>&ndash;&gt;-->
 
-                <!--                    <ng-template #noReferences>-</ng-template>-->
-                <!--                </div>-->
-            </ng-container>
-        </div>
-    </div>
+<!--    <ng-container *ngFor="let entry of componentLogEntries; let index = index">-->
+<!--        <div class="bold">{{ entry.name }}</div>-->
+<!--        <div [id]="getValueCellId(index)">-->
+<!--            <iqser-editable-input-->
+<!--                (save)="saveEdit($event, entry.originalKey)"-->
+<!--                [canEdit]="canEdit"-->
+<!--                [cancelTooltip]="'component-log-dialog.actions.cancel-edit' | translate"-->
+<!--                [editTooltip]="'component-log-dialog.actions.edit' | translate"-->
+<!--                [id]="'value-' + index"-->
+<!--                [parentId]="getValueCellId(index)"-->
+<!--                [saveTooltip]="'component-log-dialog.actions.save' | translate"-->
+<!--                [value]="entry.componentValues[0].value ?? entry.componentValues[0].originalValue"-->
+<!--                [attr.helpModeKey]="'scm_edit_DIALOG'"-->
+<!--            >-->
+<!--                <ng-container slot="editing">-->
+<!--                    <iqser-circle-button-->
+<!--                        (action)="undo(entry.originalKey)"-->
+<!--                        *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"-->
+<!--                        [showDot]="true"-->
+<!--                        [tooltip]="-->
+<!--                            'component-log-dialog.actions.undo'-->
+<!--                                | translate: { value: entry.componentValues[0].originalValue }-->
+<!--                                | replaceNbsp-->
+<!--                        "-->
+<!--                        [attr.help-mode-key]="'scm_undo_DIALOG'"-->
+<!--                        class="ml-2"-->
+<!--                        icon="red:undo"-->
+<!--                    ></iqser-circle-button>-->
+<!--                </ng-container>-->
+<!--            </iqser-editable-input>-->
+<!--        </div>-->
+<!--        &lt;!&ndash;                <div>{{ entry.componentValues[0].valueDescription }}</div>&ndash;&gt;-->
+<!--        &lt;!&ndash;                <div>&ndash;&gt;-->
+<!--        &lt;!&ndash;                    <ul *ngIf="entry.componentValues[0].entityReferences; else noReferences" class="pl-0">&ndash;&gt;-->
+<!--        &lt;!&ndash;                        <li&ndash;&gt;-->
+<!--        &lt;!&ndash;                            *ngFor="let reference of entry.componentValues[0].entityReferences"&ndash;&gt;-->
+<!--        &lt;!&ndash;                            [innerHTML]="&ndash;&gt;-->
+<!--        &lt;!&ndash;                                'component-log-dialog.annotations'&ndash;&gt;-->
+<!--        &lt;!&ndash;                                    | translate&ndash;&gt;-->
+<!--        &lt;!&ndash;                                        : {&ndash;&gt;-->
+<!--        &lt;!&ndash;                                              type: parseType(reference.displayValue),&ndash;&gt;-->
+<!--        &lt;!&ndash;                                              page: reference.page,&ndash;&gt;-->
+<!--        &lt;!&ndash;                                              ruleNumber: reference.entityRuleId&ndash;&gt;-->
+<!--        &lt;!&ndash;                                          }&ndash;&gt;-->
+<!--        &lt;!&ndash;                            "&ndash;&gt;-->
+<!--        &lt;!&ndash;                            class="mb-8"&ndash;&gt;-->
+<!--        &lt;!&ndash;                        ></li>&ndash;&gt;-->
+<!--        &lt;!&ndash;                    </ul>&ndash;&gt;-->
 
-    <!--    <div class="dialog-actions">-->
-    <!--        <iqser-icon-button-->
-    <!--            (action)="exportJSON()"-->
-    <!--            [label]="'component-log-dialog.actions.export-json' | translate"-->
-    <!--            [submit]="true"-->
-    <!--            [type]="iconButtonTypes.primary"-->
-    <!--            [attr.help-mode-key]="'scm_export_DIALOG'"-->
-    <!--        ></iqser-icon-button>-->
+<!--        &lt;!&ndash;                    <ng-template #noReferences>-</ng-template>&ndash;&gt;-->
+<!--        &lt;!&ndash;                </div>&ndash;&gt;-->
+<!--    </ng-container>-->
+<!--</div>-->
 
-    <!--        <iqser-icon-button-->
-    <!--            (action)="exportXML()"-->
-    <!--            [label]="'component-log-dialog.actions.export-xml' | translate"-->
-    <!--            [type]="iconButtonTypes.primary"-->
-    <!--            [attr.help-mode-key]="'scm_export_DIALOG'"-->
-    <!--        ></iqser-icon-button>-->
+<!--    &lt;!&ndash;    <div class="dialog-actions">&ndash;&gt;-->
+<!--    &lt;!&ndash;        <iqser-icon-button&ndash;&gt;-->
+<!--    &lt;!&ndash;            (action)="exportJSON()"&ndash;&gt;-->
+<!--    &lt;!&ndash;            [label]="'component-log-dialog.actions.export-json' | translate"&ndash;&gt;-->
+<!--    &lt;!&ndash;            [submit]="true"&ndash;&gt;-->
+<!--    &lt;!&ndash;            [type]="iconButtonTypes.primary"&ndash;&gt;-->
+<!--    &lt;!&ndash;            [attr.help-mode-key]="'scm_export_DIALOG'"&ndash;&gt;-->
+<!--    &lt;!&ndash;        ></iqser-icon-button>&ndash;&gt;-->
 
-    <!--        <iqser-icon-button-->
-    <!--            (action)="exportAllInDossier()"-->
-    <!--            *ngIf="userPreferences.isIqserDevMode"-->
-    <!--            [type]="iconButtonTypes.primary"-->
-    <!--            label="Export All"-->
-    <!--        ></iqser-icon-button>-->
+<!--    &lt;!&ndash;        <iqser-icon-button&ndash;&gt;-->
+<!--    &lt;!&ndash;            (action)="exportXML()"&ndash;&gt;-->
+<!--    &lt;!&ndash;            [label]="'component-log-dialog.actions.export-xml' | translate"&ndash;&gt;-->
+<!--    &lt;!&ndash;            [type]="iconButtonTypes.primary"&ndash;&gt;-->
+<!--    &lt;!&ndash;            [attr.help-mode-key]="'scm_export_DIALOG'"&ndash;&gt;-->
+<!--    &lt;!&ndash;        ></iqser-icon-button>&ndash;&gt;-->
 
-    <!--        <div [translate]="'component-log-dialog.actions.close'" class="all-caps-label cancel" mat-dialog-close></div>-->
-    <!--        <mat-checkbox (change)="toggleOpenScmDialogByDefault()" [checked]="openScmDialogByDefault()" class="ml-auto" color="primary"-->
-    <!--        >{{ 'component-log-dialog.actions.display-by-default' | translate }}-->
-    <!--        </mat-checkbox>-->
-    <!--    </div>-->
-</section>
+<!--    &lt;!&ndash;        <iqser-icon-button&ndash;&gt;-->
+<!--    &lt;!&ndash;            (action)="exportAllInDossier()"&ndash;&gt;-->
+<!--    &lt;!&ndash;            *ngIf="userPreferences.isIqserDevMode"&ndash;&gt;-->
+<!--    &lt;!&ndash;            [type]="iconButtonTypes.primary"&ndash;&gt;-->
+<!--    &lt;!&ndash;            label="Export All"&ndash;&gt;-->
+<!--    &lt;!&ndash;        ></iqser-icon-button>&ndash;&gt;-->
+
+<!--    &lt;!&ndash;        <div [translate]="'component-log-dialog.actions.close'" class="all-caps-label cancel" mat-dialog-close></div>&ndash;&gt;-->
+<!--    &lt;!&ndash;        <mat-checkbox (change)="toggleOpenScmDialogByDefault()" [checked]="openScmDialogByDefault()" class="ml-auto" color="primary"&ndash;&gt;-->
+<!--    &lt;!&ndash;        >{{ 'component-log-dialog.actions.display-by-default' | translate }}&ndash;&gt;-->
+<!--    &lt;!&ndash;        </mat-checkbox>&ndash;&gt;-->
+<!--    &lt;!&ndash;    </div>&ndash;&gt;-->
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
index f245e8a71..bb1ab4bc5 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
@@ -1,61 +1,79 @@
-.rss-row {
+.components-header {
     display: flex;
     flex-direction: row;
-    border-bottom: 1px solid var(--iqser-separator);
-
-    .rss-key {
-        font-weight: bold;
-        flex: 30;
-        text-align: right;
-        padding: 4px;
-    }
-
-    .rss-value {
-        padding: 4px;
-        flex: 70;
-    }
-}
-
-.dialog-content {
-    overflow: auto;
-}
-
-.table {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-
-    > div {
-        padding: 8px 10px;
-    }
-
-    .bold {
-        font-weight: 600;
-    }
-
-    .table-header {
-        margin: 10px 0;
-        border-bottom: 1px solid var(--iqser-separator);
-        background-color: var(--iqser-grey-2);
-        font-weight: 600;
-    }
-}
-
-.annotation-grid {
-    display: grid;
-    grid-template-columns: 3fr 1fr 1fr 5fr;
-}
-
-ul {
-    margin: 0;
-}
-
-.output-data > div:nth-child(8n + 9),
-.output-data > div:nth-child(8n + 10) {
-    //.output-data > div:nth-child(8n + 11),
-    //.output-data > div:nth-child(8n + 12) {
+    justify-content: space-between;
+    align-items: center;
+    min-height: 36px;
     background: var(--iqser-grey-8);
+    border-bottom: 1px solid var(--iqser-separator);
+    padding: 0 10px;
+
+    ::ng-deep span {
+        color: var(--iqser-text);
+        font-size: var(--iqser-font-size);
+        line-height: 20px;
+        font-weight: 600;
+    }
 }
 
-.ml-auto {
-    margin-left: auto;
-}
+//.rss-row {
+//    display: flex;
+//    flex-direction: row;
+//    border-bottom: 1px solid var(--iqser-separator);
+//
+//    .rss-key {
+//        font-weight: bold;
+//        flex: 30;
+//        text-align: right;
+//        padding: 4px;
+//    }
+//
+//    .rss-value {
+//        padding: 4px;
+//        flex: 70;
+//    }
+//}
+//
+//.dialog-content {
+//    overflow: auto;
+//}
+//
+//.table {
+//    display: grid;
+//    grid-template-columns: repeat(2, 1fr);
+//
+//    > div {
+//        padding: 8px 10px;
+//    }
+//
+//    .bold {
+//        font-weight: 600;
+//    }
+//
+//    .table-header {
+//        margin: 10px 0;
+//        border-bottom: 1px solid var(--iqser-separator);
+//        background-color: var(--iqser-grey-2);
+//        font-weight: 600;
+//    }
+//}
+//
+//.annotation-grid {
+//    display: grid;
+//    grid-template-columns: 3fr 1fr 1fr 5fr;
+//}
+//
+//ul {
+//    margin: 0;
+//}
+//
+//.output-data > div:nth-child(8n + 9),
+//.output-data > div:nth-child(8n + 10) {
+//    //.output-data > div:nth-child(8n + 11),
+//    //.output-data > div:nth-child(8n + 12) {
+//    background: var(--iqser-grey-8);
+//}
+//
+//.ml-auto {
+//    margin-left: auto;
+//}
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
index 4c42b4fc9..b708a86bd 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
@@ -14,10 +14,6 @@
     display: flex;
     flex-direction: column;
 
-    &.documine-container {
-        width: 70%;
-    }
-
     ::ng-deep .right-title {
         min-height: 70px;
         display: flex;
@@ -41,6 +37,10 @@
         display: flex;
         flex: 1;
     }
+
+    &.documine-container {
+        width: 70%;
+    }
 }
 
 .analysis-progress {
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html
index 3fd4bcd55..c64f8a8ed 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html
+++ b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.html
@@ -1,3 +1,3 @@
 <redaction-compare-file-input></redaction-compare-file-input>
 
-<redaction-paginator></redaction-paginator>
+<redaction-paginator *ngIf="!isDocumine"></redaction-paginator>
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts
index a9e9f6442..34f006113 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts
+++ b/apps/red-ui/src/app/modules/pdf-viewer/pdf-viewer.component.ts
@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { getConfig } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-pdf-viewer',
     templateUrl: './pdf-viewer.component.html',
     styleUrls: ['./pdf-viewer.component.scss'],
 })
-export class PdfViewerComponent {}
+export class PdfViewerComponent {
+    protected readonly isDocumine = getConfig().IS_DOCUMINE;
+}
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts
index 78b7dee74..5a1171db9 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts
+++ b/apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts
@@ -275,6 +275,15 @@ export class ViewerHeaderService {
 
     updateElements(): void {
         this._pdf.instance?.UI.setHeaderItems(header => {
+            let deletedDividers = 0;
+            if (this.#isDocumine) {
+                const secondHeaderElement = header.getItems()[1] as IHeaderElement;
+                if (secondHeaderElement.type === 'divider') {
+                    header.getItems().splice(1, 1);
+                    deletedDividers = 1;
+                }
+            }
+
             const enabledItems: IHeaderElement[] = [];
             const groups: HeaderElementType[][] = [
                 [HeaderElements.COMPARE_BUTTON, HeaderElements.CLOSE_COMPARE_BUTTON],
@@ -291,8 +300,8 @@ export class ViewerHeaderService {
             ];
 
             const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS);
-            let startButtons = 10;
-            let deleteCount = 14;
+            let startButtons = 10 - deletedDividers;
+            let deleteCount = 14 - deletedDividers;
 
             groups.forEach(group => this.#pushGroup(enabledItems, group));
 
@@ -300,11 +309,12 @@ export class ViewerHeaderService {
                 if (!header.getItems().includes(loadAllAnnotationsButton)) {
                     header.get('leftPanelButton').insertAfter(loadAllAnnotationsButton);
                 }
-                startButtons = 11;
-                deleteCount = 15;
+                startButtons = 11 - deletedDividers;
+                deleteCount = 15 - deletedDividers;
             } else {
                 header.delete(HeaderElements.LOAD_ALL_ANNOTATIONS);
             }
+
             header.getItems().splice(startButtons, header.getItems().length - deleteCount, ...enabledItems);
         });
 
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 668c31b32..8722b996a 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -371,6 +371,7 @@
   "annotation": {
     "pending": "(Pending analysis)"
   },
+  "annotations": "",
   "archived-dossiers-listing": {
     "no-data": {
       "title": "No archived dossiers."
@@ -508,6 +509,9 @@
       "value": "Value"
     }
   },
+  "component-management": {
+    "components": ""
+  },
   "component-rules-screen": {
     "error": {
       "generic": ""
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 4dc4952c1..c7fbfdbc6 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -371,6 +371,7 @@
   "annotation": {
     "pending": "(Pending analysis)"
   },
+  "annotations": "Annotations",
   "archived-dossiers-listing": {
     "no-data": {
       "title": "No archived dossiers."
@@ -508,6 +509,9 @@
       "value": "Value"
     }
   },
+  "component-management": {
+    "components": "Components"
+  },
   "component-rules-screen": {
     "error": {
       "generic": ""
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index 0d2ed27e0..788537d84 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -371,6 +371,7 @@
   "annotation": {
     "pending": "(Pending analysis)"
   },
+  "annotations": "",
   "archived-dossiers-listing": {
     "no-data": {
       "title": "No archived dossiers."
@@ -508,6 +509,9 @@
       "value": "Value"
     }
   },
+  "component-management": {
+    "components": ""
+  },
   "component-rules-screen": {
     "error": {
       "generic": "Something went wrong... Component rules update failed!"
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index d70100934..96ba15b16 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -371,6 +371,7 @@
   "annotation": {
     "pending": "(Pending analysis)"
   },
+  "annotations": "Annotations",
   "archived-dossiers-listing": {
     "no-data": {
       "title": "No archived dossiers."
@@ -508,6 +509,9 @@
       "value": "Value"
     }
   },
+  "component-management": {
+    "components": "Components"
+  },
   "component-rules-screen": {
     "error": {
       "generic": "Something went wrong... Component rules update failed!"
diff --git a/apps/red-ui/src/assets/pdftron/stylesheet.css b/apps/red-ui/src/assets/pdftron/stylesheet.css
index f441d75fc..e9ee34956 100644
--- a/apps/red-ui/src/assets/pdftron/stylesheet.css
+++ b/apps/red-ui/src/assets/pdftron/stylesheet.css
@@ -47,3 +47,11 @@ button.Button[data-element='LOAD_ALL_ANNOTATIONS'] > img[src='/ui/assets/icons/g
     opacity: 0.5;
     cursor: default;
 }
+
+.MainHeader {
+    height: 36px !important;
+}
+
+.view-header-border {
+    background: rgba(226, 228, 233, 0.9);
+}
diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss
index 4849387ca..699dc8d73 100644
--- a/apps/red-ui/src/styles.scss
+++ b/apps/red-ui/src/styles.scss
@@ -183,10 +183,10 @@ body {
 .documine-viewer {
     visibility: hidden;
     width: calc(
-        100% - var(--structured-component-management-width) - var(--documine-workload-content-width) - var(--qiuck-navigation-width)
+        100% - var(--structured-component-management-width) - var(--documine-workload-content-width) - var(--qiuck-navigation-width) - 3px
     );
     height: calc(100% - calc(var(--iqser-top-bar-height) + 50px));
     bottom: 0;
-    right: calc(var(--qiuck-navigation-width) + 1px);
+    right: calc(var(--qiuck-navigation-width) + 2px);
     position: absolute;
 }

From 7cc64d6aa2df2eb18f6a4b5e0c173101e681df6a Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 8 Apr 2024 14:00:50 +0300
Subject: [PATCH 05/21] RED-8748 - update common ui

---
 libs/common-ui | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/common-ui b/libs/common-ui
index 957dc404a..8a2033740 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 957dc404a85626d9072da0b050aa0fbddbb30789
+Subproject commit 8a2033740ec93fd8c91e80f94d67e1b662bff121

From 18b3da9c1e0ffa7b53d000df57bc6448699d9545 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 8 Apr 2024 14:39:27 +0300
Subject: [PATCH 06/21] Merge branch 'master' into VM/RED-8748

---
 .../guards/dossier-template-exists.guard.ts   | 27 +++++++++++++++--
 .../digital-signature-screen.component.html   |  2 +-
 .../digital-signature-screen.component.scss   |  4 +++
 .../digital-signature-screen.component.ts     |  3 +-
 .../file-header/file-header.component.ts      |  7 +++--
 .../file-preview-screen.component.ts          | 11 +++++--
 .../services/annotation-manager.service.ts    |  4 +++
 .../pdf-viewer/services/pdf-viewer.service.ts |  1 +
 .../dashboard-stats.service.ts                |  9 ++++++
 .../dossier-templates.service.ts              | 29 +++++++------------
 .../entity-services/default-colors.service.ts | 11 ++++---
 apps/red-ui/src/assets/i18n/redact/de.json    |  2 +-
 apps/red-ui/src/assets/i18n/redact/en.json    |  2 +-
 13 files changed, 76 insertions(+), 36 deletions(-)

diff --git a/apps/red-ui/src/app/guards/dossier-template-exists.guard.ts b/apps/red-ui/src/app/guards/dossier-template-exists.guard.ts
index e59a1ebb4..203707cb1 100644
--- a/apps/red-ui/src/app/guards/dossier-template-exists.guard.ts
+++ b/apps/red-ui/src/app/guards/dossier-template-exists.guard.ts
@@ -7,14 +7,27 @@ import { DossierTemplateStatsService } from '@services/entity-services/dossier-t
 import { NGXLogger } from 'ngx-logger';
 import { firstValueFrom } from 'rxjs';
 import { UserPreferenceService } from '@users/user-preference.service';
+import { DictionaryService } from '@services/entity-services/dictionary.service';
+import { DefaultColorsService } from '@services/entity-services/default-colors.service';
+import { WatermarkService } from '@services/entity-services/watermark.service';
+import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 
 export function templateExistsWhenEnteringAdmin(): CanActivateFn {
     return async function (route: ActivatedRouteSnapshot): Promise<boolean> {
         const dossierTemplateId: string = route.paramMap.get(DOSSIER_TEMPLATE_ID);
+        const fileAttributesService = inject(FileAttributesService);
+        const dictionaryService = inject(DictionaryService);
+        const defaultColorsService = inject(DefaultColorsService);
+        const watermarksService = inject(WatermarkService);
+        const router = inject(Router);
 
         const dossierTemplate = inject(DossierTemplateStatsService).get(dossierTemplateId);
+        await firstValueFrom(fileAttributesService.loadFileAttributesConfig(dossierTemplateId));
+        await firstValueFrom(dictionaryService.loadDictionaryDataForDossierTemplate(dossierTemplateId));
+        await firstValueFrom(defaultColorsService.loadForDossierTemplate(dossierTemplateId));
+        await firstValueFrom(watermarksService.loadForDossierTemplate(dossierTemplateId));
         if (!dossierTemplate) {
-            await inject(Router).navigate(['main', 'admin', 'dossier-templates']);
+            await router.navigate(['main', 'admin', 'dossier-templates']);
             return false;
         }
         return true;
@@ -29,9 +42,13 @@ export function templateExistsWhenEnteringDossierList(): CanActivateFn {
         const logger = inject(NGXLogger);
         const router = inject(Router);
         const userPreferencesService = inject(UserPreferenceService);
+        const fileAttributesService = inject(FileAttributesService);
+        const dictionaryService = inject(DictionaryService);
+        const defaultColorsService = inject(DefaultColorsService);
+        const watermarksService = inject(WatermarkService);
 
-        await firstValueFrom(dashboardStatsService.loadAll());
-        await firstValueFrom(dossierTemplatesService.loadAll());
+        await firstValueFrom(dashboardStatsService.loadForTemplate(dossierTemplateId));
+        await firstValueFrom(dossierTemplatesService.loadDossierTemplate(dossierTemplateId));
         const dossierTemplateStats = dashboardStatsService.find(dossierTemplateId);
         if (!dossierTemplateStats || dossierTemplateStats.isEmpty) {
             logger.warn(`[ROUTES] Dossier template ${dossierTemplateId} not found, redirecting to main`);
@@ -39,6 +56,10 @@ export function templateExistsWhenEnteringDossierList(): CanActivateFn {
             await router.navigate(['main']);
             return false;
         }
+        await firstValueFrom(fileAttributesService.loadFileAttributesConfig(dossierTemplateId));
+        await firstValueFrom(dictionaryService.loadDictionaryDataForDossierTemplate(dossierTemplateId));
+        await firstValueFrom(defaultColorsService.loadForDossierTemplate(dossierTemplateId));
+        await firstValueFrom(watermarksService.loadForDossierTemplate(dossierTemplateId));
         return true;
     };
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index a83c6e586..59caf0512 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@@ -30,7 +30,7 @@
             ></redaction-kms-signature-configuration>
         </ng-container>
 
-        <div [class.hidden]="!digitalSignature" class="changes-box">
+        <div [class.hidden]="!digitalSignature || !showChangesBox()" class="changes-box z-index-1000">
             <iqser-icon-button
                 (action)="saveDigitalSignature()"
                 [disabled]="disabled"
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 d309c5343..ce8eeffa9 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
@@ -20,3 +20,7 @@ form {
 input[name='keySecret']:not(:placeholder-shown) {
     font-family: 'secret', serif;
 }
+
+.z-index-1000 {
+    z-index: 1000;
+}
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 9f866c301..849dea75c 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
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, computed, OnInit, ViewChild } from '@angular/core';
 import { IconButtonTypes, IqserPermissionsService, LoadingService, Toaster } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { RouterHistoryService } from '@services/router-history.service';
@@ -24,6 +24,7 @@ export class DigitalSignatureScreenComponent implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
     readonly roles = Roles;
     readonly currentUser = getCurrentUser<User>();
+    readonly showChangesBox = computed(() => !this._loadingService.isLoading());
 
     digitalSignature: IPkcsDigitalSignatureRequest | IKmsDigitalSignatureRequest;
 
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
index 92a5bc574..9e9870857 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
@@ -63,8 +63,6 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
     constructor(
         private readonly _changeRef: ChangeDetectorRef,
         private readonly _iqserPermissionsService: IqserPermissionsService,
-        private readonly _userPreferenceService: UserPreferenceService,
-        private readonly _iqserDialog: IqserDialog,
         private readonly _loadingService: LoadingService,
         private readonly _pdf: PdfViewer,
         private readonly _annotationDrawService: AnnotationDrawService,
@@ -174,6 +172,11 @@ export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnD
                     .find(annotation => annotation.id === this._annotationManager.resizingAnnotationId);
                 this._annotationActionsService.cancelResize(resizedAnnotation).then();
             }
+
+            if (this._annotationManager.selected.length) {
+                this._annotationManager.deselectAll();
+            }
+
             if (this._multiSelectService.active()) {
                 this._multiSelectService.deactivate();
             }
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
index d6629c346..93abb9623 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
@@ -266,9 +266,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
     @Bind()
     handleEscInsideViewer($event: KeyboardEvent) {
         $event.preventDefault();
-        if (this._multiSelectService.active()) {
-            this._multiSelectService.deactivate();
-        }
         if (!!this._annotationManager.selected[0]) {
             const doesHaveWrapper = this._fileDataService.find(this._annotationManager.selected[0]?.Id);
             if (!doesHaveWrapper) {
@@ -277,6 +274,14 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
                 this._annotationManager.deselect(this._annotationManager.selected[0]?.Id);
             }
         }
+
+        if (this._annotationManager.selected.length) {
+            this._annotationManager.deselectAll();
+        }
+
+        if (this._multiSelectService.active()) {
+            this._multiSelectService.deactivate();
+        }
     }
 
     async ngOnAttach(previousRoute: ActivatedRouteSnapshot) {
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts
index 8472bdd93..e86b97e7c 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts
+++ b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts
@@ -98,6 +98,10 @@ export class REDAnnotationManager {
         this.#manager.deselectAnnotations(ann);
     }
 
+    deselectAll() {
+        this.deselect(this.selected.map(annotation => annotation.Id));
+    }
+
     hide(annotations: Annotation[]): void {
         this.#manager.hideAnnotations(annotations);
     }
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts
index 09fc4f9a7..a20d160d5 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts
+++ b/apps/red-ui/src/app/modules/pdf-viewer/services/pdf-viewer.service.ts
@@ -274,6 +274,7 @@ export class PdfViewer {
         this.#instance.UI.hotkeys.on('esc', {
             keydown: e => {
                 e.preventDefault();
+                this.#clickSelectToolButton();
             },
             keyup: e => {
                 e.preventDefault();
diff --git a/apps/red-ui/src/app/services/dossier-templates/dashboard-stats.service.ts b/apps/red-ui/src/app/services/dossier-templates/dashboard-stats.service.ts
index 80a7de45c..17249dd72 100644
--- a/apps/red-ui/src/app/services/dossier-templates/dashboard-stats.service.ts
+++ b/apps/red-ui/src/app/services/dossier-templates/dashboard-stats.service.ts
@@ -31,4 +31,13 @@ export class DashboardStatsService extends EntitiesService<IDashboardStats, Dash
             tap(entities => this.setEntities(entities)),
         );
     }
+
+    loadForTemplate(dossierTemplateId: string) {
+        const singleTemplateStatsUrl = `/${this._serviceName}/dossier-template/${dossierTemplateId}/stats`;
+        return this._http.get<DashboardStats>(singleTemplateStatsUrl).pipe(
+            map(entity => new DashboardStats(entity)),
+            switchMap(entity => this.#dossierStatesService.loadAllForTemplate(dossierTemplateId).pipe(map(() => entity))),
+            tap(entity => this.addEntity(entity)),
+        );
+    }
 }
diff --git a/apps/red-ui/src/app/services/dossier-templates/dossier-templates.service.ts b/apps/red-ui/src/app/services/dossier-templates/dossier-templates.service.ts
index 13a45ae97..acad05cc7 100644
--- a/apps/red-ui/src/app/services/dossier-templates/dossier-templates.service.ts
+++ b/apps/red-ui/src/app/services/dossier-templates/dossier-templates.service.ts
@@ -4,10 +4,8 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { EntitiesService, Toaster } from '@iqser/common-ui';
 import { List, mapEach } from '@iqser/common-ui/lib/utils';
 import { DossierTemplate, IDossierTemplate } from '@red/domain';
-import { DefaultColorsService } from '@services/entity-services/default-colors.service';
-import { WatermarkService } from '@services/entity-services/watermark.service';
 import { firstValueFrom, forkJoin, Observable, of } from 'rxjs';
-import { catchError, map, mapTo, switchMap, tap } from 'rxjs/operators';
+import { catchError, map, switchMap, tap } from 'rxjs/operators';
 import { DictionaryService } from '../entity-services/dictionary.service';
 import { DossierTemplateStatsService } from '../entity-services/dossier-template-stats.service';
 import { FileAttributesService } from '../entity-services/file-attributes.service';
@@ -27,15 +25,11 @@ export class DossierTemplatesService extends EntitiesService<IDossierTemplate, D
         private readonly _fileAttributesService: FileAttributesService,
         private readonly _dossierTemplateStatsService: DossierTemplateStatsService,
         private readonly _dictionaryService: DictionaryService,
-        private readonly _defaultColorsService: DefaultColorsService,
-        private readonly _watermarksService: WatermarkService,
     ) {
         super();
     }
 
     loadAll(): Observable<DossierTemplate[]> {
-        const getAttributes = (entities: DossierTemplate[]) =>
-            entities.map(e => this._fileAttributesService.loadFileAttributesConfig(e.id));
         const dossierTemplateIds = (templates: DossierTemplate[]) => templates.map(d => d.id);
 
         return this.getAll().pipe(
@@ -43,16 +37,7 @@ export class DossierTemplatesService extends EntitiesService<IDossierTemplate, D
             /* Load stats before updating entities */
             switchMap(templates => {
                 if (templates.length) {
-                    return forkJoin([
-                        this._dossierTemplateStatsService.getFor(dossierTemplateIds(templates)),
-                        ...getAttributes(templates),
-                        // TODO: this should be removed and called only when needed
-                        this._dictionaryService.loadDictionaryData(dossierTemplateIds(templates)),
-                        // TODO: this should be removed and called only when needed
-                        this._defaultColorsService.loadAll(dossierTemplateIds(templates)),
-                        // TODO: this should be removed and called only when needed
-                        this._watermarksService.loadAll(dossierTemplateIds(templates)),
-                    ]).pipe(map(() => templates));
+                    return this._dossierTemplateStatsService.getFor(dossierTemplateIds(templates)).pipe(map(() => templates));
                 }
                 return of(templates);
             }),
@@ -60,6 +45,14 @@ export class DossierTemplatesService extends EntitiesService<IDossierTemplate, D
         );
     }
 
+    loadDossierTemplate(dossierTemplateId: string) {
+        return this._getOne([dossierTemplateId], this._defaultModelPath).pipe(
+            map(entity => new DossierTemplate(entity)),
+            switchMap(template => this._dossierTemplateStatsService.getFor([dossierTemplateId]).pipe(map(() => template))),
+            tap(template => this.addEntity(template)),
+        );
+    }
+
     delete(body: List): Observable<boolean> {
         const showToast = (error: HttpErrorResponse) => {
             if (error.status === HttpStatusCode.Conflict) {
@@ -72,7 +65,7 @@ export class DossierTemplatesService extends EntitiesService<IDossierTemplate, D
 
         return super._post(body, `${this._defaultModelPath}/delete`).pipe(
             catchError(showToast),
-            switchMap(error => (error ? of(false) : this.loadAll().pipe(mapTo(true)))),
+            switchMap(error => (error ? of(false) : this.loadAll().pipe(map(() => true)))),
         );
     }
 
diff --git a/apps/red-ui/src/app/services/entity-services/default-colors.service.ts b/apps/red-ui/src/app/services/entity-services/default-colors.service.ts
index dbc5a6f7f..1ac6831d7 100644
--- a/apps/red-ui/src/app/services/entity-services/default-colors.service.ts
+++ b/apps/red-ui/src/app/services/entity-services/default-colors.service.ts
@@ -1,9 +1,8 @@
 import { Injectable } from '@angular/core';
 import { EntitiesService } from '@iqser/common-ui';
 import { DefaultColors, DefaultColorType, IDefaultColors } from '@red/domain';
-import { forkJoin, Observable } from 'rxjs';
+import { Observable } from 'rxjs';
 import { map, switchMap, tap } from 'rxjs/operators';
-import { mapEach } from '@iqser/common-ui/lib/utils';
 
 @Injectable({
     providedIn: 'root',
@@ -23,10 +22,10 @@ export class DefaultColorsService extends EntitiesService<IDefaultColors, Defaul
         );
     }
 
-    loadAll(dossierTemplateIds: string[]): Observable<DefaultColors[]> {
-        return forkJoin(dossierTemplateIds.map(id => super.getFor<IDefaultColors>(id))).pipe(
-            mapEach(defaultColors => new DefaultColors(defaultColors)),
-            tap(defaultColors => this.setEntities(defaultColors)),
+    loadForDossierTemplate(dossierTemplateId: string): Observable<DefaultColors> {
+        return super.getFor<IDefaultColors>(dossierTemplateId).pipe(
+            map(defaultColors => new DefaultColors(defaultColors)),
+            tap(defaultColors => this.addEntity(defaultColors)),
         );
     }
 
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 8722b996a..24c7eccde 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -1492,7 +1492,7 @@
       },
       "is-excluded": "Schwärzungen für dieses Dokument deaktiviert.",
       "multi-select": {
-        "close": ""
+        "close": "Close bulk select"
       }
     },
     "text-highlights": "Earmarks",
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index c7fbfdbc6..a373adab0 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -1492,7 +1492,7 @@
       },
       "is-excluded": "Redaction is disabled for this document.",
       "multi-select": {
-        "close": "Deactivate multi select"
+        "close": "Close bulk select"
       }
     },
     "text-highlights": "Earmarks",

From 7c940010fdf3f735b4a491304265560ba54e2bfb Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Fri, 12 Apr 2024 13:29:48 +0300
Subject: [PATCH 07/21] RED-8748 - WIP on component management view

---
 .../documine-export.component.html            | 12 +++++++-
 .../documine-export.component.ts              | 19 ++++++++++--
 .../file-header/file-header.component.html    |  2 +-
 ...ctured-component-management.component.html | 10 +++++++
 ...ctured-component-management.component.scss | 30 ++++++++++++++++++-
 apps/red-ui/src/assets/i18n/redact/de.json    | 18 ++++-------
 apps/red-ui/src/assets/i18n/redact/en.json    | 12 ++------
 apps/red-ui/src/assets/i18n/scm/de.json       | 18 ++++-------
 apps/red-ui/src/assets/i18n/scm/en.json       | 12 ++------
 9 files changed, 82 insertions(+), 51 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.html b/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.html
index 9baaaabdf..7dc0226f5 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.html
@@ -2,6 +2,16 @@
     {{ 'documine-export.document' | translate }}
 </button>
 
-<button [matTooltipPosition]="'above'" [matTooltip]="'documine-export.export-tooltip' | translate" class="red-tab">
+<button
+    [matMenuTriggerFor]="bulkComponentDownloadMenu"
+    [matTooltipPosition]="'above'"
+    [matTooltip]="'documine-export.export-tooltip' | translate"
+    class="red-tab"
+>
     {{ 'documine-export.export' | translate }}
 </button>
+
+<mat-menu #bulkComponentDownloadMenu="matMenu">
+    <button (click)="downloadComponentAsJSON()" [innerHTML]="'component-download.json' | translate" mat-menu-item></button>
+    <button (click)="downloadComponentAsXML()" [innerHTML]="'component-download.xml' | translate" mat-menu-item></button>
+</mat-menu>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts b/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts
index 01b3ef135..f4e5ad2cb 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts
@@ -1,7 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
+import { Dossier } from '@red/domain';
+import { ComponentLogService } from '@services/files/component-log.service';
 
 @Component({
     selector: 'redaction-documine-export',
     templateUrl: './documine-export.component.html',
 })
-export class DocumineExportComponent {}
+export class DocumineExportComponent {
+    @Input() dossier: Dossier;
+
+    constructor(private readonly _componentLogService: ComponentLogService) {}
+
+    downloadComponentAsJSON() {
+        return firstValueFrom(this._componentLogService.exportJSON(this.dossier.dossierTemplateId, this.dossier.dossierId));
+    }
+
+    async downloadComponentAsXML() {
+        return firstValueFrom(this._componentLogService.exportXML(this.dossier.dossierTemplateId, this.dossier.dossierId));
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html
index 8ef995925..95882b63c 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.html
@@ -1,7 +1,7 @@
 <div class="page-header">
     <div class="flex">
         <redaction-view-switch *ngIf="!isDocumine"></redaction-view-switch>
-        <redaction-documine-export *ngIf="isDocumine"></redaction-documine-export>
+        <redaction-documine-export *ngIf="isDocumine" [dossier]="state.dossier()"></redaction-documine-export>
     </div>
 
     <!-- TODO: mode this file preview header to a separate component-->
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
index 2a5a6d1c4..4230b837a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
@@ -3,6 +3,16 @@
     <iqser-popup-filter [primaryFiltersSlug]="'primaryFilters'" [secondaryFiltersSlug]="'secondaryFilters'"></iqser-popup-filter>
 </div>
 
+<div *ngIf="componentLogData() as componentLogEntries" class="table">
+    <div class="table-header">{{ 'component-management.table-header.component' | translate }}</div>
+    <div class="table-header">{{ 'component-management.table-header.value' | translate }}</div>
+
+    <ng-container *ngFor="let entry of componentLogEntries">
+        <div>{{ entry.name }}</div>
+        <div>{{ entry.componentValues[0].value ?? entry.componentValues[0].originalValue }}</div>
+    </ng-container>
+</div>
+
 <!--<div *ngIf="componentLogData() as componentLogEntries" class="table output-data">-->
 <!--    <div class="table-header">{{ 'component-log-dialog.table-header.component' | translate }}</div>-->
 <!--    <div class="table-header">{{ 'component-log-dialog.table-header.value' | translate }}</div>-->
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
index bb1ab4bc5..5e1da848a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
@@ -6,7 +6,7 @@
     min-height: 36px;
     background: var(--iqser-grey-8);
     border-bottom: 1px solid var(--iqser-separator);
-    padding: 0 10px;
+    padding: 0 10px 0 26px;
 
     ::ng-deep span {
         color: var(--iqser-text);
@@ -16,6 +16,34 @@
     }
 }
 
+.table {
+    display: grid;
+    grid-template-columns: 40% 1fr;
+    font-size: 12px;
+    overflow: scroll;
+    height: calc(100% - 40px);
+
+    div {
+        padding: 10px 0 10px 0;
+
+        &:not(:nth-last-child(-n + 2)) {
+            border-bottom: 1px solid var(--iqser-separator);
+        }
+
+        &:nth-of-type(odd) {
+            margin-left: 26px;
+        }
+
+        &:nth-of-type(even) {
+            margin-right: 26px;
+        }
+    }
+
+    .table-header {
+        font-weight: 600;
+    }
+}
+
 //.rss-row {
 //    display: flex;
 //    flex-direction: row;
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 86f27219b..e1bcd8cc9 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -498,20 +498,12 @@
     "tooltip": "",
     "xml": ""
   },
-  "component-log-dialog": {
-    "actions": {
-      "cancel-edit": "Cancel",
-      "edit": "Edit",
-      "save": "Save",
-      "undo": "Undo to: {value}"
-    },
-    "table-header": {
-      "component": "Component",
-      "value": "Value"
-    }
-  },
   "component-management": {
-    "components": ""
+    "components": "",
+    "table-header": {
+      "component": "",
+      "value": ""
+    }
   },
   "component-rules-screen": {
     "error": {
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 02a547611..8206cf905 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -498,21 +498,13 @@
     "tooltip": "",
     "xml": ""
   },
-  "component-log-dialog": {
-    "actions": {
-      "cancel-edit": "Cancel",
-      "edit": "Edit",
-      "save": "Save",
-      "undo": "Undo to: {value}"
-    },
+  "component-management": {
+    "components": "Components",
     "table-header": {
       "component": "Component",
       "value": "Value"
     }
   },
-  "component-management": {
-    "components": "Components"
-  },
   "component-rules-screen": {
     "error": {
       "generic": ""
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index ee3791c22..d260666ce 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -498,20 +498,12 @@
     "tooltip": "Component download",
     "xml": "Download as XML"
   },
-  "component-log-dialog": {
-    "actions": {
-      "cancel-edit": "Cancel",
-      "edit": "Edit",
-      "save": "Save",
-      "undo": "Undo"
-    },
-    "table-header": {
-      "component": "Component",
-      "value": "Value"
-    }
-  },
   "component-management": {
-    "components": ""
+    "components": "",
+    "table-header": {
+      "component": "",
+      "value": ""
+    }
   },
   "component-rules-screen": {
     "error": {
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index 3f54ace5e..8289f76b5 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -498,21 +498,13 @@
     "tooltip": "Component download",
     "xml": "Download as XML"
   },
-  "component-log-dialog": {
-    "actions": {
-      "cancel-edit": "Cancel",
-      "edit": "Edit",
-      "save": "Save",
-      "undo": "Undo to: {value}"
-    },
+  "component-management": {
+    "components": "Components",
     "table-header": {
       "component": "Component",
       "value": "Value"
     }
   },
-  "component-management": {
-    "components": "Components"
-  },
   "component-rules-screen": {
     "error": {
       "generic": "Something went wrong... Component rules update failed!"

From 73438f493beccfe11eac25422e64b1edca31e1df Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Thu, 18 Apr 2024 17:37:26 +0300
Subject: [PATCH 08/21] RED-8748 - WIP on component management view

---
 ...-structured-component-value.component.html |  33 ++++
 ...-structured-component-value.component.scss |  98 ++++++++++++
 ...le-structured-component-value.component.ts |  26 ++++
 ...ctured-component-management.component.html |  24 ++-
 ...ctured-component-management.component.scss |  58 +++++--
 ...ructured-component-management.component.ts |   5 +
 .../file-preview/file-preview.module.ts       |   2 +
 .../src/app/modules/icons/icons.module.ts     |   2 +
 apps/red-ui/src/assets/i18n/redact/de.json    | 146 +++++++++---------
 apps/red-ui/src/assets/i18n/redact/en.json    |   3 +
 apps/red-ui/src/assets/i18n/scm/de.json       | 146 +++++++++---------
 apps/red-ui/src/assets/i18n/scm/en.json       |   3 +
 .../src/assets/icons/general/arrow-right.svg  |   5 +
 .../assets/icons/general/draggable-dots.svg   |  23 +++
 14 files changed, 406 insertions(+), 168 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
 create mode 100644 apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
 create mode 100644 apps/red-ui/src/assets/icons/general/arrow-right.svg
 create mode 100644 apps/red-ui/src/assets/icons/general/draggable-dots.svg

diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
new file mode 100644
index 000000000..a6930bcd1
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
@@ -0,0 +1,33 @@
+<div class="component-value" [ngClass]="{ selected: entry.name === selectedEntry?.name, editing: editing }">
+    <div class="component">{{ entry.name }}</div>
+    <div class="value" *ngIf="!editing; else editValue">
+        <div class="text">
+            <span *ngFor="let componentValue of entry.componentValues">
+                {{ componentValue.value ?? componentValue.originalValue }}
+            </span>
+        </div>
+        <div class="actions">
+            <iqser-circle-button
+                (action)="toggleEdit(entry)"
+                *ngIf="canEdit"
+                [tooltip]="'component-management.actions.edit' | translate"
+                class="ml-2"
+                icon="iqser:edit"
+            ></iqser-circle-button>
+            <div class="changes-dot"></div>
+        </div>
+    </div>
+    <mat-icon *ngIf="!editing" class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
+</div>
+
+<ng-template #editValue>
+    <div *ngFor="let componentValue of entry.componentValues" class="editing-value">
+        <mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon>
+        <span> test </span>
+        <iqser-circle-button
+            [tooltip]="'component-management.actions.edit' | translate"
+            class="ml-2"
+            icon="iqser:trash"
+        ></iqser-circle-button>
+    </div>
+</ng-template>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
new file mode 100644
index 000000000..695a92125
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
@@ -0,0 +1,98 @@
+.component-value {
+    display: flex;
+    flex-direction: row;
+    padding: 10px 0 10px 0;
+    margin-left: 26px;
+    margin-right: 26px;
+    position: relative;
+
+    .component {
+        width: 40%;
+    }
+
+    .value {
+        width: 60%;
+        display: flex;
+        align-items: center;
+
+        .text {
+            width: 80%;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .actions {
+            display: flex;
+            justify-content: end;
+            align-items: center;
+            flex-grow: 1;
+
+            iqser-circle-button {
+                visibility: hidden;
+            }
+
+            .changes-dot {
+                height: 8px;
+                width: 8px;
+                background-color: var(--iqser-primary);
+                border-radius: 50%;
+            }
+        }
+    }
+
+    &.header {
+        font-weight: 600;
+    }
+
+    .arrow-right {
+        visibility: hidden;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    mat-icon {
+        transform: scale(0.7);
+    }
+
+    &:not(.header):hover,
+    &.selected {
+        background-color: var(--iqser-grey-8);
+        border-left: 4px solid var(--iqser-primary);
+        cursor: pointer;
+        margin-left: 0;
+        margin-right: 0;
+
+        .component {
+            margin-left: 22px;
+        }
+        .value {
+            margin-right: 26px;
+
+            .actions {
+                iqser-circle-button {
+                    visibility: visible;
+                }
+            }
+        }
+
+        .arrow-right {
+            visibility: visible;
+        }
+    }
+
+    &.editing {
+        flex-direction: column;
+
+        .editing-value {
+            display: flex;
+            align-items: center;
+
+            .draggable {
+                cursor: grab;
+            }
+        }
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
new file mode 100644
index 000000000..0131b4d68
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { ComponentLogEntry } from '@red/domain';
+
+@Component({
+    selector: 'redaction-editable-structured-component-value [entry] [selectedEntry] [canEdit]',
+    templateUrl: './editable-structured-component-value.component.html',
+    styleUrls: ['/editable-structured-component-value.component.scss'],
+})
+export class EditableStructuredComponentValueComponent implements OnChanges {
+    @Input() entry: ComponentLogEntry;
+    @Input() selectedEntry: ComponentLogEntry;
+    @Input() canEdit: boolean;
+    @Output() readonly selectEntry = new EventEmitter<ComponentLogEntry>();
+    editing = false;
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes?.selectedEntry?.currentValue) {
+            this.editing = changes.selectedEntry.currentValue.name === this.entry.name;
+        }
+    }
+
+    toggleEdit(entry?: ComponentLogEntry) {
+        this.editing = !this.editing;
+        this.selectEntry.emit(entry);
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
index 4230b837a..4e77b3e4d 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
@@ -3,14 +3,24 @@
     <iqser-popup-filter [primaryFiltersSlug]="'primaryFilters'" [secondaryFiltersSlug]="'secondaryFilters'"></iqser-popup-filter>
 </div>
 
-<div *ngIf="componentLogData() as componentLogEntries" class="table">
-    <div class="table-header">{{ 'component-management.table-header.component' | translate }}</div>
-    <div class="table-header">{{ 'component-management.table-header.value' | translate }}</div>
+<div *ngIf="componentLogData() as componentLogEntries" class="components-container">
+    <div class="component-row">
+        <div class="header">
+            <div class="component">{{ 'component-management.table-header.component' | translate }}</div>
+            <div class="value">{{ 'component-management.table-header.value' | translate }}</div>
+        </div>
+        <div class="row-separator"></div>
+    </div>
 
-    <ng-container *ngFor="let entry of componentLogEntries">
-        <div>{{ entry.name }}</div>
-        <div>{{ entry.componentValues[0].value ?? entry.componentValues[0].originalValue }}</div>
-    </ng-container>
+    <div *ngFor="let entry of componentLogEntries" class="component-row" (click)="selectEntry(entry)">
+        <redaction-editable-structured-component-value
+            [entry]="entry"
+            [selectedEntry]="selectedEntry"
+            [canEdit]="canEdit"
+            (selectEntry)="selectEntry($event)"
+        ></redaction-editable-structured-component-value>
+        <div class="row-separator"></div>
+    </div>
 </div>
 
 <!--<div *ngIf="componentLogData() as componentLogEntries" class="table output-data">-->
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
index 5e1da848a..278e9e733 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
@@ -16,32 +16,60 @@
     }
 }
 
-.table {
-    display: grid;
-    grid-template-columns: 40% 1fr;
+mat-icon {
+    transform: scale(0.8);
+}
+
+.components-container {
+    display: flex;
+    flex-direction: column;
     font-size: 12px;
     overflow: scroll;
     height: calc(100% - 40px);
 
-    div {
-        padding: 10px 0 10px 0;
+    .component-row {
+        display: flex;
+        flex-direction: column;
+        margin-left: 13px;
+        margin-right: 13px;
 
-        &:not(:nth-last-child(-n + 2)) {
+        .header {
+            display: flex;
+            padding: 10px 26px;
+            font-weight: 600;
+
+            :first-child {
+                width: 40%;
+            }
+        }
+
+        .row-separator {
+            &:not(:last-child) {
+                border-bottom: 1px solid var(--iqser-separator);
+            }
             border-bottom: 1px solid var(--iqser-separator);
-        }
-
-        &:nth-of-type(odd) {
             margin-left: 26px;
-        }
-
-        &:nth-of-type(even) {
             margin-right: 26px;
         }
     }
 
-    .table-header {
-        font-weight: 600;
-    }
+    //div {
+    //    display: flex;
+    //    flex-direction: column;
+    //    gap: 10px;
+    //
+    //    &:not(:nth-last-child(-n + 2)) {
+    //        border-bottom: 1px solid var(--iqser-separator);
+    //    }
+    //
+    //    &:nth-of-type(odd) {
+    //        margin-left: 26px;
+    //    }
+    //
+    //    &:nth-of-type(even) {
+    //        margin-right: 26px;
+    //    }
+    //}
 }
 
 //.rss-row {
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
index e50e41ef1..cf90cbbac 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
@@ -18,6 +18,7 @@ export class StructuredComponentManagementComponent {
     readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
     readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
     readonly iconButtonTypes = IconButtonTypes;
+    selectedEntry: ComponentLogEntry;
 
     constructor(
         private readonly _componentLogService: ComponentLogService,
@@ -26,6 +27,10 @@ export class StructuredComponentManagementComponent {
         readonly userPreferences: UserPreferenceService,
     ) {}
 
+    selectEntry(entry: ComponentLogEntry) {
+        this.selectedEntry = this.selectedEntry?.name !== entry.name ? entry : null;
+    }
+
     get canEdit() {
         return this.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
     }
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
index d69c27aaa..0ec9eb52f 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
@@ -75,6 +75,7 @@ import { SelectedAnnotationsListComponent } from './components/selected-annotati
 import { FileHeaderComponent } from './components/file-header/file-header.component';
 import { DocumineExportComponent } from './components/documine-export/documine-export.component';
 import { StructuredComponentManagementComponent } from './components/structured-component-management/structured-component-management.component';
+import { EditableStructuredComponentValueComponent } from './components/editable-structured-component-value/editable-structured-component-value.component';
 
 const routes: IqserRoutes = [
     {
@@ -127,6 +128,7 @@ const components = [
     FileHeaderComponent,
     DocumineExportComponent,
     StructuredComponentManagementComponent,
+    EditableStructuredComponentValueComponent,
 ];
 
 @NgModule({
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 a2b7a8376..d3393306c 100644
--- a/apps/red-ui/src/app/modules/icons/icons.module.ts
+++ b/apps/red-ui/src/app/modules/icons/icons.module.ts
@@ -29,6 +29,7 @@ export class IconsModule {
             'archive',
             'arrow-up',
             'arrow-down',
+            'arrow-right',
             'assign',
             'assign-me',
             'attribute',
@@ -41,6 +42,7 @@ export class IconsModule {
             'denied',
             'disable-analysis',
             'double-chevron-right',
+            'draggable-dots',
             'enable-analysis',
             'enter',
             'entries',
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index e73622d45..e4c35d2d1 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -250,9 +250,6 @@
     "watermarks": "Watermarks"
   },
   "analysis-disabled": "",
-  "annotation": {
-    "pending": "(Pending analysis)"
-  },
   "annotation-actions": {
     "accept-recommendation": {
       "label": "Empfehlung annehmen"
@@ -307,14 +304,14 @@
           "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!"
-        },
         "remove-hint": {
           "error": "Failed to remove hint: {error}",
           "success": "Hint removed!"
         },
+        "remove": {
+          "error": "Fehler beim Entfernen der Schwärzung: {error}",
+          "success": "Schwärzung entfernt!"
+        },
         "undo": {
           "error": "Die Aktion konnte nicht rückgängig gemacht werden. Fehler: {error}",
           "success": "erfolgreich Rückgängig gemacht"
@@ -327,15 +324,15 @@
     "remove-highlights": {
       "label": "Remove selected earmarks"
     },
-    "resize": {
-      "label": "Größe ändern"
-    },
     "resize-accept": {
       "label": "Größe speichern"
     },
     "resize-cancel": {
       "label": "Größenänderung abbrechen"
     },
+    "resize": {
+      "label": "Größe ändern"
+    },
     "see-references": {
       "label": "See references"
     },
@@ -497,6 +494,9 @@
     "xml": ""
   },
   "component-management": {
+    "actions": {
+      "edit": ""
+    },
     "components": "",
     "table-header": {
       "component": "",
@@ -563,18 +563,14 @@
     "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-file-without-analysis": {
       "confirmationText": "Approve without analysis",
       "denyText": "Cancel",
       "question": "Analysis required to detect new redactions.",
       "title": "Warning!"
     },
-    "approve-multiple-files": {
-      "question": "Mindestens eine der ausgewählten Dateien enthält ungesehene Änderungen. Möchten Sie sie trotzdem genehmigen?",
+    "approve-file": {
+      "question": "Dieses Dokument enthält ungesehene Änderungen. Möchten Sie es trotzdem genehmigen?",
       "title": "Warnung!"
     },
     "approve-multiple-files-without-analysis": {
@@ -583,6 +579,10 @@
       "question": "Analysis required to detect new redactions for at least one file.",
       "title": "Warning"
     },
+    "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": {
         "multiple": "Dieses Dokument wird gerade von einer anderen Person geprüft. Möchten Sie Reviewer werden und sich selbst dem Dokument zuweisen?",
@@ -933,13 +933,13 @@
       "recent": "Neu ({hours} h)",
       "unassigned": "Niemandem zugewiesen"
     },
-    "reanalyse": {
-      "action": "Datei analysieren"
-    },
     "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"
+    },
     "start-auto-analysis": "Enable auto-analysis",
     "stop-auto-analysis": "Stop auto-analysis",
     "table-col-names": {
@@ -1008,14 +1008,6 @@
     "total-documents": "Anzahl der Dokumente",
     "total-people": "<strong>{count}</strong> {count, plural, one{user} other {users}}"
   },
-  "dossier-templates": {
-    "label": "Dossier-Vorlagen",
-    "status": {
-      "active": "Active",
-      "inactive": "Inactive",
-      "incomplete": "Incomplete"
-    }
-  },
   "dossier-templates-listing": {
     "action": {
       "clone": "Clone template",
@@ -1051,6 +1043,14 @@
       "title": "{length} {length, plural, one{Dossier-Vorlage} other{Dossier-Vorlagen}}"
     }
   },
+  "dossier-templates": {
+    "label": "Dossier-Vorlagen",
+    "status": {
+      "active": "Active",
+      "inactive": "Inactive",
+      "incomplete": "Incomplete"
+    }
+  },
   "dossier-watermark-selector": {
     "heading": "Watermarks on documents",
     "no-watermark": "There is no watermark defined for the dossier template.<br>Contact your app admin to define one.",
@@ -1236,15 +1236,6 @@
       "title": "{length} {length, plural, one{Wörterbuch} other{Wörterbücher}}"
     }
   },
-  "entity": {
-    "info": {
-      "actions": {
-        "revert": "Revert",
-        "save": "Save changes"
-      },
-      "heading": "Edit entity"
-    }
-  },
   "entity-rules-screen": {
     "error": {
       "generic": "Something went wrong... Entity rules update failed!"
@@ -1259,19 +1250,28 @@
     "warning-text": "Warning: experimental feature!",
     "warnings-found": "{warnings, plural, one{A warning} other{{warnings} warnings}} found in rules"
   },
+  "entity": {
+    "info": {
+      "actions": {
+        "revert": "Revert",
+        "save": "Save changes"
+      },
+      "heading": "Edit entity"
+    }
+  },
   "error": {
     "deleted-entity": {
       "dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Dieses Dossier wurde gelöscht!"
       },
-      "file": {
-        "action": "Zurück zum Dossier",
-        "label": "Diese Datei wurde gelöscht!"
-      },
       "file-dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Das Dossier dieser Datei wurde gelöscht!"
+      },
+      "file": {
+        "action": "Zurück zum Dossier",
+        "label": "Diese Datei wurde gelöscht!"
       }
     },
     "file-preview": {
@@ -1289,12 +1289,6 @@
   },
   "exact-date": "{day} {month} {year} um {hour}:{minute} Uhr",
   "file": "Datei",
-  "file-attribute": {
-    "update": {
-      "error": "Failed to update file attribute value!",
-      "success": "File attribute value has been updated successfully!"
-    }
-  },
   "file-attribute-encoding-types": {
     "ascii": "ASCII",
     "iso": "ISO-8859-1",
@@ -1305,6 +1299,12 @@
     "number": "Nummer",
     "text": "Freier Text"
   },
+  "file-attribute": {
+    "update": {
+      "error": "Failed to update file attribute value!",
+      "success": "File attribute value has been updated successfully!"
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "Cancel",
     "form": {
@@ -1522,15 +1522,6 @@
       "csv": "File attributes were imported successfully from uploaded CSV file."
     }
   },
-  "filter": {
-    "analysis": "Analyse erforderlich",
-    "comment": "Kommentare",
-    "hint": "Nut Hinweise",
-    "image": "Bilder",
-    "none": "Keine Anmerkungen",
-    "redaction": "Geschwärzt",
-    "updated": "Aktualisiert"
-  },
   "filter-menu": {
     "filter-options": "Filteroptionen",
     "filter-types": "Filter",
@@ -1540,6 +1531,15 @@
     "unseen-pages": "Nur Anmerkungen auf unsichtbaren Seiten",
     "with-comments": "Nur Anmerkungen mit Kommentaren"
   },
+  "filter": {
+    "analysis": "Analyse erforderlich",
+    "comment": "Kommentare",
+    "hint": "Nut Hinweise",
+    "image": "Bilder",
+    "none": "Keine Anmerkungen",
+    "redaction": "Geschwärzt",
+    "updated": "Aktualisiert"
+  },
   "filters": {
     "assigned-people": "Beauftragt",
     "documents-status": "Documents state",
@@ -1810,13 +1810,6 @@
     "user-promoted-to-approver": "<b>{user}</b> wurde im Dossier <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b> zum Genehmiger ernannt!",
     "user-removed-as-dossier-member": "<b>{user}</b> wurde als Mitglied von: <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b>  entfernt!"
   },
-  "notifications": {
-    "button-text": "Notifications",
-    "deleted-dossier": "Deleted dossier",
-    "label": "Benachrichtigungen",
-    "mark-all-as-read": "Alle als gelesen markieren",
-    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
-  },
   "notifications-screen": {
     "category": {
       "email-notifications": "E-Mail Benachrichtigungen",
@@ -1830,6 +1823,7 @@
       "dossier": "Dossierbezogene Benachrichtigungen",
       "other": "Andere Benachrichtigungen"
     },
+    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "options": {
       "ASSIGN_APPROVER": "Wenn ich einem Dokument als Genehmiger zugewiesen bin",
       "ASSIGN_REVIEWER": "Wenn ich einem Dokument als Überprüfer zugewiesen bin",
@@ -1847,7 +1841,6 @@
       "USER_PROMOTED_TO_APPROVER": "Wenn ich Genehmiger in einem Dossier werde",
       "USER_REMOVED_AS_DOSSIER_MEMBER": "Wenn ich die Dossier-Mitgliedschaft verliere"
     },
-    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "schedule": {
       "daily": "Tägliche Zusammenfassung",
       "instant": "Sofortig",
@@ -1855,6 +1848,13 @@
     },
     "title": "Benachrichtigungseinstellungen"
   },
+  "notifications": {
+    "button-text": "Notifications",
+    "deleted-dossier": "Deleted dossier",
+    "label": "Benachrichtigungen",
+    "mark-all-as-read": "Alle als gelesen markieren",
+    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
+  },
   "ocr": {
     "confirmation-dialog": {
       "cancel": "Cancel",
@@ -1946,16 +1946,16 @@
     "warnings-subtitle": "Do not show again options",
     "warnings-title": "Prompts and dialogs settings"
   },
-  "processing": {
-    "basic": "Processing",
-    "ocr": "OCR"
-  },
   "processing-status": {
     "ocr": "OCR",
     "pending": "Pending",
     "processed": "processed",
     "processing": "Processing"
   },
+  "processing": {
+    "basic": "Processing",
+    "ocr": "OCR"
+  },
   "readonly": "Lesemodus",
   "readonly-archived": "Read only (archived)",
   "redact-text": {
@@ -2178,12 +2178,6 @@
     "red-user-admin": "Benutzer-Admin",
     "regular": "Regulär"
   },
-  "search": {
-    "active-dossiers": "ganze Plattform",
-    "all-dossiers": "all documents",
-    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
-    "this-dossier": "in diesem Dossier"
-  },
   "search-screen": {
     "cols": {
       "assignee": "Bevollmächtigter",
@@ -2207,6 +2201,12 @@
     "no-match": "Keine Dokumente entsprechen Ihren aktuellen Filtern.",
     "table-header": "{length} {length, plural, one{Suchergebnis} other{Suchergebnisse}}"
   },
+  "search": {
+    "active-dossiers": "ganze Plattform",
+    "all-dossiers": "all documents",
+    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
+    "this-dossier": "in diesem Dossier"
+  },
   "seconds": "seconds",
   "size": "Size",
   "smtp-auth-config": {
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index a94ffd831..998b480f3 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -494,6 +494,9 @@
     "xml": ""
   },
   "component-management": {
+    "actions": {
+      "edit": "Edit"
+    },
     "components": "Components",
     "table-header": {
       "component": "Component",
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index e40cbbbbf..997c472e6 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -250,9 +250,6 @@
     "watermarks": "Watermarks"
   },
   "analysis-disabled": "Analysis disabled",
-  "annotation": {
-    "pending": "(Pending analysis)"
-  },
   "annotation-actions": {
     "accept-recommendation": {
       "label": "Empfehlung annehmen"
@@ -307,14 +304,14 @@
           "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!"
-        },
         "remove-hint": {
           "error": "Failed to remove hint: {error}",
           "success": "Hint removed!"
         },
+        "remove": {
+          "error": "Fehler beim Entfernen der Schwärzung: {error}",
+          "success": "Schwärzung entfernt!"
+        },
         "undo": {
           "error": "Die Aktion konnte nicht rückgängig gemacht werden. Fehler: {error}",
           "success": "erfolgreich Rückgängig gemacht"
@@ -327,15 +324,15 @@
     "remove-highlights": {
       "label": "Remove selected earmarks"
     },
-    "resize": {
-      "label": "Größe ändern"
-    },
     "resize-accept": {
       "label": "Größe speichern"
     },
     "resize-cancel": {
       "label": "Größenänderung abbrechen"
     },
+    "resize": {
+      "label": "Größe ändern"
+    },
     "see-references": {
       "label": "See references"
     },
@@ -497,6 +494,9 @@
     "xml": "Download as XML"
   },
   "component-management": {
+    "actions": {
+      "edit": ""
+    },
     "components": "",
     "table-header": {
       "component": "",
@@ -563,18 +563,14 @@
     "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-file-without-analysis": {
       "confirmationText": "Approve without analysis",
       "denyText": "Cancel",
       "question": "Analysis required to detect new components.",
       "title": "Warning!"
     },
-    "approve-multiple-files": {
-      "question": "Mindestens eine der ausgewählten Dateien enthält ungesehene Änderungen. Möchten Sie sie trotzdem genehmigen?",
+    "approve-file": {
+      "question": "Dieses Dokument enthält ungesehene Änderungen. Möchten Sie es trotzdem genehmigen?",
       "title": "Warnung!"
     },
     "approve-multiple-files-without-analysis": {
@@ -583,6 +579,10 @@
       "question": "Analysis required to detect new components for at least one file.",
       "title": "Warning"
     },
+    "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": {
         "multiple": "Dieses Dokument wird gerade von einer anderen Person geprüft. Möchten Sie Reviewer werden und sich selbst dem Dokument zuweisen?",
@@ -933,13 +933,13 @@
       "recent": "Neu ({hours} h)",
       "unassigned": "Niemandem zugewiesen"
     },
-    "reanalyse": {
-      "action": "Datei analysieren"
-    },
     "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"
+    },
     "start-auto-analysis": "Enable auto-analysis",
     "stop-auto-analysis": "Stop auto-analysis",
     "table-col-names": {
@@ -1008,14 +1008,6 @@
     "total-documents": "Anzahl der Dokumente",
     "total-people": "<strong>{count}</strong> {count, plural, one{user} other {users}}"
   },
-  "dossier-templates": {
-    "label": "Dossier-Vorlagen",
-    "status": {
-      "active": "Active",
-      "inactive": "Inactive",
-      "incomplete": "Incomplete"
-    }
-  },
   "dossier-templates-listing": {
     "action": {
       "clone": "Clone template",
@@ -1051,6 +1043,14 @@
       "title": "{length} dossier {length, plural, one{template} other{templates}}"
     }
   },
+  "dossier-templates": {
+    "label": "Dossier-Vorlagen",
+    "status": {
+      "active": "Active",
+      "inactive": "Inactive",
+      "incomplete": "Incomplete"
+    }
+  },
   "dossier-watermark-selector": {
     "heading": "Watermarks on documents",
     "no-watermark": "There is no watermark defined for the dossier template.<br>Contact your app admin to define one.",
@@ -1236,15 +1236,6 @@
       "title": "{length} {length, plural, one{entity} other{entities}}"
     }
   },
-  "entity": {
-    "info": {
-      "actions": {
-        "revert": "Revert",
-        "save": "Save changes"
-      },
-      "heading": "Edit entity"
-    }
-  },
   "entity-rules-screen": {
     "error": {
       "generic": "Something went wrong... Entity rules update failed!"
@@ -1259,19 +1250,28 @@
     "warning-text": "Warning: experimental feature!",
     "warnings-found": "{warnings, plural, one{A warning} other{{warnings} warnings}} found in rules"
   },
+  "entity": {
+    "info": {
+      "actions": {
+        "revert": "Revert",
+        "save": "Save changes"
+      },
+      "heading": "Edit entity"
+    }
+  },
   "error": {
     "deleted-entity": {
       "dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Dieses Dossier wurde gelöscht!"
       },
-      "file": {
-        "action": "Zurück zum Dossier",
-        "label": "Diese Datei wurde gelöscht!"
-      },
       "file-dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Das Dossier dieser Datei wurde gelöscht!"
+      },
+      "file": {
+        "action": "Zurück zum Dossier",
+        "label": "Diese Datei wurde gelöscht!"
       }
     },
     "file-preview": {
@@ -1289,12 +1289,6 @@
   },
   "exact-date": "{day} {month} {year} um {hour}:{minute} Uhr",
   "file": "Datei",
-  "file-attribute": {
-    "update": {
-      "error": "Failed to update file attribute value!",
-      "success": "File attribute value has been updated successfully!"
-    }
-  },
   "file-attribute-encoding-types": {
     "ascii": "ASCII",
     "iso": "ISO-8859-1",
@@ -1305,6 +1299,12 @@
     "number": "Nummer",
     "text": "Freier Text"
   },
+  "file-attribute": {
+    "update": {
+      "error": "Failed to update file attribute value!",
+      "success": "File attribute value has been updated successfully!"
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "Cancel",
     "form": {
@@ -1522,15 +1522,6 @@
       "csv": "File attributes were imported successfully from uploaded CSV file."
     }
   },
-  "filter": {
-    "analysis": "Analyse erforderlich",
-    "comment": "Kommentare",
-    "hint": "Nut Hinweise",
-    "image": "Bilder",
-    "none": "Keine Anmerkungen",
-    "redaction": "Geschwärzt",
-    "updated": "Aktualisiert"
-  },
   "filter-menu": {
     "filter-options": "Filteroptionen",
     "filter-types": "Filter",
@@ -1540,6 +1531,15 @@
     "unseen-pages": "Nur Anmerkungen auf unsichtbaren Seiten",
     "with-comments": "Nur Anmerkungen mit Kommentaren"
   },
+  "filter": {
+    "analysis": "Analyse erforderlich",
+    "comment": "Kommentare",
+    "hint": "Nut Hinweise",
+    "image": "Bilder",
+    "none": "Keine Anmerkungen",
+    "redaction": "Geschwärzt",
+    "updated": "Aktualisiert"
+  },
   "filters": {
     "assigned-people": "Beauftragt",
     "documents-status": "Documents state",
@@ -1810,13 +1810,6 @@
     "user-promoted-to-approver": "<b>{user}</b> wurde im Dossier <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b> zum Genehmiger ernannt!",
     "user-removed-as-dossier-member": "<b>{user}</b> wurde als Mitglied von: <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b>  entfernt!"
   },
-  "notifications": {
-    "button-text": "Notifications",
-    "deleted-dossier": "Deleted dossier",
-    "label": "Benachrichtigungen",
-    "mark-all-as-read": "Alle als gelesen markieren",
-    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
-  },
   "notifications-screen": {
     "category": {
       "email-notifications": "E-Mail Benachrichtigungen",
@@ -1830,6 +1823,7 @@
       "dossier": "Dossierbezogene Benachrichtigungen",
       "other": "Andere Benachrichtigungen"
     },
+    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "options": {
       "ASSIGN_APPROVER": "Wenn ich einem Dokument als Genehmiger zugewiesen bin",
       "ASSIGN_REVIEWER": "Wenn ich einem Dokument als Überprüfer zugewiesen bin",
@@ -1847,7 +1841,6 @@
       "USER_PROMOTED_TO_APPROVER": "Wenn ich Genehmiger in einem Dossier werde",
       "USER_REMOVED_AS_DOSSIER_MEMBER": "Wenn ich die Dossier-Mitgliedschaft verliere"
     },
-    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "schedule": {
       "daily": "Tägliche Zusammenfassung",
       "instant": "Sofortig",
@@ -1855,6 +1848,13 @@
     },
     "title": "Benachrichtigungseinstellungen"
   },
+  "notifications": {
+    "button-text": "Notifications",
+    "deleted-dossier": "Deleted dossier",
+    "label": "Benachrichtigungen",
+    "mark-all-as-read": "Alle als gelesen markieren",
+    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
+  },
   "ocr": {
     "confirmation-dialog": {
       "cancel": "Cancel",
@@ -1946,16 +1946,16 @@
     "warnings-subtitle": "Do not show again options",
     "warnings-title": "Prompts and dialogs settings"
   },
-  "processing": {
-    "basic": "Processing",
-    "ocr": "OCR"
-  },
   "processing-status": {
     "ocr": "OCR",
     "pending": "Pending",
     "processed": "Processed",
     "processing": "Processing"
   },
+  "processing": {
+    "basic": "Processing",
+    "ocr": "OCR"
+  },
   "readonly": "Lesemodus",
   "readonly-archived": "Read only (archived)",
   "redact-text": {
@@ -2178,12 +2178,6 @@
     "red-user-admin": "Benutzer-Admin",
     "regular": "Regulär"
   },
-  "search": {
-    "active-dossiers": "ganze Plattform",
-    "all-dossiers": "all documents",
-    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
-    "this-dossier": "in diesem Dossier"
-  },
   "search-screen": {
     "cols": {
       "assignee": "Bevollmächtigter",
@@ -2207,6 +2201,12 @@
     "no-match": "Keine Dokumente entsprechen Ihren aktuellen Filtern.",
     "table-header": "{length} search {length, plural, one{result} other{results}}"
   },
+  "search": {
+    "active-dossiers": "ganze Plattform",
+    "all-dossiers": "all documents",
+    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
+    "this-dossier": "in diesem Dossier"
+  },
   "seconds": "seconds",
   "size": "Size",
   "smtp-auth-config": {
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index 3a3e1d37e..7aee5054d 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -494,6 +494,9 @@
     "xml": "Download as XML"
   },
   "component-management": {
+    "actions": {
+      "edit": "Edit"
+    },
     "components": "Components",
     "table-header": {
       "component": "Component",
diff --git a/apps/red-ui/src/assets/icons/general/arrow-right.svg b/apps/red-ui/src/assets/icons/general/arrow-right.svg
new file mode 100644
index 000000000..d6cb9a8ce
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/arrow-right.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+    <g>
+        <path d="M31.1,85c0.9,0.9,2,1.3,3.2,1.3s2.3-0.4,3.2-1.3l31.8-31.8c0.8-0.8,1.3-2,1.3-3.2s-0.5-2.3-1.3-3.2L37.4,15.5   c-1.8-1.7-4.6-1.7-6.4,0.1c-1.7,1.8-1.7,4.6,0.1,6.4L59.6,50L31.1,78.6C29.3,80.4,29.3,83.2,31.1,85z"/>
+    </g>
+</svg>
diff --git a/apps/red-ui/src/assets/icons/general/draggable-dots.svg b/apps/red-ui/src/assets/icons/general/draggable-dots.svg
new file mode 100644
index 000000000..d2b1d8468
--- /dev/null
+++ b/apps/red-ui/src/assets/icons/general/draggable-dots.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 width="600px" height="800px" viewBox="0 0 276.167 276.167"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M33.144,2.471C15.336,2.471,0.85,16.958,0.85,34.765s14.48,32.293,32.294,32.293s32.294-14.486,32.294-32.293
+			S50.951,2.471,33.144,2.471z"/>
+		<path d="M137.663,2.471c-17.807,0-32.294,14.487-32.294,32.294s14.487,32.293,32.294,32.293c17.808,0,32.297-14.486,32.297-32.293
+			S155.477,2.471,137.663,2.471z"/>
+		<path d="M32.3,170.539c17.807,0,32.297-14.483,32.297-32.293c0-17.811-14.49-32.297-32.297-32.297S0,120.436,0,138.246
+			C0,156.056,14.493,170.539,32.3,170.539z"/>
+		<path d="M136.819,170.539c17.804,0,32.294-14.483,32.294-32.293c0-17.811-14.478-32.297-32.294-32.297
+			c-17.813,0-32.294,14.486-32.294,32.297C104.525,156.056,119.012,170.539,136.819,170.539z"/>
+		<path d="M33.039,209.108c-17.807,0-32.3,14.483-32.3,32.294c0,17.804,14.493,32.293,32.3,32.293s32.293-14.482,32.293-32.293
+			S50.846,209.108,33.039,209.108z"/>
+		<path d="M137.564,209.108c-17.808,0-32.3,14.483-32.3,32.294c0,17.804,14.487,32.293,32.3,32.293
+			c17.804,0,32.293-14.482,32.293-32.293S155.368,209.108,137.564,209.108z"/>
+	</g>
+</g>
+</svg>

From 45a3729ae10e681d4116facf31ae945a72570992 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Sun, 21 Apr 2024 21:14:57 +0300
Subject: [PATCH 09/21] RED-8748 - WIP on component management view

---
 ...-structured-component-value.component.html | 54 +++++++++++---
 ...-structured-component-value.component.scss | 29 +++++++-
 ...le-structured-component-value.component.ts | 74 ++++++++++++++++---
 ...ctured-component-management.component.html |  6 +-
 ...ructured-component-management.component.ts | 18 ++++-
 apps/red-ui/src/assets/i18n/redact/de.json    |  7 +-
 apps/red-ui/src/assets/i18n/redact/en.json    |  7 +-
 apps/red-ui/src/assets/i18n/scm/de.json       |  7 +-
 apps/red-ui/src/assets/i18n/scm/en.json       |  7 +-
 9 files changed, 173 insertions(+), 36 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
index a6930bcd1..ca19f3835 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
@@ -1,4 +1,4 @@
-<div class="component-value" [ngClass]="{ selected: entry.name === selectedEntry?.name, editing: editing }">
+<div class="component-value" [ngClass]="{ selected: selected, editing: editing }" (click)="select()">
     <div class="component">{{ entry.name }}</div>
     <div class="value" *ngIf="!editing; else editValue">
         <div class="text">
@@ -8,7 +8,7 @@
         </div>
         <div class="actions">
             <iqser-circle-button
-                (action)="toggleEdit(entry)"
+                (action)="edit()"
                 *ngIf="canEdit"
                 [tooltip]="'component-management.actions.edit' | translate"
                 class="ml-2"
@@ -21,13 +21,45 @@
 </div>
 
 <ng-template #editValue>
-    <div *ngFor="let componentValue of entry.componentValues" class="editing-value">
-        <mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon>
-        <span> test </span>
-        <iqser-circle-button
-            [tooltip]="'component-management.actions.edit' | translate"
-            class="ml-2"
-            icon="iqser:trash"
-        ></iqser-circle-button>
-    </div>
+    <form [formGroup]="form" (submit)="save()">
+        <ng-container *ngFor="let componentValue of entry.componentValues; let index = index">
+            <div class="editing-value" *ngIf="form.get(index.toString())">
+                <mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon>
+                <div class="iqser-input-group w-400">
+                    <textarea [formControlName]="index" rows="1" type="text"></textarea>
+                </div>
+                <iqser-circle-button
+                    (action)="removeValue(index)"
+                    [tooltip]="'component-management.actions.delete' | translate"
+                    class="ml-2"
+                    icon="iqser:trash"
+                ></iqser-circle-button>
+            </div>
+        </ng-container>
+        <div class="editing-actions">
+            <iqser-icon-button
+                (action)="save()"
+                [label]="'component-management.actions.save' | translate"
+                [type]="iconButtonTypes.primary"
+            ></iqser-icon-button>
+            <div (click)="deselect($event)" class="all-caps-label cancel" translate="component-management.actions.cancel"></div>
+
+            <!--            *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"-->
+            <div class="flex right">
+                <iqser-circle-button
+                    (action)="undo(entry.originalKey)"
+                    [showDot]="true"
+                    [tooltip]="'component-management.actions.undo' | translate"
+                    class="ml-2"
+                    icon="red:undo"
+                ></iqser-circle-button>
+                <iqser-circle-button
+                    (action)="add()"
+                    [tooltip]="'component-management.actions.add' | translate"
+                    class="ml-2"
+                    icon="iqser:plus"
+                ></iqser-circle-button>
+            </div>
+        </div>
+    </form>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
index 695a92125..901d6b438 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
@@ -13,7 +13,6 @@
     .value {
         width: 60%;
         display: flex;
-        align-items: center;
 
         .text {
             width: 80%;
@@ -50,7 +49,7 @@
         position: absolute;
         right: 0;
         top: 50%;
-        transform: translateY(-50%);
+        transform: translateY(-50%) scale(0.7);
     }
 
     mat-icon {
@@ -61,10 +60,13 @@
     &.selected {
         background-color: var(--iqser-grey-8);
         border-left: 4px solid var(--iqser-primary);
-        cursor: pointer;
         margin-left: 0;
         margin-right: 0;
 
+        &:not(.editing) {
+            cursor: pointer;
+        }
+
         .component {
             margin-left: 22px;
         }
@@ -89,10 +91,31 @@
         .editing-value {
             display: flex;
             align-items: center;
+            margin: 10px 0 10px 22px;
+
+            .iqser-input-group {
+                margin-top: 0;
+
+                textarea {
+                    resize: none;
+                }
+            }
 
             .draggable {
                 cursor: grab;
             }
         }
+
+        .editing-actions {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 12px;
+            margin: 20px 10px 10px 22px;
+
+            .right {
+                margin-left: auto;
+            }
+        }
     }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
index 0131b4d68..24545fcb0 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
@@ -1,26 +1,78 @@
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ComponentLogEntry } from '@red/domain';
+import { FormBuilder, FormControl, UntypedFormGroup } from '@angular/forms';
+import { IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
-    selector: 'redaction-editable-structured-component-value [entry] [selectedEntry] [canEdit]',
+    selector: 'redaction-editable-structured-component-value [entry] [canEdit]',
     templateUrl: './editable-structured-component-value.component.html',
     styleUrls: ['/editable-structured-component-value.component.scss'],
 })
-export class EditableStructuredComponentValueComponent implements OnChanges {
+export class EditableStructuredComponentValueComponent implements OnInit {
     @Input() entry: ComponentLogEntry;
-    @Input() selectedEntry: ComponentLogEntry;
     @Input() canEdit: boolean;
-    @Output() readonly selectEntry = new EventEmitter<ComponentLogEntry>();
+    @Output() readonly deselectLast = new EventEmitter();
+
+    protected readonly iconButtonTypes = IconButtonTypes;
+
+    form: UntypedFormGroup;
+    selected = false;
     editing = false;
 
-    ngOnChanges(changes: SimpleChanges) {
-        if (changes?.selectedEntry?.currentValue) {
-            this.editing = changes.selectedEntry.currentValue.name === this.entry.name;
+    constructor(private readonly _formBuilder: FormBuilder) {}
+
+    ngOnInit() {
+        this.form = this.#getForm();
+    }
+
+    #getForm() {
+        const form = this._formBuilder.group({});
+        this.entry.componentValues.forEach((value, index) => {
+            form.addControl(index.toString(), this._formBuilder.control(value.value ?? value.originalValue));
+        });
+        return form;
+    }
+
+    select() {
+        if (!this.editing) {
+            if (this.selected) {
+                this.deselect();
+                return;
+            }
+            this.deselectLast.emit();
+            this.selected = true;
         }
     }
 
-    toggleEdit(entry?: ComponentLogEntry) {
-        this.editing = !this.editing;
-        this.selectEntry.emit(entry);
+    edit() {
+        this.deselectLast.emit();
+        this.selected = true;
+        this.editing = true;
+    }
+
+    deselect($event?: MouseEvent) {
+        $event?.stopImmediatePropagation();
+        this.selected = false;
+        this.editing = false;
+    }
+
+    removeValue(key: number) {
+        this.form.removeControl(key.toString());
+    }
+
+    save() {}
+
+    undo(originalKey: string) {}
+
+    add() {
+        const key = (Object.keys(this.form.controls).length + 1).toString();
+        this.form.addControl(key, new FormControl(''));
+        this.entry.componentValues.push({
+            value: '',
+            originalValue: '',
+            valueDescription: '',
+            componentRuleId: '',
+            entityReferences: [],
+        });
     }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
index 4e77b3e4d..bde5b1bf2 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
@@ -12,12 +12,12 @@
         <div class="row-separator"></div>
     </div>
 
-    <div *ngFor="let entry of componentLogEntries" class="component-row" (click)="selectEntry(entry)">
+    <div *ngFor="let entry of componentLogEntries" class="component-row">
         <redaction-editable-structured-component-value
+            #editableComponent
             [entry]="entry"
-            [selectedEntry]="selectedEntry"
             [canEdit]="canEdit"
-            (selectEntry)="selectEntry($event)"
+            (deselectLast)="deselectLast()"
         ></redaction-editable-structured-component-value>
         <div class="row-separator"></div>
     </div>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
index cf90cbbac..1191df27a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
@@ -1,10 +1,16 @@
-import { Component, Input, signal } from '@angular/core';
+import { Component, Input, QueryList, signal, ViewChildren } from '@angular/core';
 import { ComponentLogEntry, Dictionary, File, WorkflowFileStatuses } from '@red/domain';
 import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { ComponentLogService } from '@services/files/component-log.service';
 import { FilesMapService } from '@services/files/files-map.service';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { firstValueFrom } from 'rxjs';
+import { List } from '@common-ui/utils';
+import { EditableStructuredComponentValueComponent } from '../editable-structured-component-value/editable-structured-component-value.component';
+
+interface DeselectEvent {
+    name: string;
+}
 
 @Component({
     selector: 'redaction-structured-component-management',
@@ -15,10 +21,11 @@ export class StructuredComponentManagementComponent {
     @Input() file: File;
     @Input() dictionaries: Dictionary[];
 
+    @ViewChildren('editableComponent') editableComponents: List<EditableStructuredComponentValueComponent>;
+
     readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
     readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
     readonly iconButtonTypes = IconButtonTypes;
-    selectedEntry: ComponentLogEntry;
 
     constructor(
         private readonly _componentLogService: ComponentLogService,
@@ -27,8 +34,11 @@ export class StructuredComponentManagementComponent {
         readonly userPreferences: UserPreferenceService,
     ) {}
 
-    selectEntry(entry: ComponentLogEntry) {
-        this.selectedEntry = this.selectedEntry?.name !== entry.name ? entry : null;
+    deselectLast() {
+        const lastSelected = this.editableComponents.find(c => c.selected);
+        if (lastSelected) {
+            lastSelected.deselect();
+        }
     }
 
     get canEdit() {
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 1aa05e456..71b4cddbb 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -495,7 +495,12 @@
   },
   "component-management": {
     "actions": {
-      "edit": ""
+      "add": "",
+      "cancel": "",
+      "delete": "",
+      "edit": "",
+      "save": "",
+      "undo": ""
     },
     "components": "",
     "table-header": {
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 09ea9f10e..73321e5f0 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -495,7 +495,12 @@
   },
   "component-management": {
     "actions": {
-      "edit": "Edit"
+      "add": "Add",
+      "cancel": "Cancel",
+      "delete": "Remove value",
+      "edit": "Edit",
+      "save": "Save",
+      "undo": "Undo"
     },
     "components": "Components",
     "table-header": {
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index 3a94f7c25..af906e040 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -495,7 +495,12 @@
   },
   "component-management": {
     "actions": {
-      "edit": ""
+      "add": "",
+      "cancel": "",
+      "delete": "",
+      "edit": "",
+      "save": "",
+      "undo": ""
     },
     "components": "",
     "table-header": {
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index ae141c18d..439ae5836 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -495,7 +495,12 @@
   },
   "component-management": {
     "actions": {
-      "edit": "Edit"
+      "add": "Add",
+      "cancel": "Cancel",
+      "delete": "Remove value",
+      "edit": "Edit",
+      "save": "Save",
+      "undo": "Undo"
     },
     "components": "Components",
     "table-header": {

From f709edb2ee68750262df1810fd63c35cbacc4108 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Wed, 24 Apr 2024 21:48:35 +0300
Subject: [PATCH 10/21] RED-8748 - WIP on filtering components

---
 .../annotation-card.component.html            |  4 +-
 .../annotation-card.component.scss            |  7 ++++
 .../annotation-card.component.ts              |  6 ++-
 .../annotations-list.component.html           |  1 +
 .../annotations-list.component.scss           |  3 +-
 .../annotations-list.component.ts             |  3 +-
 ...-structured-component-value.component.html | 23 +++++-----
 ...-structured-component-value.component.scss | 35 ++++++++++++++--
 ...le-structured-component-value.component.ts | 42 +++++++++----------
 ...ctured-component-management.component.html |  2 +-
 ...ructured-component-management.component.ts | 12 +++++-
 .../file-preview/file-preview-providers.ts    |  2 +
 .../services/component-log-filter.service.ts  | 29 +++++++++++++
 apps/red-ui/src/app/utils/filter-utils.ts     |  4 +-
 14 files changed, 125 insertions(+), 48 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts

diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.html b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.html
index 50a482417..e017c7e41 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.html
@@ -6,7 +6,7 @@
         class="mt-6 mr-10"
     ></redaction-annotation-icon>
 
-    <div class="flex-1">
+    <div [class.flex-1]="!isDocumine">
         <div>
             <strong>{{ annotation.superTypeLabel | translate }}</strong>
             &nbsp;
@@ -15,7 +15,7 @@
             </strong>
         </div>
 
-        <div *ngIf="annotation.typeLabel">
+        <div *ngIf="annotation.typeLabel" [class.type-label]="isDocumine">
             <strong>
                 <span>{{ annotation.descriptor | translate }}</span
                 >:
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.scss
index 79b889eaf..6be337063 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.scss
@@ -3,6 +3,13 @@
     position: relative;
     font-size: 11px;
     line-height: 14px;
+
+    .type-label {
+        width: 130px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
 }
 
 .active-icon-marker-container {
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
index 8fb71348f..20c573ffd 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
@@ -3,6 +3,7 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { annotationTypesTranslations } from '@translations/annotation-types-translations';
 import { Roles } from '@users/roles';
+import { getConfig } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-annotation-card',
@@ -10,8 +11,9 @@ import { Roles } from '@users/roles';
     styleUrls: ['./annotation-card.component.scss'],
 })
 export class AnnotationCardComponent {
-    readonly roles = Roles;
-    readonly annotationTypesTranslations = annotationTypesTranslations;
+    protected readonly roles = Roles;
+    protected readonly annotationTypesTranslations = annotationTypesTranslations;
+    protected readonly isDocumine = getConfig().IS_DOCUMINE;
     @Input() annotation: AnnotationWrapper;
     @Input() isSelected = false;
 
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.html b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.html
index 1d960a7ab..c62243644 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.html
@@ -8,6 +8,7 @@
         (click)="annotationClicked(annotation.item, $event)"
         [annotation]="annotation"
         [id]="'annotation-' + annotation.item.id"
+        [class.documine-wrapper]="isDocumine"
     ></redaction-annotation-wrapper>
 </ng-container>
 
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss
index 5f41248b8..1623da0aa 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.scss
@@ -10,7 +10,8 @@
         @include common-mixins.scroll-bar;
     }
 
-    &.has-scrollbar:hover redaction-annotation-wrapper::ng-deep {
+    &.has-scrollbar:hover redaction-annotation-wrapper::ng-deep,
+    &::ng-deep.documine-wrapper {
         .annotation {
             padding-right: 5px;
         }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts
index e1a7a033b..0ef4a6d48 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, computed, ElementRef, EventEmitter, Input, Output } from '@angular/core';
-import { HasScrollbarDirective } from '@iqser/common-ui';
+import { getConfig, HasScrollbarDirective } from '@iqser/common-ui';
 import { FilterService } from '@iqser/common-ui/lib/filtering';
 import { IqserEventTarget } from '@iqser/common-ui/lib/utils';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
@@ -26,6 +26,7 @@ export class AnnotationsListComponent extends HasScrollbarDirective {
         }
         return [] as EarmarkGroup[];
     });
+    protected readonly isDocumine = getConfig().IS_DOCUMINE;
 
     constructor(
         protected readonly _elementRef: ElementRef,
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
index ca19f3835..25abd1b20 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
@@ -11,10 +11,9 @@
                 (action)="edit()"
                 *ngIf="canEdit"
                 [tooltip]="'component-management.actions.edit' | translate"
-                class="ml-2"
                 icon="iqser:edit"
             ></iqser-circle-button>
-            <div class="changes-dot"></div>
+            <div class="changes-dot" *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"></div>
         </div>
     </div>
     <mat-icon *ngIf="!editing" class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
@@ -22,41 +21,41 @@
 
 <ng-template #editValue>
     <form [formGroup]="form" (submit)="save()">
-        <ng-container *ngFor="let componentValue of entry.componentValues; let index = index">
-            <div class="editing-value" *ngIf="form.get(index.toString())">
+        <ng-container *ngFor="let control of form.controls | keyvalue">
+            <div class="editing-value">
                 <mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon>
-                <div class="iqser-input-group w-400">
-                    <textarea [formControlName]="index" rows="1" type="text"></textarea>
+                <div class="iqser-input-group w-full">
+                    <textarea [formControlName]="control.key" rows="1" type="text"></textarea>
                 </div>
                 <iqser-circle-button
-                    (action)="removeValue(index)"
+                    (action)="removeValue(control.key)"
                     [tooltip]="'component-management.actions.delete' | translate"
-                    class="ml-2"
+                    class="remove-value"
                     icon="iqser:trash"
                 ></iqser-circle-button>
             </div>
         </ng-container>
         <div class="editing-actions">
             <iqser-icon-button
+                [disabled]="disabled"
                 (action)="save()"
                 [label]="'component-management.actions.save' | translate"
                 [type]="iconButtonTypes.primary"
             ></iqser-icon-button>
             <div (click)="deselect($event)" class="all-caps-label cancel" translate="component-management.actions.cancel"></div>
-
-            <!--            *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"-->
             <div class="flex right">
                 <iqser-circle-button
+                    *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"
                     (action)="undo(entry.originalKey)"
                     [showDot]="true"
                     [tooltip]="'component-management.actions.undo' | translate"
-                    class="ml-2"
+                    class="undo-value"
                     icon="red:undo"
                 ></iqser-circle-button>
                 <iqser-circle-button
                     (action)="add()"
                     [tooltip]="'component-management.actions.add' | translate"
-                    class="ml-2"
+                    class="add-value"
                     icon="iqser:plus"
                 ></iqser-circle-button>
             </div>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
index 901d6b438..5f619e3a6 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
@@ -90,18 +90,26 @@
 
         .editing-value {
             display: flex;
-            align-items: center;
             margin: 10px 0 10px 22px;
 
             .iqser-input-group {
                 margin-top: 0;
 
-                textarea {
-                    resize: none;
+                textarea::-webkit-resizer {
+                    display: none;
+                }
+
+                textarea::-moz-resizer {
+                    display: none;
                 }
             }
 
+            iqser-circle-button {
+                margin-top: 3px;
+            }
+
             .draggable {
+                margin-top: 7px;
                 cursor: grab;
             }
         }
@@ -111,11 +119,30 @@
             flex-direction: row;
             align-items: center;
             gap: 12px;
-            margin: 20px 10px 10px 22px;
+            margin: 30px 10px 10px 22px;
 
             .right {
                 margin-left: auto;
+                gap: 10px;
             }
         }
     }
 }
+
+::ng-deep .add-value {
+    mat-icon {
+        transform: scale(2);
+    }
+}
+
+::ng-deep .undo-value {
+    mat-icon {
+        transform: scale(1.3);
+    }
+}
+
+::ng-deep .remove-value {
+    mat-icon {
+        transform: scale(1.2);
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
index 24545fcb0..e4bb4783e 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
@@ -1,36 +1,29 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ComponentLogEntry } from '@red/domain';
 import { FormBuilder, FormControl, UntypedFormGroup } from '@angular/forms';
-import { IconButtonTypes } from '@iqser/common-ui';
+import { BaseFormComponent } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-editable-structured-component-value [entry] [canEdit]',
     templateUrl: './editable-structured-component-value.component.html',
     styleUrls: ['/editable-structured-component-value.component.scss'],
 })
-export class EditableStructuredComponentValueComponent implements OnInit {
+export class EditableStructuredComponentValueComponent extends BaseFormComponent implements OnInit {
     @Input() entry: ComponentLogEntry;
     @Input() canEdit: boolean;
     @Output() readonly deselectLast = new EventEmitter();
 
-    protected readonly iconButtonTypes = IconButtonTypes;
-
     form: UntypedFormGroup;
     selected = false;
     editing = false;
 
-    constructor(private readonly _formBuilder: FormBuilder) {}
+    constructor(private readonly _formBuilder: FormBuilder) {
+        super();
+    }
 
     ngOnInit() {
         this.form = this.#getForm();
-    }
-
-    #getForm() {
-        const form = this._formBuilder.group({});
-        this.entry.componentValues.forEach((value, index) => {
-            form.addControl(index.toString(), this._formBuilder.control(value.value ?? value.originalValue));
-        });
-        return form;
+        this.initialFormValue = this.form.getRawValue();
     }
 
     select() {
@@ -56,23 +49,26 @@ export class EditableStructuredComponentValueComponent implements OnInit {
         this.editing = false;
     }
 
-    removeValue(key: number) {
-        this.form.removeControl(key.toString());
+    removeValue(key: string) {
+        this.form.removeControl(key);
     }
 
-    save() {}
+    async save() {
+        const value = this.form.getRawValue();
+    }
 
     undo(originalKey: string) {}
 
     add() {
-        const key = (Object.keys(this.form.controls).length + 1).toString();
+        const key = Object.keys(this.form.controls).length.toString();
         this.form.addControl(key, new FormControl(''));
-        this.entry.componentValues.push({
-            value: '',
-            originalValue: '',
-            valueDescription: '',
-            componentRuleId: '',
-            entityReferences: [],
+    }
+
+    #getForm() {
+        const form = this._formBuilder.group({});
+        this.entry.componentValues.forEach((value, index) => {
+            form.addControl(index.toString(), this._formBuilder.control(value.value ?? value.originalValue));
         });
+        return form;
     }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
index bde5b1bf2..ce7af1ab5 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
@@ -1,6 +1,6 @@
 <div class="components-header">
     <span [translate]="'component-management.components'"></span>
-    <iqser-popup-filter [primaryFiltersSlug]="'primaryFilters'" [secondaryFiltersSlug]="'secondaryFilters'"></iqser-popup-filter>
+    <iqser-popup-filter [primaryFiltersSlug]="'componentLogFilters'"></iqser-popup-filter>
 </div>
 
 <div *ngIf="componentLogData() as componentLogEntries" class="components-container">
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
index 1191df27a..664e8c63d 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, QueryList, signal, ViewChildren } from '@angular/core';
+import { Component, Input, signal, ViewChildren } from '@angular/core';
 import { ComponentLogEntry, Dictionary, File, WorkflowFileStatuses } from '@red/domain';
 import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { ComponentLogService } from '@services/files/component-log.service';
@@ -7,6 +7,8 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { firstValueFrom } from 'rxjs';
 import { List } from '@common-ui/utils';
 import { EditableStructuredComponentValueComponent } from '../editable-structured-component-value/editable-structured-component-value.component';
+import { FilterService } from '@common-ui/filtering';
+import { ComponentLogFilterService } from '../../services/component-log-filter.service';
 
 interface DeselectEvent {
     name: string;
@@ -31,6 +33,8 @@ export class StructuredComponentManagementComponent {
         private readonly _componentLogService: ComponentLogService,
         private readonly _filesMapService: FilesMapService,
         private readonly _loadingService: LoadingService,
+        private readonly _componentLogFilterService: ComponentLogFilterService,
+        private readonly _filterService: FilterService,
         readonly userPreferences: UserPreferenceService,
     ) {}
 
@@ -100,6 +104,7 @@ export class StructuredComponentManagementComponent {
         const componentLogData = await firstValueFrom(
             this._componentLogService.getComponentLogData(this.file.dossierTemplateId, this.file.dossierId, this.file.fileId),
         );
+        this.#computeFilters(componentLogData);
         this.#updateDisplayValue(componentLogData);
         this.componentLogData.set(componentLogData);
         this._loadingService.stop();
@@ -120,4 +125,9 @@ export class StructuredComponentManagementComponent {
             }
         }
     }
+
+    #computeFilters(componentLogs: ComponentLogEntry[]) {
+        const filterGroups = this._componentLogFilterService.filterGroups(componentLogs);
+        this._filterService.addFilterGroups(filterGroups);
+    }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-providers.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-providers.ts
index e809b6ab5..e4abcaae4 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-providers.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-providers.ts
@@ -16,6 +16,7 @@ import { PdfProxyService } from './services/pdf-proxy.service';
 import { SkippedService } from './services/skipped.service';
 import { StampService } from './services/stamp.service';
 import { ViewModeService } from './services/view-mode.service';
+import { ComponentLogFilterService } from './services/component-log-filter.service';
 
 export const filePreviewScreenProviders = [
     FilterService,
@@ -38,4 +39,5 @@ export const filePreviewScreenProviders = [
     SearchService,
     StampService,
     PdfProxyService,
+    ComponentLogFilterService,
 ];
diff --git a/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts b/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts
new file mode 100644
index 000000000..77360f0a6
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { ComponentLogEntry } from '@red/domain';
+import { NestedFilter } from '@common-ui/filtering';
+import { componentLogChecker } from '@utils/filter-utils';
+
+@Injectable()
+export class ComponentLogFilterService {
+    filterGroups(entities: ComponentLogEntry[]) {
+        const allDistinctComponentLogs = new Set<string>();
+
+        entities?.forEach(entry => allDistinctComponentLogs.add(entry.name));
+
+        const componentLogFilters = [...allDistinctComponentLogs].map(
+            id =>
+                new NestedFilter({
+                    id: id,
+                    label: id,
+                }),
+        );
+
+        return [
+            {
+                slug: 'componentLogFilters',
+                filters: componentLogFilters,
+                checker: componentLogChecker,
+            },
+        ];
+    }
+}
diff --git a/apps/red-ui/src/app/utils/filter-utils.ts b/apps/red-ui/src/app/utils/filter-utils.ts
index 68bf58595..8793b9e0e 100644
--- a/apps/red-ui/src/app/utils/filter-utils.ts
+++ b/apps/red-ui/src/app/utils/filter-utils.ts
@@ -1,5 +1,5 @@
 import { handleCheckedValue, INestedFilter } from '@iqser/common-ui/lib/filtering';
-import { Dossier, File, User, UserType } from '@red/domain';
+import { ComponentLogEntry, Dossier, File, User, UserType } from '@red/domain';
 
 export function handleFilterDelta(oldFilters: INestedFilter[], newFilters: INestedFilter[], allFilters: INestedFilter[]) {
     const newFiltersDelta = {};
@@ -84,6 +84,8 @@ export const dossierTemplateChecker = (dw: Dossier, filter: INestedFilter) => dw
 export const dossierStateChecker = (dw: Dossier, filter: INestedFilter) =>
     dw.dossierStatusId === (filter.id === 'undefined' ? null : filter.id);
 
+export const componentLogChecker = (componentLogEntry: ComponentLogEntry, filter: INestedFilter) => componentLogEntry.name === filter.id;
+
 export const userTypeFilters: { [key in UserType]: (user: User) => boolean } = {
     INACTIVE: (user: User) => !user.hasAnyRole,
     REGULAR: (user: User) => user.roles.length === 1 && user.roles[0] === 'RED_USER',

From c2f40a8d507e399452e2318e580ee93119f94861 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 29 Apr 2024 22:22:01 +0300
Subject: [PATCH 11/21] RED-8748 - filtered components using popup filter,
 filtered annotations based on selected component, wip on revert value dialog

---
 ...-structured-component-value.component.html |  2 +-
 ...le-structured-component-value.component.ts | 29 ++++++++-
 ...ctured-component-management.component.html |  4 +-
 ...ructured-component-management.component.ts | 64 +++++++++----------
 .../revert-value-dialog.component.html        | 19 ++++++
 .../revert-value-dialog.component.scss        |  0
 .../revert-value-dialog.component.ts          | 20 ++++++
 .../services/component-log-filter.service.ts  | 20 +++++-
 .../edit-dictionary-dialog.component.ts       |  2 -
 .../services/files/component-log.service.ts   | 24 ++++++-
 apps/red-ui/src/app/utils/filter-utils.ts     |  2 -
 apps/red-ui/src/assets/i18n/redact/de.json    |  8 +++
 apps/red-ui/src/assets/i18n/redact/en.json    |  7 ++
 apps/red-ui/src/assets/i18n/scm/de.json       |  8 +++
 apps/red-ui/src/assets/i18n/scm/en.json       |  7 ++
 libs/common-ui                                |  2 +-
 16 files changed, 170 insertions(+), 48 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html
 create mode 100644 apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.scss
 create mode 100644 apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts

diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
index 25abd1b20..98be17cc8 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
@@ -46,7 +46,7 @@
             <div class="flex right">
                 <iqser-circle-button
                     *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"
-                    (action)="undo(entry.originalKey)"
+                    (action)="undo()"
                     [showDot]="true"
                     [tooltip]="'component-management.actions.undo' | translate"
                     class="undo-value"
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
index e4bb4783e..a7dbe1971 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
@@ -1,7 +1,9 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ComponentLogEntry } from '@red/domain';
 import { FormBuilder, FormControl, UntypedFormGroup } from '@angular/forms';
-import { BaseFormComponent } from '@iqser/common-ui';
+import { BaseFormComponent, IqserDialog } from '@iqser/common-ui';
+import { FilterService } from '@common-ui/filtering';
+import { RevertValueDialogComponent } from '../../dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component';
 
 @Component({
     selector: 'redaction-editable-structured-component-value [entry] [canEdit]',
@@ -17,7 +19,11 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
     selected = false;
     editing = false;
 
-    constructor(private readonly _formBuilder: FormBuilder) {
+    constructor(
+        private readonly _formBuilder: FormBuilder,
+        private readonly _filtersService: FilterService,
+        private readonly _iqserDialog: IqserDialog,
+    ) {
         super();
     }
 
@@ -34,6 +40,7 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
             }
             this.deselectLast.emit();
             this.selected = true;
+            this.#setWorkloadFilters();
         }
     }
 
@@ -47,6 +54,7 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
         $event?.stopImmediatePropagation();
         this.selected = false;
         this.editing = false;
+        this._filtersService.deactivateFilters({ primaryFiltersSlug: 'primaryFilters' });
     }
 
     removeValue(key: string) {
@@ -57,7 +65,9 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
         const value = this.form.getRawValue();
     }
 
-    undo(originalKey: string) {}
+    undo() {
+        this._iqserDialog.openDefault(RevertValueDialogComponent);
+    }
 
     add() {
         const key = Object.keys(this.form.controls).length.toString();
@@ -71,4 +81,17 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
         });
         return form;
     }
+
+    #setWorkloadFilters() {
+        this._filtersService.deactivateFilters({ primaryFiltersSlug: 'primaryFilters' });
+
+        const filterGroup = this._filtersService.getGroup('primaryFilters');
+        for (const filter of filterGroup.filters) {
+            const nestedFilter = filter.children.find(f => f.label === this.entry.name);
+            if (nestedFilter) {
+                this._filtersService.filterCheckboxClicked({ nestedFilter, filterGroup, primaryFiltersSlug: 'primaryFilters' });
+                return;
+            }
+        }
+    }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
index ce7af1ab5..bb8ee916b 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
@@ -3,7 +3,7 @@
     <iqser-popup-filter [primaryFiltersSlug]="'componentLogFilters'"></iqser-popup-filter>
 </div>
 
-<div *ngIf="componentLogData() as componentLogEntries" class="components-container">
+<div *ngIf="displayedComponents$ | async as displayedComponents" class="components-container">
     <div class="component-row">
         <div class="header">
             <div class="component">{{ 'component-management.table-header.component' | translate }}</div>
@@ -12,7 +12,7 @@
         <div class="row-separator"></div>
     </div>
 
-    <div *ngFor="let entry of componentLogEntries" class="component-row">
+    <div *ngFor="let entry of displayedComponents" class="component-row">
         <redaction-editable-structured-component-value
             #editableComponent
             [entry]="entry"
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
index 664e8c63d..3fa44b075 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
@@ -1,33 +1,31 @@
-import { Component, Input, signal, ViewChildren } from '@angular/core';
+import { Component, Input, OnInit, signal, ViewChildren } from '@angular/core';
 import { ComponentLogEntry, Dictionary, File, WorkflowFileStatuses } from '@red/domain';
 import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { ComponentLogService } from '@services/files/component-log.service';
 import { FilesMapService } from '@services/files/files-map.service';
 import { UserPreferenceService } from '@users/user-preference.service';
-import { firstValueFrom } from 'rxjs';
+import { combineLatest, firstValueFrom, Observable } from 'rxjs';
 import { List } from '@common-ui/utils';
 import { EditableStructuredComponentValueComponent } from '../editable-structured-component-value/editable-structured-component-value.component';
 import { FilterService } from '@common-ui/filtering';
 import { ComponentLogFilterService } from '../../services/component-log-filter.service';
-
-interface DeselectEvent {
-    name: string;
-}
+import { map } from 'rxjs/operators';
 
 @Component({
     selector: 'redaction-structured-component-management',
     templateUrl: './structured-component-management.component.html',
     styleUrls: ['/structured-component-management.component.scss'],
 })
-export class StructuredComponentManagementComponent {
+export class StructuredComponentManagementComponent implements OnInit {
     @Input() file: File;
     @Input() dictionaries: Dictionary[];
 
     @ViewChildren('editableComponent') editableComponents: List<EditableStructuredComponentValueComponent>;
 
-    readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
-    readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
-    readonly iconButtonTypes = IconButtonTypes;
+    protected readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
+    protected readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
+    protected readonly iconButtonTypes = IconButtonTypes;
+    protected displayedComponents$: Observable<ComponentLogEntry[]>;
 
     constructor(
         private readonly _componentLogService: ComponentLogService,
@@ -38,6 +36,24 @@ export class StructuredComponentManagementComponent {
         readonly userPreferences: UserPreferenceService,
     ) {}
 
+    async ngOnInit(): Promise<void> {
+        await this.#loadData();
+        this.displayedComponents$ = this.#displayedComponents$();
+    }
+
+    #displayedComponents$() {
+        const componentLogData$ = this._componentLogService.getComponentLogData(
+            this.file.dossierTemplateId,
+            this.file.dossierId,
+            this.file.fileId,
+            this.dictionaries,
+        );
+        const componentLogFilters$ = this._filterService.getFilterModels$('componentLogFilters');
+        return combineLatest([componentLogData$, componentLogFilters$]).pipe(
+            map(([components, filters]) => this._componentLogFilterService.filterComponents(components, filters)),
+        );
+    }
+
     deselectLast() {
         const lastSelected = this.editableComponents.find(c => c.selected);
         if (lastSelected) {
@@ -49,10 +65,6 @@ export class StructuredComponentManagementComponent {
         return this.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
     }
 
-    async ngOnInit(): Promise<void> {
-        await this.#loadData();
-    }
-
     getValueCellId(index: number) {
         return `value-cell-${index}`;
     }
@@ -102,30 +114,18 @@ export class StructuredComponentManagementComponent {
     async #loadData(): Promise<void> {
         this._loadingService.start();
         const componentLogData = await firstValueFrom(
-            this._componentLogService.getComponentLogData(this.file.dossierTemplateId, this.file.dossierId, this.file.fileId),
+            this._componentLogService.getComponentLogData(
+                this.file.dossierTemplateId,
+                this.file.dossierId,
+                this.file.fileId,
+                this.dictionaries,
+            ),
         );
         this.#computeFilters(componentLogData);
-        this.#updateDisplayValue(componentLogData);
         this.componentLogData.set(componentLogData);
         this._loadingService.stop();
     }
 
-    #updateDisplayValue(componentLogs: ComponentLogEntry[]) {
-        const dictionaries = this.dictionaries;
-        for (const componentLog of componentLogs) {
-            let foundDictionary: Dictionary;
-            for (const reference of componentLog.componentValues[0].entityReferences) {
-                if (foundDictionary) {
-                    reference.displayValue = foundDictionary.label;
-                    continue;
-                }
-                foundDictionary = dictionaries.find(dict => dict.type === reference.type);
-                foundDictionary = foundDictionary ?? ({ label: reference.type } as Dictionary);
-                reference.displayValue = foundDictionary.label;
-            }
-        }
-    }
-
     #computeFilters(componentLogs: ComponentLogEntry[]) {
         const filterGroups = this._componentLogFilterService.filterGroups(componentLogs);
         this._filterService.addFilterGroups(filterGroups);
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html
new file mode 100644
index 000000000..51f7d5a57
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html
@@ -0,0 +1,19 @@
+<section class="dialog">
+    <form (submit)="save()">
+        <div [translate]="'revert-value-dialog.title'" class="dialog-header heading-l"></div>
+
+        <div class="dialog-content"></div>
+
+        <div class="dialog-actions">
+            <iqser-icon-button
+                [label]="'revert-value-dialog.actions.revert' | translate"
+                [submit]="true"
+                [type]="iconButtonTypes.primary"
+            />
+
+            <div [translate]="'revert-value-dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
+        </div>
+    </form>
+
+    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close" />
+</section>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts
new file mode 100644
index 000000000..779f7003c
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { CircleButtonComponent, IconButtonComponent, IqserDialogComponent } from '@iqser/common-ui';
+import { MatDialogClose } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+
+interface RevertValueData {}
+interface RevertValueResult {}
+
+@Component({
+    templateUrl: 'revert-value-dialog.component.html',
+    styleUrls: ['./revert-value-dialog.component.scss'],
+    standalone: true,
+    imports: [CircleButtonComponent, IconButtonComponent, MatDialogClose, TranslateModule],
+})
+export class RevertValueDialogComponent extends IqserDialogComponent<RevertValueDialogComponent, RevertValueData, RevertValueResult> {
+    constructor() {
+        super();
+    }
+    save() {}
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts b/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts
index 77360f0a6..85e8fccd5 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts
@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { ComponentLogEntry } from '@red/domain';
-import { NestedFilter } from '@common-ui/filtering';
-import { componentLogChecker } from '@utils/filter-utils';
+import { INestedFilter, NestedFilter } from '@common-ui/filtering';
 
 @Injectable()
 export class ComponentLogFilterService {
@@ -22,8 +21,23 @@ export class ComponentLogFilterService {
             {
                 slug: 'componentLogFilters',
                 filters: componentLogFilters,
-                checker: componentLogChecker,
             },
         ];
     }
+
+    filterComponents(components: ComponentLogEntry[], filters: INestedFilter[]) {
+        const someFiltersChecked = !!filters.find(f => f.checked);
+        if (!someFiltersChecked) {
+            return components;
+        }
+
+        const checkedFiltersIds = filters.reduce((ids, f) => {
+            if (f.checked) {
+                ids.push(f.id);
+            }
+            return ids;
+        }, []);
+
+        return components.filter(c => checkedFiltersIds.includes(c.name));
+    }
 }
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dictionary-dialog/edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dictionary-dialog/edit-dictionary-dialog.component.ts
index f5f16cb34..e067c2f5f 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dictionary-dialog/edit-dictionary-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dictionary-dialog/edit-dictionary-dialog.component.ts
@@ -76,6 +76,4 @@ export class EditDictionaryDialogComponent extends IqserDialogComponent<EditDict
         this._loadingService.stop();
         this.close(this.form.value as ReturnType);
     }
-
-    protected readonly iconButtonTypes = IconButtonTypes;
 }
diff --git a/apps/red-ui/src/app/services/files/component-log.service.ts b/apps/red-ui/src/app/services/files/component-log.service.ts
index 003efcf4f..03f2117c3 100644
--- a/apps/red-ui/src/app/services/files/component-log.service.ts
+++ b/apps/red-ui/src/app/services/files/component-log.service.ts
@@ -4,8 +4,9 @@ import { catchError, map, tap } from 'rxjs/operators';
 import { Observable, of } from 'rxjs';
 import { HttpHeaders } from '@angular/common/http';
 import { saveAs } from 'file-saver';
-import { ComponentDetails, ComponentLogEntry, IComponentLogData, IComponentLogEntry, IFile } from '@red/domain';
+import { ComponentDetails, ComponentLogEntry, Dictionary, IComponentLogData, IComponentLogEntry, IFile } from '@red/domain';
 import { mapEach } from '@common-ui/utils';
+import { FilePreviewStateService } from '../../modules/file-preview/services/file-preview-state.service';
 
 @Injectable({ providedIn: 'root' })
 export class ComponentLogService extends GenericService<void> {
@@ -34,12 +35,18 @@ export class ComponentLogService extends GenericService<void> {
         );
     }
 
-    getComponentLogData(dossierTemplateId: string, dossierId: string, fileId: string): Observable<ComponentLogEntry[]> {
+    getComponentLogData(
+        dossierTemplateId: string,
+        dossierId: string,
+        fileId: string,
+        dictionaries: Dictionary[],
+    ): Observable<ComponentLogEntry[]> {
         return this.#componentLogRequest(dossierTemplateId, dossierId, fileId).pipe(
             map(data => data.componentDetails),
             catchError(() => of({} as ComponentDetails)),
             map(componentDetails => this.#mapComponentDetails(componentDetails)),
             mapEach(log => new ComponentLogEntry(log)),
+            map(log => this.#updateDisplayValue(log, dictionaries)),
         );
     }
 
@@ -91,4 +98,17 @@ export class ComponentLogService extends GenericService<void> {
     #mapComponentDetails(componentDetails: ComponentDetails): IComponentLogEntry[] {
         return Object.keys(componentDetails).reduce((res, key) => (res.push(componentDetails[key]), res), []);
     }
+
+    #updateDisplayValue(componentLogs: ComponentLogEntry[], dictionaries: Dictionary[]): ComponentLogEntry[] {
+        for (const componentLog of componentLogs) {
+            for (const componentValue of componentLog.componentValues) {
+                for (const reference of componentValue.entityReferences) {
+                    const foundDictionary =
+                        dictionaries.find(dict => dict.type === reference.type) ?? ({ label: reference.type } as Dictionary);
+                    reference.displayValue = foundDictionary.label;
+                }
+            }
+        }
+        return componentLogs;
+    }
 }
diff --git a/apps/red-ui/src/app/utils/filter-utils.ts b/apps/red-ui/src/app/utils/filter-utils.ts
index 8793b9e0e..c7b1439fd 100644
--- a/apps/red-ui/src/app/utils/filter-utils.ts
+++ b/apps/red-ui/src/app/utils/filter-utils.ts
@@ -84,8 +84,6 @@ export const dossierTemplateChecker = (dw: Dossier, filter: INestedFilter) => dw
 export const dossierStateChecker = (dw: Dossier, filter: INestedFilter) =>
     dw.dossierStatusId === (filter.id === 'undefined' ? null : filter.id);
 
-export const componentLogChecker = (componentLogEntry: ComponentLogEntry, filter: INestedFilter) => componentLogEntry.name === filter.id;
-
 export const userTypeFilters: { [key in UserType]: (user: User) => boolean } = {
     INACTIVE: (user: User) => !user.hasAnyRole,
     REGULAR: (user: User) => user.roles.length === 1 && user.roles[0] === 'RED_USER',
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 09d830a41..0e26ac601 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -367,6 +367,7 @@
   "annotation": {
     "pending": "(Pending analysis)"
   },
+  "annotations": "",
   "archived-dossiers-listing": {
     "no-data": {
       "title": "No archived dossiers."
@@ -2182,6 +2183,13 @@
       "header": "Resize {type}"
     }
   },
+  "revert-value-dialog": {
+    "actions": {
+      "cancel": "",
+      "revert": ""
+    },
+    "title": ""
+  },
   "roles": {
     "inactive": "Inaktiv",
     "manager-admin": "Manager & admin",
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 35fcded6d..e86ebf3a0 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -2183,6 +2183,13 @@
       "header": "Resize {type}"
     }
   },
+  "revert-value-dialog": {
+    "actions": {
+      "cancel": "Cancel",
+      "revert": "Revert to original values"
+    },
+    "title": "Revert to the original values?"
+  },
   "roles": {
     "inactive": "Inactive",
     "manager-admin": "Manager & admin",
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index f00a14406..a18f19a8b 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -367,6 +367,7 @@
   "annotation": {
     "pending": "(Pending analysis)"
   },
+  "annotations": "",
   "archived-dossiers-listing": {
     "no-data": {
       "title": "No archived dossiers."
@@ -2182,6 +2183,13 @@
       "header": "Resize {type}"
     }
   },
+  "revert-value-dialog": {
+    "actions": {
+      "cancel": "",
+      "revert": ""
+    },
+    "title": ""
+  },
   "roles": {
     "inactive": "Inaktiv",
     "manager-admin": "Manager & admin",
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index 1b110b692..59eef38e6 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -2183,6 +2183,13 @@
       "header": "Resize {type}"
     }
   },
+  "revert-value-dialog": {
+    "actions": {
+      "cancel": "Cancel",
+      "revert": "Revert to original values"
+    },
+    "title": "Revert to the original values?"
+  },
   "roles": {
     "inactive": "Inactive",
     "manager-admin": "Manager & admin",
diff --git a/libs/common-ui b/libs/common-ui
index 301ea99ab..0d85f78d9 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 301ea99abe1be09687cdbe6d0fbae3bec7eefc23
+Subproject commit 0d85f78d9a42e2ef8de387ec3b86e2857a4cc3e9

From 64bd9ba86fb73abc28ccde95ee5a4d37be0e6d84 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 29 Apr 2024 22:27:18 +0300
Subject: [PATCH 12/21] RED-8748 - update common-ui

---
 libs/common-ui | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/common-ui b/libs/common-ui
index 0d85f78d9..f10a113b9 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 0d85f78d9a42e2ef8de387ec3b86e2857a4cc3e9
+Subproject commit f10a113b9e8f0d93ef9b2755f67a9b0ef346600e

From 722794c425405b55b17a97e651c3d2d0a6a06dc4 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 30 Apr 2024 16:08:54 +0300
Subject: [PATCH 13/21] RED-8748 - added revert value dialog

---
 ...le-structured-component-value.component.ts |   2 +-
 ...ctured-component-management.component.html |  89 -----------
 .../revert-value-dialog.component.html        |  28 +++-
 .../revert-value-dialog.component.scss        |  27 ++++
 .../revert-value-dialog.component.ts          |  10 +-
 apps/red-ui/src/assets/i18n/redact/de.json    | 146 +++++++++---------
 apps/red-ui/src/assets/i18n/redact/en.json    |   2 +
 apps/red-ui/src/assets/i18n/scm/de.json       | 146 +++++++++---------
 apps/red-ui/src/assets/i18n/scm/en.json       |   2 +
 libs/common-ui                                |   2 +-
 10 files changed, 214 insertions(+), 240 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
index a7dbe1971..b95fc6dcd 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
@@ -66,7 +66,7 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
     }
 
     undo() {
-        this._iqserDialog.openDefault(RevertValueDialogComponent);
+        this._iqserDialog.openDefault(RevertValueDialogComponent, { data: { entry: this.entry }, width: '800px' });
     }
 
     add() {
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
index bb8ee916b..0b3f3832b 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
@@ -22,92 +22,3 @@
         <div class="row-separator"></div>
     </div>
 </div>
-
-<!--<div *ngIf="componentLogData() as componentLogEntries" class="table output-data">-->
-<!--    <div class="table-header">{{ 'component-log-dialog.table-header.component' | translate }}</div>-->
-<!--    <div class="table-header">{{ 'component-log-dialog.table-header.value' | translate }}</div>-->
-<!--    &lt;!&ndash;            <div class="table-header">{{ 'component-log-dialog.table-header.transformation-rule' | translate }}</div>&ndash;&gt;-->
-<!--    &lt;!&ndash;            <div class="table-header">{{ 'component-log-dialog.table-header.annotation-references' | translate }}</div>&ndash;&gt;-->
-
-<!--    <ng-container *ngFor="let entry of componentLogEntries; let index = index">-->
-<!--        <div class="bold">{{ entry.name }}</div>-->
-<!--        <div [id]="getValueCellId(index)">-->
-<!--            <iqser-editable-input-->
-<!--                (save)="saveEdit($event, entry.originalKey)"-->
-<!--                [canEdit]="canEdit"-->
-<!--                [cancelTooltip]="'component-log-dialog.actions.cancel-edit' | translate"-->
-<!--                [editTooltip]="'component-log-dialog.actions.edit' | translate"-->
-<!--                [id]="'value-' + index"-->
-<!--                [parentId]="getValueCellId(index)"-->
-<!--                [saveTooltip]="'component-log-dialog.actions.save' | translate"-->
-<!--                [value]="entry.componentValues[0].value ?? entry.componentValues[0].originalValue"-->
-<!--                [attr.helpModeKey]="'scm_edit_DIALOG'"-->
-<!--            >-->
-<!--                <ng-container slot="editing">-->
-<!--                    <iqser-circle-button-->
-<!--                        (action)="undo(entry.originalKey)"-->
-<!--                        *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"-->
-<!--                        [showDot]="true"-->
-<!--                        [tooltip]="-->
-<!--                            'component-log-dialog.actions.undo'-->
-<!--                                | translate: { value: entry.componentValues[0].originalValue }-->
-<!--                                | replaceNbsp-->
-<!--                        "-->
-<!--                        [attr.help-mode-key]="'scm_undo_DIALOG'"-->
-<!--                        class="ml-2"-->
-<!--                        icon="red:undo"-->
-<!--                    ></iqser-circle-button>-->
-<!--                </ng-container>-->
-<!--            </iqser-editable-input>-->
-<!--        </div>-->
-<!--        &lt;!&ndash;                <div>{{ entry.componentValues[0].valueDescription }}</div>&ndash;&gt;-->
-<!--        &lt;!&ndash;                <div>&ndash;&gt;-->
-<!--        &lt;!&ndash;                    <ul *ngIf="entry.componentValues[0].entityReferences; else noReferences" class="pl-0">&ndash;&gt;-->
-<!--        &lt;!&ndash;                        <li&ndash;&gt;-->
-<!--        &lt;!&ndash;                            *ngFor="let reference of entry.componentValues[0].entityReferences"&ndash;&gt;-->
-<!--        &lt;!&ndash;                            [innerHTML]="&ndash;&gt;-->
-<!--        &lt;!&ndash;                                'component-log-dialog.annotations'&ndash;&gt;-->
-<!--        &lt;!&ndash;                                    | translate&ndash;&gt;-->
-<!--        &lt;!&ndash;                                        : {&ndash;&gt;-->
-<!--        &lt;!&ndash;                                              type: parseType(reference.displayValue),&ndash;&gt;-->
-<!--        &lt;!&ndash;                                              page: reference.page,&ndash;&gt;-->
-<!--        &lt;!&ndash;                                              ruleNumber: reference.entityRuleId&ndash;&gt;-->
-<!--        &lt;!&ndash;                                          }&ndash;&gt;-->
-<!--        &lt;!&ndash;                            "&ndash;&gt;-->
-<!--        &lt;!&ndash;                            class="mb-8"&ndash;&gt;-->
-<!--        &lt;!&ndash;                        ></li>&ndash;&gt;-->
-<!--        &lt;!&ndash;                    </ul>&ndash;&gt;-->
-
-<!--        &lt;!&ndash;                    <ng-template #noReferences>-</ng-template>&ndash;&gt;-->
-<!--        &lt;!&ndash;                </div>&ndash;&gt;-->
-<!--    </ng-container>-->
-<!--</div>-->
-
-<!--    &lt;!&ndash;    <div class="dialog-actions">&ndash;&gt;-->
-<!--    &lt;!&ndash;        <iqser-icon-button&ndash;&gt;-->
-<!--    &lt;!&ndash;            (action)="exportJSON()"&ndash;&gt;-->
-<!--    &lt;!&ndash;            [label]="'component-log-dialog.actions.export-json' | translate"&ndash;&gt;-->
-<!--    &lt;!&ndash;            [submit]="true"&ndash;&gt;-->
-<!--    &lt;!&ndash;            [type]="iconButtonTypes.primary"&ndash;&gt;-->
-<!--    &lt;!&ndash;            [attr.help-mode-key]="'scm_export_DIALOG'"&ndash;&gt;-->
-<!--    &lt;!&ndash;        ></iqser-icon-button>&ndash;&gt;-->
-
-<!--    &lt;!&ndash;        <iqser-icon-button&ndash;&gt;-->
-<!--    &lt;!&ndash;            (action)="exportXML()"&ndash;&gt;-->
-<!--    &lt;!&ndash;            [label]="'component-log-dialog.actions.export-xml' | translate"&ndash;&gt;-->
-<!--    &lt;!&ndash;            [type]="iconButtonTypes.primary"&ndash;&gt;-->
-<!--    &lt;!&ndash;            [attr.help-mode-key]="'scm_export_DIALOG'"&ndash;&gt;-->
-<!--    &lt;!&ndash;        ></iqser-icon-button>&ndash;&gt;-->
-
-<!--    &lt;!&ndash;        <iqser-icon-button&ndash;&gt;-->
-<!--    &lt;!&ndash;            (action)="exportAllInDossier()"&ndash;&gt;-->
-<!--    &lt;!&ndash;            *ngIf="userPreferences.isIqserDevMode"&ndash;&gt;-->
-<!--    &lt;!&ndash;            [type]="iconButtonTypes.primary"&ndash;&gt;-->
-<!--    &lt;!&ndash;            label="Export All"&ndash;&gt;-->
-<!--    &lt;!&ndash;        ></iqser-icon-button>&ndash;&gt;-->
-
-<!--    &lt;!&ndash;        <div [translate]="'component-log-dialog.actions.close'" class="all-caps-label cancel" mat-dialog-close></div>&ndash;&gt;-->
-<!--    &lt;!&ndash;        <mat-checkbox (change)="toggleOpenScmDialogByDefault()" [checked]="openScmDialogByDefault()" class="ml-auto" color="primary"&ndash;&gt;-->
-<!--    &lt;!&ndash;        >{{ 'component-log-dialog.actions.display-by-default' | translate }}&ndash;&gt;-->
-<!--    &lt;!&ndash;        </mat-checkbox>&ndash;&gt;-->
-<!--    &lt;!&ndash;    </div>&ndash;&gt;-->
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html
index 51f7d5a57..c86887060 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html
@@ -2,7 +2,33 @@
     <form (submit)="save()">
         <div [translate]="'revert-value-dialog.title'" class="dialog-header heading-l"></div>
 
-        <div class="dialog-content"></div>
+        <div class="dialog-content">
+            <span *ngFor="let value of entry.componentValues">
+                {{ value.valueDescription }}
+            </span>
+            <div class="compare-values-container">
+                <div>
+                    <span class="header">
+                        {{ 'revert-value-dialog.original-values' | translate }}
+                    </span>
+                    <div class="values">
+                        <p *ngFor="let value of entry.componentValues; let index = index">
+                            {{ index + 1 + '. ' + value.originalValue }}
+                        </p>
+                    </div>
+                </div>
+                <div>
+                    <span class="header">
+                        {{ 'revert-value-dialog.current-values' | translate }}
+                    </span>
+                    <div class="values">
+                        <p *ngFor="let value of entry.componentValues; let index = index">
+                            {{ index + 1 + '. ' + value.value }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <div class="dialog-actions">
             <iqser-icon-button
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.scss b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.scss
index e69de29bb..a599bff82 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.scss
@@ -0,0 +1,27 @@
+.dialog-content {
+    padding-top: 12px;
+
+    .compare-values-container {
+        margin-top: 30px;
+        display: flex;
+
+        div {
+            flex-grow: 1;
+
+            .header {
+                font-weight: bold;
+            }
+
+            .values {
+                margin-top: 10px;
+                padding: 10px 0 10px 15px;
+                width: 90%;
+                background: var(--iqser-grey-8);
+
+                p {
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts
index 779f7003c..bae5c22f4 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts
@@ -2,17 +2,23 @@ import { Component } from '@angular/core';
 import { CircleButtonComponent, IconButtonComponent, IqserDialogComponent } from '@iqser/common-ui';
 import { MatDialogClose } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
+import { ComponentLogEntry } from '@red/domain';
+import { NgFor } from '@angular/common';
 
-interface RevertValueData {}
+interface RevertValueData {
+    entry: ComponentLogEntry;
+}
 interface RevertValueResult {}
 
 @Component({
     templateUrl: 'revert-value-dialog.component.html',
     styleUrls: ['./revert-value-dialog.component.scss'],
     standalone: true,
-    imports: [CircleButtonComponent, IconButtonComponent, MatDialogClose, TranslateModule],
+    imports: [CircleButtonComponent, IconButtonComponent, MatDialogClose, TranslateModule, NgFor],
 })
 export class RevertValueDialogComponent extends IqserDialogComponent<RevertValueDialogComponent, RevertValueData, RevertValueResult> {
+    protected readonly entry = this.data.entry;
+
     constructor() {
         super();
     }
diff --git a/apps/red-ui/src/assets/i18n/redact/de.json b/apps/red-ui/src/assets/i18n/redact/de.json
index 02289a802..b2c16faf9 100644
--- a/apps/red-ui/src/assets/i18n/redact/de.json
+++ b/apps/red-ui/src/assets/i18n/redact/de.json
@@ -250,9 +250,6 @@
     "watermarks": "Watermarks"
   },
   "analysis-disabled": "",
-  "annotation": {
-    "pending": "(Pending analysis)"
-  },
   "annotation-actions": {
     "accept-recommendation": {
       "label": "Empfehlung annehmen"
@@ -307,14 +304,14 @@
           "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!"
-        },
         "remove-hint": {
           "error": "Failed to remove hint: {error}",
           "success": "Hint removed!"
         },
+        "remove": {
+          "error": "Fehler beim Entfernen der Schwärzung: {error}",
+          "success": "Schwärzung entfernt!"
+        },
         "undo": {
           "error": "Die Aktion konnte nicht rückgängig gemacht werden. Fehler: {error}",
           "success": "erfolgreich Rückgängig gemacht"
@@ -327,15 +324,15 @@
     "remove-highlights": {
       "label": "Remove selected earmarks"
     },
-    "resize": {
-      "label": "Größe ändern"
-    },
     "resize-accept": {
       "label": "Größe speichern"
     },
     "resize-cancel": {
       "label": "Größenänderung abbrechen"
     },
+    "resize": {
+      "label": "Größe ändern"
+    },
     "see-references": {
       "label": "See references"
     },
@@ -571,18 +568,14 @@
     "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-file-without-analysis": {
       "confirmationText": "Approve without analysis",
       "denyText": "Cancel",
       "question": "Analysis required to detect new redactions.",
       "title": "Warning!"
     },
-    "approve-multiple-files": {
-      "question": "Mindestens eine der ausgewählten Dateien enthält ungesehene Änderungen. Möchten Sie sie trotzdem genehmigen?",
+    "approve-file": {
+      "question": "Dieses Dokument enthält ungesehene Änderungen. Möchten Sie es trotzdem genehmigen?",
       "title": "Warnung!"
     },
     "approve-multiple-files-without-analysis": {
@@ -591,6 +584,10 @@
       "question": "Analysis required to detect new redactions for at least one file.",
       "title": "Warning"
     },
+    "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": {
         "multiple": "Dieses Dokument wird gerade von einer anderen Person geprüft. Möchten Sie Reviewer werden und sich selbst dem Dokument zuweisen?",
@@ -941,13 +938,13 @@
       "recent": "Neu ({hours} h)",
       "unassigned": "Niemandem zugewiesen"
     },
-    "reanalyse": {
-      "action": "Datei analysieren"
-    },
     "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"
+    },
     "start-auto-analysis": "Enable auto-analysis",
     "stop-auto-analysis": "Stop auto-analysis",
     "table-col-names": {
@@ -1016,14 +1013,6 @@
     "total-documents": "Anzahl der Dokumente",
     "total-people": "<strong>{count}</strong> {count, plural, one{user} other {users}}"
   },
-  "dossier-templates": {
-    "label": "Dossier-Vorlagen",
-    "status": {
-      "active": "Active",
-      "inactive": "Inactive",
-      "incomplete": "Incomplete"
-    }
-  },
   "dossier-templates-listing": {
     "action": {
       "clone": "Clone template",
@@ -1059,6 +1048,14 @@
       "title": "{length} {length, plural, one{Dossier-Vorlage} other{Dossier-Vorlagen}}"
     }
   },
+  "dossier-templates": {
+    "label": "Dossier-Vorlagen",
+    "status": {
+      "active": "Active",
+      "inactive": "Inactive",
+      "incomplete": "Incomplete"
+    }
+  },
   "dossier-watermark-selector": {
     "heading": "Watermarks on documents",
     "no-watermark": "There is no watermark defined for the dossier template.<br>Contact your app admin to define one.",
@@ -1145,6 +1142,7 @@
     "change-successful": "Dossier wurde aktualisiert.",
     "delete-successful": "Dossier wurde gelöscht.",
     "dictionary": {
+      "edit-button-tooltip": "",
       "edit-dialog": {
         "add-to-dictionary-action": "Available in add/edit dialogs in this dossier",
         "cancel": "Cancel",
@@ -1253,15 +1251,6 @@
       "title": "{length} {length, plural, one{Wörterbuch} other{Wörterbücher}}"
     }
   },
-  "entity": {
-    "info": {
-      "actions": {
-        "revert": "Revert",
-        "save": "Save changes"
-      },
-      "heading": "Edit entity"
-    }
-  },
   "entity-rules-screen": {
     "error": {
       "generic": "Something went wrong... Entity rules update failed!"
@@ -1276,19 +1265,28 @@
     "warning-text": "Warning: experimental feature!",
     "warnings-found": "{warnings, plural, one{A warning} other{{warnings} warnings}} found in rules"
   },
+  "entity": {
+    "info": {
+      "actions": {
+        "revert": "Revert",
+        "save": "Save changes"
+      },
+      "heading": "Edit entity"
+    }
+  },
   "error": {
     "deleted-entity": {
       "dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Dieses Dossier wurde gelöscht!"
       },
-      "file": {
-        "action": "Zurück zum Dossier",
-        "label": "Diese Datei wurde gelöscht!"
-      },
       "file-dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Das Dossier dieser Datei wurde gelöscht!"
+      },
+      "file": {
+        "action": "Zurück zum Dossier",
+        "label": "Diese Datei wurde gelöscht!"
       }
     },
     "file-preview": {
@@ -1306,12 +1304,6 @@
   },
   "exact-date": "{day} {month} {year} um {hour}:{minute} Uhr",
   "file": "Datei",
-  "file-attribute": {
-    "update": {
-      "error": "Failed to update file attribute value!",
-      "success": "File attribute value has been updated successfully!"
-    }
-  },
   "file-attribute-encoding-types": {
     "ascii": "ASCII",
     "iso": "ISO-8859-1",
@@ -1322,6 +1314,12 @@
     "number": "Nummer",
     "text": "Freier Text"
   },
+  "file-attribute": {
+    "update": {
+      "error": "Failed to update file attribute value!",
+      "success": "File attribute value has been updated successfully!"
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "Cancel",
     "form": {
@@ -1539,15 +1537,6 @@
       "csv": "File attributes were imported successfully from uploaded CSV file."
     }
   },
-  "filter": {
-    "analysis": "Analyse erforderlich",
-    "comment": "Kommentare",
-    "hint": "Nut Hinweise",
-    "image": "Bilder",
-    "none": "Keine Anmerkungen",
-    "redaction": "Geschwärzt",
-    "updated": "Aktualisiert"
-  },
   "filter-menu": {
     "filter-options": "Filteroptionen",
     "filter-types": "Filter",
@@ -1557,6 +1546,15 @@
     "unseen-pages": "Nur Anmerkungen auf unsichtbaren Seiten",
     "with-comments": "Nur Anmerkungen mit Kommentaren"
   },
+  "filter": {
+    "analysis": "Analyse erforderlich",
+    "comment": "Kommentare",
+    "hint": "Nut Hinweise",
+    "image": "Bilder",
+    "none": "Keine Anmerkungen",
+    "redaction": "Geschwärzt",
+    "updated": "Aktualisiert"
+  },
   "filters": {
     "assigned-people": "Beauftragt",
     "documents-status": "Documents state",
@@ -1827,13 +1825,6 @@
     "user-promoted-to-approver": "<b>{user}</b> wurde im Dossier <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b> zum Genehmiger ernannt!",
     "user-removed-as-dossier-member": "<b>{user}</b> wurde als Mitglied von: <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b>  entfernt!"
   },
-  "notifications": {
-    "button-text": "Notifications",
-    "deleted-dossier": "Deleted dossier",
-    "label": "Benachrichtigungen",
-    "mark-all-as-read": "Alle als gelesen markieren",
-    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
-  },
   "notifications-screen": {
     "category": {
       "email-notifications": "E-Mail Benachrichtigungen",
@@ -1847,6 +1838,7 @@
       "dossier": "Dossierbezogene Benachrichtigungen",
       "other": "Andere Benachrichtigungen"
     },
+    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "options": {
       "ASSIGN_APPROVER": "Wenn ich einem Dokument als Genehmiger zugewiesen bin",
       "ASSIGN_REVIEWER": "Wenn ich einem Dokument als Überprüfer zugewiesen bin",
@@ -1864,7 +1856,6 @@
       "USER_PROMOTED_TO_APPROVER": "Wenn ich Genehmiger in einem Dossier werde",
       "USER_REMOVED_AS_DOSSIER_MEMBER": "Wenn ich die Dossier-Mitgliedschaft verliere"
     },
-    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "schedule": {
       "daily": "Tägliche Zusammenfassung",
       "instant": "Sofortig",
@@ -1872,6 +1863,13 @@
     },
     "title": "Benachrichtigungseinstellungen"
   },
+  "notifications": {
+    "button-text": "Notifications",
+    "deleted-dossier": "Deleted dossier",
+    "label": "Benachrichtigungen",
+    "mark-all-as-read": "Alle als gelesen markieren",
+    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
+  },
   "ocr": {
     "confirmation-dialog": {
       "cancel": "Cancel",
@@ -1963,16 +1961,16 @@
     "warnings-subtitle": "Do not show again options",
     "warnings-title": "Prompts and dialogs settings"
   },
-  "processing": {
-    "basic": "Processing",
-    "ocr": "OCR"
-  },
   "processing-status": {
     "ocr": "OCR",
     "pending": "Pending",
     "processed": "processed",
     "processing": "Processing"
   },
+  "processing": {
+    "basic": "Processing",
+    "ocr": "OCR"
+  },
   "readonly": "Lesemodus",
   "readonly-archived": "Read only (archived)",
   "redact-text": {
@@ -2191,6 +2189,8 @@
       "cancel": "",
       "revert": ""
     },
+    "current-values": "",
+    "original-values": "",
     "title": ""
   },
   "roles": {
@@ -2203,12 +2203,6 @@
     "red-user-admin": "Benutzer-Admin",
     "regular": "Regulär"
   },
-  "search": {
-    "active-dossiers": "ganze Plattform",
-    "all-dossiers": "all documents",
-    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
-    "this-dossier": "in diesem Dossier"
-  },
   "search-screen": {
     "cols": {
       "assignee": "Bevollmächtigter",
@@ -2232,6 +2226,12 @@
     "no-match": "Keine Dokumente entsprechen Ihren aktuellen Filtern.",
     "table-header": "{length} {length, plural, one{Suchergebnis} other{Suchergebnisse}}"
   },
+  "search": {
+    "active-dossiers": "ganze Plattform",
+    "all-dossiers": "all documents",
+    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
+    "this-dossier": "in diesem Dossier"
+  },
   "seconds": "seconds",
   "size": "Size",
   "smtp-auth-config": {
diff --git a/apps/red-ui/src/assets/i18n/redact/en.json b/apps/red-ui/src/assets/i18n/redact/en.json
index 47ba6ea5a..95f514b0d 100644
--- a/apps/red-ui/src/assets/i18n/redact/en.json
+++ b/apps/red-ui/src/assets/i18n/redact/en.json
@@ -2189,6 +2189,8 @@
       "cancel": "Cancel",
       "revert": "Revert to original values"
     },
+    "current-values": "Current values",
+    "original-values": "Original values",
     "title": "Revert to the original values?"
   },
   "roles": {
diff --git a/apps/red-ui/src/assets/i18n/scm/de.json b/apps/red-ui/src/assets/i18n/scm/de.json
index 8446625b9..1c11fe0b6 100644
--- a/apps/red-ui/src/assets/i18n/scm/de.json
+++ b/apps/red-ui/src/assets/i18n/scm/de.json
@@ -250,9 +250,6 @@
     "watermarks": "Watermarks"
   },
   "analysis-disabled": "Analysis disabled",
-  "annotation": {
-    "pending": "(Pending analysis)"
-  },
   "annotation-actions": {
     "accept-recommendation": {
       "label": "Empfehlung annehmen"
@@ -307,14 +304,14 @@
           "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!"
-        },
         "remove-hint": {
           "error": "Failed to remove hint: {error}",
           "success": "Hint removed!"
         },
+        "remove": {
+          "error": "Fehler beim Entfernen der Schwärzung: {error}",
+          "success": "Schwärzung entfernt!"
+        },
         "undo": {
           "error": "Die Aktion konnte nicht rückgängig gemacht werden. Fehler: {error}",
           "success": "erfolgreich Rückgängig gemacht"
@@ -327,15 +324,15 @@
     "remove-highlights": {
       "label": "Remove selected earmarks"
     },
-    "resize": {
-      "label": "Größe ändern"
-    },
     "resize-accept": {
       "label": "Größe speichern"
     },
     "resize-cancel": {
       "label": "Größenänderung abbrechen"
     },
+    "resize": {
+      "label": "Größe ändern"
+    },
     "see-references": {
       "label": "See references"
     },
@@ -571,18 +568,14 @@
     "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-file-without-analysis": {
       "confirmationText": "Approve without analysis",
       "denyText": "Cancel",
       "question": "Analysis required to detect new components.",
       "title": "Warning!"
     },
-    "approve-multiple-files": {
-      "question": "Mindestens eine der ausgewählten Dateien enthält ungesehene Änderungen. Möchten Sie sie trotzdem genehmigen?",
+    "approve-file": {
+      "question": "Dieses Dokument enthält ungesehene Änderungen. Möchten Sie es trotzdem genehmigen?",
       "title": "Warnung!"
     },
     "approve-multiple-files-without-analysis": {
@@ -591,6 +584,10 @@
       "question": "Analysis required to detect new components for at least one file.",
       "title": "Warning"
     },
+    "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": {
         "multiple": "Dieses Dokument wird gerade von einer anderen Person geprüft. Möchten Sie Reviewer werden und sich selbst dem Dokument zuweisen?",
@@ -941,13 +938,13 @@
       "recent": "Neu ({hours} h)",
       "unassigned": "Niemandem zugewiesen"
     },
-    "reanalyse": {
-      "action": "Datei analysieren"
-    },
     "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"
+    },
     "start-auto-analysis": "Enable auto-analysis",
     "stop-auto-analysis": "Stop auto-analysis",
     "table-col-names": {
@@ -1016,14 +1013,6 @@
     "total-documents": "Anzahl der Dokumente",
     "total-people": "<strong>{count}</strong> {count, plural, one{user} other {users}}"
   },
-  "dossier-templates": {
-    "label": "Dossier-Vorlagen",
-    "status": {
-      "active": "Active",
-      "inactive": "Inactive",
-      "incomplete": "Incomplete"
-    }
-  },
   "dossier-templates-listing": {
     "action": {
       "clone": "Clone template",
@@ -1059,6 +1048,14 @@
       "title": "{length} dossier {length, plural, one{template} other{templates}}"
     }
   },
+  "dossier-templates": {
+    "label": "Dossier-Vorlagen",
+    "status": {
+      "active": "Active",
+      "inactive": "Inactive",
+      "incomplete": "Incomplete"
+    }
+  },
   "dossier-watermark-selector": {
     "heading": "Watermarks on documents",
     "no-watermark": "There is no watermark defined for the dossier template.<br>Contact your app admin to define one.",
@@ -1145,6 +1142,7 @@
     "change-successful": "Dossier wurde aktualisiert.",
     "delete-successful": "Dossier wurde gelöscht.",
     "dictionary": {
+      "edit-button-tooltip": "",
       "edit-dialog": {
         "add-to-dictionary-action": "",
         "cancel": "",
@@ -1253,15 +1251,6 @@
       "title": "{length} {length, plural, one{entity} other{entities}}"
     }
   },
-  "entity": {
-    "info": {
-      "actions": {
-        "revert": "Revert",
-        "save": "Save changes"
-      },
-      "heading": "Edit entity"
-    }
-  },
   "entity-rules-screen": {
     "error": {
       "generic": "Something went wrong... Entity rules update failed!"
@@ -1276,19 +1265,28 @@
     "warning-text": "Warning: experimental feature!",
     "warnings-found": "{warnings, plural, one{A warning} other{{warnings} warnings}} found in rules"
   },
+  "entity": {
+    "info": {
+      "actions": {
+        "revert": "Revert",
+        "save": "Save changes"
+      },
+      "heading": "Edit entity"
+    }
+  },
   "error": {
     "deleted-entity": {
       "dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Dieses Dossier wurde gelöscht!"
       },
-      "file": {
-        "action": "Zurück zum Dossier",
-        "label": "Diese Datei wurde gelöscht!"
-      },
       "file-dossier": {
         "action": "Zurück zur Übersicht",
         "label": "Das Dossier dieser Datei wurde gelöscht!"
+      },
+      "file": {
+        "action": "Zurück zum Dossier",
+        "label": "Diese Datei wurde gelöscht!"
       }
     },
     "file-preview": {
@@ -1306,12 +1304,6 @@
   },
   "exact-date": "{day} {month} {year} um {hour}:{minute} Uhr",
   "file": "Datei",
-  "file-attribute": {
-    "update": {
-      "error": "Failed to update file attribute value!",
-      "success": "File attribute value has been updated successfully!"
-    }
-  },
   "file-attribute-encoding-types": {
     "ascii": "ASCII",
     "iso": "ISO-8859-1",
@@ -1322,6 +1314,12 @@
     "number": "Nummer",
     "text": "Freier Text"
   },
+  "file-attribute": {
+    "update": {
+      "error": "Failed to update file attribute value!",
+      "success": "File attribute value has been updated successfully!"
+    }
+  },
   "file-attributes-configurations": {
     "cancel": "Cancel",
     "form": {
@@ -1539,15 +1537,6 @@
       "csv": "File attributes were imported successfully from uploaded CSV file."
     }
   },
-  "filter": {
-    "analysis": "Analyse erforderlich",
-    "comment": "Kommentare",
-    "hint": "Nut Hinweise",
-    "image": "Bilder",
-    "none": "Keine Anmerkungen",
-    "redaction": "Geschwärzt",
-    "updated": "Aktualisiert"
-  },
   "filter-menu": {
     "filter-options": "Filteroptionen",
     "filter-types": "Filter",
@@ -1557,6 +1546,15 @@
     "unseen-pages": "Nur Anmerkungen auf unsichtbaren Seiten",
     "with-comments": "Nur Anmerkungen mit Kommentaren"
   },
+  "filter": {
+    "analysis": "Analyse erforderlich",
+    "comment": "Kommentare",
+    "hint": "Nut Hinweise",
+    "image": "Bilder",
+    "none": "Keine Anmerkungen",
+    "redaction": "Geschwärzt",
+    "updated": "Aktualisiert"
+  },
   "filters": {
     "assigned-people": "Beauftragt",
     "documents-status": "Documents state",
@@ -1827,13 +1825,6 @@
     "user-promoted-to-approver": "<b>{user}</b> wurde im Dossier <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b> zum Genehmiger ernannt!",
     "user-removed-as-dossier-member": "<b>{user}</b> wurde als Mitglied von: <b>{dossierHref, select, null{{dossierName}} other{<a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a>}}</b>  entfernt!"
   },
-  "notifications": {
-    "button-text": "Notifications",
-    "deleted-dossier": "Deleted dossier",
-    "label": "Benachrichtigungen",
-    "mark-all-as-read": "Alle als gelesen markieren",
-    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
-  },
   "notifications-screen": {
     "category": {
       "email-notifications": "E-Mail Benachrichtigungen",
@@ -1847,6 +1838,7 @@
       "dossier": "Dossierbezogene Benachrichtigungen",
       "other": "Andere Benachrichtigungen"
     },
+    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "options": {
       "ASSIGN_APPROVER": "Wenn ich einem Dokument als Genehmiger zugewiesen bin",
       "ASSIGN_REVIEWER": "Wenn ich einem Dokument als Überprüfer zugewiesen bin",
@@ -1864,7 +1856,6 @@
       "USER_PROMOTED_TO_APPROVER": "Wenn ich Genehmiger in einem Dossier werde",
       "USER_REMOVED_AS_DOSSIER_MEMBER": "Wenn ich die Dossier-Mitgliedschaft verliere"
     },
-    "options-title": "Wählen Sie aus, in welcher Kategorie Sie benachrichtigt werden möchten",
     "schedule": {
       "daily": "Tägliche Zusammenfassung",
       "instant": "Sofortig",
@@ -1872,6 +1863,13 @@
     },
     "title": "Benachrichtigungseinstellungen"
   },
+  "notifications": {
+    "button-text": "Notifications",
+    "deleted-dossier": "Deleted dossier",
+    "label": "Benachrichtigungen",
+    "mark-all-as-read": "Alle als gelesen markieren",
+    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}"
+  },
   "ocr": {
     "confirmation-dialog": {
       "cancel": "Cancel",
@@ -1963,16 +1961,16 @@
     "warnings-subtitle": "Do not show again options",
     "warnings-title": "Prompts and dialogs settings"
   },
-  "processing": {
-    "basic": "Processing",
-    "ocr": "OCR"
-  },
   "processing-status": {
     "ocr": "OCR",
     "pending": "Pending",
     "processed": "Processed",
     "processing": "Processing"
   },
+  "processing": {
+    "basic": "Processing",
+    "ocr": "OCR"
+  },
   "readonly": "Lesemodus",
   "readonly-archived": "Read only (archived)",
   "redact-text": {
@@ -2191,6 +2189,8 @@
       "cancel": "",
       "revert": ""
     },
+    "current-values": "",
+    "original-values": "",
     "title": ""
   },
   "roles": {
@@ -2203,12 +2203,6 @@
     "red-user-admin": "Benutzer-Admin",
     "regular": "Regulär"
   },
-  "search": {
-    "active-dossiers": "ganze Plattform",
-    "all-dossiers": "all documents",
-    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
-    "this-dossier": "in diesem Dossier"
-  },
   "search-screen": {
     "cols": {
       "assignee": "Bevollmächtigter",
@@ -2232,6 +2226,12 @@
     "no-match": "Keine Dokumente entsprechen Ihren aktuellen Filtern.",
     "table-header": "{length} search {length, plural, one{result} other{results}}"
   },
+  "search": {
+    "active-dossiers": "ganze Plattform",
+    "all-dossiers": "all documents",
+    "placeholder": "Nach Dokumenten oder Dokumenteninhalt suchen",
+    "this-dossier": "in diesem Dossier"
+  },
   "seconds": "seconds",
   "size": "Size",
   "smtp-auth-config": {
diff --git a/apps/red-ui/src/assets/i18n/scm/en.json b/apps/red-ui/src/assets/i18n/scm/en.json
index 918b40680..ea9889435 100644
--- a/apps/red-ui/src/assets/i18n/scm/en.json
+++ b/apps/red-ui/src/assets/i18n/scm/en.json
@@ -2189,6 +2189,8 @@
       "cancel": "Cancel",
       "revert": "Revert to original values"
     },
+    "current-values": "Current values",
+    "original-values": "Original values",
     "title": "Revert to the original values?"
   },
   "roles": {
diff --git a/libs/common-ui b/libs/common-ui
index f10a113b9..61d4d4f5c 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit f10a113b9e8f0d93ef9b2755f67a9b0ef346600e
+Subproject commit 61d4d4f5c6f738dd9ce1b27a421d8d6d53a070a9

From 0a8147cee28eaf181a1a6d6c234f5322d47630e0 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 30 Apr 2024 16:09:48 +0300
Subject: [PATCH 14/21] RED-8748 - update common ui

---
 libs/common-ui | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/common-ui b/libs/common-ui
index 61d4d4f5c..3b0b6542c 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 61d4d4f5c6f738dd9ce1b27a421d8d6d53a070a9
+Subproject commit 3b0b6542cd0cef82b1a85886ed4899b9033835ac

From ee70abbfbe65fb82c500aac674b9e8fe767603a1 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 30 Apr 2024 17:30:14 +0300
Subject: [PATCH 15/21] RED-8748 - added CdkDropList to be able to reorder
 component log values

---
 ...-structured-component-value.component.html |  6 ++---
 ...-structured-component-value.component.scss | 20 ++++++++++++++
 ...le-structured-component-value.component.ts | 27 +++++++++++++++++--
 .../file-preview/file-preview.module.ts       |  2 +-
 4 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
index 98be17cc8..1cb7048db 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
@@ -21,8 +21,8 @@
 
 <ng-template #editValue>
     <form [formGroup]="form" (submit)="save()">
-        <ng-container *ngFor="let control of form.controls | keyvalue">
-            <div class="editing-value">
+        <div cdkDropList (cdkDropListDropped)="drop($event)">
+            <div *ngFor="let control of form.controls | keyvalue" class="editing-value" cdkDrag>
                 <mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon>
                 <div class="iqser-input-group w-full">
                     <textarea [formControlName]="control.key" rows="1" type="text"></textarea>
@@ -34,7 +34,7 @@
                     icon="iqser:trash"
                 ></iqser-circle-button>
             </div>
-        </ng-container>
+        </div>
         <div class="editing-actions">
             <iqser-icon-button
                 [disabled]="disabled"
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
index 5f619e3a6..19ae2609a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
@@ -146,3 +146,23 @@
         transform: scale(1.2);
     }
 }
+
+/* .cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drop-list-dragging {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+} */
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
index b95fc6dcd..78e943169 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
@@ -1,14 +1,32 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ComponentLogEntry } from '@red/domain';
-import { FormBuilder, FormControl, UntypedFormGroup } from '@angular/forms';
-import { BaseFormComponent, IqserDialog } from '@iqser/common-ui';
+import { FormBuilder, FormControl, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { BaseFormComponent, CircleButtonComponent, IconButtonComponent, IqserDialog } from '@iqser/common-ui';
 import { FilterService } from '@common-ui/filtering';
 import { RevertValueDialogComponent } from '../../dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component';
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { KeyValuePipe, NgClass, NgForOf, NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-editable-structured-component-value [entry] [canEdit]',
     templateUrl: './editable-structured-component-value.component.html',
     styleUrls: ['/editable-structured-component-value.component.scss'],
+    standalone: true,
+    imports: [
+        CircleButtonComponent,
+        NgClass,
+        TranslateModule,
+        KeyValuePipe,
+        CdkDropList,
+        MatIcon,
+        ReactiveFormsModule,
+        IconButtonComponent,
+        CdkDrag,
+        NgIf,
+        NgForOf,
+    ],
 })
 export class EditableStructuredComponentValueComponent extends BaseFormComponent implements OnInit {
     @Input() entry: ComponentLogEntry;
@@ -74,6 +92,11 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
         this.form.addControl(key, new FormControl(''));
     }
 
+    drop(event: CdkDragDrop<string>) {
+        moveItemInArray(this.entry.componentValues, event.previousIndex, event.currentIndex);
+        this.form = this.#getForm();
+    }
+
     #getForm() {
         const form = this._formBuilder.group({});
         this.entry.componentValues.forEach((value, index) => {
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
index 0ec9eb52f..f21e31e81 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
@@ -128,7 +128,6 @@ const components = [
     FileHeaderComponent,
     DocumineExportComponent,
     StructuredComponentManagementComponent,
-    EditableStructuredComponentValueComponent,
 ];
 
 @NgModule({
@@ -164,6 +163,7 @@ const components = [
         DisableStopPropagationDirective,
         SelectedAnnotationsTableComponent,
         SelectedAnnotationsListComponent,
+        EditableStructuredComponentValueComponent,
     ],
     providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard, TablesService],
 })

From 3c64d2ebcf06fdd19caab7b55198cfb1082135aa Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 7 May 2024 22:32:06 +0300
Subject: [PATCH 16/21] RED-8786 - Preserve New-Lines in Component values in
 the UI

---
 ...-structured-component-value.component.html |  8 ++++---
 ...-structured-component-value.component.scss | 24 ++++++-------------
 ...le-structured-component-value.component.ts |  7 +++++-
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
index 1cb7048db..aaf90c70e 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
@@ -2,8 +2,10 @@
     <div class="component">{{ entry.name }}</div>
     <div class="value" *ngIf="!editing; else editValue">
         <div class="text">
-            <span *ngFor="let componentValue of entry.componentValues">
-                {{ componentValue.value ?? componentValue.originalValue }}
+            <span
+                *ngFor="let componentValue of entry.componentValues"
+                [innerHTML]="transformNewLines(componentValue.value ?? componentValue.originalValue)"
+            >
             </span>
         </div>
         <div class="actions">
@@ -23,7 +25,7 @@
     <form [formGroup]="form" (submit)="save()">
         <div cdkDropList (cdkDropListDropped)="drop($event)">
             <div *ngFor="let control of form.controls | keyvalue" class="editing-value" cdkDrag>
-                <mat-icon class="draggable" svgIcon="red:draggable-dots"></mat-icon>
+                <mat-icon class="draggable" svgIcon="red:draggable-dots" cdkDragHandle></mat-icon>
                 <div class="iqser-input-group w-full">
                     <textarea [formControlName]="control.key" rows="1" type="text"></textarea>
                 </div>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
index 19ae2609a..288ed4125 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
@@ -147,22 +147,12 @@
     }
 }
 
-/* .cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
+.cdk-drag-preview {
+    display: flex;
 
-.cdk-drag-placeholder {
-  opacity: 0;
+    .draggable {
+        margin-top: 7px;
+        cursor: grab;
+        transform: scale(0.7);
+    }
 }
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.cdk-drop-list-dragging {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-} */
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
index 78e943169..55b353142 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
@@ -4,7 +4,7 @@ import { FormBuilder, FormControl, ReactiveFormsModule, UntypedFormGroup } from
 import { BaseFormComponent, CircleButtonComponent, IconButtonComponent, IqserDialog } from '@iqser/common-ui';
 import { FilterService } from '@common-ui/filtering';
 import { RevertValueDialogComponent } from '../../dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component';
-import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragDrop, CdkDragHandle, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
 import { KeyValuePipe, NgClass, NgForOf, NgIf } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
@@ -26,6 +26,7 @@ import { TranslateModule } from '@ngx-translate/core';
         CdkDrag,
         NgIf,
         NgForOf,
+        CdkDragHandle,
     ],
 })
 export class EditableStructuredComponentValueComponent extends BaseFormComponent implements OnInit {
@@ -117,4 +118,8 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
             }
         }
     }
+
+    transformNewLines(value: string) {
+        return value.replace(/\n/g, '<br>');
+    }
 }

From 019d0994c8cadb0004b405f9010e2d8ca551ee60 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 20 May 2024 19:57:38 +0300
Subject: [PATCH 17/21] RED-8748 - update common ui

---
 libs/common-ui | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/common-ui b/libs/common-ui
index 9473a7f5b..167405594 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 9473a7f5bd1218e8bfc7920b624af2b5a9eb9f55
+Subproject commit 1674055943de6892a0f184f59962faac9728c911

From 29b23cc8629bd5b85812f7c84309bc47e1192c46 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Wed, 22 May 2024 21:42:55 +0300
Subject: [PATCH 18/21] VM/RED-8748 - update common ui

---
 libs/common-ui | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/common-ui b/libs/common-ui
index 167405594..a668b2311 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 1674055943de6892a0f184f59962faac9728c911
+Subproject commit a668b231181a81b3fb94e55fa660bbce13127b1c

From b8a3f81859e8a29c2b0dc58115cee1b76e113133 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 10 Jun 2024 14:41:42 +0300
Subject: [PATCH 19/21] RED-8748

---
 libs/common-ui | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/common-ui b/libs/common-ui
index a668b2311..e733adf37 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit a668b231181a81b3fb94e55fa660bbce13127b1c
+Subproject commit e733adf37436ca81a5c38f08ec2a517124cfd140

From f5603225472c123757d1d35881462739afcb3625 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 11 Jun 2024 20:15:29 +0300
Subject: [PATCH 20/21] RED-8748 - updates for override, revertOverride actions

---
 ...edit-component-mapping-dialog.component.ts |   1 -
 ...-structured-component-value.component.html |  78 ++++++------
 ...le-structured-component-value.component.ts | 112 ++++++++++++------
 ...ctured-component-management.component.html |   2 +
 ...ructured-component-management.component.ts |  30 ++---
 .../revert-value-dialog.component.html        |  62 +++++-----
 .../revert-value-dialog.component.ts          |  10 +-
 .../services/component-log-filter.service.ts  |   2 +-
 .../services/files/component-log.service.ts   |  13 +-
 .../lib/component-log/component-log-entry.ts  |   5 +-
 .../src/lib/component-log/component-value.ts  |  18 +--
 11 files changed, 187 insertions(+), 146 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
index 680565a72..4175a68f4 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
@@ -48,7 +48,6 @@ export class AddEditComponentMappingDialogComponent
 {
     protected readonly encodingTypeOptions = Object.keys(FileAttributeEncodingTypes);
     protected readonly translations = fileAttributeEncodingTypesTranslations;
-    protected readonly iconButtonTypes = IconButtonTypes;
     activeFile: File;
     form!: UntypedFormGroup;
 
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
index aaf90c70e..48037c021 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
@@ -1,5 +1,5 @@
 <div class="component-value" [ngClass]="{ selected: selected, editing: editing }" (click)="select()">
-    <div class="component">{{ entry.name }}</div>
+    <div class="component">{{ entryLabel }}</div>
     <div class="value" *ngIf="!editing; else editValue">
         <div class="text">
             <span
@@ -15,52 +15,50 @@
                 [tooltip]="'component-management.actions.edit' | translate"
                 icon="iqser:edit"
             ></iqser-circle-button>
-            <div class="changes-dot" *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"></div>
+            <div class="changes-dot" *ngIf="hasUpdatedValues && canEdit"></div>
         </div>
     </div>
     <mat-icon *ngIf="!editing" class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
 </div>
 
 <ng-template #editValue>
-    <form [formGroup]="form" (submit)="save()">
-        <div cdkDropList (cdkDropListDropped)="drop($event)">
-            <div *ngFor="let control of form.controls | keyvalue" class="editing-value" cdkDrag>
-                <mat-icon class="draggable" svgIcon="red:draggable-dots" cdkDragHandle></mat-icon>
-                <div class="iqser-input-group w-full">
-                    <textarea [formControlName]="control.key" rows="1" type="text"></textarea>
-                </div>
-                <iqser-circle-button
-                    (action)="removeValue(control.key)"
-                    [tooltip]="'component-management.actions.delete' | translate"
-                    class="remove-value"
-                    icon="iqser:trash"
-                ></iqser-circle-button>
+    <div cdkDropList (cdkDropListDropped)="drop($event)">
+        <div *ngFor="let value of entry.componentValues; let index = index" class="editing-value" cdkDrag>
+            <mat-icon class="draggable" svgIcon="red:draggable-dots" cdkDragHandle></mat-icon>
+            <div class="iqser-input-group w-full">
+                <textarea [(ngModel)]="value.value" rows="1" type="text"></textarea>
             </div>
+            <iqser-circle-button
+                (action)="removeValue(index)"
+                [tooltip]="'component-management.actions.delete' | translate"
+                class="remove-value"
+                icon="iqser:trash"
+            ></iqser-circle-button>
         </div>
-        <div class="editing-actions">
-            <iqser-icon-button
-                [disabled]="disabled"
-                (action)="save()"
-                [label]="'component-management.actions.save' | translate"
-                [type]="iconButtonTypes.primary"
-            ></iqser-icon-button>
-            <div (click)="deselect($event)" class="all-caps-label cancel" translate="component-management.actions.cancel"></div>
-            <div class="flex right">
-                <iqser-circle-button
-                    *ngIf="entry.componentValues[0].value !== entry.componentValues[0].originalValue && canEdit"
-                    (action)="undo()"
-                    [showDot]="true"
-                    [tooltip]="'component-management.actions.undo' | translate"
-                    class="undo-value"
-                    icon="red:undo"
-                ></iqser-circle-button>
-                <iqser-circle-button
-                    (action)="add()"
-                    [tooltip]="'component-management.actions.add' | translate"
-                    class="add-value"
-                    icon="iqser:plus"
-                ></iqser-circle-button>
-            </div>
+    </div>
+    <div class="editing-actions">
+        <iqser-icon-button
+            (action)="save()"
+            [disabled]="disabled"
+            [label]="'component-management.actions.save' | translate"
+            [type]="iconButtonTypes.primary"
+        ></iqser-icon-button>
+        <div (click)="deselect($event)" class="all-caps-label cancel" translate="component-management.actions.cancel"></div>
+        <div class="flex right">
+            <iqser-circle-button
+                *ngIf="hasUpdatedValues && canEdit"
+                (action)="undo()"
+                [showDot]="true"
+                [tooltip]="'component-management.actions.undo' | translate"
+                class="undo-value"
+                icon="red:undo"
+            ></iqser-circle-button>
+            <iqser-circle-button
+                (action)="add()"
+                [tooltip]="'component-management.actions.add' | translate"
+                class="add-value"
+                icon="iqser:plus"
+            ></iqser-circle-button>
         </div>
-    </form>
+    </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
index 55b353142..4a3142640 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
@@ -1,7 +1,7 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { ComponentLogEntry } from '@red/domain';
-import { FormBuilder, FormControl, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
-import { BaseFormComponent, CircleButtonComponent, IconButtonComponent, IqserDialog } from '@iqser/common-ui';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { IComponentLogEntry } from '@red/domain';
+import { FormsModule } from '@angular/forms';
+import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialog } from '@iqser/common-ui';
 import { FilterService } from '@common-ui/filtering';
 import { RevertValueDialogComponent } from '../../dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component';
 import { CdkDrag, CdkDragDrop, CdkDragHandle, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
@@ -21,34 +21,44 @@ import { TranslateModule } from '@ngx-translate/core';
         KeyValuePipe,
         CdkDropList,
         MatIcon,
-        ReactiveFormsModule,
         IconButtonComponent,
         CdkDrag,
         NgIf,
         NgForOf,
         CdkDragHandle,
+        FormsModule,
     ],
 })
-export class EditableStructuredComponentValueComponent extends BaseFormComponent implements OnInit {
-    @Input() entry: ComponentLogEntry;
+export class EditableStructuredComponentValueComponent implements OnInit {
+    @Input() entry: IComponentLogEntry;
     @Input() canEdit: boolean;
     @Output() readonly deselectLast = new EventEmitter();
+    @Output() readonly overrideValue = new EventEmitter<IComponentLogEntry>();
+    @Output() readonly revertOverride = new EventEmitter<string>();
 
-    form: UntypedFormGroup;
     selected = false;
-    editing = false;
+
+    protected entryLabel: string;
+    protected editing = false;
+    protected hasUpdatedValues = false;
+    protected initialEntry: IComponentLogEntry;
+
+    protected readonly iconButtonTypes = IconButtonTypes;
 
     constructor(
-        private readonly _formBuilder: FormBuilder,
         private readonly _filtersService: FilterService,
         private readonly _iqserDialog: IqserDialog,
-    ) {
-        super();
-    }
+    ) {}
 
     ngOnInit() {
-        this.form = this.#getForm();
-        this.initialFormValue = this.form.getRawValue();
+        this.reset();
+    }
+
+    reset() {
+        this.initialEntry = this.#initialEntry;
+        this.hasUpdatedValues = this.#hasUpdatedValues;
+        this.entryLabel = this.parseName(this.entry.name);
+        this.deselect();
     }
 
     select() {
@@ -76,34 +86,70 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
         this._filtersService.deactivateFilters({ primaryFiltersSlug: 'primaryFilters' });
     }
 
-    removeValue(key: string) {
-        this.form.removeControl(key);
+    removeValue(index: number) {
+        this.entry.componentValues.splice(index, 1);
     }
 
-    async save() {
-        const value = this.form.getRawValue();
+    get disabled() {
+        for (let i = 0; i < this.entry.componentValues.length; i++) {
+            if (this.entry.componentValues[i].value !== this.initialEntry.componentValues[i]?.value) {
+                return false;
+            }
+        }
+        return this.entry.componentValues.length === this.initialEntry.componentValues.length;
     }
 
-    undo() {
-        this._iqserDialog.openDefault(RevertValueDialogComponent, { data: { entry: this.entry }, width: '800px' });
+    save() {
+        this.entry.overridden = true;
+        this.overrideValue.emit(this.entry);
+        this.reset();
+    }
+
+    async undo() {
+        const dialog = this._iqserDialog.openDefault(RevertValueDialogComponent, { data: { entry: this.entry }, width: '800px' });
+        const result = await dialog.result();
+        if (result) {
+            this.revertOverride.emit(this.entry.name);
+            this.reset();
+        }
     }
 
     add() {
-        const key = Object.keys(this.form.controls).length.toString();
-        this.form.addControl(key, new FormControl(''));
+        this.entry.componentValues.push({
+            componentRuleId: null,
+            entityReferences: [],
+            originalValue: null,
+            value: '',
+            valueDescription: '',
+        });
     }
 
     drop(event: CdkDragDrop<string>) {
         moveItemInArray(this.entry.componentValues, event.previousIndex, event.currentIndex);
-        this.form = this.#getForm();
     }
 
-    #getForm() {
-        const form = this._formBuilder.group({});
-        this.entry.componentValues.forEach((value, index) => {
-            form.addControl(index.toString(), this._formBuilder.control(value.value ?? value.originalValue));
-        });
-        return form;
+    parseName(name: string) {
+        return name.replaceAll('_', ' ');
+    }
+
+    transformNewLines(value: string) {
+        return value.replace(/\n/g, '<br>');
+    }
+
+    get #hasUpdatedValues() {
+        for (const value of this.entry.componentValues) {
+            if (value.originalValue === null && value.value === '') {
+                continue;
+            }
+            if (value.originalValue !== value.value) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    get #initialEntry() {
+        return JSON.parse(JSON.stringify(this.entry));
     }
 
     #setWorkloadFilters() {
@@ -111,15 +157,11 @@ export class EditableStructuredComponentValueComponent extends BaseFormComponent
 
         const filterGroup = this._filtersService.getGroup('primaryFilters');
         for (const filter of filterGroup.filters) {
-            const nestedFilter = filter.children.find(f => f.label === this.entry.name);
+            const nestedFilter = filter.children.find(f => f.label === this.entryLabel);
             if (nestedFilter) {
                 this._filtersService.filterCheckboxClicked({ nestedFilter, filterGroup, primaryFiltersSlug: 'primaryFilters' });
                 return;
             }
         }
     }
-
-    transformNewLines(value: string) {
-        return value.replace(/\n/g, '<br>');
-    }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
index 0b3f3832b..fff85d262 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html
@@ -18,6 +18,8 @@
             [entry]="entry"
             [canEdit]="canEdit"
             (deselectLast)="deselectLast()"
+            (revertOverride)="revertOverride($event)"
+            (overrideValue)="overrideValue($event)"
         ></redaction-editable-structured-component-value>
         <div class="row-separator"></div>
     </div>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
index 3fa44b075..8f6e8e9a6 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
@@ -1,5 +1,5 @@
-import { Component, Input, OnInit, signal, ViewChildren } from '@angular/core';
-import { ComponentLogEntry, Dictionary, File, WorkflowFileStatuses } from '@red/domain';
+import { ChangeDetectorRef, Component, Input, OnInit, signal, ViewChildren } from '@angular/core';
+import { ComponentLogEntry, Dictionary, File, IComponentLogEntry, WorkflowFileStatuses } from '@red/domain';
 import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { ComponentLogService } from '@services/files/component-log.service';
 import { FilesMapService } from '@services/files/files-map.service';
@@ -10,6 +10,7 @@ import { EditableStructuredComponentValueComponent } from '../editable-structure
 import { FilterService } from '@common-ui/filtering';
 import { ComponentLogFilterService } from '../../services/component-log-filter.service';
 import { map } from 'rxjs/operators';
+import { toObservable } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'redaction-structured-component-management',
@@ -23,6 +24,7 @@ export class StructuredComponentManagementComponent implements OnInit {
     @ViewChildren('editableComponent') editableComponents: List<EditableStructuredComponentValueComponent>;
 
     protected readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
+    protected readonly componentLogData$ = toObservable(this.componentLogData);
     protected readonly openScmDialogByDefault = signal(this.userPreferences.getOpenScmDialogByDefault());
     protected readonly iconButtonTypes = IconButtonTypes;
     protected displayedComponents$: Observable<ComponentLogEntry[]>;
@@ -42,14 +44,8 @@ export class StructuredComponentManagementComponent implements OnInit {
     }
 
     #displayedComponents$() {
-        const componentLogData$ = this._componentLogService.getComponentLogData(
-            this.file.dossierTemplateId,
-            this.file.dossierId,
-            this.file.fileId,
-            this.dictionaries,
-        );
         const componentLogFilters$ = this._filterService.getFilterModels$('componentLogFilters');
-        return combineLatest([componentLogData$, componentLogFilters$]).pipe(
+        return combineLatest([this.componentLogData$, componentLogFilters$]).pipe(
             map(([components, filters]) => this._componentLogFilterService.filterComponents(components, filters)),
         );
     }
@@ -65,10 +61,6 @@ export class StructuredComponentManagementComponent implements OnInit {
         return this.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
     }
 
-    getValueCellId(index: number) {
-        return `value-cell-${index}`;
-    }
-
     exportJSON() {
         return firstValueFrom(this._componentLogService.exportJSON(this.file.dossierTemplateId, this.file.dossierId, this.file));
     }
@@ -99,15 +91,19 @@ export class StructuredComponentManagementComponent implements OnInit {
         this.openScmDialogByDefault.set(this.userPreferences.getOpenScmDialogByDefault());
     }
 
-    async undo(originalKey: string) {
+    async revertOverride(originalKey: string) {
         this._loadingService.start();
-        await firstValueFrom(this._componentLogService.revertOverride(this.file.dossierId, this.file.fileId, [originalKey]));
+        await firstValueFrom(
+            this._componentLogService.revertOverride(this.file.dossierTemplateId, this.file.dossierId, this.file.fileId, [originalKey]),
+        );
         await this.#loadData();
     }
 
-    async saveEdit(event: string, originalKey: string) {
+    async overrideValue(componentLogEntry: IComponentLogEntry) {
         this._loadingService.start();
-        await firstValueFrom(this._componentLogService.override(this.file.dossierId, this.file.fileId, { [originalKey]: event }));
+        await firstValueFrom(
+            this._componentLogService.override(this.file.dossierTemplateId, this.file.dossierId, this.file.fileId, componentLogEntry),
+        );
         await this.#loadData();
     }
 
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html
index c86887060..e46ec3998 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.html
@@ -1,45 +1,39 @@
 <section class="dialog">
-    <form (submit)="save()">
-        <div [translate]="'revert-value-dialog.title'" class="dialog-header heading-l"></div>
+    <div [translate]="'revert-value-dialog.title'" class="dialog-header heading-l"></div>
 
-        <div class="dialog-content">
-            <span *ngFor="let value of entry.componentValues">
-                {{ value.valueDescription }}
-            </span>
-            <div class="compare-values-container">
-                <div>
-                    <span class="header">
-                        {{ 'revert-value-dialog.original-values' | translate }}
-                    </span>
-                    <div class="values">
-                        <p *ngFor="let value of entry.componentValues; let index = index">
-                            {{ index + 1 + '. ' + value.originalValue }}
-                        </p>
-                    </div>
+    <div class="dialog-content">
+        <span *ngFor="let value of entry.componentValues">
+            {{ value.valueDescription }}
+        </span>
+        <div class="compare-values-container">
+            <div>
+                <span class="header">
+                    {{ 'revert-value-dialog.original-values' | translate }}
+                </span>
+                <div class="values">
+                    <p *ngFor="let value of entry.componentValues; let index = index">
+                        {{ index + 1 + '. ' + (value.originalValue ?? '') }}
+                    </p>
                 </div>
-                <div>
-                    <span class="header">
-                        {{ 'revert-value-dialog.current-values' | translate }}
-                    </span>
-                    <div class="values">
-                        <p *ngFor="let value of entry.componentValues; let index = index">
-                            {{ index + 1 + '. ' + value.value }}
-                        </p>
-                    </div>
+            </div>
+            <div>
+                <span class="header">
+                    {{ 'revert-value-dialog.current-values' | translate }}
+                </span>
+                <div class="values">
+                    <p *ngFor="let value of entry.componentValues; let index = index">
+                        {{ index + 1 + '. ' + value.value }}
+                    </p>
                 </div>
             </div>
         </div>
+    </div>
 
-        <div class="dialog-actions">
-            <iqser-icon-button
-                [label]="'revert-value-dialog.actions.revert' | translate"
-                [submit]="true"
-                [type]="iconButtonTypes.primary"
-            />
+    <div class="dialog-actions">
+        <iqser-icon-button (click)="save()" [label]="'revert-value-dialog.actions.revert' | translate" [type]="iconButtonTypes.primary" />
 
-            <div [translate]="'revert-value-dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
-        </div>
-    </form>
+        <div [translate]="'revert-value-dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
+    </div>
 
     <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close" />
 </section>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts
index bae5c22f4..1959fbe07 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/revert-value-dialog/revert-value-dialog.component.ts
@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
-import { CircleButtonComponent, IconButtonComponent, IqserDialogComponent } from '@iqser/common-ui';
+import { CircleButtonComponent, ConfirmOptions, IconButtonComponent, IqserDialogComponent } from '@iqser/common-ui';
 import { MatDialogClose } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
-import { ComponentLogEntry } from '@red/domain';
+import { IComponentLogEntry } from '@red/domain';
 import { NgFor } from '@angular/common';
 
 interface RevertValueData {
-    entry: ComponentLogEntry;
+    entry: IComponentLogEntry;
 }
 interface RevertValueResult {}
 
@@ -22,5 +22,7 @@ export class RevertValueDialogComponent extends IqserDialogComponent<RevertValue
     constructor() {
         super();
     }
-    save() {}
+    save() {
+        this.close(ConfirmOptions.CONFIRM);
+    }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts b/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts
index 85e8fccd5..8f58531d7 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts
@@ -13,7 +13,7 @@ export class ComponentLogFilterService {
             id =>
                 new NestedFilter({
                     id: id,
-                    label: id,
+                    label: id.replaceAll('_', ' '),
                 }),
         );
 
diff --git a/apps/red-ui/src/app/services/files/component-log.service.ts b/apps/red-ui/src/app/services/files/component-log.service.ts
index 03f2117c3..49235895e 100644
--- a/apps/red-ui/src/app/services/files/component-log.service.ts
+++ b/apps/red-ui/src/app/services/files/component-log.service.ts
@@ -50,12 +50,17 @@ export class ComponentLogService extends GenericService<void> {
         );
     }
 
-    override(dossierId: string, fileId: string, componentOverrides: Record<string, string>): Observable<void> {
-        return this._post({ componentOverrides }, `componentLog/override/${dossierId}/${fileId}`);
+    override(dossierTemplateId: string, dossierId: string, fileId: string, componentLogEntry: IComponentLogEntry) {
+        return this._http.post(
+            `/api/dossier-templates/${dossierTemplateId}/dossiers/${dossierId}/files/${fileId}/overrides`,
+            componentLogEntry,
+        );
     }
 
-    revertOverride(dossierId: string, fileId: string, components: string[]): Observable<void> {
-        return this._post({ components }, `componentLog/override/revert/${dossierId}/${fileId}`);
+    revertOverride(dossierTemplateId: string, dossierId: string, fileId: string, components: string[]) {
+        return this._http.post(`/api/dossier-templates/${dossierTemplateId}/dossiers/${dossierId}/files/${fileId}/overrides/revert`, {
+            components,
+        });
     }
 
     exportJSON(dossierTemplateId: string, dossierId: string, file?: IFile): Observable<IComponentLogData> {
diff --git a/libs/red-domain/src/lib/component-log/component-log-entry.ts b/libs/red-domain/src/lib/component-log/component-log-entry.ts
index 6616c843f..1a53a3bb5 100644
--- a/libs/red-domain/src/lib/component-log/component-log-entry.ts
+++ b/libs/red-domain/src/lib/component-log/component-log-entry.ts
@@ -6,16 +6,19 @@ export interface IComponentLogEntry {
     name: string;
     originalKey: string;
     componentValues: IComponentValue[];
+    overridden?: boolean;
 }
 
 export class ComponentLogEntry implements IComponentLogEntry {
     readonly name: string;
     readonly originalKey: string;
     readonly componentValues: ComponentValue[];
+    readonly overridden: boolean;
 
     constructor(entry: IComponentLogEntry) {
-        this.name = entry.name.replaceAll('_', ' ');
+        this.name = entry.name;
         this.originalKey = entry.name;
         this.componentValues = entry.componentValues;
+        this.overridden = !!entry.overridden;
     }
 }
diff --git a/libs/red-domain/src/lib/component-log/component-value.ts b/libs/red-domain/src/lib/component-log/component-value.ts
index e9d680f29..a5d4c776d 100644
--- a/libs/red-domain/src/lib/component-log/component-value.ts
+++ b/libs/red-domain/src/lib/component-log/component-value.ts
@@ -1,17 +1,17 @@
 export interface EntityReference {
-    readonly id: string;
-    readonly type: string;
-    readonly entityRuleId: string;
-    readonly page: number;
+    id: string;
+    type: string;
+    entityRuleId: string;
+    page: number;
     displayValue?: string;
 }
 
 export interface IComponentValue {
-    readonly value: string;
-    readonly originalValue: string;
-    readonly valueDescription: string;
-    readonly componentRuleId: string;
-    readonly entityReferences: EntityReference[];
+    value: string;
+    originalValue: string;
+    valueDescription: string;
+    componentRuleId: string;
+    entityReferences: EntityReference[];
 }
 
 export class ComponentValue implements IComponentValue {

From 6da2e35e5ba8e6f7222ed5dd50b6fc42cc819f82 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Tue, 11 Jun 2024 20:57:25 +0300
Subject: [PATCH 21/21] RED-8748 - removed unused code

---
 ...le-structured-component-value.component.ts |  2 +-
 ...ctured-component-management.component.scss | 80 -------------------
 ...ructured-component-management.component.ts | 26 +-----
 apps/red-ui/src/assets/config/config.json     | 10 +--
 libs/common-ui                                |  2 +-
 5 files changed, 8 insertions(+), 112 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
index 4a3142640..88122f1dd 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { IComponentLogEntry } from '@red/domain';
 import { FormsModule } from '@angular/forms';
 import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialog } from '@iqser/common-ui';
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
index 278e9e733..ca68bc707 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.scss
@@ -52,84 +52,4 @@ mat-icon {
             margin-right: 26px;
         }
     }
-
-    //div {
-    //    display: flex;
-    //    flex-direction: column;
-    //    gap: 10px;
-    //
-    //    &:not(:nth-last-child(-n + 2)) {
-    //        border-bottom: 1px solid var(--iqser-separator);
-    //    }
-    //
-    //    &:nth-of-type(odd) {
-    //        margin-left: 26px;
-    //    }
-    //
-    //    &:nth-of-type(even) {
-    //        margin-right: 26px;
-    //    }
-    //}
 }
-
-//.rss-row {
-//    display: flex;
-//    flex-direction: row;
-//    border-bottom: 1px solid var(--iqser-separator);
-//
-//    .rss-key {
-//        font-weight: bold;
-//        flex: 30;
-//        text-align: right;
-//        padding: 4px;
-//    }
-//
-//    .rss-value {
-//        padding: 4px;
-//        flex: 70;
-//    }
-//}
-//
-//.dialog-content {
-//    overflow: auto;
-//}
-//
-//.table {
-//    display: grid;
-//    grid-template-columns: repeat(2, 1fr);
-//
-//    > div {
-//        padding: 8px 10px;
-//    }
-//
-//    .bold {
-//        font-weight: 600;
-//    }
-//
-//    .table-header {
-//        margin: 10px 0;
-//        border-bottom: 1px solid var(--iqser-separator);
-//        background-color: var(--iqser-grey-2);
-//        font-weight: 600;
-//    }
-//}
-//
-//.annotation-grid {
-//    display: grid;
-//    grid-template-columns: 3fr 1fr 1fr 5fr;
-//}
-//
-//ul {
-//    margin: 0;
-//}
-//
-//.output-data > div:nth-child(8n + 9),
-//.output-data > div:nth-child(8n + 10) {
-//    //.output-data > div:nth-child(8n + 11),
-//    //.output-data > div:nth-child(8n + 12) {
-//    background: var(--iqser-grey-8);
-//}
-//
-//.ml-auto {
-//    margin-left: auto;
-//}
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
index 8f6e8e9a6..0b37379fb 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, OnInit, signal, ViewChildren } from '@angular/core';
+import { Component, Input, OnInit, signal, ViewChildren } from '@angular/core';
 import { ComponentLogEntry, Dictionary, File, IComponentLogEntry, WorkflowFileStatuses } from '@red/domain';
 import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { ComponentLogService } from '@services/files/component-log.service';
@@ -61,30 +61,6 @@ export class StructuredComponentManagementComponent implements OnInit {
         return this.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
     }
 
-    exportJSON() {
-        return firstValueFrom(this._componentLogService.exportJSON(this.file.dossierTemplateId, this.file.dossierId, this.file));
-    }
-
-    exportXML() {
-        return firstValueFrom(this._componentLogService.exportXML(this.file.dossierTemplateId, this.file.dossierId, this.file));
-    }
-
-    async exportAllInDossier() {
-        const allFilesInDossier = this._filesMapService.get(this.file.dossierId);
-        for (const file of allFilesInDossier) {
-            await firstValueFrom(this._componentLogService.exportJSON(this.file.dossierTemplateId, file.dossierId, file));
-            await firstValueFrom(this._componentLogService.exportXML(this.file.dossierTemplateId, file.dossierId, file));
-        }
-    }
-
-    save() {
-        return this.exportJSON();
-    }
-
-    parseType(type: string) {
-        return type.replaceAll('_', ' ').replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());
-    }
-
     async toggleOpenScmDialogByDefault() {
         await this.userPreferences.toggleOpenScmDialogByDefault();
         await this.userPreferences.reload();
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index 2ccc6f6d1..deb14e6da 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,9 +1,9 @@
 {
   "ADMIN_CONTACT_NAME": null,
   "ADMIN_CONTACT_URL": null,
-  "API_URL": "https://frontend2.iqser.cloud",
+  "API_URL": "https://dan1.iqser.cloud",
   "APP_NAME": "RedactManager",
-  "IS_DOCUMINE": true,
+  "IS_DOCUMINE": false,
   "RULE_EDITOR_DEV_ONLY": false,
   "AUTO_READ_TIME": 3,
   "BACKEND_APP_VERSION": "4.4.40",
@@ -13,13 +13,13 @@
   "MAX_RETRIES_ON_SERVER_ERROR": 3,
   "OAUTH_CLIENT_ID": "redaction",
   "OAUTH_IDP_HINT": null,
-  "OAUTH_URL": "https://frontend2.iqser.cloud/auth",
+  "OAUTH_URL": "https://dan1.iqser.cloud/auth",
   "RECENT_PERIOD_IN_HOURS": 24,
   "SELECTION_MODE": "structural",
   "MANUAL_BASE_URL": "https://docs.redactmanager.com/preview",
   "ANNOTATIONS_THRESHOLD": 1000,
-  "THEME": "scm",
-  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/scm/",
+  "THEME": "redact",
+  "BASE_TRANSLATIONS_DIRECTORY": "/assets/i18n/redact/",
   "AVAILABLE_NOTIFICATIONS_DAYS": 30,
   "AVAILABLE_OLD_NOTIFICATIONS_MINUTES": 60,
   "NOTIFICATIONS_THRESHOLD": 1000,
diff --git a/libs/common-ui b/libs/common-ui
index e733adf37..748cce403 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit e733adf37436ca81a5c38f08ec2a517124cfd140
+Subproject commit 748cce403285c97e14cd3115a828c94c9d5d4520