From 38c9c998c9770ac83cc198863333f34852c5b9e1 Mon Sep 17 00:00:00 2001
From: mohammadsalem <mohammad.salem231@gmail.com>
Date: Thu, 26 Oct 2023 13:17:49 +0200
Subject: [PATCH] Admin dashboard layout styling

---
 .../appearance/appearance.component.html      |   4 +-
 .../mapping-values.component.html             |   4 +-
 .../components/setup/setup.component.html     | 623 +++++++++---------
 .../components/shared/shared.component.html   |   4 +-
 .../components/users/users.component.html     |   4 +-
 .../admin/dashboard/dashboard.component.html  | 190 +++---
 .../app/admin/design/design.component.html    |   8 +-
 .../indexes-dashboard.component.html          |   4 +-
 .../app/admin/indexes/indexes.component.html  |   4 +-
 .../app/admin/plugins/plugins.component.html  |   5 +-
 .../admin/reporting/reporting.component.html  |   4 +-
 frontend/src/styles.scss                      |  11 +
 12 files changed, 437 insertions(+), 428 deletions(-)

diff --git a/frontend/src/app/admin/appearance/appearance.component.html b/frontend/src/app/admin/appearance/appearance.component.html
index 00d07072..e868e7f3 100644
--- a/frontend/src/app/admin/appearance/appearance.component.html
+++ b/frontend/src/app/admin/appearance/appearance.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row admin-dashboard-header">
   <div class="col-md-12 pb-5">
     <mat-card appearance="raised">
       <mat-card-title>
@@ -22,7 +22,7 @@
   </div>
 </div>
 
-<div class="row">
+<div class="row admin-dashboard-content">
   <div class="col-12 pb-3">
     <form [formGroup]="form">
       <div class="row">
diff --git a/frontend/src/app/admin/components/mapping-values/mapping-values.component.html b/frontend/src/app/admin/components/mapping-values/mapping-values.component.html
index 77436b90..3f98fce3 100644
--- a/frontend/src/app/admin/components/mapping-values/mapping-values.component.html
+++ b/frontend/src/app/admin/components/mapping-values/mapping-values.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row admin-dashboard-header">
   <div class="col-md-12 pb-5">
     <mat-card appearance="raised">
       <mat-card-title>
@@ -21,7 +21,7 @@
   </div>
 </div>
 
-<div class="row">
+<div class="row admin-dashboard-content">
   <div class="col-12 pb-3">
     <mat-form-field>
       <mat-label>Search</mat-label>
diff --git a/frontend/src/app/admin/components/setup/setup.component.html b/frontend/src/app/admin/components/setup/setup.component.html
index ab03f1be..5b192ac6 100644
--- a/frontend/src/app/admin/components/setup/setup.component.html
+++ b/frontend/src/app/admin/components/setup/setup.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row admin-dashboard-header">
   <div class="col-md-12 pb-5">
     <mat-card appearance="raised">
       <mat-card-title>
@@ -17,353 +17,346 @@
           Add new repository
           <mat-icon aria-hidden="false" aria-label="add">add</mat-icon>
         </button>
+        <button class="mr-2" style="float: right" color="primary" (click)="submit()" mat-raised-button>
+          Save
+        </button>
       </mat-card-title>
     </mat-card>
   </div>
 </div>
 
-<div class="row">
-  <div class="col-12 pb-3">
-    <form
-      class="pt-3"
-      *ngFor="let repoform of repositories.controls; let repoindex = index"
-      [formGroup]="repoform"
-    >
-      <mat-card appearance="raised" class="col-12">
-        <mat-card-title (click)="ToggleDisplay(repoindex)"
-        >
-          <mat-icon class="show-hide-repository-icon"
-                    aria-hidden="false" aria-label="Expand"
-                    *ngIf="isShown.hasOwnProperty(repoindex) && isShown[repoindex]">
-            expand_less
-          </mat-icon>
-          <mat-icon class="show-hide-repository-icon"
-                    aria-hidden="false" aria-label="Collapse"
-                    *ngIf="!(isShown.hasOwnProperty(repoindex) && isShown[repoindex])">
-            expand_more
-          </mat-icon>
-          Repository ({{ repoindex + 1 }})
-          <button
-            style="float: right"
-            (click)="deleteRepo(repoindex)"
-            color="warn"
-            mat-icon-button
+<div class="admin-dashboard-content">
+  <div class="row">
+    <div class="col-12 pb-3">
+      <form
+        class="pt-3"
+        *ngFor="let repoform of repositories.controls; let repoindex = index"
+        [formGroup]="repoform"
+      >
+        <mat-card appearance="raised" class="col-12">
+          <mat-card-title (click)="ToggleDisplay(repoindex)"
           >
-            <mat-icon aria-hidden="false" aria-label="delete">delete</mat-icon>
-          </button>
-        </mat-card-title>
-        <div class="row" [@openClose]="isShown.hasOwnProperty(repoindex) && isShown[repoindex]">
-          <div class="col-12">
-            <mat-form-field class="w-100">
-              <mat-label>Repository name</mat-label>
-              <input
-                matInput
-                formControlName="name"
-                placeholder="{{ repoform.get('type').value }} Name"
-                required
-              />
-            </mat-form-field>
-          </div>
-          <div class="col-12">
-            <mat-form-field appearance="fill">
-              <mat-label>Repository type</mat-label>
-              <mat-select formControlName="type" (selectionChange)="PluginChange($event.value, repoindex)">
-                <mat-option *ngFor="let plugin of plugins" [value]="plugin.name">
-                  {{ plugin.name }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>
-          </div>
-          <div class="col-12" *ngIf="activePlugin[repoindex]?.start_page">
-            <mat-form-field class="w-100">
-              <mat-label>
-                Start from page number ({{activePlugin[repoindex]?.start_page?.placeholder}}, unless you know what you
-                are doing)
-              </mat-label>
-              <input
-                matInput
-                type="number"
-                formControlName="startPage"
-                [placeholder]="activePlugin[repoindex]?.start_page?.placeholder"
-                [required]="activePlugin[repoindex]?.start_page?.required"
-                required
-              />
-            </mat-form-field>
-          </div>
-          <div class="col-12" *ngIf="activePlugin[repoindex]?.api_endpoint">
-            <mat-form-field class="w-100">
-              <mat-label>
-                {{ activePlugin[repoindex]?.name }} REST API endpoint
-              </mat-label>
-              <input
-                matInput
-                formControlName="itemsEndPoint"
-                [placeholder]="activePlugin[repoindex]?.api_endpoint?.placeholder"
-                [required]="activePlugin[repoindex]?.api_endpoint?.required"
-              />
-            </mat-form-field>
-          </div>
-          <div class="col-12">
-            <mat-form-field class="w-100">
-              <mat-label>API key</mat-label>
-              <input
-                matInput
-                formControlName="apiKey"
-                placeholder="API key (optional)"
-              />
-            </mat-form-field>
-          </div>
-          <div class="col-12" *ngIf="activePlugin[repoindex]?.sitemap_endpoint">
-            <mat-form-field class="w-100">
-              <mat-label>
-                {{ activePlugin[repoindex]?.name }} DSpace XML sitemap
-              </mat-label>
-              <input
-                matInput
-                formControlName="siteMap"
-                [placeholder]="activePlugin[repoindex]?.sitemap_endpoint?.placeholder"
-                [required]="activePlugin[repoindex]?.sitemap_endpoint?.required"
-              />
-            </mat-form-field>
-          </div>
+            <mat-icon class="show-hide-repository-icon"
+                      aria-hidden="false" aria-label="Expand"
+                      *ngIf="isShown.hasOwnProperty(repoindex) && isShown[repoindex]">
+              expand_less
+            </mat-icon>
+            <mat-icon class="show-hide-repository-icon"
+                      aria-hidden="false" aria-label="Collapse"
+                      *ngIf="!(isShown.hasOwnProperty(repoindex) && isShown[repoindex])">
+              expand_more
+            </mat-icon>
+            Repository ({{ repoindex + 1 }})
+            <button
+              style="float: right"
+              (click)="deleteRepo(repoindex)"
+              color="warn"
+              mat-icon-button
+            >
+              <mat-icon aria-hidden="false" aria-label="delete">delete</mat-icon>
+            </button>
+          </mat-card-title>
+          <div class="row" [@openClose]="isShown.hasOwnProperty(repoindex) && isShown[repoindex]">
+            <div class="col-12">
+              <mat-form-field class="w-100">
+                <mat-label>Repository name</mat-label>
+                <input
+                  matInput
+                  formControlName="name"
+                  placeholder="{{ repoform.get('type').value }} Name"
+                  required
+                />
+              </mat-form-field>
+            </div>
+            <div class="col-12">
+              <mat-form-field appearance="fill">
+                <mat-label>Repository type</mat-label>
+                <mat-select formControlName="type" (selectionChange)="PluginChange($event.value, repoindex)">
+                  <mat-option *ngFor="let plugin of plugins" [value]="plugin.name">
+                    {{ plugin.name }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+            <div class="col-12" *ngIf="activePlugin[repoindex]?.start_page">
+              <mat-form-field class="w-100">
+                <mat-label>
+                  Start from page number ({{activePlugin[repoindex]?.start_page?.placeholder}}, unless you know what you
+                  are doing)
+                </mat-label>
+                <input
+                  matInput
+                  type="number"
+                  formControlName="startPage"
+                  [placeholder]="activePlugin[repoindex]?.start_page?.placeholder"
+                  [required]="activePlugin[repoindex]?.start_page?.required"
+                  required
+                />
+              </mat-form-field>
+            </div>
+            <div class="col-12" *ngIf="activePlugin[repoindex]?.api_endpoint">
+              <mat-form-field class="w-100">
+                <mat-label>
+                  {{ activePlugin[repoindex]?.name }} REST API endpoint
+                </mat-label>
+                <input
+                  matInput
+                  formControlName="itemsEndPoint"
+                  [placeholder]="activePlugin[repoindex]?.api_endpoint?.placeholder"
+                  [required]="activePlugin[repoindex]?.api_endpoint?.required"
+                />
+              </mat-form-field>
+            </div>
+            <div class="col-12">
+              <mat-form-field class="w-100">
+                <mat-label>API key</mat-label>
+                <input
+                  matInput
+                  formControlName="apiKey"
+                  placeholder="API key (optional)"
+                />
+              </mat-form-field>
+            </div>
+            <div class="col-12" *ngIf="activePlugin[repoindex]?.sitemap_endpoint">
+              <mat-form-field class="w-100">
+                <mat-label>
+                  {{ activePlugin[repoindex]?.name }} DSpace XML sitemap
+                </mat-label>
+                <input
+                  matInput
+                  formControlName="siteMap"
+                  [placeholder]="activePlugin[repoindex]?.sitemap_endpoint?.placeholder"
+                  [required]="activePlugin[repoindex]?.sitemap_endpoint?.required"
+                />
+              </mat-form-field>
+            </div>
 
-          <div class="col-12 pb-3">
-            <div class="file">
-              <mat-label>Repository icon:</mat-label>
-              <input
-                *ngIf="!logo[repoindex]"
-                type="file"
-                (change)="IconChange($event, repoindex)"
-                placeholder="Icon"
-                required
-              />
-              <div *ngIf="logo[repoindex]" class="logo">
-                <button
-                  (click)="logo[repoindex] = null"
-                  color="warn"
-                  mat-icon-button
-                >
-                  <mat-icon>delete</mat-icon>
-                </button>
-                <img [src]="src(logo[repoindex])" alt="logo" />
+            <div class="col-12 pb-3">
+              <div class="file">
+                <mat-label>Repository icon:</mat-label>
+                <input
+                  *ngIf="!logo[repoindex]"
+                  type="file"
+                  (change)="IconChange($event, repoindex)"
+                  placeholder="Icon"
+                  required
+                />
+                <div *ngIf="logo[repoindex]" class="logo">
+                  <button
+                    (click)="logo[repoindex] = null"
+                    color="warn"
+                    mat-icon-button
+                  >
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                  <img [src]="src(logo[repoindex])" alt="logo" />
+                </div>
               </div>
             </div>
-          </div>
-          <div class="col-12">
-            <mat-card appearance="raised" class="w-100">
-              <mat-card-title>
-                Metadata structure
-                <button
-                  class="pull-right"
-                  (click)="getMetadata(repoindex)"
-                  color="info"
-                  mat-button
-                  [disabled]="
+            <div class="col-12">
+              <mat-card appearance="raised" class="w-100">
+                <mat-card-title>
+                  Metadata structure
+                  <button
+                    class="pull-right"
+                    (click)="getMetadata(repoindex)"
+                    color="info"
+                    mat-button
+                    [disabled]="
                         repoform.get('type').value == null ||
                         repoform.get('itemsEndPoint').value == null ||
                         repoform.get('itemsEndPoint').value == ''
                       "
-                >
-                  Auto import metadata structure
-                  <mat-icon aria-hidden="false" aria-label="delete"
-                  >cloud_download
-                  </mat-icon>
-                </button>
-              </mat-card-title>
-              <h4>Schema</h4>
-              <div #schema_elements class="list-fields mb-2">
-                <form
-                  class="col-12 pb-3"
-                  *ngFor="
+                  >
+                    Auto import metadata structure
+                    <mat-icon aria-hidden="false" aria-label="delete"
+                    >cloud_download
+                    </mat-icon>
+                  </button>
+                </mat-card-title>
+                <h4>Schema</h4>
+                <div #schema_elements class="list-fields mb-2">
+                  <form
+                    class="col-12 pb-3"
+                    *ngFor="
                       let form of repoform.controls.schema.controls;
                       let i = index
                     "
-                  [formGroup]="form"
-                >
-                  <div class="row">
-                    <div class="col-md-3">
-                      <mat-form-field>
-                        <mat-label>Schema</mat-label>
-                        <input
-                          matInput
-                          formControlName="metadata"
-                          placeholder="e.g: id"
-                          required
-                        />
-                      </mat-form-field>
-                    </div>
-                    <div class="col-md-3">
-                      <mat-form-field>
-                        <mat-label>Elasticsearch label</mat-label>
-                        <input
-                          matInput
-                          formControlName="disply_name"
-                          placeholder="e.g: title"
-                          required
-                        />
-                      </mat-form-field>
-                    </div>
-                    <div class="col-md-3">
-                      <mat-form-field>
-                        <mat-label>Formatter</mat-label>
-                        <mat-select formControlName="addOn">
-                          <mat-option [value]="null">None</mat-option>
-                          <mat-option value="thumbnil">Thumbnail</mat-option>
-                          <mat-option value="datetime">Datetime</mat-option>
-                        </mat-select>
-                      </mat-form-field>
-                    </div>
-                    <div class="col-md-3">
-                      <button
-                        class="pull-right"
-                        (click)="delete(repoform.controls.schema, i)"
-                        color="warn"
-                        mat-icon-button
-                      >
-                        <mat-icon aria-hidden="false" aria-label="delete"
-                        >delete
-                        </mat-icon>
-                      </button>
+                    [formGroup]="form"
+                  >
+                    <div class="row">
+                      <div class="col-md-3">
+                        <mat-form-field>
+                          <mat-label>Schema</mat-label>
+                          <input
+                            matInput
+                            formControlName="metadata"
+                            placeholder="e.g: id"
+                            required
+                          />
+                        </mat-form-field>
+                      </div>
+                      <div class="col-md-3">
+                        <mat-form-field>
+                          <mat-label>Elasticsearch label</mat-label>
+                          <input
+                            matInput
+                            formControlName="disply_name"
+                            placeholder="e.g: title"
+                            required
+                          />
+                        </mat-form-field>
+                      </div>
+                      <div class="col-md-3">
+                        <mat-form-field>
+                          <mat-label>Formatter</mat-label>
+                          <mat-select formControlName="addOn">
+                            <mat-option [value]="null">None</mat-option>
+                            <mat-option value="thumbnil">Thumbnail</mat-option>
+                            <mat-option value="datetime">Datetime</mat-option>
+                          </mat-select>
+                        </mat-form-field>
+                      </div>
+                      <div class="col-md-3">
+                        <button
+                          class="pull-right"
+                          (click)="delete(repoform.controls.schema, i)"
+                          color="warn"
+                          mat-icon-button
+                        >
+                          <mat-icon aria-hidden="false" aria-label="delete"
+                          >delete
+                          </mat-icon>
+                        </button>
+                      </div>
                     </div>
-                  </div>
-                </form>
-              </div>
-              <div class="text-center">
-                <button
-                  class="float-left"
-                  (click)="AddNewMetadata(repoform.controls.schema, schema_elements)"
-                  mat-raised-button
-                >
-                  New schema
-                  <mat-icon aria-hidden="false" aria-label="add"
-                  >add
-                  </mat-icon>
-                </button>
-              </div>
-              <h4 class="pt-5">Metadata fields</h4>
-              <div #field_elements class="list-fields mb-2">
-                <form
-                  class="col-12 pb-3"
-                  *ngFor="
+                  </form>
+                </div>
+                <div class="text-center">
+                  <button
+                    class="float-left"
+                    (click)="AddNewMetadata(repoform.controls.schema, schema_elements)"
+                    mat-raised-button
+                  >
+                    New schema
+                    <mat-icon aria-hidden="false" aria-label="add"
+                    >add
+                    </mat-icon>
+                  </button>
+                </div>
+                <h4 class="pt-5">Metadata fields</h4>
+                <div #field_elements class="list-fields mb-2">
+                  <form
+                    class="col-12 pb-3"
+                    *ngFor="
                       let form of repoform.controls.metadata.controls;
                       let i = index
                     "
-                  [formGroup]="form"
-                >
-                  <div class="row">
-                    <div class="col-md-3">
-                      <mat-form-field>
-                        <mat-label>Schema</mat-label>
-                        <input
-                          matInput
-                          formControlName="metadata"
-                          placeholder="e.g: id"
-                          required
-                        />
-                      </mat-form-field>
-                    </div>
-                    <div class="col-md-3">
-                      <mat-form-field>
-                        <mat-label>Elasticsearch label</mat-label>
-                        <input
-                          matInput
-                          formControlName="disply_name"
-                          placeholder="e.g: title"
-                          required
-                        />
-                      </mat-form-field>
-                    </div>
-                    <div class="col-md-5">
-                      <div class="row">
-                        <div class="col-4">
-                          <mat-form-field>
-                            <mat-label>Formatter</mat-label>
-                            <mat-select
-                              (selectionChange)="
+                    [formGroup]="form"
+                  >
+                    <div class="row">
+                      <div class="col-md-3">
+                        <mat-form-field>
+                          <mat-label>Schema</mat-label>
+                          <input
+                            matInput
+                            formControlName="metadata"
+                            placeholder="e.g: id"
+                            required
+                          />
+                        </mat-form-field>
+                      </div>
+                      <div class="col-md-3">
+                        <mat-form-field>
+                          <mat-label>Elasticsearch label</mat-label>
+                          <input
+                            matInput
+                            formControlName="disply_name"
+                            placeholder="e.g: title"
+                            required
+                          />
+                        </mat-form-field>
+                      </div>
+                      <div class="col-md-5">
+                        <div class="row">
+                          <div class="col-4">
+                            <mat-form-field>
+                              <mat-label>Formatter</mat-label>
+                              <mat-select
+                                (selectionChange)="
                                   selectFormat(
                                     repoindex,
                                     'years_' + form.controls.disply_name.value
                                   )
                                 "
-                              formControlName="addOn"
-                            >
-                              <mat-option [value]="null">None</mat-option>
-                              <mat-option value="language"
-                              >Language</mat-option
+                                formControlName="addOn"
                               >
-                              <mat-option value="country">Country</mat-option>
-                              <mat-option value="date">Date</mat-option>
-                              <mat-option value="datetime">Datetime</mat-option>
-                              <mat-option value="lowercase"
-                              >Lowercase</mat-option
+                                <mat-option [value]="null">None</mat-option>
+                                <mat-option value="language"
+                                >Language</mat-option
+                                >
+                                <mat-option value="country">Country</mat-option>
+                                <mat-option value="date">Date</mat-option>
+                                <mat-option value="datetime">Datetime</mat-option>
+                                <mat-option value="lowercase"
+                                >Lowercase</mat-option
+                                >
+                              </mat-select>
+                            </mat-form-field>
+                          </div>
+                          <div class="col-8">
+                            <form [formGroup]="repoform">
+                              <mat-radio-group
+                                *ngIf="form.controls.addOn.value == 'date'"
+                                name="years"
+                                formControlName="years"
                               >
-                            </mat-select>
-                          </mat-form-field>
-                        </div>
-                        <div class="col-8">
-                          <form [formGroup]="repoform">
-                            <mat-radio-group
-                              *ngIf="form.controls.addOn.value == 'date'"
-                              name="years"
-                              formControlName="years"
-                            >
-                              <mat-radio-button
-                                [value]="
+                                <mat-radio-button
+                                  [value]="
                                     'years_' + form.controls.disply_name.value
                                   "
-                              >
-                                Extract years as years_{{
-                                form.controls.disply_name.value
-                                }}
-                              </mat-radio-button>
-                            </mat-radio-group>
-                          </form>
+                                >
+                                  Extract years as years_{{
+                                  form.controls.disply_name.value
+                                  }}
+                                </mat-radio-button>
+                              </mat-radio-group>
+                            </form>
+                          </div>
                         </div>
                       </div>
+                      <div class="col-md-1">
+                        <button
+                          class="pull-right"
+                          (click)="delete(repoform.controls.metadata, i)"
+                          color="warn"
+                          mat-icon-button
+                        >
+                          <mat-icon aria-hidden="false" aria-label="delete"
+                          >delete
+                          </mat-icon>
+                        </button>
+                      </div>
                     </div>
-                    <div class="col-md-1">
-                      <button
-                        class="pull-right"
-                        (click)="delete(repoform.controls.metadata, i)"
-                        color="warn"
-                        mat-icon-button
-                      >
-                        <mat-icon aria-hidden="false" aria-label="delete"
-                        >delete
-                        </mat-icon>
-                      </button>
-                    </div>
-                  </div>
-                </form>
-              </div>
-              <div class="text-center">
-                <button
-                  class="float-left"
-                  (click)="AddNewMetadata(repoform.controls.metadata, field_elements)"
-                  mat-raised-button
-                >
-                  New metadata field
-                  <mat-icon aria-hidden="false" aria-label="add"
-                  >add
-                  </mat-icon>
-                </button>
-              </div>
-            </mat-card>
+                  </form>
+                </div>
+                <div class="text-center">
+                  <button
+                    class="float-left"
+                    (click)="AddNewMetadata(repoform.controls.metadata, field_elements)"
+                    mat-raised-button
+                  >
+                    New metadata field
+                    <mat-icon aria-hidden="false" aria-label="add"
+                    >add
+                    </mat-icon>
+                  </button>
+                </div>
+              </mat-card>
+            </div>
           </div>
-        </div>
-      </mat-card>
-    </form>
-    <div class="row">
-      <div class="col-12 pt-3">
-        <button
-          class="float-right"
-          color="primary"
-          (click)="submit()"
-          mat-raised-button
-        >
-          Save
-        </button>
-      </div>
+        </mat-card>
+      </form>
     </div>
   </div>
 </div>
diff --git a/frontend/src/app/admin/components/shared/shared.component.html b/frontend/src/app/admin/components/shared/shared.component.html
index 98ba3e8f..1d89060a 100644
--- a/frontend/src/app/admin/components/shared/shared.component.html
+++ b/frontend/src/app/admin/components/shared/shared.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row admin-dashboard-header">
   <div class="col-md-12 pb-5">
     <mat-card appearance="raised">
       <mat-card-title>
@@ -8,7 +8,7 @@
   </div>
 </div>
 
-<div class="row">
+<div class="row admin-dashboard-content">
   <div class="col-12 pb-3">
     <table mat-table [dataSource]="dataSource">
       <!-- id Column -->
diff --git a/frontend/src/app/admin/components/users/users.component.html b/frontend/src/app/admin/components/users/users.component.html
index 2a4592d2..55ca4ea8 100644
--- a/frontend/src/app/admin/components/users/users.component.html
+++ b/frontend/src/app/admin/components/users/users.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row admin-dashboard-header">
   <div class="col-md-12 pb-5">
     <mat-card appearance="raised">
       <mat-card-title>
@@ -12,7 +12,7 @@
   </div>
 </div>
 
-<div class="row">
+<div class="row admin-dashboard-content">
   <div class="col-12 pb-3">
     <table mat-table [dataSource]="dataSource">
       <!-- id Column -->
diff --git a/frontend/src/app/admin/dashboard/dashboard.component.html b/frontend/src/app/admin/dashboard/dashboard.component.html
index 303e5a9f..8b28b5ba 100644
--- a/frontend/src/app/admin/dashboard/dashboard.component.html
+++ b/frontend/src/app/admin/dashboard/dashboard.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row admin-dashboard-header">
   <div class="col-md-12 pb-5">
     <mat-card appearance="raised">
       <mat-card-title>
@@ -20,101 +20,105 @@
   </div>
 </div>
 
-<div *ngFor="let availableSection of availableSections" class="row pt-3">
-  <div class="col-6">
-    <h3>{{availableSection.display_name}}</h3>
-  </div>
-  <div class="col-md-6 harvest-table-tools mb-2">
-    <ng-container *ngIf="availableSection.name === 'fetch'">
-      <button class="mr-2" (click)="startHarvesting()" color="primary" mat-raised-button>
-        Start
-        <mat-icon>archive</mat-icon>
-      </button>
-      <button (click)="stopHarvesting()" color="warn" mat-raised-button>
-        Stop
-        <mat-icon>block</mat-icon>
-      </button>
-    </ng-container>
-    <ng-container *ngIf="availableSection.name !== 'fetch'">
-      <button class="mr-2" (click)="startPlugin(availableSection)" color="primary" mat-raised-button>
-        Start
-        <mat-icon>archive</mat-icon>
-      </button>
-      <button (click)="stopPlugin(availableSection)" color="warn" mat-raised-button>
-        Stop
-        <mat-icon>block</mat-icon>
-      </button>
-    </ng-container>
-  </div>
-  <div class="col-12 pb-3">
-    <div class="d-flex w-100 justify-content-between">
-      <mat-card appearance="raised" class="counter border-bottom-light"
-                (click)="ChangeTable('Active', 'active', availableSection.name)">
-        <mat-card-content class="primary-hover">
-          <mat-card-title>
-            {{ tablesData?.[availableSection.name].active_count }}
-          </mat-card-title>
-          <mat-card-subtitle>Active ({{ tablesData?.[availableSection.name].stuck_count }})</mat-card-subtitle>
-        </mat-card-content>
-      </mat-card>
-      <mat-card appearance="raised" class="counter border-bottom-light"
-                (click)="ChangeTable('Waiting', 'waiting', availableSection.name)">
-        <mat-card-content class="primary-hover">
-          <mat-card-title>
-            {{ tablesData?.[availableSection.name].waiting_count }}
-          </mat-card-title>
-          <mat-card-subtitle>Waiting</mat-card-subtitle>
-        </mat-card-content>
-      </mat-card>
-      <mat-card appearance="raised" class="counter border-bottom-light"
-                (click)="ChangeTable('Completed', 'completed', availableSection.name)">
-        <mat-card-content class="primary-hover">
-          <mat-card-title>
-            {{ tablesData?.[availableSection.name].completed_count }}
-          </mat-card-title>
-          <mat-card-subtitle>Completed</mat-card-subtitle>
-        </mat-card-content>
-      </mat-card>
-      <mat-card appearance="raised" class="counter border-bottom-light"
-                (click)="ChangeTable('Failed', 'failed', availableSection.name)">
-        <mat-card-content class="primary-hover">
-          <mat-card-title>
-            {{ tablesData?.[availableSection.name].failed_count }}
-          </mat-card-title>
-          <mat-card-subtitle>Failed</mat-card-subtitle>
+<div class="admin-dashboard-content">
+  <div *ngFor="let availableSection of availableSections" class="row pt-3">
+    <div class="col-6">
+      <h3>{{availableSection.display_name}}</h3>
+    </div>
+    <div class="col-md-6 harvest-table-tools mb-2">
+      <ng-container *ngIf="availableSection.name === 'fetch'">
+        <button class="mr-2" (click)="startHarvesting()" color="primary" mat-raised-button>
+          Start
+          <mat-icon>archive</mat-icon>
+        </button>
+        <button (click)="stopHarvesting()" color="warn" mat-raised-button>
+          Stop
+          <mat-icon>block</mat-icon>
+        </button>
+      </ng-container>
+      <ng-container *ngIf="availableSection.name !== 'fetch'">
+        <button class="mr-2" (click)="startPlugin(availableSection)" color="primary" mat-raised-button>
+          Start
+          <mat-icon>archive</mat-icon>
+        </button>
+        <button (click)="stopPlugin(availableSection)" color="warn" mat-raised-button>
+          Stop
+          <mat-icon>block</mat-icon>
+        </button>
+      </ng-container>
+    </div>
+    <div class="col-12 pb-3">
+      <div class="d-flex w-100 justify-content-between">
+        <mat-card appearance="raised" class="counter border-bottom-light"
+                  (click)="ChangeTable('Active', 'active', availableSection.name)">
+          <mat-card-content class="primary-hover">
+            <mat-card-title>
+              {{ tablesData?.[availableSection.name].active_count }}
+            </mat-card-title>
+            <mat-card-subtitle>Active ({{ tablesData?.[availableSection.name].stuck_count }})</mat-card-subtitle>
+          </mat-card-content>
+        </mat-card>
+        <mat-card appearance="raised" class="counter border-bottom-light"
+                  (click)="ChangeTable('Waiting', 'waiting', availableSection.name)">
+          <mat-card-content class="primary-hover">
+            <mat-card-title>
+              {{ tablesData?.[availableSection.name].waiting_count }}
+            </mat-card-title>
+            <mat-card-subtitle>Waiting</mat-card-subtitle>
+          </mat-card-content>
+        </mat-card>
+        <mat-card appearance="raised" class="counter border-bottom-light"
+                  (click)="ChangeTable('Completed', 'completed', availableSection.name)">
+          <mat-card-content class="primary-hover">
+            <mat-card-title>
+              {{ tablesData?.[availableSection.name].completed_count }}
+            </mat-card-title>
+            <mat-card-subtitle>Completed</mat-card-subtitle>
+          </mat-card-content>
+        </mat-card>
+        <mat-card appearance="raised" class="counter border-bottom-light"
+                  (click)="ChangeTable('Failed', 'failed', availableSection.name)">
+          <mat-card-content class="primary-hover">
+            <mat-card-title>
+              {{ tablesData?.[availableSection.name].failed_count }}
+            </mat-card-title>
+            <mat-card-subtitle>Failed</mat-card-subtitle>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+    <h3
+      *ngIf="progress?.[availableSection.name].estimation && progress?.[availableSection.name].estimation !== '00:00:00'"
+      class="col-12 estimated-time" color="primary">
+      <div>
+        <small>Estimated time</small> {{progress?.[availableSection.name].estimation}}
+      </div>
+      <mat-progress-bar class="estimated-time-progress-bar" mode="indeterminate"></mat-progress-bar>
+    </h3>
+    <div *ngIf="progress?.[availableSection.name].totalJobs > 0" class="col-12">
+      <mat-progress-bar class="mb-3 jobs-progress-bar" mode="determinate"
+                        [value]="progress?.[availableSection.name].percentage"></mat-progress-bar>
+      <h4 class="jobs-progress-bar-percentage">{{progress?.[availableSection.name].percentage.toFixed(2)}}%</h4>
+    </div>
+    <div class="col-12">
+      <mat-card appearance="raised">
+        <mat-card-title>
+          {{ activeTables?.[availableSection.name]?.table }}
+        </mat-card-title>
+        <mat-card-content>
+          <app-info-table
+            [data]="tablesData?.[availableSection.name].table.data"
+            [pageIndex]="tablesData?.[availableSection.name].table.pageIndex"
+            [pageSize]="tablesData?.[availableSection.name].table.pageSize"
+            [totalPages]="tablesData?.[availableSection.name].table.totalPages"
+            [totalRecords]="tablesData?.[availableSection.name].table.totalRecords"
+            [availableSection]="true"
+            (paginationEvent)="PaginationChanged($event, activeTables?.[availableSection.name]?.status, availableSection.name)"
+          ></app-info-table>
+
         </mat-card-content>
       </mat-card>
     </div>
-  </div>
-  <h3 *ngIf="progress?.[availableSection.name].estimation && progress?.[availableSection.name].estimation !== '00:00:00'" class="col-12 estimated-time" color="primary">
-    <div>
-      <small>Estimated time</small> {{progress?.[availableSection.name].estimation}}
-    </div>
-    <mat-progress-bar class="estimated-time-progress-bar" mode="indeterminate"></mat-progress-bar>
-  </h3>
-  <div *ngIf="progress?.[availableSection.name].totalJobs > 0" class="col-12">
-    <mat-progress-bar class="mb-3 jobs-progress-bar" mode="determinate"
-                      [value]="progress?.[availableSection.name].percentage"></mat-progress-bar>
-    <h4 class="jobs-progress-bar-percentage">{{progress?.[availableSection.name].percentage.toFixed(2)}}%</h4>
-  </div>
-  <div class="col-12">
-    <mat-card appearance="raised">
-      <mat-card-title>
-        {{ activeTables?.[availableSection.name]?.table }}
-      </mat-card-title>
-      <mat-card-content>
-        <app-info-table
-          [data]="tablesData?.[availableSection.name].table.data"
-          [pageIndex]="tablesData?.[availableSection.name].table.pageIndex"
-          [pageSize]="tablesData?.[availableSection.name].table.pageSize"
-          [totalPages]="tablesData?.[availableSection.name].table.totalPages"
-          [totalRecords]="tablesData?.[availableSection.name].table.totalRecords"
-          [availableSection]="true"
-          (paginationEvent)="PaginationChanged($event, activeTables?.[availableSection.name]?.status, availableSection.name)"
-        ></app-info-table>
 
-      </mat-card-content>
-    </mat-card>
   </div>
-
 </div>
diff --git a/frontend/src/app/admin/design/design.component.html b/frontend/src/app/admin/design/design.component.html
index 516c0162..81bd85c8 100644
--- a/frontend/src/app/admin/design/design.component.html
+++ b/frontend/src/app/admin/design/design.component.html
@@ -1,5 +1,5 @@
-<div class="row">
-    <div class="col-md-12 p-2">
+<div class="row admin-dashboard-header">
+    <div class="col-md-12">
         <mat-card appearance="raised">
             <mat-card-title>
                 Explorer Layout - {{dashboard_name}}
@@ -21,8 +21,8 @@
         </mat-card>
     </div>
 </div>
-<div class="row">
-    <div class="col-md-12 p-2">
+<div class="row admin-dashboard-content">
+    <div class="col-md-12">
         <div class="row">
             <div class="col-12 footer">
                 <div class="border">
diff --git a/frontend/src/app/admin/indexes-dashboard/indexes-dashboard.component.html b/frontend/src/app/admin/indexes-dashboard/indexes-dashboard.component.html
index 0b851a7a..7905e778 100644
--- a/frontend/src/app/admin/indexes-dashboard/indexes-dashboard.component.html
+++ b/frontend/src/app/admin/indexes-dashboard/indexes-dashboard.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row admin-dashboard-header">
   <div class="col-md-12 pb-5">
     <mat-card appearance="raised">
       <mat-card-title>
@@ -22,7 +22,7 @@
   </div>
 </div>
 
-<div class="row">
+<div class="row admin-dashboard-content">
   <div class="col-12 pb-3">
     <table mat-table [dataSource]="dataSource" class="w-100">
       <!-- id Column -->
diff --git a/frontend/src/app/admin/indexes/indexes.component.html b/frontend/src/app/admin/indexes/indexes.component.html
index 26859943..b2d4a4ec 100644
--- a/frontend/src/app/admin/indexes/indexes.component.html
+++ b/frontend/src/app/admin/indexes/indexes.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row admin-dashboard-header">
   <div class="col-md-12 pb-5">
     <mat-card appearance="raised">
       <mat-card-title>
@@ -22,7 +22,7 @@
   </div>
 </div>
 
-<div class="row">
+<div class="row admin-dashboard-content">
   <div class="col-12 pb-3">
     <!-- <p>{{dataSource | json}}</p> -->
     <table mat-table [dataSource]="dataSource" style="width: 100%;">
diff --git a/frontend/src/app/admin/plugins/plugins.component.html b/frontend/src/app/admin/plugins/plugins.component.html
index 7fc84da0..1aaad9cc 100644
--- a/frontend/src/app/admin/plugins/plugins.component.html
+++ b/frontend/src/app/admin/plugins/plugins.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row admin-dashboard-header">
     <div class="col-md-12 pb-5">
         <mat-card appearance="raised">
             <mat-card-title>
@@ -23,7 +23,8 @@
             </mat-card-content>
         </mat-card>
     </div>
-
+</div>
+<div class="row admin-dashboard-content">
     <div *ngFor="let plugin of plugins;let i = index;" class="col-md-12 pb-5">
         <app-plugin (onEdit)="onEdited($event,plugin.name)" [plugins]="plugins" [pluginIndex]="i"></app-plugin>
     </div>
diff --git a/frontend/src/app/admin/reporting/reporting.component.html b/frontend/src/app/admin/reporting/reporting.component.html
index d263459c..9ee77730 100644
--- a/frontend/src/app/admin/reporting/reporting.component.html
+++ b/frontend/src/app/admin/reporting/reporting.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row admin-dashboard-header">
   <div class="col-md-12 pb-5">
     <mat-card appearance="raised">
       <mat-card-title>
@@ -34,7 +34,7 @@
   </div>
 </div>
 
-<div class="row">
+<div class="row admin-dashboard-content">
   <div class="col-12 pb-3">
     <table mat-table [dataSource]="tableData" class="w-100">
       <!-- Title Column -->
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index d8adad88..778c135e 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -309,3 +309,14 @@ mat-paginator .mat-mdc-select-trigger {
   background-color: #fef7f8;
   border-color: #f0868e;
 }
+
+.admin-dashboard-header {
+  z-index: 999;
+  position: fixed;
+  top: 0;
+  width: calc(100% - 260px);
+}
+
+.admin-dashboard-content {
+  padding-top: 80px;
+}