Facturacion api, comprobantes de retención

.editorconfig

+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

+build
+dist
+node_modules
+.DS_Store
+.idea
+sassdoc
+
+src/assets/sass/theme/designer
+src/assets/sass/theme/extensions
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.angular/cache
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

.vscode/settings.json

+{
+    "editor.tabSize": 2
+}
\ No newline at end of file

CHANGELOG.md

+# Changelog
+
+## 12.2.0
+**Migration Guide**
+- Update app.topbar.component.html.
+- Update theme files and layout files.
+
+**Implemented New Features and Enhancements:**
+
+- Styles of new PrimeNG components
+- Added topbar color options for horizontal menu mode
+
+## 12.0.0
+**Migration Guide**
+- Update your project to Angular 12.
+- Update app.main.component.ts and app.main.component.html.
+- Update app.menu.component.ts and app.menuitem.component.ts.
+- Update app.topbar.component.html.
+- Update theme files and layout files.
+
+**Implemented New Features and Enhancements:**
+
+- Upgrade to Angular and PrimeNG 12
+- Styles of new PrimeNG components
+- Added horizontal menu mode
+
+##11.0.0
+**Migration Guide**
+- Update your project to Angular 11.
+- Update app.main.component.ts and app.component.ts
+- Update app.menu.component.ts and app.menuitem.component.ts
+- Update app.search.component.ts
+- Update theme files and layout files.
+
+**Implemented New Features and Enhancements:**
+
+- Upgrade to Angular and PrimeNG 11
+- Styles of new PrimeNG components
+
+## 10.0.2
+**Migration Guide**
+- Update app.search.component.ts
+- Update theme files and layout files.
+
+**Fixed bugs:**
+
+- Improve search animation and add keyboard support
+
+## 10.0.1
+**Migration Guide**
+- Update app.menuitem.component.ts 
+
+**Fixed bugs:**
+
+- Remove body scroll block after selecting menu item
+
+##10.0.0
+**Migration Guide**
+- Update your project to Angular 10.
+- Update theme files and layout files.
+
+**Implemented New Features and Enhancements:**
+
+- Upgrade to Angular and PrimeNG 10
+- Migrate to PrimeOne Design Architecture
+- Visual Update to Theme Highlight colors 

README.md

+# PrimeNG Diamond
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

angular.json

+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "diamond-ng": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/diamond-ng",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "aot": true,
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.scss",
+                            "./node_modules/@fullcalendar/common/main.css",
+                            "./node_modules/@fullcalendar/daygrid/main.css",
+                            "./node_modules/@fullcalendar/timegrid/main.css"
+                        ],
+                        "scripts": [
+                            "node_modules/prismjs/prism.js",
+                            "node_modules/prismjs/components/prism-typescript.js"
+                        ],
+                        "allowedCommonJsDependencies": ["@fullcalendar/daygrid","@fullcalendar/timegrid","@fullcalendar/interaction","chart.js"]
+                    },
+                    "configurations": {
+                        "production": {
+                            "buildOptimizer": false,
+                            "optimization": false,
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "3mb",
+                                    "maximumError": "10mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb",
+                                    "maximumError": "20kb"
+                                }
+                            ],
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "outputHashing": "all"
+                        },
+                        "development": {
+                            "buildOptimizer": false,
+                            "optimization": false,
+                            "vendorChunk": true,
+                            "extractLicenses": false,
+                            "sourceMap": true,
+                            "namedChunks": true
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "diamond-ng:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "diamond-ng:build:production"
+                        },
+                        "development": {
+                            "browserTarget": "diamond-ng:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "diamond-ng:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": []
+                    }
+                }
+            }
+        }
+    },
+    "cli": {
+      "analytics": false
+    }
+}

karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client: {
+            jasmine: {
+                // you can add configuration options for Jasmine here
+                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+                // for example, you can disable the random execution with `random: false`
+                // or set a specific seed with `seed: 4321`
+            },
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        jasmineHtmlReporter: {
+            suppressAll: true // removes the duplicated traces
+        },
+        coverageReporter: {
+            dir: require('path').join(__dirname, './coverage/diamond-ng'),
+            subdir: '.',
+            reporters: [
+                {type: 'html'},
+                {type: 'text-summary'}
+            ]
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false,
+        restartOnFileChange: true
+    });
+};

package.json

+{
+  "name": "facturacion_api",
+  "version": "1.0.0",
+  "description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.6.",
+  "main": "karma.conf.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@angular/animations": "^14.2.5",
+    "@angular/cdk": "^12.0.0",
+    "@angular/common": "^14.2.5",
+    "@angular/compiler": "^14.2.5",
+    "@angular/core": "^14.2.5",
+    "@angular/forms": "^14.2.5",
+    "@angular/platform-browser": "^14.2.5",
+    "@angular/platform-browser-dynamic": "^14.2.5",
+    "@angular/router": "^14.2.5",
+    "@auth0/angular-jwt": "^5.1.0",
+    "@fullcalendar/angular": "^5.11.0",
+    "@fullcalendar/core": "^5.11.0",
+    "@fullcalendar/daygrid": "^5.8.0",
+    "@fullcalendar/interaction": "^5.11.0",
+    "@fullcalendar/timegrid": "^5.11.0",
+    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/http-loader": "^6.0.0",
+    "bootstrap": "^5.1.3",
+    "bootstrap-icons": "^1.8.1",
+    "chart.js": "^3.3.2",
+    "crypto-js": "^4.1.1",
+    "dom-to-image": "^2.6.0",
+    "file-saver": "^2.0.5",
+    "fullcalendar": "^4.0.0-alpha.2",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.5.23",
+    "moment": "^2.29.4",
+    "primeflex": "^3.3.1",
+    "primeicons": "^6.0.1",
+    "primeng": "^14.2.3",
+    "prismjs": "^1.29.0",
+    "rxjs": "^7.5.7",
+    "sweetalert2": "^11.4.8",
+    "tslib": "^2.0.0",
+    "xlsx": "^0.18.5",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.2.5",
+    "@angular/cli": "^14.2.5",
+    "@angular/compiler-cli": "^14.2.5",
+    "@compodoc/compodoc": "^1.1.19",
+    "@types/jasmine": "~3.6.0",
+    "@types/jasminewd2": "~2.0.8",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^0.0.28",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "^6.4.1",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~4.6.4",
+    "webpack": "^5.75.0"
+  }
+}

src/app/_dto/login-request-dto.ts

+export class LoginRequestDto {
+    nombreUsuario: string;
+    contrasenia: string;
+
+    constructor() {
+    }
+}

src/app/_dto/response-generico.ts

+export class ResponseGenerico {
+
+    codigoRespuestaName: string;
+    codigoRespuestaValue: number;
+    mensaje: string;
+    objeto: any;
+    listado: any;
+    totalRegistros: any;
+
+    constructor() {
+    }
+
+}

src/app/_dto/token-dto.ts

+export class TokenDto {
+    refreshToken: string;
+    id: number;
+    username: string;
+    cedula: string;
+    roles: [] = [];
+    tokenType: string = "Bearer";
+    accessToken: string;
+}

src/app/_enums/constDomain.ts

+const typeDocument = {
+    CEDULA_CIUDADANIA: {code: 'CC', name: 'Cédula de Ciudadanía'},
+    TARJETA_IDENTIDAD: {code: 'TI', name: 'Tarjeta de Identidad'},
+    PASAPORTE: {code: 'PAS', name: 'Pasaporte'},
+    NIT: {code: 'NIT', name: 'Nit'},
+    CEDULA_DE_EXTRANJERIA: {code: 'CE', name: 'Cedula de Extranjeria'},
+    REGISTRO_CIVIL: {code: 'RC', name: 'Registro Civil'},
+} as const
+
+const states = {
+    STATE_ACTIVE: {code: 'A', name: 'ACTIVO'},
+    STATE_INACTIVE: {code: 'I', name: 'INACTIVO'}
+}
+
+const severities = {
+    INFO: 'info',
+    WARNING: 'warn',
+    ERROR: 'error',
+}
+
+
+export {
+    typeDocument,
+    states,
+    severities,
+}

src/app/_guards/auth.guard.spec.ts

+import {TestBed, inject, waitForAsync} from '@angular/core/testing';
+
+import {AuthGuard} from './auth.guard';
+
+describe('AuthGuard', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [AuthGuard]
+        });
+    });
+
+    it('should ...', inject([AuthGuard], (guard: AuthGuard) => {
+        expect(guard).toBeTruthy();
+    }));
+});

src/app/_guards/auth.guard.ts

+import {Injectable} from '@angular/core';
+import {
+    CanActivate,
+    CanActivateChild,
+    ActivatedRouteSnapshot,
+    RouterStateSnapshot,
+    UrlTree,
+    Router
+} from '@angular/router';
+import {Observable} from 'rxjs';
+import {AppService} from '../_service/app.service';
+import {TokenService} from "../_service/token.service";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AuthGuard implements CanActivate, CanActivateChild {
+    constructor(private router: Router, private appService: AppService,
+                private tokenService: TokenService,) {
+    }
+
+    canActivate(
+        next: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot
+    ):
+        | Observable<boolean | UrlTree>
+        | Promise<boolean | UrlTree>
+        | boolean
+        | UrlTree {
+
+        return this.getProfile();
+    }
+
+    canActivateChild(
+        next: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot
+    ):
+        | Observable<boolean | UrlTree>
+        | Promise<boolean | UrlTree>
+        | boolean
+        | UrlTree {
+        return this.canActivate(next, state);
+    }
+
+    getProfile() {
+        if (this.appService.isAuthenticated()) {
+            if( this.isTokenExpired() ){
+                this.appService.logout();
+                return false;
+            }
+            return true;
+        }
+        try {
+            this.appService.getProfile();
+            return true;
+        } catch (error) {
+            this.router.navigate(['authentication/login']);
+            return false;
+        }
+    }
+
+    isTokenExpired(){
+        try{
+            let token = this.tokenService.getToken();
+            let payload = this.appService.obtenerInfoToken(token);
+            let now = new Date().getTime() / 1000;
+            return payload.exp < now;
+        }
+        catch(error){
+            return false;
+        }
+    }
+}

src/app/_guards/non-auth.guard.spec.ts

+import {TestBed, inject, waitForAsync} from '@angular/core/testing';
+
+import {NonAuthGuard} from './non-auth.guard';
+
+describe('NonAuthGuard', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [NonAuthGuard]
+        });
+    });
+
+    it('should ...', inject([NonAuthGuard], (guard: NonAuthGuard) => {
+        expect(guard).toBeTruthy();
+    }));
+});

src/app/_guards/non-auth.guard.ts

+import {Injectable} from '@angular/core';
+import {
+    CanActivate,
+    CanActivateChild,
+    Route,
+    ActivatedRouteSnapshot,
+    RouterStateSnapshot,
+    UrlTree,
+    Router
+} from '@angular/router';
+import {Observable} from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class NonAuthGuard implements CanActivate, CanActivateChild {
+    constructor(private router: Router) {}
+
+    canActivate(
+        next: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot
+    ):
+        | Observable<boolean | UrlTree>
+        | Promise<boolean | UrlTree>
+        | boolean
+        | UrlTree {
+        if (!sessionStorage.getItem('AuthToken')) {
+            return true;
+        }
+        this.router.navigate(['/']);
+        return false;
+    }
+    canActivateChild(
+        next: ActivatedRouteSnapshot,
+        state: RouterStateSnapshot
+    ):
+        | Observable<boolean | UrlTree>
+        | Promise<boolean | UrlTree>
+        | boolean
+        | UrlTree {
+        return this.canActivate(next, state);
+    }
+}

src/app/_interceptor/cache.interceptor.ts

+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor, HttpResponse } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { startWith, tap } from 'rxjs/operators';
+import { RequestCacheService } from '../_service/request-cache.service';
+import {AppService} from "../_service/app.service";
+
+@Injectable()
+export class CacheInterceptor implements HttpInterceptor {
+  constructor(public data: AppService, private cache: RequestCacheService) { }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    // console.warn('CacheInterceptor');
+
+    // continue if not cachable.
+    /*if (!this.isCachable(request)) {
+      return next.handle(request);
+    }*/
+    const cachedUrlResponse: HttpResponse<any> = this.cache.get(request);
+    return cachedUrlResponse ? of(new HttpResponse<any>(cachedUrlResponse)) : this.sendRequest(request, next, this.cache);
+  }
+
+  public sendRequest(request: HttpRequest<any>, next: HttpHandler, cache: RequestCacheService): Observable<HttpEvent<any>> {
+    return next.handle(request).pipe(
+      tap(event => {
+        if (event instanceof HttpResponse) {
+          cache.put(request, event);
+        }
+      })
+    );
+  }
+
+  /** Is this request cachable?
+  public isCachable(request: HttpRequest<any>) {
+    // console.log(request);
+    if ((request.method === 'GET') && (request.url.indexOf(this.data.apiUrl) > -1)) {
+      for (const api in this.data.CACHABLE_URL) {
+        if (request.url.includes((this.data.CACHABLE_URL[api]))) {
+          return true;
+        } else { return false; }
+      }
+    } else { return false; }
+  }*/
+
+}

src/app/_interceptor/error.interceptor.ts

+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError, retry } from 'rxjs/operators';
+
+@Injectable()
+export class ErrorInterceptor implements HttpInterceptor {
+
+  constructor() { }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(request).pipe(
+      catchError((err: HttpErrorResponse) => {
+        const error = err.error.message || err.statusText;
+        return throwError(error);
+      })
+    );
+  }
+}

src/app/_interceptor/general.interceptor.ts

+import {Injectable} from '@angular/core';
+import {
+    HttpRequest,
+    HttpHandler,
+    HttpEvent,
+    HttpInterceptor,
+    HTTP_INTERCEPTORS, HttpErrorResponse
+} from '@angular/common/http';
+import {BehaviorSubject, Observable, switchMap, take, throwError} from 'rxjs';
+import {catchError, filter} from 'rxjs/operators';
+import {AppService} from '../_service/app.service';
+import {TokenService} from '../_service/token.service';
+import {EncryptDecryptService} from "../_service/encryptdecryptservice.service";
+
+const TOKEN_HEADER_KEY = 'Authorization';
+
+@Injectable()
+export class GeneralInterceptor implements HttpInterceptor {
+    private isRefreshing = false;
+    private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);
+
+    constructor(private tokenService: TokenService,
+                private appService: AppService,
+                private encryptDecryptService: EncryptDecryptService) {
+    }
+
+    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+
+        let authReq = request;
+        const token = this.tokenService.getToken();
+        if (token != null) {
+            authReq = this.addTokenHeader(request, token);
+        }
+
+        //TODO: descomentar para encriptacion
+
+        /*
+                if (authReq.method == "GET") {
+                    if (authReq.url.indexOf("?") > 0) {
+                        let encriptURL = authReq.url.substr(0, authReq.url.indexOf("?") + 1) + this.encryptDecryptService.encryptUsingAES256(authReq.url.substr(authReq.url.indexOf("?") + 1, authReq.url.length));
+                        const cloneReq = authReq.clone({
+                            url: encriptURL
+                        });
+                        return next.handle(cloneReq).pipe(catchError(error => {
+                            if (error instanceof HttpErrorResponse && !authReq.url.includes('api/auth/signin') && error.status === 401) {
+                                return this.handle401Error(authReq, next);
+                            }
+                            return throwError(error);
+                        }));
+                    }
+                    return next.handle(authReq);
+                } else if (authReq.method == "POST") {
+                    if (authReq.body || authReq.body.length > 0) {
+                        const cloneReq = authReq.clone({
+                            body: this.encryptDecryptService.encryptUsingAES256(authReq.body)
+                        });
+
+                        console.log('POST BODY', cloneReq)
+
+                        return next.handle(cloneReq).pipe(catchError(error => {
+                            if (error instanceof HttpErrorResponse && !authReq.url.includes('api/auth/signin') && error.status === 401) {
+                                return this.handle401Error(authReq, next);
+                            }
+                            return throwError(error);
+                        }));
+                    }
+                    let data = authReq.body as FormData;
+                    return next.handle(authReq).pipe(catchError(error => {
+                        if (error instanceof HttpErrorResponse && !authReq.url.includes('api/auth/signin') && error.status === 401) {
+                            return this.handle401Error(authReq, next);
+                        }
+                        return throwError(error);
+                    }));
+                }
+
+         */
+
+        return next.handle(authReq).pipe(catchError(error => {
+            if (error instanceof HttpErrorResponse && !authReq.url.includes('api/auth/signin') && error.status === 401) {
+                return this.handle401Error(authReq, next);
+            }
+            return throwError(error);
+        }));
+    }
+
+    private handle401Error(request: HttpRequest<any>, next: HttpHandler) {
+        if (!this.isRefreshing) {
+            this.isRefreshing = true;
+            this.refreshTokenSubject.next(null);
+            const token = this.tokenService.getRefreshToken();
+            if (token) {
+                return this.appService.refreshToken(token).pipe(
+                    switchMap(({accessToken}: any) => {
+                        this.isRefreshing = false;
+                        this.tokenService.setToken(accessToken);
+                        this.refreshTokenSubject.next(accessToken);
+                        return next.handle(this.addTokenHeader(request, accessToken));
+                    }),
+                    catchError((err) => {
+                        this.isRefreshing = false;
+                        this.appService.logout();
+                        return throwError(err);
+                    })
+                );
+            }
+        }
+        return this.refreshTokenSubject.pipe(
+            filter(token => token !== null),
+            take(1),
+            switchMap((token) => next.handle(this.addTokenHeader(request, token)))
+        );
+    }
+
+    private addTokenHeader(request: HttpRequest<any>, token: string) {
+        return request.clone({headers: request.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token)});
+    }
+}
+
+export const generalInterceptor = [{provide: HTTP_INTERCEPTORS, useClass: GeneralInterceptor, multi: true}];

src/app/_interceptor/index.ts

+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { CacheInterceptor } from './cache.interceptor';
+import { ErrorInterceptor } from './error.interceptor';
+
+export const httpInterceptorProviders = [
+  { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true },
+  { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
+];

src/app/_service/app.service.spec.ts

+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import {TestBed, inject, waitForAsync} from '@angular/core/testing';
+import {AppService} from './app.service';
+
+describe('Service: App', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [AppService]
+        });
+    });
+
+    it('should ...', inject([AppService], (service: AppService) => {
+        expect(service).toBeTruthy();
+    }));
+});

src/app/_service/app.service.ts

+import {Injectable} from '@angular/core';
+import {Router} from '@angular/router';
+import {environment} from '../../environments/environment';
+import {Observable, of} from 'rxjs';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+
+import {MenuItem, MessageService} from 'primeng/api';
+import {formatDate} from '@angular/common';
+import jsPDF from 'jspdf';
+import * as FileSaver from 'file-saver';
+import 'jspdf-autotable';
+import {JwtHelperService} from '@auth0/angular-jwt';
+import Swal from 'sweetalert2/dist/sweetalert2.js';
+import {TokenService} from './token.service';
+
+
+const httpOptions = {
+    headers: new HttpHeaders({'Content-Type': 'application/json'})
+};
+
+@Injectable({
+    providedIn: 'root'
+})
+export class AppService {
+
+    url = `${environment.HOST}/api/auth`;
+
+    userLogged: boolean;
+    isLogged: boolean;
+
+    interval: any;
+
+    items: MenuItem[];
+
+    constructor(private router: Router,
+                private http: HttpClient,
+                private messageService: MessageService,
+                private routerService: Router,
+                private tokenService: TokenService,
+                private jwtHelper: JwtHelperService,) {
+    }
+
+    isAuthenticated(): boolean {
+        try {
+            if (this.tokenService.getToken() != null) {
+                let payload = this.obtenerInfoToken(this.tokenService.getToken());
+                if (payload != null && payload.sub && payload.sub.length > 0) {
+                    this.userLogged = true;
+                    this.isLogged = true;
+                    return true;
+                }
+                return false;
+            } else return false;
+        } catch (exception) {
+            this.router.navigate(['authentication/login']);
+            return false;
+        }
+    }
+
+    obtenerInfoToken(accessToken: string) {
+        if (accessToken != null) {
+            return JSON.parse(atob(accessToken.split(".")[1]))
+        }
+        return null;
+    }
+
+    loginByAuth(loginRequest)
+        :
+        Observable<any> {
+        return this.http.post(this.url + '/signin', loginRequest);
+    }
+
+    refreshToken(token: string) {
+        return this.http.post(this.url + '/refreshtoken', {
+            refreshToken: token
+        }, httpOptions);
+    }
+
+    refreshTokenAny(token: string): any {
+        return this.http.post(this.url + '/refreshtoken', {
+            refreshToken: token
+        }, httpOptions);
+    }
+
+    logoutBackEnd() {
+        try {
+            return this.http.post(this.url + '/logout', {
+                userName: this.tokenService.getCurrentUser(),
+                idUsuario: 0
+            }, httpOptions);
+        } catch (e) {
+            console.log('Error en logoutBakend, ' + e);
+            return of(null);
+        }
+
+    }
+
+    msgCreate() {
+        this.messageService.add({severity: 'success', summary: 'Success', detail: 'Registro creado con éxito'});
+    }
+
+    msgUpdate() {
+        this.messageService.add({severity: 'warn', summary: 'Success', detail: 'Registro actualizado con éxito'});
+    }
+
+    msgDelete() {
+        this.messageService.add({severity: 'error', summary: 'Delete', detail: 'Registro eliminado con éxito'});
+    }
+
+    msgInfoDetail(severity: string, header: string, content: string) {
+        this.messageService.add({severity, summary: header, detail: content});
+    }
+
+    /*******
+     * FUNCIONES PARA EXPORTAR EXCEL Y PDF
+     * ********/
+    exportPdf(columnas, list, nombre, orientacion) {
+        const currentDate = new Date();
+        const date = formatDate(currentDate, 'yyyy-MM-dd HH:mm:ss', 'en-US');
+        // const doc = new jsPDF();
+        const doc = new jsPDF(orientacion, 'pt');
+        doc['autoTable'](columnas, list);
+        // doc.autoTable(this.exportColumns, this.products);
+        // doc.save(tipoPlanEstudioDTO.name+".pdf");
+        doc.save(nombre + '-' + date + '.pdf');
+    }
+
+    exportExcel(list, nombre) {
+        import('xlsx').then(xlsx => {
+            const currentDate = new Date();
+            const date = formatDate(currentDate, 'yyyy-MM-dd HH:mm:ss', 'en-US');
+            const worksheet = xlsx.utils.json_to_sheet(list);
+            const workbook = {Sheets: {data: worksheet}, SheetNames: ['data']};
+            const excelBuffer: any = xlsx.write(workbook, {bookType: 'xlsx', type: 'array'});
+            this.saveAsExcelFile(excelBuffer, nombre + '-' + date);
+        });
+    }
+
+    saveAsExcelFile(buffer: any, fileName: string):
+        void {
+        const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+        const EXCEL_EXTENSION = '.xlsx';
+        const data
+            :
+            Blob = new Blob([buffer], {
+            type: EXCEL_TYPE
+        });
+        FileSaver.saveAs(data, fileName + EXCEL_EXTENSION);
+    }
+
+    /******
+     * FIN FUNCIONES EXPORTAR EXCEL PDF
+     * *************/
+
+    getProfile() {
+        try {
+            this.userLogged = JSON.parse(this.tokenService.getCurrentUser());
+            if (this.userLogged === null && this.tokenService.getToken() === null) {
+                this.logout();
+            }
+
+        } catch (error) {
+            this.logout();
+            throw error;
+        }
+    }
+
+    /*expirationCounter(token) {
+        try {
+            let timeout = this.jwtHelper.getTokenExpirationDate(token).valueOf() - new Date().valueOf();
+            timeout = timeout * 0.001;
+            this.interval = setInterval(() => {
+                timeout = timeout - 1;
+                if (timeout <= 0) {
+                    clearInterval(this.interval);
+                    const tokenRef = this.tokenService.getRefreshToken();
+                    this.refreshTokenAny(tokenRef).subscribe(
+                        data => {
+                            this.tokenService.setToken(data.accessToken);
+                            this.tokenService.saveRefreshToken(data.refreshToken);
+                            this.expirationCounter(data.accessToken);
+                        }, error => {
+                            this.logout();
+                            this.alertaSesionExpirada();
+                        }
+                    );
+                }
+            }, 1000);
+        } catch (e) {
+            this.logout();
+        }
+    }*/
+
+    alertaSesionExpirada() {
+        Swal.fire({
+            showClass: {
+                popup: 'animated fadeInDown slow',
+            },
+            hideClass: {
+                popup: 'animated fadeOutUp slow',
+            },
+            title: '',
+            text: 'Su sesión ha expirado, por favor vuelva a ingresar',
+            imageUrl: '../../../assets/img/sessionTimeout.gif',
+            imageAlt: 'Sesión Expirada',
+            confirmButtonText: 'Volver a Ingresar',
+            showConfirmButton: true,
+            allowOutsideClick: false,
+        }).then((result) => {
+            if (result.isConfirmed) {
+                this.logout();
+            }
+        });
+    }
+
+    cierreSesionExitoso() {
+        Swal.fire({
+            showClass: {
+                popup: 'animated fadeInDown slow',
+            },
+            hideClass: {
+                popup: 'animated fadeOutUp slow',
+            },
+            title: 'Cierre de Sesión Exitoso',
+            //text: '<h5 style=\'color:red\'>Gracias por usar nuestros servicios</h5>',
+            //html: '<h5 style=\'color:red\'>Gracias por usar nuestros servicios</h5>',
+            imageUrl: '../../../assets/img/sessionTimeout.gif',
+            imageAlt: 'Cierre de Sesión Exitoso',
+            confirmButtonText: 'Volver a Ingresar',
+            showConfirmButton: false,
+            allowOutsideClick: false,
+            timer: 4500,
+        }).then((result) => {
+            if (result.isConfirmed) {
+                this.logout();
+            }
+        });
+    }
+
+    logout() {
+        try {
+            this.logoutBackEnd().subscribe({
+                next: data => {
+                    console.log('DATA LogoutBackend: ' + JSON.stringify(data));
+                    //clearInterval(this.interval);
+                    this.tokenService.setToken(null);
+                    this.tokenService.saveRefreshToken(null);
+                    this.tokenService.setCurrentUser(null);
+                    this.tokenService.setRoles(null);
+                    this.isAuthenticated()
+
+                    this.userLogged = false;
+                    this.isLogged = false;
+                    this.tokenService.logOut();
+                    //this.cierreSesionExitoso();
+                    console.log('LOG Out /LOGOUT')
+                    this.router.navigate(['authentication/login']);
+                    this.cierreSesionExitoso();
+                },
+                error: error => {
+                    console.log('ERROR LogoutBackend: ' + JSON.stringify(error));
+                },
+                complete: () => {
+                    console.log('Complete');
+
+                }
+            });
+
+
+        } catch (e) {
+            this.router.navigate(['authentication/login']);
+        }
+    }
+}

src/app/_service/crypto.service.ts

+import {Injectable} from '@angular/core';
+import * as CryptoJS from 'crypto-js';
+import { RSA, RSAKeyPair } from 'crypto-js';
+import {HttpClient} from '@angular/common/http';
+import {environment} from "../../environments/environment";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class CryptoService {
+    private keyPair: RSAKeyPair;
+
+    private pem: string;
+    //importedPublicKey: CryptoJS.AES.Key;
+    importedPrivateKey: CryptoJS.AES.Key;
+    importedPublicKey: RSA.Key;
+
+
+    constructor(private http: HttpClient) {
+
+
+    }
+
+    encrypt(data: any) {
+        //var encryptedData = CryptoJS.AES.encrypt(JSON.stringify(data), environment.publicpem);
+        var encryptedData = CryptoJS.AES.encrypt(JSON.stringify(data), environment.publicpem).toString();
+
+        console.log('encrypt data', encryptedData)
+
+        const decrypted = CryptoJS.AES.decrypt(encryptedData, environment.publicpem);
+        const decriptedOriginal = decrypted.toString(CryptoJS.enc.Utf8);
+
+        console.log('desencryt data', decriptedOriginal)
+        return encryptedData
+    }
+
+    decrypt(encryptedData: string) {
+        return JSON.parse(CryptoJS.AES.decrypt(encryptedData, environment.privatepem).toString());
+    }
+
+}

src/app/_service/encryptdecryptservice.service.ts

+import { Injectable } from '@angular/core';
+import * as CryptoJS from 'crypto-js';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class EncryptDecryptService {
+    private key = 'EPN20182EPN20182';
+    private iv = CryptoJS.enc.Utf8.parse('1203199320052021');
+    constructor() {}
+    // Methods for the encrypt and decrypt Using AES
+    encryptUsingAES256(text): any {
+        let dataJson = JSON.stringify(text);
+
+        var encryptedData = CryptoJS.AES.encrypt(dataJson,'EPN20182EPN20182').toString();
+
+        return encryptedData;
+    }
+    decryptUsingAES256(decString) {
+        var decrypted = CryptoJS.AES.decrypt(decString, this.key, {
+            keySize: 128 / 8,
+            iv: this.iv,
+            mode: CryptoJS.mode.CBC,
+            padding: CryptoJS.pad.Pkcs7
+        });
+        return decrypted.toString(CryptoJS.enc.Utf8);
+    }
+}

src/app/_service/menu.service.ts

+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {environment} from "../../environments/environment";
+import {Observable} from "rxjs";
+import * as CryptoJS from 'crypto-js';
+
+
+const MENU = 'menuJsonApp';
+const MENULAB = 'menuJsonLab';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class MenuLightService {
+    constructor(private http: HttpClient) {
+    }
+
+    url = `${environment.HOST}/`;
+    endpoint: string = 'private';
+
+
+    findByUsername(username): Observable<any> {
+        return this.http.get(this.url + this.endpoint + '/findMenuItems/' + username);
+    }
+
+    public getMenusJson(): string {
+        try {
+            var menuJsonDesncrypt = sessionStorage.getItem(MENU)
+            return this.desencrypt(menuJsonDesncrypt);
+
+        } catch (e) {
+            return null;
+        }
+
+    }
+
+    public setMenusJson(menusjson): void {
+
+        try {
+            var menuJsonEncrypt = this.encrypt(menusjson)
+            sessionStorage.setItem(MENU, menuJsonEncrypt);
+        } catch (e) {
+            //console.log('ERROR GETJSON', e)
+        }
+    }
+
+    public getMenusJsonLab(): string {
+        try {
+            var menuJsonDesncrypt = this.desencrypt(sessionStorage.getItem(MENULAB))
+            return sessionStorage.getItem(menuJsonDesncrypt);
+
+        } catch (e) {
+            return null;
+        }
+    }
+
+    public setMenusJsonLab(menusjsonlab): void {
+        try {
+            var menuJsonEncrypt = this.encrypt(menusjsonlab)
+            sessionStorage.setItem(MENULAB, menuJsonEncrypt);
+        } catch (e) {
+            //console.log('ERROR GETJSON', e)
+        }
+    }
+
+    encrypt(data) {
+        var cryptoOut = CryptoJS.AES.encrypt(JSON.stringify(data), 'epn2022**').toString();
+        return cryptoOut;
+    }
+
+    desencrypt(data) {
+        var bytes = CryptoJS.AES.decrypt(
+            data,
+            "epn2022**"
+        );
+        var originalText = bytes.toString(CryptoJS.enc.Utf8);
+        return originalText;
+    }
+
+}

src/app/_service/request-cache.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { RequestCacheService } from './request-cache.service';
+
+describe('RequestCacheService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: RequestCacheService = TestBed.get(RequestCacheService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/_service/request-cache.service.ts

+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpResponse } from '@angular/common/http';
+
+const maxAge = 30000;
+
+@Injectable()
+export class RequestCacheService {
+
+  public cache = new Map<string, any>();
+
+  public get(request: HttpRequest<any>): HttpResponse<any> | undefined {
+    // console.log(request);
+    const url = request.urlWithParams;
+    const cached = this.cache.get(url);
+    if (!cached) {
+      return undefined;
+    }
+    // console.log(cached);
+    const isExpired = cached.lastRead < (Date.now() - maxAge);
+    const expired = isExpired ? 'expired ' : 'Not expired';
+    if (isExpired) {
+      this.cache.delete(url);
+    }
+    // console.warn(expired);
+    return cached.response;
+  }
+
+  public put(request: HttpRequest<any>, response: HttpResponse<any>): void {
+    const url = request.url;
+    const entry = { url, response, lastRead: Date.now() };
+    this.cache.set(url, entry);
+    const expired = Date.now() - maxAge;
+    this.cache.forEach(expiredEntry => {
+      if (expiredEntry.lastRead < expired) {
+        this.cache.delete(expiredEntry.url);
+      }
+    });
+  }
+}

src/app/_service/token.service.ts

+import {Injectable} from '@angular/core';
+import * as CryptoJS from 'crypto-js';
+
+
+const TOKEN_KEY = 'AuthToken';
+const CURRENTUSER_KEY = 'CurrentUser';
+const REFRESHTOKEN_KEY = 'refreshToken';
+const ROLES_KEY = 'roles';
+const RESPONSEAUTH_KEY = 'ResponseAuth'
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TokenService {
+
+    constructor() {
+    }
+
+    public getRoles(): string {
+        return sessionStorage.getItem(ROLES_KEY);
+    }
+
+    public setRoles(roles: string): void {
+        sessionStorage.setItem(ROLES_KEY, roles);
+    }
+
+    public getResponseAuth(): string {
+        return sessionStorage.getItem(RESPONSEAUTH_KEY);
+    }
+
+    public setResponseAuth(responseAuth: string): void {
+        sessionStorage.setItem(RESPONSEAUTH_KEY, responseAuth);
+    }
+
+    public getToken(): string {
+        return sessionStorage.getItem(TOKEN_KEY);
+    }
+
+    public setToken(token: string): void {
+        sessionStorage.setItem(TOKEN_KEY, token);
+    }
+
+    public saveRefreshToken(token: string): void {
+        sessionStorage.removeItem(REFRESHTOKEN_KEY);
+        sessionStorage.setItem(REFRESHTOKEN_KEY, token);
+    }
+
+    public getRefreshToken(): string | null {
+        return sessionStorage.getItem(REFRESHTOKEN_KEY);
+    }
+
+    public getCurrentUser(): string {
+        return sessionStorage.getItem(CURRENTUSER_KEY);
+    }
+
+    public setCurrentUser(socialUser: string): void {
+        sessionStorage.setItem(CURRENTUSER_KEY, socialUser);
+    }
+
+    encrypt(data) {
+        var cryptoOut = CryptoJS.AES.encrypt(JSON.stringify(data), 'epn2022**').toString();
+        return cryptoOut;
+    }
+
+    desencrypt(data) {
+        var bytes = CryptoJS.AES.decrypt(data, "epn2022**");
+        var originalText = bytes.toString(CryptoJS.enc.Utf8);
+        return originalText;
+    }
+
+    logOut(): void {
+        sessionStorage.clear();
+    }
+}

src/app/_service/utils/app.breadcrumb.service.ts

+import { Injectable } from '@angular/core';
+import { Subject ,  Observable } from 'rxjs';
+import { MenuItem } from 'primeng/api';
+
+@Injectable()
+export class BreadcrumbService {
+
+    private itemsSource = new Subject<MenuItem[]>();
+
+    itemsHandler = this.itemsSource.asObservable();
+
+    setItems(items: MenuItem[]) {
+        this.itemsSource.next(items);
+    }
+}

src/app/_service/utils/file.service.ts

+import {Injectable} from '@angular/core';
+import {HttpClient, HttpEvent, HttpRequest} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {AppService} from '../app.service';
+import {environment} from '../../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FileService {
+  constructor(private http: HttpClient, public appService: AppService) {
+  }
+
+  url = `${environment.HOST}/`;
+  endpoint = 'private/files';
+
+  // Metodo que envia los archivos al endpoint /upload
+  uploadSingleFile(file: any, proceso: string, nombre: string): Observable<HttpEvent<any>> {
+    const formData: FormData = new FormData();
+    formData.append('file', file, nombre);
+
+    const req = new HttpRequest('POST', this.url + this.endpoint + '/uploadIndirect', formData, {
+      reportProgress: true,
+      responseType: 'json'
+    });
+    return this.http.request(req);
+  }
+
+  uploadManyFiles(fileMany: any, proceso: string): Observable<HttpEvent<any>> {
+    const formData: FormData = new FormData();
+    for (const file of fileMany) {
+      formData.append('file', file, file.name);
+    }
+
+
+    const req = new HttpRequest('POST', this.url + this.endpoint + '/uploadIndirect', formData, {
+      reportProgress: true,
+      responseType: 'json'
+    });
+    return this.http.request(req);
+  }
+
+  // metodo para descargar por nombre
+  getFileByName(fileName: string, proceso: string) {
+    this.http.get(this.url + this.endpoint + '/fileByName/' + fileName + '/' + proceso, {responseType: 'blob'}).subscribe(data => {
+      console.log('DATA RESPONSE: ' + JSON.stringify(data));
+      const downloadURL = window.URL.createObjectURL(data);
+      console.log('DATA : ' + JSON.stringify(downloadURL));
+      const link = document.createElement('a');
+      link.href = downloadURL;
+
+      console.log('link.href : ' + JSON.stringify(link.href));
+
+      link.download = fileName;
+      link.click();
+    }), error => {
+      console.log(error);
+    };
+  }
+
+  getFileByNameView(fileName: string, proceso: string): any{
+    this.http.get(this.url + this.endpoint + '/fileByNameView/' + fileName + '/' + proceso, {responseType: 'blob'}).subscribe(data => {
+      console.log('DATA RESPONSE: ' + JSON.stringify(data));
+      const fileURL = window.URL.createObjectURL(data);
+
+      console.log('DATA :: ', data);
+      console.log(fileURL);
+      return fileURL;
+    }), error => {
+      console.log(error);
+    };
+  }
+
+  // Metodo para Obtener los archivos
+  getFiles() {
+    return this.http.get(this.url + this.endpoint + '/files');
+  }
+
+  // Metodo para borrar los archivos
+  deleteFile(filename: string) {
+    return this.http.get(this.url + this.endpoint + '/delete/' + filename);
+  }
+
+}

src/app/_service/utils/sweet-alert.service.ts

+import {Injectable} from '@angular/core';
+import Swal from 'sweetalert2/dist/sweetalert2.js';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class SweetAlertService {
+    constructor() {
+    }
+
+    panelWait;
+
+    simpleAlert() {
+        this.panelWait = Swal.fire({
+            title: 'Espere por favor',
+            text: 'Estamos procesando su solicitud',
+            allowOutsideClick: false,
+            didOpen: () => {
+                Swal.showLoading();
+            }
+        });
+    }
+
+    sAlertValidandoDatosExternos() {
+        this.panelWait = Swal.fire({
+            title: 'Espere por favor',
+            text: 'Estamos validando sus datos externamente',
+            allowOutsideClick: false,
+            didOpen: () => {
+                Swal.showLoading();
+            }
+        });
+    }
+
+    sesionTimeout() {
+        Swal.fire({
+            showClass: {
+                popup: 'animated fadeInDown slow',
+            },
+            hideClass: {
+                popup: 'animated fadeOutUp slow',
+            },
+            title: '',
+            text: 'Su sesión ha expirado, por favor vuelva a ingresar',
+            imageUrl: '../../../assets/img/session_timeout.png',
+            imageWidth: 200,
+            imageHeight: 200,
+            imageAlt: 'Sesión Expirada',
+            confirmButtonText: 'Volver a Ingresar',
+            showConfirmButton: true,
+        })
+    }
+
+    alertWithSuccess() {
+        Swal.fire('Thank you...', 'You submitted succesfully!', 'success')
+    }
+
+    erroalert(message) {
+        Swal.fire({
+            icon: 'error',
+            title: 'Oops...',
+            text: message,
+            customClass: 'swal2-container',
+            footer: '<a href>Por qué ocurre este inconveniente?</a>'
+        })
+    }
+
+    topend() {
+        Swal.fire({
+            position: 'top-end',
+            icon: 'success',
+            title: 'Your work has been saved',
+            showConfirmButton: false,
+            timer: 1500
+        })
+    }
+
+    confirmBox() {
+        Swal.fire({
+            title: 'Are you sure want to remove?',
+            text: 'You will not be able to recover this file!',
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonText: 'Yes, delete it!',
+            cancelButtonText: 'No, keep it'
+        }).then((result) => {
+            console.log(result);
+            if (result.value) {
+                Swal.fire(
+                    'Deleted!',
+                    'Your imaginary file has been deleted.',
+                    'success'
+                )
+            } else if (result.dismiss === Swal.DismissReason.cancel) {
+                Swal.fire(
+                    'Cancelled',
+                    'Your imaginary file is safe :)',
+                    'error'
+                )
+            }
+        })
+    }
+
+    imageBox(title, text, urlImage) {
+        this.panelWait = Swal.fire({
+            title: title,
+            text: text,
+            imageUrl: urlImage,
+            imageWidth: 400,
+            imageHeight: 200,
+            imageAlt: 'Enviando...',
+            showConfirmButton: true,
+        })
+    }
+
+    animatedBox() {
+        Swal.fire({
+            title: 'Custom width, padding, color, background.',
+            width: 600,
+            padding: '3em',
+            color: '#716add',
+            background: '#fff url(https://e1.pngegg.com/pngimages/461/900/png-clipart-green-leaf-trees.png)',
+            backdrop: `
+    rgba(0,0,123,0.4)
+    url("./assets/img/nyan-cat.gif")
+    left top
+    no-repeat
+  `
+        })
+    }
+
+    timerBox() {
+        let timerInterval
+        Swal.fire({
+            title: 'Auto close alert!',
+            html: 'I will close in <b></b> milliseconds.',
+            timer: 2000,
+            timerProgressBar: true,
+            didOpen: () => {
+                Swal.showLoading()
+                const b = Swal.getHtmlContainer().querySelector('b')
+                timerInterval = setInterval(() => {
+                    //b.textContent = Swal.getTimerLeft()
+                }, 100)
+            },
+            willClose: () => {
+                clearInterval(timerInterval)
+            }
+        }).then((result) => {
+            /* Read more about handling dismissals below */
+            if (result.dismiss === Swal.DismissReason.timer) {
+                console.log('I was closed by the timer')
+            }
+        })
+    }
+
+
+}

src/app/app-routing.module.ts

+import {RouterModule, Routes} from '@angular/router';
+import {NgModule} from '@angular/core';
+import {AppMainComponent} from './layout/content/app.main.component';
+import {AppNotfoundComponent} from './main/notfound/app.notfound.component';
+import {AppErrorComponent} from './main/error/app.error.component';
+import {AppAccessdeniedComponent} from './main/forbidden/app.accessdenied.component';
+import {AppLoginComponent} from './main/pages/login/app.login.component';
+import {AppHelpComponent} from './main/help/app.help.component';
+
+import {DashboardDemoComponent} from "./main/dashboard/components/dashboarddemo.component";
+import {AppComponent} from "./app.component";
+import {AuthGuard} from "./_guards/auth.guard";
+
+
+const appRoutes: Routes = [
+    {
+        path: '', component:AppMainComponent,
+        canActivate: [AuthGuard],
+        canActivateChild: [AuthGuard],
+        loadChildren: () => import('./main/pages/pages.module').then(m => m.PagesModule),
+    },
+    {
+        path: 'authentication/login', component:AppLoginComponent,
+    },
+    {path: 'error', component: AppErrorComponent},
+    {path: 'access', component: AppAccessdeniedComponent},
+    {path: 'notfound', component: AppNotfoundComponent},
+    {path: '**', redirectTo: '/notfound'},
+];
+@NgModule({
+    imports: [
+        RouterModule.forRoot(appRoutes, {scrollPositionRestoration: 'enabled'})
+    ],
+    exports: [RouterModule]
+})
+export class AppRoutingModule {
+}

src/app/app.code.component.scss

+.p-d-flex > div,
+.box {
+	background-color: var(--surface-e);
+	text-align: center;
+	padding: 1rem;
+	border-radius: 4px;
+	box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+}
+
+.p-d-flex > div {
+	width: 8rem;
+}
+
+i:not([class~="pi"]) {
+	background-color: var(--surface-b);
+	color: var(--primary-color);
+	font-family: Monaco, courier, monospace;
+	font-style: normal;
+	font-size: 12px;
+	padding: 2px 4px;
+	letter-spacing: .5px;
+	border-radius: 3px;
+	font-weight: 600;
+	margin: 0 2px;
+}
+
+:host ::ng-deep pre[class*="language-"] {
+	box-shadow: none;
+	border: 0 none;
+
+	&:before, &:after {
+		display: none !important;
+	}
+
+	code {
+		border-left: 10px solid var(--surface-d) !important;
+		box-shadow: none !important;
+		background: var(--surface-b) !important;
+		margin: 1em 0;
+		color: var(--text-color);
+		font-size: 14px;
+
+		.token {
+			&.tag,
+			&.keyword {
+				color: #2196F3 !important;
+			}
+
+			&.attr-name,
+			&.attr-string {
+				color: #2196F3 !important;
+			}
+
+			&.attr-value {
+				color: #4CAF50 !important;
+			}
+
+			&.punctuation {
+				color: var(--text-color);
+			}
+
+			&.operator,
+			&.string {
+				background: transparent;
+			}
+		}
+	}
+}

src/app/app.code.component.ts

+import { Component, ElementRef, AfterViewInit, Input, NgModule, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'app-code',
+    template: `
+        <pre [ngClass]="'language-' + lang"><code #code><ng-content></ng-content>
+</code></pre>
+    `,
+    styleUrls: ['./app.code.component.scss']
+})
+export class AppCodeComponent implements AfterViewInit {
+
+    @Input() lang = 'markup';
+
+    @ViewChild('code') codeViewChild: ElementRef;
+
+    constructor(public el: ElementRef) { }
+
+    ngAfterViewInit() {
+        if (window['Prism']) {
+            window['Prism'].highlightElement(this.codeViewChild.nativeElement);
+        }
+    }
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [AppCodeComponent],
+    declarations: [AppCodeComponent]
+})
+export class AppCodeModule { }

src/app/app.component.html

+<p-toast [baseZIndex]="5000"></p-toast>
+<!--<p-toast [baseZIndex]="5000">
+    <ng-template let-message pTemplate="message">
+        <div class="flex p-grid justify-content-evenly align-items-center">
+            <img width="12%" src="assets/img/buho-rojo.png">
+            <div>
+                <h4>{{message.summary}}</h4>
+                <p>{{message.detail}}</p>
+            </div>
+        </div>
+    </ng-template>
+</p-toast>-->
+<router-outlet></router-outlet>

src/app/app.component.spec.ts

+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { AppComponent } from './app.component';
+import { AppMainComponent } from './layout/content/app.main.component';
+import { AppConfigComponent } from './layout/config/app.config.component';
+import { AppTopBarComponent } from './layout/header/app.topbar.component';
+import { AppFooterComponent } from './layout/footer/app.footer.component';
+import { AppMenuComponent } from './layout/menu/app.menu.component';
+
+describe('AppComponent', () => {
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [NoopAnimationsModule, RouterTestingModule],
+            declarations: [
+                AppComponent,
+                AppMainComponent,
+                AppConfigComponent,
+                AppTopBarComponent,
+                AppMenuComponent,
+                AppFooterComponent,
+            ]
+        }).compileComponents();
+    }));
+    it('should create the app', async(() => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.debugElement.componentInstance;
+        expect(app).toBeTruthy();
+    }));
+});

src/app/app.component.ts

+import {Component, OnInit} from '@angular/core';
+import {PrimeNGConfig} from 'primeng/api';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnInit {
+    menuMode = 'static';
+
+    colorScheme = 'light';
+
+    menuTheme = 'layout-sidebar-blue';
+
+    inputStyle = 'outlined';
+
+    ripple: boolean;
+
+    constructor(private primengConfig: PrimeNGConfig) {
+    }
+
+    ngOnInit() {
+        this.primengConfig.ripple = true;
+        this.ripple = true;
+    }
+}

src/app/layout/config/app.config.component.ts

+import {Component, OnInit} from '@angular/core';
+import { AppMainComponent } from '../content/app.main.component';
+import { AppComponent } from '../../app.component';
+
+@Component({
+    selector: 'app-config',
+    template: `
+        <a style="cursor: pointer" id="layout-config-button" class="layout-config-button" (click)="onConfigButtonClick($event)">
+            <i class="pi pi-cog"></i>
+        </a>
+        <div class="layout-config" [ngClass]="{'layout-config-active': appMain.configActive}" (click)="appMain.onConfigClick($event)">
+            <h5>Menu Type</h5>
+            <div class="p-field-radiobutton">
+                <p-radioButton name="menuMode" value="static" [(ngModel)]="app.menuMode" inputId="mode1"></p-radioButton>
+                <label for="mode1">Static</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <p-radioButton name="menuMode" value="overlay" [(ngModel)]="app.menuMode" inputId="mode2"></p-radioButton>
+                <label for="mode2">Overlay</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <p-radioButton name="menuMode" value="slim" [(ngModel)]="app.menuMode" inputId="mode3"></p-radioButton>
+                <label for="mode3">Slim</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <p-radioButton name="menuMode" value="horizontal" [(ngModel)]="app.menuMode" inputId="mode4"></p-radioButton>
+                <label for="mode4">Horizontal</label>
+            </div>
+
+            <hr />
+
+            <h5>Color Scheme</h5>
+            <div class="p-field-radiobutton">
+                <p-radioButton name="colorScheme" value="dark" [(ngModel)]="app.colorScheme" inputId="theme1" (onClick)="changeColorScheme('dark')"></p-radioButton>
+                <label for="theme1">Dark</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <p-radioButton name="colorScheme" value="dim" [(ngModel)]="app.colorScheme" inputId="theme2" (onClick)="changeColorScheme('dim')"></p-radioButton>
+                <label for="theme2">Dim</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <p-radioButton name="colorScheme" value="light" [(ngModel)]="app.colorScheme" inputId="theme3" (onClick)="changeColorScheme('light')"></p-radioButton>
+                <label for="theme3">Light</label>
+            </div>
+
+            <hr />
+
+            <h5>Input Style</h5>
+            <div class="p-field-radiobutton">
+                <p-radioButton name="inputStyle" value="outlined" [(ngModel)]="app.inputStyle" inputId="inputStyle1"></p-radioButton>
+                <label for="inputStyle1">Outlined</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <p-radioButton name="inputStyle" value="filled" [(ngModel)]="app.inputStyle" inputId="inputStyle2"></p-radioButton>
+                <label for="inputStyle2">Filled</label>
+            </div>
+
+            <hr />
+
+            <h5>Ripple Effect</h5>
+			<p-inputSwitch [ngModel]="app.ripple" (onChange)="appMain.onRippleChange($event)"></p-inputSwitch>
+
+            <hr />
+
+            <h5>Menu Themes</h5>
+            <div class="layout-themes" *ngIf="app.colorScheme === 'light'">
+                <div *ngFor="let theme of menuThemes">
+                    <a style="cursor: pointer" (click)="changeMenuTheme(theme.name, theme.logoColor, theme.componentTheme)" [ngStyle]="{'background-color': theme.color}"></a>
+                </div>
+            </div>
+            <div *ngIf="app.colorScheme !== 'light'">
+                <p>Menu themes are available in light mode and static, slim, overlay menu modes by design as large surfaces can emit too much brightness in dark mode.</p>
+            </div>
+
+            <hr />
+
+            <h5>Component Themes</h5>
+            <div class="layout-themes">
+                <div *ngFor="let theme of componentThemes">
+                    <a style="cursor: pointer" (click)="changeComponentTheme(theme.name)" [ngStyle]="{'background-color': theme.color}"></a>
+                </div>
+            </div>
+        </div>
+    `
+})
+export class AppConfigComponent implements OnInit {
+
+    menuThemes: any[];
+
+    componentThemes: any[];
+
+    tempMenuColor = 'darkgray';
+
+    tempLogoColor = 'white';
+
+    constructor(public app: AppComponent, public appMain: AppMainComponent) {}
+
+    ngOnInit() {
+        this.componentThemes = [
+            {name: 'blue', color: '#42A5F5'},
+            {name: 'green', color: '#66BB6A'},
+            {name: 'lightgreen', color: '#9CCC65'},
+            {name: 'purple', color: '#AB47BC'},
+            {name: 'deeppurple', color: '#7E57C2'},
+            {name: 'indigo', color: '#5C6BC0'},
+            {name: 'orange', color: '#FFA726'},
+            {name: 'cyan', color: '#26C6DA'},
+            {name: 'pink', color: '#EC407A'},
+            {name: 'teal', color: '#26A69A'}
+        ];
+
+        this.menuThemes = [
+            {name: 'white', color: '#ffffff', logoColor: 'dark', componentTheme: null},
+            {name: 'darkgray', color: '#343a40', logoColor: 'white', componentTheme: null},
+            {name: 'blue', color: '#1976d2', logoColor: 'white', componentTheme: 'blue'},
+            {name: 'bluegray', color: '#455a64', logoColor: 'white', componentTheme: 'lightgreen'},
+            {name: 'brown', color: '#5d4037', logoColor: 'white', componentTheme: 'cyan'},
+            {name: 'cyan', color: '#0097a7', logoColor: 'white', componentTheme: 'cyan'},
+            {name: 'green', color: '#388e3C', logoColor: 'white', componentTheme: 'green'},
+            {name: 'indigo', color: '#303f9f', logoColor: 'white', componentTheme: 'indigo'},
+            {name: 'deeppurple', color: '#512da8', logoColor: 'white', componentTheme: 'deeppurple'},
+            {name: 'orange', color: '#F57c00', logoColor: 'dark', componentTheme: 'orange'},
+            {name: 'pink', color: '#c2185b', logoColor: 'white', componentTheme: 'pink'},
+            {name: 'purple', color: '#7b1fa2', logoColor: 'white', componentTheme: 'purple'},
+            {name: 'teal', color: '#00796b', logoColor: 'white', componentTheme: 'teal'},
+        ];
+    }
+
+    changeColorScheme(scheme) {
+        this.changeStyleSheetsColor('layout-css', 'layout-' + scheme + '.css', 1);
+        this.changeStyleSheetsColor('theme-css', 'theme-' + scheme + '.css', 1);
+    }
+
+    changeMenuTheme(name, logoColor, componentTheme) {
+        this.tempMenuColor = name;
+        this.tempLogoColor = logoColor;
+        this.app.menuTheme = 'layout-sidebar-' + name;
+        this.changeStyleSheetsColor('theme-css', componentTheme, 2);
+
+        const appLogoLink: HTMLImageElement = document.getElementById('app-logo') as HTMLImageElement;
+        const horizontalLogoLink: HTMLImageElement = document.getElementById('logo-horizontal') as HTMLImageElement;
+
+        if (logoColor === 'dark') {
+            horizontalLogoLink.src = 'assets/layout/images/logo-dark.svg';
+            appLogoLink.src = 'assets/layout/images/logo-dark.svg';
+        }
+        else {
+            horizontalLogoLink.src = 'assets/layout/images/logo-white.svg';
+            appLogoLink.src = 'assets/layout/images/logo-white.svg';
+        }
+    }
+
+    changeComponentTheme(theme) {
+        this.changeStyleSheetsColor('theme-css', theme, 3);
+    }
+
+    changeStyleSheetsColor(id, value, from) {
+        const element = document.getElementById(id);
+        const urlTokens = element.getAttribute('href').split('/');
+
+        if (from === 1) {           // which function invoked this function
+            urlTokens[urlTokens.length - 1] = value;
+        }
+        else if (from === 2) {       // which function invoked this function
+            if (value !== null) {
+                urlTokens[urlTokens.length - 2] = value;
+            }
+        }
+        else if (from === 3) {       // which function invoked this function
+            urlTokens[urlTokens.length - 2] = value;
+        }
+
+        const newURL = urlTokens.join('/');
+
+        this.replaceLink(element, newURL);
+    }
+
+    replaceLink(linkElement, href) {
+        if (this.isIE()) {
+            linkElement.setAttribute('href', href);
+        }
+        else {
+            const id = linkElement.getAttribute('id');
+            const cloneLinkElement = linkElement.cloneNode(true);
+
+            cloneLinkElement.setAttribute('href', href);
+            cloneLinkElement.setAttribute('id', id + '-clone');
+
+            linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+
+            cloneLinkElement.addEventListener('load', () => {
+                linkElement.remove();
+                cloneLinkElement.setAttribute('id', id);
+            });
+        }
+    }
+
+    isIE() {
+        return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
+    }
+
+    onConfigButtonClick(event) {
+        this.appMain.configActive = !this.appMain.configActive;
+        this.appMain.configClick = true;
+        event.preventDefault();
+    }
+
+    onConfigCloseClick(event) {
+        this.appMain.configActive = false;
+        event.preventDefault();
+    }
+}

src/app/layout/content/app.main.component.html

+<div class="layout-wrapper" [ngClass]="{
+    'layout-overlay': app.menuMode === 'overlay',
+    'layout-static': app.menuMode === 'static',
+    'layout-slim': app.menuMode === 'slim',
+    'layout-horizontal': app.menuMode === 'horizontal',
+    'layout-sidebar-dim': app.colorScheme === 'dim',
+    'layout-sidebar-dark': app.colorScheme === 'dark',
+    'layout-overlay-active': overlayMenuActive,
+    'layout-mobile-active': staticMenuMobileActive,
+    'layout-static-inactive': staticMenuDesktopInactive && app.menuMode === 'static',
+    'p-input-filled': app.inputStyle === 'filled', 'p-ripple-disabled': !app.ripple}" [class]="app.colorScheme === 'light' ? app.menuTheme : ''"
+     [attr.data-theme]="app.colorScheme" (click)="onLayoutClick()">
+
+    <div class="layout-content-wrapper">
+        <app-topbar></app-topbar>
+
+        <div class="layout-content">
+
+            <ng-template ngFor let-item let-last="last" [ngForOf]="items">
+                <span class="viewname" style="text-transform: uppercase">{{item.label}}</span>
+            </ng-template>
+
+            <router-outlet></router-outlet>
+        </div>
+        <app-footer></app-footer>
+    </div>
+
+    <app-config></app-config>
+
+    <app-search></app-search>
+
+    <app-rightmenu></app-rightmenu>
+</div>

src/app/layout/content/app.main.component.scss

+:host {
+    display: block;
+}
+
+.content-wrapper > *:first-child {
+    display: block;
+}

src/app/layout/content/app.main.component.ts

+import {Component, OnDestroy} from '@angular/core';
+import {MenuService} from '../menu/app.menu.service';
+import {MenuItem, PrimeNGConfig} from 'primeng/api';
+import {AppComponent} from '../../app.component';
+import {Subscription} from "rxjs";
+import {BreadcrumbService} from "../../_service/utils/app.breadcrumb.service";
+
+@Component({
+    selector: 'app-main',
+    templateUrl: './app.main.component.html',
+    styleUrls: ['./app.main.component.scss'],
+})
+export class AppMainComponent implements OnDestroy {
+
+    subscription: Subscription;
+
+    items: MenuItem[];
+
+    overlayMenuActive: boolean;
+
+    staticMenuDesktopInactive: boolean;
+
+    staticMenuMobileActive: boolean;
+
+    menuClick: boolean;
+
+    search = false;
+
+    searchClick = false;
+
+    userMenuClick: boolean;
+
+    topbarUserMenuActive: boolean;
+
+    notificationMenuClick: boolean;
+
+    topbarNotificationMenuActive: boolean;
+
+    profilesMenuClick: boolean
+    profilesMenuActive: boolean;
+
+    rightMenuClick: boolean;
+
+    rightMenuActive: boolean;
+
+    configActive: boolean;
+
+    configClick: boolean;
+
+    resetMenu: boolean;
+
+    menuHoverActive = false;
+
+    constructor(private menuService: MenuService, private primengConfig: PrimeNGConfig,
+                public app: AppComponent, public breadcrumbService: BreadcrumbService) {
+        this.subscription = breadcrumbService.itemsHandler.subscribe(response => {
+            this.items = response;
+        });
+    }
+
+    onLayoutClick() {
+        if (!this.searchClick) {
+            this.search = false;
+        }
+
+        if (!this.userMenuClick) {
+            this.topbarUserMenuActive = false;
+        }
+
+        if (!this.notificationMenuClick) {
+            this.topbarNotificationMenuActive = false;
+        }
+
+        if(!this.profilesMenuClick){
+            this.profilesMenuActive = false;
+        }
+
+        if (!this.rightMenuClick) {
+            this.rightMenuActive = false;
+        }
+
+        if (!this.menuClick) {
+            if (this.isSlim() || this.isHorizontal()) {
+                this.menuService.reset();
+            }
+
+            if (this.overlayMenuActive || this.staticMenuMobileActive) {
+                this.hideOverlayMenu();
+            }
+
+            this.menuHoverActive = false;
+            this.unblockBodyScroll();
+        }
+
+        if (this.configActive && !this.configClick) {
+            this.configActive = false;
+        }
+
+        this.searchClick = false;
+        this.configClick = false;
+        this.userMenuClick = false;
+        this.rightMenuClick = false;
+        this.notificationMenuClick = false;
+        this.profilesMenuClick= false;
+        this.menuClick = false;
+    }
+
+    onMenuButtonClick(event) {
+        this.menuClick = true;
+        this.topbarUserMenuActive = false;
+        this.topbarNotificationMenuActive = false;
+        this.profilesMenuActive = false;
+        this.rightMenuActive = false;
+
+        if (this.isOverlay()) {
+            this.overlayMenuActive = !this.overlayMenuActive;
+        }
+
+        if (this.isDesktop()) {
+            this.staticMenuDesktopInactive = !this.staticMenuDesktopInactive;
+        } else {
+            this.staticMenuMobileActive = !this.staticMenuMobileActive;
+            if (this.staticMenuMobileActive) {
+                this.blockBodyScroll();
+            } else {
+                this.unblockBodyScroll();
+            }
+        }
+
+        event.preventDefault();
+    }
+
+    onSearchClick(event) {
+        this.search = !this.search;
+        this.searchClick = !this.searchClick;
+    }
+
+    onSearchHide(event) {
+        this.search = false;
+        this.searchClick = false;
+    }
+
+    onMenuClick($event) {
+        this.menuClick = true;
+        this.resetMenu = false;
+    }
+
+    onTopbarUserMenuButtonClick(event) {
+        this.userMenuClick = true;
+        this.topbarUserMenuActive = !this.topbarUserMenuActive;
+
+        this.hideOverlayMenu();
+
+        event.preventDefault();
+    }
+
+    onTopbarNotificationMenuButtonClick(event) {
+        this.notificationMenuClick = true;
+        this.topbarNotificationMenuActive = !this.topbarNotificationMenuActive;
+
+        this.hideOverlayMenu();
+
+        event.preventDefault();
+    }
+
+    onTopbarProfilesMenuButtonClick(event){
+        this.profilesMenuClick = true;
+        this.profilesMenuActive = !this.profilesMenuActive;
+
+        this.hideOverlayMenu();
+        event.preventDefault();
+    }
+
+    onRightMenuClick(event) {
+        this.rightMenuClick = true;
+        this.rightMenuActive = !this.rightMenuActive;
+
+        this.hideOverlayMenu();
+
+        event.preventDefault();
+    }
+
+    onRippleChange(event) {
+        this.app.ripple = event.checked;
+        this.primengConfig = event.checked;
+    }
+
+    onConfigClick(event) {
+        this.configClick = true;
+    }
+
+    isSlim() {
+        return this.app.menuMode === 'slim';
+    }
+
+    isHorizontal() {
+        return this.app.menuMode === 'horizontal';
+    }
+
+    isOverlay() {
+        return this.app.menuMode === 'overlay';
+    }
+
+    isDesktop() {
+        return window.innerWidth > 1091;
+    }
+
+    isMobile() {
+        return window.innerWidth <= 1091;
+    }
+
+    hideOverlayMenu() {
+        this.overlayMenuActive = false;
+        this.staticMenuMobileActive = false;
+    }
+
+    blockBodyScroll(): void {
+        if (document.body.classList) {
+            document.body.classList.add('blocked-scroll');
+        } else {
+            document.body.className += ' blocked-scroll';
+        }
+    }
+
+    unblockBodyScroll(): void {
+        if (document.body.classList) {
+            document.body.classList.remove('blocked-scroll');
+        } else {
+            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' +
+                'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+}

src/app/layout/footer/app.footer.component.html

+<div class="layout-footer">
+    <div class="footer-logo-container">
+        <img id="footer-logo" src="../../../assets/img/epn.png" alt="diamond-layout"/>
+        <span class="app-name">LABORATORIOS</span>
+    </div>
+    <span class="copyright">&#169; EPN - {{actualDate | date : 'yyyy'}}</span>
+</div>

src/app/layout/footer/app.footer.component.ts

+import {Component} from '@angular/core';
+import {AppComponent} from '../../app.component';
+
+@Component({
+    selector: 'app-footer',
+    templateUrl: './app.footer.component.html'
+})
+export class AppFooterComponent {
+
+    actualDate: Date;
+
+    constructor(public app: AppComponent) {
+        this.actualDate = new Date();
+    }
+}

src/app/layout/header/app.topbar.component.html

+<div class="layout-topbar">
+    <div class="topbar-left">
+        <a tabindex="0" class="menu-button" (click)="appMain.onMenuButtonClick($event)">
+            <i class="pi pi-chevron-left"></i>
+        </a>
+        <img id="logo-horizontal" class="horizontal-logo" [routerLink]="['/']" src="../../../assets/img/epn.png" alt="diamond-layout" />
+        <span class="topbar-separator"></span>
+        <ng-template ngFor let-item let-last="last" [ngForOf]="items">
+            <span class="viewname" style="text-transform: uppercase">{{item.label}}</span>
+        </ng-template>
+        <img id="logo-mobile" class="mobile-logo" [src]="'assets/img/epn.png'" alt="diamond-layout" />
+    </div>
+
+    <app-menu></app-menu>
+
+    <div class="layout-mask modal-in"></div>
+
+    <div class="topbar-right">
+        <ul class="topbar-menu">
+            <li class="search-item">
+                <a tabindex="0" (click)="appMain.onSearchClick($event)">
+                    <i class="pi pi-search"></i>
+                </a>
+            </li>
+            <li class='notifications-item' [ngClass]="{'active-menuitem ': appMain.topbarNotificationMenuActive}">
+                <a href="#" tabindex="0" (click)="appMain.onTopbarNotificationMenuButtonClick($event)">
+                    <i class="pi pi-bell"></i>
+                    <span class="topbar-badge">5</span>
+                </a>
+                <ul class="notifications-menu fade-in-up">
+                    <li role="menuitem">
+                        <a href="#" tabindex="0">
+                            <i class="pi pi-shopping-cart"></i>
+                            <div class="notification-item">
+                                <div class="notification-summary">New Order</div>
+                                <div class="notification-detail">You have <strong>3</strong> new orders.</div>
+                            </div>
+                        </a>
+                    </li>
+                    <li role="menuitem">
+                        <a href="#" tabindex="0">
+                            <i class="pi pi-check-square"></i>
+                            <div class="notification-item">
+                                <div class="notification-summary">Withdrawn Completed</div>
+                                <div class="notification-detail">Funds are on their way.</div>
+                            </div>
+                        </a>
+                    </li>
+                    <li role="menuitem">
+                        <a href="#" tabindex="0">
+                            <i class="pi pi-chart-line"></i>
+                            <div class="notification-item">
+                                <div class="notification-summary">Monthly Reports</div>
+                                <div class="notification-detail">New reports are ready.</div>
+                            </div>
+                        </a>
+                    </li>
+                    <li role="menuitem">
+                        <a href="#" tabindex="0">
+                            <i class="pi pi-comments"></i>
+                            <div class="notification-item">
+                                <div class="notification-summary">Comments</div>
+                                <div class="notification-detail"><strong>2</strong> new comments.</div>
+                            </div>
+                        </a>
+                    </li>
+                    <li role="menuitem">
+                        <a href="#" tabindex="0">
+                            <i class="pi pi-exclamation-circle"></i>
+                            <div class="notification-item">
+                                <div class="notification-summary">Chargeback Request</div>
+                                <div class="notification-detail"><strong>1</strong> to review.</div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </li>
+
+            <li class="profile-item" [ngClass]="{'active-menuitem fadeInDown': appMain.topbarUserMenuActive}">
+                <a href="#" (click)="appMain.onTopbarUserMenuButtonClick($event)">
+                    <img [src]="imgURL" alt="diamond-layout" class="profile-image img-fluid"/>
+                    <span class="profile-name">{{currentUser}}</span>
+                </a>
+                <ul class="profile-menu fade-in-up">
+                    <li>
+                        <a href="#">
+                            <i class="pi pi-user"></i>
+                            <span>Perfil</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#">
+                            <i class="pi pi-cog"></i>
+                            <span>Configuración</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="#">
+                            <i class="pi pi-calendar"></i>
+                            <span>Calendario</span>
+                        </a>
+                    </li>
+
+                    <li>
+                        <a href="#" (click)="logout()">
+                            <i class="pi pi-power-off"></i>
+                            <span>Cerrar Sesión</span>
+                        </a>
+                    </li>
+                </ul>
+            </li>
+
+            <li class='notifications-item' [ngClass]="{'active-menuitem': appMain.profilesMenuActive}">
+                <a href="#" (click)="appMain.onTopbarProfilesMenuButtonClick($event)">
+                    <i class="pi pi-users"></i>
+                    <span class="topbar-badge">{{roles != null ? roles.length:0}}</span>
+                </a>
+                <ul class="profile-menu fade-in-up" >
+                    <li role="menuitem" *ngFor="let rol of roles">
+                        <a  tabindex="0"
+                        (click)="clearMenuLab(rol)">
+                            <i [ngClass]="rol !== '1:Laboratorios' ? 'pi pi-prime':'pi pi-user'"></i>
+                            <div class="notification-item ml-5">
+                                <div class="notification-summary">{{rol}}</div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </li>
+
+            <li class="right-sidebar-item">
+                <a href="#" tabindex="0" (click)="appMain.onRightMenuClick($event)">
+                    <i class="pi pi-align-right"></i>
+                </a>
+            </li>
+        </ul>
+    </div>
+</div>

src/app/layout/header/app.topbar.component.ts

+import {Component, OnDestroy} from '@angular/core';
+import {AppComponent} from '../../app.component';
+import {AppMainComponent} from '../content/app.main.component';
+import {BreadcrumbService} from '../../_service/utils/app.breadcrumb.service';
+import {Subscription} from 'rxjs';
+import {MenuItem} from 'primeng/api';
+import {TokenService} from "../../_service/token.service";
+import {AppService} from "../../_service/app.service";
+import {MenuLightService} from "../../_service/menu.service";
+import {Router} from "@angular/router";
+
+@Component({
+    selector: 'app-topbar',
+    templateUrl: './app.topbar.component.html'
+})
+export class AppTopBarComponent implements OnDestroy {
+
+    subscription: Subscription;
+    imgURL = 'data:image/jpg;base64,';
+    currentUser: string;
+    roles: any[] = [];
+
+    items: MenuItem[];
+
+    constructor(public breadcrumbService: BreadcrumbService,
+                public app: AppComponent,
+                public router: Router,
+                private menuService: MenuLightService,
+                public appMain: AppMainComponent,
+                private tokenService: TokenService,
+                private appService: AppService) {
+        this.subscription = breadcrumbService.itemsHandler.subscribe(response => {
+            this.items = response;
+        });
+        if (this.tokenService.getCurrentUser() != null) {
+            this.imgURL = "https://2.bp.blogspot.com/-ZecRzu-6rLI/TsIHy8oGBsI/AAAAAAAABJA/3kymvuNE5WQ/s1600/2-Avatares-para-Facebook.jpg"
+            this.currentUser = this.tokenService.getCurrentUser();
+            this.roles = JSON.parse(this.tokenService.getRoles());
+        }
+    }
+
+    logout() {
+        this.appService.logout();
+    }
+
+    clearMenuLab(rol) {
+        if (rol.includes('Administrador del Sistema')) {
+            this.menuService.setMenusJsonLab(null);
+            this.router.navigate(['dashboard'])
+                .then(() => {
+                    window.location.reload();
+                });
+        } else {
+            this.router.navigate(['laboratorio-lista'])
+                .then(() => {
+                    window.location.reload();
+                });
+
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+}

src/app/layout/menu/app.menu.component.html

+<div class="layout-sidebar" (click)="appMain.onMenuClick($event)">
+    <a [routerLink]="['/']" class="logo">
+        <img id="app-logo" class="logo-image" src="../../../assets/img/epn.png" alt="diamond-ng"/>
+        <span class="app-name">EPN</span>
+    </a>
+
+    <div class="layout-menu-container">
+
+
+
+        <ul class="layout-menu">
+            <ng-container *ngFor="let item of model; let i = index;">
+                <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
+                <li *ngIf="item.separator" class="menu-separator"></li>
+            </ng-container>
+        </ul>
+
+        <p-panelMenu [multiple]="false" [model]="items"
+                     class="nav nav-pills nav-sidebar flex-column"
+                     [style]="{'width':'auto','background':'transparent','padding': '.5rem 1px',
+                 'transition': 'transform 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99)'}"></p-panelMenu>
+
+
+
+        <ul class="layout-menu">
+            <ng-container *ngFor="let item of model2; let i = index;">
+                <li app-menuitem *ngIf="!item.separator" [item]="item" [index]="i" [root]="true"></li>
+                <li *ngIf="item.separator" class="menu-separator"></li>
+            </ng-container>
+        </ul>
+
+    </div>
+</div>

src/app/layout/menu/app.menu.component.ts

+import {Component, OnInit} from '@angular/core';
+import {AppMainComponent} from '../content/app.main.component';
+import {TokenService} from "../../_service/token.service";
+import {MenuService} from "./app.menu.service";
+import {MenuLightService} from "../../_service/menu.service";
+import {MenuItem} from "primeng/api";
+import {Subscription} from "rxjs";
+
+@Component({
+    selector: 'app-menu',
+    templateUrl: './app.menu.component.html',
+})
+export class AppMenuComponent implements OnInit {
+
+    model: any[];
+    model2: any[]
+
+    items: MenuItem[];
+    menus: any;
+
+    menuSubscription: Subscription;
+
+    constructor(public appMain: AppMainComponent,
+                private tokenService: TokenService,
+                private menuService: MenuLightService) {
+    }
+
+    ngOnInit() {
+        this.model = [
+            {
+                label: '', icon: 'pi pi-home',
+                items: [
+                    {label: 'Dashboard', icon: 'pi pi-fw pi-home', routerLink: ['/dashboard']},
+                ]
+            },
+            {separator: true},
+        ];
+
+        this.model2 = [
+            {separator: true},
+            {
+                label: 'Inicio', icon: 'pi pi-fw pi-download',
+                items: [
+                    {
+                        label: 'EPN', icon: 'pi pi-fw pi-globe', url: ['https://epn.edu.ec']
+                    },
+                    {
+                        label: 'Manual', icon: 'pi pi-fw pi-info-circle', routerLink: ['/documentation']
+                    }
+                ]
+            },
+        ];
+
+        this.llenarMenus();
+    }
+
+    llenarMenus() {
+        //console.log('GET MENU JSON APP ', this.menuService.getMenusJson())
+        if (this.menuService.getMenusJsonLab() === null || this.menuService.getMenusJsonLab() === 'null') {
+            if (this.menuService.getMenusJson() === null || this.menuService.getMenusJson() === 'null') {
+                this.menuService.findByUsername(this.tokenService.getCurrentUser()).subscribe(
+                    data => {
+                        this.menus = data;
+
+                        this.items = new Array();
+                        for (let objMenu of this.menus) {
+                            let item: MenuItem;
+                            item = {
+                                label: objMenu.itemDTO.label,
+                                icon: objMenu.itemDTO.icon,
+                                url: objMenu.itemDTO.url,
+                                routerLink: objMenu.itemDTO.routerLink,
+                                items: objMenu.itemsDTO,
+                                badge: objMenu.badge,
+                            }
+                            this.items.push(item);
+                            this.menuService.setMenusJson(this.items);
+                        }
+                    },
+                    err => {
+                        console.log('status ' + err.status);
+                        console.log('error message ' + err.error.message);
+                        console.log('error ' + err.error);
+                        console.log('message ' + err.message);
+
+                    }
+                );
+            } else {
+                console.log('carga menu app session ')
+                this.items = new Array();
+                this.items = JSON.parse(this.menuService.getMenusJson());
+            }
+        } else {
+            this.items = new Array();
+            console.log('carga menu lab session ')
+            this.items = JSON.parse(this.menuService.getMenusJsonLab());
+        }
+
+
+    }
+
+
+}

src/app/layout/menu/app.menu.service.ts

+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class MenuService {
+
+    private menuSource = new Subject<string>();
+    private resetSource = new Subject();
+
+    menuSource$ = this.menuSource.asObservable();
+    resetSource$ = this.resetSource.asObservable();
+
+    onMenuStateChange(key: string) {
+        this.menuSource.next(key);
+    }
+
+    reset() {
+        this.resetSource.next(null);
+    }
+}

src/app/layout/menu/app.menuitem.component.ts

+import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {Subscription} from 'rxjs';
+import {filter} from 'rxjs/operators';
+import {MenuService} from './app.menu.service';
+import {AppMainComponent} from '../content/app.main.component';
+
+@Component({
+    /* tslint:disable:component-selector */
+    selector: '[app-menuitem]',
+    /* tslint:enable:component-selector */
+    template: `
+		<ng-container>
+            <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{item.label}}</div>
+			<a [attr.href]="item.url" (click)="itemClick($event)" *ngIf="(!item.routerLink || item.items) && item.visible !== false" (mouseenter)="onMouseEnter()"
+			   (keydown.enter)="itemClick($event)" [ngClass]="item.class" pRipple
+			   [attr.target]="item.target" [attr.tabindex]="0">
+				<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+				<span class="layout-menuitem-text">{{item.label}}</span>
+				<i class="pi pi-fw layout-submenu-toggler" [ngClass]="!appMain.isHorizontal() ?'pi-chevron-down': 'pi-angle-down'" *ngIf="item.items"></i>
+			</a>
+			<a (click)="itemClick($event)" (mouseenter)="onMouseEnter()" *ngIf="(item.routerLink && !item.items) && item.visible !== false"
+			   [routerLink]="item.routerLink" routerLinkActive="active-route" [ngClass]="item.class" pRipple
+			   [routerLinkActiveOptions]="{exact: true}" [attr.target]="item.target" [attr.tabindex]="0">
+				<i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+				<span class="layout-menuitem-text">{{item.label}}</span>
+				<i class="pi pi-fw layout-submenu-toggler" [ngClass]="!appMain.isHorizontal() ?'pi-chevron-down': 'pi-angle-down'" *ngIf="item.items"></i>
+			</a>
+
+			<ul *ngIf="item.items && item.visible !== false" role="menu" [@children]="(appMain.isSlim() || appMain.isHorizontal()) ? (root ? appMain.isMobile()? 'visible':
+			slimClick && !appMain.isHorizontal() ? (active  ? 'slimVisibleAnimated' : 'slimHiddenAnimated') : (active ? 'visible' : 'hidden') :
+			appMain.isSlim() || appMain.isHorizontal() ? (active ? 'visibleAnimated' : 'hiddenAnimated') : (active ? 'visible' : 'hidden')) :
+			(root ? 'visible' :(active ? 'visibleAnimated' : 'hiddenAnimated'))">
+				<ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
+					<li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass"></li>
+				</ng-template>
+			</ul>
+		</ng-container>
+    `,
+    host: {
+        '[class.layout-root-menuitem]': 'root',
+        '[class.active-menuitem]': '(active && !root) || (active && (appMain.isSlim() || appMain.isHorizontal()))'
+    },
+    animations: [
+        trigger('children', [
+            state('void', style({
+                height: '0px'
+            })),
+            state('hiddenAnimated', style({
+                height: '0px'
+            })),
+            state('visibleAnimated', style({
+                height: '*'
+            })),
+            state('visible', style({
+                height: '*',
+                'z-index': 100
+            })),
+            state('hidden', style({
+                height: '0px',
+                'z-index': '*'
+            })),
+            state('slimVisibleAnimated', style({
+                opacity: 1,
+                transform: 'none'
+            })),
+            state('slimHiddenAnimated', style({
+                opacity: 0,
+                transform: 'translateX(20px)'
+            })),
+            transition('visibleAnimated => hiddenAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+            transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+            transition('void => visibleAnimated, visibleAnimated => void',
+                animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+            transition('void => slimVisibleAnimated', animate('400ms cubic-bezier(.05,.74,.2,.99)')),
+            transition('slimHiddenAnimated => slimVisibleAnimated', animate('400ms cubic-bezier(.05,.74,.2,.99)'))
+        ])
+    ]
+})
+export class AppMenuitemComponent implements OnInit, OnDestroy {
+
+    @Input() item: any;
+
+    @Input() index: number;
+
+    @Input() root: boolean;
+
+    @Input() parentKey: string;
+
+    active = false;
+
+    menuSourceSubscription: Subscription;
+
+    menuResetSubscription: Subscription;
+
+    key: string;
+
+    slimClick = false;
+
+    constructor(public appMain: AppMainComponent, public router: Router, private cd: ChangeDetectorRef, private menuService: MenuService) {
+        this.menuSourceSubscription = this.menuService.menuSource$.subscribe(key => {
+            // deactivate current active menu
+            if (this.active && this.key !== key && key.indexOf(this.key) !== 0) {
+                this.active = false;
+            }
+        });
+
+        this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
+            this.active = false;
+        });
+
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(params => {
+                if (this.appMain.isSlim() || this.appMain.isHorizontal()) {
+                    this.active = false;
+                } else {
+                    if (this.item.routerLink) {
+                        this.updateActiveStateFromRoute();
+                    } else {
+                        this.active = false;
+                    }
+                }
+            });
+    }
+
+    ngOnInit() {
+        if (!(this.appMain.isSlim() || this.appMain.isHorizontal()) && this.item.routerLink) {
+            this.updateActiveStateFromRoute();
+        }
+
+        this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+    }
+
+    updateActiveStateFromRoute() {
+        this.active = this.router.isActive(this.item.routerLink[0], !this.item.items);
+    }
+
+    itemClick(event: Event) {
+        if (this.appMain.isSlim()) {
+            this.slimClick = true;
+        }
+
+        // avoid processing disabled items
+        if (this.item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
+        // navigate with hover in horizontal mode
+        if (this.root) {
+            this.appMain.menuHoverActive = !this.appMain.menuHoverActive;
+        }
+
+        // notify other items
+        this.menuService.onMenuStateChange(this.key);
+
+        // execute command
+        if (this.item.command) {
+            this.item.command({originalEvent: event, item: this.item});
+        }
+
+        // toggle active state
+        if (this.item.items) {
+            this.active = !this.active;
+        } else {
+            // activate item
+            this.active = true;
+
+            if (this.appMain.isMobile()) {
+                this.appMain.staticMenuMobileActive = false;
+            }
+
+            // reset horizontal menu
+            if (this.appMain.isSlim() || this.appMain.isHorizontal()) {
+                this.menuService.reset();
+                this.appMain.menuHoverActive = false;
+            }
+
+            this.appMain.unblockBodyScroll();
+        }
+
+        this.removeActiveInk(event);
+    }
+
+    onMouseEnter() {
+        // activate item on hover
+        if (this.root  && (this.appMain.isSlim() || this.appMain.isHorizontal()) && this.appMain.isDesktop()) {
+            if (this.appMain.menuHoverActive) {
+                this.menuService.onMenuStateChange(this.key);
+                this.active = true;
+                this.slimClick = false;
+            }
+            else {
+                if (this.appMain.isSlim()) {
+                    this.slimClick = true;
+                }
+            }
+        }
+    }
+    removeActiveInk(event: Event) {
+        let currentTarget = (event.currentTarget as HTMLElement);
+        setTimeout(() => {
+            if (currentTarget) {
+                let activeInk = currentTarget.querySelector('.p-ink-active');
+                if (activeInk) {
+                    if (activeInk.classList)
+                        activeInk.classList.remove('p-ink-active');
+                    else
+                        activeInk.className = activeInk.className.replace(new RegExp('(^|\\b)' + 'p-ink-active'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+                }
+            }
+        }, 401);
+    }
+
+    ngOnDestroy() {
+        if (this.menuSourceSubscription) {
+            this.menuSourceSubscription.unsubscribe();
+        }
+
+        if (this.menuResetSubscription) {
+            this.menuResetSubscription.unsubscribe();
+        }
+    }
+}

src/app/layout/menu/app.rightmenu.component.html

+<div class="layout-sidebar-right" [ngClass]="{'layout-sidebar-right-active': appMain.rightMenuActive}" (click)="appMain.rightMenuClick = true">
+    <h5>Activity</h5>
+    <div class="widget-timeline">
+        <div class="timeline-event">
+                    <span class="timeline-event-icon" style="background-color:#64B5F6">
+                        <i class="pi pi-dollar"></i>
+                    </span>
+            <div class="timeline-event-title">New Sale</div>
+            <div class="timeline-event-detail">Richard Jones has purchased a blue t-shirt for <strong>$79</strong>.</div>
+        </div>
+        <div class="timeline-event">
+                    <span class="timeline-event-icon" style="background-color:#7986CB">
+                        <i class="timeline-icon pi pi-download"></i>
+                    </span>
+            <div class="timeline-event-title">Withdrawal Initiated</div>
+            <div class="timeline-event-detail">Your request for withdrawal of <strong>$2500</strong> has been initiated.</div>
+        </div>
+        <div class="timeline-event">
+                    <span class="timeline-event-icon" style="background-color:#4DB6AC">
+                        <i class="timeline-icon pi pi-question"></i>
+                    </span>
+            <div class="timeline-event-title">Question Received</div>
+            <div class="timeline-event-detail">Jane Davis has posted a <strong>new question</strong> about your product.</div>
+        </div>
+        <div class="timeline-event">
+                    <span class="timeline-event-icon" style="background-color:#4DD0E1">
+                        <i class="timeline-icon pi pi-comment"></i>
+                    </span>
+            <div class="timeline-event-title">Comment Received</div>
+            <div class="timeline-event-detail">Claire Smith has upvoted your store along with a <strong>comment</strong>.</div>
+        </div>
+    </div>
+
+    <hr />
+
+    <h5>Quick Withdraw</h5>
+
+    <div class="withdraw p-fluid">
+        <div>
+            <input pInputText type="text" placeholder="Amount" />
+        </div>
+        <div>
+            <p-dropdown [options]="amount" [(ngModel)]="selectedAmount"></p-dropdown>
+        </div>
+        <div>
+            <button pButton type="button" label="Confirm" icon="pi pi-check"></button>
+        </div>
+    </div>
+
+    <hr />
+
+    <h5>Shipment Tracking</h5>
+    <p>Track your ongoing shipments to customers.</p>
+    <img class="logo-image" src="../../../assets/demo/images/sidebar-right/staticmap.png" alt="diamond-ng" style="width:100%"/>
+</div>

src/app/layout/menu/app.rightmenu.component.ts

+import {Component} from '@angular/core';
+import {SelectItem} from 'primeng/api';
+import {AppMainComponent} from '../content/app.main.component';
+
+@Component({
+    selector: 'app-rightmenu',
+    templateUrl: './app.rightmenu.component.html'
+})
+export class AppRightmenuComponent{
+
+    amount: SelectItem[];
+
+    selectedAmount: any;
+
+    constructor(public appMain: AppMainComponent) {
+        this.amount = [
+            {label: '*****24', value: {id: 1, name: '*****24', code: 'A1'}},
+            {label: '*****75', value: {id: 2, name: '*****75', code: 'A2'}}
+        ];
+    }
+}

src/app/layout/search/app.search.component.ts

+import {Component, ViewChild, ElementRef} from '@angular/core';
+import {AppMainComponent} from '../content/app.main.component';
+import {animate, state, style, transition, trigger, AnimationEvent} from '@angular/animations';
+
+@Component({
+    /* tslint:disable:component-selector */
+    selector: 'app-search',
+    /* tslint:enable:component-selector */
+    template: `
+        <div class="layout-search">
+            <div class="search-container" [@animation]="appMain.search ? 'visible' : 'hidden'" (@animation.done)="onAnimationEnd($event)">
+                <i class="pi pi-search"></i>
+                <input #input type="text" class="p-inputtext search-input" placeholder="Search" (click)="appMain.searchClick = true;" (keydown)="onInputKeydown($event)"/>
+            </div>
+        </div>
+    `,
+    animations: [
+        trigger('animation', [
+            state('hidden', style({
+                transform: 'translateY(20px)',
+                opacity: 0,
+                visibility: 'hidden'
+            })),
+            state('visible', style({
+                opacity: 1,
+                visibility: 'visible'
+            })),
+            transition('hidden <=> visible', animate('.4s cubic-bezier(.05,.74,.2,.99)'))
+        ])
+    ]
+})
+export class AppSearchComponent {
+
+    @ViewChild('input') inputElement: ElementRef;
+
+    constructor(public appMain: AppMainComponent) {}
+
+    onAnimationEnd(event: AnimationEvent) {
+        if (event.toState === 'visible') {
+            this.inputElement.nativeElement.focus();
+        }
+    }
+
+    onInputKeydown(event) {
+        const key = event.which;
+
+        // escape, tab and enter
+        if (key === 27 || key === 9 || key === 13) {
+            this.appMain.onSearchHide(event);
+        }
+    }
+}

src/app/main/dashboard/components/dashboarddemo.component.ts

+import {Component, OnInit} from '@angular/core';
+import {MenuItem} from 'primeng/api';
+import {Product} from '../models/product';
+import {ProductService} from '../services/productservice';
+import {Chart} from "chart.js";
+import {BreadcrumbService} from "../../../_service/utils/app.breadcrumb.service";
+
+@Component({
+    templateUrl: './dashboard.component.html',
+    styleUrls: ['./dashboarddemo.scss', './tabledemo.scss'],
+})
+export class DashboardDemoComponent implements OnInit {
+
+    cols: any[];
+
+    items: MenuItem[];
+
+    ordersChart: any;
+
+    ordersChartOptions: any;
+
+    orderWeek: any;
+
+    selectedOrderWeek: any;
+
+    products: Product[];
+
+    productsThisWeek: Product[];
+
+    productsLastWeek: Product[];
+
+    revenueChart: any;
+
+    constructor(private productService: ProductService, private breadcrumbService: BreadcrumbService) {
+        this.breadcrumbService.setItems([
+            {label: 'Dashboard', routerLink: ['/']}
+        ]);
+    }
+
+    ngOnInit() {
+        this.productService.getProducts().then(data => this.products = data);
+        this.productService.getProducts().then(data => this.productsThisWeek = data);
+        this.productService.getProductsMixed().then(data => this.productsLastWeek = data);
+
+        this.cols = [
+            {field: 'vin', header: 'Vin'},
+            {field: 'year', header: 'Year'},
+            {field: 'brand', header: 'Brand'},
+            {field: 'color', header: 'Color'}
+        ];
+
+        this.items = [{
+            label: 'Shipments',
+            items: [
+                { label: 'Tracker', icon: 'pi pi-compass' },
+                { label: 'Map', icon: 'pi pi-map-marker' },
+                { label: 'Manage', icon: 'pi pi-pencil' }
+            ]
+        }
+        ];
+
+        this.ordersChart = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [{
+                label: 'New',
+                data: [2, 7, 20, 9, 16, 9, 5],
+                backgroundColor: [
+                    'rgba(100, 181, 246, 0.2)',
+                ],
+                borderColor: [
+                    '#64B5F6',
+                ],
+                borderWidth: 3,
+                fill: true,
+                tension: .4
+            }]
+        };
+
+        this.ordersChartOptions = {
+            plugins: {
+                legend: {
+                    display: true,
+                }
+            },
+            hover: {
+                mode: 'index'
+            },
+            scales: {
+                y: {
+                    ticks: {
+                        min: 0,
+                        max: 20
+                    }
+                }
+            }
+        };
+
+        this.orderWeek = [
+            {name: 'This Week', code: '0'},
+            {name: 'Last Week', code: '1'}
+        ];
+
+        this.revenueChart = {
+            labels: ['Direct', 'Promoted', 'Affiliate'],
+            datasets: [{
+                data: [40, 35, 25],
+                backgroundColor: ['#64B5F6', '#7986CB', '#4DB6AC']
+            }]
+        };
+    }
+
+    changeDataset(event) {
+        const dataSet = [
+            [2, 7, 20, 9, 16, 9, 5],
+            [2, 4, 9, 20, 16, 12, 20],
+            [2, 17, 7, 15, 4, 20, 8],
+            [2, 2, 20, 4, 17, 16, 20]
+        ];
+
+        this.ordersChart.datasets[0].data = dataSet[parseInt(event.currentTarget.getAttribute('data-index'))];
+        this.ordersChart.datasets[0].label = event.currentTarget.getAttribute('data-label');
+        this.ordersChart.datasets[0].borderColor = event.currentTarget.getAttribute('data-stroke');
+        this.ordersChart.datasets[0].backgroundColor = event.currentTarget.getAttribute('data-fill');
+
+    }
+
+    recentSales(event) {
+        if (event.value.code === '0') {
+            this.products = this.productsThisWeek;
+        } else {
+            this.products = this.productsLastWeek;
+        }
+    }
+}

src/app/main/dashboard/components/dashboarddemo.scss

+.layout-dashboard {
+	.orders {
+		h4 {
+			margin-bottom: 20px;
+		}
+
+		.p-button {
+			margin-top: -20px;
+		}
+
+		.order-tabs {
+			margin-bottom: 1rem;
+
+			.order-tab {
+				padding: 1rem 2rem 2rem 1rem;
+				position: relative;
+				transition: box-shadow .2s;
+
+				&:hover {
+					box-shadow: 0 .125rem .25rem rgba(0,0,0,.15);
+					cursor: pointer;
+				}
+
+				i {
+					font-size: 1rem;
+					vertical-align: middle;
+				}
+
+				.order-label {
+					margin-left: .25rem;
+					vertical-align: middle;
+				}
+
+				.stat-detail-icon {
+					position: absolute;
+					right: 1rem;
+					top: 2.25rem;
+					height: 1rem;
+					width: 1rem;
+				}
+
+				img {
+					position: absolute;
+					bottom: 0;
+					left: 5%;
+					width: 90%;
+				}
+			}
+		}
+	}
+
+	.overview-chart {
+		overflow: auto;
+	}
+
+	.dashbard-demo-dropdown {
+		width: 8rem;
+		margin-left: auto;
+	}
+
+	.product-badge {
+		border-radius: 2px;
+		padding: .25em .5rem;
+		text-transform: uppercase;
+		font-weight: 700;
+		font-size: 12px;
+		letter-spacing: .3px;
+
+		&.status-instock {
+			background: #C8E6C9;
+			color: #256029;
+		}
+
+		&.status-outofstock {
+			background: #FFCDD2;
+			color: #C63737;
+		}
+
+		&.status-lowstock {
+			background: #FEEDAF;
+			color: #8A5340;
+		}
+	}
+}

src/app/main/dashboard/components/tabledemo.component.ts

+import {Component, OnInit, ViewChild} from '@angular/core';
+import {Customer, Representative} from '../domain/customer';
+import {CustomerService} from '../service/customerservice';
+import {Product} from '../domain/product';
+import {ProductService} from '../service/productservice';
+import {Table} from 'primeng/table';
+import {BreadcrumbService} from '../../app.breadcrumb.service';
+
+@Component({
+    templateUrl: './tabledemo.component.html',
+    styleUrls: ['./tabledemo.scss'],
+    styles: [`
+        :host ::ng-deep .p-datatable-gridlines p-progressBar {
+            width: 100%;
+        }
+
+        @media screen and (max-width: 960px) {
+            :host ::ng-deep .p-datatable.p-datatable-customers.rowexpand-table .p-datatable-tbody > tr > td:nth-child(6) {
+                display: flex;
+            }
+        }
+
+    `],
+})
+export class TableDemoComponent implements OnInit {
+
+    customers1: Customer[];
+
+    customers2: Customer[];
+
+    customers3: Customer[];
+
+    selectedCustomers1: Customer[];
+
+    selectedCustomer: Customer;
+
+    representatives: Representative[];
+
+    statuses: any[];
+
+    products: Product[];
+
+    rowGroupMetadata: any;
+
+    activityValues: number[] = [0, 100];
+
+    @ViewChild('dt') table: Table;
+
+    constructor(private customerService: CustomerService, private productService: ProductService,
+                private breadcrumbService: BreadcrumbService) {
+        this.breadcrumbService.setItems([
+            {label: 'Table'}
+        ]);
+    }
+
+    ngOnInit() {
+        this.customerService.getCustomersLarge().then(customers => {
+            this.customers1 = customers;
+            // @ts-ignore
+            this.customers1.forEach(customer => customer.date = new Date(customer.date));
+        });
+        this.customerService.getCustomersMedium().then(customers => this.customers2 = customers);
+        this.customerService.getCustomersMedium().then(customers => this.customers3 = customers);
+        this.productService.getProductsWithOrdersSmall().then(data => this.products = data);
+
+        this.representatives = [
+            {name: 'Amy Elsner', image: 'amyelsner.png'},
+            {name: 'Anna Fali', image: 'annafali.png'},
+            {name: 'Asiya Javayant', image: 'asiyajavayant.png'},
+            {name: 'Bernardo Dominic', image: 'bernardodominic.png'},
+            {name: 'Elwin Sharvill', image: 'elwinsharvill.png'},
+            {name: 'Ioni Bowcher', image: 'ionibowcher.png'},
+            {name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png'},
+            {name: 'Onyama Limba', image: 'onyamalimba.png'},
+            {name: 'Stephen Shaw', image: 'stephenshaw.png'},
+            {name: 'XuXue Feng', image: 'xuxuefeng.png'}
+        ];
+
+        this.statuses = [
+            {label: 'Unqualified', value: 'unqualified'},
+            {label: 'Qualified', value: 'qualified'},
+            {label: 'New', value: 'new'},
+            {label: 'Negotiation', value: 'negotiation'},
+            {label: 'Renewal', value: 'renewal'},
+            {label: 'Proposal', value: 'proposal'}
+        ];
+    }
+
+    onSort() {
+        this.updateRowGroupMetaData();
+    }
+
+    updateRowGroupMetaData() {
+        this.rowGroupMetadata = {};
+
+        if (this.customers3) {
+            for (let i = 0; i < this.customers3.length; i++) {
+                const rowData = this.customers3[i];
+                const representativeName = rowData.representative.name;
+
+                if (i === 0) {
+                    this.rowGroupMetadata[representativeName] = { index: 0, size: 1 };
+                }
+                else {
+                    const previousRowData = this.customers3[i - 1];
+                    const previousRowGroup = previousRowData.representative.name;
+                    if (representativeName === previousRowGroup) {
+                        this.rowGroupMetadata[representativeName].size++;
+                    }
+                    else {
+                        this.rowGroupMetadata[representativeName] = { index: i, size: 1 };
+                    }
+                }
+            }
+        }
+    }
+}

src/app/main/dashboard/components/tabledemo.scss

+:host ::ng-deep {
+	.p-paginator {
+		.p-paginator-current {
+			margin-left: auto;
+		}
+	}
+
+	.p-progressbar {
+		height: .5rem;
+		background-color: #D8DADC;
+
+		.p-progressbar-value {
+			background-color: #607D8B;
+		}
+	}
+
+	.table-header {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.p-calendar .p-datepicker {
+		min-width: 25rem;
+
+		td {
+			font-weight: 400;
+		}
+	}
+
+	.p-datatable.p-datatable-customers {
+		.p-datatable-header {
+			padding: 1rem;
+			text-align: left;
+			font-size: 1.5rem;
+		}
+
+		.p-paginator {
+			padding: 1rem;
+		}
+
+		.p-datatable-thead > tr > th {
+			text-align: left;
+		}
+
+		.p-dropdown-label:not(.p-placeholder) {
+			text-transform: uppercase;
+		}
+	}
+
+	.p-datatable.p-datatable-customers:not(.p-datatable-gridlines) {
+		.p-datatable-tbody > tr > td {
+			cursor: auto;
+		}
+	}
+
+	/* Responsive */
+	.p-datatable-customers .p-datatable-tbody > tr > td .p-column-title {
+		display: none;
+	}
+}
+
+.customer-badge {
+	border-radius: 2px;
+	padding: .25em .5rem;
+	text-transform: uppercase;
+	font-weight: 700;
+	font-size: 12px;
+	letter-spacing: .3px;
+
+	&.status-qualified {
+		background: #C8E6C9;
+		color: #256029;
+	}
+
+	&.status-unqualified {
+		background: #FFCDD2;
+		color: #C63737;
+	}
+
+	&.status-negotiation {
+		background: #FEEDAF;
+		color: #8A5340;
+	}
+
+	&.status-new {
+		background: #B3E5FC;
+		color: #23547B;
+	}
+
+	&.status-renewal {
+		background: #ECCFFF;
+		color: #694382;
+	}
+
+	&.status-proposal {
+		background: #FFD8B2;
+		color: #805B36;
+	}
+}
+
+.product-badge {
+	border-radius: 2px;
+	padding: .25em .5rem;
+	text-transform: uppercase;
+	font-weight: 700;
+	font-size: 12px;
+	letter-spacing: .3px;
+
+	&.status-instock {
+		background: #C8E6C9;
+		color: #256029;
+	}
+
+	&.status-outofstock {
+		background: #FFCDD2;
+		color: #C63737;
+	}
+
+	&.status-lowstock {
+		background: #FEEDAF;
+		color: #8A5340;
+	}
+}
+
+.order-badge {
+	border-radius: 2px;
+	padding: .25em .5rem;
+	text-transform: uppercase;
+	font-weight: 700;
+	font-size: 12px;
+	letter-spacing: .3px;
+
+	&.order-delivered {
+		background: #C8E6C9;
+		color: #256029;
+	}
+
+	&.order-cancelled {
+		background: #FFCDD2;
+		color: #C63737;
+	}
+
+	&.order-pending {
+		background: #FEEDAF;
+		color: #8A5340;
+	}
+
+	&.order-returned {
+		background: #ECCFFF;
+		color: #694382;
+	}
+}
+
+@media screen and (max-width: 960px) {
+	:host ::ng-deep {
+		.p-datatable {
+			&.p-datatable-customers {
+				.p-datatable-thead > tr > th,
+				.p-datatable-tfoot > tr > td {
+					display: none !important;
+				}
+
+				.p-datatable-tbody > tr {
+					border-bottom: 1px solid var(--surface-d);
+
+					> td {
+						text-align: left;
+						display: block;
+						border: 0 none !important;
+						width: 100% !important;
+						float: left;
+						clear: left;
+						border: 0 none;
+
+						.p-column-title {
+							padding: .4rem;
+							min-width: 30%;
+							display: inline-block;
+							margin: -.4rem 1rem -.4rem -.4rem;
+							font-weight: bold;
+						}
+
+						.p-progressbar {
+							margin-top: .5rem;
+						}
+					}
+				}
+			}
+		}
+	}
+
+}

src/app/main/dashboard/models/product.ts

+export interface Product {
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    price?: number;
+    quantity?: number;
+    inventoryStatus?: string;
+    category?: string;
+    image?: string;
+    rating?: number;
+}

src/app/main/dashboard/module/dashboard.module.ts

+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule, Routes} from "@angular/router";
+import {InputTextModule} from 'primeng/inputtext';
+import {ButtonModule} from "primeng/button";
+import {CalendarModule} from "primeng/calendar";
+import {TooltipModule} from "primeng/tooltip";
+
+import {RUTA_DASHBOARD} from "../routes/dashboard.routing";
+import {DataViewModule} from "primeng/dataview";
+import {DropdownModule} from "primeng/dropdown";
+import {DashboardDemoComponent} from "../components/dashboarddemo.component";
+import {ChartModule} from "primeng/chart";
+import {MenuModule} from "primeng/menu";
+import {TableModule} from "primeng/table";
+import {FormsModule} from "@angular/forms";
+
+@NgModule({
+    declarations: [
+        DashboardDemoComponent,
+    ],
+    imports: [
+        CommonModule,
+        RouterModule.forChild(RUTA_DASHBOARD),
+        InputTextModule,
+        ButtonModule,
+        CalendarModule,
+        TooltipModule,
+        DataViewModule,
+        DropdownModule,
+        ChartModule,
+        MenuModule,
+        TableModule,
+        FormsModule
+    ]
+})
+export class DashboardModule {
+}

src/app/main/dashboard/routes/dashboard.routing.ts

+import { Routes } from '@angular/router';
+import {DashboardDemoComponent} from "../components/dashboarddemo.component";
+
+export const RUTA_DASHBOARD: Routes = [
+  {
+    path: 'dashboard',
+    component: DashboardDemoComponent,
+    //canActivate: [AuthGuard],
+  },
+
+];

src/app/main/dashboard/services/productservice.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { Product } from '../models/product';
+
+@Injectable()
+export class ProductService {
+
+    constructor(private http: HttpClient) { }
+
+    getProductsSmall() {
+        return this.http.get<any>('assets/demo/data/products-small.json')
+        .toPromise()
+        .then(res => res.data as Product[])
+        .then(data => data);
+    }
+
+    getProducts() {
+        return this.http.get<any>('assets/demo/data/products.json')
+        .toPromise()
+        .then(res => res.data as Product[])
+        .then(data => data);
+    }
+
+    getProductsMixed() {
+        return this.http.get<any>('assets/demo/data/products-mixed.json')
+        .toPromise()
+        .then(res => res.data as Product[])
+        .then(data => data);
+    }
+
+    getProductsWithOrdersSmall() {
+        return this.http.get<any>('assets/demo/data/products-orders-small.json')
+        .toPromise()
+        .then(res => res.data as Product[])
+        .then(data => data);
+    }
+}

src/app/main/error/app.error.component.html

+<div class="exception-body error">
+    <img src="../../../assets/layout/images/logo-white.svg" alt="diamond-layout" class="logo">
+
+    <div class="exception-content">
+        <div class="exception-title">ERROR</div>
+        <div class="exception-detail">Something went wrong.</div>
+        <a [routerLink]="['/']">Go to Dashboard</a>
+    </div>
+</div>

src/app/main/error/app.error.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-error',
+  templateUrl: './app.error.component.html',
+})
+export class AppErrorComponent {
+
+}

src/app/main/forbidden/app.accessdenied.component.html

+<div class="exception-body access">
+    <img src="../../../assets/layout/images/logo-white.svg" alt="diamond-layout" class="logo">
+
+    <div class="exception-content">
+        <div class="exception-title">ACCESS DENIED</div>
+        <div class="exception-detail">You do not have the necessary permissions.</div>
+        <a [routerLink]="['/']">Go to Dashboard</a>
+    </div>
+</div>

src/app/main/forbidden/app.accessdenied.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-accessdenied',
+  templateUrl: './app.accessdenied.component.html',
+})
+export class AppAccessdeniedComponent {
+
+}

src/app/main/help/app.help.component.html

+<div class="p-grid help-page">
+	<div class="p-col-12">
+		<div class="card help-search">
+			<div class="help-search-content">
+				<h1>We are here to help</h1>
+				<div class="search-container">
+					<i class="pi pi-search"></i>
+					<input type="text" class="p-inputtext" placeholder="Search"/>
+				</div>
+			</div>
+		</div>
+	</div>
+    <div class="p-col-12 p-lg-6">
+        <div class="card">
+            <h4>General</h4>
+            <p-accordion>
+                <p-accordionTab header="Header I" [selected]="true">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </p-accordionTab>
+                <p-accordionTab header="Header II">
+                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
+                        ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
+                        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+                </p-accordionTab>
+                <p-accordionTab header="Header III">
+                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+                        et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                        Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
+                        quo minus.</p>
+                </p-accordionTab>
+            </p-accordion>
+
+            <h4>FAQ</h4>
+            <p-accordion>
+                <p-accordionTab header="FAQ I" [selected]="true">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                </p-accordionTab>
+                <p-accordionTab header="FAQ II">
+                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
+                        ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
+                        voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
+                </p-accordionTab>
+                <p-accordionTab header="FAQ III">
+                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+                        et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
+                        Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit
+                        quo minus.</p>
+                </p-accordionTab>
+            </p-accordion>
+		</div>
+	</div>
+
+    <div class="p-col-12 p-lg-6">
+        <div class="card">
+            <h4>System Status</h4>
+            <p>All services are operational.</p>
+            <div class="status-bars">
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar status-bar-failure"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+                <div class="status-bar"></div>
+            </div>
+            <div class="status-bar-footer">
+                <span>30 Days Ago</span>
+                <span>Today</span>
+            </div>
+        </div>
+
+        <div class="card">
+            <h4>Articles</h4>
+            <p>Recent articles from our team.</p>
+            <div class="blog-posts">
+                <div class="blog-post">
+                    <div class="blog-text">
+                        <h1>Building Revenue With Confidence</h1>
+                        <span>And avoiding failures</span>
+                    </div>
+                    <div class="blog-profile">
+                        <img src="../../../assets/demo/images/avatar/amyelsner.png" alt="diamond-layout" />
+                    </div>
+                </div>
+
+                <div class="blog-post">
+                    <div class="blog-text">
+                        <h1>Latest Marketing Trends</h1>
+                        <span>Don't miss out our tips</span>
+                    </div>
+                    <div class="blog-profile">
+                        <img src="../../../assets/demo/images/avatar/annafali.png" alt="diamond-layout" />
+                    </div>
+                </div>
+
+                <div class="blog-post">
+                    <div class="blog-text">
+                        <h1>How To Reach Your Audience</h1>
+                        <span>10 ways to increase your efficiency</span>
+                    </div>
+                    <div class="blog-profile">
+                        <img src="../../../assets/demo/images/avatar/stephenshaw.png" alt="diamond-layout" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/main/help/app.help.component.ts

+import { Component } from '@angular/core';
+import {BreadcrumbService} from '../../_service/utils/app.breadcrumb.service';
+
+@Component({
+    templateUrl: './app.help.component.html',
+})
+export class AppHelpComponent {
+    text: any;
+
+    filteredText: any[];
+
+    constructor(private breadcrumbService: BreadcrumbService) {
+        this.breadcrumbService.setItems([
+            {label: 'Help'}
+        ]);
+    }
+
+    filterText(event) {
+        const query = event.query;
+        this.filteredText = [];
+
+        for (let i = 0; i < 10; i++) {
+            this.filteredText.push(query + i);
+        }
+    }
+
+}

src/app/main/notfound/app.notfound.component.html

+<div class="exception-body notfound">
+    <img src="../../../assets/layout/images/logo-white.svg" alt="diamond-layout" class="logo">
+
+    <div class="exception-content">
+        <div class="exception-title">NO ENCONTRADO</div>
+        <div class="exception-detail">EL recurso seleccionado no se encuentra disponible.</div>
+        <a [routerLink]="['/dashboard']">Volver al inicio</a>
+    </div>
+</div>

src/app/main/notfound/app.notfound.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-notfound',
+  templateUrl: './app.notfound.component.html',
+})
+export class AppNotfoundComponent {
+
+}

src/app/main/pages/laboratorio/components/bancos-table/bancos-table.component.html

+<section class="content">
+    <div class="container-fluid">
+        <div class="card">
+            <p-table #dt [value]="listBancos" [rows]="10" [paginator]="true" [loading]="loading"
+                     [globalFilterFields]="[
+                        'idBancos',
+                        'nombreBancos',
+                        'descBancos',
+                        'estadoBancos'
+                     ]"
+                     responsiveLayout="scroll" [(selection)]="selectedBancos"
+                     [rowHover]="true" dataKey="idBancos"
+                     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [showCurrentPageReport]="true">
+                <ng-template pTemplate="caption">
+                    <div class="flex justify-content-between flex-wrap">
+                        <div>
+                            <button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()"
+                                    class="p-button-sm p-button-outlined p-button-success p-mr-2 m-1" pTooltip="XLS"
+                                    tooltipPosition="bottom"></button>
+                            <button type="button" pButton pRipple icon="pi pi-file-pdf" (click)="exportPdf()"
+                                    class="p-button-sm p-button-outlined p-button-danger p-mr-2 m-1" pTooltip="PDF"
+                                    tooltipPosition="bottom"></button>
+                            <button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-danger p-button-sm m-1"
+                                    (click)="deleteSelectedBancos()" pTooltip="Eliminar Seleccionados" tooltipPosition="right"
+                                    [disabled]="!selectedBancos || !selectedBancos.length"></button>
+                            <button pButton label="Clear" class="p-button-outlined p-button-sm m-1" icon="pi pi-filter-slash"
+                                    (click)="clear(dt)" pTooltip="Quitar Filtros" tooltipPosition="right"></button>
+                        </div>
+
+                        <label class="text-center">BANCOS</label>
+                        <span class="p-input-icon-left ">
+              <i class="pi pi-search"></i>
+              <input pInputText type="text" class="p-inputtext-sm"
+                     (input)="dt.filterGlobal($event.target.valueOf(), 'contains')" placeholder="Busqueda General" />
+            </span>
+                    </div>
+                </ng-template>
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th style="width: 3rem">
+                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                        </th>
+                        <th pSortableColumn="idBancos">
+                            <div class="flex justify-content-between align-items-center"> <bold  style="font-weight: bold;">&#8470;</bold>
+                                <p-sortIcon field="idBancos"></p-sortIcon>
+                                <p-columnFilter type="text" field="idBancos" display="menu"></p-columnFilter>
+                            </div>
+                        </th>
+                        <th pSortableColumn="nombreBancos">
+                            <div class="flex justify-content-between align-items-center">Nombre
+                                <p-sortIcon field="nombreBancos"></p-sortIcon>
+                                <p-columnFilter type="text" field="nombreBancos" display="menu"></p-columnFilter>
+                            </div>
+                        </th>
+                        <th pSortableColumn="estadoBancos">
+                            <div class="flex justify-content-between align-items-center">Estado
+                                <p-sortIcon field="estadoBancos"></p-sortIcon>
+                                <p-columnFilter type="text" field="estadoBancos" display="menu"></p-columnFilter>
+                            </div>
+                        </th>
+                        <th pSortableColumn="descBancos">
+                            <div class="flex justify-content-between align-items-center">Detalle
+                                <p-sortIcon field="descBancos"></p-sortIcon>
+                                <p-columnFilter type="text" field="descBancos" display="menu"></p-columnFilter>
+                            </div>
+                        </th>
+
+                        <th>Acciones</th>
+                    </tr>
+
+                </ng-template>
+                <ng-template pTemplate="body" let-item let-rowIndex="rowIndex" >
+                    <tr>
+                        <td>
+                            <p-tableCheckbox [value]="item"></p-tableCheckbox>
+                        </td>
+                        <td>{{rowIndex+1}}</td>
+                        <td>{{item.nombreBancos}}</td>
+                        <td   >  <mark [ngClass]="item.estadoBancos == 'ACTIVO'
+                            ? 'border-green-500' : 'border-red-500' ">{{item.estadoBancos}}</mark></td>
+                        <td>{{item.descBancos}}</td>
+
+
+                        <td>
+                            <button pButton pRipple icon="pi pi-pencil"
+                                    class="p-button-rounded p-button-warning p-button-text p-button-sm p-mr-2" (click)="editBancos(item)"
+                                    pTooltip="Editar" tooltipPosition="left"   ></button>
+                            <button pButton pRipple icon="pi pi-trash"
+                                    class="p-button-rounded p-button-danger p-button-text p-button-sm" (click)="deleteBancos(item)"
+                                    pTooltip="Eliminar" tooltipPosition="left" *ngIf="item.estadoBancos =='ACTIVO'" ></button>
+                        </td>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="summary">
+                    <div class="p-d-flex p-ai-center p-jc-between">
+                        Registros Totales: {{listBancos ? listBancos.length : 0 }}.
+                    </div>
+                </ng-template>
+            </p-table>
+        </div>
+    </div>
+</section>

src/app/main/pages/laboratorio/components/bancos-table/bancos-table.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BancosTableComponent } from './bancos-table.component';
+
+describe('BancosTableComponent', () => {
+  let component: BancosTableComponent;
+  let fixture: ComponentFixture<BancosTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BancosTableComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BancosTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main/pages/laboratorio/components/bancos-table/bancos-table.component.ts

+import {Component, Input, OnInit, EventEmitter, Output} from '@angular/core';
+import { BancoDto } from "../../model/Bancos.dto";
+import {BancosService} from "../../services/bancos.service";
+import {FileService} from "../../../../../_service/utils/file.service";
+import {AppService} from "../../../../../_service/app.service";
+import {ConfirmationService} from "primeng/api";
+import { Table } from "primeng/table";
+
+@Component({
+  selector: 'app-bancos-table',
+  templateUrl: './bancos-table.component.html',
+  styleUrls: ['./bancos-table.component.scss']
+})
+export class BancosTableComponent implements OnInit {
+
+
+    proceso: string = 'bancos';
+    @Input() listBancos: BancoDto[];
+    @Output() bancosSelect=  new EventEmitter();
+
+
+    bancos: BancoDto;
+    selectedBancos: BancoDto[];
+    submitted: boolean;
+    loading: boolean;
+
+    exportColumns: any[];
+
+    cols: any[];
+
+
+
+  constructor(
+
+      private bancosServcice: BancosService,
+      private fileService: FileService,
+      private appservie: AppService,
+      private confirmationService: ConfirmationService
+
+  ) { }
+
+
+  ngOnInit(): void {
+
+      this.construirTabla();
+  }
+
+
+
+  construirTabla(){
+
+      this.cols= [
+          {field: 'idBancos', header: 'Nro.'},
+          {field: 'nombreBancos', header: 'NOMBRE.'},
+          {field: 'descBancos', header: 'DETALLE.'},
+          {field: 'estadoBancos', header: 'ESTADO.'},
+
+      ];
+      this.exportColumns = this.cols.map(col => ({title: col.header, dataKey: col.field}));
+      this.loading = false;
+
+  }
+
+    clear(table: Table) {
+        table.clear();
+    }
+
+
+    loadData(event) {
+        this.loading = true;
+        setTimeout(() => {
+            this.bancosServcice.getAll().subscribe(res => {
+                this.listBancos = res;
+                console.log("LLAMADA")
+                console.log(this.listBancos);
+                this.loading = false;
+            })
+        }, 1000);
+    }
+
+
+    registrarNuevo() {
+        // @ts-ignore
+        this.bancos= new BancoDto();
+        this.submitted = false;
+    }
+
+
+
+    deleteSelectedBancos() {
+        this.confirmationService.confirm({
+            acceptLabel: 'Aceptar',
+            rejectLabel: 'Cancelar',
+            acceptButtonStyleClass: 'p-button-outlined p-button-rounded p-button-success',
+            rejectButtonStyleClass: 'p-button-outlined p-button-rounded p-button-danger',
+            message: 'Esta seguro de Eliminar los elementos seleccionados?',
+            header: 'Confirmar',
+            icon: 'pi pi-exclamation-triangle',
+            accept: () => {
+                this.eliminarBancosSelected();
+            }
+        });
+    }
+
+
+
+    eliminarBancosSelected() {
+
+        let indexLista: number = 0;
+        for (let i = 0; i < this.selectedBancos.length; i++) {
+            this.bancosServcice.deleteObject(this.selectedBancos[i].idBancos).subscribe(
+                data => {
+                    indexLista++;
+
+                    if (indexLista == this.selectedBancos.length) {
+                        this.bancosServcice.getAll().subscribe({
+                            next: data => {
+                                this.listBancos = data.listado
+                            }
+                        });
+                        this.selectedBancos = null;
+                        this.appservie.msgInfoDetail('error', 'Eliminación', 'Se han eliminado todos los datos seleccionados',)
+                    }
+
+
+                }
+            );
+        }
+
+
+    }
+
+
+    editBancos(doc: BancoDto) {
+        this.bancos = {...doc};
+
+        if(doc.estadoBancos== 'ACTIVO'){
+            doc.estado= true;
+        }else{
+            doc.estado= false;
+        }
+
+        this.bancosSelect.emit(doc);
+    }
+
+    deleteBancos(doc: BancoDto) {
+        this.confirmationService.confirm({
+            acceptLabel: 'Aceptar',
+            rejectLabel: 'Cancelar',
+            acceptButtonStyleClass: 'p-button-outlined p-button-rounded p-button-success',
+            rejectButtonStyleClass: 'p-button-outlined p-button-rounded p-button-danger',
+            message: 'Esta seguro de eliminar ' + doc.idBancos + '?',
+            header: 'Confirmar',
+            icon: 'pi pi-exclamation-triangle',
+            accept: () => {
+                this.eliminarBancosSimple(doc);
+            }
+        });
+    }
+
+
+
+    async eliminarBancosSimple(doc: BancoDto) {
+        this.bancosServcice.deleteObject(doc.idBancos).subscribe(
+            data => {
+                this.appservie.msgDelete();
+                this.bancosServcice.getAll().subscribe({
+                    next: data => {
+                        this.listBancos = data.listado
+                    }
+                });
+
+            }
+        );
+    }
+
+
+    hideDialog() {
+        this.submitted = false;
+    }
+
+    exportPdf() {
+
+        let indexLista: number = 0;
+        this.listBancos.forEach(element => {
+            indexLista++;
+            element.idBancos=indexLista;
+          //  element.formatDate=new Date(element.fechaBancos).toLocaleDateString()+" "+new Date(element.fechaBancos).toLocaleTimeString();
+        });
+        this.appservie.exportPdf(this.exportColumns, this.listBancos, 'Bancos', "p");
+    }
+
+    exportExcel() {
+        let indexLista: number = 0;
+        this.listBancos.forEach(element => {
+            indexLista++;
+            element.idBancos=indexLista;
+            element.idUsuarioBancos=null;
+          //  element.formatDate=new Date(element.fechaBancos).toLocaleDateString()+" "+new Date(element.fechaBancos).toLocaleTimeString();
+            element.fechaBancos=null;
+        });
+        this.appservie.exportExcel(this.listBancos, 'Bancos');
+    }
+
+    descargarArchivo(fileName: string) {
+        try {
+            this.fileService.getFileByName(fileName, this.proceso);
+        } catch (error) {
+            this.appservie.msgInfoDetail('error', 'Error', 'Error al descargar el archivo');
+        }
+    }
+
+}

src/app/main/pages/laboratorio/components/bancos/bancos.component.html

+<form [formGroup]="formBancos">
+    <div  class="card no-gutter widget-overview-box widget-overview-box-1">
+
+
+        <div class=" flex align-items-left bg-primary-900">
+
+            <div class="col-16 md:col-2">
+                <div class="align-items-left flex  justify-content-end">
+                    <h4 class="text-left text-white">Registro - Actualización</h4>
+                </div>
+            </div>
+        </div>
+        <br>
+
+
+        <div class="p-fluid p-formgrid grid">
+            <div class="p-field col-12 md:col-4 md:mb-4 mb-0 px-3">
+                <span class="p-float-label">
+                    <input pInputText id="ftxt-nombreBancos"
+                           type="text" required="true"
+                           formControlName="nombreBancos">
+                        <label for="ftxt-nombreBancos">* Nombre</label>
+                </span>
+            </div>
+
+            <div class="p-field col-12 md:col-4 md:mb-4 mb-0 px-3">
+                <label for="ftxt-estadoBancos" style="color: rgba(0, 0, 0, 0.6);">* Estado</label>
+                <span class="p-float-label">
+                <p-inputSwitch  id="ftxt-estadoBancos"
+                                formControlName="estado"></p-inputSwitch>
+            </span>
+            </div>
+
+
+        </div>
+
+        <div class="p-fluid p-formgrid grid">
+            <div class="p-field col-12 md:col-4 md:mb-4 mb-0 px-3">
+                <label style="color:  rgba(0, 0, 0, 0.6);" for="ftxt-descBancos">* Detalle</label>
+                <span class="p-float-label">
+                <textarea pInputTextarea rows="4"
+                          cols="30" id="ftxt-descBancos"
+                          required="true"
+                          formControlName="descBancos"></textarea>
+            </span>
+            </div>
+        </div>
+        <div class="p-fluid p-formgrid grid">
+            <div class="p-field col-12 md:col-4 md:mb-4 mb-0 px-3">
+            <span class="p-float-label">
+                <input pInputText  id="ftxt-fechaBancos"
+                       type="text" dateFormat="yyyy/mm/dd"
+                       formControlName="fechaBancos"  readonly>
+                    <label for="ftxt-fechaBancos">* Fecha Registro </label>
+            </span>
+            </div>
+        </div>
+        <div class="central">
+            <p-toolbar >
+        <div class="p-toolbar-group-center">
+            <button pButton label="Guardar" class="p-button p-button-lg m-1 p-button-info" icon="pi pi-send"
+                    type="submit" (click)="guardarbancos()" pTooltip="Guardar" tooltipPosition="right"></button>
+
+            <button pButton label="Cancelar" class="p-button p-button-lg m-1 p-button-danger" icon="pi pi-times"
+                    (click)="cancelar()" pTooltip="Cancelar" tooltipPosition="right"></button>
+
+
+        </div>
+            </p-toolbar>
+        </div>
+
+
+    </div>
+</form>
+
+<p-confirmDialog [style]="{width: '450px'}"></p-confirmDialog>
+
+<p-divider></p-divider>
+<app-bancos-table [listBancos]="listBancos"
+                       (bancosSelect)=setSeleccionado($event)></app-bancos-table>

src/app/main/pages/laboratorio/components/bancos/bancos.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BancosComponent } from './bancos.component';
+
+describe('BancosComponent', () => {
+  let component: BancosComponent;
+  let fixture: ComponentFixture<BancosComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BancosComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BancosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/main/pages/laboratorio/components/bancos/bancos.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import {BancoDto} from "../../model/Bancos.dto";
+import {ResponseGenerico} from "../../../../../_dto/response-generico";
+import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
+import {TokenDto} from "../../../../../_dto/token-dto";
+import {AppService} from "../../../../../_service/app.service";
+import { TokenService } from "../../../../../_service/token.service";
+import {BreadcrumbService} from "../../../../../_service/utils/app.breadcrumb.service";
+import {BancosService} from "../../services/bancos.service";
+import { severities } from "../../../../../_enums/constDomain";
+
+@Component({
+    selector: 'app-bancos',
+    templateUrl: './bancos.component.html',
+    styleUrls: ['./bancos.component.scss']
+})
+export class BancosComponent implements OnInit {
+
+    @Input() bancos: BancoDto;
+
+    proceso: string= 'bancos';
+
+    response: ResponseGenerico
+
+    formBancos: FormGroup
+
+    listBancos: BancoDto[]= [];
+
+    token: TokenDto;
+
+    constructor(
+        public appService: AppService,
+        private formBuilder: FormBuilder,
+        private tokenService: TokenService,
+        private breadcrumbService: BreadcrumbService,
+
+        private bancosService: BancosService
+    ) {
+        this.breadcrumbService.setItems([{label: 'BANCOS'}]);
+    }
+
+    ngOnInit(): void {
+        this.iniciarForms()
+        this.llenarListBancos()
+
+    }
+
+    get f() {
+        return this.formBancos.controls;
+    }
+
+    iniciarForms(){
+        this.formBancos= this.formBuilder.group({
+            idBancos: new FormControl(null,),
+            nombreBancos: new FormControl('', Validators.compose([Validators.required])),
+            descBancos: new FormControl('', Validators.compose([Validators.required])),
+            estado: new FormControl(true, Validators.compose([Validators.requiredTrue])),
+            fechaBancos: new FormControl(new Date().toLocaleDateString(), Validators.compose([Validators.required])),
+
+        });
+
+        this.token = JSON.parse(this.tokenService.getResponseAuth());
+      //  this.f.idBancos.setValue(this.token.id)
+    }
+
+
+    setSeleccionado(obj) {
+        this.bancos = obj;
+        this.formBancos = this.formBuilder.group(this.bancos);
+        this.f.fechaBancos.setValue(new Date(this.bancos.fechaBancos).toLocaleString())
+        console.log("EMITI",this.bancos);
+    }
+
+
+    async llenarListBancos(){
+        await this.bancosService.getAll().subscribe({
+            next: data => {
+                this.listBancos = data.listado
+                console.log("CORRECTO");
+                console.log(this.listBancos);
+            },
+            complete: () => {
+                this.appService.msgInfoDetail(severities.INFO, 'INFO', 'Datos Cargados exitosamente')
+            },
+            error: error => {
+                this.appService.msgInfoDetail(severities.ERROR, 'ERROR', error.error)
+            }
+        })
+    }
+
+
+    guardarbancos(){
+
+        if(this.formBancos.invalid){
+            this.appService.msgInfoDetail('warn', 'Verificación', 'Verificar los Datos a Ingresar')
+            return
+        }else{
+           // alert(this.formBancos.value.descBancos);
+
+         //   if(this.formBancos.value.idBancos!=null){
+                this.bancos= this.formBancos.value;
+                this.bancos.nombreBancos= this.f.nombreBancos.value;
+                this.bancos.descBancos= this.f.descBancos.value;
+                this.bancos.idUsuarioBancos= 1;
+
+
+                if(this.bancos.idBancos!= null){
+                    this.bancos.fechaBancos= new Date(this.bancos.fechaBancos);
+                }else{
+                    this.bancos.fechaBancos= new Date();
+
+
+                }
+
+            if(this.formBancos.value.estado){
+                this.bancos.estadoBancos= "ACTIVO";
+            }else{
+                this.bancos.estadoBancos= "INACTIVO";
+            }
+          //  }
+
+            this.bancosService.saveObject(this.bancos).subscribe({
+                next: (data) => {
+                    this.response = data;
+                    if (this.response.codigoRespuestaValue == 200) {
+                        if (!this.bancos.idBancos) {
+                            this.appService.msgCreate()
+                        } else {
+                            this.appService.msgUpdate()
+                        }
+
+                        this.setearForm();
+                        this.llenarListBancos();
+                    }
+
+                },
+                complete: () => {
+                },
+                error: error => {
+                }
+            })
+
+
+
+        }
+    }
+
+
+    setearForm() {
+        this.formBancos.reset();
+        this.iniciarForms();
+        this.bancos=null;
+    }
+
+
+    cancelar() {
+        this.setearForm();
+        this.appService.msgInfoDetail('info', '', 'Acción Cancelada')
+    }
+
+}

src/app/main/pages/laboratorio/components/concepto-liquidacion-table/concepto-liquidacion-table.component.html

+<section class="content">
+    <div class="container-fluid">
+        <div class="card">
+            <p-table #dt [value]="listConceptoLiq" [rows]="10" [paginator]="true" [loading]="loading"
+                     [globalFilterFields]="[
+                        'idConceptoLiquidacion',
+                        'nombreConceptoLiq',
+                        'precio',
+                        'idIva',
+                        'estadoConceptoLiq'
+                     ]"
+                     responsiveLayout="scroll" [(selection)]="selectedConcepto"
+                     [rowHover]="true" dataKey="idConceptoLiquidacion"
+                     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [showCurrentPageReport]="true">
+                <ng-template pTemplate="caption">
+                    <div class="flex justify-content-between flex-wrap">
+                        <div>
+                            <button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()"
+                                    class="p-button-sm p-button-outlined p-button-success p-mr-2 m-1" pTooltip="XLS"
+                                    tooltipPosition="bottom"></button>
+                            <button type="button" pButton pRipple icon="pi pi-file-pdf" (click)="exportPdf()"
+                                    class="p-button-sm p-button-outlined p-button-danger p-mr-2 m-1" pTooltip="PDF"
+                                    tooltipPosition="bottom"></button>
+                            <button pButton pRipple label="Delete" icon="pi pi-trash" class="p-button-danger p-button-sm m-1"
+                                    (click)="deleteSelectedBancos()" pTooltip="Eliminar Seleccionados" tooltipPosition="right"
+                                    [disabled]="!selectedConcepto || !selectedConcepto.length"></button>
+                            <button pButton label="Clear" class="p-button-outlined p-button-sm m-1" icon="pi pi-filter-slash"
+                                    (click)="clear(dt)" pTooltip="Quitar Filtros" tooltipPosition="right"></button>
+                        </div>
+
+                        <label class="text-center">BANCOS</label>
+                        <span class="p-input-icon-left ">
+              <i class="pi pi-search"></i>
+              <input pInputText type="text" class="p-inputtext-sm"
+                     (input)="dt.filterGlobal($event.target.valueOf(), 'contains')" placeholder="Busqueda General" />
+            </span>
+                    </div>
+                </ng-template>
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th style="width: 3rem">
+                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                        </th>
+                        <th pSortableColumn="idConceptoLiquidacion">
+                            <div class="flex justify-content-between align-items-center"> <bold  style="font-weight: bold;">&#8470;</bold>
+                                <p-sortIcon field="idConceptoLiquidacion"></p-sortIcon>
+                                <p-columnFilter type="text" field="idConceptoLiquidacion" display="menu"></p-columnFilter>
+                            </div>
+                        </th>
+                        <th pSortableColumn="nombreConceptoLiq">
+                            <div class="flex justify-content-between align-items-center">Nombre
+                                <p-sortIcon field="nombreConceptoLiq"></p-sortIcon>
+                                <p-columnFilter type="text" field="nombreConceptoLiq" display="menu"></p-columnFilter>
+                            </div>
+                        </th>
+
+                        <th pSortableColumn="precio">
+                            <div class="flex justify-content-between align-items-center">Precio
+                                <p-sortIcon field="precio"></p-sortIcon>
+                                <p-columnFilter type="text" field="precio" display="menu"></p-columnFilter>
+                            </div>
+                        </th>
+
+                        <th pSortableColumn="idIva">
+                            <div class="flex justify-content-between align-items-center">Iva
+                                <p-sortIcon field="idIva"></p-sortIcon>
+                                <p-columnFilter type="text" field="idIva" display="menu"></p-columnFilter>
+                            </div>
+                        </th>
+
+                        <th pSortableColumn="estadoConceptoLiq">
+                            <div class="flex justify-content-between align-items-center">Estado
+                                <p-sortIcon field="estadoConceptoLiq"></p-sortIcon>
+                                <p-columnFilter type="text" field="estadoConceptoLiq" display="menu"></p-columnFilter>
+                            </div>
+                        </th>
+
+
+                        <th>Acciones</th>
+                    </tr>
+
+                </ng-template>
+                <ng-template pTemplate="body" let-item let-rowIndex="rowIndex" >
+                    <tr>
+                        <td>
+                            <p-tableCheckbox [value]="item"></p-tableCheckbox>
+                        </td>
+                        <td>{{rowIndex+1}}</td>
+                        <td>{{item.nombreConceptoLiq}}</td>
+                        <td>{{item.precio}}</td>
+                        <td>{{item.idIva}}</td>
+                        <td   >  <mark [ngClass]="item.estadoConceptoLiq == 'ACTIVO'
+                            ? 'border-green-500' : 'border-red-500' ">{{item.estadoConceptoLiq}}</mark></td>
+
+                        <td>
+                            <button pButton pRipple icon="pi pi-pencil"
+                                    class="p-button-rounded p-button-warning p-button-text p-button-sm p-mr-2" (click)="editConcepto(item)"
+                                    pTooltip="Editar" tooltipPosition="left"   ></button>
+                            <button pButton pRipple icon="pi pi-trash"
+                                    class="p-button-rounded p-button-danger p-button-text p-button-sm" (click)="deleteBancos(item)"
+                                    pTooltip="Eliminar" tooltipPosition="left" *ngIf="item.estadoConceptoLiq =='ACTIVO'" ></button>
+                        </td>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="summary">
+                    <div class="p-d-flex p-ai-center p-jc-between">
+                        Registros Totales: {{listConceptoLiq ? listConceptoLiq.length : 0 }}.
+                    </div>
+                </ng-template>
+            </p-table>
+        </div>
+    </div>
+</section>