From ef5e5ded18652f398aafdfab2f11a547d2d8b2c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 30 Sep 2021 02:00:47 +0300
Subject: [PATCH 1/4] Refactor dossier listing & overview

---
 .../team-members-manager.component.ts         |  16 +-
 ...sign-reviewer-approver-dialog.component.ts |   1 -
 .../dossier/dossiers-routing.module.ts        |  10 +-
 .../app/modules/dossier/dossiers.module.ts    |  27 +-
 .../dossier-listing-screen.component.html     |  86 ---
 .../dossier-listing-screen.component.scss     |  22 -
 .../dossier-listing-screen.component.ts       | 336 ----------
 .../dossier-overview-screen.component.ts      | 601 ------------------
 ...ssier-overview-bulk-actions.component.html |   0
 ...ssier-overview-bulk-actions.component.scss |   0
 ...dossier-overview-bulk-actions.component.ts |  12 +-
 .../dossier-details-stats.component.html      |   0
 .../dossier-details-stats.component.scss      |   0
 .../dossier-details-stats.component.ts        |   2 +-
 .../dossier-details.component.html            |   0
 .../dossier-details.component.scss            |   0
 .../dossier-details.component.ts              |   5 +-
 .../table-item/table-item.component.html      |  70 ++
 .../table-item/table-item.component.scss      |  26 +
 .../table-item/table-item.component.ts        |  19 +
 .../dossier-overview/config.service.ts        | 364 +++++++++++
 .../dossier-overview.module.ts                |  34 +
 .../dossier-overview-screen.component.html    |  98 +--
 .../dossier-overview-screen.component.scss    |  30 +-
 .../dossier-overview-screen.component.ts      | 280 ++++++++
 .../dossiers-listing-actions.component.html}  |   0
 .../dossiers-listing-actions.component.scss}  |   0
 .../dossiers-listing-actions.component.ts}    |  42 +-
 .../dossiers-listing-details.component.html}  |   0
 .../dossiers-listing-details.component.scss}  |   0
 .../dossiers-listing-details.component.ts}    |   8 +-
 ...ssiers-listing-dossier-name.component.html |  31 +
 ...ssiers-listing-dossier-name.component.scss |   0
 ...dossiers-listing-dossier-name.component.ts |  18 +
 .../table-item/table-item.component.html      |  12 +
 .../table-item/table-item.component.scss      |   3 +
 .../table-item/table-item.component.ts        |  15 +
 .../dossiers-listing/config.service.ts        | 213 +++++++
 .../dossiers-listing.module.ts                |  34 +
 .../dossiers-listing-screen.component.html    |  36 ++
 .../dossiers-listing-screen.component.scss    |  14 +
 .../dossiers-listing-screen.component.ts      | 141 ++++
 .../file-preview-screen.component.ts          |   4 +-
 .../file-actions/file-actions.component.html  |   0
 .../file-actions/file-actions.component.scss  |   0
 .../file-actions/file-actions.component.ts    |   4 +-
 .../needs-work-badge.component.html           |   0
 .../needs-work-badge.component.scss           |   0
 .../needs-work-badge.component.ts             |   2 +-
 .../services/file-action.service.ts           |   4 +-
 .../dossier/shared/shared-dossiers.module.ts  |  17 +
 .../team-members/team-members.component.html  |   0
 .../team-members/team-members.component.scss  |   0
 .../team-members/team-members.component.ts    |   0
 .../type-filter/type-filter.component.html    |   0
 .../type-filter/type-filter.component.scss    |   0
 .../type-filter/type-filter.component.ts      |   2 +-
 .../src/app/modules/shared/shared.module.ts   |  12 +-
 apps/red-ui/src/app/utils/index.ts            |  17 +
 libs/common-ui                                |   2 +-
 60 files changed, 1423 insertions(+), 1247 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
 delete mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss
 delete mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
 delete mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
 rename apps/red-ui/src/app/modules/dossier/{ => screens/dossier-overview}/components/bulk-actions/dossier-overview-bulk-actions.component.html (100%)
 rename apps/red-ui/src/app/modules/dossier/{ => screens/dossier-overview}/components/bulk-actions/dossier-overview-bulk-actions.component.scss (100%)
 rename apps/red-ui/src/app/modules/dossier/{ => screens/dossier-overview}/components/bulk-actions/dossier-overview-bulk-actions.component.ts (94%)
 rename apps/red-ui/src/app/modules/dossier/{ => screens/dossier-overview}/components/dossier-details-stats/dossier-details-stats.component.html (100%)
 rename apps/red-ui/src/app/modules/dossier/{ => screens/dossier-overview}/components/dossier-details-stats/dossier-details-stats.component.scss (100%)
 rename apps/red-ui/src/app/modules/dossier/{ => screens/dossier-overview}/components/dossier-details-stats/dossier-details-stats.component.ts (93%)
 rename apps/red-ui/src/app/modules/dossier/{ => screens/dossier-overview}/components/dossier-details/dossier-details.component.html (100%)
 rename apps/red-ui/src/app/modules/dossier/{ => screens/dossier-overview}/components/dossier-details/dossier-details.component.scss (100%)
 rename apps/red-ui/src/app/modules/dossier/{ => screens/dossier-overview}/components/dossier-details/dossier-details.component.ts (95%)
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.ts
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts
 rename apps/red-ui/src/app/modules/dossier/screens/{dossier-overview-screen => dossier-overview/screen}/dossier-overview-screen.component.html (66%)
 rename apps/red-ui/src/app/modules/dossier/screens/{dossier-overview-screen => dossier-overview/screen}/dossier-overview-screen.component.scss (77%)
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts
 rename apps/red-ui/src/app/modules/dossier/{components/dossier-listing-actions/dossier-listing-actions.component.html => screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html} (100%)
 rename apps/red-ui/src/app/modules/dossier/{components/dossier-listing-actions/dossier-listing-actions.component.scss => screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.scss} (100%)
 rename apps/red-ui/src/app/modules/dossier/{components/dossier-listing-actions/dossier-listing-actions.component.ts => screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts} (84%)
 rename apps/red-ui/src/app/modules/dossier/{components/dossier-listing-details/dossier-listing-details.component.html => screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html} (100%)
 rename apps/red-ui/src/app/modules/dossier/{components/dossier-listing-details/dossier-listing-details.component.scss => screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss} (100%)
 rename apps/red-ui/src/app/modules/dossier/{components/dossier-listing-details/dossier-listing-details.component.ts => screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts} (72%)
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts
 rename apps/red-ui/src/app/modules/dossier/{ => shared}/components/file-actions/file-actions.component.html (100%)
 rename apps/red-ui/src/app/modules/dossier/{ => shared}/components/file-actions/file-actions.component.scss (100%)
 rename apps/red-ui/src/app/modules/dossier/{ => shared}/components/file-actions/file-actions.component.ts (99%)
 rename apps/red-ui/src/app/modules/dossier/{ => shared}/components/needs-work-badge/needs-work-badge.component.html (100%)
 rename apps/red-ui/src/app/modules/dossier/{ => shared}/components/needs-work-badge/needs-work-badge.component.scss (100%)
 rename apps/red-ui/src/app/modules/dossier/{ => shared}/components/needs-work-badge/needs-work-badge.component.ts (96%)
 rename apps/red-ui/src/app/modules/dossier/{ => shared}/services/file-action.service.ts (96%)
 create mode 100644 apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts
 rename apps/red-ui/src/app/modules/{dossier => shared}/components/team-members/team-members.component.html (100%)
 rename apps/red-ui/src/app/modules/{dossier => shared}/components/team-members/team-members.component.scss (100%)
 rename apps/red-ui/src/app/modules/{dossier => shared}/components/team-members/team-members.component.ts (100%)
 rename apps/red-ui/src/app/modules/{dossier => shared}/components/type-filter/type-filter.component.html (100%)
 rename apps/red-ui/src/app/modules/{dossier => shared}/components/type-filter/type-filter.component.scss (100%)
 rename apps/red-ui/src/app/modules/{dossier => shared}/components/type-filter/type-filter.component.ts (94%)
 create mode 100644 apps/red-ui/src/app/utils/index.ts

diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts
index be0aef561..be438a273 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts
@@ -4,7 +4,7 @@ import { AppStateService } from '@state/app-state.service';
 import { UserService } from '@services/user.service';
 import { Toaster } from '@iqser/common-ui';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Dossier } from '../../../../state/model/dossier';
+import { Dossier } from '@state/model/dossier';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
@@ -119,6 +119,13 @@ export class TeamMembersManagerComponent implements OnInit {
         this._loadData();
     }
 
+    setMembersSelectOptions(): void {
+        this.membersSelectOptions = this.userService.eligibleUsers
+            .filter(user => this.userService.getNameForId(user.id).toLowerCase().includes(this.searchQuery.toLowerCase()))
+            .filter(user => this.selectedOwnerId !== user.id)
+            .map(user => user.id);
+    }
+
     private _updateChanged() {
         if (this.dossier.ownerId !== this.selectedOwnerId) {
             this.changed = true;
@@ -138,13 +145,6 @@ export class TeamMembersManagerComponent implements OnInit {
         this.selectedReviewersList = this.selectedMembersList.filter(m => this.selectedApproversList.indexOf(m) === -1);
     }
 
-    setMembersSelectOptions(): void {
-        this.membersSelectOptions = this.userService.eligibleUsers
-            .filter(user => this.userService.getNameForId(user.id).toLowerCase().includes(this.searchQuery.toLowerCase()))
-            .filter(user => this.selectedOwnerId !== user.id)
-            .map(user => user.id);
-    }
-
     private _loadData() {
         this.teamForm = this._formBuilder.group({
             owner: [this.dossier?.ownerId, Validators.required],
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
index 7bbbd4ff5..3a49970ba 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
@@ -69,7 +69,6 @@ export class AssignReviewerApproverDialogComponent {
             const selectedUser = this.selectedSingleUser;
 
             if (this.data.mode === 'reviewer') {
-                console.log('assign reviewer');
                 await this._filesService
                     .setReviewerFor(
                         this.data.files.map(f => f.fileId),
diff --git a/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts b/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts
index b695f17eb..33a456ffe 100644
--- a/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/dossiers-routing.module.ts
@@ -1,13 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { DossierListingScreenComponent } from './screens/dossier-listing-screen/dossier-listing-screen.component';
 import { CompositeRouteGuard } from '@guards/composite-route.guard';
 import { AuthGuard } from '../auth/auth.guard';
 import { RedRoleGuard } from '../auth/red-role.guard';
 import { AppStateGuard } from '@state/app-state.guard';
 import { SearchScreenComponent } from './screens/search-screen/search-screen.component';
 import { FilePreviewScreenComponent } from './screens/file-preview-screen/file-preview-screen.component';
-import { DossierOverviewScreenComponent } from './screens/dossier-overview-screen/dossier-overview-screen.component';
 
 const routes: Routes = [
     {
@@ -20,12 +18,12 @@ const routes: Routes = [
     },
     {
         path: ':dossierId',
-        component: DossierOverviewScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
             routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
             reuse: true
-        }
+        },
+        loadChildren: () => import('./screens/dossier-overview/dossier-overview.module').then(m => m.DossierOverviewModule)
     },
     {
         path: ':dossierId/file/:fileId',
@@ -39,12 +37,12 @@ const routes: Routes = [
     {
         path: '',
         pathMatch: 'full',
-        component: DossierListingScreenComponent,
         canActivate: [CompositeRouteGuard],
         data: {
             routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard],
             reuse: true
-        }
+        },
+        loadChildren: () => import('./screens/dossiers-listing/dossiers-listing.module').then(m => m.DossiersListingModule)
     }
 ];
 
diff --git a/apps/red-ui/src/app/modules/dossier/dossiers.module.ts b/apps/red-ui/src/app/modules/dossier/dossiers.module.ts
index 4daae1ee8..c4b617945 100644
--- a/apps/red-ui/src/app/modules/dossier/dossiers.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/dossiers.module.ts
@@ -1,7 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { DossierListingScreenComponent } from './screens/dossier-listing-screen/dossier-listing-screen.component';
-import { DossierOverviewScreenComponent } from './screens/dossier-overview-screen/dossier-overview-screen.component';
 import { FilePreviewScreenComponent } from './screens/file-preview-screen/file-preview-screen.component';
 import { AddDossierDialogComponent } from './dialogs/add-dossier-dialog/add-dossier-dialog.component';
 import { AssignReviewerApproverDialogComponent } from './dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component';
@@ -11,17 +9,9 @@ import { RemoveAnnotationsDialogComponent } from './dialogs/remove-annotations-d
 import { DocumentInfoDialogComponent } from './dialogs/document-info-dialog/document-info-dialog.component';
 import { PdfViewerComponent } from './components/pdf-viewer/pdf-viewer.component';
 import { CommentsComponent } from './components/comments/comments.component';
-import { DossierDetailsComponent } from './components/dossier-details/dossier-details.component';
 import { PageIndicatorComponent } from './components/page-indicator/page-indicator.component';
-import { NeedsWorkBadgeComponent } from './components/needs-work-badge/needs-work-badge.component';
 import { AnnotationActionsComponent } from './components/annotation-actions/annotation-actions.component';
-import { DossierListingDetailsComponent } from './components/dossier-listing-details/dossier-listing-details.component';
-import { FileActionsComponent } from './components/file-actions/file-actions.component';
 import { TypeAnnotationIconComponent } from './components/type-annotation-icon/type-annotation-icon.component';
-import { TypeFilterComponent } from './components/type-filter/type-filter.component';
-import { DossierOverviewBulkActionsComponent } from './components/bulk-actions/dossier-overview-bulk-actions.component';
-import { TeamMembersComponent } from './components/team-members/team-members.component';
-import { DossierListingActionsComponent } from './components/dossier-listing-actions/dossier-listing-actions.component';
 import { DocumentInfoComponent } from './components/document-info/document-info.component';
 import { FileWorkloadComponent } from './components/file-workload/file-workload.component';
 import { SharedModule } from '@shared/shared.module';
@@ -29,7 +19,6 @@ import { DossiersRoutingModule } from './dossiers-routing.module';
 import { FileUploadDownloadModule } from '@upload-download/file-upload-download.module';
 import { DossiersDialogService } from './services/dossiers-dialog.service';
 import { AnnotationActionsService } from './services/annotation-actions.service';
-import { FileActionService } from './services/file-action.service';
 import { PdfViewerDataService } from './services/pdf-viewer-data.service';
 import { ManualAnnotationService } from './services/manual-annotation.service';
 import { AnnotationDrawService } from './services/annotation-draw.service';
@@ -46,14 +35,14 @@ import { PageExclusionComponent } from './components/page-exclusion/page-exclusi
 import { RecategorizeImageDialogComponent } from './dialogs/recategorize-image-dialog/recategorize-image-dialog.component';
 import { EditDossierAttributesComponent } from './dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component';
 import { DossiersService } from './services/dossiers.service';
-import { DossierDetailsStatsComponent } from './components/dossier-details-stats/dossier-details-stats.component';
 import { SearchScreenComponent } from './screens/search-screen/search-screen.component';
 import { EditDossierDeletedDocumentsComponent } from './dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component';
 import { AnnotationsListComponent } from './components/file-workload/components/annotations-list/annotations-list.component';
 import { AnnotationSourceComponent } from './components/file-workload/components/annotation-source/annotation-source.component';
 import { OverlayModule } from '@angular/cdk/overlay';
+import { SharedDossiersModule } from './shared/shared-dossiers.module';
 
-const screens = [DossierListingScreenComponent, DossierOverviewScreenComponent, FilePreviewScreenComponent, SearchScreenComponent];
+const screens = [FilePreviewScreenComponent, SearchScreenComponent];
 
 const dialogs = [
     AddDossierDialogComponent,
@@ -70,17 +59,9 @@ const dialogs = [
 const components = [
     PdfViewerComponent,
     CommentsComponent,
-    DossierDetailsComponent,
     PageIndicatorComponent,
-    NeedsWorkBadgeComponent,
     AnnotationActionsComponent,
-    DossierListingDetailsComponent,
     TypeAnnotationIconComponent,
-    TypeFilterComponent,
-    DossierOverviewBulkActionsComponent,
-    FileActionsComponent,
-    TeamMembersComponent,
-    DossierListingActionsComponent,
     DocumentInfoComponent,
     FileWorkloadComponent,
     EditDossierGeneralInfoComponent,
@@ -90,7 +71,6 @@ const components = [
     EditDossierAttributesComponent,
     TeamMembersManagerComponent,
     PageExclusionComponent,
-    DossierDetailsStatsComponent,
     EditDossierDeletedDocumentsComponent,
     AnnotationsListComponent,
     AnnotationSourceComponent,
@@ -102,7 +82,6 @@ const components = [
 const services = [
     DossiersService,
     DossiersDialogService,
-    FileActionService,
     AnnotationActionsService,
     ManualAnnotationService,
     PdfViewerDataService,
@@ -114,6 +93,6 @@ const services = [
 @NgModule({
     declarations: [...components],
     providers: [...services],
-    imports: [CommonModule, SharedModule, FileUploadDownloadModule, DossiersRoutingModule, OverlayModule]
+    imports: [CommonModule, SharedModule, SharedDossiersModule, FileUploadDownloadModule, DossiersRoutingModule, OverlayModule]
 })
 export class DossiersModule {}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
deleted file mode 100644
index a7d8f738f..000000000
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<section>
-    <redaction-page-header [buttonConfigs]="buttonConfigs"></redaction-page-header>
-
-    <div class="overlay-shadow"></div>
-
-    <div class="red-content-inner">
-        <div class="content-container">
-            <iqser-table
-                (noDataAction)="openAddDossierDialog()"
-                [hasScrollButton]="true"
-                [itemSize]="85"
-                [noDataButtonLabel]="'dossier-listing.no-data.action' | translate"
-                [noDataText]="'dossier-listing.no-data.title' | translate"
-                [noMatchText]="'dossier-listing.no-match.title' | translate"
-                [showNoDataButton]="currentUser.isManager"
-                noDataIcon="red:folder"
-            ></iqser-table>
-        </div>
-
-        <div class="right-container" iqserHasScrollbar>
-            <redaction-dossier-listing-details
-                *ngIf="(entitiesService.noData$ | async) === false"
-                [documentsChartData]="documentsChartData"
-                [dossiersChartData]="dossiersChartData"
-            ></redaction-dossier-listing-details>
-        </div>
-    </div>
-</section>
-
-<ng-template #needsWorkFilterTemplate let-filter="filter">
-    <redaction-type-filter [filter]="filter"></redaction-type-filter>
-</ng-template>
-
-<ng-template #nameTemplate let-dossier="entity">
-    <div class="cell">
-        <div [matTooltip]="dossier.dossierName" class="table-item-title heading mb-6" matTooltipPosition="above">
-            {{ dossier.dossierName }}
-        </div>
-        <div class="small-label stats-subtitle mb-6">
-            <div>
-                <mat-icon svgIcon="red:template"></mat-icon>
-                {{ getDossierTemplateNameFor(dossier.dossierTemplateId) }}
-            </div>
-        </div>
-        <div class="small-label stats-subtitle">
-            <div>
-                <mat-icon svgIcon="red:document"></mat-icon>
-                {{ dossier.filesLength }}
-            </div>
-            <div>
-                <mat-icon svgIcon="red:pages"></mat-icon>
-                {{ dossier.totalNumberOfPages }}
-            </div>
-            <div>
-                <mat-icon svgIcon="red:user"></mat-icon>
-                {{ dossier.memberIds.length }}
-            </div>
-            <div>
-                <mat-icon svgIcon="red:calendar"></mat-icon>
-                {{ dossier.date | date: 'mediumDate' }}
-            </div>
-            <div *ngIf="dossier.dueDate">
-                <mat-icon svgIcon="red:lightning"></mat-icon>
-                {{ dossier.dueDate | date: 'mediumDate' }}
-            </div>
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #needsWorkTemplate let-dossier="entity">
-    <div class="cell">
-        <redaction-needs-work-badge [needsWorkInput]="dossier"></redaction-needs-work-badge>
-    </div>
-</ng-template>
-
-<ng-template #ownerTemplate let-dossier="entity">
-    <div class="cell user-column">
-        <redaction-initials-avatar [userId]="dossier.ownerId" [withName]="true"></redaction-initials-avatar>
-    </div>
-</ng-template>
-
-<ng-template #statusTemplate let-dossier="entity">
-    <div class="cell status-container">
-        <redaction-dossier-listing-actions (actionPerformed)="calculateData()" [dossier]="dossier"></redaction-dossier-listing-actions>
-    </div>
-</ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss
deleted file mode 100644
index cb00faaf2..000000000
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-:host {
-    ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
-        &.status-container {
-            width: 160px;
-        }
-    }
-
-    .right-container {
-        display: flex;
-        width: 466px;
-        min-width: 466px;
-        padding-right: 11px;
-
-        &.has-scrollbar:hover {
-            padding-right: 0;
-        }
-
-        redaction-dossier-listing-details {
-            min-width: 466px;
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
deleted file mode 100644
index 8b4b7661f..000000000
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
+++ /dev/null
@@ -1,336 +0,0 @@
-import { AfterViewInit, Component, forwardRef, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { DossierStatuses } from '@redaction/red-ui-http';
-import { AppStateService } from '@state/app-state.service';
-import { UserService } from '@services/user.service';
-import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component';
-import { groupBy } from '@utils/functions';
-import { TranslateService } from '@ngx-translate/core';
-import { Dossier } from '@state/model/dossier';
-import { timer } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { TranslateChartService } from '@services/translate-chart.service';
-import { RedactionFilterSorter } from '@utils/sorters/redaction-filter-sorter';
-import { StatusSorter } from '@utils/sorters/status-sorter';
-import { Router } from '@angular/router';
-import { DossiersDialogService } from '../../services/dossiers-dialog.service';
-import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
-import { UserPreferenceService } from '@services/user-preference.service';
-import { ButtonConfig } from '@shared/components/page-header/models/button-config.model';
-import { DefaultListingServices, keyChecker, ListingComponent, NestedFilter, TableColumnConfig, TableComponent } from '@iqser/common-ui';
-import { workloadTranslations } from '../../translations/workload-translations';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { fileStatusTranslations } from '../../translations/file-status-translations';
-import { annotationFilterChecker, dossierMemberChecker, dossierStatusChecker, dossierTemplateChecker } from '@utils/filter-utils';
-import { PermissionsService } from '@services/permissions.service';
-
-@Component({
-    templateUrl: './dossier-listing-screen.component.html',
-    styleUrls: ['./dossier-listing-screen.component.scss'],
-    providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => DossierListingScreenComponent) }]
-})
-export class DossierListingScreenComponent
-    extends ListingComponent<Dossier>
-    implements OnInit, AfterViewInit, OnDestroy, OnAttach, OnDetach
-{
-    readonly currentUser = this._userService.currentUser;
-    readonly tableHeaderLabel = _('dossier-listing.table-header.title');
-    readonly buttonConfigs: readonly ButtonConfig[] = [
-        {
-            label: _('dossier-listing.add-new'),
-            action: (): void => this.openAddDossierDialog(),
-            hide: !this.currentUser.isManager,
-            icon: 'red:plus',
-            type: 'primary'
-        }
-    ];
-    tableColumnConfigs: TableColumnConfig<Dossier>[];
-    dossiersChartData: DoughnutChartConfig[] = [];
-    documentsChartData: DoughnutChartConfig[] = [];
-    @ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<unknown>;
-    @ViewChild('needsWorkTemplate', { static: true }) needsWorkTemplate: TemplateRef<unknown>;
-    @ViewChild('ownerTemplate', { static: true }) ownerTemplate: TemplateRef<unknown>;
-    @ViewChild('statusTemplate', { static: true }) statusTemplate: TemplateRef<unknown>;
-    private _lastScrolledIndex: number;
-    @ViewChild('needsWorkFilterTemplate', {
-        read: TemplateRef,
-        static: true
-    })
-    private readonly _needsWorkFilterTemplate: TemplateRef<unknown>;
-    @ViewChild(TableComponent) private readonly _tableComponent: TableComponent<Dossier>;
-
-    constructor(
-        private readonly _router: Router,
-        protected readonly _injector: Injector,
-        private readonly _userService: UserService,
-        readonly permissionsService: PermissionsService,
-        private readonly _appStateService: AppStateService,
-        private readonly _translateService: TranslateService,
-        private readonly _dialogService: DossiersDialogService,
-        private readonly _translateChartService: TranslateChartService,
-        private readonly _userPreferenceService: UserPreferenceService
-    ) {
-        super(_injector);
-        this._appStateService.reset();
-        this._loadEntitiesFromState();
-    }
-
-    private get _activeDossiersCount(): number {
-        return this.entitiesService.all.filter(p => p.status === DossierStatuses.ACTIVE).length;
-    }
-
-    private get _inactiveDossiersCount(): number {
-        return this.entitiesService.all.length - this._activeDossiersCount;
-    }
-
-    getDossierTemplateNameFor(dossierTemplateId: string): string {
-        return this._appStateService.getDossierTemplateById(dossierTemplateId).name;
-    }
-
-    ngOnInit(): void {
-        this._configureTableColumns();
-        this.calculateData();
-
-        this.addSubscription = timer(0, 10000).subscribe(async () => {
-            await this._appStateService.loadAllDossiers();
-            this._loadEntitiesFromState();
-            this.calculateData();
-        });
-
-        this.addSubscription = this._appStateService.fileChanged$.subscribe(() => {
-            this.calculateData();
-        });
-    }
-
-    ngAfterViewInit(): void {
-        this.addSubscription = this._tableComponent.scrollViewport.scrolledIndexChange
-            .pipe(tap(index => (this._lastScrolledIndex = index)))
-            .subscribe();
-    }
-
-    ngOnAttach(): void {
-        this._appStateService.reset();
-        this._loadEntitiesFromState();
-        this.ngOnInit();
-        this.ngAfterViewInit();
-        this._tableComponent.scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
-    }
-
-    ngOnDetach(): void {
-        this.ngOnDestroy();
-    }
-
-    openAddDossierDialog(): void {
-        this._dialogService.openDialog('addDossier', null, null, async addResponse => {
-            await this._router.navigate([`/main/dossiers/${addResponse.dossier.id}`]);
-            if (addResponse.addMembers) {
-                this._dialogService.openDialog('editDossier', null, {
-                    dossier: addResponse.dossier,
-                    section: 'members'
-                });
-            }
-        });
-    }
-
-    calculateData(): void {
-        this._computeAllFilters();
-
-        this.dossiersChartData = [
-            { value: this._activeDossiersCount, color: 'ACTIVE', label: _('active') },
-            { value: this._inactiveDossiersCount, color: 'DELETED', label: _('archived') }
-        ];
-        const groups = groupBy(this._appStateService.aggregatedFiles, 'status');
-        this.documentsChartData = [];
-
-        for (const status of Object.keys(groups)) {
-            this.documentsChartData.push({
-                value: groups[status].length,
-                color: status,
-                label: fileStatusTranslations[status],
-                key: status
-            });
-        }
-        this.documentsChartData.sort(StatusSorter.byStatus);
-        this.documentsChartData = this._translateChartService.translateStatus(this.documentsChartData);
-    }
-
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('dossier-listing.table-col-names.name'),
-                sortByKey: 'searchKey',
-                template: this.nameTemplate,
-                width: '2fr'
-            },
-            {
-                label: _('dossier-listing.table-col-names.needs-work'),
-                template: this.needsWorkTemplate
-            },
-            {
-                label: _('dossier-listing.table-col-names.owner'),
-                class: 'user-column',
-                template: this.ownerTemplate
-            },
-            {
-                label: _('dossier-listing.table-col-names.status'),
-                class: 'flex-end',
-                template: this.statusTemplate,
-                width: 'auto'
-            }
-        ];
-    }
-
-    private _loadEntitiesFromState() {
-        this.entitiesService.setEntities(this._appStateService.allDossiers);
-    }
-
-    private _computeAllFilters() {
-        const allDistinctFileStatus = new Set<string>();
-        const allDistinctPeople = new Set<string>();
-        const allDistinctNeedsWork = new Set<string>();
-        const allDistinctDossierTemplates = new Set<string>();
-
-        this.entitiesService.all?.forEach(entry => {
-            // all people
-            entry.memberIds.forEach(f => allDistinctPeople.add(f));
-            // Needs work
-            entry.files.forEach(file => {
-                allDistinctFileStatus.add(file.status);
-                if (file.analysisRequired) {
-                    allDistinctNeedsWork.add('analysis');
-                }
-                if (entry.hintsOnly) {
-                    allDistinctNeedsWork.add('hint');
-                }
-                if (entry.hasRedactions) {
-                    allDistinctNeedsWork.add('redaction');
-                }
-                if (entry.hasSuggestions) {
-                    allDistinctNeedsWork.add('suggestion');
-                }
-                if (entry.hasNone) {
-                    allDistinctNeedsWork.add('none');
-                }
-            });
-
-            allDistinctDossierTemplates.add(entry.dossierTemplateId);
-        });
-
-        const statusFilters = [...allDistinctFileStatus].map(
-            status =>
-                new NestedFilter({
-                    id: status,
-                    label: this._translateService.instant(fileStatusTranslations[status])
-                })
-        );
-
-        this.filterService.addFilterGroup({
-            slug: 'statusFilters',
-            label: this._translateService.instant('filters.status'),
-            icon: 'red:status',
-            filters: statusFilters.sort((a, b) => StatusSorter[a.id] - StatusSorter[b.id]),
-            checker: dossierStatusChecker
-        });
-
-        const peopleFilters = [...allDistinctPeople].map(
-            userId =>
-                new NestedFilter({
-                    id: userId,
-                    label: this._userService.getNameForId(userId)
-                })
-        );
-
-        this.filterService.addFilterGroup({
-            slug: 'peopleFilters',
-            label: this._translateService.instant('filters.people'),
-            icon: 'red:user',
-            filters: peopleFilters,
-            checker: dossierMemberChecker
-        });
-
-        const needsWorkFilters = [...allDistinctNeedsWork].map(
-            type =>
-                new NestedFilter({
-                    id: type,
-                    label: workloadTranslations[type]
-                })
-        );
-
-        this.filterService.addFilterGroup({
-            slug: 'needsWorkFilters',
-            label: this._translateService.instant('filters.needs-work'),
-            icon: 'red:needs-work',
-            filterTemplate: this._needsWorkFilterTemplate,
-            filters: needsWorkFilters.sort((a, b) => RedactionFilterSorter[a.id] - RedactionFilterSorter[b.id]),
-            checker: annotationFilterChecker,
-            matchAll: true
-        });
-
-        const dossierTemplateFilters = [...allDistinctDossierTemplates].map(
-            id =>
-                new NestedFilter({
-                    id: id,
-                    label: this._appStateService.getDossierTemplateById(id).name
-                })
-        );
-
-        this.filterService.addFilterGroup({
-            slug: 'dossierTemplateFilters',
-            label: this._translateService.instant('filters.dossier-templates'),
-            icon: 'red:template',
-            hide: dossierTemplateFilters.length <= 1,
-            filters: dossierTemplateFilters,
-            checker: dossierTemplateChecker
-        });
-
-        const quickFilters = this._createQuickFilters();
-        this.filterService.addFilterGroup({
-            slug: 'quickFilters',
-            filters: quickFilters,
-            checker: (dw: Dossier) => quickFilters.reduce((acc, f) => acc || (f.checked && f.checker(dw)), false)
-        });
-
-        const dossierFilters = this.entitiesService.all.map(
-            dossier =>
-                new NestedFilter({
-                    id: dossier.dossierName,
-                    label: dossier.dossierName
-                })
-        );
-        this.filterService.addFilterGroup({
-            slug: 'dossierNameFilter',
-            label: this._translateService.instant('dossier-listing.filters.label'),
-            icon: 'red:folder',
-            filters: dossierFilters,
-            filterceptionPlaceholder: this._translateService.instant('dossier-listing.filters.search'),
-            checker: keyChecker('dossierName')
-        });
-    }
-
-    private _createQuickFilters(): NestedFilter[] {
-        const myDossiersLabel = this._translateService.instant('dossier-listing.quick-filters.my-dossiers');
-        const filters: NestedFilter[] = [
-            {
-                id: 'my-dossiers',
-                label: myDossiersLabel,
-                checker: (dw: Dossier) => dw.ownerId === this.currentUser.id
-            },
-            {
-                id: 'to-approve',
-                label: this._translateService.instant('dossier-listing.quick-filters.to-approve'),
-                checker: (dw: Dossier) => dw.approverIds.includes(this.currentUser.id)
-            },
-            {
-                id: 'to-review',
-                label: this._translateService.instant('dossier-listing.quick-filters.to-review'),
-                checker: (dw: Dossier) => dw.memberIds.includes(this.currentUser.id)
-            },
-            {
-                id: 'other',
-                label: this._translateService.instant('dossier-listing.quick-filters.other'),
-                checker: (dw: Dossier) => !dw.memberIds.includes(this.currentUser.id)
-            }
-        ].map(filter => new NestedFilter(filter));
-
-        return filters.filter(f => f.label === myDossiersLabel || this._userPreferenceService.areDevFeaturesEnabled);
-    }
-}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
deleted file mode 100644
index a75cf483d..000000000
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
+++ /dev/null
@@ -1,601 +0,0 @@
-import {
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    forwardRef,
-    HostListener,
-    Injector,
-    OnDestroy,
-    OnInit,
-    TemplateRef,
-    ViewChild
-} from '@angular/core';
-import { FileStatus, FileStatuses, IFileAttributeConfig } from '@redaction/red-ui-http';
-import { AppStateService } from '@state/app-state.service';
-import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
-import { FileUploadModel } from '@upload-download/model/file-upload.model';
-import { FileUploadService } from '@upload-download/services/file-upload.service';
-import { StatusOverlayService } from '@upload-download/services/status-overlay.service';
-import { TranslateService } from '@ngx-translate/core';
-import * as moment from 'moment';
-import { DossierDetailsComponent } from '../../components/dossier-details/dossier-details.component';
-import { File } from '@models/file/file';
-import { UserService } from '@services/user.service';
-import { timer } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { RedactionFilterSorter } from '@utils/sorters/redaction-filter-sorter';
-import { StatusSorter } from '@utils/sorters/status-sorter';
-import { convertFiles, Files, handleFileDrop } from '@utils/file-drop-utils';
-import { DossiersDialogService } from '../../services/dossiers-dialog.service';
-import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
-import { ConfigService } from '@services/config.service';
-import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
-import {
-    CircleButtonTypes,
-    DefaultListingServices,
-    INestedFilter,
-    keyChecker,
-    ListingComponent,
-    ListingModes,
-    LoadingService,
-    NestedFilter,
-    TableColumnConfig,
-    TableComponent,
-    Toaster,
-    WorkflowConfig
-} from '@iqser/common-ui';
-import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
-import { DossierAttributeWithValue } from '@models/dossier-attributes.model';
-import { workloadTranslations } from '../../translations/workload-translations';
-import { fileStatusTranslations } from '../../translations/file-status-translations';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { annotationFilterChecker } from '@utils/filter-utils';
-import { PermissionsService } from '@services/permissions.service';
-import { RouterHistoryService } from '@services/router-history.service';
-import { Dossier } from '@state/model/dossier';
-import { Router } from '@angular/router';
-import { FileActionService } from '../../services/file-action.service';
-import { FileAttributesService } from '../../services/file-attributes.service';
-
-@Component({
-    templateUrl: './dossier-overview-screen.component.html',
-    styleUrls: ['./dossier-overview-screen.component.scss'],
-    providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => DossierOverviewScreenComponent) }]
-})
-export class DossierOverviewScreenComponent extends ListingComponent<File> implements OnInit, OnDestroy, OnDetach, OnAttach {
-    readonly listingModes = ListingModes;
-    readonly circleButtonTypes = CircleButtonTypes;
-    readonly currentUser = this._userService.currentUser;
-    currentDossier = this._appStateService.activeDossier;
-    readonly tableHeaderLabel = _('dossier-overview.table-header.title');
-    readonly actionConfigs: readonly ActionConfig[] = [
-        {
-            label: this._translateService.instant('dossier-overview.header-actions.edit'),
-            action: ($event): void => this.openEditDossierDialog($event),
-            icon: 'iqser:edit',
-            hide: !this.currentUser.isManager
-        }
-    ];
-    tableColumnConfigs: readonly TableColumnConfig<File>[] = [];
-    collapsedDetails = false;
-    dossierAttributes: DossierAttributeWithValue[] = [];
-    fileAttributeConfigs: IFileAttributeConfig[];
-    @ViewChild('filenameTemplate', { static: true }) filenameTemplate: TemplateRef<unknown>;
-    @ViewChild('addedOnTemplate', { static: true }) addedOnTemplate: TemplateRef<unknown>;
-    @ViewChild('attributeTemplate', { static: true }) attributeTemplate: TemplateRef<unknown>;
-    @ViewChild('needsWorkTemplate', { static: true }) needsWorkTemplate: TemplateRef<unknown>;
-    @ViewChild('reviewerTemplate', { static: true }) reviewerTemplate: TemplateRef<unknown>;
-    @ViewChild('pagesTemplate', { static: true }) pagesTemplate: TemplateRef<unknown>;
-    @ViewChild('statusTemplate', { static: true }) statusTemplate: TemplateRef<unknown>;
-    readonly workflowConfig: WorkflowConfig<File, FileStatus>;
-    @ViewChild(DossierDetailsComponent, { static: false })
-    private readonly _dossierDetailsComponent: DossierDetailsComponent;
-    private _lastScrolledIndex: number;
-    @ViewChild('needsWorkFilterTemplate', { read: TemplateRef, static: true })
-    private readonly _needsWorkFilterTemplate: TemplateRef<unknown>;
-    @ViewChild('fileInput') private readonly _fileInput: ElementRef;
-    @ViewChild(TableComponent) private readonly _tableComponent: TableComponent<Dossier>;
-
-    constructor(
-        private readonly _toaster: Toaster,
-        protected readonly _injector: Injector,
-        private readonly _router: Router,
-        private readonly _userService: UserService,
-        readonly permissionsService: PermissionsService,
-        private readonly _loadingService: LoadingService,
-        private readonly _appStateService: AppStateService,
-        readonly routerHistoryService: RouterHistoryService,
-        private readonly _configService: ConfigService,
-        private readonly _translateService: TranslateService,
-        private readonly _dialogService: DossiersDialogService,
-        private readonly _changeDetectorRef: ChangeDetectorRef,
-        private readonly _fileUploadService: FileUploadService,
-        private readonly _statusOverlayService: StatusOverlayService,
-        private readonly _fileDropOverlayService: FileDropOverlayService,
-        private readonly _dossierAttributesService: DossierAttributesService,
-        private readonly _fileActionService: FileActionService,
-        private readonly _fileAttributesService: FileAttributesService
-    ) {
-        super(_injector);
-        this._loadEntitiesFromState();
-        this.fileAttributeConfigs = this._fileAttributesService.getFileAttributeConfig(
-            this.currentDossier.dossierTemplateId
-        )?.fileAttributeConfigs;
-        this.workflowConfig = {
-            columnIdentifierFn: entity => entity.status,
-            itemVersionFn: (entity: File) => `${entity.lastUpdated}-${entity.numberOfAnalyses}`,
-            columns: [
-                {
-                    label: fileStatusTranslations[FileStatuses.UNASSIGNED],
-                    key: FileStatuses.UNASSIGNED,
-                    enterFn: this.unassignFn,
-                    enterPredicate: () => false,
-                    color: '#D3D5DA'
-                },
-                {
-                    label: fileStatusTranslations[FileStatuses.UNDER_REVIEW],
-                    enterFn: this.underReviewFn,
-                    enterPredicate: (file: File) =>
-                        this.permissionsService.canSetUnderReview(file) ||
-                        this.permissionsService.canAssignToSelf(file) ||
-                        this.permissionsService.canAssignUser(file),
-                    key: FileStatuses.UNDER_REVIEW,
-                    color: '#FDBD00'
-                },
-                {
-                    label: fileStatusTranslations[FileStatuses.UNDER_APPROVAL],
-                    enterFn: this.underApprovalFn,
-                    enterPredicate: (file: File) =>
-                        this.permissionsService.canSetUnderApproval(file) || this.permissionsService.canUndoApproval(file),
-                    key: FileStatuses.UNDER_APPROVAL,
-                    color: '#374C81'
-                },
-                {
-                    label: fileStatusTranslations[FileStatuses.APPROVED],
-                    enterFn: this.approveFn,
-                    enterPredicate: (file: File) => this.permissionsService.isReadyForApproval(file),
-                    key: FileStatuses.APPROVED,
-                    color: '#48C9F7'
-                }
-            ]
-        };
-    }
-
-    get checkedRequiredFilters() {
-        return this.filterService.getGroup('quickFilters')?.filters.filter(f => f.required && f.checked);
-    }
-
-    get checkedNotRequiredFilters() {
-        return this.filterService.getGroup('quickFilters')?.filters.filter(f => !f.required && f.checked);
-    }
-
-    get displayedInFileListAttributes() {
-        return this.fileAttributeConfigs?.filter(config => config.displayedInFileList) || [];
-    }
-
-    unassignFn = async (file: File) => {
-        // TODO
-        console.log('unassign', file);
-    };
-
-    underReviewFn = (file: File) => {
-        this._fileActionService.assignFile('reviewer', null, file, () => this._loadingService.loadWhile(this.reloadDossiers()), true);
-    };
-
-    underApprovalFn = async (file: File) => {
-        if (this._appStateService.activeDossier.approverIds.length > 1) {
-            this._fileActionService.assignFile('approver', null, file, () => this._loadingService.loadWhile(this.reloadDossiers()), true);
-        } else {
-            this._loadingService.start();
-            await this._fileActionService.setFilesUnderApproval([file]).toPromise();
-            await this.reloadDossiers();
-            this._loadingService.stop();
-        }
-    };
-
-    approveFn = async (file: File) => {
-        this._loadingService.start();
-        await this._fileActionService.setFilesApproved([file]).toPromise();
-        await this.reloadDossiers();
-        this._loadingService.stop();
-    };
-
-    actionPerformed(action?: string, file?: File) {
-        this.calculateData();
-
-        if (action === 'navigate') {
-            this._router.navigate([file.routerLink]);
-        }
-    }
-
-    disabledFn = (fileStatus: File) => fileStatus.excluded;
-
-    lastOpenedFn = (fileStatus: File) => fileStatus.lastOpened;
-
-    async ngOnInit(): Promise<void> {
-        this._configureTableColumns();
-        this._loadingService.start();
-        try {
-            this._fileDropOverlayService.initFileDropHandling();
-
-            this.calculateData();
-
-            this.addSubscription = timer(0, 7500).subscribe(async () => {
-                await this._appStateService.reloadActiveDossierFilesIfNecessary();
-                this._loadEntitiesFromState();
-            });
-
-            this.addSubscription = this._appStateService.fileChanged$.subscribe(() => {
-                this.calculateData();
-            });
-
-            this.addSubscription = this._appStateService.dossierTemplateChanged$.subscribe(() => {
-                this.fileAttributeConfigs = this._fileAttributesService.getFileAttributeConfig(
-                    this.currentDossier.dossierTemplateId
-                )?.fileAttributeConfigs;
-            });
-
-            this.addSubscription = this._tableComponent.scrollViewport.scrolledIndexChange
-                .pipe(tap(index => (this._lastScrolledIndex = index)))
-                .subscribe();
-
-            this.dossierAttributes = await this._dossierAttributesService.getValues(this.currentDossier);
-        } catch (e) {
-            console.log('Error from dossier overview screen: ', e);
-        } finally {
-            this._loadingService.stop();
-        }
-    }
-
-    ngOnDestroy(): void {
-        this._fileDropOverlayService.cleanupFileDropHandling();
-        super.ngOnDestroy();
-    }
-
-    async ngOnAttach() {
-        await this._appStateService.reloadActiveDossierFiles();
-        this._loadEntitiesFromState();
-        await this.ngOnInit();
-        this._tableComponent.scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
-    }
-
-    ngOnDetach() {
-        this.ngOnDestroy();
-    }
-
-    async reanalyseDossier() {
-        try {
-            await this._appStateService.reanalyzeDossier();
-            await this.reloadDossiers();
-            this._toaster.success(_('dossier-overview.reanalyse-dossier.success'));
-        } catch (e) {
-            this._toaster.error(_('dossier-overview.reanalyse-dossier.error'));
-        }
-    }
-
-    async reloadDossiers() {
-        await this._appStateService.getFiles(this.currentDossier, false);
-        this.calculateData();
-    }
-
-    calculateData(): void {
-        if (!this._appStateService.activeDossierId) {
-            return;
-        }
-
-        this._loadEntitiesFromState();
-        this._computeAllFilters();
-
-        this._dossierDetailsComponent?.calculateChartConfig();
-        this._changeDetectorRef.detectChanges();
-    }
-
-    @HostListener('drop', ['$event'])
-    onDrop(event: DragEvent): void {
-        handleFileDrop(event, this.currentDossier, this._uploadFiles.bind(this));
-    }
-
-    @HostListener('dragover', ['$event'])
-    onDragOver(event): void {
-        event.stopPropagation();
-        event.preventDefault();
-    }
-
-    async uploadFiles(files: Files): Promise<void> {
-        await this._uploadFiles(convertFiles(files, this.currentDossier));
-        this._fileInput.nativeElement.value = null;
-    }
-
-    async bulkActionPerformed(): Promise<void> {
-        this.entitiesService.setSelected([]);
-        await this.reloadDossiers();
-    }
-
-    openEditDossierDialog($event: MouseEvent) {
-        this._dialogService.openDialog('editDossier', $event, {
-            dossier: this.currentDossier
-        });
-    }
-
-    openAssignDossierMembersDialog(): void {
-        const data = { dossier: this.currentDossier, section: 'members' };
-        this._dialogService.openDialog('editDossier', null, data, async () => await this.reloadDossiers());
-    }
-
-    openDossierDictionaryDialog() {
-        const data = { dossier: this.currentDossier, section: 'dossierDictionary' };
-        this._dialogService.openDialog('editDossier', null, data, async () => {
-            await this.reloadDossiers();
-        });
-    }
-
-    toggleCollapsedDetails() {
-        this.collapsedDetails = !this.collapsedDetails;
-    }
-
-    recentlyModifiedChecker = (file: File) =>
-        moment(file.lastUpdated).add(this._configService.values.RECENT_PERIOD_IN_HOURS, 'hours').isAfter(moment());
-
-    private _configureTableColumns() {
-        const dynamicColumns: TableColumnConfig<File>[] = [];
-        for (const config of this.displayedInFileListAttributes) {
-            if (config.displayedInFileList) {
-                dynamicColumns.push({ label: config.label, notTranslatable: true, template: this.attributeTemplate, extra: config });
-            }
-        }
-        this.tableColumnConfigs = [
-            {
-                label: _('dossier-overview.table-col-names.name'),
-                sortByKey: 'searchKey',
-                template: this.filenameTemplate,
-                width: '3fr'
-            },
-            {
-                label: _('dossier-overview.table-col-names.added-on'),
-                sortByKey: 'added',
-                template: this.addedOnTemplate,
-                width: '2fr'
-            },
-            ...dynamicColumns,
-            {
-                label: _('dossier-overview.table-col-names.needs-work'),
-                template: this.needsWorkTemplate
-            },
-            {
-                label: _('dossier-overview.table-col-names.assigned-to'),
-                class: 'user-column',
-                sortByKey: 'reviewerName',
-                template: this.reviewerTemplate,
-                width: '2fr'
-            },
-            {
-                label: _('dossier-overview.table-col-names.pages'),
-                sortByKey: 'numberOfPages',
-                template: this.pagesTemplate
-            },
-            {
-                label: _('dossier-overview.table-col-names.status'),
-                class: 'flex-end',
-                sortByKey: 'statusSort',
-                template: this.statusTemplate
-            }
-        ];
-    }
-
-    private _loadEntitiesFromState() {
-        this.currentDossier = this._appStateService.activeDossier;
-        if (this.currentDossier) {
-            this.entitiesService.setEntities(this.currentDossier.files);
-        }
-    }
-
-    private async _uploadFiles(files: FileUploadModel[]) {
-        const fileCount = await this._fileUploadService.uploadFiles(files);
-        if (fileCount) {
-            this._statusOverlayService.openUploadStatusOverlay();
-        }
-    }
-
-    private _computeAllFilters() {
-        if (!this.currentDossier) {
-            return;
-        }
-
-        const allDistinctFileStatuses = new Set<string>();
-        const allDistinctPeople = new Set<string>();
-        const allDistinctAddedDates = new Set<string>();
-        const allDistinctNeedsWork = new Set<string>();
-
-        const dynamicFilters = new Map<string, Set<string>>();
-
-        this.entitiesService.all.forEach(file => {
-            allDistinctPeople.add(file.currentReviewer);
-            allDistinctFileStatuses.add(file.status);
-            allDistinctAddedDates.add(moment(file.added).format('DD/MM/YYYY'));
-
-            if (file.analysisRequired) {
-                allDistinctNeedsWork.add('analysis');
-            }
-            if (file.hintsOnly) {
-                allDistinctNeedsWork.add('hint');
-            }
-            if (file.hasRedactions) {
-                allDistinctNeedsWork.add('redaction');
-            }
-            if (file.hasSuggestions) {
-                allDistinctNeedsWork.add('suggestion');
-            }
-            if (file.hasUpdates) {
-                allDistinctNeedsWork.add('updated');
-            }
-            if (file.hasImages) {
-                allDistinctNeedsWork.add('image');
-            }
-            if (file.hasNone) {
-                allDistinctNeedsWork.add('none');
-            }
-            if (file.hasAnnotationComments) {
-                allDistinctNeedsWork.add('comment');
-            }
-
-            // extract values for dynamic filters
-            this.fileAttributeConfigs.forEach(config => {
-                if (config.filterable) {
-                    const filterKey = `${config.id}:${config.label}`;
-                    let filters = dynamicFilters.get(filterKey);
-                    if (!filters) {
-                        dynamicFilters.set(filterKey, new Set<string>());
-                        filters = dynamicFilters.get(filterKey);
-                    }
-                    let filterValue = file.fileAttributes?.attributeIdToValue[config.id];
-                    if (!filterValue) {
-                        filterValue = '-';
-                        file.fileAttributes.attributeIdToValue[config.id] = '-';
-                    }
-                    filters.add(filterValue);
-                }
-            });
-        });
-
-        const statusFilters = [...allDistinctFileStatuses].map(
-            status =>
-                new NestedFilter({
-                    id: status,
-                    label: this._translateService.instant(fileStatusTranslations[status])
-                })
-        );
-
-        this.filterService.addFilterGroup({
-            slug: 'statusFilters',
-            label: this._translateService.instant('filters.status'),
-            icon: 'red:status',
-            filters: statusFilters.sort((a, b) => StatusSorter[a.id] - StatusSorter[b.id]),
-            checker: keyChecker('status')
-        });
-
-        const peopleFilters: NestedFilter[] = [];
-        if (allDistinctPeople.has(undefined) || allDistinctPeople.has(null)) {
-            allDistinctPeople.delete(undefined);
-            allDistinctPeople.delete(null);
-            peopleFilters.push(
-                new NestedFilter({
-                    id: null,
-                    label: this._translateService.instant('initials-avatar.unassigned')
-                })
-            );
-        }
-        allDistinctPeople.forEach(userId => {
-            peopleFilters.push(
-                new NestedFilter({
-                    id: userId,
-                    label: this._userService.getNameForId(userId)
-                })
-            );
-        });
-        this.filterService.addFilterGroup({
-            slug: 'peopleFilters',
-            label: this._translateService.instant('filters.assigned-people'),
-            icon: 'red:user',
-            filters: peopleFilters,
-            checker: keyChecker('currentReviewer')
-        });
-
-        const needsWorkFilters = [...allDistinctNeedsWork].map(
-            item =>
-                new NestedFilter({
-                    id: item,
-                    label: workloadTranslations[item]
-                })
-        );
-
-        this.filterService.addFilterGroup({
-            slug: 'needsWorkFilters',
-            label: this._translateService.instant('filters.needs-work'),
-            icon: 'red:needs-work',
-            filterTemplate: this._needsWorkFilterTemplate,
-            filters: needsWorkFilters.sort(RedactionFilterSorter.byKey),
-            checker: annotationFilterChecker,
-            matchAll: true
-        });
-
-        dynamicFilters.forEach((filterValue: Set<string>, filterKey: string) => {
-            const id = filterKey.split(':')[0];
-            const key = filterKey.split(':')[1];
-            this.filterService.addFilterGroup({
-                slug: key,
-                label: key,
-                icon: 'red:template',
-                filters: [...filterValue].map(
-                    (value: string) =>
-                        new NestedFilter({
-                            id: value,
-                            label: value === '-' ? this._translateService.instant('filters.empty') : value
-                        })
-                ),
-                checker: (input: File, filter: INestedFilter) => filter.id === input.fileAttributes.attributeIdToValue[id]
-            });
-        });
-
-        this.filterService.addFilterGroup({
-            slug: 'quickFilters',
-            filters: this._createQuickFilters(),
-            checker: (file: File) =>
-                this.checkedRequiredFilters.reduce((acc, f) => acc && f.checker(file), true) &&
-                (this.checkedNotRequiredFilters.length === 0 ||
-                    this.checkedNotRequiredFilters.reduce((acc, f) => acc || f.checker(file), false))
-        });
-
-        const filesNamesFilters = this.entitiesService.all.map(
-            file =>
-                new NestedFilter({
-                    id: file.filename,
-                    label: file.filename
-                })
-        );
-
-        this.filterService.addFilterGroup({
-            slug: 'filesNamesFilter',
-            label: this._translateService.instant('dossier-overview.filters.label'),
-            icon: 'red:document',
-            filters: filesNamesFilters,
-            checker: keyChecker('filename'),
-            filterceptionPlaceholder: this._translateService.instant('dossier-overview.filters.search')
-        });
-    }
-
-    private _createQuickFilters(): NestedFilter[] {
-        let quickFilters: INestedFilter[] = [];
-        if (this.entitiesService.all.filter(this.recentlyModifiedChecker).length > 0) {
-            const recentPeriod = this._configService.values.RECENT_PERIOD_IN_HOURS;
-            quickFilters = [
-                {
-                    id: 'recent',
-                    label: this._translateService.instant('dossier-overview.quick-filters.recent', {
-                        hours: recentPeriod
-                    }),
-                    required: true,
-                    checker: this.recentlyModifiedChecker
-                }
-            ];
-        }
-
-        return [
-            ...quickFilters,
-            {
-                id: 'assigned-to-me',
-                label: this._translateService.instant('dossier-overview.quick-filters.assigned-to-me'),
-                checker: (file: File) => file.currentReviewer === this.currentUser.id
-            },
-            {
-                id: 'unassigned',
-                label: this._translateService.instant('dossier-overview.quick-filters.unassigned'),
-                checker: (file: File) => !file.currentReviewer
-            },
-            {
-                id: 'assigned-to-others',
-                label: this._translateService.instant('dossier-overview.quick-filters.assigned-to-others'),
-                checker: (file: File) => !!file.currentReviewer && file.currentReviewer !== this.currentUser.id
-            }
-        ].map(filter => new NestedFilter(filter));
-    }
-}
diff --git a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.html
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html
diff --git a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.scss
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.ts
similarity index 94%
rename from apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.ts
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.ts
index f98e39318..8f2b6f6eb 100644
--- a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.ts
@@ -1,13 +1,13 @@
 import { Component, EventEmitter, Output } from '@angular/core';
-import { AppStateService } from '@state/app-state.service';
+import { AppStateService } from '../../../../../../state/app-state.service';
 import { FileManagementControllerService, ReanalysisControllerService } from '@redaction/red-ui-http';
-import { PermissionsService } from '@services/permissions.service';
-import { File } from '@models/file/file';
-import { FileActionService } from '../../services/file-action.service';
+import { PermissionsService } from '../../../../../../services/permissions.service';
+import { File } from '../../../../../../models/file/file';
+import { FileActionService } from '../../../../shared/services/file-action.service';
 import { Observable } from 'rxjs';
-import { DossiersDialogService } from '../../services/dossiers-dialog.service';
+import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
 import { CircleButtonTypes, EntitiesService, LoadingService } from '@iqser/common-ui';
-import { ConfirmationDialogInput } from '@shared/dialogs/confirmation-dialog/confirmation-dialog.component';
+import { ConfirmationDialogInput } from '../../../../../shared/dialogs/confirmation-dialog/confirmation-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.html
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.html
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.scss
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
similarity index 93%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.ts
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
index 045dec7e8..dcfb93f0e 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-details-stats/dossier-details-stats.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
@@ -3,7 +3,7 @@ import { DossierAttributeWithValue } from '@models/dossier-attributes.model';
 import { AppStateService } from '@state/app-state.service';
 import { Dossier } from '@state/model/dossier';
 import { IDossierTemplate } from '@redaction/red-ui-http';
-import { DossiersDialogService } from '../../services/dossiers-dialog.service';
+import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
 
 @Component({
     selector: 'redaction-dossier-details-stats',
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.ts
similarity index 95%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.ts
index 6d1fa343f..c291dce12 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.ts
@@ -1,13 +1,12 @@
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AppStateService } from '@state/app-state.service';
-import { groupBy } from '@utils/functions';
+import { groupBy, StatusSorter } from '@utils/index';
 import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component';
 import { TranslateChartService } from '@services/translate-chart.service';
-import { StatusSorter } from '@utils/sorters/status-sorter';
 import { UserService } from '@services/user.service';
 import { FilterService, Toaster } from '@iqser/common-ui';
 import { DossierAttributeWithValue } from '@models/dossier-attributes.model';
-import { fileStatusTranslations } from '../../translations/file-status-translations';
+import { fileStatusTranslations } from '../../../../translations/file-status-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { List } from '@redaction/red-ui-http';
 import { User } from '@models/user';
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html
new file mode 100644
index 000000000..43de75f4a
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.html
@@ -0,0 +1,70 @@
+<div class="cell">
+    <div>
+        <div [class.error]="file.isError" [matTooltip]="file.filename" class="table-item-title" matTooltipPosition="above">
+            {{ file.filename }}
+        </div>
+    </div>
+    <div *ngIf="file.primaryAttribute" class="small-label">
+        <div class="primary-attribute">
+            <span [matTooltip]="file.primaryAttribute" matTooltipPosition="above">
+                {{ file.primaryAttribute }}
+            </span>
+        </div>
+    </div>
+    <ng-container *ngTemplateOutlet="statsTemplate; context: { entity: file }"></ng-container>
+</div>
+
+<div class="cell">
+    <div [class.error]="file.isError" class="small-label">
+        {{ file.added | date: 'd MMM. yyyy, hh:mm a' }}
+    </div>
+</div>
+
+<div *ngFor="let config of displayedAttributes" class="cell">
+    {{ file.fileAttributes.attributeIdToValue[config.id] }}
+</div>
+
+<!-- always show A for error-->
+<div *ngIf="file.isError" class="cell">
+    <redaction-annotation-icon color="#dd4d50" label="A" type="square"></redaction-annotation-icon>
+</div>
+
+<div *ngIf="!file.isError" class="cell">
+    <redaction-needs-work-badge [needsWorkInput]="file"></redaction-needs-work-badge>
+</div>
+
+<div *ngIf="!file.isError" class="user-column cell">
+    <redaction-initials-avatar [userId]="file.currentReviewer" [withName]="true"></redaction-initials-avatar>
+</div>
+
+<div *ngIf="!file.isError" class="cell">
+    <div class="small-label stats-subtitle">
+        <div>
+            <mat-icon svgIcon="red:pages"></mat-icon>
+            {{ file.numberOfPages }}
+        </div>
+    </div>
+</div>
+
+<div [class.extend-cols]="file.isError" class="status-container cell">
+    <div *ngIf="file.isError" class="small-label error" translate="dossier-overview.file-listing.file-entry.file-error"></div>
+    <div *ngIf="file.isPending" class="small-label" translate="dossier-overview.file-listing.file-entry.file-pending"></div>
+    <div *ngIf="file.isProcessing" class="small-label loading" translate="dossier-overview.file-listing.file-entry.file-processing"></div>
+    <iqser-status-bar
+        *ngIf="file.isWorkable"
+        [configs]="[
+            {
+                color: file.status,
+                length: 1
+            }
+        ]"
+    ></iqser-status-bar>
+
+    <redaction-file-actions
+        (actionPerformed)="calculateData.emit()"
+        *ngIf="!file.isProcessing"
+        [file]="file"
+        class="mr-4"
+        type="dossier-overview-list"
+    ></redaction-file-actions>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.scss
new file mode 100644
index 000000000..8450b2bf1
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.scss
@@ -0,0 +1,26 @@
+@use 'common-mixins';
+@use 'variables';
+
+.cell {
+    .error {
+        color: variables.$primary;
+    }
+
+    .table-item-title {
+        max-width: 25vw;
+    }
+
+    .primary-attribute {
+        padding-top: 6px;
+        @include common-mixins.line-clamp(1);
+    }
+
+    &.extend-cols {
+        grid-column-end: span 3;
+        align-items: flex-end;
+    }
+
+    &.status-container {
+        align-items: flex-end;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.ts
new file mode 100644
index 000000000..3507e73cb
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/table-item/table-item.component.ts
@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
+import { File } from '@models/file/file';
+import { Required } from '@iqser/common-ui';
+import { IFileAttributeConfig } from '@redaction/red-ui-http';
+
+@Component({
+    selector: 'redaction-table-item',
+    templateUrl: './table-item.component.html',
+    styleUrls: ['./table-item.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TableItemComponent {
+    @Input() @Required() file!: File;
+    @Input() @Required() statsTemplate!: TemplateRef<unknown>;
+    @Input() @Required() displayedAttributes!: IFileAttributeConfig[];
+    @Output() readonly calculateData = new EventEmitter<void>();
+
+    constructor() {}
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts
new file mode 100644
index 000000000..af6a37ec1
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts
@@ -0,0 +1,364 @@
+import { Injectable, TemplateRef } from '@angular/core';
+import { IFilterGroup, INestedFilter, keyChecker, LoadingService, NestedFilter, TableColumnConfig, WorkflowConfig } from '@iqser/common-ui';
+import { File } from '@models/file/file';
+import { fileStatusTranslations } from '../../translations/file-status-translations';
+import { FileStatus, FileStatuses, IFileAttributeConfig } from '@redaction/red-ui-http';
+import { FileActionService } from '../../shared/services/file-action.service';
+import { AppStateService } from '@state/app-state.service';
+import { PermissionsService } from '@services/permissions.service';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { TranslateService } from '@ngx-translate/core';
+import { UserService } from '@services/user.service';
+import { DossiersDialogService } from '../../services/dossiers-dialog.service';
+import { annotationFilterChecker, RedactionFilterSorter, StatusSorter } from '@utils/index';
+import { workloadTranslations } from '../../translations/workload-translations';
+import * as moment from 'moment';
+import { ConfigService as AppConfigService } from '@services/config.service';
+
+@Injectable()
+export class ConfigService {
+    constructor(
+        private readonly _fileActionService: FileActionService,
+        private readonly _loadingService: LoadingService,
+        private readonly _appStateService: AppStateService,
+        private readonly _permissionsService: PermissionsService,
+        private readonly _translateService: TranslateService,
+        private readonly _userService: UserService,
+        private readonly _dialogService: DossiersDialogService,
+        private readonly _appConfigService: AppConfigService
+    ) {}
+
+    get actionConfig() {
+        return [
+            {
+                label: this._translateService.instant('dossier-overview.header-actions.edit'),
+                action: $event => this._openEditDossierDialog($event),
+                icon: 'iqser:edit',
+                hide: !this._userService.currentUser.isManager
+            }
+        ];
+    }
+
+    tableConfig(displayedAttributes: IFileAttributeConfig[]): TableColumnConfig<File>[] {
+        const dynamicColumns: TableColumnConfig<File>[] = displayedAttributes.map(config => ({
+            label: config.label,
+            notTranslatable: true
+        }));
+        return [
+            {
+                label: _('dossier-overview.table-col-names.name'),
+                sortByKey: 'searchKey',
+                width: '3fr'
+            },
+            {
+                label: _('dossier-overview.table-col-names.added-on'),
+                sortByKey: 'added',
+                width: '2fr'
+            },
+            ...dynamicColumns,
+            {
+                label: _('dossier-overview.table-col-names.needs-work')
+            },
+            {
+                label: _('dossier-overview.table-col-names.assigned-to'),
+                class: 'user-column',
+                sortByKey: 'reviewerName',
+                width: '2fr'
+            },
+            {
+                label: _('dossier-overview.table-col-names.pages'),
+                sortByKey: 'numberOfPages'
+            },
+            {
+                label: _('dossier-overview.table-col-names.status'),
+                class: 'flex-end',
+                sortByKey: 'statusSort'
+            }
+        ];
+    }
+
+    workflowConfig(reloadDossiers: () => Promise<void>): WorkflowConfig<File, FileStatus> {
+        return {
+            columnIdentifierFn: entity => entity.status,
+            itemVersionFn: (entity: File) => `${entity.lastUpdated}-${entity.numberOfAnalyses}`,
+            columns: [
+                {
+                    label: fileStatusTranslations[FileStatuses.UNASSIGNED],
+                    key: FileStatuses.UNASSIGNED,
+                    enterFn: this._unassignFn(reloadDossiers),
+                    enterPredicate: () => false,
+                    color: '#D3D5DA'
+                },
+                {
+                    label: fileStatusTranslations[FileStatuses.UNDER_REVIEW],
+                    enterFn: this._underReviewFn(reloadDossiers),
+                    enterPredicate: (file: File) =>
+                        this._permissionsService.canSetUnderReview(file) ||
+                        this._permissionsService.canAssignToSelf(file) ||
+                        this._permissionsService.canAssignUser(file),
+                    key: FileStatuses.UNDER_REVIEW,
+                    color: '#FDBD00'
+                },
+                {
+                    label: fileStatusTranslations[FileStatuses.UNDER_APPROVAL],
+                    enterFn: this._underApprovalFn(reloadDossiers),
+                    enterPredicate: (file: File) =>
+                        this._permissionsService.canSetUnderApproval(file) || this._permissionsService.canUndoApproval(file),
+                    key: FileStatuses.UNDER_APPROVAL,
+                    color: '#374C81'
+                },
+                {
+                    label: fileStatusTranslations[FileStatuses.APPROVED],
+                    enterFn: this._approveFn(reloadDossiers),
+                    enterPredicate: (file: File) => this._permissionsService.isReadyForApproval(file),
+                    key: FileStatuses.APPROVED,
+                    color: '#48C9F7'
+                }
+            ]
+        };
+    }
+
+    filterGroups(
+        entities: File[],
+        fileAttributeConfigs: IFileAttributeConfig[],
+        needsWorkFilterTemplate: TemplateRef<unknown>,
+        checkedRequiredFilters: () => NestedFilter[],
+        checkedNotRequiredFilters: () => NestedFilter[]
+    ) {
+        const allDistinctFileStatuses = new Set<string>();
+        const allDistinctPeople = new Set<string>();
+        const allDistinctAddedDates = new Set<string>();
+        const allDistinctNeedsWork = new Set<string>();
+
+        const dynamicFilters = new Map<string, Set<string>>();
+
+        const filterGroups: IFilterGroup[] = [];
+
+        entities.forEach(file => {
+            allDistinctPeople.add(file.currentReviewer);
+            allDistinctFileStatuses.add(file.status);
+            allDistinctAddedDates.add(moment(file.added).format('DD/MM/YYYY'));
+
+            if (file.analysisRequired) {
+                allDistinctNeedsWork.add('analysis');
+            }
+            if (file.hintsOnly) {
+                allDistinctNeedsWork.add('hint');
+            }
+            if (file.hasRedactions) {
+                allDistinctNeedsWork.add('redaction');
+            }
+            if (file.hasSuggestions) {
+                allDistinctNeedsWork.add('suggestion');
+            }
+            if (file.hasUpdates) {
+                allDistinctNeedsWork.add('updated');
+            }
+            if (file.hasImages) {
+                allDistinctNeedsWork.add('image');
+            }
+            if (file.hasNone) {
+                allDistinctNeedsWork.add('none');
+            }
+            if (file.hasAnnotationComments) {
+                allDistinctNeedsWork.add('comment');
+            }
+
+            // extract values for dynamic filters
+            fileAttributeConfigs.forEach(config => {
+                if (config.filterable) {
+                    const filterKey = `${config.id}:${config.label}`;
+                    let filters = dynamicFilters.get(filterKey);
+                    if (!filters) {
+                        dynamicFilters.set(filterKey, new Set<string>());
+                        filters = dynamicFilters.get(filterKey);
+                    }
+                    let filterValue = file.fileAttributes?.attributeIdToValue[config.id];
+                    if (!filterValue) {
+                        filterValue = '-';
+                        file.fileAttributes.attributeIdToValue[config.id] = '-';
+                    }
+                    filters.add(filterValue);
+                }
+            });
+        });
+
+        const statusFilters = [...allDistinctFileStatuses].map(
+            status =>
+                new NestedFilter({
+                    id: status,
+                    label: this._translateService.instant(fileStatusTranslations[status])
+                })
+        );
+
+        filterGroups.push({
+            slug: 'statusFilters',
+            label: this._translateService.instant('filters.status'),
+            icon: 'red:status',
+            filters: statusFilters.sort((a, b) => StatusSorter[a.id] - StatusSorter[b.id]),
+            checker: keyChecker('status')
+        });
+
+        const peopleFilters: NestedFilter[] = [];
+        if (allDistinctPeople.has(undefined) || allDistinctPeople.has(null)) {
+            allDistinctPeople.delete(undefined);
+            allDistinctPeople.delete(null);
+            peopleFilters.push(
+                new NestedFilter({
+                    id: null,
+                    label: this._translateService.instant('initials-avatar.unassigned')
+                })
+            );
+        }
+        allDistinctPeople.forEach(userId => {
+            peopleFilters.push(
+                new NestedFilter({
+                    id: userId,
+                    label: this._userService.getNameForId(userId)
+                })
+            );
+        });
+        filterGroups.push({
+            slug: 'peopleFilters',
+            label: this._translateService.instant('filters.assigned-people'),
+            icon: 'red:user',
+            filters: peopleFilters,
+            checker: keyChecker('currentReviewer')
+        });
+
+        const needsWorkFilters = [...allDistinctNeedsWork].map(
+            item =>
+                new NestedFilter({
+                    id: item,
+                    label: workloadTranslations[item]
+                })
+        );
+
+        filterGroups.push({
+            slug: 'needsWorkFilters',
+            label: this._translateService.instant('filters.needs-work'),
+            icon: 'red:needs-work',
+            filterTemplate: needsWorkFilterTemplate,
+            filters: needsWorkFilters.sort(RedactionFilterSorter.byKey),
+            checker: annotationFilterChecker,
+            matchAll: true
+        });
+
+        dynamicFilters.forEach((filterValue: Set<string>, filterKey: string) => {
+            const id = filterKey.split(':')[0];
+            const key = filterKey.split(':')[1];
+            filterGroups.push({
+                slug: key,
+                label: key,
+                icon: 'red:template',
+                filters: [...filterValue].map(
+                    (value: string) =>
+                        new NestedFilter({
+                            id: value,
+                            label: value === '-' ? this._translateService.instant('filters.empty') : value
+                        })
+                ),
+                checker: (input: File, filter: INestedFilter) => filter.id === input.fileAttributes.attributeIdToValue[id]
+            });
+        });
+
+        filterGroups.push({
+            slug: 'quickFilters',
+            filters: this._quickFilters(entities),
+            checker: (file: File) =>
+                checkedRequiredFilters().reduce((acc, f) => acc && f.checker(file), true) &&
+                (checkedNotRequiredFilters().length === 0 || checkedNotRequiredFilters().reduce((acc, f) => acc || f.checker(file), false))
+        });
+
+        const filesNamesFilters = entities.map(
+            file =>
+                new NestedFilter({
+                    id: file.filename,
+                    label: file.filename
+                })
+        );
+
+        filterGroups.push({
+            slug: 'filesNamesFilter',
+            label: this._translateService.instant('dossier-overview.filters.label'),
+            icon: 'red:document',
+            filters: filesNamesFilters,
+            checker: keyChecker('filename'),
+            filterceptionPlaceholder: this._translateService.instant('dossier-overview.filters.search')
+        });
+
+        return filterGroups;
+    }
+
+    _recentlyModifiedChecker = (file: File) =>
+        moment(file.lastUpdated).add(this._appConfigService.values.RECENT_PERIOD_IN_HOURS, 'hours').isAfter(moment());
+
+    private _quickFilters(entities: File[]): NestedFilter[] {
+        let quickFilters: INestedFilter[] = [];
+        if (entities.filter(this._recentlyModifiedChecker).length > 0) {
+            const recentPeriod = this._appConfigService.values.RECENT_PERIOD_IN_HOURS;
+            quickFilters = [
+                {
+                    id: 'recent',
+                    label: this._translateService.instant('dossier-overview.quick-filters.recent', {
+                        hours: recentPeriod
+                    }),
+                    required: true,
+                    checker: this._recentlyModifiedChecker
+                }
+            ];
+        }
+
+        return [
+            ...quickFilters,
+            {
+                id: 'assigned-to-me',
+                label: this._translateService.instant('dossier-overview.quick-filters.assigned-to-me'),
+                checker: (file: File) => file.currentReviewer === this._userService.currentUser.id
+            },
+            {
+                id: 'unassigned',
+                label: this._translateService.instant('dossier-overview.quick-filters.unassigned'),
+                checker: (file: File) => !file.currentReviewer
+            },
+            {
+                id: 'assigned-to-others',
+                label: this._translateService.instant('dossier-overview.quick-filters.assigned-to-others'),
+                checker: (file: File) => !!file.currentReviewer && file.currentReviewer !== this._userService.currentUser.id
+            }
+        ].map(filter => new NestedFilter(filter));
+    }
+
+    private _openEditDossierDialog($event: MouseEvent) {
+        this._dialogService.openDialog('editDossier', $event, {
+            dossier: this._appStateService.activeDossier
+        });
+    }
+
+    private _unassignFn = (reloadDossiers: () => Promise<void>) => async (file: File) => {
+        // TODO
+        console.log('unassign', file);
+    };
+
+    private _underReviewFn = (reloadDossiers: () => Promise<void>) => (file: File) => {
+        this._fileActionService.assignFile('reviewer', null, file, () => this._loadingService.loadWhile(reloadDossiers()), true);
+    };
+
+    private _underApprovalFn = (reloadDossiers: () => Promise<void>) => async (file: File) => {
+        if (this._appStateService.activeDossier.approverIds.length > 1) {
+            this._fileActionService.assignFile('approver', null, file, () => this._loadingService.loadWhile(reloadDossiers()), true);
+        } else {
+            this._loadingService.start();
+            await this._fileActionService.setFilesUnderApproval([file]).toPromise();
+            await reloadDossiers();
+            this._loadingService.stop();
+        }
+    };
+
+    private _approveFn = (reloadDossiers: () => Promise<void>) => async (file: File) => {
+        this._loadingService.start();
+        await this._fileActionService.setFilesApproved([file]).toPromise();
+        await reloadDossiers();
+        this._loadingService.stop();
+    };
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts
new file mode 100644
index 000000000..76b7ee087
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/dossier-overview.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { SharedModule } from '@shared/shared.module';
+import { IqserIconsModule } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
+import { DossierOverviewScreenComponent } from './screen/dossier-overview-screen.component';
+import { DossierOverviewBulkActionsComponent } from './components/bulk-actions/dossier-overview-bulk-actions.component';
+import { DossierDetailsComponent } from './components/dossier-details/dossier-details.component';
+import { DossierDetailsStatsComponent } from './components/dossier-details-stats/dossier-details-stats.component';
+import { TableItemComponent } from './components/table-item/table-item.component';
+import { ConfigService } from './config.service';
+import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
+
+const routes = [
+    {
+        path: '',
+        component: DossierOverviewScreenComponent,
+        pathMatch: 'full'
+    }
+];
+
+@NgModule({
+    declarations: [
+        DossierOverviewScreenComponent,
+        DossierOverviewBulkActionsComponent,
+        DossierDetailsComponent,
+        DossierDetailsStatsComponent,
+        TableItemComponent
+    ],
+    providers: [ConfigService],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, IqserIconsModule, TranslateModule]
+})
+export class DossierOverviewModule {}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
similarity index 66%
rename from apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
index fb56c35c2..d85606bcb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html
@@ -91,95 +91,6 @@
     <redaction-dossier-overview-bulk-actions (reload)="bulkActionPerformed()"></redaction-dossier-overview-bulk-actions>
 </ng-template>
 
-<ng-template #filenameTemplate let-file="entity">
-    <div class="cell">
-        <div>
-            <div [class.error]="file.isError" [matTooltip]="file.filename" class="table-item-title" matTooltipPosition="above">
-                {{ file.filename }}
-            </div>
-        </div>
-        <div *ngIf="file.primaryAttribute" class="small-label">
-            <div class="primary-attribute">
-                <span [matTooltip]="file.primaryAttribute" matTooltipPosition="above">
-                    {{ file.primaryAttribute }}
-                </span>
-            </div>
-        </div>
-        <ng-container *ngTemplateOutlet="statsTemplate; context: { entity: file }"></ng-container>
-    </div>
-</ng-template>
-
-<ng-template #addedOnTemplate let-file="entity">
-    <div class="cell">
-        <div [class.error]="file.isError" class="small-label">
-            {{ file.added | date: 'd MMM. yyyy, hh:mm a' }}
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #attributeTemplate let-config="extra" let-file="entity">
-    <div class="cell">
-        {{ file.fileAttributes.attributeIdToValue[config.id] }}
-    </div>
-</ng-template>
-
-<ng-template #needsWorkTemplate let-file="entity">
-    <!-- always show A for error-->
-    <div *ngIf="file.isError" class="cell">
-        <redaction-annotation-icon color="#dd4d50" label="A" type="square"></redaction-annotation-icon>
-    </div>
-
-    <div *ngIf="!file.isError" class="cell">
-        <redaction-needs-work-badge [needsWorkInput]="file"></redaction-needs-work-badge>
-    </div>
-</ng-template>
-
-<ng-template #reviewerTemplate let-file="entity">
-    <div *ngIf="!file.isError" class="user-column cell">
-        <redaction-initials-avatar [userId]="file.currentReviewer" [withName]="true"></redaction-initials-avatar>
-    </div>
-</ng-template>
-
-<ng-template #pagesTemplate let-file="entity">
-    <div *ngIf="!file.isError" class="cell">
-        <div class="small-label stats-subtitle">
-            <div>
-                <mat-icon svgIcon="red:pages"></mat-icon>
-                {{ file.numberOfPages }}
-            </div>
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #statusTemplate let-file="entity">
-    <div [class.extend-cols]="file.isError" class="status-container cell">
-        <div *ngIf="file.isError" class="small-label error" translate="dossier-overview.file-listing.file-entry.file-error"></div>
-        <div *ngIf="file.isPending" class="small-label" translate="dossier-overview.file-listing.file-entry.file-pending"></div>
-        <div
-            *ngIf="file.isProcessing"
-            class="small-label loading"
-            translate="dossier-overview.file-listing.file-entry.file-processing"
-        ></div>
-        <iqser-status-bar
-            *ngIf="file.isWorkable"
-            [configs]="[
-                {
-                    color: file.status,
-                    length: 1
-                }
-            ]"
-        ></iqser-status-bar>
-
-        <redaction-file-actions
-            (actionPerformed)="calculateData()"
-            *ngIf="!file.isProcessing"
-            [file]="file"
-            class="mr-4"
-            type="dossier-overview-list"
-        ></redaction-file-actions>
-    </div>
-</ng-template>
-
 <ng-template #viewModeSelection>
     <div class="view-mode-selection">
         <div class="all-caps-label" translate="view-mode.view-as"></div>
@@ -199,6 +110,15 @@
     </div>
 </ng-template>
 
+<ng-template #tableItemTemplate let-file="entity">
+    <redaction-table-item
+        (calculateData)="calculateData()"
+        [displayedAttributes]="displayedAttributes"
+        [file]="file"
+        [statsTemplate]="statsTemplate"
+    ></redaction-table-item>
+</ng-template>
+
 <ng-template #workflowItemTemplate let-file="entity">
     <div class="workflow-item">
         <div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss
similarity index 77%
rename from apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
rename to apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss
index 5359d5727..501b10239 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.scss
@@ -7,39 +7,17 @@
 
 :host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item {
     &.last-opened {
-        > .selection-column {
+        .selection-column {
             padding-left: 6px !important;
             border-left: 4px solid variables.$primary;
         }
 
-        > div {
+        .selection-column,
+        .cell,
+        .scrollbar-placeholder {
             animation: red-fading-background 3s 1;
         }
     }
-
-    > div.cell {
-        .error {
-            color: variables.$primary;
-        }
-
-        .table-item-title {
-            max-width: 25vw;
-        }
-
-        .primary-attribute {
-            padding-top: 6px;
-            @include common-mixins.line-clamp(1);
-        }
-
-        &.extend-cols {
-            grid-column-end: span 3;
-            align-items: flex-end;
-        }
-
-        &.status-container {
-            align-items: flex-end;
-        }
-    }
 }
 
 .right-container {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts
new file mode 100644
index 000000000..87ffe450e
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts
@@ -0,0 +1,280 @@
+import {
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    forwardRef,
+    HostListener,
+    Injector,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    ViewChild
+} from '@angular/core';
+import { FileStatus, IFileAttributeConfig } from '@redaction/red-ui-http';
+import { AppStateService } from '@state/app-state.service';
+import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
+import { FileUploadModel } from '@upload-download/model/file-upload.model';
+import { FileUploadService } from '@upload-download/services/file-upload.service';
+import { StatusOverlayService } from '@upload-download/services/status-overlay.service';
+import { TranslateService } from '@ngx-translate/core';
+import * as moment from 'moment';
+import { DossierDetailsComponent } from '../components/dossier-details/dossier-details.component';
+import { File } from '@models/file/file';
+import { UserService } from '@services/user.service';
+import { timer } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { convertFiles, Files, handleFileDrop, OnAttach, OnDetach } from '@utils/index';
+import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
+import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
+import {
+    CircleButtonTypes,
+    DefaultListingServices,
+    ListingComponent,
+    ListingModes,
+    LoadingService,
+    NestedFilter,
+    TableColumnConfig,
+    TableComponent,
+    Toaster,
+    WorkflowConfig
+} from '@iqser/common-ui';
+import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
+import { DossierAttributeWithValue } from '@models/dossier-attributes.model';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { PermissionsService } from '@services/permissions.service';
+import { RouterHistoryService } from '@services/router-history.service';
+import { Dossier } from '@state/model/dossier';
+import { Router } from '@angular/router';
+import { FileAttributesService } from '../../../services/file-attributes.service';
+import { ConfigService as AppConfigService } from '@services/config.service';
+import { ConfigService } from '../config.service';
+
+@Component({
+    templateUrl: './dossier-overview-screen.component.html',
+    styleUrls: ['./dossier-overview-screen.component.scss'],
+    providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => DossierOverviewScreenComponent) }]
+})
+export class DossierOverviewScreenComponent extends ListingComponent<File> implements OnInit, OnDestroy, OnDetach, OnAttach {
+    readonly listingModes = ListingModes;
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly currentUser = this._userService.currentUser;
+    currentDossier = this._appStateService.activeDossier;
+    readonly tableHeaderLabel = _('dossier-overview.table-header.title');
+    collapsedDetails = false;
+    dossierAttributes: DossierAttributeWithValue[] = [];
+    fileAttributeConfigs: IFileAttributeConfig[];
+    tableColumnConfigs: readonly TableColumnConfig<File>[];
+    readonly workflowConfig: WorkflowConfig<File, FileStatus> = this._configService.workflowConfig(() => this.reloadDossiers());
+    readonly actionConfigs: readonly ActionConfig[] = this._configService.actionConfig;
+    @ViewChild(DossierDetailsComponent, { static: false }) private readonly _dossierDetailsComponent: DossierDetailsComponent;
+    private _lastScrolledIndex: number;
+    @ViewChild('needsWorkFilterTemplate', { read: TemplateRef, static: true })
+    private readonly _needsWorkFilterTemplate: TemplateRef<unknown>;
+    @ViewChild('fileInput') private readonly _fileInput: ElementRef;
+    @ViewChild(TableComponent) private readonly _tableComponent: TableComponent<Dossier>;
+
+    constructor(
+        private readonly _toaster: Toaster,
+        protected readonly _injector: Injector,
+        private readonly _router: Router,
+        private readonly _userService: UserService,
+        readonly permissionsService: PermissionsService,
+        private readonly _loadingService: LoadingService,
+        private readonly _appStateService: AppStateService,
+        readonly routerHistoryService: RouterHistoryService,
+        private readonly _appConfigService: AppConfigService,
+        private readonly _translateService: TranslateService,
+        private readonly _dialogService: DossiersDialogService,
+        private readonly _changeDetectorRef: ChangeDetectorRef,
+        private readonly _fileUploadService: FileUploadService,
+        private readonly _statusOverlayService: StatusOverlayService,
+        private readonly _fileDropOverlayService: FileDropOverlayService,
+        private readonly _dossierAttributesService: DossierAttributesService,
+        private readonly _fileAttributesService: FileAttributesService,
+        private readonly _configService: ConfigService
+    ) {
+        super(_injector);
+        this._loadEntitiesFromState();
+        this.fileAttributeConfigs = this._fileAttributesService.getFileAttributeConfig(
+            this.currentDossier.dossierTemplateId
+        )?.fileAttributeConfigs;
+        this.tableColumnConfigs = this._configService.tableConfig(this.displayedAttributes);
+    }
+
+    get checkedRequiredFilters(): NestedFilter[] {
+        return this.filterService.getGroup('quickFilters')?.filters.filter(f => f.required && f.checked);
+    }
+
+    get checkedNotRequiredFilters(): NestedFilter[] {
+        return this.filterService.getGroup('quickFilters')?.filters.filter(f => !f.required && f.checked);
+    }
+
+    get displayedInFileListAttributes() {
+        return this.fileAttributeConfigs?.filter(config => config.displayedInFileList) || [];
+    }
+
+    get displayedAttributes(): IFileAttributeConfig[] {
+        return this.displayedInFileListAttributes.filter(c => c.displayedInFileList);
+    }
+
+    actionPerformed(action?: string, file?: File) {
+        this.calculateData();
+
+        if (action === 'navigate') {
+            this._router.navigate([file.routerLink]);
+        }
+    }
+
+    disabledFn = (fileStatus: File) => fileStatus.excluded;
+
+    lastOpenedFn = (fileStatus: File) => fileStatus.lastOpened;
+
+    async ngOnInit(): Promise<void> {
+        this._loadingService.start();
+        try {
+            this._fileDropOverlayService.initFileDropHandling();
+
+            this.calculateData();
+
+            this.addSubscription = timer(0, 7500).subscribe(async () => {
+                await this._appStateService.reloadActiveDossierFilesIfNecessary();
+                this._loadEntitiesFromState();
+            });
+
+            this.addSubscription = this._appStateService.fileChanged$.subscribe(() => {
+                this.calculateData();
+            });
+
+            this.addSubscription = this._appStateService.dossierTemplateChanged$.subscribe(() => {
+                this.fileAttributeConfigs = this._fileAttributesService.getFileAttributeConfig(
+                    this.currentDossier.dossierTemplateId
+                )?.fileAttributeConfigs;
+            });
+
+            this.addSubscription = this._tableComponent.scrollViewport.scrolledIndexChange
+                .pipe(tap(index => (this._lastScrolledIndex = index)))
+                .subscribe();
+
+            this.dossierAttributes = await this._dossierAttributesService.getValues(this.currentDossier);
+        } catch (e) {
+            console.log('Error from dossier overview screen: ', e);
+        } finally {
+            this._loadingService.stop();
+        }
+    }
+
+    ngOnDestroy(): void {
+        this._fileDropOverlayService.cleanupFileDropHandling();
+        super.ngOnDestroy();
+    }
+
+    async ngOnAttach() {
+        await this._appStateService.reloadActiveDossierFiles();
+        this._loadEntitiesFromState();
+        await this.ngOnInit();
+        this._tableComponent.scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
+    }
+
+    ngOnDetach() {
+        this.ngOnDestroy();
+    }
+
+    async reanalyseDossier() {
+        try {
+            await this._appStateService.reanalyzeDossier();
+            await this.reloadDossiers();
+            this._toaster.success(_('dossier-overview.reanalyse-dossier.success'));
+        } catch (e) {
+            this._toaster.error(_('dossier-overview.reanalyse-dossier.error'));
+        }
+    }
+
+    async reloadDossiers() {
+        await this._appStateService.getFiles(this.currentDossier, false);
+        this.calculateData();
+    }
+
+    calculateData(): void {
+        if (!this._appStateService.activeDossierId) {
+            return;
+        }
+
+        this._loadEntitiesFromState();
+        this._computeAllFilters();
+
+        this._dossierDetailsComponent?.calculateChartConfig();
+        this._changeDetectorRef.detectChanges();
+    }
+
+    @HostListener('drop', ['$event'])
+    onDrop(event: DragEvent): void {
+        handleFileDrop(event, this.currentDossier, this._uploadFiles.bind(this));
+    }
+
+    @HostListener('dragover', ['$event'])
+    onDragOver(event): void {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    async uploadFiles(files: Files): Promise<void> {
+        await this._uploadFiles(convertFiles(files, this.currentDossier));
+        this._fileInput.nativeElement.value = null;
+    }
+
+    async bulkActionPerformed(): Promise<void> {
+        this.entitiesService.setSelected([]);
+        await this.reloadDossiers();
+    }
+
+    openAssignDossierMembersDialog(): void {
+        const data = { dossier: this.currentDossier, section: 'members' };
+        this._dialogService.openDialog('editDossier', null, data, async () => await this.reloadDossiers());
+    }
+
+    openDossierDictionaryDialog() {
+        const data = { dossier: this.currentDossier, section: 'dossierDictionary' };
+        this._dialogService.openDialog('editDossier', null, data, async () => {
+            await this.reloadDossiers();
+        });
+    }
+
+    toggleCollapsedDetails() {
+        this.collapsedDetails = !this.collapsedDetails;
+    }
+
+    recentlyModifiedChecker = (file: File) =>
+        moment(file.lastUpdated).add(this._appConfigService.values.RECENT_PERIOD_IN_HOURS, 'hours').isAfter(moment());
+
+    private _loadEntitiesFromState() {
+        this.currentDossier = this._appStateService.activeDossier;
+        if (this.currentDossier) {
+            this.entitiesService.setEntities(this.currentDossier.files);
+        }
+    }
+
+    private async _uploadFiles(files: FileUploadModel[]) {
+        const fileCount = await this._fileUploadService.uploadFiles(files);
+        if (fileCount) {
+            this._statusOverlayService.openUploadStatusOverlay();
+        }
+    }
+
+    private _computeAllFilters() {
+        if (!this.currentDossier) {
+            return;
+        }
+
+        const filterGroups = this._configService.filterGroups(
+            this.entitiesService.all,
+            this.fileAttributeConfigs,
+            this._needsWorkFilterTemplate,
+            () => this.checkedRequiredFilters,
+            () => this.checkedNotRequiredFilters
+        );
+
+        for (const filterGroup of filterGroups) {
+            this.filterService.addFilterGroup(filterGroup);
+        }
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html
rename to apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.scss
rename to apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
similarity index 84%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
rename to apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
index 9493e4fee..5b9c6c153 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
@@ -1,19 +1,19 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
-import { Dossier } from '../../../../state/model/dossier';
 import { StatusSorter } from '@utils/sorters/status-sorter';
-import { AppStateService } from '@state/app-state.service';
-import { DossiersDialogService } from '../../services/dossiers-dialog.service';
 import { CircleButtonTypes, StatusBarConfig } from '@iqser/common-ui';
 import { UserService } from '@services/user.service';
+import { AppStateService } from '@state/app-state.service';
+import { Dossier } from '@state/model/dossier';
+import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
 
 @Component({
-    selector: 'redaction-dossier-listing-actions',
-    templateUrl: './dossier-listing-actions.component.html',
-    styleUrls: ['./dossier-listing-actions.component.scss'],
+    selector: 'redaction-dossiers-listing-actions',
+    templateUrl: './dossiers-listing-actions.component.html',
+    styleUrls: ['./dossiers-listing-actions.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DossierListingActionsComponent {
+export class DossiersListingActionsComponent {
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
 
@@ -27,20 +27,6 @@ export class DossierListingActionsComponent {
         private readonly _userService: UserService
     ) {}
 
-    openEditDossierDialog($event: MouseEvent, dossier: Dossier): void {
-        this._dialogService.openDialog('editDossier', $event, {
-            dossier,
-            afterSave: () => this.actionPerformed.emit()
-        });
-    }
-
-    reanalyseDossier($event: MouseEvent, dossier: Dossier): void {
-        $event.stopPropagation();
-        this.appStateService.reanalyzeDossier(dossier).then(() => {
-            this.appStateService.loadAllDossiers().then(() => this.actionPerformed.emit());
-        });
-    }
-
     get statusConfig(): readonly StatusBarConfig<string>[] {
         if (!this.dossier) {
             return [];
@@ -60,4 +46,18 @@ export class DossierListingActionsComponent {
             .sort(StatusSorter.byStatus)
             .map(status => ({ length: obj[status], color: status }));
     }
+
+    openEditDossierDialog($event: MouseEvent, dossier: Dossier): void {
+        this._dialogService.openDialog('editDossier', $event, {
+            dossier,
+            afterSave: () => this.actionPerformed.emit()
+        });
+    }
+
+    reanalyseDossier($event: MouseEvent, dossier: Dossier): void {
+        $event.stopPropagation();
+        this.appStateService.reanalyzeDossier(dossier).then(() => {
+            this.appStateService.loadAllDossiers().then(() => this.actionPerformed.emit());
+        });
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.html
rename to apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.html
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.scss
rename to apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
similarity index 72%
rename from apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.ts
rename to apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
index 3c94dc235..dfaf1c60a 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-details/dossier-listing-details.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
@@ -4,12 +4,12 @@ import { AppStateService } from '@state/app-state.service';
 import { FilterService } from '@iqser/common-ui';
 
 @Component({
-    selector: 'redaction-dossier-listing-details',
-    templateUrl: './dossier-listing-details.component.html',
-    styleUrls: ['./dossier-listing-details.component.scss'],
+    selector: 'redaction-dossiers-listing-details',
+    templateUrl: './dossiers-listing-details.component.html',
+    styleUrls: ['./dossiers-listing-details.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DossierListingDetailsComponent {
+export class DossiersListingDetailsComponent {
     @Input() dossiersChartData: DoughnutChartConfig[];
     @Input() documentsChartData: DoughnutChartConfig[];
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html
new file mode 100644
index 000000000..30b70e884
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.html
@@ -0,0 +1,31 @@
+<div [matTooltip]="dossier.dossierName" class="table-item-title heading mb-6" matTooltipPosition="above">
+    {{ dossier.dossierName }}
+</div>
+<div class="small-label stats-subtitle mb-6">
+    <div>
+        <mat-icon svgIcon="red:template"></mat-icon>
+        {{ getDossierTemplateNameFor(dossier.dossierTemplateId) }}
+    </div>
+</div>
+<div class="small-label stats-subtitle">
+    <div>
+        <mat-icon svgIcon="red:document"></mat-icon>
+        {{ dossier.filesLength }}
+    </div>
+    <div>
+        <mat-icon svgIcon="red:pages"></mat-icon>
+        {{ dossier.totalNumberOfPages }}
+    </div>
+    <div>
+        <mat-icon svgIcon="red:user"></mat-icon>
+        {{ dossier.memberIds.length }}
+    </div>
+    <div>
+        <mat-icon svgIcon="red:calendar"></mat-icon>
+        {{ dossier.date | date: 'mediumDate' }}
+    </div>
+    <div *ngIf="dossier.dueDate">
+        <mat-icon svgIcon="red:lightning"></mat-icon>
+        {{ dossier.dueDate | date: 'mediumDate' }}
+    </div>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts
new file mode 100644
index 000000000..2ba4cc448
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { Dossier } from '@state/model/dossier';
+import { AppStateService } from '@state/app-state.service';
+
+@Component({
+    selector: 'redaction-dossiers-listing-dossier-name',
+    templateUrl: './dossiers-listing-dossier-name.component.html',
+    styleUrls: ['./dossiers-listing-dossier-name.component.scss']
+})
+export class DossiersListingDossierNameComponent {
+    @Input() dossier: Dossier;
+
+    constructor(private readonly _appStateService: AppStateService) {}
+
+    getDossierTemplateNameFor(dossierTemplateId: string): string {
+        return this._appStateService.getDossierTemplateById(dossierTemplateId).name;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
new file mode 100644
index 000000000..352e0354e
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
@@ -0,0 +1,12 @@
+<div class="cell">
+    <redaction-dossiers-listing-dossier-name [dossier]="dossier"></redaction-dossiers-listing-dossier-name>
+</div>
+<div class="cell">
+    <redaction-needs-work-badge [needsWorkInput]="dossier"></redaction-needs-work-badge>
+</div>
+<div class="cell user-column">
+    <redaction-initials-avatar [userId]="dossier.ownerId" [withName]="true"></redaction-initials-avatar>
+</div>
+<div class="cell status-container">
+    <redaction-dossiers-listing-actions (actionPerformed)="calculateData.emit()" [dossier]="dossier"></redaction-dossiers-listing-actions>
+</div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.scss
new file mode 100644
index 000000000..ed7edfb31
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.scss
@@ -0,0 +1,3 @@
+.status-container {
+    width: 160px;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
new file mode 100644
index 000000000..7c2e63ce1
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Dossier } from '@state/model/dossier';
+import { Required } from '@iqser/common-ui';
+
+@Component({
+    selector: 'redaction-table-item',
+    templateUrl: './table-item.component.html',
+    styleUrls: ['./table-item.component.scss']
+})
+export class TableItemComponent {
+    @Input() @Required() dossier!: Dossier;
+    @Output() readonly calculateData = new EventEmitter<void>();
+
+    constructor() {}
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts
new file mode 100644
index 000000000..aa8395e22
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts
@@ -0,0 +1,213 @@
+import { Injectable, TemplateRef } from '@angular/core';
+import { IFilterGroup, keyChecker, NestedFilter, TableColumnConfig } from '@iqser/common-ui';
+import { Dossier } from '@state/model/dossier';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { TranslateService } from '@ngx-translate/core';
+import { UserPreferenceService } from '@services/user-preference.service';
+import { UserService } from '@services/user.service';
+import { ButtonConfig } from '@shared/components/page-header/models/button-config.model';
+import { User } from '@models/user';
+import { fileStatusTranslations } from '../../translations/file-status-translations';
+import {
+    annotationFilterChecker,
+    dossierMemberChecker,
+    dossierStatusChecker,
+    dossierTemplateChecker,
+    RedactionFilterSorter,
+    StatusSorter
+} from '@utils/index';
+import { workloadTranslations } from '../../translations/workload-translations';
+import { AppStateService } from '@state/app-state.service';
+
+@Injectable()
+export class ConfigService {
+    constructor(
+        private readonly _translateService: TranslateService,
+        private readonly _userPreferenceService: UserPreferenceService,
+        private readonly _userService: UserService,
+        private readonly _appStateService: AppStateService
+    ) {}
+
+    get tableConfig(): TableColumnConfig<Dossier>[] {
+        return [
+            { label: _('dossier-listing.table-col-names.name'), sortByKey: 'searchKey', width: '2fr' },
+            { label: _('dossier-listing.table-col-names.needs-work') },
+            { label: _('dossier-listing.table-col-names.owner'), class: 'user-column' },
+            { label: _('dossier-listing.table-col-names.status'), class: 'flex-end', width: 'auto' }
+        ];
+    }
+
+    get _currentUser(): User {
+        return this._userService.currentUser;
+    }
+
+    private get _quickFilters(): NestedFilter[] {
+        const myDossiersLabel = this._translateService.instant('dossier-listing.quick-filters.my-dossiers');
+        const filters = [
+            {
+                id: 'my-dossiers',
+                label: myDossiersLabel,
+                checker: (dw: Dossier) => {
+                    console.log(dw.ownerId, this._currentUser.id);
+                    return dw.ownerId === this._currentUser.id;
+                }
+            },
+            {
+                id: 'to-approve',
+                label: this._translateService.instant('dossier-listing.quick-filters.to-approve'),
+                checker: (dw: Dossier) => dw.approverIds.includes(this._currentUser.id)
+            },
+            {
+                id: 'to-review',
+                label: this._translateService.instant('dossier-listing.quick-filters.to-review'),
+                checker: (dw: Dossier) => dw.memberIds.includes(this._currentUser.id)
+            },
+            {
+                id: 'other',
+                label: this._translateService.instant('dossier-listing.quick-filters.other'),
+                checker: (dw: Dossier) => !dw.memberIds.includes(this._currentUser.id)
+            }
+        ].map(filter => new NestedFilter(filter));
+
+        return filters.filter(f => f.label === myDossiersLabel || this._userPreferenceService.areDevFeaturesEnabled);
+    }
+
+    buttonsConfig(addDossier: () => void): ButtonConfig[] {
+        return [
+            {
+                label: _('dossier-listing.add-new'),
+                action: addDossier,
+                hide: !this._currentUser.isManager,
+                icon: 'red:plus',
+                type: 'primary'
+            }
+        ];
+    }
+
+    filterGroups(entities: Dossier[], needsWorkFilterTemplate: TemplateRef<unknown>) {
+        const allDistinctFileStatus = new Set<string>();
+        const allDistinctPeople = new Set<string>();
+        const allDistinctNeedsWork = new Set<string>();
+        const allDistinctDossierTemplates = new Set<string>();
+
+        const filterGroups: IFilterGroup[] = [];
+
+        entities?.forEach(entry => {
+            // all people
+            entry.memberIds.forEach(f => allDistinctPeople.add(f));
+            // Needs work
+            entry.files.forEach(file => {
+                allDistinctFileStatus.add(file.status);
+                if (file.analysisRequired) {
+                    allDistinctNeedsWork.add('analysis');
+                }
+                if (entry.hintsOnly) {
+                    allDistinctNeedsWork.add('hint');
+                }
+                if (entry.hasRedactions) {
+                    allDistinctNeedsWork.add('redaction');
+                }
+                if (entry.hasSuggestions) {
+                    allDistinctNeedsWork.add('suggestion');
+                }
+                if (entry.hasNone) {
+                    allDistinctNeedsWork.add('none');
+                }
+            });
+
+            allDistinctDossierTemplates.add(entry.dossierTemplateId);
+        });
+
+        const statusFilters = [...allDistinctFileStatus].map(
+            status =>
+                new NestedFilter({
+                    id: status,
+                    label: this._translateService.instant(fileStatusTranslations[status])
+                })
+        );
+
+        filterGroups.push({
+            slug: 'statusFilters',
+            label: this._translateService.instant('filters.status'),
+            icon: 'red:status',
+            filters: statusFilters.sort((a, b) => StatusSorter[a.id] - StatusSorter[b.id]),
+            checker: dossierStatusChecker
+        });
+
+        const peopleFilters = [...allDistinctPeople].map(
+            userId =>
+                new NestedFilter({
+                    id: userId,
+                    label: this._userService.getNameForId(userId)
+                })
+        );
+
+        filterGroups.push({
+            slug: 'peopleFilters',
+            label: this._translateService.instant('filters.people'),
+            icon: 'red:user',
+            filters: peopleFilters,
+            checker: dossierMemberChecker
+        });
+
+        const needsWorkFilters = [...allDistinctNeedsWork].map(
+            type =>
+                new NestedFilter({
+                    id: type,
+                    label: workloadTranslations[type]
+                })
+        );
+
+        filterGroups.push({
+            slug: 'needsWorkFilters',
+            label: this._translateService.instant('filters.needs-work'),
+            icon: 'red:needs-work',
+            filterTemplate: needsWorkFilterTemplate,
+            filters: needsWorkFilters.sort((a, b) => RedactionFilterSorter[a.id] - RedactionFilterSorter[b.id]),
+            checker: annotationFilterChecker,
+            matchAll: true
+        });
+
+        const dossierTemplateFilters = [...allDistinctDossierTemplates].map(
+            id =>
+                new NestedFilter({
+                    id: id,
+                    label: this._appStateService.getDossierTemplateById(id).name
+                })
+        );
+
+        filterGroups.push({
+            slug: 'dossierTemplateFilters',
+            label: this._translateService.instant('filters.dossier-templates'),
+            icon: 'red:template',
+            hide: dossierTemplateFilters.length <= 1,
+            filters: dossierTemplateFilters,
+            checker: dossierTemplateChecker
+        });
+
+        const quickFilters = this._quickFilters;
+        filterGroups.push({
+            slug: 'quickFilters',
+            filters: quickFilters,
+            checker: (dw: Dossier) => quickFilters.reduce((acc, f) => acc || (f.checked && f.checker(dw)), false)
+        });
+
+        const dossierFilters = entities.map(
+            dossier =>
+                new NestedFilter({
+                    id: dossier.dossierName,
+                    label: dossier.dossierName
+                })
+        );
+        filterGroups.push({
+            slug: 'dossierNameFilter',
+            label: this._translateService.instant('dossier-listing.filters.label'),
+            icon: 'red:folder',
+            filters: dossierFilters,
+            filterceptionPlaceholder: this._translateService.instant('dossier-listing.filters.search'),
+            checker: keyChecker('dossierName')
+        });
+
+        return filterGroups;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
new file mode 100644
index 000000000..0b6b2aa21
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IqserIconsModule } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
+import { DossiersListingScreenComponent } from './screen/dossiers-listing-screen.component';
+import { RouterModule } from '@angular/router';
+import { DossiersListingActionsComponent } from './components/dossiers-listing-actions/dossiers-listing-actions.component';
+import { SharedModule } from '@shared/shared.module';
+import { DossiersListingDetailsComponent } from './components/dossiers-listing-details/dossiers-listing-details.component';
+import { DossiersListingDossierNameComponent } from './components/dossiers-listing-dossier-name/dossiers-listing-dossier-name.component';
+import { ConfigService } from './config.service';
+import { TableItemComponent } from './components/table-item/table-item.component';
+import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
+
+const routes = [
+    {
+        path: '',
+        component: DossiersListingScreenComponent,
+        pathMatch: 'full'
+    }
+];
+
+@NgModule({
+    declarations: [
+        DossiersListingScreenComponent,
+        DossiersListingActionsComponent,
+        DossiersListingDetailsComponent,
+        DossiersListingDossierNameComponent,
+        TableItemComponent
+    ],
+    providers: [ConfigService],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, IqserIconsModule, TranslateModule]
+})
+export class DossiersListingModule {}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.html
new file mode 100644
index 000000000..82ee8a3a1
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.html
@@ -0,0 +1,36 @@
+<section>
+    <redaction-page-header [buttonConfigs]="buttonConfigs"></redaction-page-header>
+
+    <div class="overlay-shadow"></div>
+
+    <div class="red-content-inner">
+        <div class="content-container">
+            <iqser-table
+                (noDataAction)="openAddDossierDialog()"
+                [hasScrollButton]="true"
+                [itemSize]="85"
+                [noDataButtonLabel]="'dossier-listing.no-data.action' | translate"
+                [noDataText]="'dossier-listing.no-data.title' | translate"
+                [noMatchText]="'dossier-listing.no-match.title' | translate"
+                [showNoDataButton]="currentUser.isManager"
+                noDataIcon="red:folder"
+            ></iqser-table>
+        </div>
+
+        <div class="right-container" iqserHasScrollbar>
+            <redaction-dossiers-listing-details
+                *ngIf="(entitiesService.noData$ | async) === false"
+                [documentsChartData]="documentsChartData"
+                [dossiersChartData]="dossiersChartData"
+            ></redaction-dossiers-listing-details>
+        </div>
+    </div>
+</section>
+
+<ng-template #needsWorkFilterTemplate let-filter="filter">
+    <redaction-type-filter [filter]="filter"></redaction-type-filter>
+</ng-template>
+
+<ng-template #tableItemTemplate let-dossier="entity">
+    <redaction-table-item (calculateData)="calculateData()" [dossier]="dossier"></redaction-table-item>
+</ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.scss
new file mode 100644
index 000000000..c3c3a92e5
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.scss
@@ -0,0 +1,14 @@
+.right-container {
+    display: flex;
+    width: 466px;
+    min-width: 466px;
+    padding-right: 11px;
+
+    &.has-scrollbar:hover {
+        padding-right: 0;
+    }
+
+    redaction-dossiers-listing-details {
+        min-width: 466px;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts
new file mode 100644
index 000000000..d48cebecf
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts
@@ -0,0 +1,141 @@
+import { AfterViewInit, Component, forwardRef, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { DossierStatuses } from '@redaction/red-ui-http';
+import { AppStateService } from '@state/app-state.service';
+import { Dossier } from '@state/model/dossier';
+import { UserService } from '@services/user.service';
+import { PermissionsService } from '@services/permissions.service';
+import { TranslateChartService } from '@services/translate-chart.service';
+import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component';
+import { timer } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
+import { groupBy, OnAttach, OnDetach, StatusSorter } from '@utils/index';
+import { DefaultListingServices, ListingComponent, TableComponent } from '@iqser/common-ui';
+import { fileStatusTranslations } from '../../../translations/file-status-translations';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { ConfigService } from '../config.service';
+
+@Component({
+    templateUrl: './dossiers-listing-screen.component.html',
+    styleUrls: ['./dossiers-listing-screen.component.scss'],
+    providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => DossiersListingScreenComponent) }]
+})
+export class DossiersListingScreenComponent
+    extends ListingComponent<Dossier>
+    implements OnInit, AfterViewInit, OnDestroy, OnAttach, OnDetach
+{
+    readonly currentUser = this._userService.currentUser;
+    readonly tableColumnConfigs = this._configService.tableConfig;
+    readonly tableHeaderLabel = _('dossier-listing.table-header.title');
+    readonly buttonConfigs = this._configService.buttonsConfig(() => this.openAddDossierDialog());
+    dossiersChartData: DoughnutChartConfig[] = [];
+    documentsChartData: DoughnutChartConfig[] = [];
+    private _lastScrolledIndex: number;
+    @ViewChild('needsWorkFilterTemplate', {
+        read: TemplateRef,
+        static: true
+    })
+    private readonly _needsWorkFilterTemplate: TemplateRef<unknown>;
+    @ViewChild(TableComponent) private readonly _tableComponent: TableComponent<Dossier>;
+
+    constructor(
+        private readonly _router: Router,
+        protected readonly _injector: Injector,
+        private readonly _userService: UserService,
+        readonly permissionsService: PermissionsService,
+        private readonly _appStateService: AppStateService,
+        private readonly _dialogService: DossiersDialogService,
+        private readonly _translateChartService: TranslateChartService,
+        private readonly _configService: ConfigService
+    ) {
+        super(_injector);
+        this._appStateService.reset();
+        this._loadEntitiesFromState();
+    }
+
+    private get _activeDossiersCount(): number {
+        return this.entitiesService.all.filter(p => p.status === DossierStatuses.ACTIVE).length;
+    }
+
+    private get _inactiveDossiersCount(): number {
+        return this.entitiesService.all.length - this._activeDossiersCount;
+    }
+
+    ngOnInit(): void {
+        this.calculateData();
+
+        this.addSubscription = timer(0, 10000).subscribe(async () => {
+            await this._appStateService.loadAllDossiers();
+            this._loadEntitiesFromState();
+            this.calculateData();
+        });
+
+        this.addSubscription = this._appStateService.fileChanged$.subscribe(() => {
+            this.calculateData();
+        });
+    }
+
+    ngAfterViewInit(): void {
+        this.addSubscription = this._tableComponent.scrollViewport.scrolledIndexChange
+            .pipe(tap(index => (this._lastScrolledIndex = index)))
+            .subscribe();
+    }
+
+    ngOnAttach(): void {
+        this._appStateService.reset();
+        this._loadEntitiesFromState();
+        this.ngOnInit();
+        this.ngAfterViewInit();
+        this._tableComponent.scrollViewport.scrollToIndex(this._lastScrolledIndex, 'smooth');
+    }
+
+    ngOnDetach(): void {
+        this.ngOnDestroy();
+    }
+
+    openAddDossierDialog(): void {
+        this._dialogService.openDialog('addDossier', null, null, async addResponse => {
+            await this._router.navigate([`/main/dossiers/${addResponse.dossier.id}`]);
+            if (addResponse.addMembers) {
+                this._dialogService.openDialog('editDossier', null, {
+                    dossier: addResponse.dossier,
+                    section: 'members'
+                });
+            }
+        });
+    }
+
+    calculateData(): void {
+        this._computeAllFilters();
+
+        this.dossiersChartData = [
+            { value: this._activeDossiersCount, color: 'ACTIVE', label: _('active') },
+            { value: this._inactiveDossiersCount, color: 'DELETED', label: _('archived') }
+        ];
+        const groups = groupBy(this._appStateService.aggregatedFiles, 'status');
+        this.documentsChartData = [];
+
+        for (const status of Object.keys(groups)) {
+            this.documentsChartData.push({
+                value: groups[status].length,
+                color: status,
+                label: fileStatusTranslations[status],
+                key: status
+            });
+        }
+        this.documentsChartData.sort(StatusSorter.byStatus);
+        this.documentsChartData = this._translateChartService.translateStatus(this.documentsChartData);
+    }
+
+    private _loadEntitiesFromState() {
+        this.entitiesService.setEntities(this._appStateService.allDossiers);
+    }
+
+    private _computeAllFilters() {
+        const filterGroups = this._configService.filterGroups(this.entitiesService.all, this._needsWorkFilterTemplate);
+        for (const filterGroup of filterGroups) {
+            this.filterService.addFilterGroup(filterGroup);
+        }
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
index 39ee44aa1..e4dd75f46 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
@@ -18,7 +18,7 @@ import { ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { ManualAnnotationResponse } from '@models/file/manual-annotation-response';
 import { AnnotationData, FileDataModel } from '@models/file/file-data.model';
-import { FileActionService } from '../../services/file-action.service';
+import { FileActionService } from '../../shared/services/file-action.service';
 import { AnnotationDrawService } from '../../services/annotation-draw.service';
 import { AnnotationProcessingService } from '../../services/annotation-processing.service';
 import { File } from '@models/file/file';
@@ -38,7 +38,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
 import { handleFilterDelta } from '@utils/filter-utils';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { FileActionsComponent } from '../../components/file-actions/file-actions.component';
+import { FileActionsComponent } from '../../shared/components/file-actions/file-actions.component';
 import { User } from '@models/user';
 import { FilesService } from '../../services/files.service';
 import Annotation = Core.Annotations.Annotation;
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
rename to apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.scss
rename to apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts
similarity index 99%
rename from apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
rename to apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts
index 01c179aa4..1231ca8c9 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.ts
@@ -2,8 +2,7 @@ import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, S
 import { PermissionsService } from '@services/permissions.service';
 import { File } from '@models/file/file';
 import { AppStateService } from '@state/app-state.service';
-import { FileActionService } from '../../services/file-action.service';
-import { DossiersDialogService } from '../../services/dossiers-dialog.service';
+import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
 import { ConfirmationDialogInput } from '@shared/dialogs/confirmation-dialog/confirmation-dialog.component';
 import { AutoUnsubscribe, CircleButtonType, CircleButtonTypes, LoadingService, Required, StatusBarConfig, Toaster } from '@iqser/common-ui';
 import { FileManagementControllerService, FileStatus } from '@redaction/red-ui-http';
@@ -12,6 +11,7 @@ import { UserService } from '@services/user.service';
 import { filter } from 'rxjs/operators';
 import { UserPreferenceService } from '@services/user-preference.service';
 import { LongPressEvent } from '@shared/directives/long-press.directive';
+import { FileActionService } from '../../services/file-action.service';
 
 @Component({
     selector: 'redaction-file-actions',
diff --git a/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.html b/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.html
rename to apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.html
diff --git a/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss b/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.scss
rename to apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.ts b/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts
similarity index 96%
rename from apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.ts
rename to apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts
index b04bb5e76..27040f512 100644
--- a/apps/red-ui/src/app/modules/dossier/components/needs-work-badge/needs-work-badge.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/shared/components/needs-work-badge/needs-work-badge.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { AppStateService } from '@state/app-state.service';
 import { File } from '@models/file/file';
-import { Dossier } from '../../../../state/model/dossier';
+import { Dossier } from '@state/model/dossier';
 
 @Component({
     selector: 'redaction-needs-work-badge',
diff --git a/apps/red-ui/src/app/modules/dossier/services/file-action.service.ts b/apps/red-ui/src/app/modules/dossier/shared/services/file-action.service.ts
similarity index 96%
rename from apps/red-ui/src/app/modules/dossier/services/file-action.service.ts
rename to apps/red-ui/src/app/modules/dossier/shared/services/file-action.service.ts
index c32aa4e20..c6fc526b0 100644
--- a/apps/red-ui/src/app/modules/dossier/services/file-action.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/shared/services/file-action.service.ts
@@ -4,10 +4,10 @@ import { UserService } from '@services/user.service';
 import { ReanalysisControllerService } from '@redaction/red-ui-http';
 import { File } from '@models/file/file';
 import { PermissionsService } from '@services/permissions.service';
-import { DossiersDialogService } from './dossiers-dialog.service';
+import { DossiersDialogService } from '../../services/dossiers-dialog.service';
 import { ConfirmationDialogInput } from '@shared/dialogs/confirmation-dialog/confirmation-dialog.component';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { FilesService } from './files.service';
+import { FilesService } from '../../services/files.service';
 
 @Injectable()
 export class FileActionService {
diff --git a/apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts b/apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts
new file mode 100644
index 000000000..b1c4b967e
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/shared/shared-dossiers.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FileActionService } from './services/file-action.service';
+import { FileActionsComponent } from './components/file-actions/file-actions.component';
+import { NeedsWorkBadgeComponent } from './components/needs-work-badge/needs-work-badge.component';
+import { IqserIconsModule } from '@iqser/common-ui';
+import { SharedModule } from '@shared/shared.module';
+
+const components = [FileActionsComponent, NeedsWorkBadgeComponent];
+
+@NgModule({
+    declarations: [...components],
+    exports: [...components],
+    providers: [FileActionService],
+    imports: [CommonModule, IqserIconsModule, SharedModule]
+})
+export class SharedDossiersModule {}
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html
rename to apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.scss b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.scss
rename to apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.ts b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.ts
rename to apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts
diff --git a/apps/red-ui/src/app/modules/dossier/components/type-filter/type-filter.component.html b/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.html
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/type-filter/type-filter.component.html
rename to apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.html
diff --git a/apps/red-ui/src/app/modules/dossier/components/type-filter/type-filter.component.scss b/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.scss
similarity index 100%
rename from apps/red-ui/src/app/modules/dossier/components/type-filter/type-filter.component.scss
rename to apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.scss
diff --git a/apps/red-ui/src/app/modules/dossier/components/type-filter/type-filter.component.ts b/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.ts
similarity index 94%
rename from apps/red-ui/src/app/modules/dossier/components/type-filter/type-filter.component.ts
rename to apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.ts
index 9d2866f9d..39c71c592 100644
--- a/apps/red-ui/src/app/modules/dossier/components/type-filter/type-filter.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { AppStateService } from '@state/app-state.service';
+import { AppStateService } from '../../../../state/app-state.service';
 import { INestedFilter } from '@iqser/common-ui';
 
 @Component({
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index 92d75e3b7..6545ecbbb 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -19,13 +19,15 @@ import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { SelectComponent } from './components/select/select.component';
 import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-dossiers-screen.directive';
 import { DictionaryManagerComponent } from './components/dictionary-manager/dictionary-manager.component';
-import { SideNavComponent } from '@shared/components/side-nav/side-nav.component';
+import { SideNavComponent } from './components/side-nav/side-nav.component';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { AssignUserDropdownComponent } from './components/assign-user-dropdown/assign-user-dropdown.component';
 import { PageHeaderComponent } from './components/page-header/page-header.component';
-import { DatePipe } from '@shared/pipes/date.pipe';
-import { LongPressDirective } from '@shared/directives/long-press.directive';
-import { NamePipe } from '@shared/pipes/name.pipe';
+import { DatePipe } from './pipes/date.pipe';
+import { LongPressDirective } from './directives/long-press.directive';
+import { NamePipe } from './pipes/name.pipe';
+import { TypeFilterComponent } from './components/type-filter/type-filter.component';
+import { TeamMembersComponent } from './components/team-members/team-members.component';
 
 const buttons = [FileDownloadBtnComponent, UserButtonComponent];
 
@@ -42,6 +44,8 @@ const components = [
     DictionaryManagerComponent,
     AssignUserDropdownComponent,
     PageHeaderComponent,
+    TypeFilterComponent,
+    TeamMembersComponent,
 
     ...buttons
 ];
diff --git a/apps/red-ui/src/app/utils/index.ts b/apps/red-ui/src/app/utils/index.ts
new file mode 100644
index 000000000..15c2674bb
--- /dev/null
+++ b/apps/red-ui/src/app/utils/index.ts
@@ -0,0 +1,17 @@
+export * from './sorters/redaction-filter-sorter';
+export * from './sorters/status-sorter';
+export * from './sorters/super-type-sorter';
+
+export * from './api-path-interceptor';
+export * from './configuration.initializer';
+export * from './custom-route-reuse.strategy';
+export * from './date-inputs-utils';
+export * from './file-download-utils';
+export * from './file-drop-utils';
+export * from './filter-utils';
+export * from './functions';
+export * from './global-error-handler.service';
+export * from './missing-translations-handler';
+export * from './page-stamper';
+export * from './pdf-coordinates';
+export * from './pruning-translation-loader';
diff --git a/libs/common-ui b/libs/common-ui
index 54eb8173c..85d22fbcc 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 54eb8173cf7ce35f29f4e9df309954bbd1cf7a5c
+Subproject commit 85d22fbcc9b3673d11dbf542e3b6ee16c7791d84

From 0f93837529787f8d6cdd207911bf2436cef5bf91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 1 Oct 2021 15:09:23 +0300
Subject: [PATCH 2/4] Downloads & trash refactor

---
 .../downloads-list-screen.component.html      |  95 ++++++++--------
 .../downloads-list-screen.component.ts        |  23 ++--
 .../screens/trash/trash-screen.component.html | 102 +++++++++---------
 .../screens/trash/trash-screen.component.scss |   3 +
 .../screens/trash/trash-screen.component.ts   |  39 ++-----
 .../dossier-overview/config.service.ts        |   2 +-
 libs/common-ui                                |   2 +-
 7 files changed, 113 insertions(+), 153 deletions(-)

diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index 0b07b15ba..10f9185cb 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -7,7 +7,6 @@
     <div class="red-content-inner">
         <div class="content-container">
             <iqser-table
-                [actionsTemplate]="actionsTemplate"
                 [bulkActions]="bulkActions"
                 [itemSize]="80"
                 [noDataText]="'downloads-list.no-data.title' | translate"
@@ -29,55 +28,51 @@
     ></iqser-circle-button>
 </ng-template>
 
-<ng-template #filenameTemplate let-download="entity">
-    <div class="cell">
-        <div [class.no-bold]="download.lastDownload" class="table-item-title heading">
-            {{ download.filename }}
+<ng-template #tableItemTemplate let-download="entity">
+    <div>
+        <div class="cell">
+            <div [class.no-bold]="download.lastDownload" class="table-item-title heading">
+                {{ download.filename }}
+            </div>
+        </div>
+
+        <div class="cell">
+            <div class="small-label">
+                {{ download.size }}
+            </div>
+        </div>
+
+        <div class="cell">
+            <div class="small-label">
+                {{ download.creationDate | date: 'd MMM. yyyy, hh:mm a' }}
+            </div>
+        </div>
+
+        <div class="cell">
+            <div class="small-label">
+                {{ download.status }}
+            </div>
+        </div>
+
+        <div></div>
+
+        <div [class.active]="download.inProgress" class="action-buttons">
+            <iqser-circle-button
+                (action)="downloadItem(download)"
+                *ngIf="download.status === 'READY' && !download.inProgress"
+                [tooltip]="'downloads-list.actions.download' | translate"
+                [type]="circleButtonTypes.dark"
+                icon="red:download"
+            ></iqser-circle-button>
+
+            <iqser-circle-button
+                (action)="deleteItems([download])"
+                [tooltip]="'downloads-list.actions.delete' | translate"
+                [type]="circleButtonTypes.dark"
+                icon="red:trash"
+            ></iqser-circle-button>
+
+            <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
         </div>
     </div>
 </ng-template>
-
-<ng-template #sizeTemplate let-download="entity">
-    <div class="cell">
-        <div class="small-label">
-            {{ download.size }}
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #creationDateTemplate let-download="entity">
-    <div class="cell">
-        <div class="small-label">
-            {{ download.creationDate | date: 'd MMM. yyyy, hh:mm a' }}
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #statusTemplate let-download="entity">
-    <div class="cell">
-        <div class="small-label">
-            {{ download.status }}
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #actionsTemplate let-download="entity">
-    <div [class.active]="download.inProgress" class="action-buttons">
-        <iqser-circle-button
-            (action)="downloadItem(download)"
-            *ngIf="download.status === 'READY' && !download.inProgress"
-            [tooltip]="'downloads-list.actions.download' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="red:download"
-        ></iqser-circle-button>
-
-        <iqser-circle-button
-            (action)="deleteItems([download])"
-            [tooltip]="'downloads-list.actions.delete' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="red:trash"
-        ></iqser-circle-button>
-
-        <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
-    </div>
-</ng-template>
diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
index 41207582a..1bb7b56ac 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, forwardRef, Injector, OnInit } from '@angular/core';
 import { FileDownloadService } from '@upload-download/services/file-download.service';
 import { DownloadStatusWrapper } from '@upload-download/model/download-status.wrapper';
 import { DownloadControllerService } from '@redaction/red-ui-http';
@@ -16,11 +16,12 @@ import { RouterHistoryService } from '@services/router-history.service';
 export class DownloadsListScreenComponent extends ListingComponent<DownloadStatusWrapper> implements OnInit {
     readonly circleButtonTypes = CircleButtonTypes;
     readonly tableHeaderLabel = _('downloads-list.table-header.title');
-    tableColumnConfigs: TableColumnConfig<DownloadStatusWrapper>[];
-    @ViewChild('filenameTemplate', { static: true }) filenameTemplate: TemplateRef<never>;
-    @ViewChild('sizeTemplate', { static: true }) sizeTemplate: TemplateRef<never>;
-    @ViewChild('creationDateTemplate', { static: true }) creationDateTemplate: TemplateRef<never>;
-    @ViewChild('statusTemplate', { static: true }) statusTemplate: TemplateRef<never>;
+    readonly tableColumnConfigs: TableColumnConfig<DownloadStatusWrapper>[] = [
+        { label: _('downloads-list.table-col-names.name'), width: '2fr' },
+        { label: _('downloads-list.table-col-names.size') },
+        { label: _('downloads-list.table-col-names.date') },
+        { label: _('downloads-list.table-col-names.status') }
+    ];
 
     constructor(
         protected readonly _injector: Injector,
@@ -33,7 +34,6 @@ export class DownloadsListScreenComponent extends ListingComponent<DownloadStatu
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         this._loadingService.start();
         await this._loadData();
         this.addSubscription = timer(0, 5000).subscribe(async () => {
@@ -50,15 +50,6 @@ export class DownloadsListScreenComponent extends ListingComponent<DownloadStatu
         this._loadingService.loadWhile(this._deleteItems(downloads));
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            { label: _('downloads-list.table-col-names.name'), width: '2fr', template: this.filenameTemplate },
-            { label: _('downloads-list.table-col-names.size'), template: this.sizeTemplate },
-            { label: _('downloads-list.table-col-names.date'), template: this.creationDateTemplate },
-            { label: _('downloads-list.table-col-names.status'), template: this.statusTemplate }
-        ];
-    }
-
     private async _deleteItems(downloads?: DownloadStatusWrapper[]) {
         const storageIds = (downloads || this.entitiesService.selected).map(d => d.storageId);
         await this._downloadControllerService.deleteDownload({ storageIds }).toPromise();
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
index 74c84e850..772400920 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
@@ -40,62 +40,58 @@
     ></iqser-circle-button>
 </ng-template>
 
-<ng-template #filenameTemplate let-entity="entity">
-    <div class="cell filename">
-        <div [matTooltip]="entity.dossierName" class="table-item-title heading" matTooltipPosition="above">
-            {{ entity.dossierName }}
+<ng-template #tableItemTemplate let-entity="entity">
+    <div>
+        <div class="cell filename">
+            <div [matTooltip]="entity.dossierName" class="table-item-title heading" matTooltipPosition="above">
+                {{ entity.dossierName }}
+            </div>
+            <div class="small-label stats-subtitle">
+                <div>
+                    <mat-icon svgIcon="red:user"></mat-icon>
+                    {{ entity.memberIds.length }}
+                </div>
+                <div>
+                    <mat-icon svgIcon="red:calendar"></mat-icon>
+                    {{ entity.date | date: 'mediumDate' }}
+                </div>
+                <div *ngIf="entity.dueDate">
+                    <mat-icon svgIcon="red:lightning"></mat-icon>
+                    {{ entity.dueDate | date: 'mediumDate' }}
+                </div>
+            </div>
         </div>
-        <div class="small-label stats-subtitle">
-            <div>
-                <mat-icon svgIcon="red:user"></mat-icon>
-                {{ entity.memberIds.length }}
+
+        <div class="cell user-column">
+            <redaction-initials-avatar [userId]="entity.ownerId" [withName]="true"></redaction-initials-avatar>
+        </div>
+
+        <div class="cell">
+            <span class="small-label">
+                {{ entity.softDeletedTime | date: 'd MMM. yyyy, hh:mm a' }}
+            </span>
+        </div>
+
+        <div class="cell">
+            <div class="small-label">
+                {{ entity.restoreDate | date: 'timeFromNow' }}
             </div>
-            <div>
-                <mat-icon svgIcon="red:calendar"></mat-icon>
-                {{ entity.date | date: 'mediumDate' }}
-            </div>
-            <div *ngIf="entity.dueDate">
-                <mat-icon svgIcon="red:lightning"></mat-icon>
-                {{ entity.dueDate | date: 'mediumDate' }}
+            <div class="action-buttons">
+                <iqser-circle-button
+                    (action)="restore([entity])"
+                    *ngIf="entity.canRestore"
+                    [tooltip]="'trash.action.restore' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:put-back"
+                ></iqser-circle-button>
+
+                <iqser-circle-button
+                    (action)="hardDelete([entity])"
+                    [tooltip]="'trash.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
             </div>
         </div>
     </div>
 </ng-template>
-
-<ng-template #ownerTemplate let-entity="entity">
-    <div class="cell user-column">
-        <redaction-initials-avatar [userId]="entity.ownerId" [withName]="true"></redaction-initials-avatar>
-    </div>
-</ng-template>
-
-<ng-template #deletedTimeTemplate let-entity="entity">
-    <div class="cell">
-        <span class="small-label">
-            {{ entity.softDeletedTime | date: 'd MMM. yyyy, hh:mm a' }}
-        </span>
-    </div>
-</ng-template>
-
-<ng-template #restoreDateTemplate let-entity="entity">
-    <div class="cell">
-        <div class="small-label">
-            {{ entity.restoreDate | date: 'timeFromNow' }}
-        </div>
-        <div class="action-buttons">
-            <iqser-circle-button
-                (action)="restore([entity])"
-                *ngIf="entity.canRestore"
-                [tooltip]="'trash.action.restore' | translate"
-                [type]="circleButtonTypes.dark"
-                icon="red:put-back"
-            ></iqser-circle-button>
-
-            <iqser-circle-button
-                (action)="hardDelete([entity])"
-                [tooltip]="'trash.action.delete' | translate"
-                [type]="circleButtonTypes.dark"
-                icon="red:trash"
-            ></iqser-circle-button>
-        </div>
-    </div>
-</ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
index e69de29bb..b0ed00292 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
@@ -0,0 +1,3 @@
+.stats-subtitle {
+    margin-top: 4px;
+}
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
index bed1882f5..bdec52e11 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit } from '@angular/core';
 import { IDossier } from '@redaction/red-ui-http';
 import {
     CircleButtonTypes,
@@ -35,11 +35,12 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
     readonly circleButtonTypes = CircleButtonTypes;
     readonly tableHeaderLabel = _('trash.table-header.title');
     readonly canRestoreSelected$ = this._canRestoreSelected$;
-    tableColumnConfigs: TableColumnConfig<DossierListItem>[];
-    @ViewChild('filenameTemplate', { static: true }) filenameTemplate: TemplateRef<never>;
-    @ViewChild('ownerTemplate', { static: true }) ownerTemplate: TemplateRef<never>;
-    @ViewChild('deletedTimeTemplate', { static: true }) deletedTimeTemplate: TemplateRef<never>;
-    @ViewChild('restoreDateTemplate', { static: true }) restoreDateTemplate: TemplateRef<never>;
+    readonly tableColumnConfigs: TableColumnConfig<DossierListItem>[] = [
+        { label: _('trash.table-col-names.name'), sortByKey: 'searchKey' },
+        { label: _('trash.table-col-names.owner'), class: 'user-column' },
+        { label: _('trash.table-col-names.deleted-on'), sortByKey: 'softDeletedTime' },
+        { label: _('trash.table-col-names.time-to-restore'), sortByKey: 'softDeletedTime' }
+    ];
 
     constructor(
         protected readonly _injector: Injector,
@@ -62,7 +63,6 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
     disabledFn = (dossier: DossierListItem) => !dossier.canRestore;
 
     async ngOnInit(): Promise<void> {
-        this._configureTableColumns();
         this._loadingService.start();
         await this._loadDossiersData();
         this.sortingService.setSortingOption({
@@ -95,31 +95,6 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
         this._loadingService.loadWhile(this._restore(dossiers));
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('trash.table-col-names.name'),
-                sortByKey: 'searchKey',
-                template: this.filenameTemplate
-            },
-            {
-                label: _('trash.table-col-names.owner'),
-                class: 'user-column',
-                template: this.ownerTemplate
-            },
-            {
-                label: _('trash.table-col-names.deleted-on'),
-                sortByKey: 'softDeletedTime',
-                template: this.deletedTimeTemplate
-            },
-            {
-                label: _('trash.table-col-names.time-to-restore'),
-                sortByKey: 'softDeletedTime',
-                template: this.restoreDateTemplate
-            }
-        ];
-    }
-
     private _getRestoreDate(softDeletedTime: string): string {
         return moment(softDeletedTime).add(this._configService.values.DELETE_RETENTION_HOURS, 'hours').toISOString();
     }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts
index af6a37ec1..5c390ea88 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview/config.service.ts
@@ -110,7 +110,7 @@ export class ConfigService {
                 {
                     label: fileStatusTranslations[FileStatuses.APPROVED],
                     enterFn: this._approveFn(reloadDossiers),
-                    enterPredicate: (file: File) => this._permissionsService.isReadyForApproval(file),
+                    enterPredicate: (file: File) => this._permissionsService.isReadyForApproval(file) && file.canBeApproved,
                     key: FileStatuses.APPROVED,
                     color: '#48C9F7'
                 }
diff --git a/libs/common-ui b/libs/common-ui
index 85d22fbcc..551db967e 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 85d22fbcc9b3673d11dbf542e3b6ee16c7791d84
+Subproject commit 551db967e2d747932579464f00e4e497c91dc628

From ed3eba90836bea4c57d6c16930fea1d4f3491d4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 1 Oct 2021 15:51:00 +0300
Subject: [PATCH 3/4] Default colors, dictionaries, dossier templates

---
 .../downloads-list-screen.component.html      | 35 ++++----
 .../default-colors-screen.component.html      | 40 ++++-----
 .../default-colors-screen.component.scss      | 18 ++--
 .../default-colors-screen.component.ts        | 26 ++----
 .../dictionary-listing-screen.component.html  | 89 +++++++++----------
 .../dictionary-listing-screen.component.scss  | 63 +++++++------
 .../dictionary-listing-screen.component.ts    | 34 ++-----
 ...er-templates-listing-screen.component.html | 52 +++++------
 ...er-templates-listing-screen.component.scss | 20 ++---
 ...sier-templates-listing-screen.component.ts | 39 ++------
 libs/common-ui                                |  2 +-
 11 files changed, 164 insertions(+), 254 deletions(-)

diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index 10f9185cb..6f8dc3f51 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -11,7 +11,6 @@
                 [itemSize]="80"
                 [noDataText]="'downloads-list.no-data.title' | translate"
                 [selectionEnabled]="true"
-                emptyColumnWidth="auto"
                 noDataIcon="red:download"
             ></iqser-table>
         </div>
@@ -52,27 +51,25 @@
             <div class="small-label">
                 {{ download.status }}
             </div>
-        </div>
 
-        <div></div>
+            <div class="action-buttons">
+                <iqser-circle-button
+                    (action)="downloadItem(download)"
+                    *ngIf="download.status === 'READY' && !download.inProgress"
+                    [tooltip]="'downloads-list.actions.download' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:download"
+                ></iqser-circle-button>
 
-        <div [class.active]="download.inProgress" class="action-buttons">
-            <iqser-circle-button
-                (action)="downloadItem(download)"
-                *ngIf="download.status === 'READY' && !download.inProgress"
-                [tooltip]="'downloads-list.actions.download' | translate"
-                [type]="circleButtonTypes.dark"
-                icon="red:download"
-            ></iqser-circle-button>
+                <iqser-circle-button
+                    (action)="deleteItems([download])"
+                    [tooltip]="'downloads-list.actions.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
 
-            <iqser-circle-button
-                (action)="deleteItems([download])"
-                [tooltip]="'downloads-list.actions.delete' | translate"
-                [type]="circleButtonTypes.dark"
-                icon="red:trash"
-            ></iqser-circle-button>
-
-            <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
+                <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
+            </div>
         </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
index 460f9c2c9..f70c2dd2b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
@@ -20,31 +20,31 @@
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="content-container">
-            <iqser-table [actionsTemplate]="actionsTemplate" [itemSize]="80" emptyColumnWidth="2fr"></iqser-table>
+            <iqser-table [itemSize]="80" emptyColumnWidth="2fr"></iqser-table>
         </div>
     </div>
 </section>
 
-<ng-template #nameTemplate let-color="entity">
-    <div class="cell">
-        <div [translate]="translations[color.key]" class="table-item-title heading"></div>
-    </div>
-</ng-template>
+<ng-template #tableItemTemplate let-color="entity">
+    <div>
+        <div class="cell">
+            <div [translate]="translations[color.key]" class="table-item-title heading"></div>
+        </div>
 
-<ng-template #colorTemplate let-color="entity">
-    <div class="cell color-wrapper">
-        <div [ngStyle]="{ 'background-color': color.value }" class="color-square"></div>
-    </div>
-</ng-template>
+        <div class="cell color-wrapper">
+            <div [ngStyle]="{ 'background-color': color.value }" class="color-square"></div>
+        </div>
 
-<ng-template #actionsTemplate let-color="entity">
-    <div class="action-buttons">
-        <iqser-circle-button
-            (action)="openEditColorDialog($event, color)"
-            *ngIf="currentUser.isAdmin"
-            [tooltip]="'default-colors-screen.action.edit' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="iqser:edit"
-        ></iqser-circle-button>
+        <div class="cell">
+            <div class="action-buttons">
+                <iqser-circle-button
+                    (action)="openEditColorDialog($event, color)"
+                    *ngIf="currentUser.isAdmin"
+                    [tooltip]="'default-colors-screen.action.edit' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:edit"
+                ></iqser-circle-button>
+            </div>
+        </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss
index c24b7ea42..5adbb8506 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss
@@ -1,15 +1,9 @@
-:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
-    &:not(.scrollbar-placeholder) {
-        padding-left: 24px;
-    }
+.color-wrapper {
+    align-items: center;
 
-    &.color-wrapper {
-        align-items: center;
-
-        .color-square {
-            width: 16px;
-            height: 16px;
-            min-width: 16px;
-        }
+    .color-square {
+        width: 16px;
+        height: 16px;
+        min-width: 16px;
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
index 384cda27c..fb6ac773b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit } from '@angular/core';
 import { AppStateService } from '@state/app-state.service';
 import { Colors } from '@redaction/red-ui-http';
 import { ActivatedRoute } from '@angular/router';
@@ -29,13 +29,14 @@ interface ListItem extends IListable {
     providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => DefaultColorsScreenComponent) }]
 })
 export class DefaultColorsScreenComponent extends ListingComponent<ListItem> implements OnInit {
-    @ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<unknown>;
-    @ViewChild('colorTemplate', { static: true }) colorTemplate: TemplateRef<unknown>;
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
     readonly translations = defaultColorsTranslations;
     readonly tableHeaderLabel = _('default-colors-screen.table-header.title');
-    tableColumnConfigs: TableColumnConfig<ListItem>[];
+    readonly tableColumnConfigs: TableColumnConfig<ListItem>[] = [
+        { label: _('default-colors-screen.table-col-names.key'), sortByKey: 'searchKey', width: '2fr' },
+        { label: _('default-colors-screen.table-col-names.color'), class: 'flex-center' }
+    ];
     private _colorsObj: Colors;
 
     constructor(
@@ -52,7 +53,6 @@ export class DefaultColorsScreenComponent extends ListingComponent<ListItem> imp
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         await this._loadColors();
     }
 
@@ -72,22 +72,6 @@ export class DefaultColorsScreenComponent extends ListingComponent<ListItem> imp
         );
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('default-colors-screen.table-col-names.key'),
-                sortByKey: 'searchKey',
-                template: this.nameTemplate,
-                width: '2fr'
-            },
-            {
-                label: _('default-colors-screen.table-col-names.color'),
-                class: 'flex-center',
-                template: this.colorTemplate
-            }
-        ];
-    }
-
     private async _loadColors() {
         this._loadingService.start();
         const data = await this._appStateService.loadColors(this._appStateService.activeDossierTemplateId).toPromise();
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
index 77d1ff07a..b54ae5350 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@@ -22,7 +22,6 @@
         <div class="content-container">
             <iqser-table
                 (noDataAction)="openAddEditDictionaryDialog()"
-                [actionsTemplate]="actionsTemplate"
                 [bulkActions]="bulkActions"
                 [headerTemplate]="headerTemplate"
                 [itemSize]="80"
@@ -78,53 +77,51 @@
     </div>
 </ng-template>
 
-<ng-template #labelTemplate let-entity="entity">
-    <div class="cell">
-        <div [ngStyle]="{ 'background-color': entity.hexColor }" class="color-square"></div>
-        <div class="dict-name">
-            <div class="table-item-title heading">
-                {{ entity.label }}
+<ng-template #tableItemTemplate let-dict="entity">
+    <div>
+        <div class="cell">
+            <div [ngStyle]="{ 'background-color': dict.hexColor }" class="color-square"></div>
+            <div class="dict-name">
+                <div class="table-item-title heading">
+                    {{ dict.label }}
+                </div>
+                <div class="small-label stats-subtitle">
+                    <div>
+                        <mat-icon svgIcon="red:entries"></mat-icon>
+                        {{ dict.entries?.length }}
+                    </div>
+                    <div *ngIf="!dict.caseInsensitive">
+                        <mat-icon svgIcon="red:case-sensitive"></mat-icon>
+                        {{ 'dictionary-listing.case-sensitive' | translate }}
+                    </div>
+                </div>
             </div>
-            <div class="small-label stats-subtitle">
-                <div>
-                    <mat-icon svgIcon="red:entries"></mat-icon>
-                    {{ entity.entries?.length }}
-                </div>
-                <div *ngIf="!entity.caseInsensitive">
-                    <mat-icon svgIcon="red:case-sensitive"></mat-icon>
-                    {{ 'dictionary-listing.case-sensitive' | translate }}
-                </div>
+        </div>
+
+        <div class="cell center small-label">
+            {{ dict.rank }}
+        </div>
+
+        <div class="cell center">
+            <redaction-annotation-icon [dictType]="dict" [type]="dict.hint ? 'circle' : 'square'"></redaction-annotation-icon>
+        </div>
+
+        <div class="cell">
+            <div *ngIf="currentUser.isAdmin" class="action-buttons">
+                <iqser-circle-button
+                    (action)="openDeleteDictionariesDialog($event, [dict])"
+                    [tooltip]="'dictionary-listing.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
+
+                <iqser-circle-button
+                    (action)="openAddEditDictionaryDialog($event, dict)"
+                    [tooltip]="'dictionary-listing.action.edit' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:edit"
+                ></iqser-circle-button>
             </div>
         </div>
     </div>
 </ng-template>
-
-<ng-template #rankTemplate let-dict="entity">
-    <div class="cell center small-label">
-        {{ dict.rank }}
-    </div>
-</ng-template>
-
-<ng-template #iconTemplate let-dict="entity">
-    <div class="cell center">
-        <redaction-annotation-icon [dictType]="dict" [type]="dict.hint ? 'circle' : 'square'"></redaction-annotation-icon>
-    </div>
-</ng-template>
-
-<ng-template #actionsTemplate let-dict="entity">
-    <div *ngIf="currentUser.isAdmin" class="action-buttons">
-        <iqser-circle-button
-            (action)="openDeleteDictionariesDialog($event, [dict])"
-            [tooltip]="'dictionary-listing.action.delete' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="red:trash"
-        ></iqser-circle-button>
-
-        <iqser-circle-button
-            (action)="openAddEditDictionaryDialog($event, dict)"
-            [tooltip]="'dictionary-listing.action.edit' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="iqser:edit"
-        ></iqser-circle-button>
-    </div>
-</ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
index 93f51990a..40a7ed6bb 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss
@@ -1,39 +1,36 @@
-:host {
-    ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-start;
+.cell {
+    flex-direction: row !important;
+    align-items: center;
 
-        &.center {
-            justify-content: center;
-        }
-
-        .color-square {
-            width: 16px;
-            height: 16px;
-            min-width: 16px;
-            margin-right: 16px;
-        }
-
-        .dict-name {
-            z-index: 1;
-            max-width: 100%;
-        }
-
-        .stats-subtitle {
-            margin-top: 4px;
-        }
+    &:not(.center) {
+        justify-content: flex-start !important;
     }
 
-    .right-container {
-        display: flex;
-        width: 353px;
-        min-width: 353px;
-        justify-content: center;
-        padding: 50px 20px 30px 20px;
+    .color-square {
+        width: 16px;
+        height: 16px;
+        min-width: 16px;
+        margin-right: 16px;
+    }
 
-        &.has-scrollbar:hover {
-            padding-right: 9px;
-        }
+    .dict-name {
+        z-index: 1;
+        max-width: 100%;
+    }
+
+    .stats-subtitle {
+        margin-top: 4px;
+    }
+}
+
+.right-container {
+    display: flex;
+    width: 353px;
+    min-width: 353px;
+    justify-content: center;
+    padding: 50px 20px 30px 20px;
+
+    &.has-scrollbar:hover {
+        padding-right: 9px;
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
index 6d9ed2807..cb7270617 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, forwardRef, Injector, OnInit } from '@angular/core';
 import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component';
 import { AppStateService } from '@state/app-state.service';
 import { catchError, defaultIfEmpty, tap } from 'rxjs/operators';
@@ -36,11 +36,12 @@ export class DictionaryListingScreenComponent extends ListingComponent<TypeValue
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
     readonly tableHeaderLabel = _('dictionary-listing.table-header.title');
-    tableColumnConfigs: TableColumnConfig<TypeValue>[];
+    readonly tableColumnConfigs: TableColumnConfig<TypeValue>[] = [
+        { label: _('dictionary-listing.table-col-names.type'), sortByKey: 'searchKey', width: '2fr' },
+        { label: _('dictionary-listing.table-col-names.order-of-importance'), sortByKey: 'rank', class: 'flex-center' },
+        { label: _('dictionary-listing.table-col-names.hint-redaction'), class: 'flex-center' }
+    ];
     chartData: DoughnutChartConfig[] = [];
-    @ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<never>;
-    @ViewChild('rankTemplate', { static: true }) rankTemplate: TemplateRef<never>;
-    @ViewChild('iconTemplate', { static: true }) iconTemplate: TemplateRef<never>;
 
     constructor(
         protected readonly _injector: Injector,
@@ -58,7 +59,6 @@ export class DictionaryListingScreenComponent extends ListingComponent<TypeValue
     }
 
     ngOnInit(): void {
-        this._configureTableColumns();
         this._loadDictionaryData();
     }
 
@@ -97,28 +97,6 @@ export class DictionaryListingScreenComponent extends ListingComponent<TypeValue
         );
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('dictionary-listing.table-col-names.type'),
-                sortByKey: 'searchKey',
-                width: '2fr',
-                template: this.labelTemplate
-            },
-            {
-                label: _('dictionary-listing.table-col-names.order-of-importance'),
-                sortByKey: 'rank',
-                class: 'flex-center',
-                template: this.rankTemplate
-            },
-            {
-                label: _('dictionary-listing.table-col-names.hint-redaction'),
-                class: 'flex-center',
-                template: this.iconTemplate
-            }
-        ];
-    }
-
     private _loadDictionaryData(loadEntries = true): void {
         const appStateDictionaryData = this._appStateService.dictionaryData[this._appStateService.activeDossierTemplateId];
         const entities = Object.values(appStateDictionaryData).filter(d => !d.virtual);
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
index 6bf3cf816..cd4d5bc2a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
@@ -61,37 +61,33 @@
     </div>
 </ng-template>
 
-<ng-template #nameTemplate let-dossierTemplate="entity">
-    <div class="cell">
-        <div class="table-item-title heading">
-            {{ dossierTemplate.name }}
-        </div>
-        <div class="small-label stats-subtitle">
-            <div>
-                <mat-icon svgIcon="red:dictionary"></mat-icon>
-                {{ 'dossier-templates-listing.dictionaries' | translate: { length: dossierTemplate.dictionariesCount } }}
+<ng-template #tableItemTemplate let-dossierTemplate="entity">
+    <div>
+        <div class="cell">
+            <div class="table-item-title heading">
+                {{ dossierTemplate.name }}
+            </div>
+            <div class="small-label stats-subtitle">
+                <div>
+                    <mat-icon svgIcon="red:dictionary"></mat-icon>
+                    {{ 'dossier-templates-listing.dictionaries' | translate: { length: dossierTemplate.dictionariesCount } }}
+                </div>
             </div>
         </div>
-    </div>
-</ng-template>
 
-<ng-template #userTemplate let-dossierTemplate="entity">
-    <div class="cell user-column">
-        <redaction-initials-avatar [userId]="dossierTemplate.createdBy" [withName]="true"></redaction-initials-avatar>
-    </div>
-</ng-template>
-
-<ng-template #dateAddedTemplate let-dossierTemplate="entity">
-    <div class="cell small-label">
-        {{ dossierTemplate.dateAdded | date: 'd MMM. yyyy' }}
-    </div>
-</ng-template>
-
-<ng-template #dateModifiedTemplate let-dossierTemplate="entity">
-    <div class="cell">
-        <div class="small-label">
-            {{ dossierTemplate.dateModified | date: 'd MMM. yyyy' }}
+        <div class="cell user-column">
+            <redaction-initials-avatar [userId]="dossierTemplate.createdBy" [withName]="true"></redaction-initials-avatar>
+        </div>
+
+        <div class="cell small-label">
+            {{ dossierTemplate.dateAdded | date: 'd MMM. yyyy' }}
+        </div>
+
+        <div class="cell">
+            <div class="small-label">
+                {{ dossierTemplate.dateModified | date: 'd MMM. yyyy' }}
+            </div>
+            <ng-container *ngTemplateOutlet="actionsTemplate; context: { entity: dossierTemplate }"></ng-container>
         </div>
-        <ng-container *ngTemplateOutlet="actionsTemplate; context: { entity: dossierTemplate }"></ng-container>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss
index 009e0d63a..232ac1f4c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.scss
@@ -1,15 +1,7 @@
-:host {
-    ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
-        .stats-subtitle {
-            margin-top: 4px;
-        }
-
-        .table-item-title {
-            max-width: 100%;
-        }
-    }
-
-    .page-header .actions > *:not(:last-child) {
-        margin-right: 16px;
-    }
+.stats-subtitle {
+    margin-top: 4px;
+}
+
+.table-item-title {
+    max-width: 100%;
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
index f7a9989ca..ef14dcb22 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Injector, OnInit } from '@angular/core';
 import { AppStateService } from '@state/app-state.service';
 import { UserPreferenceService } from '@services/user-preference.service';
 import { AdminDialogService } from '../../services/admin-dialog.service';
@@ -31,11 +31,12 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
     readonly tableHeaderLabel = _('dossier-templates-listing.table-header.title');
-    tableColumnConfigs: TableColumnConfig<DossierTemplate>[];
-    @ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<unknown>;
-    @ViewChild('userTemplate', { static: true }) userTemplate: TemplateRef<unknown>;
-    @ViewChild('dateAddedTemplate', { static: true }) dateAddedTemplate: TemplateRef<unknown>;
-    @ViewChild('dateModifiedTemplate', { static: true }) dateModifiedTemplate: TemplateRef<unknown>;
+    readonly tableColumnConfigs: TableColumnConfig<DossierTemplate>[] = [
+        { label: _('dossier-templates-listing.table-col-names.name'), sortByKey: 'searchKey' },
+        { label: _('dossier-templates-listing.table-col-names.created-by'), class: 'user-column' },
+        { label: _('dossier-templates-listing.table-col-names.created-on'), sortByKey: 'dateAdded' },
+        { label: _('dossier-templates-listing.table-col-names.modified-on'), sortByKey: 'dateModified' }
+    ];
 
     constructor(
         protected readonly _injector: Injector,
@@ -52,7 +53,6 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
     }
 
     ngOnInit(): void {
-        this._configureTableColumns();
         this.loadDossierTemplatesData();
     }
 
@@ -74,31 +74,6 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
         });
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('dossier-templates-listing.table-col-names.name'),
-                sortByKey: 'searchKey',
-                template: this.nameTemplate
-            },
-            {
-                label: _('dossier-templates-listing.table-col-names.created-by'),
-                class: 'user-column',
-                template: this.userTemplate
-            },
-            {
-                label: _('dossier-templates-listing.table-col-names.created-on'),
-                sortByKey: 'dateAdded',
-                template: this.dateAddedTemplate
-            },
-            {
-                label: _('dossier-templates-listing.table-col-names.modified-on'),
-                sortByKey: 'dateModified',
-                template: this.dateModifiedTemplate
-            }
-        ];
-    }
-
     private async _deleteTemplates(templateIds: string[] = this.entitiesService.selected.map(d => d.dossierTemplateId)) {
         await this._dossierTemplateControllerService
             .deleteDossierTemplates(templateIds)
diff --git a/libs/common-ui b/libs/common-ui
index 551db967e..c0b445b06 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 551db967e2d747932579464f00e4e497c91dc628
+Subproject commit c0b445b06ed86a07c4b9aa1803b29b9384021d54

From 6c6a42b68b9c7c55ae48c74ce30ba75a9c7aec76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 1 Oct 2021 20:44:18 +0300
Subject: [PATCH 4/4] Refactor complete

---
 .../active-fields-listing.component.html      |  89 +++++++-------
 .../active-fields-listing.component.scss      |  28 ++---
 .../active-fields-listing.component.ts        |  80 ++++---------
 .../screens/audit/audit-screen.component.html |  34 +++---
 .../screens/audit/audit-screen.component.ts   |  36 ++----
 ...r-attributes-listing-screen.component.html |  63 +++++-----
 ...ier-attributes-listing-screen.component.ts |  33 +-----
 ...e-attributes-listing-screen.component.html | 109 ++++++++---------
 ...e-attributes-listing-screen.component.scss |   6 +-
 ...ile-attributes-listing-screen.component.ts |  75 +++---------
 .../user-listing-screen.component.html        |  67 +++++------
 .../user-listing-screen.component.scss        |   4 -
 .../user-listing-screen.component.ts          |  23 ++--
 ...t-dossier-deleted-documents.component.html |  72 ++++++-----
 ...t-dossier-deleted-documents.component.scss |   8 +-
 ...dit-dossier-deleted-documents.component.ts |  40 ++-----
 .../search-screen.component.html              | 112 +++++++++---------
 .../search-screen.component.scss              |  10 +-
 .../search-screen/search-screen.component.ts  |  29 ++---
 apps/red-ui/src/assets/i18n/en.json           |   2 +-
 20 files changed, 356 insertions(+), 564 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
index fba752dd7..dd8dbc600 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
@@ -1,5 +1,4 @@
 <iqser-table
-    [actionsTemplate]="actionsTemplate"
     [bulkActions]="bulkActions"
     [itemMouseEnterFn]="itemMouseEnterFn"
     [itemMouseLeaveFn]="itemMouseLeaveFn"
@@ -54,54 +53,50 @@
     </ng-container>
 </ng-template>
 
-<ng-template #actionsTemplate let-field="entity">
-    <div class="action-buttons">
-        <iqser-circle-button
-            (action)="field.primaryAttribute = false; toggleFieldActive.emit(field)"
-            [removeTooltip]="true"
-            [tooltip]="'file-attributes-csv-import.action.remove' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="red:trash"
-        ></iqser-circle-button>
-    </div>
-</ng-template>
+<ng-template #tableItemTemplate let-field="entity">
+    <div>
+        <div class="cell">
+            <iqser-editable-input
+                (save)="field.name = $event"
+                [buttonsType]="circleButtonTypes.dark"
+                [cancelTooltip]="'file-attributes-csv-import.action.cancel-edit-name' | translate"
+                [class]="'w-200'"
+                [editTooltip]="'file-attributes-csv-import.action.edit-name' | translate"
+                [saveTooltip]="'file-attributes-csv-import.action.save-name' | translate"
+                [value]="field.name"
+            ></iqser-editable-input>
+        </div>
 
-<ng-template #labelTemplate let-field="entity">
-    <div class="cell">
-        <iqser-editable-input
-            (save)="field.name = $event"
-            [buttonsType]="circleButtonTypes.dark"
-            [cancelTooltip]="'file-attributes-csv-import.action.cancel-edit-name' | translate"
-            [class]="'w-200'"
-            [editTooltip]="'file-attributes-csv-import.action.edit-name' | translate"
-            [saveTooltip]="'file-attributes-csv-import.action.save-name' | translate"
-            [value]="field.name"
-        ></iqser-editable-input>
-    </div>
-</ng-template>
+        <div class="cell">
+            <div class="iqser-input-group">
+                <mat-form-field class="no-label">
+                    <mat-select [(ngModel)]="field.type">
+                        <mat-option *ngFor="let type of typeOptions" [value]="type">
+                            {{ translations[type] | translate }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+        </div>
 
-<ng-template #typeTemplate let-field="entity">
-    <div class="cell">
-        <div class="iqser-input-group">
-            <mat-form-field class="no-label">
-                <mat-select [(ngModel)]="field.type">
-                    <mat-option *ngFor="let type of typeOptions" [value]="type">
-                        {{ translations[type] | translate }}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
+        <div class="cell center">
+            <mat-slide-toggle [(ngModel)]="field.readonly" color="primary"></mat-slide-toggle>
+        </div>
+
+        <div class="cell center">
+            <iqser-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></iqser-round-checkbox>
+        </div>
+
+        <div class="cell">
+            <div class="action-buttons">
+                <iqser-circle-button
+                    (action)="field.primaryAttribute = false; toggleFieldActive.emit(field)"
+                    [removeTooltip]="true"
+                    [tooltip]="'file-attributes-csv-import.action.remove' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
+            </div>
         </div>
     </div>
 </ng-template>
-
-<ng-template #readonlyTemplate let-field="entity">
-    <div class="cell center">
-        <mat-slide-toggle [(ngModel)]="field.readonly" color="primary"></mat-slide-toggle>
-    </div>
-</ng-template>
-
-<ng-template #primaryTemplate let-field="entity">
-    <div class="cell center">
-        <iqser-round-checkbox (click)="togglePrimary(field)" [active]="field.primaryAttribute"></iqser-round-checkbox>
-    </div>
-</ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
index d87b9c85d..053574610 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
@@ -30,19 +30,19 @@
 
     cdk-virtual-scroll-viewport {
         height: calc(100% - 80px) !important;
-
-        .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
-            iqser-editable-input:not(.editing) {
-                padding-left: 12px;
-            }
-
-            iqser-editable-input::ng-deep .edit-button {
-                display: none;
-            }
-
-            &:hover iqser-editable-input::ng-deep .edit-button {
-                display: block;
-            }
-        }
+    }
+}
+
+.cell {
+    iqser-editable-input:not(.editing) {
+        padding-left: 12px;
+    }
+
+    iqser-editable-input::ng-deep .edit-button {
+        display: none;
+    }
+
+    &:hover iqser-editable-input::ng-deep .edit-button {
+        display: block;
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
index b267c26a1..faa19b678 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
@@ -1,16 +1,4 @@
-import {
-    Component,
-    EventEmitter,
-    forwardRef,
-    Injector,
-    Input,
-    OnChanges,
-    OnInit,
-    Output,
-    SimpleChanges,
-    TemplateRef,
-    ViewChild
-} from '@angular/core';
+import { Component, EventEmitter, forwardRef, Injector, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { Field } from '../file-attributes-csv-import-dialog.component';
 import { FileAttributeConfigTypes } from '@redaction/red-ui-http';
 import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
@@ -23,16 +11,35 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
     styleUrls: ['./active-fields-listing.component.scss'],
     providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => ActiveFieldsListingComponent) }]
 })
-export class ActiveFieldsListingComponent extends ListingComponent<Field> implements OnChanges, OnInit {
+export class ActiveFieldsListingComponent extends ListingComponent<Field> implements OnChanges {
     readonly circleButtonTypes = CircleButtonTypes;
     readonly translations = fileAttributeTypesTranslations;
     readonly tableHeaderLabel = _('file-attributes-csv-import.table-header.title');
-    tableColumnConfigs: TableColumnConfig<Field>[];
+    readonly tableColumnConfigs: TableColumnConfig<Field>[] = [
+        {
+            label: _('file-attributes-csv-import.table-col-names.name'),
+            class: 'name',
+            width: 'minmax(0, 350px)'
+        },
+        {
+            label: _('file-attributes-csv-import.table-col-names.type'),
+            width: '150px'
+        },
+        {
+            label: _('file-attributes-csv-import.table-col-names.read-only'),
+            class: 'flex-center',
+            leftIcon: 'red:read-only',
+            width: 'auto'
+        },
+        {
+            label: _('file-attributes-csv-import.table-col-names.primary'),
+            class: 'flex-center',
+            rightIcon: 'red:status-info',
+            rightIconTooltip: _('file-attributes-csv-import.table-col-names.primary-info-tooltip'),
+            width: 'auto'
+        }
+    ];
     readonly typeOptions = Object.keys(FileAttributeConfigTypes);
-    @ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<never>;
-    @ViewChild('typeTemplate', { static: true }) typeTemplate: TemplateRef<never>;
-    @ViewChild('readonlyTemplate', { static: true }) readonlyTemplate: TemplateRef<never>;
-    @ViewChild('primaryTemplate', { static: true }) primaryTemplate: TemplateRef<never>;
     @Input() entities: Field[];
     @Output() readonly entitiesChange = new EventEmitter<Field[]>();
     @Output() readonly setHoveredColumn = new EventEmitter<string>();
@@ -42,10 +49,6 @@ export class ActiveFieldsListingComponent extends ListingComponent<Field> implem
         super(_injector);
     }
 
-    ngOnInit(): void {
-        this._configureTableColumns();
-    }
-
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.entities) {
             this.entitiesService.setEntities(this.entities);
@@ -80,35 +83,4 @@ export class ActiveFieldsListingComponent extends ListingComponent<Field> implem
 
     itemMouseEnterFn = (field: Field) => this.setHoveredColumn.emit(field.csvColumn);
     itemMouseLeaveFn = () => this.setHoveredColumn.emit();
-
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('file-attributes-csv-import.table-col-names.name'),
-                class: 'name',
-                template: this.labelTemplate,
-                width: 'minmax(0, 350px)'
-            },
-            {
-                label: _('file-attributes-csv-import.table-col-names.type'),
-                template: this.typeTemplate,
-                width: '150px'
-            },
-            {
-                label: _('file-attributes-csv-import.table-col-names.read-only'),
-                class: 'flex-center',
-                leftIcon: 'red:read-only',
-                template: this.readonlyTemplate,
-                width: 'auto'
-            },
-            {
-                label: _('file-attributes-csv-import.table-col-names.primary'),
-                class: 'flex-center',
-                rightIcon: 'red:status-info',
-                rightIconTooltip: _('file-attributes-csv-import.table-col-names.primary-info-tooltip'),
-                template: this.primaryTemplate,
-                width: 'auto'
-            }
-        ];
-    }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index 9311d73f9..0f97a58ed 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -97,24 +97,20 @@
     </div>
 </ng-template>
 
-<ng-template #messageTemplate let-log="entity">
-    <div class="cell">
-        {{ log.message }}
+<ng-template #tableItemTemplate let-log="entity">
+    <div>
+        <div class="cell">
+            {{ log.message }}
+        </div>
+
+        <div class="small-label cell">
+            {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
+        </div>
+
+        <div class="user-column cell">
+            <redaction-initials-avatar [userId]="log.userId" [withName]="true" size="small"></redaction-initials-avatar>
+        </div>
+
+        <div [translate]="translations[log.category]" class="cell"></div>
     </div>
 </ng-template>
-
-<ng-template #dateTemplate let-log="entity">
-    <div class="small-label cell">
-        {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
-    </div>
-</ng-template>
-
-<ng-template #userTemplate let-log="entity">
-    <div class="user-column cell">
-        <redaction-initials-avatar [userId]="log.userId" [withName]="true" size="small"></redaction-initials-avatar>
-    </div>
-</ng-template>
-
-<ng-template #categoryTemplate let-log="entity">
-    <div [translate]="translations[log.category]" class="cell"></div>
-</ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts
index 635d4b141..ad2c4c828 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, forwardRef, Injector, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { AuditControllerService, AuditResponse, AuditSearchRequest, IAudit } from '@redaction/red-ui-http';
 import { Moment } from 'moment';
@@ -22,15 +22,16 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnD
     readonly ALL_USERS = _('audit-screen.all-users');
     readonly translations = auditCategoriesTranslations;
     readonly currentUser = this._userService.currentUser;
-    @ViewChild('messageTemplate', { static: true }) messageTemplate: TemplateRef<unknown>;
-    @ViewChild('dateTemplate', { static: true }) dateTemplate: TemplateRef<unknown>;
-    @ViewChild('userTemplate', { static: true }) userTemplate: TemplateRef<unknown>;
-    @ViewChild('categoryTemplate', { static: true }) categoryTemplate: TemplateRef<unknown>;
     filterForm: FormGroup;
     categories: string[] = [];
     userIds: Set<string>;
     logs: AuditResponse;
-    tableColumnConfigs: TableColumnConfig<Audit>[];
+    readonly tableColumnConfigs: TableColumnConfig<Audit>[] = [
+        { label: _('audit-screen.table-col-names.message') },
+        { label: _('audit-screen.table-col-names.date') },
+        { label: _('audit-screen.table-col-names.user'), class: 'user-column' },
+        { label: _('audit-screen.table-col-names.category') }
+    ];
     readonly tableHeaderLabel = _('audit-screen.table-header.title');
     private _previousFrom: Moment;
     private _previousTo: Moment;
@@ -69,32 +70,9 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnD
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         await this._fetchData();
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('audit-screen.table-col-names.message'),
-                template: this.messageTemplate
-            },
-            {
-                label: _('audit-screen.table-col-names.date'),
-                template: this.dateTemplate
-            },
-            {
-                label: _('audit-screen.table-col-names.user'),
-                class: 'user-column',
-                template: this.userTemplate
-            },
-            {
-                label: _('audit-screen.table-col-names.category'),
-                template: this.categoryTemplate
-            }
-        ];
-    }
-
     private _updateDateFilters(value): boolean {
         if (applyIntervalConstraints(value, this._previousFrom, this._previousTo, this.filterForm, 'from', 'to')) {
             return true;
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index 9635022f1..def1dfab3 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -22,7 +22,6 @@
         <div class="content-container">
             <iqser-table
                 (noDataAction)="openAddEditAttributeDialog(null)"
-                [actionsTemplate]="actionsTemplate"
                 [bulkActions]="bulkActions"
                 [headerTemplate]="headerTemplate"
                 [itemSize]="50"
@@ -65,38 +64,36 @@
     </div>
 </ng-template>
 
-<ng-template #actionsTemplate let-attribute="entity">
-    <div *ngIf="currentUser.isAdmin" class="action-buttons">
-        <iqser-circle-button
-            (action)="openAddEditAttributeDialog($event, attribute)"
-            [tooltip]="'dossier-attributes-listing.action.edit' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="iqser:edit"
-        ></iqser-circle-button>
+<ng-template #tableItemTemplate let-attribute="entity">
+    <div>
+        <div class="cell">
+            {{ attribute.label }}
+        </div>
 
-        <iqser-circle-button
-            (action)="openConfirmDeleteAttributeDialog($event, attribute)"
-            [tooltip]="'dossier-attributes-listing.action.delete' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="red:trash"
-        ></iqser-circle-button>
-    </div>
-</ng-template>
-
-<ng-template #labelTemplate let-attribute="entity">
-    <div class="cell">
-        {{ attribute.label }}
-    </div>
-</ng-template>
-
-<ng-template #placeholderTemplate let-attribute="entity">
-    <div class="cell small-label">
-        {{ attribute.placeholder }}
-    </div>
-</ng-template>
-
-<ng-template #typeTemplate let-attribute="entity">
-    <div class="cell small-label">
-        {{ translations[attribute.type] | translate }}
+        <div class="cell small-label">
+            {{ attribute.placeholder }}
+        </div>
+
+        <div class="cell small-label">
+            {{ translations[attribute.type] | translate }}
+        </div>
+
+        <div class="cell">
+            <div *ngIf="currentUser.isAdmin" class="action-buttons">
+                <iqser-circle-button
+                    (action)="openAddEditAttributeDialog($event, attribute)"
+                    [tooltip]="'dossier-attributes-listing.action.edit' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:edit"
+                ></iqser-circle-button>
+
+                <iqser-circle-button
+                    (action)="openConfirmDeleteAttributeDialog($event, attribute)"
+                    [tooltip]="'dossier-attributes-listing.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
+            </div>
+        </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
index 09cd2466f..d087bb15a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, forwardRef, Injector, OnInit } from '@angular/core';
 import {
     CircleButtonTypes,
     DefaultListingServices,
@@ -31,10 +31,11 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
     readonly currentUser = this._userService.currentUser;
     readonly translations = dossierAttributeTypesTranslations;
     readonly tableHeaderLabel = _('dossier-attributes-listing.table-header.title');
-    tableColumnConfigs: TableColumnConfig<DossierAttributeConfig>[];
-    @ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<never>;
-    @ViewChild('placeholderTemplate', { static: true }) placeholderTemplate: TemplateRef<never>;
-    @ViewChild('typeTemplate', { static: true }) typeTemplate: TemplateRef<never>;
+    readonly tableColumnConfigs: TableColumnConfig<DossierAttributeConfig>[] = [
+        { label: _('dossier-attributes-listing.table-col-names.label'), sortByKey: 'label', width: '2fr' },
+        { label: _('dossier-attributes-listing.table-col-names.placeholder'), width: '2fr' },
+        { label: _('dossier-attributes-listing.table-col-names.type'), sortByKey: 'type' }
+    ];
 
     constructor(
         protected readonly _injector: Injector,
@@ -50,7 +51,6 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         await this._loadData();
     }
 
@@ -75,27 +75,6 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
         );
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('dossier-attributes-listing.table-col-names.label'),
-                sortByKey: 'label',
-                width: '2fr',
-                template: this.labelTemplate
-            },
-            {
-                label: _('dossier-attributes-listing.table-col-names.placeholder'),
-                width: '2fr',
-                template: this.placeholderTemplate
-            },
-            {
-                label: _('dossier-attributes-listing.table-col-names.type'),
-                sortByKey: 'type',
-                template: this.typeTemplate
-            }
-        ];
-    }
-
     private async _loadData() {
         this._loadingService.start();
         const attributes = await this._dossierAttributesService.getConfig();
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index ce9844247..61635162f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -21,7 +21,6 @@
 
         <div class="content-container">
             <iqser-table
-                [actionsTemplate]="actionsTemplate"
                 [bulkActions]="bulkActions"
                 [headerTemplate]="headerTemplate"
                 [itemSize]="80"
@@ -75,64 +74,54 @@
     </div>
 </ng-template>
 
-<ng-template #actionsTemplate let-attribute="entity">
-    <div *ngIf="currentUser.isAdmin" class="action-buttons">
-        <iqser-circle-button
-            (action)="openAddEditAttributeDialog($event, attribute)"
-            [tooltip]="'file-attributes-listing.action.edit' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="iqser:edit"
-        ></iqser-circle-button>
-        <iqser-circle-button
-            (action)="openConfirmDeleteAttributeDialog($event, attribute)"
-            [tooltip]="'file-attributes-listing.action.delete' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="red:trash"
-        ></iqser-circle-button>
-    </div>
-</ng-template>
-
-<ng-template #labelTemplate let-attribute="entity">
-    <div class="label cell">
-        <span>{{ attribute.label }}</span>
-    </div>
-</ng-template>
-
-<ng-template #typeTemplate let-attribute="entity">
-    <div [translate]="translations[attribute.type]" class="small-label cell"></div>
-</ng-template>
-
-<ng-template #readonlyTemplate let-attribute="entity">
-    <div class="center read-only cell">
-        <mat-icon
-            *ngIf="!attribute.editable"
-            [matTooltip]="'file-attributes-listing.read-only' | translate"
-            matTooltipPosition="above"
-            svgIcon="red:read-only"
-        ></mat-icon>
-    </div>
-</ng-template>
-
-<ng-template #csvColumnHeaderTemplate let-attribute="entity">
-    <div class="small-label cell">
-        {{ attribute.csvColumnHeader }}
-    </div>
-</ng-template>
-
-<ng-template #filterableTemplate let-attribute="entity">
-    <div class="center cell">
-        <iqser-round-checkbox *ngIf="attribute.filterable" [active]="true" [size]="18"></iqser-round-checkbox>
-    </div>
-</ng-template>
-
-<ng-template #displayedInFileListTemplate let-attribute="entity">
-    <div class="center cell">
-        <iqser-round-checkbox *ngIf="attribute.displayedInFileList" [active]="true" [size]="18"></iqser-round-checkbox>
-    </div>
-</ng-template>
-
-<ng-template #primaryAttributeTemplate let-attribute="entity">
-    <div class="center cell">
-        <iqser-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></iqser-round-checkbox>
+<ng-template #tableItemTemplate let-attribute="entity">
+    <div>
+        <div class="label cell">
+            <span>{{ attribute.label }}</span>
+        </div>
+
+        <div [translate]="translations[attribute.type]" class="small-label cell"></div>
+
+        <div class="center read-only cell">
+            <mat-icon
+                *ngIf="!attribute.editable"
+                [matTooltip]="'file-attributes-listing.read-only' | translate"
+                matTooltipPosition="above"
+                svgIcon="red:read-only"
+            ></mat-icon>
+        </div>
+
+        <div class="small-label cell">
+            {{ attribute.csvColumnHeader }}
+        </div>
+
+        <div class="center cell">
+            <iqser-round-checkbox *ngIf="attribute.filterable" [active]="true" [size]="18"></iqser-round-checkbox>
+        </div>
+
+        <div class="center cell">
+            <iqser-round-checkbox *ngIf="attribute.displayedInFileList" [active]="true" [size]="18"></iqser-round-checkbox>
+        </div>
+
+        <div class="center cell">
+            <iqser-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></iqser-round-checkbox>
+        </div>
+
+        <div class="cell">
+            <div *ngIf="currentUser.isAdmin" class="action-buttons">
+                <iqser-circle-button
+                    (action)="openAddEditAttributeDialog($event, attribute)"
+                    [tooltip]="'file-attributes-listing.action.edit' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:edit"
+                ></iqser-circle-button>
+                <iqser-circle-button
+                    (action)="openConfirmDeleteAttributeDialog($event, attribute)"
+                    [tooltip]="'file-attributes-listing.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
+            </div>
+        </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
index 6b4d12879..14a44a51a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
@@ -1,10 +1,6 @@
 @use 'common-mixins';
 
-:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
-    &.center {
-        align-items: center;
-    }
-
+.cell {
     &.label span {
         @include common-mixins.line-clamp(1);
     }
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
index 70f0e6f2d..0a277efda 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
@@ -1,14 +1,4 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    forwardRef,
-    Injector,
-    OnDestroy,
-    OnInit,
-    TemplateRef,
-    ViewChild
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FileAttributesConfig, IFileAttributeConfig } from '@redaction/red-ui-http';
 import { AppStateService } from '@state/app-state.service';
 import { ActivatedRoute } from '@angular/router';
@@ -42,14 +32,20 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
     readonly currentUser = this._userService.currentUser;
     readonly translations = fileAttributeTypesTranslations;
     readonly tableHeaderLabel = _('file-attributes-listing.table-header.title');
-    tableColumnConfigs: TableColumnConfig<FileAttributeConfig>[];
-    @ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<unknown>;
-    @ViewChild('typeTemplate', { static: true }) typeTemplate: TemplateRef<unknown>;
-    @ViewChild('readonlyTemplate', { static: true }) readonlyTemplate: TemplateRef<unknown>;
-    @ViewChild('csvColumnHeaderTemplate', { static: true }) csvColumnHeaderTemplate: TemplateRef<unknown>;
-    @ViewChild('filterableTemplate', { static: true }) filterableTemplate: TemplateRef<unknown>;
-    @ViewChild('displayedInFileListTemplate', { static: true }) displayedInFileListTemplate: TemplateRef<unknown>;
-    @ViewChild('primaryAttributeTemplate', { static: true }) primaryAttributeTemplate: TemplateRef<unknown>;
+    readonly tableColumnConfigs: TableColumnConfig<FileAttributeConfig>[] = [
+        { label: _('file-attributes-listing.table-col-names.name'), sortByKey: 'searchKey', width: '2fr' },
+        { label: _('file-attributes-listing.table-col-names.type'), sortByKey: 'type' },
+        { label: _('file-attributes-listing.table-col-names.read-only'), sortByKey: 'editable', class: 'flex-center' },
+        { label: _('file-attributes-listing.table-col-names.csv-column') },
+        { label: _('file-attributes-listing.table-col-names.filterable'), class: 'flex-center' },
+        { label: _('file-attributes-listing.table-col-names.displayed-in-file-list'), class: 'flex-center' },
+        {
+            label: _('file-attributes-listing.table-col-names.primary'),
+            class: 'flex-center',
+            rightIcon: 'red:status-info',
+            rightIconTooltip: _('file-attributes-listing.table-col-names.primary-info-tooltip')
+        }
+    ];
     private _existingConfiguration: FileAttributesConfig;
     @ViewChild('fileInput') private _fileInput: ElementRef;
 
@@ -67,7 +63,6 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         await this._loadData();
     }
 
@@ -123,46 +118,6 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
         );
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('file-attributes-listing.table-col-names.name'),
-                sortByKey: 'searchKey',
-                width: '2fr',
-                template: this.labelTemplate
-            },
-            {
-                label: _('file-attributes-listing.table-col-names.type'),
-                sortByKey: 'type',
-                template: this.typeTemplate
-            },
-            {
-                label: _('file-attributes-listing.table-col-names.read-only'),
-                sortByKey: 'editable',
-                class: 'flex-center',
-                template: this.readonlyTemplate
-            },
-            { label: _('file-attributes-listing.table-col-names.csv-column'), template: this.csvColumnHeaderTemplate },
-            {
-                label: _('file-attributes-listing.table-col-names.filterable'),
-                class: 'flex-center',
-                template: this.filterableTemplate
-            },
-            {
-                label: _('file-attributes-listing.table-col-names.displayed-in-file-list'),
-                class: 'flex-center',
-                template: this.displayedInFileListTemplate
-            },
-            {
-                label: _('file-attributes-listing.table-col-names.primary'),
-                class: 'flex-center',
-                rightIcon: 'red:status-info',
-                rightIconTooltip: _('file-attributes-listing.table-col-names.primary-info-tooltip'),
-                template: this.primaryAttributeTemplate
-            }
-        ];
-    }
-
     private async _loadData() {
         this._loadingService.start();
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index a050c77b9..a2b46998f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -33,7 +33,6 @@
         <div class="red-content-inner">
             <div [class.extended]="collapsedDetails" class="content-container">
                 <iqser-table
-                    [actionsTemplate]="actionsTemplate"
                     [bulkActions]="bulkActions"
                     [itemSize]="80"
                     [noMatchText]="'user-listing.no-match.title' | translate"
@@ -66,40 +65,36 @@
     ></iqser-circle-button>
 </ng-template>
 
-<ng-template #nameTemplate let-user="entity">
-    <div class="cell">
-        <redaction-initials-avatar [showYou]="true" [userId]="user.id" [withName]="true"></redaction-initials-avatar>
-    </div>
-</ng-template>
-
-<ng-template #emailTemplate let-user="entity">
-    <div class="small-label cell">{{ user.email || '-' }}</div>
-</ng-template>
-
-<ng-template #activeTemplate let-user="entity">
-    <div class="center cell">
-        <mat-slide-toggle (toggleChange)="toggleActive(user)" [checked]="user.isActive" color="primary"></mat-slide-toggle>
-    </div>
-</ng-template>
-
-<ng-template #rolesTemplate let-user="entity">
-    <div class="small-label cell">{{ getDisplayRoles(user) }}</div>
-</ng-template>
-
-<ng-template #actionsTemplate let-user="entity">
-    <div class="action-buttons">
-        <iqser-circle-button
-            (action)="openAddEditUserDialog($event, user)"
-            [tooltip]="'user-listing.action.edit' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="iqser:edit"
-        ></iqser-circle-button>
-        <iqser-circle-button
-            (action)="openDeleteUsersDialog([user], $event)"
-            [disabled]="user.id === userService.currentUser.id"
-            [tooltip]="'user-listing.action.delete' | translate"
-            [type]="circleButtonTypes.dark"
-            icon="red:trash"
-        ></iqser-circle-button>
+<ng-template #tableItemTemplate let-user="entity">
+    <div>
+        <div class="cell">
+            <redaction-initials-avatar [showYou]="true" [userId]="user.id" [withName]="true"></redaction-initials-avatar>
+        </div>
+
+        <div class="small-label cell">{{ user.email || '-' }}</div>
+
+        <div class="center cell">
+            <mat-slide-toggle (toggleChange)="toggleActive(user)" [checked]="user.isActive" color="primary"></mat-slide-toggle>
+        </div>
+
+        <div class="small-label cell">{{ getDisplayRoles(user) }}</div>
+
+        <div class="cell">
+            <div class="action-buttons">
+                <iqser-circle-button
+                    (action)="openAddEditUserDialog($event, user)"
+                    [tooltip]="'user-listing.action.edit' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="iqser:edit"
+                ></iqser-circle-button>
+                <iqser-circle-button
+                    (action)="openDeleteUsersDialog([user], $event)"
+                    [disabled]="user.id === userService.currentUser.id"
+                    [tooltip]="'user-listing.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
+            </div>
+        </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
index 5a09cdf01..097d651bc 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
@@ -1,7 +1,3 @@
-:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell.center {
-    align-items: center;
-}
-
 .right-container {
     display: flex;
     width: 353px;
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
index fa92bdd2f..ff0e8f244 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Injector, OnInit, QueryList, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
+import { Component, forwardRef, Injector, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { UserService } from '@services/user.service';
 import { UserControllerService } from '@redaction/red-ui-http';
 import { AdminDialogService } from '../../services/admin-dialog.service';
@@ -32,13 +32,14 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
     readonly currentUser = this.userService.currentUser;
     readonly canDeleteSelected$ = this._canDeleteSelected$;
     readonly tableHeaderLabel = _('user-listing.table-header.title');
-    tableColumnConfigs: TableColumnConfig<User>[];
+    readonly tableColumnConfigs: TableColumnConfig<User>[] = [
+        { label: _('user-listing.table-col-names.name'), width: '2fr' },
+        { label: _('user-listing.table-col-names.email') },
+        { label: _('user-listing.table-col-names.active'), class: 'flex-center' },
+        { label: _('user-listing.table-col-names.roles') }
+    ];
     collapsedDetails = false;
     chartData: DoughnutChartConfig[] = [];
-    @ViewChild('nameTemplate', { static: true }) nameTemplate: TemplateRef<never>;
-    @ViewChild('emailTemplate', { static: true }) emailTemplate: TemplateRef<never>;
-    @ViewChild('activeTemplate', { static: true }) activeTemplate: TemplateRef<never>;
-    @ViewChild('rolesTemplate', { static: true }) rolesTemplate: TemplateRef<never>;
     @ViewChildren(InitialsAvatarComponent)
     private readonly _avatars: QueryList<InitialsAvatarComponent>;
 
@@ -60,7 +61,6 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         await this._loadData();
     }
 
@@ -96,15 +96,6 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
         this.openDeleteUsersDialog(this.entitiesService.all.filter(u => this.isSelected(u)));
     }
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            { label: _('user-listing.table-col-names.name'), template: this.nameTemplate, width: '2fr' },
-            { label: _('user-listing.table-col-names.email'), template: this.emailTemplate },
-            { label: _('user-listing.table-col-names.active'), class: 'flex-center', template: this.activeTemplate },
-            { label: _('user-listing.table-col-names.roles'), template: this.rolesTemplate }
-        ];
-    }
-
     private async _loadData() {
         this.entitiesService.setEntities(await this.userService.loadAllUsers());
         await this.userService.loadAllUsers();
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html
index 019278fc4..81c1f8810 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.html
@@ -34,45 +34,41 @@
     ></iqser-circle-button>
 </ng-template>
 
-<ng-template #filenameTemplate let-file="entity">
-    <div class="cell filename">
-        <span>{{ file.filename }}</span>
-    </div>
-</ng-template>
+<ng-template #tableItemTemplate let-file="entity">
+    <div>
+        <div class="cell filename">
+            <span>{{ file.filename }}</span>
+        </div>
 
-<ng-template #pagesTemplate let-file="entity">
-    <div class="cell stats-subtitle">
-        <div class="small-label">
-            <mat-icon svgIcon="red:pages"></mat-icon>
-            {{ file.numberOfPages }}
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #deletedDateTemplate let-file="entity">
-    <div class="cell">
-        <span class="small-label">{{ file.softDeleted | date: 'exactDate' }}</span>
-    </div>
-</ng-template>
-
-<ng-template #restoreDateTemplate let-file="entity">
-    <div class="cell">
-        <div class="small-label">{{ file.restoreDate | date: 'timeFromNow' }}</div>
-        <div class="action-buttons">
-            <iqser-circle-button
-                (action)="restore([file])"
-                *ngIf="file.canRestore"
-                [tooltip]="'edit-dossier-dialog.deleted-documents.action.restore' | translate"
-                [type]="circleButtonTypes.dark"
-                icon="red:put-back"
-            ></iqser-circle-button>
-
-            <iqser-circle-button
-                (action)="hardDelete([file])"
-                [tooltip]="'edit-dossier-dialog.deleted-documents.action.delete' | translate"
-                [type]="circleButtonTypes.dark"
-                icon="red:trash"
-            ></iqser-circle-button>
+        <div class="cell stats-subtitle">
+            <div class="small-label">
+                <mat-icon svgIcon="red:pages"></mat-icon>
+                {{ file.numberOfPages }}
+            </div>
+        </div>
+
+        <div class="cell">
+            <span class="small-label">{{ file.softDeleted | date: 'exactDate' }}</span>
+        </div>
+
+        <div class="cell">
+            <div class="small-label">{{ file.restoreDate | date: 'timeFromNow' }}</div>
+            <div class="action-buttons">
+                <iqser-circle-button
+                    (action)="restore([file])"
+                    *ngIf="file.canRestore"
+                    [tooltip]="'edit-dossier-dialog.deleted-documents.action.restore' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:put-back"
+                ></iqser-circle-button>
+
+                <iqser-circle-button
+                    (action)="hardDelete([file])"
+                    [tooltip]="'edit-dossier-dialog.deleted-documents.action.delete' | translate"
+                    [type]="circleButtonTypes.dark"
+                    icon="red:trash"
+                ></iqser-circle-button>
+            </div>
         </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss
index d7bf4a0af..305ab6377 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.scss
@@ -9,8 +9,8 @@
 
 :host ::ng-deep iqser-table cdk-virtual-scroll-viewport {
     height: calc(100% - 81px) !important;
-
-    .cdk-virtual-scroll-content-wrapper .table-item > div.cell.filename span {
-        @include common-mixins.line-clamp(1);
-    }
+}
+
+.cell.filename span {
+    @include common-mixins.line-clamp(1);
 }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
index 920cff75e..f408458d9 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, forwardRef, Injector, Input, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import { Component, EventEmitter, forwardRef, Injector, Input, OnInit, Output } from '@angular/core';
 import { EditDossierSectionInterface } from '../edit-dossier-section.interface';
 import { Dossier } from '@state/model/dossier';
 import {
@@ -42,14 +42,15 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
     readonly changed = false;
     readonly canRestoreSelected$ = this._canRestoreSelected$;
     disabled: boolean;
-    tableColumnConfigs: TableColumnConfig<FileListItem>[];
+    readonly tableColumnConfigs: TableColumnConfig<FileListItem>[] = [
+        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.name'), width: '3fr' },
+        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.pages') },
+        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.deleted-on'), sortByKey: 'softDeleted', width: '2fr' },
+        { label: _('edit-dossier-dialog.deleted-documents.table-col-names.time-to-restore'), sortByKey: 'softDeleted', width: '2fr' }
+    ];
     readonly tableHeaderLabel = _('edit-dossier-dialog.deleted-documents.table-header.label');
     readonly circleButtonTypes = CircleButtonTypes;
     readonly deleteRetentionHours = this._configService.values.DELETE_RETENTION_HOURS;
-    @ViewChild('filenameTemplate', { static: true }) filenameTemplate: TemplateRef<never>;
-    @ViewChild('pagesTemplate', { static: true }) pagesTemplate: TemplateRef<never>;
-    @ViewChild('deletedDateTemplate', { static: true }) deletedDateTemplate: TemplateRef<never>;
-    @ViewChild('restoreDateTemplate', { static: true }) restoreDateTemplate: TemplateRef<never>;
 
     constructor(
         protected readonly _injector: Injector,
@@ -89,7 +90,6 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
     }
 
     async ngOnInit() {
-        this._configureTableColumns();
         this._loadingService.start();
         const files = await this._filesService.getDeletedFilesFor(this.dossier.id).toPromise();
         this.entitiesService.setEntities(this._toListItems(files));
@@ -110,32 +110,6 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
 
     disabledFn = (file: FileListItem) => !file.canRestore;
 
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            {
-                label: _('edit-dossier-dialog.deleted-documents.table-col-names.name'),
-                template: this.filenameTemplate,
-                width: '3fr'
-            },
-            {
-                label: _('edit-dossier-dialog.deleted-documents.table-col-names.pages'),
-                template: this.pagesTemplate
-            },
-            {
-                label: _('edit-dossier-dialog.deleted-documents.table-col-names.deleted-on'),
-                template: this.deletedDateTemplate,
-                sortByKey: 'softDeleted',
-                width: '2fr'
-            },
-            {
-                label: _('edit-dossier-dialog.deleted-documents.table-col-names.time-to-restore'),
-                template: this.restoreDateTemplate,
-                sortByKey: 'softDeleted',
-                width: '2fr'
-            }
-        ];
-    }
-
     private async _restore(files: FileListItem[]): Promise<void> {
         const fileIds = files.map(f => f.fileId);
         await this._fileManagementController.restoreFiles(fileIds, this.dossier.id).toPromise();
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
index f8c54b661..01c25929a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
@@ -21,66 +21,64 @@
     </div>
 </section>
 
-<ng-template #filenameTemplate let-item="entity">
-    <div class="cell filename">
-        <div [matTooltip]="item.filename" class="table-item-title heading" matTooltipPosition="above">
-            <span
-                *ngIf="item.highlights.filename; else defaultFilename"
-                [innerHTML]="item.highlights.filename[0]"
-                class="highlights"
-            ></span>
-            <ng-template #defaultFilename>{{ item.filename }}</ng-template>
-        </div>
-
-        <ng-container *ngIf="item.highlights['sections.text'] as highlights">
-            <div *ngIf="highlights.length > 0" class="small-label">
-                <span [innerHTML]="highlights[0]" class="highlights"></span>
+<ng-template #tableItemTemplate let-item="entity">
+    <div>
+        <div class="cell filename">
+            <div [matTooltip]="item.filename" class="table-item-title heading" matTooltipPosition="above">
+                <span
+                    *ngIf="item.highlights.filename; else defaultFilename"
+                    [innerHTML]="item.highlights.filename[0]"
+                    class="highlights"
+                ></span>
+                <ng-template #defaultFilename>{{ item.filename }}</ng-template>
             </div>
-            <div *ngIf="highlights.length > 1" class="small-label">
-                <span [innerHTML]="highlights[1]" class="highlights"></span>
+
+            <ng-container *ngIf="item.highlights['sections.text'] as highlights">
+                <div *ngIf="highlights.length > 0" class="small-label">
+                    <span [innerHTML]="highlights[0]" class="highlights"></span>
+                </div>
+                <div *ngIf="highlights.length > 1" class="small-label">
+                    <span [innerHTML]="highlights[1]" class="highlights"></span>
+                </div>
+            </ng-container>
+
+            <div *ngIf="item.unmatched?.length && item.unmatched as unmatched" class="small-label">
+                <span>
+                    {{ 'search-screen.missing' | translate }}:<span *ngFor="let term of unmatched"
+                        >&nbsp;<s>{{ term }}</s></span
+                    >.&nbsp;{{ 'search-screen.must-contain' | translate }}:
+                    <span
+                        (click)="$event.stopPropagation(); updateNavigation(search$.getValue().query, term)"
+                        *ngFor="let term of unmatched"
+                        >&nbsp;<u>{{ term }}</u></span
+                    >
+                </span>
             </div>
-        </ng-container>
+        </div>
 
-        <div *ngIf="item.unmatched?.length && item.unmatched as unmatched" class="small-label">
-            <span>
-                {{ 'search-screen.missing' | translate }}:<span *ngFor="let term of unmatched"
-                    >&nbsp;<s>{{ term }}</s></span
-                >.&nbsp;{{ 'search-screen.must-contain' | translate }}:
-                <span (click)="$event.stopPropagation(); updateNavigation(search$.getValue().query, term)" *ngFor="let term of unmatched"
-                    >&nbsp;<u>{{ term }}</u></span
-                >
-            </span>
-        </div>
-    </div>
-</ng-template>
-
-<ng-template #statusTemplate let-item="entity">
-    <div class="cell">
-        <iqser-status-bar
-            [configs]="[
-                {
-                    color: item.status,
-                    label: fileStatusTranslations[item.status] | translate,
-                    length: 1,
-                    cssClass: 'all-caps-label'
-                }
-            ]"
-            [small]="true"
-        ></iqser-status-bar>
-    </div>
-</ng-template>
-
-<ng-template #dossierTemplate let-item="entity">
-    <div class="cell small-label">
-        {{ item.dossierName }}
-    </div>
-</ng-template>
-
-<ng-template #pagesTemplate let-item="entity">
-    <div class="cell small-label stats-subtitle">
-        <div>
-            <mat-icon svgIcon="red:pages"></mat-icon>
-            {{ item.numberOfPages }}
+        <div class="cell">
+            <iqser-status-bar
+                [configs]="[
+                    {
+                        color: item.status,
+                        label: fileStatusTranslations[item.status] | translate,
+                        length: 1,
+                        cssClass: 'all-caps-label'
+                    }
+                ]"
+                [small]="true"
+            ></iqser-status-bar>
+        </div>
+
+        <div class="cell small-label">
+            {{ item.dossierName }}
+        </div>
+
+        <div class="cell small-label stats-subtitle">
+            <div>
+                <mat-icon svgIcon="red:pages"></mat-icon>
+                {{ item.numberOfPages }}
+            </div>
         </div>
     </div>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss
index da9d39c30..25f846e32 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.scss
@@ -1,11 +1,9 @@
 @use 'common-mixins';
 
-:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
-    .highlights {
-        @include common-mixins.line-clamp(1);
+.cell .highlights::ng-deep {
+    @include common-mixins.line-clamp(1);
 
-        em {
-            background-color: #fffcc4;
-        }
+    em {
+        background-color: #fffcc4;
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
index 7ffcb6273..bba7db62b 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, forwardRef, Injector, OnDestroy } from '@angular/core';
 import {
     DefaultListingServices,
     IListable,
@@ -40,17 +40,17 @@ interface SearchInput {
     styleUrls: ['./search-screen.component.scss'],
     providers: [...DefaultListingServices, { provide: ListingComponent, useExisting: forwardRef(() => SearchScreenComponent) }]
 })
-export class SearchScreenComponent extends ListingComponent<ListItem> implements OnDestroy, OnInit {
+export class SearchScreenComponent extends ListingComponent<ListItem> implements OnDestroy {
     readonly fileStatusTranslations = fileStatusTranslations;
     readonly searchPositions = SearchPositions;
 
-    @ViewChild('filenameTemplate', { static: true }) readonly filenameTemplate: TemplateRef<unknown>;
-    @ViewChild('statusTemplate', { static: true }) readonly statusTemplate: TemplateRef<unknown>;
-    @ViewChild('dossierTemplate', { static: true }) readonly dossierTemplate: TemplateRef<unknown>;
-    @ViewChild('pagesTemplate', { static: true }) readonly pagesTemplate: TemplateRef<unknown>;
-
     readonly tableHeaderLabel = _('search-screen.table-header');
-    tableColumnConfigs: TableColumnConfig<ListItem>[];
+    readonly tableColumnConfigs: TableColumnConfig<ListItem>[] = [
+        { label: _('search-screen.cols.document'), width: '2fr' },
+        { label: _('search-screen.cols.status') },
+        { label: _('search-screen.cols.dossier') },
+        { label: _('search-screen.cols.pages'), width: 'auto' }
+    ];
     readonly search$ = new BehaviorSubject<SearchInput>(null);
     readonly searchResults$: Observable<ListItem[]> = this.search$.asObservable().pipe(
         switchMap(query => this._search(query)),
@@ -108,19 +108,6 @@ export class SearchScreenComponent extends ListingComponent<ListItem> implements
         this._router.navigate([], { queryParams }).then();
     }
 
-    ngOnInit(): void {
-        this._configureTableColumns();
-    }
-
-    private _configureTableColumns() {
-        this.tableColumnConfigs = [
-            { label: _('search-screen.cols.document'), template: this.filenameTemplate, width: '2fr' },
-            { label: _('search-screen.cols.status'), template: this.statusTemplate },
-            { label: _('search-screen.cols.dossier'), template: this.dossierTemplate },
-            { label: _('search-screen.cols.pages'), template: this.pagesTemplate, width: 'auto' }
-        ];
-    }
-
     private _search(searchInput: SearchInput): Observable<SearchResult> {
         return this._searchControllerService.search({
             dossierIds: [...searchInput.dossierIds],
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index ebc96a5b5..3bc887fcb 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1375,7 +1375,7 @@
     "table-header": "{length} search {length, plural, one{result} other{results}}"
   },
   "search": {
-    "entire-platform": "accross all dossiers",
+    "entire-platform": "across all dossiers",
     "placeholder": "Search documents...",
     "this-dossier": "in this dossier"
   },