From 3d7dca1f43d735bf93434ab80ce0e3def597ad4c Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Mon, 10 Jun 2024 20:35:03 +0300
Subject: [PATCH 01/17] RED-9321: refactored submodules of admin to standalone
 components.

---
 .../app/modules/admin/admin-routing.module.ts | 388 +++++++++---------
 .../default-colors-screen.component.html      |  29 +-
 ...ier-attributes-listing-screen.component.ts |  21 +-
 .../dossier-attributes-listing.module.ts      |  38 --
 .../table-item/table-item.component.ts        |   6 +
 ...add-edit-dossier-state-dialog.component.ts |  10 +-
 ...m-delete-dossier-state-dialog.component.ts |  22 +-
 ...dossier-states-listing-screen.component.ts |  20 +-
 .../dossier-states-listing.module.ts          |  62 ---
 .../dossier-states-table-item.component.ts    |   7 +-
 ...sier-templates-listing-screen.component.ts |  25 +-
 .../dossier-templates-listing.module.ts       |  39 --
 .../table-item/table-item.component.ts        |   8 +
 .../entities-listing-screen.component.html    |  53 +--
 .../active-fields-listing.component.ts        |  37 +-
 ...-attributes-csv-import-dialog.component.ts |  36 +-
 ...ile-attributes-csv-import-dialog.module.ts |  47 ---
 ...ile-attributes-listing-screen.component.ts |  27 +-
 .../file-attributes-listing.module.ts         |  43 --
 .../general-config-screen.component.ts        |   2 +-
 .../dossier-template-details.component.ts     |   6 +
 .../dossier-template-info-screen.component.ts |  64 ++-
 .../info/dossier-template-info.module.ts      |  36 --
 ...add-edit-justification-dialog.component.ts |   7 +-
 .../justifications-screen.component.ts        |  31 +-
 .../justifications/justifications.module.ts   |  28 --
 .../table-item/table-item.component.ts        |   6 +
 .../components/chart/chart.component.ts       |   4 +
 ...cense-analysis-capacity-usage.component.ts |   5 +
 .../license-page-usage.component.ts           |   6 +-
 .../license-retention-capacity.component.ts   |   8 +-
 .../license-select.component.ts               |  19 +
 .../license-screen.component.ts               |  23 +-
 .../admin/screens/license/license.module.ts   |  51 ---
 .../permissions-screen.component.ts           |   8 +-
 .../screens/permissions/permissions.module.ts |  15 -
 .../reports-screen.component.ts               |  16 +-
 .../admin/screens/reports/reports.module.ts   |  22 -
 .../rules-screen/rules-screen.component.ts    |  12 +-
 .../admin/screens/rules/rules.module.ts       |  26 --
 40 files changed, 593 insertions(+), 720 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/justifications/justifications.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/license/license.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/permissions/permissions.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/rules/rules.module.ts

diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
index 3d4098c35..4114c2532 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { inject, NgModule } from '@angular/core';
 import { CompositeRouteGuard, IqserPermissionsGuard, IqserRoutes } from '@iqser/common-ui';
 import { RedRoleGuard } from '@users/red-role.guard';
 import { EntitiesListingScreenComponent } from './screens/entities-listing/entities-listing-screen.component';
@@ -20,148 +20,157 @@ import { PermissionsGuard } from '@guards/permissions-guard';
 import { Roles } from '@users/roles';
 import { IqserAuthGuard } from '@iqser/common-ui/lib/users';
 import { ComponentMappingsScreenComponent } from './screens/component-mappings/component-mappings-screen.component';
+import { LicenseService } from '@services/license.service';
+
+const entityRoutes: IqserRoutes = [
+    {
+        path: '',
+        component: BaseDossierTemplateScreenComponent,
+        children: [{ path: '', component: EntitiesListingScreenComponent }],
+        canActivate: [CompositeRouteGuard],
+        data: {
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
+        },
+    },
+    {
+        path: `:${ENTITY_TYPE}`,
+        loadChildren: () => import('./screens/entities/entities.module').then(m => m.EntitiesModule),
+        component: BaseEntityScreenComponent,
+        canActivate: [CompositeRouteGuard, entityExistsGuard()],
+        data: {
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
+        },
+    },
+];
 
 const dossierTemplateIdRoutes: IqserRoutes = [
     {
-        path: 'info',
-        component: BaseDossierTemplateScreenComponent,
-        loadChildren: () => import('./screens/info/dossier-template-info.module').then(m => m.DossierTemplateInfoModule),
+        path: 'entities',
+        children: entityRoutes,
     },
     {
-        path: 'entities',
+        path: '',
+        component: BaseDossierTemplateScreenComponent,
         children: [
             {
-                path: '',
-                component: EntitiesListingScreenComponent,
+                path: 'info',
+                loadComponent: () => import('./screens/info/dossier-template-info-screen/dossier-template-info-screen.component'),
+                canDeactivate: [PendingChangesGuard],
+            },
+            {
+                path: 'entity-rules',
+                loadComponent: () => import('./screens/rules/rules-screen/rules-screen.component'),
+                canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
+                canDeactivate: [PendingChangesGuard],
+                data: {
+                    routeGuards: [IqserAuthGuard, RedRoleGuard],
+                    permissions: {
+                        allow: [Roles.rules.read],
+                        redirectTo: 'info',
+                    },
+                    type: 'ENTITY',
+                },
+            },
+            {
+                path: 'component-rules',
+                loadComponent: () => import('./screens/rules/rules-screen/rules-screen.component'),
+                canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
+                canDeactivate: [PendingChangesGuard],
+                data: {
+                    routeGuards: [IqserAuthGuard, RedRoleGuard],
+                    permissions: {
+                        allow: [Roles.rules.read],
+                        redirectTo: 'info',
+                    },
+                    type: 'COMPONENT',
+                },
+            },
+            {
+                path: 'component-mappings',
+                component: ComponentMappingsScreenComponent,
                 canActivate: [CompositeRouteGuard],
                 data: {
                     routeGuards: [IqserAuthGuard, RedRoleGuard],
                 },
             },
             {
-                path: `:${ENTITY_TYPE}`,
-                component: BaseEntityScreenComponent,
-                canActivate: [CompositeRouteGuard, entityExistsGuard()],
-                loadChildren: () => import('./screens/entities/entities.module').then(m => m.EntitiesModule),
+                path: 'file-attributes',
+                loadComponent: () => import('./screens/file-attributes-listing/file-attributes-listing-screen.component'),
+                canActivate: [CompositeRouteGuard],
                 data: {
                     routeGuards: [IqserAuthGuard, RedRoleGuard],
                 },
             },
+            {
+                path: 'watermarks',
+                loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule),
+            },
+            {
+                path: 'reports',
+                loadComponent: () => import('./screens/reports/reports-screen/reports-screen.component'),
+                canActivate: [IqserAuthGuard, IqserPermissionsGuard],
+                data: {
+                    permissions: {
+                        allow: [Roles.reportTemplates.read],
+                        redirectTo: '/auth-error',
+                    },
+                },
+            },
+            {
+                path: 'dossier-attributes',
+                loadComponent: () => import('./screens/dossier-attributes-listing/dossier-attributes-listing-screen.component'),
+                canActivate: [CompositeRouteGuard],
+                data: {
+                    routeGuards: [IqserAuthGuard, RedRoleGuard],
+                },
+            },
+            {
+                path: 'dossier-states',
+                loadComponent: () =>
+                    import('./screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component'),
+                canActivate: [CompositeRouteGuard],
+                data: {
+                    routeGuards: [IqserAuthGuard, RedRoleGuard],
+                },
+            },
+            {
+                path: 'default-colors',
+                component: DefaultColorsScreenComponent,
+                canActivate: [CompositeRouteGuard],
+                data: {
+                    routeGuards: [IqserAuthGuard, RedRoleGuard],
+                },
+            },
+            {
+                path: 'justifications',
+                loadComponent: () => import('./screens/justifications/justifications-screen/justifications-screen.component'),
+                canActivate: [IqserPermissionsGuard],
+                data: {
+                    permissions: {
+                        allow: [Roles.legalBasis.read],
+                        redirectTo: '/auth-error',
+                    },
+                },
+            },
+            { path: '', redirectTo: 'info', pathMatch: 'full' },
         ],
     },
-    {
-        path: 'entity-rules',
-        component: BaseDossierTemplateScreenComponent,
-        canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-            permissions: {
-                allow: [Roles.rules.read],
-                redirectTo: 'info',
-            },
-            type: 'ENTITY',
-        },
-        loadChildren: () => import('./screens/rules/rules.module').then(m => m.RulesModule),
-    },
-    {
-        path: 'component-rules',
-        component: BaseDossierTemplateScreenComponent,
-        canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-            permissions: {
-                allow: [Roles.rules.read],
-                redirectTo: 'info',
-            },
-            type: 'COMPONENT',
-        },
-        loadChildren: () => import('./screens/rules/rules.module').then(m => m.RulesModule),
-    },
-    {
-        path: 'component-mappings',
-        component: ComponentMappingsScreenComponent,
-        canActivate: [CompositeRouteGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-        },
-    },
-    {
-        path: 'file-attributes',
-        component: BaseDossierTemplateScreenComponent,
-        loadChildren: () =>
-            import('./screens/file-attributes-listing/file-attributes-listing.module').then(m => m.FileAttributesListingModule),
-        canActivate: [CompositeRouteGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-        },
-    },
-    {
-        path: 'watermarks',
-        component: BaseDossierTemplateScreenComponent,
-        loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule),
-    },
-    {
-        path: 'reports',
-        component: BaseDossierTemplateScreenComponent,
-        loadChildren: () => import('./screens/reports/reports.module').then(m => m.ReportsModule),
-        canActivate: [IqserAuthGuard, IqserPermissionsGuard],
-        data: {
-            permissions: {
-                allow: [Roles.reportTemplates.read],
-                redirectTo: '/auth-error',
-            },
-        },
-    },
-    {
-        path: 'dossier-attributes',
-        component: BaseDossierTemplateScreenComponent,
-        loadChildren: () =>
-            import('./screens/dossier-attributes-listing/dossier-attributes-listing.module').then(m => m.DossierAttributesListingModule),
-        canActivate: [CompositeRouteGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-        },
-    },
-    {
-        path: 'dossier-states',
-        component: BaseDossierTemplateScreenComponent,
-        loadChildren: () =>
-            import('./screens/dossier-states-listing/dossier-states-listing.module').then(m => m.DossierStatesListingModule),
-        canActivate: [CompositeRouteGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-        },
-    },
-    {
-        path: 'default-colors',
-        component: DefaultColorsScreenComponent,
-        canActivate: [CompositeRouteGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-        },
-    },
-    {
-        path: 'justifications',
-        component: BaseDossierTemplateScreenComponent,
-        loadChildren: () => import('./screens/justifications/justifications.module').then(m => m.JustificationsModule),
-        canActivate: [IqserPermissionsGuard],
-        data: {
-            permissions: {
-                allow: [Roles.legalBasis.read],
-                redirectTo: '/auth-error',
-            },
-        },
-    },
-    { path: '', redirectTo: 'info', pathMatch: 'full' },
 ];
 
 const dossierTemplatesRoutes: IqserRoutes = [
     {
         path: '',
         component: BaseAdminScreenComponent,
+        children: [
+            {
+                path: '',
+                loadComponent: () =>
+                    import(
+                        './screens/dossier-templates-listing/dossier-templates-listing-screen/dossier-templates-listing-screen.component'
+                    ),
+            },
+        ],
         canActivate: [IqserAuthGuard],
-        loadChildren: () =>
-            import('./screens/dossier-templates-listing/dossier-templates-listing.module').then(m => m.DossierTemplatesListingModule),
     },
     {
         path: `:${DOSSIER_TEMPLATE_ID}`,
@@ -171,7 +180,6 @@ const dossierTemplatesRoutes: IqserRoutes = [
 ];
 
 const routes: IqserRoutes = [
-    { path: '', redirectTo: 'dossier-templates', pathMatch: 'full' },
     {
         path: 'dossier-templates',
         children: dossierTemplatesRoutes,
@@ -186,101 +194,85 @@ const routes: IqserRoutes = [
         },
     },
     {
-        path: 'users',
+        path: '',
         component: BaseAdminScreenComponent,
         children: [
             {
-                path: '',
+                path: 'users',
                 component: UserListingScreenComponent,
+                canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
+                data: {
+                    routeGuards: [IqserAuthGuard, RedRoleGuard],
+                    permissions: {
+                        allow: [Roles.users.read, 'RED_USER_ADMIN'],
+                        redirectTo: '/',
+                    },
+                },
             },
-        ],
-        canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-            permissions: {
-                allow: [Roles.users.read, 'RED_USER_ADMIN'],
-                redirectTo: '/',
-            },
-        },
-    },
-    {
-        path: 'dossier-permissions',
-        component: BaseAdminScreenComponent,
-        canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard, PermissionsGuard],
-            permissionsObject: 'Dossier',
-            permissions: {
-                allow: [Roles.manageAclPermissions, 'RED_ADMIN'],
-                redirectTo: '/',
-            },
-        },
-        loadChildren: () => import('./screens/permissions/permissions.module').then(m => m.PermissionsModule),
-    },
-    {
-        path: 'license-info',
-        component: BaseAdminScreenComponent,
-        canActivate: [IqserAuthGuard, IqserPermissionsGuard, RedRoleGuard],
-        data: {
-            permissions: {
-                allow: [Roles.license.readReport, 'RED_ADMIN'],
-                redirectTo: '/',
-            },
-        },
-        loadChildren: () => import('./screens/license/license.module').then(m => m.LicenseModule),
-    },
-    {
-        path: 'digital-signature',
-        component: BaseAdminScreenComponent,
-        children: [
             {
-                path: '',
+                path: 'dossier-permissions',
+                loadComponent: () => import('./screens/permissions/permissions-screen/permissions-screen.component'),
+                canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
+                data: {
+                    routeGuards: [IqserAuthGuard, RedRoleGuard, PermissionsGuard],
+                    permissionsObject: 'Dossier',
+                    permissions: {
+                        allow: [Roles.manageAclPermissions, 'RED_ADMIN'],
+                        redirectTo: '/',
+                    },
+                },
+            },
+            {
+                path: 'license-info',
+                loadComponent: () => import('./screens/license/license-screen/license-screen.component'),
+                canActivate: [IqserAuthGuard, IqserPermissionsGuard, RedRoleGuard],
+                data: {
+                    permissions: {
+                        allow: [Roles.license.readReport, 'RED_ADMIN'],
+                        redirectTo: '/',
+                    },
+                },
+                resolve: {
+                    licenseData: () => inject(LicenseService).loadLicenseData(),
+                },
+            },
+            {
+                path: 'digital-signature',
                 component: DigitalSignatureScreenComponent,
+                canActivate: [IqserAuthGuard, IqserPermissionsGuard, RedRoleGuard],
+                data: {
+                    permissions: {
+                        allow: [Roles.digitalSignature.read, 'RED_ADMIN'],
+                        redirectTo: '/',
+                    },
+                },
             },
-        ],
-        canActivate: [IqserAuthGuard, IqserPermissionsGuard, RedRoleGuard],
-        data: {
-            permissions: {
-                allow: [Roles.digitalSignature.read, 'RED_ADMIN'],
-                redirectTo: '/',
-            },
-        },
-    },
-    {
-        path: 'audit',
-        component: BaseAdminScreenComponent,
-        children: [
             {
-                path: '',
+                path: 'audit',
                 component: AuditScreenComponent,
+                canActivate: [IqserAuthGuard, IqserPermissionsGuard, RedRoleGuard],
+                data: {
+                    permissions: {
+                        allow: [Roles.searchAudit, 'RED_ADMIN'],
+                        redirectTo: '/',
+                    },
+                },
             },
-        ],
-        canActivate: [IqserAuthGuard, IqserPermissionsGuard, RedRoleGuard],
-        data: {
-            permissions: {
-                allow: [Roles.searchAudit, 'RED_ADMIN'],
-                redirectTo: '/',
-            },
-        },
-    },
-    {
-        path: 'general-config',
-        component: BaseAdminScreenComponent,
-        children: [
             {
-                path: '',
+                path: 'general-config',
                 component: GeneralConfigScreenComponent,
+                canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
+                canDeactivate: [PendingChangesGuard],
+                data: {
+                    routeGuards: [IqserAuthGuard, RedRoleGuard],
+                    permissions: {
+                        allow: [Roles.generalConfiguration.read, Roles.smtp.read, 'RED_ADMIN'],
+                        redirectTo: '/',
+                    },
+                },
             },
+            { path: '', redirectTo: 'dossier-templates', pathMatch: 'full' },
         ],
-        canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
-        canDeactivate: [PendingChangesGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-            permissions: {
-                allow: [Roles.generalConfiguration.read, Roles.smtp.read, 'RED_ADMIN'],
-                redirectTo: '/',
-            },
-        },
     },
 ];
 
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 27df03721..0a4bfb36e 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
@@ -1,29 +1,6 @@
-<section *ngIf="context$ | async as context">
-    <div class="page-header">
-        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
-
-        <div class="flex-1 actions">
-            <redaction-dossier-template-actions></redaction-dossier-template-actions>
-
-            <iqser-circle-button
-                [routerLink]="['../..']"
-                [tooltip]="'common.close' | translate"
-                icon="iqser:close"
-                tooltipPosition="below"
-            ></iqser-circle-button>
-        </div>
-    </div>
-
-    <div class="content-inner">
-        <div class="overlay-shadow"></div>
-
-        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
-
-        <div class="content-container">
-            <iqser-table [itemSize]="80" [tableColumnConfigs]="tableColumnConfigs" emptyColumnWidth="2fr"></iqser-table>
-        </div>
-    </div>
-</section>
+<div class="content-container" *ngIf="context$ | async as context">
+    <iqser-table [itemSize]="80" [tableColumnConfigs]="tableColumnConfigs" emptyColumnWidth="2fr"></iqser-table>
+</div>
 
 <ng-template #tableItemTemplate let-entity="entity">
     <div>
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 576c1878b..c186dd557 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
@@ -2,8 +2,12 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
+    CircleButtonComponent,
     defaultDialogConfig,
+    IconButtonComponent,
     IconButtonTypes,
+    InputWithActionComponent,
+    IqserListingModule,
     ListingComponent,
     listingProvidersFactory,
     LoadingService,
@@ -20,6 +24,9 @@ import {
     AddEditDossierAttributeDialogComponent,
     AddEditDossierAttributeDialogData,
 } from './add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { TableItemComponent } from './table-item/table-item.component';
 
 @Component({
     templateUrl: './dossier-attributes-listing-screen.component.html',
@@ -28,8 +35,20 @@ import {
         entitiesService: DossierAttributesService,
         component: DossierAttributesListingScreenComponent,
     }),
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        TranslateModule,
+        CircleButtonComponent,
+        AsyncPipe,
+        NgIf,
+        InputWithActionComponent,
+        IconButtonComponent,
+        NgForOf,
+        TableItemComponent,
+    ],
 })
-export class DossierAttributesListingScreenComponent extends ListingComponent<DossierAttributeConfig> implements OnInit {
+export default class DossierAttributesListingScreenComponent extends ListingComponent<DossierAttributeConfig> implements OnInit {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly iconButtonTypes = IconButtonTypes;
     readonly currentUser = getCurrentUser<User>();
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing.module.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing.module.ts
deleted file mode 100644
index e7ce656fd..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing.module.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { NgModule } from '@angular/core';
-import { DossierAttributesListingScreenComponent } from './dossier-attributes-listing-screen.component';
-import { CommonModule } from '@angular/common';
-import {
-    CircleButtonComponent,
-    IconButtonComponent,
-    InputWithActionComponent,
-    IqserHelpModeModule,
-    IqserListingModule,
-    IqserRoutes,
-} from '@iqser/common-ui';
-import { RouterModule } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { TableItemComponent } from './table-item/table-item.component';
-
-const routes: IqserRoutes = [
-    {
-        path: '',
-        component: DossierAttributesListingScreenComponent,
-    },
-];
-
-@NgModule({
-    declarations: [DossierAttributesListingScreenComponent, TableItemComponent],
-    imports: [
-        CommonModule,
-        RouterModule.forChild(routes),
-        TranslateModule,
-        CircleButtonComponent,
-        InputWithActionComponent,
-        IconButtonComponent,
-        IqserHelpModeModule,
-        MatTooltipModule,
-        IqserListingModule,
-    ],
-})
-export class DossierAttributesListingModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.ts
index 03cd1c36b..90d7298b7 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/table-item/table-item.component.ts
@@ -1,11 +1,17 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DossierAttributeConfig, IDossierAttributeConfig } from '@red/domain';
 import { dossierAttributeTypesTranslations } from '@translations/dossier-attribute-types-translations';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { CircleButtonComponent } from '@iqser/common-ui';
+import { NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-table-item [attribute] [canEditDossierAttributes]',
     templateUrl: './table-item.component.html',
     styleUrls: ['./table-item.component.scss'],
+    standalone: true,
+    imports: [MatTooltip, TranslateModule, CircleButtonComponent, NgIf],
 })
 export class TableItemComponent {
     readonly translations = dossierAttributeTypesTranslations;
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
index 70f623695..f989b751c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.ts
@@ -1,10 +1,14 @@
 import { Component, Inject } from '@angular/core';
-import { BaseDialogComponent } from '@iqser/common-ui';
-import { Validators } from '@angular/forms';
+import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent } from '@iqser/common-ui';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
 import { IDossierState } from '@red/domain';
 import { DossierStatesService } from '@services/entity-services/dossier-states.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { ColorPickerModule } from 'ngx-color-picker';
+import { MatIcon } from '@angular/material/icon';
+import { NgIf } from '@angular/common';
 
 export interface AddEditDossierStateDialogData {
     readonly dossierState?: IDossierState;
@@ -14,6 +18,8 @@ export interface AddEditDossierStateDialogData {
 @Component({
     templateUrl: './add-edit-dossier-state-dialog.component.html',
     styleUrls: ['./add-edit-dossier-state-dialog.component.scss'],
+    standalone: true,
+    imports: [TranslateModule, ReactiveFormsModule, ColorPickerModule, MatIcon, NgIf, IconButtonComponent, CircleButtonComponent],
 })
 export class AddEditDossierStateDialogComponent extends BaseDialogComponent {
     readonly type = this.data.dossierState ? 'edit' : 'create';
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
index bf8db1b8b..bd0e871f1 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
@@ -1,13 +1,18 @@
 import { Component, Inject } from '@angular/core';
 import { DossierState } from '@red/domain';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { FormBuilder } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { combineLatest, firstValueFrom } from 'rxjs';
 import { DossierStatesService } from '@services/entity-services/dossier-states.service';
-import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
+import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { NgForOf, NgIf } from '@angular/common';
 
 export interface ConfirmDeleteDossierStateDialogData {
     readonly toBeDeletedState: DossierState;
@@ -18,6 +23,19 @@ export interface ConfirmDeleteDossierStateDialogData {
 @Component({
     templateUrl: './confirm-delete-dossier-state-dialog.component.html',
     styleUrls: ['./confirm-delete-dossier-state-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        TranslateModule,
+        ReactiveFormsModule,
+        MatCheckbox,
+        MatFormField,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        IconButtonComponent,
+        CircleButtonComponent,
+        NgIf,
+    ],
 })
 export class ConfirmDeleteDossierStateDialogComponent {
     readonly iconButtonTypes = IconButtonTypes;
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.ts
index 730e83923..5644f963c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing-screen/dossier-states-listing-screen.component.ts
@@ -1,7 +1,10 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import {
     defaultDialogConfig,
+    IconButtonComponent,
     IconButtonTypes,
+    InputWithActionComponent,
+    IqserListingModule,
     ListingComponent,
     listingProvidersFactory,
     LoadingService,
@@ -21,13 +24,28 @@ import {
 } from '../add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
 import { SortingOrders } from '@iqser/common-ui/lib/sorting';
 import { getParam } from '@iqser/common-ui/lib/utils';
+import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.component';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { DossierStatesTableItemComponent } from '../dossier-states-table-item/dossier-states-table-item.component';
 
 @Component({
     templateUrl: './dossier-states-listing-screen.component.html',
     styleUrls: ['./dossier-states-listing-screen.component.scss'],
     providers: listingProvidersFactory(DossierStatesListingScreenComponent),
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        DonutChartComponent,
+        AsyncPipe,
+        NgIf,
+        TranslateModule,
+        InputWithActionComponent,
+        IconButtonComponent,
+        DossierStatesTableItemComponent,
+    ],
 })
-export class DossierStatesListingScreenComponent extends ListingComponent<DossierState> implements OnInit, OnDestroy {
+export default class DossierStatesListingScreenComponent extends ListingComponent<DossierState> implements OnInit, OnDestroy {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly iconButtonTypes = IconButtonTypes;
     readonly tableHeaderLabel = _('dossier-states-listing.table-header.title');
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing.module.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing.module.ts
deleted file mode 100644
index 4e5910f8a..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-listing.module.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DossierStatesListingScreenComponent } from './dossier-states-listing-screen/dossier-states-listing-screen.component';
-import { DossierStatesTableItemComponent } from './dossier-states-table-item/dossier-states-table-item.component';
-import { RouterModule } from '@angular/router';
-import {
-    CircleButtonComponent,
-    IconButtonComponent,
-    InputWithActionComponent,
-    IqserHelpModeModule,
-    IqserListingModule,
-} from '@iqser/common-ui';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { TranslateModule } from '@ngx-translate/core';
-import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.component';
-import { AdminSideNavComponent } from '../../shared/components/admin-side-nav/admin-side-nav.component';
-import { DossierTemplateActionsComponent } from '../../shared/components/dossier-template-actions/dossier-template-actions.component';
-import { DossierTemplateBreadcrumbsComponent } from '../../shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
-import { AddEditDossierStateDialogComponent } from './add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { ColorPickerModule } from 'ngx-color-picker';
-import { MatIconModule } from '@angular/material/icon';
-import { ConfirmDeleteDossierStateDialogComponent } from './confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component';
-import { MatSelectModule } from '@angular/material/select';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-
-@NgModule({
-    declarations: [
-        DossierStatesListingScreenComponent,
-        DossierStatesTableItemComponent,
-        AddEditDossierStateDialogComponent,
-        ConfirmDeleteDossierStateDialogComponent,
-    ],
-    imports: [
-        CommonModule,
-        RouterModule.forChild([
-            {
-                path: '',
-                component: DossierStatesListingScreenComponent,
-            },
-        ]),
-        MatDialogModule,
-        CircleButtonComponent,
-        IqserHelpModeModule,
-        MatTooltipModule,
-        IconButtonComponent,
-        TranslateModule,
-        IqserListingModule,
-        DonutChartComponent,
-        AdminSideNavComponent,
-        DossierTemplateActionsComponent,
-        InputWithActionComponent,
-        DossierTemplateBreadcrumbsComponent,
-        ReactiveFormsModule,
-        ColorPickerModule,
-        MatIconModule,
-        MatCheckboxModule,
-        MatSelectModule,
-    ],
-})
-export class DossierStatesListingModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-table-item/dossier-states-table-item.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-table-item/dossier-states-table-item.component.ts
index 1a81dbc2d..93dad3a49 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-table-item/dossier-states-table-item.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/dossier-states-table-item/dossier-states-table-item.component.ts
@@ -1,6 +1,6 @@
 import { Component, inject, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { defaultDialogConfig, EntitiesService } from '@iqser/common-ui';
+import { CircleButtonComponent, defaultDialogConfig, EntitiesService } from '@iqser/common-ui';
 import { DossierState, IDossierState } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
 import {
@@ -11,11 +11,16 @@ import {
     ConfirmDeleteDossierStateDialogComponent,
     ConfirmDeleteDossierStateDialogData,
 } from '../confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-dossier-states-table-item',
     templateUrl: './dossier-states-table-item.component.html',
     styleUrls: ['./dossier-states-table-item.component.scss'],
+    standalone: true,
+    imports: [MatTooltip, CircleButtonComponent, TranslateModule, NgIf],
 })
 export class DossierStatesTableItemComponent {
     readonly #dialog = inject(MatDialog);
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing-screen/dossier-templates-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing-screen/dossier-templates-listing-screen.component.ts
index fa61c02bf..585f709d0 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing-screen/dossier-templates-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing-screen/dossier-templates-listing-screen.component.ts
@@ -1,7 +1,12 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
+    CircleButtonComponent,
+    IconButtonComponent,
     IconButtonTypes,
+    InputWithActionComponent,
+    IqserAllowDirective,
+    IqserListingModule,
     IqserPermissionsService,
     ListingComponent,
     listingProvidersFactory,
@@ -16,6 +21,9 @@ import { Roles } from '@users/roles';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { firstValueFrom } from 'rxjs';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { AsyncPipe } from '@angular/common';
+import { TableItemComponent } from '../table-item/table-item.component';
 
 @Component({
     templateUrl: './dossier-templates-listing-screen.component.html',
@@ -25,8 +33,19 @@ import { AdminDialogService } from '../../../services/admin-dialog.service';
         entitiesService: DossierTemplatesService,
         component: DossierTemplatesListingScreenComponent,
     }),
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        TranslateModule,
+        AsyncPipe,
+        CircleButtonComponent,
+        IqserAllowDirective,
+        InputWithActionComponent,
+        IconButtonComponent,
+        TableItemComponent,
+    ],
 })
-export class DossierTemplatesListingScreenComponent extends ListingComponent<DossierTemplate> implements OnInit {
+export default class DossierTemplatesListingScreenComponent extends ListingComponent<DossierTemplate> implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
     readonly roles = Roles;
     readonly currentUser = getCurrentUser<User>();
@@ -58,7 +77,7 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
 
     openBulkDeleteTemplatesDialog() {
         return this._dialogService.openDialog('confirm', null, () => {
-            this._loadingService.loadWhile(this._deleteTemplates());
+            this._loadingService.loadWhile(this.#deleteTemplates());
         });
     }
 
@@ -66,7 +85,7 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
         this._dialogService.openDialog('addCloneDossierTemplate', {});
     }
 
-    private async _deleteTemplates(templateIds = this.listingService.selected.map(d => d.dossierTemplateId)) {
+    async #deleteTemplates(templateIds = this.listingService.selected.map(d => d.dossierTemplateId)) {
         await firstValueFrom(this._dossierTemplatesService.delete(templateIds));
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts
deleted file mode 100644
index b0dc3dc8f..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { SharedModule } from '@shared/shared.module';
-import { TableItemComponent } from './table-item/table-item.component';
-import { DossierTemplatesListingScreenComponent } from './dossier-templates-listing-screen/dossier-templates-listing-screen.component';
-import {
-    CircleButtonComponent,
-    IconButtonComponent,
-    InputWithActionComponent,
-    IqserAllowDirective,
-    IqserHelpModeModule,
-    IqserListingModule,
-    IqserRoutes,
-} from '@iqser/common-ui';
-import { TranslateModule } from '@ngx-translate/core';
-import { DossierTemplateActionsComponent } from '../../shared/components/dossier-template-actions/dossier-template-actions.component';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
-
-const routes: IqserRoutes = [{ path: '', component: DossierTemplatesListingScreenComponent }];
-
-@NgModule({
-    declarations: [TableItemComponent, DossierTemplatesListingScreenComponent],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        SharedModule,
-        IqserUsersModule,
-        TranslateModule,
-        IqserListingModule,
-        IqserHelpModeModule,
-        DossierTemplateActionsComponent,
-        CircleButtonComponent,
-        IconButtonComponent,
-        InputWithActionComponent,
-        IqserAllowDirective,
-    ],
-})
-export class DossierTemplatesListingModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts
index 2c9f4c4e7..ecda4d86b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts
@@ -4,12 +4,20 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { DossierTemplateStatsService } from '@services/entity-services/dossier-template-stats.service';
 import { switchMap } from 'rxjs/operators';
 import { dossierTemplateStatusTranslations } from '@translations/dossier-template-status-translations';
+import { MatTooltip } from '@angular/material/tooltip';
+import { AsyncPipe, DatePipe, NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { IqserUsersModule } from '@common-ui/users';
+import { DossierTemplateActionsComponent } from '../../../shared/components/dossier-template-actions/dossier-template-actions.component';
 
 @Component({
     selector: 'redaction-table-item [dossierTemplate]',
     templateUrl: './table-item.component.html',
     styleUrls: ['./table-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [MatTooltip, NgIf, AsyncPipe, MatIcon, TranslateModule, IqserUsersModule, DatePipe, DossierTemplateActionsComponent],
 })
 export class TableItemComponent implements OnChanges {
     @Input() dossierTemplate!: DossierTemplate;
diff --git a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html
index dd78bc33b..208e2504f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.html
@@ -1,41 +1,18 @@
-<section>
-    <div class="page-header">
-        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
-
-        <div class="flex-1 actions">
-            <redaction-dossier-template-actions></redaction-dossier-template-actions>
-
-            <iqser-circle-button
-                [routerLink]="['../..']"
-                [tooltip]="'common.close' | translate"
-                icon="iqser:close"
-                tooltipPosition="below"
-            ></iqser-circle-button>
-        </div>
-    </div>
-
-    <div class="content-inner">
-        <div class="overlay-shadow"></div>
-
-        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
-
-        <div class="content-container">
-            <iqser-table
-                (noDataAction)="openAddEntityDialog()"
-                [bulkActions]="bulkActions"
-                [headerTemplate]="headerTemplate"
-                [itemSize]="80"
-                [noDataButtonIcon]="'iqser:plus'"
-                [noDataButtonLabel]="'entities-listing.no-data.action' | translate"
-                [noDataText]="'entities-listing.no-data.title' | translate"
-                [noMatchText]="'entities-listing.no-match.title' | translate"
-                [showNoDataButton]="permissionsService.canEditEntities()"
-                [tableColumnConfigs]="tableColumnConfigs"
-                noDataIcon="red:dictionary"
-            ></iqser-table>
-        </div>
-    </div>
-</section>
+<div class="content-container">
+    <iqser-table
+        (noDataAction)="openAddEntityDialog()"
+        [bulkActions]="bulkActions"
+        [headerTemplate]="headerTemplate"
+        [itemSize]="80"
+        [noDataButtonIcon]="'iqser:plus'"
+        [noDataButtonLabel]="'entities-listing.no-data.action' | translate"
+        [noDataText]="'entities-listing.no-data.title' | translate"
+        [noMatchText]="'entities-listing.no-match.title' | translate"
+        [showNoDataButton]="permissionsService.canEditEntities()"
+        [tableColumnConfigs]="tableColumnConfigs"
+        noDataIcon="red:dictionary"
+    ></iqser-table>
+</div>
 
 <ng-template #bulkActions>
     <iqser-circle-button
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
index 3ac33354a..eaf723efc 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
@@ -1,14 +1,49 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { ListingComponent, listingProvidersFactory, TableColumnConfig } from '@iqser/common-ui';
+import {
+    ChevronButtonComponent,
+    CircleButtonComponent,
+    EditableInputComponent,
+    IqserListingModule,
+    ListingComponent,
+    listingProvidersFactory,
+    RoundCheckboxComponent,
+    TableColumnConfig,
+} from '@iqser/common-ui';
 import { FileAttributeConfigTypes, IField } from '@red/domain';
 import { fileAttributeTypesTranslations } from '@translations/file-attribute-types-translations';
+import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
+import { TranslateModule } from '@ngx-translate/core';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
 
 @Component({
     selector: 'redaction-active-fields-listing',
     templateUrl: './active-fields-listing.component.html',
     styleUrls: ['./active-fields-listing.component.scss'],
     providers: listingProvidersFactory(ActiveFieldsListingComponent),
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        CircleButtonComponent,
+        MatMenuTrigger,
+        TranslateModule,
+        AsyncPipe,
+        ChevronButtonComponent,
+        MatMenu,
+        EditableInputComponent,
+        MatFormField,
+        MatSelect,
+        MatOption,
+        FormsModule,
+        MatSlideToggle,
+        RoundCheckboxComponent,
+        NgForOf,
+        NgIf,
+    ],
 })
 export class ActiveFieldsListingComponent extends ListingComponent<IField> implements OnChanges {
     readonly translations = fileAttributeTypesTranslations;
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index 19abe8403..e9f36d9cf 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -1,15 +1,30 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { AbstractControl, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import * as Papa from 'papaparse';
 import { firstValueFrom, Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
-import { IconButtonTypes, ListingComponent, listingProvidersFactory, TableColumnConfig, Toaster } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    InputWithActionComponent,
+    IqserTranslateModule,
+    ListingComponent,
+    listingProvidersFactory,
+    TableColumnConfig,
+    Toaster,
+} from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FileAttributeConfig, FileAttributeConfigTypes, FileAttributeEncodingTypes, IField, IFileAttributesConfig } from '@red/domain';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 import { fileAttributeEncodingTypesTranslations } from '@translations/file-attribute-encoding-types-translations';
 import { trackByFactory } from '@iqser/common-ui/lib/utils';
+import { MatFormField } from '@angular/material/form-field';
+import { MatAutocomplete, MatAutocompleteTrigger, MatOption } from '@angular/material/autocomplete';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { MatSelect } from '@angular/material/select';
+import { ActiveFieldsListingComponent } from './active-fields-listing/active-fields-listing.component';
 
 export interface IFileAttributesCSVImportData {
     readonly csv: File;
@@ -22,6 +37,23 @@ export interface IFileAttributesCSVImportData {
     styleUrls: ['./file-attributes-csv-import-dialog.component.scss'],
     providers: listingProvidersFactory(),
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        IqserTranslateModule,
+        ReactiveFormsModule,
+        MatFormField,
+        MatAutocompleteTrigger,
+        MatAutocomplete,
+        AsyncPipe,
+        MatOption,
+        MatSelect,
+        CircleButtonComponent,
+        NgIf,
+        InputWithActionComponent,
+        IconButtonComponent,
+        NgForOf,
+        ActiveFieldsListingComponent,
+    ],
 })
 export class FileAttributesCsvImportDialogComponent extends ListingComponent<IField> {
     readonly iconButtonTypes = IconButtonTypes;
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.module.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.module.ts
deleted file mode 100644
index c7f221f32..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.module.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FileAttributesCsvImportDialogComponent } from './file-attributes-csv-import-dialog.component';
-import { ActiveFieldsListingComponent } from './active-fields-listing/active-fields-listing.component';
-import {
-    ChevronButtonComponent,
-    CircleButtonComponent,
-    EditableInputComponent,
-    IconButtonComponent,
-    InputWithActionComponent,
-    IqserListingModule,
-    RoundCheckboxComponent,
-} from '@iqser/common-ui';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatInputModule } from '@angular/material/input';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-
-@NgModule({
-    declarations: [FileAttributesCsvImportDialogComponent, ActiveFieldsListingComponent],
-    imports: [
-        CommonModule,
-        CircleButtonComponent,
-        TranslateModule,
-        MatDialogModule,
-        IconButtonComponent,
-        InputWithActionComponent,
-        MatFormFieldModule,
-        MatSelectModule,
-        ReactiveFormsModule,
-        MatAutocompleteModule,
-        MatInputModule,
-        IqserListingModule,
-        MatMenuModule,
-        ChevronButtonComponent,
-        EditableInputComponent,
-        FormsModule,
-        MatSlideToggleModule,
-        RoundCheckboxComponent,
-    ],
-})
-export class FileAttributesCsvImportDialogModule {}
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 ae1f798a6..7fb89faab 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
@@ -3,12 +3,18 @@ import { Component, ElementRef, OnDestroy, OnInit, TemplateRef, ViewChild } from
 import { MatDialog } from '@angular/material/dialog';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
+    CircleButtonComponent,
     defaultDialogConfig,
+    IconButtonComponent,
     IconButtonTypes,
+    InputWithActionComponent,
+    IqserAllowDirective,
+    IqserListingModule,
     largeDialogConfig,
     ListingComponent,
     listingProvidersFactory,
     LoadingService,
+    RoundCheckboxComponent,
     TableColumnConfig,
     Toaster,
 } from '@iqser/common-ui';
@@ -31,13 +37,32 @@ import {
     FileAttributesCsvImportDialogComponent,
     IFileAttributesCSVImportData,
 } from './file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     templateUrl: './file-attributes-listing-screen.component.html',
     styleUrls: ['./file-attributes-listing-screen.component.scss'],
     providers: listingProvidersFactory(FileAttributesListingScreenComponent),
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        NgForOf,
+        TranslateModule,
+        CircleButtonComponent,
+        NgIf,
+        AsyncPipe,
+        InputWithActionComponent,
+        IqserAllowDirective,
+        IconButtonComponent,
+        MatIcon,
+        MatTooltip,
+        RoundCheckboxComponent,
+    ],
 })
-export class FileAttributesListingScreenComponent extends ListingComponent<FileAttributeConfig> implements OnInit, OnDestroy {
+export default class FileAttributesListingScreenComponent extends ListingComponent<FileAttributeConfig> implements OnInit, OnDestroy {
     @ViewChild('impactedTemplates') private readonly _impactedTemplatesRef: TemplateRef<unknown>;
     #existingConfiguration: IFileAttributesConfig;
     @ViewChild('fileInput') private _fileInput: ElementRef;
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing.module.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing.module.ts
deleted file mode 100644
index 07b2937e3..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing.module.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { NgModule } from '@angular/core';
-import { FileAttributesListingScreenComponent } from './file-attributes-listing-screen.component';
-import { RouterModule } from '@angular/router';
-import {
-    CircleButtonComponent,
-    IconButtonComponent,
-    InputWithActionComponent,
-    IqserAllowDirective,
-    IqserHelpModeModule,
-    IqserListingModule,
-    IqserRoutes,
-    RoundCheckboxComponent,
-} from '@iqser/common-ui';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
-import { MatTooltipModule } from '@angular/material/tooltip';
-
-const routes: IqserRoutes = [
-    {
-        path: '',
-        component: FileAttributesListingScreenComponent,
-    },
-];
-
-@NgModule({
-    declarations: [FileAttributesListingScreenComponent],
-    imports: [
-        CommonModule,
-        RouterModule.forChild(routes),
-        IqserListingModule,
-        TranslateModule,
-        CircleButtonComponent,
-        InputWithActionComponent,
-        IqserHelpModeModule,
-        IqserAllowDirective,
-        IconButtonComponent,
-        MatIconModule,
-        MatTooltipModule,
-        RoundCheckboxComponent,
-    ],
-})
-export class FileAttributesListingModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
index c5c2c7f03..3dfa5c33e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
@@ -4,7 +4,7 @@ import { GeneralConfigFormComponent } from './general-config-form/general-config
 import { SmtpFormComponent } from './smtp-form/smtp-form.component';
 import { BaseFormComponent } from '@iqser/common-ui';
 import { SystemPreferencesFormComponent } from './system-preferences-form/system-preferences-form.component';
-import { RouterHistoryService } from '../../../../services/router-history.service';
+import { RouterHistoryService } from '@services/router-history.service';
 
 @Component({
     selector: 'redaction-general-config-screen',
diff --git a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts
index 2ddbd44f7..7b197262b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts
@@ -4,6 +4,10 @@ import { type DossierTemplate, type DossierTemplateStats } from '@red/domain';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { DossierTemplateStatsService } from '@services/entity-services/dossier-template-stats.service';
 import { dossierTemplateStatusTranslations } from '@translations/dossier-template-status-translations';
+import { AsyncPipe, DatePipe, NgIf } from '@angular/common';
+import { IqserUsersModule } from '@common-ui/users';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 interface Context {
     readonly dossierTemplate: DossierTemplate;
@@ -14,6 +18,8 @@ interface Context {
     selector: 'redaction-dossier-template-details',
     templateUrl: './dossier-template-details.component.html',
     styleUrls: ['./dossier-template-details.component.scss'],
+    standalone: true,
+    imports: [NgIf, AsyncPipe, IqserUsersModule, MatIcon, TranslateModule, DatePipe],
 })
 export class DossierTemplateDetailsComponent extends ContextComponent<Context> implements OnInit {
     readonly translations = dossierTemplateStatusTranslations;
diff --git a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info-screen/dossier-template-info-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info-screen/dossier-template-info-screen.component.ts
index 3cf61bb37..0d21402f1 100644
--- a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info-screen/dossier-template-info-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info-screen/dossier-template-info-screen.component.ts
@@ -1,5 +1,13 @@
 import { Component, OnInit, signal, untracked, WritableSignal } from '@angular/core';
-import { BaseFormComponent, getConfig, IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
+import {
+    BaseFormComponent,
+    getConfig,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IconButtonTypes,
+    LoadingService,
+    Toaster,
+} from '@iqser/common-ui';
 import { getParam } from '@iqser/common-ui/lib/utils';
 import { DOSSIER_TEMPLATE_ID, type DossierTemplate, IDossierTemplate } from '@red/domain';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
@@ -8,9 +16,16 @@ import dayjs, { Dayjs } from 'dayjs';
 import { HttpStatusCode } from '@angular/common/http';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { applyIntervalConstraints } from '@utils/date-inputs-utils';
-import { AbstractControl, UntypedFormBuilder, Validators } from '@angular/forms';
+import { AbstractControl, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import { downloadTypesTranslations } from '@translations/download-types-translations';
 import { Observable } from 'rxjs';
+import { DossierTemplateDetailsComponent } from '../dossier-template-details/dossier-template-details.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { NgIf } from '@angular/common';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatIcon } from '@angular/material/icon';
+import { SelectComponent } from '@shared/components/select/select.component';
 
 const downloadTypes = ['ORIGINAL', 'PREVIEW', 'DELTA_PREVIEW', 'REDACTED'].map(type => ({
     key: type,
@@ -20,8 +35,21 @@ const downloadTypes = ['ORIGINAL', 'PREVIEW', 'DELTA_PREVIEW', 'REDACTED'].map(t
 @Component({
     templateUrl: './dossier-template-info-screen.component.html',
     styleUrls: ['./dossier-template-info-screen.component.scss'],
+    standalone: true,
+    imports: [
+        HasScrollbarDirective,
+        ReactiveFormsModule,
+        DossierTemplateDetailsComponent,
+        TranslateModule,
+        MatCheckbox,
+        NgIf,
+        MatDatepickerModule,
+        SelectComponent,
+        IconButtonComponent,
+        MatIcon,
+    ],
 })
-export class DossierTemplateInfoScreenComponent extends BaseFormComponent implements OnInit {
+export default class DossierTemplateInfoScreenComponent extends BaseFormComponent implements OnInit {
     readonly translations = dossierTemplateStatusTranslations;
     readonly iconButtonTypes = IconButtonTypes;
     readonly isDocumine = getConfig().IS_DOCUMINE;
@@ -31,10 +59,14 @@ export class DossierTemplateInfoScreenComponent extends BaseFormComponent implem
     readonly dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly hasValidFrom: WritableSignal<boolean>;
     readonly hasValidTo: WritableSignal<boolean>;
-    private _previousValidFrom: Dayjs;
-    private _previousValidTo: Dayjs;
-    private _lastValidFrom: Dayjs;
-    private _lastValidTo: Dayjs;
+    #previousValidFrom: Dayjs;
+    #previousValidTo: Dayjs;
+    #lastValidFrom: Dayjs;
+    #lastValidTo: Dayjs;
+
+    get disabled(): boolean {
+        return !this.valid || !this.changed;
+    }
 
     constructor(
         private readonly _dossierTemplatesService: DossierTemplatesService,
@@ -50,8 +82,8 @@ export class DossierTemplateInfoScreenComponent extends BaseFormComponent implem
         this.hasValidFrom = signal(!!this.form.get('validFrom').value);
         this.hasValidTo = signal(!!this.form.get('validTo').value);
 
-        this._previousValidFrom = this._lastValidFrom = this.form.get('validFrom').value;
-        this._previousValidTo = this._lastValidTo = this.form.get('validTo').value;
+        this.#previousValidFrom = this.#lastValidFrom = this.form.get('validFrom').value;
+        this.#previousValidTo = this.#lastValidTo = this.form.get('validTo').value;
     }
 
     ngOnInit() {
@@ -62,11 +94,11 @@ export class DossierTemplateInfoScreenComponent extends BaseFormComponent implem
         if (extremity === 'from') {
             const prevValue = untracked(this.hasValidFrom);
             this.hasValidFrom.set(!prevValue);
-            this.form.controls['validFrom'].setValue(!prevValue ? this._lastValidFrom : null);
+            this.form.controls['validFrom'].setValue(!prevValue ? this.#lastValidFrom : null);
         } else {
             const prevValue = untracked(this.hasValidTo);
             this.hasValidTo.set(!prevValue);
-            this.form.controls['validTo'].setValue(!prevValue ? this._lastValidTo : null);
+            this.form.controls['validTo'].setValue(!prevValue ? this.#lastValidTo : null);
         }
         this.applyValidityIntervalConstraints();
     }
@@ -95,12 +127,12 @@ export class DossierTemplateInfoScreenComponent extends BaseFormComponent implem
 
     applyValidityIntervalConstraints(): void {
         const formValue = this.form.value;
-        applyIntervalConstraints(formValue, this._previousValidFrom, this._previousValidTo, this.form, 'validFrom', 'validTo');
+        applyIntervalConstraints(formValue, this.#previousValidFrom, this.#previousValidTo, this.form, 'validFrom', 'validTo');
 
-        this._previousValidFrom = this.form.get('validFrom').value;
-        this._previousValidTo = this.form.get('validTo').value;
-        this._lastValidFrom = this._previousValidFrom || this._lastValidFrom;
-        this._lastValidTo = this._previousValidTo || this._lastValidTo;
+        this.#previousValidFrom = this.form.get('validFrom').value;
+        this.#previousValidTo = this.form.get('validTo').value;
+        this.#lastValidFrom = this.#previousValidFrom || this.#lastValidFrom;
+        this.#lastValidTo = this.#previousValidTo || this.#lastValidTo;
     }
 
     #getForm(dossierTemplate: DossierTemplate) {
diff --git a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts
deleted file mode 100644
index b7d6deb4e..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DossierTemplateInfoScreenComponent } from './dossier-template-info-screen/dossier-template-info-screen.component';
-import { RouterModule } from '@angular/router';
-import { SharedModule } from '@shared/shared.module';
-import { CircleButtonComponent, HasScrollbarDirective, IconButtonComponent, IqserHelpModeModule } from '@iqser/common-ui';
-import { TranslateModule } from '@ngx-translate/core';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
-import { SelectComponent } from '@shared/components/select/select.component';
-import { DossierTemplateDetailsComponent } from './dossier-template-details/dossier-template-details.component';
-import { PendingChangesGuard } from '@guards/can-deactivate.guard';
-
-const routes = [
-    {
-        path: '',
-        component: DossierTemplateInfoScreenComponent,
-        canDeactivate: [PendingChangesGuard],
-    },
-];
-
-@NgModule({
-    declarations: [DossierTemplateInfoScreenComponent, DossierTemplateDetailsComponent],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        SharedModule,
-        IqserUsersModule,
-        TranslateModule,
-        IqserHelpModeModule,
-        HasScrollbarDirective,
-        CircleButtonComponent,
-        IconButtonComponent,
-        SelectComponent,
-    ],
-})
-export class DossierTemplateInfoModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/justifications/add-edit-justification-dialog/add-edit-justification-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/justifications/add-edit-justification-dialog/add-edit-justification-dialog.component.ts
index 68f39dfc1..fb62106b4 100644
--- a/apps/red-ui/src/app/modules/admin/screens/justifications/add-edit-justification-dialog/add-edit-justification-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/justifications/add-edit-justification-dialog/add-edit-justification-dialog.component.ts
@@ -1,10 +1,11 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { UntypedFormGroup, Validators } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Justification } from '@red/domain';
 import { JustificationsService } from '@services/entity-services/justifications.service';
-import { BaseDialogComponent } from '@iqser/common-ui';
+import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent } from '@iqser/common-ui';
 import { firstValueFrom } from 'rxjs';
+import { TranslateModule } from '@ngx-translate/core';
 
 interface DialogData {
     justification?: Justification;
@@ -14,6 +15,8 @@ interface DialogData {
 @Component({
     templateUrl: './add-edit-justification-dialog.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [TranslateModule, ReactiveFormsModule, IconButtonComponent, CircleButtonComponent],
 })
 export class AddEditJustificationDialogComponent extends BaseDialogComponent {
     constructor(
diff --git a/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-screen/justifications-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-screen/justifications-screen.component.ts
index 296d552bd..13628fc91 100644
--- a/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-screen/justifications-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/justifications/justifications-screen/justifications-screen.component.ts
@@ -1,26 +1,42 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { IconButtonTypes, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserListingModule,
+    ListingComponent,
+    listingProvidersFactory,
+    LoadingService,
+    TableColumnConfig,
+} from '@iqser/common-ui';
 import { SortingOrders } from '@iqser/common-ui/lib/sorting';
 import { getParam } from '@iqser/common-ui/lib/utils';
 import { DOSSIER_TEMPLATE_ID, Justification } from '@red/domain';
 import { JustificationsService } from '@services/entity-services/justifications.service';
 import { PermissionsService } from '@services/permissions.service';
-import { UserPreferenceService } from '@users/user-preference.service';
 import { firstValueFrom } from 'rxjs';
 import { JustificationsDialogService } from '../justifications-dialog.service';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TableItemComponent } from '../table-item/table-item.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-justifications-screen',
     templateUrl: './justifications-screen.component.html',
     styleUrls: ['./justifications-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: listingProvidersFactory<Justification>({
-        entitiesService: JustificationsService,
-        component: JustificationsScreenComponent,
-    }),
+    providers: [
+        ...listingProvidersFactory<Justification>({
+            entitiesService: JustificationsService,
+            component: JustificationsScreenComponent,
+        }),
+        JustificationsDialogService,
+    ],
+    standalone: true,
+    imports: [IqserListingModule, CircleButtonComponent, NgIf, TableItemComponent, TranslateModule, AsyncPipe, IconButtonComponent],
 })
-export class JustificationsScreenComponent extends ListingComponent<Justification> implements OnInit {
+export default class JustificationsScreenComponent extends ListingComponent<Justification> implements OnInit {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
     readonly iconButtonTypes = IconButtonTypes;
     readonly tableHeaderLabel = _('justifications-listing.table-header');
@@ -35,7 +51,6 @@ export class JustificationsScreenComponent extends ListingComponent<Justificatio
         private readonly _justificationService: JustificationsService,
         private readonly _loadingService: LoadingService,
         private readonly _dialogService: JustificationsDialogService,
-        readonly userPreferenceService: UserPreferenceService,
         readonly permissionsService: PermissionsService,
     ) {
         super();
diff --git a/apps/red-ui/src/app/modules/admin/screens/justifications/justifications.module.ts b/apps/red-ui/src/app/modules/admin/screens/justifications/justifications.module.ts
deleted file mode 100644
index a831eca7d..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/justifications/justifications.module.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { JustificationsScreenComponent } from './justifications-screen/justifications-screen.component';
-import { RouterModule } from '@angular/router';
-import { SharedModule } from '@shared/shared.module';
-import { TableItemComponent } from './table-item/table-item.component';
-import { JustificationsDialogService } from './justifications-dialog.service';
-import { AddEditJustificationDialogComponent } from './add-edit-justification-dialog/add-edit-justification-dialog.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { CircleButtonComponent, HasScrollbarDirective, IconButtonComponent, IqserListingModule } from '@iqser/common-ui';
-
-const routes = [{ path: '', component: JustificationsScreenComponent }];
-
-@NgModule({
-    declarations: [JustificationsScreenComponent, TableItemComponent, AddEditJustificationDialogComponent],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        SharedModule,
-        TranslateModule,
-        IqserListingModule,
-        IconButtonComponent,
-        CircleButtonComponent,
-        HasScrollbarDirective,
-    ],
-    providers: [JustificationsDialogService],
-})
-export class JustificationsModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/justifications/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/admin/screens/justifications/table-item/table-item.component.ts
index 7589d40cc..eceb2184d 100644
--- a/apps/red-ui/src/app/modules/admin/screens/justifications/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/justifications/table-item/table-item.component.ts
@@ -3,11 +3,17 @@ import { getParam } from '@iqser/common-ui/lib/utils';
 import { DOSSIER_TEMPLATE_ID, Justification } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
 import { JustificationsDialogService } from '../justifications-dialog.service';
+import { MatTooltip } from '@angular/material/tooltip';
+import { CircleButtonComponent } from '@iqser/common-ui';
+import { NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-table-item',
     templateUrl: './table-item.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [MatTooltip, CircleButtonComponent, NgIf, TranslateModule],
 })
 export class TableItemComponent {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.ts
index 933a526b8..b20d89c66 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.ts
@@ -1,10 +1,14 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import { ChartConfiguration, ChartDataset } from 'chart.js';
+import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
 @Component({
     selector: 'redaction-chart',
     templateUrl: './chart.component.html',
     styleUrls: ['./chart.component.scss'],
+    standalone: true,
+    imports: [BaseChartDirective],
+    providers: [provideCharts(withDefaultRegisterables())],
 })
 export class ChartComponent implements OnChanges {
     @Input({ required: true }) datasets: ChartDataset[];
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-analysis-capacity-usage/license-analysis-capacity-usage.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/components/license-analysis-capacity-usage/license-analysis-capacity-usage.component.ts
index dea13ae32..98d336405 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-analysis-capacity-usage/license-analysis-capacity-usage.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-analysis-capacity-usage/license-analysis-capacity-usage.component.ts
@@ -8,11 +8,16 @@ import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { size } from '@iqser/common-ui/lib/utils';
 import { ILicenseData } from '@red/domain';
+import { SizePipe } from '@common-ui/pipes';
+import { AsyncPipe, DecimalPipe, NgIf } from '@angular/common';
+import { ChartComponent } from '../chart/chart.component';
 
 @Component({
     selector: 'red-license-analysis-capacity-usage',
     templateUrl: './license-analysis-capacity-usage.component.html',
     styleUrls: ['./license-analysis-capacity-usage.component.scss'],
+    standalone: true,
+    imports: [SizePipe, DecimalPipe, ChartComponent, AsyncPipe, NgIf],
 })
 export class LicenseAnalysisCapacityUsageComponent {
     readonly data$ = this.licenseService.selectedLicense$.pipe(map(() => this.#getData()));
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-page-usage/license-page-usage.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/components/license-page-usage/license-page-usage.component.ts
index 742ba0c28..9321df252 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-page-usage/license-page-usage.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-page-usage/license-page-usage.component.ts
@@ -4,14 +4,18 @@ import { map } from 'rxjs/operators';
 import { ChartDataset } from 'chart.js';
 import { ChartBlue, ChartGreen, ChartRed } from '../../utils/constants';
 import { getDataUntilCurrentMonth, getLabelsFromLicense, getLineConfig, isCurrentMonthAndYear } from '../../utils/functions';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ILicenseData } from '@red/domain';
+import { AsyncPipe, DecimalPipe, NgIf } from '@angular/common';
+import { ChartComponent } from '../chart/chart.component';
 
 @Component({
     selector: 'red-license-page-usage',
     templateUrl: './license-page-usage.component.html',
     styleUrls: ['./license-page-usage.component.scss'],
+    standalone: true,
+    imports: [DecimalPipe, TranslateModule, ChartComponent, NgIf, AsyncPipe],
 })
 export class LicensePageUsageComponent {
     readonly data$ = this.licenseService.selectedLicense$.pipe(map(() => this.#getData()));
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-retention-capacity-usage/license-retention-capacity.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/components/license-retention-capacity-usage/license-retention-capacity.component.ts
index e0cf890b9..37c5e5bbf 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-retention-capacity-usage/license-retention-capacity.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-retention-capacity-usage/license-retention-capacity.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { size } from '@iqser/common-ui/lib/utils';
 import { LicenseService } from '@services/license.service';
 import { map } from 'rxjs/operators';
@@ -8,11 +8,17 @@ import { ChartDataset } from 'chart.js';
 import { ChartBlack, ChartBlue, ChartGreen, ChartGrey, ChartRed } from '../../utils/constants';
 import { getDataUntilCurrentMonth, getLabelsFromLicense, getLineConfig } from '../../utils/functions';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { SizePipe } from '@common-ui/pipes';
+import { AsyncPipe, DecimalPipe, NgIf } from '@angular/common';
+import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.component';
+import { ChartComponent } from '../chart/chart.component';
 
 @Component({
     selector: 'red-license-retention-capacity',
     templateUrl: './license-retention-capacity.component.html',
     styleUrls: ['./license-retention-capacity.component.scss'],
+    standalone: true,
+    imports: [SizePipe, DecimalPipe, NgIf, DonutChartComponent, AsyncPipe, ChartComponent, TranslateModule],
 })
 export class LicenseRetentionCapacityComponent {
     readonly formatSize = size;
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/components/license-select/license-select.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/components/license-select/license-select.component.ts
index 609c9f95a..67c33c4c9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/components/license-select/license-select.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/components/license-select/license-select.component.ts
@@ -4,6 +4,11 @@ import { ILicense } from '@red/domain';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { map, tap } from 'rxjs/operators';
 import { LoadingService } from '@iqser/common-ui';
+import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet, UpperCasePipe } from '@angular/common';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 
 const translations = {
     active: _('license-info-screen.status.active'),
@@ -14,6 +19,20 @@ const translations = {
     selector: 'redaction-license-select',
     templateUrl: './license-select.component.html',
     styleUrls: ['./license-select.component.scss'],
+    standalone: true,
+    imports: [
+        AsyncPipe,
+        NgIf,
+        MatFormField,
+        MatSelect,
+        MatSelectTrigger,
+        FormsModule,
+        NgTemplateOutlet,
+        MatOption,
+        NgForOf,
+        TranslateModule,
+        UpperCasePipe,
+    ],
 })
 export class LicenseSelectComponent {
     value: ILicense;
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
index 8f89fab94..00dc524f5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
@@ -1,16 +1,35 @@
 import { Component } from '@angular/core';
-import { getConfig, IqserPermissionsService } from '@iqser/common-ui';
+import { getConfig, IqserListingModule, IqserPermissionsService, SizePipe } from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import type { AppConfig, User } from '@red/domain';
 import { LicenseService } from '@services/license.service';
 import { RouterHistoryService } from '@services/router-history.service';
 import { Roles } from '@users/roles';
+import { TranslateModule } from '@ngx-translate/core';
+import { AsyncPipe, DatePipe, NgIf } from '@angular/common';
+import { LicenseSelectComponent } from '../components/license-select/license-select.component';
+import { LicensePageUsageComponent } from '../components/license-page-usage/license-page-usage.component';
+import { LicenseAnalysisCapacityUsageComponent } from '../components/license-analysis-capacity-usage/license-analysis-capacity-usage.component';
+import { LicenseRetentionCapacityComponent } from '../components/license-retention-capacity-usage/license-retention-capacity.component';
 
 @Component({
     templateUrl: './license-screen.component.html',
     styleUrls: ['./license-screen.component.scss'],
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        TranslateModule,
+        AsyncPipe,
+        LicenseSelectComponent,
+        NgIf,
+        DatePipe,
+        SizePipe,
+        LicensePageUsageComponent,
+        LicenseAnalysisCapacityUsageComponent,
+        LicenseRetentionCapacityComponent,
+    ],
 })
-export class LicenseScreenComponent {
+export default class LicenseScreenComponent {
     protected readonly config = getConfig<AppConfig>();
     protected readonly roles = Roles;
     protected readonly currentUser = getCurrentUser<User>();
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts b/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts
deleted file mode 100644
index b509ca40e..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/license/license.module.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { inject, NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatSelectModule } from '@angular/material/select';
-import { RouterModule, Routes } from '@angular/router';
-import { IqserHelpModeModule, IqserListingModule, SizePipe } from '@iqser/common-ui';
-import { TranslateModule } from '@ngx-translate/core';
-import { LicenseService } from '@services/license.service';
-import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.component';
-import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
-import { ChartComponent } from './components/chart/chart.component';
-import { LicenseAnalysisCapacityUsageComponent } from './components/license-analysis-capacity-usage/license-analysis-capacity-usage.component';
-import { LicensePageUsageComponent } from './components/license-page-usage/license-page-usage.component';
-import { LicenseRetentionCapacityComponent } from './components/license-retention-capacity-usage/license-retention-capacity.component';
-import { LicenseSelectComponent } from './components/license-select/license-select.component';
-import { LicenseScreenComponent } from './license-screen/license-screen.component';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: LicenseScreenComponent,
-        resolve: {
-            licenseData: () => inject(LicenseService).loadLicenseData(),
-        },
-    },
-];
-
-@NgModule({
-    declarations: [
-        LicenseScreenComponent,
-        LicenseSelectComponent,
-        ChartComponent,
-        LicenseRetentionCapacityComponent,
-        LicensePageUsageComponent,
-        LicenseAnalysisCapacityUsageComponent,
-    ],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        TranslateModule,
-        MatSelectModule,
-        FormsModule,
-        IqserListingModule,
-        IqserHelpModeModule,
-        SizePipe,
-        DonutChartComponent,
-        BaseChartDirective,
-    ],
-    providers: [provideCharts(withDefaultRegisterables())],
-})
-export class LicenseModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.ts
index a58f2305f..ddf346f77 100644
--- a/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/permissions/permissions-screen/permissions-screen.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import {
     getConfig,
+    IqserListingModule,
     IqserPermissionsService,
     ListingComponent,
     listingProvidersFactory,
@@ -21,13 +22,18 @@ import { Roles } from '@users/roles';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { SortingOrders } from '@iqser/common-ui/lib/sorting';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     templateUrl: './permissions-screen.component.html',
     styleUrls: ['./permissions-screen.component.scss'],
     providers: listingProvidersFactory(PermissionsScreenComponent),
+    standalone: true,
+    imports: [IqserListingModule, NgIf, NgForOf, MatSlideToggle, AsyncPipe, TranslateModule],
 })
-export class PermissionsScreenComponent extends ListingComponent<PermissionsMapping> implements OnInit {
+export default class PermissionsScreenComponent extends ListingComponent<PermissionsMapping> implements OnInit {
     readonly #config = getConfig();
     readonly roles = Roles;
     readonly currentUser = getCurrentUser<User>();
diff --git a/apps/red-ui/src/app/modules/admin/screens/permissions/permissions.module.ts b/apps/red-ui/src/app/modules/admin/screens/permissions/permissions.module.ts
deleted file mode 100644
index c4fdbd7b6..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/permissions/permissions.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { PermissionsScreenComponent } from './permissions-screen/permissions-screen.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { IqserHelpModeModule, IqserListingModule } from '@iqser/common-ui';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-
-const routes = [{ path: '', component: PermissionsScreenComponent }];
-
-@NgModule({
-    declarations: [PermissionsScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, TranslateModule, IqserListingModule, IqserHelpModeModule, MatSlideToggleModule],
-})
-export class PermissionsModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.ts
index b2f827492..3d1f25e67 100644
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen/reports-screen.component.ts
@@ -1,7 +1,15 @@
 import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { DOSSIER_TEMPLATE_ID, IPlaceholdersResponse, IReportTemplate, User } from '@red/domain';
 import { download } from '@utils/file-download-utils';
-import { getConfig, IConfirmationDialogData, LoadingService, Toaster } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    getConfig,
+    HasScrollbarDirective,
+    IConfirmationDialogData,
+    IqserAllowDirective,
+    LoadingService,
+    Toaster,
+} from '@iqser/common-ui';
 import { PermissionsService } from '@services/permissions.service';
 import {
     generalPlaceholdersDescriptionsTranslations,
@@ -15,6 +23,8 @@ import { BehaviorSubject, firstValueFrom } from 'rxjs';
 import { Roles } from '@users/roles';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { getParam } from '@iqser/common-ui/lib/utils';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 interface Placeholder {
     placeholder: string;
@@ -30,8 +40,10 @@ const placeholderTypes: PlaceholderType[] = ['generalPlaceholders', 'fileAttribu
     templateUrl: './reports-screen.component.html',
     styleUrls: ['./reports-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [HasScrollbarDirective, NgIf, NgForOf, AsyncPipe, TranslateModule, CircleButtonComponent, IqserAllowDirective],
 })
-export class ReportsScreenComponent implements OnInit {
+export default class ReportsScreenComponent implements OnInit {
     @ViewChild('fileInput') private readonly _fileInput: ElementRef;
     readonly placeholders$ = new BehaviorSubject<Placeholder[]>([]);
     readonly availableTemplates$ = new BehaviorSubject<IReportTemplate[]>([]);
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts b/apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts
deleted file mode 100644
index 9175eae4b..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { ReportsScreenComponent } from './reports-screen/reports-screen.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { CircleButtonComponent, HasScrollbarDirective, IqserAllowDirective, IqserHelpModeModule, IqserRoutes } from '@iqser/common-ui';
-
-const routes: IqserRoutes = [{ path: '', component: ReportsScreenComponent }];
-
-@NgModule({
-    declarations: [ReportsScreenComponent],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        TranslateModule,
-        IqserHelpModeModule,
-        CircleButtonComponent,
-        HasScrollbarDirective,
-        IqserAllowDirective,
-    ],
-})
-export class ReportsModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
index 1e2396d05..4abb3ca5e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, OnChanges, OnInit, signal, SimpleChanges } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, OnInit, signal } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
-import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
+import { IconButtonComponent, IconButtonTypes, IqserTranslateModule, LoadingService, Toaster } from '@iqser/common-ui';
 import { RulesService } from '../../../services/rules.service';
 import { firstValueFrom } from 'rxjs';
 import { DOSSIER_TEMPLATE_ID, DroolsKeywords, IRules } from '@red/domain';
@@ -12,6 +12,10 @@ import { rulesScreenTranslations } from '../../../translations/rules-screen-tran
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
+import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
+import { MatIcon } from '@angular/material/icon';
+import { FormsModule } from '@angular/forms';
+import { NgIf } from '@angular/common';
 
 interface SyntaxError {
     line: number;
@@ -32,8 +36,10 @@ const RULE_VALIDATION_TIMEOUT = 2000;
     templateUrl: './rules-screen.component.html',
     styleUrls: ['./rules-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [MonacoEditorModule, MatIcon, FormsModule, IqserTranslateModule, IconButtonComponent, NgIf],
 })
-export class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
+export default class RulesScreenComponent implements OnInit, ComponentCanDeactivate {
     readonly translations = rulesScreenTranslations;
 
     readonly iconButtonTypes = IconButtonTypes;
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules.module.ts b/apps/red-ui/src/app/modules/admin/screens/rules/rules.module.ts
deleted file mode 100644
index e6b248714..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { RulesScreenComponent } from './rules-screen/rules-screen.component';
-import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { PendingChangesGuard } from '@guards/can-deactivate.guard';
-import { TranslateModule } from '@ngx-translate/core';
-import { IconButtonComponent } from '@iqser/common-ui';
-import { FormsModule } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
-
-const routes = [{ path: '', component: RulesScreenComponent, canDeactivate: [PendingChangesGuard] }];
-
-@NgModule({
-    declarations: [RulesScreenComponent],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        MonacoEditorModule,
-        TranslateModule,
-        IconButtonComponent,
-        FormsModule,
-        MatIconModule,
-    ],
-})
-export class RulesModule {}

From 9409261f3b79014489ed038413038b04f6145a71 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Tue, 11 Jun 2024 19:35:11 +0300
Subject: [PATCH 02/17] RED-9321: removed file-preview and dossier-overview
 modules, use standalone.

---
 apps/red-ui/src/app/app-routing.module.ts     |   8 +-
 apps/red-ui/src/app/app.module.ts             |   3 +-
 .../src/app/guards/edit-attribute.guard.ts    |   8 -
 .../src/app/guards/file-attribute.guard.ts    |   7 +
 .../app/modules/admin/admin-routing.module.ts |   4 +-
 .../src/app/modules/admin/admin.module.ts     |  11 +-
 ...ase-dossier-template-screen.component.html |   2 -
 ...edit-component-mapping-dialog.component.ts |  11 +-
 ...m-delete-dossier-state-dialog.component.ts |   3 +-
 .../table-item/table-item.component.ts        |   4 +-
 .../active-fields-listing.component.ts        |   3 +-
 ...-attributes-csv-import-dialog.component.ts |  19 +-
 .../dossier-template-details.component.ts     |   4 +-
 .../screens/watermark/watermark.module.ts     |   3 +-
 .../modules/archive/archive-routing.module.ts |   4 +-
 .../src/app/modules/archive/archive.module.ts |   3 +-
 ...ssier-overview-bulk-actions.component.html |   7 +-
 ...dossier-overview-bulk-actions.component.ts |   8 +-
 .../dossier-details-stats.component.ts        |   5 +
 .../dossier-details.component.html            |   2 +-
 .../dossier-details.component.ts              |  38 +++-
 ...ossier-overview-screen-header.component.ts |  34 +++-
 .../file-workload/file-workload.component.ts  |   6 +
 .../table-item/table-item.component.ts        |  31 ++++
 .../view-mode-selection.component.ts          |  11 +-
 .../workflow-item/workflow-item.component.ts  |  27 ++-
 .../dossier-overview.module.ts                |  75 --------
 .../dossier-overview.routes.ts                |  15 ++
 .../dossier-overview-screen.component.ts      |  24 ++-
 .../dossiers-listing.module.ts                |   9 +-
 .../annotation-actions.component.ts           |   6 +-
 .../annotation-card.component.ts              |   6 +
 .../annotation-details.component.ts           |   8 +-
 .../annotation-reference.component.ts         |   9 +-
 .../annotation-references-list.component.ts   |  17 ++
 ...ion-references-page-indicator.component.ts |   3 +
 .../annotation-wrapper.component.ts           |  22 ++-
 .../annotations-list.component.ts             |   6 +
 .../components/comments/comments.component.ts |   8 +-
 .../document-info/document-info.component.ts  |   6 +
 .../file-workload/file-workload.component.ts  |  43 ++++-
 .../highlights-separator.component.html       |   4 +-
 .../highlights-separator.component.ts         |   6 +
 .../page-exclusion.component.ts               |   6 +-
 .../page-indicator.component.ts               |   4 +
 .../components/pages/pages.component.ts       |   4 +
 .../readonly-banner.component.ts              |   7 +
 .../file-preview-right-container.component.ts |   9 +-
 .../user-management.component.ts              |  18 +-
 .../view-switch/view-switch.component.ts      |   6 +-
 .../add-hint-dialog.component.ts              |  37 +++-
 .../change-legal-basis-dialog.component.ts    |  27 ++-
 .../add-annotation-dialog.component.ts        |  25 ++-
 .../edit-annotation-dialog.component.ts       |  31 +++-
 .../remove-annotation-dialog.component.ts     |  32 +++-
 .../document-info-dialog.component.ts         |   8 +-
 .../edit-redaction-dialog.component.ts        |  39 +++-
 .../force-annotation-dialog.component.ts      |  40 ++++-
 .../highlight-action-dialog.component.ts      |  32 +++-
 .../import-redactions-dialog.ts               |  11 +-
 .../manual-annotation-dialog.component.ts     |  34 +++-
 .../redact-recommendation-dialog.component.ts |  41 ++++-
 .../redact-text-dialog.component.ts           |  38 +++-
 .../remove-redaction-dialog.component.ts      |  36 +++-
 .../resize-redaction-dialog.component.ts      |  32 +++-
 .../file-preview-screen.component.ts          |  30 +++-
 .../file-preview/file-preview.module.ts       | 170 ------------------
 .../file-preview/file-preview.routes.ts       |  18 ++
 .../src/app/modules/search/search.module.ts   |   3 +-
 .../date-column/date-column.component.ts      |   3 +
 .../file-actions/file-actions.component.ts    |   7 +-
 .../shared-dossiers/shared-dossiers.module.ts |  16 +-
 .../annotation-icon.component.ts              |   1 +
 .../assign-user-dropdown.component.ts         |  24 ++-
 .../file-download-btn.component.ts            |   5 +-
 .../expandable-file-actions.component.ts      |  28 ++-
 .../file-name-column.component.ts             |   6 +
 .../file-stats/file-stats.component.ts        |   6 +
 .../ocr-progress-bar.component.ts             |   5 +
 .../processing-indicator.component.ts         |   6 +
 .../team-members/team-members.component.ts    |   9 +-
 .../type-filter/type-filter.component.ts      |   7 +-
 .../shared/directives/long-press.directive.ts |   1 +
 .../src/app/modules/shared/shared.module.ts   |  26 +--
 .../src/app/modules/trash/trash.module.ts     |   5 +-
 libs/common-ui                                |   2 +-
 86 files changed, 1029 insertions(+), 399 deletions(-)
 delete mode 100644 apps/red-ui/src/app/guards/edit-attribute.guard.ts
 create mode 100644 apps/red-ui/src/app/guards/file-attribute.guard.ts
 delete mode 100644 apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
 create mode 100644 apps/red-ui/src/app/modules/dossier-overview/dossier-overview.routes.ts
 delete mode 100644 apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
 create mode 100644 apps/red-ui/src/app/modules/file-preview/file-preview.routes.ts

diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts
index 82e164ea3..65a0f0614 100644
--- a/apps/red-ui/src/app/app-routing.module.ts
+++ b/apps/red-ui/src/app/app-routing.module.ts
@@ -8,7 +8,7 @@ import { DossierFilesGuard } from '@guards/dossier-files-guard';
 import { templateExistsWhenEnteringDossierList } from '@guards/dossier-template-exists.guard';
 import { DossierTemplatesGuard } from '@guards/dossier-templates.guard';
 import { loadActiveDossiersGuard, loadAllDossiersGuard, loadArchivedDossiersGuard } from '@guards/dossiers.guard';
-import { editAttributeGuard } from '@guards/edit-attribute.guard';
+import { isNotEditingFileAttributeGuard } from '@guards/file-attribute.guard';
 import { FeaturesGuard } from '@guards/features-guard.service';
 import { ifLoggedIn } from '@guards/if-logged-in.guard';
 import { TrashGuard } from '@guards/trash.guard';
@@ -38,7 +38,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [
             {
                 path: `:${DOSSIER_ID}`,
                 canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
-                canDeactivate: [editAttributeGuard],
+                canDeactivate: [isNotEditingFileAttributeGuard],
                 data: {
                     routeGuards: [DossierFilesGuard],
                     breadcrumbs: [BreadcrumbTypes.dossierTemplate, BreadcrumbTypes.dossier],
@@ -49,7 +49,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [
                     },
                     skeleton: 'dossier',
                 },
-                loadChildren: () => import('./modules/dossier-overview/dossier-overview.module').then(m => m.DossierOverviewModule),
+                loadChildren: () => import('./modules/dossier-overview/dossier-overview.routes'),
             },
             {
                 path: `:${DOSSIER_ID}/file/:${FILE_ID}`,
@@ -63,7 +63,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [
                         redirectTo: '/auth-error',
                     },
                 },
-                loadChildren: () => import('./modules/file-preview/file-preview.module').then(m => m.FilePreviewModule),
+                loadChildren: () => import('./modules/file-preview/file-preview.routes'),
             },
             {
                 path: '',
diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 90d3d1daa..49d997e5b 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -44,7 +44,7 @@ import {
 import { CommonUiModule } from '@iqser/common-ui/lib/common-ui.module';
 import { LogoComponent, SkeletonComponent, ToastComponent } from '@iqser/common-ui/lib/shared';
 import { TenantsModule } from '@iqser/common-ui/lib/tenants';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
+import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { MissingTranslationHandler } from '@ngx-translate/core';
 import { AppConfig, ILoggerConfig } from '@red/domain';
@@ -186,6 +186,7 @@ export const appModuleFactory = (config: AppConfig) => {
             IconButtonComponent,
             MatDividerModule,
             ChevronButtonComponent,
+            InitialsAvatarComponent,
         ],
         providers: [
             {
diff --git a/apps/red-ui/src/app/guards/edit-attribute.guard.ts b/apps/red-ui/src/app/guards/edit-attribute.guard.ts
deleted file mode 100644
index 654ef1588..000000000
--- a/apps/red-ui/src/app/guards/edit-attribute.guard.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { inject } from '@angular/core';
-import { CanDeactivateFn } from '@angular/router';
-import { FileAttributesService } from '@services/entity-services/file-attributes.service';
-import { DossierOverviewScreenComponent } from '../modules/dossier-overview/screen/dossier-overview-screen.component';
-
-// TODO: rename to something like "isNotEditingFileAttributeGuard"
-export const editAttributeGuard: CanDeactivateFn<DossierOverviewScreenComponent> = () =>
-    !inject(FileAttributesService).isEditingFileAttribute();
diff --git a/apps/red-ui/src/app/guards/file-attribute.guard.ts b/apps/red-ui/src/app/guards/file-attribute.guard.ts
new file mode 100644
index 000000000..a5832cbc6
--- /dev/null
+++ b/apps/red-ui/src/app/guards/file-attribute.guard.ts
@@ -0,0 +1,7 @@
+import { inject } from '@angular/core';
+import { CanDeactivateFn } from '@angular/router';
+import { FileAttributesService } from '@services/entity-services/file-attributes.service';
+import DossierOverviewScreenComponent from '../modules/dossier-overview/screen/dossier-overview-screen.component';
+
+export const isNotEditingFileAttributeGuard: CanDeactivateFn<DossierOverviewScreenComponent> = () =>
+    !inject(FileAttributesService).isEditingFileAttribute();
diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
index 4114c2532..d393bad31 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
@@ -44,6 +44,7 @@ const entityRoutes: IqserRoutes = [
 ];
 
 const dossierTemplateIdRoutes: IqserRoutes = [
+    { path: '', redirectTo: 'info', pathMatch: 'full' },
     {
         path: 'entities',
         children: entityRoutes,
@@ -152,7 +153,6 @@ const dossierTemplateIdRoutes: IqserRoutes = [
                     },
                 },
             },
-            { path: '', redirectTo: 'info', pathMatch: 'full' },
         ],
     },
 ];
@@ -180,6 +180,7 @@ const dossierTemplatesRoutes: IqserRoutes = [
 ];
 
 const routes: IqserRoutes = [
+    { path: '', redirectTo: 'dossier-templates', pathMatch: 'full' },
     {
         path: 'dossier-templates',
         children: dossierTemplatesRoutes,
@@ -271,7 +272,6 @@ const routes: IqserRoutes = [
                     },
                 },
             },
-            { path: '', redirectTo: 'dossier-templates', pathMatch: 'full' },
         ],
     },
 ];
diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index f41dbc11b..8b5b705ad 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -47,17 +47,19 @@ import {
     IqserDenyDirective,
     IqserHelpModeModule,
     IqserListingModule,
-    IqserUploadFileModule,
     RoundCheckboxComponent,
+    UploadFileComponent,
 } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { AuditInfoDialogComponent } from './dialogs/audit-info-dialog/audit-info-dialog.component';
 import { DossierTemplateActionsComponent } from './shared/components/dossier-template-actions/dossier-template-actions.component';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
+import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
 import { SelectComponent } from '@shared/components/select/select.component';
 import { PaginationComponent } from '@common-ui/pagination/pagination.component';
 import { AddCloneDossierTemplateDialogComponent } from './dialogs/add-clone-dossier-template-dialog/add-clone-dossier-template-dialog.component';
 import { ComponentMappingsScreenComponent } from './screens/component-mappings/component-mappings-screen.component';
+import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
+import { NamePipe } from '@common-ui/users/name.pipe';
 
 const dialogs = [
     AddCloneDossierTemplateDialogComponent,
@@ -109,7 +111,6 @@ const components = [
         TranslateModule,
         HumanizePipe,
         IqserListingModule,
-        IqserUploadFileModule,
         IqserHelpModeModule,
         AdminSideNavComponent,
         DossierTemplateActionsComponent,
@@ -127,6 +128,10 @@ const components = [
         IqserDenyDirective,
         SelectComponent,
         PaginationComponent,
+        AnnotationIconComponent,
+        InitialsAvatarComponent,
+        UploadFileComponent,
+        NamePipe,
     ],
 })
 export class AdminModule {}
diff --git a/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.html b/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.html
index 84f9dc06e..df547aa94 100644
--- a/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.html
@@ -1,5 +1,3 @@
-<!--TODO: Use this for all dossier template screens -->
-
 <section>
     <div class="page-header">
         <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
index 4175a68f4..952cb5c16 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component.ts
@@ -1,13 +1,13 @@
 import { Component, OnInit } from '@angular/core';
-import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialogComponent, IqserUploadFileModule } from '@iqser/common-ui';
+import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, IqserDialogComponent, UploadFileComponent } from '@iqser/common-ui';
 import { FileAttributeEncodingTypes, IComponentMapping } from '@red/domain';
 import { FormBuilder, ReactiveFormsModule, UntypedFormGroup, Validators } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgForOf, NgIf } from '@angular/common';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatDialogClose } from '@angular/material/dialog';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatOption } from '@angular/material/autocomplete';
-import { MatSelect } from '@angular/material/select';
+import { MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { fileAttributeEncodingTypesTranslations } from '@translations/file-attribute-encoding-types-translations';
 import { firstValueFrom } from 'rxjs';
 import { ComponentMappingsService } from '@services/entity-services/component-mappings.service';
@@ -35,11 +35,12 @@ interface DialogResult {
         MatFormFieldModule,
         NgForOf,
         CircleButtonComponent,
-        MatDialogClose,
-        IqserUploadFileModule,
+        MatDialogModule,
         MatOption,
+        MatSelectTrigger,
         MatSelect,
         IconButtonComponent,
+        UploadFileComponent,
     ],
 })
 export class AddEditComponentMappingDialogComponent
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
index bd0e871f1..2f61e9cb8 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-states-listing/confirm-delete-dossier-state-dialog/confirm-delete-dossier-state-dialog.component.ts
@@ -11,7 +11,7 @@ import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.se
 import { TranslateModule } from '@ngx-translate/core';
 import { MatCheckbox } from '@angular/material/checkbox';
 import { MatFormField } from '@angular/material/form-field';
-import { MatOption, MatSelect } from '@angular/material/select';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { NgForOf, NgIf } from '@angular/common';
 
 export interface ConfirmDeleteDossierStateDialogData {
@@ -29,6 +29,7 @@ export interface ConfirmDeleteDossierStateDialogData {
         ReactiveFormsModule,
         MatCheckbox,
         MatFormField,
+        MatSelectTrigger,
         MatSelect,
         MatOption,
         NgForOf,
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts
index ecda4d86b..fb26a773c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts
@@ -8,8 +8,8 @@ import { MatTooltip } from '@angular/material/tooltip';
 import { AsyncPipe, DatePipe, NgIf } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
-import { IqserUsersModule } from '@common-ui/users';
 import { DossierTemplateActionsComponent } from '../../../shared/components/dossier-template-actions/dossier-template-actions.component';
+import { InitialsAvatarComponent } from '@common-ui/users';
 
 @Component({
     selector: 'redaction-table-item [dossierTemplate]',
@@ -17,7 +17,7 @@ import { DossierTemplateActionsComponent } from '../../../shared/components/doss
     styleUrls: ['./table-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [MatTooltip, NgIf, AsyncPipe, MatIcon, TranslateModule, IqserUsersModule, DatePipe, DossierTemplateActionsComponent],
+    imports: [MatTooltip, NgIf, AsyncPipe, MatIcon, TranslateModule, DatePipe, DossierTemplateActionsComponent, InitialsAvatarComponent],
 })
 export class TableItemComponent implements OnChanges {
     @Input() dossierTemplate!: DossierTemplate;
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
index eaf723efc..4a54df699 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
@@ -16,7 +16,7 @@ import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
 import { TranslateModule } from '@ngx-translate/core';
 import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { MatFormField } from '@angular/material/form-field';
-import { MatOption, MatSelect } from '@angular/material/select';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { FormsModule } from '@angular/forms';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 
@@ -36,6 +36,7 @@ import { MatSlideToggle } from '@angular/material/slide-toggle';
         MatMenu,
         EditableInputComponent,
         MatFormField,
+        MatSelectTrigger,
         MatSelect,
         MatOption,
         FormsModule,
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index e9f36d9cf..0117a9352 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -23,7 +23,7 @@ import { trackByFactory } from '@iqser/common-ui/lib/utils';
 import { MatFormField } from '@angular/material/form-field';
 import { MatAutocomplete, MatAutocompleteTrigger, MatOption } from '@angular/material/autocomplete';
 import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
-import { MatSelect } from '@angular/material/select';
+import { MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { ActiveFieldsListingComponent } from './active-fields-listing/active-fields-listing.component';
 
 export interface IFileAttributesCSVImportData {
@@ -46,6 +46,7 @@ export interface IFileAttributesCSVImportData {
         MatAutocomplete,
         AsyncPipe,
         MatOption,
+        MatSelectTrigger,
         MatSelect,
         CircleButtonComponent,
         NgIf,
@@ -81,7 +82,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
         @Inject(MAT_DIALOG_DATA) readonly data: IFileAttributesCSVImportData,
     ) {
         super();
-        this.form = this._getForm();
+        this.form = this.#getForm();
         this.readFile();
     }
 
@@ -117,7 +118,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
                 this.parseResult.meta.fields = Object.keys(this.parseResult.data[0]);
             }
 
-            this.entitiesService.setEntities(this.parseResult.meta.fields.map(field => this._buildAttribute(field)));
+            this.entitiesService.setEntities(this.parseResult.meta.fields.map(field => this.#buildAttribute(field)));
             this.activeFields = [];
 
             for (const entity of this.allEntities) {
@@ -155,7 +156,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
                 encoding: this.form.get('encoding').value,
             };
         });
-        reader.readAsText(this.data.csv, this._mapEncoding(this.form.get('encoding').value));
+        reader.readAsText(this.data.csv, this.#mapEncoding(this.form.get('encoding').value));
     }
 
     getSample(csvColumn: string) {
@@ -245,15 +246,15 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
         }, 0);
     }
 
-    private _getForm(): UntypedFormGroup {
+    #getForm(): UntypedFormGroup {
         return this._formBuilder.group({
-            filenameMappingColumnHeaderName: ['', [Validators.required, this._autocompleteStringValidator()]],
+            filenameMappingColumnHeaderName: ['', [Validators.required, this.#autocompleteStringValidator()]],
             delimiter: [undefined, Validators.required],
             encoding: [this.data.existingConfiguration?.encoding, Validators.required],
         });
     }
 
-    private _autocompleteStringValidator(): ValidatorFn {
+    #autocompleteStringValidator(): ValidatorFn {
         return (control: AbstractControl): { [key: string]: any } | null => {
             if ((this.parseResult?.meta?.fields || []).indexOf(control.value) !== -1) {
                 return null; /* valid option selected */
@@ -262,7 +263,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
         };
     }
 
-    private _buildAttribute(csvColumn: string): IField {
+    #buildAttribute(csvColumn: string): IField {
         const sample = this.getSample(csvColumn);
         const isNumber = sample && !isNaN(sample);
         return {
@@ -276,7 +277,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<IFi
         };
     }
 
-    private _mapEncoding(encoding: string) {
+    #mapEncoding(encoding: string) {
         if (!encoding) {
             return 'UTF-8';
         }
diff --git a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts
index 7b197262b..125e7f4b3 100644
--- a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts
@@ -5,9 +5,9 @@ import { DossierTemplatesService } from '@services/dossier-templates/dossier-tem
 import { DossierTemplateStatsService } from '@services/entity-services/dossier-template-stats.service';
 import { dossierTemplateStatusTranslations } from '@translations/dossier-template-status-translations';
 import { AsyncPipe, DatePipe, NgIf } from '@angular/common';
-import { IqserUsersModule } from '@common-ui/users';
 import { MatIcon } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
+import { InitialsAvatarComponent } from '@common-ui/users';
 
 interface Context {
     readonly dossierTemplate: DossierTemplate;
@@ -19,7 +19,7 @@ interface Context {
     templateUrl: './dossier-template-details.component.html',
     styleUrls: ['./dossier-template-details.component.scss'],
     standalone: true,
-    imports: [NgIf, AsyncPipe, IqserUsersModule, MatIcon, TranslateModule, DatePipe],
+    imports: [NgIf, AsyncPipe, MatIcon, TranslateModule, DatePipe, InitialsAvatarComponent],
 })
 export class DossierTemplateDetailsComponent extends ContextComponent<Context> implements OnInit {
     readonly translations = dossierTemplateStatusTranslations;
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
index 957c02fb1..1e9b3370b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
@@ -24,7 +24,7 @@ import { MatSliderModule } from '@angular/material/slider';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { IqserAuthGuard, IqserUsersModule } from '@iqser/common-ui/lib/users';
+import { InitialsAvatarComponent, IqserAuthGuard, IqserUsersModule } from '@iqser/common-ui/lib/users';
 
 const routes: IqserRoutes = [
     {
@@ -72,6 +72,7 @@ const routes: IqserRoutes = [
         HasScrollbarDirective,
         IqserAllowDirective,
         MatTooltipModule,
+        InitialsAvatarComponent,
     ],
 })
 export class WatermarkModule {}
diff --git a/apps/red-ui/src/app/modules/archive/archive-routing.module.ts b/apps/red-ui/src/app/modules/archive/archive-routing.module.ts
index 3d27234d5..b29767a79 100644
--- a/apps/red-ui/src/app/modules/archive/archive-routing.module.ts
+++ b/apps/red-ui/src/app/modules/archive/archive-routing.module.ts
@@ -28,7 +28,7 @@ const routes: Routes = [
             dossiersService: ARCHIVED_DOSSIERS_SERVICE,
             skeleton: 'dossier',
         },
-        loadChildren: () => import('../dossier-overview/dossier-overview.module').then(m => m.DossierOverviewModule),
+        loadChildren: () => import('../dossier-overview/dossier-overview.routes'),
     },
     {
         path: `:${DOSSIER_ID}/file/:${FILE_ID}`,
@@ -38,7 +38,7 @@ const routes: Routes = [
             breadcrumbs: [BreadcrumbTypes.dossierTemplate, BreadcrumbTypes.dossier, BreadcrumbTypes.file],
             dossiersService: ARCHIVED_DOSSIERS_SERVICE,
         },
-        loadChildren: () => import('../file-preview/file-preview.module').then(m => m.FilePreviewModule),
+        loadChildren: () => import('../file-preview/file-preview.routes'),
     },
 ];
 
diff --git a/apps/red-ui/src/app/modules/archive/archive.module.ts b/apps/red-ui/src/app/modules/archive/archive.module.ts
index ec6dd7e41..96bc7884e 100644
--- a/apps/red-ui/src/app/modules/archive/archive.module.ts
+++ b/apps/red-ui/src/app/modules/archive/archive.module.ts
@@ -8,7 +8,7 @@ import { IqserHelpModeModule, IqserListingModule } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { SharedModule } from '@shared/shared.module';
 import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
+import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
 
 @NgModule({
     declarations: [TableItemComponent, ArchivedDossiersScreenComponent],
@@ -21,6 +21,7 @@ import { IqserUsersModule } from '@iqser/common-ui/lib/users';
         IqserListingModule,
         SharedModule,
         SharedDossiersModule,
+        InitialsAvatarComponent,
     ],
     providers: [ConfigService],
 })
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html
index 2514ba77b..3f4b3facf 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.html
@@ -1,4 +1,9 @@
 <ng-container (longPress)="forceReanalysisAction($event)" *ngIf="selectedFiles.length" redactionLongPress>
-    <redaction-expandable-file-actions [actions]="buttons" [buttonType]="buttonType" [maxWidth]="maxWidth" [tooltipPosition]="'above'">
+    <redaction-expandable-file-actions
+        [actions]="buttons"
+        [buttonType]="buttonType"
+        [maxWidth]="maxWidth"
+        [tooltipPosition]="IqserTooltipPositions.above"
+    >
     </redaction-expandable-file-actions>
 </ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.ts
index 3fb474e9b..6c08f7057 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/bulk-actions/dossier-overview-bulk-actions.component.ts
@@ -3,14 +3,19 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { CircleButtonType, CircleButtonTypes } from '@iqser/common-ui';
 import { Action, ActionTypes, Dossier, File, ProcessingFileStatuses } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
-import { LongPressEvent } from '@shared/directives/long-press.directive';
+import { LongPressDirective, LongPressEvent } from '@shared/directives/long-press.directive';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { BulkActionsService } from '../../services/bulk-actions.service';
+import { ExpandableFileActionsComponent } from '@shared/components/expandable-file-actions/expandable-file-actions.component';
+import { IqserTooltipPositions } from '@common-ui/utils';
+import { NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-dossier-overview-bulk-actions [dossier] [selectedFiles]',
     templateUrl: './dossier-overview-bulk-actions.component.html',
     styleUrls: ['./dossier-overview-bulk-actions.component.scss'],
+    standalone: true,
+    imports: [LongPressDirective, ExpandableFileActionsComponent, NgIf],
 })
 export class DossierOverviewBulkActionsComponent implements OnChanges {
     #analysisForced: boolean;
@@ -37,6 +42,7 @@ export class DossierOverviewBulkActionsComponent implements OnChanges {
     @Input() buttonType: CircleButtonType = CircleButtonTypes.default;
     @Input() maxWidth: number;
     buttons: Action[];
+    readonly IqserTooltipPositions = IqserTooltipPositions;
 
     constructor(
         private readonly _permissionsService: PermissionsService,
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
index f8039a3dd..b4ed970ba 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
@@ -6,11 +6,16 @@ import { firstValueFrom, Observable } from 'rxjs';
 import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
 import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
 import { getConfig } from '@iqser/common-ui';
+import { MatIcon } from '@angular/material/icon';
+import { AsyncPipe, DatePipe, DecimalPipe, NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-dossier-details-stats',
     templateUrl: './dossier-details-stats.component.html',
     styleUrls: ['./dossier-details-stats.component.scss'],
+    standalone: true,
+    imports: [MatIcon, NgIf, AsyncPipe, TranslateModule, DatePipe, DecimalPipe, NgForOf],
 })
 export class DossierDetailsStatsComponent implements OnInit {
     @Input() dossierAttributes: DossierAttributeWithValue[];
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
index 600137940..11f76be95 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
@@ -106,7 +106,7 @@
     <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [icon]="'iqser:' + action"
-        [tooltipPosition]="'before'"
+        [tooltipPosition]="IqserTooltipPositions.before"
         [tooltip]="tooltip"
     ></iqser-circle-button>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts
index 28c23f3fe..61e3ec577 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts
@@ -13,7 +13,14 @@ import {
 } from '@red/domain';
 import { TranslateChartService } from '@services/translate-chart.service';
 import { UserService } from '@users/user.service';
-import { getConfig, ProgressBarConfigModel, Toaster } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    getConfig,
+    IqserAllowDirective,
+    IqserLoadingModule,
+    ProgressBarConfigModel,
+    Toaster,
+} from '@iqser/common-ui';
 import { workflowFileStatusTranslations } from '@translations/file-status-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { combineLatestWith, firstValueFrom } from 'rxjs';
@@ -22,9 +29,16 @@ import { map, tap } from 'rxjs/operators';
 import { DossiersService } from '@services/dossiers/dossiers.service';
 import { FilesMapService } from '@services/files/files-map.service';
 import { Roles } from '@users/roles';
-import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { getCurrentUser, InitialsAvatarComponent } from '@iqser/common-ui/lib/users';
 import { FilterService, INestedFilter } from '@iqser/common-ui/lib/filtering';
-import { ContextComponent, getParam, shareLast } from '@iqser/common-ui/lib/utils';
+import { ContextComponent, getParam, IqserTooltipPositions, shareLast } from '@iqser/common-ui/lib/utils';
+import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { TeamMembersComponent } from '@shared/components/team-members/team-members.component';
+import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.component';
+import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component';
+import { DossierDetailsStatsComponent } from '../dossier-details-stats/dossier-details-stats.component';
+import { AssignUserDropdownComponent } from '@shared/components/assign-user-dropdown/assign-user-dropdown.component';
 
 interface DossierDetailsContext {
     needsWorkFilters: INestedFilter[] | undefined;
@@ -37,6 +51,23 @@ interface DossierDetailsContext {
     selector: 'redaction-dossier-details',
     templateUrl: './dossier-details.component.html',
     styleUrls: ['./dossier-details.component.scss'],
+    standalone: true,
+    imports: [
+        NgTemplateOutlet,
+        NgIf,
+        AsyncPipe,
+        CircleButtonComponent,
+        IqserAllowDirective,
+        TranslateModule,
+        TeamMembersComponent,
+        DonutChartComponent,
+        IqserLoadingModule,
+        NgForOf,
+        TypeFilterComponent,
+        DossierDetailsStatsComponent,
+        AssignUserDropdownComponent,
+        InitialsAvatarComponent,
+    ],
 })
 export class DossierDetailsComponent extends ContextComponent<DossierDetailsContext> {
     #currentChartSubtitleIndex = 0;
@@ -50,6 +81,7 @@ export class DossierDetailsComponent extends ContextComponent<DossierDetailsCont
     readonly expandTooltip = _('dossier-details.expand');
     chartConfig: DonutChartConfig[] = [];
     readonly isDocumine = getConfig().IS_DOCUMINE;
+    readonly IqserTooltipPositions = IqserTooltipPositions;
 
     constructor(
         private readonly _toaster: Toaster,
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.ts
index ceb2006b9..77c99b6b3 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/screen-header/dossier-overview-screen-header.component.ts
@@ -1,5 +1,17 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { ActionConfig, CircleButtonTypes, EntitiesService, getConfig, ListingService, LoadingService, Toaster } from '@iqser/common-ui';
+import {
+    ActionConfig,
+    CircleButtonComponent,
+    CircleButtonTypes,
+    DisableStopPropagationDirective,
+    EntitiesService,
+    getConfig,
+    IqserAllowDirective,
+    IqserListingModule,
+    ListingService,
+    LoadingService,
+    Toaster,
+} from '@iqser/common-ui';
 import { Dossier, File, IFile } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@@ -14,10 +26,30 @@ import { Roles } from '@users/roles';
 import { SortingService } from '@iqser/common-ui/lib/sorting';
 import { List, some } from '@iqser/common-ui/lib/utils';
 import { ComponentLogService } from '@services/files/component-log.service';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { FileDownloadBtnComponent } from '@shared/components/buttons/file-download-btn/file-download-btn.component';
+import { ViewModeSelectionComponent } from '../view-mode-selection/view-mode-selection.component';
 
 @Component({
     selector: 'redaction-dossier-overview-screen-header [dossier] [upload]',
     templateUrl: './dossier-overview-screen-header.component.html',
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        CircleButtonComponent,
+        MatMenuTrigger,
+        IqserAllowDirective,
+        AsyncPipe,
+        TranslateModule,
+        FileDownloadBtnComponent,
+        NgIf,
+        ViewModeSelectionComponent,
+        DisableStopPropagationDirective,
+        MatMenu,
+        MatMenuItem,
+    ],
 })
 export class DossierOverviewScreenHeaderComponent implements OnInit {
     @Input() dossier: Dossier;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.ts
index 69865f1c6..e28112268 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-workload/file-workload.component.ts
@@ -6,12 +6,18 @@ import { DictionariesMapService } from '@services/entity-services/dictionaries-m
 import { UserService } from '@users/user.service';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'redaction-file-workload',
     templateUrl: './file-workload.component.html',
     styleUrls: ['./file-workload.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [AnnotationIconComponent, AsyncPipe, TranslateModule, MatIcon, NgIf],
 })
 export class FileWorkloadComponent implements OnInit {
     #dossierTemplateId: string;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts
index 9aa920909..69b4dfb1f 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/table-item.component.ts
@@ -2,11 +2,42 @@ import { Component, Input } from '@angular/core';
 import { getConfig } from '@iqser/common-ui';
 import { Dossier, File, IFileAttributeConfig } from '@red/domain';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
+import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
+import { DateColumnComponent } from '../../../shared-dossiers/components/date-column/date-column.component';
+import { FileAttributeComponent } from '../file-attribute/file-attribute.component';
+import { NgForOf, NgIf } from '@angular/common';
+import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
+import { FileWorkloadComponent } from './file-workload/file-workload.component';
+import { InitialsAvatarComponent, IqserUsersModule } from '@common-ui/users';
+import { MatIcon } from '@angular/material/icon';
+import { OcrProgressBarComponent } from '@shared/components/ocr-progress-bar/ocr-progress-bar.component';
+import { ProcessingIndicatorComponent } from '@shared/components/processing-indicator/processing-indicator.component';
+import { StatusBarComponent } from '@common-ui/shared';
+import { FileActionsComponent } from '../../../shared-dossiers/components/file-actions/file-actions.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-table-item',
     templateUrl: './table-item.component.html',
     styleUrls: ['./table-item.component.scss'],
+    standalone: true,
+    imports: [
+        FileNameColumnComponent,
+        DateColumnComponent,
+        FileAttributeComponent,
+        NgIf,
+        AnnotationIconComponent,
+        FileWorkloadComponent,
+        IqserUsersModule,
+        MatIcon,
+        OcrProgressBarComponent,
+        ProcessingIndicatorComponent,
+        StatusBarComponent,
+        FileActionsComponent,
+        TranslateModule,
+        NgForOf,
+        InitialsAvatarComponent,
+    ],
 })
 export class TableItemComponent {
     @Input({ required: true }) file: File;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts
index 2656da391..f2204ff8a 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/view-mode-selection/view-mode-selection.component.ts
@@ -1,18 +1,25 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ListingMode, ListingModes, ListingService } from '@iqser/common-ui';
+import { CircleButtonComponent, ListingMode, ListingModes, ListingService } from '@iqser/common-ui';
 import { File } from '@red/domain';
 import { ConfigService } from '../../config.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { AsyncPipe, NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-view-mode-selection',
     templateUrl: './view-mode-selection.component.html',
     styleUrls: ['./view-mode-selection.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [CircleButtonComponent, TranslateModule, AsyncPipe, NgIf],
 })
 export class ViewModeSelectionComponent {
     readonly listingModes = ListingModes;
 
-    constructor(readonly configService: ConfigService, private readonly _listingService: ListingService<File>) {}
+    constructor(
+        readonly configService: ConfigService,
+        private readonly _listingService: ListingService<File>,
+    ) {}
 
     setListingMode(listingMode: ListingMode): void {
         if (listingMode === this.configService.listingMode) {
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.ts
index 645bccc97..c4ab76e37 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/workflow-item/workflow-item.component.ts
@@ -1,13 +1,38 @@
 import { ChangeDetectorRef, Component, ElementRef, Input, OnInit, Optional, ViewChild } from '@angular/core';
-import { HelpModeService } from '@iqser/common-ui';
+import { DisableStopPropagationDirective, HelpModeService } from '@iqser/common-ui';
 import { Debounce, trackByFactory } from '@iqser/common-ui/lib/utils';
 import { Dossier, File, IFileAttributeConfig } from '@red/domain';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
+import { MatTooltip } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { FileStatsComponent } from '@shared/components/file-stats/file-stats.component';
+import { InitialsAvatarComponent, IqserUsersModule } from '@common-ui/users';
+import { FileAttributeComponent } from '../file-attribute/file-attribute.component';
+import { FileWorkloadComponent } from '../table-item/file-workload/file-workload.component';
+import { ProcessingIndicatorComponent } from '@shared/components/processing-indicator/processing-indicator.component';
+import { FileActionsComponent } from '../../../shared-dossiers/components/file-actions/file-actions.component';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-workflow-item',
     templateUrl: './workflow-item.component.html',
     styleUrls: ['./workflow-item.component.scss'],
+    standalone: true,
+    imports: [
+        MatTooltip,
+        RouterLink,
+        FileStatsComponent,
+        IqserUsersModule,
+        FileAttributeComponent,
+        FileWorkloadComponent,
+        ProcessingIndicatorComponent,
+        FileActionsComponent,
+        NgIf,
+        DisableStopPropagationDirective,
+        AsyncPipe,
+        NgForOf,
+        InitialsAvatarComponent,
+    ],
 })
 export class WorkflowItemComponent implements OnInit {
     @ViewChild('actionsWrapper', { static: true }) private _actionsWrapper: ElementRef;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
deleted file mode 100644
index 197717ca9..000000000
--- a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import {
-    CircleButtonComponent,
-    DisableStopPropagationDirective,
-    DynamicInputComponent,
-    HasScrollbarDirective,
-    IqserAllowDirective,
-    IqserHelpModeModule,
-    IqserListingModule,
-    IqserLoadingModule,
-    IqserRoutes,
-    StopPropagationDirective,
-} 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 { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';
-import { FileWorkloadComponent } from './components/table-item/file-workload/file-workload.component';
-import { WorkflowItemComponent } from './components/workflow-item/workflow-item.component';
-import { DossierOverviewScreenHeaderComponent } from './components/screen-header/dossier-overview-screen-header.component';
-import { ViewModeSelectionComponent } from './components/view-mode-selection/view-mode-selection.component';
-import { FileAttributeComponent } from './components/file-attribute/file-attribute.component';
-import { SharedModule } from '@shared/shared.module';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
-import { StatusBarComponent } from '@iqser/common-ui/lib/shared';
-
-const routes: IqserRoutes = [
-    {
-        path: '',
-        component: DossierOverviewScreenComponent,
-        pathMatch: 'full',
-        data: {
-            reuse: true,
-        },
-    },
-];
-
-@NgModule({
-    declarations: [
-        DossierOverviewScreenComponent,
-        DossierOverviewBulkActionsComponent,
-        DossierDetailsComponent,
-        DossierDetailsStatsComponent,
-        FileWorkloadComponent,
-        TableItemComponent,
-        WorkflowItemComponent,
-        DossierOverviewScreenHeaderComponent,
-        ViewModeSelectionComponent,
-    ],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        SharedDossiersModule,
-        TranslateModule,
-        IqserHelpModeModule,
-        IqserUsersModule,
-        IqserListingModule,
-        IqserLoadingModule,
-        SharedModule,
-        CircleButtonComponent,
-        StatusBarComponent,
-        StopPropagationDirective,
-        HasScrollbarDirective,
-        DynamicInputComponent,
-        IqserAllowDirective,
-        DisableStopPropagationDirective,
-        FileAttributeComponent,
-    ],
-})
-export class DossierOverviewModule {}
diff --git a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.routes.ts b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.routes.ts
new file mode 100644
index 000000000..e9a7ca5af
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.routes.ts
@@ -0,0 +1,15 @@
+import { IqserRoutes } from '@iqser/common-ui';
+import DossierOverviewScreenComponent from './screen/dossier-overview-screen.component';
+import { FileAssignService } from '../shared-dossiers/services/file-assign.service';
+
+export default [
+    {
+        path: '',
+        component: DossierOverviewScreenComponent,
+        pathMatch: 'full',
+        data: {
+            reuse: true,
+        },
+        providers: [FileAssignService],
+    },
+] satisfies IqserRoutes;
diff --git a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts
index ead5edb86..9e6bfb412 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/screen/dossier-overview-screen.component.ts
@@ -4,6 +4,7 @@ import {
     CircleButtonTypes,
     CustomError,
     ErrorService,
+    IqserListingModule,
     IqserPermissionsService,
     ListingComponent,
     ListingModes,
@@ -44,13 +45,34 @@ import { filter, skip, switchMap, tap } from 'rxjs/operators';
 import { ConfigService } from '../config.service';
 import { BulkActionsService } from '../services/bulk-actions.service';
 import { DossiersCacheService } from '@services/dossiers/dossiers-cache.service';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { DossierOverviewScreenHeaderComponent } from '../components/screen-header/dossier-overview-screen-header.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { WorkflowItemComponent } from '../components/workflow-item/workflow-item.component';
+import { DossierDetailsComponent } from '../components/dossier-details/dossier-details.component';
+import { DossierOverviewBulkActionsComponent } from '../components/bulk-actions/dossier-overview-bulk-actions.component';
+import { TableItemComponent } from '../components/table-item/table-item.component';
+import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component';
 
 @Component({
     templateUrl: './dossier-overview-screen.component.html',
     styleUrls: ['./dossier-overview-screen.component.scss'],
     providers: [...listingProvidersFactory(DossierOverviewScreenComponent), ConfigService, BulkActionsService, dossiersServiceProvider],
+    standalone: true,
+    imports: [
+        DossierOverviewScreenHeaderComponent,
+        AsyncPipe,
+        IqserListingModule,
+        TranslateModule,
+        NgIf,
+        WorkflowItemComponent,
+        DossierDetailsComponent,
+        DossierOverviewBulkActionsComponent,
+        TableItemComponent,
+        TypeFilterComponent,
+    ],
 })
-export class DossierOverviewScreenComponent extends ListingComponent<File> implements OnInit, OnAttach, OnDetach, OnDestroy {
+export default class DossierOverviewScreenComponent extends ListingComponent<File> implements OnInit, OnAttach, OnDetach, OnDestroy {
     #dossier: Dossier;
     @ViewChild('needsWorkFilterTemplate', { read: TemplateRef, static: true })
     private readonly _needsWorkFilterTemplate: TemplateRef<unknown>;
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts b/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts
index 28b2f1109..f6377c851 100644
--- a/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts
+++ b/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts
@@ -13,8 +13,11 @@ import { DossierWorkloadColumnComponent } from './components/dossier-workload-co
 import { DossierDocumentsStatusComponent } from './components/dossier-documents-status/dossier-documents-status.component';
 import { DossierFilesGuard } from '@guards/dossier-files-guard';
 import { ACTIVE_DOSSIERS_SERVICE } from '../../tokens';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
+import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
 import { StatusBarComponent } from '@iqser/common-ui/lib/shared';
+import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component';
+import { DateColumnComponent } from '../shared-dossiers/components/date-column/date-column.component';
+import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
 
 const routes: IqserRoutes = [
     {
@@ -46,6 +49,10 @@ const routes: IqserRoutes = [
         IqserListingModule,
         StatusBarComponent,
         HasScrollbarDirective,
+        TypeFilterComponent,
+        DateColumnComponent,
+        AnnotationIconComponent,
+        InitialsAvatarComponent,
     ],
 })
 export class DossiersListingModule {}
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts
index 3d1d0151b..3e2b3f822 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-actions/annotation-actions.component.ts
@@ -1,5 +1,5 @@
 import { Component, computed, Input, OnChanges } from '@angular/core';
-import { getConfig, HelpModeService, IqserPermissionsService } from '@iqser/common-ui';
+import { CircleButtonComponent, getConfig, HelpModeService, IqserAllowDirective, IqserPermissionsService } from '@iqser/common-ui';
 import { AnnotationPermissions } from '@models/file/annotation.permissions';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { PermissionsService } from '@services/permissions.service';
@@ -11,6 +11,8 @@ import { FilePreviewStateService } from '../../services/file-preview-state.servi
 import { MultiSelectService } from '../../services/multi-select.service';
 import { ViewModeService } from '../../services/view-mode.service';
 import { SkippedService } from '../../services/skipped.service';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 export const AnnotationButtonTypes = {
     default: 'default',
@@ -23,6 +25,8 @@ export type AnnotationButtonType = keyof typeof AnnotationButtonTypes;
     selector: 'redaction-annotation-actions',
     templateUrl: './annotation-actions.component.html',
     styleUrls: ['./annotation-actions.component.scss'],
+    standalone: true,
+    imports: [CircleButtonComponent, NgIf, TranslateModule, AsyncPipe, IqserAllowDirective],
 })
 export class AnnotationActionsComponent implements OnChanges {
     #annotations: AnnotationWrapper[] = [];
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
index 20c573ffd..bceca2a7a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-card/annotation-card.component.ts
@@ -4,11 +4,17 @@ import { MultiSelectService } from '../../services/multi-select.service';
 import { annotationTypesTranslations } from '@translations/annotation-types-translations';
 import { Roles } from '@users/roles';
 import { getConfig } from '@iqser/common-ui';
+import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { IqserDenyDirective, RoundCheckboxComponent } from '@iqser/common-ui';
+import { NgIf, UpperCasePipe } from '@angular/common';
 
 @Component({
     selector: 'redaction-annotation-card',
     templateUrl: './annotation-card.component.html',
     styleUrls: ['./annotation-card.component.scss'],
+    standalone: true,
+    imports: [AnnotationIconComponent, TranslateModule, IqserDenyDirective, NgIf, RoundCheckboxComponent, UpperCasePipe],
 })
 export class AnnotationCardComponent {
     protected readonly roles = Roles;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.ts
index d06824982..4d44b6ad4 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.ts
@@ -3,10 +3,14 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { KeysOf } from '@iqser/common-ui/lib/utils';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { ListItem } from '@models/file/list-item';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { annotationChangesTranslations } from '@translations/annotation-changes-translations';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { LogEntryEngine, LogEntryEngines } from '@red/domain';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatIcon } from '@angular/material/icon';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 
 interface Engine {
     readonly icon: string;
@@ -32,6 +36,8 @@ const changesProperties: KeysOf<AnnotationWrapper>[] = [
     selector: 'redaction-annotation-details [annotation]',
     templateUrl: './annotation-details.component.html',
     styleUrls: ['./annotation-details.component.scss'],
+    standalone: true,
+    imports: [NgIf, MatTooltip, MatIcon, CdkOverlayOrigin, NgForOf, CdkConnectedOverlay, TranslateModule],
 })
 export class AnnotationDetailsComponent implements OnChanges {
     @Input() annotation: ListItem<AnnotationWrapper>;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-reference/annotation-reference.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-reference/annotation-reference.component.ts
index 1d0f135b1..aae15c3cc 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-reference/annotation-reference.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-reference/annotation-reference.component.ts
@@ -3,10 +3,14 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { BehaviorSubject, filter, Subscription } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
 import { AnnotationsListingService } from '../../services/annotations-listing.service';
+import { AnnotationCardComponent } from '../annotation-card/annotation-card.component';
+import { AnnotationReferencesPageIndicatorComponent } from '../annotation-references-page-indicator/annotation-references-page-indicator.component';
 
 @Component({
     selector: 'redaction-annotation-reference [annotation]',
     templateUrl: './annotation-reference.component.html',
+    standalone: true,
+    imports: [AnnotationCardComponent, AnnotationReferencesPageIndicatorComponent],
 })
 export class AnnotationReferenceComponent implements OnChanges, OnDestroy {
     @Input() annotation: AnnotationWrapper;
@@ -14,7 +18,10 @@ export class AnnotationReferenceComponent implements OnChanges, OnDestroy {
     readonly #annotationChanged$ = new BehaviorSubject<AnnotationWrapper>(undefined);
     readonly #subscription: Subscription;
 
-    constructor(private readonly _listingService: AnnotationsListingService, private readonly _changeRef: ChangeDetectorRef) {
+    constructor(
+        private readonly _listingService: AnnotationsListingService,
+        private readonly _changeRef: ChangeDetectorRef,
+    ) {
         const annotationsChanged$ = this.#annotationChanged$.pipe(
             filter(annotation => !!annotation),
             switchMap(annotation => this._listingService.isSelected$(annotation)),
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-references-list/annotation-references-list.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-references-list/annotation-references-list.component.ts
index 85abfc36b..de69cafc8 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-references-list/annotation-references-list.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-references-list/annotation-references-list.component.ts
@@ -5,11 +5,28 @@ import { Observable, switchMap } from 'rxjs';
 import { AnnotationsListingService } from '../../services/annotations-listing.service';
 import { filter } from 'rxjs/operators';
 import { toObservable } from '@angular/core/rxjs-interop';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { CircleButtonComponent } from '@iqser/common-ui';
+import { AnnotationCardComponent } from '../annotation-card/annotation-card.component';
+import { AnnotationReferencesPageIndicatorComponent } from '../annotation-references-page-indicator/annotation-references-page-indicator.component';
+import { AnnotationReferenceComponent } from '../annotation-reference/annotation-reference.component';
 
 @Component({
     selector: 'redaction-annotation-references-list',
     templateUrl: './annotation-references-list.component.html',
     styleUrls: ['./annotation-references-list.component.scss'],
+    standalone: true,
+    imports: [
+        NgIf,
+        TranslateModule,
+        CircleButtonComponent,
+        AsyncPipe,
+        AnnotationCardComponent,
+        AnnotationReferencesPageIndicatorComponent,
+        AnnotationReferenceComponent,
+        NgForOf,
+    ],
 })
 export class AnnotationReferencesListComponent {
     @Output() readonly referenceClicked = new EventEmitter<AnnotationWrapper>();
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
index 4b1ee0e31..d4a0531da 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-references-page-indicator/annotation-references-page-indicator.component.ts
@@ -1,9 +1,12 @@
 import { Component, Input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'redaction-annotation-references-page-indicator',
     templateUrl: './annotation-references-page-indicator.component.html',
     styleUrls: ['./annotation-references-page-indicator.component.scss'],
+    standalone: true,
+    imports: [MatIcon],
 })
 export class AnnotationReferencesPageIndicatorComponent {
     @Input() number: number;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.ts
index 33f94a0ec..49ea32325 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.ts
@@ -1,15 +1,35 @@
 import { Component, HostBinding, inject, Input, OnChanges } from '@angular/core';
-import { getConfig } from '@iqser/common-ui';
+import { getConfig, StopPropagationDirective } from '@iqser/common-ui';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { ListItem } from '@models/file/list-item';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { PdfProxyService } from '../../services/pdf-proxy.service';
 import { ActionsHelpModeKeys } from '../../utils/constants';
+import { AnnotationCardComponent } from '../annotation-card/annotation-card.component';
+import { NgIf } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIcon } from '@angular/material/icon';
+import { AnnotationActionsComponent } from '../annotation-actions/annotation-actions.component';
+import { CommentsComponent } from '../comments/comments.component';
+import { AnnotationDetailsComponent } from '../annotation-details/annotation-details.component';
 
 @Component({
     selector: 'redaction-annotation-wrapper',
     templateUrl: './annotation-wrapper.component.html',
     styleUrls: ['./annotation-wrapper.component.scss'],
+    standalone: true,
+    imports: [
+        AnnotationCardComponent,
+        NgIf,
+        MatTooltip,
+        TranslateModule,
+        StopPropagationDirective,
+        MatIcon,
+        AnnotationActionsComponent,
+        CommentsComponent,
+        AnnotationDetailsComponent,
+    ],
 })
 export class AnnotationWrapperComponent implements OnChanges {
     readonly #isDocumine = getConfig().IS_DOCUMINE;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts
index 0ef4a6d48..a6827d447 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts
@@ -11,11 +11,17 @@ import { AnnotationReferencesService } from '../../services/annotation-reference
 import { AnnotationsListingService } from '../../services/annotations-listing.service';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { ViewModeService } from '../../services/view-mode.service';
+import { NgForOf, NgIf } from '@angular/common';
+import { HighlightsSeparatorComponent } from '../highlights-separator/highlights-separator.component';
+import { AnnotationWrapperComponent } from '../annotation-wrapper/annotation-wrapper.component';
+import { AnnotationReferencesListComponent } from '../annotation-references-list/annotation-references-list.component';
 
 @Component({
     selector: 'redaction-annotations-list',
     templateUrl: './annotations-list.component.html',
     styleUrls: ['./annotations-list.component.scss'],
+    standalone: true,
+    imports: [NgForOf, NgIf, HighlightsSeparatorComponent, AnnotationWrapperComponent, AnnotationReferencesListComponent],
 })
 export class AnnotationsListComponent extends HasScrollbarDirective {
     @Input({ required: true }) annotations: ListItem<AnnotationWrapper>[];
diff --git a/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts b/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts
index 4e19920cd..397648169 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts
@@ -1,5 +1,5 @@
 import { Component, inject, Input, OnChanges, signal, SimpleChanges, ViewChild } from '@angular/core';
-import { InputWithActionComponent, LoadingService } from '@iqser/common-ui';
+import { CircleButtonComponent, InputWithActionComponent, LoadingService } from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { trackByFactory } from '@iqser/common-ui/lib/utils';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
@@ -8,11 +8,17 @@ import { CommentsApiService } from '@services/comments-api.service';
 import { PermissionsService } from '@services/permissions.service';
 import { NGXLogger } from 'ngx-logger';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
+import { DatePipe, NgForOf, NgIf } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
+import { NamePipe } from '@common-ui/users/name.pipe';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-comments',
     templateUrl: './comments.component.html',
     styleUrls: ['./comments.component.scss'],
+    standalone: true,
+    imports: [NgForOf, MatTooltip, NamePipe, DatePipe, CircleButtonComponent, NgIf, InputWithActionComponent, TranslateModule],
 })
 export class CommentsComponent implements OnChanges {
     readonly #commentsApiService = inject(CommentsApiService);
diff --git a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
index 1d7ad17b4..c5e4f7495 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
@@ -9,6 +9,10 @@ import { FileAttributesService } from '@services/entity-services/file-attributes
 import { ContextComponent } from '@iqser/common-ui/lib/utils';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { setLocalStorageDataByFileId } from '@utils/local-storage';
+import { CircleButtonComponent, HasScrollbarDirective } from '@iqser/common-ui';
+import { DatePipe, NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIcon } from '@angular/material/icon';
 
 interface FileAttribute {
     label: string;
@@ -24,6 +28,8 @@ interface Context {
     selector: 'redaction-document-info',
     templateUrl: './document-info.component.html',
     styleUrls: ['./document-info.component.scss'],
+    standalone: true,
+    imports: [CircleButtonComponent, NgIf, TranslateModule, HasScrollbarDirective, NgForOf, DatePipe, MatIcon],
 })
 export class DocumentInfoComponent extends ContextComponent<Context> {
     protected readonly _state = inject(FilePreviewStateService);
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts
index a7cc66f3f..57cd77e13 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts
@@ -1,8 +1,18 @@
 import { ChangeDetectorRef, Component, computed, effect, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { CircleButtonTypes, getConfig, IconButtonTypes } from '@iqser/common-ui';
-import { FilterService, INestedFilter } from '@iqser/common-ui/lib/filtering';
+import {
+    CapitalizePipe,
+    CircleButtonComponent,
+    CircleButtonTypes,
+    EmptyStateComponent,
+    getConfig,
+    IconButtonComponent,
+    IconButtonTypes,
+    PreventDefaultDirective,
+    RoundCheckboxComponent,
+} from '@iqser/common-ui';
+import { FilterService, INestedFilter, PopupFilterComponent } from '@iqser/common-ui/lib/filtering';
 import { AutoUnsubscribe, Debounce, IqserEventTarget } from '@iqser/common-ui/lib/utils';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { ListItem } from '@models/file/list-item';
@@ -26,6 +36,15 @@ import { SkippedService } from '../../services/skipped.service';
 import { ViewModeService } from '../../services/view-mode.service';
 import { workloadTranslations } from '@translations/workload-translations';
 import { WorkflowFileStatuses } from '@red/domain';
+import { AnnotationsListComponent } from '../annotations-list/annotations-list.component';
+import { PageExclusionComponent } from '../page-exclusion/page-exclusion.component';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { ReadonlyBannerComponent } from '../readonly-banner/readonly-banner.component';
+import { AnnotationActionsComponent } from '../annotation-actions/annotation-actions.component';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatIcon } from '@angular/material/icon';
+import { PagesComponent } from '../pages/pages.component';
 
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
@@ -34,6 +53,26 @@ const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
     selector: 'redaction-file-workload',
     templateUrl: './file-workload.component.html',
     styleUrls: ['./file-workload.component.scss'],
+    standalone: true,
+    imports: [
+        IconButtonComponent,
+        AnnotationsListComponent,
+        PageExclusionComponent,
+        NgIf,
+        CircleButtonComponent,
+        TranslateModule,
+        PreventDefaultDirective,
+        AsyncPipe,
+        PopupFilterComponent,
+        ReadonlyBannerComponent,
+        RoundCheckboxComponent,
+        AnnotationActionsComponent,
+        MatTooltip,
+        MatIcon,
+        PagesComponent,
+        EmptyStateComponent,
+        CapitalizePipe,
+    ],
 })
 export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, OnDestroy {
     @ViewChild('annotationsElement') private readonly _annotationsElement: ElementRef;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/highlights-separator/highlights-separator.component.html b/apps/red-ui/src/app/modules/file-preview/components/highlights-separator/highlights-separator.component.html
index b494daab8..9ed12907b 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/highlights-separator/highlights-separator.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/highlights-separator/highlights-separator.component.html
@@ -9,8 +9,8 @@
         *allow="roles.highlights.convert"
         [icon]="'red:convert'"
         [size]="28"
-        [tooltipPosition]="'above'"
         [tooltip]="'file-preview.highlights.convert' | translate"
+        tooltipPosition="above"
         class="mr-2"
     ></iqser-circle-button>
 
@@ -19,7 +19,7 @@
         *allow="roles.highlights.delete"
         [icon]="'iqser:trash'"
         [size]="28"
-        [tooltipPosition]="'above'"
         [tooltip]="'file-preview.highlights.remove' | translate"
+        tooltipPosition="above"
     ></iqser-circle-button>
 </div>
diff --git a/apps/red-ui/src/app/modules/file-preview/components/highlights-separator/highlights-separator.component.ts b/apps/red-ui/src/app/modules/file-preview/components/highlights-separator/highlights-separator.component.ts
index 541030a9b..e392836d7 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/highlights-separator/highlights-separator.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/highlights-separator/highlights-separator.component.ts
@@ -6,11 +6,17 @@ import { FileDataService } from '../../services/file-data.service';
 import { FilePreviewDialogService } from '../../services/file-preview-dialog.service';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { MultiSelectService } from '../../services/multi-select.service';
+import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { CircleButtonComponent, IqserAllowDirective } from '@iqser/common-ui';
+import { NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-highlights-separator',
     templateUrl: './highlights-separator.component.html',
     styleUrls: ['./highlights-separator.component.scss'],
+    standalone: true,
+    imports: [AnnotationIconComponent, TranslateModule, CircleButtonComponent, NgIf, IqserAllowDirective],
 })
 export class HighlightsSeparatorComponent {
     @Input({ required: true }) highlightGroup: EarmarkGroup;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/page-exclusion/page-exclusion.component.ts b/apps/red-ui/src/app/modules/file-preview/components/page-exclusion/page-exclusion.component.ts
index 261994079..6c8a1357a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/page-exclusion/page-exclusion.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/page-exclusion/page-exclusion.component.ts
@@ -1,16 +1,20 @@
 import { Component, computed, ViewChild } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
-import { InputWithActionComponent, LoadingService, Toaster } from '@iqser/common-ui';
+import { CircleButtonComponent, HasScrollbarDirective, InputWithActionComponent, LoadingService, Toaster } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { IPageRange } from '@red/domain';
 import { ReanalysisService } from '@services/reanalysis.service';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { extractPageRanges } from '@utils/page-ranges-mapper';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgForOf, NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-page-exclusion',
     templateUrl: './page-exclusion.component.html',
     styleUrls: ['./page-exclusion.component.scss'],
+    standalone: true,
+    imports: [InputWithActionComponent, TranslateModule, NgIf, HasScrollbarDirective, NgForOf, CircleButtonComponent],
 })
 export class PageExclusionComponent {
     readonly excludedRanges = computed(() => {
diff --git a/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.ts b/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.ts
index 752751ea1..47002e55c 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/page-indicator/page-indicator.component.ts
@@ -10,11 +10,15 @@ import { ViewedPagesMapService } from '@services/files/viewed-pages-map.service'
 import { Observable, pairwise } from 'rxjs';
 import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
 import { NGXLogger } from 'ngx-logger';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'redaction-page-indicator',
     templateUrl: './page-indicator.component.html',
     styleUrls: ['./page-indicator.component.scss'],
+    standalone: true,
+    imports: [NgIf, AsyncPipe, MatIcon],
 })
 export class PageIndicatorComponent implements OnChanges {
     readonly #config = getConfig<AppConfig>();
diff --git a/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts b/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts
index 99e5dfd88..2bad1389a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts
@@ -8,11 +8,15 @@ import { FilePreviewStateService } from '../../services/file-preview-state.servi
 import { ViewedPagesMapService } from '@services/files/viewed-pages-map.service';
 import { ViewedPage } from '@red/domain';
 import scrollIntoView from 'scroll-into-view-if-needed';
+import { PageIndicatorComponent } from '../page-indicator/page-indicator.component';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-pages',
     templateUrl: './pages.component.html',
     styleUrls: ['./pages.component.scss'],
+    standalone: true,
+    imports: [PageIndicatorComponent, AsyncPipe, NgForOf, NgIf],
 })
 export class PagesComponent implements AfterViewInit {
     readonly #state = inject(FilePreviewStateService);
diff --git a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.ts b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.ts
index db1926487..c3387da3a 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/readonly-banner/readonly-banner.component.ts
@@ -1,10 +1,17 @@
 import { Component, inject, Input } from '@angular/core';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
+import { OcrProgressBarComponent } from '@shared/components/ocr-progress-bar/ocr-progress-bar.component';
+import { NgIf } from '@angular/common';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-readonly-banner',
     templateUrl: './readonly-banner.component.html',
     styleUrls: ['./readonly-banner.component.scss'],
+    standalone: true,
+    imports: [OcrProgressBarComponent, NgIf, MatProgressBar, MatIcon, TranslateModule],
 })
 export class ReadonlyBannerComponent {
     protected readonly _state = inject(FilePreviewStateService);
diff --git a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts
index 3be19f097..bcfc72924 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.ts
@@ -1,19 +1,24 @@
 import { Component } from '@angular/core';
 import { DocumentInfoService } from '../../services/document-info.service';
-import { ExcludedPagesService } from '../../services/excluded-pages.service';
 import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
+import { EmptyStateComponent } from '@iqser/common-ui';
+import { NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { DocumentInfoComponent } from '../document-info/document-info.component';
+import { FileWorkloadComponent } from '../file-workload/file-workload.component';
 
 @Component({
     selector: 'redaction-file-preview-right-container',
     templateUrl: './file-preview-right-container.component.html',
     styleUrls: ['./file-preview-right-container.component.scss'],
+    standalone: true,
+    imports: [EmptyStateComponent, NgIf, TranslateModule, DocumentInfoComponent, FileWorkloadComponent],
 })
 export class FilePreviewRightContainerComponent {
     constructor(
         readonly pdf: PdfViewer,
         readonly state: FilePreviewStateService,
         readonly documentInfoService: DocumentInfoService,
-        readonly excludedPagesService: ExcludedPagesService,
     ) {}
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.ts b/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.ts
index 3a9b8ac46..00253a922 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.ts
@@ -1,7 +1,7 @@
 import { Component, computed, HostListener, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { LoadingService, Toaster } from '@iqser/common-ui';
-import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { CircleButtonComponent, LoadingService, StopPropagationDirective, Toaster } from '@iqser/common-ui';
+import { getCurrentUser, InitialsAvatarComponent } from '@iqser/common-ui/lib/users';
 import { File, User } from '@red/domain';
 import { FilesService } from '@services/files/files.service';
 import { PermissionsService } from '@services/permissions.service';
@@ -12,11 +12,25 @@ import { FileAssignService } from '../../../shared-dossiers/services/file-assign
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
 import { Bind } from '@common-ui/utils';
+import { AssignUserDropdownComponent } from '@shared/components/assign-user-dropdown/assign-user-dropdown.component';
+import { NgIf } from '@angular/common';
+import { StatusBarComponent } from '@common-ui/shared';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-user-management',
     templateUrl: './user-management.component.html',
     styleUrls: ['./user-management.component.scss'],
+    standalone: true,
+    imports: [
+        AssignUserDropdownComponent,
+        NgIf,
+        StopPropagationDirective,
+        InitialsAvatarComponent,
+        StatusBarComponent,
+        TranslateModule,
+        CircleButtonComponent,
+    ],
 })
 export class UserManagementComponent implements OnInit, OnDestroy {
     protected readonly _canAssignToSelf = computed(() => this.permissionsService.canAssignToSelf(this.state.file(), this.state.dossier()));
diff --git a/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.ts b/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.ts
index 78efc6d3d..21cc039be 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/view-switch/view-switch.component.ts
@@ -4,12 +4,16 @@ import { Roles } from '@users/roles';
 import { FileDataService } from '../../services/file-data.service';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { ViewModeService } from '../../services/view-mode.service';
-import { getConfig } from '@iqser/common-ui';
+import { getConfig, IqserDenyDirective } from '@iqser/common-ui';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-view-switch',
     templateUrl: './view-switch.component.html',
     styleUrls: ['./view-switch.component.scss'],
+    standalone: true,
+    imports: [MatTooltip, TranslateModule, IqserDenyDirective],
 })
 export class ViewSwitchComponent {
     protected readonly isDocumine = getConfig().IS_DOCUMINE;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/add-hint-dialog/add-hint-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/add-hint-dialog/add-hint-dialog.component.ts
index d0015fa32..bf9a731e6 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/add-hint-dialog/add-hint-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/add-hint-dialog/add-hint-dialog.component.ts
@@ -1,7 +1,17 @@
 import { Component, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormBuilder, UntypedFormGroup } from '@angular/forms';
-import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent, IqserPermissionsService } from '@iqser/common-ui';
+import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import {
+    CircleButtonComponent,
+    DetailsRadioComponent,
+    DetailsRadioOption,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDenyDirective,
+    IqserDialogComponent,
+    IqserPermissionsService,
+} from '@iqser/common-ui';
 import { Dictionary, Dossier, IAddRedactionRequest } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
@@ -12,10 +22,33 @@ import { AddHintData, AddHintResult } from '../../utils/dialog-types';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { SystemDefaultOption, SystemDefaults } from '../../../account/utils/dialog-defaults';
 import { stringToBoolean } from '@utils/functions';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
+import { NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatDialogClose } from '@angular/material/dialog';
 
 @Component({
     templateUrl: './add-hint-dialog.component.html',
     styleUrls: ['./add-hint-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        DetailsRadioComponent,
+        IqserDenyDirective,
+        MatFormField,
+        MatSelectTrigger,
+        MatSelect,
+        MatOption,
+        MatTooltip,
+        NgIf,
+        HasScrollbarDirective,
+        IconButtonComponent,
+        TranslateModule,
+        CircleButtonComponent,
+        MatDialogClose,
+    ],
 })
 export class AddHintDialogComponent extends IqserDialogComponent<AddHintDialogComponent, AddHintData, AddHintResult> implements OnInit {
     #applyToAllDossiers: boolean;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts
index b67fec10a..dccb2181d 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.ts
@@ -1,11 +1,16 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { UntypedFormGroup, Validators } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { BaseDialogComponent } from '@iqser/common-ui';
+import { ReactiveFormsModule, UntypedFormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogClose, MatDialogRef } from '@angular/material/dialog';
+import { BaseDialogComponent, CircleButtonComponent, HasScrollbarDirective, IconButtonComponent } from '@iqser/common-ui';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { Dossier } from '@red/domain';
 import { JustificationsService } from '@services/entity-services/justifications.service';
 import { firstValueFrom } from 'rxjs';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
 
 export interface LegalBasisOption {
     label?: string;
@@ -15,6 +20,22 @@ export interface LegalBasisOption {
 
 @Component({
     templateUrl: './change-legal-basis-dialog.component.html',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        MatFormField,
+        MatSelectTrigger,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        MatTooltip,
+        HasScrollbarDirective,
+        IconButtonComponent,
+        MatDialogClose,
+        TranslateModule,
+        CircleButtonComponent,
+        NgIf,
+    ],
 })
 export class ChangeLegalBasisDialogComponent extends BaseDialogComponent implements OnInit {
     legalOptions: LegalBasisOption[] = [];
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/add-annotation-dialog/add-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/add-annotation-dialog/add-annotation-dialog.component.ts
index f2e596777..15dad1a7a 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/add-annotation-dialog/add-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/add-annotation-dialog/add-annotation-dialog.component.ts
@@ -1,13 +1,34 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
-import { IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { CircleButtonComponent, HasScrollbarDirective, IconButtonComponent, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
 import { Dictionary, IAddRedactionRequest } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
 import { AddAnnotationData, AddAnnotationResult } from '../../../utils/dialog-types';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { NgForOf } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatDialogClose } from '@angular/material/dialog';
 
 @Component({
     templateUrl: './add-annotation-dialog.component.html',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        MatFormField,
+        MatSelectTrigger,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        MatTooltip,
+        HasScrollbarDirective,
+        IconButtonComponent,
+        TranslateModule,
+        CircleButtonComponent,
+        MatDialogClose,
+    ],
 })
 export class AddAnnotationDialogComponent
     extends IqserDialogComponent<AddAnnotationDialogComponent, AddAnnotationData, AddAnnotationResult>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.ts
index d70a3e4cf..624e3728e 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component.ts
@@ -1,16 +1,39 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, UntypedFormGroup } from '@angular/forms';
-import { IconButtonTypes, IqserDialogComponent, IqserPermissionsService } from '@iqser/common-ui';
+import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { CircleButtonComponent, HasScrollbarDirective, IconButtonComponent, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
 import { Dictionary, Dossier, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
-import { JustificationsService } from '@services/entity-services/justifications.service';
 import { Roles } from '@users/roles';
 import { EditRedactionData, EditRedactResult } from '../../../utils/dialog-types';
+import { SelectedAnnotationsListComponent } from '../../../components/selected-annotations-list/selected-annotations-list.component';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatDialogClose } from '@angular/material/dialog';
 
 @Component({
     templateUrl: 'edit-annotation-dialog.component.html',
     styleUrls: ['edit-annotation-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        SelectedAnnotationsListComponent,
+        NgIf,
+        MatFormField,
+        MatSelectTrigger,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        MatTooltip,
+        HasScrollbarDirective,
+        TranslateModule,
+        IconButtonComponent,
+        CircleButtonComponent,
+        MatDialogClose,
+    ],
 })
 export class EditAnnotationDialogComponent
     extends IqserDialogComponent<EditAnnotationDialogComponent, EditRedactionData, EditRedactResult>
@@ -24,10 +47,8 @@ export class EditAnnotationDialogComponent
     form: UntypedFormGroup;
 
     constructor(
-        private readonly _justificationsService: JustificationsService,
         private readonly _activeDossiersService: ActiveDossiersService,
         private readonly _dictionaryService: DictionaryService,
-        private readonly _iqserPermissionsService: IqserPermissionsService,
         private readonly _formBuilder: FormBuilder,
     ) {
         super();
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component.ts
index d9061c729..62b19bb22 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component.ts
@@ -1,12 +1,40 @@
 import { Component } from '@angular/core';
-import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
-import { FormBuilder, UntypedFormGroup } from '@angular/forms';
+import {
+    CircleButtonComponent,
+    DetailsRadioComponent,
+    DetailsRadioOption,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDialogComponent,
+} from '@iqser/common-ui';
+import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
 import { RemoveAnnotationData, RemoveAnnotationResult } from '../../../utils/dialog-types';
 import { getRemoveRedactionOptions, RemoveAnnotationOption, RemoveAnnotationOptions } from '../../../utils/dialog-options';
+import { TranslateModule } from '@ngx-translate/core';
+import { CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
+import { NgIf, NgStyle } from '@angular/common';
+import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
+import { MatDialogClose } from '@angular/material/dialog';
 
 @Component({
     templateUrl: 'remove-annotation-dialog.component.html',
     styleUrls: ['remove-annotation-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TranslateModule,
+        CdkFixedSizeVirtualScroll,
+        NgStyle,
+        CdkVirtualForOf,
+        ReplaceNbspPipe,
+        DetailsRadioComponent,
+        HasScrollbarDirective,
+        IconButtonComponent,
+        CircleButtonComponent,
+        MatDialogClose,
+        NgIf,
+    ],
 })
 export class RemoveAnnotationDialogComponent extends IqserDialogComponent<
     RemoveAnnotationDialogComponent,
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/document-info-dialog/document-info-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/document-info-dialog/document-info-dialog.component.ts
index a2c6e5484..855f2c4ea 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/document-info-dialog/document-info-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/document-info-dialog/document-info-dialog.component.ts
@@ -1,16 +1,20 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { UntypedFormGroup } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
 import { Dossier, File, IFileAttributeConfig } from '@red/domain';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { FileAttributesService } from '@services/entity-services/file-attributes.service';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { FilesService } from '@services/files/files.service';
-import { BaseDialogComponent } from '@iqser/common-ui';
+import { BaseDialogComponent, CircleButtonComponent, DynamicInputComponent, IconButtonComponent } from '@iqser/common-ui';
 import { firstValueFrom } from 'rxjs';
 import dayjs from 'dayjs';
+import { NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     templateUrl: './document-info-dialog.component.html',
+    standalone: true,
+    imports: [ReactiveFormsModule, NgIf, NgForOf, DynamicInputComponent, IconButtonComponent, TranslateModule, CircleButtonComponent],
 })
 export class DocumentInfoDialogComponent extends BaseDialogComponent implements OnInit {
     form: UntypedFormGroup;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
index ef7b870ef..614e4d7b9 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
@@ -1,6 +1,14 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import {
+    CircleButtonComponent,
+    DetailsRadioOption,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDenyDirective,
+    IqserDialogComponent,
+    IqserHelpModeModule,
+} from '@iqser/common-ui';
 import { Dictionary, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
@@ -11,7 +19,15 @@ import { EditRedactionData, EditRedactResult } from '../../utils/dialog-types';
 import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
 import { Roles } from '@users/roles';
 import { DialogHelpModeKeys } from '../../utils/constants';
-import { ValueColumn } from '../../components/selected-annotations-table/selected-annotations-table.component';
+import {
+    SelectedAnnotationsTableComponent,
+    ValueColumn,
+} from '../../components/selected-annotations-table/selected-annotations-table.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatFormField } from '@angular/material/form-field';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
 
 interface TypeSelectOptions {
     type: string;
@@ -22,6 +38,23 @@ interface TypeSelectOptions {
 @Component({
     templateUrl: './edit-redaction-dialog.component.html',
     styleUrls: ['./edit-redaction-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TranslateModule,
+        SelectedAnnotationsTableComponent,
+        MatFormField,
+        NgIf,
+        MatSelectTrigger,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        MatTooltip,
+        IconButtonComponent,
+        IqserHelpModeModule,
+        IqserDenyDirective,
+        CircleButtonComponent,
+    ],
 })
 export class EditRedactionDialogComponent
     extends IqserDialogComponent<EditRedactionDialogComponent, EditRedactionData, EditRedactResult>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts
index 308d24727..fc793c341 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts
@@ -1,14 +1,30 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { UntypedFormGroup, Validators } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { BaseDialogComponent, getConfig } from '@iqser/common-ui';
+import {
+    BaseDialogComponent,
+    CircleButtonComponent,
+    getConfig,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IqserDenyDirective,
+    IqserHelpModeModule,
+} from '@iqser/common-ui';
 import { JustificationsService } from '@services/entity-services/justifications.service';
 import { Dossier, ILegalBasisChangeRequest } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { Roles } from '@users/roles';
-import { ValueColumn } from '../../components/selected-annotations-table/selected-annotations-table.component';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import {
+    SelectedAnnotationsTableComponent,
+    ValueColumn,
+} from '../../components/selected-annotations-table/selected-annotations-table.component';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
 
 export interface LegalBasisOption {
     label?: string;
@@ -22,6 +38,24 @@ const DOCUMINE_LEGAL_BASIS = 'n-a.';
     selector: 'redaction-force-annotation-dialog',
     templateUrl: './force-annotation-dialog.component.html',
     styleUrls: ['./force-annotation-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        NgIf,
+        SelectedAnnotationsTableComponent,
+        MatFormField,
+        MatSelectTrigger,
+        MatSelect,
+        MatOption,
+        MatTooltip,
+        HasScrollbarDirective,
+        TranslateModule,
+        IconButtonComponent,
+        IqserHelpModeModule,
+        IqserDenyDirective,
+        CircleButtonComponent,
+        NgForOf,
+    ],
 })
 export class ForceAnnotationDialogComponent extends BaseDialogComponent implements OnInit {
     readonly isDocumine = getConfig().IS_DOCUMINE;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts
index ba03c74e4..039489df1 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts
@@ -1,13 +1,25 @@
 import { Component, Inject } from '@angular/core';
-import { UntypedFormGroup, Validators } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ReactiveFormsModule, UntypedFormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogClose, MatDialogRef } from '@angular/material/dialog';
 import { EarmarkOperation, EarmarkOperationPages } from '@red/domain';
-import { BaseDialogComponent, DetailsRadioOption } from '@iqser/common-ui';
+import {
+    BaseDialogComponent,
+    CircleButtonComponent,
+    DetailsRadioComponent,
+    DetailsRadioOption,
+    IconButtonComponent,
+    IqserDenyDirective,
+    IqserHelpModeModule,
+} from '@iqser/common-ui';
 import { EarmarksService } from '@services/files/earmarks.service';
 import { firstValueFrom } from 'rxjs';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { highlightsTranslations } from '@translations/highlights-translations';
 import { Roles } from '@users/roles';
+import { NgIf } from '@angular/common';
+import { ColorPickerModule } from 'ngx-color-picker';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { TranslateModule } from '@ngx-translate/core';
 
 export interface HighlightActionData {
     readonly operation: EarmarkOperation;
@@ -21,6 +33,20 @@ export interface HighlightActionData {
 
 @Component({
     templateUrl: './highlight-action-dialog.component.html',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        NgIf,
+        ColorPickerModule,
+        DetailsRadioComponent,
+        MatCheckbox,
+        TranslateModule,
+        IconButtonComponent,
+        IqserHelpModeModule,
+        IqserDenyDirective,
+        CircleButtonComponent,
+        MatDialogClose,
+    ],
 })
 export class HighlightActionDialogComponent extends BaseDialogComponent {
     readonly translations = highlightsTranslations;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts
index 85d87c465..97f934b37 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/import-redactions-dialog/import-redactions-dialog.ts
@@ -1,6 +1,6 @@
 import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
-import { BaseDialogComponent } from '@iqser/common-ui';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent, UploadFileComponent } from '@iqser/common-ui';
+import { MAT_DIALOG_DATA, MatDialogClose, MatDialogRef } from '@angular/material/dialog';
 import { firstValueFrom } from 'rxjs';
 import { RedactionImportService } from '@services/files/redaction-import.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@@ -8,6 +8,9 @@ import { HttpStatusCode } from '@angular/common/http';
 import { extractPageRanges } from '@utils/page-ranges-mapper';
 import { File } from '@red/domain';
 import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { TranslateModule } from '@ngx-translate/core';
+import { FormsModule } from '@angular/forms';
 
 interface ImportData {
     dossierId: string;
@@ -17,6 +20,8 @@ interface ImportData {
 @Component({
     templateUrl: './import-redactions-dialog.html',
     styleUrls: ['./import-redactions-dialog.scss'],
+    standalone: true,
+    imports: [UploadFileComponent, MatCheckbox, TranslateModule, FormsModule, IconButtonComponent, CircleButtonComponent, MatDialogClose],
 })
 export class ImportRedactionsDialogComponent extends BaseDialogComponent {
     @ViewChild('attachFileInput', { static: true }) attachFileInput: ElementRef;
@@ -101,7 +106,7 @@ export class ImportRedactionsDialogComponent extends BaseDialogComponent {
         };
     }
 
-    close () {
+    close() {
         this._fileDropOverlayService.toggleImportingRedactions();
         return super.close();
     }
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
index eca423650..088f2e38f 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
@@ -1,8 +1,15 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { Validators } from '@angular/forms';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { BaseDialogComponent, IqserPermissionsService } from '@iqser/common-ui';
+import {
+    BaseDialogComponent,
+    CircleButtonComponent,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IqserDenyDirective,
+    IqserPermissionsService,
+} from '@iqser/common-ui';
 import { ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper';
 import { Dictionary, Dossier, File, IAddRedactionRequest, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@@ -12,6 +19,12 @@ import { Roles } from '@users/roles';
 import { firstValueFrom } from 'rxjs';
 import { ManualRedactionService } from '../../services/manual-redaction.service';
 import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
+import { NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 export interface LegalBasisOption {
     label?: string;
@@ -22,6 +35,23 @@ export interface LegalBasisOption {
 @Component({
     templateUrl: './manual-annotation-dialog.component.html',
     styleUrls: ['./manual-annotation-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        NgIf,
+        CircleButtonComponent,
+        TranslateModule,
+        HasScrollbarDirective,
+        MatFormField,
+        MatSelectTrigger,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        MatTooltip,
+        IqserDenyDirective,
+        MatCheckbox,
+        IconButtonComponent,
+    ],
 })
 export class ManualAnnotationDialogComponent extends BaseDialogComponent implements OnInit {
     readonly #dossier: Dossier;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts
index fddd4302f..dc2063bca 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts
@@ -1,7 +1,15 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormBuilder } from '@angular/forms';
-import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import {
+    CircleButtonComponent,
+    DetailsRadioComponent,
+    DetailsRadioOption,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDialogComponent,
+} from '@iqser/common-ui';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { Dictionary, IAddRedactionRequest, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@@ -12,11 +20,38 @@ import { tap } from 'rxjs/operators';
 import { getRedactOrHintOptions, RedactOrHintOption, RedactOrHintOptions } from '../../utils/dialog-options';
 import { RedactRecommendationData, RedactRecommendationResult } from '../../utils/dialog-types';
 import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
-import { ValueColumn } from '../../components/selected-annotations-table/selected-annotations-table.component';
+import {
+    SelectedAnnotationsTableComponent,
+    ValueColumn,
+} from '../../components/selected-annotations-table/selected-annotations-table.component';
+import { MatFormField } from '@angular/material/form-field';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatDialogClose } from '@angular/material/dialog';
 
 @Component({
     templateUrl: './redact-recommendation-dialog.component.html',
     styleUrl: './redact-recommendation-dialog.component.scss',
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        SelectedAnnotationsTableComponent,
+        DetailsRadioComponent,
+        MatFormField,
+        NgIf,
+        MatOption,
+        NgForOf,
+        MatTooltip,
+        HasScrollbarDirective,
+        IconButtonComponent,
+        TranslateModule,
+        CircleButtonComponent,
+        MatDialogClose,
+        MatSelectTrigger,
+        MatSelect,
+    ],
 })
 export class RedactRecommendationDialogComponent
     extends IqserDialogComponent<RedactRecommendationDialogComponent, RedactRecommendationData, RedactRecommendationResult>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
index 445aa7d34..006433bee 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
@@ -1,7 +1,15 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import {
+    CircleButtonComponent,
+    DetailsRadioComponent,
+    DetailsRadioOption,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDialogComponent,
+} from '@iqser/common-ui';
 import { Dictionary, IAddRedactionRequest, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
@@ -15,12 +23,38 @@ import { RedactTextData, RedactTextResult } from '../../utils/dialog-types';
 import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { SystemDefaultOption, SystemDefaults } from '../../../account/utils/dialog-defaults';
+import { AsyncPipe, NgClass, NgForOf, NgIf, NgStyle } from '@angular/common';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatDialogClose } from '@angular/material/dialog';
 
 const MAXIMUM_TEXT_AREA_WIDTH = 421;
 
 @Component({
     templateUrl: './redact-text-dialog.component.html',
     styleUrls: ['./redact-text-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        NgClass,
+        NgIf,
+        NgStyle,
+        HasScrollbarDirective,
+        CircleButtonComponent,
+        DetailsRadioComponent,
+        MatFormField,
+        MatSelectTrigger,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        MatTooltip,
+        TranslateModule,
+        AsyncPipe,
+        IconButtonComponent,
+        MatDialogClose,
+    ],
 })
 export class RedactTextDialogComponent
     extends IqserDialogComponent<RedactTextDialogComponent, RedactTextData, RedactTextResult>
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
index 04d209710..681ee4048 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
@@ -1,20 +1,50 @@
 import { Component, computed } from '@angular/core';
-import { FormBuilder, UntypedFormGroup } from '@angular/forms';
-import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import {
+    CircleButtonComponent,
+    DetailsRadioComponent,
+    DetailsRadioOption,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDenyDirective,
+    IqserDialogComponent,
+    IqserHelpModeModule,
+} from '@iqser/common-ui';
 import { getRemoveRedactionOptions, RemoveRedactionOption, RemoveRedactionOptions } from '../../utils/dialog-options';
 import { RemoveRedactionData, RemoveRedactionResult } from '../../utils/dialog-types';
 import { Roles } from '@users/roles';
 import { DialogHelpModeKeys } from '../../utils/constants';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs/operators';
-import { ValueColumn } from '../../components/selected-annotations-table/selected-annotations-table.component';
+import {
+    SelectedAnnotationsTableComponent,
+    ValueColumn,
+} from '../../components/selected-annotations-table/selected-annotations-table.component';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { SystemDefaultOption, SystemDefaults } from '../../../account/utils/dialog-defaults';
 import { stringToBoolean } from '@utils/functions';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgStyle } from '@angular/common';
+import { MatDialogClose } from '@angular/material/dialog';
 
 @Component({
     templateUrl: './remove-redaction-dialog.component.html',
     styleUrls: ['./remove-redaction-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TranslateModule,
+        NgStyle,
+        SelectedAnnotationsTableComponent,
+        DetailsRadioComponent,
+        IconButtonComponent,
+        IqserHelpModeModule,
+        CircleButtonComponent,
+        HasScrollbarDirective,
+        MatDialogClose,
+        IqserDenyDirective,
+    ],
 })
 export class RemoveRedactionDialogComponent extends IqserDialogComponent<
     RemoveRedactionDialogComponent,
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts
index e1e6b3f34..d0ab2de9d 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts
@@ -1,14 +1,42 @@
 import { Component, inject } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { DetailsRadioOption, IconButtonTypes, IqserDialogComponent } from '@iqser/common-ui';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import {
+    CircleButtonComponent,
+    DetailsRadioComponent,
+    DetailsRadioOption,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDialogComponent,
+} from '@iqser/common-ui';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
 import { getResizeRedactionOptions, ResizeOptions, ResizeRedactionOption } from '../../utils/dialog-options';
 import { ResizeRedactionData, ResizeRedactionResult } from '../../utils/dialog-types';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatDialogClose } from '@angular/material/dialog';
+import { NgIf } from '@angular/common';
 
 @Component({
     templateUrl: './resize-redaction-dialog.component.html',
     styleUrls: ['./resize-redaction-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TranslateModule,
+        DetailsRadioComponent,
+        MatFormField,
+        MatSelectTrigger,
+        MatSelect,
+        MatOption,
+        IconButtonComponent,
+        CircleButtonComponent,
+        HasScrollbarDirective,
+        MatDialogClose,
+        NgIf,
+    ],
 })
 export class ResizeRedactionDialogComponent extends IqserDialogComponent<
     ResizeRedactionDialogComponent,
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
index 8cfc9074c..4e43efe6e 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
@@ -1,15 +1,18 @@
+import { ActivatedRouteSnapshot, NavigationExtras, Router, RouterLink } from '@angular/router';
 import { ChangeDetectorRef, Component, effect, NgZone, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { ActivatedRouteSnapshot, NavigationExtras, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ComponentCanDeactivate } from '@guards/can-deactivate.guard';
 import {
+    CircleButtonComponent,
     CircleButtonTypes,
     ConfirmOption,
     ConfirmOptions,
     CustomError,
+    DisableStopPropagationDirective,
     ErrorService,
     getConfig,
     IConfirmationDialogData,
+    IqserAllowDirective,
     IqserDialog,
     LoadingService,
     Toaster,
@@ -57,11 +60,36 @@ import { StampService } from './services/stamp.service';
 import { ViewModeService } from './services/view-mode.service';
 import { RedactTextData } from './utils/dialog-types';
 import { MultiSelectService } from './services/multi-select.service';
+import { NgIf } from '@angular/common';
+import { ViewSwitchComponent } from './components/view-switch/view-switch.component';
+import { ProcessingIndicatorComponent } from '@shared/components/processing-indicator/processing-indicator.component';
+import { UserManagementComponent } from './components/user-management/user-management.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { InitialsAvatarComponent } from '@common-ui/users';
+import { FileActionsComponent } from '../shared-dossiers/components/file-actions/file-actions.component';
+import { FilePreviewRightContainerComponent } from './components/right-container/file-preview-right-container.component';
+import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component';
 
 @Component({
     templateUrl: './file-preview-screen.component.html',
     styleUrls: ['./file-preview-screen.component.scss'],
     providers: filePreviewScreenProviders,
+    standalone: true,
+    imports: [
+        NgIf,
+        ViewSwitchComponent,
+        ProcessingIndicatorComponent,
+        UserManagementComponent,
+        TranslateModule,
+        InitialsAvatarComponent,
+        CircleButtonComponent,
+        IqserAllowDirective,
+        FileActionsComponent,
+        DisableStopPropagationDirective,
+        RouterLink,
+        FilePreviewRightContainerComponent,
+        TypeFilterComponent,
+    ],
 })
 export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate {
     readonly circleButtonTypes = CircleButtonTypes;
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
deleted file mode 100644
index f21e31e81..000000000
--- a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import { OverlayModule } from '@angular/cdk/overlay';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
-import { PendingChangesGuard } from '@guards/can-deactivate.guard';
-import {
-    CapitalizePipe,
-    CircleButtonComponent,
-    DetailsRadioComponent,
-    DisableStopPropagationDirective,
-    DynamicInputComponent,
-    EditableInputComponent,
-    EmptyStateComponent,
-    HasScrollbarDirective,
-    IconButtonComponent,
-    InputWithActionComponent,
-    IqserAllowDirective,
-    IqserDenyDirective,
-    IqserHelpModeModule,
-    IqserRoutes,
-    IqserUploadFileModule,
-    LogPipe,
-    PreventDefaultDirective,
-    RoundCheckboxComponent,
-    StopPropagationDirective,
-} from '@iqser/common-ui';
-import { IqserFiltersModule } from '@iqser/common-ui/lib/filtering';
-import { StatusBarComponent } from '@iqser/common-ui/lib/shared';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
-import { TranslateModule } from '@ngx-translate/core';
-import { SharedModule } from '@shared/shared.module';
-import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';
-import { AnnotationActionsComponent } from './components/annotation-actions/annotation-actions.component';
-import { AnnotationCardComponent } from './components/annotation-card/annotation-card.component';
-import { AnnotationDetailsComponent } from './components/annotation-details/annotation-details.component';
-import { AnnotationReferenceComponent } from './components/annotation-reference/annotation-reference.component';
-import { AnnotationReferencesListComponent } from './components/annotation-references-list/annotation-references-list.component';
-import { AnnotationReferencesPageIndicatorComponent } from './components/annotation-references-page-indicator/annotation-references-page-indicator.component';
-import { AnnotationWrapperComponent } from './components/annotation-wrapper/annotation-wrapper.component';
-import { AnnotationsListComponent } from './components/annotations-list/annotations-list.component';
-import { CommentsComponent } from './components/comments/comments.component';
-import { DocumentInfoComponent } from './components/document-info/document-info.component';
-import { FileWorkloadComponent } from './components/file-workload/file-workload.component';
-import { HighlightsSeparatorComponent } from './components/highlights-separator/highlights-separator.component';
-import { PageExclusionComponent } from './components/page-exclusion/page-exclusion.component';
-import { PageIndicatorComponent } from './components/page-indicator/page-indicator.component';
-import { PagesComponent } from './components/pages/pages.component';
-import { ReadonlyBannerComponent } from './components/readonly-banner/readonly-banner.component';
-import { FilePreviewRightContainerComponent } from './components/right-container/file-preview-right-container.component';
-import { UserManagementComponent } from './components/user-management/user-management.component';
-import { ViewSwitchComponent } from './components/view-switch/view-switch.component';
-import { AddHintDialogComponent } from './dialogs/add-hint-dialog/add-hint-dialog.component';
-import { ChangeLegalBasisDialogComponent } from './dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component';
-import { AddAnnotationDialogComponent } from './dialogs/docu-mine/add-annotation-dialog/add-annotation-dialog.component';
-import { EditAnnotationDialogComponent } from './dialogs/docu-mine/edit-annotation-dialog/edit-annotation-dialog.component';
-import { RemoveAnnotationDialogComponent } from './dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component';
-import { DocumentInfoDialogComponent } from './dialogs/document-info-dialog/document-info-dialog.component';
-import { EditRedactionDialogComponent } from './dialogs/edit-redaction-dialog/edit-redaction-dialog.component';
-import { ForceAnnotationDialogComponent } from './dialogs/force-redaction-dialog/force-annotation-dialog.component';
-import { HighlightActionDialogComponent } from './dialogs/highlight-action-dialog/highlight-action-dialog.component';
-import { ImportRedactionsDialogComponent } from './dialogs/import-redactions-dialog/import-redactions-dialog';
-import { ManualAnnotationDialogComponent } from './dialogs/manual-redaction-dialog/manual-annotation-dialog.component';
-import { RedactRecommendationDialogComponent } from './dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component';
-import { RedactTextDialogComponent } from './dialogs/redact-text-dialog/redact-text-dialog.component';
-import { RemoveRedactionDialogComponent } from './dialogs/remove-redaction-dialog/remove-redaction-dialog.component';
-import { ResizeRedactionDialogComponent } from './dialogs/resize-redaction-dialog/resize-redaction-dialog.component';
-import { FilePreviewScreenComponent } from './file-preview-screen.component';
-import { DocumentUnloadedGuard } from './services/document-unloaded.guard';
-import { FilePreviewDialogService } from './services/file-preview-dialog.service';
-import { ManualRedactionService } from './services/manual-redaction.service';
-import { TablesService } from './services/tables.service';
-import { SelectedAnnotationsTableComponent } from './components/selected-annotations-table/selected-annotations-table.component';
-import { SelectedAnnotationsListComponent } from './components/selected-annotations-list/selected-annotations-list.component';
-import { FileHeaderComponent } from './components/file-header/file-header.component';
-import { DocumineExportComponent } from './components/documine-export/documine-export.component';
-import { StructuredComponentManagementComponent } from './components/structured-component-management/structured-component-management.component';
-import { EditableStructuredComponentValueComponent } from './components/editable-structured-component-value/editable-structured-component-value.component';
-
-const routes: IqserRoutes = [
-    {
-        path: '',
-        component: FilePreviewScreenComponent,
-        pathMatch: 'full',
-        canDeactivate: [PendingChangesGuard, DocumentUnloadedGuard],
-    },
-];
-
-const dialogs = [
-    ManualAnnotationDialogComponent,
-    ForceAnnotationDialogComponent,
-    ResizeRedactionDialogComponent,
-    ChangeLegalBasisDialogComponent,
-    HighlightActionDialogComponent,
-    DocumentInfoDialogComponent,
-    ImportRedactionsDialogComponent,
-    RedactTextDialogComponent,
-    EditRedactionDialogComponent,
-    EditAnnotationDialogComponent,
-    AddHintDialogComponent,
-    RemoveRedactionDialogComponent,
-    AddAnnotationDialogComponent,
-    RemoveAnnotationDialogComponent,
-    RedactRecommendationDialogComponent,
-];
-
-const components = [
-    FileWorkloadComponent,
-    AnnotationDetailsComponent,
-    AnnotationWrapperComponent,
-    AnnotationsListComponent,
-    PageIndicatorComponent,
-    PagesComponent,
-    PageExclusionComponent,
-    AnnotationActionsComponent,
-    CommentsComponent,
-    DocumentInfoComponent,
-    ViewSwitchComponent,
-    UserManagementComponent,
-    AnnotationReferencesListComponent,
-    AnnotationCardComponent,
-    AnnotationReferencesPageIndicatorComponent,
-    HighlightsSeparatorComponent,
-    AnnotationReferenceComponent,
-    FilePreviewScreenComponent,
-    FilePreviewRightContainerComponent,
-    ReadonlyBannerComponent,
-    FileHeaderComponent,
-    DocumineExportComponent,
-    StructuredComponentManagementComponent,
-];
-
-@NgModule({
-    declarations: [...components, ...dialogs],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        TranslateModule,
-        OverlayModule,
-        IqserHelpModeModule,
-        IqserUsersModule,
-        CapitalizePipe,
-        IqserUploadFileModule,
-        IqserFiltersModule,
-        SharedModule,
-        CircleButtonComponent,
-        SharedDossiersModule,
-        IconButtonComponent,
-        EmptyStateComponent,
-        StatusBarComponent,
-        StopPropagationDirective,
-        PreventDefaultDirective,
-        HasScrollbarDirective,
-        EditableInputComponent,
-        DetailsRadioComponent,
-        DynamicInputComponent,
-        InputWithActionComponent,
-        RoundCheckboxComponent,
-        IqserAllowDirective,
-        IqserDenyDirective,
-        LogPipe,
-        ReplaceNbspPipe,
-        DisableStopPropagationDirective,
-        SelectedAnnotationsTableComponent,
-        SelectedAnnotationsListComponent,
-        EditableStructuredComponentValueComponent,
-    ],
-    providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard, TablesService],
-})
-export class FilePreviewModule {}
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview.routes.ts b/apps/red-ui/src/app/modules/file-preview/file-preview.routes.ts
new file mode 100644
index 000000000..ca59f7a45
--- /dev/null
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview.routes.ts
@@ -0,0 +1,18 @@
+import { IqserRoutes } from '@iqser/common-ui';
+import { FilePreviewScreenComponent } from './file-preview-screen.component';
+import { PendingChangesGuard } from '@guards/can-deactivate.guard';
+import { DocumentUnloadedGuard } from './services/document-unloaded.guard';
+import { FilePreviewDialogService } from './services/file-preview-dialog.service';
+import { ManualRedactionService } from './services/manual-redaction.service';
+import { TablesService } from './services/tables.service';
+import { FileAssignService } from '../shared-dossiers/services/file-assign.service';
+
+export default [
+    {
+        path: '',
+        component: FilePreviewScreenComponent,
+        pathMatch: 'full',
+        canDeactivate: [PendingChangesGuard, DocumentUnloadedGuard],
+        providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard, TablesService, FileAssignService],
+    },
+] satisfies IqserRoutes;
diff --git a/apps/red-ui/src/app/modules/search/search.module.ts b/apps/red-ui/src/app/modules/search/search.module.ts
index e37dc443e..dd0e66b1a 100644
--- a/apps/red-ui/src/app/modules/search/search.module.ts
+++ b/apps/red-ui/src/app/modules/search/search.module.ts
@@ -6,7 +6,7 @@ import { IqserListingModule, StopPropagationDirective } from '@iqser/common-ui';
 import { SharedModule } from '@shared/shared.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { SearchItemTemplateComponent } from './search-item-template/search-item-template.component';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
+import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
 import { StatusBarComponent } from '@iqser/common-ui/lib/shared';
 
 const routes = [{ path: '', component: SearchScreenComponent }];
@@ -22,6 +22,7 @@ const routes = [{ path: '', component: SearchScreenComponent }];
         IqserListingModule,
         StatusBarComponent,
         StopPropagationDirective,
+        InitialsAvatarComponent,
     ],
 })
 export class SearchModule {}
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/components/date-column/date-column.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/components/date-column/date-column.component.ts
index 732d72251..7b652fb01 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/components/date-column/date-column.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/components/date-column/date-column.component.ts
@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { DatePipe } from '@angular/common';
 
 @Component({
     selector: 'redaction-date-column [date]',
     templateUrl: './date-column.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [DatePipe],
 })
 export class DateColumnComponent {
     @Input() isError = false;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts
index 557356d13..208bc62cf 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts
@@ -21,7 +21,7 @@ import { FilesService } from '@services/files/files.service';
 import { PermissionsService } from '@services/permissions.service';
 import { ReanalysisService, ReanalyzeQueryParams } from '@services/reanalysis.service';
 import { ExpandableFileActionsComponent } from '@shared/components/expandable-file-actions/expandable-file-actions.component';
-import { LongPressEvent } from '@shared/directives/long-press.directive';
+import { LongPressDirective, LongPressEvent } from '@shared/directives/long-press.directive';
 import { Roles } from '@users/roles';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { setLocalStorageDataByFileId } from '@utils/local-storage';
@@ -34,11 +34,16 @@ import { ROTATION_ACTION_BUTTONS } from '../../../pdf-viewer/utils/constants';
 import { AssignReviewerApproverDialogComponent } from '../../dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
 import { FileAssignService } from '../../services/file-assign.service';
+import { ProcessingIndicatorComponent } from '@shared/components/processing-indicator/processing-indicator.component';
+import { StatusBarComponent } from '@common-ui/shared';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
 
 @Component({
     selector: 'redaction-file-actions',
     templateUrl: './file-actions.component.html',
     styleUrls: ['./file-actions.component.scss'],
+    standalone: true,
+    imports: [ProcessingIndicatorComponent, StatusBarComponent, LongPressDirective, ExpandableFileActionsComponent, NgTemplateOutlet, NgIf],
 })
 export class FileActionsComponent implements OnChanges {
     @Input({ required: true }) file: File;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts b/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
index 7cfca15d6..0d7dfab4c 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
@@ -26,21 +26,23 @@ import {
 } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { DossiersListingActionsComponent } from './components/dossiers-listing-actions/dossiers-listing-actions.component';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
+import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
 import { SideNavComponent, SmallChipComponent, StatusBarComponent } from '@iqser/common-ui/lib/shared';
 import { SelectComponent } from '@shared/components/select/select.component';
 import { SnakeCasePipe } from '@common-ui/pipes/snake-case.pipe';
 import { EditDictionaryDialogComponent } from './dialogs/edit-dictionary-dialog/edit-dictionary-dialog.component';
+import { TeamMembersComponent } from '@shared/components/team-members/team-members.component';
+import { LongPressDirective } from '@shared/directives/long-press.directive';
+import { FileDownloadBtnComponent } from '@shared/components/buttons/file-download-btn/file-download-btn.component';
+import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
+import { NamePipe } from '@common-ui/users/name.pipe';
 
 const components = [
-    FileActionsComponent,
     EditDossierGeneralInfoComponent,
     EditDossierDownloadPackageComponent,
     EditDossierDictionaryComponent,
     EditDossierAttributesComponent,
     EditDossierTeamComponent,
-    FileActionsComponent,
-    DateColumnComponent,
     DossiersListingActionsComponent,
 ];
 const dialogs = [EditDossierDialogComponent, AssignReviewerApproverDialogComponent];
@@ -71,6 +73,12 @@ const dialogs = [EditDossierDialogComponent, AssignReviewerApproverDialogCompone
         SelectComponent,
         SnakeCasePipe,
         EditDictionaryDialogComponent,
+        TeamMembersComponent,
+        LongPressDirective,
+        FileDownloadBtnComponent,
+        AnnotationIconComponent,
+        InitialsAvatarComponent,
+        NamePipe,
     ],
 })
 export class SharedDossiersModule {}
diff --git a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts
index c2a315e6b..99c27090c 100644
--- a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts
@@ -5,6 +5,7 @@ import { AnnotationIconType } from '@red/domain';
     selector: 'redaction-annotation-icon [color] [type] [label]',
     templateUrl: './annotation-icon.component.html',
     styleUrls: ['./annotation-icon.component.scss'],
+    standalone: true,
 })
 export class AnnotationIconComponent implements OnChanges {
     @Input() color: string;
diff --git a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.ts b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.ts
index c1bc526cc..eb63fe2fb 100644
--- a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.ts
@@ -1,13 +1,33 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { UserService } from '@users/user.service';
 import { User } from '@red/domain';
 import { List } from '@iqser/common-ui/lib/utils';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgForOf, NgTemplateOutlet } from '@angular/common';
+import { CircleButtonComponent, StopPropagationDirective } from '@iqser/common-ui';
+import { InitialsAvatarComponent } from '@common-ui/users';
 
 @Component({
     selector: 'redaction-assign-user-dropdown',
     templateUrl: './assign-user-dropdown.component.html',
     styleUrls: ['./assign-user-dropdown.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        MatFormField,
+        MatSelect,
+        MatSelectTrigger,
+        MatOption,
+        FormsModule,
+        TranslateModule,
+        NgTemplateOutlet,
+        StopPropagationDirective,
+        CircleButtonComponent,
+        NgForOf,
+        InitialsAvatarComponent,
+    ],
 })
 export class AssignUserDropdownComponent {
     private _currentUser: User | string;
@@ -16,7 +36,7 @@ export class AssignUserDropdownComponent {
     @Output() readonly save = new EventEmitter<User | string>();
     @Output() readonly cancel = new EventEmitter();
 
-    constructor(private readonly _userService: UserService) {}
+    constructor() {}
 
     get value(): User | string {
         return this._currentUser;
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
index 5a58c1260..8fde993b4 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
@@ -1,15 +1,18 @@
 import { Component, inject, Input, OnChanges } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { CircleButtonType, CircleButtonTypes, IqserDialog, Toaster } from '@iqser/common-ui';
+import { CircleButtonComponent, CircleButtonType, CircleButtonTypes, IqserDialog, Toaster } from '@iqser/common-ui';
 import { Dossier, File, ProcessingFileStatuses } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
 import { DownloadDialogComponent } from '@shared/dialogs/download-dialog/download-dialog.component';
 import { FileDownloadService } from '@upload-download/services/file-download.service';
 import { APP_BASE_HREF } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-file-download-btn',
     templateUrl: './file-download-btn.component.html',
+    standalone: true,
+    imports: [CircleButtonComponent, TranslateModule],
 })
 export class FileDownloadBtnComponent implements OnChanges {
     @Input({ required: true }) files: File[];
diff --git a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts
index 7d2ab4a41..8f310dc0d 100644
--- a/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts
@@ -1,18 +1,40 @@
 import { Component, inject, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 import { Action, ActionTypes, Dossier, File } from '@red/domain';
-import { CircleButtonType, IqserDialog, Toaster } from '@iqser/common-ui';
+import { CircleButtonComponent, CircleButtonType, IqserDialog, StopPropagationDirective, Toaster } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FileDownloadService } from '@upload-download/services/file-download.service';
 import { PermissionsService } from '@services/permissions.service';
-import { MatMenuTrigger } from '@angular/material/menu';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { DownloadDialogComponent } from '@shared/dialogs/download-dialog/download-dialog.component';
 import { IqserTooltipPosition, trackByFactory } from '@iqser/common-ui/lib/utils';
-import { APP_BASE_HREF } from '@angular/common';
+import { APP_BASE_HREF, AsyncPipe, NgClass, NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { FileDownloadBtnComponent } from '@shared/components/buttons/file-download-btn/file-download-btn.component';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'redaction-expandable-file-actions',
     templateUrl: './expandable-file-actions.component.html',
     styleUrls: ['./expandable-file-actions.component.scss'],
+    standalone: true,
+    imports: [
+        CircleButtonComponent,
+        TranslateModule,
+        AsyncPipe,
+        FileDownloadBtnComponent,
+        NgIf,
+        MatSlideToggle,
+        MatTooltip,
+        NgClass,
+        MatMenuTrigger,
+        MatMenu,
+        MatIcon,
+        MatMenuItem,
+        NgForOf,
+        StopPropagationDirective,
+    ],
 })
 export class ExpandableFileActionsComponent implements OnChanges {
     @Input({ required: true }) actions: Action[];
diff --git a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts
index 1bc56cb18..cea2dc564 100644
--- a/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/file-name-column/file-name-column.component.ts
@@ -15,6 +15,10 @@ import { FileAttributesService } from '@services/entity-services/file-attributes
 import { combineLatest, map, ReplaySubject } from 'rxjs';
 import { ContextComponent } from '@iqser/common-ui/lib/utils';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
+import { MatTooltip } from '@angular/material/tooltip';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { FileAttributeComponent } from '../../../dossier-overview/components/file-attribute/file-attribute.component';
+import { FileStatsComponent } from '@shared/components/file-stats/file-stats.component';
 
 interface FileNameColumnContext {
     primaryAttribute: IFileAttributeConfig;
@@ -25,6 +29,8 @@ interface FileNameColumnContext {
     templateUrl: './file-name-column.component.html',
     styleUrls: ['./file-name-column.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [MatTooltip, NgIf, AsyncPipe, FileAttributeComponent, FileStatsComponent],
 })
 export class FileNameColumnComponent extends ContextComponent<FileNameColumnContext> implements OnInit, OnChanges {
     readonly #reloadAttribute = new ReplaySubject<void>(1);
diff --git a/apps/red-ui/src/app/modules/shared/components/file-stats/file-stats.component.ts b/apps/red-ui/src/app/modules/shared/components/file-stats/file-stats.component.ts
index a17a7c2ca..7e2e34aed 100644
--- a/apps/red-ui/src/app/modules/shared/components/file-stats/file-stats.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/file-stats/file-stats.component.ts
@@ -1,9 +1,15 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { DatePipe, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-file-stats',
     templateUrl: './file-stats.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [MatIcon, MatTooltip, NgIf, TranslateModule, DatePipe],
 })
 export class FileStatsComponent {
     @Input() file: { numberOfPages: number; excludedPages: number[]; lastOCRTime?: string };
diff --git a/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.ts b/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.ts
index 0dffab4c7..28d27e7fa 100644
--- a/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/ocr-progress-bar/ocr-progress-bar.component.ts
@@ -1,10 +1,15 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { NgIf, PercentPipe } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
 
 @Component({
     selector: 'redaction-ocr-progress-bar',
     templateUrl: './ocr-progress-bar.component.html',
     styleUrls: ['./ocr-progress-bar.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [MatProgressBar, NgIf, MatTooltip, PercentPipe],
 })
 export class OcrProgressBarComponent {
     @Input() numberOfPagesToOCR: number;
diff --git a/apps/red-ui/src/app/modules/shared/components/processing-indicator/processing-indicator.component.ts b/apps/red-ui/src/app/modules/shared/components/processing-indicator/processing-indicator.component.ts
index c70b5a778..88d8785b0 100644
--- a/apps/red-ui/src/app/modules/shared/components/processing-indicator/processing-indicator.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/processing-indicator/processing-indicator.component.ts
@@ -1,12 +1,18 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { File } from '@red/domain';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIcon } from '@angular/material/icon';
+import { NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-processing-indicator [file]',
     templateUrl: './processing-indicator.component.html',
     styleUrls: ['./processing-indicator.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [MatTooltip, TranslateModule, MatIcon, NgIf],
 })
 export class ProcessingIndicatorComponent implements OnChanges {
     tooltip: string;
diff --git a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts
index 9272c9f73..90e0701f3 100644
--- a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts
@@ -1,16 +1,21 @@
 import { Component, ElementRef, EventEmitter, inject, Input, OnChanges, Output, ViewChild } from '@angular/core';
-import { CircleButtonTypes } from '@iqser/common-ui';
+import { CircleButtonComponent, CircleButtonTypes, IqserAllowDirective } from '@iqser/common-ui';
 import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
 import { Roles } from '@users/roles';
 import { User } from '@red/domain';
 import { UserService } from '@users/user.service';
-import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { getCurrentUser, InitialsAvatarComponent } from '@iqser/common-ui/lib/users';
 import { List } from '@iqser/common-ui/lib/utils';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-team-members',
     templateUrl: './team-members.component.html',
     styleUrls: ['./team-members.component.scss'],
+    standalone: true,
+    imports: [NgForOf, MatIcon, NgIf, CircleButtonComponent, IqserAllowDirective, TranslateModule, InitialsAvatarComponent],
 })
 export class TeamMembersComponent implements OnChanges {
     readonly circleButtonTypes = CircleButtonTypes;
diff --git a/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.ts b/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.ts
index 13c2f4b27..a269799cd 100644
--- a/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/type-filter/type-filter.component.ts
@@ -1,11 +1,16 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import { INestedFilter } from '@iqser/common-ui/lib/filtering';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
+import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
 
 @Component({
     selector: 'redaction-type-filter',
     templateUrl: './type-filter.component.html',
     styleUrls: ['./type-filter.component.scss'],
+    standalone: true,
+    imports: [NgIf, MatIcon, AnnotationIconComponent, AsyncPipe, TranslateModule],
 })
 export class TypeFilterComponent implements OnChanges {
     private _needsAnalysisKeys: string[] = ['remove-only-here', 'analysis'];
diff --git a/apps/red-ui/src/app/modules/shared/directives/long-press.directive.ts b/apps/red-ui/src/app/modules/shared/directives/long-press.directive.ts
index f69a381ac..d5d6979e1 100644
--- a/apps/red-ui/src/app/modules/shared/directives/long-press.directive.ts
+++ b/apps/red-ui/src/app/modules/shared/directives/long-press.directive.ts
@@ -8,6 +8,7 @@ export interface LongPressEvent {
 
 @Directive({
     selector: '[redactionLongPress]',
+    standalone: true,
 })
 export class LongPressDirective {
     @Output() longPress = new EventEmitter();
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 d7330bd16..a1c4cc4dd 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -1,11 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import { FileDownloadBtnComponent } from './components/buttons/file-download-btn/file-download-btn.component';
 import { MatConfigModule } from '../mat-config/mat-config.module';
 import { IconsModule } from '../icons/icons.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component';
 import { DonutChartComponent } from './components/donut-chart/donut-chart.component';
 import {
     CircleButtonComponent,
@@ -21,17 +19,9 @@ import {
 import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-dossiers-screen.directive';
 import { DictionaryManagerComponent } from './components/dictionary-manager/dictionary-manager.component';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { AssignUserDropdownComponent } from './components/assign-user-dropdown/assign-user-dropdown.component';
 import { DatePipe } from './pipes/date.pipe';
-import { LongPressDirective } from './directives/long-press.directive';
-import { TypeFilterComponent } from './components/type-filter/type-filter.component';
-import { TeamMembersComponent } from './components/team-members/team-members.component';
 import { EditorComponent } from './components/editor/editor.component';
-import { ExpandableFileActionsComponent } from './components/expandable-file-actions/expandable-file-actions.component';
-import { ProcessingIndicatorComponent } from './components/processing-indicator/processing-indicator.component';
 import { DossierStateComponent } from './components/dossier-state/dossier-state.component';
-import { FileStatsComponent } from './components/file-stats/file-stats.component';
-import { FileNameColumnComponent } from './components/file-name-column/file-name-column.component';
 import { DossierNameColumnComponent } from './components/dossier-name-column/dossier-name-column.component';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { DossiersTypeSwitchComponent } from './components/dossiers-type-switch/dossiers-type-switch.component';
@@ -42,7 +32,6 @@ import { SharedDialogService } from './services/dialog.service';
 import { AddEditEntityComponent } from './components/add-edit-entity/add-edit-entity.component';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { WatermarkSelectorComponent } from './components/dossier-watermark-selector/watermark-selector.component';
-import { OcrProgressBarComponent } from './components/ocr-progress-bar/ocr-progress-bar.component';
 import { CustomDateAdapter } from '@shared/CustomDateAdapter';
 import { IqserUsersModule } from '@iqser/common-ui/lib/users';
 import { SmallChipComponent } from '@iqser/common-ui/lib/shared';
@@ -50,30 +39,17 @@ import { SelectComponent } from '@shared/components/select/select.component';
 import { FileAttributeComponent } from '../dossier-overview/components/file-attribute/file-attribute.component';
 import { MatDividerModule } from '@angular/material/divider';
 
-const buttons = [FileDownloadBtnComponent];
-
 const components = [
-    AnnotationIconComponent,
     DictionaryManagerComponent,
-    AssignUserDropdownComponent,
-    TypeFilterComponent,
-    TeamMembersComponent,
-    ExpandableFileActionsComponent,
-    ProcessingIndicatorComponent,
     DossierStateComponent,
     DossierNameColumnComponent,
-    FileStatsComponent,
-    FileNameColumnComponent,
     DossiersTypeSwitchComponent,
     AddDossierDialogComponent,
     WatermarkSelectorComponent,
     AddEditEntityComponent,
-    OcrProgressBarComponent,
-
-    ...buttons,
 ];
 
-const utils = [DatePipe, NavigateLastDossiersScreenDirective, LongPressDirective];
+const utils = [DatePipe, NavigateLastDossiersScreenDirective];
 
 const services = [SharedDialogService];
 
diff --git a/apps/red-ui/src/app/modules/trash/trash.module.ts b/apps/red-ui/src/app/modules/trash/trash.module.ts
index cb0defa70..6ea3c27ce 100644
--- a/apps/red-ui/src/app/modules/trash/trash.module.ts
+++ b/apps/red-ui/src/app/modules/trash/trash.module.ts
@@ -7,7 +7,8 @@ import { TrashTableItemComponent } from './trash-screen/trash-table-item/trash-t
 import { SharedModule } from '@shared/shared.module';
 import { TrashDialogService } from './services/trash-dialog.service';
 import { TranslateModule } from '@ngx-translate/core';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
+import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
+import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
 
 const routes = [{ path: '', component: TrashScreenComponent }];
 
@@ -21,6 +22,8 @@ const routes = [{ path: '', component: TrashScreenComponent }];
         TranslateModule,
         IqserListingModule,
         CircleButtonComponent,
+        FileNameColumnComponent,
+        InitialsAvatarComponent,
     ],
     providers: [TrashDialogService],
 })
diff --git a/libs/common-ui b/libs/common-ui
index 0b64044f5..04ae68891 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 0b64044f576f38e4bb79033563a20400a62c15b6
+Subproject commit 04ae68891c9298b92327868006d1e7c79529c7e6

From cf6b7b4d24896fa2685e0d1e097e8147ad11ece5 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Tue, 11 Jun 2024 20:32:06 +0300
Subject: [PATCH 03/17] RED-9321:  lazy load entities routes, standalone
 components.

---
 .../app/modules/admin/admin-routing.module.ts |  2 +-
 .../src/app/modules/admin/admin.module.ts     |  2 +
 .../admin/screens/entities/entities.module.ts | 50 -------------------
 .../admin/screens/entities/entities.routes.ts | 28 +++++++++++
 .../dictionary/dictionary-screen.component.ts |  3 ++
 .../entity-info/entity-info.component.ts      | 16 +++++-
 .../shared-dossiers/shared-dossiers.module.ts |  4 +-
 .../add-edit-entity.component.ts              | 31 +++++++++++-
 .../dictionary-manager.component.ts           | 29 ++++++++++-
 .../components/editor/editor.component.ts     |  9 +++-
 .../src/app/modules/shared/shared.module.ts   |  7 +--
 11 files changed, 116 insertions(+), 65 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/entities/entities.routes.ts

diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
index d393bad31..995d4a02e 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
@@ -34,12 +34,12 @@ const entityRoutes: IqserRoutes = [
     },
     {
         path: `:${ENTITY_TYPE}`,
-        loadChildren: () => import('./screens/entities/entities.module').then(m => m.EntitiesModule),
         component: BaseEntityScreenComponent,
         canActivate: [CompositeRouteGuard, entityExistsGuard()],
         data: {
             routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
+        loadChildren: () => import('./screens/entities/entities.routes'),
     },
 ];
 
diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
index 8b5b705ad..946cba067 100644
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@@ -60,6 +60,7 @@ import { AddCloneDossierTemplateDialogComponent } from './dialogs/add-clone-doss
 import { ComponentMappingsScreenComponent } from './screens/component-mappings/component-mappings-screen.component';
 import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
 import { NamePipe } from '@common-ui/users/name.pipe';
+import { AddEditEntityComponent } from '@shared/components/add-edit-entity/add-edit-entity.component';
 
 const dialogs = [
     AddCloneDossierTemplateDialogComponent,
@@ -132,6 +133,7 @@ const components = [
         InitialsAvatarComponent,
         UploadFileComponent,
         NamePipe,
+        AddEditEntityComponent,
     ],
 })
 export class AdminModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts b/apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts
deleted file mode 100644
index 5eeddef83..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '@shared/shared.module';
-import { DictionaryScreenComponent } from './screens/dictionary/dictionary-screen.component';
-import { PendingChangesGuard } from '@guards/can-deactivate.guard';
-import { EntityInfoComponent } from './screens/entity-info/entity-info.component';
-import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { TranslateModule } from '@ngx-translate/core';
-import { HasScrollbarDirective, IconButtonComponent, IqserDenyDirective, IqserHelpModeModule } from '@iqser/common-ui';
-
-const routes: Routes = [
-    { path: '', redirectTo: 'info', pathMatch: 'full' },
-    {
-        path: 'info',
-        component: EntityInfoComponent,
-        canDeactivate: [PendingChangesGuard],
-    },
-    {
-        path: 'dictionary',
-        component: DictionaryScreenComponent,
-        canDeactivate: [PendingChangesGuard],
-    },
-    {
-        path: 'false-positive',
-        component: DictionaryScreenComponent,
-        canDeactivate: [PendingChangesGuard],
-    },
-    {
-        path: 'false-recommendations',
-        component: DictionaryScreenComponent,
-        canDeactivate: [PendingChangesGuard],
-    },
-];
-
-@NgModule({
-    declarations: [DictionaryScreenComponent, EntityInfoComponent],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        SharedModule,
-        MonacoEditorModule,
-        TranslateModule,
-        IqserHelpModeModule,
-        IconButtonComponent,
-        HasScrollbarDirective,
-        IqserDenyDirective,
-    ],
-})
-export class EntitiesModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/entities/entities.routes.ts b/apps/red-ui/src/app/modules/admin/screens/entities/entities.routes.ts
new file mode 100644
index 000000000..fe15bc760
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/entities/entities.routes.ts
@@ -0,0 +1,28 @@
+import { IqserRoutes } from '@iqser/common-ui';
+import { EntityInfoComponent } from './screens/entity-info/entity-info.component';
+import { PendingChangesGuard } from '@guards/can-deactivate.guard';
+import { DictionaryScreenComponent } from './screens/dictionary/dictionary-screen.component';
+
+export default [
+    { path: '', redirectTo: 'info', pathMatch: 'full' },
+    {
+        path: 'info',
+        component: EntityInfoComponent,
+        canDeactivate: [PendingChangesGuard],
+    },
+    {
+        path: 'dictionary',
+        component: DictionaryScreenComponent,
+        canDeactivate: [PendingChangesGuard],
+    },
+    {
+        path: 'false-positive',
+        component: DictionaryScreenComponent,
+        canDeactivate: [PendingChangesGuard],
+    },
+    {
+        path: 'false-recommendations',
+        component: DictionaryScreenComponent,
+        canDeactivate: [PendingChangesGuard],
+    },
+] satisfies IqserRoutes;
diff --git a/apps/red-ui/src/app/modules/admin/screens/entities/screens/dictionary/dictionary-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/entities/screens/dictionary/dictionary-screen.component.ts
index 5aed219a5..e0aed0529 100644
--- a/apps/red-ui/src/app/modules/admin/screens/entities/screens/dictionary/dictionary-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/entities/screens/dictionary/dictionary-screen.component.ts
@@ -10,11 +10,14 @@ import { Roles } from '@users/roles';
 import { NGXLogger } from 'ngx-logger';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { getParam, List } from '@iqser/common-ui/lib/utils';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
     templateUrl: './dictionary-screen.component.html',
     styleUrls: ['./dictionary-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [AsyncPipe, DictionaryManagerComponent],
 })
 export class DictionaryScreenComponent implements OnInit {
     protected readonly currentUser = getCurrentUser<User>();
diff --git a/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts b/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts
index 652c7b7a8..7577e8905 100644
--- a/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { getConfig, IconButtonTypes } from '@iqser/common-ui';
+import { getConfig, HasScrollbarDirective, IconButtonComponent, IconButtonTypes, IqserHelpModeModule } from '@iqser/common-ui';
 import { IqserEventTarget } from '@iqser/common-ui/lib/utils';
 import { Dictionary, DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
@@ -8,12 +8,26 @@ import { PermissionsService } from '@services/permissions.service';
 import { AddEditEntityComponent } from '@shared/components/add-edit-entity/add-edit-entity.component';
 import { getCurrentUser } from '@users/user.service';
 import { Observable } from 'rxjs';
+import { MatIcon } from '@angular/material/icon';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-entity-info',
     templateUrl: './entity-info.component.html',
     styleUrls: ['./entity-info.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        HasScrollbarDirective,
+        MatIcon,
+        NgIf,
+        TranslateModule,
+        AsyncPipe,
+        IconButtonComponent,
+        IqserHelpModeModule,
+        AddEditEntityComponent,
+    ],
 })
 export class EntityInfoComponent {
     @ViewChild(AddEditEntityComponent) private readonly _addEditEntityComponent: AddEditEntityComponent;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts b/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
index 0d7dfab4c..008069e90 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FileActionsComponent } from './components/file-actions/file-actions.component';
 import { SharedModule } from '@shared/shared.module';
 import { EditDossierDialogComponent } from './dialogs/edit-dossier-dialog/edit-dossier-dialog.component';
 import { AssignReviewerApproverDialogComponent } from './dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component';
@@ -9,7 +8,6 @@ import { EditDossierDownloadPackageComponent } from './dialogs/edit-dossier-dial
 import { EditDossierDictionaryComponent } from './dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component';
 import { EditDossierAttributesComponent } from './dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component';
 import { EditDossierTeamComponent } from './dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component';
-import { DateColumnComponent } from './components/date-column/date-column.component';
 import { FileAssignService } from './services/file-assign.service';
 import {
     CircleButtonComponent,
@@ -36,6 +34,7 @@ import { LongPressDirective } from '@shared/directives/long-press.directive';
 import { FileDownloadBtnComponent } from '@shared/components/buttons/file-download-btn/file-download-btn.component';
 import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
 import { NamePipe } from '@common-ui/users/name.pipe';
+import { DictionaryManagerComponent } from '@shared/components/dictionary-manager/dictionary-manager.component';
 
 const components = [
     EditDossierGeneralInfoComponent,
@@ -79,6 +78,7 @@ const dialogs = [EditDossierDialogComponent, AssignReviewerApproverDialogCompone
         AnnotationIconComponent,
         InitialsAvatarComponent,
         NamePipe,
+        DictionaryManagerComponent,
     ],
 })
 export class SharedDossiersModule {}
diff --git a/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.ts b/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.ts
index 038d22131..7ff945916 100644
--- a/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/add-edit-entity/add-edit-entity.component.ts
@@ -1,13 +1,22 @@
 import { booleanAttribute, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
-import { FormGroup, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { FormGroup, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { BaseFormComponent, getConfig, LoadingService, Toaster } from '@iqser/common-ui';
+import { BaseFormComponent, getConfig, HasScrollbarDirective, LoadingService, RoundCheckboxComponent, Toaster } from '@iqser/common-ui';
 import { Dictionary, IDictionary } from '@red/domain';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
 import { toSnakeCase } from '@utils/functions';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { ColorPickerModule } from 'ngx-color-picker';
+import { MatIcon } from '@angular/material/icon';
+import { MatButtonToggle, MatButtonToggleGroup } from '@angular/material/button-toggle';
+import { MatFormField } from '@angular/material/form-field';
+import { MatSelect } from '@angular/material/select';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 const REDACTION_FIELDS = ['defaultReason'];
 
@@ -23,6 +32,24 @@ interface Color {
     selector: 'redaction-add-edit-entity',
     templateUrl: './add-edit-entity.component.html',
     styleUrls: ['./add-edit-entity.component.scss'],
+    standalone: true,
+    imports: [
+        RoundCheckboxComponent,
+        NgIf,
+        ReactiveFormsModule,
+        NgForOf,
+        TranslateModule,
+        ColorPickerModule,
+        MatIcon,
+        AsyncPipe,
+        MatButtonToggleGroup,
+        MatButtonToggle,
+        MatFormField,
+        MatSelect,
+        HasScrollbarDirective,
+        MatSlideToggle,
+        MatCheckbox,
+    ],
 })
 export class AddEditEntityComponent extends BaseFormComponent implements OnInit {
     @Input({ required: true }) dossierTemplateId: string;
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
index 66cdc3fc6..04a995521 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
+import { CircleButtonComponent, IconButtonComponent, IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { Dictionary, DictionaryEntryType, DictionaryEntryTypes, DictionaryType, Dossier, DossierTemplate, IDictionary } from '@red/domain';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
@@ -12,6 +12,16 @@ import { Debounce, List } from '@iqser/common-ui/lib/utils';
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
 import FindMatch = monaco.editor.FindMatch;
 import { firstValueFrom } from 'rxjs';
+import { MatIcon } from '@angular/material/icon';
+import { NgForOf, NgIf } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { MatDivider } from '@angular/material/divider';
+import { SharedModule } from '@shared/shared.module';
 
 const COMPARE_ENTRIES_ERROR = 'compare-entries-error';
 const SMOOTH_SCROLL = 0;
@@ -25,6 +35,23 @@ const HELP_MODE_KEYS = {
     selector: 'redaction-dictionary-manager',
     templateUrl: './dictionary-manager.component.html',
     styleUrls: ['./dictionary-manager.component.scss'],
+    standalone: true,
+    imports: [
+        MatIcon,
+        NgIf,
+        FormsModule,
+        TranslateModule,
+        CircleButtonComponent,
+        MatTooltip,
+        MatCheckbox,
+        MatFormField,
+        MatSelect,
+        MatOption,
+        MatDivider,
+        NgForOf,
+        IconButtonComponent,
+        EditorComponent,
+    ],
 })
 export class DictionaryManagerComponent implements OnChanges, OnInit {
     private _searchDecorations: string[] = [];
diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
index e15b60cc3..ffd19b7d1 100644
--- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
@@ -11,6 +11,9 @@ import IDiffEditor = monaco.editor.IDiffEditor;
 import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
 import ILineChange = monaco.editor.ILineChange;
 import IEditorMouseEvent = monaco.editor.IEditorMouseEvent;
+import { MonacoEditorModule, MonacoStandaloneCodeEditor, MonacoStandaloneDiffEditor } from '@materia-ui/ngx-monaco-editor';
+import { FormsModule } from '@angular/forms';
+import { NgIf } from '@angular/common';
 
 const MIN_WORD_LENGTH = 2;
 const lineChangeToDecoration = ({ originalEndLineNumber, originalStartLineNumber }: ILineChange) =>
@@ -28,6 +31,8 @@ const notZero = (lineChange: ILineChange) => lineChange.originalEndLineNumber !=
     selector: 'redaction-editor',
     templateUrl: './editor.component.html',
     styleUrls: ['./editor.component.scss'],
+    standalone: true,
+    imports: [MonacoEditorModule, FormsModule, NgIf],
 })
 export class EditorComponent implements OnInit, OnChanges {
     #initialEntriesSet = new Set<string>();
@@ -107,7 +112,7 @@ export class EditorComponent implements OnInit, OnChanges {
         };
     }
 
-    onDiffEditorInit(editor: IDiffEditor): void {
+    onDiffEditorInit(editor: MonacoStandaloneDiffEditor): void {
         this._diffEditor = editor;
         this.codeEditor = editor.getModifiedEditor();
         this.#addMarginButtons();
@@ -120,7 +125,7 @@ export class EditorComponent implements OnInit, OnChanges {
         this.#setTheme();
     }
 
-    onCodeEditorInit(editor: ICodeEditor): void {
+    onCodeEditorInit(editor: MonacoStandaloneCodeEditor): void {
         this.codeEditor = editor;
         this.#setTheme();
     }
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 a1c4cc4dd..1cfd6c52e 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -17,10 +17,8 @@ import {
     StopPropagationDirective,
 } from '@iqser/common-ui';
 import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-dossiers-screen.directive';
-import { DictionaryManagerComponent } from './components/dictionary-manager/dictionary-manager.component';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { DatePipe } from './pipes/date.pipe';
-import { EditorComponent } from './components/editor/editor.component';
 import { DossierStateComponent } from './components/dossier-state/dossier-state.component';
 import { DossierNameColumnComponent } from './components/dossier-name-column/dossier-name-column.component';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
@@ -29,7 +27,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
 import { AddDossierDialogComponent } from './dialogs/add-dossier-dialog/add-dossier-dialog.component';
 import { SharedDialogService } from './services/dialog.service';
-import { AddEditEntityComponent } from './components/add-edit-entity/add-edit-entity.component';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { WatermarkSelectorComponent } from './components/dossier-watermark-selector/watermark-selector.component';
 import { CustomDateAdapter } from '@shared/CustomDateAdapter';
@@ -40,13 +37,11 @@ import { FileAttributeComponent } from '../dossier-overview/components/file-attr
 import { MatDividerModule } from '@angular/material/divider';
 
 const components = [
-    DictionaryManagerComponent,
     DossierStateComponent,
     DossierNameColumnComponent,
     DossiersTypeSwitchComponent,
     AddDossierDialogComponent,
     WatermarkSelectorComponent,
-    AddEditEntityComponent,
 ];
 
 const utils = [DatePipe, NavigateLastDossiersScreenDirective];
@@ -58,7 +53,7 @@ const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, Rea
 const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent, FileAttributeComponent];
 
 @NgModule({
-    declarations: [...components, ...utils, EditorComponent],
+    declarations: [...components, ...utils],
     imports: [
         CommonModule,
         ...modules,

From 1378543bf7261a12790fcd26f28231edb2ce1655 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Wed, 12 Jun 2024 14:53:49 +0300
Subject: [PATCH 04/17] RED-9321: get the latest changes and adapt to
 standalone.

---
 .../documine-export.component.ts              |  5 +++
 .../file-header/file-header.component.ts      | 43 ++++++++++++++++---
 .../file-workload/file-workload.component.ts  |  3 +-
 .../components/pages/pages.component.ts       |  1 -
 ...ructured-component-management.component.ts | 12 ++++--
 .../file-preview-screen.component.ts          |  8 ++--
 6 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts b/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts
index f4e5ad2cb..2a412ffb4 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts
@@ -2,10 +2,15 @@ import { Component, Input } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
 import { Dossier } from '@red/domain';
 import { ComponentLogService } from '@services/files/component-log.service';
+import { MatTooltip } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
     selector: 'redaction-documine-export',
     templateUrl: './documine-export.component.html',
+    standalone: true,
+    imports: [MatTooltip, TranslateModule, MatMenuTrigger, MatMenu, MatMenuItem],
 })
 export class DocumineExportComponent {
     @Input() dossier: Dossier;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
index a98a4b4e6..8f78ba06c 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
@@ -11,25 +11,41 @@ import {
     OnInit,
     ViewChild,
 } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { Router } from '@angular/router';
-import { CircleButtonTypes, getConfig, HelpModeService, IqserPermissionsService, isIqserDevMode, LoadingService } from '@iqser/common-ui';
+import { Roles } from '@users/roles';
+import {
+    CircleButtonComponent,
+    CircleButtonTypes,
+    DisableStopPropagationDirective,
+    getConfig,
+    HelpModeService,
+    IqserAllowDirective,
+    IqserDialog,
+    IqserPermissionsService,
+    isIqserDevMode,
+    LoadingService,
+} from '@iqser/common-ui';
 import { Bind, Debounce, OnDetach } from '@iqser/common-ui/lib/utils';
 import { File } from '@red/domain';
-import { FileManagementService } from '@services/files/file-management.service';
 import { PermissionsService } from '@services/permissions.service';
-import { Roles } from '@users/roles';
 import { download } from '@utils/file-download-utils';
 import { saveAs } from 'file-saver';
 import JSZip from 'jszip';
 import { firstValueFrom } from 'rxjs';
-import { AnnotationDrawService } from '../../../pdf-viewer/services/annotation-draw.service';
+import { Router, RouterLink } from '@angular/router';
 import { REDAnnotationManager } from '../../../pdf-viewer/services/annotation-manager.service';
 import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
 import { AnnotationActionsService } from '../../services/annotation-actions.service';
 import { FileDataService } from '../../services/file-data.service';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { MultiSelectService } from '../../services/multi-select.service';
+import { ViewSwitchComponent } from '../view-switch/view-switch.component';
+import { DocumineExportComponent } from '../documine-export/documine-export.component';
+import { NgIf } from '@angular/common';
+import { ProcessingIndicatorComponent } from '@shared/components/processing-indicator/processing-indicator.component';
+import { UserManagementComponent } from '../user-management/user-management.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { InitialsAvatarComponent } from '@common-ui/users';
+import { FileActionsComponent } from '../../../shared-dossiers/components/file-actions/file-actions.component';
 import { TablesService } from '../../services/tables.service';
 import { ALL_HOTKEYS } from '../../utils/constants';
 
@@ -37,6 +53,21 @@ import { ALL_HOTKEYS } from '../../utils/constants';
     selector: 'redaction-file-header',
     templateUrl: './file-header.component.html',
     styleUrls: ['./file-header.component.scss'],
+    standalone: true,
+    imports: [
+        ViewSwitchComponent,
+        DocumineExportComponent,
+        NgIf,
+        ProcessingIndicatorComponent,
+        UserManagementComponent,
+        TranslateModule,
+        InitialsAvatarComponent,
+        FileActionsComponent,
+        CircleButtonComponent,
+        IqserAllowDirective,
+        DisableStopPropagationDirective,
+        RouterLink,
+    ],
 })
 export class FileHeaderComponent implements OnInit, AfterViewInit, OnDetach, OnDestroy {
     @ViewChild('actionsWrapper', { static: false }) private readonly _actionsWrapper: ElementRef;
diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts
index 57cd77e13..3269aa672 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.ts
@@ -38,7 +38,7 @@ import { workloadTranslations } from '@translations/workload-translations';
 import { WorkflowFileStatuses } from '@red/domain';
 import { AnnotationsListComponent } from '../annotations-list/annotations-list.component';
 import { PageExclusionComponent } from '../page-exclusion/page-exclusion.component';
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe, NgIf, NgTemplateOutlet } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { ReadonlyBannerComponent } from '../readonly-banner/readonly-banner.component';
 import { AnnotationActionsComponent } from '../annotation-actions/annotation-actions.component';
@@ -72,6 +72,7 @@ const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
         PagesComponent,
         EmptyStateComponent,
         CapitalizePipe,
+        NgTemplateOutlet,
     ],
 })
 export class FileWorkloadComponent extends AutoUnsubscribe implements OnInit, OnDestroy {
diff --git a/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts b/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts
index 2bad1389a..bdc67d705 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/pages/pages.component.ts
@@ -3,7 +3,6 @@ import { List } from '@iqser/common-ui/lib/utils';
 import { PdfViewer } from '../../../pdf-viewer/services/pdf-viewer.service';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { AnnotationsListingService } from '../../services/annotations-listing.service';
-import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { ViewedPagesMapService } from '@services/files/viewed-pages-map.service';
 import { ViewedPage } from '@red/domain';
diff --git a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
index 5ca3f7b24..4cc3bb5bf 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts
@@ -1,20 +1,24 @@
 import { Component, Input, OnInit, signal, ViewChildren } from '@angular/core';
-import { toObservable } from '@angular/core/rxjs-interop';
-import { FilterService } from '@common-ui/filtering';
 import { List } from '@common-ui/utils';
 import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { ComponentLogEntry, Dictionary, File, IComponentLogEntry, WorkflowFileStatuses } from '@red/domain';
 import { ComponentLogService } from '@services/files/component-log.service';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { combineLatest, firstValueFrom, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { ComponentLogFilterService } from '../../services/component-log-filter.service';
 import { EditableStructuredComponentValueComponent } from '../editable-structured-component-value/editable-structured-component-value.component';
+import { FilterService, PopupFilterComponent } from '@common-ui/filtering';
+import { ComponentLogFilterService } from '../../services/component-log-filter.service';
+import { map } from 'rxjs/operators';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-structured-component-management',
     templateUrl: './structured-component-management.component.html',
     styleUrls: ['./structured-component-management.component.scss'],
+    standalone: true,
+    imports: [PopupFilterComponent, NgIf, AsyncPipe, TranslateModule, NgForOf, EditableStructuredComponentValueComponent],
 })
 export class StructuredComponentManagementComponent implements OnInit {
     protected readonly componentLogData = signal<ComponentLogEntry[] | undefined>(undefined);
diff --git a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
index 4e43efe6e..b80779f13 100644
--- a/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
@@ -25,7 +25,6 @@ import { Dictionary, File, ViewModes } from '@red/domain';
 import { ConfigService } from '@services/config.service';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { DossiersService } from '@services/dossiers/dossiers.service';
-import { FileManagementService } from '@services/files/file-management.service';
 import { FilesMapService } from '@services/files/files-map.service';
 import { FilesService } from '@services/files/files.service';
 import { PermissionsService } from '@services/permissions.service';
@@ -35,7 +34,7 @@ import { PreferencesKeys, UserPreferenceService } from '@users/user-preference.s
 import { NGXLogger } from 'ngx-logger';
 import { combineLatest, first, firstValueFrom, Observable, of, pairwise } from 'rxjs';
 import { catchError, filter, map, startWith, switchMap, tap } from 'rxjs/operators';
-import { byId, byPage, download, handleFilterDelta, hasChanges } from '../../utils';
+import { byId, byPage, handleFilterDelta, hasChanges } from '../../utils';
 import { AnnotationDrawService } from '../pdf-viewer/services/annotation-draw.service';
 import { REDAnnotationManager } from '../pdf-viewer/services/annotation-manager.service';
 import { REDDocumentViewer } from '../pdf-viewer/services/document-viewer.service';
@@ -69,6 +68,8 @@ import { InitialsAvatarComponent } from '@common-ui/users';
 import { FileActionsComponent } from '../shared-dossiers/components/file-actions/file-actions.component';
 import { FilePreviewRightContainerComponent } from './components/right-container/file-preview-right-container.component';
 import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component';
+import { FileHeaderComponent } from './components/file-header/file-header.component';
+import { StructuredComponentManagementComponent } from './components/structured-component-management/structured-component-management.component';
 
 @Component({
     templateUrl: './file-preview-screen.component.html',
@@ -89,6 +90,8 @@ import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.
         RouterLink,
         FilePreviewRightContainerComponent,
         TypeFilterComponent,
+        FileHeaderComponent,
+        StructuredComponentManagementComponent,
     ],
 })
 export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate {
@@ -137,7 +140,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
         private readonly _toaster: Toaster,
         private readonly _manualRedactionService: ManualRedactionService,
         private readonly _filesService: FilesService,
-        private readonly _fileManagementService: FileManagementService,
         private readonly _readableRedactionsService: ReadableRedactionsService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _multiSelectService: MultiSelectService,

From 6924cc17995f88096559cb350daa1b6400a69e02 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Wed, 12 Jun 2024 15:18:33 +0300
Subject: [PATCH 05/17] RED-9321: lazy load watermarks routes.

---
 .../app/modules/admin/admin-routing.module.ts |  2 +-
 .../paginator/paginator.component.ts          |  3 +
 .../watermark-screen.component.ts             | 36 ++++++++-
 .../screens/watermark/watermark.module.ts     | 78 -------------------
 .../screens/watermark/watermark.routes.ts     | 34 ++++++++
 .../watermarks-listing-screen.component.ts    | 23 +++++-
 6 files changed, 94 insertions(+), 82 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/watermark/watermark.routes.ts

diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
index 995d4a02e..5c0755728 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
@@ -104,7 +104,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [
             },
             {
                 path: 'watermarks',
-                loadChildren: () => import('./screens/watermark/watermark.module').then(m => m.WatermarkModule),
+                loadChildren: () => import('./screens/watermark/watermark.routes'),
             },
             {
                 path: 'reports',
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts
index 02ba06c3b..a215d04b7 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.ts
@@ -1,9 +1,12 @@
 import { Component, EventEmitter, Output } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'redaction-paginator',
     templateUrl: './paginator.component.html',
     styleUrls: ['./paginator.component.scss'],
+    standalone: true,
+    imports: [MatIcon],
 })
 export class PaginatorComponent {
     @Output() readonly changePage = new EventEmitter<number>();
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
index 5e8d8d0b7..e21ab0f17 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen/watermark-screen.component.ts
@@ -1,10 +1,18 @@
 import { HttpClient } from '@angular/common/http';
 import { ChangeDetectorRef, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { environment } from '@environments/environment';
-import { getConfig, IconButtonTypes, IqserPermissionsService, LoadingService, Toaster } from '@iqser/common-ui';
+import {
+    getConfig,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserPermissionsService,
+    LoadingService,
+    Toaster,
+} from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { AsControl, Debounce, getParam, trackByFactory, UI_ROOT_PATH_FN } from '@iqser/common-ui/lib/utils';
 import WebViewer, { WebViewerInstance } from '@pdftron/webviewer';
@@ -31,6 +39,13 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { stampPDFPage } from '@utils/page-stamper';
 import { BehaviorSubject, firstValueFrom, Observable, of } from 'rxjs';
 import { tap } from 'rxjs/operators';
+import { PaginatorComponent } from '../paginator/paginator.component';
+import { AsyncPipe, NgClass, NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatIcon } from '@angular/material/icon';
+import { MatSlider, MatSliderThumb } from '@angular/material/slider';
+import { ColorPickerModule } from 'ngx-color-picker';
 
 export const DEFAULT_WATERMARK: Partial<IWatermark> = {
     text: 'Watermark',
@@ -59,6 +74,23 @@ interface WatermarkForm {
 @Component({
     templateUrl: './watermark-screen.component.html',
     styleUrls: ['./watermark-screen.component.scss'],
+    standalone: true,
+    imports: [
+        PaginatorComponent,
+        NgIf,
+        IconButtonComponent,
+        TranslateModule,
+        AsyncPipe,
+        ReactiveFormsModule,
+        HasScrollbarDirective,
+        NgForOf,
+        NgClass,
+        MatTooltip,
+        MatIcon,
+        MatSlider,
+        ColorPickerModule,
+        MatSliderThumb,
+    ],
 })
 export class WatermarkScreenComponent implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
deleted file mode 100644
index 1e9b3370b..000000000
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { WatermarkScreenComponent } from './watermark-screen/watermark-screen.component';
-import { WatermarksListingScreenComponent } from './watermarks-listing/watermarks-listing-screen.component';
-import {
-    CircleButtonComponent,
-    CompositeRouteGuard,
-    HasScrollbarDirective,
-    IconButtonComponent,
-    IqserAllowDirective,
-    IqserHelpModeModule,
-    IqserListingModule,
-    IqserRoutes,
-} from '@iqser/common-ui';
-import { RedRoleGuard } from '@users/red-role.guard';
-import { WATERMARK_ID } from '@red/domain';
-import { watermarkExistsGuard } from '@guards/watermark-exists.guard';
-import { TranslateModule } from '@ngx-translate/core';
-import { PaginatorComponent } from './paginator/paginator.component';
-import { MatIconModule } from '@angular/material/icon';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatSliderModule } from '@angular/material/slider';
-import { ColorPickerModule } from 'ngx-color-picker';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { InitialsAvatarComponent, IqserAuthGuard, IqserUsersModule } from '@iqser/common-ui/lib/users';
-
-const routes: IqserRoutes = [
-    {
-        path: '',
-        component: WatermarksListingScreenComponent,
-        canActivate: [CompositeRouteGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-        },
-    },
-    {
-        path: 'create',
-        component: WatermarkScreenComponent,
-        canActivate: [CompositeRouteGuard],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-        },
-    },
-    {
-        path: `:${WATERMARK_ID}`,
-        component: WatermarkScreenComponent,
-        canActivate: [CompositeRouteGuard, watermarkExistsGuard()],
-        data: {
-            routeGuards: [IqserAuthGuard, RedRoleGuard],
-        },
-    },
-];
-
-@NgModule({
-    declarations: [WatermarkScreenComponent, WatermarksListingScreenComponent, PaginatorComponent],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        IqserUsersModule,
-        TranslateModule,
-        IqserListingModule,
-        IqserHelpModeModule,
-        MatIconModule,
-        IconButtonComponent,
-        ReactiveFormsModule,
-        MatSliderModule,
-        ColorPickerModule,
-        MatSlideToggleModule,
-        CircleButtonComponent,
-        HasScrollbarDirective,
-        IqserAllowDirective,
-        MatTooltipModule,
-        InitialsAvatarComponent,
-    ],
-})
-export class WatermarkModule {}
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.routes.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.routes.ts
new file mode 100644
index 000000000..2b6bdc34f
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.routes.ts
@@ -0,0 +1,34 @@
+import { WatermarksListingScreenComponent } from './watermarks-listing/watermarks-listing-screen.component';
+import { CompositeRouteGuard, IqserRoutes } from '@iqser/common-ui';
+import { IqserAuthGuard } from '@common-ui/users';
+import { RedRoleGuard } from '@users/red-role.guard';
+import { WatermarkScreenComponent } from './watermark-screen/watermark-screen.component';
+import { WATERMARK_ID } from '@red/domain';
+import { watermarkExistsGuard } from '@guards/watermark-exists.guard';
+
+export default [
+    {
+        path: '',
+        component: WatermarksListingScreenComponent,
+        canActivate: [CompositeRouteGuard],
+        data: {
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
+        },
+    },
+    {
+        path: 'create',
+        component: WatermarkScreenComponent,
+        canActivate: [CompositeRouteGuard],
+        data: {
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
+        },
+    },
+    {
+        path: `:${WATERMARK_ID}`,
+        component: WatermarkScreenComponent,
+        canActivate: [CompositeRouteGuard, watermarkExistsGuard()],
+        data: {
+            routeGuards: [IqserAuthGuard, RedRoleGuard],
+        },
+    },
+] satisfies IqserRoutes;
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts
index d04bd5eda..76ea73e72 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts
@@ -1,8 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
+    CircleButtonComponent,
+    IconButtonComponent,
     IconButtonTypes,
     IConfirmationDialogData,
+    IqserAllowDirective,
+    IqserListingModule,
     IqserPermissionsService,
     ListingComponent,
     listingProvidersFactory,
@@ -10,18 +14,35 @@ import {
     TableColumnConfig,
     Toaster,
 } from '@iqser/common-ui';
-import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { getCurrentUser, InitialsAvatarComponent } from '@iqser/common-ui/lib/users';
 import { getParam } from '@iqser/common-ui/lib/utils';
 import { DOSSIER_TEMPLATE_ID, User, Watermark } from '@red/domain';
 import { WatermarkService } from '@services/entity-services/watermark.service';
 import { WatermarksMapService } from '@services/entity-services/watermarks-map.service';
 import { Roles } from '@users/roles';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterLink } from '@angular/router';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { AsyncPipe, DatePipe } from '@angular/common';
 
 @Component({
     templateUrl: './watermarks-listing-screen.component.html',
     styleUrls: ['./watermarks-listing-screen.component.scss'],
     providers: listingProvidersFactory(WatermarksListingScreenComponent),
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        TranslateModule,
+        IconButtonComponent,
+        IqserAllowDirective,
+        RouterLink,
+        MatSlideToggle,
+        InitialsAvatarComponent,
+        DatePipe,
+        CircleButtonComponent,
+        AsyncPipe,
+    ],
 })
 export class WatermarksListingScreenComponent extends ListingComponent<Watermark> implements OnInit {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);

From 6469e3de36f2a4c3edf7476430067af093d46220 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Wed, 12 Jun 2024 15:25:58 +0300
Subject: [PATCH 06/17] RED-9321: move resolve inside license.routes.

---
 .../src/app/modules/admin/admin-routing.module.ts  |  8 ++------
 .../admin/screens/license/license.routes.ts        | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/admin/screens/license/license.routes.ts

diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
index 5c0755728..5f101b124 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
@@ -1,4 +1,4 @@
-import { inject, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { CompositeRouteGuard, IqserPermissionsGuard, IqserRoutes } from '@iqser/common-ui';
 import { RedRoleGuard } from '@users/red-role.guard';
 import { EntitiesListingScreenComponent } from './screens/entities-listing/entities-listing-screen.component';
@@ -20,7 +20,6 @@ import { PermissionsGuard } from '@guards/permissions-guard';
 import { Roles } from '@users/roles';
 import { IqserAuthGuard } from '@iqser/common-ui/lib/users';
 import { ComponentMappingsScreenComponent } from './screens/component-mappings/component-mappings-screen.component';
-import { LicenseService } from '@services/license.service';
 
 const entityRoutes: IqserRoutes = [
     {
@@ -225,7 +224,7 @@ const routes: IqserRoutes = [
             },
             {
                 path: 'license-info',
-                loadComponent: () => import('./screens/license/license-screen/license-screen.component'),
+                loadChildren: () => import('./screens/license/license.routes'),
                 canActivate: [IqserAuthGuard, IqserPermissionsGuard, RedRoleGuard],
                 data: {
                     permissions: {
@@ -233,9 +232,6 @@ const routes: IqserRoutes = [
                         redirectTo: '/',
                     },
                 },
-                resolve: {
-                    licenseData: () => inject(LicenseService).loadLicenseData(),
-                },
             },
             {
                 path: 'digital-signature',
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license.routes.ts b/apps/red-ui/src/app/modules/admin/screens/license/license.routes.ts
new file mode 100644
index 000000000..3f463c902
--- /dev/null
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license.routes.ts
@@ -0,0 +1,14 @@
+import { IqserRoutes } from '@iqser/common-ui';
+import LicenseScreenComponent from './license-screen/license-screen.component';
+import { inject } from '@angular/core';
+import { LicenseService } from '@services/license.service';
+
+export default [
+    {
+        path: '',
+        component: LicenseScreenComponent,
+        resolve: {
+            licenseData: () => inject(LicenseService).loadLicenseData(),
+        },
+    },
+] satisfies IqserRoutes;

From 0fe7584f4b351d6b8f22a100edc63cb3c08e1e62 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Wed, 12 Jun 2024 19:38:21 +0300
Subject: [PATCH 07/17] RED-9321: refactored account, dossier-listing and
 dashboard.

---
 apps/red-ui/src/app/app-routing.module.ts     |  4 +-
 .../modules/account/account-routing.module.ts |  6 +-
 .../notifications-screen.component.ts         | 10 +++-
 .../notifications/notifications.module.ts     | 16 -----
 .../notifications/notifications.routes.ts     | 11 ++++
 .../confirm-password-dialog.component.ts      |  7 ++-
 .../user-profile-screen.component.ts          | 19 +++++-
 .../user-profile/user-profile.module.ts       | 19 ------
 .../user-profile/user-profile.routes.ts       |  8 +++
 .../src/app/modules/archive/archive.module.ts |  8 +++
 .../template-stats.component.ts               | 10 +++-
 .../dashboard-screen.component.ts             |  6 ++
 .../app/modules/dashboard/dashboard.module.ts | 34 -----------
 .../app/modules/dashboard/dashboard.routes.ts | 13 +++++
 .../dossier-documents-status.component.ts     |  5 +-
 .../dossier-workload-column.component.ts      |  5 ++
 .../dossiers-listing-details.component.ts     |  6 ++
 .../table-item/table-item.component.ts        | 20 +++++++
 .../dossiers-listing.module.ts                | 58 -------------------
 .../dossiers-listing.routes.ts                | 16 +++++
 .../dossiers-listing-screen.component.ts      | 28 ++++++++-
 .../dossiers-listing-actions.component.ts     |  9 ++-
 .../shared-dossiers/shared-dossiers.module.ts |  2 -
 .../dictionary-manager.component.ts           |  1 -
 .../dossier-name-column.component.ts          |  5 ++
 .../dossier-state/dossier-state.component.ts  |  5 ++
 .../dossiers-type-switch.component.ts         |  5 ++
 .../src/app/modules/shared/shared.module.ts   | 11 +---
 .../src/app/modules/trash/trash.module.ts     |  2 +
 29 files changed, 193 insertions(+), 156 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/account/screens/notifications/notifications.module.ts
 create mode 100644 apps/red-ui/src/app/modules/account/screens/notifications/notifications.routes.ts
 delete mode 100644 apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.module.ts
 create mode 100644 apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.routes.ts
 delete mode 100644 apps/red-ui/src/app/modules/dashboard/dashboard.module.ts
 create mode 100644 apps/red-ui/src/app/modules/dashboard/dashboard.routes.ts
 delete mode 100644 apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts
 create mode 100644 apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.routes.ts

diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts
index 65a0f0614..7de4f8021 100644
--- a/apps/red-ui/src/app/app-routing.module.ts
+++ b/apps/red-ui/src/app/app-routing.module.ts
@@ -68,7 +68,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [
             {
                 path: '',
                 pathMatch: 'full',
-                loadChildren: () => import('./modules/dossiers-listing/dossiers-listing.module').then(m => m.DossiersListingModule),
+                loadChildren: () => import('./modules/dossiers-listing/dossiers-listing.routes'),
                 data: {
                     breadcrumbs: [BreadcrumbTypes.dossierTemplate],
                 },
@@ -108,7 +108,7 @@ const mainRoutes: IqserRoutes = [
     },
     {
         path: 'dashboard',
-        loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule),
+        loadChildren: () => import('./modules/dashboard/dashboard.routes'),
         canActivate: [CompositeRouteGuard],
         data: {
             routeGuards: [IqserAuthGuard, RedRoleGuard, IqserPermissionsGuard, DossierTemplatesGuard, DashboardGuard],
diff --git a/apps/red-ui/src/app/modules/account/account-routing.module.ts b/apps/red-ui/src/app/modules/account/account-routing.module.ts
index 086dd3c89..38e7f74f4 100644
--- a/apps/red-ui/src/app/modules/account/account-routing.module.ts
+++ b/apps/red-ui/src/app/modules/account/account-routing.module.ts
@@ -6,6 +6,7 @@ import { BaseAccountScreenComponent } from './base-account-screen/base-account-s
 import { PreferencesComponent } from './screens/preferences/preferences.component';
 import { Roles } from '@users/roles';
 import { IqserAuthGuard } from '@iqser/common-ui/lib/users';
+import { PendingChangesGuard } from '@guards/can-deactivate.guard';
 
 const routes: IqserRoutes = [
     { path: '', redirectTo: 'user-profile', pathMatch: 'full' },
@@ -16,12 +17,13 @@ const routes: IqserRoutes = [
         data: {
             routeGuards: [IqserAuthGuard, RedRoleGuard],
         },
-        loadChildren: () => import('./screens/user-profile/user-profile.module').then(m => m.UserProfileModule),
+        loadChildren: () => import('./screens/user-profile/user-profile.routes'),
     },
     {
         path: 'notifications',
         component: BaseAccountScreenComponent,
         canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
+        canDeactivate: [PendingChangesGuard],
         data: {
             routeGuards: [IqserAuthGuard, RedRoleGuard],
             permissions: {
@@ -29,7 +31,7 @@ const routes: IqserRoutes = [
                 redirectTo: '/',
             },
         },
-        loadChildren: () => import('./screens/notifications/notifications.module').then(m => m.NotificationsModule),
+        loadChildren: () => import('./screens/notifications/notifications.routes'),
     },
     {
         path: 'preferences',
diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts
index 1f80c321c..c9b92f288 100644
--- a/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts
+++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
-import { UntypedFormBuilder } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
 import { NotificationPreferencesService } from '../../../services/notification-preferences.service';
-import { BaseFormComponent, getConfig, LoadingService, Toaster } from '@iqser/common-ui';
+import { BaseFormComponent, getConfig, IconButtonComponent, LoadingService, Toaster } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     DocumentNotificationsTypes,
@@ -14,6 +14,10 @@ import {
 import { firstValueFrom } from 'rxjs';
 import { notificationsSettingsTranslations } from '@translations/notifications-settings-translations';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 const RSS_EXCLUDED_SETTINGS = ['USER_PROMOTED_TO_APPROVER', 'USER_DEGRADED_TO_REVIEWER', 'ASSIGN_REVIEWER'];
 
@@ -21,6 +25,8 @@ const RSS_EXCLUDED_SETTINGS = ['USER_PROMOTED_TO_APPROVER', 'USER_DEGRADED_TO_RE
     templateUrl: './notifications-screen.component.html',
     styleUrls: ['./notifications-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [ReactiveFormsModule, NgForOf, MatSlideToggle, TranslateModule, NgIf, MatCheckbox, IconButtonComponent],
 })
 export class NotificationsScreenComponent extends BaseFormComponent implements OnInit {
     readonly #toaster = inject(Toaster);
diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications.module.ts b/apps/red-ui/src/app/modules/account/screens/notifications/notifications.module.ts
deleted file mode 100644
index 5cdaf8a16..000000000
--- a/apps/red-ui/src/app/modules/account/screens/notifications/notifications.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import { NotificationsScreenComponent } from './notifications-screen/notifications-screen.component';
-import { PendingChangesGuard } from '@guards/can-deactivate.guard';
-import { TranslateModule } from '@ngx-translate/core';
-import { IconButtonComponent } from '@iqser/common-ui';
-
-const routes = [{ path: '', component: NotificationsScreenComponent, canDeactivate: [PendingChangesGuard] }];
-
-@NgModule({
-    declarations: [NotificationsScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule, IconButtonComponent],
-})
-export class NotificationsModule {}
diff --git a/apps/red-ui/src/app/modules/account/screens/notifications/notifications.routes.ts b/apps/red-ui/src/app/modules/account/screens/notifications/notifications.routes.ts
new file mode 100644
index 000000000..fc7f8195b
--- /dev/null
+++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications.routes.ts
@@ -0,0 +1,11 @@
+import { NotificationsScreenComponent } from './notifications-screen/notifications-screen.component';
+import { PendingChangesGuard } from '@guards/can-deactivate.guard';
+import { IqserRoutes } from '@iqser/common-ui';
+
+export default [
+    {
+        path: '',
+        component: NotificationsScreenComponent,
+        canDeactivate: [PendingChangesGuard],
+    },
+] satisfies IqserRoutes;
diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/confirm-password-dialog/confirm-password-dialog.component.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/confirm-password-dialog/confirm-password-dialog.component.ts
index 5eafcfc2e..bfe0ce506 100644
--- a/apps/red-ui/src/app/modules/account/screens/user-profile/confirm-password-dialog/confirm-password-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/account/screens/user-profile/confirm-password-dialog/confirm-password-dialog.component.ts
@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
-import { BaseDialogComponent } from '@iqser/common-ui';
+import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent } from '@iqser/common-ui';
 import { MatDialogRef } from '@angular/material/dialog';
-import { AbstractControl, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 
 interface FormType {
     password: AbstractControl<string>;
@@ -9,6 +10,8 @@ interface FormType {
 
 @Component({
     templateUrl: './confirm-password-dialog.component.html',
+    standalone: true,
+    imports: [ReactiveFormsModule, IconButtonComponent, TranslateModule, CircleButtonComponent],
 })
 export class ConfirmPasswordDialogComponent extends BaseDialogComponent {
     constructor(protected readonly _dialogRef: MatDialogRef<ConfirmPasswordDialogComponent>) {
diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts
index f1a736a95..c8f055e13 100644
--- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts
+++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.ts
@@ -1,8 +1,15 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { BaseFormComponent, IqserPermissionsService, LanguageService, LoadingService, Toaster } from '@iqser/common-ui';
-import { TranslateService } from '@ngx-translate/core';
+import {
+    BaseFormComponent,
+    IconButtonComponent,
+    IqserPermissionsService,
+    LanguageService,
+    LoadingService,
+    Toaster,
+} from '@iqser/common-ui';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { IProfile } from '@red/domain';
 import { languagesTranslations } from '@translations/languages-translations';
 import { Roles } from '@users/roles';
@@ -10,11 +17,17 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { UserService } from '@users/user.service';
 import { firstValueFrom } from 'rxjs';
 import { UserProfileDialogService } from '../services/user-profile-dialog.service';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
 
 @Component({
     templateUrl: './user-profile-screen.component.html',
     styleUrls: ['./user-profile-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [ReactiveFormsModule, NgIf, MatFormField, MatSelect, MatOption, NgForOf, TranslateModule, MatSlideToggle, IconButtonComponent],
 })
 export class UserProfileScreenComponent extends BaseFormComponent implements OnInit {
     #profileModel: IProfile;
diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.module.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.module.ts
deleted file mode 100644
index 72f352ea7..000000000
--- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import { UserProfileScreenComponent } from './user-profile-screen/user-profile-screen.component';
-import { PendingChangesGuard } from '@guards/can-deactivate.guard';
-import { TranslateModule } from '@ngx-translate/core';
-import { ConfirmPasswordDialogComponent } from './confirm-password-dialog/confirm-password-dialog.component';
-import { UserProfileDialogService } from './services/user-profile-dialog.service';
-import { CircleButtonComponent, IconButtonComponent } from '@iqser/common-ui';
-
-const routes = [{ path: '', component: UserProfileScreenComponent, canDeactivate: [PendingChangesGuard] }];
-
-@NgModule({
-    declarations: [UserProfileScreenComponent, ConfirmPasswordDialogComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule, IconButtonComponent, CircleButtonComponent],
-    providers: [UserProfileDialogService],
-})
-export class UserProfileModule {}
diff --git a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.routes.ts b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.routes.ts
new file mode 100644
index 000000000..c3711b2dd
--- /dev/null
+++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.routes.ts
@@ -0,0 +1,8 @@
+import { UserProfileScreenComponent } from './user-profile-screen/user-profile-screen.component';
+import { PendingChangesGuard } from '@guards/can-deactivate.guard';
+import { UserProfileDialogService } from './services/user-profile-dialog.service';
+import { IqserRoutes } from '@iqser/common-ui';
+
+export default [
+    { path: '', component: UserProfileScreenComponent, canDeactivate: [PendingChangesGuard], providers: [UserProfileDialogService] },
+] satisfies IqserRoutes;
diff --git a/apps/red-ui/src/app/modules/archive/archive.module.ts b/apps/red-ui/src/app/modules/archive/archive.module.ts
index 96bc7884e..5e530e39d 100644
--- a/apps/red-ui/src/app/modules/archive/archive.module.ts
+++ b/apps/red-ui/src/app/modules/archive/archive.module.ts
@@ -9,6 +9,10 @@ import { TranslateModule } from '@ngx-translate/core';
 import { SharedModule } from '@shared/shared.module';
 import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';
 import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
+import { DossiersTypeSwitchComponent } from '@shared/components/dossiers-type-switch/dossiers-type-switch.component';
+import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component';
+import { DossierStateComponent } from '@shared/components/dossier-state/dossier-state.component';
+import { DossiersListingActionsComponent } from '../shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component';
 
 @NgModule({
     declarations: [TableItemComponent, ArchivedDossiersScreenComponent],
@@ -22,6 +26,10 @@ import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/
         SharedModule,
         SharedDossiersModule,
         InitialsAvatarComponent,
+        DossiersTypeSwitchComponent,
+        DossierNameColumnComponent,
+        DossierStateComponent,
+        DossiersListingActionsComponent,
     ],
     providers: [ConfigService],
 })
diff --git a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.ts b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.ts
index ab68ec944..d555b664f 100644
--- a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.ts
+++ b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.ts
@@ -1,15 +1,23 @@
 import { Component, Input } from '@angular/core';
 import { DashboardStats } from '@red/domain';
-import { IconButtonTypes } from '@iqser/common-ui';
+import { IconButtonComponent, IconButtonTypes } from '@iqser/common-ui';
 import { TranslateChartService } from '@services/translate-chart.service';
 import { SharedDialogService } from '@shared/services/dialog.service';
 import { Roles } from '@users/roles';
 import { PermissionsService } from '@services/permissions.service';
+import { NgIf } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.component';
+import { SnakeCasePipe } from '@common-ui/pipes/snake-case.pipe';
 
 @Component({
     selector: 'redaction-template-stats [stats]',
     templateUrl: './template-stats.component.html',
     styleUrls: ['./template-stats.component.scss'],
+    standalone: true,
+    imports: [NgIf, RouterLink, MatIcon, TranslateModule, DonutChartComponent, IconButtonComponent, SnakeCasePipe],
 })
 export class TemplateStatsComponent {
     readonly iconButtonTypes = IconButtonTypes;
diff --git a/apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.ts b/apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.ts
index 69a16dcee..ba37625c8 100644
--- a/apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dashboard/dashboard-screen/dashboard-screen.component.ts
@@ -4,10 +4,16 @@ import { UserPreferenceService } from '@users/user-preference.service';
 import { trackByFactory } from '@iqser/common-ui/lib/utils';
 import { User } from '@red/domain';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { TranslateModule } from '@ngx-translate/core';
+import { TemplateStatsComponent } from '../components/template-stats/template-stats.component';
+import { AsyncPipe, NgForOf } from '@angular/common';
+import { SnakeCasePipe } from '@common-ui/pipes/snake-case.pipe';
 
 @Component({
     templateUrl: './dashboard-screen.component.html',
     styleUrls: ['./dashboard-screen.component.scss'],
+    standalone: true,
+    imports: [TranslateModule, TemplateStatsComponent, NgForOf, AsyncPipe, SnakeCasePipe],
 })
 export class DashboardScreenComponent implements OnInit {
     readonly currentUser = getCurrentUser<User>();
diff --git a/apps/red-ui/src/app/modules/dashboard/dashboard.module.ts b/apps/red-ui/src/app/modules/dashboard/dashboard.module.ts
deleted file mode 100644
index 76a5d8121..000000000
--- a/apps/red-ui/src/app/modules/dashboard/dashboard.module.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DashboardScreenComponent } from './dashboard-screen/dashboard-screen.component';
-import { RouterModule } from '@angular/router';
-import { SharedModule } from '@shared/shared.module';
-import { TemplateStatsComponent } from './components/template-stats/template-stats.component';
-import { BreadcrumbTypes } from '@red/domain';
-import { TranslateModule } from '@ngx-translate/core';
-import { IconButtonComponent, IqserHelpModeModule, IqserRoutes } from '@iqser/common-ui';
-import { SnakeCasePipe } from '@common-ui/pipes/snake-case.pipe';
-
-const routes: IqserRoutes = [
-    {
-        path: '',
-        component: DashboardScreenComponent,
-        data: {
-            breadcrumbs: [BreadcrumbTypes.dashboard],
-        },
-    },
-];
-
-@NgModule({
-    declarations: [DashboardScreenComponent, TemplateStatsComponent],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        SharedModule,
-        TranslateModule,
-        IqserHelpModeModule,
-        IconButtonComponent,
-        SnakeCasePipe,
-    ],
-})
-export class DashboardModule {}
diff --git a/apps/red-ui/src/app/modules/dashboard/dashboard.routes.ts b/apps/red-ui/src/app/modules/dashboard/dashboard.routes.ts
new file mode 100644
index 000000000..0172b9b54
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dashboard/dashboard.routes.ts
@@ -0,0 +1,13 @@
+import { IqserRoutes } from '@iqser/common-ui';
+import { DashboardScreenComponent } from './dashboard-screen/dashboard-screen.component';
+import { BreadcrumbTypes } from '@red/domain';
+
+export default [
+    {
+        path: '',
+        component: DashboardScreenComponent,
+        data: {
+            breadcrumbs: [BreadcrumbTypes.dashboard],
+        },
+    },
+] satisfies IqserRoutes;
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts b/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts
index 37850cb8a..c7693d179 100644
--- a/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts
+++ b/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts
@@ -1,12 +1,15 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { DossierStats, StatusSorter } from '@red/domain';
 import { List } from '@iqser/common-ui/lib/utils';
-import { StatusBarConfig } from '@iqser/common-ui/lib/shared';
+import { StatusBarComponent, StatusBarConfig } from '@iqser/common-ui/lib/shared';
+import { NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-dossier-documents-status',
     templateUrl: './dossier-documents-status.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [StatusBarComponent, NgIf],
 })
 export class DossierDocumentsStatusComponent implements OnChanges {
     @Input() stats: DossierStats;
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts b/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts
index a3c9eca39..77d83c4b1 100644
--- a/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts
+++ b/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts
@@ -2,12 +2,17 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } f
 import { DefaultColorType, Dossier, DossierStats } from '@red/domain';
 import { DefaultColorsService } from '@services/entity-services/default-colors.service';
 import { BehaviorSubject, Observable, switchMap } from 'rxjs';
+import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
+import { AsyncPipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-dossier-workload-column',
     templateUrl: './dossier-workload-column.component.html',
     styleUrls: ['./dossier-workload-column.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [AnnotationIconComponent, AsyncPipe, TranslateModule],
 })
 export class DossierWorkloadColumnComponent implements OnChanges {
     readonly #dossierTemplateId$ = new BehaviorSubject<string>(null);
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts b/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
index 0fe4c0015..cba58f1ac 100644
--- a/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
+++ b/apps/red-ui/src/app/modules/dossiers-listing/components/dossiers-listing-details/dossiers-listing-details.component.ts
@@ -5,12 +5,18 @@ import { TranslateChartService } from '@services/translate-chart.service';
 import { map } from 'rxjs/operators';
 import { DashboardStatsService } from '@services/dossier-templates/dashboard-stats.service';
 import { getParam } from '@iqser/common-ui/lib/utils';
+import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.component';
+import { AsyncPipe, DecimalPipe, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'redaction-dossiers-listing-details',
     templateUrl: './dossiers-listing-details.component.html',
     styleUrls: ['./dossiers-listing-details.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [DonutChartComponent, AsyncPipe, NgIf, TranslateModule, MatIcon, DecimalPipe],
 })
 export class DossiersListingDetailsComponent {
     readonly stats$: Observable<DashboardStats>;
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossiers-listing/components/table-item/table-item.component.ts
index f47906c13..f85e3f995 100644
--- a/apps/red-ui/src/app/modules/dossiers-listing/components/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/dossiers-listing/components/table-item/table-item.component.ts
@@ -4,12 +4,32 @@ import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
 import { getConfig } from '@iqser/common-ui';
+import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component';
+import { DateColumnComponent } from '../../../shared-dossiers/components/date-column/date-column.component';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { DossierWorkloadColumnComponent } from '../dossier-workload-column/dossier-workload-column.component';
+import { InitialsAvatarComponent } from '@common-ui/users';
+import { DossierDocumentsStatusComponent } from '../dossier-documents-status/dossier-documents-status.component';
+import { DossierStateComponent } from '@shared/components/dossier-state/dossier-state.component';
+import { DossiersListingActionsComponent } from '../../../shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component';
 
 @Component({
     selector: 'redaction-table-item [dossier]',
     templateUrl: './table-item.component.html',
     styleUrls: ['./table-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        DossierNameColumnComponent,
+        DateColumnComponent,
+        AsyncPipe,
+        NgIf,
+        DossierWorkloadColumnComponent,
+        InitialsAvatarComponent,
+        DossierDocumentsStatusComponent,
+        DossierStateComponent,
+        DossiersListingActionsComponent,
+    ],
 })
 export class TableItemComponent implements OnChanges {
     @Input() dossier!: Dossier;
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts b/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts
deleted file mode 100644
index f6377c851..000000000
--- a/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CompositeRouteGuard, HasScrollbarDirective, IqserHelpModeModule, IqserListingModule, IqserRoutes } from '@iqser/common-ui';
-import { TranslateModule } from '@ngx-translate/core';
-import { DossiersListingScreenComponent } from './screen/dossiers-listing-screen.component';
-import { RouterModule } from '@angular/router';
-import { SharedModule } from '@shared/shared.module';
-import { DossiersListingDetailsComponent } from './components/dossiers-listing-details/dossiers-listing-details.component';
-import { ConfigService } from './config.service';
-import { TableItemComponent } from './components/table-item/table-item.component';
-import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';
-import { DossierWorkloadColumnComponent } from './components/dossier-workload-column/dossier-workload-column.component';
-import { DossierDocumentsStatusComponent } from './components/dossier-documents-status/dossier-documents-status.component';
-import { DossierFilesGuard } from '@guards/dossier-files-guard';
-import { ACTIVE_DOSSIERS_SERVICE } from '../../tokens';
-import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
-import { StatusBarComponent } from '@iqser/common-ui/lib/shared';
-import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component';
-import { DateColumnComponent } from '../shared-dossiers/components/date-column/date-column.component';
-import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
-
-const routes: IqserRoutes = [
-    {
-        path: '',
-        component: DossiersListingScreenComponent,
-        pathMatch: 'full',
-        canActivate: [CompositeRouteGuard],
-        data: { routeGuards: [DossierFilesGuard], reuse: true, dossiersService: ACTIVE_DOSSIERS_SERVICE },
-    },
-];
-
-@NgModule({
-    declarations: [
-        DossiersListingScreenComponent,
-        DossiersListingDetailsComponent,
-        DossierWorkloadColumnComponent,
-        TableItemComponent,
-        DossierDocumentsStatusComponent,
-    ],
-    providers: [ConfigService],
-    imports: [
-        RouterModule.forChild(routes),
-        CommonModule,
-        SharedModule,
-        SharedDossiersModule,
-        TranslateModule,
-        IqserHelpModeModule,
-        IqserUsersModule,
-        IqserListingModule,
-        StatusBarComponent,
-        HasScrollbarDirective,
-        TypeFilterComponent,
-        DateColumnComponent,
-        AnnotationIconComponent,
-        InitialsAvatarComponent,
-    ],
-})
-export class DossiersListingModule {}
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.routes.ts b/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.routes.ts
new file mode 100644
index 000000000..7bc4b158a
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.routes.ts
@@ -0,0 +1,16 @@
+import { DossiersListingScreenComponent } from './screen/dossiers-listing-screen.component';
+import { CompositeRouteGuard, IqserRoutes } from '@iqser/common-ui';
+import { DossierFilesGuard } from '@guards/dossier-files-guard';
+import { ConfigService } from './config.service';
+import { ACTIVE_DOSSIERS_SERVICE } from '../../tokens';
+
+export default [
+    {
+        path: '',
+        component: DossiersListingScreenComponent,
+        pathMatch: 'full',
+        canActivate: [CompositeRouteGuard],
+        data: { routeGuards: [DossierFilesGuard], reuse: true, dossiersService: ACTIVE_DOSSIERS_SERVICE },
+        providers: [ConfigService],
+    },
+] satisfies IqserRoutes;
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/screen/dossiers-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossiers-listing/screen/dossiers-listing-screen.component.ts
index 12c19a2eb..9e811cb1c 100644
--- a/apps/red-ui/src/app/modules/dossiers-listing/screen/dossiers-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossiers-listing/screen/dossiers-listing-screen.component.ts
@@ -1,7 +1,15 @@
 import { ChangeDetectionStrategy, Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { Dossier, DOSSIER_TEMPLATE_ID, DOSSIERS_ARCHIVE, DossierTemplate } from '@red/domain';
 import { PermissionsService } from '@services/permissions.service';
-import { ButtonConfig, ListingComponent, listingProvidersFactory, LoadingService, TableComponent } from '@iqser/common-ui';
+import {
+    ButtonConfig,
+    HasScrollbarDirective,
+    IqserListingModule,
+    ListingComponent,
+    listingProvidersFactory,
+    LoadingService,
+    TableComponent,
+} from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ConfigService } from '../config.service';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@@ -12,12 +20,30 @@ import { SharedDialogService } from '@shared/services/dialog.service';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { OnAttach } from '@iqser/common-ui/lib/utils';
 import { FeaturesService } from '@services/features.service';
+import { DossiersTypeSwitchComponent } from '@shared/components/dossiers-type-switch/dossiers-type-switch.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { DossiersListingDetailsComponent } from '../components/dossiers-listing-details/dossiers-listing-details.component';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component';
+import { TableItemComponent } from '../components/table-item/table-item.component';
 
 @Component({
     templateUrl: './dossiers-listing-screen.component.html',
     styleUrls: ['./dossiers-listing-screen.component.scss'],
     providers: listingProvidersFactory(DossiersListingScreenComponent),
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        DossiersTypeSwitchComponent,
+        TranslateModule,
+        HasScrollbarDirective,
+        DossiersListingDetailsComponent,
+        NgIf,
+        TypeFilterComponent,
+        TableItemComponent,
+        AsyncPipe,
+    ],
 })
 export class DossiersListingScreenComponent extends ListingComponent<Dossier> implements OnInit, OnAttach {
     readonly tableColumnConfigs = this._configService.tableConfig;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
index 6a48cf304..0d2aea09d 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
@@ -1,18 +1,23 @@
 import { Component, Input, OnChanges } from '@angular/core';
-import { IqserPermissionsService } from '@iqser/common-ui';
+import { CircleButtonComponent, IqserAllowDirective, IqserPermissionsService } from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import type { Dossier, File, User } from '@red/domain';
 import { FilesMapService } from '@services/files/files-map.service';
 import { PermissionsService } from '@services/permissions.service';
 import { ReanalysisService } from '@services/reanalysis.service';
-import { LongPressEvent } from '@shared/directives/long-press.directive';
+import { LongPressDirective, LongPressEvent } from '@shared/directives/long-press.directive';
 import { Roles } from '@users/roles';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { FileDownloadBtnComponent } from '@shared/components/buttons/file-download-btn/file-download-btn.component';
 
 @Component({
     selector: 'redaction-dossiers-listing-actions [dossier]',
     templateUrl: './dossiers-listing-actions.component.html',
+    standalone: true,
+    imports: [LongPressDirective, CircleButtonComponent, IqserAllowDirective, TranslateModule, NgIf, FileDownloadBtnComponent, AsyncPipe],
 })
 export class DossiersListingActionsComponent implements OnChanges {
     readonly roles = Roles;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts b/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
index 008069e90..a3ba94d00 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
@@ -23,7 +23,6 @@ import {
     StopPropagationDirective,
 } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
-import { DossiersListingActionsComponent } from './components/dossiers-listing-actions/dossiers-listing-actions.component';
 import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
 import { SideNavComponent, SmallChipComponent, StatusBarComponent } from '@iqser/common-ui/lib/shared';
 import { SelectComponent } from '@shared/components/select/select.component';
@@ -42,7 +41,6 @@ const components = [
     EditDossierDictionaryComponent,
     EditDossierAttributesComponent,
     EditDossierTeamComponent,
-    DossiersListingActionsComponent,
 ];
 const dialogs = [EditDossierDialogComponent, AssignReviewerApproverDialogComponent];
 
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
index 04a995521..a842204f7 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
@@ -21,7 +21,6 @@ import { MatCheckbox } from '@angular/material/checkbox';
 import { MatFormField } from '@angular/material/form-field';
 import { MatOption, MatSelect } from '@angular/material/select';
 import { MatDivider } from '@angular/material/divider';
-import { SharedModule } from '@shared/shared.module';
 
 const COMPARE_ENTRIES_ERROR = 'compare-entries-error';
 const SMOOTH_SCROLL = 0;
diff --git a/apps/red-ui/src/app/modules/shared/components/dossier-name-column/dossier-name-column.component.ts b/apps/red-ui/src/app/modules/shared/components/dossier-name-column/dossier-name-column.component.ts
index 142dbdef6..b2178e0c7 100644
--- a/apps/red-ui/src/app/modules/shared/components/dossier-name-column/dossier-name-column.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dossier-name-column/dossier-name-column.component.ts
@@ -4,6 +4,9 @@ import { DossierStats, IDossier } from '@red/domain';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { dateWithoutTime } from '@utils/functions';
 import dayjs from 'dayjs';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatIcon } from '@angular/material/icon';
+import { DatePipe, NgIf } from '@angular/common';
 
 const DUE_DATE_WARN_DAYS = 14;
 
@@ -20,6 +23,8 @@ export interface PartialDossier extends Partial<IDossier> {
     selector: 'redaction-dossier-name-column',
     templateUrl: './dossier-name-column.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [MatTooltip, MatIcon, NgIf, DatePipe],
 })
 export class DossierNameColumnComponent {
     @Input() dossier: PartialDossier;
diff --git a/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.ts b/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.ts
index f22a673b6..f29a69db1 100644
--- a/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dossier-state/dossier-state.component.ts
@@ -2,12 +2,17 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
 import { Dossier, DossierState } from '@red/domain';
 import { DossierStatesMapService } from '@services/entity-services/dossier-states-map.service';
 import { Observable } from 'rxjs';
+import { SmallChipComponent } from '@common-ui/shared';
+import { AsyncPipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-dossier-state [dossier]',
     templateUrl: './dossier-state.component.html',
     styleUrls: ['./dossier-state.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [SmallChipComponent, AsyncPipe, TranslateModule],
 })
 export class DossierStateComponent implements OnChanges {
     @Input() dossier: Dossier;
diff --git a/apps/red-ui/src/app/modules/shared/components/dossiers-type-switch/dossiers-type-switch.component.ts b/apps/red-ui/src/app/modules/shared/components/dossiers-type-switch/dossiers-type-switch.component.ts
index 3febb956a..d5e520b58 100644
--- a/apps/red-ui/src/app/modules/shared/components/dossiers-type-switch/dossiers-type-switch.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dossiers-type-switch/dossiers-type-switch.component.ts
@@ -2,12 +2,17 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ARCHIVE_ROUTE, DOSSIER_TEMPLATE_ID, DOSSIERS_ROUTE } from '@red/domain';
 import { DashboardStatsService } from '@services/dossier-templates/dashboard-stats.service';
 import { getParam } from '@iqser/common-ui/lib/utils';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-dossiers-type-switch',
     templateUrl: './dossiers-type-switch.component.html',
     styleUrls: ['./dossiers-type-switch.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [NgIf, AsyncPipe, RouterLink, RouterLinkActive, TranslateModule],
 })
 export class DossiersTypeSwitchComponent {
     readonly DOSSIERS_ROUTE = DOSSIERS_ROUTE;
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 1cfd6c52e..d0fd8c541 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -19,10 +19,7 @@ import {
 import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-dossiers-screen.directive';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { DatePipe } from './pipes/date.pipe';
-import { DossierStateComponent } from './components/dossier-state/dossier-state.component';
-import { DossierNameColumnComponent } from './components/dossier-name-column/dossier-name-column.component';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
-import { DossiersTypeSwitchComponent } from './components/dossiers-type-switch/dossiers-type-switch.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
 import { AddDossierDialogComponent } from './dialogs/add-dossier-dialog/add-dossier-dialog.component';
@@ -36,13 +33,7 @@ import { SelectComponent } from '@shared/components/select/select.component';
 import { FileAttributeComponent } from '../dossier-overview/components/file-attribute/file-attribute.component';
 import { MatDividerModule } from '@angular/material/divider';
 
-const components = [
-    DossierStateComponent,
-    DossierNameColumnComponent,
-    DossiersTypeSwitchComponent,
-    AddDossierDialogComponent,
-    WatermarkSelectorComponent,
-];
+const components = [AddDossierDialogComponent, WatermarkSelectorComponent];
 
 const utils = [DatePipe, NavigateLastDossiersScreenDirective];
 
diff --git a/apps/red-ui/src/app/modules/trash/trash.module.ts b/apps/red-ui/src/app/modules/trash/trash.module.ts
index 6ea3c27ce..fb8596de3 100644
--- a/apps/red-ui/src/app/modules/trash/trash.module.ts
+++ b/apps/red-ui/src/app/modules/trash/trash.module.ts
@@ -9,6 +9,7 @@ import { TrashDialogService } from './services/trash-dialog.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
 import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
+import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component';
 
 const routes = [{ path: '', component: TrashScreenComponent }];
 
@@ -24,6 +25,7 @@ const routes = [{ path: '', component: TrashScreenComponent }];
         CircleButtonComponent,
         FileNameColumnComponent,
         InitialsAvatarComponent,
+        DossierNameColumnComponent,
     ],
     providers: [TrashDialogService],
 })

From c4912ffd8ff7fd80e3c2b4a2c077a3860f224b2d Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Thu, 13 Jun 2024 13:29:53 +0300
Subject: [PATCH 08/17] RED-9321: refactored trash and search modules.

---
 apps/red-ui/src/app/app-routing.module.ts     |  4 +-
 .../search-item-template.component.ts         | 20 +++++
 .../search-screen/search-screen.component.ts  | 81 +++++++++++--------
 .../src/app/modules/search/search.module.ts   | 28 -------
 .../trash-screen/trash-screen.component.ts    | 22 +++--
 .../trash-table-item.component.ts             | 23 +++++-
 .../src/app/modules/trash/trash.module.ts     | 32 --------
 .../src/app/modules/trash/trash.routes.ts     |  5 ++
 8 files changed, 111 insertions(+), 104 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/search/search.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/trash/trash.module.ts
 create mode 100644 apps/red-ui/src/app/modules/trash/trash.routes.ts

diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts
index 7de4f8021..2ca32ea3e 100644
--- a/apps/red-ui/src/app/app-routing.module.ts
+++ b/apps/red-ui/src/app/app-routing.module.ts
@@ -147,7 +147,7 @@ const mainRoutes: IqserRoutes = [
     },
     {
         path: 'search',
-        loadChildren: () => import('./modules/search/search.module').then(m => m.SearchModule),
+        loadComponent: () => import('./modules/search/search-screen/search-screen.component'),
         canActivate: [CompositeRouteGuard, IqserPermissionsGuard, loadAllDossiersGuard()],
         data: {
             routeGuards: [IqserAuthGuard, RedRoleGuard],
@@ -159,7 +159,7 @@ const mainRoutes: IqserRoutes = [
     },
     {
         path: 'trash',
-        loadChildren: () => import('./modules/trash/trash.module').then(m => m.TrashModule),
+        loadChildren: () => import('./modules/trash/trash.routes'),
         canActivate: [CompositeRouteGuard, IqserPermissionsGuard],
         data: {
             routeGuards: [IqserAuthGuard, RedRoleGuard, TrashGuard],
diff --git a/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.ts b/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.ts
index fff7c1e2f..a586590e2 100644
--- a/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.ts
+++ b/apps/red-ui/src/app/modules/search/search-item-template/search-item-template.component.ts
@@ -3,11 +3,31 @@ import { workflowFileStatusTranslations } from '@translations/file-status-transl
 import { ISearchListItem } from '@red/domain';
 import { escapeHtml } from '@iqser/common-ui/lib/utils';
 import { getDossierRouterLink } from '@utils/router-links';
+import { MatTooltip } from '@angular/material/tooltip';
+import { NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { StopPropagationDirective } from '@iqser/common-ui';
+import { InitialsAvatarComponent } from '@common-ui/users';
+import { StatusBarComponent } from '@common-ui/shared';
+import { MatIcon } from '@angular/material/icon';
+import { RouterLink } from '@angular/router';
 
 @Component({
     selector: 'redaction-search-item-template',
     templateUrl: './search-item-template.component.html',
     styleUrls: ['./search-item-template.component.scss'],
+    standalone: true,
+    imports: [
+        MatTooltip,
+        NgIf,
+        TranslateModule,
+        NgForOf,
+        StopPropagationDirective,
+        InitialsAvatarComponent,
+        StatusBarComponent,
+        MatIcon,
+        RouterLink,
+    ],
 })
 export class SearchItemTemplateComponent implements OnChanges {
     @Input() item: ISearchListItem;
diff --git a/apps/red-ui/src/app/modules/search/search-screen/search-screen.component.ts b/apps/red-ui/src/app/modules/search/search-screen/search-screen.component.ts
index 017076a13..75cb6d922 100644
--- a/apps/red-ui/src/app/modules/search/search-screen/search-screen.component.ts
+++ b/apps/red-ui/src/app/modules/search/search-screen/search-screen.component.ts
@@ -1,11 +1,18 @@
 import { ChangeDetectionStrategy, Component, OnDestroy } from '@angular/core';
-import { ListingComponent, listingProvidersFactory, LoadingService, SearchPositions, TableColumnConfig } from '@iqser/common-ui';
+import {
+    IqserListingModule,
+    ListingComponent,
+    listingProvidersFactory,
+    LoadingService,
+    SearchPositions,
+    TableColumnConfig,
+} from '@iqser/common-ui';
 import { combineLatest, Observable, of } from 'rxjs';
 import { debounceTime, map, startWith, switchMap, tap } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { workflowFileStatusTranslations } from '@translations/file-status-translations';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { RouterHistoryService } from '@services/router-history.service';
 import {
     Dossier,
@@ -25,14 +32,18 @@ import { DossierTemplatesService } from '@services/dossier-templates/dossier-tem
 import { UserService } from '@users/user.service';
 import { IFilterGroup, keyChecker, NestedFilter } from '@iqser/common-ui/lib/filtering';
 import { SortingOrders } from '@iqser/common-ui/lib/sorting';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { SearchItemTemplateComponent } from '../search-item-template/search-item-template.component';
 
 @Component({
     templateUrl: './search-screen.component.html',
     styleUrls: ['./search-screen.component.scss'],
     providers: listingProvidersFactory(SearchScreenComponent),
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [IqserListingModule, TranslateModule, AsyncPipe, NgIf, SearchItemTemplateComponent],
 })
-export class SearchScreenComponent extends ListingComponent<ISearchListItem> implements OnDestroy {
+export default class SearchScreenComponent extends ListingComponent<ISearchListItem> implements OnDestroy {
     readonly searchPositions = SearchPositions;
 
     readonly tableHeaderLabel = _('search-screen.table-header');
@@ -46,7 +57,7 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
 
     readonly searchResults$ = new Observable<ISearchListItem[]>();
 
-    readonly dossierTemplates$ = this._dossierTemplateService.loadAll().pipe(tap(templates => this._addTemplateFilter(templates)));
+    readonly dossierTemplates$ = this._dossierTemplateService.loadAll().pipe(tap(templates => this.#addTemplateFilter(templates)));
 
     constructor(
         private readonly _router: Router,
@@ -65,10 +76,10 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
         if (!Object.keys(this._activatedRoute.snapshot.queryParams).length) {
             this._router.navigate(['main']).then();
         }
-        this.searchResults$ = combineLatest([this._queryChanged$, this._filtersChanged$]).pipe(
+        this.searchResults$ = combineLatest([this.#queryChanged$, this.#filtersChanged$]).pipe(
             tap(() => this._loadingService.start()),
             tap(([query, [dossierIds, workflowStatus, assignee, dossierTemplateIds, onlyActive]]) =>
-                this._updateNavigation(query, dossierIds, workflowStatus, assignee, dossierTemplateIds, onlyActive),
+                this.#updateNavigation(query, dossierIds, workflowStatus, assignee, dossierTemplateIds, onlyActive),
             ),
             switchMap(([query, [dossierIds, workflowStatus, assignee, dossierTemplateIds, onlyActive]]) =>
                 this._platformSearchService.search({
@@ -81,43 +92,43 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
                     includeArchivedDossiers: !onlyActive,
                 }),
             ),
-            map(searchResult => this._toMatchedDocuments(searchResult)),
-            map(docs => this._toListItems(docs)),
+            map(searchResult => this.#toMatchedDocuments(searchResult)),
+            map(docs => this.#toListItems(docs)),
             tap(result => this.entitiesService.setEntities(result)),
             tap(() => this._loadingService.stop()),
         );
         this.searchService.skip = true;
         this.sortingService.setSortingOption({ column: 'searchKey', order: SortingOrders.desc });
-        this._initFilters();
+        this.#initFilters();
     }
 
-    private get _routeDossierIds(): string[] {
+    get #routeDossierIds(): string[] {
         return this._activatedRoute.snapshot.queryParamMap.get('dossierIds').split(',');
     }
 
-    private get _routeDossierTemplateIds(): string[] {
+    get #routeDossierTemplateIds(): string[] {
         return this._activatedRoute.snapshot.queryParamMap.get('dossierTemplateIds')?.split(',');
     }
 
-    private get _routeStatus(): WorkflowFileStatus {
+    get #routeStatus(): WorkflowFileStatus {
         return this._activatedRoute.snapshot.queryParamMap.get('status') as WorkflowFileStatus;
     }
 
-    private get _routeAssignee(): string {
+    get #routeAssignee(): string {
         return this._activatedRoute.snapshot.queryParamMap.get('assignee');
     }
 
-    private get _routeOnlyActive(): boolean {
+    get #routeOnlyActive(): boolean {
         return this._activatedRoute.snapshot.queryParamMap.get('onlyActive') === 'true';
     }
 
-    private get _routeQuery(): string {
+    get #routeQuery(): string {
         return this._activatedRoute.snapshot.queryParamMap.get('query');
     }
 
-    private get _queryChanged$(): Observable<string> {
+    get #queryChanged$(): Observable<string> {
         return this.searchService.valueChanges$.pipe(
-            startWith(this._routeQuery),
+            startWith(this.#routeQuery),
             tap(query => (this.searchService.searchValue = query)),
             debounceTime(300),
         );
@@ -127,7 +138,7 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
         return this._featuresService.isEnabled(DOSSIERS_ARCHIVE);
     }
 
-    private get _filtersChanged$(): Observable<[string[], WorkflowFileStatus, string, string[], boolean]> {
+    get #filtersChanged$(): Observable<[string[], WorkflowFileStatus, string, string[], boolean]> {
         const onlyActiveDossiers$ = this.#enabledArchive
             ? this.filterService.getSingleFilter('onlyActiveDossiers').pipe(map(f => !!f.checked))
             : of(true);
@@ -141,11 +152,11 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
                 return [dossierIds, workflowStatus, assignee, dossierTemplateIds, onlyActive];
             }),
             startWith<[string[], WorkflowFileStatus, string, string[], boolean]>([
-                this._routeDossierIds,
-                this._routeStatus,
-                this._routeAssignee,
-                this._routeDossierTemplateIds,
-                this._routeOnlyActive,
+                this.#routeDossierIds,
+                this.#routeStatus,
+                this.#routeAssignee,
+                this.#routeDossierTemplateIds,
+                this.#routeOnlyActive,
             ]),
         );
     }
@@ -155,8 +166,8 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
         this.searchService.searchValue = newQuery ?? '';
     }
 
-    private _initFilters() {
-        const dossierIds = this._routeDossierIds;
+    #initFilters() {
+        const dossierIds = this.#routeDossierIds;
         const dossierToFilter = ({ dossierName, id }: Dossier) => {
             const checked = dossierIds.includes(id);
             return new NestedFilter({ id, label: dossierName, checked });
@@ -170,7 +181,7 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
             checker: keyChecker('dossierId'),
         };
 
-        const status = this._routeStatus;
+        const status = this.#routeStatus;
         const statusToFilter = (workflowStatus: WorkflowFileStatus) => {
             const checked = status === workflowStatus;
             return new NestedFilter({
@@ -188,7 +199,7 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
             checker: keyChecker('status'),
         };
 
-        const assignee = this._routeAssignee;
+        const assignee = this.#routeAssignee;
         const assigneeToFilter = (userId: string) => {
             const checked = assignee === userId;
             return new NestedFilter({ id: userId, label: this._userService.getName(userId), checked });
@@ -215,12 +226,12 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
         this.filterService.addFilterGroups([dossierNameFilter, workflowStatusFilter, assigneeFilter]);
         const onlyActiveLabel = this._translateService.instant('search-screen.filters.only-active');
         if (this.#enabledArchive) {
-            this.filterService.addSingleFilter({ id: 'onlyActiveDossiers', label: onlyActiveLabel, checked: this._routeOnlyActive });
+            this.filterService.addSingleFilter({ id: 'onlyActiveDossiers', label: onlyActiveLabel, checked: this.#routeOnlyActive });
         }
     }
 
-    private _addTemplateFilter(templates: DossierTemplate[]) {
-        const templatesIds = this._routeDossierTemplateIds;
+    #addTemplateFilter(templates: DossierTemplate[]) {
+        const templatesIds = this.#routeDossierTemplateIds;
         const templateToFilter = ({ name, id }: DossierTemplate) => {
             const checked = templatesIds?.includes(id);
             return new NestedFilter({ id, label: name, checked });
@@ -236,7 +247,7 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
         this.filterService.addFilterGroups([templateNameFilter]);
     }
 
-    private _updateNavigation(
+    #updateNavigation(
         query?: string,
         dossierIds?: string[],
         workflowStatus?: WorkflowFileStatus,
@@ -255,15 +266,15 @@ export class SearchScreenComponent extends ListingComponent<ISearchListItem> imp
         return this._router.navigate([], { queryParams, replaceUrl: true });
     }
 
-    private _toMatchedDocuments({ matchedDocuments }: ISearchResponse): IMatchedDocument[] {
+    #toMatchedDocuments({ matchedDocuments }: ISearchResponse): IMatchedDocument[] {
         return matchedDocuments.filter(doc => doc.score > 0 && doc.matchedTerms.length > 0);
     }
 
-    private _toListItems(matchedDocuments: IMatchedDocument[]): ISearchListItem[] {
-        return matchedDocuments.map(document => this._toListItem(document)).filter(value => value);
+    #toListItems(matchedDocuments: IMatchedDocument[]): ISearchListItem[] {
+        return matchedDocuments.map(document => this.#toListItem(document)).filter(value => value);
     }
 
-    private _toListItem({
+    #toListItem({
         dossierId,
         fileId,
         unmatchedTerms,
diff --git a/apps/red-ui/src/app/modules/search/search.module.ts b/apps/red-ui/src/app/modules/search/search.module.ts
deleted file mode 100644
index dd0e66b1a..000000000
--- a/apps/red-ui/src/app/modules/search/search.module.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SearchScreenComponent } from './search-screen/search-screen.component';
-import { RouterModule } from '@angular/router';
-import { IqserListingModule, StopPropagationDirective } from '@iqser/common-ui';
-import { SharedModule } from '@shared/shared.module';
-import { TranslateModule } from '@ngx-translate/core';
-import { SearchItemTemplateComponent } from './search-item-template/search-item-template.component';
-import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
-import { StatusBarComponent } from '@iqser/common-ui/lib/shared';
-
-const routes = [{ path: '', component: SearchScreenComponent }];
-
-@NgModule({
-    declarations: [SearchScreenComponent, SearchItemTemplateComponent],
-    imports: [
-        CommonModule,
-        RouterModule.forChild(routes),
-        SharedModule,
-        IqserUsersModule,
-        TranslateModule,
-        IqserListingModule,
-        StatusBarComponent,
-        StopPropagationDirective,
-        InitialsAvatarComponent,
-    ],
-})
-export class SearchModule {}
diff --git a/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.ts b/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.ts
index a40d314c3..76263b639 100644
--- a/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.ts
+++ b/apps/red-ui/src/app/modules/trash/trash-screen/trash-screen.component.ts
@@ -1,6 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    IqserListingModule,
+    ListingComponent,
+    listingProvidersFactory,
+    LoadingService,
+    TableColumnConfig,
+} from '@iqser/common-ui';
 import { SortingOrders } from '@iqser/common-ui/lib/sorting';
 import { TrashItem } from '@red/domain';
 import { TrashService } from '@services/entity-services/trash.service';
@@ -8,6 +15,9 @@ import { RouterHistoryService } from '@services/router-history.service';
 import { firstValueFrom, Observable } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 import { TrashDialogService } from '../services/trash-dialog.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TrashTableItemComponent } from './trash-table-item/trash-table-item.component';
 
 @Component({
     templateUrl: './trash-screen.component.html',
@@ -16,11 +26,13 @@ import { TrashDialogService } from '../services/trash-dialog.service';
         entitiesService: TrashService,
         component: TrashScreenComponent,
     }),
+    standalone: true,
+    imports: [IqserListingModule, TranslateModule, CircleButtonComponent, NgIf, TrashTableItemComponent, AsyncPipe],
 })
 export class TrashScreenComponent extends ListingComponent<TrashItem> implements OnInit {
     readonly tableHeaderLabel = _('trash.table-header.title');
-    readonly canRestoreSelected$ = this._canRestoreSelected$;
-    readonly canHardDeleteSelected$ = this._canHardDeleteSelected$;
+    readonly canRestoreSelected$ = this.#canRestoreSelected$;
+    readonly canHardDeleteSelected$ = this.#canHardDeleteSelected$;
     readonly tableColumnConfigs: TableColumnConfig<TrashItem>[] = [
         { label: _('trash.table-col-names.name'), sortByKey: 'name' },
         { label: _('trash.table-col-names.owner'), class: 'user-column', sortByKey: 'ownerName' },
@@ -43,14 +55,14 @@ export class TrashScreenComponent extends ListingComponent<TrashItem> implements
         });
     }
 
-    private get _canRestoreSelected$(): Observable<boolean> {
+    get #canRestoreSelected$(): Observable<boolean> {
         return this.listingService.selectedEntities$.pipe(
             map(entities => entities.length && !entities.find(dossier => !(dossier.canRestore && dossier.hasRestoreRights))),
             distinctUntilChanged(),
         );
     }
 
-    private get _canHardDeleteSelected$(): Observable<boolean> {
+    get #canHardDeleteSelected$(): Observable<boolean> {
         return this.listingService.selectedEntities$.pipe(
             map(entities => entities.length && !entities.find(dossier => !dossier.hasHardDeleteRights)),
             distinctUntilChanged(),
diff --git a/apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.ts b/apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.ts
index 6f8e263e9..0c0cd3c0e 100644
--- a/apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.ts
+++ b/apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.ts
@@ -2,15 +2,34 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Out
 import { Dossier, DossierStats, TrashFile, TrashItem, User } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
-import { PartialDossier } from '@shared/components/dossier-name-column/dossier-name-column.component';
+import { DossierNameColumnComponent, PartialDossier } from '@shared/components/dossier-name-column/dossier-name-column.component';
 import { Observable } from 'rxjs';
-import { getCurrentUser } from '@common-ui/users';
+import { getCurrentUser, InitialsAvatarComponent } from '@common-ui/users';
+import { MatIcon } from '@angular/material/icon';
+import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
+import { AsyncPipe, DatePipe, NgIf } from '@angular/common';
+import { CircleButtonComponent } from '@iqser/common-ui';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-trash-table-item [item]',
     templateUrl: './trash-table-item.component.html',
     styleUrls: ['./trash-table-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        MatIcon,
+        FileNameColumnComponent,
+        DossierNameColumnComponent,
+        NgIf,
+        InitialsAvatarComponent,
+        CircleButtonComponent,
+        AsyncPipe,
+        RouterLink,
+        DatePipe,
+        TranslateModule,
+    ],
 })
 export class TrashTableItemComponent implements OnChanges {
     @Input() item: TrashItem;
diff --git a/apps/red-ui/src/app/modules/trash/trash.module.ts b/apps/red-ui/src/app/modules/trash/trash.module.ts
deleted file mode 100644
index fb8596de3..000000000
--- a/apps/red-ui/src/app/modules/trash/trash.module.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { TrashScreenComponent } from './trash-screen/trash-screen.component';
-import { CircleButtonComponent, IqserListingModule } from '@iqser/common-ui';
-import { TrashTableItemComponent } from './trash-screen/trash-table-item/trash-table-item.component';
-import { SharedModule } from '@shared/shared.module';
-import { TrashDialogService } from './services/trash-dialog.service';
-import { TranslateModule } from '@ngx-translate/core';
-import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
-import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
-import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component';
-
-const routes = [{ path: '', component: TrashScreenComponent }];
-
-@NgModule({
-    declarations: [TrashScreenComponent, TrashTableItemComponent],
-    imports: [
-        CommonModule,
-        RouterModule.forChild(routes),
-        SharedModule,
-        IqserUsersModule,
-        TranslateModule,
-        IqserListingModule,
-        CircleButtonComponent,
-        FileNameColumnComponent,
-        InitialsAvatarComponent,
-        DossierNameColumnComponent,
-    ],
-    providers: [TrashDialogService],
-})
-export class TrashModule {}
diff --git a/apps/red-ui/src/app/modules/trash/trash.routes.ts b/apps/red-ui/src/app/modules/trash/trash.routes.ts
new file mode 100644
index 000000000..543ca99ed
--- /dev/null
+++ b/apps/red-ui/src/app/modules/trash/trash.routes.ts
@@ -0,0 +1,5 @@
+import { TrashScreenComponent } from './trash-screen/trash-screen.component';
+import { TrashDialogService } from './services/trash-dialog.service';
+import { IqserRoutes } from '@iqser/common-ui';
+
+export default [{ path: '', component: TrashScreenComponent, providers: [TrashDialogService] }] satisfies IqserRoutes;

From 28b3301063fb0519a65232a1c5f73fd945a3c16a Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Thu, 13 Jun 2024 18:33:59 +0300
Subject: [PATCH 09/17] RED-9321: refactored account and archive modules.

---
 apps/red-ui/src/app/app-routing.module.ts     |  4 +--
 .../account-side-nav.component.ts             |  6 ++++
 .../src/app/modules/account/account.module.ts | 28 ---------------
 ...nt-routing.module.ts => account.routes.ts} | 14 +++-----
 .../base-account-screen-component.ts          |  7 +++-
 .../dialog-defaults.component.ts              | 10 +++++-
 .../preferences/preferences.component.ts      | 30 ++++++++++++++--
 .../src/app/modules/archive/archive.module.ts | 36 -------------------
 ...ve-routing.module.ts => archive.routes.ts} | 16 +++------
 .../table-item/table-item.component.ts        | 14 ++++++++
 .../archived-dossiers-screen.component.ts     |  8 ++++-
 11 files changed, 81 insertions(+), 92 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/account/account.module.ts
 rename apps/red-ui/src/app/modules/account/{account-routing.module.ts => account.routes.ts} (89%)
 delete mode 100644 apps/red-ui/src/app/modules/archive/archive.module.ts
 rename apps/red-ui/src/app/modules/archive/{archive-routing.module.ts => archive.routes.ts} (83%)

diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts
index 2ca32ea3e..670377328 100644
--- a/apps/red-ui/src/app/app-routing.module.ts
+++ b/apps/red-ui/src/app/app-routing.module.ts
@@ -77,7 +77,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [
     },
     {
         path: `${ARCHIVE_ROUTE}`,
-        loadChildren: () => import('./modules/archive/archive.module').then(m => m.ArchiveModule),
+        loadChildren: () => import('./modules/archive/archive.routes'),
         canActivate: [CompositeRouteGuard, webViewerLoadedGuard(), loadArchivedDossiersGuard()],
         data: {
             routeGuards: [FeaturesGuard],
@@ -99,7 +99,7 @@ const mainRoutes: IqserRoutes = [
     },
     {
         path: 'account',
-        loadChildren: () => import('./modules/account/account.module').then(m => m.AccountModule),
+        loadChildren: () => import('./modules/account/account.routes'),
     },
     {
         path: 'admin',
diff --git a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts
index bebf6d1a1..71f58143c 100644
--- a/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts
+++ b/apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.ts
@@ -4,6 +4,10 @@ import { IqserPermissionsService } from '@iqser/common-ui';
 import { Roles } from '@users/roles';
 import { User } from '@red/domain';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { SideNavComponent } from '@common-ui/shared';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgForOf, NgIf } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 interface NavItem {
     readonly label: string;
@@ -17,6 +21,8 @@ interface NavItem {
     templateUrl: './account-side-nav.component.html',
     styleUrls: ['./account-side-nav.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [SideNavComponent, TranslateModule, NgForOf, NgIf, RouterLinkActive, RouterLink],
 })
 export class AccountSideNavComponent {
     readonly currentUser = getCurrentUser<User>();
diff --git a/apps/red-ui/src/app/modules/account/account.module.ts b/apps/red-ui/src/app/modules/account/account.module.ts
deleted file mode 100644
index 20f4f6bf0..000000000
--- a/apps/red-ui/src/app/modules/account/account.module.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import { AccountRoutingModule } from './account-routing.module';
-import { AccountSideNavComponent } from './account-side-nav/account-side-nav.component';
-import { BaseAccountScreenComponent } from './base-account-screen/base-account-screen-component';
-import { NotificationPreferencesService } from './services/notification-preferences.service';
-import { TranslateModule } from '@ngx-translate/core';
-import { IconButtonComponent, IqserAllowDirective, IqserHelpModeModule } from '@iqser/common-ui';
-import { PreferencesComponent } from './screens/preferences/preferences.component';
-import { SideNavComponent } from '@iqser/common-ui/lib/shared';
-import { DialogDefaultsComponent } from './screens/preferences/dialog-defaults/dialog-defaults.component';
-
-@NgModule({
-    declarations: [AccountSideNavComponent, BaseAccountScreenComponent, PreferencesComponent, DialogDefaultsComponent],
-    imports: [
-        CommonModule,
-        SharedModule,
-        AccountRoutingModule,
-        TranslateModule,
-        IqserHelpModeModule,
-        IconButtonComponent,
-        SideNavComponent,
-        IqserAllowDirective,
-    ],
-    providers: [NotificationPreferencesService],
-})
-export class AccountModule {}
diff --git a/apps/red-ui/src/app/modules/account/account-routing.module.ts b/apps/red-ui/src/app/modules/account/account.routes.ts
similarity index 89%
rename from apps/red-ui/src/app/modules/account/account-routing.module.ts
rename to apps/red-ui/src/app/modules/account/account.routes.ts
index 38e7f74f4..c6ec83179 100644
--- a/apps/red-ui/src/app/modules/account/account-routing.module.ts
+++ b/apps/red-ui/src/app/modules/account/account.routes.ts
@@ -1,5 +1,3 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
 import { CompositeRouteGuard, IqserPermissionsGuard, IqserRoutes } from '@iqser/common-ui';
 import { RedRoleGuard } from '@users/red-role.guard';
 import { BaseAccountScreenComponent } from './base-account-screen/base-account-screen-component';
@@ -7,8 +5,9 @@ import { PreferencesComponent } from './screens/preferences/preferences.componen
 import { Roles } from '@users/roles';
 import { IqserAuthGuard } from '@iqser/common-ui/lib/users';
 import { PendingChangesGuard } from '@guards/can-deactivate.guard';
+import { NotificationPreferencesService } from './services/notification-preferences.service';
 
-const routes: IqserRoutes = [
+export default [
     { path: '', redirectTo: 'user-profile', pathMatch: 'full' },
     {
         path: 'user-profile',
@@ -31,6 +30,7 @@ const routes: IqserRoutes = [
                 redirectTo: '/',
             },
         },
+        providers: [NotificationPreferencesService],
         loadChildren: () => import('./screens/notifications/notifications.routes'),
     },
     {
@@ -63,10 +63,4 @@ const routes: IqserRoutes = [
             },
         ],
     },
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
-})
-export class AccountRoutingModule {}
+] satisfies IqserRoutes;
diff --git a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts
index 3305fc65f..ccfa31ad0 100644
--- a/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts
+++ b/apps/red-ui/src/app/modules/account/base-account-screen/base-account-screen-component.ts
@@ -1,12 +1,17 @@
 import { ChangeDetectionStrategy, Component, OnInit, ViewContainerRef } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
 import { accountTranslations } from '@translations/account-translations';
+import { NgClass, NgIf } from '@angular/common';
+import { AccountSideNavComponent } from '../account-side-nav/account-side-nav.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-base-account-screen',
     templateUrl: './base-account-screen-component.html',
     styleUrls: ['./base-account-screen-component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [NgClass, NgIf, RouterOutlet, AccountSideNavComponent, TranslateModule],
 })
 export class BaseAccountScreenComponent implements OnInit {
     readonly translations = accountTranslations;
diff --git a/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts b/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts
index 0039b8f8a..ece1976bc 100644
--- a/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts
+++ b/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, Component, inject } from '@angular/core';
 import { BaseFormComponent } from '@common-ui/form';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import {
     RedactOrHintOption,
     RedactOrHintOptions,
@@ -17,6 +17,12 @@ import {
     removeOptions,
     SystemDefaultType,
 } from '../../../utils/dialog-defaults';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { IconButtonComponent } from '@iqser/common-ui';
 
 interface DefaultOptionsForm {
     addRedaction: RedactOrHintOption | SystemDefaultType;
@@ -35,6 +41,8 @@ interface DefaultOptionsForm {
     selector: 'redaction-dialog-defaults',
     templateUrl: './dialog-defaults.component.html',
     styleUrl: './dialog-defaults.component.scss',
+    standalone: true,
+    imports: [ReactiveFormsModule, TranslateModule, MatFormField, MatSelect, MatOption, NgForOf, MatCheckbox, NgIf, IconButtonComponent],
 })
 export class DialogDefaultsComponent extends BaseFormComponent {
     readonly #formBuilder = inject(FormBuilder);
diff --git a/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts b/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts
index c33a60f26..269fe712f 100644
--- a/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts
+++ b/apps/red-ui/src/app/modules/account/screens/preferences/preferences.component.ts
@@ -1,10 +1,24 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
-import { BaseFormComponent, getConfig, IqserPermissionsService, isIqserDevMode, KEYS, LoadingService } from '@iqser/common-ui';
+import {
+    BaseFormComponent,
+    getConfig,
+    IconButtonComponent,
+    IqserAllowDirective,
+    IqserPermissionsService,
+    isIqserDevMode,
+    KEYS,
+    LoadingService,
+} from '@iqser/common-ui';
 import { AsControl } from '@iqser/common-ui/lib/utils';
 import { Roles } from '@users/roles';
 import { PreferencesKeys, UserPreferenceService } from '@users/user-preference.service';
+import { DialogDefaultsComponent } from './dialog-defaults/dialog-defaults.component';
+import { NgClass, NgIf } from '@angular/common';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 interface PreferencesForm {
     // preferences
@@ -30,6 +44,18 @@ const Screens = {
     templateUrl: './preferences.component.html',
     styleUrls: ['./preferences.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        DialogDefaultsComponent,
+        NgClass,
+        NgIf,
+        ReactiveFormsModule,
+        MatSlideToggle,
+        TranslateModule,
+        IqserAllowDirective,
+        MatCheckbox,
+        IconButtonComponent,
+    ],
 })
 export class PreferencesComponent extends BaseFormComponent implements OnInit {
     readonly form: FormGroup<AsControl<PreferencesForm>>;
diff --git a/apps/red-ui/src/app/modules/archive/archive.module.ts b/apps/red-ui/src/app/modules/archive/archive.module.ts
deleted file mode 100644
index 5e530e39d..000000000
--- a/apps/red-ui/src/app/modules/archive/archive.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ArchivedDossiersScreenComponent } from './screens/archived-dossiers-screen/archived-dossiers-screen.component';
-import { ArchiveRoutingModule } from './archive-routing.module';
-import { TableItemComponent } from './components/table-item/table-item.component';
-import { ConfigService } from './services/config.service';
-import { IqserHelpModeModule, IqserListingModule } from '@iqser/common-ui';
-import { TranslateModule } from '@ngx-translate/core';
-import { SharedModule } from '@shared/shared.module';
-import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';
-import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
-import { DossiersTypeSwitchComponent } from '@shared/components/dossiers-type-switch/dossiers-type-switch.component';
-import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component';
-import { DossierStateComponent } from '@shared/components/dossier-state/dossier-state.component';
-import { DossiersListingActionsComponent } from '../shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component';
-
-@NgModule({
-    declarations: [TableItemComponent, ArchivedDossiersScreenComponent],
-    imports: [
-        CommonModule,
-        ArchiveRoutingModule,
-        IqserHelpModeModule,
-        IqserUsersModule,
-        TranslateModule,
-        IqserListingModule,
-        SharedModule,
-        SharedDossiersModule,
-        InitialsAvatarComponent,
-        DossiersTypeSwitchComponent,
-        DossierNameColumnComponent,
-        DossierStateComponent,
-        DossiersListingActionsComponent,
-    ],
-    providers: [ConfigService],
-})
-export class ArchiveModule {}
diff --git a/apps/red-ui/src/app/modules/archive/archive-routing.module.ts b/apps/red-ui/src/app/modules/archive/archive.routes.ts
similarity index 83%
rename from apps/red-ui/src/app/modules/archive/archive-routing.module.ts
rename to apps/red-ui/src/app/modules/archive/archive.routes.ts
index b29767a79..95619e0ed 100644
--- a/apps/red-ui/src/app/modules/archive/archive-routing.module.ts
+++ b/apps/red-ui/src/app/modules/archive/archive.routes.ts
@@ -1,12 +1,11 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
 import { BreadcrumbTypes, DOSSIER_ID, FILE_ID } from '@red/domain';
 import { ArchivedDossiersScreenComponent } from './screens/archived-dossiers-screen/archived-dossiers-screen.component';
-import { CompositeRouteGuard } from '@iqser/common-ui';
+import { CompositeRouteGuard, IqserRoutes } from '@iqser/common-ui';
 import { ARCHIVED_DOSSIERS_SERVICE } from '../../tokens';
 import { DossierFilesGuard } from '@guards/dossier-files-guard';
+import { ConfigService } from './services/config.service';
 
-const routes: Routes = [
+export default [
     {
         path: '',
         pathMatch: 'full',
@@ -18,6 +17,7 @@ const routes: Routes = [
             reuse: true,
             dossiersService: ARCHIVED_DOSSIERS_SERVICE,
         },
+        providers: [ConfigService],
     },
     {
         path: `:${DOSSIER_ID}`,
@@ -40,10 +40,4 @@ const routes: Routes = [
         },
         loadChildren: () => import('../file-preview/file-preview.routes'),
     },
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
-})
-export class ArchiveRoutingModule {}
+] satisfies IqserRoutes;
diff --git a/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.ts
index a4b3e1658..9e5bc8923 100644
--- a/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.ts
@@ -3,11 +3,25 @@ import { Dossier, DossierStats } from '@red/domain';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
 import { switchMap } from 'rxjs/operators';
+import { DossierNameColumnComponent } from '@shared/components/dossier-name-column/dossier-name-column.component';
+import { InitialsAvatarComponent } from '@common-ui/users';
+import { DossierStateComponent } from '@shared/components/dossier-state/dossier-state.component';
+import { DossiersListingActionsComponent } from '../../../shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component';
+import { AsyncPipe, DatePipe } from '@angular/common';
 
 @Component({
     selector: 'redaction-table-item [dossier]',
     templateUrl: './table-item.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        DossierNameColumnComponent,
+        InitialsAvatarComponent,
+        DossierStateComponent,
+        DossiersListingActionsComponent,
+        AsyncPipe,
+        DatePipe,
+    ],
 })
 export class TableItemComponent implements OnChanges {
     @Input() dossier!: Dossier;
diff --git a/apps/red-ui/src/app/modules/archive/screens/archived-dossiers-screen/archived-dossiers-screen.component.ts b/apps/red-ui/src/app/modules/archive/screens/archived-dossiers-screen/archived-dossiers-screen.component.ts
index 09aacd4d1..ac9920e90 100644
--- a/apps/red-ui/src/app/modules/archive/screens/archived-dossiers-screen/archived-dossiers-screen.component.ts
+++ b/apps/red-ui/src/app/modules/archive/screens/archived-dossiers-screen/archived-dossiers-screen.component.ts
@@ -1,18 +1,24 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { ListingComponent, listingProvidersFactory, LoadingService } from '@iqser/common-ui';
+import { IqserListingModule, ListingComponent, listingProvidersFactory, LoadingService } from '@iqser/common-ui';
 import { Dossier, DOSSIER_TEMPLATE_ID } from '@red/domain';
 import { ConfigService } from '../../services/config.service';
 import { tap } from 'rxjs/operators';
 import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.service';
 import { Router } from '@angular/router';
 import { OnAttach } from '@common-ui/utils';
+import { DossiersTypeSwitchComponent } from '@shared/components/dossiers-type-switch/dossiers-type-switch.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { TableItemComponent } from '../../components/table-item/table-item.component';
+import { AsyncPipe, NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-archived-dossiers-screen',
     templateUrl: './archived-dossiers-screen.component.html',
     providers: listingProvidersFactory(ArchivedDossiersScreenComponent),
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [IqserListingModule, DossiersTypeSwitchComponent, TranslateModule, TableItemComponent, NgIf, AsyncPipe],
 })
 export class ArchivedDossiersScreenComponent extends ListingComponent<Dossier> implements OnInit, OnAttach {
     readonly tableColumnConfigs = this._configService.tableConfig;

From 0e9dcc2b1f2ba18dcd3625534c9ec49d30c84b71 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Fri, 14 Jun 2024 12:28:53 +0300
Subject: [PATCH 10/17] RED-9321: refactored admin module.

---
 apps/red-ui/src/app/app-routing.module.ts     |   2 +-
 .../src/app/modules/admin/admin.module.ts     | 139 ------------------
 ...dmin-routing.module.ts => admin.routes.ts} |  23 +--
 .../base-admin-screen.component.ts            |   4 +
 .../base-dossier-template-screen.component.ts |  16 ++
 .../base-entity-screen.component.ts           |  19 ++-
 .../users-stats/users-stats.component.ts      |   5 +
 ...clone-dossier-template-dialog.component.ts |   7 +-
 .../add-edit-user-dialog.component.ts         |  11 +-
 .../reset-password.component.ts               |   8 +-
 .../user-details/user-details.component.ts    |   9 +-
 .../add-entity-dialog.component.ts            |  13 +-
 .../audit-info-dialog.component.ts            |   7 +-
 .../configure-certificate-dialog.component.ts |  27 +++-
 .../kms-signature-configuration.component.ts  |  12 +-
 .../pkcs-signature-configuration.component.ts |   7 +-
 .../edit-color-dialog.component.ts            |  10 +-
 .../smtp-auth-dialog.component.ts             |   9 +-
 .../upload-dictionary-dialog.component.ts     |   5 +-
 .../screens/audit/audit-screen.component.ts   |  43 +++++-
 .../component-mappings-screen.component.ts    |  26 ++++
 .../default-colors-screen.component.ts        |  16 +-
 .../digital-signature-screen.component.ts     |  23 ++-
 .../entities-listing-screen.component.ts      |  29 +++-
 .../general-config-form.component.ts          |   9 +-
 .../general-config-screen.component.ts        |   5 +-
 .../smtp-form/smtp-form.component.ts          |  16 +-
 .../system-preferences-form.component.ts      |   9 +-
 .../user-listing-screen.component.ts          |  26 +++-
 .../admin/services/admin-dialog.service.ts    |   2 +-
 30 files changed, 348 insertions(+), 189 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/admin/admin.module.ts
 rename apps/red-ui/src/app/modules/admin/{admin-routing.module.ts => admin.routes.ts} (94%)

diff --git a/apps/red-ui/src/app/app-routing.module.ts b/apps/red-ui/src/app/app-routing.module.ts
index 670377328..a6dbcb214 100644
--- a/apps/red-ui/src/app/app-routing.module.ts
+++ b/apps/red-ui/src/app/app-routing.module.ts
@@ -103,7 +103,7 @@ const mainRoutes: IqserRoutes = [
     },
     {
         path: 'admin',
-        loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule),
+        loadChildren: () => import('./modules/admin/admin.routes'),
         canActivate: [RedRoleGuard],
     },
     {
diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts
deleted file mode 100644
index 946cba067..000000000
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AdminRoutingModule } from './admin-routing.module';
-import { SharedModule } from '@shared/shared.module';
-import { AuditScreenComponent } from './screens/audit/audit-screen.component';
-import { DefaultColorsScreenComponent } from './screens/default-colors/default-colors-screen.component';
-import { EntitiesListingScreenComponent } from './screens/entities-listing/entities-listing-screen.component';
-import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
-import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
-import { DossierTemplateBreadcrumbsComponent } from './shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
-import { AddEntityDialogComponent } from './dialogs/add-entity-dialog/add-entity-dialog.component';
-import { EditColorDialogComponent } from './dialogs/edit-color-dialog/edit-color-dialog.component';
-import { AdminDialogService } from './services/admin-dialog.service';
-import { GeneralConfigScreenComponent } from './screens/general-config/general-config-screen.component';
-import { SmtpAuthDialogComponent } from './dialogs/smtp-auth-dialog/smtp-auth-dialog.component';
-import { AddEditUserDialogComponent } from './dialogs/add-edit-user-dialog/add-edit-user-dialog.component';
-import { UsersStatsComponent } from './components/users-stats/users-stats.component';
-import { ResetPasswordComponent } from './dialogs/add-edit-user-dialog/reset-password/reset-password.component';
-import { UserDetailsComponent } from './dialogs/add-edit-user-dialog/user-details/user-details.component';
-import { AuditService } from './services/audit.service';
-import { DigitalSignatureService } from './services/digital-signature.service';
-import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen.component';
-import { RulesService } from './services/rules.service';
-import { SmtpConfigService } from './services/smtp-config.service';
-import { UploadDictionaryDialogComponent } from './dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component';
-import { GeneralConfigFormComponent } from './screens/general-config/general-config-form/general-config-form.component';
-import { SmtpFormComponent } from './screens/general-config/smtp-form/smtp-form.component';
-import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
-import { A11yModule } from '@angular/cdk/a11y';
-import { BaseEntityScreenComponent } from './base-entity-screen/base-entity-screen.component';
-import { AdminSideNavComponent } from './shared/components/admin-side-nav/admin-side-nav.component';
-import { SystemPreferencesFormComponent } from './screens/general-config/system-preferences-form/system-preferences-form.component';
-import { ConfigureCertificateDialogComponent } from './dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';
-import { PkcsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component';
-import { KmsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component';
-import {
-    ChevronButtonComponent,
-    CircleButtonComponent,
-    DetailsRadioComponent,
-    EditableInputComponent,
-    EmptyStateComponent,
-    HasScrollbarDirective,
-    HumanizePipe,
-    IconButtonComponent,
-    InputWithActionComponent,
-    IqserAllowDirective,
-    IqserDenyDirective,
-    IqserHelpModeModule,
-    IqserListingModule,
-    RoundCheckboxComponent,
-    UploadFileComponent,
-} from '@iqser/common-ui';
-import { TranslateModule } from '@ngx-translate/core';
-import { AuditInfoDialogComponent } from './dialogs/audit-info-dialog/audit-info-dialog.component';
-import { DossierTemplateActionsComponent } from './shared/components/dossier-template-actions/dossier-template-actions.component';
-import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
-import { SelectComponent } from '@shared/components/select/select.component';
-import { PaginationComponent } from '@common-ui/pagination/pagination.component';
-import { AddCloneDossierTemplateDialogComponent } from './dialogs/add-clone-dossier-template-dialog/add-clone-dossier-template-dialog.component';
-import { ComponentMappingsScreenComponent } from './screens/component-mappings/component-mappings-screen.component';
-import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
-import { NamePipe } from '@common-ui/users/name.pipe';
-import { AddEditEntityComponent } from '@shared/components/add-edit-entity/add-edit-entity.component';
-
-const dialogs = [
-    AddCloneDossierTemplateDialogComponent,
-    AddEntityDialogComponent,
-    EditColorDialogComponent,
-    SmtpAuthDialogComponent,
-    AddEditUserDialogComponent,
-    UploadDictionaryDialogComponent,
-    ConfigureCertificateDialogComponent,
-    AuditInfoDialogComponent,
-];
-
-const screens = [
-    AuditScreenComponent,
-    DefaultColorsScreenComponent,
-    EntitiesListingScreenComponent,
-    DigitalSignatureScreenComponent,
-    UserListingScreenComponent,
-    GeneralConfigScreenComponent,
-    ComponentMappingsScreenComponent,
-];
-
-const components = [
-    UsersStatsComponent,
-    ResetPasswordComponent,
-    UserDetailsComponent,
-    BaseAdminScreenComponent,
-    BaseDossierTemplateScreenComponent,
-    BaseEntityScreenComponent,
-    GeneralConfigFormComponent,
-    SmtpFormComponent,
-    SystemPreferencesFormComponent,
-    PkcsSignatureConfigurationComponent,
-    KmsSignatureConfigurationComponent,
-
-    ...dialogs,
-    ...screens,
-];
-
-@NgModule({
-    declarations: [...components],
-    providers: [AdminDialogService, AuditService, DigitalSignatureService, RulesService, SmtpConfigService],
-    imports: [
-        CommonModule,
-        SharedModule,
-        AdminRoutingModule,
-        A11yModule,
-        IqserUsersModule,
-        TranslateModule,
-        HumanizePipe,
-        IqserListingModule,
-        IqserHelpModeModule,
-        AdminSideNavComponent,
-        DossierTemplateActionsComponent,
-        DossierTemplateBreadcrumbsComponent,
-        IconButtonComponent,
-        CircleButtonComponent,
-        ChevronButtonComponent,
-        EmptyStateComponent,
-        HasScrollbarDirective,
-        RoundCheckboxComponent,
-        InputWithActionComponent,
-        EditableInputComponent,
-        DetailsRadioComponent,
-        IqserAllowDirective,
-        IqserDenyDirective,
-        SelectComponent,
-        PaginationComponent,
-        AnnotationIconComponent,
-        InitialsAvatarComponent,
-        UploadFileComponent,
-        NamePipe,
-        AddEditEntityComponent,
-    ],
-})
-export class AdminModule {}
diff --git a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts b/apps/red-ui/src/app/modules/admin/admin.routes.ts
similarity index 94%
rename from apps/red-ui/src/app/modules/admin/admin-routing.module.ts
rename to apps/red-ui/src/app/modules/admin/admin.routes.ts
index 5f101b124..27e2ed7a6 100644
--- a/apps/red-ui/src/app/modules/admin/admin-routing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.routes.ts
@@ -1,4 +1,3 @@
-import { NgModule } from '@angular/core';
 import { CompositeRouteGuard, IqserPermissionsGuard, IqserRoutes } from '@iqser/common-ui';
 import { RedRoleGuard } from '@users/red-role.guard';
 import { EntitiesListingScreenComponent } from './screens/entities-listing/entities-listing-screen.component';
@@ -7,7 +6,6 @@ import { DefaultColorsScreenComponent } from './screens/default-colors/default-c
 import { UserListingScreenComponent } from './screens/user-listing/user-listing-screen.component';
 import { DigitalSignatureScreenComponent } from './screens/digital-signature/digital-signature-screen.component';
 import { AuditScreenComponent } from './screens/audit/audit-screen.component';
-import { RouterModule } from '@angular/router';
 import { GeneralConfigScreenComponent } from './screens/general-config/general-config-screen.component';
 import { BaseAdminScreenComponent } from './base-admin-screen/base-admin-screen.component';
 import { BaseDossierTemplateScreenComponent } from './base-dossier-templates-screen/base-dossier-template-screen.component';
@@ -20,6 +18,11 @@ import { PermissionsGuard } from '@guards/permissions-guard';
 import { Roles } from '@users/roles';
 import { IqserAuthGuard } from '@iqser/common-ui/lib/users';
 import { ComponentMappingsScreenComponent } from './screens/component-mappings/component-mappings-screen.component';
+import { AdminDialogService } from './services/admin-dialog.service';
+import { AuditService } from './services/audit.service';
+import { DigitalSignatureService } from './services/digital-signature.service';
+import { RulesService } from './services/rules.service';
+import { SmtpConfigService } from './services/smtp-config.service';
 
 const entityRoutes: IqserRoutes = [
     {
@@ -70,6 +73,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [
                     },
                     type: 'ENTITY',
                 },
+                providers: [RulesService],
             },
             {
                 path: 'component-rules',
@@ -84,6 +88,7 @@ const dossierTemplateIdRoutes: IqserRoutes = [
                     },
                     type: 'COMPONENT',
                 },
+                providers: [RulesService],
             },
             {
                 path: 'component-mappings',
@@ -178,7 +183,7 @@ const dossierTemplatesRoutes: IqserRoutes = [
     },
 ];
 
-const routes: IqserRoutes = [
+export default [
     { path: '', redirectTo: 'dossier-templates', pathMatch: 'full' },
     {
         path: 'dossier-templates',
@@ -196,6 +201,7 @@ const routes: IqserRoutes = [
     {
         path: '',
         component: BaseAdminScreenComponent,
+        providers: [AdminDialogService],
         children: [
             {
                 path: 'users',
@@ -243,6 +249,7 @@ const routes: IqserRoutes = [
                         redirectTo: '/',
                     },
                 },
+                providers: [DigitalSignatureService],
             },
             {
                 path: 'audit',
@@ -254,6 +261,7 @@ const routes: IqserRoutes = [
                         redirectTo: '/',
                     },
                 },
+                providers: [AuditService],
             },
             {
                 path: 'general-config',
@@ -267,13 +275,8 @@ const routes: IqserRoutes = [
                         redirectTo: '/',
                     },
                 },
+                providers: [SmtpConfigService],
             },
         ],
     },
-];
-
-@NgModule({
-    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule],
-})
-export class AdminRoutingModule {}
+] satisfies IqserRoutes;
diff --git a/apps/red-ui/src/app/modules/admin/base-admin-screen/base-admin-screen.component.ts b/apps/red-ui/src/app/modules/admin/base-admin-screen/base-admin-screen.component.ts
index 6da915279..f0917f16c 100644
--- a/apps/red-ui/src/app/modules/admin/base-admin-screen/base-admin-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/base-admin-screen/base-admin-screen.component.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
+import { AdminSideNavComponent } from '../shared/components/admin-side-nav/admin-side-nav.component';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
     templateUrl: './base-admin-screen.component.html',
     styleUrls: ['./base-admin-screen.component.scss'],
+    standalone: true,
+    imports: [AdminSideNavComponent, RouterOutlet],
 })
 export class BaseAdminScreenComponent {}
diff --git a/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.ts b/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.ts
index 298ec017c..d1da13877 100644
--- a/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/base-dossier-templates-screen/base-dossier-template-screen.component.ts
@@ -1,7 +1,23 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DossierTemplateBreadcrumbsComponent } from '../shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
+import { DossierTemplateActionsComponent } from '../shared/components/dossier-template-actions/dossier-template-actions.component';
+import { CircleButtonComponent } from '@iqser/common-ui';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { AdminSideNavComponent } from '../shared/components/admin-side-nav/admin-side-nav.component';
 
 @Component({
     templateUrl: './base-dossier-template-screen.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        DossierTemplateBreadcrumbsComponent,
+        DossierTemplateActionsComponent,
+        CircleButtonComponent,
+        RouterLink,
+        TranslateModule,
+        AdminSideNavComponent,
+        RouterOutlet,
+    ],
 })
 export class BaseDossierTemplateScreenComponent {}
diff --git a/apps/red-ui/src/app/modules/admin/base-entity-screen/base-entity-screen.component.ts b/apps/red-ui/src/app/modules/admin/base-entity-screen/base-entity-screen.component.ts
index 1bd8db957..6022e0fbb 100644
--- a/apps/red-ui/src/app/modules/admin/base-entity-screen/base-entity-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/base-entity-screen/base-entity-screen.component.ts
@@ -1,19 +1,34 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
-import { Router } from '@angular/router';
+import { Router, RouterLink, RouterOutlet } from '@angular/router';
 import { firstValueFrom, Observable } from 'rxjs';
 import { AdminDialogService } from '../services/admin-dialog.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
-import { LoadingService } from '@iqser/common-ui';
+import { CircleButtonComponent, LoadingService } from '@iqser/common-ui';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
 import { map } from 'rxjs/operators';
 import { PermissionsService } from '@services/permissions.service';
 import { getParam } from '@iqser/common-ui/lib/utils';
+import { DossierTemplateBreadcrumbsComponent } from '../shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { AdminSideNavComponent } from '../shared/components/admin-side-nav/admin-side-nav.component';
 
 @Component({
     templateUrl: './base-entity-screen.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        DossierTemplateBreadcrumbsComponent,
+        CircleButtonComponent,
+        NgIf,
+        AsyncPipe,
+        TranslateModule,
+        RouterLink,
+        AdminSideNavComponent,
+        RouterOutlet,
+    ],
 })
 export class BaseEntityScreenComponent implements OnInit {
     readonly disabledItems$: Observable<string[]>;
diff --git a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.ts b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.ts
index 01ad53850..f90183514 100644
--- a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.ts
+++ b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.ts
@@ -1,10 +1,15 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DonutChartConfig } from '@red/domain';
+import { CircleButtonComponent } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
+import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.component';
 
 @Component({
     selector: 'redaction-users-stats',
     templateUrl: './users-stats.component.html',
     styleUrls: ['./users-stats.component.scss'],
+    standalone: true,
+    imports: [CircleButtonComponent, TranslateModule, DonutChartComponent],
 })
 export class UsersStatsComponent {
     @Output() toggleCollapse = new EventEmitter();
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-clone-dossier-template-dialog/add-clone-dossier-template-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-clone-dossier-template-dialog/add-clone-dossier-template-dialog.component.ts
index f3805d392..7d5632859 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-clone-dossier-template-dialog/add-clone-dossier-template-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-clone-dossier-template-dialog/add-clone-dossier-template-dialog.component.ts
@@ -1,12 +1,13 @@
 import { HttpStatusCode } from '@angular/common/http';
 import { Component, Inject } from '@angular/core';
-import { Validators } from '@angular/forms';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { BaseDialogComponent, getConfig, SaveOptions } from '@iqser/common-ui';
+import { BaseDialogComponent, CircleButtonComponent, getConfig, IconButtonComponent, SaveOptions } from '@iqser/common-ui';
 import { DossierTemplate } from '@red/domain';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { Router } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 
 export interface CloneTemplateData {
     dossierTemplateId?: string;
@@ -15,6 +16,8 @@ export interface CloneTemplateData {
 @Component({
     templateUrl: './add-clone-dossier-template-dialog.component.html',
     styleUrls: ['./add-clone-dossier-template-dialog.component.scss'],
+    standalone: true,
+    imports: [TranslateModule, ReactiveFormsModule, IconButtonComponent, CircleButtonComponent],
 })
 export class AddCloneDossierTemplateDialogComponent extends BaseDialogComponent {
     readonly dossierTemplate?: DossierTemplate;
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts
index 9d8e12ad2..9a17d38f9 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts
@@ -2,17 +2,24 @@ import { Component, Inject, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { User } from '@red/domain';
 import { UserDetailsComponent } from './user-details/user-details.component';
-import { BaseDialogComponent } from '@iqser/common-ui';
+import { BaseDialogComponent, CircleButtonComponent } from '@iqser/common-ui';
+import { ResetPasswordComponent } from './reset-password/reset-password.component';
+import { AdminDialogService } from '../../services/admin-dialog.service';
 
 @Component({
     selector: 'redaction-add-edit-user-dialog',
     templateUrl: './add-edit-user-dialog.component.html',
+    standalone: true,
+    imports: [UserDetailsComponent, ResetPasswordComponent, CircleButtonComponent],
 })
 export class AddEditUserDialogComponent extends BaseDialogComponent {
     resettingPassword = false;
     @ViewChild(UserDetailsComponent) private readonly _userDetailsComponent: UserDetailsComponent;
 
-    constructor(protected readonly _dialogRef: MatDialogRef<AddEditUserDialogComponent>, @Inject(MAT_DIALOG_DATA) readonly user: User) {
+    constructor(
+        protected readonly _dialogRef: MatDialogRef<AddEditUserDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) readonly user: User,
+    ) {
         super(_dialogRef, !!user);
     }
 
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.ts
index 9c4871613..973402838 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.ts
@@ -1,13 +1,17 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { UserService } from '@users/user.service';
-import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
+import { IconButtonComponent, IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { User } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
+import { TranslateModule } from '@ngx-translate/core';
+import { NamePipe } from '@common-ui/users/name.pipe';
 
 @Component({
     selector: 'redaction-reset-password',
     templateUrl: './reset-password.component.html',
+    standalone: true,
+    imports: [TranslateModule, NamePipe, ReactiveFormsModule, IconButtonComponent],
 })
 export class ResetPasswordComponent {
     readonly iconButtonTypes = IconButtonTypes;
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts
index 7222506d5..7dd08ff7a 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
-import { BaseFormComponent, LoadingService, Toaster } from '@iqser/common-ui';
+import { BaseFormComponent, IconButtonComponent, LoadingService, Toaster } from '@iqser/common-ui';
 import { rolesTranslations } from '@translations/roles-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { User } from '@red/domain';
@@ -9,11 +9,16 @@ import { UserService } from '@users/user.service';
 import { HttpStatusCode } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
 import { IProfileUpdateRequest } from '@iqser/common-ui/lib/users';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { NgForOf, NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-user-details',
     templateUrl: './user-details.component.html',
     styleUrls: ['./user-details.component.scss'],
+    standalone: true,
+    imports: [TranslateModule, ReactiveFormsModule, MatCheckbox, NgForOf, IconButtonComponent, NgIf],
 })
 export class UserDetailsComponent extends BaseFormComponent implements OnChanges {
     /** e.g. a RED_ADMIN is automatically a RED_USER_ADMIN => can't disable RED_USER_ADMIN as long as RED_ADMIN is checked */
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.ts
index 9d36614e6..8a0c01ec1 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.ts
@@ -1,7 +1,16 @@
 import { Component, inject, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { BaseDialogComponent, getConfig, IconButtonTypes } from '@iqser/common-ui';
+import {
+    BaseDialogComponent,
+    CircleButtonComponent,
+    getConfig,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserHelpModeModule,
+} from '@iqser/common-ui';
 import { AddEditEntityComponent } from '@shared/components/add-edit-entity/add-edit-entity.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIf } from '@angular/common';
 
 interface DialogData {
     readonly dossierTemplateId: string;
@@ -10,6 +19,8 @@ interface DialogData {
 @Component({
     templateUrl: './add-entity-dialog.component.html',
     styleUrls: ['./add-entity-dialog.component.scss'],
+    standalone: true,
+    imports: [AddEditEntityComponent, TranslateModule, IconButtonComponent, IqserHelpModeModule, NgIf, CircleButtonComponent],
 })
 export class AddEntityDialogComponent extends BaseDialogComponent {
     @ViewChild(AddEditEntityComponent, { static: true }) private readonly _addEditEntityComponent: AddEditEntityComponent;
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/audit-info-dialog/audit-info-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/audit-info-dialog/audit-info-dialog.component.ts
index 323176785..d038df97a 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/audit-info-dialog/audit-info-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/audit-info-dialog/audit-info-dialog.component.ts
@@ -1,8 +1,9 @@
-import { KeyValue } from '@angular/common';
+import { KeyValue, KeyValuePipe, NgForOf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { BaseDialogComponent } from '@iqser/common-ui';
+import { BaseDialogComponent, CircleButtonComponent, HumanizePipe } from '@iqser/common-ui';
 import { IAudit } from '@red/domain';
+import { TranslateModule } from '@ngx-translate/core';
 
 interface DialogData {
     readonly auditEntry: IAudit;
@@ -15,6 +16,8 @@ type OrderFn = (a: KeyValue<string, string>, b: KeyValue<string, string>) => num
     templateUrl: './audit-info-dialog.component.html',
     styleUrls: ['./audit-info-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [TranslateModule, NgForOf, KeyValuePipe, HumanizePipe, CircleButtonComponent],
 })
 export class AuditInfoDialogComponent extends BaseDialogComponent {
     constructor(
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts
index 8029c5ec0..e1b29d59f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.ts
@@ -1,12 +1,22 @@
 import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
 import { digitalSignatureDialogTranslations } from '../../translations/digital-signature-dialog-translations';
-import { BaseDialogComponent, DetailsRadioOption } from '@iqser/common-ui';
-import { MatDialogRef } from '@angular/material/dialog';
+import {
+    BaseDialogComponent,
+    CircleButtonComponent,
+    DetailsRadioComponent,
+    DetailsRadioOption,
+    IconButtonComponent,
+} from '@iqser/common-ui';
+import { MatDialogClose, MatDialogRef } from '@angular/material/dialog';
 import { PkcsSignatureConfigurationComponent } from './form/pkcs-signature-configuration/pkcs-signature-configuration.component';
 import { KmsSignatureConfigurationComponent } from './form/kms-signature-configuration/kms-signature-configuration.component';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { HttpStatusCode } from '@angular/common/http';
 import { DigitalSignatureOption, DigitalSignatureOptions } from '@red/domain';
+import { NgIf } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { DigitalSignatureService } from '../../services/digital-signature.service';
 
 const DEFAULT_DIALOG_WIDTH = '662px';
 const KMS_SIGNATURE_DIALOG_WIDTH = '810px';
@@ -14,6 +24,19 @@ const KMS_SIGNATURE_DIALOG_WIDTH = '810px';
 @Component({
     templateUrl: './configure-certificate-dialog.component.html',
     styleUrls: ['./configure-certificate-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        DetailsRadioComponent,
+        NgIf,
+        ReactiveFormsModule,
+        TranslateModule,
+        PkcsSignatureConfigurationComponent,
+        KmsSignatureConfigurationComponent,
+        IconButtonComponent,
+        MatDialogClose,
+        CircleButtonComponent,
+    ],
+    providers: [DigitalSignatureService],
 })
 export class ConfigureCertificateDialogComponent extends BaseDialogComponent {
     @ViewChild(PkcsSignatureConfigurationComponent) pkcsSignatureConfigurationComponent: PkcsSignatureConfigurationComponent;
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts
index f709855c3..5d6cd3e8c 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.ts
@@ -1,20 +1,28 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import { BaseSignatureConfigurationComponent } from '../base-signature-configuration-component';
 import { DigitalSignatureOptions, IKmsDigitalSignature, IKmsDigitalSignatureRequest } from '@red/domain';
 import { firstValueFrom } from 'rxjs';
 import { DigitalSignatureService } from '../../../../services/digital-signature.service';
+import { UploadFileComponent } from '@iqser/common-ui';
+import { NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-kms-signature-configuration',
     templateUrl: './kms-signature-configuration.component.html',
     styleUrls: ['./kms-signature-configuration.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [UploadFileComponent, ReactiveFormsModule, NgIf, TranslateModule],
 })
 export class KmsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit {
     @Input() digitalSignature!: IKmsDigitalSignatureRequest;
 
-    constructor(protected readonly _digitalSignatureService: DigitalSignatureService, private readonly _formBuilder: UntypedFormBuilder) {
+    constructor(
+        protected readonly _digitalSignatureService: DigitalSignatureService,
+        private readonly _formBuilder: UntypedFormBuilder,
+    ) {
         super(_digitalSignatureService, DigitalSignatureOptions.KMS);
     }
 
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
index f3ca8e9ee..deb4f039f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.ts
@@ -1,16 +1,21 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import { DigitalSignatureOptions, IPkcsDigitalSignature, IPkcsDigitalSignatureRequest } from '@red/domain';
 import { lastIndexOfEnd } from '@utils/functions';
 import { firstValueFrom } from 'rxjs';
 import { DigitalSignatureService } from '../../../../services/digital-signature.service';
 import { BaseSignatureConfigurationComponent } from '../base-signature-configuration-component';
+import { UploadFileComponent } from '@iqser/common-ui';
+import { NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-pkcs-signature-configuration',
     templateUrl: './pkcs-signature-configuration.component.html',
     styleUrls: ['./pkcs-signature-configuration.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [UploadFileComponent, ReactiveFormsModule, NgIf, TranslateModule],
 })
 export class PkcsSignatureConfigurationComponent extends BaseSignatureConfigurationComponent implements OnInit {
     @Input() digitalSignature!: IPkcsDigitalSignatureRequest;
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts
index cdb50b7ce..0dd76f928 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts
@@ -1,12 +1,16 @@
 import { Component, Inject } from '@angular/core';
 import { DefaultColorType } from '@red/domain';
-import { BaseDialogComponent, IconButtonTypes } from '@iqser/common-ui';
-import { UntypedFormGroup, Validators } from '@angular/forms';
+import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent, IconButtonTypes } from '@iqser/common-ui';
+import { ReactiveFormsModule, UntypedFormGroup, Validators } from '@angular/forms';
 import { defaultColorsTranslations } from '@translations/default-colors-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { firstValueFrom } from 'rxjs';
 import { DefaultColorsService } from '@services/entity-services/default-colors.service';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { ColorPickerModule } from 'ngx-color-picker';
+import { MatIcon } from '@angular/material/icon';
+import { NgIf } from '@angular/common';
 
 interface IEditColorData {
     colorKey: DefaultColorType;
@@ -16,6 +20,8 @@ interface IEditColorData {
 @Component({
     templateUrl: './edit-color-dialog.component.html',
     styleUrls: ['./edit-color-dialog.component.scss'],
+    standalone: true,
+    imports: [ReactiveFormsModule, TranslateModule, ColorPickerModule, MatIcon, NgIf, IconButtonComponent, CircleButtonComponent],
 })
 export class EditColorDialogComponent extends BaseDialogComponent {
     readonly iconButtonTypes = IconButtonTypes;
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.ts
index f87cd4345..a8879ebbb 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.ts
@@ -1,13 +1,16 @@
 import { Component, Inject } from '@angular/core';
-import { Validators } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { BaseDialogComponent } from '@iqser/common-ui';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogClose, MatDialogRef } from '@angular/material/dialog';
+import { BaseDialogComponent, CircleButtonComponent, IconButtonComponent } from '@iqser/common-ui';
 import { ISmtpConfiguration } from '@red/domain';
 import { getCurrentUser } from '@users/user.service';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-smtp-auth-dialog',
     templateUrl: './smtp-auth-dialog.component.html',
+    standalone: true,
+    imports: [ReactiveFormsModule, TranslateModule, IconButtonComponent, CircleButtonComponent, MatDialogClose],
 })
 export class SmtpAuthDialogComponent extends BaseDialogComponent {
     readonly #currentUser = getCurrentUser();
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.ts
index f9376b2e2..824ba642b 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component.ts
@@ -1,11 +1,14 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
-import { IconButtonTypes } from '@iqser/common-ui';
+import { IconButtonComponent, IconButtonTypes } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     templateUrl: './upload-dictionary-dialog.component.html',
     styleUrls: ['./upload-dictionary-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [IconButtonComponent, TranslateModule],
 })
 export class UploadDictionaryDialogComponent {
     readonly iconButtonTypes = IconButtonTypes;
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 012371425..424f8d01a 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,8 +1,17 @@
 import { Component, inject, OnDestroy, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { IqserPermissionsService, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
-import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import {
+    CircleButtonComponent,
+    HumanizePipe,
+    IqserListingModule,
+    IqserPermissionsService,
+    ListingComponent,
+    listingProvidersFactory,
+    LoadingService,
+    TableColumnConfig,
+} from '@iqser/common-ui';
+import { getCurrentUser, InitialsAvatarComponent } from '@iqser/common-ui/lib/users';
 import { Audit, IAudit, IAuditResponse, IAuditSearchRequest, User } from '@red/domain';
 import { RouterHistoryService } from '@services/router-history.service';
 import { auditCategoriesTranslations } from '@translations/audit-categories-translations';
@@ -12,6 +21,13 @@ import { Dayjs } from 'dayjs';
 import { firstValueFrom } from 'rxjs';
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import { AuditService } from '../../services/audit.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { PaginationComponent } from '@common-ui/pagination';
+import { MatFormField, MatSuffix } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { AsyncPipe, DatePipe, NgForOf, NgIf } from '@angular/common';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatIcon } from '@angular/material/icon';
 
 const PAGE_SIZE = 50;
 
@@ -19,6 +35,27 @@ const PAGE_SIZE = 50;
     templateUrl: './audit-screen.component.html',
     styleUrls: ['./audit-screen.component.scss'],
     providers: listingProvidersFactory(AuditScreenComponent),
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        TranslateModule,
+        PaginationComponent,
+        ReactiveFormsModule,
+        MatFormField,
+        MatOption,
+        NgForOf,
+        InitialsAvatarComponent,
+        NgIf,
+        MatIcon,
+        MatSuffix,
+        AsyncPipe,
+        DatePipe,
+        HumanizePipe,
+        CircleButtonComponent,
+        MatSelectTrigger,
+        MatSelect,
+        MatDatepickerModule,
+    ],
 })
 export class AuditScreenComponent extends ListingComponent<Audit> implements OnInit, OnDestroy {
     private _previousFrom: Dayjs;
diff --git a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts
index 44065a958..e4ffec6fa 100644
--- a/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/component-mappings/component-mappings-screen.component.ts
@@ -6,6 +6,11 @@ import {
     LoadingService,
     IconButtonTypes,
     IqserDialog,
+    CircleButtonComponent,
+    IqserListingModule,
+    InputWithActionComponent,
+    IconButtonComponent,
+    IqserAllowDirective,
 } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { defaultColorsTranslations } from '@translations/default-colors-translations';
@@ -19,11 +24,32 @@ import { map, tap } from 'rxjs/operators';
 import { AddEditComponentMappingDialogComponent } from './add-edit-component-mapping-dialog/add-edit-component-mapping-dialog.component';
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import { getParam } from '@common-ui/utils';
+import { DossierTemplateBreadcrumbsComponent } from '../../shared/components/dossier-template-breadcrumbs/dossier-template-breadcrumbs.component';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { DossierTemplateActionsComponent } from '../../shared/components/dossier-template-actions/dossier-template-actions.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterLink } from '@angular/router';
+import { AdminSideNavComponent } from '../../shared/components/admin-side-nav/admin-side-nav.component';
 
 @Component({
     templateUrl: './component-mappings-screen.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: listingProvidersFactory(ComponentMappingsScreenComponent),
+    standalone: true,
+    imports: [
+        DossierTemplateBreadcrumbsComponent,
+        AsyncPipe,
+        NgIf,
+        DossierTemplateActionsComponent,
+        CircleButtonComponent,
+        TranslateModule,
+        RouterLink,
+        AdminSideNavComponent,
+        IqserListingModule,
+        InputWithActionComponent,
+        IconButtonComponent,
+        IqserAllowDirective,
+    ],
 })
 export class ComponentMappingsScreenComponent extends ListingComponent<ComponentMapping> implements OnInit {
     tableColumnConfigs: readonly TableColumnConfig<ComponentMapping>[] = [
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 e1a4cb5a3..1e85cfa5f 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,6 +1,16 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { getConfig, IListable, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    getConfig,
+    IListable,
+    IqserAllowDirective,
+    IqserListingModule,
+    ListingComponent,
+    listingProvidersFactory,
+    LoadingService,
+    TableColumnConfig,
+} from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { getParam } from '@iqser/common-ui/lib/utils';
 import { DefaultColorTypes, DOSSIER_TEMPLATE_ID, User } from '@red/domain';
@@ -10,6 +20,8 @@ import { Roles } from '@users/roles';
 import { combineLatest } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { AdminDialogService } from '../../services/admin-dialog.service';
+import { AsyncPipe, NgIf, NgStyle } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 interface ListItem extends IListable {
     readonly key: string;
@@ -21,6 +33,8 @@ interface ListItem extends IListable {
     styleUrls: ['./default-colors-screen.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: listingProvidersFactory(DefaultColorsScreenComponent),
+    standalone: true,
+    imports: [IqserListingModule, NgStyle, CircleButtonComponent, IqserAllowDirective, TranslateModule, AsyncPipe, NgIf],
 })
 export class DefaultColorsScreenComponent extends ListingComponent<ListItem> implements OnInit {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
index 849dea75c..e54f6b61c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
@@ -1,5 +1,13 @@
 import { ChangeDetectorRef, Component, computed, OnInit, ViewChild } from '@angular/core';
-import { IconButtonTypes, IqserPermissionsService, LoadingService, Toaster } from '@iqser/common-ui';
+import {
+    EmptyStateComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserListingModule,
+    IqserPermissionsService,
+    LoadingService,
+    Toaster,
+} from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { RouterHistoryService } from '@services/router-history.service';
 import { DigitalSignatureService } from '../../services/digital-signature.service';
@@ -10,11 +18,24 @@ import { KmsSignatureConfigurationComponent } from '../../dialogs/configure-digi
 import { DigitalSignatureOptions, IKmsDigitalSignatureRequest, IPkcsDigitalSignatureRequest, User } from '@red/domain';
 import { Roles } from '@users/roles';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-digital-signature-screen',
     templateUrl: './digital-signature-screen.component.html',
     styleUrls: ['./digital-signature-screen.component.scss'],
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        EmptyStateComponent,
+        NgIf,
+        TranslateModule,
+        AsyncPipe,
+        PkcsSignatureConfigurationComponent,
+        KmsSignatureConfigurationComponent,
+        IconButtonComponent,
+    ],
 })
 export class DigitalSignatureScreenComponent implements OnInit {
     @ViewChild(PkcsSignatureConfigurationComponent) pkcsSignatureConfigurationComponent: PkcsSignatureConfigurationComponent;
diff --git a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.ts
index 9f59158a2..b72086c06 100644
--- a/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/entities-listing/entities-listing-screen.component.ts
@@ -1,6 +1,16 @@
 import { Component, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { IconButtonTypes, ListingComponent, listingProvidersFactory, LoadingService, TableColumnConfig } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    InputWithActionComponent,
+    IqserListingModule,
+    ListingComponent,
+    listingProvidersFactory,
+    LoadingService,
+    TableColumnConfig,
+} from '@iqser/common-ui';
 import { getParam } from '@iqser/common-ui/lib/utils';
 import { Dictionary, DOSSIER_TEMPLATE_ID, DossierTemplateStats } from '@red/domain';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
@@ -10,11 +20,28 @@ import { PermissionsService } from '@services/permissions.service';
 import { firstValueFrom, Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { AdminDialogService } from '../../services/admin-dialog.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { AsyncPipe, NgIf, NgStyle } from '@angular/common';
+import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
+import { RouterLink } from '@angular/router';
 
 @Component({
     templateUrl: './entities-listing-screen.component.html',
     styleUrls: ['./entities-listing-screen.component.scss'],
     providers: listingProvidersFactory(EntitiesListingScreenComponent),
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        TranslateModule,
+        CircleButtonComponent,
+        NgIf,
+        InputWithActionComponent,
+        IconButtonComponent,
+        NgStyle,
+        AnnotationIconComponent,
+        AsyncPipe,
+        RouterLink,
+    ],
 })
 export class EntitiesListingScreenComponent extends ListingComponent<Dictionary> implements OnInit {
     readonly #dossierTemplateId = getParam(DOSSIER_TEMPLATE_ID);
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-form/general-config-form.component.ts b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-form/general-config-form.component.ts
index f235e191a..9b8da7ce6 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-form/general-config-form.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-form/general-config-form.component.ts
@@ -1,15 +1,20 @@
 import { Component, OnInit } from '@angular/core';
-import { BaseFormComponent, IqserPermissionsService, LoadingService } from '@iqser/common-ui';
+import { BaseFormComponent, IconButtonComponent, IqserPermissionsService, LoadingService } from '@iqser/common-ui';
 import { GeneralSettingsService } from '@services/general-settings.service';
 import { IGeneralConfiguration } from '@red/domain';
 import { ConfigService } from '@services/config.service';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { firstValueFrom } from 'rxjs';
 import { Roles } from '@users/roles';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIf } from '@angular/common';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
 
 @Component({
     selector: 'redaction-general-config-form',
     templateUrl: './general-config-form.component.html',
+    standalone: true,
+    imports: [ReactiveFormsModule, TranslateModule, NgIf, MatSlideToggle, IconButtonComponent],
 })
 export class GeneralConfigFormComponent extends BaseFormComponent implements OnInit {
     private _initialConfiguration: IGeneralConfiguration;
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
index 3dfa5c33e..6d0470579 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
@@ -2,14 +2,17 @@ import { AfterViewInit, Component, inject, ViewChild } from '@angular/core';
 import { UserService } from '@users/user.service';
 import { GeneralConfigFormComponent } from './general-config-form/general-config-form.component';
 import { SmtpFormComponent } from './smtp-form/smtp-form.component';
-import { BaseFormComponent } from '@iqser/common-ui';
+import { BaseFormComponent, IqserListingModule } from '@iqser/common-ui';
 import { SystemPreferencesFormComponent } from './system-preferences-form/system-preferences-form.component';
 import { RouterHistoryService } from '@services/router-history.service';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-general-config-screen',
     templateUrl: './general-config-screen.component.html',
     styleUrls: ['./general-config-screen.component.scss'],
+    standalone: true,
+    imports: [IqserListingModule, GeneralConfigFormComponent, SystemPreferencesFormComponent, SmtpFormComponent, TranslateModule],
 })
 export class GeneralConfigScreenComponent extends BaseFormComponent implements AfterViewInit {
     readonly currentUser = inject(UserService).currentUser;
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.ts b/apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.ts
index 8cd62c76d..6ce6c1c74 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.ts
@@ -1,16 +1,28 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { BaseFormComponent, IconButtonTypes, IqserPermissionsService, LoadingService, Toaster } from '@iqser/common-ui';
+import {
+    BaseFormComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserPermissionsService,
+    LoadingService,
+    Toaster,
+} from '@iqser/common-ui';
 import { ISmtpConfiguration } from '@red/domain';
 import { Roles } from '@users/roles';
 import { firstValueFrom } from 'rxjs';
 import { AdminDialogService } from '../../../services/admin-dialog.service';
 import { SmtpConfigService } from '../../../services/smtp-config.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { NgIf } from '@angular/common';
 
 @Component({
     selector: 'redaction-smtp-form',
     templateUrl: './smtp-form.component.html',
+    standalone: true,
+    imports: [ReactiveFormsModule, TranslateModule, MatSlideToggle, IconButtonComponent, NgIf],
 })
 export class SmtpFormComponent extends BaseFormComponent implements OnInit {
     #initialConfiguration: ISmtpConfiguration;
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.ts b/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.ts
index 44f01f82a..a21dcfd73 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/system-preferences-form/system-preferences-form.component.ts
@@ -1,17 +1,22 @@
 import { Component } from '@angular/core';
-import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import { SystemPreferences } from '@red/domain';
-import { BaseFormComponent, IqserPermissionsService, LoadingService } from '@iqser/common-ui';
+import { BaseFormComponent, IconButtonComponent, IqserPermissionsService, LoadingService } from '@iqser/common-ui';
 import { SystemPreferencesService } from '@services/system-preferences.service';
 import { systemPreferencesTranslations } from '@translations/system-preferences-translations';
 import { Roles } from '@users/roles';
 import { KeysOf } from '@iqser/common-ui/lib/utils';
+import { NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
 
 export type ValueType = 'number' | 'string' | 'boolean';
 
 @Component({
     selector: 'redaction-system-preferences-form',
     templateUrl: './system-preferences-form.component.html',
+    standalone: true,
+    imports: [NgIf, ReactiveFormsModule, NgForOf, TranslateModule, MatSlideToggle, IconButtonComponent],
 })
 export class SystemPreferencesFormComponent extends BaseFormComponent {
     #initialConfiguration: SystemPreferences;
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 790710995..ac0a427a4 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
@@ -2,7 +2,11 @@ import { Component, inject, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     ButtonConfig,
+    CircleButtonComponent,
+    HasScrollbarDirective,
     IconButtonTypes,
+    IqserAllowDirective,
+    IqserListingModule,
     ListingComponent,
     listingProvidersFactory,
     LoadingService,
@@ -10,7 +14,7 @@ import {
     TableColumnConfig,
 } from '@iqser/common-ui';
 import { NestedFilter } from '@iqser/common-ui/lib/filtering';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { DonutChartConfig, User, UserTypes } from '@red/domain';
 import { RouterHistoryService } from '@services/router-history.service';
 import { TranslateChartService } from '@services/translate-chart.service';
@@ -21,6 +25,11 @@ import { firstValueFrom, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { userTypeChecker, userTypeFilters } from '../../../../utils';
 import { AdminDialogService } from '../../services/admin-dialog.service';
+import { UsersStatsComponent } from '../../components/users-stats/users-stats.component';
+import { AsyncPipe, NgClass, NgIf } from '@angular/common';
+import { InitialsAvatarComponent } from '@common-ui/users';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { MatIcon } from '@angular/material/icon';
 
 function configToFilter({ key, label }: DonutChartConfig) {
     return new NestedFilter({
@@ -36,6 +45,21 @@ function configToFilter({ key, label }: DonutChartConfig) {
         entitiesService: UserService,
         component: UserListingScreenComponent,
     }),
+    standalone: true,
+    imports: [
+        IqserListingModule,
+        TranslateModule,
+        UsersStatsComponent,
+        CircleButtonComponent,
+        HasScrollbarDirective,
+        NgIf,
+        AsyncPipe,
+        InitialsAvatarComponent,
+        MatSlideToggle,
+        MatIcon,
+        NgClass,
+        IqserAllowDirective,
+    ],
 })
 export class UserListingScreenComponent extends ListingComponent<User> implements OnInit {
     readonly routerHistoryService = inject(RouterHistoryService);
diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
index f627f6b78..7eb857064 100644
--- a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
@@ -35,7 +35,7 @@ type DialogType =
     | 'uploadDictionary'
     | 'configureCertificate';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class AdminDialogService extends DialogService<DialogType> {
     protected readonly _config: DialogConfig<DialogType> = {
         confirm: {

From ae01864e0d52f18147ffaafa93a294df57e6f5ec Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Fri, 14 Jun 2024 15:11:58 +0300
Subject: [PATCH 11/17] RED-9321: deleted shared-dossiers module.

---
 apps/red-ui/src/app/app.module.ts             | 10 ++-
 .../add-entity-dialog.component.ts            |  4 +-
 .../screens/audit/audit-screen.component.ts   | 19 +++--
 .../table-item/table-item.component.ts        |  3 +-
 .../entity-info/entity-info.component.ts      |  4 +-
 ...dd-edit-file-attribute-dialog.component.ts |  4 +-
 .../dossier-template-details.component.ts     |  3 +-
 .../license-screen.component.ts               |  3 +-
 .../watermarks-listing-screen.component.ts    |  5 +-
 .../admin-side-nav.component.ts               |  4 +-
 .../dossier-template-actions.component.ts     |  4 +-
 .../table-item/table-item.component.ts        |  3 +-
 .../dossier-details-stats.component.ts        |  3 +-
 .../file-attribute.component.ts               |  3 +-
 .../dossier-workload-column.component.ts      |  4 +-
 .../components/comments/comments.component.ts |  3 +-
 .../document-info/document-info.component.ts  |  3 +-
 .../edit-redaction-dialog.component.ts        |  8 +-
 .../force-annotation-dialog.component.ts      |  4 +-
 .../highlight-action-dialog.component.ts      |  4 +-
 .../remove-redaction-dialog.component.ts      |  4 +-
 .../date-column/date-column.component.ts      |  2 +-
 ...sign-reviewer-approver-dialog.component.ts | 30 ++++++-
 .../edit-dossier-attributes.component.ts      | 27 +++++-
 .../edit-dossier-dictionary.component.ts      | 19 ++++-
 ...edit-dossier-download-package.component.ts | 18 +++-
 .../edit-dossier-dialog.component.ts          | 32 +++++++-
 .../edit-dossier-team.component.ts            | 30 ++++++-
 .../edit-dossier-general-info.component.ts    | 41 +++++++++-
 .../services/file-assign.service.ts           |  2 +-
 .../shared-dossiers/shared-dossiers.module.ts | 82 -------------------
 .../donut-chart/donut-chart.component.ts      |  7 +-
 .../watermark-selector.component.ts           |  8 +-
 .../file-stats/file-stats.component.ts        |  3 +-
 .../shared/custom-date-formatting.provider.ts | 25 ++++++
 .../src/app/modules/shared/pipes/date.pipe.ts |  6 +-
 .../modules/shared/services/dialog.service.ts |  2 +-
 .../src/app/modules/shared/shared.module.ts   | 36 ++------
 .../trash-table-item.component.ts             |  3 +-
 39 files changed, 298 insertions(+), 177 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
 create mode 100644 apps/red-ui/src/app/modules/shared/custom-date-formatting.provider.ts

diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 49d997e5b..c01223cf8 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -24,13 +24,14 @@ import {
     ChevronButtonComponent,
     CircleButtonComponent,
     EmptyStateComponent,
+    HelpButtonComponent,
+    HelpModeComponent,
     HelpModeKey,
     HiddenActionDirective,
     IconButtonComponent,
     InputWithActionComponent,
     IqserAllowDirective,
     IqserDenyDirective,
-    IqserHelpModeModule,
     IqserListingModule,
     IqserLoadingModule,
     IqserTranslateModule,
@@ -69,6 +70,8 @@ import { AppComponent } from './app.component';
 import { PdfViewerModule } from './modules/pdf-viewer/pdf-viewer.module';
 import { ACTIVE_DOSSIERS_SERVICE, ARCHIVED_DOSSIERS_SERVICE } from './tokens';
 import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
+import { provideCustomDateFormatter } from '@shared/custom-date-formatting.provider';
+import { provideHelpMode } from '@common-ui/help-mode';
 
 export const appModuleFactory = (config: AppConfig) => {
     @NgModule({
@@ -104,7 +107,6 @@ export const appModuleFactory = (config: AppConfig) => {
                 existingRoleGuard: RedRoleGuard,
             }),
             CachingModule.forRoot(UI_CACHES),
-            IqserHelpModeModule.forRoot(helpModeKeys as HelpModeKey[]),
             PdfViewerModule,
             ToastrModule.forRoot({
                 closeButton: true,
@@ -187,6 +189,8 @@ export const appModuleFactory = (config: AppConfig) => {
             MatDividerModule,
             ChevronButtonComponent,
             InitialsAvatarComponent,
+            HelpModeComponent,
+            HelpButtonComponent,
         ],
         providers: [
             {
@@ -250,6 +254,8 @@ export const appModuleFactory = (config: AppConfig) => {
             },
             BaseDatePipe,
             DatePipe,
+            ...provideCustomDateFormatter(),
+            ...provideHelpMode(helpModeKeys as HelpModeKey[]),
         ],
         bootstrap: [AppComponent],
     })
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.ts
index 8a0c01ec1..568c41a13 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-entity-dialog/add-entity-dialog.component.ts
@@ -4,9 +4,9 @@ import {
     BaseDialogComponent,
     CircleButtonComponent,
     getConfig,
+    HelpButtonComponent,
     IconButtonComponent,
     IconButtonTypes,
-    IqserHelpModeModule,
 } from '@iqser/common-ui';
 import { AddEditEntityComponent } from '@shared/components/add-edit-entity/add-edit-entity.component';
 import { TranslateModule } from '@ngx-translate/core';
@@ -20,7 +20,7 @@ interface DialogData {
     templateUrl: './add-entity-dialog.component.html',
     styleUrls: ['./add-entity-dialog.component.scss'],
     standalone: true,
-    imports: [AddEditEntityComponent, TranslateModule, IconButtonComponent, IqserHelpModeModule, NgIf, CircleButtonComponent],
+    imports: [AddEditEntityComponent, TranslateModule, IconButtonComponent, NgIf, CircleButtonComponent, HelpButtonComponent],
 })
 export class AddEntityDialogComponent extends BaseDialogComponent {
     @ViewChild(AddEditEntityComponent, { static: true }) private readonly _addEditEntityComponent: AddEditEntityComponent;
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 424f8d01a..9ee61a43e 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
@@ -25,9 +25,10 @@ import { TranslateModule } from '@ngx-translate/core';
 import { PaginationComponent } from '@common-ui/pagination';
 import { MatFormField, MatSuffix } from '@angular/material/form-field';
 import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
-import { AsyncPipe, DatePipe, NgForOf, NgIf } from '@angular/common';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatIcon } from '@angular/material/icon';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 const PAGE_SIZE = 50;
 
@@ -63,7 +64,7 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnI
     readonly ALL_CATEGORIES = 'allCategories';
     readonly ALL_USERS = _('audit-screen.all-users');
     readonly translations = auditCategoriesTranslations;
-    readonly form: UntypedFormGroup = this._getForm();
+    readonly form: UntypedFormGroup = this.#getForm();
     readonly routerHistoryService = inject(RouterHistoryService);
     readonly permissionsService = inject(IqserPermissionsService);
     readonly roles = Roles;
@@ -96,17 +97,17 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnI
     }
 
     async pageChanged(page: number) {
-        await this._fetchData(page);
+        await this.#fetchData(page);
     }
 
     async ngOnInit() {
         this.sortingService.setSortingOption({ column: 'recordDate', order: 'desc' });
-        await this._fetchData();
+        await this.#fetchData();
     }
 
     async filterChange() {
-        if (!this._updateDateFilters(this.form.value)) {
-            await this._fetchData();
+        if (!this.#updateDateFilters(this.form.value)) {
+            await this.#fetchData();
         }
     }
 
@@ -114,7 +115,7 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnI
         this._dialogService.openDialog('auditInfo', { auditEntry: log });
     }
 
-    private _getForm(): UntypedFormGroup {
+    #getForm(): UntypedFormGroup {
         return this._formBuilder.group({
             category: [this.ALL_CATEGORIES],
             userId: [this.ALL_USERS],
@@ -123,7 +124,7 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnI
         });
     }
 
-    private _updateDateFilters(value): boolean {
+    #updateDateFilters(value): boolean {
         if (applyIntervalConstraints(value, this._previousFrom, this._previousTo, this.form, 'from', 'to')) {
             return true;
         }
@@ -133,7 +134,7 @@ export class AuditScreenComponent extends ListingComponent<Audit> implements OnI
         return false;
     }
 
-    private async _fetchData(page?: number) {
+    async #fetchData(page?: number) {
         this._loadingService.start();
         const promises = [];
         const category = this.form.get('category').value;
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts
index fb26a773c..59ed7e1c1 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/table-item/table-item.component.ts
@@ -5,11 +5,12 @@ import { DossierTemplateStatsService } from '@services/entity-services/dossier-t
 import { switchMap } from 'rxjs/operators';
 import { dossierTemplateStatusTranslations } from '@translations/dossier-template-status-translations';
 import { MatTooltip } from '@angular/material/tooltip';
-import { AsyncPipe, DatePipe, NgIf } from '@angular/common';
+import { AsyncPipe, NgIf } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
 import { DossierTemplateActionsComponent } from '../../../shared/components/dossier-template-actions/dossier-template-actions.component';
 import { InitialsAvatarComponent } from '@common-ui/users';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 @Component({
     selector: 'redaction-table-item [dossierTemplate]',
diff --git a/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts b/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts
index 7577e8905..0942d7891 100644
--- a/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, HostListener, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { getConfig, HasScrollbarDirective, IconButtonComponent, IconButtonTypes, IqserHelpModeModule } from '@iqser/common-ui';
+import { getConfig, HasScrollbarDirective, HelpButtonComponent, IconButtonComponent, IconButtonTypes } from '@iqser/common-ui';
 import { IqserEventTarget } from '@iqser/common-ui/lib/utils';
 import { Dictionary, DOSSIER_TEMPLATE_ID, ENTITY_TYPE } from '@red/domain';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
@@ -25,8 +25,8 @@ import { TranslateModule } from '@ngx-translate/core';
         TranslateModule,
         AsyncPipe,
         IconButtonComponent,
-        IqserHelpModeModule,
         AddEditEntityComponent,
+        HelpButtonComponent,
     ],
 })
 export class EntityInfoComponent {
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
index 95e89df51..bc4ef6307 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts
@@ -3,7 +3,7 @@ import { ReactiveFormsModule, Validators } from '@angular/forms';
 import { FileAttributeConfigTypes, IFileAttributeConfig } from '@red/domain';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { fileAttributeTypesTranslations } from '@translations/file-attribute-types-translations';
-import { BaseDialogComponent, CircleButtonComponent, getConfig, IconButtonComponent, IqserHelpModeModule } from '@iqser/common-ui';
+import { BaseDialogComponent, CircleButtonComponent, getConfig, HelpButtonComponent, IconButtonComponent } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
@@ -34,8 +34,8 @@ export interface AddEditFileAttributeDialogData {
         MatTooltipModule,
         IconButtonComponent,
         CircleButtonComponent,
-        IqserHelpModeModule,
         NgIf,
+        HelpButtonComponent,
     ],
 })
 export class AddEditFileAttributeDialogComponent extends BaseDialogComponent {
diff --git a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts
index 125e7f4b3..a6dab16e7 100644
--- a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-details/dossier-template-details.component.ts
@@ -4,10 +4,11 @@ import { type DossierTemplate, type DossierTemplateStats } from '@red/domain';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { DossierTemplateStatsService } from '@services/entity-services/dossier-template-stats.service';
 import { dossierTemplateStatusTranslations } from '@translations/dossier-template-status-translations';
-import { AsyncPipe, DatePipe, NgIf } from '@angular/common';
+import { AsyncPipe, NgIf } from '@angular/common';
 import { MatIcon } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
 import { InitialsAvatarComponent } from '@common-ui/users';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 interface Context {
     readonly dossierTemplate: DossierTemplate;
diff --git a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
index 00dc524f5..02e22f51b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.ts
@@ -6,11 +6,12 @@ import { LicenseService } from '@services/license.service';
 import { RouterHistoryService } from '@services/router-history.service';
 import { Roles } from '@users/roles';
 import { TranslateModule } from '@ngx-translate/core';
-import { AsyncPipe, DatePipe, NgIf } from '@angular/common';
+import { AsyncPipe, NgIf } from '@angular/common';
 import { LicenseSelectComponent } from '../components/license-select/license-select.component';
 import { LicensePageUsageComponent } from '../components/license-page-usage/license-page-usage.component';
 import { LicenseAnalysisCapacityUsageComponent } from '../components/license-analysis-capacity-usage/license-analysis-capacity-usage.component';
 import { LicenseRetentionCapacityComponent } from '../components/license-retention-capacity-usage/license-retention-capacity.component';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 @Component({
     templateUrl: './license-screen.component.html',
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts
index 76ea73e72..9ae234ca6 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermarks-listing/watermarks-listing-screen.component.ts
@@ -24,7 +24,8 @@ import { AdminDialogService } from '../../../services/admin-dialog.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterLink } from '@angular/router';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
-import { AsyncPipe, DatePipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 @Component({
     templateUrl: './watermarks-listing-screen.component.html',
@@ -39,9 +40,9 @@ import { AsyncPipe, DatePipe } from '@angular/common';
         RouterLink,
         MatSlideToggle,
         InitialsAvatarComponent,
-        DatePipe,
         CircleButtonComponent,
         AsyncPipe,
+        DatePipe,
     ],
 })
 export class WatermarksListingScreenComponent extends ListingComponent<Watermark> implements OnInit {
diff --git a/apps/red-ui/src/app/modules/admin/shared/components/admin-side-nav/admin-side-nav.component.ts b/apps/red-ui/src/app/modules/admin/shared/components/admin-side-nav/admin-side-nav.component.ts
index 83620ad86..721c2b99c 100644
--- a/apps/red-ui/src/app/modules/admin/shared/components/admin-side-nav/admin-side-nav.component.ts
+++ b/apps/red-ui/src/app/modules/admin/shared/components/admin-side-nav/admin-side-nav.component.ts
@@ -2,7 +2,7 @@ import { NgForOf, NgIf } from '@angular/common';
 import { Component, HostBinding, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, RouterLink, RouterLinkActive } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { getConfig, IqserHelpModeModule, IqserPermissionsService, isIqserDevMode } from '@iqser/common-ui';
+import { getConfig, IqserPermissionsService, isIqserDevMode } from '@iqser/common-ui';
 import { SideNavComponent } from '@iqser/common-ui/lib/shared';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { TranslateModule } from '@ngx-translate/core';
@@ -22,7 +22,7 @@ interface NavItem {
     templateUrl: './admin-side-nav.component.html',
     styleUrls: ['./admin-side-nav.component.scss'],
     standalone: true,
-    imports: [TranslateModule, NgIf, IqserHelpModeModule, RouterLink, RouterLinkActive, NgForOf, SideNavComponent],
+    imports: [TranslateModule, NgIf, RouterLink, RouterLinkActive, NgForOf, SideNavComponent],
 })
 export class AdminSideNavComponent implements OnInit {
     readonly isIqserDevMode = isIqserDevMode();
diff --git a/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.ts b/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.ts
index 7888afacb..3ca60b7fd 100644
--- a/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.ts
+++ b/apps/red-ui/src/app/modules/admin/shared/components/dossier-template-actions/dossier-template-actions.component.ts
@@ -1,7 +1,7 @@
 import { NgIf } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import { CircleButtonComponent, IqserHelpModeModule, LoadingService } from '@iqser/common-ui';
+import { CircleButtonComponent, LoadingService } from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { TranslateModule } from '@ngx-translate/core';
 import { DOSSIER_TEMPLATE_ID, DossierTemplate, type User } from '@red/domain';
@@ -14,7 +14,7 @@ import { AdminDialogService } from '../../../services/admin-dialog.service';
     templateUrl: './dossier-template-actions.component.html',
     styleUrls: ['./dossier-template-actions.component.scss'],
     standalone: true,
-    imports: [NgIf, IqserHelpModeModule, CircleButtonComponent, TranslateModule, RouterLink],
+    imports: [NgIf, CircleButtonComponent, TranslateModule, RouterLink],
 })
 export class DossierTemplateActionsComponent implements OnInit {
     @Input() dossierTemplateId: string;
diff --git a/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.ts
index 9e5bc8923..2d56c16fe 100644
--- a/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/archive/components/table-item/table-item.component.ts
@@ -7,7 +7,8 @@ import { DossierNameColumnComponent } from '@shared/components/dossier-name-colu
 import { InitialsAvatarComponent } from '@common-ui/users';
 import { DossierStateComponent } from '@shared/components/dossier-state/dossier-state.component';
 import { DossiersListingActionsComponent } from '../../../shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component';
-import { AsyncPipe, DatePipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 @Component({
     selector: 'redaction-table-item [dossier]',
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
index b4ed970ba..98c6d3579 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
@@ -7,8 +7,9 @@ import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
 import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
 import { getConfig } from '@iqser/common-ui';
 import { MatIcon } from '@angular/material/icon';
-import { AsyncPipe, DatePipe, DecimalPipe, NgForOf, NgIf } from '@angular/common';
+import { AsyncPipe, DecimalPipe, NgForOf, NgIf } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 @Component({
     selector: 'redaction-dossier-details-stats',
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
index 9346306ed..a69cc33ab 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/file-attribute/file-attribute.component.ts
@@ -19,10 +19,11 @@ import { NavigationEnd, Router } from '@angular/router';
 import { filter, map, tap } from 'rxjs/operators';
 import { ConfigService } from '../../config.service';
 import { Debounce } from '@iqser/common-ui/lib/utils';
-import { AsyncPipe, DatePipe, NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { AsyncPipe, NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 @Component({
     selector: 'redaction-file-attribute',
diff --git a/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts b/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts
index 77d83c4b1..abf8db8ad 100644
--- a/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts
+++ b/apps/red-ui/src/app/modules/dossiers-listing/components/dossier-workload-column/dossier-workload-column.component.ts
@@ -3,7 +3,7 @@ import { DefaultColorType, Dossier, DossierStats } from '@red/domain';
 import { DefaultColorsService } from '@services/entity-services/default-colors.service';
 import { BehaviorSubject, Observable, switchMap } from 'rxjs';
 import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
-import { AsyncPipe } from '@angular/common';
+import { AsyncPipe, NgIf } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
@@ -12,7 +12,7 @@ import { TranslateModule } from '@ngx-translate/core';
     styleUrls: ['./dossier-workload-column.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [AnnotationIconComponent, AsyncPipe, TranslateModule],
+    imports: [AnnotationIconComponent, AsyncPipe, TranslateModule, NgIf],
 })
 export class DossierWorkloadColumnComponent implements OnChanges {
     readonly #dossierTemplateId$ = new BehaviorSubject<string>(null);
diff --git a/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts b/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts
index 397648169..4e596eea3 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/comments/comments.component.ts
@@ -8,10 +8,11 @@ import { CommentsApiService } from '@services/comments-api.service';
 import { PermissionsService } from '@services/permissions.service';
 import { NGXLogger } from 'ngx-logger';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
-import { DatePipe, NgForOf, NgIf } from '@angular/common';
+import { NgForOf, NgIf } from '@angular/common';
 import { MatTooltip } from '@angular/material/tooltip';
 import { NamePipe } from '@common-ui/users/name.pipe';
 import { TranslateModule } from '@ngx-translate/core';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 @Component({
     selector: 'redaction-comments',
diff --git a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
index c5e4f7495..fe3d55f0c 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/document-info/document-info.component.ts
@@ -10,9 +10,10 @@ import { ContextComponent } from '@iqser/common-ui/lib/utils';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { setLocalStorageDataByFileId } from '@utils/local-storage';
 import { CircleButtonComponent, HasScrollbarDirective } from '@iqser/common-ui';
-import { DatePipe, NgForOf, NgIf } from '@angular/common';
+import { NgForOf, NgIf } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatIcon } from '@angular/material/icon';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 interface FileAttribute {
     label: string;
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
index 614e4d7b9..714aa1db4 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
@@ -3,11 +3,12 @@ import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import {
     CircleButtonComponent,
     DetailsRadioOption,
+    HasScrollbarDirective,
+    HelpButtonComponent,
     IconButtonComponent,
     IconButtonTypes,
     IqserDenyDirective,
     IqserDialogComponent,
-    IqserHelpModeModule,
 } from '@iqser/common-ui';
 import { Dictionary, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@@ -28,6 +29,7 @@ import { MatFormField } from '@angular/material/form-field';
 import { NgForOf, NgIf } from '@angular/common';
 import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { MatTooltip } from '@angular/material/tooltip';
+import { MatDialogClose } from '@angular/material/dialog';
 
 interface TypeSelectOptions {
     type: string;
@@ -51,9 +53,11 @@ interface TypeSelectOptions {
         NgForOf,
         MatTooltip,
         IconButtonComponent,
-        IqserHelpModeModule,
         IqserDenyDirective,
         CircleButtonComponent,
+        HelpButtonComponent,
+        MatDialogClose,
+        HasScrollbarDirective,
     ],
 })
 export class EditRedactionDialogComponent
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts
index fc793c341..28630826d 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/force-redaction-dialog/force-annotation-dialog.component.ts
@@ -6,9 +6,9 @@ import {
     CircleButtonComponent,
     getConfig,
     HasScrollbarDirective,
+    HelpButtonComponent,
     IconButtonComponent,
     IqserDenyDirective,
-    IqserHelpModeModule,
 } from '@iqser/common-ui';
 import { JustificationsService } from '@services/entity-services/justifications.service';
 import { Dossier, ILegalBasisChangeRequest } from '@red/domain';
@@ -51,10 +51,10 @@ const DOCUMINE_LEGAL_BASIS = 'n-a.';
         HasScrollbarDirective,
         TranslateModule,
         IconButtonComponent,
-        IqserHelpModeModule,
         IqserDenyDirective,
         CircleButtonComponent,
         NgForOf,
+        HelpButtonComponent,
     ],
 })
 export class ForceAnnotationDialogComponent extends BaseDialogComponent implements OnInit {
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts
index 039489df1..1ba594f55 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/highlight-action-dialog/highlight-action-dialog.component.ts
@@ -7,9 +7,9 @@ import {
     CircleButtonComponent,
     DetailsRadioComponent,
     DetailsRadioOption,
+    HelpButtonComponent,
     IconButtonComponent,
     IqserDenyDirective,
-    IqserHelpModeModule,
 } from '@iqser/common-ui';
 import { EarmarksService } from '@services/files/earmarks.service';
 import { firstValueFrom } from 'rxjs';
@@ -42,10 +42,10 @@ export interface HighlightActionData {
         MatCheckbox,
         TranslateModule,
         IconButtonComponent,
-        IqserHelpModeModule,
         IqserDenyDirective,
         CircleButtonComponent,
         MatDialogClose,
+        HelpButtonComponent,
     ],
 })
 export class HighlightActionDialogComponent extends BaseDialogComponent {
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
index 681ee4048..c6eed1d89 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
@@ -5,11 +5,11 @@ import {
     DetailsRadioComponent,
     DetailsRadioOption,
     HasScrollbarDirective,
+    HelpButtonComponent,
     IconButtonComponent,
     IconButtonTypes,
     IqserDenyDirective,
     IqserDialogComponent,
-    IqserHelpModeModule,
 } from '@iqser/common-ui';
 import { getRemoveRedactionOptions, RemoveRedactionOption, RemoveRedactionOptions } from '../../utils/dialog-options';
 import { RemoveRedactionData, RemoveRedactionResult } from '../../utils/dialog-types';
@@ -39,11 +39,11 @@ import { MatDialogClose } from '@angular/material/dialog';
         SelectedAnnotationsTableComponent,
         DetailsRadioComponent,
         IconButtonComponent,
-        IqserHelpModeModule,
         CircleButtonComponent,
         HasScrollbarDirective,
         MatDialogClose,
         IqserDenyDirective,
+        HelpButtonComponent,
     ],
 })
 export class RemoveRedactionDialogComponent extends IqserDialogComponent<
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/components/date-column/date-column.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/components/date-column/date-column.component.ts
index 7b652fb01..2e0e44152 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/components/date-column/date-column.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/components/date-column/date-column.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { DatePipe } from '@angular/common';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 @Component({
     selector: 'redaction-date-column [date]',
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
index 31554c994..d98700c9a 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
@@ -1,7 +1,14 @@
 import { Component } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { IconButtonTypes, IqserDialogComponent, LoadingService, Toaster } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDialogComponent,
+    LoadingService,
+    Toaster,
+} from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { File, User, WorkflowFileStatus, WorkflowFileStatuses } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@@ -9,6 +16,12 @@ import { FilesService } from '@services/files/files.service';
 import { PermissionsService } from '@services/permissions.service';
 import { UserService } from '@users/user.service';
 import { moveElementInArray } from '@utils/functions';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { NgForOf } from '@angular/common';
+import { NamePipe } from '@common-ui/users/name.pipe';
+import { MatDialogClose } from '@angular/material/dialog';
 
 class DialogData {
     targetStatus: WorkflowFileStatus;
@@ -20,6 +33,19 @@ class DialogData {
 
 @Component({
     templateUrl: './assign-reviewer-approver-dialog.component.html',
+    standalone: true,
+    imports: [
+        TranslateModule,
+        ReactiveFormsModule,
+        MatFormField,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        NamePipe,
+        IconButtonComponent,
+        MatDialogClose,
+        CircleButtonComponent,
+    ],
 })
 export class AssignReviewerApproverDialogComponent extends IqserDialogComponent<
     AssignReviewerApproverDialogComponent,
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
index b03686c6b..b5dec159b 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
@@ -1,18 +1,41 @@
 import { Component, ElementRef, Input, OnInit, QueryList, ViewChildren } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { IconButtonTypes, LoadingService, Toaster } from '@iqser/common-ui';
+import {
+    CircleButtonComponent,
+    DynamicInputComponent,
+    EmptyStateComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    LoadingService,
+    Toaster,
+} from '@iqser/common-ui';
 import { Dossier, DossierAttributeConfigType, DossierAttributeConfigTypes, DossierAttributeWithValue } from '@red/domain';
 import { DossierAttributesService } from '@services/entity-services/dossier-attributes.service';
 import { PermissionsService } from '@services/permissions.service';
 import dayjs from 'dayjs';
 import { firstValueFrom } from 'rxjs';
 import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
+import { NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { SnakeCasePipe } from '@common-ui/pipes/snake-case.pipe';
 
 @Component({
     selector: 'redaction-edit-dossier-attributes',
     templateUrl: './edit-dossier-attributes.component.html',
     styleUrls: ['./edit-dossier-attributes.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        NgIf,
+        TranslateModule,
+        EmptyStateComponent,
+        DynamicInputComponent,
+        NgForOf,
+        IconButtonComponent,
+        SnakeCasePipe,
+        CircleButtonComponent,
+    ],
 })
 export class EditDossierAttributesComponent implements EditDossierSectionInterface, OnInit {
     @ViewChildren('fileInput') private _fileInputs: QueryList<ElementRef>;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts
index d517176d8..fd125866d 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { IqserDialog, LoadingService } from '@iqser/common-ui';
+import { CircleButtonComponent, IconButtonComponent, IqserDialog, LoadingService } from '@iqser/common-ui';
 import { List } from '@iqser/common-ui/lib/utils';
 import { Dictionary, DictionaryEntryType, DictionaryEntryTypes, Dossier } from '@red/domain';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
@@ -8,11 +8,28 @@ import { DictionaryManagerComponent } from '@shared/components/dictionary-manage
 import { firstValueFrom } from 'rxjs';
 import { EditDossierSaveResult } from '../edit-dossier-section.interface';
 import { EditDictionaryDialogComponent } from '../../edit-dictionary-dialog/edit-dictionary-dialog.component';
+import { NgForOf, NgIf } from '@angular/common';
+import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'redaction-edit-dossier-dictionary',
     templateUrl: './edit-dossier-dictionary.component.html',
     styleUrls: ['./edit-dossier-dictionary.component.scss'],
+    standalone: true,
+    imports: [
+        NgForOf,
+        AnnotationIconComponent,
+        MatTooltip,
+        MatIcon,
+        CircleButtonComponent,
+        NgIf,
+        TranslateModule,
+        IconButtonComponent,
+        DictionaryManagerComponent,
+    ],
 })
 export class EditDossierDictionaryComponent implements OnInit {
     @Input() dossier: Dossier;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts
index c8c1d00a3..ce7c1d58c 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Dossier, DownloadFileType, IReportTemplate } from '@red/domain';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
 import { downloadTypesTranslations } from '@translations/download-types-translations';
 import { ReportTemplateService } from '@services/report-template.service';
@@ -10,6 +10,11 @@ import { DossiersService } from '@services/dossiers/dossiers.service';
 import { WatermarksMapService } from '@services/entity-services/watermarks-map.service';
 import { ContextComponent, shareLast } from '@iqser/common-ui/lib/utils';
 import { Roles } from '@users/roles';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { SelectComponent } from '@shared/components/select/select.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { WatermarkSelectorComponent } from '@shared/components/dossier-watermark-selector/watermark-selector.component';
+import { IqserAllowDirective, IqserDenyDirective } from '@iqser/common-ui';
 
 interface EditDossierDownloadPackageContext {
     existsWatermarks: boolean;
@@ -19,6 +24,17 @@ interface EditDossierDownloadPackageContext {
     selector: 'redaction-edit-dossier-download-package',
     templateUrl: './edit-dossier-download-package.component.html',
     styleUrls: ['./edit-dossier-download-package.component.scss'],
+    standalone: true,
+    imports: [
+        AsyncPipe,
+        NgIf,
+        SelectComponent,
+        ReactiveFormsModule,
+        TranslateModule,
+        WatermarkSelectorComponent,
+        IqserAllowDirective,
+        IqserDenyDirective,
+    ],
 })
 export class EditDossierDownloadPackageComponent
     extends ContextComponent<EditDossierDownloadPackageContext>
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
index 2fe15fd2b..7dae7a2d2 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
@@ -4,7 +4,16 @@ import { Dossier } from '@red/domain';
 import { EditDossierGeneralInfoComponent } from './general-info/edit-dossier-general-info.component';
 import { EditDossierDownloadPackageComponent } from './download-package/edit-dossier-download-package.component';
 import { EditDossierSectionInterface } from './edit-dossier-section.interface';
-import { BaseDialogComponent, ConfirmOptions, IconButtonTypes, SaveOptions } from '@iqser/common-ui';
+import {
+    BaseDialogComponent,
+    CircleButtonComponent,
+    ConfirmOptions,
+    HelpButtonComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDenyDirective,
+    SaveOptions,
+} from '@iqser/common-ui';
 import { EditDossierDictionaryComponent } from './dictionary/edit-dossier-dictionary.component';
 import { EditDossierAttributesComponent } from './attributes/edit-dossier-attributes.component';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
@@ -15,6 +24,10 @@ import { dossiersServiceProvider } from '@services/entity-services/dossiers.serv
 import { Roles } from '@users/roles';
 import { ConfigService } from '@services/config.service';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { TranslateModule } from '@ngx-translate/core';
+import { SideNavComponent } from '@common-ui/shared';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 type Section = 'dossierInfo' | 'downloadPackage' | 'dossierDictionary' | 'members' | 'dossierAttributes';
 
@@ -31,6 +44,23 @@ interface NavItem {
     templateUrl: './edit-dossier-dialog.component.html',
     styleUrls: ['./edit-dossier-dialog.component.scss'],
     providers: [dossiersServiceProvider],
+    standalone: true,
+    imports: [
+        TranslateModule,
+        SideNavComponent,
+        NgForOf,
+        NgIf,
+        MatIcon,
+        EditDossierGeneralInfoComponent,
+        EditDossierDownloadPackageComponent,
+        EditDossierDictionaryComponent,
+        EditDossierTeamComponent,
+        EditDossierAttributesComponent,
+        IconButtonComponent,
+        HelpButtonComponent,
+        IqserDenyDirective,
+        CircleButtonComponent,
+    ],
 })
 export class EditDossierDialogComponent extends BaseDialogComponent implements AfterViewInit {
     readonly roles = Roles;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts
index 2d330d904..8bc3dc239 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { getConfig } from '@iqser/common-ui';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { getConfig, InputWithActionComponent, RoundCheckboxComponent, StopPropagationDirective } from '@iqser/common-ui';
 import { Debounce } from '@iqser/common-ui/lib/utils';
 import { Dossier, IDossierRequest } from '@red/domain';
 import { DossiersService } from '@services/dossiers/dossiers.service';
@@ -11,12 +11,38 @@ import { compareLists } from '@utils/functions';
 import { firstValueFrom } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { NamePipe } from '@common-ui/users/name.pipe';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { TeamMembersComponent } from '@shared/components/team-members/team-members.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { InitialsAvatarComponent } from '@common-ui/users';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'redaction-edit-dossier-team',
     templateUrl: './edit-dossier-team.component.html',
     styleUrls: ['./edit-dossier-team.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        MatFormField,
+        MatSelect,
+        MatOption,
+        NamePipe,
+        NgForOf,
+        NgIf,
+        AsyncPipe,
+        TeamMembersComponent,
+        TranslateModule,
+        InputWithActionComponent,
+        InitialsAvatarComponent,
+        StopPropagationDirective,
+        RoundCheckboxComponent,
+        MatIcon,
+    ],
 })
 export class EditDossierTeamComponent implements EditDossierSectionInterface, OnChanges {
     form = this.#getForm();
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index 1894b809a..9eff96343 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Dossier, DOSSIER_TEMPLATE_ID, IDossierRequest, IDossierTemplate } from '@red/domain';
 import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
 import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
@@ -7,24 +7,59 @@ import { PermissionsService } from '@services/permissions.service';
 import { Router } from '@angular/router';
 import { MatDialogRef } from '@angular/material/dialog';
 import { EditDossierDialogComponent } from '../edit-dossier-dialog.component';
-import { ConfirmOptions, IconButtonTypes, IConfirmationDialogData, LoadingService, TitleColors, Toaster } from '@iqser/common-ui';
+import {
+    ConfirmOptions,
+    HasScrollbarDirective,
+    IconButtonComponent,
+    IconButtonTypes,
+    IConfirmationDialogData,
+    LoadingService,
+    TitleColors,
+    Toaster,
+} from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
 import { firstValueFrom } from 'rxjs';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { DossiersService } from '@services/dossiers/dossiers.service';
 import { TrashService } from '@services/entity-services/trash.service';
 import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.service';
 import { DossierStatesMapService } from '@services/entity-services/dossier-states-map.service';
 import dayjs from 'dayjs';
 import { dateWithoutTime } from '@utils/functions';
+import { MatFormField, MatSuffix } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
+import { SmallChipComponent } from '@common-ui/shared';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'redaction-edit-dossier-general-info',
     templateUrl: './edit-dossier-general-info.component.html',
     styleUrls: ['./edit-dossier-general-info.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        MatFormField,
+        TranslateModule,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        MatTooltip,
+        HasScrollbarDirective,
+        SmallChipComponent,
+        MatCheckbox,
+        MatDatepickerModule,
+        MatIcon,
+        MatSuffix,
+        IconButtonComponent,
+        NgIf,
+    ],
 })
 export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSectionInterface {
     @Input() dossier: Dossier;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/services/file-assign.service.ts b/apps/red-ui/src/app/modules/shared-dossiers/services/file-assign.service.ts
index 75f0c3fcb..b5f106d0d 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/services/file-assign.service.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/services/file-assign.service.ts
@@ -11,7 +11,7 @@ import { DossiersDialogService } from './dossiers-dialog.service';
 
 const atLeastOneAssignee = (files: File[]) => files.reduce((acc, fs) => acc || !!fs.assignee, false);
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class FileAssignService {
     readonly currentUser = getCurrentUser<User>();
 
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts b/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
deleted file mode 100644
index a3ba94d00..000000000
--- a/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SharedModule } from '@shared/shared.module';
-import { EditDossierDialogComponent } from './dialogs/edit-dossier-dialog/edit-dossier-dialog.component';
-import { AssignReviewerApproverDialogComponent } from './dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component';
-import { EditDossierGeneralInfoComponent } from './dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component';
-import { EditDossierDownloadPackageComponent } from './dialogs/edit-dossier-dialog/download-package/edit-dossier-download-package.component';
-import { EditDossierDictionaryComponent } from './dialogs/edit-dossier-dialog/dictionary/edit-dossier-dictionary.component';
-import { EditDossierAttributesComponent } from './dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component';
-import { EditDossierTeamComponent } from './dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component';
-import { FileAssignService } from './services/file-assign.service';
-import {
-    CircleButtonComponent,
-    DynamicInputComponent,
-    EmptyStateComponent,
-    HasScrollbarDirective,
-    IconButtonComponent,
-    InputWithActionComponent,
-    IqserAllowDirective,
-    IqserDenyDirective,
-    IqserHelpModeModule,
-    RoundCheckboxComponent,
-    StopPropagationDirective,
-} from '@iqser/common-ui';
-import { TranslateModule } from '@ngx-translate/core';
-import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
-import { SideNavComponent, SmallChipComponent, StatusBarComponent } from '@iqser/common-ui/lib/shared';
-import { SelectComponent } from '@shared/components/select/select.component';
-import { SnakeCasePipe } from '@common-ui/pipes/snake-case.pipe';
-import { EditDictionaryDialogComponent } from './dialogs/edit-dictionary-dialog/edit-dictionary-dialog.component';
-import { TeamMembersComponent } from '@shared/components/team-members/team-members.component';
-import { LongPressDirective } from '@shared/directives/long-press.directive';
-import { FileDownloadBtnComponent } from '@shared/components/buttons/file-download-btn/file-download-btn.component';
-import { AnnotationIconComponent } from '@shared/components/annotation-icon/annotation-icon.component';
-import { NamePipe } from '@common-ui/users/name.pipe';
-import { DictionaryManagerComponent } from '@shared/components/dictionary-manager/dictionary-manager.component';
-
-const components = [
-    EditDossierGeneralInfoComponent,
-    EditDossierDownloadPackageComponent,
-    EditDossierDictionaryComponent,
-    EditDossierAttributesComponent,
-    EditDossierTeamComponent,
-];
-const dialogs = [EditDossierDialogComponent, AssignReviewerApproverDialogComponent];
-
-@NgModule({
-    declarations: [...components, ...dialogs],
-    exports: [...components, ...dialogs],
-    providers: [FileAssignService],
-    imports: [
-        CommonModule,
-        SharedModule,
-        IqserHelpModeModule,
-        IqserUsersModule,
-        TranslateModule,
-        IconButtonComponent,
-        CircleButtonComponent,
-        EmptyStateComponent,
-        SmallChipComponent,
-        StatusBarComponent,
-        SideNavComponent,
-        StopPropagationDirective,
-        HasScrollbarDirective,
-        RoundCheckboxComponent,
-        InputWithActionComponent,
-        DynamicInputComponent,
-        IqserAllowDirective,
-        IqserDenyDirective,
-        SelectComponent,
-        SnakeCasePipe,
-        EditDictionaryDialogComponent,
-        TeamMembersComponent,
-        LongPressDirective,
-        FileDownloadBtnComponent,
-        AnnotationIconComponent,
-        InitialsAvatarComponent,
-        NamePipe,
-        DictionaryManagerComponent,
-    ],
-})
-export class SharedDossiersModule {}
diff --git a/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.ts b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.ts
index e2925e41d..00435a9e5 100644
--- a/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/donut-chart/donut-chart.component.ts
@@ -1,6 +1,5 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output, TemplateRef } from '@angular/core';
 import { DonutChartConfig } from '@red/domain';
-import { IqserHelpModeModule } from '@iqser/common-ui';
 import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
@@ -14,7 +13,7 @@ import { StatusBarComponent } from '@iqser/common-ui/lib/shared';
     templateUrl: './donut-chart.component.html',
     styleUrls: ['./donut-chart.component.scss'],
     standalone: true,
-    imports: [NgForOf, NgIf, MatSelectModule, IqserHelpModeModule, StatusBarComponent, AsyncPipe, NgTemplateOutlet],
+    imports: [NgForOf, NgIf, MatSelectModule, StatusBarComponent, AsyncPipe, NgTemplateOutlet],
 })
 export class DonutChartComponent implements OnChanges, OnInit {
     @Input() subtitles: string[] = [];
@@ -110,8 +109,8 @@ export class DonutChartComponent implements OnChanges, OnInit {
         return this.totalType === 'simpleLabel'
             ? `${label}`
             : this.totalType === 'sum'
-            ? `${this.getFormattedValue(value)} ${label}`
-            : `${label} (${this.getFormattedValue(value)} ${this.counterText})`;
+              ? `${this.getFormattedValue(value)} ${label}`
+              : `${label} (${this.getFormattedValue(value)} ${this.counterText})`;
     }
 
     selectValue(key: string): void {
diff --git a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts
index 14b47c44d..8d5039a01 100644
--- a/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dossier-watermark-selector/watermark-selector.component.ts
@@ -5,8 +5,12 @@ import { filter, map, tap } from 'rxjs/operators';
 import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Watermark } from '@red/domain';
 import { WatermarksMapService } from '@services/entity-services/watermarks-map.service';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { shareLast } from '@iqser/common-ui/lib/utils';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'redaction-watermark-selector [dossierTemplateId] [label]',
@@ -25,6 +29,8 @@ import { shareLast } from '@iqser/common-ui/lib/utils';
             useExisting: WatermarkSelectorComponent,
         },
     ],
+    standalone: true,
+    imports: [NgIf, AsyncPipe, MatCheckbox, MatFormField, MatSelectTrigger, MatSelect, MatIcon, MatOption, NgForOf],
 })
 export class WatermarkSelectorComponent extends FormFieldComponent<number> implements OnChanges {
     #watermarks: Watermark[] = [];
diff --git a/apps/red-ui/src/app/modules/shared/components/file-stats/file-stats.component.ts b/apps/red-ui/src/app/modules/shared/components/file-stats/file-stats.component.ts
index 7e2e34aed..68ccc8e60 100644
--- a/apps/red-ui/src/app/modules/shared/components/file-stats/file-stats.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/file-stats/file-stats.component.ts
@@ -1,8 +1,9 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
-import { DatePipe, NgIf } from '@angular/common';
+import { NgIf } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 @Component({
     selector: 'redaction-file-stats',
diff --git a/apps/red-ui/src/app/modules/shared/custom-date-formatting.provider.ts b/apps/red-ui/src/app/modules/shared/custom-date-formatting.provider.ts
new file mode 100644
index 000000000..8ad493936
--- /dev/null
+++ b/apps/red-ui/src/app/modules/shared/custom-date-formatting.provider.ts
@@ -0,0 +1,25 @@
+import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { CustomDateAdapter } from '@shared/CustomDateAdapter';
+
+export function provideCustomDateFormatter() {
+    return [
+        {
+            provide: DateAdapter,
+            useClass: CustomDateAdapter,
+        },
+        {
+            provide: MAT_DATE_FORMATS,
+            useValue: {
+                parse: {
+                    dateInput: 'D/M/YY',
+                },
+                display: {
+                    dateInput: 'D/M/YY',
+                    monthYearLabel: 'YYYY',
+                    dateA11yLabel: 'LL',
+                    monthYearA11yLabel: 'YYYY',
+                },
+            },
+        },
+    ];
+}
diff --git a/apps/red-ui/src/app/modules/shared/pipes/date.pipe.ts b/apps/red-ui/src/app/modules/shared/pipes/date.pipe.ts
index c633e678a..632f71bfd 100644
--- a/apps/red-ui/src/app/modules/shared/pipes/date.pipe.ts
+++ b/apps/red-ui/src/app/modules/shared/pipes/date.pipe.ts
@@ -6,9 +6,13 @@ import dayjs from 'dayjs';
 
 @Pipe({
     name: 'date',
+    standalone: true,
 })
 export class DatePipe extends BaseDatePipe implements PipeTransform {
-    constructor(@Inject(LOCALE_ID) private readonly _locale: string, private readonly _translateService: TranslateService) {
+    constructor(
+        @Inject(LOCALE_ID) private readonly _locale: string,
+        private readonly _translateService: TranslateService,
+    ) {
         super(_locale);
     }
 
diff --git a/apps/red-ui/src/app/modules/shared/services/dialog.service.ts b/apps/red-ui/src/app/modules/shared/services/dialog.service.ts
index edb55c943..c5781554a 100644
--- a/apps/red-ui/src/app/modules/shared/services/dialog.service.ts
+++ b/apps/red-ui/src/app/modules/shared/services/dialog.service.ts
@@ -5,7 +5,7 @@ import { ConfirmationDialogComponent, DialogConfig, DialogService } from '@iqser
 
 type DialogType = 'addDossier' | 'confirm';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class SharedDialogService extends DialogService<DialogType> {
     protected readonly _config: DialogConfig<DialogType> = {
         confirm: {
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 d0fd8c541..760119b15 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -9,35 +9,29 @@ import {
     CircleButtonComponent,
     DynamicInputComponent,
     HasScrollbarDirective,
+    HelpButtonComponent,
     IconButtonComponent,
     IqserAllowDirective,
     IqserDenyDirective,
-    IqserHelpModeModule,
     RoundCheckboxComponent,
     StopPropagationDirective,
 } from '@iqser/common-ui';
 import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-dossiers-screen.directive';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { DatePipe } from './pipes/date.pipe';
-import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule } from '@angular/router';
 import { AddDossierDialogComponent } from './dialogs/add-dossier-dialog/add-dossier-dialog.component';
-import { SharedDialogService } from './services/dialog.service';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { WatermarkSelectorComponent } from './components/dossier-watermark-selector/watermark-selector.component';
-import { CustomDateAdapter } from '@shared/CustomDateAdapter';
 import { IqserUsersModule } from '@iqser/common-ui/lib/users';
 import { SmallChipComponent } from '@iqser/common-ui/lib/shared';
 import { SelectComponent } from '@shared/components/select/select.component';
 import { FileAttributeComponent } from '../dossier-overview/components/file-attribute/file-attribute.component';
 import { MatDividerModule } from '@angular/material/divider';
 
-const components = [AddDossierDialogComponent, WatermarkSelectorComponent];
+const components = [AddDossierDialogComponent];
 
-const utils = [DatePipe, NavigateLastDossiersScreenDirective];
-
-const services = [SharedDialogService];
+const utils = [NavigateLastDossiersScreenDirective];
 
 const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, ColorPickerModule];
 
@@ -51,7 +45,6 @@ const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent, FileAttri
         MonacoEditorModule,
         TranslateModule,
         RouterModule,
-        IqserHelpModeModule,
         IqserUsersModule,
         ...deleteThisWhenAllComponentsAreStandalone,
         CircleButtonComponent,
@@ -65,28 +58,9 @@ const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent, FileAttri
         RoundCheckboxComponent,
         DynamicInputComponent,
         MatDividerModule,
+        WatermarkSelectorComponent,
+        HelpButtonComponent,
     ],
     exports: [...modules, ...components, ...utils, ...deleteThisWhenAllComponentsAreStandalone],
-    providers: [
-        ...services,
-        {
-            provide: DateAdapter,
-            useClass: CustomDateAdapter,
-        },
-        {
-            provide: MAT_DATE_FORMATS,
-            useValue: {
-                parse: {
-                    dateInput: 'D/M/YY',
-                },
-                display: {
-                    dateInput: 'D/M/YY',
-                    monthYearLabel: 'YYYY',
-                    dateA11yLabel: 'LL',
-                    monthYearA11yLabel: 'YYYY',
-                },
-            },
-        },
-    ],
 })
 export class SharedModule {}
diff --git a/apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.ts b/apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.ts
index 0c0cd3c0e..12baf4873 100644
--- a/apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.ts
+++ b/apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.ts
@@ -7,10 +7,11 @@ import { Observable } from 'rxjs';
 import { getCurrentUser, InitialsAvatarComponent } from '@common-ui/users';
 import { MatIcon } from '@angular/material/icon';
 import { FileNameColumnComponent } from '@shared/components/file-name-column/file-name-column.component';
-import { AsyncPipe, DatePipe, NgIf } from '@angular/common';
+import { AsyncPipe, NgIf } from '@angular/common';
 import { CircleButtonComponent } from '@iqser/common-ui';
 import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { DatePipe } from '@shared/pipes/date.pipe';
 
 @Component({
     selector: 'redaction-trash-table-item [item]',

From 5d3af7e3cbc5316320816b63fde17dbb3d6804da Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Fri, 14 Jun 2024 15:22:04 +0300
Subject: [PATCH 12/17] RED-9321: fixed import.

---
 apps/red-ui/src/app/app.module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index c01223cf8..07b32a6c0 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -71,7 +71,7 @@ import { PdfViewerModule } from './modules/pdf-viewer/pdf-viewer.module';
 import { ACTIVE_DOSSIERS_SERVICE, ARCHIVED_DOSSIERS_SERVICE } from './tokens';
 import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
 import { provideCustomDateFormatter } from '@shared/custom-date-formatting.provider';
-import { provideHelpMode } from '@common-ui/help-mode';
+import { provideHelpMode } from '@iqser/common-ui';
 
 export const appModuleFactory = (config: AppConfig) => {
     @NgModule({

From c3662f6bc52e18efef614674e1aaa4d8d50d25c2 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Tue, 18 Jun 2024 12:40:28 +0300
Subject: [PATCH 13/17] RED-9321: refactored shared and file-upload-download
 modules.

---
 apps/red-ui/src/app/app.module.ts             | 20 ++++--
 .../add-dossier-dialog.component.ts           | 47 ++++++++++++-
 ...navigate-last-dossiers-screen.directive.ts |  1 +
 .../src/app/modules/shared/shared.module.ts   | 66 -------------------
 .../overwrite-files-dialog.component.ts       | 10 ++-
 .../file-drop/file-drop.component.ts          |  4 ++
 .../file-upload-download.module.ts            | 30 ---------
 .../services/file-download.service.ts         |  7 +-
 .../services/file-drop-overlay.service.ts     |  7 +-
 .../services/file-upload.service.ts           |  2 +-
 .../services/status-overlay.service.ts        |  7 +-
 .../upload-download-dialog.service.ts         |  2 +-
 .../upload-status-overlay.component.ts        |  8 +++
 13 files changed, 96 insertions(+), 115 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/shared/shared.module.ts
 delete mode 100644 apps/red-ui/src/app/modules/upload-download/file-upload-download.module.ts

diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 07b32a6c0..59523873b 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -2,7 +2,7 @@ import { APP_BASE_HREF, DatePipe as BaseDatePipe } from '@angular/common';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ENVIRONMENT_INITIALIZER, ErrorHandler, inject, NgModule } from '@angular/core';
 import { MatDividerModule } from '@angular/material/divider';
-import { MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
+import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltip } from '@angular/material/tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
@@ -55,8 +55,6 @@ import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.se
 import { GlobalErrorHandler } from '@services/global-error-handler.service';
 import { LoggerRulesService } from '@services/logger-rules.service';
 import { DatePipe } from '@shared/pipes/date.pipe';
-import { SharedModule } from '@shared/shared.module';
-import { FileUploadDownloadModule } from '@upload-download/file-upload-download.module';
 import { RedRoleGuard } from '@users/red-role.guard';
 import { UserPreferenceService } from '@users/user-preference.service';
 import { UserService } from '@users/user.service';
@@ -71,7 +69,11 @@ import { PdfViewerModule } from './modules/pdf-viewer/pdf-viewer.module';
 import { ACTIVE_DOSSIERS_SERVICE, ARCHIVED_DOSSIERS_SERVICE } from './tokens';
 import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
 import { provideCustomDateFormatter } from '@shared/custom-date-formatting.provider';
-import { provideHelpMode } from '@iqser/common-ui';
+import { provideHelpMode } from '@iqser/common-ui/lib/help-mode/utils/help-mode.provider';
+import { MatMenu, MatMenuContent, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { MatIcon } from '@angular/material/icon';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { IconsModule } from './modules/icons/icons.module';
 
 export const appModuleFactory = (config: AppConfig) => {
     @NgModule({
@@ -93,8 +95,6 @@ export const appModuleFactory = (config: AppConfig) => {
         imports: [
             BrowserModule,
             BrowserAnimationsModule,
-            SharedModule,
-            FileUploadDownloadModule,
             AppRoutingModule,
             MonacoEditorModule,
             CommonUiModule.forRoot({
@@ -191,6 +191,14 @@ export const appModuleFactory = (config: AppConfig) => {
             InitialsAvatarComponent,
             HelpModeComponent,
             HelpButtonComponent,
+            MatMenuTrigger,
+            MatMenuItem,
+            MatIcon,
+            MatMenu,
+            MatMenuContent,
+            MatTooltip,
+            MatProgressSpinner,
+            IconsModule,
         ],
         providers: [
             {
diff --git a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
index 5598a419b..f1e15ae5b 100644
--- a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
@@ -1,8 +1,19 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { Validators } from '@angular/forms';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
-import { BaseDialogComponent, getConfig, IconButtonTypes, IqserPermissionsService, SaveOptions } from '@iqser/common-ui';
+import {
+    BaseDialogComponent,
+    CircleButtonComponent,
+    getConfig,
+    HasScrollbarDirective,
+    HelpButtonComponent,
+    IconButtonComponent,
+    IconButtonTypes,
+    IqserDenyDirective,
+    IqserPermissionsService,
+    SaveOptions,
+} from '@iqser/common-ui';
 import { DOSSIER_TEMPLATE_ID, DownloadFileType, IDossierRequest, IDossierTemplate, IReportTemplate } from '@red/domain';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
@@ -12,6 +23,16 @@ import { Roles } from '@users/roles';
 import dayjs from 'dayjs';
 import { firstValueFrom } from 'rxjs';
 import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
+import { NgForOf, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatFormField, MatSuffix } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
+import { WatermarkSelectorComponent } from '@shared/components/dossier-watermark-selector/watermark-selector.component';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatIcon } from '@angular/material/icon';
+import { SelectComponent } from '@shared/components/select/select.component';
 
 interface DialogData {
     readonly dossierTemplateId?: string;
@@ -20,6 +41,28 @@ interface DialogData {
 @Component({
     templateUrl: './add-dossier-dialog.component.html',
     styleUrls: ['./add-dossier-dialog.component.scss'],
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        NgIf,
+        TranslateModule,
+        MatFormField,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        MatTooltip,
+        HasScrollbarDirective,
+        WatermarkSelectorComponent,
+        MatCheckbox,
+        MatDatepickerModule,
+        MatIcon,
+        SelectComponent,
+        IqserDenyDirective,
+        IconButtonComponent,
+        HelpButtonComponent,
+        CircleButtonComponent,
+        MatSuffix,
+    ],
 })
 export class AddDossierDialogComponent extends BaseDialogComponent implements OnInit {
     readonly config = getConfig();
diff --git a/apps/red-ui/src/app/modules/shared/directives/navigate-last-dossiers-screen.directive.ts b/apps/red-ui/src/app/modules/shared/directives/navigate-last-dossiers-screen.directive.ts
index 7410fa19c..ed447c55c 100644
--- a/apps/red-ui/src/app/modules/shared/directives/navigate-last-dossiers-screen.directive.ts
+++ b/apps/red-ui/src/app/modules/shared/directives/navigate-last-dossiers-screen.directive.ts
@@ -3,6 +3,7 @@ import { RouterHistoryService } from '@services/router-history.service';
 
 @Directive({
     selector: '[redactionNavigateLastDossiersScreen]',
+    standalone: true,
 })
 export class NavigateLastDossiersScreenDirective {
     constructor(private readonly _routerHistoryService: RouterHistoryService) {}
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
deleted file mode 100644
index 760119b15..000000000
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { MatConfigModule } from '../mat-config/mat-config.module';
-import { IconsModule } from '../icons/icons.module';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DonutChartComponent } from './components/donut-chart/donut-chart.component';
-import {
-    CircleButtonComponent,
-    DynamicInputComponent,
-    HasScrollbarDirective,
-    HelpButtonComponent,
-    IconButtonComponent,
-    IqserAllowDirective,
-    IqserDenyDirective,
-    RoundCheckboxComponent,
-    StopPropagationDirective,
-} from '@iqser/common-ui';
-import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-dossiers-screen.directive';
-import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterModule } from '@angular/router';
-import { AddDossierDialogComponent } from './dialogs/add-dossier-dialog/add-dossier-dialog.component';
-import { ColorPickerModule } from 'ngx-color-picker';
-import { WatermarkSelectorComponent } from './components/dossier-watermark-selector/watermark-selector.component';
-import { IqserUsersModule } from '@iqser/common-ui/lib/users';
-import { SmallChipComponent } from '@iqser/common-ui/lib/shared';
-import { SelectComponent } from '@shared/components/select/select.component';
-import { FileAttributeComponent } from '../dossier-overview/components/file-attribute/file-attribute.component';
-import { MatDividerModule } from '@angular/material/divider';
-
-const components = [AddDossierDialogComponent];
-
-const utils = [NavigateLastDossiersScreenDirective];
-
-const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, ColorPickerModule];
-
-const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent, FileAttributeComponent];
-
-@NgModule({
-    declarations: [...components, ...utils],
-    imports: [
-        CommonModule,
-        ...modules,
-        MonacoEditorModule,
-        TranslateModule,
-        RouterModule,
-        IqserUsersModule,
-        ...deleteThisWhenAllComponentsAreStandalone,
-        CircleButtonComponent,
-        IconButtonComponent,
-        SmallChipComponent,
-        StopPropagationDirective,
-        HasScrollbarDirective,
-        IqserAllowDirective,
-        IqserDenyDirective,
-        SelectComponent,
-        RoundCheckboxComponent,
-        DynamicInputComponent,
-        MatDividerModule,
-        WatermarkSelectorComponent,
-        HelpButtonComponent,
-    ],
-    exports: [...modules, ...components, ...utils, ...deleteThisWhenAllComponentsAreStandalone],
-})
-export class SharedModule {}
diff --git a/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.ts b/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.ts
index c39824e79..8019cbcd6 100644
--- a/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.ts
@@ -1,15 +1,19 @@
 import { Component, Inject } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { DetailsRadioOption, IconButtonTypes } from '@iqser/common-ui';
-import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { DetailsRadioComponent, DetailsRadioOption, IconButtonComponent, IconButtonTypes } from '@iqser/common-ui';
+import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { OverwriteFileOption, OverwriteFileOptions } from '@red/domain';
+import { NgIf } from '@angular/common';
+import { MatCheckbox } from '@angular/material/checkbox';
 
 @Component({
     selector: 'redaction-overwrite-files-dialog',
     templateUrl: './overwrite-files-dialog.component.html',
     styleUrls: ['./overwrite-files-dialog.component.scss'],
+    standalone: true,
+    imports: [NgIf, TranslateModule, ReactiveFormsModule, DetailsRadioComponent, MatCheckbox, IconButtonComponent],
 })
 export class OverwriteFilesDialogComponent {
     readonly iconButtonTypes = IconButtonTypes;
diff --git a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.ts b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.ts
index aa5f4f56a..89c8e52d1 100644
--- a/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.ts
+++ b/apps/red-ui/src/app/modules/upload-download/file-drop/file-drop.component.ts
@@ -6,9 +6,13 @@ import { ActiveDossiersService } from '@services/dossiers/active-dossiers.servic
 import { handleFileDrop } from '@utils/file-drop-utils';
 import { FileUploadModel } from '@upload-download/model/file-upload.model';
 import { DOSSIER_ID } from '../../../tokens';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     templateUrl: './file-drop.component.html',
+    standalone: true,
+    imports: [MatIcon, TranslateModule],
 })
 export class FileDropComponent {
     constructor(
diff --git a/apps/red-ui/src/app/modules/upload-download/file-upload-download.module.ts b/apps/red-ui/src/app/modules/upload-download/file-upload-download.module.ts
deleted file mode 100644
index cd38be314..000000000
--- a/apps/red-ui/src/app/modules/upload-download/file-upload-download.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FileDropComponent } from './file-drop/file-drop.component';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { UploadStatusOverlayComponent } from './upload-status-overlay/upload-status-overlay.component';
-import { SharedModule } from '@shared/shared.module';
-import { OverwriteFilesDialogComponent } from './dialogs/overwrite-files-dialog/overwrite-files-dialog.component';
-import { FileUploadService } from './services/file-upload.service';
-import { FileDownloadService } from './services/file-download.service';
-import { StatusOverlayService } from './services/status-overlay.service';
-import { FileDropOverlayService } from './services/file-drop-overlay.service';
-import { UploadDownloadDialogService } from './services/upload-download-dialog.service';
-import { TranslateModule } from '@ngx-translate/core';
-import { CircleButtonComponent, DetailsRadioComponent, IconButtonComponent } from '@iqser/common-ui';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        SharedModule,
-        OverlayModule,
-        TranslateModule,
-        CircleButtonComponent,
-        IconButtonComponent,
-        DetailsRadioComponent,
-    ],
-    declarations: [FileDropComponent, UploadStatusOverlayComponent, OverwriteFilesDialogComponent],
-    providers: [UploadDownloadDialogService, FileUploadService, FileDownloadService, StatusOverlayService, FileDropOverlayService],
-    exports: [FileDropComponent, UploadStatusOverlayComponent],
-})
-export class FileUploadDownloadModule {}
diff --git a/apps/red-ui/src/app/modules/upload-download/services/file-download.service.ts b/apps/red-ui/src/app/modules/upload-download/services/file-download.service.ts
index b2ea8336b..f8e7aeca4 100644
--- a/apps/red-ui/src/app/modules/upload-download/services/file-download.service.ts
+++ b/apps/red-ui/src/app/modules/upload-download/services/file-download.service.ts
@@ -8,13 +8,16 @@ import { NGXLogger } from 'ngx-logger';
 import { mapEach } from '@iqser/common-ui/lib/utils';
 import { TenantsService } from '@iqser/common-ui/lib/tenants';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class FileDownloadService extends EntitiesService<IDownloadStatus, DownloadStatus> {
     protected readonly _defaultModelPath = 'async/download';
     protected readonly _entityClass = DownloadStatus;
     protected readonly _tenantsService = inject(TenantsService);
 
-    constructor(private readonly _configService: ConfigService, private readonly _logger: NGXLogger) {
+    constructor(
+        private readonly _configService: ConfigService,
+        private readonly _logger: NGXLogger,
+    ) {
         super();
     }
 
diff --git a/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts b/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts
index 778156882..5d9cecba5 100644
--- a/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts
+++ b/apps/red-ui/src/app/modules/upload-download/services/file-drop-overlay.service.ts
@@ -5,13 +5,16 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { DOSSIER_ID } from '../../../tokens';
 import { BehaviorSubject } from 'rxjs';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class FileDropOverlayService {
     readonly #dropOverlayRef: OverlayRef;
     readonly #importingRedactions$ = new BehaviorSubject(false);
     #dossierId: string;
 
-    constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) {
+    constructor(
+        private readonly _overlay: Overlay,
+        private readonly _injector: Injector,
+    ) {
         this.#dropOverlayRef = this._overlay.create({
             height: '100vh',
             width: '100vw',
diff --git a/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts b/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
index 8f774e5b6..c4f82e77a 100644
--- a/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
+++ b/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
@@ -21,7 +21,7 @@ export interface ActiveUpload {
     fileUploadModel: FileUploadModel;
 }
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class FileUploadService extends GenericService<IFileUploadResult> implements OnDestroy {
     static readonly MAX_PARALLEL_UPLOADS = 5;
     #pendingUploads: FileUploadModel[] = [];
diff --git a/apps/red-ui/src/app/modules/upload-download/services/status-overlay.service.ts b/apps/red-ui/src/app/modules/upload-download/services/status-overlay.service.ts
index f90697230..ea6bf07f9 100644
--- a/apps/red-ui/src/app/modules/upload-download/services/status-overlay.service.ts
+++ b/apps/red-ui/src/app/modules/upload-download/services/status-overlay.service.ts
@@ -3,11 +3,14 @@ import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { UploadStatusOverlayComponent } from '../upload-status-overlay/upload-status-overlay.component';
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class StatusOverlayService {
     private readonly _uploadStatusOverlayRef: OverlayRef;
 
-    constructor(private readonly _overlay: Overlay, private readonly _injector: Injector) {
+    constructor(
+        private readonly _overlay: Overlay,
+        private readonly _injector: Injector,
+    ) {
         this._uploadStatusOverlayRef = this._overlay.create();
     }
 
diff --git a/apps/red-ui/src/app/modules/upload-download/services/upload-download-dialog.service.ts b/apps/red-ui/src/app/modules/upload-download/services/upload-download-dialog.service.ts
index 761aefb74..bcdb079da 100644
--- a/apps/red-ui/src/app/modules/upload-download/services/upload-download-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/upload-download/services/upload-download-dialog.service.ts
@@ -10,7 +10,7 @@ const dialogConfig = {
     autoFocus: false,
 };
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class UploadDownloadDialogService {
     constructor(private readonly _dialog: MatDialog) {}
 
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
index 38b57cf8a..d6f50ba5b 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
@@ -2,11 +2,19 @@ import { OverlayRef } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FileUploadModel } from '../model/file-upload.model';
 import { FileUploadService } from '../services/file-upload.service';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { CircleButtonComponent } from '@iqser/common-ui';
+import { NgForOf, NgIf } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatProgressBar } from '@angular/material/progress-bar';
 
 @Component({
     selector: 'redaction-upload-status-overlay',
     templateUrl: './upload-status-overlay.component.html',
     styleUrls: ['./upload-status-overlay.component.scss'],
+    standalone: true,
+    imports: [MatIcon, TranslateModule, CircleButtonComponent, NgForOf, MatTooltip, NgIf, MatProgressBar],
 })
 export class UploadStatusOverlayComponent implements OnInit {
     collapsed = true;

From ffd02c787d825e791ff1cee8e82778bbe2c67818 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Tue, 18 Jun 2024 16:31:05 +0300
Subject: [PATCH 14/17] RED-9321: added missing imports.

---
 .../components/file-header/file-header.component.ts            | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
index 8f78ba06c..c62b29a40 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/file-header/file-header.component.ts
@@ -48,6 +48,9 @@ import { InitialsAvatarComponent } from '@common-ui/users';
 import { FileActionsComponent } from '../../../shared-dossiers/components/file-actions/file-actions.component';
 import { TablesService } from '../../services/tables.service';
 import { ALL_HOTKEYS } from '../../utils/constants';
+import { AnnotationDrawService } from '../../../pdf-viewer/services/annotation-draw.service';
+import { FileManagementService } from '@services/files/file-management.service';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
     selector: 'redaction-file-header',

From 04e3f5b5226cec7c8238aa02aef5d8ce1a3fa009 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan.percic.ext@knecon.com>
Date: Wed, 19 Jun 2024 13:06:20 +0300
Subject: [PATCH 15/17] almost unfuck circular imports

---
 apps/red-ui/src/app/app.module.ts             | 16 ++---
 .../src/app/guards/permissions-guard.ts       |  2 +-
 .../dialog-defaults.component.ts              | 28 ++++----
 .../modules/account/utils/dialog-defaults.ts  |  8 +--
 .../add-edit-user-dialog.component.ts         |  7 +-
 .../user-listing-screen.component.ts          | 13 ++--
 .../admin/services/admin-dialog.service.ts    | 26 +++----
 .../dossier-details-stats.component.ts        | 17 ++---
 .../dossier-overview/config.service.ts        |  6 +-
 .../add-hint-dialog.component.ts              | 20 +++---
 .../remove-annotation-dialog.component.ts     | 28 ++++----
 .../edit-redaction-dialog.component.ts        | 25 ++++---
 .../redact-recommendation-dialog.component.ts | 18 ++---
 .../redact-text-dialog.component.ts           | 70 +++++++++----------
 .../remove-redaction-dialog.component.ts      | 31 ++++----
 .../resize-redaction-dialog.component.ts      | 14 ++--
 .../services/annotation-actions.service.ts    |  2 +-
 .../file-preview/services/skipped.service.ts  |  7 +-
 .../modules/file-preview/utils/constants.ts   |  2 +
 .../file-preview/utils/dialog-options.ts      | 31 +++-----
 .../file-preview/utils/dialog-types.ts        | 22 +++++-
 .../services/annotation-manager.service.ts    |  4 +-
 .../dossiers-listing-actions.component.ts     | 11 +--
 .../edit-dossier-dialog.component.html        | 11 +--
 .../edit-dossier-dialog.component.ts          | 43 ++++++------
 .../edit-dossier-team.component.ts            | 40 ++---------
 .../edit-dossier-team.module.ts               | 42 +++++++++++
 .../edit-dossier-general-info.component.ts    | 42 +++++------
 .../services/dossiers-dialog.service.ts       |  9 +--
 .../team-members/team-members.component.ts    | 20 +++---
 .../add-dossier-dialog.component.ts           | 34 +++++----
 .../remove-annotation-translations.ts         |  2 +-
 .../remove-redaction-translations.ts          |  2 +-
 .../src/app/users/user-preference.service.ts  |  2 +-
 apps/red-ui/src/app/utils/filter-utils.ts     |  2 +-
 libs/common-ui                                |  2 +-
 .../dossier-attribute-config.model.ts         |  3 +-
 .../dossier-attribute-config.ts               | 11 ++-
 .../src/lib/dossier-attributes/index.ts       |  1 -
 .../src/lib/dossier-attributes/types.ts       | 12 ----
 .../lib/dossier-stats/dossier-stats.model.ts  |  9 ++-
 .../red-domain/src/lib/dossier-stats/types.ts |  2 +-
 .../src/lib/dossiers/dossier.model.ts         |  2 +-
 libs/red-domain/src/lib/dossiers/dossier.ts   |  2 +-
 libs/red-domain/src/lib/files/file.model.ts   |  8 +--
 .../src/lib/pages/viewed-page.model.ts        |  2 +-
 libs/red-domain/src/lib/shared/colors.ts      |  2 +-
 .../src/lib/shared/expandable-file-actions.ts |  6 +-
 .../src/lib/shared/sorters/status-sorter.ts   |  2 +-
 49 files changed, 368 insertions(+), 353 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.module.ts
 delete mode 100644 libs/red-domain/src/lib/dossier-attributes/types.ts

diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 59523873b..105678bf6 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -2,11 +2,16 @@ import { APP_BASE_HREF, DatePipe as BaseDatePipe } from '@angular/common';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ENVIRONMENT_INITIALIZER, ErrorHandler, inject, NgModule } from '@angular/core';
 import { MatDividerModule } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenu, MatMenuContent, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltip } from '@angular/material/tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
+import { HelpModeKey } from '@common-ui/help-mode/types';
 import { GET_TENANT_FROM_PATH_FN, UI_ROOT } from '@common-ui/utils';
+import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
 import { BaseScreenComponent } from '@components/base-screen/base-screen.component';
 import { BreadcrumbsComponent } from '@components/breadcrumbs/breadcrumbs.component';
 import { DownloadsListScreenComponent } from '@components/downloads-list-screen/downloads-list-screen.component';
@@ -26,7 +31,6 @@ import {
     EmptyStateComponent,
     HelpButtonComponent,
     HelpModeComponent,
-    HelpModeKey,
     HiddenActionDirective,
     IconButtonComponent,
     InputWithActionComponent,
@@ -43,6 +47,7 @@ import {
     StopPropagationDirective,
 } from '@iqser/common-ui';
 import { CommonUiModule } from '@iqser/common-ui/lib/common-ui.module';
+import { provideHelpMode } from '@iqser/common-ui/lib/help-mode/utils/help-mode.provider';
 import { LogoComponent, SkeletonComponent, ToastComponent } from '@iqser/common-ui/lib/shared';
 import { TenantsModule } from '@iqser/common-ui/lib/tenants';
 import { InitialsAvatarComponent, IqserUsersModule } from '@iqser/common-ui/lib/users';
@@ -54,6 +59,7 @@ import { ActiveDossiersService } from '@services/dossiers/active-dossiers.servic
 import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.service';
 import { GlobalErrorHandler } from '@services/global-error-handler.service';
 import { LoggerRulesService } from '@services/logger-rules.service';
+import { provideCustomDateFormatter } from '@shared/custom-date-formatting.provider';
 import { DatePipe } from '@shared/pipes/date.pipe';
 import { RedRoleGuard } from '@users/red-role.guard';
 import { UserPreferenceService } from '@users/user-preference.service';
@@ -65,15 +71,9 @@ import { ToastrModule } from 'ngx-toastr';
 import * as helpModeKeys from '../assets/help-mode/help-mode-keys.json';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { IconsModule } from './modules/icons/icons.module';
 import { PdfViewerModule } from './modules/pdf-viewer/pdf-viewer.module';
 import { ACTIVE_DOSSIERS_SERVICE, ARCHIVED_DOSSIERS_SERVICE } from './tokens';
-import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
-import { provideCustomDateFormatter } from '@shared/custom-date-formatting.provider';
-import { provideHelpMode } from '@iqser/common-ui/lib/help-mode/utils/help-mode.provider';
-import { MatMenu, MatMenuContent, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
-import { MatIcon } from '@angular/material/icon';
-import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { IconsModule } from './modules/icons/icons.module';
 
 export const appModuleFactory = (config: AppConfig) => {
     @NgModule({
diff --git a/apps/red-ui/src/app/guards/permissions-guard.ts b/apps/red-ui/src/app/guards/permissions-guard.ts
index a53249937..6744f0cbe 100644
--- a/apps/red-ui/src/app/guards/permissions-guard.ts
+++ b/apps/red-ui/src/app/guards/permissions-guard.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate } from '@angular/router';
-import { firstValueFrom } from 'rxjs';
 import { EntityPermissionsService } from '@services/entity-permissions/entity-permissions.service';
+import { firstValueFrom } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class PermissionsGuard implements CanActivate {
diff --git a/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts b/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts
index ece1976bc..85ff67c63 100644
--- a/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts
+++ b/apps/red-ui/src/app/modules/account/screens/preferences/dialog-defaults/dialog-defaults.component.ts
@@ -1,14 +1,20 @@
+import { NgForOf, NgIf } from '@angular/common';
 import { ChangeDetectorRef, Component, inject } from '@angular/core';
-import { BaseFormComponent } from '@common-ui/form';
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { BaseFormComponent } from '@common-ui/form';
+import { AsControl } from '@common-ui/utils';
+import { IconButtonComponent } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
+import { PreferencesKeys, UserPreferenceService } from '@users/user-preference.service';
 import {
     RedactOrHintOption,
     RedactOrHintOptions,
     RemoveRedactionOption,
     RemoveRedactionOptions,
-} from '../../../../file-preview/utils/dialog-options';
-import { PreferencesKeys, UserPreferenceService } from '@users/user-preference.service';
-import { AsControl } from '@common-ui/utils';
+} from '../../../../file-preview/utils/dialog-types';
 import {
     hintAddOptions,
     recommendationRemoveOptions,
@@ -17,12 +23,6 @@ import {
     removeOptions,
     SystemDefaultType,
 } from '../../../utils/dialog-defaults';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatFormField } from '@angular/material/form-field';
-import { MatOption, MatSelect } from '@angular/material/select';
-import { NgForOf, NgIf } from '@angular/common';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { IconButtonComponent } from '@iqser/common-ui';
 
 interface DefaultOptionsForm {
     addRedaction: RedactOrHintOption | SystemDefaultType;
@@ -68,6 +68,10 @@ export class DialogDefaultsComponent extends BaseFormComponent {
     readonly redactionRemoveOptions = redactionRemoveOptions;
     readonly recommendationRemoveOptions = recommendationRemoveOptions;
 
+    constructor() {
+        super();
+    }
+
     get displayExtraOptionAddRedaction() {
         return RedactOrHintOptions.IN_DOSSIER === this.form.controls.addRedaction.value;
     }
@@ -92,10 +96,6 @@ export class DialogDefaultsComponent extends BaseFormComponent {
         return RemoveRedactionOptions.DO_NOT_RECOMMEND === this.form.controls.removeRecommendation.value;
     }
 
-    constructor() {
-        super();
-    }
-
     async save(): Promise<any> {
         const formValue = this.form.value;
 
diff --git a/apps/red-ui/src/app/modules/account/utils/dialog-defaults.ts b/apps/red-ui/src/app/modules/account/utils/dialog-defaults.ts
index e91793bff..a723d5878 100644
--- a/apps/red-ui/src/app/modules/account/utils/dialog-defaults.ts
+++ b/apps/red-ui/src/app/modules/account/utils/dialog-defaults.ts
@@ -1,8 +1,8 @@
-import { redactTextTranslations } from '@translations/redact-text-translations';
-import { RedactOrHintOptions, RemoveRedactionOptions } from '../../file-preview/utils/dialog-options';
-import { removeRedactionTranslations } from '@translations/remove-redaction-translations';
-import { addHintTranslations } from '@translations/add-hint-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { addHintTranslations } from '@translations/add-hint-translations';
+import { redactTextTranslations } from '@translations/redact-text-translations';
+import { removeRedactionTranslations } from '@translations/remove-redaction-translations';
+import { RedactOrHintOptions, RemoveRedactionOptions } from '../../file-preview/utils/dialog-types';
 
 export const SystemDefaults = {
     ADD_REDACTION_DEFAULT: RedactOrHintOptions.IN_DOSSIER,
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts
index 9a17d38f9..ec5b7761b 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.ts
@@ -1,10 +1,9 @@
 import { Component, Inject, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { User } from '@red/domain';
-import { UserDetailsComponent } from './user-details/user-details.component';
 import { BaseDialogComponent, CircleButtonComponent } from '@iqser/common-ui';
+import { User } from '@red/domain';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
-import { AdminDialogService } from '../../services/admin-dialog.service';
+import { UserDetailsComponent } from './user-details/user-details.component';
 
 @Component({
     selector: 'redaction-add-edit-user-dialog',
@@ -13,8 +12,8 @@ import { AdminDialogService } from '../../services/admin-dialog.service';
     imports: [UserDetailsComponent, ResetPasswordComponent, CircleButtonComponent],
 })
 export class AddEditUserDialogComponent extends BaseDialogComponent {
-    resettingPassword = false;
     @ViewChild(UserDetailsComponent) private readonly _userDetailsComponent: UserDetailsComponent;
+    resettingPassword = false;
 
     constructor(
         protected readonly _dialogRef: MatDialogRef<AddEditUserDialogComponent>,
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 ac0a427a4..942cfbfbf 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,5 +1,9 @@
+import { AsyncPipe, NgClass, NgIf } from '@angular/common';
 import { Component, inject, OnInit } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { InitialsAvatarComponent } from '@common-ui/users';
 import {
     ButtonConfig,
     CircleButtonComponent,
@@ -24,12 +28,9 @@ import { UserService } from '@users/user.service';
 import { firstValueFrom, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { userTypeChecker, userTypeFilters } from '../../../../utils';
-import { AdminDialogService } from '../../services/admin-dialog.service';
 import { UsersStatsComponent } from '../../components/users-stats/users-stats.component';
-import { AsyncPipe, NgClass, NgIf } from '@angular/common';
-import { InitialsAvatarComponent } from '@common-ui/users';
-import { MatSlideToggle } from '@angular/material/slide-toggle';
-import { MatIcon } from '@angular/material/icon';
+import { AddEditUserDialogComponent } from '../../dialogs/add-edit-user-dialog/add-edit-user-dialog.component';
+import { AdminDialogService } from '../../services/admin-dialog.service';
 
 function configToFilter({ key, label }: DonutChartConfig) {
     return new NestedFilter({
@@ -112,7 +113,7 @@ export class UserListingScreenComponent extends ListingComponent<User> implement
     }
 
     openAddEditUserDialog(user?: User) {
-        this._dialogService.openDialog('addEditUser', user, async () => {
+        this._dialogService.open(AddEditUserDialogComponent, user, { autoFocus: true }, async () => {
             await this.#loadData();
         });
     }
diff --git a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
index 7eb857064..1ba3e00fc 100644
--- a/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/admin/services/admin-dialog.service.ts
@@ -1,9 +1,6 @@
 import { Injectable, TemplateRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { AddEntityDialogComponent } from '../dialogs/add-entity-dialog/add-entity-dialog.component';
-import { EditColorDialogComponent } from '../dialogs/edit-color-dialog/edit-color-dialog.component';
-import { SmtpAuthDialogComponent } from '../dialogs/smtp-auth-dialog/smtp-auth-dialog.component';
-import { AddEditUserDialogComponent } from '../dialogs/add-edit-user-dialog/add-edit-user-dialog.component';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
     ConfirmationDialogComponent,
     ConfirmOptions,
@@ -13,22 +10,23 @@ import {
     LoadingService,
     TitleColors,
 } from '@iqser/common-ui';
-import { UploadDictionaryDialogComponent } from '../dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { firstValueFrom, forkJoin } from 'rxjs';
-import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
-import { UserService } from '@users/user.service';
 import { IDossierAttributeConfig, IFileAttributeConfig, IReportTemplate } from '@red/domain';
+import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { ReportTemplateService } from '@services/report-template.service';
-import { ConfigureCertificateDialogComponent } from '../dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';
-import { AuditInfoDialogComponent } from '../dialogs/audit-info-dialog/audit-info-dialog.component';
+import { UserService } from '@users/user.service';
+import { firstValueFrom, forkJoin } from 'rxjs';
 import { AddCloneDossierTemplateDialogComponent } from '../dialogs/add-clone-dossier-template-dialog/add-clone-dossier-template-dialog.component';
+import { AddEntityDialogComponent } from '../dialogs/add-entity-dialog/add-entity-dialog.component';
+import { AuditInfoDialogComponent } from '../dialogs/audit-info-dialog/audit-info-dialog.component';
+import { ConfigureCertificateDialogComponent } from '../dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';
+import { EditColorDialogComponent } from '../dialogs/edit-color-dialog/edit-color-dialog.component';
+import { SmtpAuthDialogComponent } from '../dialogs/smtp-auth-dialog/smtp-auth-dialog.component';
+import { UploadDictionaryDialogComponent } from '../dialogs/upload-dictionary-dialog/upload-dictionary-dialog.component';
 
 type DialogType =
     | 'confirm'
     | 'addEntity'
     | 'editColor'
-    | 'addEditUser'
     | 'smtpAuthConfig'
     | 'addCloneDossierTemplate'
     | 'auditInfo'
@@ -50,10 +48,6 @@ export class AdminDialogService extends DialogService<DialogType> {
             component: EditColorDialogComponent,
             dialogConfig: { autoFocus: true },
         },
-        addEditUser: {
-            component: AddEditUserDialogComponent,
-            dialogConfig: { autoFocus: true },
-        },
         smtpAuthConfig: {
             component: SmtpAuthDialogComponent,
             dialogConfig: { autoFocus: true },
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
index 98c6d3579..2760a6842 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details-stats/dossier-details-stats.component.ts
@@ -1,15 +1,16 @@
+import { AsyncPipe, DecimalPipe, NgForOf, NgIf } from '@angular/common';
 import { Component, Input, OnInit } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { getConfig, largeDialogConfig } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 import { Dossier, DossierAttributeWithValue, DossierStats } from '@red/domain';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
-import { FilesService } from '@services/files/files.service';
-import { firstValueFrom, Observable } from 'rxjs';
 import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
-import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
-import { getConfig } from '@iqser/common-ui';
-import { MatIcon } from '@angular/material/icon';
-import { AsyncPipe, DecimalPipe, NgForOf, NgIf } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
+import { FilesService } from '@services/files/files.service';
 import { DatePipe } from '@shared/pipes/date.pipe';
+import { firstValueFrom, Observable } from 'rxjs';
+import { EditDossierDialogComponent } from '../../../shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component';
+import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
 
 @Component({
     selector: 'redaction-dossier-details-stats',
@@ -41,7 +42,7 @@ export class DossierDetailsStatsComponent implements OnInit {
 
     openEditDossierDialog(section: string): void {
         const data = { dossierId: this.dossier.id, section };
-        this._dialogService.openDialog('editDossier', data, async () => {
+        this._dialogService.open(EditDossierDialogComponent, data, { ...largeDialogConfig, width: '98vw', maxWidth: '98vw' }, async () => {
             await firstValueFrom(this._filesService.loadAll(this.dossier.id));
         });
     }
diff --git a/apps/red-ui/src/app/modules/dossier-overview/config.service.ts b/apps/red-ui/src/app/modules/dossier-overview/config.service.ts
index fd367c7e6..7cc0dfb85 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/config.service.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/config.service.ts
@@ -4,6 +4,7 @@ import {
     ActionConfig,
     getConfig,
     IqserPermissionsService,
+    largeDialogConfig,
     ListingMode,
     ListingModes,
     TableColumnConfig,
@@ -41,7 +42,8 @@ import { UserService } from '@users/user.service';
 import dayjs from 'dayjs';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { annotationFilterChecker, RedactionFilterSorter, sortByName, sortArray } from '../../utils';
+import { annotationFilterChecker, RedactionFilterSorter, sortArray, sortByName } from '../../utils';
+import { EditDossierDialogComponent } from '../shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component';
 import { DossiersDialogService } from '../shared-dossiers/services/dossiers-dialog.service';
 import { BulkActionsService } from './services/bulk-actions.service';
 
@@ -472,6 +474,6 @@ export class ConfigService {
     }
 
     #openEditDossierDialog(dossierId: string) {
-        this._dialogService.openDialog('editDossier', { dossierId });
+        this._dialogService.open(EditDossierDialogComponent, { dossierId }, { ...largeDialogConfig, width: '98vw', maxWidth: '98vw' });
     }
 }
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/add-hint-dialog/add-hint-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/add-hint-dialog/add-hint-dialog.component.ts
index bf9a731e6..8958053c5 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/add-hint-dialog/add-hint-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/add-hint-dialog/add-hint-dialog.component.ts
@@ -1,6 +1,11 @@
+import { NgIf } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { MatDialogClose } from '@angular/material/dialog';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
 import {
     CircleButtonComponent,
     DetailsRadioComponent,
@@ -12,22 +17,17 @@ import {
     IqserDialogComponent,
     IqserPermissionsService,
 } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 import { Dictionary, Dossier, IAddRedactionRequest } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
 import { Roles } from '@users/roles';
-import { tap } from 'rxjs/operators';
-import { getRedactOrHintOptions, RedactOrHintOption, RedactOrHintOptions } from '../../utils/dialog-options';
-import { AddHintData, AddHintResult } from '../../utils/dialog-types';
 import { UserPreferenceService } from '@users/user-preference.service';
-import { SystemDefaultOption, SystemDefaults } from '../../../account/utils/dialog-defaults';
 import { stringToBoolean } from '@utils/functions';
-import { MatFormField } from '@angular/material/form-field';
-import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
-import { MatTooltip } from '@angular/material/tooltip';
-import { NgIf } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatDialogClose } from '@angular/material/dialog';
+import { tap } from 'rxjs/operators';
+import { SystemDefaultOption, SystemDefaults } from '../../../account/utils/dialog-defaults';
+import { getRedactOrHintOptions } from '../../utils/dialog-options';
+import { AddHintData, AddHintResult, RedactOrHintOption, RedactOrHintOptions } from '../../utils/dialog-types';
 
 @Component({
     templateUrl: './add-hint-dialog.component.html',
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component.ts
index 62b19bb22..7fe6b97ab 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/docu-mine/remove-annotation-dialog/remove-annotation-dialog.component.ts
@@ -1,4 +1,9 @@
+import { CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
+import { NgIf, NgStyle } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { MatDialogClose } from '@angular/material/dialog';
+import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
 import {
     CircleButtonComponent,
     DetailsRadioComponent,
@@ -8,14 +13,9 @@ import {
     IconButtonTypes,
     IqserDialogComponent,
 } from '@iqser/common-ui';
-import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
-import { RemoveAnnotationData, RemoveAnnotationResult } from '../../../utils/dialog-types';
-import { getRemoveRedactionOptions, RemoveAnnotationOption, RemoveAnnotationOptions } from '../../../utils/dialog-options';
 import { TranslateModule } from '@ngx-translate/core';
-import { CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
-import { NgIf, NgStyle } from '@angular/common';
-import { ReplaceNbspPipe } from '@common-ui/pipes/replace-nbsp.pipe';
-import { MatDialogClose } from '@angular/material/dialog';
+import { getRemoveRedactionOptions } from '../../../utils/dialog-options';
+import { RemoveAnnotationData, RemoveAnnotationOption, RemoveAnnotationOptions, RemoveAnnotationResult } from '../../../utils/dialog-types';
 
 @Component({
     templateUrl: 'remove-annotation-dialog.component.html',
@@ -47,6 +47,13 @@ export class RemoveAnnotationDialogComponent extends IqserDialogComponent<
 
     form!: UntypedFormGroup;
 
+    constructor(private readonly _formBuilder: FormBuilder) {
+        super();
+        this.options = getRemoveRedactionOptions(this.data, this.data.applyToAllDossiers, true);
+        this.redactedTexts = this.data.redactions.map(annotation => annotation.value);
+        this.form = this.#getForm();
+    }
+
     get isFalsePositive(): boolean {
         return this.form.get('option').value.value === RemoveAnnotationOptions.FALSE_POSITIVE;
     }
@@ -56,13 +63,6 @@ export class RemoveAnnotationDialogComponent extends IqserDialogComponent<
         return selectedOption === RemoveAnnotationOptions.IN_DOSSIER || selectedOption === RemoveAnnotationOptions.FALSE_POSITIVE;
     }
 
-    constructor(private readonly _formBuilder: FormBuilder) {
-        super();
-        this.options = getRemoveRedactionOptions(this.data, this.data.applyToAllDossiers, true);
-        this.redactedTexts = this.data.redactions.map(annotation => annotation.value);
-        this.form = this.#getForm();
-    }
-
     save(): void {
         this.dialogRef.close({ ...this.form.getRawValue(), applyToAllDossiers: this.#applyToAllDossiers });
     }
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
index 714aa1db4..3f200a38a 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/edit-redaction-dialog/edit-redaction-dialog.component.ts
@@ -1,5 +1,10 @@
+import { NgForOf, NgIf } from '@angular/common';
 import { Component, inject, OnInit } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatDialogClose } from '@angular/material/dialog';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
 import {
     CircleButtonComponent,
     DetailsRadioOption,
@@ -10,26 +15,21 @@ import {
     IqserDenyDirective,
     IqserDialogComponent,
 } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 import { Dictionary, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
 import { JustificationsService } from '@services/entity-services/justifications.service';
-import { firstValueFrom } from 'rxjs';
-import { getEditRedactionOptions, RedactOrHintOption } from '../../utils/dialog-options';
-import { EditRedactionData, EditRedactResult } from '../../utils/dialog-types';
-import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
 import { Roles } from '@users/roles';
-import { DialogHelpModeKeys } from '../../utils/constants';
+import { firstValueFrom } from 'rxjs';
 import {
     SelectedAnnotationsTableComponent,
     ValueColumn,
 } from '../../components/selected-annotations-table/selected-annotations-table.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatFormField } from '@angular/material/form-field';
-import { NgForOf, NgIf } from '@angular/common';
-import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
-import { MatTooltip } from '@angular/material/tooltip';
-import { MatDialogClose } from '@angular/material/dialog';
+import { DialogHelpModeKeys } from '../../utils/constants';
+import { getEditRedactionOptions } from '../../utils/dialog-options';
+import { EditRedactionData, EditRedactResult, RedactOrHintOption } from '../../utils/dialog-types';
+import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
 
 interface TypeSelectOptions {
     type: string;
@@ -66,6 +66,7 @@ export class EditRedactionDialogComponent
 {
     readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
     readonly #applyToAllDossiers = this.data.applyToAllDossiers;
+    protected readonly roles = Roles;
     readonly annotations = this.data.annotations;
     readonly iconButtonTypes = IconButtonTypes;
     readonly isModifyDictionary = this.annotations.every(annotation => annotation.isModifyDictionary);
@@ -90,8 +91,6 @@ export class EditRedactionDialogComponent
         { label: redaction.value, show: true, bold: true },
         { label: redaction.typeLabel, show: true },
     ]);
-    protected readonly roles = Roles;
-
     options: DetailsRadioOption<RedactOrHintOption>[] | undefined;
     legalOptions: LegalBasisOption[] = [];
     dictionaries: Dictionary[] = [];
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts
index dc2063bca..3be29be9d 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component.ts
@@ -1,6 +1,11 @@
+import { NgForOf, NgIf } from '@angular/common';
 import { Component, inject, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { MatDialogClose } from '@angular/material/dialog';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
 import {
     CircleButtonComponent,
     DetailsRadioComponent,
@@ -11,25 +16,20 @@ import {
     IqserDialogComponent,
 } from '@iqser/common-ui';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
+import { TranslateModule } from '@ngx-translate/core';
 import { Dictionary, IAddRedactionRequest, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
 import { JustificationsService } from '@services/entity-services/justifications.service';
 import { firstValueFrom } from 'rxjs';
 import { tap } from 'rxjs/operators';
-import { getRedactOrHintOptions, RedactOrHintOption, RedactOrHintOptions } from '../../utils/dialog-options';
-import { RedactRecommendationData, RedactRecommendationResult } from '../../utils/dialog-types';
-import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
 import {
     SelectedAnnotationsTableComponent,
     ValueColumn,
 } from '../../components/selected-annotations-table/selected-annotations-table.component';
-import { MatFormField } from '@angular/material/form-field';
-import { NgForOf, NgIf } from '@angular/common';
-import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
-import { MatTooltip } from '@angular/material/tooltip';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatDialogClose } from '@angular/material/dialog';
+import { getRedactOrHintOptions } from '../../utils/dialog-options';
+import { RedactOrHintOption, RedactOrHintOptions, RedactRecommendationData, RedactRecommendationResult } from '../../utils/dialog-types';
+import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
 
 @Component({
     templateUrl: './redact-recommendation-dialog.component.html',
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
index 006433bee..ecf2eba9f 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/redact-text-dialog/redact-text-dialog.component.ts
@@ -1,6 +1,11 @@
+import { AsyncPipe, NgClass, NgForOf, NgIf, NgStyle } from '@angular/common';
 import { Component, inject, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatDialogClose } from '@angular/material/dialog';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
 import {
     CircleButtonComponent,
     DetailsRadioComponent,
@@ -10,25 +15,20 @@ import {
     IconButtonTypes,
     IqserDialogComponent,
 } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 import { Dictionary, IAddRedactionRequest, SuperTypes } from '@red/domain';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionaryService } from '@services/entity-services/dictionary.service';
 import { JustificationsService } from '@services/entity-services/justifications.service';
 import { Roles } from '@users/roles';
+import { UserPreferenceService } from '@users/user-preference.service';
 import { calcTextWidthInPixels, stringToBoolean } from '@utils/functions';
 import { firstValueFrom, Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
-import { getRedactOrHintOptions, RedactOrHintOption, RedactOrHintOptions } from '../../utils/dialog-options';
-import { RedactTextData, RedactTextResult } from '../../utils/dialog-types';
-import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
-import { UserPreferenceService } from '@users/user-preference.service';
 import { SystemDefaultOption, SystemDefaults } from '../../../account/utils/dialog-defaults';
-import { AsyncPipe, NgClass, NgForOf, NgIf, NgStyle } from '@angular/common';
-import { MatFormField } from '@angular/material/form-field';
-import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
-import { MatTooltip } from '@angular/material/tooltip';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatDialogClose } from '@angular/material/dialog';
+import { getRedactOrHintOptions } from '../../utils/dialog-options';
+import { RedactOrHintOption, RedactOrHintOptions, RedactTextData, RedactTextResult } from '../../utils/dialog-types';
+import { LegalBasisOption } from '../manual-redaction-dialog/manual-annotation-dialog.component';
 
 const MAXIMUM_TEXT_AREA_WIDTH = 421;
 
@@ -60,6 +60,9 @@ export class RedactTextDialogComponent
     extends IqserDialogComponent<RedactTextDialogComponent, RedactTextData, RedactTextResult>
     implements OnInit
 {
+    readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
+    readonly #manualRedactionTypeExists = inject(DictionaryService).hasManualType(this.#dossier.dossierTemplateId);
+    #applyToAllDossiers = this.applyToAll;
     readonly roles = Roles;
     readonly iconButtonTypes = IconButtonTypes;
     readonly initialText = this.data?.manualRedactionEntryWrapper?.manualRedactionEntry?.value;
@@ -72,36 +75,11 @@ export class RedactTextDialogComponent
     selectedTextRows = 1;
     readonly options: DetailsRadioOption<RedactOrHintOption>[];
     readonly displayedDictionaryLabel$: Observable<string>;
-    readonly #dossier = inject(ActiveDossiersService).find(this.data.dossierId);
-    readonly #manualRedactionTypeExists = inject(DictionaryService).hasManualType(this.#dossier.dossierTemplateId);
-    #applyToAllDossiers = this.applyToAll;
     readonly maximumTextAreaWidth = MAXIMUM_TEXT_AREA_WIDTH;
     readonly maximumSelectedTextWidth = 567;
 
     textWidth: number;
 
-    get isSystemDefault(): boolean {
-        return this._userPreferences.getAddRedactionDefaultOption() === SystemDefaultOption.SYSTEM_DEFAULT;
-    }
-
-    get defaultOption() {
-        const defaultOption = this.isSystemDefault
-            ? this.#getOption(SystemDefaults.ADD_REDACTION_DEFAULT)
-            : this.#getOption(this._userPreferences.getAddRedactionDefaultOption() as RedactOrHintOption);
-        this.dictionaryRequest = defaultOption.value === RedactOrHintOptions.IN_DOSSIER;
-        if (this.dictionaryRequest) {
-            this.#setDictionaries();
-            return defaultOption;
-        }
-        return defaultOption ?? this.options[0];
-    }
-
-    get applyToAll() {
-        return this.isSystemDefault || this._userPreferences.getAddRedactionDefaultExtraOption() === 'undefined'
-            ? this.data.applyToAllDossiers ?? true
-            : stringToBoolean(this._userPreferences.getAddRedactionDefaultExtraOption());
-    }
-
     constructor(
         private readonly _justificationsService: JustificationsService,
         private readonly _dictionaryService: DictionaryService,
@@ -137,6 +115,28 @@ export class RedactTextDialogComponent
         );
     }
 
+    get isSystemDefault(): boolean {
+        return this._userPreferences.getAddRedactionDefaultOption() === SystemDefaultOption.SYSTEM_DEFAULT;
+    }
+
+    get defaultOption() {
+        const defaultOption = this.isSystemDefault
+            ? this.#getOption(SystemDefaults.ADD_REDACTION_DEFAULT)
+            : this.#getOption(this._userPreferences.getAddRedactionDefaultOption() as RedactOrHintOption);
+        this.dictionaryRequest = defaultOption.value === RedactOrHintOptions.IN_DOSSIER;
+        if (this.dictionaryRequest) {
+            this.#setDictionaries();
+            return defaultOption;
+        }
+        return defaultOption ?? this.options[0];
+    }
+
+    get applyToAll() {
+        return this.isSystemDefault || this._userPreferences.getAddRedactionDefaultExtraOption() === 'undefined'
+            ? this.data.applyToAllDossiers ?? true
+            : stringToBoolean(this._userPreferences.getAddRedactionDefaultExtraOption());
+    }
+
     async ngOnInit(): Promise<void> {
         const data = await firstValueFrom(this._justificationsService.getForDossierTemplate(this.#dossier.dossierTemplateId));
         this.legalOptions = data.map(lbm => ({
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
index c6eed1d89..7bd965137 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/remove-redaction-dialog/remove-redaction-dialog.component.ts
@@ -1,5 +1,8 @@
+import { NgStyle } from '@angular/common';
 import { Component, computed } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { MatDialogClose } from '@angular/material/dialog';
 import {
     CircleButtonComponent,
     DetailsRadioComponent,
@@ -11,22 +14,19 @@ import {
     IqserDenyDirective,
     IqserDialogComponent,
 } from '@iqser/common-ui';
-import { getRemoveRedactionOptions, RemoveRedactionOption, RemoveRedactionOptions } from '../../utils/dialog-options';
-import { RemoveRedactionData, RemoveRedactionResult } from '../../utils/dialog-types';
+import { TranslateModule } from '@ngx-translate/core';
 import { Roles } from '@users/roles';
-import { DialogHelpModeKeys } from '../../utils/constants';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { UserPreferenceService } from '@users/user-preference.service';
+import { stringToBoolean } from '@utils/functions';
 import { map } from 'rxjs/operators';
+import { SystemDefaultOption, SystemDefaults } from '../../../account/utils/dialog-defaults';
 import {
     SelectedAnnotationsTableComponent,
     ValueColumn,
 } from '../../components/selected-annotations-table/selected-annotations-table.component';
-import { UserPreferenceService } from '@users/user-preference.service';
-import { SystemDefaultOption, SystemDefaults } from '../../../account/utils/dialog-defaults';
-import { stringToBoolean } from '@utils/functions';
-import { TranslateModule } from '@ngx-translate/core';
-import { NgStyle } from '@angular/common';
-import { MatDialogClose } from '@angular/material/dialog';
+import { DialogHelpModeKeys } from '../../utils/constants';
+import { getRemoveRedactionOptions } from '../../utils/dialog-options';
+import { RemoveRedactionData, RemoveRedactionOption, RemoveRedactionOptions, RemoveRedactionResult } from '../../utils/dialog-types';
 
 @Component({
     templateUrl: './remove-redaction-dialog.component.html',
@@ -51,12 +51,11 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
     RemoveRedactionData,
     RemoveRedactionResult
 > {
+    protected readonly roles = Roles;
     readonly iconButtonTypes = IconButtonTypes;
-
     readonly recommendation = this.data.redactions.every(redaction => redaction.isRecommendation);
     readonly hint = this.data.redactions.every(redaction => redaction.isHint);
     readonly annotationsType = this.hint ? 'hint' : this.recommendation ? 'recommendation' : 'redaction';
-
     readonly optionByType = {
         recommendation: {
             main: this._userPreferences.getRemoveRecommendationDefaultOption(),
@@ -71,7 +70,6 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
             extra: this._userPreferences.getRemoveRedactionDefaultExtraOption(),
         },
     };
-
     readonly systemDefaultByType = {
         recommendation: {
             main: SystemDefaults.REMOVE_RECOMMENDATION_DEFAULT,
@@ -86,24 +84,19 @@ export class RemoveRedactionDialogComponent extends IqserDialogComponent<
             extra: false,
         },
     };
-
+    readonly #applyToAllDossiers = this.systemDefaultByType[this.annotationsType].extra;
     readonly isSystemDefault = this.optionByType[this.annotationsType].main === SystemDefaultOption.SYSTEM_DEFAULT;
     readonly isExtraOptionSystemDefault = this.optionByType[this.annotationsType].extra === 'undefined';
     readonly defaultOptionPreference = this.isSystemDefault
         ? this.systemDefaultByType[this.annotationsType].main
         : this.optionByType[this.annotationsType].main;
     readonly extraOptionPreference = stringToBoolean(this.optionByType[this.annotationsType].extra);
-
-    readonly #applyToAllDossiers = this.systemDefaultByType[this.annotationsType].extra;
-
     readonly options: DetailsRadioOption<RemoveRedactionOption>[] = getRemoveRedactionOptions(
         this.data,
         this.isSystemDefault || this.isExtraOptionSystemDefault ? this.#applyToAllDossiers : this.extraOptionPreference,
     );
     readonly skipped = this.data.redactions.some(annotation => annotation.isSkipped);
     readonly redactedTexts = this.data.redactions.map(annotation => annotation.value);
-
-    protected readonly roles = Roles;
     form: UntypedFormGroup = this._formBuilder.group({
         comment: [null],
         option: [this.defaultOption],
diff --git a/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts
index d0ab2de9d..34f7a90bd 100644
--- a/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/dialogs/resize-redaction-dialog/resize-redaction-dialog.component.ts
@@ -1,5 +1,9 @@
+import { NgIf } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatDialogClose } from '@angular/material/dialog';
+import { MatFormField } from '@angular/material/form-field';
+import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
 import {
     CircleButtonComponent,
     DetailsRadioComponent,
@@ -9,15 +13,11 @@ import {
     IconButtonTypes,
     IqserDialogComponent,
 } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { DictionariesMapService } from '@services/entity-services/dictionaries-map.service';
-import { getResizeRedactionOptions, ResizeOptions, ResizeRedactionOption } from '../../utils/dialog-options';
-import { ResizeRedactionData, ResizeRedactionResult } from '../../utils/dialog-types';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatFormField } from '@angular/material/form-field';
-import { MatOption, MatSelect, MatSelectTrigger } from '@angular/material/select';
-import { MatDialogClose } from '@angular/material/dialog';
-import { NgIf } from '@angular/common';
+import { getResizeRedactionOptions } from '../../utils/dialog-options';
+import { ResizeOptions, ResizeRedactionData, ResizeRedactionOption, ResizeRedactionResult } from '../../utils/dialog-types';
 
 @Component({
     templateUrl: './resize-redaction-dialog.component.html',
diff --git a/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts b/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts
index 566b20797..7673762e6 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/annotation-actions.service.ts
@@ -29,11 +29,11 @@ import { EditRedactionDialogComponent } from '../dialogs/edit-redaction-dialog/e
 import { RedactRecommendationDialogComponent } from '../dialogs/redact-recommendation-dialog/redact-recommendation-dialog.component';
 import { RemoveRedactionDialogComponent } from '../dialogs/remove-redaction-dialog/remove-redaction-dialog.component';
 import { ResizeRedactionDialogComponent } from '../dialogs/resize-redaction-dialog/resize-redaction-dialog.component';
-import { RemoveRedactionOptions } from '../utils/dialog-options';
 import {
     EditRedactionData,
     EditRedactResult,
     RemoveRedactionData,
+    RemoveRedactionOptions,
     RemoveRedactionPermissions,
     RemoveRedactionResult,
     ResizeRedactionData,
diff --git a/apps/red-ui/src/app/modules/file-preview/services/skipped.service.ts b/apps/red-ui/src/app/modules/file-preview/services/skipped.service.ts
index 7f76753b6..2711ce122 100644
--- a/apps/red-ui/src/app/modules/file-preview/services/skipped.service.ts
+++ b/apps/red-ui/src/app/modules/file-preview/services/skipped.service.ts
@@ -1,10 +1,9 @@
 import { effect, Injectable, Signal, signal } from '@angular/core';
 import { bool } from '@iqser/common-ui/lib/utils';
-import { REDAnnotationManager } from '../../pdf-viewer/services/annotation-manager.service';
-import { FilePreviewStateService } from './file-preview-state.service';
 import { getLocalStorageDataByFileId, setLocalStorageDataByFileId } from '@utils/local-storage';
-
-export const HIDE_SKIPPED = 'hide-skipped';
+import { REDAnnotationManager } from '../../pdf-viewer/services/annotation-manager.service';
+import { HIDE_SKIPPED } from '../utils/constants';
+import { FilePreviewStateService } from './file-preview-state.service';
 
 @Injectable()
 export class SkippedService {
diff --git a/apps/red-ui/src/app/modules/file-preview/utils/constants.ts b/apps/red-ui/src/app/modules/file-preview/utils/constants.ts
index ad73a214b..57787e87b 100644
--- a/apps/red-ui/src/app/modules/file-preview/utils/constants.ts
+++ b/apps/red-ui/src/app/modules/file-preview/utils/constants.ts
@@ -53,3 +53,5 @@ export const TextPopups = {
     ADD_RECTANGLE: 'add-rectangle',
     ADD_FALSE_POSITIVE: 'add-false-positive',
 } as const;
+
+export const HIDE_SKIPPED = 'hide-skipped';
diff --git a/apps/red-ui/src/app/modules/file-preview/utils/dialog-options.ts b/apps/red-ui/src/app/modules/file-preview/utils/dialog-options.ts
index a3f00e808..3f9cb2e40 100644
--- a/apps/red-ui/src/app/modules/file-preview/utils/dialog-options.ts
+++ b/apps/red-ui/src/app/modules/file-preview/utils/dialog-options.ts
@@ -6,33 +6,20 @@ import { editRedactionTranslations, redactTextTranslations } from '@translations
 import { removeAnnotationTranslations } from '@translations/remove-annotation-translations';
 import { removeRedactionTranslations } from '@translations/remove-redaction-translations';
 import { resizeRedactionTranslations } from '@translations/resize-redaction-translations';
-import { RemoveRedactionData } from './dialog-types';
+import {
+    RedactOrHintOption,
+    RedactOrHintOptions,
+    RemoveRedactionData,
+    RemoveRedactionOption,
+    RemoveRedactionOptions,
+    ResizeOptions,
+    ResizeRedactionOption,
+} from './dialog-types';
 
 const PIN_ICON = 'red:push-pin';
 const FOLDER_ICON = 'red:folder';
 const REMOVE_FROM_DICT_ICON = 'red:remove-from-dict';
 
-export const RedactOrHintOptions = {
-    ONLY_HERE: 'ONLY_HERE',
-    IN_DOSSIER: 'IN_DOSSIER',
-} as const;
-
-export type RedactOrHintOption = keyof typeof RedactOrHintOptions;
-
-export const ResizeOptions = RedactOrHintOptions;
-export type ResizeRedactionOption = RedactOrHintOption;
-
-export const RemoveRedactionOptions = {
-    ONLY_HERE: 'ONLY_HERE',
-    IN_DOSSIER: 'IN_DOSSIER',
-    FALSE_POSITIVE: 'FALSE_POSITIVE',
-    DO_NOT_RECOMMEND: 'DO_NOT_RECOMMEND',
-} as const;
-export const RemoveAnnotationOptions = RemoveRedactionOptions;
-
-export type RemoveRedactionOption = keyof typeof RemoveRedactionOptions;
-export type RemoveAnnotationOption = RemoveRedactionOption;
-
 export const getEditRedactionOptions = (
     dossierName: string,
     applyToAllDossiers: boolean,
diff --git a/apps/red-ui/src/app/modules/file-preview/utils/dialog-types.ts b/apps/red-ui/src/app/modules/file-preview/utils/dialog-types.ts
index ff6228d21..90b48b1dd 100644
--- a/apps/red-ui/src/app/modules/file-preview/utils/dialog-types.ts
+++ b/apps/red-ui/src/app/modules/file-preview/utils/dialog-types.ts
@@ -2,7 +2,27 @@ import { DetailsRadioOption } from '@iqser/common-ui';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper';
 import { Dictionary, Dossier, File, IAddRedactionRequest, IManualRedactionEntry } from '@red/domain';
-import { RemoveRedactionOption } from './dialog-options';
+
+export const RedactOrHintOptions = {
+    ONLY_HERE: 'ONLY_HERE',
+    IN_DOSSIER: 'IN_DOSSIER',
+} as const;
+
+export type RedactOrHintOption = keyof typeof RedactOrHintOptions;
+
+export const ResizeOptions = RedactOrHintOptions;
+export type ResizeRedactionOption = RedactOrHintOption;
+
+export const RemoveRedactionOptions = {
+    ONLY_HERE: 'ONLY_HERE',
+    IN_DOSSIER: 'IN_DOSSIER',
+    FALSE_POSITIVE: 'FALSE_POSITIVE',
+    DO_NOT_RECOMMEND: 'DO_NOT_RECOMMEND',
+} as const;
+export const RemoveAnnotationOptions = RemoveRedactionOptions;
+
+export type RemoveRedactionOption = keyof typeof RemoveRedactionOptions;
+export type RemoveAnnotationOption = RemoveRedactionOption;
 
 export interface RedactTextData {
     manualRedactionEntryWrapper: ManualRedactionEntryWrapper;
diff --git a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts
index 897fccf87..2d9efa7cd 100644
--- a/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts
+++ b/apps/red-ui/src/app/modules/pdf-viewer/services/annotation-manager.service.ts
@@ -3,15 +3,15 @@ import { bool, List } from '@iqser/common-ui/lib/utils';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { Core } from '@pdftron/webviewer';
 import { getLast, urlFileId } from '@utils/functions';
+import { getLocalStorageDataByFileId } from '@utils/local-storage';
 import { NGXLogger } from 'ngx-logger';
 import { Subject } from 'rxjs';
+import { HIDE_SKIPPED } from '../../file-preview/utils/constants';
 import { AnnotationToolNames } from '../utils/constants';
 import { asList, getId, isStringOrWrapper } from '../utils/functions';
 import { AnnotationPredicate, DeleteAnnotationsOptions } from '../utils/types';
 import AnnotationManager = Core.AnnotationManager;
 import Annotation = Core.Annotations.Annotation;
-import { getLocalStorageDataByFileId } from '@utils/local-storage';
-import { HIDE_SKIPPED } from '../../file-preview/services/skipped.service';
 
 const MODIFY_ACTION = 'modify';
 const RESIZE_OPTION = 'resize';
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
index 0d2aea09d..60e39799a 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
@@ -1,17 +1,18 @@
+import { AsyncPipe, NgIf } from '@angular/common';
 import { Component, Input, OnChanges } from '@angular/core';
-import { CircleButtonComponent, IqserAllowDirective, IqserPermissionsService } from '@iqser/common-ui';
+import { CircleButtonComponent, IqserAllowDirective, IqserPermissionsService, largeDialogConfig } from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { TranslateModule } from '@ngx-translate/core';
 import type { Dossier, File, User } from '@red/domain';
 import { FilesMapService } from '@services/files/files-map.service';
 import { PermissionsService } from '@services/permissions.service';
 import { ReanalysisService } from '@services/reanalysis.service';
+import { FileDownloadBtnComponent } from '@shared/components/buttons/file-download-btn/file-download-btn.component';
 import { LongPressDirective, LongPressEvent } from '@shared/directives/long-press.directive';
 import { Roles } from '@users/roles';
 import { UserPreferenceService } from '@users/user-preference.service';
+import { EditDossierDialogComponent } from '../../dialogs/edit-dossier-dialog/edit-dossier-dialog.component';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
-import { TranslateModule } from '@ngx-translate/core';
-import { AsyncPipe, NgIf } from '@angular/common';
-import { FileDownloadBtnComponent } from '@shared/components/buttons/file-download-btn/file-download-btn.component';
 
 @Component({
     selector: 'redaction-dossiers-listing-actions [dossier]',
@@ -54,7 +55,7 @@ export class DossiersListingActionsComponent implements OnChanges {
     }
 
     openEditDossierDialog(dossierId: string): void {
-        this._dialogService.openDialog('editDossier', { dossierId });
+        this._dialogService.open(EditDossierDialogComponent, { dossierId }, { ...largeDialogConfig, width: '98vw', maxWidth: '98vw' });
     }
 
     async reanalyseDossier(dossier: Dossier): Promise<void> {
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
index 82dc74088..d95562996 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
@@ -42,12 +42,13 @@
                     [dossier]="dossier()"
                 ></redaction-edit-dossier-download-package>
 
-                <redaction-edit-dossier-dictionary
-                    *ngIf="activeNav() === 'dossierDictionary'"
-                    [dossier]="dossier()"
-                ></redaction-edit-dossier-dictionary>
+                @defer (when activeNav() === 'dossierDictionary') {
+                    <redaction-edit-dossier-dictionary [dossier]="dossier()"></redaction-edit-dossier-dictionary>
+                }
 
-                <redaction-edit-dossier-team *ngIf="activeNav() === 'members'" [dossier]="dossier()"></redaction-edit-dossier-team>
+                @if (activeNav() === 'members') {
+                    <redaction-edit-dossier-team [dossier]="dossier()"></redaction-edit-dossier-team>
+                }
 
                 <redaction-edit-dossier-attributes
                     *ngIf="activeNav() === 'dossierAttributes'"
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
index 7dae7a2d2..48db2bd5d 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
@@ -1,9 +1,10 @@
+import { NgForOf, NgIf } from '@angular/common';
 import { AfterViewInit, Component, computed, Inject, Signal, signal, untracked, viewChild, WritableSignal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { Dossier } from '@red/domain';
-import { EditDossierGeneralInfoComponent } from './general-info/edit-dossier-general-info.component';
-import { EditDossierDownloadPackageComponent } from './download-package/edit-dossier-download-package.component';
-import { EditDossierSectionInterface } from './edit-dossier-section.interface';
+import { MatIcon } from '@angular/material/icon';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { SideNavComponent } from '@common-ui/shared';
 import {
     BaseDialogComponent,
     CircleButtonComponent,
@@ -14,20 +15,20 @@ import {
     IqserDenyDirective,
     SaveOptions,
 } from '@iqser/common-ui';
-import { EditDossierDictionaryComponent } from './dictionary/edit-dossier-dictionary.component';
-import { EditDossierAttributesComponent } from './attributes/edit-dossier-attributes.component';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { EditDossierTeamComponent } from './edit-dossier-team/edit-dossier-team.component';
-import { PermissionsService } from '@services/permissions.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { Dossier } from '@red/domain';
+import { ConfigService } from '@services/config.service';
 import { DossiersService } from '@services/dossiers/dossiers.service';
 import { dossiersServiceProvider } from '@services/entity-services/dossiers.service.provider';
+import { PermissionsService } from '@services/permissions.service';
 import { Roles } from '@users/roles';
-import { ConfigService } from '@services/config.service';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { TranslateModule } from '@ngx-translate/core';
-import { SideNavComponent } from '@common-ui/shared';
-import { NgForOf, NgIf } from '@angular/common';
-import { MatIcon } from '@angular/material/icon';
+import { EditDossierAttributesComponent } from './attributes/edit-dossier-attributes.component';
+import { EditDossierDictionaryComponent } from './dictionary/edit-dossier-dictionary.component';
+import { EditDossierDownloadPackageComponent } from './download-package/edit-dossier-download-package.component';
+import { EditDossierSectionInterface } from './edit-dossier-section.interface';
+import { EditDossierTeamComponent } from './edit-dossier-team/edit-dossier-team.component';
+import { EditDossierTeamModule } from './edit-dossier-team/edit-dossier-team.module';
+import { EditDossierGeneralInfoComponent } from './general-info/edit-dossier-general-info.component';
 
 type Section = 'dossierInfo' | 'downloadPackage' | 'dossierDictionary' | 'members' | 'dossierAttributes';
 
@@ -54,7 +55,7 @@ interface NavItem {
         EditDossierGeneralInfoComponent,
         EditDossierDownloadPackageComponent,
         EditDossierDictionaryComponent,
-        EditDossierTeamComponent,
+        EditDossierTeamModule,
         EditDossierAttributesComponent,
         IconButtonComponent,
         HelpButtonComponent,
@@ -75,11 +76,11 @@ export class EditDossierDialogComponent extends BaseDialogComponent implements A
     readonly showHeading: Signal<boolean>;
     readonly showActionButtons: Signal<boolean>;
 
-    generalInfoComponent = viewChild(EditDossierGeneralInfoComponent);
-    downloadPackageComponent = viewChild(EditDossierDownloadPackageComponent);
-    dictionaryComponent = viewChild(EditDossierDictionaryComponent);
-    membersComponent = viewChild(EditDossierTeamComponent);
-    attributesComponent = viewChild(EditDossierAttributesComponent);
+    readonly generalInfoComponent = viewChild(EditDossierGeneralInfoComponent);
+    readonly downloadPackageComponent = viewChild(EditDossierDownloadPackageComponent);
+    readonly dictionaryComponent = viewChild(EditDossierDictionaryComponent);
+    readonly membersComponent = viewChild(EditDossierTeamComponent);
+    readonly attributesComponent = viewChild(EditDossierAttributesComponent);
 
     constructor(
         private readonly _dossiersService: DossiersService,
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts
index 8bc3dc239..f8ec75908 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { getConfig, InputWithActionComponent, RoundCheckboxComponent, StopPropagationDirective } from '@iqser/common-ui';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { getConfig } from '@iqser/common-ui';
 import { Debounce } from '@iqser/common-ui/lib/utils';
 import { Dossier, IDossierRequest } from '@red/domain';
 import { DossiersService } from '@services/dossiers/dossiers.service';
@@ -11,51 +11,25 @@ import { compareLists } from '@utils/functions';
 import { firstValueFrom } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
-import { MatFormField } from '@angular/material/form-field';
-import { MatOption, MatSelect } from '@angular/material/select';
-import { NamePipe } from '@common-ui/users/name.pipe';
-import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
-import { TeamMembersComponent } from '@shared/components/team-members/team-members.component';
-import { TranslateModule } from '@ngx-translate/core';
-import { InitialsAvatarComponent } from '@common-ui/users';
-import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'redaction-edit-dossier-team',
     templateUrl: './edit-dossier-team.component.html',
     styleUrls: ['./edit-dossier-team.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [
-        ReactiveFormsModule,
-        MatFormField,
-        MatSelect,
-        MatOption,
-        NamePipe,
-        NgForOf,
-        NgIf,
-        AsyncPipe,
-        TeamMembersComponent,
-        TranslateModule,
-        InputWithActionComponent,
-        InitialsAvatarComponent,
-        StopPropagationDirective,
-        RoundCheckboxComponent,
-        MatIcon,
-    ],
 })
 export class EditDossierTeamComponent implements EditDossierSectionInterface, OnChanges {
+    readonly #userService = inject(UserService);
+    readonly #dossiersService = inject(DossiersService);
+    readonly #permissionsService = inject(PermissionsService);
+    readonly #filesService = inject(FilesService);
     form = this.#getForm();
+    readonly #formValue$ = this.form.valueChanges;
     searchQuery = '';
     @Input() dossier: Dossier;
     membersSelectOptions: string[] = [];
     readonly isDocumine = getConfig().IS_DOCUMINE;
-    readonly #userService = inject(UserService);
     readonly ownersSelectOptions = this.#userService.all.filter(u => u.isManager).map(m => m.id);
-    readonly #dossiersService = inject(DossiersService);
-    readonly #permissionsService = inject(PermissionsService);
-    readonly #filesService = inject(FilesService);
-    readonly #formValue$ = this.form.valueChanges;
     readonly selectedReviewers$ = this.#formValue$.pipe(map(v => v.members.filter(m => !v.approvers.includes(m))));
     readonly selectedApprovers$ = this.#formValue$.pipe(map(v => v.approvers));
 
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.module.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.module.ts
new file mode 100644
index 000000000..8e0569827
--- /dev/null
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.module.ts
@@ -0,0 +1,42 @@
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormField } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { InitialsAvatarComponent } from '@common-ui/users';
+import { NamePipe } from '@common-ui/users/name.pipe';
+import {
+    CircleButtonComponent,
+    InputWithActionComponent,
+    IqserAllowDirective,
+    RoundCheckboxComponent,
+    StopPropagationDirective,
+} from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
+import { TeamMembersComponent } from '@shared/components/team-members/team-members.component';
+import { EditDossierTeamComponent } from './edit-dossier-team.component';
+
+@NgModule({
+    declarations: [EditDossierTeamComponent, TeamMembersComponent],
+    exports: [EditDossierTeamComponent, TeamMembersComponent],
+    imports: [
+        ReactiveFormsModule,
+        MatFormField,
+        MatSelect,
+        MatOption,
+        NamePipe,
+        NgForOf,
+        NgIf,
+        AsyncPipe,
+        TranslateModule,
+        InputWithActionComponent,
+        InitialsAvatarComponent,
+        StopPropagationDirective,
+        RoundCheckboxComponent,
+        MatIcon,
+        CircleButtonComponent,
+        IqserAllowDirective,
+    ],
+})
+export class EditDossierTeamModule {}
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index 9eff96343..cc63d8f11 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -1,12 +1,16 @@
+import { NgForOf, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { Dossier, DOSSIER_TEMPLATE_ID, IDossierRequest, IDossierTemplate } from '@red/domain';
-import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
-import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
-import { PermissionsService } from '@services/permissions.service';
-import { Router } from '@angular/router';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogRef } from '@angular/material/dialog';
-import { EditDossierDialogComponent } from '../edit-dossier-dialog.component';
+import { MatFormField, MatSuffix } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
+import { Router } from '@angular/router';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { SmallChipComponent } from '@common-ui/shared';
 import {
     ConfirmOptions,
     HasScrollbarDirective,
@@ -17,25 +21,21 @@ import {
     TitleColors,
     Toaster,
 } from '@iqser/common-ui';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
-import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
-import { firstValueFrom } from 'rxjs';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { DossiersService } from '@services/dossiers/dossiers.service';
-import { TrashService } from '@services/entity-services/trash.service';
+import { Dossier, DOSSIER_TEMPLATE_ID, IDossierRequest, IDossierTemplate } from '@red/domain';
+import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { ArchivedDossiersService } from '@services/dossiers/archived-dossiers.service';
+import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
+import { DossiersService } from '@services/dossiers/dossiers.service';
 import { DossierStatesMapService } from '@services/entity-services/dossier-states-map.service';
-import dayjs from 'dayjs';
+import { TrashService } from '@services/entity-services/trash.service';
+import { PermissionsService } from '@services/permissions.service';
 import { dateWithoutTime } from '@utils/functions';
-import { MatFormField, MatSuffix } from '@angular/material/form-field';
-import { MatOption, MatSelect } from '@angular/material/select';
-import { NgForOf, NgIf } from '@angular/common';
-import { MatTooltip } from '@angular/material/tooltip';
-import { SmallChipComponent } from '@common-ui/shared';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatIcon } from '@angular/material/icon';
+import dayjs from 'dayjs';
+import { firstValueFrom } from 'rxjs';
+import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
+import { type EditDossierDialogComponent } from '../edit-dossier-dialog.component';
+import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-dossier-section.interface';
 
 @Component({
     selector: 'redaction-edit-dossier-general-info',
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/services/dossiers-dialog.service.ts b/apps/red-ui/src/app/modules/shared-dossiers/services/dossiers-dialog.service.ts
index 24c67d4a9..e2cb02fac 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/services/dossiers-dialog.service.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/services/dossiers-dialog.service.ts
@@ -1,10 +1,9 @@
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { ConfirmationDialogComponent, DialogConfig, DialogService, largeDialogConfig } from '@iqser/common-ui';
+import { ConfirmationDialogComponent, DialogConfig, DialogService } from '@iqser/common-ui';
 import { ImportRedactionsDialogComponent } from '../../file-preview/dialogs/import-redactions-dialog/import-redactions-dialog';
-import { EditDossierDialogComponent } from '../dialogs/edit-dossier-dialog/edit-dossier-dialog.component';
 
-type DialogType = 'confirm' | 'editDossier' | 'importRedactions';
+type DialogType = 'confirm' | 'importRedactions';
 
 @Injectable({
     providedIn: 'root',
@@ -15,10 +14,6 @@ export class DossiersDialogService extends DialogService<DialogType> {
             component: ConfirmationDialogComponent,
             dialogConfig: { disableClose: false },
         },
-        editDossier: {
-            component: EditDossierDialogComponent,
-            dialogConfig: { ...largeDialogConfig, width: '98vw', maxWidth: '98vw' },
-        },
         importRedactions: {
             component: ImportRedactionsDialogComponent,
             dialogConfig: { disableClose: false },
diff --git a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts
index 90e0701f3..792eabee1 100644
--- a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts
@@ -1,21 +1,17 @@
 import { Component, ElementRef, EventEmitter, inject, Input, OnChanges, Output, ViewChild } from '@angular/core';
-import { CircleButtonComponent, CircleButtonTypes, IqserAllowDirective } from '@iqser/common-ui';
-import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
-import { Roles } from '@users/roles';
-import { User } from '@red/domain';
-import { UserService } from '@users/user.service';
-import { getCurrentUser, InitialsAvatarComponent } from '@iqser/common-ui/lib/users';
+import { CircleButtonTypes, largeDialogConfig } from '@iqser/common-ui';
+import { getCurrentUser } from '@iqser/common-ui/lib/users';
 import { List } from '@iqser/common-ui/lib/utils';
-import { NgForOf, NgIf } from '@angular/common';
-import { MatIcon } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
+import { User } from '@red/domain';
+import { Roles } from '@users/roles';
+import { UserService } from '@users/user.service';
+import { EditDossierDialogComponent } from '../../../shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component';
+import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
 
 @Component({
     selector: 'redaction-team-members',
     templateUrl: './team-members.component.html',
     styleUrls: ['./team-members.component.scss'],
-    standalone: true,
-    imports: [NgForOf, MatIcon, NgIf, CircleButtonComponent, IqserAllowDirective, TranslateModule, InitialsAvatarComponent],
 })
 export class TeamMembersComponent implements OnChanges {
     readonly circleButtonTypes = CircleButtonTypes;
@@ -65,6 +61,6 @@ export class TeamMembersComponent implements OnChanges {
 
     openEditDossierDialog(): void {
         const data = { dossierId: this.dossierId, section: 'members' };
-        this._dialogService.openDialog('editDossier', data);
+        this._dialogService.open(EditDossierDialogComponent, data, { ...largeDialogConfig, width: '98vw', maxWidth: '98vw' });
     }
 }
diff --git a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
index f1e15ae5b..b79ea0e3d 100644
--- a/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.ts
@@ -1,6 +1,13 @@
+import { NgForOf, NgIf } from '@angular/common';
 import { Component, Inject, OnInit } from '@angular/core';
 import { ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatFormField, MatSuffix } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { MatTooltip } from '@angular/material/tooltip';
 import { Router } from '@angular/router';
 import {
     BaseDialogComponent,
@@ -12,27 +19,22 @@ import {
     IconButtonTypes,
     IqserDenyDirective,
     IqserPermissionsService,
+    largeDialogConfig,
     SaveOptions,
 } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 import { DOSSIER_TEMPLATE_ID, DownloadFileType, IDossierRequest, IDossierTemplate, IReportTemplate } from '@red/domain';
 import { DossierTemplatesService } from '@services/dossier-templates/dossier-templates.service';
 import { ActiveDossiersService } from '@services/dossiers/active-dossiers.service';
 import { ReportTemplateService } from '@services/report-template.service';
+import { WatermarkSelectorComponent } from '@shared/components/dossier-watermark-selector/watermark-selector.component';
+import { SelectComponent } from '@shared/components/select/select.component';
 import { downloadTypesTranslations } from '@translations/download-types-translations';
 import { Roles } from '@users/roles';
 import dayjs from 'dayjs';
 import { firstValueFrom } from 'rxjs';
+import { EditDossierDialogComponent } from '../../../shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component';
 import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
-import { NgForOf, NgIf } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatFormField, MatSuffix } from '@angular/material/form-field';
-import { MatOption, MatSelect } from '@angular/material/select';
-import { MatTooltip } from '@angular/material/tooltip';
-import { WatermarkSelectorComponent } from '@shared/components/dossier-watermark-selector/watermark-selector.component';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatIcon } from '@angular/material/icon';
-import { SelectComponent } from '@shared/components/select/select.component';
 
 interface DialogData {
     readonly dossierTemplateId?: string;
@@ -123,10 +125,14 @@ export class AddDossierDialogComponent extends BaseDialogComponent implements On
         if (savedDossier) {
             await this._router.navigate([savedDossier.routerLink]);
             if (options?.nextAction) {
-                this._dialogService.openDialog('editDossier', {
-                    dossierId: savedDossier.id,
-                    section: 'members',
-                });
+                this._dialogService.open(
+                    EditDossierDialogComponent,
+                    {
+                        dossierId: savedDossier.id,
+                        section: 'members',
+                    },
+                    { ...largeDialogConfig, width: '98vw', maxWidth: '98vw' },
+                );
             }
             this._dialogRef.close(savedDossier);
         }
diff --git a/apps/red-ui/src/app/translations/remove-annotation-translations.ts b/apps/red-ui/src/app/translations/remove-annotation-translations.ts
index 491bb10c9..478c9de8d 100644
--- a/apps/red-ui/src/app/translations/remove-annotation-translations.ts
+++ b/apps/red-ui/src/app/translations/remove-annotation-translations.ts
@@ -1,6 +1,6 @@
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { RemoveAnnotationOption } from '../modules/file-preview/utils/dialog-options';
 import { DialogOption } from '@translations/redact-text-translations';
+import { RemoveAnnotationOption } from '../modules/file-preview/utils/dialog-types';
 
 export const removeAnnotationTranslations: { [key in RemoveAnnotationOption]: DialogOption } = {
     ONLY_HERE: {
diff --git a/apps/red-ui/src/app/translations/remove-redaction-translations.ts b/apps/red-ui/src/app/translations/remove-redaction-translations.ts
index 615cb7bb9..41d5f8b86 100644
--- a/apps/red-ui/src/app/translations/remove-redaction-translations.ts
+++ b/apps/red-ui/src/app/translations/remove-redaction-translations.ts
@@ -1,6 +1,6 @@
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { RemoveRedactionOption } from '../modules/file-preview/utils/dialog-options';
 import { DialogOption } from '@translations/redact-text-translations';
+import { RemoveRedactionOption } from '../modules/file-preview/utils/dialog-types';
 
 export const removeRedactionTranslations: { [key in RemoveRedactionOption]: DialogOption } = {
     ONLY_HERE: {
diff --git a/apps/red-ui/src/app/users/user-preference.service.ts b/apps/red-ui/src/app/users/user-preference.service.ts
index 6f2f85211..4b05ce78c 100644
--- a/apps/red-ui/src/app/users/user-preference.service.ts
+++ b/apps/red-ui/src/app/users/user-preference.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { IqserUserPreferenceService, ListingMode } from '@iqser/common-ui';
-import { RedactOrHintOption, RemoveRedactionOption } from '../modules/file-preview/utils/dialog-options';
 import { SystemDefaultOption, SystemDefaultType } from '../modules/account/utils/dialog-defaults';
+import { RedactOrHintOption, RemoveRedactionOption } from '../modules/file-preview/utils/dialog-types';
 
 export const PreferencesKeys = {
     dossierRecent: 'Dossier-Recent',
diff --git a/apps/red-ui/src/app/utils/filter-utils.ts b/apps/red-ui/src/app/utils/filter-utils.ts
index c7b1439fd..68bf58595 100644
--- a/apps/red-ui/src/app/utils/filter-utils.ts
+++ b/apps/red-ui/src/app/utils/filter-utils.ts
@@ -1,5 +1,5 @@
 import { handleCheckedValue, INestedFilter } from '@iqser/common-ui/lib/filtering';
-import { ComponentLogEntry, Dossier, File, User, UserType } from '@red/domain';
+import { Dossier, File, User, UserType } from '@red/domain';
 
 export function handleFilterDelta(oldFilters: INestedFilter[], newFilters: INestedFilter[], allFilters: INestedFilter[]) {
     const newFiltersDelta = {};
diff --git a/libs/common-ui b/libs/common-ui
index 04ae68891..d595a22db 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 04ae68891c9298b92327868006d1e7c79529c7e6
+Subproject commit d595a22db164ec8669da572fdd49a28b464eb61a
diff --git a/libs/red-domain/src/lib/dossier-attributes/dossier-attribute-config.model.ts b/libs/red-domain/src/lib/dossier-attributes/dossier-attribute-config.model.ts
index 552640799..9fa724999 100644
--- a/libs/red-domain/src/lib/dossier-attributes/dossier-attribute-config.model.ts
+++ b/libs/red-domain/src/lib/dossier-attributes/dossier-attribute-config.model.ts
@@ -1,6 +1,5 @@
 import { IListable } from '@iqser/common-ui';
-import { IDossierAttributeConfig } from './dossier-attribute-config';
-import { DossierAttributeConfigType } from './types';
+import { DossierAttributeConfigType, IDossierAttributeConfig } from './dossier-attribute-config';
 
 export class DossierAttributeConfig implements IDossierAttributeConfig, IListable {
     readonly id: string;
diff --git a/libs/red-domain/src/lib/dossier-attributes/dossier-attribute-config.ts b/libs/red-domain/src/lib/dossier-attributes/dossier-attribute-config.ts
index 43687f835..d80dd873b 100644
--- a/libs/red-domain/src/lib/dossier-attributes/dossier-attribute-config.ts
+++ b/libs/red-domain/src/lib/dossier-attributes/dossier-attribute-config.ts
@@ -1,4 +1,13 @@
-import { DossierAttributeConfigType } from './types';
+export const DossierAttributeConfigTypes = {
+    DATE: 'DATE',
+    IMAGE: 'IMAGE',
+    NUMBER: 'NUMBER',
+    TEXT: 'TEXT',
+} as const;
+
+export type DossierAttributeConfigType = keyof typeof DossierAttributeConfigTypes;
+
+export type DossierAttributeWithValue = IDossierAttributeConfig & { value: string };
 
 export interface IDossierAttributeConfig {
     readonly id: string;
diff --git a/libs/red-domain/src/lib/dossier-attributes/index.ts b/libs/red-domain/src/lib/dossier-attributes/index.ts
index f13a671ec..536fd9261 100644
--- a/libs/red-domain/src/lib/dossier-attributes/index.ts
+++ b/libs/red-domain/src/lib/dossier-attributes/index.ts
@@ -1,4 +1,3 @@
-export * from './types';
 export * from './dossier-attribute-config';
 export * from './dossier-attribute-config.model';
 export * from './dossier-attribute';
diff --git a/libs/red-domain/src/lib/dossier-attributes/types.ts b/libs/red-domain/src/lib/dossier-attributes/types.ts
deleted file mode 100644
index 475eb38ee..000000000
--- a/libs/red-domain/src/lib/dossier-attributes/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { IDossierAttributeConfig } from './dossier-attribute-config';
-
-export const DossierAttributeConfigTypes = {
-    DATE: 'DATE',
-    IMAGE: 'IMAGE',
-    NUMBER: 'NUMBER',
-    TEXT: 'TEXT',
-} as const;
-
-export type DossierAttributeConfigType = keyof typeof DossierAttributeConfigTypes;
-
-export type DossierAttributeWithValue = IDossierAttributeConfig & { value: string };
diff --git a/libs/red-domain/src/lib/dossier-stats/dossier-stats.model.ts b/libs/red-domain/src/lib/dossier-stats/dossier-stats.model.ts
index bf53edf95..7a9a2e4ea 100644
--- a/libs/red-domain/src/lib/dossier-stats/dossier-stats.model.ts
+++ b/libs/red-domain/src/lib/dossier-stats/dossier-stats.model.ts
@@ -1,4 +1,11 @@
-import { isProcessingStatuses, OCR_STATES, PENDING_STATES, PROCESSED_STATES, PROCESSING_STATES, ProcessingFileStatus } from '../files';
+import {
+    isProcessingStatuses,
+    OCR_STATES,
+    PENDING_STATES,
+    PROCESSED_STATES,
+    PROCESSING_STATES,
+    ProcessingFileStatus,
+} from '../files/types';
 import { IDossierStats } from './dossier-stats';
 import { FileCountPerProcessingStatus, FileCountPerWorkflowStatus } from './types';
 
diff --git a/libs/red-domain/src/lib/dossier-stats/types.ts b/libs/red-domain/src/lib/dossier-stats/types.ts
index 54a188567..b57ca4ecd 100644
--- a/libs/red-domain/src/lib/dossier-stats/types.ts
+++ b/libs/red-domain/src/lib/dossier-stats/types.ts
@@ -1,4 +1,4 @@
-import { ProcessingFileStatus, WorkflowFileStatus } from '../files';
+import { ProcessingFileStatus, WorkflowFileStatus } from '../files/types';
 
 export type FileCountPerWorkflowStatus = { [key in WorkflowFileStatus]?: number };
 export type FileCountPerProcessingStatus = { [key in ProcessingFileStatus]?: number };
diff --git a/libs/red-domain/src/lib/dossiers/dossier.model.ts b/libs/red-domain/src/lib/dossiers/dossier.model.ts
index 859694fd2..e3aae5b61 100644
--- a/libs/red-domain/src/lib/dossiers/dossier.model.ts
+++ b/libs/red-domain/src/lib/dossiers/dossier.model.ts
@@ -1,6 +1,6 @@
 import { IListable } from '@iqser/common-ui';
 import { List } from '@iqser/common-ui/lib/utils';
-import { DownloadFileType } from '../shared';
+import { DownloadFileType } from '../shared/types';
 import { ARCHIVE_ROUTE, DOSSIERS_ROUTE } from './constants';
 import { IDossier } from './dossier';
 
diff --git a/libs/red-domain/src/lib/dossiers/dossier.ts b/libs/red-domain/src/lib/dossiers/dossier.ts
index 0c8a48f10..af6762120 100644
--- a/libs/red-domain/src/lib/dossiers/dossier.ts
+++ b/libs/red-domain/src/lib/dossiers/dossier.ts
@@ -1,5 +1,5 @@
-import { DownloadFileType } from '../shared';
 import { List } from '@iqser/common-ui/lib/utils';
+import { DownloadFileType } from '../shared/types';
 
 export interface IDossier {
     readonly approverIds: List;
diff --git a/libs/red-domain/src/lib/files/file.model.ts b/libs/red-domain/src/lib/files/file.model.ts
index 8222de8ce..5146f18fb 100644
--- a/libs/red-domain/src/lib/files/file.model.ts
+++ b/libs/red-domain/src/lib/files/file.model.ts
@@ -1,8 +1,8 @@
 import { Entity } from '@iqser/common-ui';
-import { ProcessingType, ProcessingTypes } from '../dossier-stats';
-import { ARCHIVE_ROUTE, DOSSIERS_ROUTE } from '../dossiers';
-import { FileAttributes } from '../file-attributes';
-import { StatusSorter } from '../shared';
+import { ProcessingType, ProcessingTypes } from '../dossier-stats/dossier-stats.model';
+import { ARCHIVE_ROUTE, DOSSIERS_ROUTE } from '../dossiers/constants';
+import { FileAttributes } from '../file-attributes/file-attributes';
+import { StatusSorter } from '../shared/sorters/status-sorter';
 import { IFile } from './file';
 import {
     isFullProcessingStatuses,
diff --git a/libs/red-domain/src/lib/pages/viewed-page.model.ts b/libs/red-domain/src/lib/pages/viewed-page.model.ts
index 21fb8bc6f..5a8f0fef0 100644
--- a/libs/red-domain/src/lib/pages/viewed-page.model.ts
+++ b/libs/red-domain/src/lib/pages/viewed-page.model.ts
@@ -1,5 +1,5 @@
 import { Entity } from '@iqser/common-ui';
-import { IViewedPage } from '.';
+import { IViewedPage } from './viewed-page';
 
 export class ViewedPage extends Entity<IViewedPage, number> {
     readonly fileId: string;
diff --git a/libs/red-domain/src/lib/shared/colors.ts b/libs/red-domain/src/lib/shared/colors.ts
index 86f5d289d..a58af7fb5 100644
--- a/libs/red-domain/src/lib/shared/colors.ts
+++ b/libs/red-domain/src/lib/shared/colors.ts
@@ -1,3 +1,3 @@
-import { WorkflowFileStatus } from '../files';
+import { WorkflowFileStatus } from '../files/types';
 
 export type Color = WorkflowFileStatus | string;
diff --git a/libs/red-domain/src/lib/shared/expandable-file-actions.ts b/libs/red-domain/src/lib/shared/expandable-file-actions.ts
index ec27e0575..5293615bb 100644
--- a/libs/red-domain/src/lib/shared/expandable-file-actions.ts
+++ b/libs/red-domain/src/lib/shared/expandable-file-actions.ts
@@ -1,7 +1,7 @@
-import { Observable } from 'rxjs';
 import { CircleButtonType, ITrackable } from '@iqser/common-ui';
-import { type File } from '../files';
-import { type Dossier } from '../dossiers';
+import { Observable } from 'rxjs';
+import { Dossier } from '../dossiers/dossier.model';
+import { File } from '../files/file.model';
 
 export const ActionTypes = {
     circleBtn: 'circleBtn',
diff --git a/libs/red-domain/src/lib/shared/sorters/status-sorter.ts b/libs/red-domain/src/lib/shared/sorters/status-sorter.ts
index 52d7c1377..1b9ff671f 100644
--- a/libs/red-domain/src/lib/shared/sorters/status-sorter.ts
+++ b/libs/red-domain/src/lib/shared/sorters/status-sorter.ts
@@ -1,4 +1,4 @@
-import { WorkflowFileStatus } from '../../files';
+import { WorkflowFileStatus } from '../../files/types';
 
 type StatusSorterItem = { key: WorkflowFileStatus } | WorkflowFileStatus | string;
 type Sorter = Record<WorkflowFileStatus, number> & {

From b7dbac06950a8c2f1f24f7d3095926fbe6fd2d49 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan.percic.ext@knecon.com>
Date: Thu, 20 Jun 2024 10:28:20 +0300
Subject: [PATCH 16/17] unfuck circular imports

---
 .../dossier-details.component.html            |  6 +--
 .../dossier-details.component.ts              | 52 ++++++++++---------
 .../edit-dossier-dialog.component.html        |  2 +-
 .../edit-dossier-dialog.component.ts          |  3 +-
 .../edit-dossier-team.component.ts            | 30 ++++++++++-
 .../edit-dossier-team.module.ts               | 42 ---------------
 .../team-members/team-members.component.ts    | 17 ++++--
 7 files changed, 72 insertions(+), 80 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.module.ts

diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
index 11f76be95..09ba451ce 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.html
@@ -20,9 +20,9 @@
                 <iqser-circle-button
                     (action)="editingOwner = true"
                     *allow="roles.dossiers.edit; if: currentUser.isManager"
+                    [attr.help-mode-key]="'dashboard_in_dossier'"
                     [icon]="'iqser:edit'"
                     [tooltip]="'dossier-details.edit-owner' | translate"
-                    [attr.help-mode-key]="'dashboard_in_dossier'"
                     class="ml-14"
                 ></iqser-circle-button>
             </ng-container>
@@ -49,7 +49,7 @@
                 [strokeWidth]="15"
                 [subtitles]="[
                     'dossier-overview.dossier-details.charts.documents-in-dossier' | translate,
-                    'dossier-overview.dossier-details.charts.pages-in-dossier' | translate
+                    'dossier-overview.dossier-details.charts.pages-in-dossier' | translate,
                 ]"
                 direction="row"
             ></redaction-donut-chart>
@@ -59,8 +59,8 @@
             <div class="all-caps-label mb-8" translate="dossier-details.document-status"></div>
             <iqser-progress-bar
                 *ngFor="let config of statusConfig"
-                [config]="config"
                 [attr.help-mode-key]="'dashboard_in_dossier'"
+                [config]="config"
                 filterKey="processingTypeFilters"
             ></iqser-progress-bar>
         </div>
diff --git a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts
index 61e3ec577..75c7cf9d5 100644
--- a/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/dossier-details/dossier-details.component.ts
@@ -1,4 +1,19 @@
+import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import {
+    CircleButtonComponent,
+    CircleButtonTypes,
+    getConfig,
+    IqserAllowDirective,
+    IqserLoadingModule,
+    ProgressBarConfigModel,
+    Toaster,
+} from '@iqser/common-ui';
+import { FilterService, INestedFilter } from '@iqser/common-ui/lib/filtering';
+import { getCurrentUser, InitialsAvatarComponent } from '@iqser/common-ui/lib/users';
+import { ContextComponent, getParam, IqserTooltipPositions, shareLast } from '@iqser/common-ui/lib/utils';
+import { TranslateModule } from '@ngx-translate/core';
 import {
     DonutChartConfig,
     Dossier,
@@ -11,34 +26,20 @@ import {
     StatusSorter,
     User,
 } from '@red/domain';
-import { TranslateChartService } from '@services/translate-chart.service';
-import { UserService } from '@users/user.service';
-import {
-    CircleButtonComponent,
-    getConfig,
-    IqserAllowDirective,
-    IqserLoadingModule,
-    ProgressBarConfigModel,
-    Toaster,
-} from '@iqser/common-ui';
-import { workflowFileStatusTranslations } from '@translations/file-status-translations';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { combineLatestWith, firstValueFrom } from 'rxjs';
 import { DossierStatsService } from '@services/dossiers/dossier-stats.service';
-import { map, tap } from 'rxjs/operators';
 import { DossiersService } from '@services/dossiers/dossiers.service';
 import { FilesMapService } from '@services/files/files-map.service';
-import { Roles } from '@users/roles';
-import { getCurrentUser, InitialsAvatarComponent } from '@iqser/common-ui/lib/users';
-import { FilterService, INestedFilter } from '@iqser/common-ui/lib/filtering';
-import { ContextComponent, getParam, IqserTooltipPositions, shareLast } from '@iqser/common-ui/lib/utils';
-import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { TeamMembersComponent } from '@shared/components/team-members/team-members.component';
-import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.component';
-import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component';
-import { DossierDetailsStatsComponent } from '../dossier-details-stats/dossier-details-stats.component';
+import { TranslateChartService } from '@services/translate-chart.service';
 import { AssignUserDropdownComponent } from '@shared/components/assign-user-dropdown/assign-user-dropdown.component';
+import { DonutChartComponent } from '@shared/components/donut-chart/donut-chart.component';
+import { TeamMembersComponent } from '@shared/components/team-members/team-members.component';
+import { TypeFilterComponent } from '@shared/components/type-filter/type-filter.component';
+import { workflowFileStatusTranslations } from '@translations/file-status-translations';
+import { Roles } from '@users/roles';
+import { UserService } from '@users/user.service';
+import { combineLatestWith, firstValueFrom } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { DossierDetailsStatsComponent } from '../dossier-details-stats/dossier-details-stats.component';
 
 interface DossierDetailsContext {
     needsWorkFilters: INestedFilter[] | undefined;
@@ -59,7 +60,6 @@ interface DossierDetailsContext {
         CircleButtonComponent,
         IqserAllowDirective,
         TranslateModule,
-        TeamMembersComponent,
         DonutChartComponent,
         IqserLoadingModule,
         NgForOf,
@@ -67,11 +67,13 @@ interface DossierDetailsContext {
         DossierDetailsStatsComponent,
         AssignUserDropdownComponent,
         InitialsAvatarComponent,
+        TeamMembersComponent,
     ],
 })
 export class DossierDetailsComponent extends ContextComponent<DossierDetailsContext> {
     #currentChartSubtitleIndex = 0;
     readonly #dossierId = getParam(DOSSIER_ID);
+    protected readonly circleButtonTypes = CircleButtonTypes;
     @Input() dossierAttributes: DossierAttributeWithValue[];
     @Output() readonly toggleCollapse = new EventEmitter();
     editingOwner = false;
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
index d95562996..cda99eb6b 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
@@ -42,7 +42,7 @@
                     [dossier]="dossier()"
                 ></redaction-edit-dossier-download-package>
 
-                @defer (when activeNav() === 'dossierDictionary') {
+                @if (activeNav() === 'dossierDictionary') {
                     <redaction-edit-dossier-dictionary [dossier]="dossier()"></redaction-edit-dossier-dictionary>
                 }
 
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
index 48db2bd5d..5933332c7 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
@@ -27,7 +27,6 @@ import { EditDossierDictionaryComponent } from './dictionary/edit-dossier-dictio
 import { EditDossierDownloadPackageComponent } from './download-package/edit-dossier-download-package.component';
 import { EditDossierSectionInterface } from './edit-dossier-section.interface';
 import { EditDossierTeamComponent } from './edit-dossier-team/edit-dossier-team.component';
-import { EditDossierTeamModule } from './edit-dossier-team/edit-dossier-team.module';
 import { EditDossierGeneralInfoComponent } from './general-info/edit-dossier-general-info.component';
 
 type Section = 'dossierInfo' | 'downloadPackage' | 'dossierDictionary' | 'members' | 'dossierAttributes';
@@ -55,12 +54,12 @@ interface NavItem {
         EditDossierGeneralInfoComponent,
         EditDossierDownloadPackageComponent,
         EditDossierDictionaryComponent,
-        EditDossierTeamModule,
         EditDossierAttributesComponent,
         IconButtonComponent,
         HelpButtonComponent,
         IqserDenyDirective,
         CircleButtonComponent,
+        EditDossierTeamComponent,
     ],
 })
 export class EditDossierDialogComponent extends BaseDialogComponent implements AfterViewInit {
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts
index f8ec75908..45eb9670d 100644
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.component.ts
@@ -1,11 +1,19 @@
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { getConfig } from '@iqser/common-ui';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatFormField } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatOption, MatSelect } from '@angular/material/select';
+import { InitialsAvatarComponent } from '@common-ui/users';
+import { NamePipe } from '@common-ui/users/name.pipe';
+import { getConfig, InputWithActionComponent, RoundCheckboxComponent, StopPropagationDirective } from '@iqser/common-ui';
 import { Debounce } from '@iqser/common-ui/lib/utils';
+import { TranslateModule } from '@ngx-translate/core';
 import { Dossier, IDossierRequest } from '@red/domain';
 import { DossiersService } from '@services/dossiers/dossiers.service';
 import { FilesService } from '@services/files/files.service';
 import { PermissionsService } from '@services/permissions.service';
+import { TeamMembersComponent } from '@shared/components/team-members/team-members.component';
 import { UserService } from '@users/user.service';
 import { compareLists } from '@utils/functions';
 import { firstValueFrom } from 'rxjs';
@@ -17,6 +25,24 @@ import { EditDossierSaveResult, EditDossierSectionInterface } from '../edit-doss
     templateUrl: './edit-dossier-team.component.html',
     styleUrls: ['./edit-dossier-team.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [
+        ReactiveFormsModule,
+        TranslateModule,
+        MatFormField,
+        MatSelect,
+        MatOption,
+        NgForOf,
+        NamePipe,
+        NgIf,
+        AsyncPipe,
+        TeamMembersComponent,
+        InputWithActionComponent,
+        InitialsAvatarComponent,
+        RoundCheckboxComponent,
+        MatIcon,
+        StopPropagationDirective,
+    ],
 })
 export class EditDossierTeamComponent implements EditDossierSectionInterface, OnChanges {
     readonly #userService = inject(UserService);
diff --git a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.module.ts b/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.module.ts
deleted file mode 100644
index 8e0569827..000000000
--- a/apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-team/edit-dossier-team.module.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatFormField } from '@angular/material/form-field';
-import { MatIcon } from '@angular/material/icon';
-import { MatOption, MatSelect } from '@angular/material/select';
-import { InitialsAvatarComponent } from '@common-ui/users';
-import { NamePipe } from '@common-ui/users/name.pipe';
-import {
-    CircleButtonComponent,
-    InputWithActionComponent,
-    IqserAllowDirective,
-    RoundCheckboxComponent,
-    StopPropagationDirective,
-} from '@iqser/common-ui';
-import { TranslateModule } from '@ngx-translate/core';
-import { TeamMembersComponent } from '@shared/components/team-members/team-members.component';
-import { EditDossierTeamComponent } from './edit-dossier-team.component';
-
-@NgModule({
-    declarations: [EditDossierTeamComponent, TeamMembersComponent],
-    exports: [EditDossierTeamComponent, TeamMembersComponent],
-    imports: [
-        ReactiveFormsModule,
-        MatFormField,
-        MatSelect,
-        MatOption,
-        NamePipe,
-        NgForOf,
-        NgIf,
-        AsyncPipe,
-        TranslateModule,
-        InputWithActionComponent,
-        InitialsAvatarComponent,
-        StopPropagationDirective,
-        RoundCheckboxComponent,
-        MatIcon,
-        CircleButtonComponent,
-        IqserAllowDirective,
-    ],
-})
-export class EditDossierTeamModule {}
diff --git a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts
index 792eabee1..e1167277d 100644
--- a/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.ts
@@ -1,17 +1,21 @@
+import { NgForOf, NgIf } from '@angular/common';
 import { Component, ElementRef, EventEmitter, inject, Input, OnChanges, Output, ViewChild } from '@angular/core';
-import { CircleButtonTypes, largeDialogConfig } from '@iqser/common-ui';
-import { getCurrentUser } from '@iqser/common-ui/lib/users';
+import { MatIcon } from '@angular/material/icon';
+import { CircleButtonComponent, CircleButtonTypes, IqserAllowDirective, largeDialogConfig } from '@iqser/common-ui';
+import { getCurrentUser, InitialsAvatarComponent } from '@iqser/common-ui/lib/users';
 import { List } from '@iqser/common-ui/lib/utils';
+import { TranslateModule } from '@ngx-translate/core';
 import { User } from '@red/domain';
 import { Roles } from '@users/roles';
 import { UserService } from '@users/user.service';
-import { EditDossierDialogComponent } from '../../../shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component';
 import { DossiersDialogService } from '../../../shared-dossiers/services/dossiers-dialog.service';
 
 @Component({
     selector: 'redaction-team-members',
     templateUrl: './team-members.component.html',
     styleUrls: ['./team-members.component.scss'],
+    standalone: true,
+    imports: [NgForOf, InitialsAvatarComponent, NgIf, MatIcon, CircleButtonComponent, IqserAllowDirective, TranslateModule],
 })
 export class TeamMembersComponent implements OnChanges {
     readonly circleButtonTypes = CircleButtonTypes;
@@ -59,8 +63,11 @@ export class TeamMembersComponent implements OnChanges {
         return this.canRemove && !this.unremovableMembers.includes(userId);
     }
 
-    openEditDossierDialog(): void {
+    async openEditDossierDialog() {
         const data = { dossierId: this.dossierId, section: 'members' };
-        this._dialogService.open(EditDossierDialogComponent, data, { ...largeDialogConfig, width: '98vw', maxWidth: '98vw' });
+        const editDossierDialogComponent = await import(
+            '../../../shared-dossiers/dialogs/edit-dossier-dialog/edit-dossier-dialog.component'
+        ).then(m => m.EditDossierDialogComponent);
+        this._dialogService.open(editDossierDialogComponent, data, { ...largeDialogConfig, width: '98vw', maxWidth: '98vw' });
     }
 }

From 7b836c2894d04511ef0d4296f57d16e6b126633a Mon Sep 17 00:00:00 2001
From: Dan Percic <dan.percic.ext@knecon.com>
Date: Thu, 20 Jun 2024 10:32:36 +0300
Subject: [PATCH 17/17] update lockfile

---
 yarn.lock | 334 +++++++++++++++++++++++-------------------------------
 1 file changed, 143 insertions(+), 191 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 421474ee1..3ccbdcd21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -198,13 +198,6 @@
   dependencies:
     tslib "^2.3.0"
 
-"@angular/compiler@^13.1.1":
-  version "13.4.0"
-  resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-13.4.0.tgz#ec24a2b71808abd1e3c629e4935a378d487d0143"
-  integrity sha512-tPWoq2RC/VIrJtynEnMRWQZemBIC/ypuVfuUf3p8IIXCZHjuGnibdlZTtFYkexc4/sR1ug9xk1cJWvbOPwilng==
-  dependencies:
-    tslib "^2.3.0"
-
 "@angular/core@18.0.3":
   version "18.0.3"
   resolved "https://registry.yarnpkg.com/@angular/core/-/core-18.0.3.tgz#9de529e9a25e0197bb8aa1ac8d74439bad71e942"
@@ -628,22 +621,6 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
-"@bartholomej/ngx-translate-extract@^8.0.2":
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/@bartholomej/ngx-translate-extract/-/ngx-translate-extract-8.0.2.tgz#24fd28c34d66a91b20e6c3b0e1cc1b70878b1bc7"
-  integrity sha512-QBayCNhuatTL5mJJzfGtBpbbViRqG+Vv0iQGyiTcoJv40Wv4G+70rQl1Q+I+CW6jcw5L1VfR+RDtKD6WkeuWZw==
-  dependencies:
-    "@angular/compiler" "^13.1.1"
-    "@phenomnomnominal/tsquery" "^4.1.1"
-    boxen "^6.2.1"
-    colorette "^2.0.16"
-    flat "^5.0.2"
-    gettext-parser "^4.2.0"
-    glob "^7.2.0"
-    path "^0.12.7"
-    terminal-link "^3.0.0"
-    yargs "^17.2.1"
-
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -2350,12 +2327,13 @@
   resolved "https://registry.yarnpkg.com/@pdftron/webviewer/-/webviewer-10.10.1.tgz#f55f8ce5102582472e970742599449d05810e3d6"
   integrity sha512-5CzTS5q1TvjitC2yJGTKq4zuPVN8A696D/57sdlmMVF6RwzGJ9QWHEnDAzkAp5U2wyXs+0QNsOe7EWKcUH7/5Q==
 
-"@phenomnomnominal/tsquery@^4.1.1":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@phenomnomnominal/tsquery/-/tsquery-4.2.0.tgz#7742ff4af12ce673b0b601ba5515c934f1876b14"
-  integrity sha512-hR2U3uVcrrdkuG30ItQ+uFDs4ncZAybxWG0OjTE8ptPzVoU7GVeXpy+vMU8zX9EbmjGeITPw/su5HjYQyAH8bA==
+"@phenomnomnominal/tsquery@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@phenomnomnominal/tsquery/-/tsquery-6.1.3.tgz#5e819403da2fa6a64b009f1876278fb105ec6b55"
+  integrity sha512-CEqpJ872StsxRmwv9ePCZ4BCisrJSlREUC5XxIRYxhvODt4aQoJFFmjTgaP6meyKiiXxxN/VWPZ58j4yHXRkmw==
   dependencies:
-    esquery "^1.0.1"
+    "@types/esquery" "^1.5.0"
+    esquery "^1.5.0"
 
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
@@ -2613,6 +2591,13 @@
     "@types/estree" "*"
     "@types/json-schema" "*"
 
+"@types/esquery@^1.5.0":
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/@types/esquery/-/esquery-1.5.4.tgz#ebfd3a3bca6db50446688ba5592d18bb9b807e91"
+  integrity sha512-yYO4Q8H+KJHKW1rEeSzHxcZi90durqYgWVfnh5K6ZADVBjBv2e1NEveYX5yT2bffgN7RqzH3k9930m+i2yBoMA==
+  dependencies:
+    "@types/estree" "*"
+
 "@types/estree@*", "@types/estree@1.0.5", "@types/estree@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -2683,7 +2668,14 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.5.tgz#e6c29b58e66995d57cd170ce3e2a61926d55ee04"
   integrity sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw==
 
-"@types/node@*", "@types/node@20.14.2":
+"@types/node@*":
+  version "20.14.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.6.tgz#f3c19ffc98c2220e18de259bb172dd4d892a6075"
+  integrity sha512-JbA0XIJPL1IiNnU7PFxDXyfAwcwVVrOoqyzzyQTyMeVhBzkJVMSkC1LlVsRQ2lpqiY4n6Bb9oCS6lzDKVQxbZw==
+  dependencies:
+    undici-types "~5.26.4"
+
+"@types/node@20.14.2":
   version "20.14.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.2.tgz#a5f4d2bcb4b6a87bffcaa717718c5a0f208f4a18"
   integrity sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==
@@ -2700,6 +2692,16 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
   integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
 
+"@types/strip-bom@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"
+  integrity sha512-xevGOReSYGM7g/kUBZzPqCrR/KYAo+F0yiPc85WFTJa0MSLtyFTVTU6cJu/aV4mid7IffDIWqo69THF2o4JiEQ==
+
+"@types/strip-json-comments@0.0.30":
+  version "0.0.30"
+  resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
+  integrity sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==
+
 "@types/tough-cookie@*":
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
@@ -2718,15 +2720,15 @@
     "@types/yargs-parser" "*"
 
 "@typescript-eslint/eslint-plugin@^7.2.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.13.0.tgz#3cdeb5d44d051b21a9567535dd90702b2a42c6ff"
-  integrity sha512-FX1X6AF0w8MdVFLSdqwqN/me2hyhuQg4ykN6ZpVhh1ij/80pTvDKclX1sZB9iqex8SjQfVhwMKs3JtnnMLzG9w==
+  version "7.13.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.13.1.tgz#cdc521c8bca38b55585cf30db787fb2abad3f9fd"
+  integrity sha512-kZqi+WZQaZfPKnsflLJQCz6Ze9FFSMfXrrIOcyargekQxG37ES7DJNpJUE9Q/X5n3yTIP/WPutVNzgknQ7biLg==
   dependencies:
     "@eslint-community/regexpp" "^4.10.0"
-    "@typescript-eslint/scope-manager" "7.13.0"
-    "@typescript-eslint/type-utils" "7.13.0"
-    "@typescript-eslint/utils" "7.13.0"
-    "@typescript-eslint/visitor-keys" "7.13.0"
+    "@typescript-eslint/scope-manager" "7.13.1"
+    "@typescript-eslint/type-utils" "7.13.1"
+    "@typescript-eslint/utils" "7.13.1"
+    "@typescript-eslint/visitor-keys" "7.13.1"
     graphemer "^1.4.0"
     ignore "^5.3.1"
     natural-compare "^1.4.0"
@@ -2740,14 +2742,14 @@
     "@typescript-eslint/utils" "5.62.0"
 
 "@typescript-eslint/parser@^7.2.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.13.0.tgz#9489098d68d57ad392f507495f2b82ce8b8f0a6b"
-  integrity sha512-EjMfl69KOS9awXXe83iRN7oIEXy9yYdqWfqdrFAYAAr6syP8eLEFI7ZE4939antx2mNgPRW/o1ybm2SFYkbTVA==
+  version "7.13.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.13.1.tgz#fac57811b3e519185f7259bac312291f7b9c4e72"
+  integrity sha512-1ELDPlnLvDQ5ybTSrMhRTFDfOQEOXNM+eP+3HT/Yq7ruWpciQw+Avi73pdEbA4SooCawEWo3dtYbF68gN7Ed1A==
   dependencies:
-    "@typescript-eslint/scope-manager" "7.13.0"
-    "@typescript-eslint/types" "7.13.0"
-    "@typescript-eslint/typescript-estree" "7.13.0"
-    "@typescript-eslint/visitor-keys" "7.13.0"
+    "@typescript-eslint/scope-manager" "7.13.1"
+    "@typescript-eslint/types" "7.13.1"
+    "@typescript-eslint/typescript-estree" "7.13.1"
+    "@typescript-eslint/visitor-keys" "7.13.1"
     debug "^4.3.4"
 
 "@typescript-eslint/scope-manager@5.62.0":
@@ -2758,21 +2760,21 @@
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
 
-"@typescript-eslint/scope-manager@7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.13.0.tgz#6927d6451537ce648c6af67a2327378d4cc18462"
-  integrity sha512-ZrMCe1R6a01T94ilV13egvcnvVJ1pxShkE0+NDjDzH4nvG1wXpwsVI5bZCvE7AEDH1mXEx5tJSVR68bLgG7Dng==
+"@typescript-eslint/scope-manager@7.13.1":
+  version "7.13.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.13.1.tgz#c08041206904bf36f0e6997efdb0ca775e0c452e"
+  integrity sha512-adbXNVEs6GmbzaCpymHQ0MB6E4TqoiVbC0iqG3uijR8ZYfpAXMGttouQzF4Oat3P2GxDVIrg7bMI/P65LiQZdg==
   dependencies:
-    "@typescript-eslint/types" "7.13.0"
-    "@typescript-eslint/visitor-keys" "7.13.0"
+    "@typescript-eslint/types" "7.13.1"
+    "@typescript-eslint/visitor-keys" "7.13.1"
 
-"@typescript-eslint/type-utils@7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.13.0.tgz#4587282b5227a23753ea8b233805ecafc3924c76"
-  integrity sha512-xMEtMzxq9eRkZy48XuxlBFzpVMDurUAfDu5Rz16GouAtXm0TaAoTFzqWUFPPuQYXI/CDaH/Bgx/fk/84t/Bc9A==
+"@typescript-eslint/type-utils@7.13.1":
+  version "7.13.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.13.1.tgz#63bec3f1fb43cf0bc409cbdb88ef96d118ca8632"
+  integrity sha512-aWDbLu1s9bmgPGXSzNCxELu+0+HQOapV/y+60gPXafR8e2g1Bifxzevaa+4L2ytCWm+CHqpELq4CSoN9ELiwCg==
   dependencies:
-    "@typescript-eslint/typescript-estree" "7.13.0"
-    "@typescript-eslint/utils" "7.13.0"
+    "@typescript-eslint/typescript-estree" "7.13.1"
+    "@typescript-eslint/utils" "7.13.1"
     debug "^4.3.4"
     ts-api-utils "^1.3.0"
 
@@ -2781,10 +2783,10 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
   integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
 
-"@typescript-eslint/types@7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.13.0.tgz#0cca95edf1f1fdb0cfe1bb875e121b49617477c5"
-  integrity sha512-QWuwm9wcGMAuTsxP+qz6LBBd3Uq8I5Nv8xb0mk54jmNoCyDspnMvVsOxI6IsMmway5d1S9Su2+sCKv1st2l6eA==
+"@typescript-eslint/types@7.13.1":
+  version "7.13.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.13.1.tgz#787db283bd0b58751094c90d5b58bbf5e9fc9bd8"
+  integrity sha512-7K7HMcSQIAND6RBL4kDl24sG/xKM13cA85dc7JnmQXw2cBDngg7c19B++JzvJHRG3zG36n9j1i451GBzRuHchw==
 
 "@typescript-eslint/typescript-estree@5.62.0":
   version "5.62.0"
@@ -2799,13 +2801,13 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.13.0.tgz#4cc24fc155088ebf3b3adbad62c7e60f72c6de1c"
-  integrity sha512-cAvBvUoobaoIcoqox1YatXOnSl3gx92rCZoMRPzMNisDiM12siGilSM4+dJAekuuHTibI2hVC2fYK79iSFvWjw==
+"@typescript-eslint/typescript-estree@7.13.1":
+  version "7.13.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.13.1.tgz#3412841b130e070db2f675e3d9b8cb1ae49e1c3f"
+  integrity sha512-uxNr51CMV7npU1BxZzYjoVz9iyjckBduFBP0S5sLlh1tXYzHzgZ3BR9SVsNed+LmwKrmnqN3Kdl5t7eZ5TS1Yw==
   dependencies:
-    "@typescript-eslint/types" "7.13.0"
-    "@typescript-eslint/visitor-keys" "7.13.0"
+    "@typescript-eslint/types" "7.13.1"
+    "@typescript-eslint/visitor-keys" "7.13.1"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
@@ -2827,15 +2829,15 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
-"@typescript-eslint/utils@7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.13.0.tgz#f84e7e8aeceae945a9a3f40d077fd95915308004"
-  integrity sha512-jceD8RgdKORVnB4Y6BqasfIkFhl4pajB1wVxrF4akxD2QPM8GNYjgGwEzYS+437ewlqqrg7Dw+6dhdpjMpeBFQ==
+"@typescript-eslint/utils@7.13.1":
+  version "7.13.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.13.1.tgz#611083379caa0d3a2c09d126c65065a3e4337ba2"
+  integrity sha512-h5MzFBD5a/Gh/fvNdp9pTfqJAbuQC4sCN2WzuXme71lqFJsZtLbjxfSk4r3p02WIArOF9N94pdsLiGutpDbrXQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
-    "@typescript-eslint/scope-manager" "7.13.0"
-    "@typescript-eslint/types" "7.13.0"
-    "@typescript-eslint/typescript-estree" "7.13.0"
+    "@typescript-eslint/scope-manager" "7.13.1"
+    "@typescript-eslint/types" "7.13.1"
+    "@typescript-eslint/typescript-estree" "7.13.1"
 
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
@@ -2845,12 +2847,12 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/visitor-keys@7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.13.0.tgz#2eb7ce8eb38c2b0d4a494d1fe1908e7071a1a353"
-  integrity sha512-nxn+dozQx+MK61nn/JP+M4eCkHDSxSLDpgE3WcQo0+fkjEolnaB5jswvIKC4K56By8MMgIho7f1PVxERHEo8rw==
+"@typescript-eslint/visitor-keys@7.13.1":
+  version "7.13.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.13.1.tgz#9c229a795a919db61f2d7f2337ef584ac05fbe96"
+  integrity sha512-k/Bfne7lrP7hcb7m9zSsgcBmo+8eicqqfNAJ7uUY+jkTFpKeH2FSkWpFRtimBxgkyvqfu9jTPRbYOvud6isdXA==
   dependencies:
-    "@typescript-eslint/types" "7.13.0"
+    "@typescript-eslint/types" "7.13.1"
     eslint-visitor-keys "^3.4.3"
 
 "@ungap/structured-clone@^1.2.0":
@@ -2858,6 +2860,21 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@vendure/ngx-translate-extract@9.2.0":
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/@vendure/ngx-translate-extract/-/ngx-translate-extract-9.2.0.tgz#3e7d25066284ed9a5d45008b2cb370e07a03db9d"
+  integrity sha512-ou6lQjsBy52lSt5m8p8Xugc4147s/6wamX6lbRvOD4K6/oeuQFhpfnuXgxUxnlCkna9udJIRsHlJSL8hXEtx3w==
+  dependencies:
+    "@phenomnomnominal/tsquery" "^6.1.3"
+    braces "^3.0.2"
+    colorette "^2.0.20"
+    flat "^6.0.1"
+    gettext-parser "^4.2.0"
+    glob "^10.3.0"
+    json5 "^2.2.3"
+    tsconfig "^7.0.0"
+    yargs "^17.7.2"
+
 "@vitejs/plugin-basic-ssl@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.1.0.tgz#8b840305a6b48e8764803435ec0c716fa27d3802"
@@ -3123,13 +3140,6 @@ ajv@^8.0.0:
     require-from-string "^2.0.2"
     uri-js "^4.4.1"
 
-ansi-align@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
-  integrity sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==
-  dependencies:
-    string-width "^4.1.0"
-
 ansi-colors@4.1.3, ansi-colors@^4.1.1:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
@@ -3142,13 +3152,6 @@ ansi-escapes@^4.2.1, ansi-escapes@^4.3.2:
   dependencies:
     type-fest "^0.21.3"
 
-ansi-escapes@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-5.0.0.tgz#b6a0caf0eef0c41af190e9a749e0c00ec04bb2a6"
-  integrity sha512-5GFMVX8HqE/TB+FuBJGuO5XG0WrsA6ptUqoODaT/n9mmUaZFkqnBueB4leqGBCmrUHnCnC4PCZTCd0E7QQ83bA==
-  dependencies:
-    type-fest "^1.0.2"
-
 ansi-escapes@^6.2.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-6.2.1.tgz#76c54ce9b081dad39acec4b5d53377913825fb0f"
@@ -3368,20 +3371,6 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
-boxen@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-6.2.1.tgz#b098a2278b2cd2845deef2dff2efc38d329b434d"
-  integrity sha512-H4PEsJXfFI/Pt8sjDWbHlQPx4zL/bvSQjcilJmaulGt5mLDorHOHpmdXAJcBcmru7PhYSp/cDMWRko4ZUMFkSw==
-  dependencies:
-    ansi-align "^3.0.1"
-    camelcase "^6.2.0"
-    chalk "^4.1.2"
-    cli-boxes "^3.0.0"
-    string-width "^5.0.1"
-    type-fest "^2.5.0"
-    widest-line "^4.0.1"
-    wrap-ansi "^8.0.1"
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3397,7 +3386,7 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.3, braces@~3.0.2:
+braces@^3.0.2, braces@^3.0.3, braces@~3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
   integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
@@ -3491,9 +3480,9 @@ camelcase@^6.2.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001629:
-  version "1.0.30001634"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001634.tgz#aa563c8e7aeaf552f7ead60371bc8d803425deaa"
-  integrity sha512-fbBYXQ9q3+yp1q1gBk86tOFs4pyn/yxFm5ZNP18OXJDfA3txImOY9PhfxVggZ4vRHDqoU8NrKU81eN0OtzOgRA==
+  version "1.0.30001636"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz#b15f52d2bdb95fad32c2f53c0b68032b85188a78"
+  integrity sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -3509,7 +3498,7 @@ chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2, chalk@~4.1.0:
+chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@~4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -3579,11 +3568,6 @@ clean-stack@^2.0.0:
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
   integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
 
-cli-boxes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-3.0.0.tgz#71a10c716feeba005e4504f36329ef0b17cf3145"
-  integrity sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==
-
 cli-cursor@3.1.0, cli-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
@@ -3669,7 +3653,7 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-colorette@^2.0.16, colorette@^2.0.20:
+colorette@^2.0.20:
   version "2.0.20"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
@@ -3990,9 +3974,9 @@ ejs@^3.1.7:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.796:
-  version "1.4.803"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.803.tgz#cf55808a5ee12e2a2778bbe8cdc941ef87c2093b"
-  integrity sha512-61H9mLzGOCLLVsnLiRzCbc63uldP0AniRYPV3hbGVtONA1pI7qSGILdbofR7A8TMbOypDocEAjH/e+9k1QIe3g==
+  version "1.4.807"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.807.tgz#4d6c5ea1516f0164ac5bfd487ccd4ee9507c8f01"
+  integrity sha512-kSmJl2ZwhNf/bcIuCH/imtNOKlpkLDn2jqT5FJ+/0CXjhnFaOa9cOe9gHKKy71eM49izwuQjZhKk+lWQ1JxB7A==
 
 emittery@^0.13.1:
   version "0.13.1"
@@ -4329,7 +4313,7 @@ esprima@^4.0.0, esprima@^4.0.1:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.0.1, esquery@^1.4.2:
+esquery@^1.4.2, esquery@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
   integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
@@ -4541,6 +4525,11 @@ flat@^5.0.2:
   resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
+flat@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/flat/-/flat-6.0.1.tgz#09070cf918293b401577f20843edeadf4d3e8755"
+  integrity sha512-/3FfIa8mbrg3xE7+wAhWeV+bd7L2Mof+xtZb5dRDKZ+wDvYJK4WDYeIOuOhre5Yv5aQObZrlbRmk3RTSiuQBtw==
+
 flatted@^3.2.9:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
@@ -4688,18 +4677,19 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^10.2.2, glob@^10.3.10:
-  version "10.4.1"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.1.tgz#0cfb01ab6a6b438177bfe6a58e2576f6efe909c2"
-  integrity sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==
+glob@^10.2.2, glob@^10.3.0, glob@^10.3.10:
+  version "10.4.2"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.2.tgz#bed6b95dade5c1f80b4434daced233aee76160e5"
+  integrity sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==
   dependencies:
     foreground-child "^3.1.0"
     jackspeak "^3.1.2"
     minimatch "^9.0.4"
     minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
     path-scurry "^1.11.1"
 
-glob@^7.1.3, glob@^7.1.4, glob@^7.2.0, glob@~7.2.0:
+glob@^7.1.3, glob@^7.1.4, glob@~7.2.0:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -4965,11 +4955,6 @@ inherits@2, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-inherits@2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
-
 ini@4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.2.tgz#7f646dbd9caea595e61f88ef60bfff8b01f8130a"
@@ -5827,15 +5812,15 @@ lint-staged@15.2.7:
     yaml "~2.4.2"
 
 listr2@~8.2.1:
-  version "8.2.1"
-  resolved "https://registry.yarnpkg.com/listr2/-/listr2-8.2.1.tgz#06a1a6efe85f23c5324180d7c1ddbd96b5eefd6d"
-  integrity sha512-irTfvpib/rNiD637xeevjO2l3Z5loZmuaRi0L0YE5LfijwVY96oyVn0DFD3o/teAok7nfobMG1THvvcHh/BP6g==
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-8.2.2.tgz#e00501c515242798d0ea4a0bbaffa8dc97158648"
+  integrity sha512-sy0dq+JPS+RAFiFk2K8Nbub7khNmeeoFALNUJ4Wzk34wZKAzaOhEXqGWs4RA5aui0RaM6Hgn7VEKhCj0mlKNLA==
   dependencies:
     cli-truncate "^4.0.0"
     colorette "^2.0.20"
     eventemitter3 "^5.0.1"
     log-update "^6.0.0"
-    rfdc "^1.3.1"
+    rfdc "^1.4.1"
     wrap-ansi "^9.0.0"
 
 lmdb@3.0.8:
@@ -6590,6 +6575,11 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
+package-json-from-dist@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz#e501cd3094b278495eb4258d4c9f6d5ac3019f00"
+  integrity sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==
+
 pacote@18.0.6:
   version "18.0.6"
   resolved "https://registry.yarnpkg.com/pacote/-/pacote-18.0.6.tgz#ac28495e24f4cf802ef911d792335e378e86fac7"
@@ -6701,14 +6691,6 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-path@^0.12.7:
-  version "0.12.7"
-  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
-  integrity sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==
-  dependencies:
-    process "^0.11.1"
-    util "^0.10.3"
-
 picocolors@^1.0.0, picocolors@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
@@ -6803,11 +6785,6 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-process@^0.11.1:
-  version "0.11.10"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
-  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
-
 promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
@@ -6987,7 +6964,7 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rfdc@^1.3.1:
+rfdc@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
@@ -7487,6 +7464,11 @@ strip-json-comments@3.1.1, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+strip-json-comments@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
+
 strong-log-transformer@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz#0f5ed78d325e0421ac6f90f7f10e691d6ae3ae10"
@@ -7503,7 +7485,7 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.0.0, supports-color@^7.1.0:
+supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
@@ -7517,14 +7499,6 @@ supports-color@^8.0.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-hyperlinks@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz#3943544347c1ff90b15effb03fc14ae45ec10624"
-  integrity sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==
-  dependencies:
-    has-flag "^4.0.0"
-    supports-color "^7.0.0"
-
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -7585,14 +7559,6 @@ tar@^6.1.11, tar@^6.1.2:
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
-terminal-link@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-3.0.0.tgz#91c82a66b52fc1684123297ce384429faf72ac5c"
-  integrity sha512-flFL3m4wuixmf6IfhFJd1YPiLiMuxEc8uHRM1buzIeZPm22Au2pDqBJQgdo7n1WfPU1ONFGv7YDwpFBmHGF6lg==
-  dependencies:
-    ansi-escapes "^5.0.0"
-    supports-hyperlinks "^2.2.0"
-
 terser-webpack-plugin@^5.3.10:
   version "5.3.10"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199"
@@ -7738,6 +7704,16 @@ tsconfig-paths@^4.1.2:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tsconfig@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/tsconfig/-/tsconfig-7.0.0.tgz#84538875a4dc216e5c4a5432b3a4dec3d54e91b7"
+  integrity sha512-vZXmzPrL+EmC4T/4rVlT2jNVMWCi/O4DIiSj3UHg1OE5kCKbk4mfrXc6dZksLgRM/TZlKnousKH9bbTazUWRRw==
+  dependencies:
+    "@types/strip-bom" "^3.0.0"
+    "@types/strip-json-comments" "0.0.30"
+    strip-bom "^3.0.0"
+    strip-json-comments "^2.0.0"
+
 tslib@2.6.3, tslib@^2.0.0, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.3.1, tslib@^2.4.0, tslib@^2.5.0, tslib@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
@@ -7794,16 +7770,6 @@ type-fest@^0.21.3:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
   integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
 
-type-fest@^1.0.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-1.4.0.tgz#e9fb813fe3bf1744ec359d55d1affefa76f14be1"
-  integrity sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==
-
-type-fest@^2.5.0:
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
-  integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
-
 typescript@5.4.5:
   version "5.4.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
@@ -7871,13 +7837,6 @@ util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-util@^0.10.3:
-  version "0.10.4"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
-  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
-  dependencies:
-    inherits "2.0.3"
-
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
@@ -8047,13 +8006,6 @@ which@^4.0.0:
   dependencies:
     isexe "^3.1.1"
 
-widest-line@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-4.0.1.tgz#a0fc673aaba1ea6f0a0d35b3c2795c9a9cc2ebf2"
-  integrity sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==
-  dependencies:
-    string-width "^5.0.1"
-
 word-wrap@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
@@ -8086,7 +8038,7 @@ wrap-ansi@^7.0.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
+wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
   integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
@@ -8181,7 +8133,7 @@ yargs-parser@21.1.1, yargs-parser@^21.0.1, yargs-parser@^21.1.1:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
   integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
-yargs@17.7.2, yargs@^17.0.0, yargs@^17.2.1, yargs@^17.3.1, yargs@^17.6.2:
+yargs@17.7.2, yargs@^17.0.0, yargs@^17.2.1, yargs@^17.3.1, yargs@^17.6.2, yargs@^17.7.2:
   version "17.7.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
   integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==