Increased the version number & updated the changelog

(apps/mailbox) Style improvements

README.md

@@ -12,7 +12,7 @@ Run `ng generate component component-name` to generate a new component. You can
 
 ## Build
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
 ## Running unit tests
 
@@ -20,7 +20,7 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 
 ## Running end-to-end tests
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice.
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice.  To use this command, you need to first add a package that implements end-to-end testing capabilities.
 
 ## Further help
 

angular.json

@@ -60,13 +60,13 @@
                             "budgets": [
                                 {
                                     "type": "initial",
-                                    "maximumWarning": "5mb",
-                                    "maximumError": "8mb"
+                                    "maximumWarning": "3mb",
+                                    "maximumError": "5mb"
                                 },
                                 {
                                     "type": "anyComponentStyle",
-                                    "maximumWarning": "100kb",
-                                    "maximumError": "150kb"
+                                    "maximumWarning": "75kb",
+                                    "maximumError": "90kb"
                                 }
                             ],
                             "fileReplacements": [

karma.conf.js

@@ -26,7 +26,7 @@ module.exports = function (config)
             suppressAll: true // removes the duplicated traces
         },
         coverageReporter   : {
-            dir      : require('path').join(__dirname, './coverage/angular12'),
+            dir      : require('path').join(__dirname, './coverage/fuse'),
             subdir   : '.',
             reporters: [
                 {type: 'html'},

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fuse/demo",
-    "version": "13.2.0",
+    "version": "13.5.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -9,22 +9,22 @@
         "ng": "ng",
         "start": "ng serve",
         "build": "ng build",
+        "watch": "ng build --watch --configuration development",
         "test": "ng test",
-        "lint": "ng lint",
-        "e2e": "ng e2e"
+        "lint": "ng lint"
     },
     "dependencies": {
-        "@angular/animations": "12.1.1",
-        "@angular/cdk": "12.1.1",
-        "@angular/common": "12.1.1",
-        "@angular/compiler": "12.1.1",
-        "@angular/core": "12.1.1",
-        "@angular/forms": "12.1.1",
-        "@angular/material": "12.1.1",
-        "@angular/material-moment-adapter": "12.1.1",
-        "@angular/platform-browser": "12.1.1",
-        "@angular/platform-browser-dynamic": "12.1.1",
-        "@angular/router": "12.1.1",
+        "@angular/animations": "12.2.1",
+        "@angular/cdk": "12.2.1",
+        "@angular/common": "12.2.1",
+        "@angular/compiler": "12.2.1",
+        "@angular/core": "12.2.1",
+        "@angular/forms": "12.2.1",
+        "@angular/material": "12.2.1",
+        "@angular/material-moment-adapter": "12.2.1",
+        "@angular/platform-browser": "12.2.1",
+        "@angular/platform-browser-dynamic": "12.2.1",
+        "@angular/router": "12.2.1",
         "@fullcalendar/angular": "4.4.5-beta",
         "@fullcalendar/core": "4.4.2",
         "@fullcalendar/daygrid": "4.4.2",
@@ -33,59 +33,59 @@
         "@fullcalendar/moment": "4.4.2",
         "@fullcalendar/rrule": "4.4.2",
         "@fullcalendar/timegrid": "4.4.2",
-        "@ngneat/transloco": "2.21.0",
-        "apexcharts": "3.27.1",
+        "@ngneat/transloco": "2.22.0",
+        "apexcharts": "3.27.3",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.0.1",
+        "highlight.js": "11.2.0",
         "lodash-es": "4.17.21",
         "moment": "2.29.1",
         "ng-apexcharts": "1.5.12",
         "ngx-markdown": "12.0.1",
-        "ngx-quill": "14.1.1",
-        "perfect-scrollbar": "1.5.1",
+        "ngx-quill": "14.2.0",
+        "perfect-scrollbar": "1.5.2",
         "quill": "1.3.7",
         "rrule": "2.6.8",
         "rxjs": "6.6.7",
-        "tslib": "2.3.0",
+        "tslib": "2.3.1",
         "web-animations-js": "2.3.2",
         "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "12.1.0",
-        "@angular-eslint/builder": "12.2.0",
-        "@angular-eslint/eslint-plugin": "12.2.0",
-        "@angular-eslint/eslint-plugin-template": "12.2.0",
-        "@angular-eslint/schematics": "12.2.0",
-        "@angular-eslint/template-parser": "12.2.0",
-        "@angular/cli": "12.1.0",
-        "@angular/compiler-cli": "12.1.1",
+        "@angular-devkit/build-angular": "12.2.1",
+        "@angular-eslint/builder": "12.3.1",
+        "@angular-eslint/eslint-plugin": "12.3.1",
+        "@angular-eslint/eslint-plugin-template": "12.3.1",
+        "@angular-eslint/schematics": "12.3.1",
+        "@angular-eslint/template-parser": "12.3.1",
+        "@angular/cli": "12.2.1",
+        "@angular/compiler-cli": "12.2.1",
         "@tailwindcss/aspect-ratio": "0.2.1",
         "@tailwindcss/line-clamp": "0.2.1",
         "@tailwindcss/typography": "0.4.1",
         "@types/chroma-js": "2.1.3",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "3.6.11",
-        "@types/lodash": "4.14.170",
+        "@types/jasmine": "3.8.2",
+        "@types/lodash": "4.14.172",
         "@types/lodash-es": "4.17.4",
-        "@types/node": "12.20.15",
-        "@typescript-eslint/eslint-plugin": "4.28.1",
-        "@typescript-eslint/parser": "4.28.1",
-        "autoprefixer": "10.2.6",
+        "@types/node": "12.20.19",
+        "@typescript-eslint/eslint-plugin": "4.29.1",
+        "@typescript-eslint/parser": "4.29.1",
+        "autoprefixer": "10.3.1",
         "chroma-js": "2.1.2",
-        "eslint": "7.29.0",
-        "eslint-plugin-import": "2.23.4",
-        "eslint-plugin-jsdoc": "35.4.1",
+        "eslint": "7.32.0",
+        "eslint-plugin-import": "2.24.0",
+        "eslint-plugin-jsdoc": "36.0.7",
         "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "3.7.1",
+        "jasmine-core": "3.8.0",
         "karma": "6.3.4",
         "karma-chrome-launcher": "3.1.0",
         "karma-coverage": "2.0.3",
         "karma-jasmine": "4.0.1",
-        "karma-jasmine-html-reporter": "1.6.0",
+        "karma-jasmine-html-reporter": "1.7.0",
         "lodash": "4.17.21",
-        "postcss": "8.3.5",
-        "tailwindcss": "2.2.4",
+        "postcss": "8.3.6",
+        "tailwindcss": "2.2.7",
         "typescript": "4.3.5"
     }
 }

src/@fuse/components/navigation/horizontal/components/basic/basic.component.ts

@@ -10,7 +10,6 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 @Component({
     selector       : 'fuse-horizontal-navigation-basic-item',
     templateUrl    : './basic.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDestroy

src/@fuse/components/navigation/horizontal/components/branch/branch.component.ts

@@ -10,7 +10,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-horizontal-navigation-branch-item',
     templateUrl    : './branch.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDestroy

src/@fuse/components/navigation/horizontal/components/divider/divider.component.ts

@@ -8,7 +8,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-horizontal-navigation-divider-item',
     templateUrl    : './divider.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseHorizontalNavigationDividerItemComponent implements OnInit, OnDestroy

src/@fuse/components/navigation/horizontal/components/spacer/spacer.component.ts

@@ -8,7 +8,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-horizontal-navigation-spacer-item',
     templateUrl    : './spacer.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseHorizontalNavigationSpacerItemComponent implements OnInit, OnDestroy

src/@fuse/components/navigation/vertical/components/aside/aside.component.ts

@@ -10,7 +10,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-vertical-navigation-aside-item',
     templateUrl    : './aside.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy

src/@fuse/components/navigation/vertical/components/basic/basic.component.ts

@@ -10,7 +10,6 @@ import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 @Component({
     selector       : 'fuse-vertical-navigation-basic-item',
     templateUrl    : './basic.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestroy

src/@fuse/components/navigation/vertical/components/collapsable/collapsable.component.ts

@@ -11,7 +11,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-vertical-navigation-collapsable-item',
     templateUrl    : './collapsable.component.html',
-    styles         : [],
     animations     : fuseAnimations,
     changeDetection: ChangeDetectionStrategy.OnPush
 })

src/@fuse/components/navigation/vertical/components/divider/divider.component.ts

@@ -8,7 +8,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-vertical-navigation-divider-item',
     templateUrl    : './divider.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseVerticalNavigationDividerItemComponent implements OnInit, OnDestroy

src/@fuse/components/navigation/vertical/components/group/group.component.ts

@@ -9,7 +9,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-vertical-navigation-group-item',
     templateUrl    : './group.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseVerticalNavigationGroupItemComponent implements OnInit, OnDestroy

src/@fuse/components/navigation/vertical/components/spacer/spacer.component.ts

@@ -8,7 +8,6 @@ import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types
 @Component({
     selector       : 'fuse-vertical-navigation-spacer-item',
     templateUrl    : './spacer.component.html',
-    styles         : [],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FuseVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy

src/@fuse/fuse.module.ts

@@ -1,5 +1,7 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { MATERIAL_SANITY_CHECKS } from '@angular/material/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { FuseConfirmationModule } from '@fuse/services/confirmation';
 import { FuseMediaWatcherModule } from '@fuse/services/media-watcher/media-watcher.module';
 import { FuseSplashScreenModule } from '@fuse/services/splash-screen/splash-screen.module';
 import { FuseTailwindConfigModule } from '@fuse/services/tailwind/tailwind.module';
@@ -7,12 +9,22 @@ import { FuseUtilsModule } from '@fuse/services/utils/utils.module';
 
 @NgModule({
     imports  : [
+        FuseConfirmationModule,
         FuseMediaWatcherModule,
         FuseSplashScreenModule,
         FuseTailwindConfigModule,
         FuseUtilsModule
     ],
     providers: [
+        {
+            // Disable 'theme' sanity check
+            provide : MATERIAL_SANITY_CHECKS,
+            useValue: {
+                doctype: true,
+                theme  : false,
+                version: true
+            }
+        },
         {
             // Use the 'fill' appearance on Angular Material form fields by default
             provide : MAT_FORM_FIELD_DEFAULT_OPTIONS,

src/@fuse/services/confirmation/confirmation.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { FuseConfirmationService } from '@fuse/services/confirmation/confirmation.service';
+import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+    declarations: [
+        FuseConfirmationDialogComponent
+    ],
+    imports: [
+        MatButtonModule,
+        MatDialogModule,
+        MatIconModule,
+        CommonModule
+    ],
+    providers   : [
+        FuseConfirmationService
+    ]
+})
+export class FuseConfirmationModule
+{
+    /**
+     * Constructor
+     */
+    constructor(private _fuseConfirmationService: FuseConfirmationService)
+    {
+    }
+}

src/@fuse/services/confirmation/confirmation.service.ts

@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { merge } from 'lodash-es';
+import { FuseConfirmationDialogComponent } from '@fuse/services/confirmation/dialog/dialog.component';
+import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
+
+@Injectable()
+export class FuseConfirmationService
+{
+    private _defaultConfig: FuseConfirmationConfig = {
+        title      : 'Confirm action',
+        message    : 'Are you sure you want to confirm this action?',
+        icon       : {
+            show : true,
+            name : 'heroicons_outline:exclamation',
+            color: 'warn'
+        },
+        actions    : {
+            confirm: {
+                show : true,
+                label: 'Confirm',
+                color: 'warn'
+            },
+            cancel : {
+                show : true,
+                label: 'Cancel'
+            }
+        },
+        dismissible: false
+    };
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _matDialog: MatDialog
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    open(config: FuseConfirmationConfig = {}): MatDialogRef<FuseConfirmationDialogComponent>
+    {
+        // Merge the user config with the default config
+        const userConfig = merge({}, this._defaultConfig, config);
+
+        // Open the dialog
+        return this._matDialog.open(FuseConfirmationDialogComponent, {
+            autoFocus   : false,
+            disableClose: !userConfig.dismissible,
+            data        : userConfig,
+            panelClass  : 'fuse-confirmation-dialog-panel'
+        });
+    }
+}

src/@fuse/services/confirmation/confirmation.types.ts

@@ -0,0 +1,22 @@
+export interface FuseConfirmationConfig
+{
+    title?: string;
+    message?: string;
+    icon?: {
+        show?: boolean;
+        name?: string;
+        color?: 'primary' | 'accent' | 'warn' | 'basic' | 'info' | 'success' | 'warning' | 'error';
+    };
+    actions?: {
+        confirm?: {
+            show?: boolean;
+            label?: string;
+            color?: 'primary' | 'accent' | 'warn';
+        };
+        cancel?: {
+            show?: boolean;
+            label?: string;
+        };
+    };
+    dismissible?: boolean;
+}

src/@fuse/services/confirmation/dialog/dialog.component.html

@@ -0,0 +1,85 @@
+<div class="relative flex flex-col w-full h-full">
+
+    <!-- Dismiss button -->
+    <ng-container *ngIf="data.dismissible">
+        <div class="absolute top-0 right-0 pt-4 pr-4">
+            <button
+                mat-icon-button
+                [matDialogClose]="undefined">
+                <mat-icon
+                    class="text-secondary"
+                    [svgIcon]="'heroicons_outline:x'"></mat-icon>
+            </button>
+        </div>
+    </ng-container>
+
+    <!-- Content -->
+    <div class="flex flex-col sm:flex-row flex-auto items-center sm:items-start p-8 pb-6 sm:pb-8">
+
+        <!-- Icon -->
+        <ng-container *ngIf="data.icon.show">
+            <div
+                class="flex flex-0 items-center justify-center w-10 h-10 sm:mr-4 rounded-full"
+                [ngClass]="{'text-primary-600 bg-primary-100 dark:text-primary-50 dark:bg-primary-600': data.icon.color === 'primary',
+                            'text-accent-600 bg-accent-100 dark:text-accent-50 dark:bg-accent-600': data.icon.color === 'accent',
+                            'text-warn-600 bg-warn-100 dark:text-warn-50 dark:bg-warn-600': data.icon.color === 'warn',
+                            'text-gray-600 bg-gray-100 dark:text-gray-50 dark:bg-gray-600': data.icon.color === 'basic',
+                            'text-blue-600 bg-blue-100 dark:text-blue-50 dark:bg-blue-600': data.icon.color === 'info',
+                            'text-green-500 bg-green-100 dark:text-green-50 dark:bg-green-500': data.icon.color === 'success',
+                            'text-amber-500 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': data.icon.color === 'warning',
+                            'text-red-600 bg-red-100 dark:text-red-50 dark:bg-red-600': data.icon.color === 'error'
+                            }">
+                <mat-icon
+                    class="text-current"
+                    [svgIcon]="data.icon.name"></mat-icon>
+            </div>
+        </ng-container>
+
+        <ng-container *ngIf="data.title || data.message">
+            <div class="flex flex-col items-center sm:items-start mt-4 sm:mt-0 sm:pr-8 space-y-1 text-center sm:text-left">
+
+                <!-- Title -->
+                <ng-container *ngIf="data.title">
+                    <div
+                        class="text-xl leading-6 font-medium"
+                        [innerHTML]="data.title"></div>
+                </ng-container>
+
+                <!-- Message -->
+                <ng-container *ngIf="data.message">
+                    <div
+                        class="text-secondary"
+                        [innerHTML]="data.message"></div>
+                </ng-container>
+            </div>
+        </ng-container>
+
+    </div>
+
+    <!-- Actions -->
+    <ng-container *ngIf="data.actions.confirm.show || data.actions.cancel.show">
+        <div class="flex items-center justify-center sm:justify-end px-6 py-4 space-x-3 bg-gray-50 dark:bg-black dark:bg-opacity-10">
+
+            <!-- Cancel -->
+            <ng-container *ngIf="data.actions.cancel.show">
+                <button
+                    mat-stroked-button
+                    [matDialogClose]="'cancelled'">
+                    {{data.actions.cancel.label}}
+                </button>
+            </ng-container>
+
+            <!-- Confirm -->
+            <ng-container *ngIf="data.actions.confirm.show">
+                <button
+                    mat-flat-button
+                    [color]="data.actions.confirm.color"
+                    [matDialogClose]="'confirmed'">
+                    {{data.actions.confirm.label}}
+                </button>
+            </ng-container>
+
+        </div>
+    </ng-container>
+
+</div>

src/@fuse/services/confirmation/dialog/dialog.component.ts

@@ -0,0 +1,52 @@
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation.types';
+
+@Component({
+    selector     : 'fuse-confirmation-dialog',
+    templateUrl  : './dialog.component.html',
+    styles       : [
+        /* language=SCSS */
+        `
+            .fuse-confirmation-dialog-panel {
+                @screen md {
+                    @apply w-128;
+                }
+
+                .mat-dialog-container {
+                    padding: 0 !important;
+                }
+            }
+        `
+    ],
+    encapsulation: ViewEncapsulation.None
+})
+export class FuseConfirmationDialogComponent implements OnInit
+{
+    /**
+     * Constructor
+     */
+    constructor(
+        @Inject(MAT_DIALOG_DATA) public data: FuseConfirmationConfig,
+        public matDialogRef: MatDialogRef<FuseConfirmationDialogComponent>
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+}

src/@fuse/services/confirmation/index.ts

@@ -0,0 +1 @@
+export * from '@fuse/services/confirmation/public-api';

src/@fuse/services/confirmation/public-api.ts

@@ -0,0 +1,3 @@
+export * from '@fuse/services/confirmation/confirmation.module';
+export * from '@fuse/services/confirmation/confirmation.service';
+export * from '@fuse/services/confirmation/confirmation.types';

src/@fuse/styles/overrides/quill.scss

@@ -4,11 +4,12 @@
 .ql-toolbar {
     border-radius: 6px 6px 0 0;
     padding: 0 !important;
-    @apply bg-gray-100 border-gray-300;
+    @apply bg-gray-100;
+    @apply border-gray-300 border-opacity-100 #{'!important'};
 
     .dark & {
         background-color: rgba(0, 0, 0, 0.05);
-        @apply border-gray-500;
+        @apply border-gray-500 #{'!important'};
     }
 
     .ql-formats {
@@ -81,26 +82,22 @@
 .ql-container {
     overflow: hidden;
     border-radius: 0 0 6px 6px;
-    @apply border-gray-300 shadow-sm;
+    @apply border-gray-300 border-opacity-100 shadow-sm #{'!important'};
 
     .dark & {
-        @apply border-gray-500;
+        @apply border-gray-500 #{'!important'};
     }
 
     .ql-editor {
         min-height: 160px;
         max-height: 160px;
         height: 160px;
-        @apply bg-gray-50;
+        @apply bg-card;
 
         .dark & {
             background-color: rgba(0, 0, 0, 0.05);
         }
 
-        &:focus {
-            @apply bg-card;
-        }
-
         &.ql-blank::before {
             @apply text-hint;
         }

src/@fuse/styles/themes.scss

@@ -18,81 +18,6 @@
     )
 ));
 
-/* Prepare the Background and Foreground maps */
-$background-light: (
-    status-bar: #CBD5E1, /* blueGray.300 */
-    app-bar: #FFFFFF,
-    background: #F1F5F9, /* blueGray.100 */
-    hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */
-    card: #FFFFFF,
-    dialog: #FFFFFF,
-    disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */
-    raised-button: #FFFFFF,
-    focused-button: #64748B, /* blueGray.500 */
-    selected-button: #E2E8F0, /* blueGray.200 */
-    selected-disabled-button: #E2E8F0, /* blueGray.200 */
-    disabled-button-toggle: #CBD5E1, /* blueGray.300 */
-    unselected-chip: #E2E8F0, /* blueGray.200 */
-    disabled-list-option: #CBD5E1, /* blueGray.300 */
-    tooltip: #1E293B /* blueGray.800 */
-);
-
-$background-dark: (
-    status-bar: #0F172A, /* blueGray.900 */
-    app-bar: #0F172A, /* blueGray.900 */
-    background: #0F172A, /* blueGray.900 */
-    hover: rgba(255, 255, 255, 0.05),
-    card: #1E293B, /* blueGray.800 */
-    dialog: #1E293B, /* blueGray.800 */
-    disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */
-    raised-button: #0F172A, /* blueGray.900 */
-    focused-button: #E2E8F0, /* blueGray.200 */
-    selected-button: rgba(255, 255, 255, 0.05),
-    selected-disabled-button: #1E293B, /* blueGray.800 */
-    disabled-button-toggle: #0F172A, /* blueGray.900 */
-    unselected-chip: #475569, /* blueGray.600 */
-    disabled-list-option: #E2E8F0, /* blueGray.200 */
-    tooltip: #64748B /* blueGray.500 */
-);
-
-$foreground-light: (
-    base: #000000,
-    divider: #E2E8F0, /* blueGray.200 */
-    dividers: #E2E8F0, /* blueGray.200 */
-    disabled: #94A3B8, /* blueGray.400 */
-    disabled-button: #94A3B8, /* blueGray.400 */
-    disabled-text: #94A3B8, /* blueGray.400 */
-    elevation: #000000,
-    hint-text: #94A3B8, /* blueGray.400 */
-    secondary-text: #64748B, /* blueGray.500 */
-    icon: #64748B, /* blueGray.500 */
-    icons: #64748B, /* blueGray.500 */
-    mat-icon: #64748B, /* blueGray.500 */
-    text: #1E293B, /* blueGray.800 */
-    slider-min: #1E293B, /* blueGray.800 */
-    slider-off: #CBD5E1, /* blueGray.300 */
-    slider-off-active: #94A3B8 /* blueGray.400 */
-);
-
-$foreground-dark: (
-    base: #FFFFFF,
-    divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
-    dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
-    disabled: #475569, /* blueGray.600 */
-    disabled-button: #1E293B, /* blueGray.800 */
-    disabled-text: #475569, /* blueGray.600 */
-    elevation: #000000,
-    hint-text: #64748B, /* blueGray.500 */
-    secondary-text: #94A3B8, /* blueGray.400 */
-    icon: #F1F5F9, /* blueGray.100 */
-    icons: #F1F5F9, /* blueGray.100 */
-    mat-icon: #94A3B8, /* blueGray.400 */
-    text: #FFFFFF,
-    slider-min: #FFFFFF,
-    slider-off: #64748B, /* blueGray.500 */
-    slider-off-active: #94A3B8 /* blueGray.400 */
-);
-
 /* Generate Primary, Accent and Warn palettes */
 $palettes: ();
 @each $name in (primary, accent, warn) {
@@ -145,8 +70,41 @@ body .light {
             accent: map.get(map.get($base-light-theme, color), accent),
             warn: map.get(map.get($base-light-theme, color), warn),
             is-dark: map.get(map.get($base-light-theme, color), is-dark),
-            foreground: $foreground-light,
-            background: $background-light
+            foreground: (
+                base: #000000,
+                divider: #E2E8F0, /* blueGray.200 */
+                dividers: #E2E8F0, /* blueGray.200 */
+                disabled: #94A3B8, /* blueGray.400 */
+                disabled-button: #94A3B8, /* blueGray.400 */
+                disabled-text: #94A3B8, /* blueGray.400 */
+                elevation: #000000,
+                hint-text: #94A3B8, /* blueGray.400 */
+                secondary-text: #64748B, /* blueGray.500 */
+                icon: #64748B, /* blueGray.500 */
+                icons: #64748B, /* blueGray.500 */
+                mat-icon: #64748B, /* blueGray.500 */
+                text: #1E293B, /* blueGray.800 */
+                slider-min: #1E293B, /* blueGray.800 */
+                slider-off: #CBD5E1, /* blueGray.300 */
+                slider-off-active: #94A3B8 /* blueGray.400 */
+            ),
+            background: (
+                status-bar: #CBD5E1, /* blueGray.300 */
+                app-bar: #FFFFFF,
+                background: #F1F5F9, /* blueGray.100 */
+                hover: rgba(148, 163, 184, 0.12), /* blueGray.400 + opacity */
+                card: #FFFFFF,
+                dialog: #FFFFFF,
+                disabled-button: rgba(148, 163, 184, 0.38), /* blueGray.400 + opacity */
+                raised-button: #FFFFFF,
+                focused-button: #64748B, /* blueGray.500 */
+                selected-button: #E2E8F0, /* blueGray.200 */
+                selected-disabled-button: #E2E8F0, /* blueGray.200 */
+                disabled-button-toggle: #CBD5E1, /* blueGray.300 */
+                unselected-chip: #E2E8F0, /* blueGray.200 */
+                disabled-list-option: #CBD5E1, /* blueGray.300 */
+                tooltip: #1E293B /* blueGray.800 */
+            )
         )
     );
 
@@ -166,8 +124,41 @@ body .dark {
             accent: map.get(map.get($base-dark-theme, color), accent),
             warn: map.get(map.get($base-dark-theme, color), warn),
             is-dark: map.get(map.get($base-dark-theme, color), is-dark),
-            foreground: $foreground-dark,
-            background: $background-dark
+            foreground: (
+                base: #FFFFFF,
+                divider: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
+                dividers: rgba(241, 245, 249, 0.12), /* blueGray.100 + opacity */
+                disabled: #475569, /* blueGray.600 */
+                disabled-button: #1E293B, /* blueGray.800 */
+                disabled-text: #475569, /* blueGray.600 */
+                elevation: #000000,
+                hint-text: #64748B, /* blueGray.500 */
+                secondary-text: #94A3B8, /* blueGray.400 */
+                icon: #F1F5F9, /* blueGray.100 */
+                icons: #F1F5F9, /* blueGray.100 */
+                mat-icon: #94A3B8, /* blueGray.400 */
+                text: #FFFFFF,
+                slider-min: #FFFFFF,
+                slider-off: #64748B, /* blueGray.500 */
+                slider-off-active: #94A3B8 /* blueGray.400 */
+            ),
+            background: (
+                status-bar: #0F172A, /* blueGray.900 */
+                app-bar: #0F172A, /* blueGray.900 */
+                background: #0F172A, /* blueGray.900 */
+                hover: rgba(255, 255, 255, 0.05),
+                card: #1E293B, /* blueGray.800 */
+                dialog: #1E293B, /* blueGray.800 */
+                disabled-button: rgba(15, 23, 42, 0.38), /* blueGray.900 + opacity */
+                raised-button: #0F172A, /* blueGray.900 */
+                focused-button: #E2E8F0, /* blueGray.200 */
+                selected-button: rgba(255, 255, 255, 0.05),
+                selected-disabled-button: #1E293B, /* blueGray.800 */
+                disabled-button-toggle: #0F172A, /* blueGray.900 */
+                unselected-chip: #475569, /* blueGray.600 */
+                disabled-list-option: #E2E8F0, /* blueGray.200 */
+                tooltip: #64748B /* blueGray.500 */
+            )
         )
     );
 

src/@fuse/version/fuse-version.ts

@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';
 
-export const FUSE_VERSION = new Version('13.2.0').full;
+export const FUSE_VERSION = new Version('13.5.0').full;

src/app/app.module.ts

@@ -14,8 +14,8 @@ import { AppComponent } from 'app/app.component';
 import { appRoutes } from 'app/app.routing';
 
 const routerConfig: ExtraOptions = {
-    scrollPositionRestoration: 'enabled',
-    preloadingStrategy       : PreloadAllModules
+    preloadingStrategy       : PreloadAllModules,
+    scrollPositionRestoration: 'enabled'
 };
 
 @NgModule({

src/app/app.routing.ts

@@ -79,6 +79,8 @@ export const appRoutes: Route[] = [
             {path: 'dashboards', children: [
                 {path: 'project', loadChildren: () => import('app/modules/admin/dashboards/project/project.module').then(m => m.ProjectModule)},
                 {path: 'analytics', loadChildren: () => import('app/modules/admin/dashboards/analytics/analytics.module').then(m => m.AnalyticsModule)},
+                {path: 'finance', loadChildren: () => import('app/modules/admin/dashboards/finance/finance.module').then(m => m.FinanceModule)},
+                {path: 'crypto', loadChildren: () => import('app/modules/admin/dashboards/crypto/crypto.module').then(m => m.CryptoModule)},
             ]},
 
             // Apps
@@ -105,7 +107,7 @@ export const appRoutes: Route[] = [
                 // Authentication
                 {path: 'authentication', loadChildren: () => import('app/modules/admin/pages/authentication/authentication.module').then(m => m.AuthenticationModule)},
 
-                // Coming soon
+                // Coming Soon
                 {path: 'coming-soon', loadChildren: () => import('app/modules/admin/pages/coming-soon/coming-soon.module').then(m => m.ComingSoonModule)},
 
                 // Error
@@ -140,16 +142,22 @@ export const appRoutes: Route[] = [
                 {path: 'settings', loadChildren: () => import('app/modules/admin/pages/settings/settings.module').then(m => m.SettingsModule)},
             ]},
 
-            // User interface
+            // User Interface
             {path: 'ui', children: [
 
-                // Angular Material
-                {path: 'angular-material', loadChildren: () => import('app/modules/admin/ui/angular-material/angular-material.module').then(m => m.AngularMaterialModule)},
+                // Material Components
+                {path: 'material-components', loadChildren: () => import('app/modules/admin/ui/material-components/material-components.module').then(m => m.MaterialComponentsModule)},
+
+                // Fuse Components
+                {path: 'fuse-components', loadChildren: () => import('app/modules/admin/ui/fuse-components/fuse-components.module').then(m => m.FuseComponentsModule)},
+
+                // Other Components
+                {path: 'other-components', loadChildren: () => import('app/modules/admin/ui/other-components/other-components.module').then(m => m.OtherComponentsModule)},
 
                 // TailwindCSS
                 {path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.module').then(m => m.TailwindCSSModule)},
 
-                // Advanced search
+                // Advanced Search
                 {path: 'advanced-search', loadChildren: () => import('app/modules/admin/ui/advanced-search/advanced-search.module').then(m => m.AdvancedSearchModule)},
 
                 // Animations
@@ -161,6 +169,9 @@ export const appRoutes: Route[] = [
                 // Colors
                 {path: 'colors', loadChildren: () => import('app/modules/admin/ui/colors/colors.module').then(m => m.ColorsModule)},
 
+                // Confirmation Dialog
+                {path: 'confirmation-dialog', loadChildren: () => import('app/modules/admin/ui/confirmation-dialog/confirmation-dialog.module').then(m => m.ConfirmationDialogModule)},
+
                 // Datatable
                 {path: 'datatable', loadChildren: () => import('app/modules/admin/ui/datatable/datatable.module').then(m => m.DatatableModule)},
 
@@ -174,7 +185,7 @@ export const appRoutes: Route[] = [
                 // Icons
                 {path: 'icons', loadChildren: () => import('app/modules/admin/ui/icons/icons.module').then(m => m.IconsModule)},
 
-                // Page layouts
+                // Page Layouts
                 {path: 'page-layouts', loadChildren: () => import('app/modules/admin/ui/page-layouts/page-layouts.module').then(m => m.PageLayoutsModule)},
 
                 // Typography
@@ -188,13 +199,7 @@ export const appRoutes: Route[] = [
                 {path: 'changelog', loadChildren: () => import('app/modules/admin/docs/changelog/changelog.module').then(m => m.ChangelogModule)},
 
                 // Guides
-                {path: 'guides', loadChildren: () => import('app/modules/admin/docs/guides/guides.module').then(m => m.GuidesModule)},
-
-                // Core features
-                {path: 'core-features', loadChildren: () => import('app/modules/admin/docs/core-features/core-features.module').then(m => m.CoreFeaturesModule)},
-
-                // Other components
-                {path: 'other-components', loadChildren: () => import('app/modules/admin/docs/other-components/other-components.module').then(m => m.OtherComponentsModule)},
+                {path: 'guides', loadChildren: () => import('app/modules/admin/docs/guides/guides.module').then(m => m.GuidesModule)}
             ]},
 
             // 404 & Catch all

src/app/core/transloco/transloco.module.ts

@@ -23,6 +23,7 @@ import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
                     }
                 ],
                 defaultLang         : 'en',
+                fallbackLang        : 'en',
                 reRenderOnLangChange: true,
                 prodMode            : environment.production
             })

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

@@ -22,6 +22,20 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 type : 'basic',
                 icon : 'heroicons_outline:chart-pie',
                 link : '/dashboards/analytics'
+            },
+            {
+                id   : 'dashboards.finance',
+                title: 'Finance',
+                type : 'basic',
+                icon : 'heroicons_outline:cash',
+                link : '/dashboards/finance'
+            },
+            {
+                id   : 'dashboards.crypto',
+                title: 'Crypto',
+                type : 'basic',
+                icon : 'heroicons_outline:currency-dollar',
+                link : '/dashboards/crypto'
             }
         ]
     },
@@ -77,14 +91,14 @@ export const defaultNavigation: FuseNavigationItem[] = [
             },
             {
                 id   : 'apps.file-manager',
-                title: 'File manager',
+                title: 'File Manager',
                 type : 'basic',
                 icon : 'heroicons_outline:cloud',
                 link : '/apps/file-manager'
             },
             {
                 id      : 'apps.help-center',
-                title   : 'Help center',
+                title   : 'Help Center',
                 type    : 'collapsable',
                 icon    : 'heroicons_outline:support',
                 link    : '/apps/help-center',
@@ -523,7 +537,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
             },
             {
                 id      : 'pages.coming-soon',
-                title   : 'Coming soon',
+                title   : 'Coming Soon',
                 type    : 'collapsable',
                 icon    : 'heroicons_outline:clock',
                 link    : '/pages/coming-soon',
@@ -683,10 +697,24 @@ export const defaultNavigation: FuseNavigationItem[] = [
         children: [
             {
                 id   : 'user-interface.material-components',
-                title: 'Material components',
+                title: 'Material Components',
                 type : 'basic',
                 icon : 'heroicons_outline:chip',
-                link : '/ui/angular-material'
+                link : '/ui/material-components'
+            },
+            {
+                id   : 'user-interface.fuse-components',
+                title: 'Fuse Components',
+                type : 'basic',
+                icon : 'heroicons_outline:chip',
+                link : '/ui/fuse-components'
+            },
+            {
+                id   : 'user-interface.other-components',
+                title: 'Other Components',
+                type : 'basic',
+                icon : 'heroicons_outline:chip',
+                link : '/ui/other-components'
             },
             {
                 id   : 'user-interface.tailwindcss',
@@ -697,7 +725,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
             },
             {
                 id   : 'user-interface.advanced-search',
-                title: 'Advanced search',
+                title: 'Advanced Search',
                 type : 'basic',
                 icon : 'heroicons_outline:search-circle',
                 link : '/ui/advanced-search'
@@ -723,6 +751,13 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon : 'heroicons_outline:color-swatch',
                 link : '/ui/colors'
             },
+            {
+                id   : 'user-interface.confirmation-dialog',
+                title: 'Confirmation Dialog',
+                type : 'basic',
+                icon : 'heroicons_outline:question-mark-circle',
+                link : '/ui/confirmation-dialog'
+            },
             {
                 id   : 'user-interface.datatable',
                 title: 'Datatable',
@@ -808,7 +843,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
             },
             {
                 id      : 'user-interface.page-layouts',
-                title   : 'Page layouts',
+                title   : 'Page Layouts',
                 type    : 'collapsable',
                 icon    : 'heroicons_outline:template',
                 children: [
@@ -946,7 +981,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon : 'heroicons_outline:speakerphone',
                 link : '/docs/changelog',
                 badge: {
-                    title  : '13.2.0',
+                    title  : '13.5.0',
                     classes: 'px-2 bg-yellow-300 text-black rounded-full'
                 }
             },
@@ -956,20 +991,6 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 type : 'basic',
                 icon : 'heroicons_outline:book-open',
                 link : '/docs/guides'
-            },
-            {
-                id   : 'documentation.core-features',
-                title: 'Core features',
-                type : 'basic',
-                icon : 'heroicons_outline:book-open',
-                link : '/docs/core-features'
-            },
-            {
-                id   : 'documentation.other-components',
-                title: 'Other components',
-                type : 'basic',
-                icon : 'heroicons_outline:book-open',
-                link : '/docs/other-components'
             }
         ]
     },

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

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { cloneDeep } from 'lodash-es';
+import { FuseMockApiService } from '@fuse/lib/mock-api';
+import { crypto as cryptoData } from 'app/mock-api/dashboards/crypto/data';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class CryptoMockApi
+{
+    private _crypto: any = cryptoData;
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseMockApiService: FuseMockApiService)
+    {
+        // Register Mock API handlers
+        this.registerHandlers();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register Mock API handlers
+     */
+    registerHandlers(): void
+    {
+        // -----------------------------------------------------------------------------------------------------
+        // @ Crypto - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/dashboards/crypto')
+            .reply(() => [200, cloneDeep(this._crypto)]);
+    }
+}

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

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { cloneDeep } from 'lodash-es';
+import { FuseMockApiService } from '@fuse/lib/mock-api';
+import { finance as financeData } from 'app/mock-api/dashboards/finance/data';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FinanceMockApi
+{
+    private _finance: any = financeData;
+
+    /**
+     * Constructor
+     */
+    constructor(private _fuseMockApiService: FuseMockApiService)
+    {
+        // Register Mock API handlers
+        this.registerHandlers();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Register Mock API handlers
+     */
+    registerHandlers(): void
+    {
+        // -----------------------------------------------------------------------------------------------------
+        // @ Sales - GET
+        // -----------------------------------------------------------------------------------------------------
+        this._fuseMockApiService
+            .onGet('api/dashboards/finance')
+            .reply(() => [200, cloneDeep(this._finance)]);
+    }
+}

src/app/mock-api/index.ts

@@ -5,8 +5,10 @@ import { AuthMockApi } from 'app/mock-api/common/auth/api';
 import { CalendarMockApi } from 'app/mock-api/apps/calendar/api';
 import { ChatMockApi } from 'app/mock-api/apps/chat/api';
 import { ContactsMockApi } from 'app/mock-api/apps/contacts/api';
+import { CryptoMockApi } from 'app/mock-api/dashboards/crypto/api';
 import { ECommerceInventoryMockApi } from 'app/mock-api/apps/ecommerce/inventory/api';
 import { FileManagerMockApi } from 'app/mock-api/apps/file-manager/api';
+import { FinanceMockApi } from 'app/mock-api/dashboards/finance/api';
 import { HelpCenterMockApi } from 'app/mock-api/apps/help-center/api';
 import { IconsMockApi } from 'app/mock-api/ui/icons/api';
 import { MailboxMockApi } from 'app/mock-api/apps/mailbox/api';
@@ -29,8 +31,10 @@ export const mockApiServices = [
     CalendarMockApi,
     ChatMockApi,
     ContactsMockApi,
+    CryptoMockApi,
     ECommerceInventoryMockApi,
     FileManagerMockApi,
+    FinanceMockApi,
     HelpCenterMockApi,
     IconsMockApi,
     MailboxMockApi,

src/app/modules/admin/apps/contacts/details/details.component.ts

@@ -6,6 +6,7 @@ import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { MatDrawerToggleResult } from '@angular/material/sidenav';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { Contact, Country, Tag } from 'app/modules/admin/apps/contacts/contacts.types';
 import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list.component';
 import { ContactsService } from 'app/modules/admin/apps/contacts/contacts.service';
@@ -42,6 +43,7 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
         private _contactsListComponent: ContactsListComponent,
         private _contactsService: ContactsService,
         private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _renderer2: Renderer2,
         private _router: Router,
         private _overlay: Overlay,
@@ -276,41 +278,61 @@ export class ContactsDetailsComponent implements OnInit, OnDestroy
      */
     deleteContact(): void
     {
-        // Get the current contact's id
-        const id = this.contact.id;
-
-        // Get the next/previous contact's id
-        const currentContactIndex = this.contacts.findIndex(item => item.id === id);
-        const nextContactIndex = currentContactIndex + ((currentContactIndex === (this.contacts.length - 1)) ? -1 : 1);
-        const nextContactId = (this.contacts.length === 1 && this.contacts[0].id === id) ? null : this.contacts[nextContactIndex].id;
-
-        // Delete the contact
-        this._contactsService.deleteContact(id)
-            .subscribe((isDeleted) => {
-
-                // Return if the contact wasn't deleted...
-                if ( !isDeleted )
-                {
-                    return;
+        // Open the confirmation dialog
+        const confirmation = this._fuseConfirmationService.open({
+            title  : 'Delete contact',
+            message: 'Are you sure you want to delete this contact? This action cannot be undone!',
+            actions: {
+                confirm: {
+                    label: 'Delete'
                 }
+            }
+        });
 
-                // Navigate to the next contact if available
-                if ( nextContactId )
-                {
-                    this._router.navigate(['../', nextContactId], {relativeTo: this._activatedRoute});
-                }
-                // Otherwise, navigate to the parent
-                else
-                {
-                    this._router.navigate(['../'], {relativeTo: this._activatedRoute});
-                }
+        // Subscribe to the confirmation dialog closed action
+        confirmation.afterClosed().subscribe((result) => {
 
-                // Toggle the edit mode off
-                this.toggleEditMode(false);
-            });
+            // If the confirm button pressed...
+            if ( result === 'confirmed' )
+            {
+                // Get the current contact's id
+                const id = this.contact.id;
+
+                // Get the next/previous contact's id
+                const currentContactIndex = this.contacts.findIndex(item => item.id === id);
+                const nextContactIndex = currentContactIndex + ((currentContactIndex === (this.contacts.length - 1)) ? -1 : 1);
+                const nextContactId = (this.contacts.length === 1 && this.contacts[0].id === id) ? null : this.contacts[nextContactIndex].id;
+
+                // Delete the contact
+                this._contactsService.deleteContact(id)
+                    .subscribe((isDeleted) => {
+
+                        // Return if the contact wasn't deleted...
+                        if ( !isDeleted )
+                        {
+                            return;
+                        }
+
+                        // Navigate to the next contact if available
+                        if ( nextContactId )
+                        {
+                            this._router.navigate(['../', nextContactId], {relativeTo: this._activatedRoute});
+                        }
+                        // Otherwise, navigate to the parent
+                        else
+                        {
+                            this._router.navigate(['../'], {relativeTo: this._activatedRoute});
+                        }
+
+                        // Toggle the edit mode off
+                        this.toggleEditMode(false);
+                    });
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            }
+        });
 
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
     }
 
     /**

src/app/modules/admin/apps/contacts/list/list.component.html

@@ -42,7 +42,7 @@
                     <div class="flex items-center mt-4 sm:mt-0 md:mt-4">
                         <!-- Search -->
                         <div class="flex-auto">
-                            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full min-w-50">
+                            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
                                 <mat-icon
                                     class="icon-size-5"
                                     matPrefix

src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html

@@ -13,10 +13,11 @@
         <!-- Actions -->
         <div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
             <!-- Search -->
-            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript min-w-50">
+            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64">
                 <mat-icon
+                    class="icon-size-5"
                     matPrefix
-                    [svgIcon]="'heroicons_outline:search'"></mat-icon>
+                    [svgIcon]="'heroicons_solid:search'"></mat-icon>
                 <input
                     matInput
                     [formControl]="searchInputControl"

src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.ts

@@ -6,6 +6,7 @@ import { MatSort } from '@angular/material/sort';
 import { merge, Observable, Subject } from 'rxjs';
 import { debounceTime, map, switchMap, takeUntil } from 'rxjs/operators';
 import { fuseAnimations } from '@fuse/animations';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { InventoryBrand, InventoryCategory, InventoryPagination, InventoryProduct, InventoryTag, InventoryVendor } from 'app/modules/admin/apps/ecommerce/inventory/inventory.types';
 import { InventoryService } from 'app/modules/admin/apps/ecommerce/inventory/inventory.service';
 
@@ -62,6 +63,7 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _formBuilder: FormBuilder,
         private _inventoryService: InventoryService
     )
@@ -525,14 +527,34 @@ export class InventoryListComponent implements OnInit, AfterViewInit, OnDestroy
      */
     deleteSelectedProduct(): void
     {
-        // Get the product object
-        const product = this.selectedProductForm.getRawValue();
+        // Open the confirmation dialog
+        const confirmation = this._fuseConfirmationService.open({
+            title  : 'Delete product',
+            message: 'Are you sure you want to remove this product? This action cannot be undone!',
+            actions: {
+                confirm: {
+                    label: 'Delete'
+                }
+            }
+        });
 
-        // Delete the product on the server
-        this._inventoryService.deleteProduct(product.id).subscribe(() => {
+        // Subscribe to the confirmation dialog closed action
+        confirmation.afterClosed().subscribe((result) => {
 
-            // Close the details
-            this.closeDetails();
+            // If the confirm button pressed...
+            if ( result === 'confirmed' )
+            {
+
+                // Get the product object
+                const product = this.selectedProductForm.getRawValue();
+
+                // Delete the product on the server
+                this._inventoryService.deleteProduct(product.id).subscribe(() => {
+
+                    // Close the details
+                    this.closeDetails();
+                });
+            }
         });
     }
 

src/app/modules/admin/apps/mailbox/compose/compose.component.html

@@ -1,4 +1,4 @@
-<div class="flex flex-col max-w-240 md:min-w-160 -m-6">
+<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
 
     <!-- Header -->
     <div class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary">
@@ -107,14 +107,14 @@
                 <!-- Discard -->
                 <button
                     class="ml-auto sm:ml-0"
-                    mat-button
+                    mat-stroked-button
                     (click)="discard()">
                     Discard
                 </button>
                 <!-- Save as draft -->
                 <button
                     class="sm:mx-3"
-                    mat-button
+                    mat-stroked-button
                     (click)="saveAsDraft()">
                     <span>Save as draft</span>
                 </button>

src/app/modules/admin/apps/scrumboard/board/board.component.html

@@ -85,7 +85,7 @@
                                         <mat-icon
                                             class="icon-size-5"
                                             [svgIcon]="'heroicons_solid:pencil-alt'"></mat-icon>
-                                        Rename List
+                                        Rename list
                                     </button>
                                     <button
                                         mat-menu-item
@@ -93,7 +93,7 @@
                                         <mat-icon
                                             class="icon-size-5"
                                             [svgIcon]="'heroicons_solid:trash'"></mat-icon>
-                                        Delete List
+                                        Delete list
                                     </button>
                                 </mat-menu>
                             </div>

src/app/modules/admin/apps/scrumboard/board/board.component.ts

@@ -3,9 +3,10 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import * as moment from 'moment';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
 import { Board, Card, List } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
-import * as moment from 'moment';
 
 @Component({
     selector       : 'scrumboard-board',
@@ -31,6 +32,7 @@ export class ScrumboardBoardComponent implements OnInit, OnDestroy
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
         private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _scrumboardService: ScrumboardService
     )
     {
@@ -148,8 +150,28 @@ export class ScrumboardBoardComponent implements OnInit, OnDestroy
      */
     deleteList(id): void
     {
-        // Delete the list
-        this._scrumboardService.deleteList(id).subscribe();
+        // Open the confirmation dialog
+        const confirmation = this._fuseConfirmationService.open({
+            title  : 'Delete list',
+            message: 'Are you sure you want to delete this list and its cards? This action cannot be undone!',
+            actions: {
+                confirm: {
+                    label: 'Delete'
+                }
+            }
+        });
+
+        // Subscribe to the confirmation dialog closed action
+        confirmation.afterClosed().subscribe((result) => {
+
+            // If the confirm button pressed...
+            if ( result === 'confirmed' )
+            {
+
+                // Delete the list
+                this._scrumboardService.deleteList(id).subscribe();
+            }
+        });
     }
 
     /**

src/app/modules/admin/apps/tasks/details/details.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { MatDrawerToggleResult } from '@angular/material/sidenav';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil, tap } from 'rxjs/operators';
 import { assign } from 'lodash-es';
@@ -40,6 +41,7 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
         private _activatedRoute: ActivatedRoute,
         private _changeDetectorRef: ChangeDetectorRef,
         private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService,
         private _renderer2: Renderer2,
         private _router: Router,
         private _tasksListComponent: TasksListComponent,
@@ -472,38 +474,58 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
      */
     deleteTask(): void
     {
-        // Get the current task's id
-        const id = this.task.id;
-
-        // Get the next/previous task's id
-        const currentTaskIndex = this.tasks.findIndex(item => item.id === id);
-        const nextTaskIndex = currentTaskIndex + ((currentTaskIndex === (this.tasks.length - 1)) ? -1 : 1);
-        const nextTaskId = (this.tasks.length === 1 && this.tasks[0].id === id) ? null : this.tasks[nextTaskIndex].id;
-
-        // Delete the task
-        this._tasksService.deleteTask(id)
-            .subscribe((isDeleted) => {
-
-                // Return if the task wasn't deleted...
-                if ( !isDeleted )
-                {
-                    return;
+        // Open the confirmation dialog
+        const confirmation = this._fuseConfirmationService.open({
+            title  : 'Delete task',
+            message: 'Are you sure you want to delete this task? This action cannot be undone!',
+            actions: {
+                confirm: {
+                    label: 'Delete'
                 }
+            }
+        });
 
-                // Navigate to the next task if available
-                if ( nextTaskId )
-                {
-                    this._router.navigate(['../', nextTaskId], {relativeTo: this._activatedRoute});
-                }
-                // Otherwise, navigate to the parent
-                else
-                {
-                    this._router.navigate(['../'], {relativeTo: this._activatedRoute});
-                }
-            });
+        // Subscribe to the confirmation dialog closed action
+        confirmation.afterClosed().subscribe((result) => {
 
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
+            // If the confirm button pressed...
+            if ( result === 'confirmed' )
+            {
+
+                // Get the current task's id
+                const id = this.task.id;
+
+                // Get the next/previous task's id
+                const currentTaskIndex = this.tasks.findIndex(item => item.id === id);
+                const nextTaskIndex = currentTaskIndex + ((currentTaskIndex === (this.tasks.length - 1)) ? -1 : 1);
+                const nextTaskId = (this.tasks.length === 1 && this.tasks[0].id === id) ? null : this.tasks[nextTaskIndex].id;
+
+                // Delete the task
+                this._tasksService.deleteTask(id)
+                    .subscribe((isDeleted) => {
+
+                        // Return if the task wasn't deleted...
+                        if ( !isDeleted )
+                        {
+                            return;
+                        }
+
+                        // Navigate to the next task if available
+                        if ( nextTaskId )
+                        {
+                            this._router.navigate(['../', nextTaskId], {relativeTo: this._activatedRoute});
+                        }
+                        // Otherwise, navigate to the parent
+                        else
+                        {
+                            this._router.navigate(['../'], {relativeTo: this._activatedRoute});
+                        }
+                    });
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            }
+        });
     }
 
     /**

src/app/modules/admin/dashboards/analytics/analytics.component.ts

@@ -18,20 +18,11 @@ export class AnalyticsComponent implements OnInit, OnDestroy
     chartImpressions: ApexOptions;
     chartVisits: ApexOptions;
     chartVisitorsVsPageViews: ApexOptions;
-    data: any;
-
-    chartAge: ApexOptions;
-    averagePurchaseValueOptions: ApexOptions;
-    browsersOptions: ApexOptions;
-    channelsOptions: ApexOptions;
-    devicesOptions: ApexOptions;
-    chartGender: ApexOptions;
-    chartLanguage: ApexOptions;
     chartNewVsReturning: ApexOptions;
-    refundsOptions: ApexOptions;
-    totalVisitsOptions: ApexOptions;
-    uniqueVisitorsOptions: ApexOptions;
-    uniquePurchasesOptions: ApexOptions;
+    chartGender: ApexOptions;
+    chartAge: ApexOptions;
+    chartLanguage: ApexOptions;
+    data: any;
 
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 

src/app/modules/admin/dashboards/crypto/crypto.component.html

@@ -0,0 +1,277 @@
+<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
+
+    <mat-drawer-container class="flex-auto h-full">
+
+        <!-- Drawer -->
+        <mat-drawer
+            class="w-80"
+            [autoFocus]="false"
+            [mode]="drawerMode"
+            [opened]="drawerOpened"
+            #matDrawer>
+
+            <div class="flex flex-col flex-auto h-full dark:bg-default">
+
+                <!-- Watchlist -->
+                <div class="flex flex-col flex-0">
+                    <div
+                        class="flex flex-0 items-center p-5 border-b"
+                        *ngFor="let item of data.watchlist">
+                        <div class="flex flex-col flex-auto pr-6">
+                            <div class="flex items-baseline">
+                                <div class="mr-1 font-medium text-md text-secondary">{{item.title}}</div>
+                                <div class="font-medium text-sm text-hint uppercase tracking-wider">({{item.iso}})</div>
+                            </div>
+                            <div class="flex items-end mt-2">
+                                <div class="min-w-20 font-mono text-2xl tracking-tighter leading-none">
+                                    {{item.amount | currency:'USD':'symbol':'1.2-4'}}
+                                </div>
+                                <mat-icon
+                                    class="text-green-500 icon-size-3.5 mx-0.5 mb-px"
+                                    [ngClass]="{'text-green-500': item.trend.dir === 'up', 'text-red-500': item.trend.dir === 'down'}"
+                                    [svgIcon]="item.trend.dir === 'up' ? 'heroicons_solid:arrow-narrow-up' : 'heroicons_solid:arrow-narrow-down'"></mat-icon>
+                                <div
+                                    class="font-mono font-medium text-sm leading-none mb-px"
+                                    [ngClass]="{'text-green-500': item.trend.dir === 'up', 'text-red-500': item.trend.dir === 'down'}">
+                                    {{item.trend.amount}}%
+                                </div>
+                            </div>
+                        </div>
+                        <apx-chart
+                            class="flex flex-auto items-center h-10 overflow-hidden"
+                            [chart]="watchlistChartOptions.chart"
+                            [colors]="item.trend.dir === 'up' ? ['#48BB78']: ['#F56565']"
+                            [series]="item.series"
+                            [stroke]="watchlistChartOptions.stroke"
+                            [tooltip]="watchlistChartOptions.tooltip"
+                            [xaxis]="watchlistChartOptions.xaxis"></apx-chart>
+                    </div>
+                </div>
+
+                <!-- Buy / Sell -->
+                <div class="flex flex-col flex-auto flex-shrink-0 pt-6 bg-gray-50 dark:bg-transparent">
+
+                    <!-- Action -->
+                    <div class="flex flex-col px-6 pb-2">
+                        <mat-form-field>
+                            <mat-label>Action</mat-label>
+                            <span
+                                class="flex items-center justify-center"
+                                matPrefix>
+                                <ng-container *ngIf="buySellSelect.value === 'buy'">
+                                    <mat-icon
+                                        class="icon-size-5"
+                                        [svgIcon]="'heroicons_solid:download'"></mat-icon>
+                                </ng-container>
+                                <ng-container *ngIf="buySellSelect.value === 'sell'">
+                                    <mat-icon
+                                        class="icon-size-5"
+                                        [svgIcon]="'heroicons_solid:upload'"></mat-icon>
+                                </ng-container>
+                            </span>
+                            <mat-select
+                                [value]="'buy'"
+                                #buySellSelect="matSelect">
+                                <mat-option [value]="'buy'">Buy</mat-option>
+                                <mat-option [value]="'sell'">Sell</mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+
+                    <!-- Wallet -->
+                    <div class="flex flex-col px-6 pb-2">
+                        <mat-form-field class="w-full">
+                            <mat-label>Wallet</mat-label>
+                            <mat-select
+                                [value]="'btc'"
+                                #walletSelector="matSelect">
+                                <mat-select-trigger>
+                                    <span class="flex items-center">
+                                        <span>{{walletSelector.triggerValue}}</span>
+                                        <span class="mx-1 text-hint">-</span>
+                                        <span class="flex items-center font-mono">
+                                            <span>{{data.wallets[walletSelector.value]}}</span>
+                                            <span class="ml-1">{{walletSelector.value | uppercase}}</span>
+                                        </span>
+                                    </span>
+                                </mat-select-trigger>
+                                <mat-option [value]="'btc'">Bitcoin</mat-option>
+                                <mat-option [value]="'eth'">Ethereum</mat-option>
+                                <mat-option [value]="'bch'">Bitcoin Cash</mat-option>
+                                <mat-option [value]="'xrp'">XRP</mat-option>
+                            </mat-select>
+                            <mat-hint class="flex items-center">
+                                <span class="mr-1">USD:</span>
+                                <span class="font-mono font-medium text-normal">
+                                    {{data.wallets[walletSelector.value] * data.prices[walletSelector.value] | currency:'USD'}}
+                                </span>
+                            </mat-hint>
+                        </mat-form-field>
+                    </div>
+
+                    <!-- Buy form -->
+                    <form
+                        class="flex flex-col px-6"
+                        *ngIf="buySellSelect.value === 'buy'">
+                        <mat-form-field class="w-full">
+                            <mat-label>Amount</mat-label>
+                            <input
+                                matInput
+                                autocomplete="off"
+                                #buyAmount>
+                            <mat-select
+                                [value]="'coin'"
+                                matSuffix
+                                #buyType="matSelect">
+                                <mat-option [value]="'coin'">{{walletSelector.value | uppercase}}</mat-option>
+                                <mat-option [value]="'usd'">USD</mat-option>
+                            </mat-select>
+                            <span
+                                matPrefix
+                                *ngIf="buyType.value === 'usd'">
+                                $
+                            </span>
+                            <mat-hint class="flex items-center">
+                                <ng-container *ngIf="buyType.value === 'coin'">
+                                    <span class="mr-1">It will cost:</span>
+                                    <span class="font-mono font-medium text-normal">
+                                        {{buyAmount.value * data.prices[walletSelector.value] | currency:'USD':'symbol':'1.2-4'}}
+                                    </span>
+                                </ng-container>
+                                <ng-container *ngIf="buyType.value === 'usd'">
+                                    <span class="mr-1">You will receive:</span>
+                                    <span class="font-mono font-medium text-normal">
+                                        {{buyAmount.value / data.prices[walletSelector.value] | number:'1.2-6'}} {{walletSelector.value | uppercase}}
+                                    </span>
+                                </ng-container>
+                            </mat-hint>
+                        </mat-form-field>
+                        <button
+                            class="mt-4 mb-8"
+                            mat-flat-button
+                            [color]="'primary'">
+                            BUY
+                        </button>
+                    </form>
+
+                    <!-- Sell form -->
+                    <form
+                        class="flex flex-col px-6"
+                        *ngIf="buySellSelect.value === 'sell'">
+                        <mat-form-field class="w-full">
+                            <mat-label>Amount</mat-label>
+                            <input
+                                matInput
+                                autocomplete="off"
+                                #sellAmount>
+                            <mat-select
+                                [value]="'coin'"
+                                matSuffix
+                                #sellType="matSelect">
+                                <mat-option [value]="'coin'">{{walletSelector.value | uppercase}}</mat-option>
+                                <mat-option [value]="'usd'">USD</mat-option>
+                            </mat-select>
+                            <span
+                                matPrefix
+                                *ngIf="sellType.value === 'usd'">
+                                $
+                            </span>
+                            <mat-hint class="flex items-center">
+                                <ng-container *ngIf="sellType.value === 'coin'">
+                                    <span class="mr-1">You will receive:</span>
+                                    <span class="font-mono font-medium text-normal">
+                                        {{sellAmount.value * data.prices[walletSelector.value] | currency:'USD':'symbol':'1.2-4'}}
+                                    </span>
+                                </ng-container>
+                                <ng-container *ngIf="sellType.value === 'usd'">
+                                    <span class="mr-1">You will sell:</span>
+                                    <span class="font-mono font-medium text-normal">
+                                        {{sellAmount.value / data.prices[walletSelector.value] | number:'1.2-6'}} {{walletSelector.value | uppercase}}
+                                    </span>
+                                </ng-container>
+                            </mat-hint>
+                        </mat-form-field>
+                        <button
+                            class="mt-4 mb-8"
+                            mat-flat-button
+                            [color]="'primary'">
+                            SELL
+                        </button>
+                    </form>
+                </div>
+
+            </div>
+
+        </mat-drawer>
+
+        <!-- Content -->
+        <mat-drawer-content class="flex flex-col">
+
+            <!-- BTC Price -->
+            <div class="flex flex-col flex-auto min-h-full bg-card dark:bg-default">
+                <div class="flex flex-wrap items-center pl-4 pr-6 py-3 md:pl-6 border-b">
+                    <button
+                        class="mr-6 lg:hidden"
+                        mat-icon-button
+                        (click)="matDrawer.toggle()">
+                        <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
+                    </button>
+                    <div class="flex flex-col flex-auto my-3 mr-6">
+                        <div class="flex items-center">
+                            <div class="font-medium text-2xl text-secondary mr-2">Bitcoin</div>
+                            <div class="font-medium text-lg text-hint tracking-wider">(BTC)</div>
+                        </div>
+                        <div class="flex items-end mt-1">
+                            <div class="mr-2 font-mono text-3xl leading-none tracking-tight">{{data.btc.amount | currency:'USD':'symbol':'1.2-2'}}</div>
+                            <mat-icon
+                                class="text-green-500 icon-size-5 mr-0.5 mb-px"
+                                [ngClass]="{'text-green-500': data.btc.trend.dir === 'up', 'text-red-500': data.btc.trend.dir === 'down'}"
+                                [svgIcon]="data.btc.trend.dir === 'up' ? 'heroicons_solid:arrow-narrow-up' : 'heroicons_solid:arrow-narrow-down'"></mat-icon>
+                            <div
+                                class="font-mono font-medium text-lg leading-none mb-px"
+                                [ngClass]="{'text-green-500': data.btc.trend.dir === 'up', 'text-red-500': data.btc.trend.dir === 'down'}">
+                                {{data.btc.trend.amount}}%
+                            </div>
+                        </div>
+                    </div>
+                    <div class="hidden sm:flex items-center my-3">
+                        <div class="p-4 leading-none rounded-l-xl border border-r-0">
+                            <div class="text-sm font-medium text-secondary">Market Cap</div>
+                            <div class="mt-2 font-mono text-xl">{{(data.btc.marketCap / 1000000000) | number: '1.0-2' | currency}}B</div>
+                        </div>
+                        <div class="p-4 leading-none border border-r-0">
+                            <div class="text-sm font-medium text-secondary">Volume</div>
+                            <div class="mt-2 font-mono text-xl">{{(data.btc.volume / 1000000000) | number: '1.0-2' | currency}}B</div>
+                        </div>
+                        <div class="p-4 leading-none border border-r-0">
+                            <div class="text-sm font-medium text-secondary">Supply</div>
+                            <div class="mt-2 font-mono text-xl">{{(data.btc.supply / 1000000) | number: '1.0-2'}}M</div>
+                        </div>
+                        <div class="p-4 leading-none rounded-r-xl border">
+                            <div class="text-sm font-medium text-secondary">All Time High</div>
+                            <div class="mt-2 font-mono text-xl">{{data.btc.allTimeHigh | currency:'USD'}}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="relative flex flex-auto bg-gray-50 dark:bg-transparent">
+                    <apx-chart
+                        class="relative w-full h-160 md:absolute md:inset-0 md:h-auto overflow-hidden"
+                        [chart]="btcOptions.chart"
+                        [colors]="btcOptions.colors"
+                        [dataLabels]="btcOptions.dataLabels"
+                        [grid]="btcOptions.grid"
+                        [legend]="btcOptions.legend"
+                        [series]="btcOptions.series"
+                        [stroke]="btcOptions.stroke"
+                        [tooltip]="btcOptions.tooltip"
+                        [xaxis]="btcOptions.xaxis"
+                        [yaxis]="btcOptions.yaxis"
+                        #btcChartComponent></apx-chart>
+                </div>
+            </div>
+
+        </mat-drawer-content>
+
+    </mat-drawer-container>
+
+</div>

src/app/modules/admin/dashboards/crypto/crypto.component.ts

@@ -0,0 +1,238 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import * as moment from 'moment';
+import { ApexOptions, ChartComponent } from 'ng-apexcharts';
+import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
+import { CryptoService } from 'app/modules/admin/dashboards/crypto/crypto.service';
+
+@Component({
+    selector       : 'crypto',
+    templateUrl    : './crypto.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CryptoComponent implements OnInit, OnDestroy
+{
+    @ViewChild('btcChartComponent') btcChartComponent: ChartComponent;
+    appConfig: any;
+    btcOptions: ApexOptions = {};
+    data: any;
+    drawerMode: 'over' | 'side' = 'side';
+    drawerOpened: boolean = true;
+    watchlistChartOptions: ApexOptions = {};
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _cryptoService: CryptoService,
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _fuseMediaWatcherService: FuseMediaWatcherService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Subscribe to media changes
+        this._fuseMediaWatcherService.onMediaChange$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(({matchingAliases}) => {
+
+                // Set the drawerMode and drawerOpened if 'lg' breakpoint is active
+                if ( matchingAliases.includes('lg') )
+                {
+                    this.drawerMode = 'side';
+                    this.drawerOpened = true;
+                }
+                else
+                {
+                    this.drawerMode = 'over';
+                    this.drawerOpened = false;
+                }
+
+                // Mark for check
+                this._changeDetectorRef.markForCheck();
+            });
+
+        // Get the data
+        this._cryptoService.data$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((data) => {
+
+                // Store the data
+                this.data = data;
+
+                // Prepare the chart data
+                this._prepareChartData();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Prepare the chart data from the data
+     *
+     * @private
+     */
+    private _prepareChartData(): void
+    {
+        // BTC
+        this.btcOptions = {
+            chart     : {
+                animations: {
+                    enabled: false
+                },
+                fontFamily: 'inherit',
+                foreColor : 'inherit',
+                width     : '100%',
+                height    : '100%',
+                type      : 'line',
+                toolbar   : {
+                    show: false
+                },
+                zoom      : {
+                    enabled: false
+                }
+            },
+            colors    : ['#5A67D8'],
+            dataLabels: {
+                enabled: false
+            },
+            grid      : {
+                borderColor    : 'var(--fuse-border)',
+                position       : 'back',
+                show           : true,
+                strokeDashArray: 6,
+                xaxis          : {
+                    lines: {
+                        show: true
+                    }
+                },
+                yaxis          : {
+                    lines: {
+                        show: true
+                    }
+                }
+            },
+            legend    : {
+                show: false
+            },
+            series    : this.data.btc.price.series,
+            stroke    : {
+                width: 2,
+                curve: 'straight'
+            },
+            tooltip   : {
+                shared: true,
+                theme : 'dark',
+                y     : {
+                    formatter: (value: number): string => '$' + value.toFixed(2)
+                }
+            },
+            xaxis     : {
+                type      : 'numeric',
+                crosshairs: {
+                    show    : true,
+                    position: 'back',
+                    fill    : {
+                        type : 'color',
+                        color: 'var(--fuse-border)'
+                    },
+                    width   : 3,
+                    stroke  : {
+                        dashArray: 0,
+                        width    : 0
+                    },
+                    opacity : 0.9
+                },
+                tickAmount: 8,
+                axisTicks : {
+                    show : true,
+                    color: 'var(--fuse-border)'
+                },
+                axisBorder: {
+                    show: false
+                },
+                tooltip   : {
+                    enabled: false
+                },
+                labels    : {
+                    show                 : true,
+                    trim                 : false,
+                    rotate               : 0,
+                    minHeight            : 40,
+                    hideOverlappingLabels: true,
+                    formatter            : (value): string => moment().subtract(Math.abs(parseInt(value, 10)), 'minutes').format('HH:mm'),
+                    style                : {
+                        colors: 'currentColor'
+                    }
+                }
+            },
+            yaxis     : {
+                axisTicks     : {
+                    show : true,
+                    color: 'var(--fuse-border)'
+                },
+                axisBorder    : {
+                    show: false
+                },
+                forceNiceScale: true,
+                labels        : {
+                    minWidth : 40,
+                    formatter: (value: number): string => '$' + value.toFixed(0),
+                    style    : {
+                        colors: 'currentColor'
+                    }
+                }
+            }
+        };
+
+        // Watchlist options
+        this.watchlistChartOptions = {
+            chart  : {
+                animations: {
+                    enabled: false
+                },
+                width     : '100%',
+                height    : '100%',
+                type      : 'line',
+                sparkline : {
+                    enabled: true
+                }
+            },
+            colors : ['#A0AEC0'],
+            stroke : {
+                width: 2,
+                curve: 'smooth'
+            },
+            tooltip: {
+                enabled: false
+            },
+            xaxis  : {
+                type: 'category'
+            }
+        };
+    }
+}

src/app/modules/admin/dashboards/crypto/crypto.module.ts

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { SharedModule } from 'app/shared/shared.module';
+import { CryptoComponent } from 'app/modules/admin/dashboards/crypto/crypto.component';
+import { cryptoRoutes } from 'app/modules/admin/dashboards/crypto/crypto.routing';
+
+@NgModule({
+    declarations: [
+        CryptoComponent
+    ],
+    imports     : [
+        RouterModule.forChild(cryptoRoutes),
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatMenuModule,
+        MatSelectModule,
+        MatSidenavModule,
+        MatSortModule,
+        MatTableModule,
+        MatTabsModule,
+        NgApexchartsModule,
+        SharedModule
+    ]
+})
+export class CryptoModule
+{
+}

src/app/modules/admin/dashboards/crypto/crypto.resolvers.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { CryptoService } from 'app/modules/admin/dashboards/crypto/crypto.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class CryptoResolver implements Resolve<any>
+{
+    /**
+     * Constructor
+     */
+    constructor(private _cryptoService: CryptoService)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Resolver
+     *
+     * @param route
+     * @param state
+     */
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>
+    {
+        return this._cryptoService.getData();
+    }
+}

src/app/modules/admin/dashboards/crypto/crypto.routing.ts

@@ -0,0 +1,13 @@
+import { Route } from '@angular/router';
+import { CryptoComponent } from 'app/modules/admin/dashboards/crypto/crypto.component';
+import { CryptoResolver } from 'app/modules/admin/dashboards/crypto/crypto.resolvers';
+
+export const cryptoRoutes: Route[] = [
+    {
+        path     : '',
+        component: CryptoComponent,
+        resolve  : {
+            data: CryptoResolver
+        }
+    }
+];

src/app/modules/admin/dashboards/crypto/crypto.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class CryptoService
+{
+    private _data: BehaviorSubject<any> = new BehaviorSubject(null);
+
+    /**
+     * Constructor
+     */
+    constructor(private _httpClient: HttpClient)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Getter for data
+     */
+    get data$(): Observable<any>
+    {
+        return this._data.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get data
+     */
+    getData(): Observable<any>
+    {
+        return this._httpClient.get('api/dashboards/crypto').pipe(
+            tap((response: any) => {
+                this._data.next(response);
+            })
+        );
+    }
+}

src/app/modules/admin/dashboards/finance/finance.component.html

@@ -0,0 +1,526 @@
+<div class="flex flex-col flex-auto w-full">
+
+    <div class="flex flex-wrap w-full max-w-screen-xl mx-auto p-6 md:p-8">
+
+        <!-- Title and action buttons -->
+        <div class="flex items-center justify-between w-full">
+            <div>
+                <h2 class="text-3xl font-semibold tracking-tight leading-8">Finance dashboard</h2>
+                <div class="font-medium tracking-tight text-secondary">Keep track of your financial status</div>
+            </div>
+            <div class="flex items-center ml-6">
+                <button
+                    class="hidden sm:inline-flex"
+                    mat-stroked-button>
+                    <mat-icon
+                        class="icon-size-5"
+                        [svgIcon]="'heroicons_solid:document-report'"></mat-icon>
+                    <span class="ml-2">Reports</span>
+                </button>
+                <button
+                    class="hidden sm:inline-flex ml-3"
+                    mat-stroked-button>
+                    <mat-icon
+                        class="icon-size-5"
+                        [svgIcon]="'heroicons_solid:cog'"></mat-icon>
+                    <span class="ml-2">Settings</span>
+                </button>
+                <button
+                    class="hidden sm:inline-flex ml-3"
+                    mat-flat-button
+                    [color]="'primary'">
+                    <mat-icon
+                        class="icon-size-5"
+                        [svgIcon]="'heroicons_solid:save'"></mat-icon>
+                    <span class="ml-2">Export</span>
+                </button>
+
+                <!-- Actions menu (visible on xs) -->
+                <div class="sm:hidden">
+                    <button
+                        [matMenuTriggerFor]="actionsMenu"
+                        mat-icon-button>
+                        <mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
+                    </button>
+                    <mat-menu #actionsMenu="matMenu">
+                        <button mat-menu-item>Export</button>
+                        <button mat-menu-item>Reports</button>
+                        <button mat-menu-item>Settings</button>
+                    </mat-menu>
+                </div>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 xl:grid-cols-2 gap-8 w-full mt-8">
+            <div class="grid gap-8 sm:grid-flow-col xl:grid-flow-row">
+                <!-- Previous statement -->
+                <div class="relative flex flex-col flex-auto p-6 pr-3 pb-3 bg-card rounded-2xl shadow overflow-hidden">
+                    <div class="absolute bottom-0 right-0 w-24 h-24 -m-6">
+                        <mat-icon
+                            class="icon-size-24 opacity-25 text-green-500 dark:text-green-400"
+                            [svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="flex flex-col">
+                            <div class="text-lg font-medium tracking-tight leading-6 truncate">Previous Statement</div>
+                            <div class="text-green-600 font-medium text-sm">
+                                Paid on {{data.previousStatement.date}}
+                            </div>
+                        </div>
+                        <div class="ml-auto -mt-2">
+                            <button
+                                mat-icon-button
+                                [matMenuTriggerFor]="previousStatementMenu">
+                                <mat-icon
+                                    class="icon-size-5"
+                                    [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
+                            </button>
+                            <mat-menu #previousStatementMenu="matMenu">
+                                <button mat-menu-item>
+                                    <span class="flex items-center">
+                                        <mat-icon
+                                            class="icon-size-5 mr-3"
+                                            [svgIcon]="'heroicons_solid:credit-card'"></mat-icon>
+                                        <span>View statement</span>
+                                    </span>
+                                </button>
+                                <button mat-menu-item>
+                                    <span class="flex items-center">
+                                        <mat-icon
+                                            class="icon-size-5 mr-3"
+                                            [svgIcon]="'heroicons_solid:cash'"></mat-icon>
+                                        <span>Spending breakdown</span>
+                                    </span>
+                                </button>
+                                <button mat-menu-item>
+                                    <span class="flex items-center">
+                                        <mat-icon
+                                            class="icon-size-5 mr-3"
+                                            [svgIcon]="'heroicons_solid:receipt-tax'"></mat-icon>
+                                        <span>Tax breakdown</span>
+                                    </span>
+                                </button>
+                                <mat-divider class="my-2"></mat-divider>
+                                <button mat-menu-item>
+                                    <span class="flex items-center">
+                                        <mat-icon
+                                            class="icon-size-5 mr-3"
+                                            [svgIcon]="'heroicons_solid:printer'"></mat-icon>
+                                        <span>Print statement</span>
+                                    </span>
+                                </button>
+                                <button mat-menu-item>
+                                    <span class="flex items-center">
+                                        <mat-icon
+                                            class="icon-size-5 mr-3"
+                                            [svgIcon]="'heroicons_solid:mail'"></mat-icon>
+                                        <span>Email statement</span>
+                                    </span>
+                                </button>
+                            </mat-menu>
+                        </div>
+                    </div>
+                    <div class="flex flex-row flex-wrap mt-4 -mx-6">
+                        <div class="flex flex-col mx-6 my-3">
+                            <div class="text-sm font-medium leading-none text-secondary">Card Limit</div>
+                            <div class="mt-2 font-medium text-3xl leading-none">{{data.previousStatement.limit | currency:'USD'}}</div>
+                        </div>
+                        <div class="flex flex-col mx-6 my-3">
+                            <div class="text-sm font-medium leading-none text-secondary">Spent</div>
+                            <div class="mt-2 font-medium text-3xl leading-none">{{data.previousStatement.spent | currency:'USD'}}</div>
+                        </div>
+                        <div class="flex flex-col mx-6 my-3">
+                            <div class="text-sm font-medium leading-none text-secondary">Minimum</div>
+                            <div class="mt-2 font-medium text-3xl leading-none">{{data.previousStatement.minimum | currency:'USD'}}</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Current statement -->
+                <div class="relative flex flex-col flex-auto p-6 pr-3 pb-3 bg-card rounded-2xl shadow overflow-hidden">
+                    <div class="absolute bottom-0 right-0 w-24 h-24 -m-6">
+                        <mat-icon
+                            class="icon-size-24 opacity-25 text-red-500 dark:text-red-400"
+                            [svgIcon]="'heroicons_outline:exclamation-circle'"></mat-icon>
+                    </div>
+                    <div class="flex items-center">
+                        <div class="flex flex-col">
+                            <div class="text-lg font-medium tracking-tight leading-6 truncate">Current Statement</div>
+                            <div class="text-red-600 font-medium text-sm">
+                                Must be paid before {{data.currentStatement.date}}
+                            </div>
+                        </div>
+                        <div class="ml-auto -mt-2">
+                            <button
+                                mat-icon-button
+                                [matMenuTriggerFor]="currentStatementMenu">
+                                <mat-icon
+                                    class="icon-size-5"
+                                    [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
+                            </button>
+                            <mat-menu #currentStatementMenu="matMenu">
+                                <button mat-menu-item>
+                                    <span class="flex items-center">
+                                        <mat-icon
+                                            class="icon-size-5 mr-3"
+                                            [svgIcon]="'heroicons_solid:credit-card'"></mat-icon>
+                                        <span>View statement</span>
+                                    </span>
+                                </button>
+                                <button mat-menu-item>
+                                    <span class="flex items-center">
+                                        <mat-icon
+                                            class="icon-size-5 mr-3"
+                                            [svgIcon]="'heroicons_solid:cash'"></mat-icon>
+                                        <span>Spending breakdown</span>
+                                    </span>
+                                </button>
+                                <button mat-menu-item>
+                                    <span class="flex items-center">
+                                        <mat-icon
+                                            class="icon-size-5 mr-3"
+                                            [svgIcon]="'heroicons_solid:receipt-tax'"></mat-icon>
+                                        <span>Tax breakdown</span>
+                                    </span>
+                                </button>
+                                <mat-divider class="my-2"></mat-divider>
+                                <button mat-menu-item>
+                                    <span class="flex items-center">
+                                        <mat-icon
+                                            class="icon-size-5 mr-3"
+                                            [svgIcon]="'heroicons_solid:printer'"></mat-icon>
+                                        <span>Print statement</span>
+                                    </span>
+                                </button>
+                                <button mat-menu-item>
+                                    <span class="flex items-center">
+                                        <mat-icon
+                                            class="icon-size-5 mr-3"
+                                            [svgIcon]="'heroicons_solid:mail'"></mat-icon>
+                                        <span>Email statement</span>
+                                    </span>
+                                </button>
+                            </mat-menu>
+                        </div>
+                    </div>
+                    <div class="flex flex-row flex-wrap mt-4 -mx-6">
+                        <div class="flex flex-col mx-6 my-3">
+                            <div class="text-sm font-medium leading-none text-secondary">Card Limit</div>
+                            <div class="mt-2 font-medium text-3xl leading-none">{{data.currentStatement.limit | currency:'USD'}}</div>
+                        </div>
+                        <div class="flex flex-col mx-6 my-3">
+                            <div class="text-sm font-medium leading-none text-secondary">Spent</div>
+                            <div class="mt-2 font-medium text-3xl leading-none">{{data.currentStatement.spent | currency:'USD'}}</div>
+                        </div>
+                        <div class="flex flex-col mx-6 my-3">
+                            <div class="text-sm font-medium leading-none text-secondary">Minimum</div>
+                            <div class="mt-2 font-medium text-3xl leading-none">{{data.currentStatement.minimum | currency:'USD'}}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Account balance -->
+            <div class="flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
+                <div class="flex flex-col p-6 pb-4">
+                    <div class="flex items-center justify-between">
+                        <div class="flex flex-col">
+                            <div class="mr-4 text-lg font-medium tracking-tight leading-6 truncate">Account Balance</div>
+                            <div class="text-secondary font-medium">Monthly balance growth and avg. monthly income</div>
+                        </div>
+                        <div class="ml-2">
+                            <button
+                                class="h-6 min-h-6 px-2 rounded-full bg-hover"
+                                mat-button
+                                [matMenuTriggerFor]="accountBalanceMenu">
+                                <span class="font-medium text-sm text-secondary">12 months</span>
+                            </button>
+                            <mat-menu #accountBalanceMenu="matMenu">
+                                <button mat-menu-item>3 months</button>
+                                <button mat-menu-item>6 months</button>
+                                <button mat-menu-item>9 months</button>
+                                <button mat-menu-item>12 months</button>
+                            </mat-menu>
+                        </div>
+                    </div>
+                    <div class="flex items-start mt-6 mr-2">
+                        <div class="flex flex-col">
+                            <div class="font-semibold text-3xl md:text-5xl tracking-tighter">{{data.accountBalance.growRate}}%</div>
+                            <div class="font-medium text-sm text-secondary leading-none">Average Monthly Growth</div>
+                        </div>
+                        <div class="flex flex-col ml-8 md:ml-16">
+                            <div class="font-semibold text-3xl md:text-5xl tracking-tighter">{{data.accountBalance.ami | currency:'USD'}}</div>
+                            <div class="font-medium text-sm text-secondary leading-none">Average Monthly Income</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col flex-auto">
+                    <apx-chart
+                        class="flex-auto w-full h-full"
+                        [chart]="accountBalanceOptions.chart"
+                        [colors]="accountBalanceOptions.colors"
+                        [fill]="accountBalanceOptions.fill"
+                        [series]="accountBalanceOptions.series"
+                        [stroke]="accountBalanceOptions.stroke"
+                        [tooltip]="accountBalanceOptions.tooltip"
+                        [xaxis]="accountBalanceOptions.xaxis"></apx-chart>
+                </div>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 xl:grid-cols-3 gap-8 w-full mt-8">
+            <!-- Recent transactions table -->
+            <div class="xl:col-span-2 flex flex-col flex-auto bg-card shadow rounded-2xl overflow-hidden">
+                <div class="p-6">
+                    <div class="mr-4 text-lg font-medium tracking-tight leading-6 truncate">Recent transactions</div>
+                    <div class="text-secondary font-medium">1 pending, 4 completed</div>
+                </div>
+                <div class="overflow-x-auto mx-6">
+                    <table
+                        class="w-full bg-transparent"
+                        mat-table
+                        matSort
+                        [dataSource]="recentTransactionsDataSource"
+                        [trackBy]="trackByFn"
+                        #recentTransactionsTable>
+
+                        <!-- Transaction ID -->
+                        <ng-container matColumnDef="transactionId">
+                            <th
+                                mat-header-cell
+                                mat-sort-header
+                                *matHeaderCellDef>
+                                Transaction ID
+                            </th>
+                            <td
+                                mat-cell
+                                *matCellDef="let transaction">
+                                <span class="pr-6 font-medium text-sm text-secondary whitespace-nowrap">
+                                    {{transaction.transactionId}}
+                                </span>
+                            </td>
+                        </ng-container>
+
+                        <!-- Date -->
+                        <ng-container matColumnDef="date">
+                            <th
+                                mat-header-cell
+                                mat-sort-header
+                                *matHeaderCellDef>
+                                Date
+                            </th>
+                            <td
+                                mat-cell
+                                *matCellDef="let transaction">
+                                <span class="pr-6 whitespace-nowrap">
+                                    {{transaction.date | date:'MMM dd, y'}}
+                                </span>
+                            </td>
+                        </ng-container>
+
+                        <!-- Name -->
+                        <ng-container matColumnDef="name">
+                            <th
+                                mat-header-cell
+                                mat-sort-header
+                                *matHeaderCellDef>
+                                Name
+                            </th>
+                            <td
+                                mat-cell
+                                *matCellDef="let transaction">
+                                <span class="pr-6 whitespace-nowrap">
+                                    {{transaction.name}}
+                                </span>
+                            </td>
+                        </ng-container>
+
+                        <!-- Amount -->
+                        <ng-container matColumnDef="amount">
+                            <th
+                                mat-header-cell
+                                mat-sort-header
+                                *matHeaderCellDef>
+                                Amount
+                            </th>
+                            <td
+                                mat-cell
+                                *matCellDef="let transaction">
+                                <span class="pr-6 font-medium whitespace-nowrap">
+                                    {{transaction.amount | currency:'USD'}}
+                                </span>
+                            </td>
+                        </ng-container>
+
+                        <!-- Status -->
+                        <ng-container matColumnDef="status">
+                            <th
+                                mat-header-cell
+                                mat-sort-header
+                                *matHeaderCellDef>
+                                Status
+                            </th>
+                            <td
+                                mat-cell
+                                *matCellDef="let transaction">
+                                <span
+                                    class="inline-flex items-center font-bold text-xs px-2.5 py-0.5 rounded-full tracking-wide uppercase"
+                                    [ngClass]="{'bg-red-200 text-red-800 dark:bg-red-600 dark:text-red-50': transaction.status === 'pending',
+                                                'bg-green-200 text-green-800 dark:bg-green-600 dark:text-green-50': transaction.status === 'completed'}">
+                                    <span class="leading-relaxed whitespace-nowrap">{{transaction.status}}</span>
+                                </span>
+                            </td>
+                        </ng-container>
+
+                        <!-- Footer -->
+                        <ng-container matColumnDef="recentOrdersTableFooter">
+                            <td
+                                class="py-6 px-0 border-0"
+                                mat-footer-cell
+                                *matFooterCellDef
+                                colspan="6">
+                                <button mat-stroked-button>See all transactions</button>
+                            </td>
+                        </ng-container>
+
+                        <tr
+                            mat-header-row
+                            *matHeaderRowDef="recentTransactionsTableColumns"></tr>
+                        <tr
+                            class="order-row h-16"
+                            mat-row
+                            *matRowDef="let row; columns: recentTransactionsTableColumns;"></tr>
+                        <tr
+                            class="h-16 border-0"
+                            mat-footer-row
+                            *matFooterRowDef="['recentOrdersTableFooter']"></tr>
+                    </table>
+                </div>
+            </div>
+
+            <!-- Budget -->
+            <div class="flex flex-col flex-auto p-6 bg-card rounded-2xl shadow">
+                <div class="flex items-center">
+                    <div class="flex flex-col">
+                        <div class="mr-4 text-lg font-medium tracking-tight leading-6 truncate">Budget</div>
+                        <div class="text-secondary font-medium">Monthly budget summary</div>
+                    </div>
+                    <div class="ml-auto -mt-2 -mr-2">
+                        <button
+                            mat-icon-button
+                            [matMenuTriggerFor]="budgetMenu">
+                            <mat-icon
+                                class="icon-size-5"
+                                [svgIcon]="'heroicons_solid:dots-vertical'"></mat-icon>
+                        </button>
+                        <mat-menu #budgetMenu="matMenu">
+                            <button mat-menu-item>Expenses breakdown</button>
+                            <button mat-menu-item>Savings breakdown</button>
+                            <button mat-menu-item>Bills breakdown</button>
+                            <mat-divider class="my-2"></mat-divider>
+                            <button mat-menu-item>
+                                <span class="flex items-center">
+                                    <mat-icon
+                                        class="icon-size-5 mr-3"
+                                        [svgIcon]="'heroicons_solid:printer'"></mat-icon>
+                                    <span>Print budget summary</span>
+                                </span>
+                            </button>
+                            <button mat-menu-item>
+                                <span class="flex items-center">
+                                    <mat-icon
+                                        class="icon-size-5 mr-3"
+                                        [svgIcon]="'heroicons_solid:mail'"></mat-icon>
+                                    <span>Email budget summary</span>
+                                </span>
+                            </button>
+                        </mat-menu>
+                    </div>
+                </div>
+                <div class="mt-6">
+                    Last month; you had <strong>223</strong> expense transactions, <strong>12</strong> savings entries and <strong>4</strong> bills.
+                </div>
+                <div class="my-8 space-y-8">
+                    <div class="flex flex-col">
+                        <div class="flex items-center">
+                            <div class="flex items-center justify-center w-14 h-14 rounded bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50">
+                                <mat-icon
+                                    class="text-current"
+                                    [svgIcon]="'heroicons_outline:credit-card'"></mat-icon>
+                            </div>
+                            <div class="flex-auto ml-4 leading-none">
+                                <div class="text-sm font-medium text-secondary">Expenses</div>
+                                <div class="mt-2 font-medium text-2xl">{{data.budget.expenses | currency:'USD'}}</div>
+                                <mat-progress-bar
+                                    class="mt-3 rounded-full"
+                                    [color]="'warn'"
+                                    [mode]="'determinate'"
+                                    [value]="(data.budget.expenses  * 100) / data.budget.expensesLimit"></mat-progress-bar>
+                            </div>
+                            <div class="flex items-end justify-end min-w-18 mt-auto ml-6">
+                                <div class="text-lg leading-none">2.6%</div>
+                                <mat-icon
+                                    class="text-green-600 icon-size-4 ml-1"
+                                    [svgIcon]="'heroicons_solid:arrow-narrow-down'"></mat-icon>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="flex items-center">
+                            <div class="flex items-center justify-center w-14 h-14 rounded bg-indigo-100 text-indigo-800 dark:bg-indigo-600 dark:text-indigo-50">
+                                <mat-icon
+                                    class="text-current"
+                                    [svgIcon]="'heroicons_outline:cash'"></mat-icon>
+                            </div>
+                            <div class="flex-auto ml-4 leading-none">
+                                <div class="text-sm font-medium text-secondary">Savings</div>
+                                <div class="mt-2 font-medium text-2xl">{{data.budget.savings | currency:'USD'}}</div>
+                                <mat-progress-bar
+                                    class="mt-3 rounded-full"
+                                    [mode]="'determinate'"
+                                    [value]="(data.budget.savings  * 100) / data.budget.savingsGoal"></mat-progress-bar>
+                            </div>
+                            <div class="flex items-end justify-end min-w-18 mt-auto ml-6">
+                                <div class="text-lg leading-none">12.7%</div>
+                                <mat-icon
+                                    class="text-red-600 icon-size-4 ml-1"
+                                    [svgIcon]="'heroicons_solid:arrow-narrow-up'"></mat-icon>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col">
+                        <div class="flex items-center">
+                            <div class="flex items-center justify-center w-14 h-14 rounded bg-teal-100 text-teal-800 dark:bg-teal-600 dark:text-teal-50">
+                                <mat-icon
+                                    class="text-current"
+                                    [svgIcon]="'heroicons_outline:light-bulb'"></mat-icon>
+                            </div>
+                            <div class="flex-auto ml-4 leading-none">
+                                <div class="text-sm font-medium text-secondary">Bills</div>
+                                <div class="mt-2 font-medium text-2xl">{{data.budget.bills | currency:'USD'}}</div>
+                                <mat-progress-bar
+                                    class="mt-3 rounded-full"
+                                    [mode]="'determinate'"
+                                    [value]="(data.budget.bills  * 100) / data.budget.billsLimit"></mat-progress-bar>
+                            </div>
+                            <div class="flex items-end justify-end min-w-18 mt-auto ml-6">
+                                <div class="text-lg leading-none">105.7%</div>
+                                <mat-icon
+                                    class="text-red-600 icon-size-4 ml-1"
+                                    [svgIcon]="'heroicons_solid:arrow-narrow-up'"></mat-icon>
+                            </div>
+                        </div>
+                        <div class="mt-3 text-md text-secondary">Exceeded your personal limit! Be careful next month.</div>
+                    </div>
+                </div>
+                <div class="flex items-center mt-auto">
+                    <button
+                        class="mt-2"
+                        mat-stroked-button>
+                        Download Summary
+                    </button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+</div>

src/app/modules/admin/dashboards/finance/finance.component.ts

@@ -0,0 +1,146 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { ApexOptions } from 'ng-apexcharts';
+import { FinanceService } from 'app/modules/admin/dashboards/finance/finance.service';
+
+@Component({
+    selector       : 'finance',
+    templateUrl    : './finance.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class FinanceComponent implements OnInit, AfterViewInit, OnDestroy
+{
+    @ViewChild('recentTransactionsTable', {read: MatSort}) recentTransactionsTableMatSort: MatSort;
+
+    data: any;
+    accountBalanceOptions: ApexOptions;
+    recentTransactionsDataSource: MatTableDataSource<any> = new MatTableDataSource();
+    recentTransactionsTableColumns: string[] = ['transactionId', 'date', 'name', 'amount', 'status'];
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(private _financeService: FinanceService)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get the data
+        this._financeService.data$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((data) => {
+
+                // Store the data
+                this.data = data;
+
+                // Store the table data
+                this.recentTransactionsDataSource.data = data.recentTransactions;
+
+                // Prepare the chart data
+                this._prepareChartData();
+            });
+    }
+
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        // Make the data source sortable
+        this.recentTransactionsDataSource.sort = this.recentTransactionsTableMatSort;
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Prepare the chart data from the data
+     *
+     * @private
+     */
+    private _prepareChartData(): void
+    {
+        // Account balance
+        this.accountBalanceOptions = {
+            chart  : {
+                animations: {
+                    speed           : 400,
+                    animateGradually: {
+                        enabled: false
+                    }
+                },
+                fontFamily: 'inherit',
+                foreColor : 'inherit',
+                width     : '100%',
+                height    : '100%',
+                type      : 'area',
+                sparkline : {
+                    enabled: true
+                }
+            },
+            colors : ['#A3BFFA', '#667EEA'],
+            fill   : {
+                colors : ['#CED9FB', '#AECDFD'],
+                opacity: 0.5,
+                type   : 'solid'
+            },
+            series : this.data.accountBalance.series,
+            stroke : {
+                curve: 'straight',
+                width: 2
+            },
+            tooltip: {
+                followCursor: true,
+                theme       : 'dark',
+                x           : {
+                    format: 'MMM dd, yyyy'
+                },
+                y           : {
+                    formatter: (value): string => value + '%'
+                }
+            },
+            xaxis  : {
+                type: 'datetime'
+            }
+        };
+    }
+}

src/app/modules/admin/dashboards/finance/finance.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { NgApexchartsModule } from 'ng-apexcharts';
+import { SharedModule } from 'app/shared/shared.module';
+import { FinanceComponent } from 'app/modules/admin/dashboards/finance/finance.component';
+import { financeRoutes } from 'app/modules/admin/dashboards/finance/finance.routing';
+
+@NgModule({
+    declarations: [
+        FinanceComponent
+    ],
+    imports     : [
+        RouterModule.forChild(financeRoutes),
+        MatButtonModule,
+        MatDividerModule,
+        MatIconModule,
+        MatMenuModule,
+        MatProgressBarModule,
+        MatSortModule,
+        MatTableModule,
+        NgApexchartsModule,
+        SharedModule
+    ]
+})
+export class FinanceModule
+{
+}

src/app/modules/admin/dashboards/finance/finance.resolvers.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { FinanceService } from 'app/modules/admin/dashboards/finance/finance.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FinanceResolver implements Resolve<any>
+{
+    /**
+     * Constructor
+     */
+    constructor(private _financeService: FinanceService)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Resolver
+     *
+     * @param route
+     * @param state
+     */
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>
+    {
+        return this._financeService.getData();
+    }
+}

src/app/modules/admin/dashboards/finance/finance.routing.ts

@@ -0,0 +1,13 @@
+import { Route } from '@angular/router';
+import { FinanceComponent } from 'app/modules/admin/dashboards/finance/finance.component';
+import { FinanceResolver } from 'app/modules/admin/dashboards/finance/finance.resolvers';
+
+export const financeRoutes: Route[] = [
+    {
+        path     : '',
+        component: FinanceComponent,
+        resolve  : {
+            data: FinanceResolver
+        }
+    }
+];

src/app/modules/admin/dashboards/finance/finance.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FinanceService
+{
+    private _data: BehaviorSubject<any> = new BehaviorSubject(null);
+
+    /**
+     * Constructor
+     */
+    constructor(private _httpClient: HttpClient)
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Getter for data
+     */
+    get data$(): Observable<any>
+    {
+        return this._data.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Get data
+     */
+    getData(): Observable<any>
+    {
+        return this._httpClient.get('api/dashboards/finance').pipe(
+            tap((response: any) => {
+                this._data.next(response);
+            })
+        );
+    }
+}

src/app/modules/admin/dashboards/project/project.component.html

@@ -1,7 +1,7 @@
 <div class="flex flex-col flex-auto min-w-0">
 
     <!-- Header -->
-    <div class="dark bg-card dark:border-b">
+    <div class="bg-card">
         <div class="flex flex-col w-full max-w-screen-xl mx-auto px-6 sm:px-8">
             <div class="flex flex-col sm:flex-row flex-auto sm:items-center min-w-0 my-8 sm:my-12">
                 <!-- Avatar and name -->
@@ -26,7 +26,7 @@
                 <!-- Actions -->
                 <div class="flex items-center mt-6 sm:mt-0 sm:ml-2 space-x-3">
                     <button
-                        class="fuse-mat-button-rounded bg-accent-600"
+                        class="fuse-mat-button-rounded bg-accent-700"
                         mat-flat-button
                         [color]="'accent'">
                         <mat-icon
@@ -46,43 +46,47 @@
                 </div>
             </div>
             <!-- Project selector -->
-            <div class="flex items-center">
-                <div class="px-4 py-2 rounded-tl-xl overflow-hidden bg-hover">
-                    <div class="sm:text-lg leading-6 truncate">{{selectedProject}}</div>
+            <div
+                class="relative flex self-start pt-2 pb-1 pl-5 pr-4 cursor-pointer overflow-hidden rounded-t-xl border border-b-0 bg-default"
+                matRipple
+                [matMenuTriggerFor]="projectsMenu">
+                <div class="flex items-center">
+                    <div class="overflow-hidden">
+                        <div class="font-medium leading-6 truncate">{{selectedProject}}</div>
+                    </div>
+                    <div class="flex items-center justify-center pl-2">
+                        <mat-icon
+                            class="icon-size-5"
+                            [svgIcon]="'heroicons_solid:chevron-down'"></mat-icon>
+                    </div>
                 </div>
-                <div class="ml-px rounded-tr-xl bg-hover">
+                <mat-menu
+                    #projectsMenu="matMenu"
+                    [xPosition]="'before'">
                     <button
-                        [matMenuTriggerFor]="projectsMenu"
-                        mat-icon-button>
-                        <mat-icon [svgIcon]="'heroicons_outline:dots-horizontal'"></mat-icon>
+                        mat-menu-item
+                        (click)="selectedProject='ACME Corp. Backend App'">ACME Corp. Backend App
                     </button>
-                    <mat-menu #projectsMenu="matMenu">
-                        <button
-                            mat-menu-item
-                            (click)="selectedProject='ACME Corp. Backend App'">ACME Corp. Backend App
-                        </button>
-                        <button
-                            mat-menu-item
-                            (click)="selectedProject='ACME Corp. Frontend App'">ACME Corp. Frontend App
-                        </button>
-                        <button
-                            mat-menu-item
-                            (click)="selectedProject='Creapond'">Creapond
-                        </button>
-                        <button
-                            mat-menu-item
-                            (click)="selectedProject='Withinpixels'">Withinpixels
-                        </button>
-                    </mat-menu>
-                </div>
+                    <button
+                        mat-menu-item
+                        (click)="selectedProject='ACME Corp. Frontend App'">ACME Corp. Frontend App
+                    </button>
+                    <button
+                        mat-menu-item
+                        (click)="selectedProject='Creapond'">Creapond
+                    </button>
+                    <button
+                        mat-menu-item
+                        (click)="selectedProject='Withinpixels'">Withinpixels
+                    </button>
+                </mat-menu>
             </div>
         </div>
     </div>
 
     <!-- Main -->
-    <div class="flex-auto mt-4 sm:mt-6">
+    <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
         <div class="w-full max-w-screen-xl mx-auto">
-
             <!-- Tabs -->
             <mat-tab-group
                 class="sm:px-2"
@@ -114,7 +118,7 @@
                                 <div class="flex flex-col items-center mt-2">
                                     <div class="text-7xl sm:text-8xl font-bold tracking-tight leading-none text-blue-500">21</div>
                                     <div class="text-lg font-medium text-blue-600 dark:text-blue-500">Due Tasks</div>
-                                    <div class="flex items-center justify-center w-full mt-5 text-secondary">
+                                    <div class="flex items-baseline justify-center w-full mt-5 text-secondary">
                                         <div class="text-md font-medium truncate">Completed:</div>
                                         <div class="ml-1.5 text-lg font-semibold">13</div>
                                     </div>
@@ -142,7 +146,7 @@
                                 <div class="flex flex-col items-center mt-2">
                                     <div class="text-7xl sm:text-8xl font-bold tracking-tight leading-none text-red-500">17</div>
                                     <div class="text-lg font-medium text-red-600 dark:text-red-500">Tasks</div>
-                                    <div class="flex items-center justify-center w-full mt-5 text-secondary">
+                                    <div class="flex items-baseline justify-center w-full mt-5 text-secondary">
                                         <div class="text-md font-medium truncate">From yesterday:</div>
                                         <div class="ml-1.5 text-lg font-semibold">9</div>
                                     </div>
@@ -170,7 +174,7 @@
                                 <div class="flex flex-col items-center mt-2">
                                     <div class="text-7xl sm:text-8xl font-bold tracking-tight leading-none text-amber-500">24</div>
                                     <div class="text-lg font-medium text-amber-600 dark:text-amber-500">Open</div>
-                                    <div class="flex items-center justify-center w-full mt-5 text-secondary">
+                                    <div class="flex items-baseline justify-center w-full mt-5 text-secondary">
                                         <div class="text-md font-medium truncate">Closed today:</div>
                                         <div class="ml-1.5 text-lg font-semibold">19</div>
                                     </div>
@@ -198,7 +202,7 @@
                                 <div class="flex flex-col items-center mt-2">
                                     <div class="text-7xl sm:text-8xl font-bold tracking-tight leading-none text-green-500">38</div>
                                     <div class="text-lg font-medium text-green-600 dark:text-green-500">Proposals</div>
-                                    <div class="flex items-center justify-center w-full mt-5 text-secondary">
+                                    <div class="flex items-baseline justify-center w-full mt-5 text-secondary">
                                         <div class="text-md font-medium truncate">Implemented:</div>
                                         <div class="ml-1.5 text-lg font-semibold">16</div>
                                     </div>
@@ -680,7 +684,6 @@
                                             mat-row
                                             *matRowDef="let row; columns: data.budgetDetails.columns;"></tr>
                                     </table>
-
                                 </div>
                             </div>
                         </div>
@@ -729,7 +732,6 @@
                 </mat-tab>
 
             </mat-tab-group>
-
         </div>
     </div>
 

src/app/modules/admin/dashboards/project/project.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatRippleModule } from '@angular/material/core';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
@@ -28,6 +29,7 @@ import { projectRoutes } from 'app/modules/admin/dashboards/project/project.rout
         MatIconModule,
         MatMenuModule,
         MatProgressBarModule,
+        MatRippleModule,
         MatSidenavModule,
         MatSortModule,
         MatTableModule,

src/app/modules/admin/docs/changelog/changelog.ts

@@ -4,13 +4,115 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 @Component({
     selector       : 'changelog',
     templateUrl    : './changelog.html',
-    styles         : [''],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ChangelogComponent
 {
     changelog: any[] = [
 
+        // v13.5.0
+        {
+            version    : 'v13.5.0',
+            releaseDate: 'Aug 13, 2021',
+            changes    : [
+                {
+                    type: 'Changed',
+                    list: [
+                        'Huge performance improvement due to Angular v12.2.0',
+                        '(dependencies) Updated Angular & Angular Material to v12.2.1',
+                        '(dependencies) Updated various other packages',
+                        '(tailwindcss) Removed old jsdoc from the config file',
+                        '(@fuse/theming) Better structuring on the themes.scss file',
+                        '(@fuse) Disabled Angular Material "theme" sanity check since we use "all-component-themes" without a color map',
+                        '(apps/mailbox) Style improvements',
+                        'Removed empty "styles" from component decorators',
+                        'Decreased budget sizes since new Fuse is a lot smaller compared to the one with the old design'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(@fuse/overrides) Quill editor is not styled correctly by default',
+                        '(@fuse/confirmation) Dialog size cannot be updated using dialogRef\'s "updateSize" method',
+                        '(apps/mailbox) Compose dialog doesn\'t work correctly on small height resolutions',
+                        '(ui/page-layouts) Demo layout navigation appearance is not correct'
+                    ]
+                }
+            ]
+        },
+        // v13.4.0
+        {
+            version    : 'v13.4.0',
+            releaseDate: 'July 29, 2021',
+            changes    : [
+                {
+                    type: 'Added',
+                    list: [
+                        '(dashboards/finance) Added finance dashboard',
+                        '(dashboards/crypto) Added crypto dashboard'
+                    ]
+                },
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated Angular & Angular Material to v12.1.4',
+                        '(dependencies) Updated various other packages',
+                        '(index) Updated the title, description and keywords',
+                        '(dashboards/project) Light header on light themes and small adjustments in various places',
+                        '(apps/contacts) Small adjustments for better consistency',
+                        '(apps/ecommerce/inventory) Small adjustments for better consistency',
+                        '(docs) Updated the multi language guide'
+                    ]
+                }
+            ]
+        },
+        // v13.3.1
+        {
+            version    : 'v13.3.1',
+            releaseDate: 'July 17, 2021',
+            changes    : [
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(fuse/confirmation) Confirmation dialog colors are not optimized for the Dark mode'
+                    ]
+                }
+            ]
+        },
+        // v13.3.0
+        {
+            version    : 'v13.3.0',
+            releaseDate: 'July 16, 2021',
+            changes    : [
+                {
+                    type: 'Added',
+                    list: [
+                        '(fuse/confirmation) A service to quickly configure and show confirmation dialogs'
+                    ]
+                },
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated Angular & Angular Material to v12.1.2',
+                        '(dependencies) Updated various other packages',
+                        '(dashboards/analytics) Removed unused chart options declarations',
+                        '(apps/contacts) Added confirmation to the "Delete contact" action using FuseConfirmationService',
+                        '(apps/ecommerce/inventory) Added confirmation to the "Delete product" action using FuseConfirmationService',
+                        '(apps/scrumboard) Added confirmation to the "Delete list" action using FuseConfirmationService',
+                        '(apps/tasks) Added confirmation to the "Delete task" action using FuseConfirmationService',
+                        '(ui/confirmation-dialog) Created a separate page for FuseConfirmationService and put the example configurator in there for better visibility',
+                        '(docs) Moved Fuse Components and Other Components into UI for better visibility and better categorization'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(transloco) Undefined fallback language causes issues in some cases',
+                        '(tailwindcss) Ordered lists with "s" modifier causes builder to throw errors'
+                    ]
+                }
+            ]
+        },
         // v13.2.0
         {
             version    : 'v13.2.0',
@@ -37,7 +139,7 @@ export class ChangelogComponent
                         '(apps/tasks) Explicitly define the overlay position strategy properties',
                         '(tailwindcss) Breaking: Removed 5, 6 & 12 fractional spacing values since they are not used in Demo by default and they are mostly not needed because of Flex and Grid. If you happen to use them, you can manually add them back.',
                         '(docs) Updated docs',
-                        '(package.json) Added "description" and "author" fields',
+                        '(package.json) Added "description" and "author" fields'
                     ]
                 },
                 {

src/app/modules/admin/docs/core-features/core-features.module.ts

@@ -1,76 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatTreeModule } from '@angular/material/tree';
-import { FuseCardModule } from '@fuse/components/card';
-import { FuseDateRangeModule } from '@fuse/components/date-range';
-import { FuseDrawerModule } from '@fuse/components/drawer';
-import { FuseHighlightModule } from '@fuse/components/highlight';
-import { FuseAlertModule } from '@fuse/components/alert';
-import { FuseMasonryModule } from '@fuse/components/masonry/masonry.module';
-import { FuseNavigationModule } from '@fuse/components/navigation';
-import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
-import { SharedModule } from 'app/shared/shared.module';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
-import { MockApiComponent } from 'app/modules/admin/docs/core-features/libraries/mock-api/mock-api.component';
-import { AlertComponent } from 'app/modules/admin/docs/core-features/components/alert/alert.component';
-import { CardComponent } from 'app/modules/admin/docs/core-features/components/card/card.component';
-import { DateRangeComponent } from 'app/modules/admin/docs/core-features/components/date-range/date-range.component';
-import { DrawerComponent } from 'app/modules/admin/docs/core-features/components/drawer/drawer.component';
-import { FullscreenComponent } from 'app/modules/admin/docs/core-features/components/fullscreen/fullscreen.component';
-import { HighlightComponent } from 'app/modules/admin/docs/core-features/components/highlight/highlight.component';
-import { NavigationComponent } from 'app/modules/admin/docs/core-features/components/navigation/navigation.component';
-import { MasonryComponent } from 'app/modules/admin/docs/core-features/components/masonry/masonry.component';
-import { ScrollbarComponent } from 'app/modules/admin/docs/core-features/directives/scrollbar/scrollbar.component';
-import { ScrollResetComponent } from 'app/modules/admin/docs/core-features/directives/scroll-reset/scroll-reset.component';
-import { ConfigComponent } from 'app/modules/admin/docs/core-features/services/config/config.component';
-import { MediaWatcherComponent } from 'app/modules/admin/docs/core-features/services/media-watcher/media-watcher.component';
-import { SplashScreenComponent } from 'app/modules/admin/docs/core-features/services/splash-screen/splash-screen.component';
-import { FindByKeyComponent } from 'app/modules/admin/docs/core-features/pipes/find-by-key/find-by-key.component';
-import { MustMatchComponent } from 'app/modules/admin/docs/core-features/validators/must-match/must-match.component';
-import { coreFeaturesRoutes } from 'app/modules/admin/docs/core-features/core-features.routing';
-
-@NgModule({
-    declarations: [
-        CoreFeaturesComponent,
-        MockApiComponent,
-        AlertComponent,
-        CardComponent,
-        DateRangeComponent,
-        DrawerComponent,
-        FullscreenComponent,
-        HighlightComponent,
-        MasonryComponent,
-        NavigationComponent,
-        ScrollbarComponent,
-        ScrollResetComponent,
-        ConfigComponent,
-        SplashScreenComponent,
-        MediaWatcherComponent,
-        FindByKeyComponent,
-        MustMatchComponent
-    ],
-    imports     : [
-        RouterModule.forChild(coreFeaturesRoutes),
-        MatButtonModule,
-        MatIconModule,
-        MatSidenavModule,
-        MatTabsModule,
-        MatTreeModule,
-        FuseAlertModule,
-        FuseCardModule,
-        FuseDateRangeModule,
-        FuseDrawerModule,
-        FuseHighlightModule,
-        FuseMasonryModule,
-        FuseNavigationModule,
-        FuseScrollResetModule,
-        SharedModule
-    ]
-})
-export class CoreFeaturesModule
-{
-}

src/app/modules/admin/docs/guides/authentication/jwt/jwt.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'jwt',
-    templateUrl: './jwt.html',
-    styles     : ['']
+    templateUrl: './jwt.html'
 })
 export class JwtComponent
 {

src/app/modules/admin/docs/guides/customization/component-theming/component-theming.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'component-theming',
-    templateUrl: './component-theming.html',
-    styles     : ['']
+    templateUrl: './component-theming.html'
 })
 export class ComponentThemingComponent
 {

src/app/modules/admin/docs/guides/customization/multi-language/multi-language.html

@@ -65,7 +65,7 @@
         <ol>
             <li>Navigate to <code>src/app/core/core.module.ts</code> file and remove imports of <code>TranslocoCoreModule</code></li>
             <li>Remove the <code>src/app/core/transloco</code> directory</li>
-            <li>Do a project wide search for <code>&lt;language&gt;&lt;/language&gt;</code> and remove all instances</li>
+            <li>Do a project wide search for <code>&lt;languages&gt;&lt;/languages&gt;</code> and remove all instances</li>
             <li>Do a project wide search for <code>LanguageModule</code> and remove all imports</li>
             <li>Remove the <code>src/app/layout/common/language</code> directory</li>
             <li>Finally navigate to the <code>package.json</code> file, remove the <strong>"@ngneat/transloco"</strong> from dependencies list and run <code>npm install</code> command</li>

src/app/modules/admin/docs/guides/customization/multi-language/multi-language.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'multi-language',
-    templateUrl: './multi-language.html',
-    styles     : ['']
+    templateUrl: './multi-language.html'
 })
 export class MultiLanguageCustomizationComponent
 {

src/app/modules/admin/docs/guides/customization/page-layouts/page-layouts.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'page-layouts',
-    templateUrl: './page-layouts.html',
-    styles     : ['']
+    templateUrl: './page-layouts.html'
 })
 export class PageLayoutsComponent
 {

src/app/modules/admin/docs/guides/customization/splash-screen/splash-screen.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'splash-screen',
-    templateUrl: './splash-screen.html',
-    styles     : ['']
+    templateUrl: './splash-screen.html'
 })
 export class SplashScreenCustomizationComponent
 {

src/app/modules/admin/docs/guides/customization/tailwindcss/tailwindcss.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'tailwindcss',
-    templateUrl: './tailwindcss.html',
-    styles     : ['']
+    templateUrl: './tailwindcss.html'
 })
 export class TailwindCSSComponent
 {

src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.html

@@ -51,8 +51,8 @@
             [appearance]="'border'"
             [type]="'info'">
             More detailed information about <code>FuseConfigService</code> can be found in the
-            <a [routerLink]="['../../../core-features/services/config']">Core features > Services >
-                Config
+            <a [routerLink]="['/ui/fuse-components/services/config']">
+                Fuse Components > Services > Config
             </a>
             section of this documentation.
         </fuse-alert>

src/app/modules/admin/docs/guides/customization/theme-layouts/theme-layouts.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'theme-layouts',
-    templateUrl: './theme-layouts.html',
-    styles     : ['']
+    templateUrl: './theme-layouts.html'
 })
 export class ThemeLayoutsComponent
 {

src/app/modules/admin/docs/guides/customization/theming/theming.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'theming',
-    templateUrl: './theming.html',
-    styles     : ['']
+    templateUrl: './theming.html'
 })
 export class ThemingComponent
 {

src/app/modules/admin/docs/guides/development/component-structure/component-structure.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'component-structure',
-    templateUrl: './component-structure.html',
-    styles     : ['']
+    templateUrl: './component-structure.html'
 })
 export class ComponentStructureComponent
 {

src/app/modules/admin/docs/guides/development/deployment/deployment.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'deployment',
-    templateUrl: './deployment.html',
-    styles     : ['']
+    templateUrl: './deployment.html'
 })
 export class DeploymentComponent
 {

src/app/modules/admin/docs/guides/development/directory-structure/directory-structure.html

@@ -195,7 +195,7 @@
         <p>
             This directory is designed to contain data services for custom made MockAPI library. Detailed information about this directory and the MockAPI library can be found
             in the
-            <a [routerLink]="['../../../core-features/libraries/mock-api']">Core features > Libraries > MockAPI</a>
+            <a [routerLink]="['/ui/fuse-components/libraries/mock-api']">Fuse Components > Libraries > MockAPI</a>
             section of this documentation.
         </p>
 

src/app/modules/admin/docs/guides/development/starter-kit/starter-kit.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'starter-kit',
-    templateUrl: './starter-kit.html',
-    styles     : ['']
+    templateUrl: './starter-kit.html'
 })
 export class StarterKitComponent
 {

src/app/modules/admin/docs/guides/development/updating/updating.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'updating',
-    templateUrl: './updating.html',
-    styles     : ['']
+    templateUrl: './updating.html'
 })
 export class UpdatingComponent
 {

src/app/modules/admin/docs/guides/getting-started/installation/installation.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'installation',
-    templateUrl: './installation.html',
-    styles     : ['']
+    templateUrl: './installation.html'
 })
 export class InstallationComponent
 {

src/app/modules/admin/docs/guides/getting-started/introduction/introduction.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'introduction',
-    templateUrl: './introduction.html',
-    styles     : ['']
+    templateUrl: './introduction.html'
 })
 export class IntroductionComponent
 {

src/app/modules/admin/docs/guides/getting-started/prerequisites/prerequisites.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'prerequisites',
-    templateUrl: './prerequisites.html',
-    styles     : ['']
+    templateUrl: './prerequisites.html'
 })
 export class PrerequisitesComponent
 {

src/app/modules/admin/docs/guides/getting-started/serving/serving.ts

@@ -3,8 +3,7 @@ import { GuidesComponent } from 'app/modules/admin/docs/guides/guides.component'
 
 @Component({
     selector   : 'serving',
-    templateUrl: './serving.html',
-    styles     : ['']
+    templateUrl: './serving.html'
 })
 export class ServingComponent
 {

src/app/modules/admin/docs/other-components/other-components.module.ts

@@ -1,54 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { FuseHighlightModule } from '@fuse/components/highlight';
-import { FuseAlertModule } from '@fuse/components/alert';
-import { FuseNavigationModule } from '@fuse/components/navigation';
-import { FuseScrollResetModule } from '@fuse/directives/scroll-reset';
-import { SharedModule } from 'app/shared/shared.module';
-import { OtherComponentsComponent } from 'app/modules/admin/docs/other-components/other-components.component';
-import { OverviewComponent } from 'app/modules/admin/docs/other-components/common/overview/overview.component';
-import { LanguagesComponent } from 'app/modules/admin/docs/other-components/common/languages/languages.component';
-import { MessagesComponent } from 'app/modules/admin/docs/other-components/common/messages/messages.component';
-import { NotificationsComponent } from 'app/modules/admin/docs/other-components/common/notifications/notifications.component';
-import { SearchComponent } from 'app/modules/admin/docs/other-components/common/search/search.component';
-import { ShortcutsComponent } from 'app/modules/admin/docs/other-components/common/shortcuts/shortcuts.component';
-import { UserComponent } from 'app/modules/admin/docs/other-components/common/user/user.component';
-import { ApexChartsComponent } from 'app/modules/admin/docs/other-components/third-party/apex-charts/apex-charts.component';
-import { FullCalendarComponent } from 'app/modules/admin/docs/other-components/third-party/full-calendar/full-calendar.component';
-import { NgxMarkdownComponent } from 'app/modules/admin/docs/other-components/third-party/ngx-markdown/ngx-markdown.component';
-import { QuillEditorComponent } from 'app/modules/admin/docs/other-components/third-party/quill-editor/quill-editor.component';
-import { otherComponentsRoutes } from 'app/modules/admin/docs/other-components/other-components.routing';
-
-@NgModule({
-    declarations: [
-        OtherComponentsComponent,
-        OverviewComponent,
-        LanguagesComponent,
-        MessagesComponent,
-        NotificationsComponent,
-        SearchComponent,
-        ShortcutsComponent,
-        UserComponent,
-        ApexChartsComponent,
-        FullCalendarComponent,
-        NgxMarkdownComponent,
-        QuillEditorComponent
-    ],
-    imports     : [
-        RouterModule.forChild(otherComponentsRoutes),
-        MatButtonModule,
-        MatIconModule,
-        MatSidenavModule,
-        FuseHighlightModule,
-        FuseAlertModule,
-        FuseNavigationModule,
-        FuseScrollResetModule,
-        SharedModule
-    ]
-})
-export class OtherComponentsModule
-{
-}

src/app/modules/admin/ui/advanced-search/advanced-search.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { Route, RouterModule } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -8,14 +8,20 @@ import { MatSelectModule } from '@angular/material/select';
 import { FuseHighlightModule } from '@fuse/components/highlight';
 import { SharedModule } from 'app/shared/shared.module';
 import { AdvancedSearchComponent } from 'app/modules/admin/ui/advanced-search/advanced-search.component';
-import { advancedSearchRoutes } from 'app/modules/admin/ui/advanced-search/advanced-search.routing';
+
+export const routes: Route[] = [
+    {
+        path     : '',
+        component: AdvancedSearchComponent
+    }
+];
 
 @NgModule({
     declarations: [
         AdvancedSearchComponent
     ],
     imports     : [
-        RouterModule.forChild(advancedSearchRoutes),
+        RouterModule.forChild(routes),
         MatButtonModule,
         MatCheckboxModule,
         MatFormFieldModule,

src/app/modules/admin/ui/advanced-search/advanced-search.routing.ts

@@ -1,9 +0,0 @@
-import { Route } from '@angular/router';
-import { AdvancedSearchComponent } from 'app/modules/admin/ui/advanced-search/advanced-search.component';
-
-export const advancedSearchRoutes: Route[] = [
-    {
-        path     : '',
-        component: AdvancedSearchComponent
-    }
-];

src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,198 @@
+<div class="flex flex-col flex-auto min-w-0">
+
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div class="flex flex-wrap items-center font-medium">
+                <div>
+                    <a class="whitespace-nowrap text-primary-500">User Interface</a>
+                </div>
+            </div>
+            <!-- Title -->
+            <div class="mt-2">
+                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
+                    Confirmation Dialog
+                </h2>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main -->
+    <div class="flex-auto p-6 sm:p-10">
+
+        <div class="max-w-3xl">
+            <div class="max-w-3xl prose prose-sm">
+                <p>
+                    One of the repetitive and tedious jobs in Angular is to create confirmation dialogs. Since dialogs require their own components
+                    you have to either create a separate component every time you need a confirmation dialog or you have to create your own
+                    confirmation dialog system that can be configured.
+                </p>
+                <p>
+                    In order for you to save time while developing with Fuse, we have created a simple yet powerful <code>FuseConfirmationService</code>
+                    to create customized confirmation dialogs on-the-fly.
+                </p>
+                <p>
+                    Below you can configure and preview the confirmation dialog. You can use the generated configuration object within your code to have
+                    the exact same dialog.
+                </p>
+                <p>
+                    For more detailed information and API documentation, check the
+                    <a [routerLink]="'/ui/fuse-components/services/confirmation'">documentation</a>
+                    page.
+                </p>
+            </div>
+            <div class="example-viewer">
+
+                <div class="title">
+                    <h6>Configure the dialog and preview it</h6>
+                </div>
+
+                <div class="flex flex-col p-8 pt-0">
+
+                    <form
+                        [formGroup]="configForm"
+                        class="flex flex-col items-start">
+
+                        <!-- Title -->
+                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                            <mat-label>Title</mat-label>
+                            <input
+                                matInput
+                                [formControlName]="'title'">
+                        </mat-form-field>
+
+                        <!-- Message -->
+                        <mat-form-field class="fuse-mat-no-subscript fuse-mat-textarea w-full mt-6">
+                            <mat-label>Message</mat-label>
+                            <textarea
+                                matInput
+                                [formControlName]="'message'">
+                            </textarea>
+                        </mat-form-field>
+
+                        <!-- Divider -->
+                        <div class="w-full mt-8 mb-7 border-b"></div>
+
+                        <!-- Icon -->
+                        <div
+                            class="flex flex-col w-full"
+                            [formGroupName]="'icon'">
+                            <mat-checkbox
+                                [color]="'primary'"
+                                [formControlName]="'show'">
+                                Show Icon
+                            </mat-checkbox>
+                            <div class="flex items-center w-full mt-6">
+                                <!-- Icon name -->
+                                <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                    <mat-label>Icon name</mat-label>
+                                    <input
+                                        matInput
+                                        [formControlName]="'name'">
+                                </mat-form-field>
+
+                                <!-- Icon color -->
+                                <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+                                    <mat-label>Icon color</mat-label>
+                                    <mat-select [formControlName]="'color'">
+                                        <ng-container *ngFor="let color of ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error']">
+                                            <mat-option [value]="color">{{color | titlecase}}</mat-option>
+                                        </ng-container>
+                                    </mat-select>
+                                </mat-form-field>
+                            </div>
+                        </div>
+
+                        <!-- Divider -->
+                        <div class="w-full mt-8 mb-7 border-b"></div>
+
+                        <!-- Actions -->
+                        <div
+                            class="w-full"
+                            [formGroupName]="'actions'">
+                            <!-- Confirm -->
+                            <div
+                                class="flex flex-col w-full"
+                                [formGroupName]="'confirm'">
+                                <mat-checkbox
+                                    class="mt-2"
+                                    [color]="'primary'"
+                                    [formControlName]="'show'">
+                                    Show Confirm button
+                                </mat-checkbox>
+                                <div class="flex items-center w-full mt-4">
+                                    <!-- Confirm label -->
+                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                        <mat-label>Confirm button label</mat-label>
+                                        <input
+                                            matInput
+                                            [formControlName]="'label'">
+                                    </mat-form-field>
+
+                                    <!-- Confirm color -->
+                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+                                        <mat-label>Confirm button color</mat-label>
+                                        <mat-select [formControlName]="'color'">
+                                            <ng-container *ngFor="let color of ['primary', 'accent', 'warn']">
+                                                <mat-option [value]="color">{{color | titlecase}}</mat-option>
+                                            </ng-container>
+                                        </mat-select>
+                                    </mat-form-field>
+                                </div>
+                            </div>
+
+                            <!-- Cancel -->
+                            <div
+                                class="flex flex-col w-full mt-6"
+                                [formGroupName]="'cancel'">
+                                <mat-checkbox
+                                    class="mt-2"
+                                    [color]="'primary'"
+                                    [formControlName]="'show'">
+                                    Show Cancel button
+                                </mat-checkbox>
+                                <div class="flex items-center w-full mt-4">
+                                    <!-- Cancel label -->
+                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                        <mat-label>Cancel button label</mat-label>
+                                        <input
+                                            matInput
+                                            [formControlName]="'label'">
+                                    </mat-form-field>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Divider -->
+                        <div class="w-full mt-8 mb-7 border-b"></div>
+
+                        <!-- Dismissible -->
+                        <mat-checkbox
+                            [color]="'primary'"
+                            [formControlName]="'dismissible'">
+                            Dismissible
+                        </mat-checkbox>
+                    </form>
+
+                    <div class="mt-12">
+                        <button
+                            mat-flat-button
+                            [color]="'primary'"
+                            (click)="openConfirmationDialog()">
+                            Open Confirmation Dialog
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Config as json -->
+            <div class="dark w-full mt-8 p-4 rounded-2xl overflow-hidden">
+                <textarea
+                    fuse-highlight
+                    [code]="configForm.value | json"
+                    [lang]="'json'"></textarea>
+            </div>
+        </div>
+    </div>
+</div>

src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
+
+@Component({
+    selector       : 'confirmation',
+    templateUrl    : './confirmation-dialog.component.html',
+    encapsulation  : ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ConfirmationDialogComponent implements OnInit
+{
+    configForm: FormGroup;
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _formBuilder: FormBuilder,
+        private _fuseConfirmationService: FuseConfirmationService
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Build the config form
+        this.configForm = this._formBuilder.group({
+            title      : 'Remove contact',
+            message    : 'Are you sure you want to remove this contact permanently? <span class="font-medium">This action cannot be undone!</span>',
+            icon       : this._formBuilder.group({
+                show : true,
+                name : 'heroicons_outline:exclamation',
+                color: 'warn'
+            }),
+            actions    : this._formBuilder.group({
+                confirm: this._formBuilder.group({
+                    show : true,
+                    label: 'Remove',
+                    color: 'warn'
+                }),
+                cancel : this._formBuilder.group({
+                    show : true,
+                    label: 'Cancel'
+                })
+            }),
+            dismissible: true
+        });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Open confirmation dialog
+     */
+    openConfirmationDialog(): void
+    {
+        // Open the dialog and save the reference of it
+        const dialogRef = this._fuseConfirmationService.open(this.configForm.value);
+
+        // Subscribe to afterClosed from the dialog reference
+        dialogRef.afterClosed().subscribe((result) => {
+            console.log(result);
+        });
+    }
+}

src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { FuseHighlightModule } from '@fuse/components/highlight';
+import { SharedModule } from 'app/shared/shared.module';
+import { ConfirmationDialogComponent } from 'app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component';
+
+export const routes: Route[] = [
+    {
+        path     : '',
+        component: ConfirmationDialogComponent
+    }
+];
+
+@NgModule({
+    declarations: [
+        ConfirmationDialogComponent
+    ],
+    imports     : [
+        RouterModule.forChild(routes),
+        MatButtonModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        FuseHighlightModule,
+        SharedModule
+    ]
+})
+export class ConfirmationDialogModule
+{
+}

src/app/modules/admin/ui/fuse-components/components/alert/alert.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/alert/alert.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { FuseAlertService } from '@fuse/components/alert';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'alert',
@@ -20,7 +20,7 @@ export class AlertComponent
      */
     constructor(
         private _fuseAlertService: FuseAlertService,
-        private _coreFeaturesComponent: CoreFeaturesComponent
+        private _fuseComponentsComponent: FuseComponentsComponent
     )
     {
     }
@@ -57,6 +57,6 @@ export class AlertComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/card/card.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/card/card.component.ts

@@ -1,17 +1,16 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'card',
-    templateUrl: './card.component.html',
-    styles     : ['']
+    templateUrl: './card.component.html'
 })
 export class CardComponent
 {
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +24,6 @@ export class CardComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/date-range/date-range.component.ts

@@ -1,17 +1,16 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'date-range',
-    templateUrl: './date-range.component.html',
-    styles     : ['']
+    templateUrl: './date-range.component.html'
 })
 export class DateRangeComponent
 {
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +24,6 @@ export class DateRangeComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/drawer/drawer.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
 import { FuseDrawerMode, FuseDrawerService } from '@fuse/components/drawer';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'drawer',
-    templateUrl: './drawer.component.html',
-    styles     : ['']
+    templateUrl: './drawer.component.html'
 })
 export class DrawerComponent
 {
@@ -16,7 +15,7 @@ export class DrawerComponent
      */
     constructor(
         private _fuseDrawerService: FuseDrawerService,
-        private _coreFeaturesComponent: CoreFeaturesComponent
+        private _fuseComponentsComponent: FuseComponentsComponent
     )
     {
         // Set the defaults
@@ -63,6 +62,6 @@ export class DrawerComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/fullscreen/fullscreen.component.ts

@@ -1,17 +1,16 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'fullscreen',
-    templateUrl: './fullscreen.component.html',
-    styles     : ['']
+    templateUrl: './fullscreen.component.html'
 })
 export class FullscreenComponent
 {
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +24,6 @@ export class FullscreenComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/highlight/highlight.component.ts

@@ -1,17 +1,16 @@
 import { Component } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 
 @Component({
     selector   : 'highlight',
-    templateUrl: './highlight.component.html',
-    styles     : ['']
+    templateUrl: './highlight.component.html'
 })
 export class HighlightComponent
 {
     /**
      * Constructor
      */
-    constructor(private _coreFeaturesComponent: CoreFeaturesComponent)
+    constructor(private _fuseComponentsComponent: FuseComponentsComponent)
     {
     }
 
@@ -25,6 +24,6 @@ export class HighlightComponent
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon

src/app/modules/admin/ui/fuse-components/components/masonry/masonry.component.ts

@@ -1,13 +1,12 @@
 import { Component, OnInit } from '@angular/core';
-import { CoreFeaturesComponent } from 'app/modules/admin/docs/core-features/core-features.component';
+import { FuseComponentsComponent } from 'app/modules/admin/ui/fuse-components/fuse-components.component';
 import { Subject } from 'rxjs';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector   : 'masonry',
-    templateUrl: './masonry.component.html',
-    styles     : ['']
+    templateUrl: './masonry.component.html'
 })
 export class MasonryComponent implements OnInit
 {
@@ -18,7 +17,7 @@ export class MasonryComponent implements OnInit
      * Constructor
      */
     constructor(
-        private _coreFeaturesComponent: CoreFeaturesComponent,
+        private _fuseComponentsComponent: FuseComponentsComponent,
         private _fuseMediaWatcherService: FuseMediaWatcherService
     )
     {
@@ -76,6 +75,6 @@ export class MasonryComponent implements OnInit
     toggleDrawer(): void
     {
         // Toggle the drawer
-        this._coreFeaturesComponent.matDrawer.toggle();
+        this._fuseComponentsComponent.matDrawer.toggle();
     }
 }

src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html

@@ -12,7 +12,7 @@
                     <mat-icon
                         class="icon-size-5 text-secondary"
                         [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Core Features</a>
+                    <a class="ml-1 text-primary-500">Fuse Components</a>
                 </div>
                 <div class="flex items-center ml-1 whitespace-nowrap">
                     <mat-icon
@@ -73,8 +73,7 @@
 
         <h2>Navigation item</h2>
         <p>
-            This is the type alias for the <em>Navigation item</em>. It's used to create the navigation and both <em>vertical</em> and <em>horizontal</em> variations use the
-            same item type:
+            This is the interface of the <em>Navigation item</em>. Both <em>vertical</em> and <em>horizontal</em> navigation items use the same interface:
         </p>
         <!-- @formatter:off -->
         <textarea fuse-highlight