Second pass on the formatting.

src/app/core/auth/auth.interceptor.ts

@@ -1,8 +1,13 @@
-import { HttpErrorResponse, HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
+import {
+    HttpErrorResponse,
+    HttpEvent,
+    HttpHandlerFn,
+    HttpRequest,
+} from '@angular/common/http';
 import { inject } from '@angular/core';
 import { AuthService } from 'app/core/auth/auth.service';
 import { AuthUtils } from 'app/core/auth/auth.utils';
-import { catchError, Observable, throwError } from 'rxjs';
+import { Observable, catchError, throwError } from 'rxjs';
 
 /**
  * Intercept
@@ -10,8 +15,10 @@ import { catchError, Observable, throwError } from 'rxjs';
  * @param req
  * @param next
  */
-export const authInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> =>
-{
+export const authInterceptor = (
+    req: HttpRequest<unknown>,
+    next: HttpHandlerFn
+): Observable<HttpEvent<unknown>> => {
     const authService = inject(AuthService);
 
     // Clone the request object
@@ -25,20 +32,23 @@ export const authInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn):
     // for the protected API routes which our response interceptor will
     // catch and delete the access token from the local storage while logging
     // the user out from the app.
-    if ( authService.accessToken && !AuthUtils.isTokenExpired(authService.accessToken) )
-    {
+    if (
+        authService.accessToken &&
+        !AuthUtils.isTokenExpired(authService.accessToken)
+    ) {
         newReq = req.clone({
-            headers: req.headers.set('Authorization', 'Bearer ' + authService.accessToken),
+            headers: req.headers.set(
+                'Authorization',
+                'Bearer ' + authService.accessToken
+            ),
         });
     }
 
     // Response
     return next(newReq).pipe(
-        catchError((error) =>
-        {
+        catchError((error) => {
             // Catch "401 Unauthorized" responses
-            if ( error instanceof HttpErrorResponse && error.status === 401 )
-            {
+            if (error instanceof HttpErrorResponse && error.status === 401) {
                 // Sign out
                 authService.signOut();
 
@@ -47,6 +57,6 @@ export const authInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn):
             }
 
             return throwError(error);
-        }),
+        })
     );
 };

src/app/core/auth/auth.provider.ts

@@ -1,16 +1,20 @@
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import { ENVIRONMENT_INITIALIZER, EnvironmentProviders, inject, Provider } from '@angular/core';
+import {
+    ENVIRONMENT_INITIALIZER,
+    EnvironmentProviders,
+    Provider,
+    inject,
+} from '@angular/core';
 import { authInterceptor } from 'app/core/auth/auth.interceptor';
 import { AuthService } from 'app/core/auth/auth.service';
 
-export const provideAuth = (): Array<Provider | EnvironmentProviders> =>
-{
+export const provideAuth = (): Array<Provider | EnvironmentProviders> => {
     return [
         provideHttpClient(withInterceptors([authInterceptor])),
         {
-            provide : ENVIRONMENT_INITIALIZER,
+            provide: ENVIRONMENT_INITIALIZER,
             useValue: () => inject(AuthService),
-            multi   : true,
+            multi: true,
         },
     ];
 };

src/app/core/auth/auth.service.ts

@@ -4,9 +4,8 @@ import { AuthUtils } from 'app/core/auth/auth.utils';
 import { UserService } from 'app/core/user/user.service';
 import { catchError, Observable, of, switchMap, throwError } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class AuthService
-{
+@Injectable({ providedIn: 'root' })
+export class AuthService {
     private _authenticated: boolean = false;
     private _httpClient = inject(HttpClient);
     private _userService = inject(UserService);
@@ -18,13 +17,11 @@ export class AuthService
     /**
      * Setter & getter for access token
      */
-    set accessToken(token: string)
-    {
+    set accessToken(token: string) {
         localStorage.setItem('accessToken', token);
     }
 
-    get accessToken(): string
-    {
+    get accessToken(): string {
         return localStorage.getItem('accessToken') ?? '';
     }
 
@@ -37,8 +34,7 @@ export class AuthService
      *
      * @param email
      */
-    forgotPassword(email: string): Observable<any>
-    {
+    forgotPassword(email: string): Observable<any> {
         return this._httpClient.post('api/auth/forgot-password', email);
     }
 
@@ -47,8 +43,7 @@ export class AuthService
      *
      * @param password
      */
-    resetPassword(password: string): Observable<any>
-    {
+    resetPassword(password: string): Observable<any> {
         return this._httpClient.post('api/auth/reset-password', password);
     }
 
@@ -57,17 +52,14 @@ export class AuthService
      *
      * @param credentials
      */
-    signIn(credentials: { email: string; password: string }): Observable<any>
-    {
+    signIn(credentials: { email: string; password: string }): Observable<any> {
         // Throw error, if the user is already logged in
-        if ( this._authenticated )
-        {
+        if (this._authenticated) {
             return throwError('User is already logged in.');
         }
 
         return this._httpClient.post('api/auth/sign-in', credentials).pipe(
-            switchMap((response: any) =>
-            {
+            switchMap((response: any) => {
                 // Store the access token in the local storage
                 this.accessToken = response.accessToken;
 
@@ -79,55 +71,52 @@ export class AuthService
 
                 // Return a new observable with the response
                 return of(response);
-            }),
+            })
         );
     }
 
     /**
      * Sign in using the access token
      */
-    signInUsingToken(): Observable<any>
-    {
+    signInUsingToken(): Observable<any> {
         // Sign in using the token
-        return this._httpClient.post('api/auth/sign-in-with-token', {
-            accessToken: this.accessToken,
-        }).pipe(
-            catchError(() =>
+        return this._httpClient
+            .post('api/auth/sign-in-with-token', {
+                accessToken: this.accessToken,
+            })
+            .pipe(
+                catchError(() =>
+                    // Return false
+                    of(false)
+                ),
+                switchMap((response: any) => {
+                    // Replace the access token with the new one if it's available on
+                    // the response object.
+                    //
+                    // This is an added optional step for better security. Once you sign
+                    // in using the token, you should generate a new one on the server
+                    // side and attach it to the response object. Then the following
+                    // piece of code can replace the token with the refreshed one.
+                    if (response.accessToken) {
+                        this.accessToken = response.accessToken;
+                    }
 
-                // Return false
-                of(false),
-            ),
-            switchMap((response: any) =>
-            {
-                // Replace the access token with the new one if it's available on
-                // the response object.
-                //
-                // This is an added optional step for better security. Once you sign
-                // in using the token, you should generate a new one on the server
-                // side and attach it to the response object. Then the following
-                // piece of code can replace the token with the refreshed one.
-                if ( response.accessToken )
-                {
-                    this.accessToken = response.accessToken;
-                }
+                    // Set the authenticated flag to true
+                    this._authenticated = true;
 
-                // Set the authenticated flag to true
-                this._authenticated = true;
+                    // Store the user on the user service
+                    this._userService.user = response.user;
 
-                // Store the user on the user service
-                this._userService.user = response.user;
-
-                // Return true
-                return of(true);
-            }),
-        );
+                    // Return true
+                    return of(true);
+                })
+            );
     }
 
     /**
      * Sign out
      */
-    signOut(): Observable<any>
-    {
+    signOut(): Observable<any> {
         // Remove the access token from the local storage
         localStorage.removeItem('accessToken');
 
@@ -143,8 +132,12 @@ export class AuthService
      *
      * @param user
      */
-    signUp(user: { name: string; email: string; password: string; company: string }): Observable<any>
-    {
+    signUp(user: {
+        name: string;
+        email: string;
+        password: string;
+        company: string;
+    }): Observable<any> {
         return this._httpClient.post('api/auth/sign-up', user);
     }
 
@@ -153,31 +146,29 @@ export class AuthService
      *
      * @param credentials
      */
-    unlockSession(credentials: { email: string; password: string }): Observable<any>
-    {
+    unlockSession(credentials: {
+        email: string;
+        password: string;
+    }): Observable<any> {
         return this._httpClient.post('api/auth/unlock-session', credentials);
     }
 
     /**
      * Check the authentication status
      */
-    check(): Observable<boolean>
-    {
+    check(): Observable<boolean> {
         // Check if the user is logged in
-        if ( this._authenticated )
-        {
+        if (this._authenticated) {
             return of(true);
         }
 
         // Check the access token availability
-        if ( !this.accessToken )
-        {
+        if (!this.accessToken) {
             return of(false);
         }
 
         // Check the access token expire date
-        if ( AuthUtils.isTokenExpired(this.accessToken) )
-        {
+        if (AuthUtils.isTokenExpired(this.accessToken)) {
             return of(false);
         }
 

src/app/core/auth/auth.utils.ts

@@ -5,8 +5,7 @@
 // https://github.com/auth0/angular2-jwt
 // -----------------------------------------------------------------------------------------------------
 
-export class AuthUtils
-{
+export class AuthUtils {
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
@@ -17,11 +16,9 @@ export class AuthUtils
      * @param token
      * @param offsetSeconds
      */
-    static isTokenExpired(token: string, offsetSeconds?: number): boolean
-    {
+    static isTokenExpired(token: string, offsetSeconds?: number): boolean {
         // Return if there is no token
-        if ( !token || token === '' )
-        {
+        if (!token || token === '') {
             return true;
         }
 
@@ -30,8 +27,7 @@ export class AuthUtils
 
         offsetSeconds = offsetSeconds || 0;
 
-        if ( date === null )
-        {
+        if (date === null) {
             return true;
         }
 
@@ -50,17 +46,16 @@ export class AuthUtils
      * @param str
      * @private
      */
-    private static _b64decode(str: string): string
-    {
-        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+    private static _b64decode(str: string): string {
+        const chars =
+            'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
         let output = '';
 
         str = String(str).replace(/=+$/, '');
 
-        if ( str.length % 4 === 1 )
-        {
+        if (str.length % 4 === 1) {
             throw new Error(
-                '\'atob\' failed: The string to be decoded is not correctly encoded.',
+                "'atob' failed: The string to be decoded is not correctly encoded."
             );
         }
 
@@ -72,16 +67,13 @@ export class AuthUtils
             (buffer = str.charAt(idx++));
             // character found in table? initialize bit storage and add its ascii value;
             ~buffer &&
-            (
-                (bs = bc % 4 ? bs * 64 + buffer : buffer),
-                    // and if not first of each 4 characters,
-                    // convert the first 8 bits to one ascii character
-                bc++ % 4
-            )
+            ((bs = bc % 4 ? bs * 64 + buffer : buffer),
+            // and if not first of each 4 characters,
+            // convert the first 8 bits to one ascii character
+            bc++ % 4)
                 ? (output += String.fromCharCode(255 & (bs >> ((-2 * bc) & 6))))
                 : 0
-        )
-        {
+        ) {
             // try to find character in table (0-63, not found => -1)
             buffer = chars.indexOf(buffer);
         }
@@ -96,12 +88,15 @@ export class AuthUtils
      * @param str
      * @private
      */
-    private static _b64DecodeUnicode(str: any): string
-    {
+    private static _b64DecodeUnicode(str: any): string {
         return decodeURIComponent(
             Array.prototype.map
-                .call(this._b64decode(str), (c: any) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
-                .join(''),
+                .call(
+                    this._b64decode(str),
+                    (c: any) =>
+                        '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+                )
+                .join('')
         );
     }
 
@@ -111,27 +106,21 @@ export class AuthUtils
      * @param str
      * @private
      */
-    private static _urlBase64Decode(str: string): string
-    {
+    private static _urlBase64Decode(str: string): string {
         let output = str.replace(/-/g, '+').replace(/_/g, '/');
-        switch ( output.length % 4 )
-        {
-            case 0:
-            {
+        switch (output.length % 4) {
+            case 0: {
                 break;
             }
-            case 2:
-            {
+            case 2: {
                 output += '==';
                 break;
             }
-            case 3:
-            {
+            case 3: {
                 output += '=';
                 break;
             }
-            default:
-            {
+            default: {
                 throw Error('Illegal base64url string!');
             }
         }
@@ -144,27 +133,25 @@ export class AuthUtils
      * @param token
      * @private
      */
-    private static _decodeToken(token: string): any
-    {
+    private static _decodeToken(token: string): any {
         // Return if there is no token
-        if ( !token )
-        {
+        if (!token) {
             return null;
         }
 
         // Split the token
         const parts = token.split('.');
 
-        if ( parts.length !== 3 )
-        {
-            throw new Error('The inspected token doesn\'t appear to be a JWT. Check to make sure it has three parts and see https://jwt.io for more.');
+        if (parts.length !== 3) {
+            throw new Error(
+                "The inspected token doesn't appear to be a JWT. Check to make sure it has three parts and see https://jwt.io for more."
+            );
         }
 
         // Decode the token using the Base64 decoder
         const decoded = this._urlBase64Decode(parts[1]);
 
-        if ( !decoded )
-        {
+        if (!decoded) {
             throw new Error('Cannot decode the token.');
         }
 
@@ -177,14 +164,12 @@ export class AuthUtils
      * @param token
      * @private
      */
-    private static _getTokenExpirationDate(token: string): Date | null
-    {
+    private static _getTokenExpirationDate(token: string): Date | null {
         // Get the decoded token
         const decodedToken = this._decodeToken(token);
 
         // Return if the decodedToken doesn't have an 'exp' field
-        if ( !decodedToken.hasOwnProperty('exp') )
-        {
+        if (!decodedToken.hasOwnProperty('exp')) {
             return null;
         }
 

src/app/core/auth/guards/auth.guard.ts

@@ -3,26 +3,28 @@ import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
 import { AuthService } from 'app/core/auth/auth.service';
 import { of, switchMap } from 'rxjs';
 
-export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
-{
+export const AuthGuard: CanActivateFn | CanActivateChildFn = (route, state) => {
     const router: Router = inject(Router);
 
     // Check the authentication status
-    return inject(AuthService).check().pipe(
-        switchMap((authenticated) =>
-        {
-            // If the user is not authenticated...
-            if ( !authenticated )
-            {
-                // Redirect to the sign-in page with a redirectUrl param
-                const redirectURL = state.url === '/sign-out' ? '' : `redirectURL=${state.url}`;
-                const urlTree = router.parseUrl(`sign-in?${redirectURL}`);
+    return inject(AuthService)
+        .check()
+        .pipe(
+            switchMap((authenticated) => {
+                // If the user is not authenticated...
+                if (!authenticated) {
+                    // Redirect to the sign-in page with a redirectUrl param
+                    const redirectURL =
+                        state.url === '/sign-out'
+                            ? ''
+                            : `redirectURL=${state.url}`;
+                    const urlTree = router.parseUrl(`sign-in?${redirectURL}`);
 
-                return of(urlTree);
-            }
+                    return of(urlTree);
+                }
 
-            // Allow the access
-            return of(true);
-        }),
-    );
+                // Allow the access
+                return of(true);
+            })
+        );
 };

src/app/core/auth/guards/noAuth.guard.ts

@@ -3,22 +3,24 @@ import { CanActivateChildFn, CanActivateFn, Router } from '@angular/router';
 import { AuthService } from 'app/core/auth/auth.service';
 import { of, switchMap } from 'rxjs';
 
-export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (route, state) =>
-{
+export const NoAuthGuard: CanActivateFn | CanActivateChildFn = (
+    route,
+    state
+) => {
     const router: Router = inject(Router);
 
     // Check the authentication status
-    return inject(AuthService).check().pipe(
-        switchMap((authenticated) =>
-        {
-            // If the user is authenticated...
-            if ( authenticated )
-            {
-                return of(router.parseUrl(''));
-            }
+    return inject(AuthService)
+        .check()
+        .pipe(
+            switchMap((authenticated) => {
+                // If the user is authenticated...
+                if (authenticated) {
+                    return of(router.parseUrl(''));
+                }
 
-            // Allow the access
-            return of(true);
-        }),
-    );
+                // Allow the access
+                return of(true);
+            })
+        );
 };

src/app/core/icons/icons.provider.ts

@@ -1,13 +1,17 @@
-import { ENVIRONMENT_INITIALIZER, EnvironmentProviders, inject, Provider } from '@angular/core';
+import {
+    ENVIRONMENT_INITIALIZER,
+    EnvironmentProviders,
+    inject,
+    Provider,
+} from '@angular/core';
 import { IconsService } from 'app/core/icons/icons.service';
 
-export const provideIcons = (): Array<Provider | EnvironmentProviders> =>
-{
+export const provideIcons = (): Array<Provider | EnvironmentProviders> => {
     return [
         {
-            provide : ENVIRONMENT_INITIALIZER,
+            provide: ENVIRONMENT_INITIALIZER,
             useValue: () => inject(IconsService),
-            multi   : true,
+            multi: true,
         },
     ];
 };

src/app/core/icons/icons.service.ts

@@ -2,24 +2,54 @@ import { inject, Injectable } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 
-@Injectable({providedIn: 'root'})
-export class IconsService
-{
+@Injectable({ providedIn: 'root' })
+export class IconsService {
     /**
      * Constructor
      */
-    constructor()
-    {
+    constructor() {
         const domSanitizer = inject(DomSanitizer);
         const matIconRegistry = inject(MatIconRegistry);
 
         // Register icon sets
-        matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('icons/material-twotone.svg'));
-        matIconRegistry.addSvgIconSetInNamespace('mat_outline', domSanitizer.bypassSecurityTrustResourceUrl('icons/material-outline.svg'));
-        matIconRegistry.addSvgIconSetInNamespace('mat_solid', domSanitizer.bypassSecurityTrustResourceUrl('icons/material-solid.svg'));
-        matIconRegistry.addSvgIconSetInNamespace('feather', domSanitizer.bypassSecurityTrustResourceUrl('icons/feather.svg'));
-        matIconRegistry.addSvgIconSetInNamespace('heroicons_outline', domSanitizer.bypassSecurityTrustResourceUrl('icons/heroicons-outline.svg'));
-        matIconRegistry.addSvgIconSetInNamespace('heroicons_solid', domSanitizer.bypassSecurityTrustResourceUrl('icons/heroicons-solid.svg'));
-        matIconRegistry.addSvgIconSetInNamespace('heroicons_mini', domSanitizer.bypassSecurityTrustResourceUrl('icons/heroicons-mini.svg'));
+        matIconRegistry.addSvgIconSet(
+            domSanitizer.bypassSecurityTrustResourceUrl(
+                'icons/material-twotone.svg'
+            )
+        );
+        matIconRegistry.addSvgIconSetInNamespace(
+            'mat_outline',
+            domSanitizer.bypassSecurityTrustResourceUrl(
+                'icons/material-outline.svg'
+            )
+        );
+        matIconRegistry.addSvgIconSetInNamespace(
+            'mat_solid',
+            domSanitizer.bypassSecurityTrustResourceUrl(
+                'icons/material-solid.svg'
+            )
+        );
+        matIconRegistry.addSvgIconSetInNamespace(
+            'feather',
+            domSanitizer.bypassSecurityTrustResourceUrl('icons/feather.svg')
+        );
+        matIconRegistry.addSvgIconSetInNamespace(
+            'heroicons_outline',
+            domSanitizer.bypassSecurityTrustResourceUrl(
+                'icons/heroicons-outline.svg'
+            )
+        );
+        matIconRegistry.addSvgIconSetInNamespace(
+            'heroicons_solid',
+            domSanitizer.bypassSecurityTrustResourceUrl(
+                'icons/heroicons-solid.svg'
+            )
+        );
+        matIconRegistry.addSvgIconSetInNamespace(
+            'heroicons_mini',
+            domSanitizer.bypassSecurityTrustResourceUrl(
+                'icons/heroicons-mini.svg'
+            )
+        );
     }
 }

src/app/core/navigation/navigation.service.ts

@@ -3,11 +3,11 @@ import { inject, Injectable } from '@angular/core';
 import { Navigation } from 'app/core/navigation/navigation.types';
 import { Observable, ReplaySubject, tap } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class NavigationService
-{
+@Injectable({ providedIn: 'root' })
+export class NavigationService {
     private _httpClient = inject(HttpClient);
-    private _navigation: ReplaySubject<Navigation> = new ReplaySubject<Navigation>(1);
+    private _navigation: ReplaySubject<Navigation> =
+        new ReplaySubject<Navigation>(1);
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -16,8 +16,7 @@ export class NavigationService
     /**
      * Getter for navigation
      */
-    get navigation$(): Observable<Navigation>
-    {
+    get navigation$(): Observable<Navigation> {
         return this._navigation.asObservable();
     }
 
@@ -28,13 +27,11 @@ export class NavigationService
     /**
      * Get all navigation data
      */
-    get(): Observable<Navigation>
-    {
+    get(): Observable<Navigation> {
         return this._httpClient.get<Navigation>('api/common/navigation').pipe(
-            tap((navigation) =>
-            {
+            tap((navigation) => {
                 this._navigation.next(navigation);
-            }),
+            })
         );
     }
 }

src/app/core/navigation/navigation.types.ts

@@ -1,7 +1,6 @@
 import { FuseNavigationItem } from '@fuse/components/navigation';
 
-export interface Navigation
-{
+export interface Navigation {
     compact: FuseNavigationItem[];
     default: FuseNavigationItem[];
     futuristic: FuseNavigationItem[];

src/app/core/transloco/transloco.http-loader.ts

@@ -3,9 +3,8 @@ import { inject, Injectable } from '@angular/core';
 import { Translation, TranslocoLoader } from '@ngneat/transloco';
 import { Observable } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class TranslocoHttpLoader implements TranslocoLoader
-{
+@Injectable({ providedIn: 'root' })
+export class TranslocoHttpLoader implements TranslocoLoader {
     private _httpClient = inject(HttpClient);
 
     // -----------------------------------------------------------------------------------------------------
@@ -17,8 +16,7 @@ export class TranslocoHttpLoader implements TranslocoLoader
      *
      * @param lang
      */
-    getTranslation(lang: string): Observable<Translation>
-    {
+    getTranslation(lang: string): Observable<Translation> {
         return this._httpClient.get<Translation>(`./i18n/${lang}.json`);
     }
 }

src/app/core/user/user.service.ts

@@ -3,9 +3,8 @@ import { inject, Injectable } from '@angular/core';
 import { User } from 'app/core/user/user.types';
 import { map, Observable, ReplaySubject, tap } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class UserService
-{
+@Injectable({ providedIn: 'root' })
+export class UserService {
     private _httpClient = inject(HttpClient);
     private _user: ReplaySubject<User> = new ReplaySubject<User>(1);
 
@@ -18,14 +17,12 @@ export class UserService
      *
      * @param value
      */
-    set user(value: User)
-    {
+    set user(value: User) {
         // Store the value
         this._user.next(value);
     }
 
-    get user$(): Observable<User>
-    {
+    get user$(): Observable<User> {
         return this._user.asObservable();
     }
 
@@ -36,13 +33,11 @@ export class UserService
     /**
      * Get the current signed-in user data
      */
-    get(): Observable<User>
-    {
+    get(): Observable<User> {
         return this._httpClient.get<User>('api/common/user').pipe(
-            tap((user) =>
-            {
+            tap((user) => {
                 this._user.next(user);
-            }),
+            })
         );
     }
 
@@ -51,13 +46,11 @@ export class UserService
      *
      * @param user
      */
-    update(user: User): Observable<any>
-    {
-        return this._httpClient.patch<User>('api/common/user', {user}).pipe(
-            map((response) =>
-            {
+    update(user: User): Observable<any> {
+        return this._httpClient.patch<User>('api/common/user', { user }).pipe(
+            map((response) => {
                 this._user.next(response);
-            }),
+            })
         );
     }
 }

src/app/core/user/user.types.ts

@@ -1,5 +1,4 @@
-export interface User
-{
+export interface User {
     id: string;
     name: string;
     email: string;

src/app/layout/common/languages/languages.component.html

@@ -1,35 +1,37 @@
 <!-- Button -->
-<button
-    mat-icon-button
-    [matMenuTriggerFor]="languages">
-    <ng-container *ngTemplateOutlet="flagImage; context: {$implicit: activeLang}"></ng-container>
+<button mat-icon-button [matMenuTriggerFor]="languages">
+    <ng-container
+        *ngTemplateOutlet="flagImage; context: { $implicit: activeLang }"
+    ></ng-container>
 </button>
 
 <!-- Language menu -->
-<mat-menu
-    [xPosition]="'before'"
-    #languages="matMenu">
+<mat-menu [xPosition]="'before'" #languages="matMenu">
     <ng-container *ngFor="let lang of availableLangs; trackBy: trackByFn">
-        <button
-            mat-menu-item
-            (click)="setActiveLang(lang.id)">
+        <button mat-menu-item (click)="setActiveLang(lang.id)">
             <span class="flex items-center">
-                <ng-container *ngTemplateOutlet="flagImage; context: {$implicit: lang.id}"></ng-container>
-                <span class="ml-3">{{lang.label}}</span>
+                <ng-container
+                    *ngTemplateOutlet="
+                        flagImage;
+                        context: { $implicit: lang.id }
+                    "
+                ></ng-container>
+                <span class="ml-3">{{ lang.label }}</span>
             </span>
         </button>
     </ng-container>
 </mat-menu>
 
 <!-- Flag image template -->
-<ng-template
-    let-lang
-    #flagImage>
-    <span class="relative w-6 shadow rounded-sm overflow-hidden">
-        <span class="absolute inset-0 ring-1 ring-inset ring-black ring-opacity-10"></span>
+<ng-template let-lang #flagImage>
+    <span class="relative w-6 overflow-hidden rounded-sm shadow">
+        <span
+            class="absolute inset-0 ring-1 ring-inset ring-black ring-opacity-10"
+        ></span>
         <img
             class="w-full"
             [src]="'images/flags/' + flagCodes[lang].toUpperCase() + '.svg'"
-            [alt]="'Flag image for ' + lang">
+            [alt]="'Flag image for ' + lang"
+        />
     </span>
 </ng-template>

src/app/layout/common/languages/languages.component.ts

@@ -1,22 +1,31 @@
 import { NgFor, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    OnDestroy,
+    OnInit,
+    ViewEncapsulation,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+import {
+    FuseNavigationService,
+    FuseVerticalNavigationComponent,
+} from '@fuse/components/navigation';
 import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
 import { take } from 'rxjs';
 
 @Component({
-    selector       : 'languages',
-    templateUrl    : './languages.component.html',
-    encapsulation  : ViewEncapsulation.None,
+    selector: 'languages',
+    templateUrl: './languages.component.html',
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'languages',
-    standalone     : true,
-    imports        : [MatButtonModule, MatMenuModule, NgTemplateOutlet, NgFor],
+    exportAs: 'languages',
+    standalone: true,
+    imports: [MatButtonModule, MatMenuModule, NgTemplateOutlet, NgFor],
 })
-export class LanguagesComponent implements OnInit, OnDestroy
-{
+export class LanguagesComponent implements OnInit, OnDestroy {
     availableLangs: AvailableLangs;
     activeLang: string;
     flagCodes: any;
@@ -27,10 +36,8 @@ export class LanguagesComponent implements OnInit, OnDestroy
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _fuseNavigationService: FuseNavigationService,
-        private _translocoService: TranslocoService,
-    )
-    {
-    }
+        private _translocoService: TranslocoService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -39,14 +46,12 @@ export class LanguagesComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Get the available languages from transloco
         this.availableLangs = this._translocoService.getAvailableLangs();
 
         // Subscribe to language changes
-        this._translocoService.langChanges$.subscribe((activeLang) =>
-        {
+        this._translocoService.langChanges$.subscribe((activeLang) => {
             // Get the active lang
             this.activeLang = activeLang;
 
@@ -56,17 +61,15 @@ export class LanguagesComponent implements OnInit, OnDestroy
 
         // Set the country iso codes for languages for flags
         this.flagCodes = {
-            'en': 'us',
-            'tr': 'tr',
+            en: 'us',
+            tr: 'tr',
         };
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
-    }
+    ngOnDestroy(): void {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
@@ -77,8 +80,7 @@ export class LanguagesComponent implements OnInit, OnDestroy
      *
      * @param lang
      */
-    setActiveLang(lang: string): void
-    {
+    setActiveLang(lang: string): void {
         // Set the active lang
         this._translocoService.setActiveLang(lang);
     }
@@ -89,8 +91,7 @@ export class LanguagesComponent implements OnInit, OnDestroy
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 
@@ -104,8 +105,7 @@ export class LanguagesComponent implements OnInit, OnDestroy
      * @param lang
      * @private
      */
-    private _updateNavigation(lang: string): void
-    {
+    private _updateNavigation(lang: string): void {
         // For the demonstration purposes, we will only update the Dashboard names
         // from the navigation but you can do a full swap and change the entire
         // navigation data.
@@ -114,11 +114,13 @@ export class LanguagesComponent implements OnInit, OnDestroy
         // it's up to you.
 
         // Get the component -> navigation data -> item
-        const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>('mainNavigation');
+        const navComponent =
+            this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
+                'mainNavigation'
+            );
 
         // Return if the navigation component does not exist
-        if ( !navComponent )
-        {
+        if (!navComponent) {
             return null;
         }
 
@@ -126,12 +128,15 @@ export class LanguagesComponent implements OnInit, OnDestroy
         const navigation = navComponent.navigation;
 
         // Get the Project dashboard item and update its title
-        const projectDashboardItem = this._fuseNavigationService.getItem('dashboards.project', navigation);
-        if ( projectDashboardItem )
-        {
-            this._translocoService.selectTranslate('Project').pipe(take(1))
-                .subscribe((translation) =>
-                {
+        const projectDashboardItem = this._fuseNavigationService.getItem(
+            'dashboards.project',
+            navigation
+        );
+        if (projectDashboardItem) {
+            this._translocoService
+                .selectTranslate('Project')
+                .pipe(take(1))
+                .subscribe((translation) => {
                     // Set the title
                     projectDashboardItem.title = translation;
 
@@ -141,12 +146,15 @@ export class LanguagesComponent implements OnInit, OnDestroy
         }
 
         // Get the Analytics dashboard item and update its title
-        const analyticsDashboardItem = this._fuseNavigationService.getItem('dashboards.analytics', navigation);
-        if ( analyticsDashboardItem )
-        {
-            this._translocoService.selectTranslate('Analytics').pipe(take(1))
-                .subscribe((translation) =>
-                {
+        const analyticsDashboardItem = this._fuseNavigationService.getItem(
+            'dashboards.analytics',
+            navigation
+        );
+        if (analyticsDashboardItem) {
+            this._translocoService
+                .selectTranslate('Analytics')
+                .pipe(take(1))
+                .subscribe((translation) => {
                     // Set the title
                     analyticsDashboardItem.title = translation;
 

src/app/layout/common/messages/messages.component.html

@@ -1,12 +1,13 @@
 <!-- Messages toggle -->
-<button
-    mat-icon-button
-    (click)="openPanel()"
-    #messagesOrigin>
+<button mat-icon-button (click)="openPanel()" #messagesOrigin>
     <ng-container *ngIf="unreadCount > 0">
-        <span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
-            <span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-indigo-600 text-indigo-50 text-xs font-medium">
-                {{unreadCount}}
+        <span
+            class="absolute left-0 right-0 top-0 flex h-3 items-center justify-center"
+        >
+            <span
+                class="ml-4 mt-2.5 flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-indigo-600 px-1 text-xs font-medium text-indigo-50"
+            >
+                {{ unreadCount }}
             </span>
         </span>
     </ng-container>
@@ -15,18 +16,19 @@
 
 <!-- Messages panel -->
 <ng-template #messagesPanel>
-
-    <div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
-
+    <div
+        class="fixed inset-0 flex flex-col overflow-hidden shadow-lg sm:static sm:inset-auto sm:w-90 sm:min-w-90 sm:rounded-2xl"
+    >
         <!-- Header -->
-        <div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
-            <div class="sm:hidden -ml-1 mr-3">
-                <button
-                    mat-icon-button
-                    (click)="closePanel()">
+        <div
+            class="flex shrink-0 items-center bg-primary py-4 pl-6 pr-4 text-on-primary"
+        >
+            <div class="-ml-1 mr-3 sm:hidden">
+                <button mat-icon-button (click)="closePanel()">
                     <mat-icon
-                        class="icon-size-5 text-current"
-                        [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
+                        class="text-current icon-size-5"
+                        [svgIcon]="'heroicons_solid:x-mark'"
+                    ></mat-icon>
                 </button>
             </div>
             <div class="text-lg font-medium leading-10">Messages</div>
@@ -36,38 +38,48 @@
                     mat-icon-button
                     [disabled]="unreadCount === 0"
                     [matTooltip]="'Mark all as read'"
-                    (click)="markAllAsRead()">
+                    (click)="markAllAsRead()"
+                >
                     <mat-icon
-                        class="icon-size-5 text-current"
-                        [svgIcon]="'heroicons_solid:envelope-open'"></mat-icon>
+                        class="text-current icon-size-5"
+                        [svgIcon]="'heroicons_solid:envelope-open'"
+                    ></mat-icon>
                 </button>
             </div>
         </div>
 
         <!-- Content -->
-        <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
+        <div
+            class="bg-card relative flex flex-auto flex-col divide-y overflow-y-auto sm:max-h-120"
+        >
             <!-- Messages -->
             <ng-container *ngFor="let message of messages; trackBy: trackByFn">
                 <div
-                    class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
-                    [ngClass]="{'unread': !message.read}">
-
+                    class="group flex hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
+                    [ngClass]="{ unread: !message.read }"
+                >
                     <!-- Message with a link -->
                     <ng-container *ngIf="message.link">
                         <!-- Normal links -->
                         <ng-container *ngIf="!message.useRouter">
                             <a
-                                class="flex flex-auto py-5 pl-6 cursor-pointer"
-                                [href]="message.link">
-                                <ng-container *ngTemplateOutlet="messageContent"></ng-container>
+                                class="flex flex-auto cursor-pointer py-5 pl-6"
+                                [href]="message.link"
+                            >
+                                <ng-container
+                                    *ngTemplateOutlet="messageContent"
+                                ></ng-container>
                             </a>
                         </ng-container>
                         <!-- Router links -->
                         <ng-container *ngIf="message.useRouter">
                             <a
-                                class="flex flex-auto py-5 pl-6 cursor-pointer"
-                                [routerLink]="message.link">
-                                <ng-container *ngTemplateOutlet="messageContent"></ng-container>
+                                class="flex flex-auto cursor-pointer py-5 pl-6"
+                                [routerLink]="message.link"
+                            >
+                                <ng-container
+                                    *ngTemplateOutlet="messageContent"
+                                ></ng-container>
                             </a>
                         </ng-container>
                     </ng-container>
@@ -75,32 +87,43 @@
                     <!-- Message without a link -->
                     <ng-container *ngIf="!message.link">
                         <div class="flex flex-auto py-5 pl-6">
-                            <ng-container *ngTemplateOutlet="messageContent"></ng-container>
+                            <ng-container
+                                *ngTemplateOutlet="messageContent"
+                            ></ng-container>
                         </div>
                     </ng-container>
 
                     <!-- Actions -->
-                    <div class="relative flex flex-col my-5 mr-6 ml-2">
+                    <div class="relative my-5 ml-2 mr-6 flex flex-col">
                         <!-- Indicator -->
                         <button
-                            class="w-6 h-6 min-h-6"
+                            class="h-6 min-h-6 w-6"
                             mat-icon-button
                             (click)="toggleRead(message)"
-                            [matTooltip]="message.read ? 'Mark as unread' : 'Mark as read'">
+                            [matTooltip]="
+                                message.read ? 'Mark as unread' : 'Mark as read'
+                            "
+                        >
                             <span
-                                class="w-2 h-2 rounded-full"
-                                [ngClass]="{'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100': message.read,
-                                            'bg-primary': !message.read}"></span>
+                                class="h-2 w-2 rounded-full"
+                                [ngClass]="{
+                                    'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100':
+                                        message.read,
+                                    'bg-primary': !message.read
+                                }"
+                            ></span>
                         </button>
                         <!-- Remove -->
                         <button
-                            class="w-6 h-6 min-h-6 sm:opacity-0 sm:group-hover:opacity-100"
+                            class="h-6 min-h-6 w-6 sm:opacity-0 sm:group-hover:opacity-100"
                             mat-icon-button
                             (click)="delete(message)"
-                            [matTooltip]="'Remove'">
+                            [matTooltip]="'Remove'"
+                        >
                             <mat-icon
                                 class="icon-size-4"
-                                [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
+                                [svgIcon]="'heroicons_solid:x-mark'"
+                            ></mat-icon>
                         </button>
                     </div>
                 </div>
@@ -109,34 +132,40 @@
                 <ng-template #messageContent>
                     <!-- Icon -->
                     <ng-container *ngIf="message.icon && !message.image">
-                        <div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
+                        <div
+                            class="mr-4 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700"
+                        >
                             <mat-icon
                                 class="icon-size-5"
-                                [svgIcon]="message.icon">
+                                [svgIcon]="message.icon"
+                            >
                             </mat-icon>
                         </div>
                     </ng-container>
                     <!-- Image -->
                     <ng-container *ngIf="message.image">
                         <img
-                            class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
+                            class="mr-4 h-8 w-8 shrink-0 overflow-hidden rounded-full object-cover object-center"
                             [src]="message.image"
-                            [alt]="'Message image'">
+                            [alt]="'Message image'"
+                        />
                     </ng-container>
                     <!-- Title, description & time -->
-                    <div class="flex flex-col flex-auto">
+                    <div class="flex flex-auto flex-col">
                         <ng-container *ngIf="message.title">
                             <div
-                                class="font-semibold line-clamp-1"
-                                [innerHTML]="message.title"></div>
+                                class="line-clamp-1 font-semibold"
+                                [innerHTML]="message.title"
+                            ></div>
                         </ng-container>
                         <ng-container *ngIf="message.description">
                             <div
                                 class="line-clamp-2"
-                                [innerHTML]="message.description"></div>
+                                [innerHTML]="message.description"
+                            ></div>
                         </ng-container>
-                        <div class="mt-2 text-sm leading-none text-secondary">
-                            {{message.time | date:'MMM dd, h:mm a'}}
+                        <div class="text-secondary mt-2 text-sm leading-none">
+                            {{ message.time | date: 'MMM dd, h:mm a' }}
                         </div>
                     </div>
                 </ng-template>
@@ -144,14 +173,25 @@
 
             <!-- No messages -->
             <ng-container *ngIf="!messages || !messages.length">
-                <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
+                <div
+                    class="flex flex-auto flex-col items-center justify-center px-8 py-12 sm:justify-start"
+                >
+                    <div
+                        class="flex h-14 w-14 flex-0 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-600"
+                    >
                         <mat-icon
                             class="text-primary-700 dark:text-primary-50"
-                            [svgIcon]="'heroicons_outline:inbox'"></mat-icon>
+                            [svgIcon]="'heroicons_outline:inbox'"
+                        ></mat-icon>
+                    </div>
+                    <div class="mt-5 text-2xl font-semibold tracking-tight">
+                        No messages
+                    </div>
+                    <div
+                        class="text-secondary mt-1 w-full max-w-60 text-center text-md"
+                    >
+                        When you have messages, they will appear here.
                     </div>
-                    <div class="mt-5 text-2xl font-semibold tracking-tight">No messages</div>
-                    <div class="w-full max-w-60 mt-1 text-md text-center text-secondary">When you have messages, they will appear here.</div>
                 </div>
             </ng-container>
         </div>

src/app/layout/common/messages/messages.component.ts

@@ -1,7 +1,23 @@
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { DatePipe, NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import {
+    DatePipe,
+    NgClass,
+    NgFor,
+    NgIf,
+    NgTemplateOutlet,
+} from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    ViewChild,
+    ViewContainerRef,
+    ViewEncapsulation,
+} from '@angular/core';
 import { MatButton, MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -11,16 +27,25 @@ import { Message } from 'app/layout/common/messages/messages.types';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'messages',
-    templateUrl    : './messages.component.html',
-    encapsulation  : ViewEncapsulation.None,
+    selector: 'messages',
+    templateUrl: './messages.component.html',
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'messages',
-    standalone     : true,
-    imports        : [MatButtonModule, NgIf, MatIconModule, MatTooltipModule, NgFor, NgClass, NgTemplateOutlet, RouterLink, DatePipe],
+    exportAs: 'messages',
+    standalone: true,
+    imports: [
+        MatButtonModule,
+        NgIf,
+        MatIconModule,
+        MatTooltipModule,
+        NgFor,
+        NgClass,
+        NgTemplateOutlet,
+        RouterLink,
+        DatePipe,
+    ],
 })
-export class MessagesComponent implements OnInit, OnDestroy
-{
+export class MessagesComponent implements OnInit, OnDestroy {
     @ViewChild('messagesOrigin') private _messagesOrigin: MatButton;
     @ViewChild('messagesPanel') private _messagesPanel: TemplateRef<any>;
 
@@ -36,10 +61,8 @@ export class MessagesComponent implements OnInit, OnDestroy
         private _changeDetectorRef: ChangeDetectorRef,
         private _messagesService: MessagesService,
         private _overlay: Overlay,
-        private _viewContainerRef: ViewContainerRef,
-    )
-    {
-    }
+        private _viewContainerRef: ViewContainerRef
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -48,13 +71,11 @@ export class MessagesComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to message changes
         this._messagesService.messages$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((messages: Message[]) =>
-            {
+            .subscribe((messages: Message[]) => {
                 // Load the messages
                 this.messages = messages;
 
@@ -69,15 +90,13 @@ export class MessagesComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
 
         // Dispose the overlay
-        if ( this._overlayRef )
-        {
+        if (this._overlayRef) {
             this._overlayRef.dispose();
         }
     }
@@ -89,37 +108,34 @@ export class MessagesComponent implements OnInit, OnDestroy
     /**
      * Open the messages panel
      */
-    openPanel(): void
-    {
+    openPanel(): void {
         // Return if the messages panel or its origin is not defined
-        if ( !this._messagesPanel || !this._messagesOrigin )
-        {
+        if (!this._messagesPanel || !this._messagesOrigin) {
             return;
         }
 
         // Create the overlay if it doesn't exist
-        if ( !this._overlayRef )
-        {
+        if (!this._overlayRef) {
             this._createOverlay();
         }
 
         // Attach the portal to the overlay
-        this._overlayRef.attach(new TemplatePortal(this._messagesPanel, this._viewContainerRef));
+        this._overlayRef.attach(
+            new TemplatePortal(this._messagesPanel, this._viewContainerRef)
+        );
     }
 
     /**
      * Close the messages panel
      */
-    closePanel(): void
-    {
+    closePanel(): void {
         this._overlayRef.detach();
     }
 
     /**
      * Mark all messages as read
      */
-    markAllAsRead(): void
-    {
+    markAllAsRead(): void {
         // Mark all as read
         this._messagesService.markAllAsRead().subscribe();
     }
@@ -127,8 +143,7 @@ export class MessagesComponent implements OnInit, OnDestroy
     /**
      * Toggle read status of the given message
      */
-    toggleRead(message: Message): void
-    {
+    toggleRead(message: Message): void {
         // Toggle the read status
         message.read = !message.read;
 
@@ -139,8 +154,7 @@ export class MessagesComponent implements OnInit, OnDestroy
     /**
      * Delete the given message
      */
-    delete(message: Message): void
-    {
+    delete(message: Message): void {
         // Delete the message
         this._messagesService.delete(message.id).subscribe();
     }
@@ -151,8 +165,7 @@ export class MessagesComponent implements OnInit, OnDestroy
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 
@@ -163,39 +176,41 @@ export class MessagesComponent implements OnInit, OnDestroy
     /**
      * Create the overlay
      */
-    private _createOverlay(): void
-    {
+    private _createOverlay(): void {
         // Create the overlay
         this._overlayRef = this._overlay.create({
-            hasBackdrop     : true,
-            backdropClass   : 'fuse-backdrop-on-mobile',
-            scrollStrategy  : this._overlay.scrollStrategies.block(),
-            positionStrategy: this._overlay.position()
-                .flexibleConnectedTo(this._messagesOrigin._elementRef.nativeElement)
+            hasBackdrop: true,
+            backdropClass: 'fuse-backdrop-on-mobile',
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+            positionStrategy: this._overlay
+                .position()
+                .flexibleConnectedTo(
+                    this._messagesOrigin._elementRef.nativeElement
+                )
                 .withLockedPosition(true)
                 .withPush(true)
                 .withPositions([
                     {
-                        originX : 'start',
-                        originY : 'bottom',
+                        originX: 'start',
+                        originY: 'bottom',
                         overlayX: 'start',
                         overlayY: 'top',
                     },
                     {
-                        originX : 'start',
-                        originY : 'top',
+                        originX: 'start',
+                        originY: 'top',
                         overlayX: 'start',
                         overlayY: 'bottom',
                     },
                     {
-                        originX : 'end',
-                        originY : 'bottom',
+                        originX: 'end',
+                        originY: 'bottom',
                         overlayX: 'end',
                         overlayY: 'top',
                     },
                     {
-                        originX : 'end',
-                        originY : 'top',
+                        originX: 'end',
+                        originY: 'top',
                         overlayX: 'end',
                         overlayY: 'bottom',
                     },
@@ -203,8 +218,7 @@ export class MessagesComponent implements OnInit, OnDestroy
         });
 
         // Detach the overlay from the portal on backdrop click
-        this._overlayRef.backdropClick().subscribe(() =>
-        {
+        this._overlayRef.backdropClick().subscribe(() => {
             this._overlayRef.detach();
         });
     }
@@ -214,13 +228,11 @@ export class MessagesComponent implements OnInit, OnDestroy
      *
      * @private
      */
-    private _calculateUnreadCount(): void
-    {
+    private _calculateUnreadCount(): void {
         let count = 0;
 
-        if ( this.messages && this.messages.length )
-        {
-            count = this.messages.filter(message => !message.read).length;
+        if (this.messages && this.messages.length) {
+            count = this.messages.filter((message) => !message.read).length;
         }
 
         this.unreadCount = count;

src/app/layout/common/messages/messages.service.ts

@@ -3,17 +3,16 @@ import { Injectable } from '@angular/core';
 import { Message } from 'app/layout/common/messages/messages.types';
 import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class MessagesService
-{
-    private _messages: ReplaySubject<Message[]> = new ReplaySubject<Message[]>(1);
+@Injectable({ providedIn: 'root' })
+export class MessagesService {
+    private _messages: ReplaySubject<Message[]> = new ReplaySubject<Message[]>(
+        1
+    );
 
     /**
      * Constructor
      */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
+    constructor(private _httpClient: HttpClient) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -22,8 +21,7 @@ export class MessagesService
     /**
      * Getter for messages
      */
-    get messages$(): Observable<Message[]>
-    {
+    get messages$(): Observable<Message[]> {
         return this._messages.asObservable();
     }
 
@@ -34,13 +32,11 @@ export class MessagesService
     /**
      * Get all messages
      */
-    getAll(): Observable<Message[]>
-    {
+    getAll(): Observable<Message[]> {
         return this._httpClient.get<Message[]>('api/common/messages').pipe(
-            tap((messages) =>
-            {
+            tap((messages) => {
                 this._messages.next(messages);
-            }),
+            })
         );
     }
 
@@ -49,20 +45,22 @@ export class MessagesService
      *
      * @param message
      */
-    create(message: Message): Observable<Message>
-    {
+    create(message: Message): Observable<Message> {
         return this.messages$.pipe(
             take(1),
-            switchMap(messages => this._httpClient.post<Message>('api/common/messages', {message}).pipe(
-                map((newMessage) =>
-                {
-                    // Update the messages with the new message
-                    this._messages.next([...messages, newMessage]);
+            switchMap((messages) =>
+                this._httpClient
+                    .post<Message>('api/common/messages', { message })
+                    .pipe(
+                        map((newMessage) => {
+                            // Update the messages with the new message
+                            this._messages.next([...messages, newMessage]);
 
-                    // Return the new message from observable
-                    return newMessage;
-                }),
-            )),
+                            // Return the new message from observable
+                            return newMessage;
+                        })
+                    )
+            )
         );
     }
 
@@ -72,29 +70,33 @@ export class MessagesService
      * @param id
      * @param message
      */
-    update(id: string, message: Message): Observable<Message>
-    {
+    update(id: string, message: Message): Observable<Message> {
         return this.messages$.pipe(
             take(1),
-            switchMap(messages => this._httpClient.patch<Message>('api/common/messages', {
-                id,
-                message,
-            }).pipe(
-                map((updatedMessage: Message) =>
-                {
-                    // Find the index of the updated message
-                    const index = messages.findIndex(item => item.id === id);
+            switchMap((messages) =>
+                this._httpClient
+                    .patch<Message>('api/common/messages', {
+                        id,
+                        message,
+                    })
+                    .pipe(
+                        map((updatedMessage: Message) => {
+                            // Find the index of the updated message
+                            const index = messages.findIndex(
+                                (item) => item.id === id
+                            );
 
-                    // Update the message
-                    messages[index] = updatedMessage;
+                            // Update the message
+                            messages[index] = updatedMessage;
 
-                    // Update the messages
-                    this._messages.next(messages);
+                            // Update the messages
+                            this._messages.next(messages);
 
-                    // Return the updated message
-                    return updatedMessage;
-                }),
-            )),
+                            // Return the updated message
+                            return updatedMessage;
+                        })
+                    )
+            )
         );
     }
 
@@ -103,52 +105,57 @@ export class MessagesService
      *
      * @param id
      */
-    delete(id: string): Observable<boolean>
-    {
+    delete(id: string): Observable<boolean> {
         return this.messages$.pipe(
             take(1),
-            switchMap(messages => this._httpClient.delete<boolean>('api/common/messages', {params: {id}}).pipe(
-                map((isDeleted: boolean) =>
-                {
-                    // Find the index of the deleted message
-                    const index = messages.findIndex(item => item.id === id);
+            switchMap((messages) =>
+                this._httpClient
+                    .delete<boolean>('api/common/messages', { params: { id } })
+                    .pipe(
+                        map((isDeleted: boolean) => {
+                            // Find the index of the deleted message
+                            const index = messages.findIndex(
+                                (item) => item.id === id
+                            );
 
-                    // Delete the message
-                    messages.splice(index, 1);
+                            // Delete the message
+                            messages.splice(index, 1);
 
-                    // Update the messages
-                    this._messages.next(messages);
+                            // Update the messages
+                            this._messages.next(messages);
 
-                    // Return the deleted status
-                    return isDeleted;
-                }),
-            )),
+                            // Return the deleted status
+                            return isDeleted;
+                        })
+                    )
+            )
         );
     }
 
     /**
      * Mark all messages as read
      */
-    markAllAsRead(): Observable<boolean>
-    {
+    markAllAsRead(): Observable<boolean> {
         return this.messages$.pipe(
             take(1),
-            switchMap(messages => this._httpClient.get<boolean>('api/common/messages/mark-all-as-read').pipe(
-                map((isUpdated: boolean) =>
-                {
-                    // Go through all messages and set them as read
-                    messages.forEach((message, index) =>
-                    {
-                        messages[index].read = true;
-                    });
+            switchMap((messages) =>
+                this._httpClient
+                    .get<boolean>('api/common/messages/mark-all-as-read')
+                    .pipe(
+                        map((isUpdated: boolean) => {
+                            // Go through all messages and set them as read
+                            messages.forEach((message, index) => {
+                                messages[index].read = true;
+                            });
 
-                    // Update the messages
-                    this._messages.next(messages);
+                            // Update the messages
+                            this._messages.next(messages);
 
-                    // Return the updated status
-                    return isUpdated;
-                }),
-            )),
+                            // Return the updated status
+                            return isUpdated;
+                        })
+                    )
+            )
         );
     }
 }

src/app/layout/common/messages/messages.types.ts

@@ -1,5 +1,4 @@
-export interface Message
-{
+export interface Message {
     id: string;
     icon?: string;
     image?: string;

src/app/layout/common/notifications/notifications.component.html

@@ -1,12 +1,13 @@
 <!-- Notifications toggle -->
-<button
-    mat-icon-button
-    (click)="openPanel()"
-    #notificationsOrigin>
+<button mat-icon-button (click)="openPanel()" #notificationsOrigin>
     <ng-container *ngIf="unreadCount > 0">
-        <span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
-            <span class="flex items-center justify-center shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium">
-                {{unreadCount}}
+        <span
+            class="absolute left-0 right-0 top-0 flex h-3 items-center justify-center"
+        >
+            <span
+                class="ml-4 mt-2.5 flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-teal-600 px-1 text-xs font-medium text-indigo-50"
+            >
+                {{ unreadCount }}
             </span>
         </span>
     </ng-container>
@@ -15,18 +16,19 @@
 
 <!-- Notifications panel -->
 <ng-template #notificationsPanel>
-
-    <div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
-
+    <div
+        class="fixed inset-0 flex flex-col overflow-hidden shadow-lg sm:static sm:inset-auto sm:w-90 sm:min-w-90 sm:rounded-2xl"
+    >
         <!-- Header -->
-        <div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
-            <div class="sm:hidden -ml-1 mr-3">
-                <button
-                    mat-icon-button
-                    (click)="closePanel()">
+        <div
+            class="flex shrink-0 items-center bg-primary py-4 pl-6 pr-4 text-on-primary"
+        >
+            <div class="-ml-1 mr-3 sm:hidden">
+                <button mat-icon-button (click)="closePanel()">
                     <mat-icon
-                        class="icon-size-5 text-current"
-                        [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
+                        class="text-current icon-size-5"
+                        [svgIcon]="'heroicons_solid:x-mark'"
+                    ></mat-icon>
                 </button>
             </div>
             <div class="text-lg font-medium leading-10">Notifications</div>
@@ -36,38 +38,50 @@
                     mat-icon-button
                     [matTooltip]="'Mark all as read'"
                     [disabled]="unreadCount === 0"
-                    (click)="markAllAsRead()">
+                    (click)="markAllAsRead()"
+                >
                     <mat-icon
-                        class="icon-size-5 text-current"
-                        [svgIcon]="'heroicons_solid:envelope-open'"></mat-icon>
+                        class="text-current icon-size-5"
+                        [svgIcon]="'heroicons_solid:envelope-open'"
+                    ></mat-icon>
                 </button>
             </div>
         </div>
 
         <!-- Content -->
-        <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
+        <div
+            class="bg-card relative flex flex-auto flex-col divide-y overflow-y-auto sm:max-h-120"
+        >
             <!-- Notifications -->
-            <ng-container *ngFor="let notification of notifications; trackBy: trackByFn">
+            <ng-container
+                *ngFor="let notification of notifications; trackBy: trackByFn"
+            >
                 <div
-                    class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
-                    [ngClass]="{'unread': !notification.read}">
-
+                    class="group flex hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
+                    [ngClass]="{ unread: !notification.read }"
+                >
                     <!-- Notification with a link -->
                     <ng-container *ngIf="notification.link">
                         <!-- Normal links -->
                         <ng-container *ngIf="!notification.useRouter">
                             <a
-                                class="flex flex-auto py-5 pl-6 cursor-pointer"
-                                [href]="notification.link">
-                                <ng-container *ngTemplateOutlet="notificationContent"></ng-container>
+                                class="flex flex-auto cursor-pointer py-5 pl-6"
+                                [href]="notification.link"
+                            >
+                                <ng-container
+                                    *ngTemplateOutlet="notificationContent"
+                                ></ng-container>
                             </a>
                         </ng-container>
                         <!-- Router links -->
                         <ng-container *ngIf="notification.useRouter">
                             <a
-                                class="flex flex-auto py-5 pl-6 cursor-pointer"
-                                [routerLink]="notification.link">
-                                <ng-container *ngTemplateOutlet="notificationContent"></ng-container>
+                                class="flex flex-auto cursor-pointer py-5 pl-6"
+                                [routerLink]="notification.link"
+                            >
+                                <ng-container
+                                    *ngTemplateOutlet="notificationContent"
+                                ></ng-container>
                             </a>
                         </ng-container>
                     </ng-container>
@@ -75,69 +89,89 @@
                     <!-- Notification without a link -->
                     <ng-container *ngIf="!notification.link">
                         <div class="flex flex-auto py-5 pl-6">
-                            <ng-container *ngTemplateOutlet="notificationContent"></ng-container>
+                            <ng-container
+                                *ngTemplateOutlet="notificationContent"
+                            ></ng-container>
                         </div>
                     </ng-container>
 
                     <!-- Actions -->
-                    <div class="relative flex flex-col my-5 mr-6 ml-2">
+                    <div class="relative my-5 ml-2 mr-6 flex flex-col">
                         <!-- Indicator -->
                         <button
-                            class="w-6 h-6 min-h-6"
+                            class="h-6 min-h-6 w-6"
                             mat-icon-button
                             (click)="toggleRead(notification)"
-                            [matTooltip]="notification.read ? 'Mark as unread' : 'Mark as read'">
+                            [matTooltip]="
+                                notification.read
+                                    ? 'Mark as unread'
+                                    : 'Mark as read'
+                            "
+                        >
                             <span
-                                class="w-2 h-2 rounded-full"
-                                [ngClass]="{'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100': notification.read,
-                                            'bg-primary': !notification.read}"></span>
+                                class="h-2 w-2 rounded-full"
+                                [ngClass]="{
+                                    'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100':
+                                        notification.read,
+                                    'bg-primary': !notification.read
+                                }"
+                            ></span>
                         </button>
                         <!-- Remove -->
                         <button
-                            class="w-6 h-6 min-h-6 sm:opacity-0 sm:group-hover:opacity-100"
+                            class="h-6 min-h-6 w-6 sm:opacity-0 sm:group-hover:opacity-100"
                             mat-icon-button
                             (click)="delete(notification)"
-                            [matTooltip]="'Remove'">
+                            [matTooltip]="'Remove'"
+                        >
                             <mat-icon
                                 class="icon-size-4"
-                                [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
+                                [svgIcon]="'heroicons_solid:x-mark'"
+                            ></mat-icon>
                         </button>
                     </div>
-
                 </div>
 
                 <!-- Notification content template -->
                 <ng-template #notificationContent>
                     <!-- Icon -->
-                    <ng-container *ngIf="notification.icon && !notification.image">
-                        <div class="flex shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
+                    <ng-container
+                        *ngIf="notification.icon && !notification.image"
+                    >
+                        <div
+                            class="mr-4 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700"
+                        >
                             <mat-icon
                                 class="icon-size-5"
-                                [svgIcon]="notification.icon">
+                                [svgIcon]="notification.icon"
+                            >
                             </mat-icon>
                         </div>
                     </ng-container>
                     <!-- Image -->
                     <ng-container *ngIf="notification.image">
                         <img
-                            class="shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
+                            class="mr-4 h-8 w-8 shrink-0 overflow-hidden rounded-full object-cover object-center"
                             [src]="notification.image"
-                            [alt]="'Notification image'">
+                            [alt]="'Notification image'"
+                        />
                     </ng-container>
                     <!-- Title, description & time -->
-                    <div class="flex flex-col flex-auto">
+                    <div class="flex flex-auto flex-col">
                         <ng-container *ngIf="notification.title">
                             <div
-                                class="font-semibold line-clamp-1"
-                                [innerHTML]="notification.title"></div>
+                                class="line-clamp-1 font-semibold"
+                                [innerHTML]="notification.title"
+                            ></div>
                         </ng-container>
                         <ng-container *ngIf="notification.description">
                             <div
                                 class="line-clamp-2"
-                                [innerHTML]="notification.description"></div>
+                                [innerHTML]="notification.description"
+                            ></div>
                         </ng-container>
-                        <div class="mt-2 text-sm leading-none text-secondary">
-                            {{notification.time | date:'MMM dd, h:mm a'}}
+                        <div class="text-secondary mt-2 text-sm leading-none">
+                            {{ notification.time | date: 'MMM dd, h:mm a' }}
                         </div>
                     </div>
                 </ng-template>
@@ -145,19 +179,27 @@
 
             <!-- No notifications -->
             <ng-container *ngIf="!notifications || !notifications.length">
-                <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
+                <div
+                    class="flex flex-auto flex-col items-center justify-center px-8 py-12 sm:justify-start"
+                >
+                    <div
+                        class="flex h-14 w-14 flex-0 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-600"
+                    >
                         <mat-icon
                             class="text-primary-700 dark:text-primary-50"
-                            [svgIcon]="'heroicons_outline:bell'"></mat-icon>
+                            [svgIcon]="'heroicons_outline:bell'"
+                        ></mat-icon>
+                    </div>
+                    <div class="mt-5 text-2xl font-semibold tracking-tight">
+                        No notifications
+                    </div>
+                    <div
+                        class="text-secondary mt-1 w-full max-w-60 text-center text-md"
+                    >
+                        When you have notifications, they will appear here.
                     </div>
-                    <div class="mt-5 text-2xl font-semibold tracking-tight">No notifications</div>
-                    <div class="w-full max-w-60 mt-1 text-md text-center text-secondary">When you have notifications, they will appear here.</div>
                 </div>
             </ng-container>
-
         </div>
-
     </div>
-
 </ng-template>

src/app/layout/common/notifications/notifications.component.ts

@@ -1,7 +1,23 @@
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { DatePipe, NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import {
+    DatePipe,
+    NgClass,
+    NgFor,
+    NgIf,
+    NgTemplateOutlet,
+} from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    ViewChild,
+    ViewContainerRef,
+    ViewEncapsulation,
+} from '@angular/core';
 import { MatButton, MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -11,18 +27,28 @@ import { Notification } from 'app/layout/common/notifications/notifications.type
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'notifications',
-    templateUrl    : './notifications.component.html',
-    encapsulation  : ViewEncapsulation.None,
+    selector: 'notifications',
+    templateUrl: './notifications.component.html',
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'notifications',
-    standalone     : true,
-    imports        : [MatButtonModule, NgIf, MatIconModule, MatTooltipModule, NgFor, NgClass, NgTemplateOutlet, RouterLink, DatePipe],
+    exportAs: 'notifications',
+    standalone: true,
+    imports: [
+        MatButtonModule,
+        NgIf,
+        MatIconModule,
+        MatTooltipModule,
+        NgFor,
+        NgClass,
+        NgTemplateOutlet,
+        RouterLink,
+        DatePipe,
+    ],
 })
-export class NotificationsComponent implements OnInit, OnDestroy
-{
+export class NotificationsComponent implements OnInit, OnDestroy {
     @ViewChild('notificationsOrigin') private _notificationsOrigin: MatButton;
-    @ViewChild('notificationsPanel') private _notificationsPanel: TemplateRef<any>;
+    @ViewChild('notificationsPanel')
+    private _notificationsPanel: TemplateRef<any>;
 
     notifications: Notification[];
     unreadCount: number = 0;
@@ -36,10 +62,8 @@ export class NotificationsComponent implements OnInit, OnDestroy
         private _changeDetectorRef: ChangeDetectorRef,
         private _notificationsService: NotificationsService,
         private _overlay: Overlay,
-        private _viewContainerRef: ViewContainerRef,
-    )
-    {
-    }
+        private _viewContainerRef: ViewContainerRef
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -48,13 +72,11 @@ export class NotificationsComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to notification changes
         this._notificationsService.notifications$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((notifications: Notification[]) =>
-            {
+            .subscribe((notifications: Notification[]) => {
                 // Load the notifications
                 this.notifications = notifications;
 
@@ -69,15 +91,13 @@ export class NotificationsComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
 
         // Dispose the overlay
-        if ( this._overlayRef )
-        {
+        if (this._overlayRef) {
             this._overlayRef.dispose();
         }
     }
@@ -89,37 +109,34 @@ export class NotificationsComponent implements OnInit, OnDestroy
     /**
      * Open the notifications panel
      */
-    openPanel(): void
-    {
+    openPanel(): void {
         // Return if the notifications panel or its origin is not defined
-        if ( !this._notificationsPanel || !this._notificationsOrigin )
-        {
+        if (!this._notificationsPanel || !this._notificationsOrigin) {
             return;
         }
 
         // Create the overlay if it doesn't exist
-        if ( !this._overlayRef )
-        {
+        if (!this._overlayRef) {
             this._createOverlay();
         }
 
         // Attach the portal to the overlay
-        this._overlayRef.attach(new TemplatePortal(this._notificationsPanel, this._viewContainerRef));
+        this._overlayRef.attach(
+            new TemplatePortal(this._notificationsPanel, this._viewContainerRef)
+        );
     }
 
     /**
      * Close the notifications panel
      */
-    closePanel(): void
-    {
+    closePanel(): void {
         this._overlayRef.detach();
     }
 
     /**
      * Mark all notifications as read
      */
-    markAllAsRead(): void
-    {
+    markAllAsRead(): void {
         // Mark all as read
         this._notificationsService.markAllAsRead().subscribe();
     }
@@ -127,20 +144,20 @@ export class NotificationsComponent implements OnInit, OnDestroy
     /**
      * Toggle read status of the given notification
      */
-    toggleRead(notification: Notification): void
-    {
+    toggleRead(notification: Notification): void {
         // Toggle the read status
         notification.read = !notification.read;
 
         // Update the notification
-        this._notificationsService.update(notification.id, notification).subscribe();
+        this._notificationsService
+            .update(notification.id, notification)
+            .subscribe();
     }
 
     /**
      * Delete the given notification
      */
-    delete(notification: Notification): void
-    {
+    delete(notification: Notification): void {
         // Delete the notification
         this._notificationsService.delete(notification.id).subscribe();
     }
@@ -151,8 +168,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 
@@ -163,39 +179,41 @@ export class NotificationsComponent implements OnInit, OnDestroy
     /**
      * Create the overlay
      */
-    private _createOverlay(): void
-    {
+    private _createOverlay(): void {
         // Create the overlay
         this._overlayRef = this._overlay.create({
-            hasBackdrop     : true,
-            backdropClass   : 'fuse-backdrop-on-mobile',
-            scrollStrategy  : this._overlay.scrollStrategies.block(),
-            positionStrategy: this._overlay.position()
-                .flexibleConnectedTo(this._notificationsOrigin._elementRef.nativeElement)
+            hasBackdrop: true,
+            backdropClass: 'fuse-backdrop-on-mobile',
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+            positionStrategy: this._overlay
+                .position()
+                .flexibleConnectedTo(
+                    this._notificationsOrigin._elementRef.nativeElement
+                )
                 .withLockedPosition(true)
                 .withPush(true)
                 .withPositions([
                     {
-                        originX : 'start',
-                        originY : 'bottom',
+                        originX: 'start',
+                        originY: 'bottom',
                         overlayX: 'start',
                         overlayY: 'top',
                     },
                     {
-                        originX : 'start',
-                        originY : 'top',
+                        originX: 'start',
+                        originY: 'top',
                         overlayX: 'start',
                         overlayY: 'bottom',
                     },
                     {
-                        originX : 'end',
-                        originY : 'bottom',
+                        originX: 'end',
+                        originY: 'bottom',
                         overlayX: 'end',
                         overlayY: 'top',
                     },
                     {
-                        originX : 'end',
-                        originY : 'top',
+                        originX: 'end',
+                        originY: 'top',
                         overlayX: 'end',
                         overlayY: 'bottom',
                     },
@@ -203,8 +221,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
         });
 
         // Detach the overlay from the portal on backdrop click
-        this._overlayRef.backdropClick().subscribe(() =>
-        {
+        this._overlayRef.backdropClick().subscribe(() => {
             this._overlayRef.detach();
         });
     }
@@ -214,13 +231,13 @@ export class NotificationsComponent implements OnInit, OnDestroy
      *
      * @private
      */
-    private _calculateUnreadCount(): void
-    {
+    private _calculateUnreadCount(): void {
         let count = 0;
 
-        if ( this.notifications && this.notifications.length )
-        {
-            count = this.notifications.filter(notification => !notification.read).length;
+        if (this.notifications && this.notifications.length) {
+            count = this.notifications.filter(
+                (notification) => !notification.read
+            ).length;
         }
 
         this.unreadCount = count;

src/app/layout/common/notifications/notifications.service.ts

@@ -3,17 +3,16 @@ import { Injectable } from '@angular/core';
 import { Notification } from 'app/layout/common/notifications/notifications.types';
 import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class NotificationsService
-{
-    private _notifications: ReplaySubject<Notification[]> = new ReplaySubject<Notification[]>(1);
+@Injectable({ providedIn: 'root' })
+export class NotificationsService {
+    private _notifications: ReplaySubject<Notification[]> = new ReplaySubject<
+        Notification[]
+    >(1);
 
     /**
      * Constructor
      */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
+    constructor(private _httpClient: HttpClient) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -22,8 +21,7 @@ export class NotificationsService
     /**
      * Getter for notifications
      */
-    get notifications$(): Observable<Notification[]>
-    {
+    get notifications$(): Observable<Notification[]> {
         return this._notifications.asObservable();
     }
 
@@ -34,14 +32,14 @@ export class NotificationsService
     /**
      * Get all notifications
      */
-    getAll(): Observable<Notification[]>
-    {
-        return this._httpClient.get<Notification[]>('api/common/notifications').pipe(
-            tap((notifications) =>
-            {
-                this._notifications.next(notifications);
-            }),
-        );
+    getAll(): Observable<Notification[]> {
+        return this._httpClient
+            .get<Notification[]>('api/common/notifications')
+            .pipe(
+                tap((notifications) => {
+                    this._notifications.next(notifications);
+                })
+            );
     }
 
     /**
@@ -49,20 +47,27 @@ export class NotificationsService
      *
      * @param notification
      */
-    create(notification: Notification): Observable<Notification>
-    {
+    create(notification: Notification): Observable<Notification> {
         return this.notifications$.pipe(
             take(1),
-            switchMap(notifications => this._httpClient.post<Notification>('api/common/notifications', {notification}).pipe(
-                map((newNotification) =>
-                {
-                    // Update the notifications with the new notification
-                    this._notifications.next([...notifications, newNotification]);
+            switchMap((notifications) =>
+                this._httpClient
+                    .post<Notification>('api/common/notifications', {
+                        notification,
+                    })
+                    .pipe(
+                        map((newNotification) => {
+                            // Update the notifications with the new notification
+                            this._notifications.next([
+                                ...notifications,
+                                newNotification,
+                            ]);
 
-                    // Return the new notification from observable
-                    return newNotification;
-                }),
-            )),
+                            // Return the new notification from observable
+                            return newNotification;
+                        })
+                    )
+            )
         );
     }
 
@@ -72,29 +77,33 @@ export class NotificationsService
      * @param id
      * @param notification
      */
-    update(id: string, notification: Notification): Observable<Notification>
-    {
+    update(id: string, notification: Notification): Observable<Notification> {
         return this.notifications$.pipe(
             take(1),
-            switchMap(notifications => this._httpClient.patch<Notification>('api/common/notifications', {
-                id,
-                notification,
-            }).pipe(
-                map((updatedNotification: Notification) =>
-                {
-                    // Find the index of the updated notification
-                    const index = notifications.findIndex(item => item.id === id);
+            switchMap((notifications) =>
+                this._httpClient
+                    .patch<Notification>('api/common/notifications', {
+                        id,
+                        notification,
+                    })
+                    .pipe(
+                        map((updatedNotification: Notification) => {
+                            // Find the index of the updated notification
+                            const index = notifications.findIndex(
+                                (item) => item.id === id
+                            );
 
-                    // Update the notification
-                    notifications[index] = updatedNotification;
+                            // Update the notification
+                            notifications[index] = updatedNotification;
 
-                    // Update the notifications
-                    this._notifications.next(notifications);
+                            // Update the notifications
+                            this._notifications.next(notifications);
 
-                    // Return the updated notification
-                    return updatedNotification;
-                }),
-            )),
+                            // Return the updated notification
+                            return updatedNotification;
+                        })
+                    )
+            )
         );
     }
 
@@ -103,52 +112,59 @@ export class NotificationsService
      *
      * @param id
      */
-    delete(id: string): Observable<boolean>
-    {
+    delete(id: string): Observable<boolean> {
         return this.notifications$.pipe(
             take(1),
-            switchMap(notifications => this._httpClient.delete<boolean>('api/common/notifications', {params: {id}}).pipe(
-                map((isDeleted: boolean) =>
-                {
-                    // Find the index of the deleted notification
-                    const index = notifications.findIndex(item => item.id === id);
+            switchMap((notifications) =>
+                this._httpClient
+                    .delete<boolean>('api/common/notifications', {
+                        params: { id },
+                    })
+                    .pipe(
+                        map((isDeleted: boolean) => {
+                            // Find the index of the deleted notification
+                            const index = notifications.findIndex(
+                                (item) => item.id === id
+                            );
 
-                    // Delete the notification
-                    notifications.splice(index, 1);
+                            // Delete the notification
+                            notifications.splice(index, 1);
 
-                    // Update the notifications
-                    this._notifications.next(notifications);
+                            // Update the notifications
+                            this._notifications.next(notifications);
 
-                    // Return the deleted status
-                    return isDeleted;
-                }),
-            )),
+                            // Return the deleted status
+                            return isDeleted;
+                        })
+                    )
+            )
         );
     }
 
     /**
      * Mark all notifications as read
      */
-    markAllAsRead(): Observable<boolean>
-    {
+    markAllAsRead(): Observable<boolean> {
         return this.notifications$.pipe(
             take(1),
-            switchMap(notifications => this._httpClient.get<boolean>('api/common/notifications/mark-all-as-read').pipe(
-                map((isUpdated: boolean) =>
-                {
-                    // Go through all notifications and set them as read
-                    notifications.forEach((notification, index) =>
-                    {
-                        notifications[index].read = true;
-                    });
+            switchMap((notifications) =>
+                this._httpClient
+                    .get<boolean>('api/common/notifications/mark-all-as-read')
+                    .pipe(
+                        map((isUpdated: boolean) => {
+                            // Go through all notifications and set them as read
+                            notifications.forEach((notification, index) => {
+                                notifications[index].read = true;
+                            });
 
-                    // Update the notifications
-                    this._notifications.next(notifications);
+                            // Update the notifications
+                            this._notifications.next(notifications);
 
-                    // Return the updated status
-                    return isUpdated;
-                }),
-            )),
+                            // Return the updated status
+                            return isUpdated;
+                        })
+                    )
+            )
         );
     }
 }

src/app/layout/common/notifications/notifications.types.ts

@@ -1,5 +1,4 @@
-export interface Notification
-{
+export interface Notification {
     id: string;
     icon?: string;
     image?: string;

src/app/layout/common/quick-chat/quick-chat.component.html

@@ -1,86 +1,121 @@
-<div class="fixed lg:sticky top-0 bottom-0 lg:left-full w-full sm:w-96 lg:w-16 lg:h-screen lg:shadow">
+<div
+    class="fixed bottom-0 top-0 w-full sm:w-96 lg:sticky lg:left-full lg:h-screen lg:w-16 lg:shadow"
+>
     <div
-        class="flex flex-col w-full sm:w-96 h-full transition-transform duration-400 ease-drawer bg-card"
-        [ngClass]="{'-translate-x-full sm:-translate-x-96 lg:-translate-x-80 shadow': opened, 'translate-x-0': !opened}">
-
+        class="bg-card flex h-full w-full flex-col transition-transform duration-400 ease-drawer sm:w-96"
+        [ngClass]="{
+            '-translate-x-full shadow sm:-translate-x-96 lg:-translate-x-80':
+                opened,
+            'translate-x-0': !opened
+        }"
+    >
         <!-- Header -->
         <div
-            class="quick-chat-header flex flex-0 items-center justify-start cursor-pointer"
-            (click)="toggle()">
-
+            class="quick-chat-header flex flex-0 cursor-pointer items-center justify-start"
+            (click)="toggle()"
+        >
             <!-- Toggle -->
             <ng-container *ngIf="!opened || (opened && !selectedChat)">
                 <div class="flex flex-auto items-center justify-center">
-                    <div class="flex flex-0 items-center justify-center w-16">
+                    <div class="flex w-16 flex-0 items-center justify-center">
                         <mat-icon
                             class="icon-size-6"
-                            [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon>
+                            [svgIcon]="
+                                'heroicons_outline:chat-bubble-left-right'
+                            "
+                        ></mat-icon>
                     </div>
-                    <div class="text-lg font-medium text-secondary">Team Chat</div>
-                    <button
-                        class="ml-auto mr-4"
-                        mat-icon-button>
-                        <mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
+                    <div class="text-secondary text-lg font-medium">
+                        Team Chat
+                    </div>
+                    <button class="ml-auto mr-4" mat-icon-button>
+                        <mat-icon
+                            [svgIcon]="'heroicons_outline:x-mark'"
+                        ></mat-icon>
                     </button>
                 </div>
             </ng-container>
 
             <!-- Contact info -->
             <ng-container *ngIf="opened && selectedChat">
-                <div class="flex flex-auto items-center ml-3">
-                    <div class="relative flex flex-0 items-center justify-center w-10 h-10">
+                <div class="ml-3 flex flex-auto items-center">
+                    <div
+                        class="relative flex h-10 w-10 flex-0 items-center justify-center"
+                    >
                         <ng-container *ngIf="chat.contact.avatar">
                             <img
-                                class="w-full h-full rounded-full object-cover"
+                                class="h-full w-full rounded-full object-cover"
                                 [src]="chat.contact.avatar"
-                                alt="Contact avatar"/>
+                                alt="Contact avatar"
+                            />
                         </ng-container>
                         <ng-container *ngIf="!chat.contact.avatar">
-                            <div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                                {{chat.contact.name.charAt(0)}}
+                            <div
+                                class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                            >
+                                {{ chat.contact.name.charAt(0) }}
                             </div>
                         </ng-container>
                     </div>
-                    <div class="ml-4 text-lg font-medium leading-5 truncate">{{chat.contact.name}}</div>
-                    <button
-                        class="ml-auto mr-4"
-                        mat-icon-button>
-                        <mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
+                    <div class="ml-4 truncate text-lg font-medium leading-5">
+                        {{ chat.contact.name }}
+                    </div>
+                    <button class="ml-auto mr-4" mat-icon-button>
+                        <mat-icon
+                            [svgIcon]="'heroicons_outline:x-mark'"
+                        ></mat-icon>
                     </button>
                 </div>
             </ng-container>
         </div>
 
         <!-- Content -->
-        <div class="flex flex-auto border-t overflow-hidden">
-
+        <div class="flex flex-auto overflow-hidden border-t">
             <!-- Chat list -->
             <div
-                class="flex-0 w-16 h-full overflow-y-auto overscroll-y-contain sm:overflow-hidden sm:overscroll-auto"
+                class="h-full w-16 flex-0 overflow-y-auto overscroll-y-contain sm:overflow-hidden sm:overscroll-auto"
                 fuseScrollbar
-                [fuseScrollbarOptions]="{wheelPropagation: false}">
+                [fuseScrollbarOptions]="{ wheelPropagation: false }"
+            >
                 <div class="flex-auto">
-                    <ng-container *ngFor="let chat of chats; trackBy: trackByFn">
+                    <ng-container
+                        *ngFor="let chat of chats; trackBy: trackByFn"
+                    >
                         <div
-                            class="flex items-center py-3 px-4 cursor-pointer"
-                            [ngClass]="{'hover:bg-gray-100 dark:hover:bg-hover': !selectedChat || selectedChat.id !== chat.id,
-                                        'bg-primary-50 dark:bg-hover': selectedChat && selectedChat.id === chat.id}"
-                            (click)="selectChat(chat.id)">
-                            <div class="relative flex flex-0 items-center justify-center w-8 h-8">
+                            class="flex cursor-pointer items-center px-4 py-3"
+                            [ngClass]="{
+                                'dark:hover:bg-hover hover:bg-gray-100':
+                                    !selectedChat ||
+                                    selectedChat.id !== chat.id,
+                                'bg-primary-50 dark:bg-hover':
+                                    selectedChat && selectedChat.id === chat.id
+                            }"
+                            (click)="selectChat(chat.id)"
+                        >
+                            <div
+                                class="relative flex h-8 w-8 flex-0 items-center justify-center"
+                            >
                                 <ng-container *ngIf="chat.unreadCount > 0">
                                     <div
-                                        class="absolute bottom-0 right-0 flex-0 w-2 h-2 -ml-0.5 rounded-full ring-2 ring-bg-card dark:ring-gray-900 bg-primary dark:bg-primary-500 text-on-primary"
-                                        [class.ring-primary-50]="selectedChat && selectedChat.id === chat.id"></div>
+                                        class="ring-bg-card absolute bottom-0 right-0 -ml-0.5 h-2 w-2 flex-0 rounded-full bg-primary text-on-primary ring-2 dark:bg-primary-500 dark:ring-gray-900"
+                                        [class.ring-primary-50]="
+                                            selectedChat &&
+                                            selectedChat.id === chat.id
+                                        "
+                                    ></div>
                                 </ng-container>
                                 <ng-container *ngIf="chat.contact.avatar">
                                     <img
-                                        class="w-full h-full rounded-full object-cover"
+                                        class="h-full w-full rounded-full object-cover"
                                         [src]="chat.contact.avatar"
-                                        alt="Contact avatar"/>
+                                        alt="Contact avatar"
+                                    />
                                 </ng-container>
                                 <ng-container *ngIf="!chat.contact.avatar">
-                                    <div class="flex items-center justify-center w-full h-full rounded-full text-lg uppercase bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200">
-                                        {{chat.contact.name.charAt(0)}}
+                                    <div
+                                        class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200"
+                                    >
+                                        {{ chat.contact.name.charAt(0) }}
                                     </div>
                                 </ng-container>
                             </div>
@@ -90,58 +125,124 @@
             </div>
 
             <!-- Conversation -->
-            <div class="flex flex-col flex-auto border-l overflow-hidden bg-gray-50 dark:bg-transparent">
+            <div
+                class="flex flex-auto flex-col overflow-hidden border-l bg-gray-50 dark:bg-transparent"
+            >
                 <ng-container *ngIf="chat; else selectChatOrStartNew">
-                    <div class="flex flex-col-reverse overflow-y-auto overscroll-y-contain">
-                        <div class="flex flex-col flex-auto shrink p-6">
-                            <ng-container *ngFor="let message of chat.messages; let i = index; let first = first; let last = last; trackBy: trackByFn">
+                    <div
+                        class="flex flex-col-reverse overflow-y-auto overscroll-y-contain"
+                    >
+                        <div class="flex flex-auto shrink flex-col p-6">
+                            <ng-container
+                                *ngFor="
+                                    let message of chat.messages;
+                                    let i = index;
+                                    let first = first;
+                                    let last = last;
+                                    trackBy: trackByFn
+                                "
+                            >
                                 <!-- Start of the day -->
-                                <ng-container *ngIf="first || (chat.messages[i - 1].createdAt | date:'d') !== (message.createdAt | date:'d')">
-                                    <div class="flex items-center justify-center my-3 -mx-6">
+                                <ng-container
+                                    *ngIf="
+                                        first ||
+                                        (chat.messages[i - 1].createdAt
+                                            | date: 'd') !==
+                                            (message.createdAt | date: 'd')
+                                    "
+                                >
+                                    <div
+                                        class="-mx-6 my-3 flex items-center justify-center"
+                                    >
                                         <div class="flex-auto border-b"></div>
-                                        <div class="flex-0 mx-4 text-sm font-medium leading-5 text-secondary">
-                                            {{message.createdAt | date: 'longDate'}}
+                                        <div
+                                            class="text-secondary mx-4 flex-0 text-sm font-medium leading-5"
+                                        >
+                                            {{
+                                                message.createdAt
+                                                    | date: 'longDate'
+                                            }}
                                         </div>
                                         <div class="flex-auto border-b"></div>
                                     </div>
                                 </ng-container>
                                 <div
                                     class="flex flex-col"
-                                    [ngClass]="{'items-end': message.isMine,
-                                                'items-start': !message.isMine,
-                                                'mt-0.5': i > 0 && chat.messages[i - 1].isMine === message.isMine,
-                                                'mt-3': i > 0 && chat.messages[i - 1].isMine !== message.isMine}">
+                                    [ngClass]="{
+                                        'items-end': message.isMine,
+                                        'items-start': !message.isMine,
+                                        'mt-0.5':
+                                            i > 0 &&
+                                            chat.messages[i - 1].isMine ===
+                                                message.isMine,
+                                        'mt-3':
+                                            i > 0 &&
+                                            chat.messages[i - 1].isMine !==
+                                                message.isMine
+                                    }"
+                                >
                                     <!-- Bubble -->
                                     <div
-                                        class="relative max-w-3/4 px-3 py-2 rounded-lg"
-                                        [ngClass]="{'bg-blue-500 text-blue-50': message.isMine,
-                                                    'bg-gray-500 text-gray-50': !message.isMine}">
+                                        class="relative max-w-3/4 rounded-lg px-3 py-2"
+                                        [ngClass]="{
+                                            'bg-blue-500 text-blue-50':
+                                                message.isMine,
+                                            'bg-gray-500 text-gray-50':
+                                                !message.isMine
+                                        }"
+                                    >
                                         <!-- Speech bubble tail -->
-                                        <ng-container *ngIf="last || chat.messages[i + 1].isMine !== message.isMine">
+                                        <ng-container
+                                            *ngIf="
+                                                last ||
+                                                chat.messages[i + 1].isMine !==
+                                                    message.isMine
+                                            "
+                                        >
                                             <div
                                                 class="absolute bottom-0 w-3"
-                                                [ngClass]="{'text-blue-500 -right-1 -mr-px mb-px': message.isMine,
-                                                            'text-gray-500 -left-1 -ml-px mb-px -scale-x-1': !message.isMine}">
-                                                <ng-container *ngTemplateOutlet="speechBubbleExtension"></ng-container>
+                                                [ngClass]="{
+                                                    '-right-1 -mr-px mb-px text-blue-500':
+                                                        message.isMine,
+                                                    '-left-1 -ml-px mb-px -scale-x-1 text-gray-500':
+                                                        !message.isMine
+                                                }"
+                                            >
+                                                <ng-container
+                                                    *ngTemplateOutlet="
+                                                        speechBubbleExtension
+                                                    "
+                                                ></ng-container>
                                             </div>
                                         </ng-container>
                                         <!-- Message -->
                                         <div
                                             class="min-w-4 leading-5"
-                                            [innerHTML]="message.value">
-                                        </div>
+                                            [innerHTML]="message.value"
+                                        ></div>
                                     </div>
                                     <!-- Time -->
                                     <ng-container
-                                        *ngIf="first
-                                       || last
-                                       || chat.messages[i + 1].isMine !== message.isMine
-                                       || chat.messages[i + 1].createdAt !== message.createdAt">
+                                        *ngIf="
+                                            first ||
+                                            last ||
+                                            chat.messages[i + 1].isMine !==
+                                                message.isMine ||
+                                            chat.messages[i + 1].createdAt !==
+                                                message.createdAt
+                                        "
+                                    >
                                         <div
-                                            class="my-0.5 text-sm font-medium text-secondary"
-                                            [ngClass]="{'mr-3': message.isMine,
-                                                        'ml-3': !message.isMine}">
-                                            {{message.createdAt | date:'HH:mm'}}
+                                            class="text-secondary my-0.5 text-sm font-medium"
+                                            [ngClass]="{
+                                                'mr-3': message.isMine,
+                                                'ml-3': !message.isMine
+                                            }"
+                                        >
+                                            {{
+                                                message.createdAt
+                                                    | date: 'HH:mm'
+                                            }}
                                         </div>
                                     </ng-container>
                                 </div>
@@ -150,19 +251,26 @@
                     </div>
 
                     <!-- Message field -->
-                    <div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
+                    <div
+                        class="flex items-end border-t bg-gray-50 p-4 dark:bg-transparent"
+                    >
                         <mat-form-field
                             class="fuse-mat-dense fuse-mat-rounded fuse-mat-bold w-full"
-                            [subscriptSizing]="'dynamic'">
+                            [subscriptSizing]="'dynamic'"
+                        >
                             <textarea
                                 matInput
                                 cdkTextareaAutosize
-                                #messageInput></textarea>
+                                #messageInput
+                            ></textarea>
                         </mat-form-field>
-                        <div class="flex items-center h-11 my-px ml-4">
-                            <button
-                                mat-icon-button>
-                                <mat-icon [svgIcon]="'heroicons_outline:paper-airplane'"></mat-icon>
+                        <div class="my-px ml-4 flex h-11 items-center">
+                            <button mat-icon-button>
+                                <mat-icon
+                                    [svgIcon]="
+                                        'heroicons_outline:paper-airplane'
+                                    "
+                                ></mat-icon>
                             </button>
                         </div>
                     </div>
@@ -174,16 +282,23 @@
 
 <!-- Select chat or start new template -->
 <ng-template #selectChatOrStartNew>
-    <div class="flex flex-col flex-auto items-center justify-center w-full h-full p-4">
+    <div
+        class="flex h-full w-full flex-auto flex-col items-center justify-center p-4"
+    >
         <mat-icon
             class="icon-size-24"
-            [svgIcon]="'heroicons_outline:chat-bubble-bottom-center-text'"></mat-icon>
-        <div class="mt-4 text-xl text-center font-medium tracking-tight text-secondary">Select a conversation</div>
+            [svgIcon]="'heroicons_outline:chat-bubble-bottom-center-text'"
+        ></mat-icon>
+        <div
+            class="text-secondary mt-4 text-center text-xl font-medium tracking-tight"
+        >
+            Select a conversation
+        </div>
     </div>
 </ng-template>
 
 <!-- Speech bubble tail SVG -->
-<!-- @formatter:off -->
+<!-- prettier-ignore -->
 <ng-template #speechBubbleExtension>
     <svg width="100%" height="100%" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
         <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -191,4 +306,3 @@
         </g>
     </svg>
 </ng-template>
-<!-- @formatter:on -->

src/app/layout/common/quick-chat/quick-chat.component.scss

@@ -6,14 +6,12 @@ quick-chat {
     }
 
     &.quick-chat-opened {
-
         > div {
             overflow: visible;
         }
     }
 
     &:not(.quick-chat-opened) {
-
         > div {
             overflow: visible;
             animation: addOverflowHidden 1ms linear 400ms;
@@ -32,7 +30,6 @@ quick-chat {
     }
 }
 
-
 /* Overlay */
 .quick-chat-overlay {
     position: fixed;
@@ -47,7 +44,7 @@ quick-chat {
 
 @keyframes addOverflowHidden {
     0% {
-        overflow: visible
+        overflow: visible;
     }
     99% {
         overflow: visible;

src/app/layout/common/quick-chat/quick-chat.component.ts

@@ -1,7 +1,27 @@
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import { DatePipe, DOCUMENT, NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
-import { AfterViewInit, Component, ElementRef, HostBinding, HostListener, Inject, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    DOCUMENT,
+    DatePipe,
+    NgClass,
+    NgFor,
+    NgIf,
+    NgTemplateOutlet,
+} from '@angular/common';
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    HostBinding,
+    HostListener,
+    Inject,
+    NgZone,
+    OnDestroy,
+    OnInit,
+    Renderer2,
+    ViewChild,
+    ViewEncapsulation,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -12,23 +32,35 @@ import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'quick-chat',
-    templateUrl  : './quick-chat.component.html',
-    styleUrls    : ['./quick-chat.component.scss'],
+    selector: 'quick-chat',
+    templateUrl: './quick-chat.component.html',
+    styleUrls: ['./quick-chat.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    exportAs     : 'quickChat',
-    standalone   : true,
-    imports      : [NgClass, NgIf, MatIconModule, MatButtonModule, FuseScrollbarDirective, NgFor, NgTemplateOutlet, MatFormFieldModule, MatInputModule, TextFieldModule, DatePipe],
+    exportAs: 'quickChat',
+    standalone: true,
+    imports: [
+        NgClass,
+        NgIf,
+        MatIconModule,
+        MatButtonModule,
+        FuseScrollbarDirective,
+        NgFor,
+        NgTemplateOutlet,
+        MatFormFieldModule,
+        MatInputModule,
+        TextFieldModule,
+        DatePipe,
+    ],
 })
-export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
-{
+export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy {
     @ViewChild('messageInput') messageInput: ElementRef;
     chat: Chat;
     chats: Chat[];
     opened: boolean = false;
     selectedChat: Chat;
     private _mutationObserver: MutationObserver;
-    private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
+    private _scrollStrategy: ScrollStrategy =
+        this._scrollStrategyOptions.block();
     private _overlay: HTMLElement;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -41,10 +73,8 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
         private _renderer2: Renderer2,
         private _ngZone: NgZone,
         private _quickChatService: QuickChatService,
-        private _scrollStrategyOptions: ScrollStrategyOptions,
-    )
-    {
-    }
+        private _scrollStrategyOptions: ScrollStrategyOptions
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Decorated methods
@@ -53,8 +83,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
     /**
      * Host binding for component classes
      */
-    @HostBinding('class') get classList(): any
-    {
+    @HostBinding('class') get classList(): any {
         return {
             'quick-chat-opened': this.opened,
         };
@@ -67,13 +96,10 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
      */
     @HostListener('input')
     @HostListener('ngModelChange')
-    private _resizeMessageInput(): void
-    {
+    private _resizeMessageInput(): void {
         // This doesn't need to trigger Angular's change detection by itself
-        this._ngZone.runOutsideAngular(() =>
-        {
-            setTimeout(() =>
-            {
+        this._ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
                 // Set the height to 'auto' so we can correctly read the scrollHeight
                 this.messageInput.nativeElement.style.height = 'auto';
 
@@ -90,29 +116,25 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Chat
         this._quickChatService.chat$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((chat: Chat) =>
-            {
+            .subscribe((chat: Chat) => {
                 this.chat = chat;
             });
 
         // Chats
         this._quickChatService.chats$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((chats: Chat[]) =>
-            {
+            .subscribe((chats: Chat[]) => {
                 this.chats = chats;
             });
 
         // Selected chat
         this._quickChatService.chat$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((chat: Chat) =>
-            {
+            .subscribe((chat: Chat) => {
                 this.selectedChat = chat;
             });
     }
@@ -120,35 +142,40 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
     /**
      * After view init
      */
-    ngAfterViewInit(): void
-    {
+    ngAfterViewInit(): void {
         // Fix for Firefox.
         //
         // Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent,
         // adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
         // This fixes the problem by reading the 'top' value from the html element and adding it as a
         // 'marginTop' to the navigation itself.
-        this._mutationObserver = new MutationObserver((mutations) =>
-        {
-            mutations.forEach((mutation) =>
-            {
+        this._mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
                 const mutationTarget = mutation.target as HTMLElement;
-                if ( mutation.attributeName === 'class' )
-                {
-                    if ( mutationTarget.classList.contains('cdk-global-scrollblock') )
-                    {
+                if (mutation.attributeName === 'class') {
+                    if (
+                        mutationTarget.classList.contains(
+                            'cdk-global-scrollblock'
+                        )
+                    ) {
                         const top = parseInt(mutationTarget.style.top, 10);
-                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`);
-                    }
-                    else
-                    {
-                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null);
+                        this._renderer2.setStyle(
+                            this._elementRef.nativeElement,
+                            'margin-top',
+                            `${Math.abs(top)}px`
+                        );
+                    } else {
+                        this._renderer2.setStyle(
+                            this._elementRef.nativeElement,
+                            'margin-top',
+                            null
+                        );
                     }
                 }
             });
         });
         this._mutationObserver.observe(this._document.documentElement, {
-            attributes     : true,
+            attributes: true,
             attributeFilter: ['class'],
         });
     }
@@ -156,8 +183,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Disconnect the mutation observer
         this._mutationObserver.disconnect();
 
@@ -173,11 +199,9 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
     /**
      * Open the panel
      */
-    open(): void
-    {
+    open(): void {
         // Return if the panel has already opened
-        if ( this.opened )
-        {
+        if (this.opened) {
             return;
         }
 
@@ -188,11 +212,9 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
     /**
      * Close the panel
      */
-    close(): void
-    {
+    close(): void {
         // Return if the panel has already closed
-        if ( !this.opened )
-        {
+        if (!this.opened) {
             return;
         }
 
@@ -203,14 +225,10 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
     /**
      * Toggle the panel
      */
-    toggle(): void
-    {
-        if ( this.opened )
-        {
+    toggle(): void {
+        if (this.opened) {
             this.close();
-        }
-        else
-        {
+        } else {
             this.open();
         }
     }
@@ -220,8 +238,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
      *
      * @param id
      */
-    selectChat(id: string): void
-    {
+    selectChat(id: string): void {
         // Open the panel
         this._toggleOpened(true);
 
@@ -235,8 +252,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 
@@ -249,8 +265,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
      *
      * @private
      */
-    private _showOverlay(): void
-    {
+    private _showOverlay(): void {
         // Try hiding the overlay in case there is one already opened
         this._hideOverlay();
 
@@ -258,8 +273,7 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
         this._overlay = this._renderer2.createElement('div');
 
         // Return if overlay couldn't be create for some reason
-        if ( !this._overlay )
-        {
+        if (!this._overlay) {
             return;
         }
 
@@ -267,14 +281,16 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
         this._overlay.classList.add('quick-chat-overlay');
 
         // Append the backdrop to the parent of the panel
-        this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
+        this._renderer2.appendChild(
+            this._elementRef.nativeElement.parentElement,
+            this._overlay
+        );
 
         // Enable block scroll strategy
         this._scrollStrategy.enable();
 
         // Add an event listener to the overlay
-        this._overlay.addEventListener('click', () =>
-        {
+        this._overlay.addEventListener('click', () => {
             this.close();
         });
     }
@@ -284,16 +300,13 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
      *
      * @private
      */
-    private _hideOverlay(): void
-    {
-        if ( !this._overlay )
-        {
+    private _hideOverlay(): void {
+        if (!this._overlay) {
             return;
         }
 
         // If the backdrop still exists...
-        if ( this._overlay )
-        {
+        if (this._overlay) {
             // Remove the backdrop
             this._overlay.parentNode.removeChild(this._overlay);
             this._overlay = null;
@@ -309,19 +322,16 @@ export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
      * @param open
      * @private
      */
-    private _toggleOpened(open: boolean): void
-    {
+    private _toggleOpened(open: boolean): void {
         // Set the opened
         this.opened = open;
 
         // If the panel opens, show the overlay
-        if ( open )
-        {
+        if (open) {
             this._showOverlay();
         }
         // Otherwise, hide the overlay
-        else
-        {
+        else {
             this._hideOverlay();
         }
     }

src/app/layout/common/quick-chat/quick-chat.service.ts

@@ -1,20 +1,25 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
-import { BehaviorSubject, map, Observable, of, switchMap, tap, throwError } from 'rxjs';
+import {
+    BehaviorSubject,
+    map,
+    Observable,
+    of,
+    switchMap,
+    tap,
+    throwError,
+} from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class QuickChatService
-{
+@Injectable({ providedIn: 'root' })
+export class QuickChatService {
     private _chat: BehaviorSubject<Chat> = new BehaviorSubject(null);
     private _chats: BehaviorSubject<Chat[]> = new BehaviorSubject<Chat[]>(null);
 
     /**
      * Constructor
      */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
+    constructor(private _httpClient: HttpClient) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -23,16 +28,14 @@ export class QuickChatService
     /**
      * Getter for chat
      */
-    get chat$(): Observable<Chat>
-    {
+    get chat$(): Observable<Chat> {
         return this._chat.asObservable();
     }
 
     /**
      * Getter for chat
      */
-    get chats$(): Observable<Chat[]>
-    {
+    get chats$(): Observable<Chat[]> {
         return this._chats.asObservable();
     }
 
@@ -43,13 +46,11 @@ export class QuickChatService
     /**
      * Get chats
      */
-    getChats(): Observable<any>
-    {
+    getChats(): Observable<any> {
         return this._httpClient.get<Chat[]>('api/apps/chat/chats').pipe(
-            tap((response: Chat[]) =>
-            {
+            tap((response: Chat[]) => {
                 this._chats.next(response);
-            }),
+            })
         );
     }
 
@@ -58,26 +59,26 @@ export class QuickChatService
      *
      * @param id
      */
-    getChatById(id: string): Observable<any>
-    {
-        return this._httpClient.get<Chat>('api/apps/chat/chat', {params: {id}}).pipe(
-            map((chat) =>
-            {
-                // Update the chat
-                this._chat.next(chat);
+    getChatById(id: string): Observable<any> {
+        return this._httpClient
+            .get<Chat>('api/apps/chat/chat', { params: { id } })
+            .pipe(
+                map((chat) => {
+                    // Update the chat
+                    this._chat.next(chat);
 
-                // Return the chat
-                return chat;
-            }),
-            switchMap((chat) =>
-            {
-                if ( !chat )
-                {
-                    return throwError('Could not found chat with id of ' + id + '!');
-                }
+                    // Return the chat
+                    return chat;
+                }),
+                switchMap((chat) => {
+                    if (!chat) {
+                        return throwError(
+                            'Could not found chat with id of ' + id + '!'
+                        );
+                    }
 
-                return of(chat);
-            }),
-        );
+                    return of(chat);
+                })
+            );
     }
 }

src/app/layout/common/quick-chat/quick-chat.types.ts

@@ -1,5 +1,4 @@
-export interface Chat
-{
+export interface Chat {
     id?: string;
     contactId?: string;
     contact?: Contact;
@@ -17,8 +16,7 @@ export interface Chat
     }[];
 }
 
-export interface Contact
-{
+export interface Contact {
     id?: string;
     avatar?: string;
     name?: string;

src/app/layout/common/search/search.component.html

@@ -1,65 +1,91 @@
 <!-- Bar search -->
 <ng-container *ngIf="appearance === 'bar'">
-    <button
-        mat-icon-button
-        *ngIf="!opened"
-        (click)="open()">
+    <button mat-icon-button *ngIf="!opened" (click)="open()">
         <mat-icon [svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon>
     </button>
     <div
-        class="absolute inset-0 flex items-center shrink-0 z-99 bg-card"
+        class="bg-card absolute inset-0 z-99 flex shrink-0 items-center"
         *ngIf="opened"
         @slideInTop
-        @slideOutTop>
+        @slideOutTop
+    >
         <mat-icon
             class="absolute ml-6 sm:ml-8"
-            [svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon>
+            [svgIcon]="'heroicons_outline:magnifying-glass'"
+        ></mat-icon>
         <input
-            class="w-full h-full px-16 sm:px-18"
+            class="h-full w-full px-16 sm:px-18"
             [formControl]="searchControl"
             [matAutocomplete]="matAutocomplete"
             [placeholder]="'Search...'"
             (keydown)="onKeydown($event)"
-            #barSearchInput>
+            #barSearchInput
+        />
         <mat-autocomplete
-            class="max-h-128 sm:px-2 border-t rounded-b shadow-md"
+            class="max-h-128 rounded-b border-t shadow-md sm:px-2"
             [autoSelectActiveOption]="true"
             [disableRipple]="true"
-            #matAutocomplete="matAutocomplete">
+            #matAutocomplete="matAutocomplete"
+        >
             <mat-option
-                class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent"
-                *ngIf="resultSets && !resultSets.length">
+                class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md"
+                *ngIf="resultSets && !resultSets.length"
+            >
                 No results found!
             </mat-option>
-            <ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn">
-                <mat-optgroup class="flex items-center mt-2 px-2">
-                    <span class="text-sm font-semibold tracking-wider text-secondary">{{resultSet.label.toUpperCase()}}</span>
+            <ng-container
+                *ngFor="let resultSet of resultSets; trackBy: trackByFn"
+            >
+                <mat-optgroup class="mt-2 flex items-center px-2">
+                    <span
+                        class="text-secondary text-sm font-semibold tracking-wider"
+                        >{{ resultSet.label.toUpperCase() }}</span
+                    >
                 </mat-optgroup>
-                <ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
+                <ng-container
+                    *ngFor="let result of resultSet.results; trackBy: trackByFn"
+                >
                     <mat-option
-                        class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
+                        class="group relative mb-1 rounded-md px-6 py-0 text-md dark:hover:bg-hover hover:bg-gray-100"
                         [routerLink]="result.link"
-                        [value]="result.value">
+                        [value]="result.value"
+                    >
                         <!-- Contacts -->
                         <ng-container *ngIf="resultSet.id === 'contacts'">
-                            <ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
+                            <ng-container
+                                *ngTemplateOutlet="
+                                    contactResult;
+                                    context: { $implicit: result }
+                                "
+                            ></ng-container>
                         </ng-container>
                         <!-- Pages -->
                         <ng-container *ngIf="resultSet.id === 'pages'">
-                            <ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"></ng-container>
+                            <ng-container
+                                *ngTemplateOutlet="
+                                    pageResult;
+                                    context: { $implicit: result }
+                                "
+                            ></ng-container>
                         </ng-container>
                         <!-- Tasks -->
                         <ng-container *ngIf="resultSet.id === 'tasks'">
-                            <ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}"></ng-container>
+                            <ng-container
+                                *ngTemplateOutlet="
+                                    taskResult;
+                                    context: { $implicit: result }
+                                "
+                            ></ng-container>
                         </ng-container>
                     </mat-option>
                 </ng-container>
             </ng-container>
         </mat-autocomplete>
         <button
-            class="absolute top-1/2 right-5 sm:right-7 shrink-0 w-10 h-10 -mt-5"
+            class="absolute right-5 top-1/2 -mt-5 h-10 w-10 shrink-0 sm:right-7"
             mat-icon-button
-            (click)="close()">
+            (click)="close()"
+        >
             <mat-icon [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
         </button>
     </div>
@@ -68,49 +94,74 @@
 <!-- Basic search -->
 <ng-container *ngIf="appearance === 'basic'">
     <div class="w-full sm:min-w-80">
-        <mat-form-field
-            class="w-full"
-            [subscriptSizing]="'dynamic'">
+        <mat-form-field class="w-full" [subscriptSizing]="'dynamic'">
             <mat-icon
                 matPrefix
-                [svgIcon]="'heroicons_outline:magnifying-glass'"></mat-icon>
+                [svgIcon]="'heroicons_outline:magnifying-glass'"
+            ></mat-icon>
             <input
                 matInput
                 [formControl]="searchControl"
                 [matAutocomplete]="matAutocomplete"
                 [placeholder]="'Search...'"
-                (keydown)="onKeydown($event)">
+                (keydown)="onKeydown($event)"
+            />
         </mat-form-field>
         <mat-autocomplete
-            class="max-h-128 mt-1 rounded"
+            class="mt-1 max-h-128 rounded"
             [autoSelectActiveOption]="true"
             [disableRipple]="true"
-            #matAutocomplete="matAutocomplete">
+            #matAutocomplete="matAutocomplete"
+        >
             <mat-option
-                class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent"
-                *ngIf="resultSets && !resultSets.length">
+                class="text-secondary pointer-events-none bg-transparent px-6 py-0 text-md"
+                *ngIf="resultSets && !resultSets.length"
+            >
                 No results found!
             </mat-option>
-            <ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn">
-                <mat-optgroup class="flex items-center mt-2 px-2">
-                    <span class="text-sm font-semibold tracking-wider text-secondary">{{resultSet.label.toUpperCase()}}</span>
+            <ng-container
+                *ngFor="let resultSet of resultSets; trackBy: trackByFn"
+            >
+                <mat-optgroup class="mt-2 flex items-center px-2">
+                    <span
+                        class="text-secondary text-sm font-semibold tracking-wider"
+                        >{{ resultSet.label.toUpperCase() }}</span
+                    >
                 </mat-optgroup>
-                <ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
+                <ng-container
+                    *ngFor="let result of resultSet.results; trackBy: trackByFn"
+                >
                     <mat-option
-                        class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
+                        class="group relative mb-1 rounded-md px-6 py-0 text-md dark:hover:bg-hover hover:bg-gray-100"
                         [routerLink]="result.link"
-                        [value]="result.value">
+                        [value]="result.value"
+                    >
                         <!-- Contacts -->
                         <ng-container *ngIf="resultSet.id === 'contacts'">
-                            <ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
+                            <ng-container
+                                *ngTemplateOutlet="
+                                    contactResult;
+                                    context: { $implicit: result }
+                                "
+                            ></ng-container>
                         </ng-container>
                         <!-- Pages -->
                         <ng-container *ngIf="resultSet.id === 'pages'">
-                            <ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"></ng-container>
+                            <ng-container
+                                *ngTemplateOutlet="
+                                    pageResult;
+                                    context: { $implicit: result }
+                                "
+                            ></ng-container>
                         </ng-container>
                         <!-- Tasks -->
                         <ng-container *ngIf="resultSet.id === 'tasks'">
-                            <ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}"></ng-container>
+                            <ng-container
+                                *ngTemplateOutlet="
+                                    taskResult;
+                                    context: { $implicit: result }
+                                "
+                            ></ng-container>
                         </ng-container>
                     </mat-option>
                 </ng-container>
@@ -120,18 +171,17 @@
 </ng-container>
 
 <!-- Contact result template -->
-<ng-template
-    #contactResult
-    let-result>
+<ng-template #contactResult let-result>
     <div class="flex items-center">
-        <div class="flex shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
-            <img
-                *ngIf="result.avatar"
-                [src]="result.avatar">
+        <div
+            class="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-100 dark:bg-primary-800"
+        >
+            <img *ngIf="result.avatar" [src]="result.avatar" />
             <mat-icon
-                class="m-0 icon-size-5 text-primary dark:text-primary-400"
+                class="m-0 text-primary icon-size-5 dark:text-primary-400"
                 *ngIf="!result.avatar"
-                [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
+                [svgIcon]="'heroicons_outline:user-circle'"
+            ></mat-icon>
         </div>
         <div class="ml-3 truncate">
             <span [innerHTML]="result.name"></span>
@@ -140,37 +190,34 @@
 </ng-template>
 
 <!-- Page result template -->
-<ng-template
-    #pageResult
-    let-result>
+<ng-template #pageResult let-result>
     <div class="flex flex-col">
-        <div
-            class="truncate leading-normal"
-            [innerHTML]="result.title"></div>
-        <div class="truncate leading-normal text-sm text-secondary">
-            {{result.link}}
+        <div class="truncate leading-normal" [innerHTML]="result.title"></div>
+        <div class="text-secondary truncate text-sm leading-normal">
+            {{ result.link }}
         </div>
     </div>
 </ng-template>
 
 <!-- Task result template -->
-<ng-template
-    #taskResult
-    let-result>
+<ng-template #taskResult let-result>
     <div class="flex items-center">
         <ng-container *ngIf="result.completed">
             <mat-icon
                 class="mr-0 text-primary dark:text-primary-400"
-                [svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
+                [svgIcon]="'heroicons_outline:check-circle'"
+            ></mat-icon>
         </ng-container>
         <ng-container *ngIf="!result.completed">
             <mat-icon
-                class="mr-0 text-hint"
-                [svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
+                class="text-hint mr-0"
+                [svgIcon]="'heroicons_outline:check-circle'"
+            ></mat-icon>
         </ng-container>
         <div
             class="ml-3 truncate leading-normal"
-            [ngClass]="{'line-through text-hint': result.completed}"
-            [innerHTML]="result.title"></div>
+            [ngClass]="{ 'text-hint line-through': result.completed }"
+            [innerHTML]="result.title"
+        ></div>
     </div>
 </ng-template>

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

@@ -1,9 +1,32 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { Component, ElementRef, EventEmitter, HostBinding, inject, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
-import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
-import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    HostBinding,
+    Input,
+    OnChanges,
+    OnDestroy,
+    OnInit,
+    Output,
+    Renderer2,
+    SimpleChanges,
+    ViewChild,
+    ViewEncapsulation,
+    inject,
+} from '@angular/core';
+import {
+    FormsModule,
+    ReactiveFormsModule,
+    UntypedFormControl,
+} from '@angular/forms';
+import {
+    MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
+    MatAutocomplete,
+    MatAutocompleteModule,
+} from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -11,29 +34,41 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { RouterLink } from '@angular/router';
 import { fuseAnimations } from '@fuse/animations/public-api';
-import { debounceTime, filter, map, Subject, takeUntil } from 'rxjs';
+import { Subject, debounceTime, filter, map, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'search',
-    templateUrl  : './search.component.html',
+    selector: 'search',
+    templateUrl: './search.component.html',
     encapsulation: ViewEncapsulation.None,
-    exportAs     : 'fuseSearch',
-    animations   : fuseAnimations,
-    standalone   : true,
-    imports      : [NgIf, MatButtonModule, MatIconModule, FormsModule, MatAutocompleteModule, ReactiveFormsModule, MatOptionModule, NgFor, RouterLink, NgTemplateOutlet, MatFormFieldModule, MatInputModule, NgClass],
-    providers    : [
+    exportAs: 'fuseSearch',
+    animations: fuseAnimations,
+    standalone: true,
+    imports: [
+        NgIf,
+        MatButtonModule,
+        MatIconModule,
+        FormsModule,
+        MatAutocompleteModule,
+        ReactiveFormsModule,
+        MatOptionModule,
+        NgFor,
+        RouterLink,
+        NgTemplateOutlet,
+        MatFormFieldModule,
+        MatInputModule,
+        NgClass,
+    ],
+    providers: [
         {
-            provide   : MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
-            useFactory: () =>
-            {
+            provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
+            useFactory: () => {
                 const overlay = inject(Overlay);
                 return () => overlay.scrollStrategies.block();
             },
         },
     ],
 })
-export class SearchComponent implements OnChanges, OnInit, OnDestroy
-{
+export class SearchComponent implements OnChanges, OnInit, OnDestroy {
     @Input() appearance: 'basic' | 'bar' = 'basic';
     @Input() debounce: number = 300;
     @Input() minLength: number = 2;
@@ -51,10 +86,8 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
     constructor(
         private _elementRef: ElementRef,
         private _httpClient: HttpClient,
-        private _renderer2: Renderer2,
-    )
-    {
-    }
+        private _renderer2: Renderer2
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -63,12 +96,11 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
     /**
      * Host binding for component classes
      */
-    @HostBinding('class') get classList(): any
-    {
+    @HostBinding('class') get classList(): any {
         return {
-            'search-appearance-bar'  : this.appearance === 'bar',
+            'search-appearance-bar': this.appearance === 'bar',
             'search-appearance-basic': this.appearance === 'basic',
-            'search-opened'          : this.opened,
+            'search-opened': this.opened,
         };
     }
 
@@ -78,15 +110,12 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
      * @param value
      */
     @ViewChild('barSearchInput')
-    set barSearchInput(value: ElementRef)
-    {
+    set barSearchInput(value: ElementRef) {
         // If the value exists, it means that the search input
         // is now in the DOM, and we can focus on the input..
-        if ( value )
-        {
+        if (value) {
             // Give Angular time to complete the change detection cycle
-            setTimeout(() =>
-            {
+            setTimeout(() => {
                 // Focus to the input element
                 value.nativeElement.focus();
             });
@@ -99,8 +128,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
      * @param value
      */
     @ViewChild('matAutocomplete')
-    set matAutocomplete(value: MatAutocomplete)
-    {
+    set matAutocomplete(value: MatAutocomplete) {
         this._matAutocomplete = value;
     }
 
@@ -113,11 +141,9 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
      *
      * @param changes
      */
-    ngOnChanges(changes: SimpleChanges): void
-    {
+    ngOnChanges(changes: SimpleChanges): void {
         // Appearance
-        if ( 'appearance' in changes )
-        {
+        if ('appearance' in changes) {
             // To prevent any issues, close the
             // search after changing the appearance
             this.close();
@@ -127,20 +153,17 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to the search field value changes
         this.searchControl.valueChanges
             .pipe(
                 debounceTime(this.debounce),
                 takeUntil(this._unsubscribeAll),
-                map((value) =>
-                {
+                map((value) => {
                     // Set the resultSets to null if there is no value or
                     // the length of the value is smaller than the minLength
                     // so the autocomplete panel can be closed
-                    if ( !value || value.length < this.minLength )
-                    {
+                    if (!value || value.length < this.minLength) {
                         this.resultSets = null;
                     }
 
@@ -149,13 +172,12 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
                 }),
                 // Filter out undefined/null/false statements and also
                 // filter out the values that are smaller than minLength
-                filter(value => value && value.length >= this.minLength),
+                filter((value) => value && value.length >= this.minLength)
             )
-            .subscribe((value) =>
-            {
-                this._httpClient.post('api/common/search', {query: value})
-                    .subscribe((resultSets: any) =>
-                    {
+            .subscribe((value) => {
+                this._httpClient
+                    .post('api/common/search', { query: value })
+                    .subscribe((resultSets: any) => {
                         // Store the result sets
                         this.resultSets = resultSets;
 
@@ -168,8 +190,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -184,14 +205,11 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
      *
      * @param event
      */
-    onKeydown(event: KeyboardEvent): void
-    {
+    onKeydown(event: KeyboardEvent): void {
         // Escape
-        if ( event.code === 'Escape' )
-        {
+        if (event.code === 'Escape') {
             // If the appearance is 'bar' and the mat-autocomplete is not open, close the search
-            if ( this.appearance === 'bar' && !this._matAutocomplete.isOpen )
-            {
+            if (this.appearance === 'bar' && !this._matAutocomplete.isOpen) {
                 this.close();
             }
         }
@@ -201,11 +219,9 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
      * Open the search
      * Used in 'bar'
      */
-    open(): void
-    {
+    open(): void {
         // Return if it's already opened
-        if ( this.opened )
-        {
+        if (this.opened) {
             return;
         }
 
@@ -217,11 +233,9 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
      * Close the search
      * * Used in 'bar'
      */
-    close(): void
-    {
+    close(): void {
         // Return if it's already closed
-        if ( !this.opened )
-        {
+        if (!this.opened) {
             return;
         }
 
@@ -238,8 +252,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 }

src/app/layout/common/settings/settings.component.html

@@ -1,341 +1,512 @@
 <div
-    class="settings-cog fixed flex items-center justify-center right-0 w-10 h-10 shadow-lg rounded-l-lg z-90 cursor-pointer bg-red-600 bg-opacity-90 print:hidden"
-    [class.lg:right-0]="config.layout === 'centered' || config.layout === 'material'"
-    [class.lg:right-16]="config.layout !== 'centered' && config.layout !== 'material'"
+    class="settings-cog fixed right-0 z-90 flex h-10 w-10 cursor-pointer items-center justify-center rounded-l-lg bg-red-600 bg-opacity-90 shadow-lg print:hidden"
+    [class.lg:right-0]="
+        config.layout === 'centered' || config.layout === 'material'
+    "
+    [class.lg:right-16]="
+        config.layout !== 'centered' && config.layout !== 'material'
+    "
     style="top: 275px"
-    (click)="settingsDrawer.toggle()">
+    (click)="settingsDrawer.toggle()"
+>
     <mat-icon
-        class="icon-size-5 text-white animate-spin-slow"
-        [svgIcon]="'heroicons_solid:cog-8-tooth'"></mat-icon>
+        class="animate-spin-slow text-white icon-size-5"
+        [svgIcon]="'heroicons_solid:cog-8-tooth'"
+    ></mat-icon>
 </div>
 
 <fuse-drawer
-    class="w-screen min-w-screen sm:w-100 sm:min-w-100 z-999"
+    class="z-999 w-screen min-w-screen sm:w-100 sm:min-w-100"
     fixed
     [mode]="'over'"
     [name]="'settingsDrawer'"
     [position]="'right'"
-    #settingsDrawer>
-
-    <div class="flex flex-col w-full overflow-auto bg-card">
-        <div class="flex flex-row items-center px-6 h-20 min-h-20 text-white bg-primary">
+    #settingsDrawer
+>
+    <div class="bg-card flex w-full flex-col overflow-auto">
+        <div
+            class="flex h-20 min-h-20 flex-row items-center bg-primary px-6 text-white"
+        >
             <mat-icon
-                class="icon-size-7 text-current"
-                [svgIcon]="'heroicons_solid:cog-8-tooth'"></mat-icon>
-            <div class="ml-3 text-2xl font-semibold tracking-tight">Settings</div>
+                class="text-current icon-size-7"
+                [svgIcon]="'heroicons_solid:cog-8-tooth'"
+            ></mat-icon>
+            <div class="ml-3 text-2xl font-semibold tracking-tight">
+                Settings
+            </div>
             <button
                 class="ml-auto"
                 mat-icon-button
-                (click)="settingsDrawer.close()">
+                (click)="settingsDrawer.close()"
+            >
                 <mat-icon
                     class="text-current"
-                    [svgIcon]="'heroicons_outline:x-mark'"></mat-icon>
+                    [svgIcon]="'heroicons_outline:x-mark'"
+                ></mat-icon>
             </button>
         </div>
 
         <div class="flex flex-col p-6">
-
             <!-- Theme -->
-            <div class="text-md font-semibold text-secondary">THEME</div>
-            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
+            <div class="text-secondary text-md font-semibold">THEME</div>
+            <div class="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-3">
                 <ng-container *ngFor="let theme of config.themes">
                     <div
-                        class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                        class="bg-hover flex cursor-pointer items-center justify-center rounded-full px-4 py-3 ring-inset ring-primary"
                         [class.ring-2]="config.theme === theme.id"
                         [ngClass]="theme.id"
-                        (click)="setTheme(theme.id)">
+                        (click)="setTheme(theme.id)"
+                    >
                         <div
-                            class="flex-0 w-3 h-3 rounded-full bg-primary"
+                            class="h-3 w-3 flex-0 rounded-full bg-primary"
                         ></div>
                         <div
-                            class="ml-2.5 font-medium leading-5 truncate"
-                            [class.text-secondary]="config.theme !== theme.id">
-                            {{theme.name}}
+                            class="ml-2.5 truncate font-medium leading-5"
+                            [class.text-secondary]="config.theme !== theme.id"
+                        >
+                            {{ theme.name }}
                         </div>
                     </div>
                 </ng-container>
             </div>
 
-            <hr class="my-8">
+            <hr class="my-8" />
 
             <!-- Scheme -->
-            <div class="text-md font-semibold text-secondary">SCHEME</div>
-            <div class="grid grid-cols-3 gap-3 justify-items-start mt-6">
+            <div class="text-secondary text-md font-semibold">SCHEME</div>
+            <div class="mt-6 grid grid-cols-3 justify-items-start gap-3">
                 <!-- Auto -->
                 <div
-                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                    class="bg-hover flex cursor-pointer items-center rounded-full py-3 pl-5 pr-6 ring-inset ring-primary"
                     [class.ring-2]="config.scheme === 'auto'"
                     matTooltip="Automatically sets the scheme based on user's operating system's color scheme preference using 'prefer-color-scheme' media query."
-                    (click)="setScheme('auto')">
-                    <div class="flex items-center rounded-full overflow-hidden">
+                    (click)="setScheme('auto')"
+                >
+                    <div class="flex items-center overflow-hidden rounded-full">
                         <mat-icon
                             class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:bolt'"></mat-icon>
+                            [svgIcon]="'heroicons_solid:bolt'"
+                        ></mat-icon>
                     </div>
                     <div
-                        class="flex items-center ml-2 font-medium leading-5"
-                        [class.text-secondary]="config.scheme !== 'auto'">
+                        class="ml-2 flex items-center font-medium leading-5"
+                        [class.text-secondary]="config.scheme !== 'auto'"
+                    >
                         Auto
                     </div>
                 </div>
                 <!-- Dark -->
                 <div
-                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                    class="bg-hover flex cursor-pointer items-center rounded-full py-3 pl-5 pr-6 ring-inset ring-primary"
                     [class.ring-2]="config.scheme === 'dark'"
-                    (click)="setScheme('dark')">
-                    <div class="flex items-center rounded-full overflow-hidden">
+                    (click)="setScheme('dark')"
+                >
+                    <div class="flex items-center overflow-hidden rounded-full">
                         <mat-icon
                             class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:moon'"></mat-icon>
+                            [svgIcon]="'heroicons_solid:moon'"
+                        ></mat-icon>
                     </div>
                     <div
-                        class="flex items-center ml-2 font-medium leading-5"
-                        [class.text-secondary]="config.scheme !== 'dark'">
+                        class="ml-2 flex items-center font-medium leading-5"
+                        [class.text-secondary]="config.scheme !== 'dark'"
+                    >
                         Dark
                     </div>
                 </div>
                 <!-- Light -->
                 <div
-                    class="flex items-center py-3 pl-5 pr-6 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                    class="bg-hover flex cursor-pointer items-center rounded-full py-3 pl-5 pr-6 ring-inset ring-primary"
                     [class.ring-2]="config.scheme === 'light'"
-                    (click)="setScheme('light')">
-                    <div class="flex items-center rounded-full overflow-hidden">
+                    (click)="setScheme('light')"
+                >
+                    <div class="flex items-center overflow-hidden rounded-full">
                         <mat-icon
                             class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:sun'"></mat-icon>
+                            [svgIcon]="'heroicons_solid:sun'"
+                        ></mat-icon>
                     </div>
                     <div
-                        class="flex items-center ml-2 font-medium leading-5"
-                        [class.text-secondary]="config.scheme !== 'light'">
+                        class="ml-2 flex items-center font-medium leading-5"
+                        [class.text-secondary]="config.scheme !== 'light'"
+                    >
                         Light
                     </div>
                 </div>
             </div>
 
-            <hr class="my-8">
+            <hr class="my-8" />
 
             <!-- Layout -->
-            <div class="text-md font-semibold text-secondary">LAYOUT</div>
-            <div class="grid grid-cols-3 gap-3 mt-6">
-
+            <div class="text-secondary text-md font-semibold">LAYOUT</div>
+            <div class="mt-6 grid grid-cols-3 gap-3">
                 <!-- Empty -->
                 <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('empty')">
+                    class="flex cursor-pointer flex-col"
+                    (click)="setLayout('empty')"
+                >
                     <div
-                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'empty'">
-                        <div class="flex flex-col flex-auto bg-gray-50 dark:bg-gray-900"></div>
+                        class="flex h-20 flex-col overflow-hidden rounded-md border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'empty'"
+                    >
+                        <div
+                            class="flex flex-auto flex-col bg-gray-50 dark:bg-gray-900"
+                        ></div>
                     </div>
                     <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'empty'">
+                        class="text-secondary mt-2 text-center text-md font-medium"
+                        [class.text-primary]="config.layout === 'empty'"
+                    >
                         Empty
                     </div>
                 </div>
 
                 <!-- Classic -->
                 <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('classic')">
+                    class="flex cursor-pointer flex-col"
+                    (click)="setLayout('classic')"
+                >
                     <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'classic'">
+                        class="flex h-20 overflow-hidden rounded-md border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'classic'"
+                    >
                         <div class="w-8 bg-gray-100 dark:bg-gray-800">
-                            <div class="mt-3 mx-1.5 space-y-1">
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="mx-1.5 mt-3 space-y-1">
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
                             </div>
                         </div>
-                        <div class="flex flex-col flex-auto border-l">
+                        <div class="flex flex-auto flex-col border-l">
                             <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div
+                                    class="mr-1.5 flex h-full items-center justify-end"
+                                >
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
                                 </div>
                             </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                            <div
+                                class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"
+                            ></div>
                         </div>
                     </div>
                     <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'classic'">
+                        class="text-secondary mt-2 text-center text-md font-medium"
+                        [class.text-primary]="config.layout === 'classic'"
+                    >
                         Classic
                     </div>
                 </div>
 
                 <!-- Classy -->
                 <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('classy')">
+                    class="flex cursor-pointer flex-col"
+                    (click)="setLayout('classy')"
+                >
                     <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'classy'">
+                        class="flex h-20 overflow-hidden rounded-md border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'classy'"
+                    >
                         <div class="w-8 bg-gray-100 dark:bg-gray-800">
-                            <div class="flex items-center mt-1 mx-1">
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1 h-1 ml-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1 h-1 ml-0.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div class="mx-1 mt-1 flex items-center">
+                                <div
+                                    class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="ml-auto h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="ml-0.5 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
                             </div>
-                            <div class="w-4 h-4 mt-2.5 mx-auto rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="mt-2 mx-1 space-y-1">
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            <div
+                                class="mx-auto mt-2.5 h-4 w-4 rounded-full bg-gray-300 dark:bg-gray-700"
+                            ></div>
+                            <div class="mx-1 mt-2 space-y-1">
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
                             </div>
                         </div>
-                        <div class="flex flex-col flex-auto border-l">
+                        <div class="flex flex-auto flex-col border-l">
                             <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-2">
-                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div
+                                    class="mr-2 flex h-full items-center justify-end"
+                                >
+                                    <div
+                                        class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
                                 </div>
                             </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                            <div
+                                class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"
+                            ></div>
                         </div>
                     </div>
                     <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'classy'">
+                        class="text-secondary mt-2 text-center text-md font-medium"
+                        [class.text-primary]="config.layout === 'classy'"
+                    >
                         Classy
                     </div>
                 </div>
 
                 <!-- Compact -->
                 <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('compact')">
+                    class="flex cursor-pointer flex-col"
+                    (click)="setLayout('compact')"
+                >
                     <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'compact'">
+                        class="flex h-20 overflow-hidden rounded-md border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'compact'"
+                    >
                         <div class="w-5 bg-gray-100 dark:bg-gray-800">
-                            <div class="w-3 h-3 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
-                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-2.5 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            <div
+                                class="mx-auto mt-2 h-3 w-3 rounded-sm bg-gray-300 dark:bg-gray-700"
+                            ></div>
+                            <div
+                                class="mt-2 flex w-full flex-col items-center space-y-1"
+                            >
+                                <div
+                                    class="h-2.5 w-3 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-2.5 w-3 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-2.5 w-3 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
                             </div>
                         </div>
-                        <div class="flex flex-col flex-auto border-l">
+                        <div class="flex flex-auto flex-col border-l">
                             <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div
+                                    class="mr-1.5 flex h-full items-center justify-end"
+                                >
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
                                 </div>
                             </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                            <div
+                                class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"
+                            ></div>
                         </div>
                     </div>
                     <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'compact'">
+                        class="text-secondary mt-2 text-center text-md font-medium"
+                        [class.text-primary]="config.layout === 'compact'"
+                    >
                         Compact
                     </div>
                 </div>
 
                 <!-- Dense -->
                 <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('dense')">
+                    class="flex cursor-pointer flex-col"
+                    (click)="setLayout('dense')"
+                >
                     <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'dense'">
+                        class="flex h-20 overflow-hidden rounded-md border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'dense'"
+                    >
                         <div class="w-4 bg-gray-100 dark:bg-gray-800">
-                            <div class="w-2 h-2 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
-                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-2 h-2 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            <div
+                                class="mx-auto mt-2 h-2 w-2 rounded-sm bg-gray-300 dark:bg-gray-700"
+                            ></div>
+                            <div
+                                class="mt-2 flex w-full flex-col items-center space-y-1"
+                            >
+                                <div
+                                    class="h-2 w-2 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-2 w-2 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-2 w-2 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
                             </div>
                         </div>
-                        <div class="flex flex-col flex-auto border-l">
+                        <div class="flex flex-auto flex-col border-l">
                             <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div
+                                    class="mr-1.5 flex h-full items-center justify-end"
+                                >
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
                                 </div>
                             </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                            <div
+                                class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"
+                            ></div>
                         </div>
                     </div>
                     <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'dense'">
+                        class="text-secondary mt-2 text-center text-md font-medium"
+                        [class.text-primary]="config.layout === 'dense'"
+                    >
                         Dense
                     </div>
                 </div>
 
                 <!-- Futuristic -->
                 <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('futuristic')">
+                    class="flex cursor-pointer flex-col"
+                    (click)="setLayout('futuristic')"
+                >
                     <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'futuristic'">
+                        class="flex h-20 overflow-hidden rounded-md border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'futuristic'"
+                    >
                         <div class="w-8 bg-gray-100 dark:bg-gray-800">
-                            <div class="flex flex-col flex-auto h-full py-3 px-1.5 space-y-1">
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                            <div
+                                class="flex h-full flex-auto flex-col space-y-1 px-1.5 py-3"
+                            >
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
                                 <div class="flex-auto"></div>
-                                <div class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"></div>
+                                <div
+                                    class="h-1 rounded-sm bg-gray-300 dark:bg-gray-700"
+                                ></div>
                             </div>
                         </div>
-                        <div class="flex flex-col flex-auto border-l">
+                        <div class="flex flex-auto flex-col border-l">
                             <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div
+                                    class="mr-1.5 flex h-full items-center justify-end"
+                                >
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
                                 </div>
                             </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                            <div
+                                class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"
+                            ></div>
                         </div>
                     </div>
                     <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'futuristic'">
+                        class="text-secondary mt-2 text-center text-md font-medium"
+                        [class.text-primary]="config.layout === 'futuristic'"
+                    >
                         Futuristic
                     </div>
                 </div>
 
                 <!-- Thin -->
                 <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('thin')">
+                    class="flex cursor-pointer flex-col"
+                    (click)="setLayout('thin')"
+                >
                     <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'thin'">
+                        class="flex h-20 overflow-hidden rounded-md border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'thin'"
+                    >
                         <div class="w-3 bg-gray-100 dark:bg-gray-800">
-                            <div class="w-1.5 h-1.5 mt-2 mx-auto rounded-sm bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="flex flex-col items-center w-full mt-2 space-y-1">
-                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1.5 h-1.5 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div
+                                class="mx-auto mt-2 h-1.5 w-1.5 rounded-sm bg-gray-300 dark:bg-gray-700"
+                            ></div>
+                            <div
+                                class="mt-2 flex w-full flex-col items-center space-y-1"
+                            >
+                                <div
+                                    class="h-1.5 w-1.5 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1.5 w-1.5 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1.5 w-1.5 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1.5 w-1.5 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1.5 w-1.5 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
                             </div>
                         </div>
-                        <div class="flex flex-col flex-auto border-l">
+                        <div class="flex flex-auto flex-col border-l">
                             <div class="h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex items-center justify-end h-full mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div
+                                    class="mr-1.5 flex h-full items-center justify-end"
+                                >
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
                                 </div>
                             </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                            <div
+                                class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"
+                            ></div>
                         </div>
                     </div>
                     <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'thin'">
+                        class="text-secondary mt-2 text-center text-md font-medium"
+                        [class.text-primary]="config.layout === 'thin'"
+                    >
                         Thin
                     </div>
                 </div>
@@ -344,132 +515,230 @@
 
                 <!-- Centered -->
                 <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('centered')">
+                    class="flex cursor-pointer flex-col"
+                    (click)="setLayout('centered')"
+                >
                     <div
-                        class="flex h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'centered'">
-                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded-md overflow-hidden">
-                            <div class="flex items-center h-3 bg-gray-100 dark:bg-gray-800">
-                                <div class="flex ml-1.5">
-                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-3 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                        class="flex h-20 overflow-hidden rounded-md border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'centered'"
+                    >
+                        <div
+                            class="mx-2 my-1 flex flex-auto flex-col overflow-hidden rounded-md border"
+                        >
+                            <div
+                                class="flex h-3 items-center bg-gray-100 dark:bg-gray-800"
+                            >
+                                <div class="ml-1.5 flex">
+                                    <div
+                                        class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
                                 </div>
-                                <div class="flex items-center justify-end ml-auto mr-1.5">
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 ml-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                                <div
+                                    class="ml-auto mr-1.5 flex items-center justify-end"
+                                >
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="ml-1 h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
                                 </div>
                             </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                            <div
+                                class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"
+                            ></div>
                         </div>
                     </div>
                     <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'centered'">
+                        class="text-secondary mt-2 text-center text-md font-medium"
+                        [class.text-primary]="config.layout === 'centered'"
+                    >
                         Centered
                     </div>
                 </div>
 
                 <!-- Enterprise -->
                 <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('enterprise')">
+                    class="flex cursor-pointer flex-col"
+                    (click)="setLayout('enterprise')"
+                >
                     <div
-                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'enterprise'">
-                        <div class="flex items-center h-3 px-2 bg-gray-100 dark:bg-gray-800">
-                            <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="flex items-center justify-end ml-auto space-x-1">
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                        class="flex h-20 flex-col overflow-hidden rounded-md border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'enterprise'"
+                    >
+                        <div
+                            class="flex h-3 items-center bg-gray-100 px-2 dark:bg-gray-800"
+                        >
+                            <div
+                                class="h-2 w-2 rounded-full bg-gray-300 dark:bg-gray-700"
+                            ></div>
+                            <div
+                                class="ml-auto flex items-center justify-end space-x-1"
+                            >
+                                <div
+                                    class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
                             </div>
                         </div>
-                        <div class="flex items-center h-3 px-2 border-t border-b space-x-1 bg-gray-100 dark:bg-gray-800">
-                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                        <div
+                            class="flex h-3 items-center space-x-1 border-b border-t bg-gray-100 px-2 dark:bg-gray-800"
+                        >
+                            <div
+                                class="h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                            ></div>
+                            <div
+                                class="h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                            ></div>
+                            <div
+                                class="h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                            ></div>
+                            <div
+                                class="h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                            ></div>
                         </div>
-                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
-                            <div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
+                        <div
+                            class="mx-2 my-1 flex flex-auto flex-col overflow-hidden rounded border"
+                        >
+                            <div
+                                class="flex flex-auto bg-gray-50 dark:bg-gray-900"
+                            ></div>
                         </div>
                     </div>
                     <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'enterprise'">
+                        class="text-secondary mt-2 text-center text-md font-medium"
+                        [class.text-primary]="config.layout === 'enterprise'"
+                    >
                         Enterprise
                     </div>
                 </div>
 
                 <!-- Material -->
                 <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('material')">
+                    class="flex cursor-pointer flex-col"
+                    (click)="setLayout('material')"
+                >
                     <div
-                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'material'">
-                        <div class="flex flex-col flex-auto my-1 mx-2 border rounded overflow-hidden">
-                            <div class="flex items-center h-4 px-2 bg-gray-100 dark:bg-gray-800">
-                                <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="flex items-center justify-end ml-auto space-x-1">
-                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                    <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                        class="flex h-20 flex-col overflow-hidden rounded-md border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'material'"
+                    >
+                        <div
+                            class="mx-2 my-1 flex flex-auto flex-col overflow-hidden rounded border"
+                        >
+                            <div
+                                class="flex h-4 items-center bg-gray-100 px-2 dark:bg-gray-800"
+                            >
+                                <div
+                                    class="h-2 w-2 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="ml-auto flex items-center justify-end space-x-1"
+                                >
+                                    <div
+                                        class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
+                                    <div
+                                        class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                    ></div>
                                 </div>
                             </div>
-                            <div class="flex items-center h-2 px-2 space-x-1 bg-gray-100 dark:bg-gray-800">
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div
+                                class="flex h-2 items-center space-x-1 bg-gray-100 px-2 dark:bg-gray-800"
+                            >
+                                <div
+                                    class="h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
                             </div>
-                            <div class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"></div>
+                            <div
+                                class="flex flex-auto border-t bg-gray-50 dark:bg-gray-900"
+                            ></div>
                         </div>
                     </div>
                     <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'material'">
+                        class="text-secondary mt-2 text-center text-md font-medium"
+                        [class.text-primary]="config.layout === 'material'"
+                    >
                         Material
                     </div>
                 </div>
 
                 <!-- Modern -->
                 <div
-                    class="flex flex-col cursor-pointer"
-                    (click)="setLayout('modern')">
+                    class="flex cursor-pointer flex-col"
+                    (click)="setLayout('modern')"
+                >
                     <div
-                        class="flex flex-col h-20 rounded-md overflow-hidden border-2 hover:opacity-80"
-                        [class.border-primary]="config.layout === 'modern'">
-                        <div class="flex items-center h-4 px-2 border-b bg-gray-100 dark:bg-gray-800">
-                            <div class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                            <div class="flex items-center h-3 ml-2 space-x-1">
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-3 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                        class="flex h-20 flex-col overflow-hidden rounded-md border-2 hover:opacity-80"
+                        [class.border-primary]="config.layout === 'modern'"
+                    >
+                        <div
+                            class="flex h-4 items-center border-b bg-gray-100 px-2 dark:bg-gray-800"
+                        >
+                            <div
+                                class="h-2 w-2 rounded-full bg-gray-300 dark:bg-gray-700"
+                            ></div>
+                            <div class="ml-2 flex h-3 items-center space-x-1">
+                                <div
+                                    class="h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 w-3 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
                             </div>
-                            <div class="flex items-center justify-end ml-auto space-x-1">
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
-                                <div class="w-1 h-1 rounded-full bg-gray-300 dark:bg-gray-700"></div>
+                            <div
+                                class="ml-auto flex items-center justify-end space-x-1"
+                            >
+                                <div
+                                    class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
+                                <div
+                                    class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-700"
+                                ></div>
                             </div>
                         </div>
-                        <div class="flex flex-col flex-auto">
-                            <div class="flex flex-auto bg-gray-50 dark:bg-gray-900"></div>
+                        <div class="flex flex-auto flex-col">
+                            <div
+                                class="flex flex-auto bg-gray-50 dark:bg-gray-900"
+                            ></div>
                         </div>
                     </div>
                     <div
-                        class="mt-2 text-md font-medium text-center text-secondary"
-                        [class.text-primary]="config.layout === 'modern'">
+                        class="text-secondary mt-2 text-center text-md font-medium"
+                        [class.text-primary]="config.layout === 'modern'"
+                    >
                         Modern
                     </div>
                 </div>
-
             </div>
-
         </div>
-
     </div>
-
 </fuse-drawer>

src/app/layout/common/settings/settings.component.ts

@@ -5,14 +5,20 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Router } from '@angular/router';
 import { FuseDrawerComponent } from '@fuse/components/drawer';
-import { FuseConfig, FuseConfigService, Scheme, Theme, Themes } from '@fuse/services/config';
+import {
+    FuseConfig,
+    FuseConfigService,
+    Scheme,
+    Theme,
+    Themes,
+} from '@fuse/services/config';
 
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'settings',
-    templateUrl  : './settings.component.html',
-    styles       : [
+    selector: 'settings',
+    templateUrl: './settings.component.html',
+    styles: [
         `
             settings {
                 position: static;
@@ -22,7 +28,6 @@ import { Subject, takeUntil } from 'rxjs';
             }
 
             @media (screen and min-width: 1280px) {
-
                 empty-layout + settings .settings-cog {
                     right: 0 !important;
                 }
@@ -30,11 +35,17 @@ import { Subject, takeUntil } from 'rxjs';
         `,
     ],
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [MatIconModule, FuseDrawerComponent, MatButtonModule, NgFor, NgClass, MatTooltipModule],
+    standalone: true,
+    imports: [
+        MatIconModule,
+        FuseDrawerComponent,
+        MatButtonModule,
+        NgFor,
+        NgClass,
+        MatTooltipModule,
+    ],
 })
-export class SettingsComponent implements OnInit, OnDestroy
-{
+export class SettingsComponent implements OnInit, OnDestroy {
     config: FuseConfig;
     layout: string;
     scheme: 'dark' | 'light';
@@ -47,10 +58,8 @@ export class SettingsComponent implements OnInit, OnDestroy
      */
     constructor(
         private _router: Router,
-        private _fuseConfigService: FuseConfigService,
-    )
-    {
-    }
+        private _fuseConfigService: FuseConfigService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -59,13 +68,11 @@ export class SettingsComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to config changes
         this._fuseConfigService.config$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((config: FuseConfig) =>
-            {
+            .subscribe((config: FuseConfig) => {
                 // Store the config
                 this.config = config;
             });
@@ -74,8 +81,7 @@ export class SettingsComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -90,19 +96,19 @@ export class SettingsComponent implements OnInit, OnDestroy
      *
      * @param layout
      */
-    setLayout(layout: string): void
-    {
+    setLayout(layout: string): void {
         // Clear the 'layout' query param to allow layout changes
-        this._router.navigate([], {
-            queryParams        : {
-                layout: null,
-            },
-            queryParamsHandling: 'merge',
-        }).then(() =>
-        {
-            // Set the config
-            this._fuseConfigService.config = {layout};
-        });
+        this._router
+            .navigate([], {
+                queryParams: {
+                    layout: null,
+                },
+                queryParamsHandling: 'merge',
+            })
+            .then(() => {
+                // Set the config
+                this._fuseConfigService.config = { layout };
+            });
     }
 
     /**
@@ -110,9 +116,8 @@ export class SettingsComponent implements OnInit, OnDestroy
      *
      * @param scheme
      */
-    setScheme(scheme: Scheme): void
-    {
-        this._fuseConfigService.config = {scheme};
+    setScheme(scheme: Scheme): void {
+        this._fuseConfigService.config = { scheme };
     }
 
     /**
@@ -120,8 +125,7 @@ export class SettingsComponent implements OnInit, OnDestroy
      *
      * @param theme
      */
-    setTheme(theme: Theme): void
-    {
-        this._fuseConfigService.config = {theme};
+    setTheme(theme: Theme): void {
+        this._fuseConfigService.config = { theme };
     }
 }

src/app/layout/common/shortcuts/shortcuts.component.html

@@ -1,56 +1,63 @@
 <!-- Shortcuts toggle -->
-<button
-    mat-icon-button
-    (click)="openPanel()"
-    #shortcutsOrigin>
+<button mat-icon-button (click)="openPanel()" #shortcutsOrigin>
     <mat-icon [svgIcon]="'heroicons_outline:squares-plus'"></mat-icon>
 </button>
 
 <!-- Shortcuts panel -->
 <ng-template #shortcutsPanel>
-    <div class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
-
+    <div
+        class="fixed inset-0 flex flex-col overflow-hidden shadow-lg sm:static sm:inset-auto sm:w-90 sm:min-w-90 sm:rounded-2xl"
+    >
         <!-- Header -->
-        <div class="flex shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary">
-            <div class="sm:hidden -ml-1 mr-3">
-                <button
-                    mat-icon-button
-                    (click)="closePanel()">
+        <div
+            class="flex shrink-0 items-center bg-primary py-4 pl-6 pr-4 text-on-primary"
+        >
+            <div class="-ml-1 mr-3 sm:hidden">
+                <button mat-icon-button (click)="closePanel()">
                     <mat-icon
-                        class="icon-size-5 text-current"
-                        [svgIcon]="'heroicons_solid:x-mark'"></mat-icon>
+                        class="text-current icon-size-5"
+                        [svgIcon]="'heroicons_solid:x-mark'"
+                    ></mat-icon>
                 </button>
             </div>
             <div class="flex items-center text-lg font-medium leading-10">
                 <span class="">Shortcuts</span>
                 <ng-container *ngIf="mode !== 'view'">
                     <span class="ml-1">
-                        <ng-container *ngIf="mode === 'add'">- Add new</ng-container>
-                        <ng-container *ngIf="mode === 'modify' || mode === 'edit'">- Editing</ng-container>
+                        <ng-container *ngIf="mode === 'add'"
+                            >- Add new</ng-container
+                        >
+                        <ng-container
+                            *ngIf="mode === 'modify' || mode === 'edit'"
+                            >- Editing</ng-container
+                        >
                     </span>
                 </ng-container>
             </div>
             <div class="ml-auto">
-
                 <!-- View mode -->
                 <ng-container *ngIf="mode === 'view'">
                     <!-- Enter 'modify' mode -->
                     <button
                         mat-icon-button
                         (click)="changeMode('modify')"
-                        [matTooltip]="'Enter edit mode'">
+                        [matTooltip]="'Enter edit mode'"
+                    >
                         <mat-icon
-                            class="icon-size-5 text-current"
-                            [svgIcon]="'heroicons_solid:pencil-square'"></mat-icon>
+                            class="text-current icon-size-5"
+                            [svgIcon]="'heroicons_solid:pencil-square'"
+                        ></mat-icon>
                     </button>
                     <!-- Enter 'add' mode -->
                     <button
                         mat-icon-button
                         (click)="newShortcut()"
-                        [matTooltip]="'Add shortcut'">
+                        [matTooltip]="'Add shortcut'"
+                    >
                         <mat-icon
-                            class="icon-size-5 text-current"
-                            [svgIcon]="'heroicons_solid:plus-circle'"></mat-icon>
+                            class="text-current icon-size-5"
+                            [svgIcon]="'heroicons_solid:plus-circle'"
+                        ></mat-icon>
                     </button>
                 </ng-container>
 
@@ -60,10 +67,12 @@
                     <button
                         mat-icon-button
                         (click)="changeMode('view')"
-                        [matTooltip]="'Exit edit mode'">
+                        [matTooltip]="'Exit edit mode'"
+                    >
                         <mat-icon
-                            class="icon-size-5 text-current"
-                            [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
+                            class="text-current icon-size-5"
+                            [svgIcon]="'heroicons_solid:check-circle'"
+                        ></mat-icon>
                     </button>
                 </ng-container>
 
@@ -73,10 +82,12 @@
                     <button
                         mat-icon-button
                         (click)="changeMode('view')"
-                        [matTooltip]="'Cancel'">
+                        [matTooltip]="'Cancel'"
+                    >
                         <mat-icon
-                            class="icon-size-5 text-current"
-                            [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
+                            class="text-current icon-size-5"
+                            [svgIcon]="'heroicons_solid:x-circle'"
+                        ></mat-icon>
                     </button>
                 </ng-container>
 
@@ -86,60 +97,87 @@
                     <button
                         mat-icon-button
                         (click)="changeMode('modify')"
-                        [matTooltip]="'Cancel'">
+                        [matTooltip]="'Cancel'"
+                    >
                         <mat-icon
-                            class="icon-size-5 text-current"
-                            [svgIcon]="'heroicons_solid:x-circle'"></mat-icon>
+                            class="text-current icon-size-5"
+                            [svgIcon]="'heroicons_solid:x-circle'"
+                        ></mat-icon>
                     </button>
                 </ng-container>
             </div>
         </div>
-        <div class="relative flex flex-col flex-auto sm:max-h-120 -mb-px overflow-y-auto bg-card">
-
+        <div
+            class="bg-card relative -mb-px flex flex-auto flex-col overflow-y-auto sm:max-h-120"
+        >
             <!-- View mode -->
             <ng-container *ngIf="mode === 'view' || mode === 'modify'">
-
                 <!-- Shortcuts -->
-                <div class="grid grid-cols-2 grid-flow-row">
+                <div class="grid grid-flow-row grid-cols-2">
                     <!-- Shortcut -->
-                    <ng-container *ngFor="let shortcut of shortcuts; trackBy: trackByFn">
-                        <div class="relative group flex flex-col overflow-hidden bg-card border-r border-b even:border-r-0 hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5">
+                    <ng-container
+                        *ngFor="let shortcut of shortcuts; trackBy: trackByFn"
+                    >
+                        <div
+                            class="group bg-card relative flex flex-col overflow-hidden border-b border-r even:border-r-0 hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
+                        >
                             <ng-container *ngIf="mode === 'modify'">
                                 <div
                                     class="absolute inset-0 z-99 cursor-pointer"
-                                    (click)="editShortcut(shortcut)">
-                                </div>
+                                    (click)="editShortcut(shortcut)"
+                                ></div>
                             </ng-container>
                             <!-- Normal links -->
                             <a
-                                class="flex flex-col items-center justify-center w-full h-full py-6 no-underline"
+                                class="flex h-full w-full flex-col items-center justify-center py-6 no-underline"
                                 *ngIf="!shortcut.useRouter"
-                                [ngClass]="{'pointer-events-none': mode === 'modify'}"
-                                [href]="shortcut.link">
-                                <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+                                [ngClass]="{
+                                    'pointer-events-none': mode === 'modify'
+                                }"
+                                [href]="shortcut.link"
+                            >
+                                <ng-container
+                                    *ngTemplateOutlet="linkContent"
+                                ></ng-container>
                             </a>
                             <!-- Router links -->
                             <a
-                                class="flex flex-col items-center justify-center w-full h-full py-6 no-underline"
+                                class="flex h-full w-full flex-col items-center justify-center py-6 no-underline"
                                 *ngIf="shortcut.useRouter"
-                                [ngClass]="{'pointer-events-none': mode === 'modify'}"
-                                [routerLink]="shortcut.link">
-                                <ng-container *ngTemplateOutlet="linkContent"></ng-container>
+                                [ngClass]="{
+                                    'pointer-events-none': mode === 'modify'
+                                }"
+                                [routerLink]="shortcut.link"
+                            >
+                                <ng-container
+                                    *ngTemplateOutlet="linkContent"
+                                ></ng-container>
                             </a>
                             <!-- Link content template -->
                             <ng-template #linkContent>
-                                <div class="relative flex shrink-0 items-center justify-center w-12 h-12 mb-3 rounded-full bg-gray-100 dark:bg-gray-700">
+                                <div
+                                    class="relative mb-3 flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-700"
+                                >
                                     <mat-icon
-                                        class="absolute opacity-0 group-hover:opacity-100 z-20 icon-size-5"
+                                        class="absolute z-20 opacity-0 icon-size-5 group-hover:opacity-100"
                                         *ngIf="mode === 'modify'"
-                                        [svgIcon]="'heroicons_solid:pencil'"></mat-icon>
+                                        [svgIcon]="'heroicons_solid:pencil'"
+                                    ></mat-icon>
                                     <mat-icon
                                         class="z-10"
-                                        [ngClass]="{'group-hover:opacity-0': mode === 'modify'}"
-                                        [svgIcon]="shortcut.icon"></mat-icon>
+                                        [ngClass]="{
+                                            'group-hover:opacity-0':
+                                                mode === 'modify'
+                                        }"
+                                        [svgIcon]="shortcut.icon"
+                                    ></mat-icon>
+                                </div>
+                                <div class="text-center font-medium">
+                                    {{ shortcut.label }}
+                                </div>
+                                <div class="text-secondary text-center text-md">
+                                    {{ shortcut.description }}
                                 </div>
-                                <div class="font-medium text-center">{{shortcut.label}}</div>
-                                <div class="text-md text-center text-secondary">{{shortcut.description}}</div>
                             </ng-template>
                         </div>
                     </ng-container>
@@ -147,63 +185,63 @@
 
                 <!-- No shortcuts -->
                 <ng-container *ngIf="!shortcuts || !shortcuts.length">
-                    <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                        <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
+                    <div
+                        class="flex flex-auto flex-col items-center justify-center px-8 py-12 sm:justify-start"
+                    >
+                        <div
+                            class="flex h-14 w-14 flex-0 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-600"
+                        >
                             <mat-icon
                                 class="text-primary-700 dark:text-primary-50"
-                                [svgIcon]="'heroicons_outline:bookmark'"></mat-icon>
+                                [svgIcon]="'heroicons_outline:bookmark'"
+                            ></mat-icon>
+                        </div>
+                        <div class="mt-5 text-2xl font-semibold tracking-tight">
+                            No shortcuts
+                        </div>
+                        <div
+                            class="text-secondary mt-1 w-full max-w-60 text-center text-md"
+                        >
+                            When you have shortcuts, they will appear here.
                         </div>
-                        <div class="mt-5 text-2xl font-semibold tracking-tight">No shortcuts</div>
-                        <div class="w-full max-w-60 mt-1 text-md text-center text-secondary">When you have shortcuts, they will appear here.</div>
                     </div>
                 </ng-container>
             </ng-container>
 
             <!-- Add/Edit mode -->
             <ng-container *ngIf="mode === 'add' || mode === 'edit'">
-                <form
-                    class="p-6"
-                    [formGroup]="shortcutForm">
+                <form class="p-6" [formGroup]="shortcutForm">
                     <mat-form-field class="w-full">
                         <mat-label>Label</mat-label>
-                        <input
-                            matInput
-                            [formControlName]="'label'"
-                            required>
+                        <input matInput [formControlName]="'label'" required />
                     </mat-form-field>
                     <mat-form-field class="w-full">
                         <mat-label>Description</mat-label>
-                        <input
-                            matInput
-                            [formControlName]="'description'">
+                        <input matInput [formControlName]="'description'" />
                     </mat-form-field>
                     <mat-form-field class="w-full">
                         <mat-label>Icon</mat-label>
-                        <input
-                            matInput
-                            [formControlName]="'icon'"
-                            required>
+                        <input matInput [formControlName]="'icon'" required />
                     </mat-form-field>
                     <mat-form-field class="w-full">
                         <mat-label>Link</mat-label>
-                        <input
-                            matInput
-                            [formControlName]="'link'"
-                            required>
+                        <input matInput [formControlName]="'link'" required />
                     </mat-form-field>
                     <mat-slide-toggle
                         [color]="'primary'"
-                        [formControlName]="'useRouter'">
+                        [formControlName]="'useRouter'"
+                    >
                         Use router for the link
                     </mat-slide-toggle>
                     <!-- Actions -->
-                    <div class="flex items-center justify-end mt-4">
+                    <div class="mt-4 flex items-center justify-end">
                         <button
                             class="mr-2"
                             *ngIf="mode === 'edit'"
                             mat-flat-button
                             type="button"
-                            (click)="delete()">
+                            (click)="delete()"
+                        >
                             Delete
                         </button>
                         <button
@@ -211,9 +249,14 @@
                             [color]="'primary'"
                             [disabled]="!shortcutForm.valid"
                             type="button"
-                            (click)="save()">
-                            <ng-container *ngIf="mode === 'add'">Add</ng-container>
-                            <ng-container *ngIf="mode === 'edit'">Update</ng-container>
+                            (click)="save()"
+                        >
+                            <ng-container *ngIf="mode === 'add'"
+                                >Add</ng-container
+                            >
+                            <ng-container *ngIf="mode === 'edit'"
+                                >Update</ng-container
+                            >
                         </button>
                     </div>
                 </form>

src/app/layout/common/shortcuts/shortcuts.component.ts

@@ -1,8 +1,24 @@
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
-import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    ViewChild,
+    ViewContainerRef,
+    ViewEncapsulation,
+} from '@angular/core';
+import {
+    FormsModule,
+    ReactiveFormsModule,
+    UntypedFormBuilder,
+    UntypedFormGroup,
+    Validators,
+} from '@angular/forms';
 import { MatButton, MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -15,16 +31,29 @@ import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'shortcuts',
-    templateUrl    : './shortcuts.component.html',
-    encapsulation  : ViewEncapsulation.None,
+    selector: 'shortcuts',
+    templateUrl: './shortcuts.component.html',
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'shortcuts',
-    standalone     : true,
-    imports        : [MatButtonModule, MatIconModule, NgIf, MatTooltipModule, NgFor, NgClass, NgTemplateOutlet, RouterLink, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSlideToggleModule],
+    exportAs: 'shortcuts',
+    standalone: true,
+    imports: [
+        MatButtonModule,
+        MatIconModule,
+        NgIf,
+        MatTooltipModule,
+        NgFor,
+        NgClass,
+        NgTemplateOutlet,
+        RouterLink,
+        FormsModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSlideToggleModule,
+    ],
 })
-export class ShortcutsComponent implements OnInit, OnDestroy
-{
+export class ShortcutsComponent implements OnInit, OnDestroy {
     @ViewChild('shortcutsOrigin') private _shortcutsOrigin: MatButton;
     @ViewChild('shortcutsPanel') private _shortcutsPanel: TemplateRef<any>;
 
@@ -42,10 +71,8 @@ export class ShortcutsComponent implements OnInit, OnDestroy
         private _formBuilder: UntypedFormBuilder,
         private _shortcutsService: ShortcutsService,
         private _overlay: Overlay,
-        private _viewContainerRef: ViewContainerRef,
-    )
-    {
-    }
+        private _viewContainerRef: ViewContainerRef
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -54,23 +81,21 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Initialize the form
         this.shortcutForm = this._formBuilder.group({
-            id         : [null],
-            label      : ['', Validators.required],
+            id: [null],
+            label: ['', Validators.required],
             description: [''],
-            icon       : ['', Validators.required],
-            link       : ['', Validators.required],
-            useRouter  : ['', Validators.required],
+            icon: ['', Validators.required],
+            link: ['', Validators.required],
+            useRouter: ['', Validators.required],
         });
 
         // Get the shortcuts
         this._shortcutsService.shortcuts$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((shortcuts: Shortcut[]) =>
-            {
+            .subscribe((shortcuts: Shortcut[]) => {
                 // Load the shortcuts
                 this.shortcuts = shortcuts;
 
@@ -82,15 +107,13 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
 
         // Dispose the overlay
-        if ( this._overlayRef )
-        {
+        if (this._overlayRef) {
             this._overlayRef.dispose();
         }
     }
@@ -102,11 +125,9 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     /**
      * Open the shortcuts panel
      */
-    openPanel(): void
-    {
+    openPanel(): void {
         // Return if the shortcuts panel or its origin is not defined
-        if ( !this._shortcutsPanel || !this._shortcutsOrigin )
-        {
+        if (!this._shortcutsPanel || !this._shortcutsOrigin) {
             return;
         }
 
@@ -114,28 +135,27 @@ export class ShortcutsComponent implements OnInit, OnDestroy
         this.mode = 'view';
 
         // Create the overlay if it doesn't exist
-        if ( !this._overlayRef )
-        {
+        if (!this._overlayRef) {
             this._createOverlay();
         }
 
         // Attach the portal to the overlay
-        this._overlayRef.attach(new TemplatePortal(this._shortcutsPanel, this._viewContainerRef));
+        this._overlayRef.attach(
+            new TemplatePortal(this._shortcutsPanel, this._viewContainerRef)
+        );
     }
 
     /**
      * Close the shortcuts panel
      */
-    closePanel(): void
-    {
+    closePanel(): void {
         this._overlayRef.detach();
     }
 
     /**
      * Change the mode
      */
-    changeMode(mode: 'view' | 'modify' | 'add' | 'edit'): void
-    {
+    changeMode(mode: 'view' | 'modify' | 'add' | 'edit'): void {
         // Change the mode
         this.mode = mode;
     }
@@ -143,8 +163,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     /**
      * Prepare for a new shortcut
      */
-    newShortcut(): void
-    {
+    newShortcut(): void {
         // Reset the form
         this.shortcutForm.reset();
 
@@ -155,8 +174,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     /**
      * Edit a shortcut
      */
-    editShortcut(shortcut: Shortcut): void
-    {
+    editShortcut(shortcut: Shortcut): void {
         // Reset the form with the shortcut
         this.shortcutForm.reset(shortcut);
 
@@ -167,19 +185,16 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     /**
      * Save shortcut
      */
-    save(): void
-    {
+    save(): void {
         // Get the data from the form
         const shortcut = this.shortcutForm.value;
 
         // If there is an id, update it...
-        if ( shortcut.id )
-        {
+        if (shortcut.id) {
             this._shortcutsService.update(shortcut.id, shortcut).subscribe();
         }
         // Otherwise, create a new shortcut...
-        else
-        {
+        else {
             this._shortcutsService.create(shortcut).subscribe();
         }
 
@@ -190,8 +205,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     /**
      * Delete shortcut
      */
-    delete(): void
-    {
+    delete(): void {
         // Get the data from the form
         const shortcut = this.shortcutForm.value;
 
@@ -208,8 +222,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
      * @param index
      * @param item
      */
-    trackByFn(index: number, item: any): any
-    {
+    trackByFn(index: number, item: any): any {
         return item.id || index;
     }
 
@@ -220,39 +233,41 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     /**
      * Create the overlay
      */
-    private _createOverlay(): void
-    {
+    private _createOverlay(): void {
         // Create the overlay
         this._overlayRef = this._overlay.create({
-            hasBackdrop     : true,
-            backdropClass   : 'fuse-backdrop-on-mobile',
-            scrollStrategy  : this._overlay.scrollStrategies.block(),
-            positionStrategy: this._overlay.position()
-                .flexibleConnectedTo(this._shortcutsOrigin._elementRef.nativeElement)
+            hasBackdrop: true,
+            backdropClass: 'fuse-backdrop-on-mobile',
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+            positionStrategy: this._overlay
+                .position()
+                .flexibleConnectedTo(
+                    this._shortcutsOrigin._elementRef.nativeElement
+                )
                 .withLockedPosition(true)
                 .withPush(true)
                 .withPositions([
                     {
-                        originX : 'start',
-                        originY : 'bottom',
+                        originX: 'start',
+                        originY: 'bottom',
                         overlayX: 'start',
                         overlayY: 'top',
                     },
                     {
-                        originX : 'start',
-                        originY : 'top',
+                        originX: 'start',
+                        originY: 'top',
                         overlayX: 'start',
                         overlayY: 'bottom',
                     },
                     {
-                        originX : 'end',
-                        originY : 'bottom',
+                        originX: 'end',
+                        originY: 'bottom',
                         overlayX: 'end',
                         overlayY: 'top',
                     },
                     {
-                        originX : 'end',
-                        originY : 'top',
+                        originX: 'end',
+                        originY: 'top',
                         overlayX: 'end',
                         overlayY: 'bottom',
                     },
@@ -260,8 +275,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
         });
 
         // Detach the overlay from the portal on backdrop click
-        this._overlayRef.backdropClick().subscribe(() =>
-        {
+        this._overlayRef.backdropClick().subscribe(() => {
             this._overlayRef.detach();
         });
     }

src/app/layout/common/shortcuts/shortcuts.service.ts

@@ -3,17 +3,16 @@ import { Injectable } from '@angular/core';
 import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
 import { map, Observable, ReplaySubject, switchMap, take, tap } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class ShortcutsService
-{
-    private _shortcuts: ReplaySubject<Shortcut[]> = new ReplaySubject<Shortcut[]>(1);
+@Injectable({ providedIn: 'root' })
+export class ShortcutsService {
+    private _shortcuts: ReplaySubject<Shortcut[]> = new ReplaySubject<
+        Shortcut[]
+    >(1);
 
     /**
      * Constructor
      */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
+    constructor(private _httpClient: HttpClient) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -22,8 +21,7 @@ export class ShortcutsService
     /**
      * Getter for shortcuts
      */
-    get shortcuts$(): Observable<Shortcut[]>
-    {
+    get shortcuts$(): Observable<Shortcut[]> {
         return this._shortcuts.asObservable();
     }
 
@@ -34,13 +32,11 @@ export class ShortcutsService
     /**
      * Get all messages
      */
-    getAll(): Observable<Shortcut[]>
-    {
+    getAll(): Observable<Shortcut[]> {
         return this._httpClient.get<Shortcut[]>('api/common/shortcuts').pipe(
-            tap((shortcuts) =>
-            {
+            tap((shortcuts) => {
                 this._shortcuts.next(shortcuts);
-            }),
+            })
         );
     }
 
@@ -49,20 +45,22 @@ export class ShortcutsService
      *
      * @param shortcut
      */
-    create(shortcut: Shortcut): Observable<Shortcut>
-    {
+    create(shortcut: Shortcut): Observable<Shortcut> {
         return this.shortcuts$.pipe(
             take(1),
-            switchMap(shortcuts => this._httpClient.post<Shortcut>('api/common/shortcuts', {shortcut}).pipe(
-                map((newShortcut) =>
-                {
-                    // Update the shortcuts with the new shortcut
-                    this._shortcuts.next([...shortcuts, newShortcut]);
+            switchMap((shortcuts) =>
+                this._httpClient
+                    .post<Shortcut>('api/common/shortcuts', { shortcut })
+                    .pipe(
+                        map((newShortcut) => {
+                            // Update the shortcuts with the new shortcut
+                            this._shortcuts.next([...shortcuts, newShortcut]);
 
-                    // Return the new shortcut from observable
-                    return newShortcut;
-                }),
-            )),
+                            // Return the new shortcut from observable
+                            return newShortcut;
+                        })
+                    )
+            )
         );
     }
 
@@ -72,29 +70,33 @@ export class ShortcutsService
      * @param id
      * @param shortcut
      */
-    update(id: string, shortcut: Shortcut): Observable<Shortcut>
-    {
+    update(id: string, shortcut: Shortcut): Observable<Shortcut> {
         return this.shortcuts$.pipe(
             take(1),
-            switchMap(shortcuts => this._httpClient.patch<Shortcut>('api/common/shortcuts', {
-                id,
-                shortcut,
-            }).pipe(
-                map((updatedShortcut: Shortcut) =>
-                {
-                    // Find the index of the updated shortcut
-                    const index = shortcuts.findIndex(item => item.id === id);
+            switchMap((shortcuts) =>
+                this._httpClient
+                    .patch<Shortcut>('api/common/shortcuts', {
+                        id,
+                        shortcut,
+                    })
+                    .pipe(
+                        map((updatedShortcut: Shortcut) => {
+                            // Find the index of the updated shortcut
+                            const index = shortcuts.findIndex(
+                                (item) => item.id === id
+                            );
 
-                    // Update the shortcut
-                    shortcuts[index] = updatedShortcut;
+                            // Update the shortcut
+                            shortcuts[index] = updatedShortcut;
 
-                    // Update the shortcuts
-                    this._shortcuts.next(shortcuts);
+                            // Update the shortcuts
+                            this._shortcuts.next(shortcuts);
 
-                    // Return the updated shortcut
-                    return updatedShortcut;
-                }),
-            )),
+                            // Return the updated shortcut
+                            return updatedShortcut;
+                        })
+                    )
+            )
         );
     }
 
@@ -103,26 +105,30 @@ export class ShortcutsService
      *
      * @param id
      */
-    delete(id: string): Observable<boolean>
-    {
+    delete(id: string): Observable<boolean> {
         return this.shortcuts$.pipe(
             take(1),
-            switchMap(shortcuts => this._httpClient.delete<boolean>('api/common/shortcuts', {params: {id}}).pipe(
-                map((isDeleted: boolean) =>
-                {
-                    // Find the index of the deleted shortcut
-                    const index = shortcuts.findIndex(item => item.id === id);
+            switchMap((shortcuts) =>
+                this._httpClient
+                    .delete<boolean>('api/common/shortcuts', { params: { id } })
+                    .pipe(
+                        map((isDeleted: boolean) => {
+                            // Find the index of the deleted shortcut
+                            const index = shortcuts.findIndex(
+                                (item) => item.id === id
+                            );
 
-                    // Delete the shortcut
-                    shortcuts.splice(index, 1);
+                            // Delete the shortcut
+                            shortcuts.splice(index, 1);
 
-                    // Update the shortcuts
-                    this._shortcuts.next(shortcuts);
+                            // Update the shortcuts
+                            this._shortcuts.next(shortcuts);
 
-                    // Return the deleted status
-                    return isDeleted;
-                }),
-            )),
+                            // Return the deleted status
+                            return isDeleted;
+                        })
+                    )
+            )
         );
     }
 }

src/app/layout/common/shortcuts/shortcuts.types.ts

@@ -1,5 +1,4 @@
-export interface Shortcut
-{
+export interface Shortcut {
     id: string;
     label: string;
     description?: string;

src/app/layout/common/user/user.component.html

@@ -1,33 +1,33 @@
 <!-- Button -->
-<button
-    mat-icon-button
-    [matMenuTriggerFor]="userActions">
+<button mat-icon-button [matMenuTriggerFor]="userActions">
     <span class="relative">
         <img
-            class="w-7 h-7 rounded-full"
+            class="h-7 w-7 rounded-full"
             *ngIf="showAvatar && user.avatar"
-            [src]="user.avatar">
+            [src]="user.avatar"
+        />
         <mat-icon
             *ngIf="!showAvatar || !user.avatar"
-            [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
+            [svgIcon]="'heroicons_outline:user-circle'"
+        ></mat-icon>
         <span
-            class="absolute right-0 bottom-0 w-2 h-2 rounded-full"
-            [ngClass]="{'mr-px mb-px': !showAvatar || !user.avatar,
-                          'bg-green-500': user.status === 'online',
-                          'bg-amber-500': user.status === 'away',
-                          'bg-red-500': user.status === 'busy',
-                          'bg-gray-400': user.status === 'not-visible'}"
+            class="absolute bottom-0 right-0 h-2 w-2 rounded-full"
+            [ngClass]="{
+                'mb-px mr-px': !showAvatar || !user.avatar,
+                'bg-green-500': user.status === 'online',
+                'bg-amber-500': user.status === 'away',
+                'bg-red-500': user.status === 'busy',
+                'bg-gray-400': user.status === 'not-visible'
+            }"
         ></span>
     </span>
 </button>
 
-<mat-menu
-    [xPosition]="'before'"
-    #userActions="matMenu">
+<mat-menu [xPosition]="'before'" #userActions="matMenu">
     <button mat-menu-item>
         <span class="flex flex-col leading-none">
             <span>Signed in as</span>
-            <span class="mt-1.5 text-md font-medium">{{user.email}}</span>
+            <span class="mt-1.5 text-md font-medium">{{ user.email }}</span>
         </span>
     </button>
     <mat-divider class="my-2"></mat-divider>
@@ -39,46 +39,36 @@
         <mat-icon [svgIcon]="'heroicons_outline:cog-8-tooth'"></mat-icon>
         <span>Settings</span>
     </button>
-    <button
-        mat-menu-item
-        [matMenuTriggerFor]="userStatus">
-        <mat-icon [svgIcon]="'heroicons_outline:ellipsis-horizontal-circle'"></mat-icon>
+    <button mat-menu-item [matMenuTriggerFor]="userStatus">
+        <mat-icon
+            [svgIcon]="'heroicons_outline:ellipsis-horizontal-circle'"
+        ></mat-icon>
         <span>Status</span>
     </button>
     <mat-divider class="my-2"></mat-divider>
-    <button
-        mat-menu-item
-        (click)="signOut()">
-        <mat-icon [svgIcon]="'heroicons_outline:arrow-right-on-rectangle'"></mat-icon>
+    <button mat-menu-item (click)="signOut()">
+        <mat-icon
+            [svgIcon]="'heroicons_outline:arrow-right-on-rectangle'"
+        ></mat-icon>
         <span>Sign out</span>
     </button>
 </mat-menu>
 
-<mat-menu
-    class="user-status-menu"
-    #userStatus="matMenu">
-    <button
-        mat-menu-item
-        (click)="updateUserStatus('online')">
-        <span class="w-4 h-4 mr-3 rounded-full bg-green-500"></span>
+<mat-menu class="user-status-menu" #userStatus="matMenu">
+    <button mat-menu-item (click)="updateUserStatus('online')">
+        <span class="mr-3 h-4 w-4 rounded-full bg-green-500"></span>
         <span>Online</span>
     </button>
-    <button
-        mat-menu-item
-        (click)="updateUserStatus('away')">
-        <span class="w-4 h-4 mr-3 rounded-full bg-amber-500"></span>
+    <button mat-menu-item (click)="updateUserStatus('away')">
+        <span class="mr-3 h-4 w-4 rounded-full bg-amber-500"></span>
         <span>Away</span>
     </button>
-    <button
-        mat-menu-item
-        (click)="updateUserStatus('busy')">
-        <span class="w-4 h-4 mr-3 rounded-full bg-red-500"></span>
+    <button mat-menu-item (click)="updateUserStatus('busy')">
+        <span class="mr-3 h-4 w-4 rounded-full bg-red-500"></span>
         <span>Busy</span>
     </button>
-    <button
-        mat-menu-item
-        (click)="updateUserStatus('not-visible')">
-        <span class="w-4 h-4 mr-3 rounded-full bg-gray-400"></span>
+    <button mat-menu-item (click)="updateUserStatus('not-visible')">
+        <span class="mr-3 h-4 w-4 rounded-full bg-gray-400"></span>
         <span>Invisible</span>
     </button>
 </mat-menu>

src/app/layout/common/user/user.component.ts

@@ -1,6 +1,14 @@
 import { BooleanInput } from '@angular/cdk/coercion';
 import { NgClass, NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    Input,
+    OnDestroy,
+    OnInit,
+    ViewEncapsulation,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
@@ -11,16 +19,22 @@ import { User } from 'app/core/user/user.types';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector       : 'user',
-    templateUrl    : './user.component.html',
-    encapsulation  : ViewEncapsulation.None,
+    selector: 'user',
+    templateUrl: './user.component.html',
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'user',
-    standalone     : true,
-    imports        : [MatButtonModule, MatMenuModule, NgIf, MatIconModule, NgClass, MatDividerModule],
+    exportAs: 'user',
+    standalone: true,
+    imports: [
+        MatButtonModule,
+        MatMenuModule,
+        NgIf,
+        MatIconModule,
+        NgClass,
+        MatDividerModule,
+    ],
 })
-export class UserComponent implements OnInit, OnDestroy
-{
+export class UserComponent implements OnInit, OnDestroy {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_showAvatar: BooleanInput;
     /* eslint-enable @typescript-eslint/naming-convention */
@@ -36,10 +50,8 @@ export class UserComponent implements OnInit, OnDestroy
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _router: Router,
-        private _userService: UserService,
-    )
-    {
-    }
+        private _userService: UserService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -48,13 +60,11 @@ export class UserComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to user changes
         this._userService.user$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((user: User) =>
-            {
+            .subscribe((user: User) => {
                 this.user = user;
 
                 // Mark for check
@@ -65,8 +75,7 @@ export class UserComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -81,26 +90,25 @@ export class UserComponent implements OnInit, OnDestroy
      *
      * @param status
      */
-    updateUserStatus(status: string): void
-    {
+    updateUserStatus(status: string): void {
         // Return if user is not available
-        if ( !this.user )
-        {
+        if (!this.user) {
             return;
         }
 
         // Update the user
-        this._userService.update({
-            ...this.user,
-            status,
-        }).subscribe();
+        this._userService
+            .update({
+                ...this.user,
+                status,
+            })
+            .subscribe();
     }
 
     /**
      * Sign out
      */
-    signOut(): void
-    {
+    signOut(): void {
         this._router.navigate(['/sign-out']);
     }
 }

src/app/layout/layout.component.scss

@@ -15,7 +15,6 @@ layout {
 
     /* Base styles for components that load as a route */
     router-outlet {
-
         + * {
             position: relative;
             display: flex;

src/app/layout/layout.component.ts

@@ -1,11 +1,18 @@
 import { DOCUMENT, NgIf } from '@angular/common';
-import { Component, Inject, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
+import {
+    Component,
+    Inject,
+    OnDestroy,
+    OnInit,
+    Renderer2,
+    ViewEncapsulation,
+} from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { FuseConfig, FuseConfigService } from '@fuse/services/config';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FusePlatformService } from '@fuse/services/platform';
 import { FUSE_VERSION } from '@fuse/version';
-import { combineLatest, filter, map, Subject, takeUntil } from 'rxjs';
+import { Subject, combineLatest, filter, map, takeUntil } from 'rxjs';
 import { SettingsComponent } from './common/settings/settings.component';
 import { EmptyLayoutComponent } from './layouts/empty/empty.component';
 import { CenteredLayoutComponent } from './layouts/horizontal/centered/centered.component';
@@ -20,15 +27,28 @@ import { FuturisticLayoutComponent } from './layouts/vertical/futuristic/futuris
 import { ThinLayoutComponent } from './layouts/vertical/thin/thin.component';
 
 @Component({
-    selector     : 'layout',
-    templateUrl  : './layout.component.html',
-    styleUrls    : ['./layout.component.scss'],
+    selector: 'layout',
+    templateUrl: './layout.component.html',
+    styleUrls: ['./layout.component.scss'],
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [NgIf, EmptyLayoutComponent, CenteredLayoutComponent, EnterpriseLayoutComponent, MaterialLayoutComponent, ModernLayoutComponent, ClassicLayoutComponent, ClassyLayoutComponent, CompactLayoutComponent, DenseLayoutComponent, FuturisticLayoutComponent, ThinLayoutComponent, SettingsComponent],
+    standalone: true,
+    imports: [
+        NgIf,
+        EmptyLayoutComponent,
+        CenteredLayoutComponent,
+        EnterpriseLayoutComponent,
+        MaterialLayoutComponent,
+        ModernLayoutComponent,
+        ClassicLayoutComponent,
+        ClassyLayoutComponent,
+        CompactLayoutComponent,
+        DenseLayoutComponent,
+        FuturisticLayoutComponent,
+        ThinLayoutComponent,
+        SettingsComponent,
+    ],
 })
-export class LayoutComponent implements OnInit, OnDestroy
-{
+export class LayoutComponent implements OnInit, OnDestroy {
     config: FuseConfig;
     layout: string;
     scheme: 'dark' | 'light';
@@ -45,10 +65,8 @@ export class LayoutComponent implements OnInit, OnDestroy
         private _router: Router,
         private _fuseConfigService: FuseConfigService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fusePlatformService: FusePlatformService,
-    )
-    {
-    }
+        private _fusePlatformService: FusePlatformService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -57,46 +75,50 @@ export class LayoutComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Set the theme and scheme based on the configuration
         combineLatest([
             this._fuseConfigService.config$,
-            this._fuseMediaWatcherService.onMediaQueryChange$(['(prefers-color-scheme: dark)', '(prefers-color-scheme: light)']),
-        ]).pipe(
-            takeUntil(this._unsubscribeAll),
-            map(([config, mql]) =>
-            {
-                const options = {
-                    scheme: config.scheme,
-                    theme : config.theme,
-                };
+            this._fuseMediaWatcherService.onMediaQueryChange$([
+                '(prefers-color-scheme: dark)',
+                '(prefers-color-scheme: light)',
+            ]),
+        ])
+            .pipe(
+                takeUntil(this._unsubscribeAll),
+                map(([config, mql]) => {
+                    const options = {
+                        scheme: config.scheme,
+                        theme: config.theme,
+                    };
 
-                // If the scheme is set to 'auto'...
-                if ( config.scheme === 'auto' )
-                {
-                    // Decide the scheme using the media query
-                    options.scheme = mql.breakpoints['(prefers-color-scheme: dark)'] ? 'dark' : 'light';
-                }
+                    // If the scheme is set to 'auto'...
+                    if (config.scheme === 'auto') {
+                        // Decide the scheme using the media query
+                        options.scheme = mql.breakpoints[
+                            '(prefers-color-scheme: dark)'
+                        ]
+                            ? 'dark'
+                            : 'light';
+                    }
 
-                return options;
-            }),
-        ).subscribe((options) =>
-        {
-            // Store the options
-            this.scheme = options.scheme;
-            this.theme = options.theme;
+                    return options;
+                })
+            )
+            .subscribe((options) => {
+                // Store the options
+                this.scheme = options.scheme;
+                this.theme = options.theme;
 
-            // Update the scheme and theme
-            this._updateScheme();
-            this._updateTheme();
-        });
+                // Update the scheme and theme
+                this._updateScheme();
+                this._updateTheme();
+            });
 
         // Subscribe to config changes
         this._fuseConfigService.config$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((config: FuseConfig) =>
-            {
+            .subscribe((config: FuseConfig) => {
                 // Store the config
                 this.config = config;
 
@@ -105,27 +127,34 @@ export class LayoutComponent implements OnInit, OnDestroy
             });
 
         // Subscribe to NavigationEnd event
-        this._router.events.pipe(
-            filter(event => event instanceof NavigationEnd),
-            takeUntil(this._unsubscribeAll),
-        ).subscribe(() =>
-        {
-            // Update the layout
-            this._updateLayout();
-        });
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                // Update the layout
+                this._updateLayout();
+            });
 
         // Set the app version
-        this._renderer2.setAttribute(this._document.querySelector('[ng-version]'), 'fuse-version', FUSE_VERSION);
+        this._renderer2.setAttribute(
+            this._document.querySelector('[ng-version]'),
+            'fuse-version',
+            FUSE_VERSION
+        );
 
         // Set the OS name
-        this._renderer2.addClass(this._document.body, this._fusePlatformService.osName);
+        this._renderer2.addClass(
+            this._document.body,
+            this._fusePlatformService.osName
+        );
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -138,12 +167,10 @@ export class LayoutComponent implements OnInit, OnDestroy
     /**
      * Update the selected layout
      */
-    private _updateLayout(): void
-    {
+    private _updateLayout(): void {
         // Get the current activated route
         let route = this._activatedRoute;
-        while ( route.firstChild )
-        {
+        while (route.firstChild) {
             route = route.firstChild;
         }
 
@@ -153,11 +180,9 @@ export class LayoutComponent implements OnInit, OnDestroy
         // 2. Get the query parameter from the current route and
         // set the layout and save the layout to the config
         const layoutFromQueryParam = route.snapshot.queryParamMap.get('layout');
-        if ( layoutFromQueryParam )
-        {
+        if (layoutFromQueryParam) {
             this.layout = layoutFromQueryParam;
-            if ( this.config )
-            {
+            if (this.config) {
                 this.config.layout = layoutFromQueryParam;
             }
         }
@@ -179,11 +204,13 @@ export class LayoutComponent implements OnInit, OnDestroy
         // Also, this will allow overriding the layout in any time so we
         // can have different layouts for different routes.
         const paths = route.pathFromRoot;
-        paths.forEach((path) =>
-        {
+        paths.forEach((path) => {
             // Check if there is a 'layout' data
-            if ( path.routeConfig && path.routeConfig.data && path.routeConfig.data.layout )
-            {
+            if (
+                path.routeConfig &&
+                path.routeConfig.data &&
+                path.routeConfig.data.layout
+            ) {
                 // Set the layout
                 this.layout = path.routeConfig.data.layout;
             }
@@ -195,8 +222,7 @@ export class LayoutComponent implements OnInit, OnDestroy
      *
      * @private
      */
-    private _updateScheme(): void
-    {
+    private _updateScheme(): void {
         // Remove class names for all schemes
         this._document.body.classList.remove('light', 'dark');
 
@@ -209,14 +235,14 @@ export class LayoutComponent implements OnInit, OnDestroy
      *
      * @private
      */
-    private _updateTheme(): void
-    {
+    private _updateTheme(): void {
         // Find the class name for the previously selected theme and remove it
-        this._document.body.classList.forEach((className: string) =>
-        {
-            if ( className.startsWith('theme-') )
-            {
-                this._document.body.classList.remove(className, className.split('-')[1]);
+        this._document.body.classList.forEach((className: string) => {
+            if (className.startsWith('theme-')) {
+                this._document.body.classList.remove(
+                    className,
+                    className.split('-')[1]
+                );
             }
         });
 

src/app/layout/layouts/empty/empty.component.html

@@ -2,13 +2,11 @@
 <fuse-loading-bar></fuse-loading-bar>
 
 <!-- Wrapper -->
-<div class="flex flex-col flex-auto w-full">
-
+<div class="flex w-full flex-auto flex-col">
     <!-- Content -->
-    <div class="flex flex-col flex-auto">
+    <div class="flex flex-auto flex-col">
         <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
              Otherwise, layout changes won't be registered and the view won't be updated! -->
         <router-outlet *ngIf="true"></router-outlet>
     </div>
-
 </div>

src/app/layout/layouts/empty/empty.component.ts

@@ -5,22 +5,19 @@ import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
 import { Subject } from 'rxjs';
 
 @Component({
-    selector     : 'empty-layout',
-    templateUrl  : './empty.component.html',
+    selector: 'empty-layout',
+    templateUrl: './empty.component.html',
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [FuseLoadingBarComponent, NgIf, RouterOutlet],
+    standalone: true,
+    imports: [FuseLoadingBarComponent, NgIf, RouterOutlet],
 })
-export class EmptyLayoutComponent implements OnDestroy
-{
+export class EmptyLayoutComponent implements OnDestroy {
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
      * Constructor
      */
-    constructor()
-    {
-    }
+    constructor() {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Lifecycle hooks
@@ -29,8 +26,7 @@ export class EmptyLayoutComponent implements OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();

src/app/layout/layouts/horizontal/centered/centered.component.html

@@ -1,8 +1,9 @@
 <!-- Loading bar -->
 <fuse-loading-bar></fuse-loading-bar>
 
-<div class="flex flex-auto justify-center w-full sm:p-4 md:p-8 bg-gray-200 dark:bg-card">
-
+<div
+    class="flex w-full flex-auto justify-center bg-gray-200 dark:bg-card sm:p-4 md:p-8"
+>
     <!-- Navigation -->
     <ng-container *ngIf="isScreenSmall">
         <fuse-vertical-navigation
@@ -10,62 +11,69 @@
             [mode]="'over'"
             [name]="'mainNavigation'"
             [navigation]="navigation.default"
-            [opened]="false">
+            [opened]="false"
+        >
             <!-- Navigation header hook -->
             <ng-container fuseVerticalNavigationContentHeader>
                 <!-- Logo -->
-                <div class="flex items-center h-20 pt-6 px-8">
-                    <img
-                        class="w-30"
-                        src="images/logo/logo-text-on-dark.svg">
+                <div class="flex h-20 items-center px-8 pt-6">
+                    <img class="w-30" src="images/logo/logo-text-on-dark.svg" />
                 </div>
             </ng-container>
         </fuse-vertical-navigation>
     </ng-container>
 
     <!-- Wrapper -->
-    <div class="flex flex-col items-center flex-auto min-w-0 max-w-360 sm:rounded-xl shadow-2xl dark:shadow-none overflow-hidden">
-
+    <div
+        class="flex min-w-0 max-w-360 flex-auto flex-col items-center overflow-hidden shadow-2xl dark:shadow-none sm:rounded-xl"
+    >
         <!-- Header -->
-        <div class="relative flex flex-0 items-center w-full h-16 sm:h-20 px-4 md:px-6 z-49 bg-card border-b dark:bg-default print:hidden">
+        <div
+            class="bg-card relative z-49 flex h-16 w-full flex-0 items-center border-b px-4 dark:bg-default sm:h-20 md:px-6 print:hidden"
+        >
             <ng-container *ngIf="!isScreenSmall">
                 <!-- Logo -->
-                <div class="flex items-center mx-2 lg:mr-8">
+                <div class="mx-2 flex items-center lg:mr-8">
                     <div class="hidden lg:flex">
                         <!-- Light version -->
                         <img
-                            class="dark:hidden w-24"
+                            class="w-24 dark:hidden"
                             src="images/logo/logo-text.svg"
-                            alt="Logo image">
+                            alt="Logo image"
+                        />
                         <!-- Dark version -->
                         <img
-                            class="hidden dark:flex w-24"
+                            class="hidden w-24 dark:flex"
                             src="images/logo/logo-text-on-dark.svg"
-                            alt="Logo image">
+                            alt="Logo image"
+                        />
                     </div>
                     <!-- Small version -->
                     <img
-                        class="flex lg:hidden w-8"
+                        class="flex w-8 lg:hidden"
                         src="images/logo/logo.svg"
-                        alt="Logo image">
+                        alt="Logo image"
+                    />
                 </div>
                 <!-- Horizontal navigation -->
                 <fuse-horizontal-navigation
                     class="mr-2"
                     [name]="'mainNavigation'"
-                    [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
+                    [navigation]="navigation.horizontal"
+                ></fuse-horizontal-navigation>
             </ng-container>
             <!-- Navigation toggle button -->
             <ng-container *ngIf="isScreenSmall">
                 <button
                     class="mr-2"
                     mat-icon-button
-                    (click)="toggleNavigation('mainNavigation')">
+                    (click)="toggleNavigation('mainNavigation')"
+                >
                     <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
                 </button>
             </ng-container>
             <!-- Components -->
-            <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+            <div class="ml-auto flex items-center space-x-1 pl-2 sm:space-x-2">
                 <languages></languages>
                 <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
                 <search [appearance]="'bar'"></search>
@@ -77,17 +85,19 @@
         </div>
 
         <!-- Content -->
-        <div class="flex flex-col flex-auto w-full bg-default">
+        <div class="bg-default flex w-full flex-auto flex-col">
             <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
                  Otherwise, layout changes won't be registered and the view won't be updated! -->
             <router-outlet *ngIf="true"></router-outlet>
         </div>
 
         <!-- Footer -->
-        <div class="relative flex flex-0 items-center justify-start w-full h-16 sm:h-20 px-6 sm:px-8 z-49 bg-card border-t dark:bg-default print:hidden">
-            <span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span>
+        <div
+            class="bg-card relative z-49 flex h-16 w-full flex-0 items-center justify-start border-t px-6 dark:bg-default sm:h-20 sm:px-8 print:hidden"
+        >
+            <span class="text-secondary font-medium"
+                >Fuse &copy; {{ currentYear }}</span
+            >
         </div>
-
     </div>
-
 </div>

src/app/layout/layouts/horizontal/centered/centered.component.ts

@@ -5,7 +5,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
 import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
-import { FuseHorizontalNavigationComponent, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+import {
+    FuseHorizontalNavigationComponent,
+    FuseNavigationService,
+    FuseVerticalNavigationComponent,
+} from '@fuse/components/navigation';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
@@ -18,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'centered-layout',
-    templateUrl  : './centered.component.html',
+    selector: 'centered-layout',
+    templateUrl: './centered.component.html',
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [FuseLoadingBarComponent, NgIf, FuseVerticalNavigationComponent, FuseHorizontalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, RouterOutlet],
+    standalone: true,
+    imports: [
+        FuseLoadingBarComponent,
+        NgIf,
+        FuseVerticalNavigationComponent,
+        FuseHorizontalNavigationComponent,
+        MatButtonModule,
+        MatIconModule,
+        LanguagesComponent,
+        FuseFullscreenComponent,
+        SearchComponent,
+        ShortcutsComponent,
+        MessagesComponent,
+        NotificationsComponent,
+        UserComponent,
+        RouterOutlet,
+    ],
 })
-export class CenteredLayoutComponent implements OnInit, OnDestroy
-{
+export class CenteredLayoutComponent implements OnInit, OnDestroy {
     navigation: Navigation;
     isScreenSmall: boolean;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -38,10 +56,8 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
         private _router: Router,
         private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fuseNavigationService: FuseNavigationService,
-    )
-    {
-    }
+        private _fuseNavigationService: FuseNavigationService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -50,8 +66,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
     /**
      * Getter for current year
      */
-    get currentYear(): number
-    {
+    get currentYear(): number {
         return new Date().getFullYear();
     }
 
@@ -62,21 +77,18 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to navigation data
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) =>
-            {
+            .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) =>
-            {
+            .subscribe(({ matchingAliases }) => {
                 // Check if the screen is small
                 this.isScreenSmall = !matchingAliases.includes('md');
             });
@@ -85,8 +97,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -101,13 +112,14 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
      *
      * @param name
      */
-    toggleNavigation(name: string): void
-    {
+    toggleNavigation(name: string): void {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation =
+            this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
+                name
+            );
 
-        if ( navigation )
-        {
+        if (navigation) {
             // Toggle the opened status
             navigation.toggle();
         }

src/app/layout/layouts/horizontal/enterprise/enterprise.component.html

@@ -8,47 +8,60 @@
         [mode]="'over'"
         [name]="'mainNavigation'"
         [navigation]="navigation.default"
-        [opened]="false">
+        [opened]="false"
+    >
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
             <!-- Logo -->
-            <div class="flex items-center h-20 pt-6 px-8">
+            <div class="flex h-20 items-center px-8 pt-6">
                 <img
                     class="w-24"
                     src="images/logo/logo-text-on-dark.svg"
-                    alt="Logo image">
+                    alt="Logo image"
+                />
             </div>
         </ng-container>
     </fuse-vertical-navigation>
 </ng-container>
 
 <!-- Wrapper -->
-<div class="flex flex-col flex-auto items-center w-full min-w-0 bg-gray-200 dark:bg-card">
-
+<div
+    class="flex w-full min-w-0 flex-auto flex-col items-center bg-gray-200 dark:bg-card"
+>
     <!-- Header -->
-    <div class="relative flex flex-col flex-0 justify-center w-full h-16 sm:h-20 md:h-36 overflow-hidden z-49 shadow dark:shadow-none print:hidden">
+    <div
+        class="relative z-49 flex h-16 w-full flex-0 flex-col justify-center overflow-hidden shadow dark:shadow-none sm:h-20 md:h-36 print:hidden"
+    >
         <!-- Top bar -->
-        <div class="relative dark flex flex-auto justify-center w-full px-4 md:px-8 bg-gray-800 dark:bg-gray-900">
-            <div class="flex items-center w-full max-w-360 h-16 sm:h-20">
+        <div
+            class="dark relative flex w-full flex-auto justify-center bg-gray-800 px-4 dark:bg-gray-900 md:px-8"
+        >
+            <div class="flex h-16 w-full max-w-360 items-center sm:h-20">
                 <!-- Logo -->
                 <ng-container *ngIf="!isScreenSmall">
                     <div class="flex items-center">
                         <img
                             class="w-24"
                             src="images/logo/logo-text-on-dark.svg"
-                            alt="Logo image">
+                            alt="Logo image"
+                        />
                     </div>
                 </ng-container>
                 <!-- Navigation toggle button -->
                 <ng-container *ngIf="isScreenSmall">
                     <button
                         mat-icon-button
-                        (click)="toggleNavigation('mainNavigation')">
-                        <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
+                        (click)="toggleNavigation('mainNavigation')"
+                    >
+                        <mat-icon
+                            [svgIcon]="'heroicons_outline:bars-3'"
+                        ></mat-icon>
                     </button>
                 </ng-container>
                 <!-- Components -->
-                <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
+                <div
+                    class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2"
+                >
                     <languages></languages>
                     <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
@@ -58,8 +71,13 @@
                     <button
                         class="lg:hidden"
                         mat-icon-button
-                        (click)="quickChat.toggle()">
-                        <mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon>
+                        (click)="quickChat.toggle()"
+                    >
+                        <mat-icon
+                            [svgIcon]="
+                                'heroicons_outline:chat-bubble-left-right'
+                            "
+                        ></mat-icon>
                     </button>
                     <user></user>
                 </div>
@@ -67,20 +85,25 @@
         </div>
         <!-- Bottom bar -->
         <ng-container *ngIf="!isScreenSmall">
-            <div class="flex flex-auto justify-center px-4 md:px-8 bg-card dark:bg-gray-700">
-                <div class="relative flex items-center w-full max-w-360 h-16">
+            <div
+                class="bg-card flex flex-auto justify-center px-4 dark:bg-gray-700 md:px-8"
+            >
+                <div class="relative flex h-16 w-full max-w-360 items-center">
                     <fuse-horizontal-navigation
                         class="-mx-4"
                         [name]="'mainNavigation'"
-                        [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
+                        [navigation]="navigation.horizontal"
+                    ></fuse-horizontal-navigation>
                 </div>
             </div>
         </ng-container>
     </div>
 
     <!-- Content -->
-    <div class="flex flex-auto justify-center w-full sm:p-6 md:p-8">
-        <div class="flex flex-col flex-auto w-full sm:max-w-360 sm:shadow-lg sm:rounded-lg sm:overflow-hidden bg-default">
+    <div class="flex w-full flex-auto justify-center sm:p-6 md:p-8">
+        <div
+            class="bg-default flex w-full flex-auto flex-col sm:max-w-360 sm:overflow-hidden sm:rounded-lg sm:shadow-lg"
+        >
             <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
                  Otherwise, layout changes won't be registered and the view won't be updated! -->
             <router-outlet *ngIf="true"></router-outlet>
@@ -88,12 +111,15 @@
     </div>
 
     <!-- Footer -->
-    <div class="relative flex flex-0 justify-center w-full px-6 md:px-8 z-49 border-t bg-card print:hidden">
-        <div class="flex items-center w-full max-w-360 h-14 sm:h-20">
-            <span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span>
+    <div
+        class="bg-card relative z-49 flex w-full flex-0 justify-center border-t px-6 md:px-8 print:hidden"
+    >
+        <div class="flex h-14 w-full max-w-360 items-center sm:h-20">
+            <span class="text-secondary font-medium"
+                >Fuse &copy; {{ currentYear }}</span
+            >
         </div>
     </div>
-
 </div>
 
 <!-- Quick chat -->

src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts

@@ -5,7 +5,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
 import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
-import { FuseHorizontalNavigationComponent, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+import {
+    FuseHorizontalNavigationComponent,
+    FuseNavigationService,
+    FuseVerticalNavigationComponent,
+} from '@fuse/components/navigation';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
@@ -19,14 +23,29 @@ import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'enterprise-layout',
-    templateUrl  : './enterprise.component.html',
+    selector: 'enterprise-layout',
+    templateUrl: './enterprise.component.html',
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [FuseLoadingBarComponent, NgIf, FuseVerticalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, FuseHorizontalNavigationComponent, RouterOutlet, QuickChatComponent],
+    standalone: true,
+    imports: [
+        FuseLoadingBarComponent,
+        NgIf,
+        FuseVerticalNavigationComponent,
+        MatButtonModule,
+        MatIconModule,
+        LanguagesComponent,
+        FuseFullscreenComponent,
+        SearchComponent,
+        ShortcutsComponent,
+        MessagesComponent,
+        NotificationsComponent,
+        UserComponent,
+        FuseHorizontalNavigationComponent,
+        RouterOutlet,
+        QuickChatComponent,
+    ],
 })
-export class EnterpriseLayoutComponent implements OnInit, OnDestroy
-{
+export class EnterpriseLayoutComponent implements OnInit, OnDestroy {
     isScreenSmall: boolean;
     navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -39,10 +58,8 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
         private _router: Router,
         private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fuseNavigationService: FuseNavigationService,
-    )
-    {
-    }
+        private _fuseNavigationService: FuseNavigationService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -51,8 +68,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
     /**
      * Getter for current year
      */
-    get currentYear(): number
-    {
+    get currentYear(): number {
         return new Date().getFullYear();
     }
 
@@ -63,21 +79,18 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to navigation data
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) =>
-            {
+            .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) =>
-            {
+            .subscribe(({ matchingAliases }) => {
                 // Check if the screen is small
                 this.isScreenSmall = !matchingAliases.includes('md');
             });
@@ -86,8 +99,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -102,13 +114,14 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
      *
      * @param name
      */
-    toggleNavigation(name: string): void
-    {
+    toggleNavigation(name: string): void {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation =
+            this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
+                name
+            );
 
-        if ( navigation )
-        {
+        if (navigation) {
             // Toggle the opened status
             navigation.toggle();
         }

src/app/layout/layouts/horizontal/material/material.component.html

@@ -8,53 +8,69 @@
         [mode]="'over'"
         [name]="'mainNavigation'"
         [navigation]="navigation.default"
-        [opened]="false">
+        [opened]="false"
+    >
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
             <!-- Logo -->
-            <div class="flex items-center h-20 pt-6 px-8">
+            <div class="flex h-20 items-center px-8 pt-6">
                 <img
                     class="w-24"
                     src="images/logo/logo-text-on-dark.svg"
-                    alt="Logo image">
+                    alt="Logo image"
+                />
             </div>
         </ng-container>
     </fuse-vertical-navigation>
 </ng-container>
 
 <!-- Wrapper -->
-<div class="flex flex-col flex-auto items-center w-full min-w-0 bg-gray-200 dark:bg-card">
-
+<div
+    class="flex w-full min-w-0 flex-auto flex-col items-center bg-gray-200 dark:bg-card"
+>
     <!-- Header -->
-    <div class="relative flex justify-center w-full overflow-hidden z-49 bg-primary-700 print:hidden">
-        <div class="max-w-360 w-full sm:py-3 sm:m-8 sm:mb-0 md:mt-12 md:mx-8 md:pt-4 md:pb-3 sm:rounded-t-xl border-b sm:shadow-2xl overflow-hidden bg-card">
+    <div
+        class="relative z-49 flex w-full justify-center overflow-hidden bg-primary-700 print:hidden"
+    >
+        <div
+            class="bg-card w-full max-w-360 overflow-hidden border-b sm:m-8 sm:mb-0 sm:rounded-t-xl sm:py-3 sm:shadow-2xl md:mx-8 md:mt-12 md:pb-3 md:pt-4"
+        >
             <!-- Top bar -->
-            <div class="relative flex flex-auto flex-0 items-center h-16 px-4 md:px-6">
+            <div
+                class="relative flex h-16 flex-0 flex-auto items-center px-4 md:px-6"
+            >
                 <!-- Logo -->
                 <ng-container *ngIf="!isScreenSmall">
-                    <div class="flex items-center mx-2">
+                    <div class="mx-2 flex items-center">
                         <!-- Light version -->
                         <img
                             class="w-24 dark:hidden"
                             src="images/logo/logo-text.svg"
-                            alt="Logo image">
+                            alt="Logo image"
+                        />
                         <!-- Dark version -->
                         <img
-                            class="hidden dark:flex w-24"
+                            class="hidden w-24 dark:flex"
                             src="images/logo/logo-text-on-dark.svg"
-                            alt="Logo image">
+                            alt="Logo image"
+                        />
                     </div>
                 </ng-container>
                 <!-- Navigation toggle button -->
                 <ng-container *ngIf="isScreenSmall">
                     <button
                         mat-icon-button
-                        (click)="toggleNavigation('mainNavigation')">
-                        <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
+                        (click)="toggleNavigation('mainNavigation')"
+                    >
+                        <mat-icon
+                            [svgIcon]="'heroicons_outline:bars-3'"
+                        ></mat-icon>
                     </button>
                 </ng-container>
                 <!-- Components -->
-                <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
+                <div
+                    class="ml-auto flex items-center space-x-1 pl-2 sm:space-x-2"
+                >
                     <languages></languages>
                     <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
@@ -66,18 +82,23 @@
             </div>
             <!-- Bottom bar -->
             <ng-container *ngIf="!isScreenSmall">
-                <div class="relative flex flex-auto flex-0 items-center h-16 px-4">
+                <div
+                    class="relative flex h-16 flex-0 flex-auto items-center px-4"
+                >
                     <fuse-horizontal-navigation
                         [name]="'mainNavigation'"
-                        [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
+                        [navigation]="navigation.horizontal"
+                    ></fuse-horizontal-navigation>
                 </div>
             </ng-container>
         </div>
     </div>
 
     <!-- Content -->
-    <div class="flex flex-auto justify-center w-full sm:px-8">
-        <div class="flex flex-col flex-auto w-full sm:max-w-360 sm:shadow-xl sm:overflow-hidden bg-default">
+    <div class="flex w-full flex-auto justify-center sm:px-8">
+        <div
+            class="bg-default flex w-full flex-auto flex-col sm:max-w-360 sm:overflow-hidden sm:shadow-xl"
+        >
             <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
                  Otherwise, layout changes won't be registered and the view won't be updated! -->
             <router-outlet *ngIf="true"></router-outlet>
@@ -85,10 +106,13 @@
     </div>
 
     <!-- Footer -->
-    <div class="relative flex justify-center w-full z-49 print:hidden">
-        <div class="flex items-center max-w-360 w-full h-14 sm:h-20 px-6 md:px-8 sm:shadow-xl border-t bg-card dark:bg-default">
-            <span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span>
+    <div class="relative z-49 flex w-full justify-center print:hidden">
+        <div
+            class="bg-card flex h-14 w-full max-w-360 items-center border-t px-6 dark:bg-default sm:h-20 sm:shadow-xl md:px-8"
+        >
+            <span class="text-secondary font-medium"
+                >Fuse &copy; {{ currentYear }}</span
+            >
         </div>
     </div>
-
 </div>

src/app/layout/layouts/horizontal/material/material.component.ts

@@ -5,7 +5,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
 import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
-import { FuseHorizontalNavigationComponent, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+import {
+    FuseHorizontalNavigationComponent,
+    FuseNavigationService,
+    FuseVerticalNavigationComponent,
+} from '@fuse/components/navigation';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
@@ -18,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'material-layout',
-    templateUrl  : './material.component.html',
+    selector: 'material-layout',
+    templateUrl: './material.component.html',
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [FuseLoadingBarComponent, NgIf, FuseVerticalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, FuseHorizontalNavigationComponent, RouterOutlet],
+    standalone: true,
+    imports: [
+        FuseLoadingBarComponent,
+        NgIf,
+        FuseVerticalNavigationComponent,
+        MatButtonModule,
+        MatIconModule,
+        LanguagesComponent,
+        FuseFullscreenComponent,
+        SearchComponent,
+        ShortcutsComponent,
+        MessagesComponent,
+        NotificationsComponent,
+        UserComponent,
+        FuseHorizontalNavigationComponent,
+        RouterOutlet,
+    ],
 })
-export class MaterialLayoutComponent implements OnInit, OnDestroy
-{
+export class MaterialLayoutComponent implements OnInit, OnDestroy {
     isScreenSmall: boolean;
     navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -38,10 +56,8 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
         private _router: Router,
         private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fuseNavigationService: FuseNavigationService,
-    )
-    {
-    }
+        private _fuseNavigationService: FuseNavigationService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -50,8 +66,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
     /**
      * Getter for current year
      */
-    get currentYear(): number
-    {
+    get currentYear(): number {
         return new Date().getFullYear();
     }
 
@@ -62,21 +77,18 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to navigation data
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) =>
-            {
+            .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) =>
-            {
+            .subscribe(({ matchingAliases }) => {
                 // Check if the screen is small
                 this.isScreenSmall = !matchingAliases.includes('md');
             });
@@ -85,8 +97,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -101,13 +112,14 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
      *
      * @param name
      */
-    toggleNavigation(name: string): void
-    {
+    toggleNavigation(name: string): void {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation =
+            this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
+                name
+            );
 
-        if ( navigation )
-        {
+        if (navigation) {
             // Toggle the opened status
             navigation.toggle();
         }

src/app/layout/layouts/horizontal/modern/modern.component.html

@@ -8,56 +8,61 @@
         [mode]="'over'"
         [name]="'mainNavigation'"
         [navigation]="navigation.default"
-        [opened]="false">
+        [opened]="false"
+    >
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
             <!-- Logo -->
-            <div class="flex items-center h-20 pt-6 px-8">
+            <div class="flex h-20 items-center px-8 pt-6">
                 <img
                     class="w-24"
                     src="images/logo/logo-text-on-dark.svg"
-                    alt="Logo image">
+                    alt="Logo image"
+                />
             </div>
         </ng-container>
     </fuse-vertical-navigation>
 </ng-container>
 
 <!-- Wrapper -->
-<div class="flex flex-col flex-auto w-full min-w-0">
-
+<div class="flex w-full min-w-0 flex-auto flex-col">
     <!-- Header -->
-    <div class="relative flex flex-0 items-center w-full h-16 sm:h-20 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden">
+    <div
+        class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none sm:h-20 md:px-6 print:hidden"
+    >
         <ng-container *ngIf="!isScreenSmall">
             <!-- Logo -->
-            <div class="flex items-center mx-2 lg:mr-8">
+            <div class="mx-2 flex items-center lg:mr-8">
                 <div class="hidden lg:flex">
                     <img
-                        class="dark:hidden w-24"
-                        src="images/logo/logo-text.svg">
+                        class="w-24 dark:hidden"
+                        src="images/logo/logo-text.svg"
+                    />
                     <img
-                        class="hidden dark:flex w-24"
-                        src="images/logo/logo-text-on-dark.svg">
+                        class="hidden w-24 dark:flex"
+                        src="images/logo/logo-text-on-dark.svg"
+                    />
                 </div>
-                <img
-                    class="flex lg:hidden w-8"
-                    src="images/logo/logo.svg">
+                <img class="flex w-8 lg:hidden" src="images/logo/logo.svg" />
             </div>
             <!-- Horizontal navigation -->
             <fuse-horizontal-navigation
                 class="mr-2"
                 [name]="'mainNavigation'"
-                [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
+                [navigation]="navigation.horizontal"
+            ></fuse-horizontal-navigation>
         </ng-container>
         <!-- Navigation toggle button -->
         <ng-container *ngIf="isScreenSmall">
             <button
                 mat-icon-button
-                (click)="toggleNavigation('mainNavigation')">
+                (click)="toggleNavigation('mainNavigation')"
+            >
                 <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
             </button>
         </ng-container>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
+        <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
@@ -67,25 +72,31 @@
             <button
                 class="lg:hidden"
                 mat-icon-button
-                (click)="quickChat.toggle()">
-                <mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon>
+                (click)="quickChat.toggle()"
+            >
+                <mat-icon
+                    [svgIcon]="'heroicons_outline:chat-bubble-left-right'"
+                ></mat-icon>
             </button>
             <user></user>
         </div>
     </div>
 
     <!-- Content -->
-    <div class="flex flex-col flex-auto w-full">
+    <div class="flex w-full flex-auto flex-col">
         <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
              Otherwise, layout changes won't be registered and the view won't be updated! -->
         <router-outlet *ngIf="true"></router-outlet>
     </div>
 
     <!-- Footer -->
-    <div class="relative flex flex-0 items-center w-full h-14 sm:h-20 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden">
-        <span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span>
+    <div
+        class="bg-card relative z-49 flex h-14 w-full flex-0 items-center border-t px-4 dark:bg-transparent sm:h-20 md:px-6 print:hidden"
+    >
+        <span class="text-secondary font-medium"
+            >Fuse &copy; {{ currentYear }}</span
+        >
     </div>
-
 </div>
 
 <!-- Quick chat -->

src/app/layout/layouts/horizontal/modern/modern.component.ts

@@ -5,7 +5,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
 import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
-import { FuseHorizontalNavigationComponent, FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+import {
+    FuseHorizontalNavigationComponent,
+    FuseNavigationService,
+    FuseVerticalNavigationComponent,
+} from '@fuse/components/navigation';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
@@ -19,14 +23,29 @@ import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'modern-layout',
-    templateUrl  : './modern.component.html',
+    selector: 'modern-layout',
+    templateUrl: './modern.component.html',
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [FuseLoadingBarComponent, NgIf, FuseVerticalNavigationComponent, FuseHorizontalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, RouterOutlet, QuickChatComponent],
+    standalone: true,
+    imports: [
+        FuseLoadingBarComponent,
+        NgIf,
+        FuseVerticalNavigationComponent,
+        FuseHorizontalNavigationComponent,
+        MatButtonModule,
+        MatIconModule,
+        LanguagesComponent,
+        FuseFullscreenComponent,
+        SearchComponent,
+        ShortcutsComponent,
+        MessagesComponent,
+        NotificationsComponent,
+        UserComponent,
+        RouterOutlet,
+        QuickChatComponent,
+    ],
 })
-export class ModernLayoutComponent implements OnInit, OnDestroy
-{
+export class ModernLayoutComponent implements OnInit, OnDestroy {
     isScreenSmall: boolean;
     navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -39,10 +58,8 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
         private _router: Router,
         private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fuseNavigationService: FuseNavigationService,
-    )
-    {
-    }
+        private _fuseNavigationService: FuseNavigationService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -51,8 +68,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
     /**
      * Getter for current year
      */
-    get currentYear(): number
-    {
+    get currentYear(): number {
         return new Date().getFullYear();
     }
 
@@ -63,21 +79,18 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to navigation data
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) =>
-            {
+            .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) =>
-            {
+            .subscribe(({ matchingAliases }) => {
                 // Check if the screen is small
                 this.isScreenSmall = !matchingAliases.includes('md');
             });
@@ -86,8 +99,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -102,13 +114,14 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
      *
      * @param name
      */
-    toggleNavigation(name: string): void
-    {
+    toggleNavigation(name: string): void {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation =
+            this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
+                name
+            );
 
-        if ( navigation )
-        {
+        if (navigation) {
             // Toggle the opened status
             navigation.toggle();
         }

src/app/layout/layouts/vertical/classic/classic.component.html

@@ -7,38 +7,40 @@
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
     [navigation]="navigation.default"
-    [opened]="!isScreenSmall">
+    [opened]="!isScreenSmall"
+>
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
         <!-- Logo -->
-        <div class="flex items-center h-20 p-6 pb-0">
+        <div class="flex h-20 items-center p-6 pb-0">
             <!-- Light version -->
             <img
-                class="dark:hidden w-30"
+                class="w-30 dark:hidden"
                 src="images/logo/logo-text.svg"
-                alt="Logo image">
+                alt="Logo image"
+            />
             <!-- Dark version -->
             <img
-                class="hidden dark:flex w-30"
+                class="hidden w-30 dark:flex"
                 src="images/logo/logo-text-on-dark.svg"
-                alt="Logo image">
+                alt="Logo image"
+            />
         </div>
     </ng-container>
 </fuse-vertical-navigation>
 
 <!-- Wrapper -->
-<div class="flex flex-col flex-auto w-full min-w-0">
-
+<div class="flex w-full min-w-0 flex-auto flex-col">
     <!-- Header -->
-    <div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden">
+    <div
+        class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
+    >
         <!-- Navigation toggle button -->
-        <button
-            mat-icon-button
-            (click)="toggleNavigation('mainNavigation')">
+        <button mat-icon-button (click)="toggleNavigation('mainNavigation')">
             <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
         </button>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
+        <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
@@ -48,25 +50,31 @@
             <button
                 class="lg:hidden"
                 mat-icon-button
-                (click)="quickChat.toggle()">
-                <mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon>
+                (click)="quickChat.toggle()"
+            >
+                <mat-icon
+                    [svgIcon]="'heroicons_outline:chat-bubble-left-right'"
+                ></mat-icon>
             </button>
             <user></user>
         </div>
     </div>
 
     <!-- Content -->
-    <div class="flex flex-col flex-auto">
+    <div class="flex flex-auto flex-col">
         <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
              Otherwise, layout changes won't be registered and the view won't be updated! -->
         <router-outlet *ngIf="true"></router-outlet>
     </div>
 
     <!-- Footer -->
-    <div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden">
-        <span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span>
+    <div
+        class="bg-card relative z-49 flex h-14 w-full flex-0 items-center justify-start border-t px-4 dark:bg-transparent md:px-6 print:hidden"
+    >
+        <span class="text-secondary font-medium"
+            >Fuse &copy; {{ currentYear }}</span
+        >
     </div>
-
 </div>
 
 <!-- Quick chat -->

src/app/layout/layouts/vertical/classic/classic.component.ts

@@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
 import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+import {
+    FuseNavigationService,
+    FuseVerticalNavigationComponent,
+} from '@fuse/components/navigation';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
@@ -19,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'classic-layout',
-    templateUrl  : './classic.component.html',
+    selector: 'classic-layout',
+    templateUrl: './classic.component.html',
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [FuseLoadingBarComponent, FuseVerticalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, NgIf, RouterOutlet, QuickChatComponent],
+    standalone: true,
+    imports: [
+        FuseLoadingBarComponent,
+        FuseVerticalNavigationComponent,
+        MatButtonModule,
+        MatIconModule,
+        LanguagesComponent,
+        FuseFullscreenComponent,
+        SearchComponent,
+        ShortcutsComponent,
+        MessagesComponent,
+        NotificationsComponent,
+        UserComponent,
+        NgIf,
+        RouterOutlet,
+        QuickChatComponent,
+    ],
 })
-export class ClassicLayoutComponent implements OnInit, OnDestroy
-{
+export class ClassicLayoutComponent implements OnInit, OnDestroy {
     isScreenSmall: boolean;
     navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -39,10 +56,8 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
         private _router: Router,
         private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fuseNavigationService: FuseNavigationService,
-    )
-    {
-    }
+        private _fuseNavigationService: FuseNavigationService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -51,8 +66,7 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
     /**
      * Getter for current year
      */
-    get currentYear(): number
-    {
+    get currentYear(): number {
         return new Date().getFullYear();
     }
 
@@ -63,21 +77,18 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to navigation data
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) =>
-            {
+            .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) =>
-            {
+            .subscribe(({ matchingAliases }) => {
                 // Check if the screen is small
                 this.isScreenSmall = !matchingAliases.includes('md');
             });
@@ -86,8 +97,7 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -102,13 +112,14 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
      *
      * @param name
      */
-    toggleNavigation(name: string): void
-    {
+    toggleNavigation(name: string): void {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation =
+            this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
+                name
+            );
 
-        if ( navigation )
-        {
+        if (navigation) {
             // Toggle the opened status
             navigation.toggle();
         }

src/app/layout/layouts/vertical/classy/classy.component.html

@@ -7,68 +7,72 @@
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
     [navigation]="navigation.default"
-    [opened]="!isScreenSmall">
+    [opened]="!isScreenSmall"
+>
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
-        <div class="flex items-center w-full p-4 pl-6">
+        <div class="flex w-full items-center p-4 pl-6">
             <!-- Logo -->
             <div class="flex items-center justify-center">
-                <img
-                    class="w-8"
-                    src="images/logo/logo.svg">
+                <img class="w-8" src="images/logo/logo.svg" />
             </div>
             <!-- Components -->
-            <div class="flex items-center ml-auto">
+            <div class="ml-auto flex items-center">
                 <notifications></notifications>
                 <user [showAvatar]="false"></user>
             </div>
         </div>
         <!-- User -->
-        <div class="flex flex-col items-center w-full p-4">
-            <div class="relative w-24 h-24">
+        <div class="flex w-full flex-col items-center p-4">
+            <div class="relative h-24 w-24">
                 <img
-                    class="w-full h-full rounded-full"
+                    class="h-full w-full rounded-full"
                     *ngIf="user.avatar"
                     [src]="user.avatar"
-                    alt="User avatar">
+                    alt="User avatar"
+                />
                 <mat-icon
                     class="icon-size-24"
                     *ngIf="!user.avatar"
-                    [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
+                    [svgIcon]="'heroicons_solid:user-circle'"
+                ></mat-icon>
             </div>
-            <div class="flex flex-col items-center justify-center w-full mt-6">
-                <div class="w-full whitespace-nowrap text-ellipsis overflow-hidden text-center leading-normal font-medium">
-                    {{user.name}}
+            <div class="mt-6 flex w-full flex-col items-center justify-center">
+                <div
+                    class="w-full overflow-hidden text-ellipsis whitespace-nowrap text-center font-medium leading-normal"
+                >
+                    {{ user.name }}
                 </div>
-                <div class="w-full mt-0.5 whitespace-nowrap text-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
-                    {{user.email}}
+                <div
+                    class="text-secondary mt-0.5 w-full overflow-hidden text-ellipsis whitespace-nowrap text-center text-md font-medium leading-normal"
+                >
+                    {{ user.email }}
                 </div>
             </div>
         </div>
     </ng-container>
     <!-- Navigation footer hook -->
     <ng-container fuseVerticalNavigationContentFooter>
-        <div class="flex flex-0 items-center justify-center h-16 pr-6 pl-2 mt-2 mb-4 opacity-12">
-            <img
-                class="max-w-36"
-                src="images/logo/logo-text-on-dark.svg">
+        <div
+            class="mb-4 mt-2 flex h-16 flex-0 items-center justify-center pl-2 pr-6 opacity-12"
+        >
+            <img class="max-w-36" src="images/logo/logo-text-on-dark.svg" />
         </div>
     </ng-container>
 </fuse-vertical-navigation>
 
 <!-- Wrapper -->
-<div class="flex flex-col flex-auto w-full min-w-0">
-
+<div class="flex w-full min-w-0 flex-auto flex-col">
     <!-- Header -->
-    <div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden">
+    <div
+        class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
+    >
         <!-- Navigation toggle button -->
-        <button
-            mat-icon-button
-            (click)="toggleNavigation('mainNavigation')">
+        <button mat-icon-button (click)="toggleNavigation('mainNavigation')">
             <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
         </button>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
+        <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
@@ -77,14 +81,17 @@
             <button
                 class="lg:hidden"
                 mat-icon-button
-                (click)="quickChat.toggle()">
-                <mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon>
+                (click)="quickChat.toggle()"
+            >
+                <mat-icon
+                    [svgIcon]="'heroicons_outline:chat-bubble-left-right'"
+                ></mat-icon>
             </button>
         </div>
     </div>
 
     <!-- Content -->
-    <div class="flex flex-col flex-auto">
+    <div class="flex flex-auto flex-col">
         <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
              Otherwise, layout changes won't be registered and the view won't be updated! -->
         <router-outlet *ngIf="true"></router-outlet>
@@ -94,7 +101,6 @@
     <!--<div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden">
         <span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span>
     </div>-->
-
 </div>
 
 <!-- Quick chat -->

src/app/layout/layouts/vertical/classy/classy.component.ts

@@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
 import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+import {
+    FuseNavigationService,
+    FuseVerticalNavigationComponent,
+} from '@fuse/components/navigation';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
@@ -21,14 +24,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'classy-layout',
-    templateUrl  : './classy.component.html',
+    selector: 'classy-layout',
+    templateUrl: './classy.component.html',
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [FuseLoadingBarComponent, FuseVerticalNavigationComponent, NotificationsComponent, UserComponent, NgIf, MatIconModule, MatButtonModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, RouterOutlet, QuickChatComponent],
+    standalone: true,
+    imports: [
+        FuseLoadingBarComponent,
+        FuseVerticalNavigationComponent,
+        NotificationsComponent,
+        UserComponent,
+        NgIf,
+        MatIconModule,
+        MatButtonModule,
+        LanguagesComponent,
+        FuseFullscreenComponent,
+        SearchComponent,
+        ShortcutsComponent,
+        MessagesComponent,
+        RouterOutlet,
+        QuickChatComponent,
+    ],
 })
-export class ClassyLayoutComponent implements OnInit, OnDestroy
-{
+export class ClassyLayoutComponent implements OnInit, OnDestroy {
     isScreenSmall: boolean;
     navigation: Navigation;
     user: User;
@@ -43,10 +60,8 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
         private _navigationService: NavigationService,
         private _userService: UserService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fuseNavigationService: FuseNavigationService,
-    )
-    {
-    }
+        private _fuseNavigationService: FuseNavigationService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -55,8 +70,7 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
     /**
      * Getter for current year
      */
-    get currentYear(): number
-    {
+    get currentYear(): number {
         return new Date().getFullYear();
     }
 
@@ -67,29 +81,25 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to navigation data
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) =>
-            {
+            .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
         // Subscribe to the user service
         this._userService.user$
-            .pipe((takeUntil(this._unsubscribeAll)))
-            .subscribe((user: User) =>
-            {
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((user: User) => {
                 this.user = user;
             });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) =>
-            {
+            .subscribe(({ matchingAliases }) => {
                 // Check if the screen is small
                 this.isScreenSmall = !matchingAliases.includes('md');
             });
@@ -98,8 +108,7 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -114,13 +123,14 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
      *
      * @param name
      */
-    toggleNavigation(name: string): void
-    {
+    toggleNavigation(name: string): void {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation =
+            this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
+                name
+            );
 
-        if ( navigation )
-        {
+        if (navigation) {
             // Toggle the opened status
             navigation.toggle();
         }

src/app/layout/layouts/vertical/compact/compact.component.html

@@ -8,32 +8,29 @@
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
     [navigation]="navigation.compact"
-    [opened]="!isScreenSmall">
+    [opened]="!isScreenSmall"
+>
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
         <!-- Logo -->
-        <div class="flex items-center justify-center h-20 mt-3 mb-4">
-            <img
-                class="w-10"
-                src="images/logo/logo.svg"
-                alt="Logo image">
+        <div class="mb-4 mt-3 flex h-20 items-center justify-center">
+            <img class="w-10" src="images/logo/logo.svg" alt="Logo image" />
         </div>
     </ng-container>
 </fuse-vertical-navigation>
 
 <!-- Wrapper -->
-<div class="flex flex-col flex-auto w-full min-w-0">
-
+<div class="flex w-full min-w-0 flex-auto flex-col">
     <!-- Header -->
-    <div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden">
+    <div
+        class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
+    >
         <!-- Navigation toggle button -->
-        <button
-            mat-icon-button
-            (click)="toggleNavigation('mainNavigation')">
+        <button mat-icon-button (click)="toggleNavigation('mainNavigation')">
             <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
         </button>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
+        <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
@@ -43,25 +40,31 @@
             <button
                 class="lg:hidden"
                 mat-icon-button
-                (click)="quickChat.toggle()">
-                <mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon>
+                (click)="quickChat.toggle()"
+            >
+                <mat-icon
+                    [svgIcon]="'heroicons_outline:chat-bubble-left-right'"
+                ></mat-icon>
             </button>
             <user></user>
         </div>
     </div>
 
     <!-- Content -->
-    <div class="flex flex-col flex-auto">
+    <div class="flex flex-auto flex-col">
         <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
              Otherwise, layout changes won't be registered and the view won't be updated! -->
         <router-outlet *ngIf="true"></router-outlet>
     </div>
 
     <!-- Footer -->
-    <div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden">
-        <span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span>
+    <div
+        class="bg-card relative z-49 flex h-14 w-full flex-0 items-center justify-start border-t px-4 dark:bg-transparent md:px-6 print:hidden"
+    >
+        <span class="text-secondary font-medium"
+            >Fuse &copy; {{ currentYear }}</span
+        >
     </div>
-
 </div>
 
 <!-- Quick chat -->

src/app/layout/layouts/vertical/compact/compact.component.ts

@@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
 import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+import {
+    FuseNavigationService,
+    FuseVerticalNavigationComponent,
+} from '@fuse/components/navigation';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
@@ -19,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'compact-layout',
-    templateUrl  : './compact.component.html',
+    selector: 'compact-layout',
+    templateUrl: './compact.component.html',
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [FuseLoadingBarComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, NgIf, RouterOutlet, QuickChatComponent, FuseVerticalNavigationComponent],
+    standalone: true,
+    imports: [
+        FuseLoadingBarComponent,
+        MatButtonModule,
+        MatIconModule,
+        LanguagesComponent,
+        FuseFullscreenComponent,
+        SearchComponent,
+        ShortcutsComponent,
+        MessagesComponent,
+        NotificationsComponent,
+        UserComponent,
+        NgIf,
+        RouterOutlet,
+        QuickChatComponent,
+        FuseVerticalNavigationComponent,
+    ],
 })
-export class CompactLayoutComponent implements OnInit, OnDestroy
-{
+export class CompactLayoutComponent implements OnInit, OnDestroy {
     isScreenSmall: boolean;
     navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -39,10 +56,8 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
         private _router: Router,
         private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fuseNavigationService: FuseNavigationService,
-    )
-    {
-    }
+        private _fuseNavigationService: FuseNavigationService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -51,8 +66,7 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
     /**
      * Getter for current year
      */
-    get currentYear(): number
-    {
+    get currentYear(): number {
         return new Date().getFullYear();
     }
 
@@ -63,21 +77,18 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to navigation data
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) =>
-            {
+            .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) =>
-            {
+            .subscribe(({ matchingAliases }) => {
                 // Check if the screen is small
                 this.isScreenSmall = !matchingAliases.includes('md');
             });
@@ -86,8 +97,7 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -102,13 +112,14 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
      *
      * @param name
      */
-    toggleNavigation(name: string): void
-    {
+    toggleNavigation(name: string): void {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation =
+            this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
+                name
+            );
 
-        if ( navigation )
-        {
+        if (navigation) {
             // Toggle the opened status
             navigation.toggle();
         }

src/app/layout/layouts/vertical/dense/dense.component.html

@@ -8,41 +8,44 @@
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
     [navigation]="navigation.default"
-    [opened]="!isScreenSmall">
+    [opened]="!isScreenSmall"
+>
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
         <!-- Logo -->
-        <div class="flex items-center justify-center h-20">
-            <img
-                class="w-8"
-                src="images/logo/logo.svg"
-                alt="Logo image">
+        <div class="flex h-20 items-center justify-center">
+            <img class="w-8" src="images/logo/logo.svg" alt="Logo image" />
         </div>
     </ng-container>
 </fuse-vertical-navigation>
 
 <!-- Wrapper -->
-<div class="flex flex-col flex-auto w-full min-w-0">
-
+<div class="flex w-full min-w-0 flex-auto flex-col">
     <!-- Header -->
-    <div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden">
-        <div class="flex items-center pr-2 space-x-2">
+    <div
+        class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
+    >
+        <div class="flex items-center space-x-2 pr-2">
             <!-- Navigation toggle button -->
             <button
                 mat-icon-button
-                (click)="toggleNavigation('mainNavigation')">
+                (click)="toggleNavigation('mainNavigation')"
+            >
                 <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
             </button>
             <!-- Navigation appearance toggle button -->
             <button
                 class="hidden md:inline-flex"
                 mat-icon-button
-                (click)="toggleNavigationAppearance()">
-                <mat-icon [svgIcon]="'heroicons_outline:arrows-right-left'"></mat-icon>
+                (click)="toggleNavigationAppearance()"
+            >
+                <mat-icon
+                    [svgIcon]="'heroicons_outline:arrows-right-left'"
+                ></mat-icon>
             </button>
         </div>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
+        <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
@@ -52,25 +55,31 @@
             <button
                 class="lg:hidden"
                 mat-icon-button
-                (click)="quickChat.toggle()">
-                <mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon>
+                (click)="quickChat.toggle()"
+            >
+                <mat-icon
+                    [svgIcon]="'heroicons_outline:chat-bubble-left-right'"
+                ></mat-icon>
             </button>
             <user></user>
         </div>
     </div>
 
     <!-- Content -->
-    <div class="flex flex-col flex-auto">
+    <div class="flex flex-auto flex-col">
         <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
              Otherwise, layout changes won't be registered and the view won't be updated! -->
         <router-outlet *ngIf="true"></router-outlet>
     </div>
 
     <!-- Footer -->
-    <div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden">
-        <span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span>
+    <div
+        class="bg-card relative z-49 flex h-14 w-full flex-0 items-center justify-start border-t px-4 dark:bg-transparent md:px-6 print:hidden"
+    >
+        <span class="text-secondary font-medium"
+            >Fuse &copy; {{ currentYear }}</span
+        >
     </div>
-
 </div>
 
 <!-- Quick chat -->

src/app/layout/layouts/vertical/dense/dense.component.ts

@@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
 import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+import {
+    FuseNavigationService,
+    FuseVerticalNavigationComponent,
+} from '@fuse/components/navigation';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
@@ -19,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'dense-layout',
-    templateUrl  : './dense.component.html',
+    selector: 'dense-layout',
+    templateUrl: './dense.component.html',
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [FuseLoadingBarComponent, FuseVerticalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, NgIf, RouterOutlet, QuickChatComponent],
+    standalone: true,
+    imports: [
+        FuseLoadingBarComponent,
+        FuseVerticalNavigationComponent,
+        MatButtonModule,
+        MatIconModule,
+        LanguagesComponent,
+        FuseFullscreenComponent,
+        SearchComponent,
+        ShortcutsComponent,
+        MessagesComponent,
+        NotificationsComponent,
+        UserComponent,
+        NgIf,
+        RouterOutlet,
+        QuickChatComponent,
+    ],
 })
-export class DenseLayoutComponent implements OnInit, OnDestroy
-{
+export class DenseLayoutComponent implements OnInit, OnDestroy {
     isScreenSmall: boolean;
     navigation: Navigation;
     navigationAppearance: 'default' | 'dense' = 'dense';
@@ -40,10 +57,8 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
         private _router: Router,
         private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fuseNavigationService: FuseNavigationService,
-    )
-    {
-    }
+        private _fuseNavigationService: FuseNavigationService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -52,8 +67,7 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
     /**
      * Getter for current year
      */
-    get currentYear(): number
-    {
+    get currentYear(): number {
         return new Date().getFullYear();
     }
 
@@ -64,34 +78,32 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to navigation data
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) =>
-            {
+            .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) =>
-            {
+            .subscribe(({ matchingAliases }) => {
                 // Check if the screen is small
                 this.isScreenSmall = !matchingAliases.includes('md');
 
                 // Change the navigation appearance
-                this.navigationAppearance = this.isScreenSmall ? 'default' : 'dense';
+                this.navigationAppearance = this.isScreenSmall
+                    ? 'default'
+                    : 'dense';
             });
     }
 
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -106,13 +118,14 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
      *
      * @param name
      */
-    toggleNavigation(name: string): void
-    {
+    toggleNavigation(name: string): void {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation =
+            this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
+                name
+            );
 
-        if ( navigation )
-        {
+        if (navigation) {
             // Toggle the opened status
             navigation.toggle();
         }
@@ -121,8 +134,8 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
     /**
      * Toggle the navigation appearance
      */
-    toggleNavigationAppearance(): void
-    {
-        this.navigationAppearance = (this.navigationAppearance === 'default' ? 'dense' : 'default');
+    toggleNavigationAppearance(): void {
+        this.navigationAppearance =
+            this.navigationAppearance === 'default' ? 'dense' : 'default';
     }
 }

src/app/layout/layouts/vertical/futuristic/futuristic.component.html

@@ -7,26 +7,29 @@
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
     [navigation]="navigation.futuristic"
-    [opened]="!isScreenSmall">
+    [opened]="!isScreenSmall"
+>
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationHeader>
         <!-- Logo -->
-        <div class="flex items-center h-20 p-6 pb-0">
-            <img
-                class="w-30"
-                src="images/logo/logo-text-on-dark.svg">
+        <div class="flex h-20 items-center p-6 pb-0">
+            <img class="w-30" src="images/logo/logo-text-on-dark.svg" />
         </div>
     </ng-container>
     <!-- Navigation footer hook -->
     <ng-container fuseVerticalNavigationFooter>
         <!-- User -->
-        <div class="flex items-center w-full px-6 py-8 border-t">
+        <div class="flex w-full items-center border-t px-6 py-8">
             <user></user>
-            <div class="flex flex-col w-full ml-4 overflow-hidden">
-                <div class="w-full whitespace-nowrap text-ellipsis overflow-hidden leading-normal text-current opacity-80">
-                    {{user.name}}
+            <div class="ml-4 flex w-full flex-col overflow-hidden">
+                <div
+                    class="w-full overflow-hidden text-ellipsis whitespace-nowrap leading-normal text-current opacity-80"
+                >
+                    {{ user.name }}
                 </div>
-                <div class="w-full mt-0.5 whitespace-nowrap text-sm text-ellipsis overflow-hidden leading-normal text-current opacity-50">
+                <div
+                    class="mt-0.5 w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-normal text-current opacity-50"
+                >
                     brian.hughes&#64;company.com
                 </div>
             </div>
@@ -35,19 +38,21 @@
 </fuse-vertical-navigation>
 
 <!-- Wrapper -->
-<div class="flex flex-col flex-auto w-full min-w-0">
-
+<div class="flex w-full min-w-0 flex-auto flex-col">
     <!-- Header -->
-    <div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden">
+    <div
+        class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
+    >
         <!-- Navigation toggle button -->
         <button
             class="mr-2"
             mat-icon-button
-            (click)="toggleNavigation('mainNavigation')">
+            (click)="toggleNavigation('mainNavigation')"
+        >
             <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
         </button>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
+        <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
@@ -57,24 +62,30 @@
             <button
                 class="lg:hidden"
                 mat-icon-button
-                (click)="quickChat.toggle()">
-                <mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon>
+                (click)="quickChat.toggle()"
+            >
+                <mat-icon
+                    [svgIcon]="'heroicons_outline:chat-bubble-left-right'"
+                ></mat-icon>
             </button>
         </div>
     </div>
 
     <!-- Content -->
-    <div class="flex flex-col flex-auto">
+    <div class="flex flex-auto flex-col">
         <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
              Otherwise, layout changes won't be registered and the view won't be updated! -->
         <router-outlet *ngIf="true"></router-outlet>
     </div>
 
     <!-- Footer -->
-    <div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden">
-        <span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span>
+    <div
+        class="bg-card relative z-49 flex h-14 w-full flex-0 items-center justify-start border-t px-4 dark:bg-transparent md:px-6 print:hidden"
+    >
+        <span class="text-secondary font-medium"
+            >Fuse &copy; {{ currentYear }}</span
+        >
     </div>
-
 </div>
 
 <!-- Quick chat -->

src/app/layout/layouts/vertical/futuristic/futuristic.component.ts

@@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
 import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+import {
+    FuseNavigationService,
+    FuseVerticalNavigationComponent,
+} from '@fuse/components/navigation';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
@@ -21,14 +24,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'futuristic-layout',
-    templateUrl  : './futuristic.component.html',
+    selector: 'futuristic-layout',
+    templateUrl: './futuristic.component.html',
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [FuseLoadingBarComponent, FuseVerticalNavigationComponent, UserComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, NgIf, RouterOutlet, QuickChatComponent],
+    standalone: true,
+    imports: [
+        FuseLoadingBarComponent,
+        FuseVerticalNavigationComponent,
+        UserComponent,
+        MatButtonModule,
+        MatIconModule,
+        LanguagesComponent,
+        FuseFullscreenComponent,
+        SearchComponent,
+        ShortcutsComponent,
+        MessagesComponent,
+        NotificationsComponent,
+        NgIf,
+        RouterOutlet,
+        QuickChatComponent,
+    ],
 })
-export class FuturisticLayoutComponent implements OnInit, OnDestroy
-{
+export class FuturisticLayoutComponent implements OnInit, OnDestroy {
     isScreenSmall: boolean;
     navigation: Navigation;
     user: User;
@@ -43,10 +60,8 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
         private _navigationService: NavigationService,
         private _userService: UserService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fuseNavigationService: FuseNavigationService,
-    )
-    {
-    }
+        private _fuseNavigationService: FuseNavigationService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -55,8 +70,7 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
     /**
      * Getter for current year
      */
-    get currentYear(): number
-    {
+    get currentYear(): number {
         return new Date().getFullYear();
     }
 
@@ -67,29 +81,25 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to navigation data
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) =>
-            {
+            .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
         // Subscribe to the user service
         this._userService.user$
-            .pipe((takeUntil(this._unsubscribeAll)))
-            .subscribe((user: User) =>
-            {
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((user: User) => {
                 this.user = user;
             });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) =>
-            {
+            .subscribe(({ matchingAliases }) => {
                 // Check if the screen is small
                 this.isScreenSmall = !matchingAliases.includes('md');
             });
@@ -98,8 +108,7 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -114,13 +123,14 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
      *
      * @param name
      */
-    toggleNavigation(name: string): void
-    {
+    toggleNavigation(name: string): void {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation =
+            this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
+                name
+            );
 
-        if ( navigation )
-        {
+        if (navigation) {
             // Toggle the opened status
             navigation.toggle();
         }

src/app/layout/layouts/vertical/thin/thin.component.html

@@ -8,33 +8,33 @@
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
     [navigation]="navigation.compact"
-    [opened]="!isScreenSmall">
+    [opened]="!isScreenSmall"
+>
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
         <!-- Logo -->
-        <div class="flex items-center justify-center h-20">
-            <img
-                class="w-8"
-                src="images/logo/logo.svg"
-                alt="Logo image">
+        <div class="flex h-20 items-center justify-center">
+            <img class="w-8" src="images/logo/logo.svg" alt="Logo image" />
         </div>
     </ng-container>
 </fuse-vertical-navigation>
 
 <!-- Wrapper -->
-<div class="flex flex-col flex-auto w-full min-w-0">
-
+<div class="flex w-full min-w-0 flex-auto flex-col">
     <!-- Header -->
-    <div class="relative flex flex-0 items-center w-full h-16 px-4 md:px-6 z-49 shadow dark:shadow-none dark:border-b bg-card dark:bg-transparent print:hidden">
+    <div
+        class="bg-card relative z-49 flex h-16 w-full flex-0 items-center px-4 shadow dark:border-b dark:bg-transparent dark:shadow-none md:px-6 print:hidden"
+    >
         <!-- Navigation toggle button -->
         <button
             class="mr-2"
             mat-icon-button
-            (click)="toggleNavigation('mainNavigation')">
+            (click)="toggleNavigation('mainNavigation')"
+        >
             <mat-icon [svgIcon]="'heroicons_outline:bars-3'"></mat-icon>
         </button>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-0.5 sm:space-x-2">
+        <div class="ml-auto flex items-center space-x-0.5 pl-2 sm:space-x-2">
             <languages></languages>
             <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
@@ -44,25 +44,31 @@
             <button
                 class="lg:hidden"
                 mat-icon-button
-                (click)="quickChat.toggle()">
-                <mat-icon [svgIcon]="'heroicons_outline:chat-bubble-left-right'"></mat-icon>
+                (click)="quickChat.toggle()"
+            >
+                <mat-icon
+                    [svgIcon]="'heroicons_outline:chat-bubble-left-right'"
+                ></mat-icon>
             </button>
             <user></user>
         </div>
     </div>
 
     <!-- Content -->
-    <div class="flex flex-col flex-auto">
+    <div class="flex flex-auto flex-col">
         <!-- *ngIf="true" hack is required here for router-outlet to work correctly.
              Otherwise, layout changes won't be registered and the view won't be updated! -->
         <router-outlet *ngIf="true"></router-outlet>
     </div>
 
     <!-- Footer -->
-    <div class="relative flex flex-0 items-center justify-start w-full h-14 px-4 md:px-6 z-49 border-t bg-card dark:bg-transparent print:hidden">
-        <span class="font-medium text-secondary">Fuse &copy; {{currentYear}}</span>
+    <div
+        class="bg-card relative z-49 flex h-14 w-full flex-0 items-center justify-start border-t px-4 dark:bg-transparent md:px-6 print:hidden"
+    >
+        <span class="text-secondary font-medium"
+            >Fuse &copy; {{ currentYear }}</span
+        >
     </div>
-
 </div>
 
 <!-- Quick chat -->

src/app/layout/layouts/vertical/thin/thin.component.ts

@@ -5,7 +5,10 @@ import { MatIconModule } from '@angular/material/icon';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { FuseFullscreenComponent } from '@fuse/components/fullscreen';
 import { FuseLoadingBarComponent } from '@fuse/components/loading-bar';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
+import {
+    FuseNavigationService,
+    FuseVerticalNavigationComponent,
+} from '@fuse/components/navigation';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { NavigationService } from 'app/core/navigation/navigation.service';
 import { Navigation } from 'app/core/navigation/navigation.types';
@@ -19,14 +22,28 @@ import { UserComponent } from 'app/layout/common/user/user.component';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
-    selector     : 'thin-layout',
-    templateUrl  : './thin.component.html',
+    selector: 'thin-layout',
+    templateUrl: './thin.component.html',
     encapsulation: ViewEncapsulation.None,
-    standalone   : true,
-    imports      : [FuseLoadingBarComponent, FuseVerticalNavigationComponent, MatButtonModule, MatIconModule, LanguagesComponent, FuseFullscreenComponent, SearchComponent, ShortcutsComponent, MessagesComponent, NotificationsComponent, UserComponent, NgIf, RouterOutlet, QuickChatComponent],
+    standalone: true,
+    imports: [
+        FuseLoadingBarComponent,
+        FuseVerticalNavigationComponent,
+        MatButtonModule,
+        MatIconModule,
+        LanguagesComponent,
+        FuseFullscreenComponent,
+        SearchComponent,
+        ShortcutsComponent,
+        MessagesComponent,
+        NotificationsComponent,
+        UserComponent,
+        NgIf,
+        RouterOutlet,
+        QuickChatComponent,
+    ],
 })
-export class ThinLayoutComponent implements OnInit, OnDestroy
-{
+export class ThinLayoutComponent implements OnInit, OnDestroy {
     isScreenSmall: boolean;
     navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -39,10 +56,8 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
         private _router: Router,
         private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
-        private _fuseNavigationService: FuseNavigationService,
-    )
-    {
-    }
+        private _fuseNavigationService: FuseNavigationService
+    ) {}
 
     // -----------------------------------------------------------------------------------------------------
     // @ Accessors
@@ -51,8 +66,7 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
     /**
      * Getter for current year
      */
-    get currentYear(): number
-    {
+    get currentYear(): number {
         return new Date().getFullYear();
     }
 
@@ -63,21 +77,18 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
     /**
      * On init
      */
-    ngOnInit(): void
-    {
+    ngOnInit(): void {
         // Subscribe to navigation data
         this._navigationService.navigation$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) =>
-            {
+            .subscribe((navigation: Navigation) => {
                 this.navigation = navigation;
             });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
             .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) =>
-            {
+            .subscribe(({ matchingAliases }) => {
                 // Check if the screen is small
                 this.isScreenSmall = !matchingAliases.includes('md');
             });
@@ -86,8 +97,7 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
     /**
      * On destroy
      */
-    ngOnDestroy(): void
-    {
+    ngOnDestroy(): void {
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();
@@ -102,13 +112,14 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
      *
      * @param name
      */
-    toggleNavigation(name: string): void
-    {
+    toggleNavigation(name: string): void {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation =
+            this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(
+                name
+            );
 
-        if ( navigation )
-        {
+        if (navigation) {
             // Toggle the opened status
             navigation.toggle();
         }

src/app/mock-api/apps/academy/api.ts

@@ -1,11 +1,14 @@
 import { Injectable } from '@angular/core';
 import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
-import { categories as categoriesData, courses as coursesData, demoCourseSteps as demoCourseStepsData } from 'app/mock-api/apps/academy/data';
+import {
+    categories as categoriesData,
+    courses as coursesData,
+    demoCourseSteps as demoCourseStepsData,
+} from 'app/mock-api/apps/academy/data';
 import { cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class AcademyMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class AcademyMockApi {
     private _categories: any[] = categoriesData;
     private _courses: any[] = coursesData;
     private _demoCourseSteps: any[] = demoCourseStepsData;
@@ -13,8 +16,7 @@ export class AcademyMockApi
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -26,15 +28,13 @@ export class AcademyMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Categories - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/academy/categories')
-            .reply(() =>
-            {
+            .reply(() => {
                 // Clone the categories
                 const categories = cloneDeep(this._categories);
 
@@ -47,23 +47,19 @@ export class AcademyMockApi
         // -----------------------------------------------------------------------------------------------------
         // @ Courses - GET
         // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/apps/academy/courses')
-            .reply(() =>
-            {
-                // Clone the courses
-                const courses = cloneDeep(this._courses);
+        this._fuseMockApiService.onGet('api/apps/academy/courses').reply(() => {
+            // Clone the courses
+            const courses = cloneDeep(this._courses);
 
-                return [200, courses];
-            });
+            return [200, courses];
+        });
 
         // -----------------------------------------------------------------------------------------------------
         // @ Course - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/academy/courses/course')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id from the params
                 const id = request.params.get('id');
 
@@ -72,16 +68,12 @@ export class AcademyMockApi
                 const steps = cloneDeep(this._demoCourseSteps);
 
                 // Find the course and attach steps to it
-                const course = courses.find(item => item.id === id);
-                if ( course )
-                {
+                const course = courses.find((item) => item.id === id);
+                if (course) {
                     course.steps = steps;
                 }
 
-                return [
-                    200,
-                    course,
-                ];
+                return [200, course];
             });
     }
 }

src/app/mock-api/apps/academy/data.ts

@@ -1,295 +1,298 @@
 /* eslint-disable */
 export const categories = [
     {
-        id   : '9a67dff7-3c38-4052-a335-0cef93438ff6',
+        id: '9a67dff7-3c38-4052-a335-0cef93438ff6',
         title: 'Web',
-        slug : 'web',
+        slug: 'web',
     },
     {
-        id   : 'a89672f5-e00d-4be4-9194-cb9d29f82165',
+        id: 'a89672f5-e00d-4be4-9194-cb9d29f82165',
         title: 'Firebase',
-        slug : 'firebase',
+        slug: 'firebase',
     },
     {
-        id   : '02f42092-bb23-4552-9ddb-cfdcc235d48f',
+        id: '02f42092-bb23-4552-9ddb-cfdcc235d48f',
         title: 'Cloud',
-        slug : 'cloud',
+        slug: 'cloud',
     },
     {
-        id   : '5648a630-979f-4403-8c41-fc9790dea8cd',
+        id: '5648a630-979f-4403-8c41-fc9790dea8cd',
         title: 'Android',
-        slug : 'android',
+        slug: 'android',
     },
 ];
 export const courses = [
     {
-        id         : '694e4e5f-f25f-470b-bd0e-26b1d4f64028',
-        title      : 'Basics of Angular',
-        slug       : 'basics-of-angular',
+        id: '694e4e5f-f25f-470b-bd0e-26b1d4f64028',
+        title: 'Basics of Angular',
+        slug: 'basics-of-angular',
         description: 'Introductory course for Angular and framework basics',
-        category   : 'web',
-        duration   : 30,
-        totalSteps : 11,
-        updatedAt  : 'Jun 28, 2021',
-        featured   : true,
-        progress   : {
+        category: 'web',
+        duration: 30,
+        totalSteps: 11,
+        updatedAt: 'Jun 28, 2021',
+        featured: true,
+        progress: {
             currentStep: 3,
-            completed  : 2,
+            completed: 2,
         },
     },
     {
-        id         : 'f924007a-2ee9-470b-a316-8d21ed78277f',
-        title      : 'Basics of TypeScript',
-        slug       : 'basics-of-typeScript',
+        id: 'f924007a-2ee9-470b-a316-8d21ed78277f',
+        title: 'Basics of TypeScript',
+        slug: 'basics-of-typeScript',
         description: 'Beginner course for Typescript and its basics',
-        category   : 'web',
-        duration   : 60,
-        totalSteps : 11,
-        updatedAt  : 'Nov 01, 2021',
-        featured   : true,
-        progress   : {
+        category: 'web',
+        duration: 60,
+        totalSteps: 11,
+        updatedAt: 'Nov 01, 2021',
+        featured: true,
+        progress: {
             currentStep: 5,
-            completed  : 3,
+            completed: 3,
         },
     },
     {
-        id         : '0c06e980-abb5-4ba7-ab65-99a228cab36b',
-        title      : 'Android N: Quick Settings',
-        slug       : 'android-n-quick-settings',
+        id: '0c06e980-abb5-4ba7-ab65-99a228cab36b',
+        title: 'Android N: Quick Settings',
+        slug: 'android-n-quick-settings',
         description: 'Step by step guide for Android N: Quick Settings',
-        category   : 'android',
-        duration   : 120,
-        totalSteps : 11,
-        updatedAt  : 'May 08, 2021',
-        featured   : false,
-        progress   : {
+        category: 'android',
+        duration: 120,
+        totalSteps: 11,
+        updatedAt: 'May 08, 2021',
+        featured: false,
+        progress: {
             currentStep: 10,
-            completed  : 1,
+            completed: 1,
         },
     },
     {
-        id         : '1b9a9acc-9a36-403e-a1e7-b11780179e38',
-        title      : 'Build an App for the Google Assistant with Firebase',
-        slug       : 'build-an-app-for-the-google-assistant-with-firebase',
+        id: '1b9a9acc-9a36-403e-a1e7-b11780179e38',
+        title: 'Build an App for the Google Assistant with Firebase',
+        slug: 'build-an-app-for-the-google-assistant-with-firebase',
         description: 'Dive deep into Google Assistant apps using Firebase',
-        category   : 'firebase',
-        duration   : 30,
-        totalSteps : 11,
-        updatedAt  : 'Jan 09, 2021',
-        featured   : false,
-        progress   : {
+        category: 'firebase',
+        duration: 30,
+        totalSteps: 11,
+        updatedAt: 'Jan 09, 2021',
+        featured: false,
+        progress: {
             currentStep: 4,
-            completed  : 3,
+            completed: 3,
         },
     },
     {
-        id         : '55eb415f-3f4e-4853-a22b-f0ae91331169',
-        title      : 'Keep Sensitive Data Safe and Private',
-        slug       : 'keep-sensitive-data-safe-and-private',
+        id: '55eb415f-3f4e-4853-a22b-f0ae91331169',
+        title: 'Keep Sensitive Data Safe and Private',
+        slug: 'keep-sensitive-data-safe-and-private',
         description: 'Learn how to keep your important data safe and private',
-        category   : 'android',
-        duration   : 45,
-        totalSteps : 11,
-        updatedAt  : 'Jan 14, 2021',
-        featured   : false,
-        progress   : {
+        category: 'android',
+        duration: 45,
+        totalSteps: 11,
+        updatedAt: 'Jan 14, 2021',
+        featured: false,
+        progress: {
             currentStep: 6,
-            completed  : 0,
+            completed: 0,
         },
     },
     {
-        id         : 'fad2ab23-1011-4028-9a54-e52179ac4a50',
-        title      : 'Manage Your Pivotal Cloud Foundry App\'s Using Apigee Edge',
-        slug       : 'manage-your-pivotal-cloud-foundry-apps-using-apigee-Edge',
+        id: 'fad2ab23-1011-4028-9a54-e52179ac4a50',
+        title: "Manage Your Pivotal Cloud Foundry App's Using Apigee Edge",
+        slug: 'manage-your-pivotal-cloud-foundry-apps-using-apigee-Edge',
         description: 'Introductory course for Pivotal Cloud Foundry App',
-        category   : 'cloud',
-        duration   : 90,
-        totalSteps : 11,
-        updatedAt  : 'Jun 24, 2021',
-        featured   : false,
-        progress   : {
+        category: 'cloud',
+        duration: 90,
+        totalSteps: 11,
+        updatedAt: 'Jun 24, 2021',
+        featured: false,
+        progress: {
             currentStep: 6,
-            completed  : 0,
+            completed: 0,
         },
     },
     {
-        id         : 'c4bc107b-edc4-47a7-a7a8-4fb09732e794',
-        title      : 'Build a PWA Using Workbox',
-        slug       : 'build-a-pwa-using-workbox',
+        id: 'c4bc107b-edc4-47a7-a7a8-4fb09732e794',
+        title: 'Build a PWA Using Workbox',
+        slug: 'build-a-pwa-using-workbox',
         description: 'Step by step guide for building a PWA using Workbox',
-        category   : 'web',
-        duration   : 120,
-        totalSteps : 11,
-        updatedAt  : 'Nov 19, 2021',
-        featured   : false,
-        progress   : {
+        category: 'web',
+        duration: 120,
+        totalSteps: 11,
+        updatedAt: 'Nov 19, 2021',
+        featured: false,
+        progress: {
             currentStep: 0,
-            completed  : 0,
+            completed: 0,
         },
     },
     {
-        id         : '1449f945-d032-460d-98e3-406565a22293',
-        title      : 'Cloud Functions for Firebase',
-        slug       : 'cloud-functions-for-firebase',
+        id: '1449f945-d032-460d-98e3-406565a22293',
+        title: 'Cloud Functions for Firebase',
+        slug: 'cloud-functions-for-firebase',
         description: 'Beginners guide of Firebase Cloud Functions',
-        category   : 'firebase',
-        duration   : 45,
-        totalSteps : 11,
-        updatedAt  : 'Jul 11, 2021',
-        featured   : false,
-        progress   : {
+        category: 'firebase',
+        duration: 45,
+        totalSteps: 11,
+        updatedAt: 'Jul 11, 2021',
+        featured: false,
+        progress: {
             currentStep: 3,
-            completed  : 1,
+            completed: 1,
         },
     },
     {
-        id         : 'f05e08ab-f3e3-4597-a032-6a4b69816f24',
-        title      : 'Building a gRPC Service with Java',
-        slug       : 'building-a-grpc-service-with-java',
+        id: 'f05e08ab-f3e3-4597-a032-6a4b69816f24',
+        title: 'Building a gRPC Service with Java',
+        slug: 'building-a-grpc-service-with-java',
         description: 'Learn more about building a gRPC Service with Java',
-        category   : 'cloud',
-        duration   : 30,
-        totalSteps : 11,
-        updatedAt  : 'Mar 13, 2021',
-        featured   : false,
-        progress   : {
+        category: 'cloud',
+        duration: 30,
+        totalSteps: 11,
+        updatedAt: 'Mar 13, 2021',
+        featured: false,
+        progress: {
             currentStep: 0,
-            completed  : 1,
+            completed: 1,
         },
     },
     {
-        id         : '181728f4-87c8-45c5-b9cc-92265bcd2f4d',
-        title      : 'Looking at Campaign Finance with BigQuery',
-        slug       : 'looking-at-campaign-finance-with-bigquery',
+        id: '181728f4-87c8-45c5-b9cc-92265bcd2f4d',
+        title: 'Looking at Campaign Finance with BigQuery',
+        slug: 'looking-at-campaign-finance-with-bigquery',
         description: 'Dive deep into BigQuery: Campaign Finance',
-        category   : 'cloud',
-        duration   : 60,
-        totalSteps : 11,
-        updatedAt  : 'Nov 01, 2021',
-        featured   : false,
-        progress   : {
+        category: 'cloud',
+        duration: 60,
+        totalSteps: 11,
+        updatedAt: 'Nov 01, 2021',
+        featured: false,
+        progress: {
             currentStep: 0,
-            completed  : 0,
+            completed: 0,
         },
     },
     {
-        id         : 'fcbfedbf-6187-4b3b-89d3-1a7cb4e11616',
-        title      : 'Personalize Your iOS App with Firebase User Management',
-        slug       : 'personalize-your-ios-app-with-firebase-user-management',
-        description: 'Dive deep into User Management on iOS apps using Firebase',
-        category   : 'firebase',
-        duration   : 90,
-        totalSteps : 11,
-        updatedAt  : 'Aug 08, 2021',
-        featured   : false,
-        progress   : {
+        id: 'fcbfedbf-6187-4b3b-89d3-1a7cb4e11616',
+        title: 'Personalize Your iOS App with Firebase User Management',
+        slug: 'personalize-your-ios-app-with-firebase-user-management',
+        description:
+            'Dive deep into User Management on iOS apps using Firebase',
+        category: 'firebase',
+        duration: 90,
+        totalSteps: 11,
+        updatedAt: 'Aug 08, 2021',
+        featured: false,
+        progress: {
             currentStep: 0,
-            completed  : 0,
+            completed: 0,
         },
     },
     {
-        id         : '5213f6a1-1dd7-4b1d-b6e9-ffb7af534f28',
-        title      : 'Customize Network Topology with Subnetworks',
-        slug       : 'customize-network-topology-with-subnetworks',
+        id: '5213f6a1-1dd7-4b1d-b6e9-ffb7af534f28',
+        title: 'Customize Network Topology with Subnetworks',
+        slug: 'customize-network-topology-with-subnetworks',
         description: 'Dive deep into Network Topology with Subnetworks',
-        category   : 'web',
-        duration   : 45,
-        totalSteps : 11,
-        updatedAt  : 'May 12, 2021',
-        featured   : false,
-        progress   : {
+        category: 'web',
+        duration: 45,
+        totalSteps: 11,
+        updatedAt: 'May 12, 2021',
+        featured: false,
+        progress: {
             currentStep: 0,
-            completed  : 0,
+            completed: 0,
         },
     },
     {
-        id         : '02992ac9-d1a3-4167-b70e-8a1d5b5ba253',
-        title      : 'Building Beautiful UIs with Flutter',
-        slug       : 'building-beautiful-uis-with-flutter',
-        description: 'Dive deep into Flutter\'s hidden secrets for creating beautiful UIs',
-        category   : 'web',
-        duration   : 90,
-        totalSteps : 11,
-        updatedAt  : 'Sep 18, 2021',
-        featured   : false,
-        progress   : {
+        id: '02992ac9-d1a3-4167-b70e-8a1d5b5ba253',
+        title: 'Building Beautiful UIs with Flutter',
+        slug: 'building-beautiful-uis-with-flutter',
+        description:
+            "Dive deep into Flutter's hidden secrets for creating beautiful UIs",
+        category: 'web',
+        duration: 90,
+        totalSteps: 11,
+        updatedAt: 'Sep 18, 2021',
+        featured: false,
+        progress: {
             currentStep: 8,
-            completed  : 2,
+            completed: 2,
         },
     },
     {
-        id         : '2139512f-41fb-4a4a-841a-0b4ac034f9b4',
-        title      : 'Firebase Android',
-        slug       : 'firebase-android',
+        id: '2139512f-41fb-4a4a-841a-0b4ac034f9b4',
+        title: 'Firebase Android',
+        slug: 'firebase-android',
         description: 'Beginners guide of Firebase for Android',
-        category   : 'android',
-        duration   : 45,
-        totalSteps : 11,
-        updatedAt  : 'Apr 24, 2021',
-        featured   : false,
-        progress   : {
+        category: 'android',
+        duration: 45,
+        totalSteps: 11,
+        updatedAt: 'Apr 24, 2021',
+        featured: false,
+        progress: {
             currentStep: 0,
-            completed  : 0,
+            completed: 0,
         },
     },
     {
-        id         : '65e0a0e0-d8c0-4117-a3cb-eb74f8e28809',
-        title      : 'Simulating a Thread Network Using OpenThread',
-        slug       : 'simulating-a-thread-network-using-openthread',
-        description: 'Introductory course for OpenThread and Simulating a Thread Network',
-        category   : 'web',
-        duration   : 45,
-        totalSteps : 11,
-        updatedAt  : 'Jun 05, 2021',
-        featured   : false,
-        progress   : {
+        id: '65e0a0e0-d8c0-4117-a3cb-eb74f8e28809',
+        title: 'Simulating a Thread Network Using OpenThread',
+        slug: 'simulating-a-thread-network-using-openthread',
+        description:
+            'Introductory course for OpenThread and Simulating a Thread Network',
+        category: 'web',
+        duration: 45,
+        totalSteps: 11,
+        updatedAt: 'Jun 05, 2021',
+        featured: false,
+        progress: {
             currentStep: 0,
-            completed  : 0,
+            completed: 0,
         },
     },
     {
-        id         : 'c202ebc9-9be3-433a-9d38-7003b3ed7b7a',
-        title      : 'Your First Progressive Web App',
-        slug       : 'your-first-progressive-web-app',
+        id: 'c202ebc9-9be3-433a-9d38-7003b3ed7b7a',
+        title: 'Your First Progressive Web App',
+        slug: 'your-first-progressive-web-app',
         description: 'Step by step guide for creating a PWA from scratch',
-        category   : 'web',
-        duration   : 30,
-        totalSteps : 11,
-        updatedAt  : 'Oct 14, 2021',
-        featured   : false,
-        progress   : {
+        category: 'web',
+        duration: 30,
+        totalSteps: 11,
+        updatedAt: 'Oct 14, 2021',
+        featured: false,
+        progress: {
             currentStep: 0,
-            completed  : 0,
+            completed: 0,
         },
     },
     {
-        id         : '980ae7da-9f77-4e30-aa98-1b1ea594e775',
-        title      : 'Launch Cloud Datalab',
-        slug       : 'launch-cloud-datalab',
+        id: '980ae7da-9f77-4e30-aa98-1b1ea594e775',
+        title: 'Launch Cloud Datalab',
+        slug: 'launch-cloud-datalab',
         description: 'From start to finish: Launch Cloud Datalab',
-        category   : 'cloud',
-        duration   : 60,
-        totalSteps : 11,
-        updatedAt  : 'Dec 16, 2021',
-        featured   : false,
-        progress   : {
+        category: 'cloud',
+        duration: 60,
+        totalSteps: 11,
+        updatedAt: 'Dec 16, 2021',
+        featured: false,
+        progress: {
             currentStep: 0,
-            completed  : 0,
+            completed: 0,
         },
     },
     {
-        id         : 'c9748ea9-4117-492c-bdb2-55085b515978',
-        title      : 'Cloud Firestore',
-        slug       : 'cloud-firestore',
+        id: 'c9748ea9-4117-492c-bdb2-55085b515978',
+        title: 'Cloud Firestore',
+        slug: 'cloud-firestore',
         description: 'Step by step guide for setting up Cloud Firestore',
-        category   : 'firebase',
-        duration   : 90,
-        totalSteps : 11,
-        updatedAt  : 'Apr 04, 2021',
-        featured   : false,
-        progress   : {
+        category: 'firebase',
+        duration: 90,
+        totalSteps: 11,
+        updatedAt: 'Apr 04, 2021',
+        featured: false,
+        progress: {
             currentStep: 2,
-            completed  : 0,
+            completed: 0,
         },
     },
 ];
@@ -651,69 +654,71 @@ export const demoCourseContent = `
 `;
 export const demoCourseSteps = [
     {
-        order   : 0,
-        title   : 'Introduction',
+        order: 0,
+        title: 'Introduction',
         subtitle: 'Introducing the library and how it works',
-        content : `<h2 class="text-2xl sm:text-3xl">Introduction</h1> ${demoCourseContent}`,
+        content: `<h2 class="text-2xl sm:text-3xl">Introduction</h1> ${demoCourseContent}`,
     },
     {
-        order   : 1,
-        title   : 'Get the sample code',
+        order: 1,
+        title: 'Get the sample code',
         subtitle: 'Where to find the sample code and how to access it',
-        content : `<h2 class="text-2xl sm:text-3xl">Get the sample code</h1> ${demoCourseContent}`,
+        content: `<h2 class="text-2xl sm:text-3xl">Get the sample code</h1> ${demoCourseContent}`,
     },
     {
-        order   : 2,
-        title   : 'Create a Firebase project and Set up your app',
-        subtitle: 'How to create a basic Firebase project and how to run it locally',
-        content : `<h2 class="text-2xl sm:text-3xl">Create a Firebase project and Set up your app</h1> ${demoCourseContent}`,
+        order: 2,
+        title: 'Create a Firebase project and Set up your app',
+        subtitle:
+            'How to create a basic Firebase project and how to run it locally',
+        content: `<h2 class="text-2xl sm:text-3xl">Create a Firebase project and Set up your app</h1> ${demoCourseContent}`,
     },
     {
-        order   : 3,
-        title   : 'Install the Firebase Command Line Interface',
+        order: 3,
+        title: 'Install the Firebase Command Line Interface',
         subtitle: 'Setting up the Firebase CLI to access command line tools',
-        content : `<h2 class="text-2xl sm:text-3xl">Install the Firebase Command Line Interface</h1> ${demoCourseContent}`,
+        content: `<h2 class="text-2xl sm:text-3xl">Install the Firebase Command Line Interface</h1> ${demoCourseContent}`,
     },
     {
-        order   : 4,
-        title   : 'Deploy and run the web app',
+        order: 4,
+        title: 'Deploy and run the web app',
         subtitle: 'How to build, push and run the project remotely',
-        content : `<h2 class="text-2xl sm:text-3xl">Deploy and run the web app</h1> ${demoCourseContent}`,
+        content: `<h2 class="text-2xl sm:text-3xl">Deploy and run the web app</h1> ${demoCourseContent}`,
     },
     {
-        order   : 5,
-        title   : 'The Functions Directory',
+        order: 5,
+        title: 'The Functions Directory',
         subtitle: 'Introducing the Functions and Functions Directory',
-        content : `<h2 class="text-2xl sm:text-3xl">The Functions Directory</h1> ${demoCourseContent}`,
+        content: `<h2 class="text-2xl sm:text-3xl">The Functions Directory</h1> ${demoCourseContent}`,
     },
     {
-        order   : 6,
-        title   : 'Import the Cloud Functions and Firebase Admin modules',
-        subtitle: 'Create your first Function and run it to administer your app',
-        content : `<h2 class="text-2xl sm:text-3xl">Import the Cloud Functions and Firebase Admin modules</h1> ${demoCourseContent}`,
+        order: 6,
+        title: 'Import the Cloud Functions and Firebase Admin modules',
+        subtitle:
+            'Create your first Function and run it to administer your app',
+        content: `<h2 class="text-2xl sm:text-3xl">Import the Cloud Functions and Firebase Admin modules</h1> ${demoCourseContent}`,
     },
     {
-        order   : 7,
-        title   : 'Welcome New Users',
+        order: 7,
+        title: 'Welcome New Users',
         subtitle: 'How to create a welcome message for the new users',
-        content : `<h2 class="text-2xl sm:text-3xl">Welcome New Users</h1> ${demoCourseContent}`,
+        content: `<h2 class="text-2xl sm:text-3xl">Welcome New Users</h1> ${demoCourseContent}`,
     },
     {
-        order   : 8,
-        title   : 'Images moderation',
+        order: 8,
+        title: 'Images moderation',
         subtitle: 'How to moderate images; crop, resize, optimize',
-        content : `<h2 class="text-2xl sm:text-3xl">Images moderation</h1> ${demoCourseContent}`,
+        content: `<h2 class="text-2xl sm:text-3xl">Images moderation</h1> ${demoCourseContent}`,
     },
     {
-        order   : 9,
-        title   : 'New Message Notifications',
+        order: 9,
+        title: 'New Message Notifications',
         subtitle: 'How to create and push a notification to a user',
-        content : `<h2 class="text-2xl sm:text-3xl">New Message Notifications</h1> ${demoCourseContent}`,
+        content: `<h2 class="text-2xl sm:text-3xl">New Message Notifications</h1> ${demoCourseContent}`,
     },
     {
-        order   : 10,
-        title   : 'Congratulations!',
+        order: 10,
+        title: 'Congratulations!',
         subtitle: 'Nice work, you have created your first application',
-        content : `<h2 class="text-2xl sm:text-3xl">Congratulations!</h1> ${demoCourseContent}`,
+        content: `<h2 class="text-2xl sm:text-3xl">Congratulations!</h1> ${demoCourseContent}`,
     },
 ];

src/app/mock-api/apps/chat/api.ts

@@ -1,11 +1,15 @@
 import { Injectable } from '@angular/core';
 import { FuseMockApiService } from '@fuse/lib/mock-api';
-import { chats as chatsData, contacts as contactsData, messages as messagesData, profile as profileData } from 'app/mock-api/apps/chat/data';
+import {
+    chats as chatsData,
+    contacts as contactsData,
+    messages as messagesData,
+    profile as profileData,
+} from 'app/mock-api/apps/chat/data';
 import { assign, cloneDeep, omit } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class ChatMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class ChatMockApi {
     private _chats: any[] = chatsData;
     private _contacts: any[] = contactsData;
     private _messages: any[] = messagesData;
@@ -14,22 +18,26 @@ export class ChatMockApi
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
 
         // Modify the chats array to attach certain data to it
-        this._chats = this._chats.map(chat => ({
+        this._chats = this._chats.map((chat) => ({
             ...chat,
             // Get the actual contact object from the id and attach it to the chat
-            contact: this._contacts.find(contact => contact.id === chat.contactId),
+            contact: this._contacts.find(
+                (contact) => contact.id === chat.contactId
+            ),
             // Since we use same set of messages on all chats, we assign them here.
-            messages: this._messages.map(message => ({
+            messages: this._messages.map((message) => ({
                 ...message,
-                chatId   : chat.id,
-                contactId: message.contactId === 'me' ? this._profile.id : chat.contactId,
-                isMine   : message.contactId === 'me',
+                chatId: chat.id,
+                contactId:
+                    message.contactId === 'me'
+                        ? this._profile.id
+                        : chat.contactId,
+                isMine: message.contactId === 'me',
             })),
         }));
     }
@@ -41,29 +49,24 @@ export class ChatMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Chats - GET
         // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/apps/chat/chats')
-            .reply(() =>
-            {
-                // Clone the chats
-                const chats = cloneDeep(this._chats);
+        this._fuseMockApiService.onGet('api/apps/chat/chats').reply(() => {
+            // Clone the chats
+            const chats = cloneDeep(this._chats);
 
-                // Return the response
-                return [200, chats];
-            });
+            // Return the response
+            return [200, chats];
+        });
 
         // -----------------------------------------------------------------------------------------------------
         // @ Chat - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/chat/chat')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the chat id
                 const id = request.params.get('id');
 
@@ -71,7 +74,7 @@ export class ChatMockApi
                 const chats = cloneDeep(this._chats);
 
                 // Find the chat we need
-                const chat = chats.find(item => item.id === id);
+                const chat = chats.find((item) => item.id === id);
 
                 // Return the response
                 return [200, chat];
@@ -82,8 +85,7 @@ export class ChatMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/chat/chat')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and chat
                 const id = request.body.id;
                 const chat = cloneDeep(request.body.chat);
@@ -92,10 +94,8 @@ export class ChatMockApi
                 let updatedChat = null;
 
                 // Find the chat and update it
-                this._chats.forEach((item, index, chats) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._chats.forEach((item, index, chats) => {
+                    if (item.id === id) {
                         // Update the chat
                         chats[index] = assign({}, chats[index], chat);
 
@@ -111,30 +111,28 @@ export class ChatMockApi
         // -----------------------------------------------------------------------------------------------------
         // @ Contacts - GET
         // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/apps/chat/contacts')
-            .reply(() =>
-            {
-                // Clone the contacts
-                let contacts = cloneDeep(this._contacts);
+        this._fuseMockApiService.onGet('api/apps/chat/contacts').reply(() => {
+            // Clone the contacts
+            let contacts = cloneDeep(this._contacts);
 
-                // Sort the contacts by the name field by default
-                contacts.sort((a, b) => a.name.localeCompare(b.name));
+            // Sort the contacts by the name field by default
+            contacts.sort((a, b) => a.name.localeCompare(b.name));
 
-                // Omit details and attachments from contacts
-                contacts = contacts.map(contact => omit(contact, ['details', 'attachments']));
+            // Omit details and attachments from contacts
+            contacts = contacts.map((contact) =>
+                omit(contact, ['details', 'attachments'])
+            );
 
-                // Return the response
-                return [200, contacts];
-            });
+            // Return the response
+            return [200, contacts];
+        });
 
         // -----------------------------------------------------------------------------------------------------
         // @ Contact Details - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/chat/contact')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the contact id
                 const id = request.params.get('id');
 
@@ -142,7 +140,7 @@ export class ChatMockApi
                 const contacts = cloneDeep(this._contacts);
 
                 // Find the contact
-                const contact = contacts.find(item => item.id === id);
+                const contact = contacts.find((item) => item.id === id);
 
                 // Return the response
                 return [200, contact];
@@ -151,15 +149,12 @@ export class ChatMockApi
         // -----------------------------------------------------------------------------------------------------
         // @ Profile - GET
         // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/apps/chat/profile')
-            .reply(() =>
-            {
-                // Clone the profile
-                const profile = cloneDeep(this._profile);
+        this._fuseMockApiService.onGet('api/apps/chat/profile').reply(() => {
+            // Clone the profile
+            const profile = cloneDeep(this._profile);
 
-                // Return the response
-                return [200, profile];
-            });
+            // Return the response
+            return [200, profile];
+        });
     }
 }

src/app/mock-api/apps/contacts/api.ts

@@ -1,12 +1,15 @@
 import { Injectable } from '@angular/core';
 import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
-import { contacts as contactsData, countries as countriesData, tags as tagsData } from 'app/mock-api/apps/contacts/data';
+import {
+    contacts as contactsData,
+    countries as countriesData,
+    tags as tagsData,
+} from 'app/mock-api/apps/contacts/data';
 import { assign, cloneDeep } from 'lodash-es';
 import { from, map } from 'rxjs';
 
-@Injectable({providedIn: 'root'})
-export class ContactsMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class ContactsMockApi {
     private _contacts: any[] = contactsData;
     private _countries: any[] = countriesData;
     private _tags: any[] = tagsData;
@@ -14,8 +17,7 @@ export class ContactsMockApi
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -27,32 +29,27 @@ export class ContactsMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Contacts - GET
         // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/apps/contacts/all')
-            .reply(() =>
-            {
-                // Clone the contacts
-                const contacts = cloneDeep(this._contacts);
+        this._fuseMockApiService.onGet('api/apps/contacts/all').reply(() => {
+            // Clone the contacts
+            const contacts = cloneDeep(this._contacts);
 
-                // Sort the contacts by the name field by default
-                contacts.sort((a, b) => a.name.localeCompare(b.name));
+            // Sort the contacts by the name field by default
+            contacts.sort((a, b) => a.name.localeCompare(b.name));
 
-                // Return the response
-                return [200, contacts];
-            });
+            // Return the response
+            return [200, contacts];
+        });
 
         // -----------------------------------------------------------------------------------------------------
         // @ Contacts Search - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/contacts/search')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the search query
                 const query = request.params.get('query');
 
@@ -60,10 +57,15 @@ export class ContactsMockApi
                 let contacts = cloneDeep(this._contacts);
 
                 // If the query exists...
-                if ( query )
-                {
+                if (query) {
                     // Filter the contacts
-                    contacts = contacts.filter(contact => contact.name && contact.name.toLowerCase().includes(query.toLowerCase()));
+                    contacts = contacts.filter(
+                        (contact) =>
+                            contact.name &&
+                            contact.name
+                                .toLowerCase()
+                                .includes(query.toLowerCase())
+                    );
                 }
 
                 // Sort the contacts by the name field by default
@@ -78,8 +80,7 @@ export class ContactsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/contacts/contact')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id from the params
                 const id = request.params.get('id');
 
@@ -87,7 +88,7 @@ export class ContactsMockApi
                 const contacts = cloneDeep(this._contacts);
 
                 // Find the contact
-                const contact = contacts.find(item => item.id === id);
+                const contact = contacts.find((item) => item.id === id);
 
                 // Return the response
                 return [200, contact];
@@ -98,23 +99,22 @@ export class ContactsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/apps/contacts/contact')
-            .reply(() =>
-            {
+            .reply(() => {
                 // Generate a new contact
                 const newContact = {
-                    id          : FuseMockApiUtils.guid(),
-                    avatar      : null,
-                    name        : 'New Contact',
-                    emails      : [],
+                    id: FuseMockApiUtils.guid(),
+                    avatar: null,
+                    name: 'New Contact',
+                    emails: [],
                     phoneNumbers: [],
-                    job         : {
-                        title  : '',
+                    job: {
+                        title: '',
                         company: '',
                     },
-                    birthday    : null,
-                    address     : null,
-                    notes       : null,
-                    tags        : [],
+                    birthday: null,
+                    address: null,
+                    notes: null,
+                    tags: [],
                 };
 
                 // Unshift the new contact
@@ -129,8 +129,7 @@ export class ContactsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/contacts/contact')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and contact
                 const id = request.body.id;
                 const contact = cloneDeep(request.body.contact);
@@ -139,10 +138,8 @@ export class ContactsMockApi
                 let updatedContact = null;
 
                 // Find the contact and update it
-                this._contacts.forEach((item, index, contacts) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._contacts.forEach((item, index, contacts) => {
+                    if (item.id === id) {
                         // Update the contact
                         contacts[index] = assign({}, contacts[index], contact);
 
@@ -160,16 +157,13 @@ export class ContactsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/contacts/contact')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the contact and delete it
-                this._contacts.forEach((item, index) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._contacts.forEach((item, index) => {
+                    if (item.id === id) {
                         this._contacts.splice(index, 1);
                     }
                 });
@@ -197,8 +191,7 @@ export class ContactsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/apps/contacts/tag')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the tag
                 const newTag = cloneDeep(request.body.tag);
 
@@ -217,8 +210,7 @@ export class ContactsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/contacts/tag')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and tag
                 const id = request.body.id;
                 const tag = cloneDeep(request.body.tag);
@@ -227,10 +219,8 @@ export class ContactsMockApi
                 let updatedTag = null;
 
                 // Find the tag and update it
-                this._tags.forEach((item, index, tags) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._tags.forEach((item, index, tags) => {
+                    if (item.id === id) {
                         // Update the tag
                         tags[index] = assign({}, tags[index], tag);
 
@@ -248,26 +238,24 @@ export class ContactsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/contacts/tag')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the tag and delete it
-                this._tags.forEach((item, index) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._tags.forEach((item, index) => {
+                    if (item.id === id) {
                         this._tags.splice(index, 1);
                     }
                 });
 
                 // Get the contacts that have the tag
-                const contactsWithTag = this._contacts.filter(contact => contact.tags.indexOf(id) > -1);
+                const contactsWithTag = this._contacts.filter(
+                    (contact) => contact.tags.indexOf(id) > -1
+                );
 
                 // Iterate through them and delete the tag
-                contactsWithTag.forEach((contact) =>
-                {
+                contactsWithTag.forEach((contact) => {
                     contact.tags.splice(contact.tags.indexOf(id), 1);
                 });
 
@@ -285,34 +273,27 @@ export class ContactsMockApi
          * @param file
          */
         const readAsDataURL = (file: File): Promise<any> =>
-
             // Return a new promise
-            new Promise((resolve, reject) =>
-            {
+            new Promise((resolve, reject) => {
                 // Create a new reader
                 const reader = new FileReader();
 
                 // Resolve the promise on success
-                reader.onload = (): void =>
-                {
+                reader.onload = (): void => {
                     resolve(reader.result);
                 };
 
                 // Reject the promise on error
-                reader.onerror = (e): void =>
-                {
+                reader.onerror = (e): void => {
                     reject(e);
                 };
 
                 // Read the file as the
                 reader.readAsDataURL(file);
-            })
-        ;
-
+            });
         this._fuseMockApiService
             .onPost('api/apps/contacts/avatar')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and avatar
                 const id = request.body.id;
                 const avatar = request.body.avatar;
@@ -327,13 +308,10 @@ export class ContactsMockApi
                 // the src attribute of the img tag works with both image urls
                 // and encoded images.
                 return from(readAsDataURL(avatar)).pipe(
-                    map((path) =>
-                    {
+                    map((path) => {
                         // Find the contact and update it
-                        this._contacts.forEach((item, index, contacts) =>
-                        {
-                            if ( item.id === id )
-                            {
+                        this._contacts.forEach((item, index, contacts) => {
+                            if (item.id === id) {
                                 // Update the avatar
                                 contacts[index].avatar = path;
 
@@ -344,7 +322,7 @@ export class ContactsMockApi
 
                         // Return the response
                         return [200, updatedContact];
-                    }),
+                    })
                 );
             });
     }

src/app/mock-api/apps/ecommerce/inventory/api.ts

@@ -1,11 +1,16 @@
 import { Injectable } from '@angular/core';
 import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
-import { brands as brandsData, categories as categoriesData, products as productsData, tags as tagsData, vendors as vendorsData } from 'app/mock-api/apps/ecommerce/inventory/data';
+import {
+    brands as brandsData,
+    categories as categoriesData,
+    products as productsData,
+    tags as tagsData,
+    vendors as vendorsData,
+} from 'app/mock-api/apps/ecommerce/inventory/data';
 import { assign, cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class ECommerceInventoryMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class ECommerceInventoryMockApi {
     private _categories: any[] = categoriesData;
     private _brands: any[] = brandsData;
     private _products: any[] = productsData;
@@ -15,8 +20,7 @@ export class ECommerceInventoryMockApi
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -28,8 +32,7 @@ export class ECommerceInventoryMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Categories - GET
         // -----------------------------------------------------------------------------------------------------
@@ -49,8 +52,7 @@ export class ECommerceInventoryMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/ecommerce/inventory/products', 300)
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get available queries
                 const search = request.params.get('search');
                 const sort = request.params.get('sort') || 'name';
@@ -62,25 +64,30 @@ export class ECommerceInventoryMockApi
                 let products: any[] | null = cloneDeep(this._products);
 
                 // Sort the products
-                if ( sort === 'sku' || sort === 'name' || sort === 'active' )
-                {
-                    products.sort((a, b) =>
-                    {
+                if (sort === 'sku' || sort === 'name' || sort === 'active') {
+                    products.sort((a, b) => {
                         const fieldA = a[sort].toString().toUpperCase();
                         const fieldB = b[sort].toString().toUpperCase();
-                        return order === 'asc' ? fieldA.localeCompare(fieldB) : fieldB.localeCompare(fieldA);
+                        return order === 'asc'
+                            ? fieldA.localeCompare(fieldB)
+                            : fieldB.localeCompare(fieldA);
                     });
-                }
-                else
-                {
-                    products.sort((a, b) => order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]);
+                } else {
+                    products.sort((a, b) =>
+                        order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
+                    );
                 }
 
                 // If search exists...
-                if ( search )
-                {
+                if (search) {
                     // Filter the products
-                    products = products.filter(contact => contact.name && contact.name.toLowerCase().includes(search.toLowerCase()));
+                    products = products.filter(
+                        (contact) =>
+                            contact.name &&
+                            contact.name
+                                .toLowerCase()
+                                .includes(search.toLowerCase())
+                    );
                 }
 
                 // Paginate - Start
@@ -88,7 +95,7 @@ export class ECommerceInventoryMockApi
 
                 // Calculate pagination details
                 const begin = page * size;
-                const end = Math.min((size * (page + 1)), productsLength);
+                const end = Math.min(size * (page + 1), productsLength);
                 const lastPage = Math.max(Math.ceil(productsLength / size), 1);
 
                 // Prepare the pagination object
@@ -98,26 +105,23 @@ export class ECommerceInventoryMockApi
                 // the last possible page number, return null for
                 // products but also send the last possible page so
                 // the app can navigate to there
-                if ( page > lastPage )
-                {
+                if (page > lastPage) {
                     products = null;
                     pagination = {
                         lastPage,
                     };
-                }
-                else
-                {
+                } else {
                     // Paginate the results by size
                     products = products.slice(begin, end);
 
                     // Prepare the pagination mock-api
                     pagination = {
-                        length    : productsLength,
-                        size      : size,
-                        page      : page,
-                        lastPage  : lastPage,
+                        length: productsLength,
+                        size: size,
+                        page: page,
+                        lastPage: lastPage,
                         startIndex: begin,
-                        endIndex  : end - 1,
+                        endIndex: end - 1,
                     };
                 }
 
@@ -136,8 +140,7 @@ export class ECommerceInventoryMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/ecommerce/inventory/product')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id from the params
                 const id = request.params.get('id');
 
@@ -145,7 +148,7 @@ export class ECommerceInventoryMockApi
                 const products = cloneDeep(this._products);
 
                 // Find the product
-                const product = products.find(item => item.id === id);
+                const product = products.find((item) => item.id === id);
 
                 // Return the response
                 return [200, product];
@@ -156,29 +159,28 @@ export class ECommerceInventoryMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/apps/ecommerce/inventory/product')
-            .reply(() =>
-            {
+            .reply(() => {
                 // Generate a new product
                 const newProduct = {
-                    id         : FuseMockApiUtils.guid(),
-                    category   : '',
-                    name       : 'A New Product',
+                    id: FuseMockApiUtils.guid(),
+                    category: '',
+                    name: 'A New Product',
                     description: '',
-                    tags       : [],
-                    sku        : '',
-                    barcode    : '',
-                    brand      : '',
-                    vendor     : '',
-                    stock      : '',
-                    reserved   : '',
-                    cost       : '',
-                    basePrice  : '',
-                    taxPercent : '',
-                    price      : '',
-                    weight     : '',
-                    thumbnail  : '',
-                    images     : [],
-                    active     : false,
+                    tags: [],
+                    sku: '',
+                    barcode: '',
+                    brand: '',
+                    vendor: '',
+                    stock: '',
+                    reserved: '',
+                    cost: '',
+                    basePrice: '',
+                    taxPercent: '',
+                    price: '',
+                    weight: '',
+                    thumbnail: '',
+                    images: [],
+                    active: false,
                 };
 
                 // Unshift the new product
@@ -193,8 +195,7 @@ export class ECommerceInventoryMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/ecommerce/inventory/product')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and product
                 const id = request.body.id;
                 const product = cloneDeep(request.body.product);
@@ -203,10 +204,8 @@ export class ECommerceInventoryMockApi
                 let updatedProduct = null;
 
                 // Find the product and update it
-                this._products.forEach((item, index, products) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._products.forEach((item, index, products) => {
+                    if (item.id === id) {
                         // Update the product
                         products[index] = assign({}, products[index], product);
 
@@ -224,16 +223,13 @@ export class ECommerceInventoryMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/ecommerce/inventory/product')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the product and delete it
-                this._products.forEach((item, index) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._products.forEach((item, index) => {
+                    if (item.id === id) {
                         this._products.splice(index, 1);
                     }
                 });
@@ -254,8 +250,7 @@ export class ECommerceInventoryMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/apps/ecommerce/inventory/tag')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the tag
                 const newTag = cloneDeep(request.body.tag);
 
@@ -274,8 +269,7 @@ export class ECommerceInventoryMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/ecommerce/inventory/tag')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and tag
                 const id = request.body.id;
                 const tag = cloneDeep(request.body.tag);
@@ -284,10 +278,8 @@ export class ECommerceInventoryMockApi
                 let updatedTag = null;
 
                 // Find the tag and update it
-                this._tags.forEach((item, index, tags) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._tags.forEach((item, index, tags) => {
+                    if (item.id === id) {
                         // Update the tag
                         tags[index] = assign({}, tags[index], tag);
 
@@ -305,26 +297,24 @@ export class ECommerceInventoryMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/ecommerce/inventory/tag')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the tag and delete it
-                this._tags.forEach((item, index) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._tags.forEach((item, index) => {
+                    if (item.id === id) {
                         this._tags.splice(index, 1);
                     }
                 });
 
                 // Get the products that have the tag
-                const productsWithTag = this._products.filter(product => product.tags.indexOf(id) > -1);
+                const productsWithTag = this._products.filter(
+                    (product) => product.tags.indexOf(id) > -1
+                );
 
                 // Iterate through them and delete the tag
-                productsWithTag.forEach((product) =>
-                {
+                productsWithTag.forEach((product) => {
                     product.tags.splice(product.tags.indexOf(id), 1);
                 });
 

src/app/mock-api/apps/file-manager/api.ts

@@ -3,16 +3,14 @@ import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
 import { items as itemsData } from 'app/mock-api/apps/file-manager/data';
 import { cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class FileManagerMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class FileManagerMockApi {
     private _items: any[] = itemsData;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -24,29 +22,30 @@ export class FileManagerMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Items - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/file-manager')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Clone the items
                 let items = cloneDeep(this._items);
 
                 // See if the folder id exist
-                const folderId = request.params.get('folderId') === 'null' ? null : request.params.get('folderId');
+                const folderId =
+                    request.params.get('folderId') === 'null'
+                        ? null
+                        : request.params.get('folderId');
 
                 // Filter the items by folder id. If folder id is null,
                 // that means we want to root items which have folder id
                 // of null
-                items = items.filter(item => item.folderId === folderId);
+                items = items.filter((item) => item.folderId === folderId);
 
                 // Separate the items by folders and files
-                const folders = items.filter(item => item.type === 'folder');
-                const files = items.filter(item => item.type !== 'folder');
+                const folders = items.filter((item) => item.type === 'folder');
+                const files = items.filter((item) => item.type !== 'folder');
 
                 // Sort the folders and files alphabetically by filename
                 folders.sort((a, b) => a.name.localeCompare(b.name));
@@ -61,19 +60,20 @@ export class FileManagerMockApi
                 let currentFolder = null;
 
                 // Get the current folder and add it as the first entry
-                if ( folderId )
-                {
-                    currentFolder = pathItems.find(item => item.id === folderId);
+                if (folderId) {
+                    currentFolder = pathItems.find(
+                        (item) => item.id === folderId
+                    );
                     path.push(currentFolder);
                 }
 
                 // Start traversing and storing the folders as a path array
                 // until we hit null on the folder id
-                while ( currentFolder?.folderId )
-                {
-                    currentFolder = pathItems.find(item => item.id === currentFolder.folderId);
-                    if ( currentFolder )
-                    {
+                while (currentFolder?.folderId) {
+                    currentFolder = pathItems.find(
+                        (item) => item.id === currentFolder.folderId
+                    );
+                    if (currentFolder) {
                         path.unshift(currentFolder);
                     }
                 }

src/app/mock-api/apps/file-manager/data.ts

@@ -1,257 +1,258 @@
 /* eslint-disable */
 export const items = [
     {
-        id         : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
-        folderId   : null,
-        name       : 'Personal',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'April 24, 2018',
-        modifiedAt : 'April 24, 2018',
-        size       : '87 MB',
-        type       : 'folder',
-        contents   : '57 files',
-        description: 'Personal documents such as insurance policies, tax papers and etc.',
+        id: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
+        folderId: null,
+        name: 'Personal',
+        createdBy: 'Brian Hughes',
+        createdAt: 'April 24, 2018',
+        modifiedAt: 'April 24, 2018',
+        size: '87 MB',
+        type: 'folder',
+        contents: '57 files',
+        description:
+            'Personal documents such as insurance policies, tax papers and etc.',
     },
     {
-        id         : '6da8747f-b474-4c9a-9eba-5ef212285500',
-        folderId   : null,
-        name       : 'Photos',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'November 01, 2021',
-        modifiedAt : 'November 01, 2021',
-        size       : '3015 MB',
-        type       : 'folder',
-        contents   : '907 files',
+        id: '6da8747f-b474-4c9a-9eba-5ef212285500',
+        folderId: null,
+        name: 'Photos',
+        createdBy: 'Brian Hughes',
+        createdAt: 'November 01, 2021',
+        modifiedAt: 'November 01, 2021',
+        size: '3015 MB',
+        type: 'folder',
+        contents: '907 files',
         description: 'Personal photos; selfies, family, vacation and etc.',
     },
     {
-        id         : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
-        folderId   : null,
-        name       : 'Work',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'May 8, 2020',
-        modifiedAt : 'May 8, 2020',
-        size       : '14 MB',
-        type       : 'folder',
-        contents   : '24 files',
+        id: 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
+        folderId: null,
+        name: 'Work',
+        createdBy: 'Brian Hughes',
+        createdAt: 'May 8, 2020',
+        modifiedAt: 'May 8, 2020',
+        size: '14 MB',
+        type: 'folder',
+        contents: '24 files',
         description: 'Work related files, mainly documents and paychecks.',
     },
     {
-        id         : '5cb66e32-d1ac-4b9a-8c34-5991ce25add2',
-        folderId   : null,
-        name       : 'Contract #123',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'January 14, 2021',
-        modifiedAt : 'January 14, 2021',
-        size       : '1.2 MB',
-        type       : 'PDF',
-        contents   : null,
+        id: '5cb66e32-d1ac-4b9a-8c34-5991ce25add2',
+        folderId: null,
+        name: 'Contract #123',
+        createdBy: 'Brian Hughes',
+        createdAt: 'January 14, 2021',
+        modifiedAt: 'January 14, 2021',
+        size: '1.2 MB',
+        type: 'PDF',
+        contents: null,
         description: null,
     },
     {
-        id         : '3ffc3d84-8f2d-4929-903a-ef6fc21657a7',
-        folderId   : null,
-        name       : 'Estimated budget',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'December 14, 2020',
-        modifiedAt : 'December 14, 2020',
-        size       : '679 KB',
-        type       : 'XLS',
-        contents   : null,
+        id: '3ffc3d84-8f2d-4929-903a-ef6fc21657a7',
+        folderId: null,
+        name: 'Estimated budget',
+        createdBy: 'Brian Hughes',
+        createdAt: 'December 14, 2020',
+        modifiedAt: 'December 14, 2020',
+        size: '679 KB',
+        type: 'XLS',
+        contents: null,
         description: null,
     },
     {
-        id         : '157adb9a-14f8-4559-ac93-8be893c9f80a',
-        folderId   : null,
-        name       : 'DMCA notice #42',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'May 8, 2021',
-        modifiedAt : 'May 8, 2021',
-        size       : '1.5 MB',
-        type       : 'DOC',
-        contents   : null,
+        id: '157adb9a-14f8-4559-ac93-8be893c9f80a',
+        folderId: null,
+        name: 'DMCA notice #42',
+        createdBy: 'Brian Hughes',
+        createdAt: 'May 8, 2021',
+        modifiedAt: 'May 8, 2021',
+        size: '1.5 MB',
+        type: 'DOC',
+        contents: null,
         description: null,
     },
     {
-        id         : '4f64597a-df7e-461c-ad60-f33e5f7e0747',
-        folderId   : null,
-        name       : 'Invoices',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'January 12, 2020',
-        modifiedAt : 'January 12, 2020',
-        size       : '17.8 MB',
-        type       : 'PDF',
-        contents   : null,
+        id: '4f64597a-df7e-461c-ad60-f33e5f7e0747',
+        folderId: null,
+        name: 'Invoices',
+        createdBy: 'Brian Hughes',
+        createdAt: 'January 12, 2020',
+        modifiedAt: 'January 12, 2020',
+        size: '17.8 MB',
+        type: 'PDF',
+        contents: null,
         description: null,
     },
     {
-        id         : 'e445c445-57b2-4476-8c62-b068e3774b8e',
-        folderId   : null,
-        name       : 'Crash logs',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'June 8, 2020',
-        modifiedAt : 'June 8, 2020',
-        size       : '11.3 MB',
-        type       : 'TXT',
-        contents   : null,
+        id: 'e445c445-57b2-4476-8c62-b068e3774b8e',
+        folderId: null,
+        name: 'Crash logs',
+        createdBy: 'Brian Hughes',
+        createdAt: 'June 8, 2020',
+        modifiedAt: 'June 8, 2020',
+        size: '11.3 MB',
+        type: 'TXT',
+        contents: null,
         description: null,
     },
     {
-        id         : 'b482f93e-7847-4614-ad48-b78b78309f81',
-        folderId   : null,
-        name       : 'System logs',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'June 8, 2020',
-        modifiedAt : 'June 8, 2020',
-        size       : '9.3 MB',
-        type       : 'TXT',
-        contents   : null,
+        id: 'b482f93e-7847-4614-ad48-b78b78309f81',
+        folderId: null,
+        name: 'System logs',
+        createdBy: 'Brian Hughes',
+        createdAt: 'June 8, 2020',
+        modifiedAt: 'June 8, 2020',
+        size: '9.3 MB',
+        type: 'TXT',
+        contents: null,
         description: null,
     },
     {
-        id         : 'ec07a98d-2e5b-422c-a9b2-b5d1c0e263f5',
-        folderId   : null,
-        name       : 'Personal projects',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'March 18, 2020',
-        modifiedAt : 'March 18, 2020',
-        size       : '4.3 MB',
-        type       : 'DOC',
-        contents   : null,
+        id: 'ec07a98d-2e5b-422c-a9b2-b5d1c0e263f5',
+        folderId: null,
+        name: 'Personal projects',
+        createdBy: 'Brian Hughes',
+        createdAt: 'March 18, 2020',
+        modifiedAt: 'March 18, 2020',
+        size: '4.3 MB',
+        type: 'DOC',
+        contents: null,
         description: null,
     },
     {
-        id         : 'ae908d59-07da-4dd8-aba0-124e50289295',
-        folderId   : null,
-        name       : 'Biometric portrait',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'August 29, 2020',
-        modifiedAt : 'August 29, 2020',
-        size       : '4.5 MB',
-        type       : 'JPG',
-        contents   : null,
+        id: 'ae908d59-07da-4dd8-aba0-124e50289295',
+        folderId: null,
+        name: 'Biometric portrait',
+        createdBy: 'Brian Hughes',
+        createdAt: 'August 29, 2020',
+        modifiedAt: 'August 29, 2020',
+        size: '4.5 MB',
+        type: 'JPG',
+        contents: null,
         description: null,
     },
     {
-        id         : '4038a5b6-5b1a-432d-907c-e037aeb817a8',
-        folderId   : null,
-        name       : 'Scanned image 20201012-1',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'September 13, 2020',
-        modifiedAt : 'September 13, 2020',
-        size       : '7.8 MB',
-        type       : 'JPG',
-        contents   : null,
+        id: '4038a5b6-5b1a-432d-907c-e037aeb817a8',
+        folderId: null,
+        name: 'Scanned image 20201012-1',
+        createdBy: 'Brian Hughes',
+        createdAt: 'September 13, 2020',
+        modifiedAt: 'September 13, 2020',
+        size: '7.8 MB',
+        type: 'JPG',
+        contents: null,
         description: null,
     },
     {
-        id         : '630d2e9a-d110-47a0-ac03-256073a0f56d',
-        folderId   : null,
-        name       : 'Scanned image 20201012-2',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'September 14, 2020',
-        modifiedAt : 'September 14, 2020',
-        size       : '7.4 MB',
-        type       : 'JPG',
-        contents   : null,
+        id: '630d2e9a-d110-47a0-ac03-256073a0f56d',
+        folderId: null,
+        name: 'Scanned image 20201012-2',
+        createdBy: 'Brian Hughes',
+        createdAt: 'September 14, 2020',
+        modifiedAt: 'September 14, 2020',
+        size: '7.4 MB',
+        type: 'JPG',
+        contents: null,
         description: null,
     },
     {
-        id         : '1417d5ed-b616-4cff-bfab-286677b69d79',
-        folderId   : null,
-        name       : 'Prices',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'April 07, 2020',
-        modifiedAt : 'April 07, 2020',
-        size       : '2.6 MB',
-        type       : 'DOC',
-        contents   : null,
+        id: '1417d5ed-b616-4cff-bfab-286677b69d79',
+        folderId: null,
+        name: 'Prices',
+        createdBy: 'Brian Hughes',
+        createdAt: 'April 07, 2020',
+        modifiedAt: 'April 07, 2020',
+        size: '2.6 MB',
+        type: 'DOC',
+        contents: null,
         description: null,
     },
     {
-        id         : 'bd2817c7-6751-40dc-b252-b6b5634c0689',
-        folderId   : null,
-        name       : 'Shopping list',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'March 26, 2021',
-        modifiedAt : 'March 26, 2021',
-        size       : '2.1 MB',
-        type       : 'DOC',
-        contents   : null,
+        id: 'bd2817c7-6751-40dc-b252-b6b5634c0689',
+        folderId: null,
+        name: 'Shopping list',
+        createdBy: 'Brian Hughes',
+        createdAt: 'March 26, 2021',
+        modifiedAt: 'March 26, 2021',
+        size: '2.1 MB',
+        type: 'DOC',
+        contents: null,
         description: null,
     },
     {
-        id         : '14fb47c9-6eeb-4070-919c-07c8133285d1',
-        folderId   : null,
-        name       : 'Summer budget',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'June 02, 2020',
-        modifiedAt : 'June 02, 2020',
-        size       : '943 KB',
-        type       : 'XLS',
-        contents   : null,
+        id: '14fb47c9-6eeb-4070-919c-07c8133285d1',
+        folderId: null,
+        name: 'Summer budget',
+        createdBy: 'Brian Hughes',
+        createdAt: 'June 02, 2020',
+        modifiedAt: 'June 02, 2020',
+        size: '943 KB',
+        type: 'XLS',
+        contents: null,
         description: null,
     },
 
     {
-        id         : '894e8514-03d3-4f5e-bb28-f6c092501fae',
-        folderId   : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
-        name       : 'A personal file',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'June 02, 2020',
-        modifiedAt : 'June 02, 2020',
-        size       : '943 KB',
-        type       : 'XLS',
-        contents   : null,
+        id: '894e8514-03d3-4f5e-bb28-f6c092501fae',
+        folderId: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
+        name: 'A personal file',
+        createdBy: 'Brian Hughes',
+        createdAt: 'June 02, 2020',
+        modifiedAt: 'June 02, 2020',
+        size: '943 KB',
+        type: 'XLS',
+        contents: null,
         description: null,
     },
     {
-        id         : '74010810-16cf-441d-a1aa-c9fb620fceea',
-        folderId   : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
-        name       : 'A personal folder',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'November 01, 2021',
-        modifiedAt : 'November 01, 2021',
-        size       : '3015 MB',
-        type       : 'folder',
-        contents   : '907 files',
+        id: '74010810-16cf-441d-a1aa-c9fb620fceea',
+        folderId: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
+        name: 'A personal folder',
+        createdBy: 'Brian Hughes',
+        createdAt: 'November 01, 2021',
+        modifiedAt: 'November 01, 2021',
+        size: '3015 MB',
+        type: 'folder',
+        contents: '907 files',
         description: 'Personal photos; selfies, family, vacation and etc.',
     },
     {
-        id         : 'a8c73e5a-8114-436d-ab54-d900b50b3762',
-        folderId   : '74010810-16cf-441d-a1aa-c9fb620fceea',
-        name       : 'A personal file within the personal folder',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'June 02, 2020',
-        modifiedAt : 'June 02, 2020',
-        size       : '943 KB',
-        type       : 'XLS',
-        contents   : null,
+        id: 'a8c73e5a-8114-436d-ab54-d900b50b3762',
+        folderId: '74010810-16cf-441d-a1aa-c9fb620fceea',
+        name: 'A personal file within the personal folder',
+        createdBy: 'Brian Hughes',
+        createdAt: 'June 02, 2020',
+        modifiedAt: 'June 02, 2020',
+        size: '943 KB',
+        type: 'XLS',
+        contents: null,
         description: null,
     },
 
     {
-        id         : '12d851a8-4f60-473e-8a59-abe4b422ea99',
-        folderId   : '6da8747f-b474-4c9a-9eba-5ef212285500',
-        name       : 'Photos file',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'June 02, 2020',
-        modifiedAt : 'June 02, 2020',
-        size       : '943 KB',
-        type       : 'XLS',
-        contents   : null,
+        id: '12d851a8-4f60-473e-8a59-abe4b422ea99',
+        folderId: '6da8747f-b474-4c9a-9eba-5ef212285500',
+        name: 'Photos file',
+        createdBy: 'Brian Hughes',
+        createdAt: 'June 02, 2020',
+        modifiedAt: 'June 02, 2020',
+        size: '943 KB',
+        type: 'XLS',
+        contents: null,
         description: null,
     },
     {
-        id         : '2836766d-27e1-4f40-a31a-5a8419105e7e',
-        folderId   : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
-        name       : 'Work file',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'June 02, 2020',
-        modifiedAt : 'June 02, 2020',
-        size       : '943 KB',
-        type       : 'XLS',
-        contents   : null,
+        id: '2836766d-27e1-4f40-a31a-5a8419105e7e',
+        folderId: 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
+        name: 'Work file',
+        createdBy: 'Brian Hughes',
+        createdAt: 'June 02, 2020',
+        modifiedAt: 'June 02, 2020',
+        size: '943 KB',
+        type: 'XLS',
+        contents: null,
         description: null,
     },
 ];

src/app/mock-api/apps/help-center/api.ts

@@ -1,11 +1,16 @@
 import { Injectable } from '@angular/core';
 import { FuseMockApiService } from '@fuse/lib/mock-api';
-import { faqCategories as faqCategoriesData, faqs as faqsData, guideCategories as guideCategoriesData, guideContent as guideContentData, guides as guidesData } from 'app/mock-api/apps/help-center/data';
+import {
+    faqCategories as faqCategoriesData,
+    faqs as faqsData,
+    guideCategories as guideCategoriesData,
+    guideContent as guideContentData,
+    guides as guidesData,
+} from 'app/mock-api/apps/help-center/data';
 import { cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class HelpCenterMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class HelpCenterMockApi {
     private _faqCategories: any[] = faqCategoriesData;
     private _faqs: any[] = faqsData;
     private _guideCategories: any[] = guideCategoriesData;
@@ -15,8 +20,7 @@ export class HelpCenterMockApi
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -28,15 +32,13 @@ export class HelpCenterMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ FAQs - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/help-center/faqs')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the category slug
                 const slug = request.params.get('slug');
 
@@ -50,32 +52,31 @@ export class HelpCenterMockApi
                 const categories = cloneDeep(this._faqCategories);
 
                 // If slug is not provided...
-                if ( !slug )
-                {
+                if (!slug) {
                     // Go through each category and set the results
-                    categories.forEach((category) =>
-                    {
-                        results.push(
-                            {
-                                ...category,
-                                faqs: faqs.filter(faq => faq.categoryId === category.id),
-                            },
-                        );
+                    categories.forEach((category) => {
+                        results.push({
+                            ...category,
+                            faqs: faqs.filter(
+                                (faq) => faq.categoryId === category.id
+                            ),
+                        });
                     });
                 }
                 // Otherwise...
-                else
-                {
+                else {
                     // Find the category by the slug
-                    const category = categories.find(item => item.slug === slug);
+                    const category = categories.find(
+                        (item) => item.slug === slug
+                    );
 
                     // Set the results
-                    results.push(
-                        {
-                            ...category,
-                            faqs: faqs.filter(faq => faq.categoryId === category.id),
-                        },
-                    );
+                    results.push({
+                        ...category,
+                        faqs: faqs.filter(
+                            (faq) => faq.categoryId === category.id
+                        ),
+                    });
                 }
 
                 // Return the response
@@ -87,8 +88,7 @@ export class HelpCenterMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/help-center/guides')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the slug & limit
                 const slug = request.params.get('slug');
                 const limit = request.params.get('limit');
@@ -103,37 +103,40 @@ export class HelpCenterMockApi
                 const categories = cloneDeep(this._guideCategories);
 
                 // If slug is not provided...
-                if ( !slug )
-                {
+                if (!slug) {
                     // Parse the limit as an integer
                     const limitNum = parseInt(limit ?? '5', 10);
 
                     // Go through each category and set the results
-                    categories.forEach((category) =>
-                    {
-                        results.push(
-                            {
-                                ...category,
-                                visibleGuides: limitNum,
-                                totalGuides  : guides.filter(guide => guide.categoryId === category.id).length,
-                                guides       : guides.filter(guide => guide.categoryId === category.id).slice(0, limitNum),
-                            },
-                        );
+                    categories.forEach((category) => {
+                        results.push({
+                            ...category,
+                            visibleGuides: limitNum,
+                            totalGuides: guides.filter(
+                                (guide) => guide.categoryId === category.id
+                            ).length,
+                            guides: guides
+                                .filter(
+                                    (guide) => guide.categoryId === category.id
+                                )
+                                .slice(0, limitNum),
+                        });
                     });
                 }
                 // Otherwise...
-                else
-                {
+                else {
                     // Find the category by the slug
-                    const category = categories.find(item => item.slug === slug);
+                    const category = categories.find(
+                        (item) => item.slug === slug
+                    );
 
                     // Set the results
-                    results.push(
-                        {
-                            ...category,
-                            guides: guides.filter(guide => guide.categoryId === category.id),
-                        },
-                    );
+                    results.push({
+                        ...category,
+                        guides: guides.filter(
+                            (guide) => guide.categoryId === category.id
+                        ),
+                    });
                 }
 
                 // Return the response
@@ -145,8 +148,7 @@ export class HelpCenterMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/help-center/guide')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the slugs
                 const categorySlug = request.params.get('categorySlug');
                 const guideSlug = request.params.get('guideSlug');
@@ -157,8 +159,10 @@ export class HelpCenterMockApi
 
                 // Prepare the result
                 const result = {
-                    ...categories.find(category => category.slug === categorySlug),
-                    guides: [guides.find(guide => guide.slug === guideSlug)],
+                    ...categories.find(
+                        (category) => category.slug === categorySlug
+                    ),
+                    guides: [guides.find((guide) => guide.slug === guideSlug)],
                 };
 
                 // Add the content to the guide

src/app/mock-api/apps/help-center/data.ts

@@ -1,433 +1,460 @@
 /* eslint-disable */
 export const faqCategories = [
     {
-        id   : '28924eab-97cc-465a-ba21-f232bb95843f',
-        slug : 'most-asked',
+        id: '28924eab-97cc-465a-ba21-f232bb95843f',
+        slug: 'most-asked',
         title: 'Most asked',
     },
     {
-        id   : '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
-        slug : 'general-inquiries',
+        id: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
+        slug: 'general-inquiries',
         title: 'General inquiries',
     },
     {
-        id   : 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
-        slug : 'licenses',
+        id: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
+        slug: 'licenses',
         title: 'Licenses',
     },
     {
-        id   : '71c34043-d89d-4aca-951d-8606c3943c43',
-        slug : 'payments',
+        id: '71c34043-d89d-4aca-951d-8606c3943c43',
+        slug: 'payments',
         title: 'Payments',
     },
     {
-        id   : 'bea49ee0-26da-46ad-97be-116cd7ab416d',
-        slug : 'support',
+        id: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
+        slug: 'support',
         title: 'Support',
     },
 ];
 export const faqs = [
     // Most asked
     {
-        id        : 'f65d517a-6f69-4c88-81f5-416f47405ce1',
+        id: 'f65d517a-6f69-4c88-81f5-416f47405ce1',
         categoryId: '28924eab-97cc-465a-ba21-f232bb95843f',
-        question  : 'Is there a 14-days trial?',
-        answer    : 'Magna consectetur culpa duis ad est tempor pariatur velit ullamco aute exercitation magna sunt commodo minim enim aliquip eiusmod ipsum adipisicing magna ipsum reprehenderit lorem magna voluptate magna aliqua culpa.\n\nSit nisi adipisicing pariatur enim enim sunt officia ad labore voluptate magna proident velit excepteur pariatur cillum sit excepteur elit veniam excepteur minim nisi cupidatat proident dolore irure veniam mollit.',
+        question: 'Is there a 14-days trial?',
+        answer: 'Magna consectetur culpa duis ad est tempor pariatur velit ullamco aute exercitation magna sunt commodo minim enim aliquip eiusmod ipsum adipisicing magna ipsum reprehenderit lorem magna voluptate magna aliqua culpa.\n\nSit nisi adipisicing pariatur enim enim sunt officia ad labore voluptate magna proident velit excepteur pariatur cillum sit excepteur elit veniam excepteur minim nisi cupidatat proident dolore irure veniam mollit.',
     },
     {
-        id        : '0fcece82-1691-4b98-a9b9-b63218f9deef',
+        id: '0fcece82-1691-4b98-a9b9-b63218f9deef',
         categoryId: '28924eab-97cc-465a-ba21-f232bb95843f',
-        question  : 'What’s the benefits of the Premium Membership?',
-        answer    : 'Et in lorem qui ipsum deserunt duis exercitation lorem elit qui qui ipsum tempor nulla velit aliquip enim consequat incididunt pariatur duis excepteur elit irure nulla ipsum dolor dolore est.\n\nAute deserunt nostrud id non ipsum do adipisicing laboris in minim officia magna elit minim mollit elit velit veniam lorem pariatur veniam sit excepteur irure commodo excepteur duis quis in.',
+        question: 'What’s the benefits of the Premium Membership?',
+        answer: 'Et in lorem qui ipsum deserunt duis exercitation lorem elit qui qui ipsum tempor nulla velit aliquip enim consequat incididunt pariatur duis excepteur elit irure nulla ipsum dolor dolore est.\n\nAute deserunt nostrud id non ipsum do adipisicing laboris in minim officia magna elit minim mollit elit velit veniam lorem pariatur veniam sit excepteur irure commodo excepteur duis quis in.',
     },
     {
-        id        : '2e6971cd-49d5-49f1-8cbd-fba5c71e6062',
+        id: '2e6971cd-49d5-49f1-8cbd-fba5c71e6062',
         categoryId: '28924eab-97cc-465a-ba21-f232bb95843f',
-        question  : 'How much time I will need to learn this app?',
-        answer    : 'Id fugiat et cupidatat magna nulla nulla eu cillum officia nostrud dolore in veniam ullamco nulla ex duis est enim nisi aute ipsum velit et laboris est pariatur est culpa.\n\nCulpa sunt ipsum esse quis excepteur enim culpa est voluptate reprehenderit consequat duis officia irure voluptate veniam dolore fugiat dolor est amet nostrud non velit irure do voluptate id sit.',
+        question: 'How much time I will need to learn this app?',
+        answer: 'Id fugiat et cupidatat magna nulla nulla eu cillum officia nostrud dolore in veniam ullamco nulla ex duis est enim nisi aute ipsum velit et laboris est pariatur est culpa.\n\nCulpa sunt ipsum esse quis excepteur enim culpa est voluptate reprehenderit consequat duis officia irure voluptate veniam dolore fugiat dolor est amet nostrud non velit irure do voluptate id sit.',
     },
     {
-        id        : '974f93b8-336f-4eec-b011-9ddb412ee828',
+        id: '974f93b8-336f-4eec-b011-9ddb412ee828',
         categoryId: '28924eab-97cc-465a-ba21-f232bb95843f',
-        question  : 'Are there any free tutorials available?',
-        answer    : 'Excepteur deserunt tempor do lorem elit id magna pariatur irure ullamco elit dolor consectetur ad officia fugiat incididunt do elit aute esse eu voluptate adipisicing incididunt ea dolor aliqua dolor.\n\nConsequat est quis deserunt voluptate ipsum incididunt laboris occaecat irure laborum voluptate non sit labore voluptate sunt id sint ut laboris aute cupidatat occaecat eiusmod non magna aliquip deserunt nisi.',
+        question: 'Are there any free tutorials available?',
+        answer: 'Excepteur deserunt tempor do lorem elit id magna pariatur irure ullamco elit dolor consectetur ad officia fugiat incididunt do elit aute esse eu voluptate adipisicing incididunt ea dolor aliqua dolor.\n\nConsequat est quis deserunt voluptate ipsum incididunt laboris occaecat irure laborum voluptate non sit labore voluptate sunt id sint ut laboris aute cupidatat occaecat eiusmod non magna aliquip deserunt nisi.',
     },
     {
-        id        : '5d877fc7-b881-4527-a6aa-d39d642feb23',
+        id: '5d877fc7-b881-4527-a6aa-d39d642feb23',
         categoryId: '28924eab-97cc-465a-ba21-f232bb95843f',
-        question  : 'Is there a month-to-month payment option?',
-        answer    : 'Labore mollit in aliqua exercitation aliquip elit nisi nisi voluptate reprehenderit et dolor incididunt cupidatat ullamco nulla consequat voluptate adipisicing dolor qui magna sint aute do excepteur in aliqua consectetur.\n\nElit laborum non duis irure ad ullamco aliqua enim exercitation quis fugiat aute esse esse magna et ad cupidatat voluptate sint nulla nulla lorem et enim deserunt proident deserunt consectetur.',
+        question: 'Is there a month-to-month payment option?',
+        answer: 'Labore mollit in aliqua exercitation aliquip elit nisi nisi voluptate reprehenderit et dolor incididunt cupidatat ullamco nulla consequat voluptate adipisicing dolor qui magna sint aute do excepteur in aliqua consectetur.\n\nElit laborum non duis irure ad ullamco aliqua enim exercitation quis fugiat aute esse esse magna et ad cupidatat voluptate sint nulla nulla lorem et enim deserunt proident deserunt consectetur.',
     },
     // General inquiries
     {
-        id        : '3d1c26c5-1e5e-4eb6-8006-ed6037ed9aca',
+        id: '3d1c26c5-1e5e-4eb6-8006-ed6037ed9aca',
         categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
-        question  : 'How to download your items',
-        answer    : 'Sunt mollit irure dolor aliquip sit veniam amet ut sunt dolore cillum sint pariatur qui irure proident velit non excepteur quis ut et quis velit aliqua ea sunt cillum sit.\n\nReprehenderit est culpa ut incididunt sit dolore mollit in occaecat velit culpa consequat reprehenderit ex lorem cupidatat proident reprehenderit ad eu sunt sit ut sit culpa ea reprehenderit aliquip est.',
+        question: 'How to download your items',
+        answer: 'Sunt mollit irure dolor aliquip sit veniam amet ut sunt dolore cillum sint pariatur qui irure proident velit non excepteur quis ut et quis velit aliqua ea sunt cillum sit.\n\nReprehenderit est culpa ut incididunt sit dolore mollit in occaecat velit culpa consequat reprehenderit ex lorem cupidatat proident reprehenderit ad eu sunt sit ut sit culpa ea reprehenderit aliquip est.',
     },
     {
-        id        : '11bd2b9a-85b4-41c9-832c-bd600dfa3a52',
+        id: '11bd2b9a-85b4-41c9-832c-bd600dfa3a52',
         categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
-        question  : 'View and download invoices',
-        answer    : 'Sint mollit consectetur voluptate fugiat sunt ipsum adipisicing labore exercitation eiusmod enim excepteur enim proident velit sint magna commodo dolor ex ipsum sit nisi deserunt labore eu irure amet ea.\n\nOccaecat ut velit et sint pariatur laboris voluptate duis aliqua aliqua exercitation et duis duis eu laboris excepteur occaecat quis esse enim ex dolore commodo fugiat excepteur adipisicing in fugiat.',
+        question: 'View and download invoices',
+        answer: 'Sint mollit consectetur voluptate fugiat sunt ipsum adipisicing labore exercitation eiusmod enim excepteur enim proident velit sint magna commodo dolor ex ipsum sit nisi deserunt labore eu irure amet ea.\n\nOccaecat ut velit et sint pariatur laboris voluptate duis aliqua aliqua exercitation et duis duis eu laboris excepteur occaecat quis esse enim ex dolore commodo fugiat excepteur adipisicing in fugiat.',
     },
     {
-        id        : 'f55c023a-785e-4f0f-b5b7-47da75224deb',
+        id: 'f55c023a-785e-4f0f-b5b7-47da75224deb',
         categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
-        question  : 'I\'ve forgotten my username or password',
-        answer    : 'In exercitation sunt ad anim commodo sunt do in sunt est officia amet ex ullamco do nisi consectetur lorem proident lorem adipisicing incididunt consequat fugiat voluptate sint est anim officia.\n\nVelit sint aliquip elit culpa amet eu mollit veniam esse deserunt ex occaecat quis lorem minim occaecat culpa esse veniam enim duis excepteur ipsum esse ut ut velit cillum adipisicing.',
+        question: "I've forgotten my username or password",
+        answer: 'In exercitation sunt ad anim commodo sunt do in sunt est officia amet ex ullamco do nisi consectetur lorem proident lorem adipisicing incididunt consequat fugiat voluptate sint est anim officia.\n\nVelit sint aliquip elit culpa amet eu mollit veniam esse deserunt ex occaecat quis lorem minim occaecat culpa esse veniam enim duis excepteur ipsum esse ut ut velit cillum adipisicing.',
     },
     {
-        id        : 'c577a67d-357a-4b88-96e8-a0ee1fe9162e',
+        id: 'c577a67d-357a-4b88-96e8-a0ee1fe9162e',
         categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
-        question  : 'Where is my license code?',
-        answer    : 'Ad adipisicing duis consequat magna sunt consequat aliqua eiusmod qui et nostrud voluptate sit enim reprehenderit anim exercitation ipsum ipsum anim ipsum laboris aliqua ex lorem aute officia voluptate culpa.\n\nNostrud anim ex pariatur ipsum et nostrud esse veniam ipsum ipsum irure velit ad quis irure tempor nulla amet aute id esse reprehenderit ea consequat consequat ea minim magna magna.',
+        question: 'Where is my license code?',
+        answer: 'Ad adipisicing duis consequat magna sunt consequat aliqua eiusmod qui et nostrud voluptate sit enim reprehenderit anim exercitation ipsum ipsum anim ipsum laboris aliqua ex lorem aute officia voluptate culpa.\n\nNostrud anim ex pariatur ipsum et nostrud esse veniam ipsum ipsum irure velit ad quis irure tempor nulla amet aute id esse reprehenderit ea consequat consequat ea minim magna magna.',
     },
     {
-        id        : '1a680c29-7ece-4a80-9709-277ad4da8b4b',
+        id: '1a680c29-7ece-4a80-9709-277ad4da8b4b',
         categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
-        question  : 'How to contact an author',
-        answer    : 'Magna laborum et amet magna fugiat officia deserunt in exercitation aliquip nulla magna velit ea labore quis deserunt ipsum occaecat id id consequat non eiusmod mollit est voluptate ea ex.\n\nReprehenderit mollit ut excepteur minim veniam fugiat enim id pariatur amet elit nostrud occaecat pariatur et esse aliquip irure quis officia reprehenderit voluptate voluptate est et voluptate sint esse dolor.',
+        question: 'How to contact an author',
+        answer: 'Magna laborum et amet magna fugiat officia deserunt in exercitation aliquip nulla magna velit ea labore quis deserunt ipsum occaecat id id consequat non eiusmod mollit est voluptate ea ex.\n\nReprehenderit mollit ut excepteur minim veniam fugiat enim id pariatur amet elit nostrud occaecat pariatur et esse aliquip irure quis officia reprehenderit voluptate voluptate est et voluptate sint esse dolor.',
     },
     {
-        id        : 'c49c2216-8bdb-4df0-be25-d5ea1dbb5688',
+        id: 'c49c2216-8bdb-4df0-be25-d5ea1dbb5688',
         categoryId: '395b0d41-b9a8-4cd6-8b5c-f07855e82d62',
-        question  : 'How does the affiliate program work?',
-        answer    : 'Adipisicing laboris ipsum fugiat et cupidatat aute esse ad labore et est cillum ipsum sunt duis do veniam minim officia deserunt in eiusmod eu duis dolore excepteur consectetur id elit.\n\nAnim excepteur occaecat laborum sunt in elit quis sit duis adipisicing laboris anim laborum et pariatur elit qui consectetur laborum reprehenderit occaecat nostrud pariatur aliqua elit nisi commodo eu excepteur.',
+        question: 'How does the affiliate program work?',
+        answer: 'Adipisicing laboris ipsum fugiat et cupidatat aute esse ad labore et est cillum ipsum sunt duis do veniam minim officia deserunt in eiusmod eu duis dolore excepteur consectetur id elit.\n\nAnim excepteur occaecat laborum sunt in elit quis sit duis adipisicing laboris anim laborum et pariatur elit qui consectetur laborum reprehenderit occaecat nostrud pariatur aliqua elit nisi commodo eu excepteur.',
     },
     // Licenses
     {
-        id        : '3ef176fa-6cba-4536-9f43-540c686a4faa',
+        id: '3ef176fa-6cba-4536-9f43-540c686a4faa',
         categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
-        question  : 'How do licenses work for items I bought?',
-        answer    : 'Culpa duis nostrud qui velit sint magna officia fugiat ipsum eiusmod enim laborum pariatur anim culpa elit ipsum lorem pariatur exercitation laborum do labore cillum exercitation nisi reprehenderit exercitation quis.\n\nMollit aute dolor non elit et incididunt eiusmod non in commodo occaecat id in excepteur aliqua ea anim pariatur sint elit voluptate dolor eu non laborum laboris voluptate qui duis.',
+        question: 'How do licenses work for items I bought?',
+        answer: 'Culpa duis nostrud qui velit sint magna officia fugiat ipsum eiusmod enim laborum pariatur anim culpa elit ipsum lorem pariatur exercitation laborum do labore cillum exercitation nisi reprehenderit exercitation quis.\n\nMollit aute dolor non elit et incididunt eiusmod non in commodo occaecat id in excepteur aliqua ea anim pariatur sint elit voluptate dolor eu non laborum laboris voluptate qui duis.',
     },
     {
-        id        : '7bc6b7b4-7ad8-4cbe-af36-7301642d35fb',
+        id: '7bc6b7b4-7ad8-4cbe-af36-7301642d35fb',
         categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
-        question  : 'Do licenses have an expiry date?',
-        answer    : 'Ea proident dolor tempor dolore incididunt velit incididunt ullamco quis proident consectetur magna excepteur cillum officia ex do aliqua reprehenderit est esse officia labore dolore aute laboris eu commodo aute.\n\nOfficia quis id ipsum adipisicing ipsum eu exercitation cillum ex elit pariatur adipisicing ullamco ullamco nulla dolore magna aliqua reprehenderit eu laborum voluptate reprehenderit non eiusmod deserunt velit magna do.',
+        question: 'Do licenses have an expiry date?',
+        answer: 'Ea proident dolor tempor dolore incididunt velit incididunt ullamco quis proident consectetur magna excepteur cillum officia ex do aliqua reprehenderit est esse officia labore dolore aute laboris eu commodo aute.\n\nOfficia quis id ipsum adipisicing ipsum eu exercitation cillum ex elit pariatur adipisicing ullamco ullamco nulla dolore magna aliqua reprehenderit eu laborum voluptate reprehenderit non eiusmod deserunt velit magna do.',
     },
     {
-        id        : '56c9ed66-a1d2-4803-a160-fba29b826cb4',
+        id: '56c9ed66-a1d2-4803-a160-fba29b826cb4',
         categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
-        question  : 'I want to make multiple end products with the same item',
-        answer    : 'Elit cillum incididunt enim cupidatat ex elit cillum aute dolor consectetur proident non minim eu est deserunt proident mollit ullamco laborum anim ea labore anim ex enim ullamco consectetur enim.\n\nEx magna consectetur esse enim consequat non aliqua nulla labore mollit sit quis ex fugiat commodo eu cupidatat irure incididunt consequat enim ut deserunt consequat elit consequat sint adipisicing sunt.',
+        question: 'I want to make multiple end products with the same item',
+        answer: 'Elit cillum incididunt enim cupidatat ex elit cillum aute dolor consectetur proident non minim eu est deserunt proident mollit ullamco laborum anim ea labore anim ex enim ullamco consectetur enim.\n\nEx magna consectetur esse enim consequat non aliqua nulla labore mollit sit quis ex fugiat commodo eu cupidatat irure incididunt consequat enim ut deserunt consequat elit consequat sint adipisicing sunt.',
     },
     {
-        id        : '21c1b662-33c8-44d7-9530-91896afeeac7',
+        id: '21c1b662-33c8-44d7-9530-91896afeeac7',
         categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
-        question  : 'How easy is it to change the license type?',
-        answer    : 'Duis culpa ut veniam voluptate consequat proident magna eiusmod id est magna culpa nulla enim culpa mollit velit lorem mollit ut minim dolore in tempor reprehenderit cillum occaecat proident ea.\n\nVeniam fugiat ea duis qui et eu eiusmod voluptate id cillum eiusmod eu reprehenderit minim reprehenderit nisi cillum nostrud duis eu magna minim sunt voluptate eu pariatur nulla ullamco elit.',
+        question: 'How easy is it to change the license type?',
+        answer: 'Duis culpa ut veniam voluptate consequat proident magna eiusmod id est magna culpa nulla enim culpa mollit velit lorem mollit ut minim dolore in tempor reprehenderit cillum occaecat proident ea.\n\nVeniam fugiat ea duis qui et eu eiusmod voluptate id cillum eiusmod eu reprehenderit minim reprehenderit nisi cillum nostrud duis eu magna minim sunt voluptate eu pariatur nulla ullamco elit.',
     },
     {
-        id        : '5fa52c90-82be-41ae-96ec-5fc67cf054a4',
+        id: '5fa52c90-82be-41ae-96ec-5fc67cf054a4',
         categoryId: 'b388a87f-bfbb-44d0-800c-0ddbce2a5d22',
-        question  : 'Do I need a Regular License or an Extended License?',
-        answer    : 'Mollit nostrud ea irure ex ipsum in cupidatat irure sit officia reprehenderit adipisicing et occaecat cupidatat exercitation mollit esse in excepteur qui elit exercitation velit fugiat exercitation est officia excepteur.\n\nQuis esse voluptate laborum non veniam duis est fugiat tempor culpa minim velit minim ut duis qui officia consectetur ex nostrud ut elit elit nulla in consectetur voluptate aliqua aliqua.',
+        question: 'Do I need a Regular License or an Extended License?',
+        answer: 'Mollit nostrud ea irure ex ipsum in cupidatat irure sit officia reprehenderit adipisicing et occaecat cupidatat exercitation mollit esse in excepteur qui elit exercitation velit fugiat exercitation est officia excepteur.\n\nQuis esse voluptate laborum non veniam duis est fugiat tempor culpa minim velit minim ut duis qui officia consectetur ex nostrud ut elit elit nulla in consectetur voluptate aliqua aliqua.',
     },
     // Payments
     {
-        id        : '81ac908c-35a2-4705-8d75-539863c35c09',
+        id: '81ac908c-35a2-4705-8d75-539863c35c09',
         categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
-        question  : 'Common PayPal, Skrill, and credit card issues',
-        answer    : 'Sit occaecat sint nulla in esse dolor occaecat in ea sit irure magna magna veniam fugiat consequat exercitation ipsum ex officia velit consectetur consequat voluptate lorem eu proident lorem incididunt.\n\nExcepteur exercitation et qui labore nisi eu voluptate ipsum deserunt deserunt eu est minim dolor ad proident nulla reprehenderit culpa minim voluptate dolor nostrud dolor anim labore aliqua officia nostrud.',
+        question: 'Common PayPal, Skrill, and credit card issues',
+        answer: 'Sit occaecat sint nulla in esse dolor occaecat in ea sit irure magna magna veniam fugiat consequat exercitation ipsum ex officia velit consectetur consequat voluptate lorem eu proident lorem incididunt.\n\nExcepteur exercitation et qui labore nisi eu voluptate ipsum deserunt deserunt eu est minim dolor ad proident nulla reprehenderit culpa minim voluptate dolor nostrud dolor anim labore aliqua officia nostrud.',
     },
     {
-        id        : 'b6d8909f-f36d-4885-8848-46b8230d4476',
+        id: 'b6d8909f-f36d-4885-8848-46b8230d4476',
         categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
-        question  : 'How do I find my transaction ID?',
-        answer    : 'Laboris ea nisi commodo nulla cillum consequat consectetur nisi velit adipisicing minim nulla culpa amet quis sit duis id id aliqua aute exercitation non reprehenderit aliquip enim eiusmod eu irure.\n\nNon irure consectetur sunt cillum do adipisicing excepteur labore proident ut officia dolor fugiat velit sint consectetur cillum qui amet enim anim mollit laboris consectetur non do laboris lorem aliqua.',
+        question: 'How do I find my transaction ID?',
+        answer: 'Laboris ea nisi commodo nulla cillum consequat consectetur nisi velit adipisicing minim nulla culpa amet quis sit duis id id aliqua aute exercitation non reprehenderit aliquip enim eiusmod eu irure.\n\nNon irure consectetur sunt cillum do adipisicing excepteur labore proident ut officia dolor fugiat velit sint consectetur cillum qui amet enim anim mollit laboris consectetur non do laboris lorem aliqua.',
     },
     {
-        id        : '9496235d-4d0c-430b-817e-1cba96404f95',
+        id: '9496235d-4d0c-430b-817e-1cba96404f95',
         categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
-        question  : 'PayPal disputes And chargebacks',
-        answer    : 'Ullamco eiusmod do pariatur pariatur consectetur commodo proident ex voluptate ullamco culpa commodo deserunt pariatur incididunt nisi magna dolor est minim eu ex voluptate deserunt labore id magna excepteur et.\n\nReprehenderit dolore pariatur exercitation ad non fugiat quis proident fugiat incididunt ea magna pariatur et exercitation tempor cillum eu consequat adipisicing est laborum sit cillum ea fugiat mollit cupidatat est.',
+        question: 'PayPal disputes And chargebacks',
+        answer: 'Ullamco eiusmod do pariatur pariatur consectetur commodo proident ex voluptate ullamco culpa commodo deserunt pariatur incididunt nisi magna dolor est minim eu ex voluptate deserunt labore id magna excepteur et.\n\nReprehenderit dolore pariatur exercitation ad non fugiat quis proident fugiat incididunt ea magna pariatur et exercitation tempor cillum eu consequat adipisicing est laborum sit cillum ea fugiat mollit cupidatat est.',
     },
     {
-        id        : '7fde17e6-4ac1-47dd-a363-2f4f14dcf76a',
+        id: '7fde17e6-4ac1-47dd-a363-2f4f14dcf76a',
         categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
-        question  : 'Saving your credit card details',
-        answer    : 'Qui quis nulla excepteur voluptate elit culpa occaecat id ex do adipisicing est mollit id anim nisi irure amet officia ut sint aliquip dolore labore cupidatat magna laborum esse ea.\n\nEnim magna duis sit incididunt amet anim et nostrud laborum eiusmod et ea fugiat aliquip velit sit fugiat consectetur ipsum anim do enim excepteur cupidatat consequat sunt irure tempor ut.',
+        question: 'Saving your credit card details',
+        answer: 'Qui quis nulla excepteur voluptate elit culpa occaecat id ex do adipisicing est mollit id anim nisi irure amet officia ut sint aliquip dolore labore cupidatat magna laborum esse ea.\n\nEnim magna duis sit incididunt amet anim et nostrud laborum eiusmod et ea fugiat aliquip velit sit fugiat consectetur ipsum anim do enim excepteur cupidatat consequat sunt irure tempor ut.',
     },
     {
-        id        : '90a3ed58-e13b-40cf-9219-f933bf9c9b8f',
+        id: '90a3ed58-e13b-40cf-9219-f933bf9c9b8f',
         categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
-        question  : 'Why do prepaid credits expire?',
-        answer    : 'Consequat consectetur commodo deserunt sunt aliquip deserunt ex tempor esse nostrud sit dolore anim nostrud nulla dolore veniam minim laboris non dolor veniam lorem veniam deserunt laborum aute amet irure.\n\nEiusmod officia veniam reprehenderit ea aliquip velit anim aute minim aute nisi tempor qui sunt deserunt voluptate velit elit ut adipisicing ipsum et excepteur ipsum eu ullamco nisi esse dolor.',
+        question: 'Why do prepaid credits expire?',
+        answer: 'Consequat consectetur commodo deserunt sunt aliquip deserunt ex tempor esse nostrud sit dolore anim nostrud nulla dolore veniam minim laboris non dolor veniam lorem veniam deserunt laborum aute amet irure.\n\nEiusmod officia veniam reprehenderit ea aliquip velit anim aute minim aute nisi tempor qui sunt deserunt voluptate velit elit ut adipisicing ipsum et excepteur ipsum eu ullamco nisi esse dolor.',
     },
     {
-        id        : '153376ed-691f-4dfd-ae99-e204a49edc44',
+        id: '153376ed-691f-4dfd-ae99-e204a49edc44',
         categoryId: '71c34043-d89d-4aca-951d-8606c3943c43',
-        question  : 'Why is there a minimum $20 credit?',
-        answer    : 'Duis sint velit incididunt exercitation eiusmod nisi sunt ex est fugiat ad cupidatat sunt nisi elit do duis amet voluptate ipsum aliquip lorem aliqua sint esse in magna irure officia.\n\nNon eu ex elit ut est voluptate tempor amet ut officia in duis deserunt cillum labore do culpa id dolore magna anim consectetur qui consectetur fugiat labore mollit magna irure.',
+        question: 'Why is there a minimum $20 credit?',
+        answer: 'Duis sint velit incididunt exercitation eiusmod nisi sunt ex est fugiat ad cupidatat sunt nisi elit do duis amet voluptate ipsum aliquip lorem aliqua sint esse in magna irure officia.\n\nNon eu ex elit ut est voluptate tempor amet ut officia in duis deserunt cillum labore do culpa id dolore magna anim consectetur qui consectetur fugiat labore mollit magna irure.',
     },
     // Support
     {
-        id        : '4e7ce72f-863a-451f-9160-cbd4fbbc4c3d',
+        id: '4e7ce72f-863a-451f-9160-cbd4fbbc4c3d',
         categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
-        question  : 'What is item support?',
-        answer    : 'Exercitation sit eiusmod enim officia exercitation eiusmod sunt eiusmod excepteur ad commodo eiusmod qui proident quis aliquip excepteur sit cillum occaecat non dolore sit in labore ut duis esse duis.\n\nConsequat sunt voluptate consectetur dolor laborum enim nostrud deserunt incididunt sint veniam laboris sunt amet velit anim duis aliqua sunt aliqua aute qui nisi mollit qui irure ullamco aliquip laborum.',
+        question: 'What is item support?',
+        answer: 'Exercitation sit eiusmod enim officia exercitation eiusmod sunt eiusmod excepteur ad commodo eiusmod qui proident quis aliquip excepteur sit cillum occaecat non dolore sit in labore ut duis esse duis.\n\nConsequat sunt voluptate consectetur dolor laborum enim nostrud deserunt incididunt sint veniam laboris sunt amet velit anim duis aliqua sunt aliqua aute qui nisi mollit qui irure ullamco aliquip laborum.',
     },
     {
-        id        : '0795a74f-7a84-4edf-8d66-296cdef70003',
+        id: '0795a74f-7a84-4edf-8d66-296cdef70003',
         categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
-        question  : 'How to contact an author',
-        answer    : 'Minim commodo cillum do id qui irure aliqua laboris excepteur laboris magna enim est lorem consectetur tempor laboris proident proident eu irure dolor eiusmod in officia lorem quis laborum ullamco.\n\nQui excepteur ex sit esse dolore deserunt ullamco occaecat laboris fugiat cupidatat excepteur laboris amet dolore enim velit ipsum velit sint cupidatat consectetur cupidatat deserunt sit eu do ullamco quis.',
+        question: 'How to contact an author',
+        answer: 'Minim commodo cillum do id qui irure aliqua laboris excepteur laboris magna enim est lorem consectetur tempor laboris proident proident eu irure dolor eiusmod in officia lorem quis laborum ullamco.\n\nQui excepteur ex sit esse dolore deserunt ullamco occaecat laboris fugiat cupidatat excepteur laboris amet dolore enim velit ipsum velit sint cupidatat consectetur cupidatat deserunt sit eu do ullamco quis.',
     },
     {
-        id        : '05532574-c102-4228-89a8-55fff32ec6fc',
+        id: '05532574-c102-4228-89a8-55fff32ec6fc',
         categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
-        question  : 'Extending and renewing item support',
-        answer    : 'Reprehenderit anim consectetur anim dolor magna consequat excepteur tempor enim duis magna proident ullamco aute voluptate elit laborum mollit labore id ex lorem est mollit do qui ex labore nulla.\n\nUt proident elit proident adipisicing elit fugiat ex ullamco dolore excepteur excepteur labore laborum sunt ipsum proident magna ex voluptate laborum voluptate sint proident eu reprehenderit non excepteur quis eiusmod.',
+        question: 'Extending and renewing item support',
+        answer: 'Reprehenderit anim consectetur anim dolor magna consequat excepteur tempor enim duis magna proident ullamco aute voluptate elit laborum mollit labore id ex lorem est mollit do qui ex labore nulla.\n\nUt proident elit proident adipisicing elit fugiat ex ullamco dolore excepteur excepteur labore laborum sunt ipsum proident magna ex voluptate laborum voluptate sint proident eu reprehenderit non excepteur quis eiusmod.',
     },
     {
-        id        : 'b3917466-aa51-4293-9d5b-120b0ce6635c',
+        id: 'b3917466-aa51-4293-9d5b-120b0ce6635c',
         categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
-        question  : 'Rating or review removal policy',
-        answer    : 'Ipsum officia mollit qui laboris sunt amet aliquip cupidatat minim non elit commodo eiusmod labore mollit pariatur aute reprehenderit ullamco occaecat enim pariatur aute amet occaecat incididunt irure ad ut.\n\nIncididunt cupidatat pariatur magna sint sit culpa ad cupidatat cillum exercitation consequat minim pariatur consectetur aliqua non adipisicing magna ad nulla ea do est nostrud eu aute id occaecat ut.',
+        question: 'Rating or review removal policy',
+        answer: 'Ipsum officia mollit qui laboris sunt amet aliquip cupidatat minim non elit commodo eiusmod labore mollit pariatur aute reprehenderit ullamco occaecat enim pariatur aute amet occaecat incididunt irure ad ut.\n\nIncididunt cupidatat pariatur magna sint sit culpa ad cupidatat cillum exercitation consequat minim pariatur consectetur aliqua non adipisicing magna ad nulla ea do est nostrud eu aute id occaecat ut.',
     },
     {
-        id        : '2f2fb472-24d4-4a00-aa80-d513fa6c059c',
+        id: '2f2fb472-24d4-4a00-aa80-d513fa6c059c',
         categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
-        question  : 'Purchasing supported and unsupported items',
-        answer    : 'Dolor cupidatat do qui in tempor dolor magna magna ut dolor est aute veniam consectetur enim sunt sunt duis magna magna aliquip id reprehenderit dolor in veniam ullamco incididunt occaecat.\n\nId duis pariatur anim cillum est sint non veniam voluptate deserunt anim nostrud duis voluptate occaecat elit ut veniam voluptate do qui est ad velit irure sint lorem ullamco aliqua.',
+        question: 'Purchasing supported and unsupported items',
+        answer: 'Dolor cupidatat do qui in tempor dolor magna magna ut dolor est aute veniam consectetur enim sunt sunt duis magna magna aliquip id reprehenderit dolor in veniam ullamco incididunt occaecat.\n\nId duis pariatur anim cillum est sint non veniam voluptate deserunt anim nostrud duis voluptate occaecat elit ut veniam voluptate do qui est ad velit irure sint lorem ullamco aliqua.',
     },
     {
-        id        : '2fffd148-7644-466d-8737-7dde88c54154',
+        id: '2fffd148-7644-466d-8737-7dde88c54154',
         categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
-        question  : 'I haven\'t received a response from the author',
-        answer    : 'Velit commodo pariatur ullamco elit sunt dolor quis irure amet tempor laboris labore tempor nisi consectetur ea proident dolore culpa nostrud esse amet commodo do esse laboris laboris in magna.\n\nAute officia labore minim laborum irure cupidatat occaecat laborum ex labore ipsum aliqua cillum do exercitation esse et veniam excepteur mollit incididunt ut qui irure culpa qui deserunt nostrud tempor.',
+        question: "I haven't received a response from the author",
+        answer: 'Velit commodo pariatur ullamco elit sunt dolor quis irure amet tempor laboris labore tempor nisi consectetur ea proident dolore culpa nostrud esse amet commodo do esse laboris laboris in magna.\n\nAute officia labore minim laborum irure cupidatat occaecat laborum ex labore ipsum aliqua cillum do exercitation esse et veniam excepteur mollit incididunt ut qui irure culpa qui deserunt nostrud tempor.',
     },
     {
-        id        : '24a1034e-b4d6-4a86-a1ea-90516e87e810',
+        id: '24a1034e-b4d6-4a86-a1ea-90516e87e810',
         categoryId: 'bea49ee0-26da-46ad-97be-116cd7ab416d',
-        question  : 'Responding to requests outside of support',
-        answer    : 'Exercitation eu in officia lorem commodo pariatur pariatur nisi consectetur qui elit in aliquip et ullamco duis nostrud aute laborum laborum est dolor non qui amet deserunt ex et aliquip.\n\nProident consectetur eu amet minim labore anim ad non aute duis eiusmod sit ad elit magna do aliquip aliqua laborum dolor laboris ea irure duis mollit fugiat tempor eu est.',
+        question: 'Responding to requests outside of support',
+        answer: 'Exercitation eu in officia lorem commodo pariatur pariatur nisi consectetur qui elit in aliquip et ullamco duis nostrud aute laborum laborum est dolor non qui amet deserunt ex et aliquip.\n\nProident consectetur eu amet minim labore anim ad non aute duis eiusmod sit ad elit magna do aliquip aliqua laborum dolor laboris ea irure duis mollit fugiat tempor eu est.',
     },
 ];
 export const guideCategories = [
     {
-        id   : '0ee72de7-49c0-4880-9e89-b72a4edd6a81',
-        slug : 'getting-started',
+        id: '0ee72de7-49c0-4880-9e89-b72a4edd6a81',
+        slug: 'getting-started',
         title: 'Getting Started',
     },
     {
-        id   : '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
-        slug : 'projects',
+        id: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
+        slug: 'projects',
         title: 'Projects',
     },
     {
-        id   : 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
-        slug : 'settings',
+        id: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
+        slug: 'settings',
         title: 'Settings',
     },
     {
-        id   : '7b25b38c-1ab3-4474-8569-65b3ea232add',
-        slug : 'payments',
+        id: '7b25b38c-1ab3-4474-8569-65b3ea232add',
+        slug: 'payments',
         title: 'Payments',
     },
     {
-        id   : '41fdf071-aec4-49de-9dd4-b4f746596928',
-        slug : 'your-account',
+        id: '41fdf071-aec4-49de-9dd4-b4f746596928',
+        slug: 'your-account',
         title: 'Your Account',
     },
 ];
 export const guides = [
     // Getting started
     {
-        id        : 'a008ffa3-7b3f-43be-8a8f-dbf5272ed2dd',
+        id: 'a008ffa3-7b3f-43be-8a8f-dbf5272ed2dd',
         categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81',
-        slug      : 'what-is-this-app',
-        title     : 'What is this app?',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'what-is-this-app',
+        title: 'What is this app?',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '7643d388-12ab-4025-a2f1-5045ac7b1c4c',
+        id: '7643d388-12ab-4025-a2f1-5045ac7b1c4c',
         categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81',
-        slug      : 'start-using-the-app',
-        title     : 'Start using the app',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'start-using-the-app',
+        title: 'Start using the app',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '1fecee67-c4b4-413a-b0f2-949dcab73249',
+        id: '1fecee67-c4b4-413a-b0f2-949dcab73249',
         categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81',
-        slug      : 'signing-in-to-the-dashboard',
-        title     : 'Signing in to the dashboard',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'signing-in-to-the-dashboard',
+        title: 'Signing in to the dashboard',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : 'd2e2ea8f-5298-4ba2-898b-afc60c064bba',
+        id: 'd2e2ea8f-5298-4ba2-898b-afc60c064bba',
         categoryId: '0ee72de7-49c0-4880-9e89-b72a4edd6a81',
-        slug      : 'navigating-within-the-app',
-        title     : 'Navigating within the app',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'navigating-within-the-app',
+        title: 'Navigating within the app',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     // Projects
     {
-        id        : 'f2592886-11b8-4b56-baab-96802c2ed93e',
+        id: 'f2592886-11b8-4b56-baab-96802c2ed93e',
         categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
-        slug      : 'creating-a-project',
-        title     : 'Creating a project',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'creating-a-project',
+        title: 'Creating a project',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '9ec3f4b9-a355-4f57-9e93-efa8611cc1c9',
+        id: '9ec3f4b9-a355-4f57-9e93-efa8611cc1c9',
         categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
-        slug      : 'renaming-a-project',
-        title     : 'Renaming a project',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'renaming-a-project',
+        title: 'Renaming a project',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '1bc6e7f9-b046-4f4f-9b18-741c9d5429f6',
+        id: '1bc6e7f9-b046-4f4f-9b18-741c9d5429f6',
         categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
-        slug      : 'displaying-a-project',
-        title     : 'Displaying a project',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'displaying-a-project',
+        title: 'Displaying a project',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : 'a005d5f1-938d-45c5-8ed4-d0cf8d02e533',
+        id: 'a005d5f1-938d-45c5-8ed4-d0cf8d02e533',
         categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
-        slug      : 'deleting-a-project',
-        title     : 'Deleting a project',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'deleting-a-project',
+        title: 'Deleting a project',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '43837279-dce2-4dc0-beac-30b5ba829f14',
+        id: '43837279-dce2-4dc0-beac-30b5ba829f14',
         categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
-        slug      : 'changing-the-visibility-of-a-project',
-        title     : 'Changing the visibility of a project',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'changing-the-visibility-of-a-project',
+        title: 'Changing the visibility of a project',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '4cf5a435-eaa0-463c-8d2b-efde193c7fb3',
+        id: '4cf5a435-eaa0-463c-8d2b-efde193c7fb3',
         categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
-        slug      : 'adding-media-to-a-project',
-        title     : 'Adding media to a project',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'adding-media-to-a-project',
+        title: 'Adding media to a project',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : 'cd3fb87e-e138-4721-9e29-a5c751bfd949',
+        id: 'cd3fb87e-e138-4721-9e29-a5c751bfd949',
         categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
-        slug      : 'removing-a-media-from-a-project',
-        title     : 'Removing a media from a project',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'removing-a-media-from-a-project',
+        title: 'Removing a media from a project',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : 'f26205c6-882e-4713-b067-c73758b45551',
+        id: 'f26205c6-882e-4713-b067-c73758b45551',
         categoryId: '07b8421f-20bf-45b6-90ee-169ebe3a5bcc',
-        slug      : 'cropping-a-media',
-        title     : 'Cropping a media',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'cropping-a-media',
+        title: 'Cropping a media',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     // Settings
     {
-        id        : '1cbdeaeb-bbf1-4d04-b43d-f37b55e6a229',
+        id: '1cbdeaeb-bbf1-4d04-b43d-f37b55e6a229',
         categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
-        slug      : 'general-settings',
-        title     : 'General settings',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'general-settings',
+        title: 'General settings',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '98de7d4a-2ca2-4d47-bbe6-083ed26467db',
+        id: '98de7d4a-2ca2-4d47-bbe6-083ed26467db',
         categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
-        slug      : 'project-settings',
-        title     : 'Project settings',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'project-settings',
+        title: 'Project settings',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '145f497c-1fdb-47b5-a6c1-31f856403571',
+        id: '145f497c-1fdb-47b5-a6c1-31f856403571',
         categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
-        slug      : 'media-settings',
-        title     : 'Media settings',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'media-settings',
+        title: 'Media settings',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '0a007f59-a5ea-4875-991d-f22d6fd69898',
+        id: '0a007f59-a5ea-4875-991d-f22d6fd69898',
         categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
-        slug      : 'domain-settings',
-        title     : 'Domain settings',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'domain-settings',
+        title: 'Domain settings',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '4707c8eb-31f9-415c-bd07-86f226c75feb',
+        id: '4707c8eb-31f9-415c-bd07-86f226c75feb',
         categoryId: 'c88a1f54-360a-4b9b-a54b-2f92b7a1f63b',
-        slug      : 'privacy-settings',
-        title     : 'Privacy settings',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'privacy-settings',
+        title: 'Privacy settings',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     // Payments
     {
-        id        : 'c771bf0a-1e0c-4b6d-af7e-189e10cc6fb8',
+        id: 'c771bf0a-1e0c-4b6d-af7e-189e10cc6fb8',
         categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add',
-        slug      : 'subscriptions',
-        title     : 'Subscriptions',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'subscriptions',
+        title: 'Subscriptions',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '3d7150d2-feb3-4f20-bd3f-8e525cef77a4',
+        id: '3d7150d2-feb3-4f20-bd3f-8e525cef77a4',
         categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add',
-        slug      : 'discounts',
-        title     : 'Discounts',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'discounts',
+        title: 'Discounts',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '79239bc4-4fb5-428b-b30d-62c5289b061d',
+        id: '79239bc4-4fb5-428b-b30d-62c5289b061d',
         categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add',
-        slug      : 'payment-methods',
-        title     : 'Payment methods',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'payment-methods',
+        title: 'Payment methods',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '8d68c5e6-5404-450c-9d5f-d9800c164041',
+        id: '8d68c5e6-5404-450c-9d5f-d9800c164041',
         categoryId: '7b25b38c-1ab3-4474-8569-65b3ea232add',
-        slug      : 'overdue-payments',
-        title     : 'Overdue payments',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'overdue-payments',
+        title: 'Overdue payments',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     // Your account
     {
-        id        : '60df0d4c-dda1-439c-bd44-179c57a7597d',
+        id: '60df0d4c-dda1-439c-bd44-179c57a7597d',
         categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
-        slug      : 'changing-your-username',
-        title     : 'Changing your username',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'changing-your-username',
+        title: 'Changing your username',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '0a9c3321-1db3-42bc-92b6-7e257368123e',
+        id: '0a9c3321-1db3-42bc-92b6-7e257368123e',
         categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
-        slug      : 'changing-your-email',
-        title     : 'Changing your email',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'changing-your-email',
+        title: 'Changing your email',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '80ba5106-5f9c-4ed7-b8f3-8544035e3095',
+        id: '80ba5106-5f9c-4ed7-b8f3-8544035e3095',
         categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
-        slug      : 'changing-your-password',
-        title     : 'Changing your password',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'changing-your-password',
+        title: 'Changing your password',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : 'db2e97a6-d657-4e9d-9b6c-5f213ea3301c',
+        id: 'db2e97a6-d657-4e9d-9b6c-5f213ea3301c',
         categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
-        slug      : 'closing-your-account',
-        title     : 'Closing your account',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'closing-your-account',
+        title: 'Closing your account',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : '3374c887-2fb7-4223-9f40-7f2cbbf76795',
+        id: '3374c887-2fb7-4223-9f40-7f2cbbf76795',
         categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
-        slug      : 'account-limits',
-        title     : 'Account limits',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'account-limits',
+        title: 'Account limits',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
     {
-        id        : 'cc65f92a-7d46-4557-b15b-6f8f59a60576',
+        id: 'cc65f92a-7d46-4557-b15b-6f8f59a60576',
         categoryId: '41fdf071-aec4-49de-9dd4-b4f746596928',
-        slug      : 'two-factor-authentication',
-        title     : 'Two factor authentication',
-        subtitle  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
+        slug: 'two-factor-authentication',
+        title: 'Two factor authentication',
+        subtitle:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
     },
 ];
 

src/app/mock-api/apps/mailbox/api.ts

@@ -1,11 +1,16 @@
 import { Injectable } from '@angular/core';
 import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
-import { filters as filtersData, folders as foldersData, labels as labelsData, mails as mailsData, settings as settingsData } from 'app/mock-api/apps/mailbox/data';
+import {
+    filters as filtersData,
+    folders as foldersData,
+    labels as labelsData,
+    mails as mailsData,
+    settings as settingsData,
+} from 'app/mock-api/apps/mailbox/data';
 import { assign, cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class MailboxMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class MailboxMockApi {
     private _filters: any[] = filtersData;
     private _folders: any[] = foldersData;
     private _mails: any[] = mailsData;
@@ -15,8 +20,7 @@ export class MailboxMockApi
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -28,8 +32,7 @@ export class MailboxMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Settings - GET
         // -----------------------------------------------------------------------------------------------------
@@ -42,8 +45,7 @@ export class MailboxMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/mailbox/settings')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the settings
                 const settings = cloneDeep(request.body.settings);
 
@@ -57,54 +59,51 @@ export class MailboxMockApi
         // -----------------------------------------------------------------------------------------------------
         // @ Folders - GET
         // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/apps/mailbox/folders')
-            .reply(() =>
-            {
-                let count = 0;
+        this._fuseMockApiService.onGet('api/apps/mailbox/folders').reply(() => {
+            let count = 0;
 
-                // Iterate through the folders
-                this._folders.forEach((folder) =>
-                {
-                    // Get the mails of this folder
-                    const mails = this._mails.filter(mail => mail.folder === folder.id);
+            // Iterate through the folders
+            this._folders.forEach((folder) => {
+                // Get the mails of this folder
+                const mails = this._mails.filter(
+                    (mail) => mail.folder === folder.id
+                );
 
-                    // If we are counting the 'sent' or the 'trash' folder...
-                    if ( folder.slug === 'sent' || folder.slug === 'trash' )
-                    {
-                        // Always set the count to 0
-                        count = 0;
-                    }
-                    // If we are counting the 'drafts' or the 'spam' folder...
-                    else if ( folder.slug === 'drafts' || folder.slug === 'trash' || folder.slug === 'spam' )
-                    {
-                        // Set the count to the count of all mails
-                        count = mails.length;
-                    }
-                    // Otherwise ('inbox')...
-                    else
-                    {
-                        // Go through the mails and count the unread ones
-                        mails.forEach((mail) =>
-                        {
-                            if ( mail.unread )
-                            {
-                                count++;
-                            }
-                        });
-                    }
-
-                    // Append the count to the folder mock-api
-                    folder.count = count;
-
-                    // Reset the count
+                // If we are counting the 'sent' or the 'trash' folder...
+                if (folder.slug === 'sent' || folder.slug === 'trash') {
+                    // Always set the count to 0
                     count = 0;
-                });
+                }
+                // If we are counting the 'drafts' or the 'spam' folder...
+                else if (
+                    folder.slug === 'drafts' ||
+                    folder.slug === 'trash' ||
+                    folder.slug === 'spam'
+                ) {
+                    // Set the count to the count of all mails
+                    count = mails.length;
+                }
+                // Otherwise ('inbox')...
+                else {
+                    // Go through the mails and count the unread ones
+                    mails.forEach((mail) => {
+                        if (mail.unread) {
+                            count++;
+                        }
+                    });
+                }
 
-                // Return the response
-                return [200, cloneDeep(this._folders)];
+                // Append the count to the folder mock-api
+                folder.count = count;
+
+                // Reset the count
+                count = 0;
             });
 
+            // Return the response
+            return [200, cloneDeep(this._folders)];
+        });
+
         // -----------------------------------------------------------------------------------------------------
         // @ Filters - GET
         // -----------------------------------------------------------------------------------------------------
@@ -124,8 +123,7 @@ export class MailboxMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/apps/mailbox/label')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the label
                 const label = cloneDeep(request.body.label);
 
@@ -133,7 +131,8 @@ export class MailboxMockApi
                 label.id = FuseMockApiUtils.guid();
 
                 // Generate a slug
-                label.slug = label.title.toLowerCase()
+                label.slug = label.title
+                    .toLowerCase()
                     .replace(/ /g, '-')
                     .replace(/[-]+/g, '-')
                     .replace(/[^\w-]+/g, '');
@@ -144,17 +143,16 @@ export class MailboxMockApi
                 let sameSlug;
                 let slugSuffix = 1;
 
-                do
-                {
-                    sameSlug = this._labels.filter(item => item.slug === label.slug);
+                do {
+                    sameSlug = this._labels.filter(
+                        (item) => item.slug === label.slug
+                    );
 
-                    if ( sameSlug.length > 0 )
-                    {
+                    if (sameSlug.length > 0) {
                         label.slug = originalSlug + '-' + slugSuffix;
                         slugSuffix++;
                     }
-                }
-                while ( sameSlug.length > 0 );
+                } while (sameSlug.length > 0);
 
                 // Add the label
                 this._labels.push(label);
@@ -168,8 +166,7 @@ export class MailboxMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/mailbox/label')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and label
                 const id = request.body.id;
                 const label = cloneDeep(request.body.label);
@@ -178,12 +175,11 @@ export class MailboxMockApi
                 let updatedLabel = null;
 
                 // Find the label and update it
-                this._labels.forEach((item, index, labels) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._labels.forEach((item, index, labels) => {
+                    if (item.id === id) {
                         // Update the slug
-                        label.slug = label.title.toLowerCase()
+                        label.slug = label.title
+                            .toLowerCase()
                             .replace(/ /g, '-')
                             .replace(/[-]+/g, '-')
                             .replace(/[^\w-]+/g, '');
@@ -205,21 +201,21 @@ export class MailboxMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/mailbox/label')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the label and delete it
-                const index = this._labels.findIndex(item => item.id === id);
+                const index = this._labels.findIndex((item) => item.id === id);
                 this._labels.splice(index, 1);
 
                 // Get all the mails that have the label
-                const mailsWithLabel = this._mails.filter(mail => mail.labels.indexOf(id) > -1);
+                const mailsWithLabel = this._mails.filter(
+                    (mail) => mail.labels.indexOf(id) > -1
+                );
 
                 // Iterate through them and remove the label
-                mailsWithLabel.forEach((mail) =>
-                {
+                mailsWithLabel.forEach((mail) => {
                     mail.labels.splice(mail.labels.indexOf(id), 1);
                 });
 
@@ -232,8 +228,7 @@ export class MailboxMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/mailbox/mails', 625)
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // First, decide if mails are requested by folder, filter or label
                 const byFolder = request.params.get('folder');
                 const byFilter = request.params.get('filter');
@@ -243,30 +238,36 @@ export class MailboxMockApi
                 let mails: any[] | null = cloneDeep(this._mails);
 
                 // Filter the mails depending on the requested by type
-                mails = mails.filter((mail) =>
-                {
-                    if ( byFolder )
-                    {
-                        return mail.folder === this._folders.find(folder => folder.slug === byFolder).id;
+                mails = mails.filter((mail) => {
+                    if (byFolder) {
+                        return (
+                            mail.folder ===
+                            this._folders.find(
+                                (folder) => folder.slug === byFolder
+                            ).id
+                        );
                     }
 
-                    if ( byFilter )
-                    {
+                    if (byFilter) {
                         return mail[byFilter] === true;
                     }
 
-                    if ( byLabel )
-                    {
-                        return mail.labels.includes(this._labels.find(label => label.slug === byLabel).id);
+                    if (byLabel) {
+                        return mail.labels.includes(
+                            this._labels.find((label) => label.slug === byLabel)
+                                .id
+                        );
                     }
                 });
 
                 // Sort by date - descending
-                mails.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+                mails.sort(
+                    (a, b) =>
+                        new Date(b.date).getTime() - new Date(a.date).getTime()
+                );
 
                 // Figure out the cc and bcc counts
-                mails.forEach((mail) =>
-                {
+                mails.forEach((mail) => {
                     mail.ccCount = mail.cc ? mail.cc.length : 0;
                     mail.bccCount = mail.bcc ? mail.bcc.length : 0;
                 });
@@ -280,8 +281,11 @@ export class MailboxMockApi
 
                 // Calculate pagination details
                 const begin = (page - 1) * resultsPerPage;
-                const end = Math.min((resultsPerPage * page), mailsLength);
-                const lastPage = Math.max(Math.ceil(mailsLength / resultsPerPage), 1);
+                const end = Math.min(resultsPerPage * page, mailsLength);
+                const lastPage = Math.max(
+                    Math.ceil(mailsLength / resultsPerPage),
+                    1
+                );
 
                 // Prepare the pagination object
                 let pagination = {};
@@ -290,26 +294,23 @@ export class MailboxMockApi
                 // the last possible page number, return null for
                 // mails but also send the last possible page so
                 // the app can navigate to there
-                if ( page > lastPage )
-                {
+                if (page > lastPage) {
                     mails = null;
                     pagination = {
                         lastPage,
                     };
-                }
-                else
-                {
+                } else {
                     // Paginate the results by 10
                     mails = mails.slice(begin, end);
 
                     // Prepare the pagination mock-api
                     pagination = {
-                        totalResults  : mailsLength,
+                        totalResults: mailsLength,
                         resultsPerPage: resultsPerPage,
-                        currentPage   : page,
-                        lastPage      : lastPage,
-                        startIndex    : begin,
-                        endIndex      : end - 1,
+                        currentPage: page,
+                        lastPage: lastPage,
+                        startIndex: begin,
+                        endIndex: end - 1,
                     };
                 }
 
@@ -328,8 +329,7 @@ export class MailboxMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/mailbox/mail')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id from the params
                 const id = request.params.get('id');
 
@@ -337,12 +337,9 @@ export class MailboxMockApi
                 const mails = cloneDeep(this._mails);
 
                 // Find the mail
-                const mail = mails.find(item => item.id === id);
+                const mail = mails.find((item) => item.id === id);
 
-                return [
-                    200,
-                    mail,
-                ];
+                return [200, mail];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -350,8 +347,7 @@ export class MailboxMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/mailbox/mail')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and mail
                 const id = request.body.id;
                 const mail = cloneDeep(request.body.mail);
@@ -360,10 +356,8 @@ export class MailboxMockApi
                 let updatedMail = null;
 
                 // Find the mail and update it
-                this._mails.forEach((item, index, mails) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._mails.forEach((item, index, mails) => {
+                    if (item.id === id) {
                         // Update the mail
                         mails[index] = assign({}, mails[index], mail);
 

src/app/mock-api/apps/notes/api.ts

@@ -1,20 +1,21 @@
 import { Injectable } from '@angular/core';
 import { FuseMockApiUtils } from '@fuse/lib/mock-api';
 import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
-import { labels as labelsData, notes as notesData } from 'app/mock-api/apps/notes/data';
+import {
+    labels as labelsData,
+    notes as notesData,
+} from 'app/mock-api/apps/notes/data';
 import { cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class NotesMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class NotesMockApi {
     private _labels: any[] = labelsData;
     private _notes: any[] = notesData;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -26,38 +27,30 @@ export class NotesMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Labels - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/notes/labels')
-            .reply(() => [
-                200,
-                cloneDeep(this._labels),
-            ]);
+            .reply(() => [200, cloneDeep(this._labels)]);
 
         // -----------------------------------------------------------------------------------------------------
         // @ Labels - POST
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/apps/notes/labels')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Create a new label
                 const label = {
-                    id   : FuseMockApiUtils.guid(),
+                    id: FuseMockApiUtils.guid(),
                     title: request.body.title,
                 };
 
                 // Update the labels
                 this._labels.push(label);
 
-                return [
-                    200,
-                    cloneDeep(this._labels),
-                ];
+                return [200, cloneDeep(this._labels)];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -65,16 +58,13 @@ export class NotesMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/notes/labels')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get label
                 const updatedLabel = request.body.label;
 
                 // Update the label
-                this._labels = this._labels.map((label) =>
-                {
-                    if ( label.id === updatedLabel.id )
-                    {
+                this._labels = this._labels.map((label) => {
+                    if (label.id === updatedLabel.id) {
                         return {
                             ...label,
                             title: updatedLabel.title,
@@ -84,10 +74,7 @@ export class NotesMockApi
                     return label;
                 });
 
-                return [
-                    200,
-                    cloneDeep(this._labels),
-                ];
+                return [200, cloneDeep(this._labels)];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -95,24 +82,20 @@ export class NotesMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/notes/labels')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get label id
                 const id = request.params.get('id');
 
                 // Delete the label
-                this._labels = this._labels.filter(label => label.id !== id);
+                this._labels = this._labels.filter((label) => label.id !== id);
 
                 // Go through notes and delete the label
-                this._notes = this._notes.map(note => ({
+                this._notes = this._notes.map((note) => ({
                     ...note,
-                    labels: note.labels.filter(item => item !== id),
+                    labels: note.labels.filter((item) => item !== id),
                 }));
 
-                return [
-                    200,
-                    cloneDeep(this._labels),
-                ];
+                return [200, cloneDeep(this._labels)];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -120,26 +103,22 @@ export class NotesMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/apps/notes/tasks')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get note and task
                 let updatedNote = request.body.note;
                 const task = request.body.task;
 
                 // Update the note
-                this._notes = this._notes.map((note) =>
-                {
-                    if ( note.id === updatedNote.id )
-                    {
+                this._notes = this._notes.map((note) => {
+                    if (note.id === updatedNote.id) {
                         // Update the tasks
-                        if ( !note.tasks )
-                        {
+                        if (!note.tasks) {
                             note.tasks = [];
                         }
 
                         note.tasks.push({
-                            id       : FuseMockApiUtils.guid(),
-                            content  : task,
+                            id: FuseMockApiUtils.guid(),
+                            content: task,
                             completed: false,
                         });
 
@@ -154,44 +133,34 @@ export class NotesMockApi
                     return note;
                 });
 
-                return [
-                    200,
-                    updatedNote,
-                ];
+                return [200, updatedNote];
             });
 
         // -----------------------------------------------------------------------------------------------------
         // @ Notes - GET
         // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/apps/notes/all')
-            .reply(() =>
-            {
-                // Clone the labels and notes
-                const labels = cloneDeep(this._labels);
-                let notes = cloneDeep(this._notes);
+        this._fuseMockApiService.onGet('api/apps/notes/all').reply(() => {
+            // Clone the labels and notes
+            const labels = cloneDeep(this._labels);
+            let notes = cloneDeep(this._notes);
 
-                // Attach the labels to the notes
-                notes = notes.map(note => (
-                    {
-                        ...note,
-                        labels: note.labels.map(labelId => labels.find(label => label.id === labelId)),
-                    }
-                ));
+            // Attach the labels to the notes
+            notes = notes.map((note) => ({
+                ...note,
+                labels: note.labels.map((labelId) =>
+                    labels.find((label) => label.id === labelId)
+                ),
+            }));
 
-                return [
-                    200,
-                    notes,
-                ];
-            });
+            return [200, notes];
+        });
 
         // -----------------------------------------------------------------------------------------------------
         // @ Notes - POST
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/apps/notes')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get note
                 const note = request.body.note;
 
@@ -201,10 +170,7 @@ export class NotesMockApi
                 // Push the note
                 this._notes.push(note);
 
-                return [
-                    200,
-                    note,
-                ];
+                return [200, note];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -212,16 +178,13 @@ export class NotesMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/notes')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get note
                 const updatedNote = request.body.updatedNote;
 
                 // Update the note
-                this._notes = this._notes.map((note) =>
-                {
-                    if ( note.id === updatedNote.id )
-                    {
+                this._notes = this._notes.map((note) => {
+                    if (note.id === updatedNote.id) {
                         return {
                             ...updatedNote,
                         };
@@ -230,10 +193,7 @@ export class NotesMockApi
                     return note;
                 });
 
-                return [
-                    200,
-                    updatedNote,
-                ];
+                return [200, updatedNote];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -241,16 +201,13 @@ export class NotesMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/notes')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the note and delete it
-                this._notes.forEach((item, index) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._notes.forEach((item, index) => {
+                    if (item.id === id) {
                         this._notes.splice(index, 1);
                     }
                 });

src/app/mock-api/apps/notes/data.ts

@@ -6,378 +6,445 @@ const now = DateTime.now();
 
 export const labels = [
     {
-        id   : 'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
+        id: 'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
         title: 'Family',
     },
     {
-        id   : 'e2f749f5-41ed-49d0-a92a-1c83d879e371',
+        id: 'e2f749f5-41ed-49d0-a92a-1c83d879e371',
         title: 'Work',
     },
     {
-        id   : 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
+        id: 'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
         title: 'Tasks',
     },
     {
-        id   : '6c288794-47eb-4605-8bdf-785b61a449d3',
+        id: '6c288794-47eb-4605-8bdf-785b61a449d3',
         title: 'Priority',
     },
     {
-        id   : 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
+        id: 'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
         title: 'Personal',
     },
     {
-        id   : '2dc11344-3507-48e0-83d6-1c047107f052',
+        id: '2dc11344-3507-48e0-83d6-1c047107f052',
         title: 'Friends',
     },
 ];
 
 export const notes = [
     {
-        id       : '8f011ac5-b71c-4cd7-a317-857dcd7d85e0',
-        title    : '',
-        content  : 'Find a new company name',
-        tasks    : null,
-        image    : null,
-        reminder : null,
-        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
-        archived : false,
-        createdAt: now.set({
-            hour  : 10,
-            minute: 19,
-        }).minus({day: 98}).toISO(),
+        id: '8f011ac5-b71c-4cd7-a317-857dcd7d85e0',
+        title: '',
+        content: 'Find a new company name',
+        tasks: null,
+        image: null,
+        reminder: null,
+        labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 10,
+                minute: 19,
+            })
+            .minus({ day: 98 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : 'ced0a1ce-051d-41a3-b080-e2161e4ae621',
-        title    : '',
-        content  : 'Send the photos of last summer to John',
-        tasks    : null,
-        image    : 'images/cards/14-640x480.jpg',
-        reminder : null,
-        labels   : [
+        id: 'ced0a1ce-051d-41a3-b080-e2161e4ae621',
+        title: '',
+        content: 'Send the photos of last summer to John',
+        tasks: null,
+        image: 'images/cards/14-640x480.jpg',
+        reminder: null,
+        labels: [
             'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
         ],
-        archived : false,
-        createdAt: now.set({
-            hour  : 15,
-            minute: 37,
-        }).minus({day: 80}).toISO(),
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 15,
+                minute: 37,
+            })
+            .minus({ day: 80 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : 'd3ac02a9-86e4-4187-bbd7-2c965518b3a3',
-        title    : '',
-        content  : 'Update the design of the theme',
-        tasks    : null,
-        image    : null,
-        reminder : null,
-        labels   : ['6c288794-47eb-4605-8bdf-785b61a449d3'],
-        archived : false,
-        createdAt: now.set({
-            hour  : 19,
-            minute: 27,
-        }).minus({day: 74}).toISO(),
-        updatedAt: now.set({
-            hour  : 15,
-            minute: 36,
-        }).minus({day: 50}).toISO(),
+        id: 'd3ac02a9-86e4-4187-bbd7-2c965518b3a3',
+        title: '',
+        content: 'Update the design of the theme',
+        tasks: null,
+        image: null,
+        reminder: null,
+        labels: ['6c288794-47eb-4605-8bdf-785b61a449d3'],
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 19,
+                minute: 27,
+            })
+            .minus({ day: 74 })
+            .toISO(),
+        updatedAt: now
+            .set({
+                hour: 15,
+                minute: 36,
+            })
+            .minus({ day: 50 })
+            .toISO(),
     },
     {
-        id       : '89861bd4-0144-4bb4-8b39-332ca10371d5',
-        title    : '',
-        content  : 'Theming support for all apps',
-        tasks    : null,
-        image    : null,
-        reminder : now.set({
-            hour  : 12,
-            minute: 34,
-        }).plus({day: 50}).toISO(),
-        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
-        archived : false,
-        createdAt: now.set({
-            hour  : 12,
-            minute: 34,
-        }).minus({day: 59}).toISO(),
+        id: '89861bd4-0144-4bb4-8b39-332ca10371d5',
+        title: '',
+        content: 'Theming support for all apps',
+        tasks: null,
+        image: null,
+        reminder: now
+            .set({
+                hour: 12,
+                minute: 34,
+            })
+            .plus({ day: 50 })
+            .toISO(),
+        labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 12,
+                minute: 34,
+            })
+            .minus({ day: 59 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : 'ffd20f3c-2d43-4c6b-8021-278032fc9e92',
-        title    : 'Gift Ideas',
-        content  : 'Stephanie\'s birthday is coming and I need to pick a present for her. Take a look at the below list and buy one of them (or all of them)',
-        tasks    : [
+        id: 'ffd20f3c-2d43-4c6b-8021-278032fc9e92',
+        title: 'Gift Ideas',
+        content:
+            "Stephanie's birthday is coming and I need to pick a present for her. Take a look at the below list and buy one of them (or all of them)",
+        tasks: [
             {
-                id       : '330a924f-fb51-48f6-a374-1532b1dd353d',
-                content  : 'Scarf',
+                id: '330a924f-fb51-48f6-a374-1532b1dd353d',
+                content: 'Scarf',
                 completed: false,
             },
             {
-                id       : '781855a6-2ad2-4df4-b0af-c3cb5f302b40',
-                content  : 'A new bike helmet',
+                id: '781855a6-2ad2-4df4-b0af-c3cb5f302b40',
+                content: 'A new bike helmet',
                 completed: true,
             },
             {
-                id       : 'bcb8923b-33cd-42c2-9203-170994fa24f5',
-                content  : 'Necklace',
+                id: 'bcb8923b-33cd-42c2-9203-170994fa24f5',
+                content: 'Necklace',
                 completed: false,
             },
             {
-                id       : '726bdf6e-5cd7-408a-9a4f-0d7bb98c1c4b',
-                content  : 'Flowers',
+                id: '726bdf6e-5cd7-408a-9a4f-0d7bb98c1c4b',
+                content: 'Flowers',
                 completed: false,
             },
         ],
-        image    : null,
-        reminder : null,
-        labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
-        archived : false,
-        createdAt: now.set({
-            hour  : 16,
-            minute: 4,
-        }).minus({day: 47}).toISO(),
+        image: null,
+        reminder: null,
+        labels: ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 16,
+                minute: 4,
+            })
+            .minus({ day: 47 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : '71d223bb-abab-4183-8919-cd3600a950b4',
-        title    : 'Shopping list',
-        content  : '',
-        tasks    : [
+        id: '71d223bb-abab-4183-8919-cd3600a950b4',
+        title: 'Shopping list',
+        content: '',
+        tasks: [
             {
-                id       : 'e3cbc986-641c-4448-bc26-7ecfa0549c22',
-                content  : 'Bread',
+                id: 'e3cbc986-641c-4448-bc26-7ecfa0549c22',
+                content: 'Bread',
                 completed: true,
             },
             {
-                id       : '34013111-ab2c-4b2f-9352-d2ae282f57d3',
-                content  : 'Milk',
+                id: '34013111-ab2c-4b2f-9352-d2ae282f57d3',
+                content: 'Milk',
                 completed: false,
             },
             {
-                id       : '0fbdea82-cc79-4433-8ee4-54fd542c380d',
-                content  : 'Onions',
+                id: '0fbdea82-cc79-4433-8ee4-54fd542c380d',
+                content: 'Onions',
                 completed: false,
             },
             {
-                id       : '66490222-743e-4262-ac91-773fcd98a237',
-                content  : 'Coffee',
+                id: '66490222-743e-4262-ac91-773fcd98a237',
+                content: 'Coffee',
                 completed: true,
             },
             {
-                id       : 'ab367215-d06a-48b0-a7b8-e161a63b07bd',
-                content  : 'Toilet Paper',
+                id: 'ab367215-d06a-48b0-a7b8-e161a63b07bd',
+                content: 'Toilet Paper',
                 completed: true,
             },
         ],
-        image    : null,
-        reminder : now.set({
-            hour  : 10,
-            minute: 44,
-        }).minus({day: 35}).toISO(),
-        labels   : ['b1cde9ee-e54d-4142-ad8b-cf55dafc9528'],
-        archived : false,
-        createdAt: now.set({
-            hour  : 10,
-            minute: 44,
-        }).minus({day: 35}).toISO(),
+        image: null,
+        reminder: now
+            .set({
+                hour: 10,
+                minute: 44,
+            })
+            .minus({ day: 35 })
+            .toISO(),
+        labels: ['b1cde9ee-e54d-4142-ad8b-cf55dafc9528'],
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 10,
+                minute: 44,
+            })
+            .minus({ day: 35 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : '11fbeb98-ae5e-41ad-bed6-330886fd7906',
-        title    : 'Keynote Schedule',
-        content  : '',
-        tasks    : [
+        id: '11fbeb98-ae5e-41ad-bed6-330886fd7906',
+        title: 'Keynote Schedule',
+        content: '',
+        tasks: [
             {
-                id       : '2711bac1-7d8a-443a-a4fe-506ef51d3fcb',
-                content  : 'Breakfast',
+                id: '2711bac1-7d8a-443a-a4fe-506ef51d3fcb',
+                content: 'Breakfast',
                 completed: true,
             },
             {
-                id       : 'e3a2d675-a3e5-4cef-9205-feeccaf949d7',
-                content  : 'Opening ceremony',
+                id: 'e3a2d675-a3e5-4cef-9205-feeccaf949d7',
+                content: 'Opening ceremony',
                 completed: true,
             },
             {
-                id       : '7a721b6d-9d85-48e0-b6c3-f927079af582',
-                content  : 'Talk 1: How we did it!',
+                id: '7a721b6d-9d85-48e0-b6c3-f927079af582',
+                content: 'Talk 1: How we did it!',
                 completed: true,
             },
             {
-                id       : 'bdb4d5cd-5bb8-45e2-9186-abfd8307e429',
-                content  : 'Talk 2: How can you do it!',
+                id: 'bdb4d5cd-5bb8-45e2-9186-abfd8307e429',
+                content: 'Talk 2: How can you do it!',
                 completed: false,
             },
             {
-                id       : 'c8293bb4-8ab4-4310-bbc2-52ecf8ec0c54',
-                content  : 'Lunch break',
+                id: 'c8293bb4-8ab4-4310-bbc2-52ecf8ec0c54',
+                content: 'Lunch break',
                 completed: false,
             },
         ],
-        image    : null,
-        reminder : now.set({
-            hour  : 11,
-            minute: 27,
-        }).minus({day: 14}).toISO(),
-        labels   : [
+        image: null,
+        reminder: now
+            .set({
+                hour: 11,
+                minute: 27,
+            })
+            .minus({ day: 14 })
+            .toISO(),
+        labels: [
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
             'e2f749f5-41ed-49d0-a92a-1c83d879e371',
         ],
-        archived : false,
-        createdAt: now.set({
-            hour  : 11,
-            minute: 27,
-        }).minus({day: 24}).toISO(),
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 11,
+                minute: 27,
+            })
+            .minus({ day: 24 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : 'd46dee8b-8761-4b6d-a1df-449d6e6feb6a',
-        title    : '',
-        content  : 'Organize the dad\'s surprise retirement party',
-        tasks    : null,
-        image    : null,
-        reminder : now.set({
-            hour  : 14,
-            minute: 56,
-        }).minus({day: 25}).toISO(),
-        labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
-        archived : false,
-        createdAt: now.set({
-            hour  : 14,
-            minute: 56,
-        }).minus({day: 20}).toISO(),
+        id: 'd46dee8b-8761-4b6d-a1df-449d6e6feb6a',
+        title: '',
+        content: "Organize the dad's surprise retirement party",
+        tasks: null,
+        image: null,
+        reminder: now
+            .set({
+                hour: 14,
+                minute: 56,
+            })
+            .minus({ day: 25 })
+            .toISO(),
+        labels: ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 14,
+                minute: 56,
+            })
+            .minus({ day: 20 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : '6bc9f002-1675-417c-93c4-308fba39023e',
-        title    : 'Plan the road trip',
-        content  : '',
-        tasks    : null,
-        image    : 'images/cards/17-640x480.jpg',
-        reminder : null,
-        labels   : [
+        id: '6bc9f002-1675-417c-93c4-308fba39023e',
+        title: 'Plan the road trip',
+        content: '',
+        tasks: null,
+        image: 'images/cards/17-640x480.jpg',
+        reminder: null,
+        labels: [
             '2dc11344-3507-48e0-83d6-1c047107f052',
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
         ],
-        archived : false,
-        createdAt: now.set({
-            hour  : 9,
-            minute: 32,
-        }).minus({day: 15}).toISO(),
-        updatedAt: now.set({
-            hour  : 17,
-            minute: 6,
-        }).minus({day: 12}).toISO(),
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 9,
+                minute: 32,
+            })
+            .minus({ day: 15 })
+            .toISO(),
+        updatedAt: now
+            .set({
+                hour: 17,
+                minute: 6,
+            })
+            .minus({ day: 12 })
+            .toISO(),
     },
     {
-        id       : '15188348-78aa-4ed6-b5c2-028a214ba987',
-        title    : 'Office Address',
-        content  : '933 8th Street Stamford, CT 06902',
-        tasks    : null,
-        image    : null,
-        reminder : null,
-        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
-        archived : false,
-        createdAt: now.set({
-            hour  : 20,
-            minute: 5,
-        }).minus({day: 12}).toISO(),
+        id: '15188348-78aa-4ed6-b5c2-028a214ba987',
+        title: 'Office Address',
+        content: '933 8th Street Stamford, CT 06902',
+        tasks: null,
+        image: null,
+        reminder: null,
+        labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 20,
+                minute: 5,
+            })
+            .minus({ day: 12 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : '1dbfc685-1a0a-4070-9ca7-ed896c523037',
-        title    : 'Tasks',
-        content  : '',
-        tasks    : [
+        id: '1dbfc685-1a0a-4070-9ca7-ed896c523037',
+        title: 'Tasks',
+        content: '',
+        tasks: [
             {
-                id       : '004638bf-3ee6-47a5-891c-3be7b9f3df09',
-                content  : 'Wash the dishes',
+                id: '004638bf-3ee6-47a5-891c-3be7b9f3df09',
+                content: 'Wash the dishes',
                 completed: true,
             },
             {
-                id       : '86e6820b-1ae3-4c14-a13e-35605a0d654b',
-                content  : 'Walk the dog',
+                id: '86e6820b-1ae3-4c14-a13e-35605a0d654b',
+                content: 'Walk the dog',
                 completed: false,
             },
         ],
-        image    : null,
-        reminder : now.set({
-            hour  : 13,
-            minute: 43,
-        }).minus({day: 2}).toISO(),
-        labels   : ['bbc73458-940b-421c-8d5f-8dcd23a9b0d6'],
-        archived : false,
-        createdAt: now.set({
-            hour  : 13,
-            minute: 43,
-        }).minus({day: 7}).toISO(),
+        image: null,
+        reminder: now
+            .set({
+                hour: 13,
+                minute: 43,
+            })
+            .minus({ day: 2 })
+            .toISO(),
+        labels: ['bbc73458-940b-421c-8d5f-8dcd23a9b0d6'],
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 13,
+                minute: 43,
+            })
+            .minus({ day: 7 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : '49548409-90a3-44d4-9a9a-f5af75aa9a66',
-        title    : '',
-        content  : 'Dinner with parents',
-        tasks    : null,
-        image    : null,
-        reminder : null,
-        labels   : [
+        id: '49548409-90a3-44d4-9a9a-f5af75aa9a66',
+        title: '',
+        content: 'Dinner with parents',
+        tasks: null,
+        image: null,
+        reminder: null,
+        labels: [
             'f47c92e5-20b9-44d9-917f-9ff4ad25dfd0',
             '6c288794-47eb-4605-8bdf-785b61a449d3',
         ],
-        archived : false,
-        createdAt: now.set({
-            hour  : 7,
-            minute: 12,
-        }).minus({day: 2}).toISO(),
+        archived: false,
+        createdAt: now
+            .set({
+                hour: 7,
+                minute: 12,
+            })
+            .minus({ day: 2 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
-        title    : '',
-        content  : 'Re-fill the medicine cabinet',
-        tasks    : null,
-        image    : null,
-        reminder : null,
-        labels   : [
+        id: 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
+        title: '',
+        content: 'Re-fill the medicine cabinet',
+        tasks: null,
+        image: null,
+        reminder: null,
+        labels: [
             'bbc73458-940b-421c-8d5f-8dcd23a9b0d6',
             '6c288794-47eb-4605-8bdf-785b61a449d3',
         ],
-        archived : true,
-        createdAt: now.set({
-            hour  : 17,
-            minute: 14,
-        }).minus({day: 100}).toISO(),
+        archived: true,
+        createdAt: now
+            .set({
+                hour: 17,
+                minute: 14,
+            })
+            .minus({ day: 100 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
-        title    : '',
-        content  : 'Update the icons pack',
-        tasks    : null,
-        image    : null,
-        reminder : null,
-        labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
-        archived : true,
-        createdAt: now.set({
-            hour  : 10,
-            minute: 29,
-        }).minus({day: 85}).toISO(),
+        id: 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
+        title: '',
+        content: 'Update the icons pack',
+        tasks: null,
+        image: null,
+        reminder: null,
+        labels: ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
+        archived: true,
+        createdAt: now
+            .set({
+                hour: 10,
+                minute: 29,
+            })
+            .minus({ day: 85 })
+            .toISO(),
         updatedAt: null,
     },
     {
-        id       : '46214383-f8e7-44da-aa2e-0b685e0c5027',
-        title    : 'Team Meeting',
-        content  : 'Talk about the future of the web apps',
-        tasks    : null,
-        image    : null,
-        reminder : null,
-        labels   : [
+        id: '46214383-f8e7-44da-aa2e-0b685e0c5027',
+        title: 'Team Meeting',
+        content: 'Talk about the future of the web apps',
+        tasks: null,
+        image: null,
+        reminder: null,
+        labels: [
             'e2f749f5-41ed-49d0-a92a-1c83d879e371',
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
         ],
-        archived : true,
-        createdAt: now.set({
-            hour  : 15,
-            minute: 30,
-        }).minus({day: 69}).toISO(),
+        archived: true,
+        createdAt: now
+            .set({
+                hour: 15,
+                minute: 30,
+            })
+            .minus({ day: 69 })
+            .toISO(),
         updatedAt: null,
     },
 ];

src/app/mock-api/apps/scrumboard/api.ts

@@ -1,11 +1,16 @@
 import { Injectable } from '@angular/core';
 import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
-import { boards as boardsData, cards as cardsData, labels as labelsData, lists as listsData, members as membersData } from 'app/mock-api/apps/scrumboard/data';
+import {
+    boards as boardsData,
+    cards as cardsData,
+    labels as labelsData,
+    lists as listsData,
+    members as membersData,
+} from 'app/mock-api/apps/scrumboard/data';
 import { assign, cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class ScrumboardMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class ScrumboardMockApi {
     // Private
     private _boards: any[] = boardsData;
     private _cards: any[] = cardsData;
@@ -16,8 +21,7 @@ export class ScrumboardMockApi
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -29,28 +33,27 @@ export class ScrumboardMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Boards - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/scrumboard/boards')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Clone the boards
                 let boards = cloneDeep(this._boards);
 
                 // Go through the boards and inject the members
-                boards = boards.map(board => ({
+                boards = boards.map((board) => ({
                     ...board,
-                    members: board.members.map(boardMember => this._members.find(member => boardMember === member.id)),
+                    members: board.members.map((boardMember) =>
+                        this._members.find(
+                            (member) => boardMember === member.id
+                        )
+                    ),
                 }));
 
-                return [
-                    200,
-                    boards,
-                ];
+                return [200, boards];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -58,39 +61,43 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/scrumboard/board')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the board
-                const board = this._boards.find(item => item.id === id);
+                const board = this._boards.find((item) => item.id === id);
 
                 // Attach the board lists
-                board.lists = this._lists.filter(item => item.boardId === id).sort((a, b) => a.position - b.position);
+                board.lists = this._lists
+                    .filter((item) => item.boardId === id)
+                    .sort((a, b) => a.position - b.position);
 
                 // Grab all cards that belong to this board and attach labels to them
-                let cards = this._cards.filter(item => item.boardId === id);
-                cards = cards.map(card => (
-                    {
-                        ...card,
-                        labels: card.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId)),
-                    }
-                ));
+                let cards = this._cards.filter((item) => item.boardId === id);
+                cards = cards.map((card) => ({
+                    ...card,
+                    labels: card.labels.map((cardLabelId) =>
+                        this._labels.find((label) => label.id === cardLabelId)
+                    ),
+                }));
 
                 // Attach the board cards into corresponding lists
-                board.lists.forEach((list, index, array) =>
-                {
-                    array[index].cards = cards.filter(item => item.boardId === id && item.listId === list.id).sort((a, b) => a.position - b.position);
+                board.lists.forEach((list, index, array) => {
+                    array[index].cards = cards
+                        .filter(
+                            (item) =>
+                                item.boardId === id && item.listId === list.id
+                        )
+                        .sort((a, b) => a.position - b.position);
                 });
 
                 // Attach the board labels
-                board.labels = this._labels.filter(item => item.boardId === id);
+                board.labels = this._labels.filter(
+                    (item) => item.boardId === id
+                );
 
-                return [
-                    200,
-                    cloneDeep(board),
-                ];
+                return [200, cloneDeep(board)];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -98,8 +105,7 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/apps/scrumboard/board/list')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the list
                 const newList = cloneDeep(request.body.list);
 
@@ -109,10 +115,7 @@ export class ScrumboardMockApi
                 // Store the new list
                 this._lists.push(newList);
 
-                return [
-                    200,
-                    newList,
-                ];
+                return [200, newList];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -120,8 +123,7 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/scrumboard/board/list')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the list
                 const list = cloneDeep(request.body.list);
 
@@ -129,10 +131,8 @@ export class ScrumboardMockApi
                 let updatedList = null;
 
                 // Find the list and update it
-                this._lists.forEach((item, index, lists) =>
-                {
-                    if ( item.id === list.id )
-                    {
+                this._lists.forEach((item, index, lists) => {
+                    if (item.id === list.id) {
                         // Update the list
                         lists[index] = assign({}, lists[index], list);
 
@@ -141,10 +141,7 @@ export class ScrumboardMockApi
                     }
                 });
 
-                return [
-                    200,
-                    updatedList,
-                ];
+                return [200, updatedList];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -152,8 +149,7 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/scrumboard/board/lists')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the lists
                 const lists = cloneDeep(request.body.lists);
 
@@ -161,10 +157,11 @@ export class ScrumboardMockApi
                 const updatedLists = [];
 
                 // Go through the lists
-                lists.forEach((item) =>
-                {
+                lists.forEach((item) => {
                     // Find the list
-                    const index = this._lists.findIndex(list => item.id === list.id);
+                    const index = this._lists.findIndex(
+                        (list) => item.id === list.id
+                    );
 
                     // Update the list
                     this._lists[index] = assign({}, this._lists[index], item);
@@ -173,10 +170,7 @@ export class ScrumboardMockApi
                     updatedLists.push(item);
                 });
 
-                return [
-                    200,
-                    updatedLists,
-                ];
+                return [200, updatedLists];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -184,22 +178,18 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/scrumboard/board/list')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the list and delete it
-                const index = this._lists.findIndex(item => item.id === id);
+                const index = this._lists.findIndex((item) => item.id === id);
                 this._lists.splice(index, 1);
 
                 // Filter out the cards that belonged to the list to delete them
-                this._cards = this._cards.filter(card => card.listId !== id);
+                this._cards = this._cards.filter((card) => card.listId !== id);
 
-                return [
-                    200,
-                    true,
-                ];
+                return [200, true];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -207,8 +197,7 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPut('api/apps/scrumboard/board/card')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the card
                 const newCard = cloneDeep(request.body.card);
 
@@ -218,10 +207,7 @@ export class ScrumboardMockApi
                 // Unshift the new card
                 this._cards.push(newCard);
 
-                return [
-                    200,
-                    newCard,
-                ];
+                return [200, newCard];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -229,8 +215,7 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/scrumboard/board/card')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and card
                 const id = request.body.id;
                 const card = cloneDeep(request.body.card);
@@ -239,13 +224,11 @@ export class ScrumboardMockApi
                 let updatedCard = null;
 
                 // Go through the labels and leave only ids of them
-                card.labels = card.labels.map(itemLabel => itemLabel.id);
+                card.labels = card.labels.map((itemLabel) => itemLabel.id);
 
                 // Find the card and update it
-                this._cards.forEach((item, index, cards) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._cards.forEach((item, index, cards) => {
+                    if (item.id === id) {
                         // Update the card
                         cards[index] = assign({}, cards[index], card);
 
@@ -255,12 +238,11 @@ export class ScrumboardMockApi
                 });
 
                 // Attach the labels of the card
-                updatedCard.labels = updatedCard.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId));
+                updatedCard.labels = updatedCard.labels.map((cardLabelId) =>
+                    this._labels.find((label) => label.id === cardLabelId)
+                );
 
-                return [
-                    200,
-                    updatedCard,
-                ];
+                return [200, updatedCard];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -268,8 +250,7 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/scrumboard/board/cards')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the cards
                 const cards = cloneDeep(request.body.cards);
 
@@ -277,28 +258,28 @@ export class ScrumboardMockApi
                 const updatedCards = [];
 
                 // Go through the cards
-                cards.forEach((item) =>
-                {
+                cards.forEach((item) => {
                     // Find the card
-                    const index = this._cards.findIndex(card => item.id === card.id);
+                    const index = this._cards.findIndex(
+                        (card) => item.id === card.id
+                    );
 
                     // Go through the labels and leave only ids of them
-                    item.labels = item.labels.map(itemLabel => itemLabel.id);
+                    item.labels = item.labels.map((itemLabel) => itemLabel.id);
 
                     // Update the card
                     this._cards[index] = assign({}, this._cards[index], item);
 
                     // Attach the labels of the card
-                    item.labels = item.labels.map(cardLabelId => this._labels.find(label => label.id === cardLabelId));
+                    item.labels = item.labels.map((cardLabelId) =>
+                        this._labels.find((label) => label.id === cardLabelId)
+                    );
 
                     // Store in the updated cards
                     updatedCards.push(item);
                 });
 
-                return [
-                    200,
-                    updatedCards,
-                ];
+                return [200, updatedCards];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -306,19 +287,15 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/scrumboard/board/card')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the card and delete it
-                const index = this._cards.findIndex(item => item.id === id);
+                const index = this._cards.findIndex((item) => item.id === id);
                 this._cards.splice(index, 1);
 
-                return [
-                    200,
-                    true,
-                ];
+                return [200, true];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -326,26 +303,26 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/scrumboard/board/card/positions')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the cards
                 const cards = request.body.cards;
 
                 // Go through the cards
-                this._cards.forEach((card) =>
-                {
+                this._cards.forEach((card) => {
                     // Find this card's index within the cards array that comes with the request
                     // and assign that index as the new position number for the card
-                    card.position = cards.findIndex(item => item.id === card.id && item.listId === card.listId && item.boardId === card.boardId);
+                    card.position = cards.findIndex(
+                        (item) =>
+                            item.id === card.id &&
+                            item.listId === card.listId &&
+                            item.boardId === card.boardId
+                    );
                 });
 
                 // Clone the cards
                 const updatedCards = cloneDeep(this._cards);
 
-                return [
-                    200,
-                    updatedCards,
-                ];
+                return [200, updatedCards];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -353,18 +330,16 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/scrumboard/board/labels')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the board id
                 const boardId = request.params.get('boardId');
 
                 // Filter the labels
-                const labels = this._labels.filter(item => item.boardId === boardId);
+                const labels = this._labels.filter(
+                    (item) => item.boardId === boardId
+                );
 
-                return [
-                    200,
-                    cloneDeep(labels),
-                ];
+                return [200, cloneDeep(labels)];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -372,8 +347,7 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPut('api/apps/scrumboard/board/label')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the label
                 const newLabel = cloneDeep(request.body.label);
 
@@ -383,10 +357,7 @@ export class ScrumboardMockApi
                 // Unshift the new label
                 this._labels.unshift(newLabel);
 
-                return [
-                    200,
-                    newLabel,
-                ];
+                return [200, newLabel];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -394,8 +365,7 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/scrumboard/board/label')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and label
                 const id = request.body.id;
                 const label = cloneDeep(request.body.label);
@@ -404,10 +374,8 @@ export class ScrumboardMockApi
                 let updatedLabel = null;
 
                 // Find the label and update it
-                this._labels.forEach((item, index, labels) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._labels.forEach((item, index, labels) => {
+                    if (item.id === id) {
                         // Update the label
                         labels[index] = assign({}, labels[index], label);
 
@@ -416,10 +384,7 @@ export class ScrumboardMockApi
                     }
                 });
 
-                return [
-                    200,
-                    updatedLabel,
-                ];
+                return [200, updatedLabel];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -427,28 +392,25 @@ export class ScrumboardMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/scrumboard/board/label')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the label and delete it
-                const index = this._labels.findIndex(item => item.id === id);
+                const index = this._labels.findIndex((item) => item.id === id);
                 this._labels.splice(index, 1);
 
                 // Get the cards that have the label
-                const cardsWithLabel = this._cards.filter(card => card.labels.indexOf(id) > -1);
+                const cardsWithLabel = this._cards.filter(
+                    (card) => card.labels.indexOf(id) > -1
+                );
 
                 // Iterate through them and remove the label
-                cardsWithLabel.forEach((card) =>
-                {
+                cardsWithLabel.forEach((card) => {
                     card.tags.splice(card.tags.indexOf(id), 1);
                 });
 
-                return [
-                    200,
-                    true,
-                ];
+                return [200, true];
             });
     }
 }

src/app/mock-api/apps/scrumboard/data.ts

@@ -6,24 +6,24 @@ const now = DateTime.now();
 
 export const boards = [
     {
-        id          : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        title       : 'Admin Dashboard',
-        description : 'Roadmap for the new project',
-        icon        : 'heroicons_outline:rectangle-group',
-        lastActivity: now.startOf('day').minus({day: 1}).toISO(),
-        members     : [
+        id: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        title: 'Admin Dashboard',
+        description: 'Roadmap for the new project',
+        icon: 'heroicons_outline:rectangle-group',
+        lastActivity: now.startOf('day').minus({ day: 1 }).toISO(),
+        members: [
             '9c510cf3-460d-4a8c-b3be-bcc3db578c08',
             'baa88231-0ee6-4028-96d5-7f187e0f4cd5',
             '18bb18f3-ea7d-4465-8913-e8c9adf6f568',
         ],
     },
     {
-        id          : '0168b519-3dab-4b46-b2ea-0e678e38a583',
-        title       : 'Weekly Planning',
-        description : 'Job related tasks for the week',
-        icon        : 'heroicons_outline:calendar',
-        lastActivity: now.startOf('day').minus({day: 2}).toISO(),
-        members     : [
+        id: '0168b519-3dab-4b46-b2ea-0e678e38a583',
+        title: 'Weekly Planning',
+        description: 'Job related tasks for the week',
+        icon: 'heroicons_outline:calendar',
+        lastActivity: now.startOf('day').minus({ day: 2 }).toISO(),
+        members: [
             '79ebb9ee-1e57-4706-810c-03edaec8f56d',
             '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735',
             '5bf7ed5b-8b04-46b7-b364-005958b7d82e',
@@ -35,303 +35,284 @@ export const boards = [
         ],
     },
     {
-        id          : 'bc7db965-3c4f-4233-abf5-69bd70c3c175',
-        title       : 'Personal Tasks',
-        description : 'Personal tasks around the house',
-        icon        : 'heroicons_outline:home',
-        lastActivity: now.startOf('day').minus({week: 1}).toISO(),
-        members     : [
-            '6f6a1c34-390b-4b2e-97c8-ff0e0d787839',
-        ],
+        id: 'bc7db965-3c4f-4233-abf5-69bd70c3c175',
+        title: 'Personal Tasks',
+        description: 'Personal tasks around the house',
+        icon: 'heroicons_outline:home',
+        lastActivity: now.startOf('day').minus({ week: 1 }).toISO(),
+        members: ['6f6a1c34-390b-4b2e-97c8-ff0e0d787839'],
     },
 ];
 export const lists = [
     {
-        id      : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        id: 'a2df7786-519c-485a-a85f-c09a61cc5f37',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
         position: 65536,
-        title   : 'To do',
+        title: 'To do',
     },
     {
-        id      : '83ca2a34-65af-49c0-a42e-94a34003fcf2',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        id: '83ca2a34-65af-49c0-a42e-94a34003fcf2',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
         position: 131072,
-        title   : 'In progress',
+        title: 'In progress',
     },
     {
-        id      : 'a85ea483-f8f7-42d9-a314-3fed6aac22ab',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        id: 'a85ea483-f8f7-42d9-a314-3fed6aac22ab',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
         position: 196608,
-        title   : 'In review',
+        title: 'In review',
     },
     {
-        id      : '34cbef38-5687-4813-bd66-141a6df6d832',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        id: '34cbef38-5687-4813-bd66-141a6df6d832',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
         position: 262144,
-        title   : 'Completed',
+        title: 'Completed',
     },
 ];
 export const cards = [
     {
-        id         : 'e74e66e9-fe0f-441e-a8ce-28ed6eccc48d',
-        boardId    : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId     : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
-        position   : 65536,
-        title      : 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards',
-        description: 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards. Example that showcase all of the available bits on the card with a fairly long title compared to other cards.',
-        labels     : [
+        id: 'e74e66e9-fe0f-441e-a8ce-28ed6eccc48d',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37',
+        position: 65536,
+        title: 'Example that showcase all of the available bits on the card with a fairly long title compared to other cards',
+        description:
+            'Example that showcase all of the available bits on the card with a fairly long title compared to other cards. Example that showcase all of the available bits on the card with a fairly long title compared to other cards.',
+        labels: [
             'e0175175-2784-48f1-a519-a1d2e397c9b3',
             '51779701-818a-4a53-bc16-137c3bd7a564',
             'e8364d69-9595-46ce-a0f9-ce428632a0ac',
             'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
             'f9eeb436-13a3-4208-a239-0d555960a567',
         ],
-        dueDate    : now.startOf('day').minus({day: 10}).toISO(),
+        dueDate: now.startOf('day').minus({ day: 10 }).toISO(),
     },
     {
-        id      : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId  : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
+        id: 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37',
         position: 131072,
-        title   : 'Do a research about most needed admin applications',
-        labels  : [
-            'e0175175-2784-48f1-a519-a1d2e397c9b3',
-        ],
-        dueDate : null,
+        title: 'Do a research about most needed admin applications',
+        labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'],
+        dueDate: null,
     },
     {
-        id      : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId  : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
+        id: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37',
         position: 196608,
-        title   : 'Implement the Project dashboard',
-        labels  : [
-            'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
-        ],
-        dueDate : now.startOf('day').toISO(),
+        title: 'Implement the Project dashboard',
+        labels: ['caff9c9b-a198-4564-b1f4-8b3df1d345bb'],
+        dueDate: now.startOf('day').toISO(),
     },
     {
-        id      : '6da8747f-b474-4c9a-9eba-5ef212285500',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId  : 'a2df7786-519c-485a-a85f-c09a61cc5f37',
+        id: '6da8747f-b474-4c9a-9eba-5ef212285500',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: 'a2df7786-519c-485a-a85f-c09a61cc5f37',
         position: 262144,
-        title   : 'Implement the Analytics dashboard',
-        labels  : [
-            'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
-        ],
-        dueDate : now.startOf('day').minus({day: 1}).toISO(),
+        title: 'Implement the Analytics dashboard',
+        labels: ['caff9c9b-a198-4564-b1f4-8b3df1d345bb'],
+        dueDate: now.startOf('day').minus({ day: 1 }).toISO(),
     },
     {
-        id      : '94fb1dee-dd83-4cca-acdd-02e96d3cc4f1',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId  : '83ca2a34-65af-49c0-a42e-94a34003fcf2',
+        id: '94fb1dee-dd83-4cca-acdd-02e96d3cc4f1',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: '83ca2a34-65af-49c0-a42e-94a34003fcf2',
         position: 65536,
-        title   : 'Analytics dashboard design',
-        labels  : [
-            'e8364d69-9595-46ce-a0f9-ce428632a0ac',
-        ],
-        dueDate : null,
+        title: 'Analytics dashboard design',
+        labels: ['e8364d69-9595-46ce-a0f9-ce428632a0ac'],
+        dueDate: null,
     },
     {
-        id      : 'fc16f7d8-957d-43ed-ba85-20f99b5ce011',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId  : '83ca2a34-65af-49c0-a42e-94a34003fcf2',
+        id: 'fc16f7d8-957d-43ed-ba85-20f99b5ce011',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: '83ca2a34-65af-49c0-a42e-94a34003fcf2',
         position: 131072,
-        title   : 'Project dashboard design',
-        labels  : [
-            'e8364d69-9595-46ce-a0f9-ce428632a0ac',
-        ],
-        dueDate : null,
+        title: 'Project dashboard design',
+        labels: ['e8364d69-9595-46ce-a0f9-ce428632a0ac'],
+        dueDate: null,
     },
     {
-        id      : 'c0b32f1f-64ec-4f8d-8b11-a8dc809df331',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId  : 'a85ea483-f8f7-42d9-a314-3fed6aac22ab',
+        id: 'c0b32f1f-64ec-4f8d-8b11-a8dc809df331',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: 'a85ea483-f8f7-42d9-a314-3fed6aac22ab',
         position: 65536,
-        title   : 'JWT Auth implementation',
-        labels  : [
-            'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
-        ],
-        dueDate : null,
+        title: 'JWT Auth implementation',
+        labels: ['caff9c9b-a198-4564-b1f4-8b3df1d345bb'],
+        dueDate: null,
     },
     {
-        id      : '532c2747-be79-464a-9897-6a682bf22b64',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId  : '34cbef38-5687-4813-bd66-141a6df6d832',
+        id: '532c2747-be79-464a-9897-6a682bf22b64',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: '34cbef38-5687-4813-bd66-141a6df6d832',
         position: 65536,
-        title   : 'Create low fidelity wireframes',
-        labels  : [],
-        dueDate : null,
+        title: 'Create low fidelity wireframes',
+        labels: [],
+        dueDate: null,
     },
     {
-        id      : '1d908efe-c830-476e-9e87-d06e30d89bc2',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId  : '34cbef38-5687-4813-bd66-141a6df6d832',
+        id: '1d908efe-c830-476e-9e87-d06e30d89bc2',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: '34cbef38-5687-4813-bd66-141a6df6d832',
         position: 131072,
-        title   : 'Create high fidelity wireframes',
-        labels  : [],
-        dueDate : now.startOf('day').minus({day: 10}).toISO(),
+        title: 'Create high fidelity wireframes',
+        labels: [],
+        dueDate: now.startOf('day').minus({ day: 10 }).toISO(),
     },
     {
-        id      : 'b1da11ed-7896-4826-962d-4b7b718896d4',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId  : '34cbef38-5687-4813-bd66-141a6df6d832',
+        id: 'b1da11ed-7896-4826-962d-4b7b718896d4',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: '34cbef38-5687-4813-bd66-141a6df6d832',
         position: 196608,
-        title   : 'Collect information about most used admin layouts',
-        labels  : [
-            'e0175175-2784-48f1-a519-a1d2e397c9b3',
-        ],
-        dueDate : null,
+        title: 'Collect information about most used admin layouts',
+        labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'],
+        dueDate: null,
     },
     {
-        id      : '3b7f3ceb-107f-42bc-a204-c268c9a56cb4',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId  : '34cbef38-5687-4813-bd66-141a6df6d832',
+        id: '3b7f3ceb-107f-42bc-a204-c268c9a56cb4',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: '34cbef38-5687-4813-bd66-141a6df6d832',
         position: 262144,
-        title   : 'Do a research about latest UI trends',
-        labels  : [
-            'e0175175-2784-48f1-a519-a1d2e397c9b3',
-        ],
-        dueDate : null,
+        title: 'Do a research about latest UI trends',
+        labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'],
+        dueDate: null,
     },
     {
-        id      : 'cd7f01c5-a941-4076-8cef-37da0354e643',
-        boardId : '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        listId  : '34cbef38-5687-4813-bd66-141a6df6d832',
+        id: 'cd7f01c5-a941-4076-8cef-37da0354e643',
+        boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
+        listId: '34cbef38-5687-4813-bd66-141a6df6d832',
         position: 327680,
-        title   : 'Learn more about UX',
-        labels  : [
-            'e0175175-2784-48f1-a519-a1d2e397c9b3',
-        ],
-        dueDate : null,
+        title: 'Learn more about UX',
+        labels: ['e0175175-2784-48f1-a519-a1d2e397c9b3'],
+        dueDate: null,
     },
 ];
 export const labels = [
     {
-        id     : 'e0175175-2784-48f1-a519-a1d2e397c9b3',
+        id: 'e0175175-2784-48f1-a519-a1d2e397c9b3',
         boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        title  : 'Research',
+        title: 'Research',
     },
     {
-        id     : '51779701-818a-4a53-bc16-137c3bd7a564',
+        id: '51779701-818a-4a53-bc16-137c3bd7a564',
         boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        title  : 'Wireframing',
+        title: 'Wireframing',
     },
     {
-        id     : 'e8364d69-9595-46ce-a0f9-ce428632a0ac',
+        id: 'e8364d69-9595-46ce-a0f9-ce428632a0ac',
         boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        title  : 'Design',
+        title: 'Design',
     },
     {
-        id     : 'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
+        id: 'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
         boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        title  : 'Development',
+        title: 'Development',
     },
     {
-        id     : 'f9eeb436-13a3-4208-a239-0d555960a567',
+        id: 'f9eeb436-13a3-4208-a239-0d555960a567',
         boardId: '2c82225f-2a6c-45d3-b18a-1132712a4234',
-        title  : 'Bug',
+        title: 'Bug',
     },
 ];
 export const members = [
     {
-        id    : '6f6a1c34-390b-4b2e-97c8-ff0e0d787839',
-        name  : 'Angeline Vinson',
+        id: '6f6a1c34-390b-4b2e-97c8-ff0e0d787839',
+        name: 'Angeline Vinson',
         avatar: 'images/avatars/female-01.jpg',
     },
     {
-        id    : '4ce4be48-c8c0-468d-9df8-ddfda14cdb37',
-        name  : 'Roseann Greer',
+        id: '4ce4be48-c8c0-468d-9df8-ddfda14cdb37',
+        name: 'Roseann Greer',
         avatar: 'images/avatars/female-02.jpg',
     },
     {
-        id    : '9c510cf3-460d-4a8c-b3be-bcc3db578c08',
-        name  : 'Lorraine Barnett',
+        id: '9c510cf3-460d-4a8c-b3be-bcc3db578c08',
+        name: 'Lorraine Barnett',
         avatar: 'images/avatars/female-03.jpg',
     },
     {
-        id    : '7ec887d9-b01a-4057-b5dc-aaed18637cc1',
-        name  : 'Middleton Bradford',
+        id: '7ec887d9-b01a-4057-b5dc-aaed18637cc1',
+        name: 'Middleton Bradford',
         avatar: 'images/avatars/male-01.jpg',
     },
     {
-        id    : '74975a82-addb-427b-9b43-4d2e03331b68',
-        name  : 'Sue Hays',
+        id: '74975a82-addb-427b-9b43-4d2e03331b68',
+        name: 'Sue Hays',
         avatar: 'images/avatars/female-04.jpg',
     },
     {
-        id    : '18bb18f3-ea7d-4465-8913-e8c9adf6f568',
-        name  : 'Keith Neal',
+        id: '18bb18f3-ea7d-4465-8913-e8c9adf6f568',
+        name: 'Keith Neal',
         avatar: 'images/avatars/male-02.jpg',
     },
     {
-        id    : 'baa88231-0ee6-4028-96d5-7f187e0f4cd5',
-        name  : 'Wilkins Gilmore',
+        id: 'baa88231-0ee6-4028-96d5-7f187e0f4cd5',
+        name: 'Wilkins Gilmore',
         avatar: 'images/avatars/male-03.jpg',
     },
     {
-        id    : '0d1eb062-13d5-4286-b8d4-e0bea15f3d56',
-        name  : 'Baldwin Stein',
+        id: '0d1eb062-13d5-4286-b8d4-e0bea15f3d56',
+        name: 'Baldwin Stein',
         avatar: 'images/avatars/male-04.jpg',
     },
     {
-        id    : '5bf7ed5b-8b04-46b7-b364-005958b7d82e',
-        name  : 'Bobbie Cohen',
+        id: '5bf7ed5b-8b04-46b7-b364-005958b7d82e',
+        name: 'Bobbie Cohen',
         avatar: 'images/avatars/female-05.jpg',
     },
     {
-        id    : '93b1a72b-e2db-4f77-82d6-272047433508',
-        name  : 'Melody Peters',
+        id: '93b1a72b-e2db-4f77-82d6-272047433508',
+        name: 'Melody Peters',
         avatar: 'images/avatars/female-06.jpg',
     },
     {
-        id    : 'd1f612e6-3e3b-481f-a8a9-f917e243b06e',
-        name  : 'Marquez Ryan',
+        id: 'd1f612e6-3e3b-481f-a8a9-f917e243b06e',
+        name: 'Marquez Ryan',
         avatar: 'images/avatars/male-05.jpg',
     },
     {
-        id    : '79ebb9ee-1e57-4706-810c-03edaec8f56d',
-        name  : 'Roberta Briggs',
+        id: '79ebb9ee-1e57-4706-810c-03edaec8f56d',
+        name: 'Roberta Briggs',
         avatar: 'images/avatars/female-07.jpg',
     },
     {
-        id    : '6726643d-e8dc-42fa-83a6-b4ec06921a6b',
-        name  : 'Robbie Buckley',
+        id: '6726643d-e8dc-42fa-83a6-b4ec06921a6b',
+        name: 'Robbie Buckley',
         avatar: 'images/avatars/female-08.jpg',
     },
     {
-        id    : '8af617d7-898e-4992-beda-d5ac1d7ceda4',
-        name  : 'Garcia Whitney',
+        id: '8af617d7-898e-4992-beda-d5ac1d7ceda4',
+        name: 'Garcia Whitney',
         avatar: 'images/avatars/male-06.jpg',
     },
     {
-        id    : 'bcff44c4-9943-4adc-9049-08b1d922a658',
-        name  : 'Spencer Pate',
+        id: 'bcff44c4-9943-4adc-9049-08b1d922a658',
+        name: 'Spencer Pate',
         avatar: 'images/avatars/male-07.jpg',
     },
     {
-        id    : '54160ca2-29c9-4475-88a1-31a9307ad913',
-        name  : 'Monica Mcdaniel',
+        id: '54160ca2-29c9-4475-88a1-31a9307ad913',
+        name: 'Monica Mcdaniel',
         avatar: 'images/avatars/female-09.jpg',
     },
     {
-        id    : '51286603-3a43-444e-9242-f51fe57d5363',
-        name  : 'Mcmillan Durham',
+        id: '51286603-3a43-444e-9242-f51fe57d5363',
+        name: 'Mcmillan Durham',
         avatar: 'images/avatars/male-08.jpg',
     },
     {
-        id    : '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735',
-        name  : 'Jeoine Hebert',
+        id: '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735',
+        name: 'Jeoine Hebert',
         avatar: 'images/avatars/female-10.jpg',
     },
     {
-        id    : 'fe0fec0d-002b-406f-87ab-47eb87ba577c',
-        name  : 'Susanna Kline',
+        id: 'fe0fec0d-002b-406f-87ab-47eb87ba577c',
+        name: 'Susanna Kline',
         avatar: 'images/avatars/female-11.jpg',
     },
     {
-        id    : '23a47d2c-c6cb-40cc-af87-e946a9df5028',
-        name  : 'Suzette Singleton',
+        id: '23a47d2c-c6cb-40cc-af87-e946a9df5028',
+        name: 'Suzette Singleton',
         avatar: 'images/avatars/female-12.jpg',
     },
 ];

src/app/mock-api/apps/tasks/api.ts

@@ -1,20 +1,21 @@
 import { Injectable } from '@angular/core';
 import { FuseMockApiService } from '@fuse/lib/mock-api/mock-api.service';
 import { FuseMockApiUtils } from '@fuse/lib/mock-api/mock-api.utils';
-import { tags as tagsData, tasks as tasksData } from 'app/mock-api/apps/tasks/data';
+import {
+    tags as tagsData,
+    tasks as tasksData,
+} from 'app/mock-api/apps/tasks/data';
 import { assign, cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class TasksMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class TasksMockApi {
     private _tags: any[] = tagsData;
     private _tasks: any[] = tasksData;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -26,25 +27,20 @@ export class TasksMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Tags - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/tasks/tags')
-            .reply(() => [
-                200,
-                cloneDeep(this._tags),
-            ]);
+            .reply(() => [200, cloneDeep(this._tags)]);
 
         // -----------------------------------------------------------------------------------------------------
         // @ Tags - POST
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/apps/tasks/tag')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the tag
                 const newTag = cloneDeep(request.body.tag);
 
@@ -54,10 +50,7 @@ export class TasksMockApi
                 // Unshift the new tag
                 this._tags.unshift(newTag);
 
-                return [
-                    200,
-                    newTag,
-                ];
+                return [200, newTag];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -65,8 +58,7 @@ export class TasksMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/tasks/tag')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and tag
                 const id = request.body.id;
                 const tag = cloneDeep(request.body.tag);
@@ -75,10 +67,8 @@ export class TasksMockApi
                 let updatedTag = null;
 
                 // Find the tag and update it
-                this._tags.forEach((item, index, tags) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._tags.forEach((item, index, tags) => {
+                    if (item.id === id) {
                         // Update the tag
                         tags[index] = assign({}, tags[index], tag);
 
@@ -87,10 +77,7 @@ export class TasksMockApi
                     }
                 });
 
-                return [
-                    200,
-                    updatedTag,
-                ];
+                return [200, updatedTag];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -98,56 +85,46 @@ export class TasksMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/tasks/tag')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the tag and delete it
-                const index = this._tags.findIndex(item => item.id === id);
+                const index = this._tags.findIndex((item) => item.id === id);
                 this._tags.splice(index, 1);
 
                 // Get the tasks that have the tag
-                const tasksWithTag = this._tasks.filter(task => task.tags.indexOf(id) > -1);
+                const tasksWithTag = this._tasks.filter(
+                    (task) => task.tags.indexOf(id) > -1
+                );
 
                 // Iterate through them and remove the tag
-                tasksWithTag.forEach((task) =>
-                {
+                tasksWithTag.forEach((task) => {
                     task.tags.splice(task.tags.indexOf(id), 1);
                 });
 
-                return [
-                    200,
-                    true,
-                ];
+                return [200, true];
             });
 
         // -----------------------------------------------------------------------------------------------------
         // @ Tasks - GET
         // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/apps/tasks/all')
-            .reply(() =>
-            {
-                // Clone the tasks
-                const tasks = cloneDeep(this._tasks);
+        this._fuseMockApiService.onGet('api/apps/tasks/all').reply(() => {
+            // Clone the tasks
+            const tasks = cloneDeep(this._tasks);
 
-                // Sort the tasks by order
-                tasks.sort((a, b) => a.order - b.order);
+            // Sort the tasks by order
+            tasks.sort((a, b) => a.order - b.order);
 
-                return [
-                    200,
-                    tasks,
-                ];
-            });
+            return [200, tasks];
+        });
 
         // -----------------------------------------------------------------------------------------------------
         // @ Tasks Search - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/tasks/search')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the search query
                 const query = request.params.get('query');
 
@@ -155,19 +132,34 @@ export class TasksMockApi
                 let results;
 
                 // If the query exists...
-                if ( query )
-                {
+                if (query) {
                     // Clone the tasks
                     let tasks = cloneDeep(this._tasks);
 
                     // Filter the tasks
-                    tasks = tasks.filter(task => task.title && task.title.toLowerCase().includes(query.toLowerCase()) || task.notes && task.notes.toLowerCase()
-                        .includes(query.toLowerCase()));
+                    tasks = tasks.filter(
+                        (task) =>
+                            (task.title &&
+                                task.title
+                                    .toLowerCase()
+                                    .includes(query.toLowerCase())) ||
+                            (task.notes &&
+                                task.notes
+                                    .toLowerCase()
+                                    .includes(query.toLowerCase()))
+                    );
 
                     // Mark the found chars
-                    tasks.forEach((task) =>
-                    {
-                        const re = new RegExp('(' + query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'ig');
+                    tasks.forEach((task) => {
+                        const re = new RegExp(
+                            '(' +
+                                query.replace(
+                                    /[-\/\\^$*+?.()|[\]{}]/g,
+                                    '\\$&'
+                                ) +
+                                ')',
+                            'ig'
+                        );
                         task.title = task.title.replace(re, '<mark>$1</mark>');
                     });
 
@@ -175,15 +167,11 @@ export class TasksMockApi
                     results = tasks;
                 }
                 // Otherwise, set the results to null
-                else
-                {
+                else {
                     results = null;
                 }
 
-                return [
-                    200,
-                    results,
-                ];
+                return [200, results];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -191,26 +179,23 @@ export class TasksMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/tasks/order')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the tasks
                 const tasks = request.body.tasks;
 
                 // Go through the tasks
-                this._tasks.forEach((task) =>
-                {
+                this._tasks.forEach((task) => {
                     // Find this task's index within the tasks array that comes with the request
                     // and assign that index as the new order number for the task
-                    task.order = tasks.findIndex((item: any) => item.id === task.id);
+                    task.order = tasks.findIndex(
+                        (item: any) => item.id === task.id
+                    );
                 });
 
                 // Clone the tasks
                 const updatedTasks = cloneDeep(this._tasks);
 
-                return [
-                    200,
-                    updatedTasks,
-                ];
+                return [200, updatedTasks];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -218,8 +203,7 @@ export class TasksMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/tasks/task')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id from the params
                 const id = request.params.get('id');
 
@@ -227,12 +211,9 @@ export class TasksMockApi
                 const tasks = cloneDeep(this._tasks);
 
                 // Find the task
-                const task = tasks.find(item => item.id === id);
+                const task = tasks.find((item) => item.id === id);
 
-                return [
-                    200,
-                    task,
-                ];
+                return [200, task];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -240,34 +221,29 @@ export class TasksMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/apps/tasks/task')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Generate a new task
                 const newTask = {
-                    id       : FuseMockApiUtils.guid(),
-                    type     : request.body.type,
-                    title    : '',
-                    notes    : null,
+                    id: FuseMockApiUtils.guid(),
+                    type: request.body.type,
+                    title: '',
+                    notes: null,
                     completed: false,
-                    dueDate  : null,
-                    priority : 1,
-                    tags     : [],
-                    order    : 0,
+                    dueDate: null,
+                    priority: 1,
+                    tags: [],
+                    order: 0,
                 };
 
                 // Unshift the new task
                 this._tasks.unshift(newTask);
 
                 // Go through the tasks and update their order numbers
-                this._tasks.forEach((task, index) =>
-                {
+                this._tasks.forEach((task, index) => {
                     task.order = index;
                 });
 
-                return [
-                    200,
-                    newTask,
-                ];
+                return [200, newTask];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -275,8 +251,7 @@ export class TasksMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/apps/tasks/task')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and task
                 const id = request.body.id;
                 const task = cloneDeep(request.body.task);
@@ -285,10 +260,8 @@ export class TasksMockApi
                 let updatedTask = null;
 
                 // Find the task and update it
-                this._tasks.forEach((item, index, tasks) =>
-                {
-                    if ( item.id === id )
-                    {
+                this._tasks.forEach((item, index, tasks) => {
+                    if (item.id === id) {
                         // Update the task
                         tasks[index] = assign({}, tasks[index], task);
 
@@ -297,10 +270,7 @@ export class TasksMockApi
                     }
                 });
 
-                return [
-                    200,
-                    updatedTask,
-                ];
+                return [200, updatedTask];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -308,19 +278,15 @@ export class TasksMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/apps/tasks/task')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
                 // Find the task and delete it
-                const index = this._tasks.findIndex(item => item.id === id);
+                const index = this._tasks.findIndex((item) => item.id === id);
                 this._tasks.splice(index, 1);
 
-                return [
-                    200,
-                    true,
-                ];
+                return [200, true];
             });
     }
 }

src/app/mock-api/common/auth/api.ts

@@ -6,19 +6,18 @@ import Utf8 from 'crypto-js/enc-utf8';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class AuthMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class AuthMockApi {
     private readonly _secret: any;
     private _user: any = userData;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Set the mock-api
-        this._secret = 'YOUR_VERY_CONFIDENTIAL_SECRET_FOR_SIGNING_JWT_TOKENS!!!';
+        this._secret =
+            'YOUR_VERY_CONFIDENTIAL_SECRET_FOR_SIGNING_JWT_TOKENS!!!';
 
         // Register Mock API handlers
         this.registerHandlers();
@@ -31,57 +30,44 @@ export class AuthMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Forgot password - POST
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/auth/forgot-password', 1000)
-            .reply(() =>
-                [
-                    200,
-                    true,
-                ],
-            );
+            .reply(() => [200, true]);
 
         // -----------------------------------------------------------------------------------------------------
         // @ Reset password - POST
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/auth/reset-password', 1000)
-            .reply(() =>
-                [
-                    200,
-                    true,
-                ],
-            );
+            .reply(() => [200, true]);
 
         // -----------------------------------------------------------------------------------------------------
         // @ Sign in - POST
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/auth/sign-in', 1500)
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Sign in successful
-                if ( request.body.email === 'hughes.brian@company.com' && request.body.password === 'admin' )
-                {
+                if (
+                    request.body.email === 'hughes.brian@company.com' &&
+                    request.body.password === 'admin'
+                ) {
                     return [
                         200,
                         {
-                            user       : cloneDeep(this._user),
+                            user: cloneDeep(this._user),
                             accessToken: this._generateJWTToken(),
-                            tokenType  : 'bearer',
+                            tokenType: 'bearer',
                         },
                     ];
                 }
 
                 // Invalid credentials
-                return [
-                    404,
-                    false,
-                ];
+                return [404, false];
             });
 
         // -----------------------------------------------------------------------------------------------------
@@ -89,20 +75,18 @@ export class AuthMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/auth/sign-in-with-token')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the access token
                 const accessToken = request.body.accessToken;
 
                 // Verify the token
-                if ( this._verifyJWTToken(accessToken) )
-                {
+                if (this._verifyJWTToken(accessToken)) {
                     return [
                         200,
                         {
-                            user       : cloneDeep(this._user),
+                            user: cloneDeep(this._user),
                             accessToken: this._generateJWTToken(),
-                            tokenType  : 'bearer',
+                            tokenType: 'bearer',
                         },
                     ];
                 }
@@ -119,42 +103,34 @@ export class AuthMockApi
         // -----------------------------------------------------------------------------------------------------
         // @ Sign up - POST
         // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onPost('api/auth/sign-up', 1500)
-            .reply(() =>
-
-                // Simply return true
-                [
-                    200,
-                    true,
-                ],
-            );
+        this._fuseMockApiService.onPost('api/auth/sign-up', 1500).reply(() =>
+            // Simply return true
+            [200, true]
+        );
 
         // -----------------------------------------------------------------------------------------------------
         // @ Unlock session - POST
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/auth/unlock-session', 1500)
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Sign in successful
-                if ( request.body.email === 'hughes.brian@company.com' && request.body.password === 'admin' )
-                {
+                if (
+                    request.body.email === 'hughes.brian@company.com' &&
+                    request.body.password === 'admin'
+                ) {
                     return [
                         200,
                         {
-                            user       : cloneDeep(this._user),
+                            user: cloneDeep(this._user),
                             accessToken: this._generateJWTToken(),
-                            tokenType  : 'bearer',
+                            tokenType: 'bearer',
                         },
                     ];
                 }
 
                 // Invalid credentials
-                return [
-                    404,
-                    false,
-                ];
+                return [404, false];
             });
     }
 
@@ -168,8 +144,7 @@ export class AuthMockApi
      * @param source
      * @private
      */
-    private _base64url(source: any): string
-    {
+    private _base64url(source: any): string {
         // Encode in classical base64
         let encodedSource = Base64.stringify(source);
 
@@ -192,8 +167,7 @@ export class AuthMockApi
      *
      * @private
      */
-    private _generateJWTToken(): string
-    {
+    private _generateJWTToken(): string {
         // Define token header
         const header = {
             alg: 'HS256',
@@ -203,7 +177,7 @@ export class AuthMockApi
         // Calculate the issued at and expiration dates
         const date = new Date();
         const iat = Math.floor(date.getTime() / 1000);
-        const exp = Math.floor((date.setDate(date.getDate() + 7)) / 1000);
+        const exp = Math.floor(date.setDate(date.getDate() + 7) / 1000);
 
         // Define token payload
         const payload = {
@@ -235,8 +209,7 @@ export class AuthMockApi
      * @param token
      * @private
      */
-    private _verifyJWTToken(token: string): boolean
-    {
+    private _verifyJWTToken(token: string): boolean {
         // Split the token into parts
         const parts = token.split('.');
         const header = parts[0];
@@ -244,9 +217,11 @@ export class AuthMockApi
         const signature = parts[2];
 
         // Re-sign and encode the header and payload using the secret
-        const signatureCheck = this._base64url(HmacSHA256(header + '.' + payload, this._secret));
+        const signatureCheck = this._base64url(
+            HmacSHA256(header + '.' + payload, this._secret)
+        );
 
         // Verify that the resulting signature is valid
-        return (signature === signatureCheck);
+        return signature === signatureCheck;
     }
 }

src/app/mock-api/common/messages/api.ts

@@ -3,16 +3,14 @@ import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
 import { messages as messagesData } from 'app/mock-api/common/messages/data';
 import { assign, cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class MessagesMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class MessagesMockApi {
     private _messages: any = messagesData;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -24,8 +22,7 @@ export class MessagesMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Messages - GET
         // -----------------------------------------------------------------------------------------------------
@@ -38,8 +35,7 @@ export class MessagesMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/common/messages')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the message
                 const newMessage = cloneDeep(request.body.message);
 
@@ -58,8 +54,7 @@ export class MessagesMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/common/messages')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and message
                 const id = request.body.id;
                 const message = cloneDeep(request.body.message);
@@ -68,17 +63,21 @@ export class MessagesMockApi
                 let updatedMessage = null;
 
                 // Find the message and update it
-                this._messages.forEach((item: any, index: number, messages: any[]) =>
-                {
-                    if ( item.id === id )
-                    {
-                        // Update the message
-                        messages[index] = assign({}, messages[index], message);
+                this._messages.forEach(
+                    (item: any, index: number, messages: any[]) => {
+                        if (item.id === id) {
+                            // Update the message
+                            messages[index] = assign(
+                                {},
+                                messages[index],
+                                message
+                            );
 
-                        // Store the updated message
-                        updatedMessage = messages[index];
+                            // Store the updated message
+                            updatedMessage = messages[index];
+                        }
                     }
-                });
+                );
 
                 // Return the response
                 return [200, updatedMessage];
@@ -89,8 +88,7 @@ export class MessagesMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/common/messages')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
@@ -98,7 +96,9 @@ export class MessagesMockApi
                 let deletedMessage = null;
 
                 // Find the message
-                const index = this._messages.findIndex((item: any) => item.id === id);
+                const index = this._messages.findIndex(
+                    (item: any) => item.id === id
+                );
 
                 // Store the deleted message
                 deletedMessage = cloneDeep(this._messages[index]);
@@ -115,15 +115,15 @@ export class MessagesMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/common/messages/mark-all-as-read')
-            .reply(() =>
-            {
+            .reply(() => {
                 // Go through all messages
-                this._messages.forEach((item: any, index: number, messages: any[]) =>
-                {
-                    // Mark it as read
-                    messages[index].read = true;
-                    messages[index].seen = true;
-                });
+                this._messages.forEach(
+                    (item: any, index: number, messages: any[]) => {
+                        // Mark it as read
+                        messages[index].read = true;
+                        messages[index].seen = true;
+                    }
+                );
 
                 // Return the response
                 return [200, true];
@@ -134,8 +134,7 @@ export class MessagesMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/common/messages/toggle-read-status')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the message
                 const message = cloneDeep(request.body.message);
 
@@ -143,17 +142,17 @@ export class MessagesMockApi
                 let updatedMessage = null;
 
                 // Find the message and update it
-                this._messages.forEach((item: any, index: number, messages: any[]) =>
-                {
-                    if ( item.id === message.id )
-                    {
-                        // Update the message
-                        messages[index].read = message.read;
+                this._messages.forEach(
+                    (item: any, index: number, messages: any[]) => {
+                        if (item.id === message.id) {
+                            // Update the message
+                            messages[index].read = message.read;
 
-                        // Store the updated message
-                        updatedMessage = messages[index];
+                            // Store the updated message
+                            updatedMessage = messages[index];
+                        }
                     }
-                });
+                );
 
                 // Return the response
                 return [200, updatedMessage];

src/app/mock-api/common/messages/data.ts

@@ -6,89 +6,95 @@ const now = DateTime.now();
 
 export const messages = [
     {
-        id         : '832276cc-c5e9-4fcc-8e23-d38e2e267bc9',
-        image      : 'images/avatars/male-01.jpg',
-        title      : 'Gary Peters',
+        id: '832276cc-c5e9-4fcc-8e23-d38e2e267bc9',
+        image: 'images/avatars/male-01.jpg',
+        title: 'Gary Peters',
         description: 'We should talk about that at lunch!',
-        time       : now.minus({minutes: 25}).toISO(), // 25 minutes ago
-        read       : false,
+        time: now.minus({ minutes: 25 }).toISO(), // 25 minutes ago
+        read: false,
     },
     {
-        id         : '608b4479-a3ac-4e26-8675-3609c52aca58',
-        image      : 'images/avatars/male-04.jpg',
-        title      : 'Leo Gill (Client #8817)',
-        description: 'You can download the latest invoices now. Please check and let me know.',
-        time       : now.minus({minutes: 50}).toISO(), // 50 minutes ago
-        read       : false,
+        id: '608b4479-a3ac-4e26-8675-3609c52aca58',
+        image: 'images/avatars/male-04.jpg',
+        title: 'Leo Gill (Client #8817)',
+        description:
+            'You can download the latest invoices now. Please check and let me know.',
+        time: now.minus({ minutes: 50 }).toISO(), // 50 minutes ago
+        read: false,
     },
     {
-        id         : '22148c0c-d788-4d49-9467-447677d11b76',
-        image      : 'images/avatars/female-01.jpg',
-        title      : 'Sarah',
-        description: 'Don\'t forget to pickup Jeremy after school!',
-        time       : now.minus({hours: 3}).toISO(), // 3 hours ago
-        read       : true,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        id: '22148c0c-d788-4d49-9467-447677d11b76',
+        image: 'images/avatars/female-01.jpg',
+        title: 'Sarah',
+        description: "Don't forget to pickup Jeremy after school!",
+        time: now.minus({ hours: 3 }).toISO(), // 3 hours ago
+        read: true,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : '492e2917-760c-4921-aa5a-3201a857cd48',
-        image      : 'images/avatars/female-12.jpg',
-        title      : 'Nancy Salazar • Joy Publishing',
-        description: 'I\'ll proof read your bio on next Monday.',
-        time       : now.minus({hours: 5}).toISO(), // 5 hours ago
-        read       : true,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        id: '492e2917-760c-4921-aa5a-3201a857cd48',
+        image: 'images/avatars/female-12.jpg',
+        title: 'Nancy Salazar • Joy Publishing',
+        description: "I'll proof read your bio on next Monday.",
+        time: now.minus({ hours: 5 }).toISO(), // 5 hours ago
+        read: true,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : '214a46e5-cae7-4b18-9869-eabde7c7ea52',
-        image      : 'images/avatars/male-06.jpg',
-        title      : 'Matthew Wood',
-        description: 'Dude, I heard that they are going to promote you! Congrats man, tonight the drinks are on me!',
-        time       : now.minus({hours: 7}).toISO(), // 7 hours ago
-        read       : false,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        id: '214a46e5-cae7-4b18-9869-eabde7c7ea52',
+        image: 'images/avatars/male-06.jpg',
+        title: 'Matthew Wood',
+        description:
+            'Dude, I heard that they are going to promote you! Congrats man, tonight the drinks are on me!',
+        time: now.minus({ hours: 7 }).toISO(), // 7 hours ago
+        read: false,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : '95930319-61cc-4c7e-9324-f1091865330c',
-        image      : 'images/avatars/female-04.jpg',
-        title      : 'Elizabeth (New assistant)',
-        description: 'Boss, I\'ve sent all client invoices but Geoffrey refusing to pay.',
-        time       : now.minus({hours: 9}).toISO(), // 9 hours ago
-        read       : false,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        id: '95930319-61cc-4c7e-9324-f1091865330c',
+        image: 'images/avatars/female-04.jpg',
+        title: 'Elizabeth (New assistant)',
+        description:
+            "Boss, I've sent all client invoices but Geoffrey refusing to pay.",
+        time: now.minus({ hours: 9 }).toISO(), // 9 hours ago
+        read: false,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : '802935e9-9577-48bc-98d1-308a4872afd7',
-        image      : 'images/avatars/male-06.jpg',
-        title      : 'William Bell',
-        description: 'Did you see this game? We should hang out and give it a shot sometime.',
-        time       : now.minus({day: 1}).toISO(), // 1 day ago
-        read       : true,
-        link       : 'https://www.google.com',
-        useRouter  : false,
+        id: '802935e9-9577-48bc-98d1-308a4872afd7',
+        image: 'images/avatars/male-06.jpg',
+        title: 'William Bell',
+        description:
+            'Did you see this game? We should hang out and give it a shot sometime.',
+        time: now.minus({ day: 1 }).toISO(), // 1 day ago
+        read: true,
+        link: 'https://www.google.com',
+        useRouter: false,
     },
     {
-        id         : '059f3738-633b-48ea-ad83-19016ce24c62',
-        image      : 'images/avatars/female-09.jpg',
-        title      : 'Cheryl Obrien - HR',
-        description: 'Why did\'t you still look at the kitten pictures I\'ve sent to you!',
-        time       : now.minus({day: 3}).toISO(), // 3 days ago
-        read       : false,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        id: '059f3738-633b-48ea-ad83-19016ce24c62',
+        image: 'images/avatars/female-09.jpg',
+        title: 'Cheryl Obrien - HR',
+        description:
+            "Why did't you still look at the kitten pictures I've sent to you!",
+        time: now.minus({ day: 3 }).toISO(), // 3 days ago
+        read: false,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : '5c2bb44d-5ca7-42ff-ad7e-46ced9f49a24',
-        image      : 'images/avatars/female-15.jpg',
-        title      : 'Joan Jones - Tech',
-        description: 'Dude, Cheryl keeps bugging me with kitten pictures all the time :( What are we gonna do about it?',
-        time       : now.minus({day: 4}).toISO(), // 4 days ago
-        read       : true,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        id: '5c2bb44d-5ca7-42ff-ad7e-46ced9f49a24',
+        image: 'images/avatars/female-15.jpg',
+        title: 'Joan Jones - Tech',
+        description:
+            'Dude, Cheryl keeps bugging me with kitten pictures all the time :( What are we gonna do about it?',
+        time: now.minus({ day: 4 }).toISO(), // 4 days ago
+        read: true,
+        link: '/dashboards/project',
+        useRouter: true,
     },
 ];

src/app/mock-api/common/navigation/api.ts

@@ -1,22 +1,29 @@
 import { Injectable } from '@angular/core';
 import { FuseNavigationItem } from '@fuse/components/navigation';
 import { FuseMockApiService } from '@fuse/lib/mock-api';
-import { compactNavigation, defaultNavigation, futuristicNavigation, horizontalNavigation } from 'app/mock-api/common/navigation/data';
+import {
+    compactNavigation,
+    defaultNavigation,
+    futuristicNavigation,
+    horizontalNavigation,
+} from 'app/mock-api/common/navigation/data';
 import { cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class NavigationMockApi
-{
-    private readonly _compactNavigation: FuseNavigationItem[] = compactNavigation;
-    private readonly _defaultNavigation: FuseNavigationItem[] = defaultNavigation;
-    private readonly _futuristicNavigation: FuseNavigationItem[] = futuristicNavigation;
-    private readonly _horizontalNavigation: FuseNavigationItem[] = horizontalNavigation;
+@Injectable({ providedIn: 'root' })
+export class NavigationMockApi {
+    private readonly _compactNavigation: FuseNavigationItem[] =
+        compactNavigation;
+    private readonly _defaultNavigation: FuseNavigationItem[] =
+        defaultNavigation;
+    private readonly _futuristicNavigation: FuseNavigationItem[] =
+        futuristicNavigation;
+    private readonly _horizontalNavigation: FuseNavigationItem[] =
+        horizontalNavigation;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -28,61 +35,54 @@ export class NavigationMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Navigation - GET
         // -----------------------------------------------------------------------------------------------------
-        this._fuseMockApiService
-            .onGet('api/common/navigation')
-            .reply(() =>
-            {
-                // Fill compact navigation children using the default navigation
-                this._compactNavigation.forEach((compactNavItem) =>
-                {
-                    this._defaultNavigation.forEach((defaultNavItem) =>
-                    {
-                        if ( defaultNavItem.id === compactNavItem.id )
-                        {
-                            compactNavItem.children = cloneDeep(defaultNavItem.children);
-                        }
-                    });
+        this._fuseMockApiService.onGet('api/common/navigation').reply(() => {
+            // Fill compact navigation children using the default navigation
+            this._compactNavigation.forEach((compactNavItem) => {
+                this._defaultNavigation.forEach((defaultNavItem) => {
+                    if (defaultNavItem.id === compactNavItem.id) {
+                        compactNavItem.children = cloneDeep(
+                            defaultNavItem.children
+                        );
+                    }
                 });
-
-                // Fill futuristic navigation children using the default navigation
-                this._futuristicNavigation.forEach((futuristicNavItem) =>
-                {
-                    this._defaultNavigation.forEach((defaultNavItem) =>
-                    {
-                        if ( defaultNavItem.id === futuristicNavItem.id )
-                        {
-                            futuristicNavItem.children = cloneDeep(defaultNavItem.children);
-                        }
-                    });
-                });
-
-                // Fill horizontal navigation children using the default navigation
-                this._horizontalNavigation.forEach((horizontalNavItem) =>
-                {
-                    this._defaultNavigation.forEach((defaultNavItem) =>
-                    {
-                        if ( defaultNavItem.id === horizontalNavItem.id )
-                        {
-                            horizontalNavItem.children = cloneDeep(defaultNavItem.children);
-                        }
-                    });
-                });
-
-                // Return the response
-                return [
-                    200,
-                    {
-                        compact   : cloneDeep(this._compactNavigation),
-                        default   : cloneDeep(this._defaultNavigation),
-                        futuristic: cloneDeep(this._futuristicNavigation),
-                        horizontal: cloneDeep(this._horizontalNavigation),
-                    },
-                ];
             });
+
+            // Fill futuristic navigation children using the default navigation
+            this._futuristicNavigation.forEach((futuristicNavItem) => {
+                this._defaultNavigation.forEach((defaultNavItem) => {
+                    if (defaultNavItem.id === futuristicNavItem.id) {
+                        futuristicNavItem.children = cloneDeep(
+                            defaultNavItem.children
+                        );
+                    }
+                });
+            });
+
+            // Fill horizontal navigation children using the default navigation
+            this._horizontalNavigation.forEach((horizontalNavItem) => {
+                this._defaultNavigation.forEach((defaultNavItem) => {
+                    if (defaultNavItem.id === horizontalNavItem.id) {
+                        horizontalNavItem.children = cloneDeep(
+                            defaultNavItem.children
+                        );
+                    }
+                });
+            });
+
+            // Return the response
+            return [
+                200,
+                {
+                    compact: cloneDeep(this._compactNavigation),
+                    default: cloneDeep(this._defaultNavigation),
+                    futuristic: cloneDeep(this._futuristicNavigation),
+                    horizontal: cloneDeep(this._horizontalNavigation),
+                },
+            ];
+        });
     }
 }

src/app/mock-api/common/notifications/api.ts

@@ -3,16 +3,14 @@ import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
 import { notifications as notificationsData } from 'app/mock-api/common/notifications/data';
 import { assign, cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class NotificationsMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class NotificationsMockApi {
     private _notifications: any = notificationsData;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -24,8 +22,7 @@ export class NotificationsMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Notifications - GET
         // -----------------------------------------------------------------------------------------------------
@@ -38,8 +35,7 @@ export class NotificationsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/common/notifications')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the notification
                 const newNotification = cloneDeep(request.body.notification);
 
@@ -58,8 +54,7 @@ export class NotificationsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/common/notifications')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and notification
                 const id = request.body.id;
                 const notification = cloneDeep(request.body.notification);
@@ -68,17 +63,21 @@ export class NotificationsMockApi
                 let updatedNotification = null;
 
                 // Find the notification and update it
-                this._notifications.forEach((item: any, index: number, notifications: any[]) =>
-                {
-                    if ( item.id === id )
-                    {
-                        // Update the notification
-                        notifications[index] = assign({}, notifications[index], notification);
+                this._notifications.forEach(
+                    (item: any, index: number, notifications: any[]) => {
+                        if (item.id === id) {
+                            // Update the notification
+                            notifications[index] = assign(
+                                {},
+                                notifications[index],
+                                notification
+                            );
 
-                        // Store the updated notification
-                        updatedNotification = notifications[index];
+                            // Store the updated notification
+                            updatedNotification = notifications[index];
+                        }
                     }
-                });
+                );
 
                 // Return the response
                 return [200, updatedNotification];
@@ -89,8 +88,7 @@ export class NotificationsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/common/notifications')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
@@ -98,7 +96,9 @@ export class NotificationsMockApi
                 let deletedNotification = null;
 
                 // Find the notification
-                const index = this._notifications.findIndex((item: any) => item.id === id);
+                const index = this._notifications.findIndex(
+                    (item: any) => item.id === id
+                );
 
                 // Store the deleted notification
                 deletedNotification = cloneDeep(this._notifications[index]);
@@ -115,15 +115,15 @@ export class NotificationsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/common/notifications/mark-all-as-read')
-            .reply(() =>
-            {
+            .reply(() => {
                 // Go through all notifications
-                this._notifications.forEach((item: any, index: number, notifications: any[]) =>
-                {
-                    // Mark it as read
-                    notifications[index].read = true;
-                    notifications[index].seen = true;
-                });
+                this._notifications.forEach(
+                    (item: any, index: number, notifications: any[]) => {
+                        // Mark it as read
+                        notifications[index].read = true;
+                        notifications[index].seen = true;
+                    }
+                );
 
                 // Return the response
                 return [200, true];
@@ -134,8 +134,7 @@ export class NotificationsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/common/notifications/toggle-read-status')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the notification
                 const notification = cloneDeep(request.body.notification);
 
@@ -143,17 +142,17 @@ export class NotificationsMockApi
                 let updatedNotification = null;
 
                 // Find the notification and update it
-                this._notifications.forEach((item: any, index: number, notifications: any[]) =>
-                {
-                    if ( item.id === notification.id )
-                    {
-                        // Update the notification
-                        notifications[index].read = notification.read;
+                this._notifications.forEach(
+                    (item: any, index: number, notifications: any[]) => {
+                        if (item.id === notification.id) {
+                            // Update the notification
+                            notifications[index].read = notification.read;
 
-                        // Store the updated notification
-                        updatedNotification = notifications[index];
+                            // Store the updated notification
+                            updatedNotification = notifications[index];
+                        }
                     }
-                });
+                );
 
                 // Return the response
                 return [200, updatedNotification];

src/app/mock-api/common/notifications/data.ts

@@ -6,88 +6,91 @@ const now = DateTime.now();
 
 export const notifications = [
     {
-        id         : '493190c9-5b61-4912-afe5-78c21f1044d7',
-        icon       : 'heroicons_mini:star',
-        title      : 'Daily challenges',
+        id: '493190c9-5b61-4912-afe5-78c21f1044d7',
+        icon: 'heroicons_mini:star',
+        title: 'Daily challenges',
         description: 'Your submission has been accepted',
-        time       : now.minus({minute: 25}).toISO(), // 25 minutes ago
-        read       : false,
+        time: now.minus({ minute: 25 }).toISO(), // 25 minutes ago
+        read: false,
     },
     {
-        id         : '6e3e97e5-effc-4fb7-b730-52a151f0b641',
-        image      : 'images/avatars/male-04.jpg',
-        description: '<strong>Leo Gill</strong> added you to <em>Top Secret Project</em> group and assigned you as a <em>Project Manager</em>',
-        time       : now.minus({minute: 50}).toISO(), // 50 minutes ago
-        read       : true,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        id: '6e3e97e5-effc-4fb7-b730-52a151f0b641',
+        image: 'images/avatars/male-04.jpg',
+        description:
+            '<strong>Leo Gill</strong> added you to <em>Top Secret Project</em> group and assigned you as a <em>Project Manager</em>',
+        time: now.minus({ minute: 50 }).toISO(), // 50 minutes ago
+        read: true,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : 'b91ccb58-b06c-413b-b389-87010e03a120',
-        icon       : 'heroicons_mini:envelope',
-        title      : 'Mailbox',
+        id: 'b91ccb58-b06c-413b-b389-87010e03a120',
+        icon: 'heroicons_mini:envelope',
+        title: 'Mailbox',
         description: 'You have 15 unread mails across 3 mailboxes',
-        time       : now.minus({hour: 3}).toISO(), // 3 hours ago
-        read       : false,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        time: now.minus({ hour: 3 }).toISO(), // 3 hours ago
+        read: false,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : '541416c9-84a7-408a-8d74-27a43c38d797',
-        icon       : 'heroicons_mini:arrow-path',
-        title      : 'Cron jobs',
+        id: '541416c9-84a7-408a-8d74-27a43c38d797',
+        icon: 'heroicons_mini:arrow-path',
+        title: 'Cron jobs',
         description: 'Your <em>Docker container</em> is ready to publish',
-        time       : now.minus({hour: 5}).toISO(), // 5 hours ago
-        read       : false,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        time: now.minus({ hour: 5 }).toISO(), // 5 hours ago
+        read: false,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : 'ef7b95a7-8e8b-4616-9619-130d9533add9',
-        image      : 'images/avatars/male-06.jpg',
-        description: '<strong>Roger Murray</strong> accepted your friend request',
-        time       : now.minus({hour: 7}).toISO(), // 7 hours ago
-        read       : true,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        id: 'ef7b95a7-8e8b-4616-9619-130d9533add9',
+        image: 'images/avatars/male-06.jpg',
+        description:
+            '<strong>Roger Murray</strong> accepted your friend request',
+        time: now.minus({ hour: 7 }).toISO(), // 7 hours ago
+        read: true,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : 'eb8aa470-635e-461d-88e1-23d9ea2a5665',
-        image      : 'images/avatars/female-04.jpg',
+        id: 'eb8aa470-635e-461d-88e1-23d9ea2a5665',
+        image: 'images/avatars/female-04.jpg',
         description: '<strong>Sophie Stone</strong> sent you a direct message',
-        time       : now.minus({hour: 9}).toISO(), // 9 hours ago
-        read       : true,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        time: now.minus({ hour: 9 }).toISO(), // 9 hours ago
+        read: true,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : 'b85c2338-cc98-4140-bbf8-c226ce4e395e',
-        icon       : 'heroicons_mini:envelope',
-        title      : 'Mailbox',
+        id: 'b85c2338-cc98-4140-bbf8-c226ce4e395e',
+        icon: 'heroicons_mini:envelope',
+        title: 'Mailbox',
         description: 'You have 3 new mails',
-        time       : now.minus({day: 1}).toISO(), // 1 day ago
-        read       : true,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        time: now.minus({ day: 1 }).toISO(), // 1 day ago
+        read: true,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : '8f8e1bf9-4661-4939-9e43-390957b60f42',
-        icon       : 'heroicons_mini:star',
-        title      : 'Daily challenges',
-        description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
-        time       : now.minus({day: 3}).toISO(), // 3 days ago
-        read       : true,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        id: '8f8e1bf9-4661-4939-9e43-390957b60f42',
+        icon: 'heroicons_mini:star',
+        title: 'Daily challenges',
+        description:
+            'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
+        time: now.minus({ day: 3 }).toISO(), // 3 days ago
+        read: true,
+        link: '/dashboards/project',
+        useRouter: true,
     },
     {
-        id         : '30af917b-7a6a-45d1-822f-9e7ad7f8bf69',
-        icon       : 'heroicons_mini:arrow-path',
-        title      : 'Cron jobs',
+        id: '30af917b-7a6a-45d1-822f-9e7ad7f8bf69',
+        icon: 'heroicons_mini:arrow-path',
+        title: 'Cron jobs',
         description: 'Your Vagrant container is ready to download',
-        time       : now.minus({day: 4}).toISO(), // 4 days ago
-        read       : true,
-        link       : '/dashboards/project',
-        useRouter  : true,
+        time: now.minus({ day: 4 }).toISO(), // 4 days ago
+        read: true,
+        link: '/dashboards/project',
+        useRouter: true,
     },
 ];

src/app/mock-api/common/search/api.ts

@@ -1,15 +1,18 @@
 import { Injectable } from '@angular/core';
-import { FuseNavigationItem, FuseNavigationService } from '@fuse/components/navigation';
+import {
+    FuseNavigationItem,
+    FuseNavigationService,
+} from '@fuse/components/navigation';
 import { FuseMockApiService } from '@fuse/lib/mock-api';
 import { contacts } from 'app/mock-api/apps/contacts/data';
 import { tasks } from 'app/mock-api/apps/tasks/data';
 import { defaultNavigation } from 'app/mock-api/common/navigation/data';
 import { cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class SearchMockApi
-{
-    private readonly _defaultNavigation: FuseNavigationItem[] = defaultNavigation;
+@Injectable({ providedIn: 'root' })
+export class SearchMockApi {
+    private readonly _defaultNavigation: FuseNavigationItem[] =
+        defaultNavigation;
     private readonly _contacts: any[] = contacts;
     private readonly _tasks: any[] = tasks;
 
@@ -18,9 +21,8 @@ export class SearchMockApi
      */
     constructor(
         private _fuseMockApiService: FuseMockApiService,
-        private _fuseNavigationService: FuseNavigationService,
-    )
-    {
+        private _fuseNavigationService: FuseNavigationService
+    ) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -32,49 +34,51 @@ export class SearchMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // Get the flat navigation and store it
-        const flatNavigation = this._fuseNavigationService.getFlatNavigation(this._defaultNavigation);
+        const flatNavigation = this._fuseNavigationService.getFlatNavigation(
+            this._defaultNavigation
+        );
 
         // -----------------------------------------------------------------------------------------------------
         // @ Search results - GET
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/common/search')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the search query
                 const query = cloneDeep(request.body.query.toLowerCase());
 
                 // If the search query is an empty string,
                 // return an empty array
-                if ( query === '' )
-                {
-                    return [200, {results: []}];
+                if (query === '') {
+                    return [200, { results: [] }];
                 }
 
                 // Filter the contacts
-                const contactsResults = cloneDeep(this._contacts)
-                    .filter(contact => contact.name.toLowerCase().includes(query));
+                const contactsResults = cloneDeep(this._contacts).filter(
+                    (contact) => contact.name.toLowerCase().includes(query)
+                );
 
                 // Filter the navigation
-                const pagesResults = cloneDeep(flatNavigation)
-                    .filter(page => (page.title?.toLowerCase().includes(query) || (page.subtitle && page.subtitle.includes(query))));
+                const pagesResults = cloneDeep(flatNavigation).filter(
+                    (page) =>
+                        page.title?.toLowerCase().includes(query) ||
+                        (page.subtitle && page.subtitle.includes(query))
+                );
 
                 // Filter the tasks
-                const tasksResults = cloneDeep(this._tasks)
-                    .filter(task => task.title.toLowerCase().includes(query));
+                const tasksResults = cloneDeep(this._tasks).filter((task) =>
+                    task.title.toLowerCase().includes(query)
+                );
 
                 // Prepare the results array
                 const results = [];
 
                 // If there are contacts results...
-                if ( contactsResults.length > 0 )
-                {
+                if (contactsResults.length > 0) {
                     // Normalize the results
-                    contactsResults.forEach((result) =>
-                    {
+                    contactsResults.forEach((result) => {
                         // Add a link
                         result.link = '/apps/contacts/' + result.id;
 
@@ -84,36 +88,32 @@ export class SearchMockApi
 
                     // Add to the results
                     results.push({
-                        id     : 'contacts',
-                        label  : 'Contacts',
+                        id: 'contacts',
+                        label: 'Contacts',
                         results: contactsResults,
                     });
                 }
 
                 // If there are page results...
-                if ( pagesResults.length > 0 )
-                {
+                if (pagesResults.length > 0) {
                     // Normalize the results
-                    pagesResults.forEach((result: any) =>
-                    {
+                    pagesResults.forEach((result: any) => {
                         // Add the page title as the value
                         result.value = result.title;
                     });
 
                     // Add to the results
                     results.push({
-                        id     : 'pages',
-                        label  : 'Pages',
+                        id: 'pages',
+                        label: 'Pages',
                         results: pagesResults,
                     });
                 }
 
                 // If there are tasks results...
-                if ( tasksResults.length > 0 )
-                {
+                if (tasksResults.length > 0) {
                     // Normalize the results
-                    tasksResults.forEach((result) =>
-                    {
+                    tasksResults.forEach((result) => {
                         // Add a link
                         result.link = '/apps/tasks/' + result.id;
 
@@ -123,8 +123,8 @@ export class SearchMockApi
 
                     // Add to the results
                     results.push({
-                        id     : 'tasks',
-                        label  : 'Tasks',
+                        id: 'tasks',
+                        label: 'Tasks',
                         results: tasksResults,
                     });
                 }

src/app/mock-api/common/shortcuts/api.ts

@@ -3,16 +3,14 @@ import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
 import { shortcuts as shortcutsData } from 'app/mock-api/common/shortcuts/data';
 import { assign, cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class ShortcutsMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class ShortcutsMockApi {
     private _shortcuts: any = shortcutsData;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -24,8 +22,7 @@ export class ShortcutsMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Shortcuts - GET
         // -----------------------------------------------------------------------------------------------------
@@ -38,8 +35,7 @@ export class ShortcutsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPost('api/common/shortcuts')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the shortcut
                 const newShortcut = cloneDeep(request.body.shortcut);
 
@@ -58,8 +54,7 @@ export class ShortcutsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/common/shortcuts')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id and shortcut
                 const id = request.body.id;
                 const shortcut = cloneDeep(request.body.shortcut);
@@ -68,17 +63,21 @@ export class ShortcutsMockApi
                 let updatedShortcut = null;
 
                 // Find the shortcut and update it
-                this._shortcuts.forEach((item: any, index: number, shortcuts: any[]) =>
-                {
-                    if ( item.id === id )
-                    {
-                        // Update the shortcut
-                        shortcuts[index] = assign({}, shortcuts[index], shortcut);
+                this._shortcuts.forEach(
+                    (item: any, index: number, shortcuts: any[]) => {
+                        if (item.id === id) {
+                            // Update the shortcut
+                            shortcuts[index] = assign(
+                                {},
+                                shortcuts[index],
+                                shortcut
+                            );
 
-                        // Store the updated shortcut
-                        updatedShortcut = shortcuts[index];
+                            // Store the updated shortcut
+                            updatedShortcut = shortcuts[index];
+                        }
                     }
-                });
+                );
 
                 // Return the response
                 return [200, updatedShortcut];
@@ -89,8 +88,7 @@ export class ShortcutsMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onDelete('api/common/shortcuts')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the id
                 const id = request.params.get('id');
 
@@ -98,7 +96,9 @@ export class ShortcutsMockApi
                 let deletedShortcut = null;
 
                 // Find the shortcut
-                const index = this._shortcuts.findIndex((item: any) => item.id === id);
+                const index = this._shortcuts.findIndex(
+                    (item: any) => item.id === id
+                );
 
                 // Store the deleted shortcut
                 deletedShortcut = cloneDeep(this._shortcuts[index]);

src/app/mock-api/common/shortcuts/data.ts

@@ -1,67 +1,67 @@
 /* eslint-disable */
 export const shortcuts = [
     {
-        id         : 'a1ae91d3-e2cb-459b-9be9-a184694f548b',
-        label      : 'Changelog',
+        id: 'a1ae91d3-e2cb-459b-9be9-a184694f548b',
+        label: 'Changelog',
         description: 'List of changes',
-        icon       : 'heroicons_outline:clipboard-document-list',
-        link       : '/docs/changelog',
-        useRouter  : true,
+        icon: 'heroicons_outline:clipboard-document-list',
+        link: '/docs/changelog',
+        useRouter: true,
     },
     {
-        id         : '989ce876-c177-4d71-a749-1953c477f825',
-        label      : 'Documentation',
+        id: '989ce876-c177-4d71-a749-1953c477f825',
+        label: 'Documentation',
         description: 'Getting started',
-        icon       : 'heroicons_outline:book-open',
-        link       : '/docs/guides/getting-started/introduction',
-        useRouter  : true,
+        icon: 'heroicons_outline:book-open',
+        link: '/docs/guides/getting-started/introduction',
+        useRouter: true,
     },
     {
-        id         : '2496f42e-2f25-4e34-83d5-3ff9568fd984',
-        label      : 'Help center',
+        id: '2496f42e-2f25-4e34-83d5-3ff9568fd984',
+        label: 'Help center',
         description: 'FAQs and guides',
-        icon       : 'heroicons_outline:information-circle',
-        link       : '/apps/help-center',
-        useRouter  : true,
+        icon: 'heroicons_outline:information-circle',
+        link: '/apps/help-center',
+        useRouter: true,
     },
     {
-        id         : '3c48e75e-2ae7-4b73-938a-12dc655be28b',
-        label      : 'Dashboard',
+        id: '3c48e75e-2ae7-4b73-938a-12dc655be28b',
+        label: 'Dashboard',
         description: 'User analytics',
-        icon       : 'heroicons_outline:chart-pie',
-        link       : '/dashboards/analytics',
-        useRouter  : true,
+        icon: 'heroicons_outline:chart-pie',
+        link: '/dashboards/analytics',
+        useRouter: true,
     },
     {
-        id         : '2daac375-a2f7-4393-b4d7-ce6061628b66',
-        label      : 'Mailbox',
+        id: '2daac375-a2f7-4393-b4d7-ce6061628b66',
+        label: 'Mailbox',
         description: '5 new e-mails',
-        icon       : 'heroicons_outline:envelope',
-        link       : 'apps/mailbox',
-        useRouter  : true,
+        icon: 'heroicons_outline:envelope',
+        link: 'apps/mailbox',
+        useRouter: true,
     },
     {
-        id         : '56a0a561-17e7-40b3-bd75-0b6cef230b7e',
-        label      : 'Tasks',
+        id: '56a0a561-17e7-40b3-bd75-0b6cef230b7e',
+        label: 'Tasks',
         description: '12 unfinished tasks',
-        icon       : 'heroicons_outline:check-circle',
-        link       : '/apps/tasks',
-        useRouter  : true,
+        icon: 'heroicons_outline:check-circle',
+        link: '/apps/tasks',
+        useRouter: true,
     },
     {
-        id         : 'f5daf93e-b6f3-4199-8a0c-b951e92a6cb8',
-        label      : 'Contacts',
+        id: 'f5daf93e-b6f3-4199-8a0c-b951e92a6cb8',
+        label: 'Contacts',
         description: 'List all contacts',
-        icon       : 'heroicons_outline:user-group',
-        link       : '/apps/contacts',
-        useRouter  : true,
+        icon: 'heroicons_outline:user-group',
+        link: '/apps/contacts',
+        useRouter: true,
     },
     {
-        id         : '0a240ab8-e19d-4503-bf68-20013030d526',
-        label      : 'Reload',
+        id: '0a240ab8-e19d-4503-bf68-20013030d526',
+        label: 'Reload',
         description: 'Reload the app',
-        icon       : 'heroicons_outline:arrow-path',
-        link       : '/dashboards/project',
-        useRouter  : false,
+        icon: 'heroicons_outline:arrow-path',
+        link: '/dashboards/project',
+        useRouter: false,
     },
 ];

src/app/mock-api/common/user/api.ts

@@ -3,16 +3,14 @@ import { FuseMockApiService } from '@fuse/lib/mock-api';
 import { user as userData } from 'app/mock-api/common/user/data';
 import { assign, cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class UserMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class UserMockApi {
     private _user: any = userData;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -24,8 +22,7 @@ export class UserMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ User - GET
         // -----------------------------------------------------------------------------------------------------
@@ -38,8 +35,7 @@ export class UserMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onPatch('api/common/user')
-            .reply(({request}) =>
-            {
+            .reply(({ request }) => {
                 // Get the user mock-api
                 const user = cloneDeep(request.body.user);
 

src/app/mock-api/common/user/data.ts

@@ -1,8 +1,8 @@
 /* eslint-disable */
 export const user = {
-    id    : 'cfaad35d-07a3-4447-a6c3-d8c3d54fd5df',
-    name  : 'Brian Hughes',
-    email : 'hughes.brian@company.com',
+    id: 'cfaad35d-07a3-4447-a6c3-d8c3d54fd5df',
+    name: 'Brian Hughes',
+    email: 'hughes.brian@company.com',
     avatar: 'images/avatars/brian-hughes.jpg',
     status: 'online',
 };

src/app/mock-api/dashboards/analytics/api.ts

@@ -3,16 +3,14 @@ import { FuseMockApiService } from '@fuse/lib/mock-api';
 import { analytics as analyticsData } from 'app/mock-api/dashboards/analytics/data';
 import { cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class AnalyticsMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class AnalyticsMockApi {
     private _analytics: any = analyticsData;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -24,8 +22,7 @@ export class AnalyticsMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Sales - GET
         // -----------------------------------------------------------------------------------------------------

src/app/mock-api/dashboards/crypto/api.ts

@@ -3,16 +3,14 @@ import { FuseMockApiService } from '@fuse/lib/mock-api';
 import { crypto as cryptoData } from 'app/mock-api/dashboards/crypto/data';
 import { cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class CryptoMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class CryptoMockApi {
     private _crypto: any = cryptoData;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -24,8 +22,7 @@ export class CryptoMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Crypto - GET
         // -----------------------------------------------------------------------------------------------------

src/app/mock-api/dashboards/crypto/data.ts

@@ -5,17 +5,17 @@ const now = DateTime.now();
 
 /* tslint:disable:max-line-length */
 export const crypto = {
-    btc      : {
-        amount     : 8878.48,
-        trend      : {
-            dir   : 'up',
+    btc: {
+        amount: 8878.48,
+        trend: {
+            dir: 'up',
             amount: 0.17,
         },
-        marketCap  : 148752956966,
-        volume     : 22903438381,
-        supply     : 18168448,
-        allTimeHigh: 19891.00,
-        price      : {
+        marketCap: 148752956966,
+        volume: 22903438381,
+        supply: 18168448,
+        allTimeHigh: 19891.0,
+        price: {
             series: [
                 {
                     name: 'Price',
@@ -62,7 +62,7 @@ export const crypto = {
                         },
                         {
                             x: -135,
-                            y: 6540.10,
+                            y: 6540.1,
                         },
                         {
                             x: -134,
@@ -142,7 +142,7 @@ export const crypto = {
                         },
                         {
                             x: -115,
-                            y: 6558.70,
+                            y: 6558.7,
                         },
                         {
                             x: -114,
@@ -150,15 +150,15 @@ export const crypto = {
                         },
                         {
                             x: -113,
-                            y: 6568.80,
+                            y: 6568.8,
                         },
                         {
                             x: -112,
-                            y: 6568.80,
+                            y: 6568.8,
                         },
                         {
                             x: -111,
-                            y: 6568.80,
+                            y: 6568.8,
                         },
                         {
                             x: -110,
@@ -178,7 +178,7 @@ export const crypto = {
                         },
                         {
                             x: -106,
-                            y: 6560.40,
+                            y: 6560.4,
                         },
                         {
                             x: -105,
@@ -194,7 +194,7 @@ export const crypto = {
                         },
                         {
                             x: -102,
-                            y: 6553.30,
+                            y: 6553.3,
                         },
                         {
                             x: -101,
@@ -210,11 +210,11 @@ export const crypto = {
                         },
                         {
                             x: -98,
-                            y: 6560.00,
+                            y: 6560.0,
                         },
                         {
                             x: -97,
-                            y: 6560.00,
+                            y: 6560.0,
                         },
                         {
                             x: -96,
@@ -246,7 +246,7 @@ export const crypto = {
                         },
                         {
                             x: -89,
-                            y: 6565.10,
+                            y: 6565.1,
                         },
                         {
                             x: -88,
@@ -378,7 +378,7 @@ export const crypto = {
                         },
                         {
                             x: -56,
-                            y: 6562.10,
+                            y: 6562.1,
                         },
                         {
                             x: -55,
@@ -434,11 +434,11 @@ export const crypto = {
                         },
                         {
                             x: -42,
-                            y: 6569.70,
+                            y: 6569.7,
                         },
                         {
                             x: -41,
-                            y: 6570.10,
+                            y: 6570.1,
                         },
                         {
                             x: -40,
@@ -494,7 +494,7 @@ export const crypto = {
                         },
                         {
                             x: -27,
-                            y: 6577.70,
+                            y: 6577.7,
                         },
                         {
                             x: -26,
@@ -506,7 +506,7 @@ export const crypto = {
                         },
                         {
                             x: -24,
-                            y: 6581.30,
+                            y: 6581.3,
                         },
                         {
                             x: -23,
@@ -574,11 +574,11 @@ export const crypto = {
                         },
                         {
                             x: -7,
-                            y: 6562.70,
+                            y: 6562.7,
                         },
                         {
                             x: -6,
-                            y: 6562.70,
+                            y: 6562.7,
                         },
                         {
                             x: -5,
@@ -598,20 +598,20 @@ export const crypto = {
                         },
                         {
                             x: -1,
-                            y: 6571.30,
+                            y: 6571.3,
                         },
                     ],
                 },
             ],
         },
     },
-    prices   : {
+    prices: {
         btc: 8878.48,
         eth: 170.46,
         bch: 359.93,
         xrp: 0.23512,
     },
-    wallets  : {
+    wallets: {
         btc: 24.97311243,
         eth: 126.3212,
         bch: 78.454412,
@@ -619,11 +619,11 @@ export const crypto = {
     },
     watchlist: [
         {
-            title : 'Ethereum',
-            iso   : 'ETH',
+            title: 'Ethereum',
+            iso: 'ETH',
             amount: 170.46,
-            trend : {
-                dir   : 'up',
+            trend: {
+                dir: 'up',
                 amount: 2.35,
             },
             series: [
@@ -631,83 +631,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
                             y: 154.36,
                         },
                         {
-                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
                             y: 154.36,
                         },
                         {
-                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
                             y: 146.94,
                         },
                         {
-                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
                             y: 146.96,
                         },
                         {
-                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
                             y: 146.11,
                         },
                         {
-                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
                             y: 150.26,
                         },
                         {
-                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
                             y: 146.11,
                         },
                         {
-                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
                             y: 150.79,
                         },
                         {
-                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
                             y: 145.36,
                         },
                         {
-                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
                             y: 141.06,
                         },
                         {
-                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
-                            y: 140.10,
+                            x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
+                            y: 140.1,
                         },
                         {
-                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
                             y: 138.31,
                         },
                         {
-                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
                             y: 138.42,
                         },
                         {
-                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
                             y: 138.48,
                         },
                         {
-                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
                             y: 138.71,
                         },
                         {
-                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
                             y: 148.42,
                         },
                         {
-                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
                             y: 146.87,
                         },
                         {
-                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
                             y: 147.07,
                         },
                         {
-                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
                             y: 135.07,
                         },
                         {
-                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
                             y: 135.01,
                         },
                     ],
@@ -715,11 +715,11 @@ export const crypto = {
             ],
         },
         {
-            title : 'Bitcoin Cash',
-            iso   : 'BCH',
+            title: 'Bitcoin Cash',
+            iso: 'BCH',
             amount: 359.93,
-            trend : {
-                dir   : 'up',
+            trend: {
+                dir: 'up',
                 amount: 9.94,
             },
             series: [
@@ -727,95 +727,95 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
                             y: 374.77,
                         },
                         {
-                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
                             y: 374.41,
                         },
                         {
-                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
                             y: 375.08,
                         },
                         {
-                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
                             y: 375.08,
                         },
                         {
-                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
                             y: 374.09,
                         },
                         {
-                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
                             y: 368.84,
                         },
                         {
-                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
                             y: 367.49,
                         },
                         {
-                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
                             y: 359.75,
                         },
                         {
-                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
                             y: 366.65,
                         },
                         {
-                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
                             y: 367.52,
                         },
                         {
-                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
                             y: 367.59,
                         },
                         {
-                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
                             y: 364.18,
                         },
                         {
-                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
                             y: 370.11,
                         },
                         {
-                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
-                            y: 362.70,
+                            x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
+                            y: 362.7,
                         },
                         {
-                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
-                            y: 362.70,
+                            x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
+                            y: 362.7,
                         },
                         {
-                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
                             y: 362.77,
                         },
                         {
-                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
                             y: 369.46,
                         },
                         {
-                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
                             y: 371.04,
                         },
                         {
-                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
                             y: 371.48,
                         },
                         {
-                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
-                            y: 371.30,
+                            x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
+                            y: 371.3,
                         },
                     ],
                 },
             ],
         },
         {
-            title : 'XRP',
-            iso   : 'XRP',
+            title: 'XRP',
+            iso: 'XRP',
             amount: 0.23512,
-            trend : {
-                dir   : 'down',
+            trend: {
+                dir: 'down',
                 amount: 0.35,
             },
             series: [
@@ -823,95 +823,95 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
                             y: 0.258,
                         },
                         {
-                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
                             y: 0.256,
                         },
                         {
-                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
                             y: 0.255,
                         },
                         {
-                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
                             y: 0.255,
                         },
                         {
-                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
                             y: 0.254,
                         },
                         {
-                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
                             y: 0.248,
                         },
                         {
-                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
                             y: 0.247,
                         },
                         {
-                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
                             y: 0.249,
                         },
                         {
-                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
                             y: 0.246,
                         },
                         {
-                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
                             y: 0.247,
                         },
                         {
-                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
                             y: 0.247,
                         },
                         {
-                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
                             y: 0.244,
                         },
                         {
-                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
-                            y: 0.250,
+                            x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
+                            y: 0.25,
                         },
                         {
-                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
                             y: 0.242,
                         },
                         {
-                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
                             y: 0.251,
                         },
                         {
-                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
                             y: 0.251,
                         },
                         {
-                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
                             y: 0.251,
                         },
                         {
-                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
                             y: 0.249,
                         },
                         {
-                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
                             y: 0.242,
                         },
                         {
-                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
-                            y: 0.240,
+                            x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
+                            y: 0.24,
                         },
                     ],
                 },
             ],
         },
         {
-            title : 'Litecoin',
-            iso   : 'LTC',
+            title: 'Litecoin',
+            iso: 'LTC',
             amount: 60.15,
-            trend : {
-                dir   : 'up',
+            trend: {
+                dir: 'up',
                 amount: 0.99,
             },
             series: [
@@ -919,83 +919,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
                             y: 62.54,
                         },
                         {
-                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
                             y: 61.54,
                         },
                         {
-                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
                             y: 62.55,
                         },
                         {
-                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
                             y: 60.55,
                         },
                         {
-                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
                             y: 59.54,
                         },
                         {
-                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
                             y: 58.48,
                         },
                         {
-                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
                             y: 54.47,
                         },
                         {
-                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
                             y: 51.49,
                         },
                         {
-                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
                             y: 51.46,
                         },
                         {
-                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
                             y: 53.47,
                         },
                         {
-                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
                             y: 52.47,
                         },
                         {
-                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
                             y: 54.44,
                         },
                         {
-                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
-                            y: 59.50,
+                            x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
+                            y: 59.5,
                         },
                         {
-                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
                             y: 62.42,
                         },
                         {
-                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
                             y: 61.42,
                         },
                         {
-                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
                             y: 60.42,
                         },
                         {
-                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
                             y: 58.49,
                         },
                         {
-                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
                             y: 57.51,
                         },
                         {
-                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
                             y: 54.51,
                         },
                         {
-                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
                             y: 51.25,
                         },
                     ],
@@ -1003,11 +1003,11 @@ export const crypto = {
             ],
         },
         {
-            title : 'Zcash',
-            iso   : 'ZEC',
+            title: 'Zcash',
+            iso: 'ZEC',
             amount: 58.41,
-            trend : {
-                dir   : 'down',
+            trend: {
+                dir: 'down',
                 amount: 8.79,
             },
             series: [
@@ -1015,83 +1015,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
                             y: 53.54,
                         },
                         {
-                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
                             y: 52.54,
                         },
                         {
-                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
                             y: 52.55,
                         },
                         {
-                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
                             y: 46.44,
                         },
                         {
-                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
-                            y: 49.50,
+                            x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
+                            y: 49.5,
                         },
                         {
-                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
                             y: 55.42,
                         },
                         {
-                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
                             y: 54.42,
                         },
                         {
-                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
                             y: 43.49,
                         },
                         {
-                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
                             y: 43.46,
                         },
                         {
-                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
                             y: 41.47,
                         },
                         {
-                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
                             y: 41.47,
                         },
                         {
-                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
                             y: 51.55,
                         },
                         {
-                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
                             y: 48.54,
                         },
                         {
-                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
                             y: 49.48,
                         },
                         {
-                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
                             y: 45.47,
                         },
                         {
-                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
                             y: 51.42,
                         },
                         {
-                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
                             y: 49.49,
                         },
                         {
-                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
                             y: 46.51,
                         },
                         {
-                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
                             y: 41.51,
                         },
                         {
-                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
                             y: 44.25,
                         },
                     ],
@@ -1099,11 +1099,11 @@ export const crypto = {
             ],
         },
         {
-            title : 'Bitcoin Gold',
-            iso   : 'BTG',
+            title: 'Bitcoin Gold',
+            iso: 'BTG',
             amount: 12.23,
-            trend : {
-                dir   : 'down',
+            trend: {
+                dir: 'down',
                 amount: 4.42,
             },
             series: [
@@ -1111,84 +1111,84 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 20 }).toFormat('HH:mm'),
                             y: 14.77,
                         },
                         {
-                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 19 }).toFormat('HH:mm'),
                             y: 14.41,
                         },
                         {
-                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 18 }).toFormat('HH:mm'),
                             y: 15.08,
                         },
                         {
-                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 17 }).toFormat('HH:mm'),
                             y: 15.08,
                         },
                         {
-                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 16 }).toFormat('HH:mm'),
                             y: 14.09,
                         },
                         {
-                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 15 }).toFormat('HH:mm'),
                             y: 18.84,
                         },
                         {
-                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 14 }).toFormat('HH:mm'),
                             y: 17.49,
                         },
                         {
-                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 13 }).toFormat('HH:mm'),
                             y: 19.75,
                         },
                         {
-                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 12 }).toFormat('HH:mm'),
                             y: 16.65,
                         },
                         {
-                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 11 }).toFormat('HH:mm'),
                             y: 17.52,
                         },
                         {
-                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 10 }).toFormat('HH:mm'),
                             y: 17.59,
                         },
                         {
-                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 9 }).toFormat('HH:mm'),
                             y: 14.18,
                         },
                         {
-                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 8 }).toFormat('HH:mm'),
                             y: 10.11,
                         },
                         {
-                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
-                            y: 12.70,
+                            x: now.minus({ minutes: 7 }).toFormat('HH:mm'),
+                            y: 12.7,
                         },
                         {
-                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
-                            y: 12.70,
+                            x: now.minus({ minutes: 6 }).toFormat('HH:mm'),
+                            y: 12.7,
                         },
                         {
-                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 5 }).toFormat('HH:mm'),
                             y: 12.77,
                         },
                         {
-                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 4 }).toFormat('HH:mm'),
                             y: 19.46,
                         },
                         {
-                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 3 }).toFormat('HH:mm'),
                             y: 11.04,
                         },
                         {
-                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
+                            x: now.minus({ minutes: 2 }).toFormat('HH:mm'),
                             y: 11.48,
                         },
                         {
-                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
-                            y: 11.30,
+                            x: now.minus({ minutes: 1 }).toFormat('HH:mm'),
+                            y: 11.3,
                         },
                     ],
                 },
@@ -1196,4 +1196,3 @@ export const crypto = {
         },
     ],
 };
-

src/app/mock-api/dashboards/finance/api.ts

@@ -3,16 +3,14 @@ import { FuseMockApiService } from '@fuse/lib/mock-api';
 import { finance as financeData } from 'app/mock-api/dashboards/finance/data';
 import { cloneDeep } from 'lodash-es';
 
-@Injectable({providedIn: 'root'})
-export class FinanceMockApi
-{
+@Injectable({ providedIn: 'root' })
+export class FinanceMockApi {
     private _finance: any = financeData;
 
     /**
      * Constructor
      */
-    constructor(private _fuseMockApiService: FuseMockApiService)
-    {
+    constructor(private _fuseMockApiService: FuseMockApiService) {
         // Register Mock API handlers
         this.registerHandlers();
     }
@@ -24,8 +22,7 @@ export class FinanceMockApi
     /**
      * Register Mock API handlers
      */
-    registerHandlers(): void
-    {
+    registerHandlers(): void {
         // -----------------------------------------------------------------------------------------------------
         // @ Sales - GET
         // -----------------------------------------------------------------------------------------------------