From dbc609765bf855673e5a941e5d554e1892eba059 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 29 Jul 2024 01:02:46 +0300
Subject: [PATCH] WIP on master

RED-8748 - Integrated component view in DocuMine
---
 .../documine-export.component.html            |   1 -
 .../documine-export.component.ts              |  13 +-
 ...-structured-component-value.component.html | 130 +++---
 ...-structured-component-value.component.scss |  24 +-
 .../file-header/file-header.component.html    |   2 +-
 .../file-workload.component.html              | 373 +++++++++---------
 ...ile-preview-right-container.component.html |   4 +-
 .../file-preview-screen.component.scss        |   2 +-
 .../services/viewer-header.service.ts         |   9 +-
 apps/red-ui/src/styles.scss                   |   2 +-
 10 files changed, 303 insertions(+), 257 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 c54c1298b..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
@@ -6,7 +6,6 @@
     [matMenuTriggerFor]="bulkComponentDownloadMenu"
     [matTooltipPosition]="'above'"
     [matTooltip]="'documine-export.export-tooltip' | translate"
-    [hidden]="true"
     class="red-tab"
 >
     {{ 'documine-export.export' | translate }}
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 2a412ffb4..74c75e514 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,6 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, input, Input } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
-import { Dossier } from '@red/domain';
+import { Dossier, File } from '@red/domain';
 import { ComponentLogService } from '@services/files/component-log.service';
 import { MatTooltip } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
@@ -13,15 +13,18 @@ import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
     imports: [MatTooltip, TranslateModule, MatMenuTrigger, MatMenu, MatMenuItem],
 })
 export class DocumineExportComponent {
-    @Input() dossier: Dossier;
+    readonly dossier = input<Dossier>();
+    readonly file = input<File>();
 
     constructor(private readonly _componentLogService: ComponentLogService) {}
 
     downloadComponentAsJSON() {
-        return firstValueFrom(this._componentLogService.exportJSON(this.dossier.dossierTemplateId, this.dossier.dossierId));
+        return firstValueFrom(
+            this._componentLogService.exportJSON(this.dossier().dossierTemplateId, this.dossier().dossierId, this.file()),
+        );
     }
 
     async downloadComponentAsXML() {
-        return firstValueFrom(this._componentLogService.exportXML(this.dossier.dossierTemplateId, this.dossier.dossierId));
+        return firstValueFrom(this._componentLogService.exportXML(this.dossier().dossierTemplateId, this.dossier().dossierId, this.file()));
     }
 }
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 42be825f6..92216e66a 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,64 +1,76 @@
 <div (click)="select()" [ngClass]="{ selected: selected, editing: editing }" class="component-value">
     <div class="component">{{ entryLabel }}</div>
-    <div *ngIf="!editing; else editValue" class="value">
-        <div class="text">
-            <span
-                *ngFor="let componentValue of entry.componentValues"
-                [innerHTML]="transformNewLines(componentValue.value ?? componentValue.originalValue)"
-            >
-            </span>
-        </div>
-        <div class="actions">
-            <iqser-circle-button
-                (action)="edit()"
-                *ngIf="canEdit"
-                [tooltip]="'component-management.actions.edit' | translate"
-                icon="iqser:edit"
-            ></iqser-circle-button>
-            <div *ngIf="hasUpdatedValues && canEdit" class="changes-dot"></div>
-        </div>
-    </div>
-    <mat-icon *ngIf="!editing" class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
-</div>
-
-<ng-template #editValue>
-    <div (cdkDropListDropped)="drop($event)" cdkDropList>
-        <div *ngFor="let value of entry.componentValues; let index = index" cdkDrag class="editing-value">
-            <mat-icon cdkDragHandle class="draggable" svgIcon="red:draggable-dots"></mat-icon>
-            <div class="iqser-input-group w-full">
-                <textarea [id]="'value-input-' + index" [(ngModel)]="value.value" rows="1" type="text"></textarea>
+    @if (!editing) {
+        <div class="value">
+            <div class="text">
+                @for (componentValue of entry.componentValues; track componentValue) {
+                    <span [innerHTML]="transformNewLines(componentValue.value ?? componentValue.originalValue)"></span>
+                }
+            </div>
+            <div class="actions">
+                @if (canEdit) {
+                    <iqser-circle-button
+                        (action)="edit()"
+                        [tooltip]="'component-management.actions.edit' | translate"
+                        icon="iqser:edit"
+                    ></iqser-circle-button>
+                    @if (hasUpdatedValues) {
+                        <div class="changes-dot"></div>
+                    }
+                }
             </div>
-            <iqser-circle-button
-                (action)="removeValue(index)"
-                [tooltip]="'component-management.actions.delete' | translate"
-                class="remove-value"
-                icon="iqser:trash"
-            ></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
-                (action)="undo()"
-                *ngIf="hasUpdatedValues && canEdit"
-                [tooltip]="'component-management.actions.undo' | translate"
-                class="undo-value"
-                icon="red:undo"
-                showDot
-            ></iqser-circle-button>
-            <iqser-circle-button
-                (action)="add()"
-                [tooltip]="'component-management.actions.add' | translate"
-                class="add-value"
-                icon="iqser:plus"
-            ></iqser-circle-button>
+    } @else {
+        <div (cdkDropListDropped)="drop($event)" cdkDropList>
+            @for (value of entry.componentValues; track value) {
+                <div cdkDrag class="editing-value">
+                    <mat-icon
+                        [class.hidden-button]="entry.componentValues.length === 1"
+                        cdkDragHandle
+                        class="draggable"
+                        svgIcon="red:draggable-dots"
+                    ></mat-icon>
+                    <div class="iqser-input-group w-full">
+                        <textarea [id]="'value-input-' + $index" [(ngModel)]="value.value" rows="1" type="text"></textarea>
+                    </div>
+                    <iqser-circle-button
+                        (action)="removeValue($index)"
+                        [tooltip]="'component-management.actions.delete' | translate"
+                        [class.hidden-button]="entry.componentValues.length === 1"
+                        class="remove-value"
+                        icon="iqser:trash"
+                    ></iqser-circle-button>
+                </div>
+            }
         </div>
-    </div>
-</ng-template>
+        <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">
+                @if (hasUpdatedValues && canEdit) {
+                    <iqser-circle-button
+                        (action)="undo()"
+                        [tooltip]="'component-management.actions.undo' | translate"
+                        class="undo-value"
+                        icon="red:undo"
+                        showDot
+                    ></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>
+    }
+    @if (!editing) {
+        <mat-icon class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
+    }
+</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 288ed4125..3ee2c0515 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
@@ -59,7 +59,6 @@
     &:not(.header):hover,
     &.selected {
         background-color: var(--iqser-grey-8);
-        border-left: 4px solid var(--iqser-primary);
         margin-left: 0;
         margin-right: 0;
 
@@ -67,18 +66,31 @@
             cursor: pointer;
         }
 
-        .component {
-            margin-left: 22px;
-        }
         .value {
             margin-right: 26px;
+        }
+    }
 
+    &:hover {
+        .component {
+            margin-left: 26px;
+        }
+
+        .value {
             .actions {
                 iqser-circle-button {
                     visibility: visible;
                 }
             }
         }
+    }
+
+    &.selected {
+        border-left: 4px solid var(--iqser-primary);
+
+        .component {
+            margin-left: 22px;
+        }
 
         .arrow-right {
             visibility: visible;
@@ -129,6 +141,10 @@
     }
 }
 
+.hidden-button {
+    visibility: hidden;
+}
+
 ::ng-deep .add-value {
     mat-icon {
         transform: scale(2);
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 a18228626..f7606feb3 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" [dossier]="state.dossier()"></redaction-documine-export>
+        <redaction-documine-export *ngIf="isDocumine" [dossier]="state.dossier()" [file]="state.file()"></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/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
index 8236f6291..9e6fac31b 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
@@ -32,197 +32,212 @@
     </ng-template>
 </ng-container>
 
-<div class="right-content">
-    <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>
+@if (displayedAnnotations$ | async; as annotations) {
+    <div class="right-content">
+        <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">
-            <iqser-round-checkbox
-                (click)="annotationManager.deselect()"
-                [indeterminate]="listingService.areSomeSelected$ | async"
-                type="with-bg"
-            ></iqser-round-checkbox>
+        <div *ngIf="multiSelectService.active()" class="multi-select">
+            <div class="selected-wrapper">
+                <iqser-round-checkbox
+                    (click)="annotationManager.deselect()"
+                    [indeterminate]="listingService.areSomeSelected$ | async"
+                    type="with-bg"
+                ></iqser-round-checkbox>
 
-            <span class="all-caps-label">{{ listingService.selectedLength$ | async }} selected </span>
+                <span class="all-caps-label">{{ listingService.selectedLength$ | async }} selected </span>
 
-            <redaction-annotation-actions
-                *ngIf="listingService.areSomeSelected$ | async"
-                [alwaysVisible]="true"
-                [annotations]="listingService.selectedEntities$ | async"
-                [canPerformAnnotationActions]="state.isWritable()"
-                buttonType="primary"
-                tooltipPosition="above"
-            ></redaction-annotation-actions>
-        </div>
-
-        <iqser-circle-button
-            (action)="multiSelectService.deactivate()"
-            [tooltip]="'file-preview.tabs.multi-select.close' | translate"
-            [type]="circleButtonTypes.primary"
-            icon="iqser:close"
-            tooltipPosition="before"
-        ></iqser-circle-button>
-    </div>
-
-    <div class="annotations-wrapper" [class.documine-direction]="isDocumine">
-        <div [class.border-left]="isDocumine">
-            <div
-                #quickNavigation
-                *ngIf="!(documentInfoService.shown() && isDocumine); else documentInfo"
-                (keydown)="preventKeyDefault($event)"
-                (keyup)="preventKeyDefault($event)"
-                [class.active-panel]="pagesPanelActive"
-                class="quick-navigation"
-                tabindex="0"
-            >
-                <div
-                    (click)="scrollQuickNavFirst()"
-                    [class.disabled]="pdf.currentPage() === 1"
-                    [matTooltip]="'file-preview.quick-nav.jump-first' | translate"
-                    [class.documine-height]="isDocumine"
-                    class="jump"
-                    matTooltipPosition="above"
-                >
-                    <mat-icon svgIcon="iqser:nav-first"></mat-icon>
-                </div>
-
-                <redaction-pages (click)="pagesPanelActive = true" [pages]="displayedPages"></redaction-pages>
-
-                <div
-                    (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"
-                >
-                    <mat-icon svgIcon="iqser:nav-last"></mat-icon>
-                </div>
-            </div>
-        </div>
-
-        <div class="content" [class.documine-width]="isDocumine">
-            <div
-                *ngIf="!viewModeService.isEarmarks()"
-                [attr.anotation-page-header]="pdf.currentPage()"
-                [hidden]="excludedPagesService.shown()"
-                class="workload-separator"
-            >
-                <span *ngIf="!!pdf.currentPage()" class="flex-align-items-center">
-                    <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>
-                    </ng-container>
-                </span>
-
-                <div *ngIf="multiSelectService.active()">
-                    <div
-                        (click)="selectAllOnActivePage()"
-                        class="all-caps-label primary pointer"
-                        translate="file-preview.tabs.annotations.select-all"
-                    ></div>
-                    <div
-                        (click)="deselectAllOnActivePage()"
-                        class="all-caps-label primary pointer"
-                        translate="file-preview.tabs.annotations.select-none"
-                    ></div>
-                </div>
+                <redaction-annotation-actions
+                    *ngIf="listingService.areSomeSelected$ | async"
+                    [alwaysVisible]="true"
+                    [annotations]="listingService.selectedEntities$ | async"
+                    [canPerformAnnotationActions]="state.isWritable()"
+                    buttonType="primary"
+                    tooltipPosition="above"
+                ></redaction-annotation-actions>
             </div>
 
-            <div
-                #annotationsElement
-                (keydown)="preventKeyDefault($event)"
-                (keyup)="preventKeyDefault($event)"
-                [class.active-panel]="!pagesPanelActive"
-                [hidden]="excludedPagesService.shown()"
-                class="annotations"
-                id="annotations-list"
-                tabindex="1"
-            >
-                <ng-container *ngIf="pdf.currentPage() && !displayedAnnotations.get(pdf.currentPage())?.length">
-                    <iqser-empty-state
-                        [horizontalPadding]="24"
-                        [text]="'file-preview.no-data.title' | translate"
-                        [verticalPadding]="40"
-                        icon="iqser:document"
+            <iqser-circle-button
+                (action)="multiSelectService.deactivate()"
+                [tooltip]="'file-preview.tabs.multi-select.close' | translate"
+                [type]="circleButtonTypes.primary"
+                icon="iqser:close"
+                tooltipPosition="before"
+            ></iqser-circle-button>
+        </div>
+
+        <div class="annotations-wrapper" [class.documine-direction]="isDocumine">
+            <div [class.border-left]="isDocumine">
+                <div
+                    #quickNavigation
+                    *ngIf="!(documentInfoService.shown() && isDocumine); else documentInfo"
+                    (keydown)="preventKeyDefault($event)"
+                    (keyup)="preventKeyDefault($event)"
+                    [class.active-panel]="pagesPanelActive"
+                    class="quick-navigation"
+                    tabindex="0"
+                >
+                    <div
+                        (click)="scrollQuickNavFirst()"
+                        [class.disabled]="pdf.currentPage() === 1"
+                        [matTooltip]="'file-preview.quick-nav.jump-first' | translate"
+                        [class.documine-height]="isDocumine"
+                        class="jump"
+                        matTooltipPosition="above"
                     >
-                        <ng-container *ngIf="currentPageIsExcluded() && displayedPages.length">
-                            {{ 'file-preview.tabs.annotations.page-is' | translate }}
-                            <a
-                                (click)="excludedPagesService.toggle()"
-                                class="with-underline"
-                                translate="file-preview.excluded-from-redaction"
-                            ></a
-                            >.
-                        </ng-container>
-
-                        <ng-container *ngIf="(fileDataService.allLength$ | async) === 0 || filterService.noAnnotationsFilterChecked">
-                            {{ 'file-preview.tabs.annotations.no-annotations' | translate }}
-                        </ng-container>
-
-                        <ng-container
-                            *ngIf="
-                                (fileDataService.allLength$ | async) > 0 &&
-                                displayedPages.length === 0 &&
-                                !filterService.noAnnotationsFilterChecked
-                            "
-                            >{{ 'file-preview.tabs.annotations.wrong-filters' | translate }}
-                            <a (click)="filterService.reset()" class="with-underline" translate="file-preview.tabs.annotations.reset"></a>
-                            {{ 'file-preview.tabs.annotations.the-filters' | translate }}
-                        </ng-container>
-                    </iqser-empty-state>
-
-                    <div *ngIf="displayedPages.length" class="no-annotations-buttons-container mt-32">
-                        <iqser-icon-button
-                            (action)="jumpToPreviousWithAnnotations()"
-                            [disabled]="pdf.currentPage() <= displayedPages[0]"
-                            [label]="'file-preview.tabs.annotations.jump-to-previous' | translate"
-                            [type]="iconButtonTypes.dark"
-                            icon="iqser:nav-prev"
-                        ></iqser-icon-button>
-
-                        <iqser-icon-button
-                            (action)="jumpToNextWithAnnotations()"
-                            [disabled]="pdf.currentPage() >= displayedPages[displayedPages.length - 1]"
-                            [label]="'file-preview.tabs.annotations.jump-to-next' | translate"
-                            [type]="iconButtonTypes.dark"
-                            class="mt-8"
-                            icon="iqser:nav-next"
-                        ></iqser-icon-button>
+                        <mat-icon svgIcon="iqser:nav-first"></mat-icon>
                     </div>
-                </ng-container>
 
-                <redaction-annotations-list
-                    (pagesPanelActive)="pagesPanelActive = $event"
-                    [annotations]="(displayedAnnotations$ | async)?.get(pdf.currentPage())"
-                ></redaction-annotations-list>
+                    <redaction-pages (click)="pagesPanelActive = true" [pages]="displayedPages"></redaction-pages>
+
+                    <div
+                        (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"
+                    >
+                        <mat-icon svgIcon="iqser:nav-last"></mat-icon>
+                    </div>
+                </div>
             </div>
 
-            <redaction-page-exclusion *ngIf="excludedPagesService.shown()"></redaction-page-exclusion>
+            <div class="content" [class.documine-width]="isDocumine">
+                @if (state.file().excluded && documentInfoService.hidden()) {
+                    <iqser-empty-state
+                        [horizontalPadding]="40"
+                        [text]="'file-preview.tabs.is-excluded' | translate"
+                        icon="red:needs-work"
+                    ></iqser-empty-state>
+                } @else {
+                    <div
+                        *ngIf="!viewModeService.isEarmarks()"
+                        [attr.anotation-page-header]="pdf.currentPage()"
+                        [hidden]="excludedPagesService.shown()"
+                        class="workload-separator"
+                    >
+                        <span *ngIf="!!pdf.currentPage()" class="flex-align-items-center">
+                            <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>
+                            </ng-container>
+                        </span>
+
+                        <div *ngIf="multiSelectService.active()">
+                            <div
+                                (click)="selectAllOnActivePage()"
+                                class="all-caps-label primary pointer"
+                                translate="file-preview.tabs.annotations.select-all"
+                            ></div>
+                            <div
+                                (click)="deselectAllOnActivePage()"
+                                class="all-caps-label primary pointer"
+                                translate="file-preview.tabs.annotations.select-none"
+                            ></div>
+                        </div>
+                    </div>
+
+                    <div
+                        #annotationsElement
+                        (keydown)="preventKeyDefault($event)"
+                        (keyup)="preventKeyDefault($event)"
+                        [class.active-panel]="!pagesPanelActive"
+                        [hidden]="excludedPagesService.shown()"
+                        class="annotations"
+                        id="annotations-list"
+                        tabindex="1"
+                    >
+                        <ng-container *ngIf="pdf.currentPage() && !displayedAnnotations.get(pdf.currentPage())?.length">
+                            <iqser-empty-state
+                                [horizontalPadding]="24"
+                                [text]="'file-preview.no-data.title' | translate"
+                                [verticalPadding]="40"
+                                icon="iqser:document"
+                            >
+                                <ng-container *ngIf="currentPageIsExcluded() && displayedPages.length">
+                                    {{ 'file-preview.tabs.annotations.page-is' | translate }}
+                                    <a
+                                        (click)="excludedPagesService.toggle()"
+                                        class="with-underline"
+                                        translate="file-preview.excluded-from-redaction"
+                                    ></a
+                                    >.
+                                </ng-container>
+
+                                <ng-container
+                                    *ngIf="(fileDataService.allLength$ | async) === 0 || filterService.noAnnotationsFilterChecked"
+                                >
+                                    {{ 'file-preview.tabs.annotations.no-annotations' | translate }}
+                                </ng-container>
+
+                                <ng-container
+                                    *ngIf="
+                                        (fileDataService.allLength$ | async) > 0 &&
+                                        displayedPages.length === 0 &&
+                                        !filterService.noAnnotationsFilterChecked
+                                    "
+                                    >{{ 'file-preview.tabs.annotations.wrong-filters' | translate }}
+                                    <a
+                                        (click)="filterService.reset()"
+                                        class="with-underline"
+                                        translate="file-preview.tabs.annotations.reset"
+                                    ></a>
+                                    {{ 'file-preview.tabs.annotations.the-filters' | translate }}
+                                </ng-container>
+                            </iqser-empty-state>
+
+                            <div *ngIf="displayedPages.length" class="no-annotations-buttons-container mt-32">
+                                <iqser-icon-button
+                                    (action)="jumpToPreviousWithAnnotations()"
+                                    [disabled]="pdf.currentPage() <= displayedPages[0]"
+                                    [label]="'file-preview.tabs.annotations.jump-to-previous' | translate"
+                                    [type]="iconButtonTypes.dark"
+                                    icon="iqser:nav-prev"
+                                ></iqser-icon-button>
+
+                                <iqser-icon-button
+                                    (action)="jumpToNextWithAnnotations()"
+                                    [disabled]="pdf.currentPage() >= displayedPages[displayedPages.length - 1]"
+                                    [label]="'file-preview.tabs.annotations.jump-to-next' | translate"
+                                    [type]="iconButtonTypes.dark"
+                                    class="mt-8"
+                                    icon="iqser:nav-next"
+                                ></iqser-icon-button>
+                            </div>
+                        </ng-container>
+
+                        <redaction-annotations-list
+                            (pagesPanelActive)="pagesPanelActive = $event"
+                            [annotations]="annotations.get(pdf.currentPage())"
+                        ></redaction-annotations-list>
+                    </div>
+                }
+                <redaction-page-exclusion *ngIf="excludedPagesService.shown()"></redaction-page-exclusion>
+            </div>
         </div>
     </div>
-</div>
+}
 
 <ng-template #annotationFilterActionTemplate let-filter="filter">
     <iqser-circle-button
diff --git a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html
index 54f172f50..c11a4a464 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="state.file() as file">
     <iqser-empty-state
-        *ngIf="file.excluded && documentInfoService.hidden()"
+        *ngIf="file.excluded && documentInfoService.hidden() && !this.isDocumine"
         [horizontalPadding]="40"
         [text]="'file-preview.tabs.is-excluded' | translate"
         icon="red:needs-work"
@@ -8,5 +8,5 @@
 
     <redaction-document-info *ngIf="documentInfoService.shown() && !isDocumine" id="document-info"></redaction-document-info>
 
-    <redaction-file-workload *ngIf="!file.excluded"></redaction-file-workload>
+    <redaction-file-workload *ngIf="!file.excluded || isDocumine"></redaction-file-workload>
 </ng-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 b708a86bd..caada04ca 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
@@ -39,7 +39,7 @@
     }
 
     &.documine-container {
-        width: 70%;
+        width: 60%;
     }
 }
 
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 41b4d7d05..e50423b4c 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,7 @@ export class ViewerHeaderService {
 
     updateElements(): void {
         this._pdf.instance?.UI.setHeaderItems(header => {
+            const documineButtons = this.#isDocumine ? 1 : 0;
             const enabledItems: IHeaderElement[] = [];
             const groups: HeaderElementType[][] = [
                 [HeaderElements.COMPARE_BUTTON, HeaderElements.CLOSE_COMPARE_BUTTON],
@@ -293,15 +294,15 @@ export class ViewerHeaderService {
             groups.forEach(group => this.#pushGroup(enabledItems, group));
 
             const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS);
-            let startButtons = 11;
-            let deleteCount = 15;
+            let startButtons = 11 - documineButtons;
+            let deleteCount = 15 - documineButtons;
 
             if (this.#isEnabled(HeaderElements.LOAD_ALL_ANNOTATIONS)) {
                 if (!header.getItems().includes(loadAllAnnotationsButton)) {
                     header.get('leftPanelButton').insertAfter(loadAllAnnotationsButton);
                 }
-                startButtons = 12;
-                deleteCount = 16;
+                startButtons = 12 - documineButtons;
+                deleteCount = 16 - documineButtons;
             } else {
                 header.delete(HeaderElements.LOAD_ALL_ANNOTATIONS);
             }
diff --git a/apps/red-ui/src/styles.scss b/apps/red-ui/src/styles.scss
index 205a6afba..da0a70cfa 100644
--- a/apps/red-ui/src/styles.scss
+++ b/apps/red-ui/src/styles.scss
@@ -164,7 +164,7 @@ $dark-accent-10: darken(vars.$accent, 10%);
 body {
     --workload-width: 350px;
     --documine-workload-content-width: 287px;
-    --structured-component-management-width: 30%;
+    --structured-component-management-width: 40%;
     --qiuck-navigation-width: 61px;
     --iqser-app-name-font-family: OpenSans Extrabold, sans-serif;
     --iqser-app-name-font-size: 13px;