System views updated

src/app/clients/clients.component.html

@@ -32,7 +32,7 @@
 
   <div [hidden]="!existsClientsToFilter">
     <div *ngIf="isLoading">
-      <div class="loading"></div>
+      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
     </div>
     <table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)">
       <!-- Name Column -->

src/app/clients/clients.component.scss

@@ -31,17 +31,6 @@ $bar: 150px;
 $foo: $bar * 8;
 $color: #e2e4ec;
 
-.loading {
-  position: absolute;
-  width: $bar;
-  height: 8px;
-  background: linear-gradient(125deg, rgb(255 255 255), #c4d2e9, rgb(255 255 255));
-  animation:
-    grow 4s linear infinite,
-    move 4s linear infinite;
-  top: 75px;
-}
-
 .sidenav {
   overflow-x: hidden;
 }

src/app/core/shell/shell.component.html

@@ -29,6 +29,6 @@
     <!-- Content -->
     <mifosx-content></mifosx-content>
     <!-- Footer -->
-    <mifosx-footer></mifosx-footer>
+    <mifosx-footer [styleClass]="'main-page'"></mifosx-footer>
   </mat-sidenav-content>
 </mat-sidenav-container>

src/app/core/shell/shell.component.scss

@@ -24,17 +24,6 @@ $bar: 190px;
 $foo: $bar * 8;
 $color: #e2e4ec;
 
-.loading {
-  position: absolute;
-  width: $bar;
-  height: 8px;
-  background: linear-gradient(125deg, rgb(255 255 255), #c4d2e9, rgb(255 255 255));
-  animation:
-    grow 4s linear infinite,
-    move 4s linear infinite;
-  top: 64px;
-}
-
 .sidenav {
   overflow-x: hidden;
 }

src/app/core/shell/toolbar/toolbar.component.html

@@ -53,7 +53,7 @@
     </span>
   </div>
 
-  <span class="flex-auto"></span>
+  <span class="toolbar-spacer"></span>
 
   <div #globalSearch>
     <mifosx-search-tool tabindex="0"></mifosx-search-tool>

src/app/core/shell/toolbar/toolbar.component.scss

@@ -69,3 +69,7 @@
     margin-left: 5px;
   }
 }
+
+.toolbar-spacer {
+  flex: 1 1 auto;
+}

src/app/login/login.component.html

@@ -43,7 +43,6 @@
     <div class="layout-row-reverse flex-auto">
       <mifosx-language-selector class="p-r-10 p-t-10"></mifosx-language-selector>
       <mifosx-theme-toggle class="p-r-10 p-t-10"></mifosx-theme-toggle>
-      <div class="flex-fill"></div>
       <mifosx-server-selector
         class="p-t-10"
         *ngIf="!environment.production && environment.allowServerSwitch"
@@ -56,9 +55,7 @@
     </div>
 
     <!-- Tenant Identifier Name -->
-    <div class="layout-row align-center-center flex-auto" *ngIf="displayTenantSelector()">
-      <mifosx-tenant-selector></mifosx-tenant-selector>
-    </div>
+    <mifosx-tenant-selector *ngIf="displayTenantSelector()"></mifosx-tenant-selector>
 
     <!--
       Type of Form:
@@ -67,35 +64,37 @@
         Two Factor Authentication
         Forgot Password (TODO: Decision to be taken on providing this feature.)
     -->
-    <div class="layout-row align-center-start flex-3-auto">
-      <mifosx-login-form *ngIf="!resetPassword && !twoFactorAuthenticationRequired"></mifosx-login-form>
+    <mifosx-login-form *ngIf="!resetPassword && !twoFactorAuthenticationRequired"></mifosx-login-form>
+
+    <div class="layout-row m-t-20">
       <mifosx-reset-password *ngIf="resetPassword"></mifosx-reset-password>
       <mifosx-two-factor-authentication *ngIf="twoFactorAuthenticationRequired"></mifosx-two-factor-authentication>
     </div>
-
-    <!-- Contact Information/Resources (hidden on smaller screens) -->
-    <mat-list class="information-list align-items-center custom-horizontal-list hide-lt-lg">
-      <mat-list-item
-        ><button mat-button [matMenuTriggerFor]="resourcesMenu">
-          {{ 'labels.links.Resources' | translate }}
-        </button></mat-list-item
-      >
-      <mat-list-item
-        ><button mat-button [matMenuTriggerFor]="communityMenu">
-          {{ 'labels.links.Community' | translate }}
-        </button></mat-list-item
-      >
-      <mat-list-item
-        ><button mat-button [matMenuTriggerFor]="contributeMenu">
-          {{ 'labels.links.Contribute' | translate }}
-        </button></mat-list-item
-      >
-    </mat-list>
+    <div class="layout-row m-t-20">
+      <!-- Contact Information/Resources (hidden on smaller screens) -->
+      <mat-list class="information-list align-items-center custom-horizontal-list hide-lt-lg">
+        <mat-list-item
+          ><button mat-button [matMenuTriggerFor]="resourcesMenu">
+            {{ 'labels.links.Resources' | translate }}
+          </button></mat-list-item
+        >
+        <mat-list-item
+          ><button mat-button [matMenuTriggerFor]="communityMenu">
+            {{ 'labels.links.Community' | translate }}
+          </button></mat-list-item
+        >
+        <mat-list-item
+          ><button mat-button [matMenuTriggerFor]="contributeMenu">
+            {{ 'labels.links.Contribute' | translate }}
+          </button></mat-list-item
+        >
+      </mat-list>
+    </div>
 
     <!-- Footer -->
-    <mifosx-footer></mifosx-footer>
+    <mifosx-footer [styleClass]="'m-t-90'"></mifosx-footer>
 
-    <div class="layout-row align-end m-b-20 m-r-10">
+    <div class="layout-row m-b-20 m-r-10" align="end">
       <a (click)="reloadSettings()"><fa-icon icon="refresh"></fa-icon></a>
     </div>
   </div>

src/app/organization/investors/investors.component.scss

@@ -46,17 +46,6 @@ $color: #e2e4ec;
   margin-bottom: 39px;
 }
 
-.loading {
-  position: absolute;
-  width: $bar;
-  height: 8px;
-  background: linear-gradient(125deg, rgb(255 255 255), #c4d2e9, rgb(255 255 255));
-  animation:
-    grow 4s linear infinite,
-    move 4s linear infinite;
-  top: 154px;
-}
-
 .sidenav {
   overflow-x: hidden;
 }

src/app/reports/run-report/table-and-sms/table-and-sms.component.scss

@@ -29,17 +29,6 @@ $color: #e2e4ec;
   overflow: auto;
 }
 
-.loading {
-  position: absolute;
-  width: $bar;
-  height: 8px;
-  background: linear-gradient(125deg, rgb(255 255 255), #c4d2e9, rgb(255 255 255));
-  animation:
-    grow 4s linear infinite,
-    move 4s linear infinite;
-  top: 82px;
-}
-
 .sidenav {
   overflow-x: hidden;
 }

src/app/savings/savings-account-view/general-tab/general-tab.component.scss

@@ -7,17 +7,6 @@ $color: #e2e4ec;
   overflow: auto;
 }
 
-.loading {
-  position: absolute;
-  width: $bar;
-  height: 8px;
-  background: linear-gradient(125deg, rgb(255 255 255), #c4d2e9, rgb(255 255 255));
-  animation:
-    grow 4s linear infinite,
-    move 4s linear infinite;
-  top: 169px;
-}
-
 .sidenav {
   overflow-x: hidden;
 }

src/app/shared/footer/footer.component.html

@@ -1,4 +1,4 @@
-<div class="layout-column m-b-20" id="footer" *ngIf="displayBackEndInfo">
+<div class="layout-column m-b-20" ngClass="{{ styleClass }}" id="footer" *ngIf="displayBackEndInfo">
   <mat-divider class="divider align-center"></mat-divider>
   <div class="layout-column m-b-20 content-wrapper footer-center">
     <table class="versions">
@@ -28,5 +28,7 @@
     </table>
   </div>
   <mat-divider class="divider align-center"></mat-divider>
+</div>
+<div class="layout-column m-b-20 copy-label">
   <p class="footer-content align-center">{{ 'APP_NAME' | translate }} {{ 'labels.text.by' | translate }} Mifos</p>
 </div>

src/app/shared/footer/footer.component.scss

@@ -3,11 +3,13 @@
 
 #footer {
   align-items: center;
+  min-width: 400px;
 
   .content-wrapper {
     max-width: 100%;
-    width: 70%;
-    padding-left: 30%;
+    min-width: 90%;
+    padding-left: 5%;
+    padding-right: 5%;
 
     .versions {
       width: 100%;
@@ -36,3 +38,15 @@
     }
   }
 }
+
+.main-page {
+  max-width: 70%;
+  min-width: 50%;
+  padding-left: 30%;
+}
+
+.copy-label {
+  min-width: 100%;
+  text-align: center;
+  font-size: large;
+}

src/app/shared/footer/footer.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Alert } from 'app/core/alert/alert.model';
 import { AlertService } from 'app/core/alert/alert.service';
 import { AuthenticationService } from 'app/core/authentication/authentication.service';
@@ -21,6 +21,8 @@ import { Subscription } from 'rxjs';
   styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent implements OnInit, OnDestroy {
+  @Input() styleClass: string = '';
+
   /** Mifos X version. */
   versions: any = {
     mifos: environment.version,

src/app/shared/search-tool/search-tool.component.html

@@ -1,21 +1,23 @@
-<div *ngIf="searchVisible" class="search-bar flex-auto layout-row gap-2percent hide-lt-sm" [@fadeInOut]>
-  <mat-form-field class="search">
-    <mat-label>{{ 'labels.text.Search' | translate }}</mat-label>
-    <input matInput type="text" [formControl]="query" (keydown.enter)="search()" />
-  </mat-form-field>
+<div class="flex-100 layout-row">
+  <div *ngIf="searchVisible" class="search-bar flex-90 layout-row hide-lt-sm" [@fadeInOut]>
+    <mat-form-field class="search flex-45">
+      <mat-label>{{ 'labels.text.Search' | translate }}</mat-label>
+      <input matInput type="text" [formControl]="query" (keydown.enter)="search()" />
+    </mat-form-field>
 
-  <mat-form-field class="resource">
-    <mat-label>{{ 'labels.inputs.Resource' | translate }}</mat-label>
-    <mat-select [formControl]="resource">
-      <mat-option *ngFor="let option of resourceOptions" [value]="option.value">
-        {{ 'labels.text.' + option.name | translate }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
-</div>
+    <mat-form-field class="resource flex-50">
+      <mat-label>{{ 'labels.inputs.Resource' | translate }}</mat-label>
+      <mat-select [formControl]="resource">
+        <mat-option *ngFor="let option of resourceOptions" [value]="option.value">
+          {{ 'labels.text.' + option.name | translate }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
 
-<div class="search-icon">
-  <button mat-icon-button (click)="toggleSearchVisibility()" class="hide-lt-sm">
-    <fa-icon icon="search" size="lg" matTooltip="{{ 'labels.text.Search' | translate }}"></fa-icon>
-  </button>
+  <div class="search-icon flex-10">
+    <button mat-icon-button (click)="toggleSearchVisibility()" class="hide-lt-sm">
+      <fa-icon icon="search" size="lg" matTooltip="{{ 'labels.text.Search' | translate }}"></fa-icon>
+    </button>
+  </div>
 </div>

src/app/shared/search-tool/search-tool.component.scss

@@ -1,14 +1,16 @@
 .search-bar {
   .search {
-    max-width: 400px;
+    max-width: 500px;
     width: 100%;
     font-size: 1rem;
+    color: white;
   }
 
   .resource {
     max-width: 90px;
     width: 100%;
     font-size: 1rem;
+    color: white;
   }
 }
 
@@ -17,3 +19,17 @@
   display: flex;
   align-items: center;
 }
+
+.mat-mdc-floating-label,
+mat-form-field input {
+  color: white !important;
+  height: 16px;
+  transition: height ease-in-out 400ms;
+}
+
+mat-form-field input:focus {
+  color: white !important;
+  background-color: transparent;
+  height: 16px;
+  transition: height ease-in-out 400ms;
+}

src/app/system/audit-trails/audit-trail.datasource.ts

@@ -39,6 +39,8 @@ export class AuditTrailsDataSource implements DataSource<any> {
     pageIndex: number = 0,
     limit: number = 10
   ) {
+    console.log(pageIndex);
+    console.log(limit);
     this.auditTrailsSubject.next([]);
     this.systemService
       .getAuditTrails(filterBy, orderBy, sortOrder, pageIndex * limit, limit)

src/app/system/audit-trails/audit-trails.component.html

@@ -1,4 +1,4 @@
-<div class="container m-b-20 layout-row align-end gap-20px">
+<div class="container m-b-20 layout-row align-end">
   <button mat-raised-button color="primary" (click)="downloadCSV()">
     <fa-icon icon="file" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Download CSV' | translate }}
@@ -110,7 +110,10 @@
 </mat-autocomplete>
 
 <div class="container mat-elevation-z8 table-container">
-  <table mat-table [dataSource]="dataSource" matSort>
+  <div *ngIf="isLoading">
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  </div>
+  <table *ngIf="!isLoading" mat-table [dataSource]="dataSource" matSort>
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Trail ID' | translate }}</th>
       <td mat-cell *matCellDef="let auditTrail">{{ auditTrail.id }}</td>
@@ -166,6 +169,7 @@
   </table>
 
   <mat-paginator
+    *ngIf="!isLoading"
     [length]="dataSource?.records$ | async"
     [pageSize]="10"
     [pageSizeOptions]="[10, 25, 50, 100]"

src/app/system/audit-trails/audit-trails.component.ts

@@ -129,10 +129,12 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
   /** Checker form control. */
   checker = new UntypedFormControl();
 
+  isLoading = false;
+
   /** Paginator for audit trails table. */
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  @ViewChild(MatPaginator) paginator: MatPaginator;
   /** Sorter for audit trails table. */
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
+  @ViewChild(MatSort) sort: MatSort;
 
   /**
    * Retrieves the audit trail search template data from `resolve`.
@@ -161,6 +163,7 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
     this.setFilteredActions();
     this.setFilteredEntities();
     this.setFilteredCheckers();
+    this.dataSource = new AuditTrailsDataSource(this.systemService);
     this.getAuditTrails();
   }
 
@@ -264,7 +267,7 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
       )
       .subscribe();
 
-    this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
+    //this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
 
     merge(this.sort.sortChange, this.paginator.page)
       .pipe(tap(() => this.loadAuditTrailsPage()))
@@ -275,14 +278,14 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
    * Initializes the data source for audit trails table and loads the first page.
    */
   getAuditTrails() {
-    this.dataSource = new AuditTrailsDataSource(this.systemService);
-    this.dataSource.getAuditTrails(
-      this.filterAuditTrailsBy,
-      this.sort.active,
-      this.sort.direction,
-      this.paginator.pageIndex,
-      this.paginator.pageSize
-    );
+    this.isLoading = true;
+    const isActive: string = this.sort ? this.sort.active : '';
+    const direction: string = this.sort ? this.sort.direction : '';
+    const pageIndex: number = this.paginator ? this.paginator.pageIndex : 0;
+    const pageSize: any = this.paginator ? this.paginator.pageSize : 20;
+
+    this.dataSource.getAuditTrails(this.filterAuditTrailsBy, isActive, direction, pageIndex, pageSize);
+    this.isLoading = false;
   }
 
   /**
@@ -292,13 +295,7 @@ export class AuditTrailsComponent implements OnInit, AfterViewInit {
     if (!this.sort.direction) {
       delete this.sort.active;
     }
-    this.dataSource.getAuditTrails(
-      this.filterAuditTrailsBy,
-      this.sort.active,
-      this.sort.direction,
-      this.paginator.pageIndex,
-      this.paginator.pageSize
-    );
+    this.getAuditTrails();
   }
 
   /**

src/app/system/audit-trails/view-audit/view-audit.component.html

@@ -1,108 +1,116 @@
-<div class="container layout-row-wrap align-between responsive-column gap-4percent">
-  <div class="flex-46">
-    <mat-card>
-      <mat-card-content>
-        <div class="layout-row-wrap">
-          <div class="flex-50 mat-body-strong">
-            {{ 'labels.inputs.ID' | translate }}
-          </div>
+<div class="container layout-row align-between responsive-column">
+  <mat-card class="flex-100">
+    <mat-card-content class="flex-100">
+      <div class="layout-row flex-100">
+        <div class="flex-46">
+          <div class="layout-row-wrap">
+            <div class="flex-50 mat-body-strong">
+              {{ 'labels.inputs.ID' | translate }}
+            </div>
 
-          <div class="flex-50">
-            {{ auditTrailData.id }}
-          </div>
+            <div class="flex-50">
+              {{ auditTrailData.id }}
+            </div>
 
-          <div class="flex-50 mat-body-strong">
-            {{ 'labels.inputs.Status' | translate }}
-          </div>
+            <div class="flex-50 mat-body-strong">
+              {{ 'labels.inputs.Status' | translate }}
+            </div>
 
-          <div class="flex-50">
-            {{ auditTrailData.processingResult }}
-          </div>
+            <div class="flex-50">
+              {{ auditTrailData.processingResult }}
+            </div>
 
-          <div class="flex-50 mat-body-strong">
-            {{ 'labels.inputs.User' | translate }}
-          </div>
+            <div class="flex-50 mat-body-strong">
+              {{ 'labels.inputs.User' | translate }}
+            </div>
 
-          <div class="flex-50">
-            {{ auditTrailData.maker }}
-          </div>
+            <div class="flex-50">
+              {{ auditTrailData.maker }}
+            </div>
 
-          <div class="flex-50 mat-body-strong">
-            {{ 'labels.inputs.Action' | translate }}
-          </div>
+            <div class="flex-50 mat-body-strong">
+              {{ 'labels.inputs.Action' | translate }}
+            </div>
 
-          <div class="flex-50">
-            {{ auditTrailData.actionName }}
-          </div>
+            <div class="flex-50">
+              {{ auditTrailData.actionName }}
+            </div>
 
-          <div class="flex-50 mat-body-strong">
-            {{ 'labels.inputs.Entity' | translate }}
-          </div>
+            <div class="flex-50 mat-body-strong">
+              {{ 'labels.inputs.Entity' | translate }}
+            </div>
 
-          <div class="flex-50">
-            {{ auditTrailData.entityName }}
-          </div>
+            <div class="flex-50">
+              {{ auditTrailData.entityName }}
+            </div>
 
-          <div class="flex-50 mat-body-strong">
-            {{ 'labels.inputs.Resource ID' | translate }}
-          </div>
+            <div class="flex-50 mat-body-strong">
+              {{ 'labels.inputs.Resource ID' | translate }}
+            </div>
 
-          <div class="flex-50">
-            {{ auditTrailData.resourceId }}
-          </div>
+            <div class="flex-50">
+              {{ auditTrailData.resourceId }}
+            </div>
 
-          <div class="flex-50 mat-body-strong">
-            {{ 'labels.inputs.Date' | translate }}
-          </div>
+            <div class="flex-50 mat-body-strong">
+              {{ 'labels.inputs.Date' | translate }}
+            </div>
 
-          <div class="flex-50">
-            {{ auditTrailData.madeOnDate | dateFormat }}
-          </div>
+            <div class="flex-50">
+              {{ auditTrailData.madeOnDate | dateFormat }}
+            </div>
 
-          <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.officeName">
-            {{ 'labels.inputs.Office' | translate }}
-          </div>
+            <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.officeName">
+              {{ 'labels.inputs.Office' | translate }}
+            </div>
 
-          <div class="flex-50" *ngIf="auditTrailData.officeName">
-            {{ auditTrailData.officeName }}
-          </div>
+            <div class="flex-50" *ngIf="auditTrailData.officeName">
+              {{ auditTrailData.officeName }}
+            </div>
 
-          <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.savingsAccountNo">
-            {{ 'labels.inputs.Savings Account No' | translate }}
-          </div>
+            <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.savingsAccountNo">
+              {{ 'labels.inputs.Savings Account No' | translate }}
+            </div>
 
-          <div class="flex-50" *ngIf="auditTrailData.savingsAccountNo">
-            {{ auditTrailData.savingsAccountNo }}
-          </div>
+            <div class="flex-50" *ngIf="auditTrailData.savingsAccountNo">
+              {{ auditTrailData.savingsAccountNo }}
+            </div>
 
-          <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.groupLevelName">
-            {{ 'labels.inputs.Group Level' | translate }}
-          </div>
+            <div class="flex-50 mat-body-strong" *ngIf="auditTrailData.groupLevelName">
+              {{ 'labels.inputs.Group Level' | translate }}
+            </div>
 
-          <div class="flex-50" *ngIf="auditTrailData.groupLevelName">
-            {{ auditTrailData.groupLevelName }}
+            <div class="flex-50" *ngIf="auditTrailData.groupLevelName">
+              {{ auditTrailData.groupLevelName }}
+            </div>
           </div>
         </div>
-      </mat-card-content>
-    </mat-card>
-  </div>
 
-  <div class="flex-46">
-    <table mat-table [dataSource]="dataSource" matSort>
-      <ng-container matColumnDef="command">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Command' | translate }}</th>
-        <td mat-cell *matCellDef="let auditTrailCommand">{{ auditTrailCommand.command }}</td>
-      </ng-container>
+        <div class="flex-46 command">
+          <table mat-table [dataSource]="dataSource" class="command-table" matSort>
+            <ng-container matColumnDef="command">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Command' | translate }}</th>
+              <td mat-cell *matCellDef="let auditTrailCommand">{{ auditTrailCommand.command }}</td>
+            </ng-container>
 
-      <ng-container matColumnDef="commandValue">
-        <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Command Value' | translate }}</th>
-        <td mat-cell *matCellDef="let auditTrailCommand" class="column-value-wrapper">
-          {{ auditTrailCommand.commandValue }}
-        </td>
-      </ng-container>
+            <ng-container matColumnDef="commandValue">
+              <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Command Value' | translate }}</th>
+              <td mat-cell *matCellDef="let auditTrailCommand" class="column-value-wrapper">
+                {{ auditTrailCommand.commandValue }}
+              </td>
+            </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-    </table>
-  </div>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+          </table>
+        </div>
+      </div>
+
+      <div class="layout-row layout-align-center m-t-20 column-on-mobile">
+        <button type="button" mat-raised-button color="primary" [routerLink]="['../']">
+          {{ 'labels.buttons.Back' | translate }}
+        </button>
+      </div>
+    </mat-card-content>
+  </mat-card>
 </div>

src/app/system/audit-trails/view-audit/view-audit.component.scss

@@ -12,3 +12,11 @@ table {
 .column-value-wrapper {
   word-break: break-all;
 }
+
+.command {
+  background-color: #eee;
+}
+
+.command-table {
+  background-color: inherit;
+}

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html

@@ -6,12 +6,12 @@
     </mat-form-field>
   </div>
 
-  <div #configurationsTable class="mat-elevation-z8">
+  <div #configurationsTable class="mat-elevation-z8 m-b-10">
     <table mat-table [dataSource]="dataSource" matSort>
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
         <td mat-cell *matCellDef="let configuration">
-          {{ configuration.name }}&nbsp;&nbsp;
+          <span class="m-r-10">{{ configuration.name }}</span>
           <fa-icon
             *ngIf="configuration.description"
             icon="question-circle"

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.scss

@@ -1,12 +1,3 @@
 table {
   width: 100%;
 }
-
-// TODO: CONFIGURE THESE CLASSES GLOBALLY
-.enabled {
-  color: #32cd32;
-}
-
-.disabled {
-  color: #f44366;
-}

src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.ts

@@ -99,7 +99,7 @@ export class GlobalConfigurationsTabComponent implements OnInit, AfterViewInit {
    */
   toggleStatus(configuration: any) {
     this.systemService
-      .updateConfiguration(configuration.id, { enabled: !configuration.enabled })
+      .updateConfiguration(configuration.id, { enabled: configuration.enabled })
       .subscribe((response: any) => {
         configuration.enabled = response.changes.enabled;
         if (configuration.name === SettingsService.businessDateConfigName) {

src/app/system/manage-external-events/manage-external-events.component.scss

@@ -3,3 +3,7 @@
     margin-left: auto;
   }
 }
+
+.table-container {
+  padding-bottom: 10px;
+}

src/app/system/manage-external-events/manage-external-events.component.ts

@@ -56,7 +56,7 @@ export class ManageExternalEventsComponent implements OnInit {
    * Enables/Disables respective event
    */
   toggleStatus(event: any) {
-    this.externalEventConfigurations[event.type] = !event.enabled;
+    this.externalEventConfigurations[event.type] = event.enabled;
     this.existAnyUpdate = true;
   }
 

src/app/system/manage-jobs/manage-jobs.component.scss

@@ -1,6 +1,6 @@
 .container-card {
   margin: 0 auto;
-  max-width: 80rem;
+  max-width: 90rem;
   width: 90%;
   padding: 0;
   padding-bottom: 50px;

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html

@@ -24,7 +24,7 @@
     </mat-form-field>
   </div>
 
-  <div class="space-top layout-row gap-20percent">
+  <div class="space-top layout-row gap-10px">
     <button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
       <fa-icon icon="play" class="m-r-10"></fa-icon>
       {{ 'labels.buttons.Run Selected Jobs' | translate }}
@@ -135,7 +135,7 @@
             mat-icon-button
             class="errorlog"
             (click)="showErrorLog(job)"
-            *ngIf="!(job.lastRunHistory && job.lastRunHistory.status === 'success')"
+            *ngIf="jobWithError(job)"
             matTooltip="{{ 'labels.inputs.Error Log' | translate }}"
             matTooltipPosition="right"
           >
@@ -145,14 +145,14 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns" class="select-row" ngClass="{{ rowColor(row) }}"></tr>
     </table>
 
     <mat-paginator [pageSizeOptions]="[50, 100]" showFirstLastButtons></mat-paginator>
   </div>
 </div>
 
-<div class="container space-top layout-row gap-20percent">
+<div class="container space-top layout-row gap-10px">
   <button mat-raised-button color="primary" (click)="openRunSelectedJobsDialog()" [disabled]="!isAnyJobSelected()">
     <fa-icon icon="play" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Run Selected Jobs' | translate }}

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.scss

@@ -1,3 +1,8 @@
+.container {
+  min-width: 84rem;
+  width: 84rem;
+}
+
 table {
   width: 100%;
 
@@ -26,6 +31,10 @@ table {
   color: #ffa726;
 }
 
+.job-error {
+  background-color: #f7dbb7;
+}
+
 .suspend {
   background: #32cd32;
   color: #fff;

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts

@@ -126,11 +126,12 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
    * Initializes the data source, paginator and sorter for manage scheduler jobs table.
    */
   setJobs() {
-    this.systemService.getJobs().subscribe((jobData: any) => {
-      this.dataSource = new MatTableDataSource(jobData);
+    this.systemService.getJobs().subscribe((jobData: any[]) => {
+      const sortedData = jobData.sort((a, b) => b.active - a.active || this.sortByName(a, b));
+      this.dataSource = new MatTableDataSource(sortedData);
       this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
-      this.jobsCounter = jobData.length;
+      this.jobsCounter = sortedData.length;
       this.selection.clear();
       this.dataSource.sortingDataAccessor = (item, property) => {
         switch (property) {
@@ -149,6 +150,18 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
     });
   }
 
+  sortByName(a: any, b: any): number {
+    // Sort on name
+    if (a.displayName < b.displayName) {
+      return -1;
+    }
+    if (a.displayName > b.displayName) {
+      return 1;
+    }
+    // Both idential, return 0
+    return 0;
+  }
+
   getScheduler() {
     this.systemService.getScheduler().subscribe((schedulerData: any) => {
       this.schedulerData = schedulerData;
@@ -303,4 +316,15 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
       }
     });
   }
+
+  jobWithError(job: any): boolean {
+    return !(job.lastRunHistory && job.lastRunHistory.status === 'success');
+  }
+
+  rowColor(job: any): string {
+    if (this.jobWithError(job)) {
+      return 'job-error';
+    }
+    return '';
+  }
 }

src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.html

@@ -1,12 +1,12 @@
 <div class="container">
-  <div class="layout-row gap-20px">
+  <div class="layout-row m-b-10">
     <mat-form-field class="flex-fill">
       <mat-label>{{ 'labels.inputs.Filter By Version' | translate }}</mat-label>
       <input matInput (keyup)="applyFilter($event.target.value)" />
     </mat-form-field>
   </div>
 
-  <div class="mat-elevation-z8">
+  <div class="mat-elevation-z8 container">
     <table mat-table [dataSource]="dataSource" matSort>
       <ng-container matColumnDef="version">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Version' | translate }}</th>
@@ -72,7 +72,7 @@
 
     <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
 
-    <div class="layout-row layout-align-center gap-2percent layout-lt-md-column">
+    <div class="layout-row layout-align-center">
       <button type="button" color="primary" mat-raised-button [routerLink]="['../']">
         {{ 'labels.buttons.Back' | translate }}
       </button>

src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.scss

@@ -1,5 +1,9 @@
+.container {
+  padding-bottom: 15px;
+}
+
 table {
-  width: 100%;
+  width: 96%;
 
   .select-row:hover {
     cursor: pointer;

src/assets/styles/_colours.scss

@@ -131,3 +131,11 @@ $error-log: #ffa726;
 .fa-question {
   color: $status-approved;
 }
+
+.enabled {
+  color: #32cd32;
+}
+
+.disabled {
+  color: #f44366;
+}

src/assets/styles/_misc.scss

@@ -61,3 +61,14 @@ div {
   max-width: 400px !important;
   white-space: pre-line !important;
 }
+
+.loading {
+  position: absolute;
+  min-width: 100%;
+  width: 100px;
+  height: 12px;
+  background: linear-gradient(125deg, rgb(255 255 255), $status-approved, rgb(255 255 255));
+  animation:
+    grow 4s linear infinite,
+    move 4s linear infinite;
+}

src/main.scss

@@ -172,7 +172,7 @@
 }
 
 .flex-auto {
-  flex: 1 0 auto;
+  flex: 0.1 0 auto;
 }
 
 .flex-3-auto {