From 8dc2eae52529c82b54d12a39dbfd9f81c150288f Mon Sep 17 00:00:00 2001
From: Edi Cziszter <eduard@devplant.ro>
Date: Mon, 7 Feb 2022 07:02:09 +0200
Subject: [PATCH] wip edit dossier status

---
 .../edit-dossier-general-info.component.html  | 146 ++++++++++--------
 .../edit-dossier-general-info.component.scss  |   4 +
 .../edit-dossier-general-info.component.ts    |   9 +-
 .../dossier-documents-status.component.html   |   1 +
 .../dossier-documents-status.component.scss   |   0
 .../dossier-documents-status.component.ts     |  24 +++
 .../dossiers-listing-actions.component.html   |  10 +-
 .../dossiers-listing-actions.component.ts     |   9 +-
 .../dossiers-listing-status.component.html    |  17 +-
 .../dossiers-listing-status.component.ts      |  19 ++-
 .../table-item/table-item.component.html      |   4 +-
 .../table-item/table-item.component.ts        |  16 +-
 .../dossiers-listing.module.ts                |   2 +
 apps/red-ui/src/assets/i18n/en.json           |   1 +
 14 files changed, 166 insertions(+), 96 deletions(-)
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.html
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.scss
 create mode 100644 apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts

diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index 0af613641..a470c6ca0 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -1,71 +1,91 @@
 <form [formGroup]="form">
-    <div class="iqser-input-group required w-300">
-        <label translate="edit-dossier-dialog.general-info.form.name.label"></label>
-        <input
-            [placeholder]="'edit-dossier-dialog.general-info.form.name.placeholder' | translate"
-            formControlName="dossierName"
-            name="dossierName"
-            type="text"
-        />
-    </div>
+    <div class="flex">
+        <div class="flex fields-container">
+            <div class="iqser-input-group required w-300">
+                <label translate="edit-dossier-dialog.general-info.form.name.label"></label>
+                <input
+                    [placeholder]="'edit-dossier-dialog.general-info.form.name.placeholder' | translate"
+                    formControlName="dossierName"
+                    name="dossierName"
+                    type="text"
+                />
+            </div>
 
-    <div class="iqser-input-group required w-400">
-        <mat-form-field floatLabel="always">
-            <mat-label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</mat-label>
-            <mat-select formControlName="dossierTemplateId" style="width: 100%">
-                <mat-option
-                    *ngFor="let dossierTemplate of dossierTemplates"
-                    [matTooltip]="dossierTemplate.description ? dossierTemplate.description : dossierTemplate.name"
-                    [value]="dossierTemplate.dossierTemplateId"
-                    matTooltipPosition="after"
+            <div class="iqser-input-group required w-400">
+                <mat-form-field floatLabel="always">
+                    <mat-label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</mat-label>
+                    <mat-select formControlName="dossierTemplateId" style="width: 100%">
+                        <mat-option
+                            *ngFor="let dossierTemplate of dossierTemplates"
+                            [matTooltip]="dossierTemplate.description ? dossierTemplate.description : dossierTemplate.name"
+                            [value]="dossierTemplate.dossierTemplateId"
+                            matTooltipPosition="after"
+                        >
+                            {{ dossierTemplate.name }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+
+            <div class="iqser-input-group w-400">
+                <label translate="edit-dossier-dialog.general-info.form.description.label"></label>
+                <textarea
+                    [placeholder]="'edit-dossier-dialog.general-info.form.description.placeholder' | translate"
+                    formControlName="description"
+                    iqserHasScrollbar
+                    name="description"
+                    rows="5"
+                    type="text"
+                ></textarea>
+            </div>
+
+            <div>
+                <mat-checkbox class="watermark" color="primary" formControlName="watermarkEnabled">
+                    {{ 'edit-dossier-dialog.general-info.form.watermark' | translate }}
+                </mat-checkbox>
+            </div>
+
+            <div>
+                <mat-checkbox class="watermark-preview" color="primary" formControlName="watermarkPreviewEnabled">
+                    {{ 'edit-dossier-dialog.general-info.form.watermark-preview' | translate }}
+                </mat-checkbox>
+            </div>
+        </div>
+
+        <div class="flex fields-container">
+            <div class="due-date">
+                <mat-checkbox
+                    (change)="hasDueDate = !hasDueDate"
+                    [checked]="hasDueDate"
+                    [disabled]="!permissionsService.canEditDossier()"
+                    class="filter-menu-checkbox"
+                    color="primary"
                 >
-                    {{ dossierTemplate.name }}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-    </div>
+                    {{ 'edit-dossier-dialog.general-info.form.due-date' | translate }}
+                </mat-checkbox>
 
-    <div class="iqser-input-group w-400">
-        <label translate="edit-dossier-dialog.general-info.form.description.label"></label>
-        <textarea
-            [placeholder]="'edit-dossier-dialog.general-info.form.description.placeholder' | translate"
-            formControlName="description"
-            iqserHasScrollbar
-            name="description"
-            rows="5"
-            type="text"
-        ></textarea>
-    </div>
+                <div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
+                    <input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
+                    <mat-datepicker-toggle [for]="picker" matSuffix>
+                        <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
+                    </mat-datepicker-toggle>
+                    <mat-datepicker #picker></mat-datepicker>
+                </div>
+            </div>
 
-    <div>
-        <mat-checkbox class="watermark" color="primary" formControlName="watermarkEnabled">
-            {{ 'edit-dossier-dialog.general-info.form.watermark' | translate }}
-        </mat-checkbox>
-    </div>
-
-    <div>
-        <mat-checkbox class="watermark-preview" color="primary" formControlName="watermarkPreviewEnabled">
-            {{ 'edit-dossier-dialog.general-info.form.watermark-preview' | translate }}
-        </mat-checkbox>
-    </div>
-
-    <div class="due-date">
-        <mat-checkbox
-            (change)="hasDueDate = !hasDueDate"
-            [checked]="hasDueDate"
-            [disabled]="!permissionsService.canEditDossier(dossier)"
-            class="filter-menu-checkbox"
-            color="primary"
-        >
-            {{ 'edit-dossier-dialog.general-info.form.due-date' | translate }}
-        </mat-checkbox>
-
-        <div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
-            <input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
-            <mat-datepicker-toggle [for]="picker" matSuffix>
-                <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
-            </mat-datepicker-toggle>
-            <mat-datepicker #picker></mat-datepicker>
+            <div class="iqser-input-group required w-300">
+                <label translate="edit-dossier-dialog.general-info.form.dossier-status"></label>
+                <mat-select
+                    formControlName="dossierStatusId"
+                    [placeholder]="
+                        dossier.dossierStatusId ? (stateService.getById(dossier.dossierStatusId) | async).name : 'No status assigned'
+                    "
+                >
+                    <mat-option *ngFor="let state of states" [value]="dossier.dossierStatusId">
+                        {{ state.name }}
+                    </mat-option>
+                </mat-select>
+            </div>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
index 695782375..ad0894822 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.scss
@@ -23,3 +23,7 @@
     border-top: none;
     padding: 0;
 }
+
+.fields-container {
+    flex-direction: column;
+}
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index 8b9d48bf1..54ef6987e 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -14,6 +14,8 @@ import { DossiersService } from '@services/entity-services/dossiers.service';
 import { DossierTemplatesService } from '@services/entity-services/dossier-templates.service';
 import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
 import { firstValueFrom } from 'rxjs';
+import { DossierStateService } from '@services/entity-services/dossier-state.service';
+import { DossierState } from '../../../../../../../../../libs/red-domain/src/lib/dossier-state';
 import { DOSSIER_TEMPLATE_ID } from '@utils/constants';
 
 @Component({
@@ -29,9 +31,11 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
     form: FormGroup;
     hasDueDate: boolean;
     dossierTemplates: IDossierTemplate[];
+    states: DossierState[];
 
     constructor(
         readonly permissionsService: PermissionsService,
+        readonly stateService: DossierStateService,
         private readonly _dossierTemplatesService: DossierTemplatesService,
         private readonly _dossiersService: DossiersService,
         private readonly _dossierStatsService: DossierStatsService,
@@ -67,12 +71,13 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
         return this.hasDueDate && this.form.get('dueDate').value === null;
     }
 
-    ngOnInit() {
+    async ngOnInit() {
         this._filterInvalidDossierTemplates();
         this.form = this._getForm();
         if (!this.permissionsService.canEditDossier(this.dossier)) {
             this.form.disable();
         }
+        this.states = await firstValueFrom(this.stateService.loadAllForTemplate(this.dossier.dossierTemplateId));
         this.hasDueDate = !!this.dossier.dueDate;
     }
 
@@ -96,6 +101,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
             watermarkPreviewEnabled: this.form.get('watermarkPreviewEnabled').value,
             dueDate: this.hasDueDate ? this.form.get('dueDate').value : undefined,
             dossierTemplateId: this.form.get(DOSSIER_TEMPLATE_ID).value,
+            dossierStatusId: this.form.get('dossierStatusId').value,
         } as IDossierRequest;
         try {
             await firstValueFrom(this._dossiersService.createOrUpdate(dossier));
@@ -136,6 +142,7 @@ export class EditDossierGeneralInfoComponent implements OnInit, EditDossierSecti
                 },
                 Validators.required,
             ],
+            dossierStatusId: [this.dossier.dossierStatusId],
             description: [this.dossier.description],
             dueDate: [this.dossier.dueDate],
             watermarkEnabled: [this.dossier.watermarkEnabled],
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.html
new file mode 100644
index 000000000..3025a99af
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.html
@@ -0,0 +1 @@
+<iqser-status-bar *ngIf="stats" [configs]="statusBarConfig"></iqser-status-bar>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.scss b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts
new file mode 100644
index 000000000..00fc9084f
--- /dev/null
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossier-documents-status/dossier-documents-status.component.ts
@@ -0,0 +1,24 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
+import { DossierStats, StatusSorter } from '../../../../../../../../../../libs/red-domain/src';
+import { List, StatusBarConfig } from '../../../../../../../../../../libs/common-ui/src';
+
+@Component({
+    selector: 'redaction-dossier-documents-status',
+    templateUrl: './dossier-documents-status.component.html',
+    styleUrls: ['./dossier-documents-status.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DossierDocumentsStatusComponent implements OnChanges {
+    @Input() stats: DossierStats;
+    statusBarConfig: List<StatusBarConfig<string>>;
+
+    private get _statusConfig(): List<StatusBarConfig<string>> {
+        const { fileCountPerWorkflowStatus } = this.stats;
+        const statuses = Object.keys(fileCountPerWorkflowStatus).sort(StatusSorter.byStatus);
+        return statuses.map(status => ({ length: fileCountPerWorkflowStatus[status], color: status }));
+    }
+
+    ngOnChanges(): void {
+        this.statusBarConfig = this._statusConfig;
+    }
+}
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
index 2b521e11f..63bcdbe86 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.html
@@ -1,6 +1,10 @@
-<iqser-status-bar *ngIf="stats" [configs]="statusBarConfig"></iqser-status-bar>
-
-<div (longPress)="forceReanalysisAction($event)" class="action-buttons" redactionLongPress>
+<div
+    (longPress)="forceReanalysisAction($event)"
+    class="action-buttons"
+    redactionLongPress
+    iqserHelpMode="dossier-features"
+    [updateElementPosition]="false"
+>
     <iqser-circle-button
         (action)="openEditDossierDialog($event, dossier.dossierId)"
         *ngIf="currentUser.isUser"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
index 9c93cf143..c76b3e68c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-actions/dossiers-listing-actions.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/c
 import { PermissionsService } from '@services/permissions.service';
 import { CircleButtonTypes, List, StatusBarConfig } from '@iqser/common-ui';
 import { UserService } from '@services/user.service';
-import { Dossier, DossierStats, File, StatusSorter } from '@red/domain';
+import { Dossier, DossierStats, File } from '@red/domain';
 import { DossiersDialogService } from '../../../../services/dossiers-dialog.service';
 import { LongPressEvent } from '@shared/directives/long-press.directive';
 import { UserPreferenceService } from '@services/user-preference.service';
@@ -39,14 +39,7 @@ export class DossiersListingActionsComponent implements OnChanges {
         private readonly _userPreferenceService: UserPreferenceService,
     ) {}
 
-    private get _statusConfig(): List<StatusBarConfig<string>> {
-        const { fileCountPerWorkflowStatus } = this.stats;
-        const statuses = Object.keys(fileCountPerWorkflowStatus).sort(StatusSorter.byStatus);
-        return statuses.map(status => ({ length: fileCountPerWorkflowStatus[status], color: status }));
-    }
-
     ngOnChanges() {
-        this.statusBarConfig = this._statusConfig;
         this.files = this.filesMapService.get(this.dossier.dossierId);
         this.displayReanalyseBtn = this.permissionsService.displayReanalyseBtn(this.dossier) && this.analysisForced;
     }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
index 8bc358801..c984f6d6e 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.html
@@ -1,4 +1,13 @@
-<div class="flex-align-items-center dossier-status-container">
-    <div class="dossier-status-text">{{ dossierState.name }}</div>
-    <div class="dossier-status-chip" [style.background-color]="dossierState.description"></div>
-</div>
+<ng-container *ngIf="dossierState$ | async as dossierState">
+    <div class="flex-align-items-center dossier-status-container">
+        <div class="dossier-status-text">{{ dossierState.name }}</div>
+        <div class="dossier-status-chip" [style.background-color]="dossierState.description"></div>
+    </div>
+</ng-container>
+<ng-container *ngIf="(dossierState$ | async) === null">
+    <div class="flex-align-items-center dossier-status-container">
+        <div class="dossier-status-text">No status assigned</div>
+    </div>
+</ng-container>
+
+<redaction-dossiers-listing-actions [stats]="stats" [dossier]="dossier"></redaction-dossiers-listing-actions>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
index 4ec6e70d2..925854463 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/dossiers-listing-status/dossiers-listing-status.component.ts
@@ -1,5 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
+import { Dossier, DossierStats } from '../../../../../../../../../../libs/red-domain/src';
+import { Observable } from 'rxjs';
+import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
 
 @Component({
     selector: 'redaction-dossiers-listing-status',
@@ -7,6 +10,16 @@ import { DossierState } from '../../../../../../../../../../libs/red-domain/src/
     styleUrls: ['./dossiers-listing-status.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DossiersListingStatusComponent {
-    @Input() dossierState: DossierState;
+export class DossiersListingStatusComponent implements OnInit {
+    dossierState$: Observable<DossierState>;
+    @Input() stats: DossierStats;
+    @Input() dossier: Dossier;
+
+    constructor(private readonly _dossierStateService: DossierStateService) {}
+
+    ngOnInit(): void {
+        if (this.dossier.dossierStatusId) {
+            this.dossierState$ = this._dossierStateService.getById(this.dossier.dossierStatusId);
+        }
+    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
index 9a8bc9a43..90e29ab9a 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.html
@@ -12,10 +12,10 @@
     </div>
 
     <div class="cell status-container">
-        <redaction-dossiers-listing-actions [dossier]="dossier" [stats]="stats"></redaction-dossiers-listing-actions>
+        <redaction-dossier-documents-status [stats]="stats"></redaction-dossier-documents-status>
     </div>
 
     <div class="cell">
-        <redaction-dossiers-listing-status [dossierState]="states[0]"></redaction-dossiers-listing-status>
+        <redaction-dossiers-listing-status [stats]="stats" [dossier]="dossier"></redaction-dossiers-listing-status>
     </div>
 </ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
index b6c66da48..d1e991d3c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/components/table-item/table-item.component.ts
@@ -1,10 +1,8 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { Dossier, DossierStats } from '@red/domain';
 import { DossierStatsService } from '@services/entity-services/dossier-stats.service';
-import { BehaviorSubject, firstValueFrom, Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
-import { DossierStateService } from '../../../../../../services/entity-services/dossier-state.service';
-import { DossierState } from '../../../../../../../../../../libs/red-domain/src/lib/dossier-state';
 
 @Component({
     selector: 'redaction-table-item [dossier]',
@@ -12,14 +10,13 @@ import { DossierState } from '../../../../../../../../../../libs/red-domain/src/
     styleUrls: ['./table-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TableItemComponent implements OnChanges, OnInit {
+export class TableItemComponent implements OnChanges {
     @Input() dossier!: Dossier;
-    states: DossierState[];
 
     readonly stats$: Observable<DossierStats>;
     private readonly _ngOnChanges$ = new BehaviorSubject<string>(undefined);
 
-    constructor(readonly dossierStatsService: DossierStatsService, readonly dossierStateService: DossierStateService) {
+    constructor(readonly dossierStatsService: DossierStatsService) {
         this.stats$ = this._ngOnChanges$.pipe(switchMap(dossierId => this.dossierStatsService.watch$(dossierId)));
     }
 
@@ -28,9 +25,4 @@ export class TableItemComponent implements OnChanges, OnInit {
             this._ngOnChanges$.next(this.dossier.dossierId);
         }
     }
-
-    async ngOnInit(): Promise<void> {
-        this.states = await firstValueFrom(this.dossierStateService.loadAllForTemplate('b3413395-8511-4a45-b0eb-b103012b4d8a'));
-        console.log(this.states);
-    }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
index 01490f1bd..29af016b3 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/dossiers-listing.module.ts
@@ -13,6 +13,7 @@ import { TableItemComponent } from './components/table-item/table-item.component
 import { SharedDossiersModule } from '../../shared/shared-dossiers.module';
 import { DossierWorkloadColumnComponent } from './components/dossier-workload-column/dossier-workload-column.component';
 import { DossiersListingStatusComponent } from './components/dossiers-listing-status/dossiers-listing-status.component';
+import { DossierDocumentsStatusComponent } from './components/dossier-documents-status/dossier-documents-status.component';
 
 const routes: Routes = [
     {
@@ -32,6 +33,7 @@ const routes: Routes = [
         DossierWorkloadColumnComponent,
         TableItemComponent,
         DossiersListingStatusComponent,
+        DossierDocumentsStatusComponent,
     ],
     providers: [ConfigService],
     imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, IqserIconsModule, TranslateModule],
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 42a3ce3ff..4898fb78f 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1008,6 +1008,7 @@
           "placeholder": "Enter Description"
         },
         "due-date": "Due Date",
+        "dossier-status": "Dossier Status",
         "name": {
           "label": "Dossier Name",
           "placeholder": "Enter Name"