From b7c9d37ef20d985b59932fd21c4ac9bd985e33f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 14 Dec 2020 22:24:27 +0200
Subject: [PATCH] Empty project

---
 apps/red-ui/src/app/app.module.ts             |   2 -
 .../icon-button/icon-button.component.html    |   9 +-
 .../icon-button/icon-button.component.ts      |   3 +-
 .../dictionary-listing-screen.component.html  |   2 +-
 .../dictionary-overview-screen.component.html |   2 +-
 .../rules-screen/rules-screen.component.html  |   2 +-
 .../project-overview-empty.component.html     |  21 --
 .../project-overview-empty.component.scss     |   9 -
 .../project-overview-empty.component.ts       |  17 --
 .../project-listing-screen.component.html     |   2 +-
 .../project-overview-screen.component.html    | 270 +++++++++---------
 apps/red-ui/src/assets/i18n/en.json           |   5 +-
 .../src/assets/styles/red-page-layout.scss    |  23 ++
 13 files changed, 181 insertions(+), 186 deletions(-)
 delete mode 100644 apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.html
 delete mode 100644 apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.scss
 delete mode 100644 apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.ts

diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 253ffde75..e398193a7 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -68,7 +68,6 @@ import { TableColNameComponent } from './components/table-col-name/table-col-nam
 import { ProjectDetailsComponent } from './screens/project-overview-screen/project-details/project-details.component';
 import { PageIndicatorComponent } from './screens/file/page-indicator/page-indicator.component';
 import { NeedsWorkBadgeComponent } from './components/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 { AnnotationActionsComponent } from './screens/file/annotation-actions/annotation-actions.component';
 import { ProjectListingDetailsComponent } from './screens/project-listing-screen/project-listing-details/project-listing-details.component';
@@ -264,7 +263,6 @@ const matImports = [
         ProjectDetailsComponent,
         PageIndicatorComponent,
         NeedsWorkBadgeComponent,
-        ProjectOverviewEmptyComponent,
         ProjectListingEmptyComponent,
         AnnotationActionsComponent,
         ProjectListingEmptyComponent,
diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
index b6f760eec..5f7c9657f 100644
--- a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
+++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html
@@ -1,4 +1,11 @@
-<button mat-button [class.overlay]="showDot" [class.primary]="primary" (click)="action.emit($event)" [class.show-bg]="type === 'show-bg'" [disabled]="disabled">
+<button
+    mat-button
+    [class.overlay]="showDot"
+    [class.primary]="type === 'primary'"
+    (click)="action.emit($event)"
+    [class.show-bg]="type === 'show-bg'"
+    [disabled]="disabled"
+>
     <mat-icon [svgIcon]="icon" *ngIf="icon"></mat-icon>
     <span [translate]="text"></span>
 </button>
diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
index acbc8958b..3dd79bc13 100644
--- a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
+++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts
@@ -9,9 +9,8 @@ export class IconButtonComponent implements OnInit {
     @Input() icon: string;
     @Input() text: string;
     @Input() showDot = false;
-    @Input() primary = false;
     @Input() disabled = false;
-    @Input() type: 'default' | 'show-bg' = 'default';
+    @Input() type: 'default' | 'show-bg' | 'primary' = 'default';
     @Output() action = new EventEmitter<any>();
 
     constructor() {}
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
index 355b01d23..59c630664 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
@@ -15,7 +15,7 @@
                 icon="red:plus"
                 (action)="openAddEditDictionaryDialog()"
                 text="dictionary-listing.add-new"
-                [primary]="true"
+                type="primary"
             ></redaction-icon-button>
 
             <redaction-circle-button
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
index 67abc10e6..a97861454 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html
@@ -97,7 +97,7 @@
                     icon="red:check"
                     (action)="saveEntries()"
                     text="dictionary-overview.save-changes"
-                    [primary]="true"
+                    type="primary"
                 ></redaction-icon-button>
                 <div class="all-caps-label cancel" *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="dictionary-overview.revert-changes"></div>
             </div>
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
index 1a5d45b49..11ab85c1e 100644
--- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html
@@ -52,7 +52,7 @@
                 icon="red:check"
                 (action)="save()"
                 text="rules-screen.save-changes"
-                [primary]="true"
+                type="primary"
             ></redaction-icon-button>
             <div *ngIf="permissionsService.isAdmin()" (click)="revert()" translate="rules-screen.revert-changes" class="all-caps-label cancel"></div>
         </div>
diff --git a/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.html b/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.html
deleted file mode 100644
index f005459fd..000000000
--- a/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div class="empty-state-container">
-    <div
-        *ngIf="!appStateService.activeProject"
-        [innerHTML]="'project-overview.no-project' | translate: { projectId: appStateService.activeProjectId }"
-        class="heading-xl"
-    ></div>
-
-    <div *ngIf="appStateService.activeProject" class="heading-xl" translate="project-overview.no-files"></div>
-    <div *ngIf="appStateService.activeProject">
-        <button (click)="fileInput.click()" color="primary" mat-flat-button>
-            <mat-icon svgIcon="red:upload"></mat-icon>
-            <span translate="project-overview.upload-files-btn"></span>
-        </button>
-
-        <input #fileInput (change)="handleFileUploadEvent($event)" class="file-upload-input" multiple="true" type="file" accept="application/pdf" />
-
-        <button [routerLink]="['/ui/projects/']" mat-icon-button class="close-btn">
-            <mat-icon svgIcon="red:close"></mat-icon>
-        </button>
-    </div>
-</div>
diff --git a/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.scss b/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.scss
deleted file mode 100644
index 450d3794e..000000000
--- a/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.file-upload-input {
-    display: none;
-}
-
-.close-btn {
-    position: absolute;
-    top: 10px;
-    right: 14px;
-}
diff --git a/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.ts b/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.ts
deleted file mode 100644
index 2a5b282c2..000000000
--- a/apps/red-ui/src/app/screens/empty-states/project-overview-empty/project-overview-empty.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { AppStateService } from '../../../state/app-state.service';
-
-@Component({
-    selector: 'redaction-project-overview-empty',
-    templateUrl: './project-overview-empty.component.html',
-    styleUrls: ['./project-overview-empty.component.scss']
-})
-export class ProjectOverviewEmptyComponent {
-    @Output() uploadFiles = new EventEmitter();
-
-    constructor(public appStateService: AppStateService) {}
-
-    handleFileUploadEvent($event: Event) {
-        this.uploadFiles.emit(($event.target as HTMLInputElement).files);
-    }
-}
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 3e01d8411..ca927b0bd 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
@@ -33,7 +33,7 @@
             icon="red:plus"
             (action)="openAddProjectDialog()"
             text="project-listing.add-new"
-            [primary]="true"
+            type="primary"
         ></redaction-icon-button>
     </div>
 
diff --git 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
index 23c176b20..93ca31757 100644
--- 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,5 +1,4 @@
-<redaction-project-overview-empty (uploadFiles)="uploadFiles($event)" *ngIf="!appStateService.activeProject?.hasFiles"></redaction-project-overview-empty>
-<section *ngIf="appStateService.activeProject?.hasFiles">
+<section>
     <div *ngIf="appStateService.activeProject" class="page-header">
         <div class="filters">
             <div translate="filters.filter-by"></div>
@@ -97,154 +96,147 @@
                 tooltipPosition="before"
                 icon="red:close"
             ></redaction-circle-button>
-
-            <input #fileInput (change)="uploadFiles($event.target['files'])" class="file-upload-input" multiple="true" type="file" />
         </div>
     </div>
     <div class="red-content-inner">
         <div class="left-container" [class.extended]="collapsedDetails">
-            <div class="header-item">
-                <div class="select-all-container">
-                    <div
-                        (click)="toggleSelectAll()"
-                        [class.active]="areAllFilesSelected"
-                        class="select-oval always-visible"
-                        *ngIf="!areAllFilesSelected && !areSomeFilesSelected"
-                    ></div>
-                    <mat-icon *ngIf="areAllFilesSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
-                    <mat-icon
-                        *ngIf="areSomeFilesSelected && !areAllFilesSelected"
-                        (click)="toggleSelectAll()"
-                        class="selection-icon"
-                        svgIcon="red:radio-indeterminate"
-                    ></mat-icon>
+            <div *ngIf="!appStateService.activeProject?.hasFiles" class="no-data">
+                <mat-icon svgIcon="red:document"></mat-icon>
+                <div class="heading-l" translate="project-overview.no-data.title"></div>
+                <redaction-icon-button (action)="fileInput.click()" icon="red:upload" text="project-overview.no-data.action" type="primary">
+                </redaction-icon-button>
+            </div>
+
+            <ng-container *ngIf="appStateService.activeProject?.hasFiles">
+                <div class="header-item">
+                    <div class="select-all-container">
+                        <div
+                            (click)="toggleSelectAll()"
+                            [class.active]="areAllFilesSelected"
+                            class="select-oval always-visible"
+                            *ngIf="!areAllFilesSelected && !areSomeFilesSelected"
+                        ></div>
+                        <mat-icon *ngIf="areAllFilesSelected" (click)="toggleSelectAll()" class="selection-icon active" svgIcon="red:radio-selected"></mat-icon>
+                        <mat-icon
+                            *ngIf="areSomeFilesSelected && !areAllFilesSelected"
+                            (click)="toggleSelectAll()"
+                            class="selection-icon"
+                            svgIcon="red:radio-indeterminate"
+                        ></mat-icon>
+                    </div>
+
+                    <span class="all-caps-label">
+                        {{ 'project-overview.table-header.title' | translate: { length: displayedFiles.length || 0 } }}
+                    </span>
+
+                    <redaction-bulk-actions [selectedFileIds]="selectedFileIds" (reload)="bulkActionPerformed()"></redaction-bulk-actions>
                 </div>
 
-                <span class="all-caps-label">
-                    {{ 'project-overview.table-header.title' | translate: { length: displayedFiles.length || 0 } }}
-                </span>
+                <div class="table-header" redactionSyncWidth="table-item" [class.no-data]="noData">
+                    <!--      Table column names-->
+                    <div class="select-oval-placeholder placeholder-bottom-border"></div>
 
-                <redaction-bulk-actions [selectedFileIds]="selectedFileIds" (reload)="bulkActionPerformed()"></redaction-bulk-actions>
-            </div>
+                    <redaction-table-col-name
+                        (toggleSort)="toggleSort($event)"
+                        [activeSortingOption]="sortingOption"
+                        [withSort]="true"
+                        column="filename"
+                        label="project-overview.table-col-names.name"
+                    ></redaction-table-col-name>
 
-            <div class="table-header" redactionSyncWidth="table-item" [class.no-data]="noData">
-                <!--      Table column names-->
-                <div class="select-oval-placeholder placeholder-bottom-border"></div>
+                    <redaction-table-col-name
+                        (toggleSort)="toggleSort($event)"
+                        [activeSortingOption]="sortingOption"
+                        [withSort]="true"
+                        column="added"
+                        label="project-overview.table-col-names.added-on"
+                    ></redaction-table-col-name>
 
-                <redaction-table-col-name
-                    (toggleSort)="toggleSort($event)"
-                    [activeSortingOption]="sortingOption"
-                    [withSort]="true"
-                    column="filename"
-                    label="project-overview.table-col-names.name"
-                ></redaction-table-col-name>
+                    <redaction-table-col-name label="project-overview.table-col-names.needs-work"></redaction-table-col-name>
 
-                <redaction-table-col-name
-                    (toggleSort)="toggleSort($event)"
-                    [activeSortingOption]="sortingOption"
-                    [withSort]="true"
-                    column="added"
-                    label="project-overview.table-col-names.added-on"
-                ></redaction-table-col-name>
+                    <redaction-table-col-name
+                        (toggleSort)="toggleSort($event)"
+                        [activeSortingOption]="sortingOption"
+                        [withSort]="true"
+                        column="reviewerName"
+                        label="project-overview.table-col-names.assigned-to"
+                    ></redaction-table-col-name>
 
-                <redaction-table-col-name label="project-overview.table-col-names.needs-work"></redaction-table-col-name>
+                    <redaction-table-col-name
+                        (toggleSort)="toggleSort($event)"
+                        [activeSortingOption]="sortingOption"
+                        [withSort]="true"
+                        column="pages"
+                        label="project-overview.table-col-names.pages"
+                    ></redaction-table-col-name>
 
-                <redaction-table-col-name
-                    (toggleSort)="toggleSort($event)"
-                    [activeSortingOption]="sortingOption"
-                    [withSort]="true"
-                    column="reviewerName"
-                    label="project-overview.table-col-names.assigned-to"
-                ></redaction-table-col-name>
+                    <redaction-table-col-name
+                        (toggleSort)="toggleSort($event)"
+                        [activeSortingOption]="sortingOption"
+                        [withSort]="true"
+                        class="flex-end"
+                        column="statusSort"
+                        label="project-overview.table-col-names.status"
+                    ></redaction-table-col-name>
+                    <div class="scrollbar-placeholder"></div>
+                </div>
 
-                <redaction-table-col-name
-                    (toggleSort)="toggleSort($event)"
-                    [activeSortingOption]="sortingOption"
-                    [withSort]="true"
-                    column="pages"
-                    label="project-overview.table-col-names.pages"
-                ></redaction-table-col-name>
+                <div *ngIf="noData" class="no-data heading-l" translate="project-overview.no-files-match"></div>
 
-                <redaction-table-col-name
-                    (toggleSort)="toggleSort($event)"
-                    [activeSortingOption]="sortingOption"
-                    [withSort]="true"
-                    class="flex-end"
-                    column="statusSort"
-                    label="project-overview.table-col-names.status"
-                ></redaction-table-col-name>
-                <div class="scrollbar-placeholder"></div>
-            </div>
+                <div class="grid-container">
+                    <div
+                        *ngFor="let fileStatus of displayedFiles | sortBy: sortingOption.order:sortingOption.column"
+                        [class.pointer]="permissionsService.canOpenFile(fileStatus)"
+                        [routerLink]="fileLink(fileStatus)"
+                        class="table-item"
+                    >
+                        <div class="pr-0" (click)="toggleFileSelected($event, fileStatus)">
+                            <div *ngIf="!isFileSelected(fileStatus)" class="select-oval"></div>
+                            <mat-icon class="selection-icon active" *ngIf="isFileSelected(fileStatus)" svgIcon="red:radio-selected"></mat-icon>
+                        </div>
 
-            <div *ngIf="noData" class="no-data heading-l" translate="project-overview.no-files-match"></div>
-
-            <div class="grid-container">
-                <div
-                    *ngFor="let fileStatus of displayedFiles | sortBy: sortingOption.order:sortingOption.column"
-                    [class.pointer]="permissionsService.canOpenFile(fileStatus)"
-                    [routerLink]="fileLink(fileStatus)"
-                    class="table-item"
-                >
-                    <div class="pr-0" (click)="toggleFileSelected($event, fileStatus)">
-                        <div *ngIf="!isFileSelected(fileStatus)" class="select-oval"></div>
-                        <mat-icon class="selection-icon active" *ngIf="isFileSelected(fileStatus)" svgIcon="red:radio-selected"></mat-icon>
-                    </div>
-
-                    <div [title]="'[' + fileStatus.status + '] ' + fileStatus.filename">
-                        <div class="filename-wrapper">
-                            <div [class.disabled]="fileStatus.isPending || fileStatus.isProcessing" [class.error]="fileStatus.isError" class="table-item-title">
-                                {{ fileStatus.filename }}
+                        <div [title]="'[' + fileStatus.status + '] ' + fileStatus.filename">
+                            <div class="filename-wrapper">
+                                <div
+                                    [class.disabled]="fileStatus.isPending || fileStatus.isProcessing"
+                                    [class.error]="fileStatus.isError"
+                                    class="table-item-title"
+                                >
+                                    {{ fileStatus.filename }}
+                                </div>
+                                <!--                            <span *ngIf="permissionsService.fileRequiresReanalysis(fileStatus)" class="pill" translate="project-overview.new-rule.label"></span>-->
                             </div>
-                            <!--                            <span *ngIf="permissionsService.fileRequiresReanalysis(fileStatus)" class="pill" translate="project-overview.new-rule.label"></span>-->
                         </div>
-                    </div>
 
-                    <div>
-                        <div [class.error]="fileStatus.isError" class="small-label">
-                            {{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
+                        <div>
+                            <div [class.error]="fileStatus.isError" class="small-label">
+                                {{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
+                            </div>
                         </div>
-                    </div>
 
-                    <!-- always show A for error-->
-                    <div *ngIf="fileStatus.isError">
-                        <redaction-annotation-icon type="square" label="A" color="#dd4d50"></redaction-annotation-icon>
-                    </div>
-
-                    <div *ngIf="!fileStatus.isError">
-                        <redaction-needs-work-badge [needsWorkInput]="fileStatus"></redaction-needs-work-badge>
-                    </div>
-                    <div *ngIf="!fileStatus.isError" class="assigned-to">
-                        <redaction-initials-avatar [userId]="fileStatus.currentReviewer" [withName]="true"></redaction-initials-avatar>
-                    </div>
-
-                    <div *ngIf="!fileStatus.isError">
-                        <div class="pages">
-                            <mat-icon svgIcon="red:pages"></mat-icon>
-                            {{ fileStatus.numberOfPages }}
+                        <!-- always show A for error-->
+                        <div *ngIf="fileStatus.isError">
+                            <redaction-annotation-icon type="square" label="A" color="#dd4d50"></redaction-annotation-icon>
                         </div>
-                    </div>
 
-                    <div [class.extend-cols]="fileStatus.isError" class="status-container">
-                        <div *ngIf="fileStatus.isError" class="small-label error" translate="project-overview.file-listing.file-entry.file-error"></div>
-                        <div *ngIf="fileStatus.isPending" class="small-label" translate="project-overview.file-listing.file-entry.file-pending"></div>
-                        <div *ngIf="fileStatus.isProcessing" class="small-label" translate="project-overview.file-listing.file-entry.file-processing"></div>
-                        <redaction-status-bar
-                            *ngIf="fileStatus.isWorkable"
-                            [config]="[
-                                {
-                                    color: fileStatus.status,
-                                    length: 1
-                                }
-                            ]"
-                        ></redaction-status-bar>
+                        <div *ngIf="!fileStatus.isError">
+                            <redaction-needs-work-badge [needsWorkInput]="fileStatus"></redaction-needs-work-badge>
+                        </div>
+                        <div *ngIf="!fileStatus.isError" class="assigned-to">
+                            <redaction-initials-avatar [userId]="fileStatus.currentReviewer" [withName]="true"></redaction-initials-avatar>
+                        </div>
 
-                        <div class="action-buttons">
-                            <redaction-file-actions
-                                [fileStatus]="fileStatus"
-                                (actionPerformed)="calculateData()"
-                                *ngIf="!fileStatus.isProcessing"
-                                class="mr-4"
-                            ></redaction-file-actions>
+                        <div *ngIf="!fileStatus.isError">
+                            <div class="pages">
+                                <mat-icon svgIcon="red:pages"></mat-icon>
+                                {{ fileStatus.numberOfPages }}
+                            </div>
+                        </div>
+
+                        <div [class.extend-cols]="fileStatus.isError" class="status-container">
+                            <div *ngIf="fileStatus.isError" class="small-label error" translate="project-overview.file-listing.file-entry.file-error"></div>
+                            <div *ngIf="fileStatus.isPending" class="small-label" translate="project-overview.file-listing.file-entry.file-pending"></div>
+                            <div *ngIf="fileStatus.isProcessing" class="small-label" translate="project-overview.file-listing.file-entry.file-processing"></div>
                             <redaction-status-bar
                                 *ngIf="fileStatus.isWorkable"
                                 [config]="[
@@ -254,11 +246,29 @@
                                     }
                                 ]"
                             ></redaction-status-bar>
+
+                            <div class="action-buttons">
+                                <redaction-file-actions
+                                    [fileStatus]="fileStatus"
+                                    (actionPerformed)="calculateData()"
+                                    *ngIf="!fileStatus.isProcessing"
+                                    class="mr-4"
+                                ></redaction-file-actions>
+                                <redaction-status-bar
+                                    *ngIf="fileStatus.isWorkable"
+                                    [config]="[
+                                        {
+                                            color: fileStatus.status,
+                                            length: 1
+                                        }
+                                    ]"
+                                ></redaction-status-bar>
+                            </div>
                         </div>
+                        <div class="scrollbar-placeholder"></div>
                     </div>
-                    <div class="scrollbar-placeholder"></div>
                 </div>
-            </div>
+            </ng-container>
         </div>
 
         <div class="right-container" [class.collapsed]="collapsedDetails">
@@ -276,3 +286,5 @@
 <ng-template #needsWorkTemplate let-filter="filter">
     <redaction-type-filter [filter]="filter"></redaction-type-filter>
 </ng-template>
+
+<input #fileInput (change)="uploadFiles($event.target['files'])" class="file-upload-input" multiple="true" type="file" />
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 3eb999dc7..c4b2c9ae5 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -159,6 +159,10 @@
         "collapse": "Hide Details"
     },
     "project-overview": {
+        "no-data": {
+            "title": "There are no documents yet.",
+            "action": "Upload Document"
+        },
         "search": "Document name...",
         "header-actions": {
             "edit": "Edit",
@@ -172,7 +176,6 @@
         "under-approval": "For Approval",
         "approve": "Approve",
         "under-review": "Under Review",
-        "no-files": "Project is empty!",
         "no-files-match": "No File match your current filters",
         "upload-files": "Drop files anywhere for upload!",
         "upload-files-btn": "Upload Files",
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index d675eca94..9267eff66 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -81,6 +81,29 @@ body {
             width: 100%;
             height: 4px;
         }
+
+        .no-data {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding-top: 120px;
+            @include inset-shadow;
+
+            > mat-icon {
+                height: 60px;
+                width: 60px;
+                opacity: 0.1;
+            }
+
+            .heading-l {
+                color: $grey-7;
+            }
+
+            > mat-icon,
+            .heading-l {
+                margin-bottom: 24px;
+            }
+        }
     }
 
     .right-container {