pdf display

2020-09-21 18:39:11 +03:00 · 2020-09-21 18:39:11 +03:00 · 3e52f7e630
commit 3e52f7e630
parent 5caea6e34f
45 changed files with 927 additions and 143 deletions
--- a/apps/red-ui/proxy.conf.json
+++ b/apps/red-ui/proxy.conf.json
@ -0,0 +1,32 @@
+{
+  "/project": {
+    "target": "http://ingress.redaction-timo-dev.178.63.47.73.xip.io",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug"
+  },
+  "/upload": {
+    "target": "http://ingress.redaction-timo-dev.178.63.47.73.xip.io",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug"
+  },
+  "/download": {
+    "target": "http://ingress.redaction-timo-dev.178.63.47.73.xip.io",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug"
+  },
+  "/delete": {
+    "target": "http://ingress.redaction-timo-dev.178.63.47.73.xip.io",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug"
+  },
+  "/status": {
+    "target": "http://ingress.redaction-timo-dev.178.63.47.73.xip.io",
+    "secure": false,
+    "changeOrigin": true,
+    "logLevel": "debug"
+  }
+}
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@ -27,13 +27,18 @@ import {AddEditProjectDialogComponent} from './screens/project-listing-screen/ad
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatSnackBarModule} from "@angular/material/snack-bar";
 import {MatTooltipModule} from "@angular/material/tooltip";
+import {ConfirmationDialogComponent} from './common/confirmation-dialog/confirmation-dialog.component';
+import { FilePreviewScreenComponent } from './screens/file/file-preview-screen/file-preview-screen.component';
+import { PdfViewerComponent } from './screens/file/pdf-viewer/pdf-viewer.component';
+import {MatTabsModule} from "@angular/material/tabs";
+import {MatButtonToggleModule} from "@angular/material/button-toggle";

 export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
 }

@NgModule({
-  declarations: [AppComponent, BaseScreenComponent, ProjectListingScreenComponent, ProjectOverviewScreenComponent, AddEditProjectDialogComponent],
+  declarations: [AppComponent, BaseScreenComponent, ProjectListingScreenComponent, ProjectOverviewScreenComponent, AddEditProjectDialogComponent, ConfirmationDialogComponent,  FilePreviewScreenComponent, PdfViewerComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
@ -66,9 +71,14 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
            canActivate: [RedKeycloakAuthGuard]
          },
          {
-            path: 'projects/:id',
+            path: 'projects/:projectId',
            component: ProjectOverviewScreenComponent,
            canActivate: [RedKeycloakAuthGuard]
+          },
+          {
+            path: 'projects/:projectId/file/:fileId',
+            component: FilePreviewScreenComponent,
+            canActivate: [RedKeycloakAuthGuard]
          }
        ]
      }
@ -79,7 +89,9 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
    MatMenuModule,
    MatIconModule,
    MatTooltipModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatTabsModule,
+    MatButtonToggleModule
  ],
  providers: [{
    provide: KeycloakService,
--- a/apps/red-ui/src/app/common/confirmation-dialog/confirmation-dialog.component.html
+++ b/apps/red-ui/src/app/common/confirmation-dialog/confirmation-dialog.component.html
@ -0,0 +1,19 @@
+<section class="dialog">
+
+  <button mat-icon-button class="dialog-close" (click)="dialogRef.close()">
+    <mat-icon svgIcon="red:close"></mat-icon>
+  </button>
+  <div class="dialog-header heading-l"
+       [translate]="confirmationDialogInput.title">
+  </div>
+
+  <div class="dialog-content">
+    <p [translate]="confirmationDialogInput.question"></p>
+  </div>
+
+  <div class="dialog-actions">
+    <button mat-flat-button color="primary"
+            (click)="confirm()">{{confirmationDialogInput.confirmationText | translate}}</button>
+    <button mat-flat-button color="primary" (click)="deny()">{{confirmationDialogInput.denyText | translate}}</button>
+  </div>
+</section>
--- a/apps/red-ui/src/app/common/confirmation-dialog/confirmation-dialog.component.scss
+++ b/apps/red-ui/src/app/common/confirmation-dialog/confirmation-dialog.component.scss
--- a/apps/red-ui/src/app/common/confirmation-dialog/confirmation-dialog.component.ts
+++ b/apps/red-ui/src/app/common/confirmation-dialog/confirmation-dialog.component.ts
@ -0,0 +1,56 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {TranslateService} from "@ngx-translate/core";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+
+
+export class ConfirmationDialogInput {
+
+  public title?: string;
+  public question?: string;
+  public confirmationText?: string;
+  public denyText?: string;
+
+  constructor(options: ConfirmationDialogInput) {
+    this.title = options.title || ConfirmationDialogInput.default().title;
+    this.question = options.question || ConfirmationDialogInput.default().question;
+    this.confirmationText = options.confirmationText || ConfirmationDialogInput.default().confirmationText;
+    this.denyText = options.denyText || ConfirmationDialogInput.default().denyText;
+  }
+
+  static default(){
+    return new ConfirmationDialogInput({
+      title:'common.confirmation-dialog.title.label',
+      question:'common.confirmation-dialog.description.label',
+      confirmationText:'common.confirmation-dialog.confirm.label',
+      denyText:'common.confirmation-dialog.deny.label'
+    });
+  }
+}
+
+@Component({
+  selector: 'redaction-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrls: ['./confirmation-dialog.component.scss']
+})
+export class ConfirmationDialogComponent implements OnInit {
+
+  constructor(
+    private readonly _translateService: TranslateService,
+    public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public confirmationDialogInput: ConfirmationDialogInput) {
+    if(!confirmationDialogInput){
+      this.confirmationDialogInput = ConfirmationDialogInput.default();
+    }
+  }
+
+  ngOnInit(): void {
+  }
+
+  deny() {
+    this.dialogRef.close();
+  }
+
+  confirm() {
+    this.dialogRef.close(true);
+  }
+}
--- a/apps/red-ui/src/app/icons/icons.module.ts
+++ b/apps/red-ui/src/app/icons/icons.module.ts
@ -23,6 +23,26 @@ export class IconsModule {
      'close',
      sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/close_icon.svg')
    );
+    iconRegistry.addSvgIconInNamespace(
+      'red',
+      'edit',
+      sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/edit_icon.svg')
+    );
+    iconRegistry.addSvgIconInNamespace(
+      'red',
+      'delete',
+      sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/trash_icon.svg')
+    );
+    iconRegistry.addSvgIconInNamespace(
+      'red',
+      'logout',
+      sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/logout_icon.svg')
+    );
+    iconRegistry.addSvgIconInNamespace(
+      'red',
+      'preview',
+      sanitizer.bypassSecurityTrustResourceUrl('/assets/icons/general/preview_icon.svg')
+    );

  }

--- a/apps/red-ui/src/app/interceptor/api-path-interceptor.service.ts
+++ b/apps/red-ui/src/app/interceptor/api-path-interceptor.service.ts
@ -11,14 +11,16 @@ export class ApiPathInterceptorService implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

-    if (req.url.startsWith('/redaction-gateway-v1')) {
-      const updatedRequest = req.clone({
-        url: this._appConfigService.getConfig(AppConfigKey.API_URL) + req.url
-      })
-
-      return next.handle(updatedRequest);
-    } else {
+    // if (!req.url.startsWith('/assets')) {
+    //   const updatedRequest = req.clone({
+    //     url: this._appConfigService.getConfig(AppConfigKey.API_URL) + req.url
+    //   })
+    //
+    //   console.log(req);
+    //
+    //   return next.handle(updatedRequest);
+    // } else {
      return next.handle(req);
-    }
+   // }
  }
 }
--- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html
@ -3,11 +3,26 @@
    <div class="menu left">
      <button mat-flat-button color="primary" translate="top-bar.navigation-items.projects.label"
              routerLink="/ui/projects"></button>
+      <div class="breadcrumb" *ngIf="appStateService.activeProject">
+        &nbsp;>&nbsp;
+      </div>
+      <button mat-flat-button color="accent" *ngIf="appStateService.activeProject"
+              [routerLink]="'/ui/projects/'+appStateService.activeProject.projectId">{{appStateService.activeProject.projectName}}</button>
+      <div class="breadcrumb" *ngIf="appStateService.activeFile">
+        &nbsp;>&nbsp;
+      </div>
+      <button mat-flat-button color="accent" *ngIf="appStateService.activeFile"
+              [routerLink]="'/ui/projects/'+appStateService.activeProject.projectId+'/file/'+appStateService.activeFile.fileId">{{appStateService.activeFile.filename}}</button>
    </div>
    <div class="menu right">
      <button mat-button [matMenuTriggerFor]="menu" translate="top-bar.navigation-items.my-account.label"></button>
      <mat-menu #menu="matMenu">
-        <button mat-menu-item translate="top-bar.navigation-items.my-account.children.logout.label"></button>
+        <button mat-menu-item (click)="logout()">
+          <mat-icon svgIcon="red:logout">
+          </mat-icon>
+          <span translate="top-bar.navigation-items.my-account.children.logout.label">
+          </span>
+        </button>
      </mat-menu>
    </div>
  </div>
--- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
+++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.ts
@ -1,5 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {UserService} from "../../user/user.service";
+import {FileStatus, Project, ProjectControllerService, StatusControllerService} from "@redaction/red-ui-http";
+import {ActivatedRoute} from "@angular/router";
+import {Observable} from "rxjs";
+import {map} from "rxjs/operators";
+import {AppStateService} from "../../state/app-state.service";

@Component({
  selector: 'redaction-base-screen',
@ -8,13 +13,18 @@ import {UserService} from "../../user/user.service";
 })
 export class BaseScreenComponent implements OnInit {

-  constructor(private readonly   _userService: UserService) { }
+
+  constructor(
+    public readonly appStateService: AppStateService,
+    private readonly   _userService: UserService) {
+
+  }

  ngOnInit(): void {
  }

-  async logout() {
-    await this._userService.logout();
+  logout() {
+    this._userService.logout();
  }

 }
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@ -0,0 +1,9 @@
+<div class="page-header">
+  <div class="heading-l clamp-2">{{appStateService.activeFile?.filename}}</div>
+  <mat-button-toggle-group name="type" #group="matButtonToggleGroup" value="ORIGINAL">
+    <mat-button-toggle value="ORIGINAL">Original</mat-button-toggle>
+    <mat-button-toggle value="ANNOTATED">Annotated</mat-button-toggle>
+    <mat-button-toggle value="REDACTED">Redacted</mat-button-toggle>
+  </mat-button-toggle-group>
+</div>
+<redaction-pdf-viewer [fileId]="fileId" [fileType]="group.value"></redaction-pdf-viewer>
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@ -0,0 +1,3 @@
+.mat-tab-body-wrapper{
+  flex-grow: 1;
+}
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
@ -0,0 +1,44 @@
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {
+  FileStatus,
+  FileUploadControllerService,
+  ProjectControllerService,
+  StatusControllerService
+} from "@redaction/red-ui-http";
+import {TranslateService} from "@ngx-translate/core";
+import {NotificationService} from "../../../notification/notification.service";
+import {MatDialog} from "@angular/material/dialog";
+import {AppStateService} from "../../../state/app-state.service";
+
+@Component({
+  selector: 'redaction-file-preview-screen',
+  templateUrl: './file-preview-screen.component.html',
+  styleUrls: ['./file-preview-screen.component.scss']
+})
+export class FilePreviewScreenComponent implements OnInit {
+
+  projectId: string;
+  fileId: string;
+
+  constructor(
+    public readonly appStateService: AppStateService,
+    private readonly _activatedRoute: ActivatedRoute,
+    private readonly _statusControllerService: StatusControllerService,
+    private readonly _translateService: TranslateService,
+    private readonly _notificationService: NotificationService,
+    private readonly  _dialog: MatDialog,
+    private readonly _router: Router,
+    private readonly _fileUploadControllerService: FileUploadControllerService,
+    private readonly _projectControllerService: ProjectControllerService) {
+    this._activatedRoute.params.subscribe(params => {
+      this.projectId = params.projectId;
+      this.fileId = params.fileId;
+      this.appStateService.activateFile(this.projectId,this.fileId).subscribe(()=>{});
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+}
--- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.html
+++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.html
@ -0,0 +1,3 @@
+<div class="page">
+  <div #viewer [id]="fileId" class="viewer"></div>
+</div>
--- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.scss
+++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.scss
@ -0,0 +1,11 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.viewer {
+  width: 100%;
+  height: calc(100vh - (61px + 80px + 50px + 40px))
+}
--- a/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
+++ b/apps/red-ui/src/app/screens/file/pdf-viewer/pdf-viewer.component.ts
@ -0,0 +1,96 @@
+import {AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
+import {KeycloakService} from "keycloak-angular";
+import {AppConfigService} from "../../../app-config/app-config.service";
+import {FileStatus, FileUploadControllerService} from "@redaction/red-ui-http";
+import {Observable, of} from "rxjs";
+import {tap} from "rxjs/operators";
+
+declare const WebViewer: any;
+
+export enum FileType {
+  ORIGINAL = 'ORIGINAL',
+  ANNOTATED = 'ANNOTATED',
+  REDACTED = 'REDACTED'
+}
+
+@Component({
+  selector: 'redaction-pdf-viewer',
+  templateUrl: './pdf-viewer.component.html',
+  styleUrls: ['./pdf-viewer.component.scss']
+})
+export class PdfViewerComponent implements OnInit, AfterViewInit, OnChanges {
+
+  @Input() fileId: string;
+  @Input() fileType: FileType;
+  @Input() fileStatus: FileStatus;
+
+  @ViewChild('viewer', {static: true}) viewer: ElementRef;
+  wvInstance: any;
+
+  _annotatedFileData: Blob;
+  _originalFileData: Blob;
+  _redactedFileData: Blob;
+
+
+  constructor(private readonly _keycloak: KeycloakService,
+              private readonly _fileUploadControllerService: FileUploadControllerService,
+              private readonly _appConfigService: AppConfigService) {
+  }
+
+  ngOnInit() {
+    this.wvDocumentLoadedHandler = this.wvDocumentLoadedHandler.bind(this);
+  }
+
+  wvDocumentLoadedHandler(): void {
+    const docViewer = this.wvInstance;
+    const annotManager = this.wvInstance.annotManager;
+  }
+
+  ngAfterViewInit(): void {
+    this._loadFile().subscribe(data => {
+      this._loadViewer(data);
+    });
+  }
+
+  private _loadViewer(pdfBlob: any) {
+    WebViewer({
+      path: '/assets/wv-resources',
+    }, this.viewer.nativeElement).then(instance => {
+      this.wvInstance = instance;
+      instance.docViewer.on('documentLoaded', this.wvDocumentLoadedHandler)
+      instance.loadDocument(pdfBlob, {filename: 'myfile.pdf'});
+    })
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.wvInstance) {
+      this._loadFile().subscribe(data => {
+        this.wvInstance.loadDocument(data, {filename: 'myfile.pdf'});
+      });
+    }
+  }
+
+  private _loadFile(): Observable<any> {
+    let fileObs$: Observable<any>;
+    switch (this.fileType) {
+      case FileType.ANNOTATED:
+        fileObs$ = this._annotatedFileData ? of(this._annotatedFileData) : this._fileUploadControllerService.downloadAnnotatedFile(this.fileId, true, 'body').pipe(tap(data => {
+          this._annotatedFileData = data;
+        }));
+        break;
+      case FileType.REDACTED:
+        fileObs$ = this._redactedFileData ? of(this._redactedFileData) : this._fileUploadControllerService.downloadRedactedFile(this.fileId, true, 'body').pipe(tap(data => {
+          this._redactedFileData = data;
+        }));
+        break;
+      case FileType.ORIGINAL:
+      default:
+        fileObs$ = this._originalFileData ? of(this._originalFileData) : this._fileUploadControllerService.downloadOriginalFile(this.fileId, true, 'body')
+          .pipe(tap(data => {
+            this._originalFileData = data;
+          }));
+        break;
+    }
+    return fileObs$;
+  }
+}
--- a/apps/red-ui/src/app/screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/add-edit-project-dialog/add-edit-project-dialog.component.html
@ -5,7 +5,7 @@
      <mat-icon svgIcon="red:close"></mat-icon>
    </button>
    <div class="dialog-header heading-l"
-         [translate]="project?.projectId ? 'projects.add-edit-dialog.header-new.label': 'projects.add-edit-dialog.header-edit.label'">
+         [translate]="project?.projectId ? 'projects.add-edit-dialog.header-edit.label': 'projects.add-edit-dialog.header-new.label'">

    </div>

--- 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
@ -1,17 +1,26 @@
-
 <div class="page-header">
  <div translate="projects.header.label" class="heading-xl"></div>
  <button mat-flat-button color="accent" translate="projects.add-new.label" (click)="openAddProjectDialog()"></button>
 </div>

-<div class="text" translate="projects.no-projects.label" *ngIf="(projects$ | async )?.length ===0"></div>
-<div class="project-listing">
-  <div *ngFor="let project of projects$ | async" class="project" [routerLink]="'/ui/projects/'+project.projectId">
-    <div class="project-name">
-      {{project.projectName}}
+<div translate="projects.no-projects.label" *ngIf="appStateService.allProjects?.length === 0 "></div>
+<div class="listing">
+  <div *ngFor="let project of appStateService.allProjects" class="list-entry" [routerLink]="'/ui/projects/'+project.projectId">
+    <div class="list-entry-content">
+      <div class="listing-title">
+        {{project.projectName}}
+      </div>
+      <div class="listing-subtitle">
+        {{project.description}}
+      </div>
    </div>
-    <div class="project-description">
-      {{project.description}}
+    <div class="list-entry-actions">
+      <button mat-icon-button (click)="editProject($event,project)">
+        <mat-icon svgIcon="red:edit"></mat-icon>
+      </button>
+      <button mat-icon-button (click)="deleteProject($event,project)" color="warn">
+        <mat-icon svgIcon="red:delete"></mat-icon>
+      </button>
    </div>
  </div>
 </div>
--- 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
@ -1,57 +1,2 @@
@import "../../../../../../assets/styles/red-mixins";

-
-.project-listing {
-  display: inline-flex;
-
-  flex-wrap: wrap;
-
-  .project {
-    box-sizing: border-box;
-    height: 122px;
-    width: 260px;
-    border: 1px solid $grey-1;
-    border-radius: 2px;
-    background-color: $white;
-    padding: 24px;
-    margin-right: 22px;
-    margin-bottom: 22px;
-
-    transition: background-color 0.35s ease-in-out;
-
-    &:hover {
-      background-color: $grey-1;
-      cursor: pointer;
-      * {
-        color: $white !important;
-      }
-    }
-
-    .project-name {
-      height: 44px;
-      color: #283241;
-      font-family: Inter, sans-serf, serif;
-      font-size: 18px;
-      font-weight: bold;
-      letter-spacing: 0;
-      margin-bottom: 17px;
-      line-height: 22px;
-      @include line-clamp(2);
-      transition: color 0.35s ease-in-out;
-
-    }
-
-    .project-description {
-      height: 12px;
-      opacity: 0.7;
-      color: #283241;
-      font-family: Inconsolata, monospace, monospace;
-      font-size: 12px;
-      letter-spacing: 0;
-      line-height: 12px;
-      @include line-clamp(1);
-      transition: color 0.35s ease-in-out;
-    }
-  }
-
-}
--- 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
@ -1,8 +1,11 @@
 import {Component, OnInit} from '@angular/core';
 import {Project, ProjectControllerService} from "@redaction/red-ui-http";
-import {Observable} from "rxjs";
 import {MatDialog} from "@angular/material/dialog";
 import {AddEditProjectDialogComponent} from "./add-edit-project-dialog/add-edit-project-dialog.component";
+import {ConfirmationDialogComponent} from "../../common/confirmation-dialog/confirmation-dialog.component";
+import {TranslateService} from "@ngx-translate/core";
+import {NotificationService} from "../../notification/notification.service";
+import {AppStateService} from "../../state/app-state.service";

@Component({
  selector: 'redaction-project-listing-screen',
@ -11,20 +14,25 @@ import {AddEditProjectDialogComponent} from "./add-edit-project-dialog/add-edit-
 })
 export class ProjectListingScreenComponent implements OnInit {

-  projects$: Observable<Project[]>;

-  constructor(private readonly _projectControllerService: ProjectControllerService, private readonly  _dialog: MatDialog) {
+  constructor(
+    public readonly appStateService: AppStateService,
+    private readonly _projectControllerService: ProjectControllerService,
+    private readonly _translateService: TranslateService,
+    private readonly _notificationService: NotificationService,
+    private readonly  _dialog: MatDialog) {
  }

  ngOnInit(): void {
    this._reloadProjects();
  }

-  openAddProjectDialog(): void {
+  openAddProjectDialog(project?: Project): void {
    const dialogRef = this._dialog.open(AddEditProjectDialogComponent, {
      width: '400px',
      maxWidth: '90vw',
-      autoFocus: false
+      autoFocus: false,
+      data: project
    });

    dialogRef.afterClosed().subscribe(result => {
@ -33,7 +41,34 @@ export class ProjectListingScreenComponent implements OnInit {
  }

  private _reloadProjects() {
-    this.projects$ = this._projectControllerService.getProjects();
+    this.appStateService.reset();
+    this.appStateService.loadAllProjects().subscribe(() => {
+    });
  }

+  editProject($event: MouseEvent, project: Project) {
+    $event.stopPropagation();
+    this.openAddProjectDialog(project);
+  }
+
+  deleteProject($event: MouseEvent, project: Project) {
+    $event.stopPropagation();
+    const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
+      width: '400px',
+      maxWidth: '90vw',
+      autoFocus: false,
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this._projectControllerService.deleteProject(project.projectId).subscribe(result => {
+          this._reloadProjects();
+        }, () => {
+          this._notificationService.showToastNotification(this._translateService.instant('projects.delete.delete-failed.label', project))
+        });
+      }
+
+
+    });
+  }
 }
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@ -1 +1,44 @@
-<p>project-overview-screen works!</p>
+<div class="heading-l" [innerHTML]="'project-overview.no-project.label' | translate:{projectId: projectId}"
+     *ngIf="!appStateService.activeProject"></div>
+
+
+<div class="page-header" *ngIf="appStateService.activeProject">
+  <div class="heading-xl">{{appStateService.activeProject.projectName}}</div>
+  <button mat-flat-button color="accent" translate="project-overview.upload-files.label"
+          (click)="fileInput.click()"></button>
+  <input type="file" class="file-upload-input" #fileInput multiple="true"
+         (change)="handleFileInput($event.target.files)">
+</div>
+<div class="heading-l">{{appStateService.activeProject?.description}}</div>
+<div class="break-40"></div>
+<div class="listing">
+  <div *ngFor="let fileStatus of appStateService.projectFiles" class="list-entry xl"
+       [routerLink]="'/ui/projects/'+projectId+'/file/'+fileStatus.fileId">
+    <div class="list-entry-content">
+      <div class="listing-title one-line slim break-all">
+        {{fileStatus.filename}}
+      </div>
+      <div class="listing-subtitle">
+        {{'project-overview.file-listing.file-entry.status.label'| translate:fileStatus}}
+      </div>
+      <div class="listing-subtitle">
+        {{'project-overview.file-listing.file-entry.number-of-pages.label'| translate:fileStatus}}
+      </div>
+      <div class="listing-subtitle">
+        {{'project-overview.file-listing.file-entry.number-of-analyses.label'| translate:fileStatus}}
+      </div>
+      <div class="listing-subtitle">
+        {{'project-overview.file-listing.file-entry.added.label'| translate:{added: fileStatus.added | date:'short'} }}
+      </div>
+      <div class="listing-subtitle">
+        {{'project-overview.file-listing.file-entry.last-updated.label'| translate:{lastUpdated: fileStatus.lastUpdated | date:'short'} }}
+      </div>
+    </div>
+    <div class="list-entry-actions">
+      <button mat-icon-button (click)="deleteFile($event,fileStatus)" color="warn">
+        <mat-icon svgIcon="red:delete"></mat-icon>
+      </button>
+    </div>
+  </div>
+</div>
+
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss
@ -0,0 +1,4 @@
+
+.file-upload-input{
+  display: none;
+}
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@ -1,4 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {
+  FileStatus,
+  FileUploadControllerService,
+  Project,
+  ProjectControllerService,
+  StatusControllerService
+} from "@redaction/red-ui-http";
+import {Observable} from "rxjs";
+import {mergeMap, tap} from "rxjs/operators";
+import {NotificationService} from "../../notification/notification.service";
+import {TranslateService} from "@ngx-translate/core";
+import {ConfirmationDialogComponent} from "../../common/confirmation-dialog/confirmation-dialog.component";
+import {MatDialog} from "@angular/material/dialog";
+import {AppStateService} from "../../state/app-state.service";

@Component({
  selector: 'redaction-project-overview-screen',
@ -7,9 +22,63 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProjectOverviewScreenComponent implements OnInit {

-  constructor() { }
+  projectId: string;
+
+  constructor(public readonly appStateService: AppStateService,
+              private readonly _activatedRoute: ActivatedRoute,
+              private readonly _statusControllerService: StatusControllerService,
+              private readonly _translateService: TranslateService,
+              private readonly _notificationService: NotificationService,
+              private readonly  _dialog: MatDialog,
+              private readonly _router: Router,
+              private readonly _fileUploadControllerService: FileUploadControllerService,
+              private readonly _projectControllerService: ProjectControllerService) {
+    this._activatedRoute.params.subscribe(params => {
+      this.projectId = params.projectId;
+      this._loadProject();
+    });
+  }

  ngOnInit(): void {
  }

+  private _loadProject() {
+    this.appStateService.activateProject(this.projectId).subscribe(()=>{});
+  }
+
+  handleFileInput(files: File[]) {
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      this._fileUploadControllerService.uploadFileForm(file, this.projectId, 'response').subscribe(() => {
+        this._getFileStatus();
+      }, () => {
+        this._notificationService.showToastNotification(this._translateService.instant('project-overview.upload-error.label', file))
+      })
+    }
+  }
+
+  private _getFileStatus() {
+    this.appStateService.getActiveProjectStatus().subscribe(()=>{});
+  }
+
+  deleteFile($event: MouseEvent, fileStatus: FileStatus) {
+    $event.stopPropagation();
+    const dialogRef = this._dialog.open(ConfirmationDialogComponent, {
+      width: '400px',
+      maxWidth: '90vw',
+      autoFocus: false,
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this._fileUploadControllerService.deleteFile(fileStatus.projectId, fileStatus.fileId).subscribe(result => {
+          this._getFileStatus();
+        }, () => {
+          this._notificationService.showToastNotification(this._translateService.instant('project-overview.delete-file-error.label', fileStatus))
+        });
+      }
+
+
+    });
+  }
 }
--- a/apps/red-ui/src/app/state/app-state.service.ts
+++ b/apps/red-ui/src/app/state/app-state.service.ts
@ -0,0 +1,73 @@
+import {Injectable} from "@angular/core";
+import {FileStatus, Project, ProjectControllerService, StatusControllerService} from "@redaction/red-ui-http";
+import {map, mergeMap, tap} from "rxjs/operators";
+import {File} from "@angular/compiler-cli/src/ngtsc/file_system/testing/src/mock_file_system";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppStateService {
+
+  private _projects: Project[];
+  private _activeProject: Project;
+  private _activeProjectFiles: FileStatus[];
+  private _activeFile: FileStatus;
+
+  constructor(private readonly _projectControllerService: ProjectControllerService,
+              private readonly _statusControllerService: StatusControllerService) {
+  }
+
+  loadAllProjects() {
+    return this._projectControllerService.getProjects().pipe(tap((projects: Project[]) => {
+      this._projects = projects;
+    }));
+  }
+
+  activateProject(projectId: string) {
+    this._activeProjectFiles = null;
+    this._activeFile = null;
+    return this._projectControllerService.getProject(projectId).pipe(tap(project => {
+      this._activeProject = project;
+    })).pipe(mergeMap(() => {
+      return this.getActiveProjectStatus();
+    }));
+  }
+
+  getActiveProjectStatus() {
+    return this._statusControllerService.getProjectStatus(this._activeProject.projectId).pipe(tap((files: FileStatus[]) => {
+      this._activeProjectFiles = files;
+    }))
+  }
+
+  activateFile(projectId: string, fileId: string) {
+    return this.activateProject(projectId).pipe(map((files: FileStatus[]) => {
+      const file = files.find(f => f.fileId === fileId);
+      this._activeFile = file;
+      return file;
+    }));
+  }
+
+
+  get allProjects(): Project[] {
+    return this._projects;
+  }
+
+  get activeProject(): Project {
+    return this._activeProject;
+  }
+
+  get projectFiles(): FileStatus[] {
+    return this._activeProjectFiles;
+  }
+
+  get activeFile(): FileStatus {
+    return this._activeFile;
+  }
+
+  reset() {
+    this._activeProject = null;
+    this._activeProjectFiles = null;
+    this._activeFile = null;
+  }
+
+}
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@ -2,5 +2,5 @@
  "KEYCLOAK_URL": "https://keycloak-dev.iqser.cloud/auth",
  "KEYCLOAK_REALM": "dev",
  "KEYCLOAK_CLIENT_ID": "gin-client",
-  "API_URL": "http://ingress.redaction-timo.178.63.47.73.xip.io"
+  "API_URL": "http://ingress.redaction-timo-dev.178.63.47.73.xip.io"
 }
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@ -1,4 +1,20 @@
 {
+  "common": {
+    "confirmation-dialog": {
+      "title": {
+        "label": "Confirm Action"
+      },
+      "description": {
+        "label": "This action requires confirmation, do you wish to proceed?"
+      },
+      "confirm": {
+        "label": "Yes"
+      },
+      "deny": {
+        "label": "No"
+      }
+    }
+  },
  "top-bar": {
    "navigation-items": {
      "projects": {
@ -20,7 +36,7 @@
        "label": "New Project"
      },
      "header-edit": {
-        "label": "New Project"
+        "label": "Edit Project"
      },
      "form": {
        "description": {
@ -39,11 +55,52 @@
    "header": {
      "label": "Projects"
    },
+    "delete": {
+      "delete-failed": {
+        "label": "Failed to delete project: {{projectName}}"
+      }
+    },
    "add-new": {
      "label": "New Project"
    },
    "no-projects": {
      "label": "You currently have no projects. You can start your work by creating a new one!"
    }
+  },
+  "project-overview": {
+    "upload-error": {
+      "label": "Failed to upload file: {{name}}"
+    },
+    "delete-file-error": {
+      "label": "Failed to delete file: {{filename}}"
+    },
+    "file-listing": {
+      "file-entry": {
+        "status": {
+          "label": "Status: {{status}}"
+        },
+        "number-of-pages": {
+          "label": "Number of pages: {{numberOfPages}}"
+        },
+        "number-of-analyses": {
+          "label": "Analysis count: {{numberOfAnalyses}}"
+        },
+        "added": {
+          "label": "Date added: {{added}}"
+        },
+        "last-updated": {
+          "label": "Last updated: {{lastUpdated}}"
+        }
+      }
+    },
+    "header": {
+      "label": "Project Overview"
+    },
+    "upload-files": {
+      "label": "Upload Files"
+    },
+    "no-project": {
+      "label": "Requested project: {{projectId}} does not exist! <a href='/ui/projects'>Back to Project Listing. <a/>"
+    }
  }
 }
--- a/apps/red-ui/src/assets/icons/general/download_icon.svg
+++ b/apps/red-ui/src/assets/icons/general/download_icon.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <defs>
+        <polygon id="path-1" points="0 0 280 0 280 166 3.14002472e-16 166"></polygon>
+        <filter x="-10.5%" y="-17.2%" width="122.5%" height="138.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="2" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-141.000000, -1387.000000)">
+        <g id="Card-Options-Menu" transform="translate(125.000000, 1263.000000)">
+            <path d="M16.4603029,136.443345 C16.7333269,136.443345 16.9706057,136.685161 16.9706057,136.97588 L16.9706057,138.002218 C16.9706057,138.481802 17.3571344,138.881833 17.8239685,138.881833 L30.0762814,138.882865 C30.5497554,138.882865 30.9293943,138.49484 30.9293943,138.00325 L30.9293943,136.976913 C30.9293943,136.678859 31.1536674,136.443345 31.4396971,136.443345 C31.7258916,136.443345 31.95,136.678773 31.95,136.976913 L31.95,138.00325 C31.95,139.078606 31.1147393,139.95 30.0762814,139.95 L17.8239643,139.95 C16.7854618,139.95 15.95,139.078559 15.95,138.00325 L15.95,136.976913 C15.95,136.678773 16.1741084,136.443345 16.4603029,136.443345 Z M23.6132943,136.454633 C23.6127555,136.454534 23.6025385,136.447519 23.5826431,136.433585 C23.5776106,136.428379 22.3379357,135.328707 19.8636184,133.134568 C19.6200448,132.92886 19.5918905,132.560088 19.7949244,132.327161 C19.9944005,132.074418 20.3537924,132.045058 20.5809654,132.256889 L23.3545938,134.826617 L23.3545938,124.527304 C23.3545938,124.204485 23.6006072,123.95 23.9143338,123.95 C24.2080783,123.95 24.4601314,124.177706 24.555954,124.505089 L24.4700347,134.789438 L27.3255059,132.257625 C27.5466824,132.052627 27.9053068,132.089094 28.1109133,132.325412 C28.3080663,132.553026 28.2732938,132.920804 28.0448415,133.133785 L24.3347053,136.423173 C24.3170916,136.441394 24.3170916,136.441394 24.27885,136.45915 C24.2693707,136.469889 24.2693707,136.469889 24.2541673,136.481683 C24.2378444,136.492285 24.2251949,136.498282 24.2098311,136.500305 C24.1964444,136.513552 24.1809544,136.521901 24.157798,136.521901 C24.1312207,136.536599 24.1152977,136.542724 24.0960478,136.542724 L23.8112356,136.542724 C23.7916746,136.542724 23.7758799,136.536778 23.757502,136.526882 C23.7240871,136.521628 23.7082583,136.511798 23.6940863,136.49656 C23.6731626,136.485525 23.6731626,136.485525 23.6681781,136.481563 C23.6433368,136.479727 23.627485,136.46989 23.6132943,136.454633 Z" id="download-copy-2" fill="currentColor" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>
--- a/apps/red-ui/src/assets/icons/general/edit_icon.svg
+++ b/apps/red-ui/src/assets/icons/general/edit_icon.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
+    <defs></defs>
+    <g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Data-Sources" transform="translate(-861.000000, -417.000000)">
+            <path d="M871.544734,420.06954 L873.735863,421.975203 L874.418673,421.201826 L872.227543,419.296163 L871.544734,420.06954 Z M873.261172,418.127977 L863.951984,428.622778 L863.238626,431.663236 L866.093723,430.610498 L875.429864,420.057271 L873.261172,418.127977 Z M862.697567,432.966272 C862.311527,433.111098 861.92,432.766892 862.014181,432.365479 L862.967941,428.300384 C862.987433,428.217303 863.027233,428.140356 863.083775,428.076438 L872.637992,417.27577 C872.776701,417.114993 872.974402,417.016837 873.188192,417.00176 C873.401958,416.987631 873.611804,417.058993 873.771464,417.201116 L876.285534,419.437675 C876.444382,419.57737 876.541926,419.773942 876.555853,419.98466 C876.569851,420.196445 876.49855,420.405316 876.357684,420.565503 L866.808151,431.359941 C866.752322,431.423049 866.681883,431.47152 866.606211,431.49987 C866.602701,431.501232 865.29982,431.990033 862.697567,432.966272 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>
--- a/apps/red-ui/src/assets/icons/general/logout_icon.svg
+++ b/apps/red-ui/src/assets/icons/general/logout_icon.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="14px" viewBox="0 0 17 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <defs></defs>
+    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-488.000000, -4752.000000)">
+        <g id="User-Menu" transform="translate(456.000000, 4454.000000)" fill="currentColor">
+            <path d="M48.7966936,304.522526 C49.0677688,304.796017 49.0677688,305.203983 48.7966936,305.477474 L46.4800677,307.794882 C46.2071762,308.068373 45.7989742,308.068373 45.5260828,307.794882 L45.0488633,307.317862 L46.6839417,305.681457 L38.6810935,305.681457 C38.3069461,305.681457 38,305.374347 38,305 C38,304.625653 38.3069461,304.318543 38.6810935,304.318543 L46.6839417,304.318543 L45.0488633,302.682138 L45.5260828,302.205118 C45.7989742,301.931627 46.2071762,301.931627 46.4800677,302.205118 L48.7966936,304.522526 Z M35.5184445,312 C33.6163541,312 32.0629803,310.462957 32,308.500218 L32,301.499782 C32.0629803,299.537043 33.6163541,298 35.5184445,298 L39.6083615,298 C41.4791731,298 42.9682985,299.571064 43,301.499782 C43,301.891457 42.7142638,302.186304 42.3342684,302.186304 C41.9546957,302.186304 41.6689594,301.891457 41.6689594,301.499782 C41.6689594,300.322138 40.7491931,299.373481 39.6083615,299.373481 L35.5184445,299.373481 C34.377613,299.373481 33.395289,300.289862 33.3310406,301.499782 L33.3310406,308.500218 C33.3935982,309.677862 34.3446434,310.626519 35.5184445,310.626519 L39.6083615,310.626519 C40.7491931,310.626519 41.6689594,309.677862 41.6689594,308.500218 C41.6689594,308.108543 41.9546957,307.813696 42.3342684,307.813696 C42.7142638,307.813696 43,308.108543 43,308.500218 C43,310.430681 41.4774823,312 39.6083615,312 L35.5184445,312 Z" id="logout_icon"></path>
+        </g>
+    </g>
+</svg>
--- a/apps/red-ui/src/assets/icons/general/preview_icon.svg
+++ b/apps/red-ui/src/assets/icons/general/preview_icon.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="18px" viewBox="0 0 20 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs></defs>
+    <g id="Onboarding-New-User" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="06-Restart-Tutorial-Button" transform="translate(-1178.000000, -665.000000)" fill="currentColor">
+            <g id="Group" transform="translate(1085.000000, 596.000000)">
+                <g id="Group-3" transform="translate(83.000000, 50.000000)">
+                    <g id="Hilfe-Floating-btn" transform="translate(0.000000, 8.000000)">
+                        <path d="M29.6722897,11.840741 C23.9318544,10.0093428 21.0346091,11.6185908 20.0309663,12.4508372 C19.027435,11.6185852 16.1300783,10.0093428 10.3896402,11.840741 C10.166515,11.9241826 10,12.1181584 10,12.3673901 L10,27.6253428 C10,27.964541 10.3384856,28.2798813 10.7248937,28.1519919 C17.1334954,26.0995476 19.4464461,28.651565 19.5857636,28.8173496 C19.8121544,29.0427512 20.0929626,29.0882642 20.3933588,28.7891751 C20.4488685,28.733908 22.7617551,26.0702634 29.254226,28.1238174 C29.6362622,28.2506054 29.9791224,27.9395956 29.9791224,27.5971683 L29.9780329,12.3675121 C30.0618407,12.1182693 29.8942251,11.9232006 29.6721755,11.8408631 L29.6722897,11.840741 Z M11.1146509,26.8764825 L11.1146509,12.7834051 C14.0099457,11.9229675 17.6213321,11.5816333 19.7523315,13.6991042 L19.7523315,27.5147643 C18.582288,26.6825123 15.9353126,25.5446574 11.1146509,26.8764825 Z M28.9472818,26.8764825 C24.1266201,25.5175815 21.479589,26.6825068 20.3096012,27.4865787 L20.3096012,13.6709186 C20.5882361,13.5322099 22.551748,10.8512489 28.9472818,12.7552195 L28.9472818,26.8764825 Z" id="booklet"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/apps/red-ui/src/assets/icons/general/trash_icon.svg
+++ b/apps/red-ui/src/assets/icons/general/trash_icon.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <defs></defs>
+    <g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-1139.000000, -1344.000000)">
+        <path d="M1145.96897,1356.87415 L1145.96897,1349.10873 C1145.96897,1348.86715 1145.76161,1348.67108 1145.50611,1348.67108 C1145.25062,1348.67108 1145.04326,1348.86715 1145.04326,1349.10873 L1145.04326,1356.87415 C1145.04326,1357.11574 1145.25062,1357.31181 1145.50611,1357.31181 C1145.76161,1357.31181 1145.96897,1357.11574 1145.96897,1356.87415 Z M1148.9551,1356.87415 L1148.9551,1349.10873 C1148.9551,1348.86715 1148.74774,1348.67108 1148.49224,1348.67108 C1148.23675,1348.67108 1148.02939,1348.86715 1148.02939,1349.10873 L1148.02939,1356.87415 C1148.02939,1357.11574 1148.23675,1357.31181 1148.49224,1357.31181 C1148.74774,1357.31181 1148.9551,1357.11574 1148.9551,1356.87415 Z M1152.08234,1348.67108 C1151.82685,1348.67108 1151.61949,1348.86715 1151.61949,1349.10873 L1151.61949,1358.48668 C1151.61949,1358.83914 1151.3175,1359.12468 1150.9464,1359.12468 L1143.05525,1359.12468 C1142.6825,1359.12468 1142.3801,1358.83914 1142.3801,1358.48668 L1142.3801,1349.10873 C1142.3801,1348.86715 1142.17315,1348.67108 1141.91724,1348.67108 C1141.66175,1348.67108 1141.45439,1348.86715 1141.45439,1349.10873 L1141.45439,1358.48668 C1141.45439,1359.32075 1142.17315,1360 1143.05525,1360 L1150.9464,1360 C1151.82849,1360 1152.5452,1359.32075 1152.5452,1358.48668 L1152.5452,1349.10873 C1152.5452,1348.86559 1152.33825,1348.67108 1152.08234,1348.67108 Z M1153.53715,1346.73993 L1150.37904,1346.73993 L1150.37904,1344.43766 C1150.37904,1344.19607 1150.17168,1344 1149.91619,1344 L1144.08546,1344.00156 C1143.82996,1344.00156 1143.6226,1344.19724 1143.6226,1344.43883 L1143.6226,1346.7411 L1140.46285,1346.7411 C1140.20736,1346.7411 1140,1346.93717 1140,1347.17876 C1140,1347.42074 1140.20736,1347.61642 1140.46285,1347.61642 L1153.53715,1347.61642 C1153.79264,1347.61642 1154,1347.42074 1154,1347.17876 C1154,1346.93562 1153.79264,1346.73993 1153.53715,1346.73993 Z M1149.45333,1346.73993 L1144.54831,1346.73993 L1144.54831,1344.87532 L1149.45333,1344.87532 L1149.45333,1346.73993 Z" id="trash_icon" fill="currentColor"></path>
+    </g>
+</svg>
--- a/assets/styles/page-layout.scss
+++ b/assets/styles/page-layout.scss
@ -1,3 +1,6 @@
+@import "red-variables";
+@import "red-mixins";
+
 html, body {
  margin: 0;
  padding: 0;
@ -5,9 +8,119 @@ html, body {
  font-family: 'Inter', sans-serif;
 }

-.page-header{
+.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 40px;
 }
+
+
+.listing {
+  width: 100%;
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  .list-entry {
+    box-sizing: border-box;
+    height: 122px;
+    width: 310px;
+    border: 1px solid $grey-1;
+    border-radius: 2px;
+    background-color: $white;
+    padding: 24px;
+    margin-right: 22px;
+    margin-bottom: 22px;
+    display: flex;
+    flex-direction: row;
+    transition: background-color 0.35s ease-in-out;
+
+    &.xl {
+      width: 100%;
+      padding: 16px 24px;
+    }
+
+    &:hover {
+      background-color: $grey-1;
+      cursor: pointer;
+      color: $white;
+
+      .list-entry-actions {
+        mat-icon {
+          opacity: 1;
+        }
+      }
+
+      .listing-title, .listing-subtitle{
+        color: $white;
+      }
+    }
+
+    .list-entry-content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+    }
+
+    .list-entry-actions {
+      width: 18px;
+      margin-left: 22px;
+      display: flex;
+      flex-direction: column;
+      margin-top: -4px;
+
+      mat-icon {
+        opacity: 0;
+        transition: opacity 0.35s ease-in-out;
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    .listing-title {
+      height: 44px;
+      color: #283241;
+      font-family: Inter, sans-serf, serif;
+      font-size: 18px;
+      font-weight: bold;
+      letter-spacing: 0;
+      margin-bottom: 17px;
+      line-height: 22px;
+      @include line-clamp(2);
+      transition: color 0.35s ease-in-out;
+
+      &.one-line {
+        height: 22px;
+        @include line-clamp(1);
+      }
+
+      &.slim {
+        margin-bottom: 9px;
+      }
+
+      &.break-all {
+        word-break: break-all;
+      }
+    }
+
+    .listing-subtitle {
+      height: 12px;
+      opacity: 0.7;
+      color: #283241;
+      font-family: Inconsolata, monospace, monospace;
+      font-size: 12px;
+      letter-spacing: 0;
+      line-height: 12px;
+      @include line-clamp(1);
+      transition: color 0.35s ease-in-out;
+    }
+  }
+
+}
+
+
+.break-40 {
+  height: 40px;
+  background: transparent;
+  display: block;
+}
--- a/assets/styles/red-dialog.scss
+++ b/assets/styles/red-dialog.scss
@ -24,5 +24,9 @@

  .dialog-actions {
    padding-top: 12px;
+
+    > * {
+      margin-right: 16px
+    }
  }
 }
--- a/assets/styles/red-text-styles.scss
+++ b/assets/styles/red-text-styles.scss
@ -1,13 +1,21 @@
@import "red-variables";
+@import "red-mixins";

 button {
  font-family: Inconsolata, monospace !important;
  font-weight: 700 !important;
 }

+a {
+  color: $blue-1;
+
+  &:hover {
+    color: lighten($blue-1, 10%)
+  }
+
+}
+
 .heading-xl {
-  height: 39px;
-  width: 130px;
  color: $grey-1;
  font-family: Inter, sans-serf;
  font-size: 32px;
@ -16,8 +24,7 @@ button {
  line-height: 39px;
 }

-.heading-l{
-  height: 22px;
+.heading-l {
  color: #283241;
  font-family: Inter, sans-serf;
  font-size: 18px;
@ -25,3 +32,12 @@ button {
  letter-spacing: 0;
  line-height: 22px;
 }
+
+
+.clamp-1{
+  @include line-clamp(1);
+}
+
+.clamp-2{
+  @include line-clamp(2);
+}
--- a/libs/red-ui-http/src/lib/api/debugController.service.ts
+++ b/libs/red-ui-http/src/lib/api/debugController.service.ts
@ -119,7 +119,7 @@ export class DebugControllerService {
            formParams = formParams.append('file', <any>file) as any || formParams;
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/debug/classification`,
+        return this.httpClient.request<any>('post',`${this.basePath}/debug/classification`,
            {
                body: convertFormParamsToString ? formParams.toString() : formParams,
                params: queryParameters,
@ -196,7 +196,7 @@ export class DebugControllerService {
            formParams = formParams.append('file', <any>file) as any || formParams;
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/debug/htmlTables`,
+        return this.httpClient.request<any>('post',`${this.basePath}/debug/htmlTables`,
            {
                body: convertFormParamsToString ? formParams.toString() : formParams,
                params: queryParameters,
@ -273,7 +273,7 @@ export class DebugControllerService {
            formParams = formParams.append('file', <any>file) as any || formParams;
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/debug/sections`,
+        return this.httpClient.request<any>('post',`${this.basePath}/debug/sections`,
            {
                body: convertFormParamsToString ? formParams.toString() : formParams,
                params: queryParameters,
@ -355,7 +355,7 @@ export class DebugControllerService {
            formParams = formParams.append('file', <any>file) as any || formParams;
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/debug/redaction`,
+        return this.httpClient.request<any>('post',`${this.basePath}/debug/redaction`,
            {
                body: convertFormParamsToString ? formParams.toString() : formParams,
                params: queryParameters,
--- a/libs/red-ui-http/src/lib/api/dictionaryController.service.ts
+++ b/libs/red-ui-http/src/lib/api/dictionaryController.service.ts
@ -106,7 +106,7 @@ export class DictionaryControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/dictionary/${encodeURIComponent(String(type))}`,
+        return this.httpClient.request<any>('post',`${this.basePath}/dictionary/${encodeURIComponent(String(type))}`,
            {
                body: body,
                withCredentials: this.configuration.withCredentials,
@ -160,7 +160,7 @@ export class DictionaryControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/dictionary/type`,
+        return this.httpClient.request<any>('post',`${this.basePath}/dictionary/type`,
            {
                body: body,
                withCredentials: this.configuration.withCredentials,
@ -219,7 +219,7 @@ export class DictionaryControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<any>('delete',`${this.basePath}/redaction-gateway-v1/dictionary/${encodeURIComponent(String(type))}`,
+        return this.httpClient.request<any>('delete',`${this.basePath}/dictionary/${encodeURIComponent(String(type))}`,
            {
                body: body,
                withCredentials: this.configuration.withCredentials,
@ -268,7 +268,7 @@ export class DictionaryControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<any>('delete',`${this.basePath}/redaction-gateway-v1/dictionary/type/${encodeURIComponent(String(type))}`,
+        return this.httpClient.request<any>('delete',`${this.basePath}/dictionary/type/${encodeURIComponent(String(type))}`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -317,7 +317,7 @@ export class DictionaryControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<any>('get',`${this.basePath}/redaction-gateway-v1/dictionary/download/${encodeURIComponent(String(type))}`,
+        return this.httpClient.request<any>('get',`${this.basePath}/dictionary/download/${encodeURIComponent(String(type))}`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -361,7 +361,7 @@ export class DictionaryControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<TypeResponse>('get',`${this.basePath}/redaction-gateway-v1/dictionary/type`,
+        return this.httpClient.request<TypeResponse>('get',`${this.basePath}/dictionary/type`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -405,7 +405,7 @@ export class DictionaryControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<DefaultColor>('get',`${this.basePath}/redaction-gateway-v1/color`,
+        return this.httpClient.request<DefaultColor>('get',`${this.basePath}/color`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -454,7 +454,7 @@ export class DictionaryControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<Dictionary>('get',`${this.basePath}/redaction-gateway-v1/dictionary/${encodeURIComponent(String(type))}`,
+        return this.httpClient.request<Dictionary>('get',`${this.basePath}/dictionary/${encodeURIComponent(String(type))}`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -507,7 +507,7 @@ export class DictionaryControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/color`,
+        return this.httpClient.request<any>('post',`${this.basePath}/color`,
            {
                body: body,
                withCredentials: this.configuration.withCredentials,
@ -566,7 +566,7 @@ export class DictionaryControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/dictionary/type/${encodeURIComponent(String(type))}`,
+        return this.httpClient.request<any>('post',`${this.basePath}/dictionary/type/${encodeURIComponent(String(type))}`,
            {
                body: body,
                withCredentials: this.configuration.withCredentials,
@ -639,7 +639,7 @@ export class DictionaryControllerService {
            formParams = formParams.append('file', <any>file) as any || formParams;
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/dictionary/upload/${encodeURIComponent(String(type))}`,
+        return this.httpClient.request<any>('post',`${this.basePath}/dictionary/upload/${encodeURIComponent(String(type))}`,
            {
                body: convertFormParamsToString ? formParams.toString() : formParams,
                withCredentials: this.configuration.withCredentials,
--- a/libs/red-ui-http/src/lib/api/fileUploadController.service.ts
+++ b/libs/red-ui-http/src/lib/api/fileUploadController.service.ts
@ -98,7 +98,7 @@ export class FileUploadControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<any>('delete',`${this.basePath}/redaction-gateway-v1/delete/${encodeURIComponent(String(projectId))}/${encodeURIComponent(String(fileId))}`,
+        return this.httpClient.request<any>('delete',`${this.basePath}/delete/${encodeURIComponent(String(projectId))}/${encodeURIComponent(String(fileId))}`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -154,8 +154,9 @@ export class FileUploadControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<any>('get',`${this.basePath}/redaction-gateway-v1/download/annotated/${encodeURIComponent(String(fileId))}`,
+        return this.httpClient.request('get',`${this.basePath}/download/annotated/${encodeURIComponent(String(fileId))}`,
            {
+                responseType: 'blob',
                params: queryParameters,
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -211,8 +212,9 @@ export class FileUploadControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<any>('get',`${this.basePath}/redaction-gateway-v1/download/original/${encodeURIComponent(String(fileId))}`,
+        return this.httpClient.request('get',`${this.basePath}/download/original/${encodeURIComponent(String(fileId))}`,
            {
+              responseType: 'blob',
                params: queryParameters,
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -268,8 +270,9 @@ export class FileUploadControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<any>('get',`${this.basePath}/redaction-gateway-v1/download/redacted/${encodeURIComponent(String(fileId))}`,
+        return this.httpClient.request('get',`${this.basePath}/download/redacted/${encodeURIComponent(String(fileId))}`,
            {
+              responseType: 'blob',
                params: queryParameters,
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -330,7 +333,7 @@ export class FileUploadControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/download/report`,
+        return this.httpClient.request<any>('post',`${this.basePath}/download/report`,
            {
                body: body,
                params: queryParameters,
@ -388,7 +391,7 @@ export class FileUploadControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<any>('get',`${this.basePath}/redaction-gateway-v1/download/report/${encodeURIComponent(String(projectId))}`,
+        return this.httpClient.request<any>('get',`${this.basePath}/download/report/${encodeURIComponent(String(projectId))}`,
            {
                params: queryParameters,
                withCredentials: this.configuration.withCredentials,
@ -462,12 +465,13 @@ export class FileUploadControllerService {
            formParams = formParams.append('file', <any>file) as any || formParams;
        }

-        return this.httpClient.request<string>('post',`${this.basePath}/redaction-gateway-v1/upload/${encodeURIComponent(String(projectId))}`,
+        return this.httpClient.request('post',`${this.basePath}/upload/${encodeURIComponent(String(projectId))}`,
            {
                body: convertFormParamsToString ? formParams.toString() : formParams,
                withCredentials: this.configuration.withCredentials,
                headers: headers,
-                observe: observe,
+                observe: 'response',
+                responseType: 'text',
                reportProgress: reportProgress
            }
        );
--- a/libs/red-ui-http/src/lib/api/licenseReportController.service.ts
+++ b/libs/red-ui-http/src/lib/api/licenseReportController.service.ts
@ -112,7 +112,7 @@ export class LicenseReportControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<LicenseReport>('post',`${this.basePath}/redaction-gateway-v1/report/license`,
+        return this.httpClient.request<LicenseReport>('post',`${this.basePath}/report/license`,
            {
                body: body,
                params: queryParameters,
--- a/libs/red-ui-http/src/lib/api/manualRedactionController.service.ts
+++ b/libs/red-ui-http/src/lib/api/manualRedactionController.service.ts
@ -99,7 +99,7 @@ export class ManualRedactionControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<ManualRedactions>('get',`${this.basePath}/redaction-gateway-v1/manualRedaction/${encodeURIComponent(String(projectId))}/${encodeURIComponent(String(fileId))}`,
+        return this.httpClient.request<ManualRedactions>('get',`${this.basePath}/manualRedaction/${encodeURIComponent(String(projectId))}/${encodeURIComponent(String(fileId))}`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -162,7 +162,7 @@ export class ManualRedactionControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/manualRedaction/${encodeURIComponent(String(projectId))}/${encodeURIComponent(String(fileId))}`,
+        return this.httpClient.request<any>('post',`${this.basePath}/manualRedaction/${encodeURIComponent(String(projectId))}/${encodeURIComponent(String(fileId))}`,
            {
                body: body,
                withCredentials: this.configuration.withCredentials,
--- a/libs/red-ui-http/src/lib/api/pdfMetaDataConfigurationController.service.ts
+++ b/libs/red-ui-http/src/lib/api/pdfMetaDataConfigurationController.service.ts
@ -89,7 +89,7 @@ export class PdfMetaDataConfigurationControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<PdfMetaData>('get',`${this.basePath}/redaction-gateway-v1/metaData`,
+        return this.httpClient.request<PdfMetaData>('get',`${this.basePath}/metaData`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -142,7 +142,7 @@ export class PdfMetaDataConfigurationControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/metaData`,
+        return this.httpClient.request<any>('post',`${this.basePath}/metaData`,
            {
                body: body,
                withCredentials: this.configuration.withCredentials,
--- a/libs/red-ui-http/src/lib/api/projectController.service.ts
+++ b/libs/red-ui-http/src/lib/api/projectController.service.ts
@ -100,7 +100,7 @@ export class ProjectControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<Project>('post',`${this.basePath}/redaction-gateway-v1/project`,
+        return this.httpClient.request<Project>('post',`${this.basePath}/project`,
            {
                body: body,
                withCredentials: this.configuration.withCredentials,
@ -149,7 +149,7 @@ export class ProjectControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<any>('delete',`${this.basePath}/redaction-gateway-v1/project/${encodeURIComponent(String(projectId))}`,
+        return this.httpClient.request<any>('delete',`${this.basePath}/project/${encodeURIComponent(String(projectId))}`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -198,7 +198,7 @@ export class ProjectControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<Project>('get',`${this.basePath}/redaction-gateway-v1/project/${encodeURIComponent(String(projectId))}`,
+        return this.httpClient.request<Project>('get',`${this.basePath}/project/${encodeURIComponent(String(projectId))}`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -242,7 +242,7 @@ export class ProjectControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<Array<Project>>('get',`${this.basePath}/redaction-gateway-v1/project`,
+        return this.httpClient.request<Array<Project>>('get',`${this.basePath}/project`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -301,7 +301,7 @@ export class ProjectControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<Project>('post',`${this.basePath}/redaction-gateway-v1/project/${encodeURIComponent(String(projectId))}`,
+        return this.httpClient.request<Project>('post',`${this.basePath}/project/${encodeURIComponent(String(projectId))}`,
            {
                body: body,
                withCredentials: this.configuration.withCredentials,
--- a/libs/red-ui-http/src/lib/api/reanalysisController.service.ts
+++ b/libs/red-ui-http/src/lib/api/reanalysisController.service.ts
@ -97,7 +97,7 @@ export class ReanalysisControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/reanalyse/${encodeURIComponent(String(projectId))}/${encodeURIComponent(String(fileId))}`,
+        return this.httpClient.request<any>('post',`${this.basePath}/reanalyse/${encodeURIComponent(String(projectId))}/${encodeURIComponent(String(fileId))}`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -145,7 +145,7 @@ export class ReanalysisControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/reanalyse/${encodeURIComponent(String(projectId))}`,
+        return this.httpClient.request<any>('post',`${this.basePath}/reanalyse/${encodeURIComponent(String(projectId))}`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
--- a/libs/red-ui-http/src/lib/api/redactionLogController.service.ts
+++ b/libs/red-ui-http/src/lib/api/redactionLogController.service.ts
@ -94,7 +94,7 @@ export class RedactionLogControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<RedactionLog>('get',`${this.basePath}/redaction-gateway-v1/redactionLog/${encodeURIComponent(String(fileId))}`,
+        return this.httpClient.request<RedactionLog>('get',`${this.basePath}/redactionLog/${encodeURIComponent(String(fileId))}`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
--- a/libs/red-ui-http/src/lib/api/rulesController.service.ts
+++ b/libs/red-ui-http/src/lib/api/rulesController.service.ts
@ -89,7 +89,7 @@ export class RulesControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<Rules>('get',`${this.basePath}/redaction-gateway-v1/rules`,
+        return this.httpClient.request<Rules>('get',`${this.basePath}/rules`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -133,7 +133,7 @@ export class RulesControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<any>('get',`${this.basePath}/redaction-gateway-v1/rules/download`,
+        return this.httpClient.request<any>('get',`${this.basePath}/rules/download`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
@ -186,7 +186,7 @@ export class RulesControllerService {
            headers = headers.set('Content-Type', httpContentTypeSelected);
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/rules`,
+        return this.httpClient.request<any>('post',`${this.basePath}/rules`,
            {
                body: body,
                withCredentials: this.configuration.withCredentials,
@ -254,7 +254,7 @@ export class RulesControllerService {
            formParams = formParams.append('file', <any>file) as any || formParams;
        }

-        return this.httpClient.request<any>('post',`${this.basePath}/redaction-gateway-v1/rules/upload`,
+        return this.httpClient.request<any>('post',`${this.basePath}/rules/upload`,
            {
                body: convertFormParamsToString ? formParams.toString() : formParams,
                withCredentials: this.configuration.withCredentials,
--- a/libs/red-ui-http/src/lib/api/statusController.service.ts
+++ b/libs/red-ui-http/src/lib/api/statusController.service.ts
@ -94,7 +94,7 @@ export class StatusControllerService {
        const consumes: string[] = [
        ];

-        return this.httpClient.request<Array<FileStatus>>('get',`${this.basePath}/redaction-gateway-v1/status/${encodeURIComponent(String(projectId))}`,
+        return this.httpClient.request<Array<FileStatus>>('get',`${this.basePath}/status/${encodeURIComponent(String(projectId))}`,
            {
                withCredentials: this.configuration.withCredentials,
                headers: headers,
--- a/workspace.json
+++ b/workspace.json
@ -23,10 +23,23 @@
            "aot": true,
            "assets": [
              "apps/red-ui/src/favicon.ico",
-              { "glob": "**/*", "input": "apps/red-ui/src/assets/", "output": "/assets/" }
+              {
+                "glob": "**/*",
+                "input": "node_modules/@pdftron/webviewer/public/",
+                "output": "/assets/wv-resources/"
+              },
+              {
+                "glob": "**/*",
+                "input": "apps/red-ui/src/assets/",
+                "output": "/assets/"
+              }
            ],
-            "styles": ["apps/red-ui/src/styles.scss"],
-            "scripts": []
+            "styles": [
+              "apps/red-ui/src/styles.scss"
+            ],
+            "scripts": [
+              "node_modules/@pdftron/webviewer/webviewer.min.js"
+            ]
          },
          "configurations": {
            "production": {
@ -62,7 +75,8 @@
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
-            "browserTarget": "red-ui:build"
+            "browserTarget": "red-ui:build",
+            "proxyConfig": "apps/red-ui/proxy.conf.json"
          },
          "configurations": {
            "production": {
@ -83,7 +97,10 @@
              "apps/red-ui/tsconfig.app.json",
              "apps/red-ui/tsconfig.spec.json"
            ],
-            "exclude": ["**/node_modules/**", "!apps/red-ui/**/*"]
+            "exclude": [
+              "**/node_modules/**",
+              "!apps/red-ui/**/*"
+            ]
          }
        },
        "test": {
@ -108,7 +125,10 @@
              "libs/red-ui-http/tsconfig.lib.json",
              "libs/red-ui-http/tsconfig.spec.json"
            ],
-            "exclude": ["**/node_modules/**", "!libs/red-ui-http/**/*"]
+            "exclude": [
+              "**/node_modules/**",
+              "!libs/red-ui-http/**/*"
+            ]
          }
        },
        "test": {