Revision completa de funcionalidades de interfaz

arreglos menores

34 files changed, 1339 insertions, 1236 deletions

diff --git a/admin/WebConsole3/frontend/package.json b/admin/WebConsole3/frontend/package.json
index a2f353f5..e38a4778 100644
--- a/admin/WebConsole3/frontend/package.json
+++ b/admin/WebConsole3/frontend/package.json
@@ -43,6 +43,7 @@
     "ng2-completer": "^2.0.8",
     "ng2-smart-table": "^1.4.0",
     "ng6-toastr-notifications": "^1.0.4",
+    "ngx-daterangepicker-material": "^2.1.3",
     "prismjs": "^1.15.0",
     "rxjs": "^6.4.0",
     "rxjs-compat": "^6.4.0",
diff --git a/admin/WebConsole3/frontend/src/app/admin-lte.conf.ts b/admin/WebConsole3/frontend/src/app/admin-lte.conf.ts
index dee043d7..84349677 100644
--- a/admin/WebConsole3/frontend/src/app/admin-lte.conf.ts
+++ b/admin/WebConsole3/frontend/src/app/admin-lte.conf.ts
@@ -41,8 +41,7 @@ export class AdminLteConf {
         {label: this.translate.instant('repositories'), route: 'app/repositories', iconClasses: 'fa fa-database'},
         {label: this.translate.instant('hardware'), route: 'app/hardware', iconClasses: 'fa fa-server'},
         {label: this.translate.instant('software'), route: 'app/software', iconClasses: 'fa fa-archive'},
-        {label: this.translate.instant('menus'), route: 'app/menus', iconClasses: 'fa fa-file-text-o',
-          pullRights: [{text: 'comming_soon', classes: 'label pull-right bg-green'}]},
+        {label: this.translate.instant('menus'), route: 'app/menus', iconClasses: 'fa fa-file-text-o'},
         {label: this.translate.instant('commands'), route: 'app/commands', iconClasses: 'fa fa-terminal'},
         {label: this.translate.instant('netboot_templates'), route: 'app/netboots', iconClasses: 'fa fa-book'},
       ]
diff --git a/admin/WebConsole3/frontend/src/app/app.component.html b/admin/WebConsole3/frontend/src/app/app.component.html
index d6c88664..9325fb62 100644
--- a/admin/WebConsole3/frontend/src/app/app.component.html
+++ b/admin/WebConsole3/frontend/src/app/app.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="!userIsLogged() && isCustomLayout else layoutEnabled">
+<ng-container *ngIf="!userIsLogged() else layoutEnabled">
   <app-login></app-login>
 </ng-container>
 <ng-template #layoutEnabled>
@@ -16,7 +16,7 @@
     </mk-layout-sidebar-right>
     <mk-layout-content>
       <router-outlet></router-outlet>
-      <div>
+      <div *ngIf="ogCommonService.showLoader == true">
         <div class="loader" *mkLoadingPage="{checkPendingHttp: true, checkPendingRoute: true}">
           <mk-circle></mk-circle>
         </div>
diff --git a/admin/WebConsole3/frontend/src/app/app.component.ts b/admin/WebConsole3/frontend/src/app/app.component.ts
index be41ce31..64d16e05 100644
--- a/admin/WebConsole3/frontend/src/app/app.component.ts
+++ b/admin/WebConsole3/frontend/src/app/app.component.ts
@@ -1,33 +1,43 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {LayoutService, LayoutState, LayoutStore} from 'angular-admin-lte';
 import {AuthModule, GlobunetUser} from 'globunet-angular/core';
 import {TranslateService} from '@ngx-translate/core';
 import {OgCommonService} from './service/og-common.service';
 import {AdminLteConf} from './admin-lte.conf';
+import {User, UserPreferences} from './model/user';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-public isCustomLayout: boolean;
+    public isCustomLayout: boolean;
 
-  constructor(private layoutService: LayoutService, private layoutStore: LayoutStore, private adminLteConfig: AdminLteConf, private authModule: AuthModule, private translate: TranslateService, private ogCommonService: OgCommonService) {
+    constructor(private layoutService: LayoutService, private layoutStore: LayoutStore, private adminLteConfig: AdminLteConf, private authModule: AuthModule, private translate: TranslateService, private ogCommonService: OgCommonService) {
 
-    translate.setDefaultLang('en');
-    translate.use('es');
-    this.ogCommonService.loadEngineConfig();
-  }
+        translate.setDefaultLang('en');
+        translate.use('es');
+    }
 
-  ngOnInit() {
-    this.layoutService.isCustomLayout.subscribe((value: boolean) => {
-      this.isCustomLayout = value;
-    });
-    this.layoutStore.setSidebarLeftMenu(this.adminLteConfig.get().sidebarLeftMenu);
-  }
+    ngOnInit() {
+        if (this.userIsLogged()) {
+            this.ogCommonService.loadEngineConfig().subscribe(
+                data => {
 
-  userIsLogged(): boolean {
-    return (this.authModule.getLoggedUser() && this.authModule.getLoggedUser().id !== 0);
-  }
+                    const user = <User>this.authModule.getLoggedUser();
+                    this.ogCommonService.loadUserConfig();
+
+                    this.layoutService.isCustomLayout.subscribe((value: boolean) => {
+                        this.isCustomLayout = value;
+                    });
+                    this.layoutStore.setSidebarLeftMenu(this.adminLteConfig.get().sidebarLeftMenu);
+                }
+            );
+        }
+    }
+
+    userIsLogged(): boolean {
+        return (this.authModule.getLoggedUser() && this.authModule.getLoggedUser().id !== 0);
+    }
 }
diff --git a/admin/WebConsole3/frontend/src/app/app.module.ts b/admin/WebConsole3/frontend/src/app/app.module.ts
index 34af2cb2..57a5b737 100644
--- a/admin/WebConsole3/frontend/src/app/app.module.ts
+++ b/admin/WebConsole3/frontend/src/app/app.module.ts
@@ -79,7 +79,7 @@ import {DeleteCacheImageCommandComponent} from './pages/command/delete-cache-ima
 import {FormatCommandComponent} from './pages/command/format-command/format-command.component';
 import {PartitionFormatCommandComponent} from './pages/command/partition-format-command/partition-format-command.component';
 import {ColResizableDirective} from './pages/common/directive/col-resizable.directive';
-
+import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 
 
 @NgModule({
@@ -189,7 +189,6 @@ import {ColResizableDirective} from './pages/common/directive/col-resizable.dire
     AppRoutingModule,
     CoreModule,
     DropdownModule,
-    LayoutModule.forRoot(AdminLteConf.staticConf),
     LoadingPageModule, CircleModule,
     BrowserAnimationsModule,
     HttpClientModule,
@@ -199,12 +198,15 @@ import {ColResizableDirective} from './pages/common/directive/col-resizable.dire
         provide: TranslateLoader,
         useFactory: createTranslateLoader,
         deps: [HttpClient]
-      }
+      },
+      isolate: false
     }),
+    LayoutModule.forRoot(AdminLteConf.staticConf),
     ToastrModule.forRoot(),
     Ng2SmartTableModule,
     FormsModule,
-    ChartsModule
+    ChartsModule,
+    NgxDaterangepickerMd.forRoot()
   ],
   providers: [
     {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptorService, multi: true}
diff --git a/admin/WebConsole3/frontend/src/app/core/sidebar-right-inner/sidebar-right-inner.component.html b/admin/WebConsole3/frontend/src/app/core/sidebar-right-inner/sidebar-right-inner.component.html
index 0b44bb98..b5493763 100644
--- a/admin/WebConsole3/frontend/src/app/core/sidebar-right-inner/sidebar-right-inner.component.html
+++ b/admin/WebConsole3/frontend/src/app/core/sidebar-right-inner/sidebar-right-inner.component.html
@@ -1,306 +1,302 @@
-<mk-tabs styleClass="sidebar-right-tabs-wrapper" navStyleClass="nav nav-tabs nav-justified control-sidebar-tabs">

-  <mk-tab>

-    <mk-tab-header>

-      <i class="fa fa-wrench"></i>

-    </mk-tab-header>

-    <mk-tab-content>

-      <div>

-        <h4 class="control-sidebar-heading">Layout Options</h4>

-        <div class="form-group">

-          <label class="control-sidebar-subheading"><input type="checkbox" (change)="onLayoutChange($event)" value="fixed" [checked]="layout === 'fixed'" class="pull-right"> Fixed layout</label>

-          <p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>

-        </div>

-        <div class="form-group">

-          <label class="control-sidebar-subheading"><input type="checkbox" (change)="onLayoutChange($event)" value="boxed" [checked]="layout === 'boxed'" class="pull-right"> Boxed Layout</label>

-          <p>Activate the boxed layout</p>

-        </div>

-        <div class="form-group">

-          <label class="control-sidebar-subheading"><input type="checkbox" [checked]="isSidebarLeftCollapsed" #sidebarLeftCollapsedCheckbox (click)="layoutStore.sidebarLeftCollapsed(sidebarLeftCollapsedCheckbox.checked)" class="pull-right"> Toggle Sidebar</label>

-          <p>Toggle the left sidebar's state (open or collapse)</p>

-        </div>

-        <div class="form-group">

-          <label class="control-sidebar-subheading"><input type="checkbox" [disabled]="isSidebarLeftExpandOnOver" [checked]="isSidebarLeftMini" #sidebarLeftMini (click)="layoutStore.sidebarLeftMini(sidebarLeftMini.checked)" class="pull-right"> Sidebar Left Mini</label>

-          <p>Let the sidebar left collapsed visible</p>

-        </div>

-        <div class="form-group">

-          <label class="control-sidebar-subheading"><input type="checkbox" [disabled]="!isSidebarLeftMini" [checked]="isSidebarLeftExpandOnOver && isSidebarLeftMini" #sidebarLeftExpandOnOverCheckbox (click)="layoutStore.sidebarLeftExpandOnOver(sidebarLeftExpandOnOverCheckbox.checked)" class="pull-right"> Sidebar Expand on Hover</label>

-          <p>Let the sidebar mini expand on hover</p>

-        </div>

-        <div class="form-group">

-          <label class="control-sidebar-subheading"><input type="checkbox" #sidebarRightOverContentCheckbox (click)="layoutStore.sidebarRightOverContent(!sidebarRightOverContentCheckbox.checked)" class="pull-right"> Toggle Right Sidebar Slide</label>

-          <p>Toggle between slide over content and push content effects</p>

-        </div>

-        <div class="form-group">

-          <label class="control-sidebar-subheading"><input type="checkbox" #sidebarRightSkinCheckbox (click)="changeSidebarRightSkin(sidebarRightSkinCheckbox.checked)" class="pull-right"> Toggle Right Sidebar Skin</label>

-          <p>Toggle between dark and light skins for the right sidebar</p>

-        </div>

-        <h4 class="control-sidebar-heading">Skins</h4>

-        <ul class="list-unstyled clearfix">

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'blue')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin">Blue</p>

-          </li>

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'black')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin">Black</p>

-          </li>

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'purple')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin">Purple</p>

-          </li>

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'green')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin">Green</p>

-          </li>

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'red')"  style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin">Red</p>

-          </li>

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'yellow')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin">Yellow</p>

-          </li>

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'blue-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin" style="font-size: 12px">Blue Light</p>

-          </li>

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'black-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin" style="font-size: 12px">Black Light</p>

-          </li>

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'purple-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin" style="font-size: 12px">Purple Light</p>

-          </li>

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'green-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin" style="font-size: 12px">Green Light</p>

-          </li>

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'red-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin" style="font-size: 12px">Red Light</p>

-          </li>

-          <li style="float:left; width: 33.33333%; padding: 5px;">

-            <a href="#" (click)="changeSkin($event, 'yellow-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">

-              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span></div>

-              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>

-            </a>

-            <p class="text-center no-margin" style="font-size: 12px;">Yellow Light</p>

-          </li>

-        </ul>

-      </div>

-    </mk-tab-content>

-  </mk-tab>

-  <mk-tab>

-    <mk-tab-header><i class="fa fa-home"></i></mk-tab-header>

-    <mk-tab-content>

-      <h3 class="control-sidebar-heading">Recent Activity</h3>

-      <ul class="control-sidebar-menu">

-        <li>

-          <a href="javascript:void(0)">

-            <i class="menu-icon fa fa-birthday-cake bg-red"></i>

-

-            <div class="menu-info">

-              <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

-

-              <p>Will be 23 on April 24th</p>

-            </div>

-          </a>

-        </li>

-        <li>

-          <a href="javascript:void(0)">

-            <i class="menu-icon fa fa-user bg-yellow"></i>

-

-            <div class="menu-info">

-              <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>

-

-              <p>New phone +1(800)555-1234</p>

-            </div>

-          </a>

-        </li>

-        <li>

-          <a href="javascript:void(0)">

-            <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

-

-            <div class="menu-info">

-              <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>

-

-              <p>nora@example.com</p>

-            </div>

-          </a>

-        </li>

-        <li>

-          <a href="javascript:void(0)">

-            <i class="menu-icon fa fa-file-code-o bg-green"></i>

-

-            <div class="menu-info">

-              <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>

-

-              <p>Execution time 5 seconds</p>

-            </div>

-          </a>

-        </li>

-      </ul>

-      <!-- /.control-sidebar-menu -->

-

-      <h3 class="control-sidebar-heading">Tasks Progress</h3>

-      <ul class="control-sidebar-menu">

-        <li>

-          <a href="javascript:void(0)">

-            <h4 class="control-sidebar-subheading">

-              Custom Template Design

-              <span class="label label-danger pull-right">70%</span>

-            </h4>

-

-            <div class="progress progress-xxs">

-              <div class="progress-bar progress-bar-danger" style="width: 70%"></div>

-            </div>

-          </a>

-        </li>

-        <li>

-          <a href="javascript:void(0)">

-            <h4 class="control-sidebar-subheading">

-              Update Resume

-              <span class="label label-success pull-right">95%</span>

-            </h4>

-

-            <div class="progress progress-xxs">

-              <div class="progress-bar progress-bar-success" style="width: 95%"></div>

-            </div>

-          </a>

-        </li>

-        <li>

-          <a href="javascript:void(0)">

-            <h4 class="control-sidebar-subheading">

-              Laravel Integration

-              <span class="label label-warning pull-right">50%</span>

-            </h4>

-

-            <div class="progress progress-xxs">

-              <div class="progress-bar progress-bar-warning" style="width: 50%"></div>

-            </div>

-          </a>

-        </li>

-        <li>

-          <a href="javascript:void(0)">

-            <h4 class="control-sidebar-subheading">

-              Back End Framework

-              <span class="label label-primary pull-right">68%</span>

-            </h4>

-

-            <div class="progress progress-xxs">

-              <div class="progress-bar progress-bar-primary" style="width: 68%"></div>

-            </div>

-          </a>

-        </li>

-      </ul>

-      <!-- /.control-sidebar-menu -->

-    </mk-tab-content>

-  </mk-tab>

-  <mk-tab>

-    <mk-tab-header><i class="fa fa-gears"></i></mk-tab-header>

-    <mk-tab-content>

-      <!-- Settings tab content -->

-      <div class="tab-pane" id="control-sidebar-settings-tab">

-        <form method="post">

-          <h3 class="control-sidebar-heading">General Settings</h3>

-

-          <div class="form-group">

-            <label class="control-sidebar-subheading">

-              Report panel usage

-              <input type="checkbox" class="pull-right" checked>

-            </label>

-

-            <p>

-              Some information about this general settings option

-            </p>

-          </div>

-          <!-- /.form-group -->

-

-          <div class="form-group">

-            <label class="control-sidebar-subheading">

-              Allow mail redirect

-              <input type="checkbox" class="pull-right" checked>

-            </label>

-

-            <p>

-              Other sets of options are available

-            </p>

-          </div>

-          <!-- /.form-group -->

-

-          <div class="form-group">

-            <label class="control-sidebar-subheading">

-              Expose author name in posts

-              <input type="checkbox" class="pull-right" checked>

-            </label>

-

-            <p>

-              Allow the user to show his name in blog posts

-            </p>

-          </div>

-          <!-- /.form-group -->

-

-          <h3 class="control-sidebar-heading">Chat Settings</h3>

-

-          <div class="form-group">

-            <label class="control-sidebar-subheading">

-              Show me as online

-              <input type="checkbox" class="pull-right" checked>

-            </label>

-          </div>

-          <!-- /.form-group -->

-

-          <div class="form-group">

-            <label class="control-sidebar-subheading">

-              Turn off notifications

-              <input type="checkbox" class="pull-right">

-            </label>

-          </div>

-          <!-- /.form-group -->

-

-          <div class="form-group">

-            <label class="control-sidebar-subheading">

-              Delete chat history

-              <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>

-            </label>

-          </div>

-          <!-- /.form-group -->

-        </form>

-      </div>

-    </mk-tab-content>

-  </mk-tab>

-</mk-tabs>

+<mk-tabs styleClass="sidebar-right-tabs-wrapper" navStyleClass="nav nav-tabs nav-justified control-sidebar-tabs">
+  <mk-tab>
+    <mk-tab-header>
+      <i class="fa fa-wrench"></i>
+    </mk-tab-header>
+    <mk-tab-content>
+      <div>
+        <h4 class="control-sidebar-heading" translate="layout_options"></h4>
+        <div class="form-group">
+          <label class="control-sidebar-subheading">
+            <input type="checkbox" (change)="onLayoutChange($event)" value="fixed" [checked]="layout === 'fixed'" class="pull-right"> <span translate="fixed_layout"></span></label>
+          <p translate="activate_fixed_layout"></p>
+        </div>
+        <div class="form-group">
+          <label class="control-sidebar-subheading">
+            <input type="checkbox" (change)="onLayoutChange($event)" value="boxed" [checked]="layout === 'boxed'" class="pull-right"> <span translate="boxed_layout"></span></label>
+          <p translate="activate_boxed_layout"></p>
+        </div>
+        <div class="form-group">
+          <label class="control-sidebar-subheading"><input type="checkbox" [disabled]="isSidebarLeftExpandOnOver" [checked]="isSidebarLeftMini" #sidebarLeftMini (click)="layoutStore.sidebarLeftMini(sidebarLeftMini.checked)" class="pull-right"> <span translate="sidebar_left_mini"></span></label>
+          <p translate="sidebar_left_collapsed_visible"></p>
+        </div>
+        <div class="form-group">
+          <label class="control-sidebar-subheading">
+            <input type="checkbox" [disabled]="!isSidebarLeftMini" [checked]="isSidebarLeftExpandOnOver && isSidebarLeftMini" #sidebarLeftExpandOnOverCheckbox (click)="layoutStore.sidebarLeftExpandOnOver(sidebarLeftExpandOnOverCheckbox.checked)" class="pull-right"><span translate="sidebar_left_expand_hover"></span></label>
+          <p translate="sidebar_left_mini_expand_hover"></p>
+        </div>
+        <div class="form-group">
+          <label class="control-sidebar-subheading">
+            <input type="checkbox" #sidebarRightSkinCheckbox (click)="changeSidebarRightSkin(sidebarRightSkinCheckbox.checked)" class="pull-right"> <span translate="toggle_right_sidebar_skin"></span></label>
+          <p translate="change_right_sidebar_color"></p>
+        </div>
+        <h4 class="control-sidebar-heading" translate="skins"></h4>
+        <ul class="list-unstyled clearfix">
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'blue')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin">Blue</p>
+          </li>
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'black')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin">Black</p>
+          </li>
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'purple')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin">Purple</p>
+          </li>
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'green')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin">Green</p>
+          </li>
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'red')"  style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin">Red</p>
+          </li>
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'yellow')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #222d32;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin">Yellow</p>
+          </li>
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'blue-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div><span style="display:block; width: 20%; float: left; height: 7px; background: #367fa9;"></span><span class="bg-light-blue" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin" style="font-size: 12px">Blue Light</p>
+          </li>
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'black-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div style="box-shadow: 0 0 2px rgba(0,0,0,0.1)" class="clearfix"><span style="display:block; width: 20%; float: left; height: 7px; background: #fefefe;"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fefefe;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin" style="font-size: 12px">Black Light</p>
+          </li>
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'purple-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-purple-active"></span><span class="bg-purple" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin" style="font-size: 12px">Purple Light</p>
+          </li>
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'green-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-green-active"></span><span class="bg-green" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin" style="font-size: 12px">Green Light</p>
+          </li>
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'red-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-red-active"></span><span class="bg-red" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin" style="font-size: 12px">Red Light</p>
+          </li>
+          <li style="float:left; width: 33.33333%; padding: 5px;">
+            <a href="#" (click)="changeSkin($event, 'yellow-light')" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+              <div><span style="display:block; width: 20%; float: left; height: 7px;" class="bg-yellow-active"></span><span class="bg-yellow" style="display:block; width: 80%; float: left; height: 7px;"></span></div>
+              <div><span style="display:block; width: 20%; float: left; height: 20px; background: #f9fafc;"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;"></span></div>
+            </a>
+            <p class="text-center no-margin" style="font-size: 12px;">Yellow Light</p>
+          </li>
+        </ul>
+      </div>
+    </mk-tab-content>
+  </mk-tab>
+  <mk-tab>
+    <mk-tab-header><i class="fa fa-home"></i></mk-tab-header>
+    <mk-tab-content>
+      <h3 class="control-sidebar-heading">Recent Activity</h3>
+      <ul class="control-sidebar-menu">
+        <li>
+          <a href="javascript:void(0)">
+            <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+
+            <div class="menu-info">
+              <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+
+              <p>Will be 23 on April 24th</p>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="javascript:void(0)">
+            <i class="menu-icon fa fa-user bg-yellow"></i>
+
+            <div class="menu-info">
+              <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+
+              <p>New phone +1(800)555-1234</p>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="javascript:void(0)">
+            <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+
+            <div class="menu-info">
+              <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+
+              <p>nora@example.com</p>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="javascript:void(0)">
+            <i class="menu-icon fa fa-file-code-o bg-green"></i>
+
+            <div class="menu-info">
+              <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+
+              <p>Execution time 5 seconds</p>
+            </div>
+          </a>
+        </li>
+      </ul>
+      <!-- /.control-sidebar-menu -->
+
+      <h3 class="control-sidebar-heading">Tasks Progress</h3>
+      <ul class="control-sidebar-menu">
+        <li>
+          <a href="javascript:void(0)">
+            <h4 class="control-sidebar-subheading">
+              Custom Template Design
+              <span class="label label-danger pull-right">70%</span>
+            </h4>
+
+            <div class="progress progress-xxs">
+              <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="javascript:void(0)">
+            <h4 class="control-sidebar-subheading">
+              Update Resume
+              <span class="label label-success pull-right">95%</span>
+            </h4>
+
+            <div class="progress progress-xxs">
+              <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="javascript:void(0)">
+            <h4 class="control-sidebar-subheading">
+              Laravel Integration
+              <span class="label label-warning pull-right">50%</span>
+            </h4>
+
+            <div class="progress progress-xxs">
+              <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+            </div>
+          </a>
+        </li>
+        <li>
+          <a href="javascript:void(0)">
+            <h4 class="control-sidebar-subheading">
+              Back End Framework
+              <span class="label label-primary pull-right">68%</span>
+            </h4>
+
+            <div class="progress progress-xxs">
+              <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+            </div>
+          </a>
+        </li>
+      </ul>
+      <!-- /.control-sidebar-menu -->
+    </mk-tab-content>
+  </mk-tab>
+  <mk-tab>
+    <mk-tab-header><i class="fa fa-gears"></i></mk-tab-header>
+    <mk-tab-content>
+      <!-- Settings tab content -->
+      <div class="tab-pane" id="control-sidebar-settings-tab">
+        <form method="post">
+          <h3 class="control-sidebar-heading">General Settings</h3>
+
+          <div class="form-group">
+            <label class="control-sidebar-subheading">
+              Report panel usage
+              <input type="checkbox" class="pull-right" checked>
+            </label>
+
+            <p>
+              Some information about this general settings option
+            </p>
+          </div>
+          <!-- /.form-group -->
+
+          <div class="form-group">
+            <label class="control-sidebar-subheading">
+              Allow mail redirect
+              <input type="checkbox" class="pull-right" checked>
+            </label>
+
+            <p>
+              Other sets of options are available
+            </p>
+          </div>
+          <!-- /.form-group -->
+
+          <div class="form-group">
+            <label class="control-sidebar-subheading">
+              Expose author name in posts
+              <input type="checkbox" class="pull-right" checked>
+            </label>
+
+            <p>
+              Allow the user to show his name in blog posts
+            </p>
+          </div>
+          <!-- /.form-group -->
+
+          <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+          <div class="form-group">
+            <label class="control-sidebar-subheading">
+              Show me as online
+              <input type="checkbox" class="pull-right" checked>
+            </label>
+          </div>
+          <!-- /.form-group -->
+
+          <div class="form-group">
+            <label class="control-sidebar-subheading">
+              Turn off notifications
+              <input type="checkbox" class="pull-right">
+            </label>
+          </div>
+          <!-- /.form-group -->
+
+          <div class="form-group">
+            <label class="control-sidebar-subheading">
+              Delete chat history
+              <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+            </label>
+          </div>
+          <!-- /.form-group -->
+        </form>
+      </div>
+    </mk-tab-content>
+  </mk-tab>
+</mk-tabs>
diff --git a/admin/WebConsole3/frontend/src/app/core/sidebar-right-inner/sidebar-right-inner.component.ts b/admin/WebConsole3/frontend/src/app/core/sidebar-right-inner/sidebar-right-inner.component.ts
index 9dce5813..b6955216 100644
--- a/admin/WebConsole3/frontend/src/app/core/sidebar-right-inner/sidebar-right-inner.component.ts
+++ b/admin/WebConsole3/frontend/src/app/core/sidebar-right-inner/sidebar-right-inner.component.ts
@@ -1,98 +1,116 @@
-import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';

-

-import {Subscriber} from 'rxjs';

-

-import {LayoutStore} from 'angular-admin-lte';

-

-@Component({

-  selector: 'app-sidebar-right-inner',

-  templateUrl: './sidebar-right-inner.component.html'

-})

-export class SidebarRightInnerComponent implements OnInit, OnDestroy {

-

-  public layout: string;

-  public isSidebarLeftCollapsed: boolean;

-  public isSidebarLeftExpandOnOver: boolean;

-  public isSidebarLeftMini: boolean;

-

-  private subscriptions = [];

-

-  constructor(

-    public layoutStore: LayoutStore,

-    private changeDetectorRef: ChangeDetectorRef

-  ) {}

-

-  /**

-   * [ngOnInit description]

-   * @method ngOnInit

-   */

-  ngOnInit() {

-    this.subscriptions.push(this.layoutStore.isSidebarLeftCollapsed.subscribe((value: boolean) => {

-      this.isSidebarLeftCollapsed = value;

-      this.changeDetectorRef.detectChanges();

-    }));

-    this.subscriptions.push(this.layoutStore.isSidebarLeftExpandOnOver.subscribe((value: boolean) => {

-      this.isSidebarLeftExpandOnOver = value;

-      this.changeDetectorRef.detectChanges();

-    }));

-    this.subscriptions.push(this.layoutStore.isSidebarLeftMini.subscribe((value: boolean) => {

-      this.isSidebarLeftMini = value;

-      this.changeDetectorRef.detectChanges();

-    }));

-  }

-

-  /**

-   * @method ngOnDestroy

-   */

-  ngOnDestroy() {

-    this.removeSubscriptions();

-  }

-

-  /**

-   * [removeListeners description]

-   * @method removeListeners

-   */

-  private removeSubscriptions(): void {

-    if (this.subscriptions) {

-      this.subscriptions.forEach((subscription: Subscriber<any>) => {

-        subscription.unsubscribe();

-      });

-    }

-    this.subscriptions = [];

-  }

-

-

-  /**

-   * [onLayoutChange description]

-   * @method onLayoutChange

-   * @param  {[type]}       event [description]

-   */

-  public onLayoutChange(event): void {

-    this.layout = event.target.checked ? event.target.getAttribute('value') : '';

-    this.layoutStore.setLayout(this.layout);

-  }

-

-  /**

-   * [changeSkin description]

-   * @method changeSkin

-   * @param  {[type]}   event [description]

-   * @param  {string}   color [description]

-   */

-  public changeSkin(event, color: string): void {

-    event.preventDefault();

-    this.layoutStore.setSkin(color);

-  }

-

-  /**

-   * [changeSidebarRightSkin description]

-   * @method changeSidebarRightSkin

-   * @param  {boolean}              value [description]

-   */

-  public changeSidebarRightSkin(value: boolean): void {

-    if (value) {

-      this.layoutStore.setSidebarRightSkin('light');

-    } else {

-      this.layoutStore.setSidebarRightSkin('dark');

-    }

-  }

-}

+import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
+
+import {Subscriber} from 'rxjs';
+
+import {LayoutStore} from 'angular-admin-lte';
+import {AuthModule} from 'globunet-angular/core';
+import {User, UserPreferences} from '../../model/user';
+import {OgCommonService} from '../../service/og-common.service';
+
+@Component({
+  selector: 'app-sidebar-right-inner',
+  templateUrl: './sidebar-right-inner.component.html'
+})
+export class SidebarRightInnerComponent implements OnInit, OnDestroy {
+
+  public layout: string;
+  public isSidebarLeftCollapsed: boolean;
+  public isSidebarLeftExpandOnOver: boolean;
+  public isSidebarLeftMini: boolean;
+
+  private subscriptions = [];
+  private preferences: UserPreferences;
+
+  constructor(
+    public layoutStore: LayoutStore,
+    private changeDetectorRef: ChangeDetectorRef,
+    private ogCommonService: OgCommonService
+  ) {
+    this.preferences = this.ogCommonService.loadUserConfig();
+  }
+
+  /**
+   * [ngOnInit description]
+   * @method ngOnInit
+   */
+  ngOnInit() {
+    this.subscriptions.push(this.layoutStore.isSidebarLeftCollapsed.subscribe((value: boolean) => {
+      this.isSidebarLeftCollapsed = value;
+      this.changeDetectorRef.detectChanges();
+    }));
+    this.subscriptions.push(this.layoutStore.isSidebarLeftExpandOnOver.subscribe((value: boolean) => {
+      this.isSidebarLeftExpandOnOver = value;
+      this.preferences.isSidebarLeftExpandOnOver = value;
+      this.ogCommonService.saveUserPreferences(this.preferences);
+      this.changeDetectorRef.detectChanges();
+    }));
+    this.subscriptions.push(this.layoutStore.isSidebarLeftMini.subscribe((value: boolean) => {
+      this.isSidebarLeftMini = value;
+      this.preferences.isSidebarLeftMini = value;
+      this.ogCommonService.saveUserPreferences(this.preferences);
+      this.changeDetectorRef.detectChanges();
+    }));
+  }
+
+  /**
+   * @method ngOnDestroy
+   */
+  ngOnDestroy() {
+    this.removeSubscriptions();
+  }
+
+  /**
+   * [removeListeners description]
+   * @method removeListeners
+   */
+  private removeSubscriptions(): void {
+    if (this.subscriptions) {
+      this.subscriptions.forEach((subscription: Subscriber<any>) => {
+        subscription.unsubscribe();
+      });
+    }
+    this.subscriptions = [];
+  }
+
+
+  /**
+   * [onLayoutChange description]
+   * @method onLayoutChange
+   * @param  {[type]}       event [description]
+   */
+  public onLayoutChange(event): void {
+    this.layout = event.target.checked ? event.target.getAttribute('value') : '';
+    this.preferences.layout = this.layout;
+    this.ogCommonService.saveUserPreferences(this.preferences);
+    this.layoutStore.setLayout(this.layout);
+  }
+
+  /**
+   * [changeSkin description]
+   * @method changeSkin
+   * @param  {[type]}   event [description]
+   * @param  {string}   color [description]
+   */
+  public changeSkin(event, color: string): void {
+    event.preventDefault();
+    this.preferences.theme = color;
+    this.ogCommonService.saveUserPreferences(this.preferences);
+    this.layoutStore.setSkin(color);
+  }
+
+  /**
+   * [changeSidebarRightSkin description]
+   * @method changeSidebarRightSkin
+   * @param  {boolean}              value [description]
+   */
+  public changeSidebarRightSkin(value: boolean): void {
+    if (value) {
+      this.layoutStore.setSidebarRightSkin('light');
+      this.preferences.sidebarRightSkin = 'light';
+    } else {
+      this.layoutStore.setSidebarRightSkin('dark');
+      this.preferences.sidebarRightSkin = 'dark';
+    }
+    this.ogCommonService.saveUserPreferences(this.preferences);
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/form-type/client.form-type.ts b/admin/WebConsole3/frontend/src/app/form-type/client.form-type.ts
index c082d264..a0c7f3e8 100644
--- a/admin/WebConsole3/frontend/src/app/form-type/client.form-type.ts
+++ b/admin/WebConsole3/frontend/src/app/form-type/client.form-type.ts
@@ -17,7 +17,7 @@ export class ClientFormType extends GlobunetFormType {
       label: 'name',
     };
     this.getField(form, 'hardwareProfile').options = {
-      label: 'name',
+      label: 'description',
     };
     this.getField(form, 'netboot').options = {
       label: 'name'
diff --git a/admin/WebConsole3/frontend/src/app/form-type/image.form-type.ts b/admin/WebConsole3/frontend/src/app/form-type/image.form-type.ts
index d3b6cc0f..5dc932ee 100644
--- a/admin/WebConsole3/frontend/src/app/form-type/image.form-type.ts
+++ b/admin/WebConsole3/frontend/src/app/form-type/image.form-type.ts
@@ -1,16 +1,17 @@
-import {GlobunetFormType} from './globunet.form-type';

-import {Image, PartitionInfo} from '../model/image';

-import {Repository} from '../model/repository';

-

-

-export class ImageFormType extends GlobunetFormType {

-  getForm() {

-    const form: any[] = GlobunetFormType.getForm(new Image());

-    this.setFieldType(form, 'description', 'textarea');

-    this.removeField(form, 'revision');

-    this.removeField(form, 'createdAt');

-    this.removeField(form, 'partitionInfo');

-    this.setFieldType(form, 'repository', 'select');

-    return form;

-  }

-}

+import {GlobunetFormType} from './globunet.form-type';
+import {Image, PartitionInfo} from '../model/image';
+import {Repository} from '../model/repository';
+
+
+export class ImageFormType extends GlobunetFormType {
+  getForm() {
+    const form: any[] = GlobunetFormType.getForm(new Image());
+    this.setFieldType(form, 'description', 'textarea');
+    this.setFieldType(form, 'comments', 'textarea');
+    this.removeField(form, 'revision');
+    this.removeField(form, 'createdAt');
+    this.removeField(form, 'partitionInfo');
+    this.setFieldType(form, 'repository', 'select');
+    return form;
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/model/user.ts b/admin/WebConsole3/frontend/src/app/model/user.ts
index 7039d89c..818820cf 100644
--- a/admin/WebConsole3/frontend/src/app/model/user.ts
+++ b/admin/WebConsole3/frontend/src/app/model/user.ts
@@ -4,13 +4,21 @@ export class UserPreferences {
     ous: {showGrid: boolean};
     theme: string;
     language: string;
+    layout: string;
+    isSidebarLeftExpandOnOver: boolean;
+    isSidebarLeftMini: boolean;
+    sidebarRightSkin: string;
 
     constructor() {
         this.ous = {
             showGrid: true
         };
-        this.theme = 'skin-blue';
+        this.theme = 'blue';
         this.language = 'es';
+        this.layout = '';
+        this.isSidebarLeftExpandOnOver =  false;
+        this.isSidebarLeftMini = true;
+        this.sidebarRightSkin = 'dark';
     }
 }
 
diff --git a/admin/WebConsole3/frontend/src/app/pages/command/create-image-command/create-image-command.component.ts b/admin/WebConsole3/frontend/src/app/pages/command/create-image-command/create-image-command.component.ts
index e97d20fa..e5d80502 100644
--- a/admin/WebConsole3/frontend/src/app/pages/command/create-image-command/create-image-command.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/command/create-image-command/create-image-command.component.ts
@@ -67,7 +67,7 @@ export class CreateImageCommandComponent implements OnInit {
     } else {
       // TODO - dar error?
       this.ogSweetAlert.error(this.translate.instant('opengnsys_error'), this.translate.instant('not_clients_selected'));
-      this.router.navigate(['app.ous']);
+      this.router.navigate(['/app/ous']);
     }
   }
 
@@ -90,7 +90,7 @@ export class CreateImageCommandComponent implements OnInit {
 
       let result = true;
       // Crear la imagen si no existe
-      if (!image) {
+      if (!image || image.id === 0) {
         newImage = true;
         // Comprobar que exista el repositorio, sino no podemos crear la nueva imagen
         if (!this.repositories) {
@@ -116,7 +116,6 @@ export class CreateImageCommandComponent implements OnInit {
           promises.push(this.imageService.create(image));
         } else {
           const imageCopy = Object.assign({}, image);
-          delete imageCopy.id;
           delete imageCopy.softwareProfile;
           promises.push(this.imageService.update(imageCopy));
         }
@@ -125,7 +124,7 @@ export class CreateImageCommandComponent implements OnInit {
         forkJoin(promises).subscribe(
             (response) => {
               this.toaster.pop({type: 'success', title: 'success', body: this.translate.instant('successfully_executed')});
-              this.router.navigate(['app.ous']);
+              this.router.navigate(['/app/ous']);
             },
             (error) => {
               this.toaster.pop({type: 'error', title: 'error', body: error});
diff --git a/admin/WebConsole3/frontend/src/app/pages/command/delete-cache-image-command/delete-cache-image-command.component.ts b/admin/WebConsole3/frontend/src/app/pages/command/delete-cache-image-command/delete-cache-image-command.component.ts
index fb238868..e0aeb988 100644
--- a/admin/WebConsole3/frontend/src/app/pages/command/delete-cache-image-command/delete-cache-image-command.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/command/delete-cache-image-command/delete-cache-image-command.component.ts
@@ -102,7 +102,7 @@ export class DeleteCacheImageCommandComponent implements OnInit {
         this.execution.script += '\n';
       }
     }
-    this.execution.script = this.execution.script.replace(/\"/g, '\\"').replace(/\$/g, '\\\$');
+    //this.execution.script = this.execution.script.replace(/\"/g, '\\"').replace(/\$/g, '\\\$');
     this.execution.type = 'RUN_SCRIPT';
     this.execution.sendConfig = true;
 
diff --git a/admin/WebConsole3/frontend/src/app/pages/common/directive/icheck.directive.css b/admin/WebConsole3/frontend/src/app/pages/common/directive/icheck.directive.css
index 509217c6..83b61696 100644
--- a/admin/WebConsole3/frontend/src/app/pages/common/directive/icheck.directive.css
+++ b/admin/WebConsole3/frontend/src/app/pages/common/directive/icheck.directive.css
@@ -34,6 +34,7 @@
 .checkmark.iradio {
   border-radius: 50%;
   background-color: white;
+  border-color: #999999;
 }
 
 /* On mouse-over, add a grey background color */
diff --git a/admin/WebConsole3/frontend/src/app/pages/common/og-options/og-ou-general-options/og-ou-general-options.component.ts b/admin/WebConsole3/frontend/src/app/pages/common/og-options/og-ou-general-options/og-ou-general-options.component.ts
index 7e1d2358..ad22de83 100644
--- a/admin/WebConsole3/frontend/src/app/pages/common/og-options/og-ou-general-options/og-ou-general-options.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/common/og-options/og-ou-general-options/og-ou-general-options.component.ts
@@ -4,6 +4,7 @@ import {forkJoin} from 'rxjs';
 import {OgSweetAlertService} from '../../../../service/og-sweet-alert.service';
 import {TranslateService} from '@ngx-translate/core';
 import {ToasterService} from '../../../../service/toaster.service';
+import {ClientService} from '../../../../api/client.service';
 
 @Component({
   selector: 'app-og-ou-general-options',
@@ -12,7 +13,7 @@ import {ToasterService} from '../../../../service/toaster.service';
 })
 export class OgOuGeneralOptionsComponent implements OnInit {
 
-  constructor(public ogCommonService: OgCommonService, private ogSweetAlert: OgSweetAlertService, private translate: TranslateService, private toaster: ToasterService) {
+  constructor(private clientService: ClientService,public ogCommonService: OgCommonService, private ogSweetAlert: OgSweetAlertService, private translate: TranslateService, private toaster: ToasterService) {
   }
 
   ngOnInit() {
@@ -35,7 +36,7 @@ export class OgOuGeneralOptionsComponent implements OnInit {
   }
 
   deleteSelectedClients() {
-
+  const self = this;
     this.ogSweetAlert.swal(
       {
         title: this.translate.instant('sure_to_delete') + '?',
@@ -47,25 +48,27 @@ export class OgOuGeneralOptionsComponent implements OnInit {
 
       }).then(
       function(response) {
-        if (response === true) {
-          const clientIds = Object.keys(this.config.selectedClients);
-          let cId = '';
+        if (response.value === true) {
+          const clientIds = Object.keys(self.ogCommonService.selectedClients);
+          let cId: any;
           const promises = [];
           for (let i = 0; i < clientIds.length; i++) {
             cId = clientIds[i];
-            promises.push(this.clientService.delete(cId));
+            promises.push(self.clientService.delete(cId));
           }
           forkJoin(promises).subscribe(
             (success) => {
+              /*
               for (let i = 0; i < clientIds.length; i++) {
                 cId = clientIds[i];
-                this.deleteClientFromOu(this.ous, this.config.selectedClients[cId]);
+                self.deleteClientFromOu(self.ous, self.ogCommonService.selectedClients[cId]);
               }
-              this.toaster.pop({type: 'success', title: 'success', body: 'Successfully deleted'});
-              this.config.selectedClients = [];
+              /**/
+              self.toaster.pop({type: 'success', title: 'success', body: 'Successfully deleted'});
+              self.ogCommonService.selectedClients = [];
             },
             (error) => {
-              this.toaster.pop({type: 'error', title: 'error', body: error});
+              self.toaster.pop({type: 'error', title: 'error', body: error});
             }
           );
         }
diff --git a/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.ts b/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.ts
index ef11a47f..7ca852ca 100644
--- a/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/dashboard/dashboard.component.ts
@@ -40,6 +40,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   chart: Chart;
 
   constructor(private authModule: AuthModule, private translate: TranslateService, private ogCommonService: OgCommonService, private statusService: StatusService) {
+    this.ogCommonService.showLoader = false;
     this.status = {
       datasets: [
         {
@@ -88,10 +89,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
       (config) => {
         this.timers = config.timers;
         if (this.timers.serverStatusInterval.object == null && this.timers.serverStatusInterval.tick > 0) {
+          this.timers.serverStatusInterval.object = 1;
           this.updateStatus();
-          this.timers.serverStatusInterval.object = setInterval(() => {
-            this.updateStatus();
-          }, this.timers.serverStatusInterval.tick);
         } else {
           this.updateStatus();
         }
@@ -104,8 +103,9 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this.ogCommonService.showLoader = true;
     if (this.timers && this.timers.serverStatusInterval) {
-      clearInterval(this.timers.serverStatusInterval.object);
+      this.timers.serverStatusInterval.object = null;
     }
   }
 
@@ -147,6 +147,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
           this.status.datasets[0].data.shift();
           this.status.datasets[1].data.shift();
         }
+
+        if(this.timers.serverStatusInterval.object !== null) {
+          const self = this;
+          setTimeout(() => {
+            self.updateStatus();
+          }, this.timers.serverStatusInterval.tick);
+        }
       },
       (error) => {
         alert(error);
diff --git a/admin/WebConsole3/frontend/src/app/pages/image/edit/image-edit.component.html b/admin/WebConsole3/frontend/src/app/pages/image/edit/image-edit.component.html
index aba4da40..f672ad0e 100644
--- a/admin/WebConsole3/frontend/src/app/pages/image/edit/image-edit.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/image/edit/image-edit.component.html
@@ -1,72 +1,72 @@
-<section class="content-header">

-  <h1 translate="new_image">

-  </h1>

-  <ol class="breadcrumb">

-    <li><a [routerLink]="'/app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>

-    <li><a [routerLink]="'/app/images'"><i class="fa fa-cubes"></i> {{'images'|translate}}</a></li>

-    <li class="active" translate="edit_image"></li>

-  </ol>

-</section>

-<section fixed-toolboxbar class="toolboxbar">

-  <div>

-    <div class="col-md-12">

-      <div class="box-tools pull-right">

-        <button class="btn btn-primary" translate="save" (click)="save()"></button>

-      </div>

-    </div>

-  </div>

-</section>

-<!-- Main content -->

-<section class="content">

-  <div class="row">

-    <div class="col-md-12">

-      <div class="box box-primary">

-        <div class="box-header with-border">

-        </div>

-        <div class="box-body">

-          <form role="form" gbn-auto-form name="Form" ng-submit="saveImage(Form)" form-options="formOptions" form-model="image">

-              <app-form-input [model]="image" [cols]="2" [formType]="form"></app-form-input>

-          </form>

-          <table class="table table-bordered" *ngIf="image.partitionInfo">

-            <tbody>

-            <tr>

-              <th translate="disk"></th>

-              <th translate="partition"></th>

-              <th translate="filesystem"></th>

-              <th translate="osName"></th>

-              <th translate="revision"></th>

-              <th translate="creation_date"></th>

-            </tr>

-            <tr>

-              <td>

-                <span ng-if="image.partitionInfo">{{image.partitionInfo.numDisk}}</span>

-                <span ng-if="!image.partitionInfo" translate="not_available"></span>

-              </td>

-              <td>

-                <span ng-if="image.partitionInfo">{{image.partitionInfo.numPartition}}</span>

-                <span ng-if="!image.partitionInfo" translate="not_available"></span>

-              </td>

-              <td>

-                <span ng-if="image.partitionInfo">{{image.partitionInfo.filesystem}} ({{image.partitionInfo.partitionCode}})</span>

-                <span ng-if="!image.partitionInfo" translate="not_available"></span>

-              </td>

-              <td>

-                <span ng-if="image.partitionInfo">{{image.partitionInfo.osName}}</span>

-                <span ng-if="!image.partitionInfo" translate="not_available"></span>

-              </td>

-              <td>

-                <span ng-if="image.revision" class="badge bg-green">{{image.revision}}</span>

-                <span ng-if="!image.revision" translate="not_available"></span>

-              </td>

-              <td>

-                <span ng-if="image.createdAt">{{image.createdAt | date: "DD/MM/YYYY HH:mm"}}</span>

-                <span ng-if="!image.createdAt" translate="not_available"></span>

-              </td>

-            </tr>

-            </tbody>

-          </table>

-        </div>

-      </div>

-    </div>

-  </div>

-</section>

+<section class="content-header">
+  <h1 translate="new_image">
+  </h1>
+  <ol class="breadcrumb">
+    <li><a [routerLink]="'/app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>
+    <li><a [routerLink]="'/app/images'"><i class="fa fa-cubes"></i> {{'images'|translate}}</a></li>
+    <li class="active" translate="edit_image"></li>
+  </ol>
+</section>
+<section fixed-toolboxbar class="toolboxbar">
+  <div>
+    <div class="col-md-12">
+      <div class="box-tools pull-right">
+        <button class="btn btn-primary" translate="save" (click)="save()"></button>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- Main content -->
+<section class="content">
+  <div class="row">
+    <div class="col-md-12">
+      <div class="box box-primary">
+        <div class="box-header with-border">
+        </div>
+        <div class="box-body">
+          <form role="form"  name="Form">
+              <app-form-input [model]="image" [cols]="1" [formType]="form"></app-form-input>
+          </form>
+          <table class="table table-bordered" *ngIf="image.partitionInfo">
+            <tbody>
+            <tr>
+              <th translate="disk"></th>
+              <th translate="partition"></th>
+              <th translate="filesystem"></th>
+              <th translate="osName"></th>
+              <th translate="revision"></th>
+              <th translate="creation_date"></th>
+            </tr>
+            <tr>
+              <td>
+                <span *ngIf="image.partitionInfo">{{image.partitionInfo.numDisk}}</span>
+                <span *ngIf="!image.partitionInfo" translate="not_available"></span>
+              </td>
+              <td>
+                <span *ngIf="image.partitionInfo">{{image.partitionInfo.numPartition}}</span>
+                <span *ngIf="!image.partitionInfo" translate="not_available"></span>
+              </td>
+              <td>
+                <span *ngIf="image.partitionInfo">{{image.partitionInfo.filesystem}} ({{image.partitionInfo.partitionCode}})</span>
+                <span *ngIf="!image.partitionInfo" translate="not_available"></span>
+              </td>
+              <td>
+                <span *ngIf="image.partitionInfo">{{image.partitionInfo.osName}}</span>
+                <span *ngIf="!image.partitionInfo" translate="not_available"></span>
+              </td>
+              <td>
+                <span *ngIf="image.revision" class="badge bg-green">{{image.revision}}</span>
+                <span *ngIf="!image.revision" translate="not_available"></span>
+              </td>
+              <td>
+                <span *ngIf="image.createdAt">{{image.createdAt | date: "DD/MM/YYYY HH:mm"}}</span>
+                <span *ngIf="!image.createdAt" translate="not_available"></span>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/admin/WebConsole3/frontend/src/app/pages/image/edit/image-edit.component.ts b/admin/WebConsole3/frontend/src/app/pages/image/edit/image-edit.component.ts
index 8bc33f44..0604caeb 100644
--- a/admin/WebConsole3/frontend/src/app/pages/image/edit/image-edit.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/image/edit/image-edit.component.ts
@@ -25,6 +25,10 @@ export class ImageEditComponent implements OnInit {
   // should be each tab's root Page
   constructor(private router: Router, private activatedRouter: ActivatedRoute, private imageService: ImageService, private repositoryService: RepositoryService, private translate: TranslateService, private toaster: ToasterService) {
     this.form = this.formType.getForm();
+    this.formType.getField(this.form, 'repository').options = {
+      items: [],
+      label: 'name'
+    };
   }
 
   ngOnInit(): void {
@@ -52,8 +56,7 @@ export class ImageEditComponent implements OnInit {
       data => {
         this.formType.getField(this.form, 'repository').options = {
           items: data,
-          label: 'name',
-          value: 'id'
+          label: 'name'
         };
       }
     );
diff --git a/admin/WebConsole3/frontend/src/app/pages/image/image.component.ts b/admin/WebConsole3/frontend/src/app/pages/image/image.component.ts
index 76629163..913e7a7f 100644
--- a/admin/WebConsole3/frontend/src/app/pages/image/image.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/image/image.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, NgZone, OnInit} from '@angular/core';
 
 import { ImageService } from 'src/app/api/image.service';
 import {Image, PartitionInfo} from 'src/app/model/image';
@@ -8,6 +8,7 @@ import {ToasterService} from '../../service/toaster.service';
 import {OgSweetAlertService} from '../../service/og-sweet-alert.service';
 import {Ng2TableActionComponent} from '../common/table-action/ng2-table-action.component';
 import {Router} from '@angular/router';
+import {LocalDataSource} from 'ng2-smart-table';
 
 @Component({
   selector: 'app-image',
@@ -15,7 +16,7 @@ import {Router} from '@angular/router';
   styleUrls: [ './image.component.scss' ]
 })
 export class ImageComponent implements OnInit {
-  images: Image[];
+  images: LocalDataSource;
   constants: any;
   removeFile = false;
   tableSettings: any;
@@ -23,6 +24,7 @@ export class ImageComponent implements OnInit {
   // this tells the tabs component which Pages
   // should be each tab's root Page
   constructor(private router: Router, public imageService: ImageService, private ogCommonService: OgCommonService, private translate: TranslateService, private toaster: ToasterService, private ogSweetAlert: OgSweetAlertService) {
+    this.images = new LocalDataSource([]);
     this.ogCommonService.loadEngineConfig().subscribe(
       data => {
         this.constants = data.constants;
@@ -33,7 +35,7 @@ export class ImageComponent implements OnInit {
   ngOnInit(): void {
     this.imageService.list().subscribe(
       data => {
-        this.images = data;
+        this.images.load( data);
       }
     );
     const self = this;
@@ -112,8 +114,7 @@ export class ImageComponent implements OnInit {
 	                    	<div class="checkbox clip-check check-primary checkbox-inline">\
 	                      		<input id="removeFile" icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="removeFile" />\
 	                      	</div>\
-	                      	<label for="removeFile" translate="remove_file">\
-	                    	</label>?\
+	                      	<label for="removeFile">' + this.translate.instant('remove_file') + '</label>?\
 	                  	</div>\
                   	</form>',
         type: 'warning',
@@ -131,10 +132,7 @@ export class ImageComponent implements OnInit {
             (response) => {
               self.toaster.pop({type: 'success', title: 'success', body: self.translate.instant('successfully_deleted')});
               // Buscar el elemento en el array y borrarlo
-              const index = self.images.indexOf(image);
-              if (index !== -1) {
-                self.images.splice(index, 1);
-              }
+              self.images.remove(image);
             },
             (error) => {
               self.toaster.pop({type: 'error', title: 'error', body: error});
diff --git a/admin/WebConsole3/frontend/src/app/pages/login/login.component.scss b/admin/WebConsole3/frontend/src/app/pages/login/login.component.scss
index fe31dbaa..94d82df3 100644
--- a/admin/WebConsole3/frontend/src/app/pages/login/login.component.scss
+++ b/admin/WebConsole3/frontend/src/app/pages/login/login.component.scss
@@ -1,5 +1,5 @@
-app-login {
-  .login-page {
+::ng-deep app-login {
+  ::ng-deep .login-page {
     overflow: hidden;
     min-height: 100%;
     position: absolute;
@@ -7,11 +7,11 @@ app-login {
     background: white;
   }
 
-  .login-box {
+  ::ng-deep .login-box {
     border: 1px solid;
   }
 
-  .login-logo {
+  ::ng-deep .login-logo {
     background: #d2d6de;
   }
 }
diff --git a/admin/WebConsole3/frontend/src/app/pages/login/login.component.ts b/admin/WebConsole3/frontend/src/app/pages/login/login.component.ts
index 60e5d962..c0141537 100644
--- a/admin/WebConsole3/frontend/src/app/pages/login/login.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/login/login.component.ts
@@ -2,6 +2,9 @@ import {Component, NgZone, ViewEncapsulation} from '@angular/core';
 import {AuthModule, GlobunetUser} from 'globunet-angular/core';
 import {Router} from '@angular/router';
 import {User} from '../../model/user';
+import {OgCommonService} from '../../service/og-common.service';
+import {LayoutService, LayoutStore} from 'angular-admin-lte';
+import {AdminLteConf} from '../../admin-lte.conf';
 
 
 @Component({
@@ -17,7 +20,7 @@ export class LoginComponent {
   };
   // this tells the tabs component which Pages
   // should be each tab's root Page
-  constructor(public authModule: AuthModule, private router: Router) {
+  constructor(public authModule: AuthModule, private router: Router, private ogCommonService: OgCommonService, private layoutStore: LayoutStore, private adminLteConfig: AdminLteConf) {
     this.user = new GlobunetUser();
     if (this.authModule.getLoggedUser(new User()).id !== 0) {
       this.goToDashboard();
@@ -27,6 +30,15 @@ export class LoginComponent {
   goToDashboard() {
     this.router.navigate(['/app/dashboard']).then(
       success => {
+        this.ogCommonService.loadEngineConfig().subscribe(
+            data => {
+
+              const user = <User>this.authModule.getLoggedUser();
+              this.ogCommonService.loadUserConfig();
+
+              this.layoutStore.setSidebarLeftMenu(this.adminLteConfig.get().sidebarLeftMenu);
+            }
+        );
         console.log(success);
       },
       error => {
diff --git a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.css b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.css
deleted file mode 100644
index a20b7026..00000000
--- a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.css
+++ /dev/null
@@ -1,4 +0,0 @@
-::ng-deep .dropdown-menu .icheck {

-  float: left;

-}

-

diff --git a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.scss b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.scss
new file mode 100644
index 00000000..eb6b4844
--- /dev/null
+++ b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.scss
@@ -0,0 +1,10 @@
+::ng-deep app-organizational-unit {
+  ::ng-deep .dropdown-menu .icheck {
+    float: left;
+  }
+
+  ::ng-deep .loader {
+    display: none !important;
+  }
+}
+
diff --git a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.ts b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.ts
index c020b7fc..e045dd40 100644
--- a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/organizational-unit.component.ts
@@ -16,7 +16,7 @@ import {environment} from '../../../environments/environment';
 @Component({
   selector: 'app-organizational-unit',
   templateUrl: './organizational-unit.component.html',
-  styleUrls: [ './organizational-unit.component.css' ]
+  styleUrls: [ './organizational-unit.component.scss' ]
 })
 export class OrganizationalUnitComponent implements OnInit, OnDestroy {
   public config: any;
@@ -46,12 +46,14 @@ export class OrganizationalUnitComponent implements OnInit, OnDestroy {
         clientstatus: []
       }
     };
+    this.ogCommonService.showLoader = false;
   }
 
   ngOnDestroy(): void {
     if (this.config.timers && this.config.timers.clientsStatusInterval) {
-      clearInterval(this.config.timers.clientsStatusInterval.object);
+      this.config.timers.clientsStatusInterval.object = null;
     }
+    this.ogCommonService.showLoader = true;
   }
 
   ngOnInit(): void {
@@ -75,11 +77,9 @@ export class OrganizationalUnitComponent implements OnInit, OnDestroy {
               this.ous = Array.isArray(response) ? response : [response];
               // La primera vez que entra
               if (this.config.timers.clientsStatusInterval.object == null && this.config.timers.clientsStatusInterval.tick > 0) {
+                this.config.timers.clientsStatusInterval.object = 1;
                 this.getClientStatus();
                 const self = this;
-                this.config.timers.clientsStatusInterval.object = window.setInterval(function() {
-                  self.getClientStatus();
-                }, this.config.timers.clientsStatusInterval.tick);
               } else {
                 this.getClientStatus();
               }
@@ -121,6 +121,12 @@ export class OrganizationalUnitComponent implements OnInit, OnDestroy {
         console.log(error);
       }
     );
+    const self = this;
+    if (this.config.timers.clientsStatusInterval.object !== null) {
+      window.setTimeout(function () {
+        self.getClientStatus();
+      }, this.config.timers.clientsStatusInterval.tick);
+    }
   }
 
   private getOuClientStatus(ou): Observable<any>[] {
diff --git a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.ts b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.ts
index e2f3d005..a292833d 100644
--- a/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/organizational-unit/ou-group/ou-group.component.ts
@@ -12,243 +12,251 @@ import {AuthModule, tr} from 'globunet-angular/core';
 import {Router} from '@angular/router';
 
 @Component({
-  selector: 'app-ou-group-component',
-  templateUrl: 'ou-group.component.html',
-  styleUrls: ['ou-group.component.css']
+    selector: 'app-ou-group-component',
+    templateUrl: 'ou-group.component.html',
+    styleUrls: ['ou-group.component.css']
 })
 export class OuGroupComponent {
     private _ou: OrganizationalUnit;
-  @Input() ous;
-  @Input()
-  set content(ou) {
-      this._ou = ou;
-      this._ou.clients.forEach((client) => {
-          if (this.ogCommonService.selectedClients[client.id]) {
-              client.selected = true;
-          }
-      });
-  }
-  get content() {
-      return this._ou;
-  }
-  @Input() clientStatus;
-  @Input() showGrid;
-  @Input() selectedStatus;
-
-  public config: any;
-
-  public moveChildren = false;
-
-  constructor(public ogCommonService: OgCommonService,
-              private organizationalUnitService: OrganizationalUnitService,
-              private clientService: ClientService,
-              private ogSweetAlert: OgSweetAlertService,
-              private toaster: ToasterService,
-              private translate: TranslateService,
-              private authModule: AuthModule,
-              private router: Router) {
-  }
-
-  doMove(ou) {
-    // Comprobar si hay que mover clientes o una ou a la ou pasada por parametro
-    if (this.ogCommonService.movingOu != null) {
-      /**/
-      const id = ou ? ou.id : null;
-      const obj = new OrganizationalUnit();
-      // @ts-ignore
-      obj.id = this.ogCommonService.movingOu.id;
-      // @ts-ignore
-      obj.parent = id;
-      this.organizationalUnitService.update(obj).subscribe(
-        (response) => {
-          this.toaster.pop({type: 'success', title: 'success', body: 'Successfully moved'});
-          this.deleteOuFromModel(this.ous, this.ogCommonService.movingOu);
-          if (ou) {
-            ou.children.push(this.ogCommonService.movingOu);
-          } else {
-            this.ous.push(this.ogCommonService.movingOu);
-          }
-          this.ogCommonService.movingOu = null;
-        },
-        (error) => {
-          this.toaster.pop({type: 'error', title: 'error', body: error});
-        }
-      );
-      /**/
-
-    } else if (this.ogCommonService.movingClients === true) {
-      const clientIds = Object.keys(this.ogCommonService.selectedClients);
-      let cId = '';
-      const promises = [];
-      for (let i = 0; i < clientIds.length; i++) {
-        cId = clientIds[i];
-        const client = new Client();
-        // @ts-ignore
-        client.id = cId;
-        client.organizationalUnit = ou.id;
-        promises.push(this.clientService.update(client));
-      }
-      forkJoin(promises).subscribe(
-        (response)  => {
-          for (let i = 0; i < clientIds.length; i++) {
-            cId = clientIds[i];
-            this.deleteClientFromOu(this.ous, this.ogCommonService.selectedClients[cId]);
-            ou.clients.push(this.ogCommonService.selectedClients[cId]);
-            this.ogCommonService.selectClient(this.ogCommonService.selectedClients[cId], ou);
-          }
-          this.toaster.pop({type: 'success', title: 'success', body: 'Successfully moved'});
-          this.ogCommonService.movingClients = false;
-        },
-        (error) => {
-          this.toaster.pop({type: 'error', title: 'error', body: error});
-          this.ogCommonService.movingClients = false;
-        }
-      );
-    }
-  }
-
-  deleteOuFromModel(ous, ou) {
-    let found = false;
-    const nOus = ous.length;
-    let index = 0;
-    while (!found && index < nOus) {
-      if (ous[index] === ou) {
-        found = true;
-        ous.splice(index, 1);
-      } else if (ous[index].children.length > 0) {
-        found = this.deleteOuFromModel(ous[index].children, ou);
-      }
-      index++;
-    }
-    return found;
-  }
-
-  deleteClientFromOu(ous, client) {
-    let found = false;
-    const nOus = ous.length;
-    let index = 0;
-    while (!found && index < nOus) {
-      if (ous[index].id === client.parent.id) {
-        found = true;
-        const cIndex = ous[index].clients.indexOf(client);
-        if (cIndex !== -1) {
-          ous[index].clients.splice(cIndex, 1);
-        }
-      } else if (ous[index].children.length > 0) {
-        found = this.deleteClientFromOu(ous[index].children, client);
-      }
-      index++;
+    @Input() ous;
+
+    @Input()
+    set content(ou) {
+        this._ou = ou;
+        this._ou.clients.forEach((client) => {
+            if (this.ogCommonService.selectedClients[client.id]) {
+                client.selected = true;
+            }
+        });
     }
-    return found;
-  }
-
-  selectForMove(content) {
-    this.ogCommonService.selectForMove(content);
-  }
-
-  selectOu(ou) {
-    // seleccionar/deseleccionar todos los elementos dentro de ou
-    for (let i = 0; i < ou.children.length; i++) {
-      ou.children[i].selected = ou.selected;
-      this.selectOu(ou.children[i]);
+
+    get content() {
+        return this._ou;
     }
-    for (let i = 0; i < ou.clients.length; i++) {
-      ou.clients[i].selected = ou.selected;
-      this.ogCommonService.selectClient(ou.clients[i], ou);
+
+    @Input() clientStatus;
+    @Input() showGrid;
+    @Input() selectedStatus;
+
+    public config: any;
+
+    public moveChildren = false;
+
+    constructor(public ogCommonService: OgCommonService,
+                private organizationalUnitService: OrganizationalUnitService,
+                private clientService: ClientService,
+                private ogSweetAlert: OgSweetAlertService,
+                private toaster: ToasterService,
+                private translate: TranslateService,
+                private authModule: AuthModule,
+                private router: Router) {
     }
-  }
-
-
-  deleteOu(ou) {
-    const self = this;
-    this.ogSweetAlert.swal(
-      {
-        title: this.translate.instant('sure_to_delete') + '?',
-        input: 'checkbox',
-        inputValue: 1,
-        inputPlaceholder:
-          this.translate.instant('move_children_to_parent'),
-        type: 'warning',
-        showCancelButton: true,
-        confirmButtonColor: '#DD6B55',
-        confirmButtonText: this.translate.instant('yes_delete')
-      }).then(
-      function(answer) {
-        if (!answer.dismiss) {
-          const promises = [];
-
-          new Observable((observer) => {
-            // Se eligió mover los clientes
-            if (answer.value === 1) {
-              // Obtener la ou para saber el id de su padre
-                // @ts-ignore
-                self.organizationalUnitService.read(ou.id + '?parent= 1').subscribe(
+
+    doMove(ou) {
+        // Comprobar si hay que mover clientes o una ou a la ou pasada por parametro
+        if (this.ogCommonService.movingOu != null) {
+            /**/
+            const id = ou ? ou.id : null;
+            const obj = new OrganizationalUnit();
+            // @ts-ignore
+            obj.id = this.ogCommonService.movingOu.id;
+            // @ts-ignore
+            obj.parent = id;
+            this.organizationalUnitService.update(obj).subscribe(
                 (response) => {
-                  // Mover todos los hijos al nivel superior de la ou actual si tiene un nivel superior, sino no será posible realizar la acción
-                    if (response.parent && response.parent.id || ou.clients.length === 0) {
-                        const parentId = response.parent ? response.parent.id : null;
-                        for (let i = 0; i < ou.children.length; i++) {
-                            ou.children[i].parent = parentId;
-                            // @ts-ignore
-                            promises.push(self.organizationalUnitService.update({id: ou.children[i].id, parent: parentId}));
-                        }
-                        ou.clients = ou.clients || [];
-                        for (let i = 0; i < ou.clients.length; i++) {
-                            ou.clients[i].organizationalUnit = parentId;
-                            // @ts-ignore
-                            promises.push(self.clientService.update({id: ou.clients[i].id, organizationalUnit: parentId}));
-                        }
-                        forkJoin(promises).subscribe(
-                            (success) => {
-                                observer.next(true);
-                            },
-                            (error) => {
-                                observer.error(error);
-                            }
-                        );
+                    this.toaster.pop({type: 'success', title: 'success', body: 'Successfully moved'});
+                    this.deleteOuFromModel(this.ous, this.ogCommonService.movingOu);
+                    if (ou) {
+                        ou.children.push(this.ogCommonService.movingOu);
                     } else {
-                        observer.error(self.translate.instant(tr('SUPERIOR_LEVEL_NOT_EXIST_CHILDREN_NOT_MOVED')));
+                        this.ous.push(this.ogCommonService.movingOu);
                     }
+                    this.ogCommonService.movingOu = null;
+                },
+                (error) => {
+                    this.toaster.pop({type: 'error', title: 'error', body: error});
+                }
+            );
+            /**/
 
+        } else if (this.ogCommonService.movingClients === true) {
+            const clientIds = Object.keys(this.ogCommonService.selectedClients);
+            let cId = '';
+            const promises = [];
+            for (let i = 0; i < clientIds.length; i++) {
+                cId = clientIds[i];
+                const client = new Client();
+                // @ts-ignore
+                client.id = cId;
+                client.organizationalUnit = ou.id;
+                promises.push(this.clientService.update(client));
+            }
+            forkJoin(promises).subscribe(
+                (response) => {
+                    for (let i = 0; i < clientIds.length; i++) {
+                        cId = clientIds[i];
+                        this.deleteClientFromOu(this.ous, this.ogCommonService.selectedClients[cId]);
+                        ou.clients.push(this.ogCommonService.selectedClients[cId]);
+                        this.ogCommonService.selectClient(this.ogCommonService.selectedClients[cId], ou);
+                    }
+                    this.toaster.pop({type: 'success', title: 'success', body: 'Successfully moved'});
+                    this.ogCommonService.movingClients = false;
                 },
                 (error) => {
-                  observer.error(error);
+                    this.toaster.pop({type: 'error', title: 'error', body: error});
+                    this.ogCommonService.movingClients = false;
                 }
-              );
-            } else {
-              observer.next(true);
+            );
+        }
+    }
+
+    deleteOuFromModel(ous, ou) {
+        let found = false;
+        const nOus = ous.length;
+        let index = 0;
+        while (!found && index < nOus) {
+            if (ous[index] === ou) {
+                found = true;
+                ous.splice(index, 1);
+            } else if (ous[index].children.length > 0) {
+                found = this.deleteOuFromModel(ous[index].children, ou);
             }
-          }).subscribe(
-            (response) => {
-                self.organizationalUnitService.delete(ou.id).subscribe(
-                (success) => {
-                    /**
-                        // Si la unidad organizativa es un nivel superior, se recarga la lista y se borra la unidad organizativa del usuario
-                        if (ou.parent == null) {
+            index++;
+        }
+        return found;
+    }
+
+    deleteClientFromOu(ous, client) {
+        let found = false;
+        const nOus = ous.length;
+        let index = 0;
+        while (!found && index < nOus) {
+            if (ous[index].id === client.parent.id) {
+                found = true;
+                const cIndex = ous[index].clients.indexOf(client);
+                if (cIndex !== -1) {
+                    ous[index].clients.splice(cIndex, 1);
+                }
+            } else if (ous[index].children.length > 0) {
+                found = this.deleteClientFromOu(ous[index].children, client);
+            }
+            index++;
+        }
+        return found;
+    }
+
+    selectForMove(content) {
+        this.ogCommonService.selectForMove(content);
+    }
+
+    selectOu(ou) {
+        // seleccionar/deseleccionar todos los elementos dentro de ou
+        for (let i = 0; i < ou.children.length; i++) {
+            ou.children[i].selected = ou.selected;
+            this.selectOu(ou.children[i]);
+        }
+        for (let i = 0; i < ou.clients.length; i++) {
+            ou.clients[i].selected = ou.selected;
+            this.ogCommonService.selectClient(ou.clients[i], ou);
+        }
+    }
+
+
+    deleteOu(ou) {
+        const self = this;
+        this.ogSweetAlert.swal(
+            {
+                title: this.translate.instant('sure_to_delete') + '?',
+                input: 'checkbox',
+                inputValue: 1,
+                inputPlaceholder:
+                    this.translate.instant('move_children_to_parent'),
+                type: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#DD6B55',
+                confirmButtonText: this.translate.instant('yes_delete')
+            }).then(
+            function (answer) {
+                if (!answer.dismiss) {
+                    const promises = [];
+
+                    new Observable((observer) => {
+                        // Se eligió mover los clientes
+                        if (answer.value === 1) {
+                            // Obtener la ou para saber el id de su padre
+                            // @ts-ignore
+                            self.organizationalUnitService.read(ou.id + '?parent= 1').subscribe(
+                                (response) => {
+                                    // Mover todos los hijos al nivel superior de la ou actual si tiene un nivel superior, sino no será posible realizar la acción
+                                    if (response.parent && response.parent.id || ou.clients.length === 0) {
+                                        const parentId = response.parent ? response.parent.id : null;
+                                        for (let i = 0; i < ou.children.length; i++) {
+                                            ou.children[i].parent = parentId;
+                                            // @ts-ignore
+                                            promises.push(self.organizationalUnitService.update({id: ou.children[i].id, parent: parentId}));
+                                        }
+                                        ou.clients = ou.clients || [];
+                                        for (let i = 0; i < ou.clients.length; i++) {
+                                            ou.clients[i].organizationalUnit = parentId;
+                                            // @ts-ignore
+                                            promises.push(self.clientService.update({id: ou.clients[i].id, organizationalUnit: parentId}));
+                                        }
+                                        if (promises.length > 0) {
+                                            forkJoin(promises).subscribe(
+                                                (success) => {
+                                                    observer.next(true);
+                                                },
+                                                (error) => {
+                                                    observer.error(error);
+                                                }
+                                            );
+                                        } else {
+                                            observer.next(true);
+                                        }
+
+                                    } else {
+                                        observer.error(self.translate.instant(tr('SUPERIOR_LEVEL_NOT_EXIST_CHILDREN_NOT_MOVED')));
+                                    }
+
+                                },
+                                (error) => {
+                                    observer.error(error);
+                                }
+                            );
+                        } else {
+                            observer.next(true);
+                        }
+                    }).subscribe(
+                        (response) => {
+                            self.organizationalUnitService.delete(ou.id).subscribe(
+                                (success) => {
+                                    /**
+                                     // Si la unidad organizativa es un nivel superior, se recarga la lista y se borra la unidad organizativa del usuario
+                                     if (ou.parent == null) {
                             delete self.config.ous;
                             self.authModule.getLoggedUser().ou = null;
                         }
-                    /**/
-                    window.setTimeout(function() {
-                        self.deleteOuFromModel(self.ous, self.content);
-                        self.toaster.pop({type: 'success', title: 'success', body: 'Successfully deleted'});
-                    }, 0);
+                                     /**/
+                                    window.setTimeout(function () {
+                                        self.deleteOuFromModel(self.ous, self.content);
+                                        self.toaster.pop({type: 'success', title: 'success', body: 'Successfully deleted'});
+                                    }, 0);
 
-                },
-                (error) => {
-                    self.toaster.pop({type: 'error', title: 'error', body: error});
+                                },
+                                (error) => {
+                                    self.toaster.pop({type: 'error', title: 'error', body: error});
+                                }
+                            );
+                        },
+                        (error) => {
+                            self.toaster.pop({type: 'error', title: 'error', body: error});
+                        }
+                    );
                 }
-              );
             },
-            (error) => {
-                self.toaster.pop({type: 'error', title: 'error', body: error});
+            function (cancel) {
             }
-          );
-        }
-      },
-      function(cancel) {
-      }
-    );
+        );
 
-  }
+    }
 }
diff --git a/admin/WebConsole3/frontend/src/app/pages/profile/profile.component.ts b/admin/WebConsole3/frontend/src/app/pages/profile/profile.component.ts
index da6859c2..fce9fd46 100644
--- a/admin/WebConsole3/frontend/src/app/pages/profile/profile.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/profile/profile.component.ts
@@ -46,7 +46,7 @@ export class ProfileComponent implements OnInit {
   }
 
    save() {
-    this.ogCommonService.saveUserPreferences();
+    this.ogCommonService.saveUserPreferences(this.user.preferences);
     this.toaster.pop({type: 'success', title: 'success', body: this.translate.instant('successfully_saved')});
   }
 
diff --git a/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.html b/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.html
index 39b2e9cc..d1ab4a3f 100644
--- a/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.html
+++ b/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.html
@@ -1,120 +1,120 @@
-<div ui-view>

-  <section class="content-header">

-    <h1 translate="traces">

-    </h1>

-    <ol class="breadcrumb">

-      <li><a [routerLink]="'app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>

-      <li class="active" translate="traces"></li>

-    </ol>

-  </section>

-  <section fixed-toolboxbar class="toolboxbar">

-    <div >

-      <div class="col-md-12">

-        <div class="input-group">

-          <input type="text" name="q" class="form-control" placeholder="Search..." [(ngModel)]="filters.searchText">

-          <span class="input-group-btn">

-		            <button type="button" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>

-		            </button>

-		          </span>

-        </div>

-      </div>

-      <div class="col-md-12" style="margin-top: 5px;margin-bottom: 5px;">

-        <div class="box-tools pull-left row traces-filters">

-          <mk-dropdown class="btn-group col-md-1">

-            <mk-dropdown-toggle>

-              <span translate="status_filter"></span><span class="caret"></span>

-            </mk-dropdown-toggle>

-            <mk-dropdown-menu>

-              <li role="presentation" *ngFor="let status of filters.status | keyvalue">

-                <label role="menuitem">

-                  {{status.value.name|translate}}

-                </label>

-                <input icheck name="{{status.value.name}}" checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="status.value.selected" />

-              </li>

-            </mk-dropdown-menu>

-          </mk-dropdown>

-          <mk-dropdown class="btn-group col-md-1">

-            <mk-dropdown-toggle>

-              <span translate="finished_status"></span><span class="caret"></span>

-            </mk-dropdown-toggle>

-            <mk-dropdown-menu >

-              <li role="presentation" *ngFor="let finishedStatus of filters.finishedStatus | keyvalue">

-                <label role="menuitem">

-                  {{finishedStatus.value.name|translate}}

-                </label>

-                <input icheck name="{{finishedStatus.value.name}}" checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="finishedStatus.value.selected" />

-

-              </li>

-            </mk-dropdown-menu>

-          </mk-dropdown>

-          <div class="form-group col-md-10">

-            <div class="input-group">

-              <div class="input-group-addon">

-                <i class="fa fa-clock-o"></i>

-              </div>

-              <input date-range-picker placeholder="{{'executed_at_range'|translate}}" type="text" class="form-control pull-right" [(ngModel)]="filters.dateRange" options="datePickerOptions">

-            </div>

-            <!-- /.input group -->

-          </div>

-        </div>

-        <div class="box-tools pull-right">

-          <button class="btn btn-default " [disabled]="selection.length < 1" translate="relaunch" [routerLink]="relaunchTraces()"></button>

-          <button class="btn btn-danger " [disabled]="selection.length < 1" translate="delete" (click)="deleteTraces()"></button>

-        </div>

-      </div>

-    </div>

-  </section>

-  <section class="content">

-    <div class="row">

-      <table class="table table-hover">

-        <tbody>

-        <tr>

-          <th>

-            <div class="checkbox clip-check check-primary checkbox-inline" style="margin-top: 0">

-              <input name="format" icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="selectAll" (change)="selectAllTraces()"/>

-            </div>

-            <span translate="select"></span>

-          </th>

-          <th translate="command"></th>

-          <th translate="client"></th>

-          <th translate="executed_at"></th>

-          <th translate="finished_at"></th>

-          <th translate="status"></th>

-        </tr>

-        <tr *ngFor="let trace of filteredTraces(); let index = index" class="{{ index%2 == 0 ?'odd':'even'}}">

-          <td>

-            <div class="checkbox clip-check check-primary checkbox-inline" style="margin-top: 0">

-              <input name="format" icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" value="true" [(ngModel)]="trace.selected" (change)="selectTrace(trace)"/>

-            </div>

-          </td>

-          <td>

-            <a href="javascript:void(0)" (click)="(showInfo == 'script_'+trace.id)?showInfo='':(showInfo = 'script_'+trace.id)">{{trace.commandType|translate}}</a>

-            <div *ngIf="showInfo == 'script_'+trace.id" class="og-floating-script">

-              <pre [innerHTML]="trace.script | ogCommands"></pre>

-            </div>

-          </td>

-          <td>

-            {{trace.client.name}}

-            <br>

-            ({{trace.client.ip}})

-          </td>

-          <td>

-            {{trace.executedAt | date: "dd/MM/yyy HH:mm"}}

-          </td>

-          <td>

-            {{trace.finishedAt | date: "dd/MM/yy HH:mm"}}

-          </td>

-          <td>

-            <a href="javascript:void(0)" (click)="(showInfo == 'output_'+trace.id)?showInfo='':(showInfo = 'output_'+trace.id)">

-              <span class="fa" class="fa {{getTraceCssClass(trace)}}"></span>

-            </a>

-            <div *ngIf="showInfo == 'output_'+trace.id" class="og-floating-script right">

-              <pre [innerHTML]="'Status: '+trace.status+'\n'+ (trace.status == 0?trace.output:trace.error)"></pre>

-            </div>

-          </td>

-        </tr>

-        </tbody>

-      </table>

-    </div>

-  </section>

-</div>

+<div ui-view>
+  <section class="content-header">
+    <h1 translate="traces">
+    </h1>
+    <ol class="breadcrumb">
+      <li><a [routerLink]="'app/dashboard'"><i class="fa fa-dashboard"></i> {{'dashboard'|translate}}</a></li>
+      <li class="active" translate="traces"></li>
+    </ol>
+  </section>
+  <section fixed-toolboxbar class="toolboxbar">
+    <div >
+      <div class="col-md-12">
+        <div class="input-group">
+          <input type="text" name="q" class="form-control" placeholder="Search..." [(ngModel)]="filters.searchText">
+          <span class="input-group-btn">
+            <button type="button" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
+            </button>
+          </span>
+        </div>
+      </div>
+      <div class="col-md-12" style="margin-top: 5px;margin-bottom: 5px;">
+        <div class="box-tools pull-left row traces-filters">
+          <mk-dropdown class="btn-group col-md-1">
+            <mk-dropdown-toggle>
+              <span translate="status_filter"></span><span class="caret"></span>
+            </mk-dropdown-toggle>
+            <mk-dropdown-menu>
+              <li role="presentation" *ngFor="let status of filters.status | keyvalue">
+                <label role="menuitem">
+                  {{status.value.name|translate}}
+                </label>
+                <input icheck name="{{status.value.name}}" checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="status.value.selected" />
+              </li>
+            </mk-dropdown-menu>
+          </mk-dropdown>
+          <mk-dropdown class="btn-group col-md-1">
+            <mk-dropdown-toggle>
+              <span translate="finished_status"></span><span class="caret"></span>
+            </mk-dropdown-toggle>
+            <mk-dropdown-menu >
+              <li role="presentation" *ngFor="let finishedStatus of filters.finishedStatus | keyvalue">
+                <label role="menuitem">
+                  {{finishedStatus.value.name|translate}}
+                </label>
+                <input icheck name="{{finishedStatus.value.name}}" checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="finishedStatus.value.selected" />
+
+              </li>
+            </mk-dropdown-menu>
+          </mk-dropdown>
+          <div class="form-group col-md-10">
+            <div class="input-group">
+              <div class="input-group-addon">
+                <i class="fa fa-clock-o"></i>
+              </div>
+              <input ngxDaterangepickerMd placeholder="{{'executed_at_range'|translate}}" type="text" class="form-control pull-right" [locale]="{applyLabel: 'ok', format: 'DD/MM/YYYY'}" [(ngModel)]="filters.dateRange" (datesUpdated)="updateTraces()" name="daterange" options="datePickerOptions">
+            </div>
+            <!-- /.input group -->
+          </div>
+        </div>
+        <div class="box-tools pull-right">
+          <button class="btn btn-default " [disabled]="selection.length < 1" translate="relaunch" [routerLink]="relaunchTraces()"></button>
+          <button class="btn btn-danger " [disabled]="selection.length < 1" translate="delete" (click)="deleteTraces()"></button>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="content">
+    <div class="row">
+      <table class="table table-hover">
+        <tbody>
+        <tr>
+          <th>
+            <div class="checkbox clip-check check-primary checkbox-inline" style="margin-top: 0">
+              <input name="format" icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" [(ngModel)]="selectAll" (change)="selectAllTraces()"/>
+            </div>
+            <span translate="select"></span>
+          </th>
+          <th translate="command"></th>
+          <th translate="client"></th>
+          <th translate="executed_at"></th>
+          <th translate="finished_at"></th>
+          <th translate="status"></th>
+        </tr>
+        <tr *ngFor="let trace of filteredTraces(); let index = index" class="{{ index%2 == 0 ?'odd':'even'}}">
+          <td>
+            <div class="checkbox clip-check check-primary checkbox-inline" style="margin-top: 0">
+              <input name="format" icheck checkbox-class="icheckbox_square-blue" radio-class="iradio_square-blue" type="checkbox" class="selection-checkbox" value="true" [(ngModel)]="trace.selected" (change)="selectTrace(trace)"/>
+            </div>
+          </td>
+          <td>
+            <a href="javascript:void(0)" (click)="(showInfo == 'script_'+trace.id)?showInfo='':(showInfo = 'script_'+trace.id)">{{trace.commandType|translate}}</a>
+            <div *ngIf="showInfo == 'script_'+trace.id" class="og-floating-script">
+              <pre [innerHTML]="trace.script | ogCommands"></pre>
+            </div>
+          </td>
+          <td>
+            {{trace.client.name}}
+            <br>
+            ({{trace.client.ip}})
+          </td>
+          <td>
+            {{trace.executedAt | date: "dd/MM/yyy HH:mm"}}
+          </td>
+          <td>
+            {{trace.finishedAt | date: "dd/MM/yy HH:mm"}}
+          </td>
+          <td>
+            <a href="javascript:void(0)" (click)="(showInfo == 'output_'+trace.id)?showInfo='':(showInfo = 'output_'+trace.id)">
+              <span class="fa" class="fa {{getTraceCssClass(trace)}}"></span>
+            </a>
+            <div *ngIf="showInfo == 'output_'+trace.id" class="og-floating-script right">
+              <pre [innerHTML]="'Status: '+trace.status+'\n'+ (trace.status == 0?trace.output:trace.error)"></pre>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</div>
diff --git a/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.scss b/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.scss
index a4e91065..d97718d0 100644
--- a/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.scss
+++ b/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.scss
@@ -1,3 +1,5 @@
-trace {

-

-}

+::ng-deep app-trace {
+  ::ng-deep .dropdown-menu .icheck {
+    float: left;
+  }
+}
diff --git a/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.ts b/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.ts
index 750e5096..568386e1 100644
--- a/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.ts
+++ b/admin/WebConsole3/frontend/src/app/pages/trace/trace.component.ts
@@ -45,8 +45,8 @@ export class TraceComponent implements OnInit, OnDestroy {
       },
     },
     dateRange: {
-      startDate: null,
-      endDate: null
+      startDate: moment(),
+      endDate: moment()
     }
   };
   config: { constants: any; timers: any; };
@@ -63,12 +63,14 @@ export class TraceComponent implements OnInit, OnDestroy {
               private ogSweetAlert: OgSweetAlertService,
               private toaster: ToasterService,
               private translate: TranslateService) {
+    this.ogCommonService.showLoader = false;
   }
 
   ngOnDestroy() {
     if (this.config.timers && this.config.timers.executionsInterval) {
-      clearInterval(this.config.timers.executionsInterval.object);
+      this.config.timers.executionsInterval.object = null;
     }
+    this.ogCommonService.showLoader = true;
   }
 
 ngOnInit(): void {
@@ -78,9 +80,7 @@ ngOnInit(): void {
       this.config = data;
 
       if (this.config.timers.executionsInterval.object === null && this.config.timers.executionsInterval.tick > 0) {
-        this.config.timers.executionsInterval.object = setInterval(function() {
-          self.getExecutionTasks();
-        }, this.config.timers.executionsInterval.tick);
+        this.config.timers.serverStatusInterval.object = 1;
       }
 
       this.datePickerOptions = {
@@ -123,14 +123,7 @@ ngOnInit(): void {
         timePicker24Hour: true,
         format: 'DD/MM/YYYY HH:mm'
       };
-      this.traceService.list().subscribe(
-        (response) => {
-          this.traces = response;
-        },
-        (error) => {
-          this.toaster.pop({type: 'error', title: 'error', body: error});
-        }
-      );
+      this.updateTraces();
     }
   );
 }
@@ -172,6 +165,7 @@ ngOnInit(): void {
           self.selectAll = false;
           self.selection = [];
           self.searchText = '';
+          self.updateTraces();
         },
         (error) => {
           self.toaster.pop({type: 'error', title: 'error', body: error});
@@ -180,6 +174,17 @@ ngOnInit(): void {
     });
   }
 
+  updateTraces() {
+    this.traceService.list(new QueryOptions({fromDate: moment(this.filters.dateRange.startDate).format('YYYY-MM-DD'), toDate: moment(this.filters.dateRange.endDate).add(1, 'days').format('YYYY-MM-DD')})).subscribe(
+        (response) => {
+          this.traces = response;
+        },
+        (error) => {
+          this.toaster.pop({type: 'error', title: 'error', body: error});
+        }
+    );
+  }
+
   getExecutionTasks() {
     this.traceService.list(new QueryOptions({finished: 0})).subscribe(
       (result) => {
@@ -189,53 +194,20 @@ ngOnInit(): void {
 
       }
     );
+    if(this.config.timers.executionsInterval.object !== null) {
+      const self = this;
+      setTimeout(function () {
+        self.getExecutionTasks();
+      }, this.config.timers.executionsInterval.tick);
+    }
   }
 
-  deleteExecutionTace(task) {
-    this.ogSweetAlert.question(
-      this.translate.instant('delete_task'),
-      this.translate.instant('sure_to_delete_task') + '?',
-      function(result) {
-        if (result) {
-          this.traceService.delete(task.id).subscribe(
-            (response) => {
-              this.toaster.pop({type: 'success', title: 'success', body: this.translate.instant('successfully_deleted')});
-              this.getExecutionTasks();
-            },
-            (error) => {
-              this.toaster.pop({type: 'error', title: 'error', body: error});
-            }
-          );
-
-        }
-      }
-    );
-
-  }
-
-  relaunchExecutionTask(task) {
-    this.ogSweetAlert.question(
-      this.translate.instant('relaunch_task'),
-      this.translate.instant('sure_to_relaunch_task') + '?',
-      function(result) {
-        if (result) {
-
-        }
-      }
-    );
-  }
 
   filterTraceStatus(trace, index, array) {
 
     // Comprobar si para el filtro de estado actual de la traza
     let result = (trace.finishedAt != null && this.filters.status['finished'].selected === true) || (trace.finishedAt === null && this.filters.status['execution'].selected === true);
     result = result && (trace.finishedAt != null && (trace.status === 0 && this.filters.finishedStatus['noErrors'].selected === true) || (trace.status !== 0 && this.filters.finishedStatus['withErrors'].selected === true));
-    if (this.filters.dateRange.startDate != null) {
-      result = result && moment(trace.executedAt).isAfter(this.filters.dateRange.startDate);
-    }
-    if (this.filters.dateRange.endDate != null) {
-      result = result && moment(trace.executedAt).isBefore(this.filters.dateRange.endDate);
-    }
 
     return result;
   }
diff --git a/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts b/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts
index 9ee7427f..3b893ada 100644
--- a/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts
+++ b/admin/WebConsole3/frontend/src/app/serializer/client.serializer.ts
@@ -5,11 +5,11 @@ export class ClientSerializer extends Serializer {
 
     toJson(client: Client): any {
         // @ts-ignore
-        client.repository = (typeof client.repository === 'object') ? client.repository.id : client.repository;
+        client.repository = (client.repository && typeof client.repository === 'object') ? client.repository.id : client.repository;
         // @ts-ignore
         client.hardwareProfile = (client.hardwareProfile) ? client.hardwareProfile.id : null;
         // @ts-ignore
-        client.netboot = (typeof client.netboot === 'object') ? client.netboot.id : client.netboot;
+        client.netboot = (client.netboot && typeof client.netboot === 'object') ? client.netboot.id : client.netboot;
         return super.toJson(client);
     }
 }
diff --git a/admin/WebConsole3/frontend/src/app/service/og-common.service.ts b/admin/WebConsole3/frontend/src/app/service/og-common.service.ts
index 3de25304..88c87b08 100644
--- a/admin/WebConsole3/frontend/src/app/service/og-common.service.ts
+++ b/admin/WebConsole3/frontend/src/app/service/og-common.service.ts
@@ -8,324 +8,347 @@ import {HardwareComponent} from '../model/hardware-component';
 import {environment} from '../../environments/environment';
 import {LayoutStore} from 'angular-admin-lte';
 import {AdminLteConf} from '../admin-lte.conf';
+import {User, UserPreferences} from '../model/user';
 
 @Injectable({
-  providedIn: 'root'
+    providedIn: 'root'
 })
 export class OgCommonService {
-  private constants: any = null;
-  private timers: any = null;
-  private user: any;
-  private app: any;
-  private groups: any;
+    private constants: any = null;
+    private timers: any = null;
+    private user: any;
+    private app: any;
+    private groups: any;
 
-  public selectedClients: any;
-  public selectedOu: any;
-  public movingOu: any;
-  public movingClients: boolean;
+    public selectedClients: any;
+    public selectedOu: any;
+    public movingOu: any;
+    public movingClients: boolean;
 
-  constructor(private layoutStore: LayoutStore, private adminLteConfig: AdminLteConf, private engineService: EngineService, private translate: TranslateService, private authModule: AuthModule) {
-    this.app = {};
-    this.selectedClients = {};
-    this.selectedOu = null;
-    this.movingOu = null;
-    this.movingClients = false;
-    if (localStorage.getItem('selectedClients')) {
-      this.selectedClients = JSON.parse(localStorage.getItem('selectedClients'));
-    }
-  }
+    public showLoader: boolean;
 
-  loadEngineConfig(): Observable<{constants: any, timers: any}> {
-    // Cargar en el rootScope los arrays de objetos comunes al sistema
-    return new Observable((observer) => {
-      if (this.constants === null || this.timers === null) {
-        this.engineService.list().subscribe(
-          data => {
-            this.constants = {
-              ou: environment.ou,
-              themes: environment.themes,
-              menus: environment.menus,
-              languages: environment.languages,
-              deployMethods: environment.deployMethods,
-              commands: environment.commands
-            };
-            this.constants = Object.assign(this.constants, data[0]);
-            // inicializar timers generales para refresco de información
-            this.timers = {
-              serverStatusInterval: {
-                tick: 0,
-                object: null
-              },
-              clientsStatusInterval: {
-                tick: 0,
-                object: null
-              },
-              executionsInterval: {
-                tick: 0,
-                object: null
-              },
+    constructor(private layoutStore: LayoutStore, private adminLteConfig: AdminLteConf, private engineService: EngineService, private translate: TranslateService, private authModule: AuthModule) {
+        this.app = {};
+        this.selectedClients = {};
+        this.selectedOu = null;
+        this.movingOu = null;
+        this.movingClients = false;
+        this.showLoader = true;
+        this.constants = {
+            ou: environment.ou,
+            themes: environment.themes,
+            menus: environment.menus,
+            languages: environment.languages,
+            deployMethods: environment.deployMethods,
+            commands: environment.commands,
+            user: environment.user
+        };
+        this.loadEngineConfig();
+        /*
+        if (localStorage.getItem('selectedClients')) {
+          this.selectedClients = JSON.parse(localStorage.getItem('selectedClients'));
+        }
+        */
+    }
 
-            };
-            observer.next({constants: this.constants, timers: this.timers});
-          },
-          (error) => {
-            observer.error(error);
-          }
-        );
-      } else {
-        observer.next({constants: this.constants, timers: this.timers});
-      }
+    loadEngineConfig(): Observable<{ constants: any, timers: any }> {
+        // Cargar en el rootScope los arrays de objetos comunes al sistema
+        return new Observable((observer) => {
+            if (this.constants === null || this.timers === null) {
+                this.engineService.list().subscribe(
+                    data => {
+                        this.constants = Object.assign(this.constants, data[0]);
+                        // inicializar timers generales para refresco de información
+                        this.timers = {
+                            serverStatusInterval: {
+                                tick: 5000,
+                                object: null
+                            },
+                            clientsStatusInterval: {
+                                tick: 5000,
+                                object: null
+                            },
+                            executionsInterval: {
+                                tick: 5000,
+                                object: null
+                            },
 
-    });
-  }
+                        };
+                        observer.next({constants: this.constants, timers: this.timers});
+                    },
+                    (error) => {
+                        observer.error(error);
+                    }
+                );
+            } else {
+                observer.next({constants: this.constants, timers: this.timers});
+            }
 
-  loadUserConfig() {
-    this.user = this.authModule.getLoggedUser();
-    // si no existen las preferencias de usuario se crean
-    if (!this.user.preferences) {
-      this.user.preferences = this.constants.user.preferences;
-    }
-    if (this.user.preferences.language) {
-     this.translate.use(this.user.preferences.language);
+        });
     }
-    this.app.theme = this.user.preferences.theme;
-  }
 
-  saveUserPreferences() {
-    this.user = this.authModule.getLoggedUser();
-    // si no existen las preferencias de usuario se crean
-    if (!this.user.preferences) {
-      this.user.preferences = this.constants.user.preferences;
+    loadUserConfig(): UserPreferences {
+        const user = new User();
+        if (localStorage.getItem('og_user_preferences')) {
+            user.preferences = JSON.parse(localStorage.getItem('og_user_preferences'));
+        }
+        this.user = this.authModule.getLoggedUser(user);
+        // si no existen las preferencias de usuario se crean
+        if (!this.user.preferences) {
+            this.user.preferences = this.constants.user.preferences;
+        }
+        if (this.user.preferences.language) {
+            this.translate.use(this.user.preferences.language);
+        }
+        this.layoutStore.setSkin(this.user.preferences.theme);
+        this.layoutStore.setLayout(this.user.preferences.layout);
+        this.layoutStore.sidebarLeftMini(this.user.preferences.isSidebarLeftMini);
+        this.layoutStore.sidebarLeftExpandOnOver(this.user.preferences.isSidebarLeftExpandOnOver);
+        this.layoutStore.setSidebarRightSkin(this.user.preferences.sidebarRightSkin);
+        return this.user.preferences;
     }
-    if (this.user.preferences.language) {
-      this.translate.use(this.user.preferences.language);
+
+    saveUserPreferences(preferences) {
+        this.user = this.authModule.getLoggedUser();
+        localStorage.setItem('og_user_preferences', JSON.stringify(preferences));
+        this.loadUserConfig();
     }
-    this.app.theme = this.user.preferences.theme;
-    localStorage.setItem('ogUser', JSON.stringify(this.user));
-  }
 
 
-  changeLanguage(langKey) {
-    this.translate.use(langKey);
-    this.layoutStore.setSidebarLeftMenu(this.adminLteConfig.get().sidebarLeftMenu);
-  }
+    changeLanguage(langKey) {
+        this.translate.use(langKey);
+        this.layoutStore.setSidebarLeftMenu(this.adminLteConfig.get().sidebarLeftMenu);
+    }
 
-  createGroups(array, property) {
-    let groups = [];
-    const newArray = [];
+    createGroups(array, property) {
+        let groups = [];
+        const newArray = [];
 
-    // Extraer los grupos de los perfiles hardware
-    for (let index = 0; index < array.length; index++) {
-      const obj = array[index];
-      let group = obj.group;
-      if (typeof group !== 'undefined') {
-        group = this.addGroup(groups, group);
-        // Si no se encontró el grupo, buscamos entre los de rootScope
-        if (group == null) {
-          let g = this.groups.filter(element => element.id === obj.group.parent.id);
-          g = g[0];
-          if (!g.groups) {
-            g.groups = [];
-          }
-          g.groups.push(obj.group);
-          groups.push(g);
-          group = obj.group;
-        }
-        delete obj.group;
+        // Extraer los grupos de los perfiles hardware
+        for (let index = 0; index < array.length; index++) {
+            const obj = array[index];
+            let group = obj.group;
+            if (typeof group !== 'undefined') {
+                group = this.addGroup(groups, group);
+                // Si no se encontró el grupo, buscamos entre los de rootScope
+                if (group == null) {
+                    let g = this.groups.filter(element => element.id === obj.group.parent.id);
+                    g = g[0];
+                    if (!g.groups) {
+                        g.groups = [];
+                    }
+                    g.groups.push(obj.group);
+                    groups.push(g);
+                    group = obj.group;
+                }
+                delete obj.group;
 
-        if (!group[property]) {
-          group[property] = [];
+                if (!group[property]) {
+                    group[property] = [];
+                }
+                group[property].push(obj);
+            } else {
+                newArray.push(obj);
+            }
         }
-        group[property].push(obj);
-      } else {
-        newArray.push(obj);
-      }
+        groups = {
+            // @ts-ignore
+            groups: groups,
+        };
+        groups[property] = newArray;
+        return groups;
     }
-    groups = {
-      // @ts-ignore
-      groups: groups,
-    };
-    groups[property] = newArray;
-    return groups;
-  }
 
-  addGroup(groups, group) {
-    let found = null;
-    if (!group.parent) {
-      const tmp = groups.filter( (element) => element.id === group.id);
-      if (tmp.length === 0) {
-        groups.push(group);
-      } else {
-        group = tmp[0];
-      }
-      found = group;
-    } else {
-      let index = 0;
-      // buscar el grupo donde insertarlo
-      while (found == null && index < groups.length) {
-        if (groups[index].id === group.parent.id) {
-          if (!groups[index].groups) {
-            groups[index].groups = [];
-            groups[index].groups.push(group);
-          } else {
-            // Comprobar si ya contiene el grupo, sino, se añade
-            const tmp = groups[index].groups.filter((element) => element.id === group.id);
+    addGroup(groups, group) {
+        let found = null;
+        if (!group.parent) {
+            const tmp = groups.filter((element) => element.id === group.id);
             if (tmp.length === 0) {
-              groups[index].groups.push(group);
+                groups.push(group);
             } else {
-              group = tmp[0];
+                group = tmp[0];
+            }
+            found = group;
+        } else {
+            let index = 0;
+            // buscar el grupo donde insertarlo
+            while (found == null && index < groups.length) {
+                if (groups[index].id === group.parent.id) {
+                    if (!groups[index].groups) {
+                        groups[index].groups = [];
+                        groups[index].groups.push(group);
+                    } else {
+                        // Comprobar si ya contiene el grupo, sino, se añade
+                        const tmp = groups[index].groups.filter((element) => element.id === group.id);
+                        if (tmp.length === 0) {
+                            groups[index].groups.push(group);
+                        } else {
+                            group = tmp[0];
+                        }
+                    }
+                    found = group;
+                } else if (groups[index].groups) {
+                    found = this.addGroup(groups[index].groups, group);
+                }
+                index++;
             }
-          }
-          found = group;
-        } else if (groups[index].groups) {
-          found = this.addGroup(groups[index].groups, group);
         }
-        index++;
-      }
+        return found;
     }
-    return found;
-  }
 
 
-  selectClient(client, parent) {
-    client.parent = parent;
-    if (client.selected) {
-      this.selectedClients[client.id] = client;
-    } else {
-      delete this.selectedClients[client.id];
+    selectClient(client, parent) {
+        client.parent = parent;
+        if (client.selected) {
+            this.selectedClients[client.id] = client;
+        } else {
+            delete this.selectedClients[client.id];
+        }
+        this.saveSelection();
     }
-    this.saveSelection();
-  }
 
-  saveSelection() {
-    localStorage.setItem('selectedClients', JSON.stringify(this.selectedClients, function (key, value) {
-      let result = value;
-      if (key === 'parent' && typeof value === 'object') {
-        result = value.id;
-      }
-      return result;
-    }));
-  }
-
-  getSelectionSize() {
-    return Object.keys(this.selectedClients).length;
-  }
+    saveSelection() {
+        /*
+        localStorage.setItem('selectedClients', JSON.stringify(this.selectedClients, function (key, value) {
+          let result = value;
+          if (key === 'parent' && typeof value === 'object') {
+            result = value.id;
+          }
+          return result;
+        }));
+        */
+    }
 
-  isMovingClients() {
-    return (this.movingClients === true);
-  }
-  /**/
+    getSelectionSize() {
+        return Object.keys(this.selectedClients).length;
+    }
 
-  selectForMove(ou, select?) {
-    // si existe una operacion de movimiento de clientes se cancela
-    this.movingClients = false;
-    if (typeof select === 'undefined') {
-      this.movingOu = (this.movingOu === ou) ? null : ou;
-      select = select || (this.movingOu === ou);
+    isMovingClients() {
+        return (this.movingClients === true);
     }
-    // seleccionar/deseleccionar todos los elementos dentro de ou
-    for ( let i = 0; i < ou.children.length; i++) {
-      ou.children[i].selectedForMove = select;
-      this.selectForMove(ou.children[i], select);
+
+    /**/
+
+    selectForMove(ou, select?) {
+        // si existe una operacion de movimiento de clientes se cancela
+        this.movingClients = false;
+        if (typeof select === 'undefined') {
+            this.movingOu = (this.movingOu === ou) ? null : ou;
+            select = select || (this.movingOu === ou);
+        }
+        // seleccionar/deseleccionar todos los elementos dentro de ou
+        for (let i = 0; i < ou.children.length; i++) {
+            ou.children[i].selectedForMove = select;
+            this.selectForMove(ou.children[i], select);
+        }
     }
-  }
 
-  /**
-   * Dada la particion 0 de la configuracion de un cliente, devuelve el objeto partitionTable asociado
-   */
-  getPartitionTable(partition) {
-    return this.constants.partitiontable[parseInt(partition.partitionCode, 10) - 1];
-  }
+    /**
+     * Dada la particion 0 de la configuracion de un cliente, devuelve el objeto partitionTable asociado
+     */
+    getPartitionTable(partition) {
+        return this.constants.partitiontable[parseInt(partition.partitionCode, 10) - 1];
+    }
 
-  getDisksConfigFromPartitions(partitions) {
-    const disks = [];
-    let partitionTable;
-    // La partición 0 es la configuración del disco
-    for (let p = 0; p < partitions.length; p++) {
-      const partition = partitions[p];
-      if (!disks[partition.numDisk - 1]) {
-        disks.push({});
-      }
+    getDisksConfigFromPartitions(partitions) {
+        // Ordenar la lista por numero de partición
+        partitions = partitions.sort(function(p1, p2) {
+            let result = 0;
+           if (p1.numPartition < p2.numPartition) {
+               result = -1;
+           } else if (p1.numPartition > p2.numPartition) {
+               result = 1;
+           }
+           return result;
+        });
+        const disks = [];
+        let partitionTable;
+        // La partición 0 es la configuración del disco
+        for (let p = 0; p < partitions.length; p++) {
+            const partition = partitions[p];
+            if (!disks[partition.numDisk - 1]) {
+                disks.push({});
+            }
 
-      // La partición 0 es la configuración del disco
-      if (partition.numPartition === 0) {
-        partitionTable = this.getPartitionTable(partition);
-        disks[partition.numDisk - 1] = {
-          size: partition.size,
-          disk: partition.numDisk,
-          parttable: partitionTable.type,
-          partitions: []
-        };
-      } else {
-        // Comprobar el tipo de partición dependiendo del código
-        const elements = partitionTable.partitions.filter((element) => (element.id === partition.partitionCode));
-        partition.parttype = (elements.length > 0) ? elements[0].type : '';
-        // Si es cache, actualizar su contenido
-        if (partition.partitionCode === 'ca') {
-          // actualizar el contenido de la cache
-          if (typeof partition.cacheContent === 'string') {
-            let cacheContent = [];
-            cacheContent = partition.cacheContent.trim().split(',');
-            const cacheContentObj = {
-              files: [],
-              freeSpace: 0
-            };
-            for (let index = 0; index < cacheContent.length; index++) {
-              if (index === 0) {
-                cacheContentObj.freeSpace = cacheContent[index];
-              } else {
-                if (cacheContent[index] !== '') {
-                  const parts = cacheContent[index].trim().split(' ');
+            // La partición 0 es la configuración del disco
+            if (partition.numPartition === 0) {
+                partitionTable = this.getPartitionTable(partition);
+                disks[partition.numDisk - 1] = {
+                    size: partition.size,
+                    disk: partition.numDisk,
+                    parttable: partitionTable.type,
+                    partitions: []
+                };
+            } else {
+                // Comprobar el tipo de partición dependiendo del código
+                const elements = partitionTable.partitions.filter((element) => (element.id === partition.partitionCode));
+                partition.parttype = (elements.length > 0) ? elements[0].type : '';
+                // Si es cache, actualizar su contenido
+                if (partition.partitionCode === 'ca') {
+                    // actualizar el contenido de la cache
+                    if (typeof partition.cacheContent === 'string') {
+                        let cacheContent = [];
+                        cacheContent = partition.cacheContent.trim().split(',');
+                        const cacheContentObj = {
+                            files: [],
+                            freeSpace: 0
+                        };
+                        for (let index = 0; index < cacheContent.length; index++) {
+                            if (index === 0) {
+                                cacheContentObj.freeSpace = cacheContent[index];
+                            } else {
+                                if (cacheContent[index] !== '') {
+                                    const parts = cacheContent[index].trim().split(' ');
 
-                  const fileSize = parts[0].trim() + 'KB';
-                  const fileName = parts[1].trim();
-                  const file = {name: fileName, size: fileSize, type: ''};
-                  file.type = (file.name.indexOf('/') !== -1) ? 'D' : 'F';
-                  cacheContentObj.files.push(file);
+                                    const fileSize = parts[0].trim() + 'KB';
+                                    const fileName = parts[1].trim();
+                                    const file = {name: fileName, size: fileSize, type: ''};
+                                    file.type = (file.name.indexOf('/') !== -1) ? 'D' : 'F';
+                                    cacheContentObj.files.push(file);
+                                }
+                            }
+                        }
+                        partition.cacheContent = cacheContentObj;
+                    } else if (!partition.cacheContent) {
+                        partition.cacheContent = [];
+                    }
                 }
-              }
+                disks[partition.numDisk - 1].partitions.push(partition);
             }
-            partition.cacheContent = cacheContentObj;
-          } else if (!partition.cacheContent) {
-            partition.cacheContent = [];
-          }
-        }
-        disks[partition.numDisk - 1].partitions.push(partition);
-      }
 
+        }
+        return disks;
     }
-    return disks;
-  }
 
-  getUnits(bytes) {
-    let units = 'B';
-    let divider = 1;
-    if (bytes > 1073741824) {
-      units = 'GB';
-      divider = 1024 * 1024 * 1024;
-    } else if (bytes > 1048576) {
-      units = 'MB';
-      divider = 1024 * 1024;
-    } else if (bytes > 1024) {
-      units = 'KB';
-      divider = 1024;
+    getUnits(bytes) {
+        let units = 'B';
+        let divider = 1;
+        if (bytes > 1073741824) {
+            units = 'GB';
+            divider = 1024 * 1024 * 1024;
+        } else if (bytes > 1048576) {
+            units = 'MB';
+            divider = 1024 * 1024;
+        } else if (bytes > 1024) {
+            units = 'KB';
+            divider = 1024;
+        }
+        return Math.round((bytes / divider) * 100) / 100 + ' ' + units;
     }
-    return Math.round((bytes / divider) * 100) / 100 + ' ' + units;
-  }
 
 
-  checkUnchekComponent(profile: any, component: any) {
-    // Seleccionar o deseleccionar el componente en el perfil hardware o software
-    const array = profile.hardwares || profile.softwares;
-    // Si el componente que llega está deseleccionado
-    if (component.$$selected === false) {
-      // Hay que quitarlo del perfil hardware
-      const index = array.indexOf(component.id);
-      if (index !== -1) {
-        array.splice(index, 1);
-      }
-    } else {
-      array.push(component.id);
+    checkUnchekComponent(profile: any, component: any) {
+        // Seleccionar o deseleccionar el componente en el perfil hardware o software
+        const array = profile.hardwares || profile.softwares;
+        // Si el componente que llega está deseleccionado
+        if (component.$$selected === false) {
+            // Hay que quitarlo del perfil hardware
+            const index = array.indexOf(component.id);
+            if (index !== -1) {
+                array.splice(index, 1);
+            }
+        } else {
+            array.push(component.id);
+        }
     }
-  }
 }
diff --git a/admin/WebConsole3/frontend/src/assets/i18n/en.json b/admin/WebConsole3/frontend/src/assets/i18n/en.json
index c9276ee8..583f36b1 100644
--- a/admin/WebConsole3/frontend/src/assets/i18n/en.json
+++ b/admin/WebConsole3/frontend/src/assets/i18n/en.json
@@ -1,4 +1,16 @@
 {
+	"activate_fixed_layout": "Activate the fixed layout. You can't use fixed and boxed layouts together",
+	"activate_boxed_layout": "Activate the boxed layout",
+	"layout_options": "Layout Options",
+	"fixed_layout": "Fixed Layout",
+	"boxed_layout": "Boxed Layout",
+	"sidebar_left_mini": "Sidebar Left Mini",
+	"sidebar_left_collapsed_visible": "Let the sidebar left collapsed visible",
+	"sidebar_left_expand_hover": "Sidebar Expand on Hover",
+	"sidebar_left_mini_expand_hover": "Let the sidebar mini expand on hover",
+	"toggle_right_sidebar_skin": "Toggle Right Sidebar Skin",
+	"change_right_sidebar_color": "Toggle between dark and light skins for the right sidebar",
+	"skins": "Skins",
 	"action_cannot_be_undone": "action_cannot_be_undone",
 	"actions_queue": "actions_queue",
 	"add": "add",
diff --git a/admin/WebConsole3/frontend/src/assets/i18n/es.json b/admin/WebConsole3/frontend/src/assets/i18n/es.json
index 7427ea51..b9f23883 100644
--- a/admin/WebConsole3/frontend/src/assets/i18n/es.json
+++ b/admin/WebConsole3/frontend/src/assets/i18n/es.json
@@ -1,4 +1,16 @@
 {
+	"activate_fixed_layout": "Activar diseño fijo. No puede usarse junto con el diseño de cajas",
+	"activate_boxed_layout": "Activar diseño de cajas",
+	"layout_options": "Opciones de diseño",
+	"fixed_layout": "Diseño fijo",
+	"boxed_layout": "Diseño de caja",
+	"sidebar_left_mini": "Barra lateral izquierda Mini",
+	"sidebar_left_collapsed_visible": "Dejar la barra lateral izquierda visible al plegarla",
+	"sidebar_left_expand_hover": "Expandir barra lateral izquierda \"hover\"",
+	"sidebar_left_mini_expand_hover": "Hace que la barra lateral izquierda sse expanda al posicionar el ratón encima",
+	"toggle_right_sidebar_skin": "Cambiar color barra lateral derecha",
+	"change_right_sidebar_color": "Cambia entre color claro u oscuro para la barra lateral derecha",
+	"skins": "Temas",
 	"action_cannot_be_undone": "Esta acción no puede deshacerse",
 	"actions_queue": "Cola de acciones",
 	"add": "Añadir",
@@ -39,7 +51,7 @@
 	"connection_not_available": "Conexión no disponible",
 	"console": "Consola",
 	"console_access": "Acceso opengnsys",
-  "copy": "Copiar",
+  	"copy": "Copiar",
 	"cpu": "Cpu",
 	"CPU_model": "Modelo",
 	"CREATE_IMAGE": "Crear imagen",
diff --git a/admin/WebConsole3/frontend/src/environments/environment.ts b/admin/WebConsole3/frontend/src/environments/environment.ts
index 3ba05adc..0d6603a4 100644
--- a/admin/WebConsole3/frontend/src/environments/environment.ts
+++ b/admin/WebConsole3/frontend/src/environments/environment.ts
@@ -76,7 +76,7 @@ export const environment = {
         showGrid: true
       },
       language: 'es',
-      theme: 'skin-black'
+      theme: 'blue'
     }
   },
   languages: [
@@ -113,7 +113,7 @@ export const environment = {
     'HARDWARE_INVENTORY': '/opt/opengnsys/interfaceAdm/InventarioHardware',
     'REFRESH_INFO': 'sendConfigToServer'
   },
-  themes: ['skin-black', 'skin-black-light', 'skin-blue-light', 'skin-blue', 'skin-green', 'skin-green-light', 'skin-purple', 'skin-purple-light', 'skin-red', 'skin-red-light', 'skin-yellow', 'skin-yellow-light', 'skin-uhu', 'skin-uhu-light']
+  themes: ['black', 'black-light', 'blue-light', 'blue', 'green', 'green-light', 'purple', 'purple-light', 'red', 'red-light', 'yellow', 'yellow-light', 'uhu', 'uhu-light']
 
 
 };
diff --git a/admin/WebConsole3/frontend/src/styles.scss b/admin/WebConsole3/frontend/src/styles.scss
index febcea42..fef10ae8 100644
--- a/admin/WebConsole3/frontend/src/styles.scss
+++ b/admin/WebConsole3/frontend/src/styles.scss
@@ -149,6 +149,10 @@ body .toolboxbar.fixed {
   left: 230px;
 }
 
+mk-layout-wrapper.fixed section.toolboxbar.fixed {
+  margin-top: 50px;
+}
+
 /* Para dispositivos moviles */
 @media (max-width: 767px) {
   body .toolboxbar.fixed {