tango-app-ui-shared 3.7.3-dev6-demo6 → 3.7.3-dev6-demo7

package/src/lib/modules/intro/lead-intro/lead-intro.component.ts

@@ -0,0 +1,120 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { Subject, takeUntil } from "rxjs";
+import { NgbCarouselConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AuthService } from '../../../services/auth.service';
+import { ContactSupportComponent } from '../contact-support/contact-support.component';
+import  dayjs from "dayjs";
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'lib-lead-intro',
+  templateUrl: './lead-intro.component.html',
+  styleUrl: './lead-intro.component.scss',
+  providers: [NgbCarouselConfig],
+})
+export class LeadIntroComponent implements OnDestroy, OnInit {
+  productList: any = [];
+  private readonly destroy$ = new Subject();
+  trialDetails:any
+  dayjs = dayjs
+
+
+
+  constructor(private pageInfo: PageInfoService, public gs: GlobalStateService, config: NgbCarouselConfig, private modalService: NgbModal, private authService: AuthService,private router:Router) {
+    this.gs.userAccess.pipe(takeUntil(this.destroy$)).subscribe((e) => {
+      if (e && e?.userType === "lead") {
+        const user = JSON.parse(localStorage.getItem('user-info') as string)
+        this.authService.getLeadProducts(user.email).pipe(takeUntil(this.destroy$)).subscribe({
+          next: (e) => {
+            if(e?.data){
+              this.productList = e.data?.planDetails?.product
+            }
+
+          }
+        })
+      } else if (e && e?.userType === "client") {
+        const user = JSON.parse(localStorage.getItem('user-info') as string)
+
+        this.authService.getClientProducts(user.clientId).pipe(takeUntil(this.destroy$)).subscribe({
+          next: (e) => {
+            if(e?.data){
+              this.productList = e.data?.planDetails?.product?.map((product:any)=> product.productName)                            
+
+              this.trialDetails = this.daysWithin14(e.data?.planDetails?.product[0]?.trialEndDate)
+            }
+
+          }
+        })
+        
+      }
+    })
+  }
+
+  daysWithin14(date: string) {
+    const currentDate = dayjs();
+    const givenDate = dayjs(date).add(2, 'day');
+    
+    let diff = givenDate.diff(currentDate, 'day');
+  
+    if (diff < 0) {
+      diff = 0;
+    }
+  
+    const percentageRemaining = Math.round(((14 - diff) / 14) * 100);
+  
+    return {
+      daysRemaining: diff <= 14 ? diff : 0,
+      percentageRemaining: diff <= 14 ? percentageRemaining : 100
+    };
+  }
+  
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+  ngOnInit(): void {
+    this.setPageData()
+  }
+
+
+  setPageData() {
+    this.pageInfo.setTitle('Explore')
+    this.pageInfo.setDescription('Explore your products while waiting for admin approval')
+    this.pageInfo.setBreadcrumbs([
+      { title: 'Explore', path: '/explore', isActive: false, isSeparator: false },
+      { title: 'Explore', path: '/explore', isActive: false, isSeparator: true },
+    ])
+  }
+ 
+
+  contactSupport() {
+    this.modalService.open(ContactSupportComponent, {
+      centered: true,
+      size: "md",
+    });
+  }
+
+  updateCircleChart(percentage: number): void {
+    let id = 'progress-circle';
+    let text = 'percentage-text';
+    const progressCircle = document.getElementById(id);
+    const percentageText = document.getElementById(text);
+    if (progressCircle && percentageText) {
+      const circumference = Math.PI * 2 * parseFloat(progressCircle.getAttribute('r')!);
+      const dasharray = circumference;
+      const dashoffset = circumference - (percentage / 100) * circumference;
+
+      progressCircle.setAttribute('stroke-dasharray', dasharray.toString());
+      progressCircle.setAttribute('stroke-dashoffset', dashoffset.toString());
+
+      percentageText.textContent = `${percentage}%`;
+    }
+  }
+
+  reDirectionUrl(){
+    this.router.navigateByUrl('/manage/summary');
+    
+  }
+}

package/src/lib/modules/layout/components/csm-assign-confirmation/csm-assign-confirmation.component.html

@@ -0,0 +1,44 @@
+<span class="mb-5">
+    <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect x="4" y="4" width="48" height="48" rx="24" fill="#FEF0C7" />
+        <rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFFAEB" stroke-width="8" />
+        <path
+            d="M27.9998 24V28M27.9998 32H28.0098M26.2898 18.86L17.8198 33C17.6451 33.3024 17.5527 33.6453 17.5518 33.9945C17.5508 34.3437 17.6413 34.6871 17.8142 34.9905C17.9871 35.2939 18.2365 35.5467 18.5375 35.7238C18.8385 35.9009 19.1806 35.9961 19.5298 36H36.4698C36.819 35.9961 37.1611 35.9009 37.4621 35.7238C37.7631 35.5467 38.0124 35.2939 38.1854 34.9905C38.3583 34.6871 38.4488 34.3437 38.4478 33.9945C38.4468 33.6453 38.3544 33.3024 38.1798 33L29.7098 18.86C29.5315 18.5661 29.2805 18.3231 28.981 18.1544C28.6814 17.9858 28.3435 17.8972 27.9998 17.8972C27.656 17.8972 27.3181 17.9858 27.0186 18.1544C26.7191 18.3231 26.468 18.5661 26.2898 18.86Z"
+            stroke="#DC6803" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+</span>
+
+<span class="mb-3 title">
+    {{name}} Assigned as Your CSM
+</span>
+
+<span class="mb-5 description">
+    {{name}} has been assigned as your Customer Success Manager (CSM). For inquiries about data management, store
+    operations, or user management, please contact {{name}}.
+</span>
+
+<span class="mb-5 sub-title">
+    Contact Information:
+</span>
+
+<span class="mb-5 description">
+    <ul>
+        <li>
+            Phone: {{mobile}}
+        </li>
+        <li>
+            Email: {{email}}
+        </li>
+    </ul>
+</span>
+
+<span class="mb-10 description">
+    Please approve {{name}}'s access to your data dashboard.
+</span>
+
+<div class="d-flex align-items-center justify-content-center" >
+        <button (click)="onSubmit('decline')" class="btn btn-outline btn-cust me-5">Decline</button>
+
+        <button (click)="onSubmit('approve')" class="btn btn-primary btn-cust">Approve</button>
+
+</div>

package/src/lib/modules/layout/components/csm-assign-confirmation/csm-assign-confirmation.component.scss

@@ -0,0 +1,28 @@
+:host {
+    padding: 24px;
+}
+
+.title {
+    color: #101828;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px;
+}
+
+.sub-title {
+    color: #667085;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+}
+
+.description {
+    color: #667085;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+}
+
+.btn-cust{
+    width: 25%;
+}

package/src/lib/modules/layout/components/csm-assign-confirmation/csm-assign-confirmation.component.spec.ts

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

package/src/lib/modules/layout/components/csm-assign-confirmation/csm-assign-confirmation.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'lib-csm-assign-confirmation',
+  templateUrl: './csm-assign-confirmation.component.html',
+  styleUrl: './csm-assign-confirmation.component.scss'
+})
+export class CsmAssignConfirmationComponent {
+
+  @Input() clientId:string
+  @Input() email:string
+  @Input() mobile:string
+  @Input() name:string
+
+  constructor(private activeModal:NgbActiveModal){
+
+  }
+
+  onSubmit(value:string){
+    this.activeModal.close({clientId:this.clientId, action:value})
+  }
+
+}

package/src/lib/modules/layout/content/content.component.html

@@ -0,0 +1,12 @@
+<ng-container *ngIf="appContentContiner">
+  <!--begin::Content container-->
+  <div id="kt_app_content_container" class="app-container"
+    [ngClass]="appContentContainerClass + ' ' + contentContainerCSSClass"
+    [ngClass]="{'container-xxl': appContentContiner === 'fixed', 'container-fluid': appContentContiner === 'fluid'}">
+    <router-outlet></router-outlet>
+  </div>
+  <!--end::Content container-->
+</ng-container>
+<ng-container *ngIf="!appContentContiner">
+  <router-outlet></router-outlet>
+</ng-container>

package/src/lib/modules/layout/content/content.component.ts

@@ -0,0 +1,102 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationCancel, NavigationEnd, Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Subscription } from 'rxjs/internal/Subscription';
+import { CsmAssignConfirmationComponent } from '../components/csm-assign-confirmation/csm-assign-confirmation.component';
+import { AuthService } from '../../../services/auth.service';
+import { ToastService } from '../../../services/toast.service';
+// import { DrawerComponent } from '../../../kt/components';
+@Component({
+  selector: 'lib-content',
+  templateUrl: './content.component.html',
+  styleUrls: ['./content.component.scss'],
+})
+export class ContentComponent implements OnInit, OnDestroy {
+  @Input() contentContainerCSSClass: string = '';
+  @Input() appContentContiner?: 'fixed' | 'fluid';
+  @Input() appContentContainerClass: string = '';
+
+  private unsubscribe: Subscription[] = [];
+
+  constructor(private router: Router, private modalService: NgbModal, private authService:AuthService, private toastService:ToastService) { }
+
+  ngOnInit(): void {
+    this.routingChanges();
+    this.getAssignedUsers()
+  }
+
+  routingChanges() {
+    const routerSubscription = this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
+        // DrawerComponent.hideAll();
+      }
+    });
+    this.unsubscribe.push(routerSubscription);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+
+  confirmCsmAssign(clientId:string, email?:string, mobile?:string, name?:string ) {
+    const modalRef = this.modalService.open(CsmAssignConfirmationComponent, {
+      centered: true, size: 'md', scrollable: true,
+    });
+
+    modalRef.componentInstance.clientId = clientId;
+    modalRef.componentInstance.email = email;
+    modalRef.componentInstance.mobile = mobile;
+    modalRef.componentInstance.name = name;
+
+    modalRef.result.then((result: any) => {
+      if(result.action === 'approve' || result.action === 'decline'){
+        let data = {
+          action: result.action
+        }
+
+        this.authService.csmAssignClientAction(result.clientId, data).subscribe({
+          next:(e)=>{
+            this.toastService.getSuccessToast(e.message)
+          },
+          error:(e)=>{
+            this.toastService.getErrorToast('Update failed')
+          }
+        })
+      }
+    })
+  }
+
+  getAssignedUsers(){
+    let userData:any = localStorage.getItem('user-info')
+    if (userData) {
+      userData = JSON.parse(userData)
+      if (userData.role === 'superadmin' && userData.userType === 'client') {
+        this.authService.checkToShowPopup(userData?.clientId).subscribe({
+          next:(res)=>{
+            if(res.data.notifyCsmAssign){
+              this.getCsmDetail(userData?.clientId)
+            }
+            
+          }
+        })
+      }
+
+    }
+
+  }
+
+  getCsmDetail(clientId:string){
+    this.authService.getAssignedUsers(clientId).subscribe({
+      next:(e)=>{
+        if(e?.data?.result?.length){
+          e?.data?.result.forEach((element:any) => {
+            if(element.tangoUserType === 'csm'){
+              const csm = element?.assignedUser?.[0]
+              this.confirmCsmAssign(clientId, csm?.email, csm?.mobileNumber, csm?.userName)
+            }
+          });
+        }        
+      }
+    })
+  }
+}

package/src/lib/modules/layout/footer/footer.component.html

@@ -0,0 +1,29 @@
+<ng-container *ngIf="appFooterContainerCSSClass">
+  <!--begin::Footer container-->
+  <div class="app-container header-style mt-5" [ngClass]="appFooterContainerCSSClass">
+    <ng-container *ngTemplateOutlet="footerView"></ng-container>
+  </div>
+  <!--end::Footer container-->
+</ng-container>
+
+<ng-container *ngIf="!appFooterContainerCSSClass">
+  <ng-container *ngTemplateOutlet="footerView"></ng-container>
+</ng-container>
+
+<ng-template #footerView>
+  <!--begin::Copyright-->
+  <div class="text-gray-900 order-2 order-md-1">
+    <span class="text-muted fw-semibold me-1">{{currentDateStr}}&copy;</span>
+    <a target="_blank" href="https://tangoeye.ai" class="footer text-gray-800 text-hover-primary">Tango IT Solutions India Pvt Ltd</a>
+  </div>
+  <!--end::Copyright-->
+
+  <!--begin::Menu-->
+  <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1 me-7">
+    <li class="menu-item footer"><a target="_blank" href="https://tangoeye.ai/#aboutus" class="menu-link px-5">About us</a></li>
+    <li class="menu-item footer"><a target="_blank" href="https://tangoeye.ai/#contact"  class="menu-link px-5">Contact Us</a></li>
+    <li class="menu-item footer"><a target="_blank" href="https://tangoeye.ai/privacy-policy-2/" class="menu-link px-5">Privacy & policy</a></li>
+</ul>
+  <!--end::Menu-->
+
+</ng-template>

package/src/lib/modules/layout/footer/footer.component.scss

@@ -0,0 +1,7 @@
+.header-style{
+    background-color: #FFF;
+}
+
+.header-border{
+    border-bottom: 1px solid #EAECF0;
+}

package/src/lib/modules/layout/footer/footer.component.spec.ts

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

package/src/lib/modules/layout/footer/footer.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'lib-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss'],
+})
+export class FooterComponent {
+  @Input() appFooterContainerCSSClass: string = '';
+
+  currentDateStr: string = new Date().getFullYear().toString();
+  constructor() {}
+}

package/src/lib/modules/layout/header/header-menu/header-menu.component.html

@@ -0,0 +1,27 @@
+<ng-container *ngIf="title$ | async as title">
+  <!-- begin::Title -->
+  <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 mt-7 mb-0 flex-column justify-content-center">
+    {{ title }}
+    <ng-container *ngIf="appPageTitleDescription">
+      <ng-container *ngIf="description$ | async as description">
+
+
+        <!--begin::Description-->
+        <span class="page-desc text-muted fs-7 fw-semibold mt-2" [ngClass]="{'pt-2': appPageTitleDirection === 'column'}">
+          <ng-container *ngIf="appPageTitleDirection === 'row'">
+            <!--begin::Separator-->
+            <span class="h-20px border-1 border-gray-300 border-start ms-3 mx-2"></span>
+            <!--end::Separator-->
+          </ng-container>
+
+          <!-- {{description}} -->
+        </span>
+        <!--end::Description-->
+      </ng-container>
+
+    </ng-container>
+
+  </h1>
+  <!-- end::Title -->
+
+</ng-container>

package/src/lib/modules/layout/header/header-menu/header-menu.component.scss

@@ -0,0 +1,4 @@
+:host {
+  height: inherit;
+  width: inherit;
+}

package/src/lib/modules/layout/header/header-menu/header-menu.component.spec.ts

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

package/src/lib/modules/layout/header/header-menu/header-menu.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { PageInfoService } from 'tango-app-ui-global';
+
+
+@Component({
+  selector: 'lib-header-menu',
+  templateUrl: './header-menu.component.html',
+  styleUrls: ['./header-menu.component.scss'],
+})
+export class HeaderMenuComponent implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+
+  @Input() appPageTitleDirection: string = '';
+  @Input() appPageTitleDescription: boolean = true;
+
+  title$: Observable<string>;
+  description$: Observable<string>;
+
+  constructor(private pageInfo: PageInfoService, private cd:ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    this.title$ = this.pageInfo.title.asObservable();
+    this.description$ = this.pageInfo.description.asObservable();
+
+    this.title$.subscribe((e)=>{
+      this.cd.detectChanges()
+    })
+    this.description$.subscribe((e)=>{
+      this.cd.detectChanges()
+    })
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}
+

package/src/lib/modules/layout/header/header.component.html

@@ -0,0 +1,90 @@
+<!--begin::Header container-->
+<div class="app-container header-style" id="kt_app_header_container" [ngClass]="headerContainerCssClass">
+  <ng-container *ngIf="appSidebarDefaultCollapseDesktopEnabled">
+    <div class="app-sidebar-collapse-d-flex align-items-center me-3">
+      <!--begin::sidebar toggle-->
+      <div class="btn btn-icon w-auto px-0 btn-color-muted btn-active-icon-primary" data-kt-toggle="true"
+        data-kt-toggle-target="body" data-kt-toggle-mode="on" data-kt-toggle-name="app-sidebar-collapse">
+        <lib-keenicon name="double-right" class="fs-1"></lib-keenicon>
+      </div>
+      <!--end::sidebar toggle-->
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="appSidebarDisplay">
+    <!--begin::sidebar mobile toggle-->
+    <div class="d-flex align-items-center d-lg-none ms-n2 me-2" title="Show sidebar menu">
+      <div class="btn btn-icon btn-active-color-primary w-35px h-35px" id="kt_app_sidebar_mobile_toggle">
+        <lib-keenicon name="abstract-14" class="fs-1"></lib-keenicon>
+      </div>
+    </div>
+    <!--end::sidebar mobile toggle-->
+    <!--begin::Mobile logo-->
+    <div class="d-flex align-items-center flex-grow-1 flex-lg-grow-0">
+      <a  class="d-lg-none">
+        <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo.svg" class="h-30px" />
+      </a>
+    </div>
+    <!--end::Mobile logo-->
+  </ng-container>
+
+  <ng-container *ngIf="!appSidebarDisplay">
+    <!--begin::Logo-->
+    <div class="d-flex align-items-center flex-grow-1 flex-lg-grow-0 me-lg-15">
+      <a >
+        <ng-container *ngIf="currentLayoutType === 'dark-header'">
+          <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo.svg"
+            class="h-20px h-lg-30px app-sidebar-logo-default" />
+        </ng-container>
+        <ng-container *ngIf="currentLayoutType !== 'dark-header'">
+          <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo.svg"
+            class="h-20px h-lg-30px app-sidebar-logo-default theme-light-show" />
+          <img alt="Logo" src="./assets/tango/sidemenu-icons/tango_logo.svg"
+            class="h-20px h-lg-30px app-sidebar-logo-default theme-dark-show" />
+        </ng-container>
+      </a>
+    </div>
+    <!--end::Logo-->
+  </ng-container>
+
+  <!--begin::Header wrapper-->
+  <div class="d-flex align-items-stretch justify-content-between flex-lg-grow-1 header-border" id="kt_app_header_wrapper">
+    <ng-container *ngIf="appHeaderDefaultContent === 'menu' && appHeaderDefaulMenuDisplay">
+      <!--begin::Menu wrapper-->
+      <div class="
+    app-header-menu
+    app-header-mobile-drawer
+    align-items-stretch
+" data-kt-drawer="true" data-kt-drawer-name="app-header-menu" data-kt-drawer-activate="{default: true, lg: false}"
+        data-kt-drawer-overlay="true" data-kt-drawer-width="225px" data-kt-drawer-direction="end"
+        data-kt-drawer-toggle="#kt_app_header_menu_toggle" data-kt-swapper="true"
+        data-kt-swapper-mode="{default: 'append', lg: 'prepend'}"
+        data-kt-swapper-parent="{default: '#kt_app_body', lg: '#kt_app_header_wrapper'}">
+        <!--begin::Menu-->
+        <lib-header-menu
+        appPageTitleDirection = ''
+        [appPageTitleDescription] = true
+        class="
+        menu
+        menu-rounded
+        menu-column
+        menu-lg-row
+        my-5
+        my-lg-0
+        align-items-stretch
+        fw-semibold
+        px-2 px-lg-0
+    " id="kt_app_header_menu" data-kt-menu="true"></lib-header-menu>
+        <!--end::Menu-->
+      </div>
+      <!--end::Menu wrapper-->
+    </ng-container>
+    <!-- <ng-container *ngIf="appHeaderDefaultContent === 'page-title' && appPageTitleDisplay">
+      <app-page-title #ktPageTitle class="page-title d-flex"></app-page-title>
+    </ng-container> -->
+    <lib-navbar class="app-navbar flex-shrink-0" [appHeaderDefaulMenuDisplay]="appHeaderDefaulMenuDisplay"
+      [isRtl]="false"></lib-navbar>
+  </div>
+  <!--end::Header wrapper-->
+</div>
+<!--end::Header container-->

package/src/lib/modules/layout/header/header.component.scss

@@ -0,0 +1,7 @@
+.header-style{
+    background-color: #FFF;
+}
+
+// .header-border{
+//     border-bottom: 1px solid #EAECF0;
+// }

package/src/lib/modules/layout/header/header.component.spec.ts

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