tango-app-ui-shared 3.5.1-task.2 → 3.5.1-task.3

package/src/lib/modules/layout/toolbar/client-settings/client-settings.component.ts

@@ -1,91 +0,0 @@
-import { ChangeDetectorRef, Component } from '@angular/core';
-import { AuthService } from '../../../../services/auth.service';
-import { GlobalStateService } from 'tango-app-ui-global';
-
-@Component({
-  selector: 'lib-client-settings',
-  templateUrl: './client-settings.component.html',
-  styleUrl: './client-settings.component.scss'
-})
-export class ClientSettingsComponent {
-
-  clientList:any = []
-  selectedClient:any
-  selectedFilters: any = {
-    client: null,
-    clientName: null,
-    clients: [],
-    store: null,
-    stores: [],
-    date: null,
-    group: [],
-    location: [],
-
-  };
-  constructor(private auth:AuthService, private gs:GlobalStateService, private cd:ChangeDetectorRef){
-    this.auth.getClients().subscribe({
-      next: (e) => {
-        if (e) {
-          this.clientList = e.data.result;
-          const headerFilters: any = JSON.parse(
-            localStorage.getItem("header-filters") || "{}"
-          );
-          if (headerFilters.client) {
-            this.clientList.find((obj: any) => {
-              if (obj.clientId === headerFilters.client) {
-                this.selectedClient = obj;
-              }
-            });
-            this.selectedFilters.client = headerFilters.client;
-            this.selectedFilters.clients = headerFilters.clients;
-            this.selectedFilters.clientName = headerFilters.clientName
-            this.selectedFilters.date = headerFilters.date;
-            this.selectedFilters.store =  headerFilters.store;
-            this.gs.dataRangeValue.next(this.selectedFilters);
-        } else {
-          this.selectedClient = this.clientList[0];
-          this.selectedFilters.client =  this.selectedClient.clientId;
-          this.selectedFilters.clientName = this.selectedClient.clientName
-          this.selectedFilters.clients = headerFilters.clients;
-          this.selectedFilters.store =  headerFilters.store;
-          this.selectedFilters.date = headerFilters.date;
-          localStorage.setItem(
-            "header-filters",
-            JSON.stringify(this.selectedFilters) 
-          );
-          this.gs.dataRangeValue.next(this.selectedFilters);
-          this.cd.detectChanges();
-        }
-      } else {
-        this.selectedClient = this.clientList[0];
-        this.selectedFilters.client =  this.selectedClient.clientId;
-        this.selectedFilters.clientName = this.selectedClient.clientName
-        localStorage.setItem(
-          "header-filters",
-          JSON.stringify(this.selectedFilters) 
-        );
-        this.gs.dataRangeValue.next(this.selectedFilters);
-        this.cd.detectChanges();
-      }
-      },
-    });
-  }
-
-  onClientSelect(event:any){
-    this.selectedClient = event
-    const headerFilters: any = JSON.parse(
-      localStorage.getItem("header-filters") || "{}"
-    );
-    this.selectedFilters = headerFilters;
-    this.selectedFilters.client = this.selectedClient.clientId;
-    this.selectedFilters.clientName = this.selectedClient.clientName;
-    this.selectedFilters.stores =[];
-    this.selectedFilters.group= [];
-    this.selectedFilters.location= [];
-    localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
-    // this.gs.dataRangeValue.next(this.selectedFilters);
-    window.location.reload()
-    this.cd.detectChanges();
-  }
-
-}

package/src/lib/modules/layout/toolbar/date-single-select/date-single-select.component.html

@@ -1,22 +0,0 @@
-<div class="wrapper mx-2" >
-    <lib-select [items]="clientList" [multi]="false" [searchField]="'clientName'" [disabled]="false" [idField]="'clientId'"
-        (selected)="onClientSelect($event)" [selectedValues]="[selectedClient]"></lib-select>
-
-        
-</div>
-<div class="d-flex align-items-center position-relative my-1">
-    <span class="svg-icon svg-icon-1 position-absolute ms-3">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path
-                d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
-                stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-    </span>
-    <input class="fx-date-range form-control ps-14" style="min-width: 260px !important;" type="text" matInput ngxDaterangepickerMd [drops]="'down'"
-        [opens]="'right'" [ranges]="ranges" [showCustomRangeLabel]="true" [alwaysShowCalendars]="false" [autoApply]="true"
-        [keepCalendarOpeningWithRange]="true" [showCancel]="true" autocomplete="off" [(ngModel)]="selectedDateRange" (startDateChanged)="onStartDateChange($event)"  [isCustomDate]="isCustomDate"
-        [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
-        (datesUpdated)="datechange($event)" name="daterange" [readonly]="true" />
-</div>
-
-<div class="btn btn-primary ms-2" (click)="Apply()">Apply</div>

package/src/lib/modules/layout/toolbar/date-single-select/date-single-select.component.scss

@@ -1,156 +0,0 @@
-.daterangepicker {
-    display: block !important;
-    top: 153.85px !important;
-    left: 900px !important;
-    right: 0px;
-}
-.form-control {
-    color: var(--Gray-700, #344054) !important;
-    font-size: 14px !important;
-    font-weight: 600;   
-    line-height: 20px; 
-    text-transform: capitalize;
-}
-::ng-deep .applyBtn {
-    display: none !important;
-  }
-:host::ng-deep {
-    .md-drppicker .btn {
-        line-height: 10px !important;
-    }
-    .daterangepicker-input + .ngx-daterangepicker-material .applyBtn {
-        display: none;
-    }
-    .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
-        top: 65px !important;
-        left: -470px !important;
-        height: 365px !important;
-    }
-
-        .md-drppicker .btn {
-            border-radius: 8px !important;
-            border: 1px solid var(--Primary-600, #00A3FF) !important;
-            background: var(--Primary-600, #00A3FF) !important;
-            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
-            color: var(--White, #FFF) !important;
-            font-size: 14px !important;
-            font-weight: 600 !important;
-            line-height: 20px;
-            text-transform: capitalize;
-        }
-
-    .md-drppicker .ranges ul li button {
-        padding: 12px 16px;
-        width: 160px;
-        color: var(--Gray-700, #344054);
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 20px;
-        background: none;
-        border: none;
-        text-align: left;
-        cursor: pointer;
-    }
-    .md-drppicker td.active,
-    .md-drppicker td.active:hover {
-        background-color: #029cf4 !important;
-        border-radius: 20px !important;
-        color: var(--White, #FFF) !important;
-        text-align: center !important;
-        font-size: 14px !important;
-        font-weight: 500 !important;
-        line-height: 20px;
-    }
-
-    .md-drppicker.ltr .ranges {
-        float: left;
-        margin-top: 10px !important;
-    }
-
-    .md-drppicker td.in-range {
-        background: var(--Primary-50, #EAF8FF);
-    }
-
-    .md-drppicker .ranges ul li button.active {
-        background: var(--Primary-50, #EAF8FF) !important;
-        border-radius: 8px !important;
-        color: var(--Primary-700, #009BF3);
-        font-size: 14px !important;
-        font-weight: 500 !important;
-        line-height: 20px !important;
-    }
-    table th,
-    table td {
-        width: 40px !important;
-        height: 40px !important;
-        padding: 10px 8px !important;
-    }
-
-    .md-drppicker td.available.prev,
-    .md-drppicker th.available.prev {
-        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
-        background-repeat: no-repeat !important;
-        background-size: 0.5em !important;
-        background-position: center !important;
-    }
-
-    .md-drppicker td.available.next,
-    .md-drppicker th.available.next {
-        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
-        background-repeat: no-repeat !important;
-        background-size: 0.5em !important;
-        background-position: center !important;
-    }
-
-    table th {
-        border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
-        background: transparent !important;
-        color: var(--Gray-700, #344054) !important;
-        text-align: center;
-        font-size: 16px !important;
-        font-weight: 500 !important;
-        line-height: 24px;
-    }
-
-    .md-drppicker td.available.invalid-date {
-        text-decoration: line-through;
-        pointer-events: none;
-        color: darkgray;
-    }
-
-    .md-drppicker td.available.today:not(.invalid-date) {
-        text-decoration: unset;
-        pointer-events: unset;
-        color: unset;
-    }
-    
-        .md-drppicker .btn.btn-default {
-            border-radius: 8px !important;
-            border: 1px solid var(--Gray-300, #D0D5DD) !important;
-            background: var(--White, #FFF) !important;
-            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
-            color: var(--Gray-700, #344054) !important;
-            font-size: 14px !important;
-            font-weight: 600 !important;
-            line-height: 20px;
-            text-transform: capitalize;
-            margin-right:10px !important;
-        }
-        .md-drppicker td.available.invalid-date  {
-            text-decoration: line-through;
-            pointer-events: none;
-            color: darkgray;
-          }
-          
-          .md-drppicker td.available.today:not(.invalid-date)   {
-            text-decoration: unset;
-            pointer-events: unset;
-            color: unset;
-          }
-}
-.wrapper {
-    min-width: 200px;
-}
-.btn-primary{
-    line-height: 18px !important; 
-}

package/src/lib/modules/layout/toolbar/date-single-select/date-single-select.component.spec.ts

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

package/src/lib/modules/layout/toolbar/date-single-select/date-single-select.component.ts

@@ -1,229 +0,0 @@
-import { ChangeDetectorRef, Component, OnInit } from "@angular/core";
-import dayjs from "dayjs";
-import "dayjs/locale/en";
-import { AuthService } from '../../../../services/auth.service';
-import { GlobalStateService } from 'tango-app-ui-global';
-@Component({
-  selector: "lib-date-single-select",
-  templateUrl: "./date-single-select.component.html",
-  styleUrl: "./date-single-select.component.scss",
-})
-export class DateSingleSelectComponent implements OnInit {
-  dayjs = dayjs;
-  isCustomDate = (m: dayjs.Dayjs) => {
-    const isValidDate =  m > this.dayjs();    
-    return isValidDate ? 'invalid-date' : false;
-}
-  selectedDateRange: any = {};
-  clientList: any = [];
-  selectedClient: any;
-  selectedFilters: any = {
-    client: null,
-    clientName: null,
-    clients: [],
-    store: null,
-    stores: [],
-    date: null,
-    group:[],
-    location:[]
-  };
-  dummyArray: any;
-  respnsearray: any=[];
-
-  constructor(
-    private auth: AuthService,
-    private gs: GlobalStateService,
-    private cd: ChangeDetectorRef
-  ) {
-   
-    this.auth.getClients().subscribe({
-      next: (e) => {
-        if (e) {  
-          this.clientList = e.data.result;
-          const allOption = {
-            _id: 'all',
-            clientName: 'All Clients',
-            clientId: ''
-          };
-          this.clientList.unshift(allOption); // Adds the "ALL" option at the beginning of the array
-          this.dummyArray = JSON.parse(JSON.stringify(this.clientList));
-            this.respnsearray  =  this.dummyArray.map(
-              (item: any) => item.clientId  
-            );
-          const headerFilters: any = JSON.parse(
-            localStorage.getItem("header-filters") || "{}"
-          );
-          this.selectedDateRange = {
-            startDate: this.dayjs(headerFilters?.date?.startDate,"DD-MM-YYYY").format("YYYY-MM-DD"),
-            endDate: this.dayjs(headerFilters?.date?.endDate, "DD-MM-YYYY").format("YYYY-MM-DD")
-          };
-          if (headerFilters.client) {
-            this.clientList.find((obj: any) => {
-              if (obj.clientId === headerFilters.client) {
-                this.selectedClient = obj; 
-              } 
-            });
-              this.selectedFilters.client = headerFilters.client;
-              this.selectedFilters.clientName = headerFilters.clientName;
-              if(headerFilters.client ===''){
-                this.selectedFilters.clients = this.respnsearray;
-              } else {
-                this.selectedFilters.clients = [headerFilters.client];
-              }
-              this.selectedFilters.store =  headerFilters.store;
-              this.selectedFilters.date = headerFilters.date;
-
-              this.selectedDateRange = {
-                startDate:this.dayjs( headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
-                endDate: this.dayjs( headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
-              };
-           
-              localStorage.setItem(
-                "header-filters",
-                JSON.stringify(this.selectedFilters)
-              );
-              this.gs.dataRangeValue.next(this.selectedFilters);
-              this.cd.detectChanges();
-          } else if(headerFilters.client ===''){
-            this.selectedFilters.clients = this.respnsearray;
-            this.selectedClient = this.clientList[0];
-            this.selectedFilters.client = headerFilters.client;
-            this.selectedFilters.clientName = headerFilters.clientName;
-            this.selectedFilters.date = headerFilters.date;
-            this.selectedDateRange = {
-              startDate:this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
-              endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
-            };
-      
-            localStorage.setItem(
-              "header-filters",
-              JSON.stringify(this.selectedFilters)
-            );
-            this.gs.dataRangeValue.next(this.selectedFilters);
-            this.cd.detectChanges();
-          } else {
-            this.dummyArray = JSON.parse(JSON.stringify(this.clientList));
-            this.respnsearray  =  this.dummyArray.map(
-              (item: any) => item.clientId  
-            );
-            this.selectedClient = this.clientList[0];
-              this.selectedFilters.clients = this.respnsearray;
-            this.selectedFilters.client = this.selectedClient.clientId;
-            this.selectedFilters.clientName = this.selectedClient.clientName;
-            this.selectedDateRange = {
-              startDate: this.dayjs().subtract(1, "days").format("DD-MM-YYYY"), // Yesterday
-              endDate: this.dayjs().subtract(1, "days").format("DD-MM-YYYY"),   // Yesterday
-            };
-        
-            // Set datetime to yesterday's date as well
-            var datetime = {
-              startDate: this.dayjs().subtract(1, "days").format("YYYY-MM-DD"), // Yesterday
-              endDate: this.dayjs().subtract(1, "days").format("YYYY-MM-DD"),   // Yesterday
-            };
-            this.selectedFilters.date = datetime;
-            localStorage.setItem(
-              "header-filters",
-              JSON.stringify(this.selectedFilters)
-            );
-            this.gs.dataRangeValue.next(this.selectedFilters);
-            this.cd.detectChanges();
-          }
-        }
-      },
-    });
-  }
-  ngOnInit(): void {}
-  onClientSelect(event: any) {
-    this.selectedClient = event;
-  }
-
-
-  ranges: any = {
-    Today: [
-      this.dayjs(),
-      this.dayjs(),
-    ],
-    Yesterday: [
-      this.dayjs().subtract(1, "days"),
-      this.dayjs().subtract(1, "days"),
-    ],
-    "This Week": [this.dayjs().subtract(7, "days"), this.dayjs().subtract(1, "days")],
-    "Last Week": [
-      this.dayjs().subtract(14, "days").startOf("days"),
-      this.dayjs().subtract(8, "days").endOf("days"),
-    ],
-   "This Month": [
-    this.dayjs().subtract(30, "days"), // Start date is 30 days before today
-    this.dayjs().subtract(1, "days") // End date is Yesterday
-  ],
-    "Last Month": [
-      this.dayjs().subtract(1, "month").startOf("month"),
-      this.dayjs().subtract(1, "month").endOf("month"),
-    ],
-  };
-
-  onStartDateChange(event: any) {
-    if(this.dayjs(event.startDate).isValid()){
-      this.isCustomDate = (m: dayjs.Dayjs) => {        
-      const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(90, 'days')) ;
-      return isValidDate ? 'invalid-date' : false;
-  }
-}
-  }
-
-  datechange(event: any) {
-    
-    
-    if (event && event.startDate && event.endDate) {
-      if (
-        this.dayjs(event.startDate).isValid() &&
-        this.dayjs(event.endDate).isValid()
-      ) {
-        this.selectedDateRange.startDate = event.startDate
-        this.selectedDateRange.endDate = event.endDate
-        var datetime = {
-          startDate: this.dayjs(event.startDate,"DD-MM-YYYY").format("YYYY-MM-DD"),
-          endDate: this.dayjs(event.endDate,"DD-MM-YYYY").format("YYYY-MM-DD"),
-        };
-        this.selectedFilters.date = datetime;
-        localStorage.setItem(
-          "header-filters",
-          JSON.stringify(this.selectedFilters)
-        );
-      }
-    }else {
-      const headerFilters: any = JSON.parse(
-            localStorage.getItem("header-filters") || "{}"
-          );
-          this.selectedDateRange.startDate = this.dayjs(headerFilters?.date?.startDate,"YYYY-MM-DD").format("DD-MM-YYYY");
-          this.selectedDateRange.endDate = this.dayjs(headerFilters?.date?.endDate,"YYYY-MM-DD").format("DD-MM-YYYY");
-          this.gs?.dataRangeValue?.next(headerFilters);
-    }
-    
-  }
-
-  Apply() {
-    const headerFilters: any = JSON.parse(
-      localStorage.getItem("header-filters") || "{}"
-    );
-    this.selectedFilters = headerFilters;
-    this.selectedFilters.client = this.selectedClient?.clientId;
-    this.selectedFilters.clientName = this.selectedClient.clientName
-    if(this.selectedClient.clientId ===''){
-      this.selectedFilters.clients = this.respnsearray;
-    } else {
-      this.selectedFilters.clients = [this.selectedClient.clientId];
-    }
-    this.selectedFilters.stores =[];
-    this.selectedFilters.group= [];
-    this.selectedFilters.location= [];
-    localStorage.setItem(
-      "header-filters",
-      JSON.stringify(this.selectedFilters)
-    );
-    // window.location.reload()
-    // this.gs.dataRangeValue.next(this.selectedFilters);
-    window.location.reload()
-    this.gs.manageRefreshTrigger.next(true)
-  }
-}

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

@@ -1,14 +0,0 @@
-<div class="d-flex align-items-center position-relative my-1">
-    <span class="svg-icon svg-icon-1 position-absolute ms-3">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path
-                d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
-                stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-    </span>
-    <input class="fx-date-range form-control ps-14" style="min-width: 260px !important;" type="text" matInput ngxDaterangepickerMd [drops]="'down'"
-        [opens]="'right'" [ranges]="ranges" [showCustomRangeLabel]="true" [alwaysShowCalendars]="false" [autoApply]="true"
-        [keepCalendarOpeningWithRange]="true" [showCancel]="true" autocomplete="off" [(ngModel)]="selectedDateRange" (startDateChanged)="onStartDateChange($event)"  [isCustomDate]="isCustomDate"
-        [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
-        (datesUpdated)="datechange($event)" name="daterange" [readonly]="true" />
-</div>

package/src/lib/modules/layout/toolbar/datepicker/datepicker.component.scss

@@ -1,149 +0,0 @@
-.daterangepicker {
-    display: block !important;
-    top: 153.85px !important;
-    left: 900px !important;
-    right: 0px;
-}
-.form-control {
-    color: var(--Gray-700, #344054) !important;
-    font-size: 14px !important;
-    font-weight: 600;   
-    line-height: 20px; 
-    text-transform: capitalize;
-}
-::ng-deep .applyBtn {
-    display: none !important;
-  }
-:host::ng-deep {
-    .md-drppicker .btn {
-        line-height: 10px !important;
-    }
-    .daterangepicker-input + .ngx-daterangepicker-material .applyBtn {
-        display: none;
-    }
-    .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
-        top: 65px !important;
-        left: -470px !important;
-        height: 365px !important;
-    }
-
-        .md-drppicker .btn {
-            border-radius: 8px !important;
-            border: 1px solid var(--Primary-600, #00A3FF) !important;
-            background: var(--Primary-600, #00A3FF) !important;
-            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
-            color: var(--White, #FFF) !important;
-            font-size: 14px !important;
-            font-weight: 600 !important;
-            line-height: 20px;
-            text-transform: capitalize;
-        }
-
-    .md-drppicker .ranges ul li button {
-        padding: 12px 16px;
-        width: 160px;
-        color: var(--Gray-700, #344054);
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 20px;
-        background: none;
-        border: none;
-        text-align: left;
-        cursor: pointer;
-    }
-    .md-drppicker td.active,
-    .md-drppicker td.active:hover {
-        background-color: #029cf4 !important;
-        border-radius: 20px !important;
-        color: var(--White, #FFF) !important;
-        text-align: center !important;
-        font-size: 14px !important;
-        font-weight: 500 !important;
-        line-height: 20px;
-    }
-
-    .md-drppicker.ltr .ranges {
-        float: left;
-        margin-top: 10px !important;
-    }
-
-    .md-drppicker td.in-range {
-        background: var(--Primary-50, #EAF8FF);
-    }
-
-    .md-drppicker .ranges ul li button.active {
-        background: var(--Primary-50, #EAF8FF) !important;
-        border-radius: 8px !important;
-        color: var(--Primary-700, #009BF3);
-        font-size: 14px !important;
-        font-weight: 500 !important;
-        line-height: 20px !important;
-    }
-    table th,
-    table td {
-        width: 40px !important;
-        height: 40px !important;
-        padding: 10px 8px !important;
-    }
-
-    .md-drppicker td.available.prev,
-    .md-drppicker th.available.prev {
-        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
-        background-repeat: no-repeat !important;
-        background-size: 0.5em !important;
-        background-position: center !important;
-    }
-
-    .md-drppicker td.available.next,
-    .md-drppicker th.available.next {
-        background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
-        background-repeat: no-repeat !important;
-        background-size: 0.5em !important;
-        background-position: center !important;
-    }
-
-    table th {
-        border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
-        background: transparent !important;
-        color: var(--Gray-700, #344054) !important;
-        text-align: center;
-        font-size: 16px !important;
-        font-weight: 500 !important;
-        line-height: 24px;
-    }
-    .md-drppicker td.available.invalid-date {
-        text-decoration: line-through;
-        pointer-events: none;
-        color: darkgray;
-    }
-
-    .md-drppicker td.available.today:not(.invalid-date) {
-        text-decoration: unset;
-        pointer-events: unset;
-        color: unset;
-    }
-    
-        .md-drppicker .btn.btn-default {
-            border-radius: 8px !important;
-            border: 1px solid var(--Gray-300, #D0D5DD) !important;
-            background: var(--White, #FFF) !important;
-            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
-            color: var(--Gray-700, #344054) !important;
-            font-size: 14px !important;
-            font-weight: 600 !important;
-            line-height: 20px;
-            text-transform: capitalize;
-            margin-right:10px !important;
-        }
-        .md-drppicker td.available.invalid-date  {
-            text-decoration: line-through;
-            pointer-events: none;
-            color: darkgray;
-          }
-          
-          .md-drppicker td.available.today:not(.invalid-date)   {
-            text-decoration: unset;
-            pointer-events: unset;
-            color: unset;
-          }
-}