diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index aa140d8c4..e7c40a6f6 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -73,6 +73,7 @@ import { PageIndicatorComponent } from './screens/file/page-indicator/page-indic
import { NeedsWorkBadgeComponent } from './screens/common/needs-work-badge/needs-work-badge.component';
import { ProjectOverviewEmptyComponent } from './screens/empty-states/project-overview-empty/project-overview-empty.component';
import { ProjectListingEmptyComponent } from './screens/empty-states/project-listing-empty/project-listing-empty.component';
+import { ProjectListingDetailsComponent } from './screens/project-listing-screen/project-listing-details/project-listing-details.component';
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@@ -111,7 +112,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
PageIndicatorComponent,
NeedsWorkBadgeComponent,
ProjectOverviewEmptyComponent,
- ProjectListingEmptyComponent
+ ProjectListingEmptyComponent,
+ ProjectListingDetailsComponent
],
imports: [
BrowserModule,
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html
new file mode 100644
index 000000000..e68662154
--- /dev/null
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.html
@@ -0,0 +1,32 @@
+
+
+
+
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss
new file mode 100644
index 000000000..1d97dac26
--- /dev/null
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.scss
@@ -0,0 +1,26 @@
+:host {
+ flex: 1;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.project-stats-container {
+ width: fit-content;
+
+ .project-stats-item {
+ display: flex;
+ width: fit-content;
+ gap: 5px;
+ margin-top: 25px;
+
+ &:first-of-type {
+ margin-top: 50px;
+ }
+
+ mat-icon {
+ height: 16px;
+ margin-top: 2px;
+ }
+ }
+}
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.ts
new file mode 100644
index 000000000..97b569684
--- /dev/null
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-details/project-listing-details.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component';
+import { AppStateService } from '../../../state/app-state.service';
+
+@Component({
+ selector: 'redaction-project-listing-details',
+ templateUrl: './project-listing-details.component.html',
+ styleUrls: ['./project-listing-details.component.scss']
+})
+export class ProjectListingDetailsComponent implements OnInit {
+ @Input() public projectsChartData: DoughnutChartConfig[];
+ @Input() public documentsChartData: DoughnutChartConfig[];
+
+ constructor(private readonly _appStateService: AppStateService) {}
+
+ ngOnInit(): void {}
+
+ public get totalPages() {
+ return this._appStateService.totalAnalysedPages;
+ }
+
+ public get totalPeople() {
+ return this._appStateService.totalPeople;
+ }
+}
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index 5035d6307..082e24a8b 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -229,38 +229,10 @@
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
index c8d100a87..e3a8235e2 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss
@@ -38,31 +38,4 @@
display: flex;
width: 430px;
padding-top: 50px;
-
- > div {
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-
- .project-stats-container {
- width: fit-content;
-
- .project-stats-item {
- display: flex;
- width: fit-content;
- gap: 5px;
- margin-top: 25px;
-
- &:first-of-type {
- margin-top: 50px;
- }
-
- mat-icon {
- height: 16px;
- margin-top: 2px;
- }
- }
- }
}
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
index 2dd30e430..1bc441898 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts
@@ -72,14 +72,6 @@ export class ProjectListingScreenComponent implements OnInit {
return this.userService.user;
}
- public get totalPages() {
- return this.appStateService.totalAnalysedPages;
- }
-
- public get totalPeople() {
- return this.appStateService.totalPeople;
- }
-
public get activeProjects() {
return this.appStateService.allProjects.reduce(
(i, p) => i + (p.project.status === Project.StatusEnum.ACTIVE ? 1 : 0),