tango-app-ui-shared 3.0.0

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

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

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-sidebar-menu',
+  templateUrl: './sidebar-menu.component.html',
+  styleUrls: ['./sidebar-menu.component.scss']
+})
+export class SidebarMenuComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,16 @@
+<!--begin::Logo-->
+<lib-sidebar-logo class="app-sidebar-logo px-6" id="kt_app_sidebar_logo"
+  [toggleButtonClass]="toggleButtonClass" [toggleEnabled]="toggleEnabled" [toggleType]="toggleType"
+  [toggleState]="toggleState">
+</lib-sidebar-logo>
+<!--end::Logo-->
+
+<!--begin::sidebar menu-->
+<lib-sidebar-menu class="app-sidebar-menu overflow-hidden flex-column-fluid">
+</lib-sidebar-menu>
+<!--end::sidebar menu-->
+
+<!--begin::Footer-->
+<lib-sidebar-footer class="app-sidebar-footer flex-column-auto pt-2 pb-6 px-6" id="kt_app_sidebar_footer">
+</lib-sidebar-footer>
+<!--end::Footer-->

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

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

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

@@ -0,0 +1,203 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { LayoutService } from 'tango-app-metronics';
+import { ILayout, LayoutType } from 'tango-app-metronics/lib/layout/core/configs/config';
+
+@Component({
+  selector: 'lib-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss'],
+})
+export class SidebarComponent implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+
+  // public props
+  appSidebarDisplay: boolean;
+  appSidebarDefaultFixedDesktop: boolean;
+  appSidebarDefaultMinimizeDesktopEnabled: boolean;
+  appSidebarDefaultMinimizeDesktopDefault: boolean;
+  appSidebarDefaultMinimizeDesktopHoverable: boolean;
+  appSidebarDefaultMinimizeMobileEnabled: boolean;
+  appSidebarDefaultMinimizeMobileDefault: boolean;
+  appSidebarDefaultMinimizeMobileHoverable: boolean;
+  appSidebarDefaultCollapseDesktopEnabled: boolean;
+  appSidebarDefaultCollapseDesktopDefault: boolean;
+  appSidebarDefaultCollapseMobileEnabled: boolean;
+  appSidebarDefaultCollapseMobileDefault: boolean;
+
+  appSidebarDefaultPushHeader: boolean;
+  appSidebarDefaultPushToolbar: boolean;
+  appSidebarDefaultPushFooter: boolean;
+
+  appSidebarDefaultStacked: boolean;
+
+  // logo
+  appSidebarDefaultMinimizeDefault: boolean;
+  toggleButtonClass: string;
+  toggleEnabled: boolean;
+  toggleType: string;
+  toggleState: string;
+
+  constructor(private layout: LayoutService) {}
+
+  ngOnInit(): void {
+    const subscr = this.layout.layoutConfigSubject
+      .asObservable()
+      .subscribe((config: ILayout) => {
+        this.updateProps(config);
+      });
+    this.unsubscribe.push(subscr);
+  }
+
+  updateProps(config: ILayout) {
+    this.appSidebarDisplay = this.layout.getProp('app.sidebar.display', config) as boolean;
+    if (!this.appSidebarDisplay) {
+      return;
+    }
+
+    this.appSidebarDefaultFixedDesktop = this.layout.getProp(
+      'app.sidebar.default.fixed.desktop',
+      config
+    ) as boolean;
+
+    this.appSidebarDefaultMinimizeDesktopEnabled = this.layout.getProp(
+      'app.sidebar.default.minimize.desktop.enabled',
+      config
+    ) as boolean;
+    if (this.appSidebarDefaultMinimizeDesktopEnabled) {
+      this.appSidebarDefaultMinimizeDesktopDefault = this.layout.getProp(
+        'app.sidebar.default.minimize.desktop.default',
+        config
+      ) as boolean;
+      // if (this.appSidebarDefaultMinimizeDesktopDefault) {
+        document.body.setAttribute('data-kt-app-sidebar-minimize', 'on');
+      // }
+
+      this.appSidebarDefaultMinimizeDesktopHoverable = this.layout.getProp(
+        'app.sidebar.default.minimize.desktop.hoverable',
+        config
+      ) as boolean;
+      if (this.appSidebarDefaultMinimizeDesktopHoverable) {
+        document.body.setAttribute('data-kt-app-sidebar-hoverable', 'true');
+      }
+    }
+
+    this.appSidebarDefaultMinimizeMobileEnabled = this.layout.getProp(
+      'app.sidebar.default.minimize.mobile.enabled',
+      config
+    ) as boolean;
+    if (this.appSidebarDefaultMinimizeMobileEnabled) {
+      this.appSidebarDefaultMinimizeMobileDefault = this.layout.getProp(
+        'app.sidebar.default.minimize.mobile.default',
+        config
+      ) as boolean;
+      // if (this.appSidebarDefaultMinimizeMobileDefault) {
+        document.body.setAttribute('data-kt-app-sidebar-minimize-mobile', 'on');
+      // }
+
+      this.appSidebarDefaultMinimizeMobileHoverable = this.layout.getProp(
+        'app.sidebar.default.minimize.mobile.hoverable',
+        config
+      ) as boolean;
+      if (this.appSidebarDefaultMinimizeMobileHoverable) {
+        document.body.setAttribute(
+          'data-kt-app-sidebar-hoverable-mobile',
+          'true'
+        );
+      }
+    }
+
+    this.appSidebarDefaultCollapseDesktopEnabled = this.layout.getProp(
+      'app.sidebar.default.collapse.desktop.enabled',
+      config
+    ) as boolean;
+    if (this.appSidebarDefaultCollapseDesktopEnabled) {
+      this.appSidebarDefaultCollapseDesktopDefault = this.layout.getProp(
+        'app.sidebar.default.collapse.desktop.default',
+        config
+      ) as boolean;
+      if (this.appSidebarDefaultCollapseDesktopDefault) {
+        document.body.setAttribute('data-kt-app-sidebar-collapse', 'on');
+      }
+    }
+
+    this.appSidebarDefaultCollapseMobileEnabled = this.layout.getProp(
+      'app.sidebar.default.collapse.mobile.enabled',
+      config
+    ) as boolean;
+    if (this.appSidebarDefaultCollapseMobileEnabled) {
+      this.appSidebarDefaultCollapseMobileDefault = this.layout.getProp(
+        'app.sidebar.default.collapse.mobile.default',
+        config
+      ) as boolean;
+      if (this.appSidebarDefaultCollapseMobileDefault) {
+        document.body.setAttribute('data-kt-app-sidebar-collapse-mobile', 'on');
+      }
+    }
+
+    if (this.layout.getProp('app.sidebar.default.push')) {
+      this.appSidebarDefaultPushHeader = this.layout.getProp(
+        'app.sidebar.default.push.header',
+        config
+      ) as boolean;
+      if (this.appSidebarDefaultPushHeader) {
+        document.body.setAttribute('data-kt-app-sidebar-push-header', 'true');
+      }
+
+      this.appSidebarDefaultPushToolbar = this.layout.getProp(
+        'app.sidebar.default.push.toolbar',
+        config
+      ) as boolean;
+      if (this.appSidebarDefaultPushToolbar) {
+        document.body.setAttribute('data-kt-app-sidebar-push-toolbar', 'true');
+      }
+
+      this.appSidebarDefaultPushFooter = this.layout.getProp(
+        'app.sidebar.default.push.footer',
+        config
+      ) as boolean;
+      if (this.appSidebarDefaultPushFooter) {
+        document.body.setAttribute('data-kt-app-sidebar-push-footer', 'true');
+      }
+    }
+
+    this.appSidebarDefaultStacked = this.layout.getProp(
+      'app.sidebar.default.stacked',
+      config
+    ) as boolean;
+    if (this.appSidebarDefaultStacked) {
+      document.body.setAttribute('app-sidebar-stacked', 'true');
+    }
+
+    // Logo
+    this.appSidebarDefaultMinimizeDefault = this.layout.getProp(
+      'app.sidebar.default.minimize.desktop.default',
+      config
+    ) as boolean;
+    this.toggleButtonClass = this.appSidebarDefaultMinimizeDefault
+      ? 'active'
+      : '';
+    this.toggleEnabled =
+      this.appSidebarDefaultMinimizeDesktopEnabled ||
+      this.appSidebarDefaultCollapseDesktopEnabled;
+    if (this.appSidebarDefaultMinimizeDesktopEnabled) {
+      this.toggleType = 'minimize';
+      this.toggleState = 'active';
+    }
+
+    if (this.appSidebarDefaultCollapseDesktopEnabled) {
+      this.toggleType = 'collapse';
+      this.toggleState = '';
+    }
+
+    document.body.setAttribute('data-kt-app-sidebar-enabled', 'true');
+    document.body.setAttribute(
+      'data-kt-app-sidebar-fixed',
+      this.appSidebarDefaultFixedDesktop.toString()
+    );
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}

package/src/lib/modules/layout/toolbar/accounting/accounting.component.html

@@ -0,0 +1,84 @@
+<!--begin::Input group-->
+<div class="d-flex align-items-center flex-shrink-0">
+  <!--begin::Label-->
+  <span class="fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block">Actions:</span>
+  <!--end::Label-->
+
+  <!--begin::Actions-->
+  <div class="d-flex flex-shrink-0">
+    <!--begin::Button-->
+    <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Add a team member">
+      <a href="#" class="btn btn-sm btn-icon btn-active-color-success">
+        <lib-keenicon name="plus-square" class="fs-2x"></lib-keenicon>
+      </a>
+    </div>
+    <!--end::Button-->
+
+    <!--begin::Button-->
+    <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Create new account">
+      <a href="#" class="btn btn-sm btn-icon btn-active-color-success">
+        <lib-keenicon name="gen037.svg" class="fs-2x"></lib-keenicon>
+      </a>
+    </div>
+    <!--end::Button-->
+
+    <!--begin::Button-->
+    <div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Invite friends">
+      <a href="#" class="btn btn-sm btn-icon btn-active-color-success">
+        <lib-keenicon name="dots-square" class="fs-2x"></lib-keenicon>
+      </a>
+    </div>
+    <!--end::Button-->
+  </div>
+  <!--end::Actions-->
+</div>
+<!--end::Input group-->
+
+<!--begin::Input group-->
+<div class="d-flex align-items-center flex-shrink-0">
+  <!--begin::Desktop separartor-->
+  <div class="bullet bg-secondary h-35px w-1px mx-5"></div>
+  <!--end::Desktop separartor-->
+
+  <!--begin::Label-->
+  <span class="fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block">Progress:</span>
+  <!--end::Label-->
+
+  <div class="progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success">
+    <div class="progress-bar rounded bg-success fs-7 fw-bold" role="progressbar" style="width: 72%;" aria-valuenow="72"
+      aria-valuemin="0" aria-valuemax="100">72%</div>
+  </div>
+</div>
+<!--end::Input group-->
+<!--end::Toolbar start-->
+
+<!--begin::Toolbar end-->
+<div class="d-flex align-items-center">
+  <!--begin::Input group-->
+  <div class="me-3">
+    <!--begin::Select-->
+    <select class="form-select form-select-sm form-select-solid" data-control="select2" data-placeholder="Latest"
+      data-hide-search="true">
+      <option value=""></option>
+      <option value="1" selected>Today 16 Feb</option>
+      <option value="2">In Progress</option>
+      <option value="3">Done</option>
+    </select>
+    <!--end::Select-->
+  </div>
+  <!--end::Input group--->
+
+  <!--begin::Input group--->
+  <div class="m-0">
+    <!--begin::Select-->
+    <select class="form-select form-select-sm form-select-solid w-md-125px" data-control="select2"
+      data-placeholder="Filters" data-hide-search="true">
+      <option value=""></option>
+      <option value="1" selected>Filters</option>
+      <option value="2">In Progress</option>
+      <option value="3">Done</option>
+    </select>
+    <!--end::Content-->
+  </div>
+  <!--end::Input group--->
+</div>

package/src/lib/modules/layout/toolbar/accounting/accounting.component.spec.ts

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

package/src/lib/modules/layout/toolbar/accounting/accounting.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-accounting',
+  templateUrl: './accounting.component.html',
+  styleUrls: ['./accounting.component.scss']
+})
+export class AccountingComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/lib/modules/layout/toolbar/classic/classic.component.html

@@ -0,0 +1,37 @@
+<ng-container *ngIf="appToolbarFilterButton">
+  <!--begin::Filter menu-->
+  <div class="m-0">
+    <!--begin::Menu toggle-->
+    <a href="#" class="btn btn-sm btn-flex fw-bold" [ngClass]="daterangepickerButtonClass" data-kt-menu-trigger="click"
+      data-kt-menu-placement="bottom-end">
+      <lib-keenicon name="filter" class="fs-6 text-muted me-1"></lib-keenicon>
+      Filter
+    </a>
+    <!--end::Menu toggle-->
+
+    <!-- <lib-dropdown-menu1></lib-dropdown-menu1> -->
+  </div>
+  <!--end::Filter menu-->
+</ng-container>
+
+<ng-container *ngIf="appToolbarDaterangepickerButton">
+  <div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left"
+    class="btn btn-sm fw-bold  d-flex align-items-center px-4" [ngClass]="daterangepickerButtonClass">
+    <!--begin::Display range-->
+    <div class="text-gray-600 fw-bold">
+      Loading date range...
+    </div>
+    <!--end::Display range-->
+    <lib-keenicon name="calendar-8" class="fs-1 ms-2 me-0"></lib-keenicon>
+  </div>
+</ng-container>
+
+<!--begin::Secondary button-->
+<a href="javascript:;" class="btn btn-sm btn-flex btn-light fw-bold">
+  Filter
+</a>
+<!--end::Secondary button-->
+
+<!--begin::Primary button--> 
+<a href="javascript:;" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Create</a>
+<!--end::Primary button-->

package/src/lib/modules/layout/toolbar/classic/classic.component.spec.ts

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

package/src/lib/modules/layout/toolbar/classic/classic.component.ts

@@ -0,0 +1,88 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { LayoutService } from 'tango-app-metronics';
+
+@Component({
+  selector: 'lib-classic',
+  templateUrl: './classic.component.html',
+  styleUrls: ['./classic.component.scss'],
+})
+export class ClassicComponent implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+  appToolbarPrimaryButton: boolean;
+  appToolbarPrimaryButtonLabel: string = '';
+  appToolbarPrimaryButtonUrl: string = '';
+  appToolbarPrimaryButtonModal: string = '';
+  appToolbarSecondaryButton: boolean;
+  appToolbarFixedDesktop: boolean;
+  appToolbarSecondaryButtonLabel: string = '';
+  appToolbarSecondaryButtonUrl: string = '';
+  appToolbarSecondaryButtonModal: string = '';
+  appToolbarFilterButton: boolean;
+  appToolbarDaterangepickerButton: boolean;
+  secondaryButtonClass: string = '';
+  filterButtonClass: string = '';
+  daterangepickerButtonClass: string = '';
+
+  constructor(private layout: LayoutService) {}
+
+  ngOnInit(): void {
+    this.updateProps();
+    const subscr = this.layout.layoutConfigSubject
+      .asObservable()
+      .subscribe(() => {
+        this.updateProps();
+      });
+    this.unsubscribe.push(subscr);
+  }
+
+  updateProps() {
+    this.appToolbarPrimaryButton = this.layout.getProp(
+      'app.toolbar.primaryButton'
+    ) as boolean;
+    this.appToolbarPrimaryButtonLabel = this.layout.getProp(
+      'app.toolbar.primaryButtonLabel'
+    ) as string;
+    this.appToolbarPrimaryButtonUrl = this.layout.getProp(
+      'app.toolbar.primaryButtonUrl'
+    ) as string;
+    this.appToolbarPrimaryButtonModal = this.layout.getProp(
+      'app.toolbar.primaryButtonModal'
+    ) as string;
+    this.appToolbarSecondaryButton = this.layout.getProp(
+      'app.toolbar.secondaryButton'
+    ) as boolean;
+    this.secondaryButtonClass = this.appToolbarFixedDesktop
+      ? 'btn-light'
+      : 'bg-body btn-color-gray-700 btn-active-color-primary';
+    this.appToolbarFixedDesktop = this.layout.getProp(
+      'appToolbarFixedDesktop'
+    ) as boolean;
+    this.appToolbarSecondaryButtonLabel = this.layout.getProp(
+      'appToolbarSecondaryButtonLabel'
+    ) as string;
+    this.appToolbarSecondaryButtonUrl = this.layout.getProp(
+      'appToolbarSecondaryButtonUrl'
+    ) as string;
+    this.appToolbarSecondaryButtonModal = this.layout.getProp(
+      'appToolbarSecondaryButtonModal'
+    ) as string;
+    this.appToolbarFilterButton = this.layout.getProp(
+      'appToolbarFilterButton'
+    ) as boolean;
+    this.appToolbarDaterangepickerButton = this.layout.getProp(
+      'appToolbarDaterangepickerButton'
+    ) as boolean;
+
+    this.filterButtonClass = this.appToolbarFixedDesktop
+      ? 'btn-light'
+      : 'bg-body btn-color-gray-600 btn-active-color-primary';
+    this.daterangepickerButtonClass = this.appToolbarFixedDesktop
+      ? 'btn-light'
+      : 'bg-body btn-color-gray-700 btn-active-color-primary';
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+}

package/src/lib/modules/layout/toolbar/extended/extended.component.html

@@ -0,0 +1,100 @@
+<!--begin::Label-->
+<span class="fs-7 fw-bold text-gray-700 pe-4 d-none d-md-block">Team:</span>
+<!--end::Label-->
+
+<!--begin::Users-->
+<div class="symbol-group symbol-hover flex-shrink-0 me-2">
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <div class="symbol-label fw-bold bg-warning text-inverse-warning">A</div>
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <img src="./assets/media/avatars/300-1.jpg" alt="" />
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <img src="./assets/media/avatars/300-2.jpg" alt="" />
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <div class="symbol-label fw-bold bg-primary text-inverse-primary">S</div>
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <img src="./assets/media/avatars/300-5.jpg" alt="" />
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <div class="symbol-label fw-bold bg-danger text-inverse-danger">P</div>
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <img src="./assets/media/avatars/300-20.jpg" alt="" />
+  </div>
+  <!--end::User-->
+</div>
+<!--end::Users-->
+
+<!--begin::Button-->
+<div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Invite a team member">
+  <a href="#" class="btn btn-sm btn-icon">
+    <lib-keenicon name="plus-square" class="fs-2hx text-success"></lib-keenicon>
+  </a>
+</div>
+<!--end::Button-->
+<!--end::Toolbar start-->
+
+<!--begin::Toolbar end-->
+<div class="d-flex align-items-center overflow-auto">
+  <!--begin::Search-->
+  <div class="position-relative my-1">
+    <lib-keenicon name="magnifier" class="fs-3 text-gray500 position-absolute top-50 translate-middle ps-10"></lib-keenicon>
+    <input type="text" class="form-control form-control-sm form-control-solid w-150px ps-10" name="Search Team" value=""
+      placeholder="Search Team" />
+  </div>
+  <!--end::Search-->
+
+  <!--begin::Separartor-->
+  <div class="bullet bg-secondary h-35px w-1px mx-6"></div>
+  <!--end::Separartor-->
+
+  <!--begin::Label-->
+  <span class="fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block">Sort By:</span>
+  <!--end::Label-->
+
+  <!--begin::Select-->
+  <select class="form-select form-select-sm w-125px form-select-solid me-6" data-control="select2"
+    data-placeholder="Latest" data-hide-search="true">
+    <option value=""></option>
+    <option value="1" selected>Latest</option>
+    <option value="2">In Progress</option>
+    <option value="3">Done</option>
+  </select>
+  <!--end::Select-->
+
+  <!--begin::Actions-->
+  <div class="d-flex align-items-center">
+    <button type="button" class="btn btn-sm btn-icon btn-light-primary me-3" data-bs-toggle="tooltip"
+      data-bs-placement="top" title="Enable grid view">
+      <lib-keenicon name="element-11" class="fs-3 text-primary"></lib-keenicon>
+    </button>
+
+    <button type="button" class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-placement="top"
+      title="Enable row view">
+      <lib-keenicon name="row-horizontal" class="fs-3 text-gray400"></lib-keenicon>
+    </button>
+  </div>
+  <!--end::Actions-->