penyesuaian UI cooming soon

src/app/app.module.ts

@@ -118,7 +118,7 @@ import { HttpErrorInterceptorService } from './interceptors/http-error-intercept
     BlockTemplateComponent,
     FullLayoutComponent,
     PrivacyPolicyComponent,
-    TermsConditionComponent,
+    TermsConditionComponent
   ],
   providers: [
     AuthGuard,

src/app/content/hemat-app/calculator/calculation/calculation.component.html

@@ -1,38 +1 @@
-<div class="app-content content bg-maintenance-image">
+<app-coming-soon></app-coming-soon>
-    <div class="content-wrapper">
-      <div class="content-body">
-        <section class="flexbox-container">
-            <div class="col-12 d-flex align-items-center justify-content-center">
-              <div class="col-md-4 col-10 box-shadow-2 p-0">
-                <div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
-                  <div class="card-body">
-                    <span class="card-title text-center">
-                      <img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
-                        width="250" alt="logo">
-                    </span>
-                  </div>
-                  <div class="card-body text-center">
-                    <h3>Coming Soon</h3>
-                    <p>We're sorry for the inconvenience.
-                      <br> Please check back later.</p>
-                    <div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
-                  </div>
-                  <hr>
-                  <!-- <p class="socialIcon card-text text-center pt-2 pb-2">
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
-                        class="la la-facebook"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
-                        class="la la-twitter"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
-                        class="la la-linkedin font-medium-4"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
-                        class="la la-github font-medium-4"></span></a>
-                  </p> -->
-                </div>
-              </div>
-            </div>
-          </section>
-      </div>
-    </div>
-  </div>
-  

src/app/content/hemat-app/calculator/calculator.module.ts

@@ -12,13 +12,15 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { BlockUIModule } from 'ng-block-ui';
 import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
 import { RouterModule } from '@angular/router';
+import { ComingSoonComponent } from '../coming-soon/coming-soon.component';
 
 
 
 @NgModule({
   declarations: [
     CalculationComponent,
-    ReductionComponent
+    ReductionComponent,
+    ComingSoonComponent
   ],
   imports: [
     CommonModule,

src/app/content/hemat-app/calculator/reduction/reduction.component.html

@@ -1,38 +1 @@
-<div class="app-content content bg-maintenance-image">
+<app-coming-soon></app-coming-soon>
-    <div class="content-wrapper">
-      <div class="content-body">
-        <section class="flexbox-container">
-            <div class="col-12 d-flex align-items-center justify-content-center">
-              <div class="col-md-4 col-10 box-shadow-2 p-0">
-                <div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
-                  <div class="card-body">
-                    <span class="card-title text-center">
-                      <img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
-                        width="250" alt="logo">
-                    </span>
-                  </div>
-                  <div class="card-body text-center">
-                    <h3>Coming Soon</h3>
-                    <p>We're sorry for the inconvenience.
-                      <br> Please check back later.</p>
-                    <div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
-                  </div>
-                  <hr>
-                  <!-- <p class="socialIcon card-text text-center pt-2 pb-2">
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
-                        class="la la-facebook"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
-                        class="la la-twitter"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
-                        class="la la-linkedin font-medium-4"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
-                        class="la la-github font-medium-4"></span></a>
-                  </p> -->
-                </div>
-              </div>
-            </div>
-          </section>
-      </div>
-    </div>
-  </div>
-  

src/app/content/hemat-app/coming-soon/coming-soon.component.css

@@ -0,0 +1,43 @@
+.bg-maintenance-image {
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.centered-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.box-shadow-2 {
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.box-shadow-3 {
+  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
+}
+
+.card {
+  background-color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 20px;
+  max-width: 400px;
+  width: 100%;
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/app/content/hemat-app/coming-soon/coming-soon.component.html

@@ -0,0 +1,33 @@
+<div class="app-content content bg-maintenance-image">
+  <div class="content-wrapper">
+    <div class="content-body">
+      <section class="flexbox-container">
+        <div class="centered-card">
+          <div class="card box-shadow-3">
+            <div class="card-body">
+              <span class="card-title text-center">
+                <img
+                  src="assets/images/logo/logo-dark-lg.png"
+                  class="img-fluid mx-auto d-block pt-2"
+                  width="250"
+                  alt="logo"
+                />
+              </span>
+            </div>
+            <div class="card-body text-center">
+              <h3 style="font-weight: 600; color: #000000">Coming Soon</h3>
+              <p style="color: #000000">
+                We're working hard to bring you this page. <br />
+                Please check back later.
+              </p>
+              <div class="mt-2">
+                <i class="la la-cog spinner font-large-2"></i>
+              </div>
+            </div>
+            <hr />
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>

src/app/content/hemat-app/coming-soon/coming-soon.component.spec.ts

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

src/app/content/hemat-app/coming-soon/coming-soon.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-coming-soon',
+  templateUrl: './coming-soon.component.html',
+  styleUrls: ['./coming-soon.component.css']
+})
+export class ComingSoonComponent {
+
+}

src/app/content/hemat-app/device/device-control/device-control.component.css

@@ -0,0 +1,44 @@
+.bg-maintenance-image {
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .centered-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .box-shadow-2 {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .box-shadow-3 {
+    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
+  }
+  
+  .card {
+    background-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 20px;
+    max-width: 400px;
+    width: 100%;
+  }
+  
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  

src/app/content/hemat-app/device/device-control/device-control.component.html

@@ -2,37 +2,32 @@
   <div class="content-wrapper">
     <div class="content-body">
       <section class="flexbox-container">
-            <div class="col-12 d-flex align-items-center justify-content-center">
+        <div class="centered-card">
-              <div class="col-md-4 col-10 box-shadow-2 p-0">
+          <div class="card box-shadow-3">
-                <div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
             <div class="card-body">
               <span class="card-title text-center">
-                      <img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
+                <img
-                        width="250" alt="logo">
+                  src="assets/images/logo/logo-dark-lg.png"
+                  class="img-fluid mx-auto d-block pt-2"
+                  width="250"
+                  alt="logo"
+                />
               </span>
             </div>
             <div class="card-body text-center">
-                    <h3>Coming Soon</h3>
+              <h3 style="font-weight: 600; color: #000000">Coming Soon</h3>
-                    <p>We're sorry for the inconvenience.
+              <p style="color: #000000">
-                      <br> Please check back later.</p>
+                We're working hard to bring you this page. <br />
-                    <div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
+                Please check back later.
+              </p>
+              <div class="mt-2">
+                <i class="la la-cog spinner font-large-2"></i>
               </div>
-                  <hr>
-                  <!-- <p class="socialIcon card-text text-center pt-2 pb-2">
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
-                        class="la la-facebook"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
-                        class="la la-twitter"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
-                        class="la la-linkedin font-medium-4"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
-                        class="la la-github font-medium-4"></span></a>
-                  </p> -->
             </div>
+            <hr />
           </div>
         </div>
       </section>
     </div>
   </div>
-  </div>
+</div>
-  

src/app/content/hemat-app/master/master-category/master-category.component.ts

@@ -5,6 +5,7 @@ import { BlockUI, NgBlockUI } from "ng-block-ui";
 import { TableApiService } from "src/app/_services/table-api.service";
 import { BuildingService } from "../../service/monitoring-api.service";
 import { AddEditMasterComponent } from "../add-edit-master/add-edit-master.component";
+import { ToastrService } from "ngx-toastr";
 
 @Component({
   selector: "app-master-category",
@@ -25,7 +26,8 @@ export class MasterCategoryComponent implements OnInit {
     private tableApiservice: TableApiService,
     private modalService: NgbModal,
     private router: Router,
-    private monitoringApiService: BuildingService
+    private monitoringApiService: BuildingService,
+    private toastr: ToastrService
   ) {}
 
   ngOnInit() {
@@ -87,12 +89,22 @@ export class MasterCategoryComponent implements OnInit {
       (result) => {
         console.log(result);
         if (result) {
-          this.monitoringApiService
+          this.monitoringApiService.postHeaderDetailParam(result).subscribe(
-            .postHeaderDetailParam(result)
+            (res) => {
-            .subscribe((res) => {
-              console.log(res);
               this.fetchData();
+              this.toastr.success("Success", "Save Completed.", {
+                timeOut: 2000,
+                closeButton: true,
               });
+            },
+            (error) => {
+              console.error(error);
+              this.toastr.error("Error", "Something went wrong!", {
+                timeOut: 2000,
+                closeButton: true,
+              });
+            }
+          );
         }
       },
       (reason) => {
@@ -115,10 +127,22 @@ export class MasterCategoryComponent implements OnInit {
         if (result) {
           this.monitoringApiService
             .putHeaderDetailParam(result, row.id)
-            .subscribe((res) => {
+            .subscribe(
-              console.log(res);
+              (res) => {
                 this.fetchData();
+                this.toastr.success("Success", "Update Completed.", {
+                  timeOut: 2000,
+                  closeButton: true,
                 });
+              },
+              (error) => {
+                console.error(error);
+                this.toastr.error("Error", "Something went wrong!", {
+                  timeOut: 2000,
+                  closeButton: true,
+                });
+              }
+            );
         }
       },
       (reason) => {
@@ -130,11 +154,22 @@ export class MasterCategoryComponent implements OnInit {
   deleteRow(row) {
     const confirmDelete = confirm("Are you sure you want to delete this item?");
     if (confirmDelete) {
-      this.monitoringApiService
+      this.monitoringApiService.deleteHeaderDetailParam(row.id).subscribe(
-        .deleteHeaderDetailParam(row.id)
+        (res) => {
-        .subscribe((res) => {
           this.fetchData();
+          this.toastr.success("Success", "Delete Completed.", {
+            timeOut: 2000,
+            closeButton: true,
           });
+        },
+        (error) => {
+          console.error(error);
+          this.toastr.error("Error", "Something went wrong!", {
+            timeOut: 2000,
+            closeButton: true,
+          });
+        }
+      );
     }
   }
 }

src/app/content/hemat-app/master/master-user/master-user.component.css

@@ -0,0 +1,44 @@
+.bg-maintenance-image {
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .centered-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .box-shadow-2 {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .box-shadow-3 {
+    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
+  }
+  
+  .card {
+    background-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 20px;
+    max-width: 400px;
+    width: 100%;
+  }
+  
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  

src/app/content/hemat-app/master/master-user/master-user.component.html

@@ -2,37 +2,32 @@
   <div class="content-wrapper">
     <div class="content-body">
       <section class="flexbox-container">
-            <div class="col-12 d-flex align-items-center justify-content-center">
+        <div class="centered-card">
-              <div class="col-md-4 col-10 box-shadow-2 p-0">
+          <div class="card box-shadow-3">
-                <div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
             <div class="card-body">
               <span class="card-title text-center">
-                      <img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
+                <img
-                        width="250" alt="logo">
+                  src="assets/images/logo/logo-dark-lg.png"
+                  class="img-fluid mx-auto d-block pt-2"
+                  width="250"
+                  alt="logo"
+                />
               </span>
             </div>
             <div class="card-body text-center">
-                    <h3>This page is under maintenance</h3>
+              <h3 style="font-weight: 600; color: #000000">Coming Soon</h3>
-                    <p>We're sorry for the inconvenience.
+              <p style="color: #000000">
-                      <br> Please check back later.</p>
+                We're working hard to bring you this page. <br />
-                    <div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
+                Please check back later.
+              </p>
+              <div class="mt-2">
+                <i class="la la-cog spinner font-large-2"></i>
               </div>
-                  <hr>
-                  <!-- <p class="socialIcon card-text text-center pt-2 pb-2">
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
-                        class="la la-facebook"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
-                        class="la la-twitter"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
-                        class="la la-linkedin font-medium-4"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
-                        class="la la-github font-medium-4"></span></a>
-                  </p> -->
             </div>
+            <hr />
           </div>
         </div>
       </section>
     </div>
   </div>
-  </div>
+</div>
-  

src/app/content/hemat-app/master/master.module.ts

@@ -26,6 +26,7 @@ import { MasterRoomComponent } from './master-room/master-room.component';
 import { MasterBuildingComponent } from './master-building/master-building.component';
 import { AddEditMasterBuildingComponent } from './master-building/add-edit-master-building/add-edit-master-building.component';
 import { AddEditMasterRoomComponent } from './master-room/add-edit-master-room/add-edit-master-room.component';
+import { ToastrModule } from 'ngx-toastr';
 
 
 
@@ -56,6 +57,7 @@ import { AddEditMasterRoomComponent } from './master-room/add-edit-master-room/a
     PerfectScrollbarModule,
     BreadcrumbModule,
     ReactiveFormsModule,
+    ToastrModule.forRoot(),
     NgbModule,
     BlockUIModule.forRoot({
       template: BlockTemplateComponent

src/app/content/hemat-app/monitoring/surveillance/surveillance.component.css

@@ -0,0 +1,44 @@
+.bg-maintenance-image {
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .centered-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .box-shadow-2 {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .box-shadow-3 {
+    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
+  }
+  
+  .card {
+    background-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 20px;
+    max-width: 400px;
+    width: 100%;
+  }
+  
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  

src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html

@@ -2,37 +2,32 @@
   <div class="content-wrapper">
     <div class="content-body">
       <section class="flexbox-container">
-            <div class="col-12 d-flex align-items-center justify-content-center">
+        <div class="centered-card">
-              <div class="col-md-4 col-10 box-shadow-2 p-0">
+          <div class="card box-shadow-3">
-                <div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
             <div class="card-body">
               <span class="card-title text-center">
-                      <img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
+                <img
-                        width="250" alt="logo">
+                  src="assets/images/logo/logo-dark-lg.png"
+                  class="img-fluid mx-auto d-block pt-2"
+                  width="250"
+                  alt="logo"
+                />
               </span>
             </div>
             <div class="card-body text-center">
-                    <h3>Coming Soon</h3>
+              <h3 style="font-weight: 600; color: #000000">Coming Soon</h3>
-                    <p>We're sorry for the inconvenience.
+              <p style="color: #000000">
-                      <br> Please check back later.</p>
+                We're working hard to bring you this page. <br />
-                    <div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
+                Please check back later.
+              </p>
+              <div class="mt-2">
+                <i class="la la-cog spinner font-large-2"></i>
               </div>
-                  <hr>
-                  <!-- <p class="socialIcon card-text text-center pt-2 pb-2">
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
-                        class="la la-facebook"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
-                        class="la la-twitter"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
-                        class="la la-linkedin font-medium-4"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
-                        class="la la-github font-medium-4"></span></a>
-                  </p> -->
             </div>
+            <hr />
           </div>
         </div>
       </section>
     </div>
   </div>
-  </div>
+</div>
-  

src/app/content/hemat-app/monitoring/water/water.component.css

@@ -0,0 +1,44 @@
+.bg-maintenance-image {
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .centered-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .box-shadow-2 {
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  
+  .box-shadow-3 {
+    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
+  }
+  
+  .card {
+    background-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 20px;
+    max-width: 400px;
+    width: 100%;
+  }
+  
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  

src/app/content/hemat-app/monitoring/water/water.component.html

@@ -2,37 +2,32 @@
   <div class="content-wrapper">
     <div class="content-body">
       <section class="flexbox-container">
-            <div class="col-12 d-flex align-items-center justify-content-center">
+        <div class="centered-card">
-              <div class="col-md-4 col-10 box-shadow-2 p-0">
+          <div class="card box-shadow-3">
-                <div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
             <div class="card-body">
               <span class="card-title text-center">
-                      <img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
+                <img
-                        width="250" alt="logo">
+                  src="assets/images/logo/logo-dark-lg.png"
+                  class="img-fluid mx-auto d-block pt-2"
+                  width="250"
+                  alt="logo"
+                />
               </span>
             </div>
             <div class="card-body text-center">
-                    <h3>Coming Soon</h3>
+              <h3 style="font-weight: 600; color: #000000">Coming Soon</h3>
-                    <p>We're sorry for the inconvenience.
+              <p style="color: #000000">
-                      <br> Please check back later.</p>
+                We're working hard to bring you this page. <br />
-                    <div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
+                Please check back later.
+              </p>
+              <div class="mt-2">
+                <i class="la la-cog spinner font-large-2"></i>
               </div>
-                  <hr>
-                  <!-- <p class="socialIcon card-text text-center pt-2 pb-2">
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
-                        class="la la-facebook"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
-                        class="la la-twitter"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
-                        class="la la-linkedin font-medium-4"></span></a>
-                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
-                        class="la la-github font-medium-4"></span></a>
-                  </p> -->
             </div>
+            <hr />
           </div>
         </div>
       </section>
     </div>
   </div>
-  </div>
+</div>
-  

src/app/content/hemat-app/user-access/user-access.component.css

@@ -1,190 +1,44 @@
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
+.bg-maintenance-image {
-    font-family: inherit;
+    background-size: cover;
-    font-size: medium;
-    font-weight: bold;
-    color: #6B6F82;
-}
-:host ::ng-deep .ngx-datatable .datatable-row-center, .ngx-datatable .datatable-row-group, .ngx-datatable .datatable-row-right {
-    position: relative;
-    height: 50px !important;
-}
-
-:host ::ng-deep .datatable-icon-right:before {
-    font-family: 'icofont';
-    font-style: normal;
-}
-
-:host ::ng-deep .datatable-icon-skip:before {
-    font-family: 'icofont';
-    font-style: normal;
-}
-
-:host ::ng-deep .datatable-icon-left:before {
-    font-family: 'icofont';
-    font-style: normal;
-}
-
-:host ::ng-deep .datatable-icon-left:before {
-    content: "\2039";
-    font-size: x-large;
-}
-
-:host ::ng-deep .datatable-icon-prev:before {
-    content: "\00AB";
-    font-size: x-large;
-}
-
-:host ::ng-deep .datatable-icon-right:before {
-    content: "\203A";
-    font-size: x-large;
-}
-
-:host ::ng-deep .datatable-icon-skip:before {
-    content: "\00BB";
-    font-size: x-large;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
-.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
-.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
-    font-size: 16px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #d4d2e7;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
-.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
-    font-size: 16px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #d4d2e7;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
-    font-size: 16px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #d4d2e7;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
-    font-size: 16px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #d4d2e7;
-}
-
-:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
-    background-color: #d4d2e7;
-    font-weight: bold;
-    font-size: larger;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
-    height: 32px;
-    min-width: 34px;
-    line-height: 22px;
-    padding: 0;
-    border-radius: 3px;
-    margin: 0 3px;
-    text-align: center;
-    vertical-align: top;
-    padding-top: 3px;
-    text-decoration: none;
-    vertical-align: bottom;
-    color: #7c8091;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
-    font-size: 14px;
-    line-height: 9px;
-    padding: 0px 08px;
-    background-color: #ffffff;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
-    font-size: 0px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #ffffff;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
-    font-size: 0px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #ffffff;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
-    font-size: 0px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #ffffff;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
-.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
-    font-size: 0px;
-    line-height: 22px;
-    padding: 0px 09px;
-    background-color: #ffffff;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
-    background-color: #545454;
-    font-weight: bold;
-    color: white;
-
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
-.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
-    background-color: #545454;
-    font-weight: bold;
-    color: white;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-    background: #727e8e;
-    color: #ededed;
-    margin-top: -1px;
-    overflow: inherit;
-}
-
-:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
-    font-weight: bold;
-    height: unset !important;
-    overflow: inherit
-}
-
-:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
-    flex: 0 0 0%;
-}
-
-:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
     display: flex;
-}
+    justify-content: center;
+    align-items: center;
+  }
   
-:host ::ng-deep .block-ui-wrapper {
+  .centered-card {
-    background: rgba(255, 249, 249, 0.5) !important;
+    display: flex;
-}
+    justify-content: center;
-:host ::ng-deep .ngx-datatable .datatable-footer .selected-count .datatable-pager {
+    align-items: center;
-   flex: 0 0 0%;
+    width: 100%;
-}
+    height: 100%;
+  }
   
-:host ::ng-deep .ngx-datatable {
+  .box-shadow-2 {
-  display: -webkit-box;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
+  }
+  
+  .box-shadow-3 {
+    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
+  }
+  
+  .card {
+    background-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 20px;
+    max-width: 400px;
+    width: 100%;
+  }
+  
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
   

src/app/content/hemat-app/user-access/user-access.component.html

@@ -2,33 +2,29 @@
   <div class="content-wrapper">
     <div class="content-body">
       <section class="flexbox-container">
-          <div class="col-12 d-flex align-items-center justify-content-center">
+        <div class="centered-card">
-            <div class="col-md-4 col-10 box-shadow-2 p-0">
+          <div class="card box-shadow-3">
-              <div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
             <div class="card-body">
               <span class="card-title text-center">
-                    <img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
+                <img
-                      width="250" alt="logo">
+                  src="assets/images/logo/logo-dark-lg.png"
+                  class="img-fluid mx-auto d-block pt-2"
+                  width="250"
+                  alt="logo"
+                />
               </span>
             </div>
             <div class="card-body text-center">
-                  <h3>Coming Soon</h3>
+              <h3 style="font-weight: 600; color: #000000">Coming Soon</h3>
-                  <p>We're sorry for the inconvenience.
+              <p style="color: #000000">
-                    <br> Please check back later.</p>
+                We're working hard to bring you this page. <br />
-                  <div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
+                Please check back later.
+              </p>
+              <div class="mt-2">
+                <i class="la la-cog spinner font-large-2"></i>
               </div>
-                <hr>
-                <!-- <p class="socialIcon card-text text-center pt-2 pb-2">
-                  <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
-                      class="la la-facebook"></span></a>
-                  <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
-                      class="la la-twitter"></span></a>
-                  <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
-                      class="la la-linkedin font-medium-4"></span></a>
-                  <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
-                      class="la la-github font-medium-4"></span></a>
-                </p> -->
             </div>
+            <hr />
           </div>
         </div>
       </section>

src/app/interceptors/http-error-interceptor.service.ts

@@ -14,6 +14,12 @@ export class HttpErrorInterceptorService {
       catchError((error: HttpErrorResponse) => {
         if (error.status === 403) {
           this.router.navigate(['/error/error403']);
+        } else if (error.status === 404) {
+          this.router.navigate(['/error/error404']);
+        } else if (error.status === 500) {
+          this.router.navigate(['/error/error500']);
+        } else if (error.status === 502) {
+          this.router.navigate(['/error/error500']);
         }
         return throwError(error);
       })

src/assets/sass/scss/pages/under-maintenance.scss

@@ -9,7 +9,7 @@
 // ================================================================================================
 
 .bg-maintenance-image{
-	background-image: url(/assets/images/backgrounds/bg-2.jpg);
+	background-image: url(/assets/images/backgrounds/98438.jpg);
 	background-repeat: no-repeat;
     background-size: cover;
 }