tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/activity-log-v2/activity-log-v2.component.ts

@@ -0,0 +1,517 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TraxService } from '../../services/trax.service';
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { ToastService } from 'tango-app-ui-shared';
+import { Subject, debounceTime, distinctUntilChanged, filter, takeUntil } from "rxjs";
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+import { Location } from '@angular/common';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ViewActionComponent } from './log-view-popup/view-action/view-action.component';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
+dayjs.extend(utc);
+
+
+
+@Component({
+  selector: "lib-activity-log-v2",
+  templateUrl: "./activity-log-v2.component.html",
+  styleUrl: "./activity-log-v2.component.scss",
+})
+export class ActivityLogV2Component implements OnDestroy, OnInit {
+  dayjs = dayjs;
+  private destroy$ = new Subject();
+  isExport: boolean = false;
+  itemsPerPage = 10;
+  currentPage = 1;
+  totalItems = 0;
+  paginationSizes: any[] = [];
+  pageSize = 10;
+  sortColumName: string = "";
+  sortBy: any = "";
+  sortDirection: any = "";
+  searchInput: any = "";
+  headerData: any;
+  searchValue: string;
+  limit: number;
+  offset: number;
+  searchDisabled: boolean = false;
+  taskLoading: boolean = true;
+  taskNoData: boolean = false;
+  receivedData: string = "checklist";
+  dataObject: any = [
+    {
+      Description: "Actions",
+      Issues: [
+        { text: "Created by", id: "created" },
+        { text: "Updated by", id: "updated" },
+        { text: "Saved as Draft", id: "draft" },
+        { text: "Published by", id: "published" },
+        { text: "Submitted by", id: "submit" },
+        { text: "Started by", id: "start" },
+        { text: "Approved by", id: "approved" },
+        { text: "Redo Created by", id: "redo" },
+        { text: "Subsequent Redo Created by", id: "multiredo" },
+        { text: "Task Created by", id: "task_created" },
+        // { text: 'Re-Opened by', id: 'reopened' },
+        { text: "Edited by", id: "edited" },
+        { text: "Unpublished by", id: "unpublished" },
+        { text: "Deleted by", id: "deleted" },
+        { text: "Duplicated by", id: "duplicated" },
+        { text: "Reinitiated by", id: "reinitiated" },
+      ],
+    },
+    // {
+    //   Description: 'Coverage',
+    //   Issues: [
+    //     { text: 'Checklist', id: 'checklist' },
+
+    //   ],
+    // },
+  ];
+  activityLogTableData: any[] = [];
+  type: string = "checklist";
+  activityLogFilter: any = [];
+  // reloadDate: string;
+  sourceCheckList_id: any;
+  checklistId: any;
+  // coverageType: any = [];
+  userEmailes: any = [];
+  checklistName: any;
+  editRequestData: any;
+  isActivityLog: boolean = false;
+
+  selectedDateRange: any = {
+    startDate: dayjs().subtract(7, "days"),
+    endDate: dayjs().subtract(1, "days"),
+  };
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate = m > this.dayjs();
+    return isValidDate ? "invalid-date" : false;
+  };
+  selectedFilters: any = {
+    client: null,
+    clientName: null,
+    clients: [],
+    store: null,
+    stores: [],
+    // date: null,
+    date: {
+      startDate: dayjs().subtract(7, "days").format("YYYY-MM-DD"),
+      endDate: dayjs().subtract(1, "days").format("YYYY-MM-DD"),
+    },
+    group: [],
+    location: [],
+  };
+  count: number = 0;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    public gs: GlobalStateService,
+    private changeDetector: ChangeDetectorRef,
+    private toast: ToastService,
+    private TraxService: TraxService,
+    private pageInfo: PageInfoService,
+    private activatedRoute: ActivatedRoute,
+    public modalService: NgbModal
+  ) {
+    this.userEmailes = JSON.parse(
+      localStorage.getItem("usersEmail-info") || "[]"
+    );
+  }
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+  ngOnInit(): void {
+    this.gs.dataRangeValue
+      .pipe(takeUntil(this.destroy$), debounceTime(300))
+      .subscribe((data: any) => {
+        this.itemsPerPage = 10;
+        this.pageSize = 10;
+        this.headerData = data;
+        this.currentPage = 1;
+        this.setPageData();
+        this.getActivityLogTableData();
+        setTimeout(() => {
+          this.count++;
+        });
+        // this.applyFilters([{ Description: 'Coverage', Issues: [{ text: this.coverageType[0], id: this.coverageType[0], checked: true}] }]);
+      });
+  }
+  setPageData() {
+    this.pageInfo.setTitle("Dashboard");
+    this.pageInfo.setBreadcrumbs([
+      {
+        title: "Tango Trax",
+        path: "/manage/trax/dashboard",
+        isActive: false,
+        isSeparator: false,
+      },
+      {
+        title: "Tango Trax",
+        path: "/manage/trax/dashboard",
+        isActive: false,
+        isSeparator: true,
+      },
+    ]);
+  }
+  getActivityLogTableData(): void {
+    this.isActivityLog = true;
+    this.changeDetector.detectChanges(); // Force UI update
+    this.searchDisabled = true;
+    this.taskLoading = true;
+    this.taskNoData = true;
+    const requestData = {
+      fromDate: this.selectedFilters?.date?.startDate,
+      toDate: this.selectedFilters?.date?.endDate,
+      storeId: this.headerData?.stores
+        .filter((store: any) => store.checked)
+        .map((store: any) => store.storeId),
+      clientId: this.headerData.client,
+      limit: this.itemsPerPage,
+      offset: this.currentPage - 1,
+      sortBy: this.sortDirection,
+      sortColumnName: this.sortColumName,
+      searchValue: this.searchInput,
+      action: this.activityLogFilter,
+      type: this.receivedData,
+      userEmailes: this.userEmailes,
+      // checkListName:this.checklistName,
+      // "checkListName": "daily store checklist111",
+      // "type": "checklist",
+      // "action": ["created"],
+      // "limit": 5,
+      // "offset": 0,
+      // "sortBy": "",
+      // "sortColumnName": "",
+      // "searchValue": "Daily store checklist New"
+    };
+
+    this.TraxService.activityLogList(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(
+        (response: any) => {
+          this.taskLoading = false;
+          if (response?.code === 200 && response?.status === "success") {
+            this.activityLogTableData = response.data.result || [];
+            this.totalItems = response.data.count;
+            this.setPaginationSizes();
+            this.taskLoading = false;
+            this.taskNoData = false;
+            this.searchDisabled = false;
+          } else {
+            this.activityLogTableData = [];
+            this.taskLoading = false;
+            this.taskNoData = true;
+            this.searchDisabled = true;
+            if (this.searchInput?.length) {
+              this.searchDisabled = true;
+            }
+            this.activityLogTableData = [];
+            this.totalItems = 0;
+            this.changeDetector.detectChanges();
+          }
+        },
+        (error) => {
+          this.activityLogTableData = [];
+          this.changeDetector.detectChanges();
+        }
+      );
+    this.sourceCheckList_id = "";
+  }
+  // removeQueryParams() {
+  //   const urlWithoutParams = this.location.path().split('?')[0];
+  //   this.location.replaceState(urlWithoutParams);
+  // }
+  setPaginationSizes() {
+    if (this.totalItems > 10) {
+      if (this.pageSize > 10) {
+        this.paginationSizes = [10, 20, 30];
+      } else {
+        this.paginationSizes = [10, 20, 30];
+        this.pageSize = 10;
+      }
+    } else {
+      this.paginationSizes = [this.totalItems];
+      this.pageSize = this.totalItems;
+    }
+  }
+
+  onExport(): void {
+    this.currentPage = 1;
+    const requestData = {
+      fromDate: this.headerData.date.startDate,
+      toDate: this.headerData.date.endDate,
+      storeId: this.headerData.stores
+        .filter((store: any) => store.checked)
+        .map((store: any) => store.storeId),
+      userEmailes: this.userEmailes,
+      clientId: this.headerData.client,
+      limit: 10000,
+      offset: 0,
+      sortBy: this.sortDirection,
+      sortColumnName: this.sortColumName,
+      searchValue: this.searchInput,
+      export: true,
+      filter: this.activityLogFilter,
+      // coverage: this.coverageType || []
+    };
+    this.TraxService.getTaskTableDataExport(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res) => {
+          this.TraxService.saveAsExcelFile(res, "TaskTable");
+        },
+        error: (e) => {
+          this.toast.getErrorToast("Something went Wrong..");
+        },
+      });
+  }
+  searchField(): void {
+    this.headerData.searchValue = this.searchInput;
+    this.headerData.export = false;
+    this.currentPage = 1;
+    this.pageSize = 10;
+    this.getActivityLogTableData();
+  }
+  sortData(column: string): void {
+    if (this.sortColumName === column) {
+      this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+    } else {
+      this.sortColumName = column;
+      this.sortDirection = 1;
+    }
+    this.getActivityLogTableData();
+  }
+
+  onPageSizeChange(pageSize: any) {
+    this.currentPage = 1;
+    this.itemsPerPage = parseInt(pageSize);
+    this.pageSize = parseInt(pageSize);
+    this.changeDetector.detectChanges();
+    this.getActivityLogTableData();
+  }
+  onPageChange(pageOffset: any) {
+    this.currentPage = pageOffset;
+    this.getActivityLogTableData();
+  }
+  applyFilters(event: any): void {
+    if (event?.length) {
+      event.forEach((element: any) => {
+        if (element.Description === "Actions") {
+          this.activityLogFilter = element.Issues.map((val: any) => val.id);
+        }
+      });
+    } else {
+      // this.dataObject.forEach((category: any) => {
+      //   category.Issues.forEach((issue: any) => {
+      //     issue.checked = true;
+      //   });
+      // });
+
+      // const actionsFilter = this.dataObject.find((item: any) => item.Description === 'Actions');
+      // this.activityLogFilter = actionsFilter ? actionsFilter.Issues.map((val: any) => val.id) : [];
+      this.activityLogFilter = [];
+    }
+    this.getActivityLogTableData();
+  }
+  selectPlan(selectedType: string): void {
+    this.type = selectedType;
+  }
+
+  // navigateToTaskConfig(task: any): void {
+  //     this.router.navigate(['manage/trax/task-configure'], { queryParams: {taskId:task._id} })
+  // }
+
+  // navigateToTaskEdit(task: any): void {
+  //     this.router.navigate(['manage/trax/create-task'], { queryParams: {id:task._id} })
+  // }
+
+  dateFormat(date: any) {
+    return this.dayjs.utc(date).format("DD MMM YYYY");
+  }
+  Selecttabs(tab: string) {
+    this.receivedData = tab;
+
+    // this.router.navigate([], {
+    //   queryParams: { type: tab },
+    //   queryParamsHandling: 'merge'
+    // });
+
+    this.getActivityLogTableData();
+  }
+  viewAction(log: any) {
+    let modalSize =
+      log.action === "updated" || log.action === "draft"
+        ? "xl"
+        : log.action === "edited"
+        ? "lg"
+        : "md";
+    const modalRef = this.modalService.open(ViewActionComponent, {
+      centered: true,
+      size: modalSize,
+      scrollable: true,
+    });
+    modalRef.componentInstance.logDetails = log.logDetails;
+    modalRef.componentInstance.checkListName = log.checkListName;
+    modalRef.componentInstance.storeName = log.storeName;
+    modalRef.componentInstance.actionType = log.action;
+    modalRef.componentInstance.receivedData = this.receivedData;
+    modalRef.result.then(() => {
+      this.getActivityLogTableData();
+    });
+  }
+
+  isLogDetailsEmpty(logDetails: any): boolean {
+    return (
+      !logDetails ||
+      Object.keys(logDetails).every((key) => {
+        const value = logDetails[key];
+        if (Array.isArray(value)) return value.length === 0;
+        if (typeof value === "object") return this.isLogDetailsEmpty(value);
+        return !value;
+      })
+    );
+  }
+
+  formatDateTime(dateString: string): string {
+    if (!dateString) return "--";
+
+    const date = dayjs.utc(dateString).local();
+    const now = dayjs();
+
+    let formattedDate = "";
+
+    if (date.isSame(now, "day")) {
+      formattedDate = "Today";
+    } else if (date.isSame(now.subtract(1, "day"), "day")) {
+      formattedDate = "Yesterday";
+    } else {
+      formattedDate = date.format("MMM D, YYYY");
+    }
+
+    return `${formattedDate} <br> ${date.format("hh : mm A")}`;
+  }
+  getActionBadgeClass(action: string): string {
+    const actionClasses: { [key: string]: string } = {
+      created: "badge-light-default",
+      updated: "badge-light-primary1",
+      draft: "badge-light-default",
+      published: "badge-light-primary1",
+      submit: "badge-light-primary1",
+      start: "badge-light-primary1",
+      approved: "badge-light-success",
+      redo: "badge-light-warning",
+      multiredo: "badge-light-warning",
+      task_created: "badge-light-default",
+      // reopened: 'badge-light-default',
+      edited: "badge-light-warning",
+      unpublished: "badge-light-primary1",
+      deleted: "badge-light-delete",
+      duplicated: "badge-light-default",
+      reinitiated: "badge-light-warning",
+    };
+
+    return actionClasses[action] || "badge-light-default";
+  }
+
+  getActionLabel(action: string): string {
+    const actionLabels: { [key: string]: string } = {
+      created: "Created by",
+      updated: "Updated by",
+      draft: "Saved as Draft",
+      published: "Published by",
+      submit: "Submitted by",
+      start: "Started by",
+      approved: "Approved by",
+      redo: "Redo Created by",
+      multiredo: "Subsequent Redo Created by",
+      task_created: "Task Created by",
+      // reopened: 'Re-opened by',
+      edited: "Edited by",
+      unpublished: "Unpublished by",
+      deleted: "Deleted by",
+      duplicated: "Duplicated by",
+      reinitiated: "Reinitiated by",
+    };
+
+    return actionLabels[action] || action;
+  }
+
+  navigateToGallery(log: any): void {
+    let formattedDate = dayjs(log.createAt).format("YYYY-MM-DD");
+    let checklistType: string;
+    if (log.checkListType === "custom") {
+      checklistType = "custom";
+    } else if (["task", "checklistTask", "cctv"].includes(log.type)) {
+      checklistType = "task";
+    } else {
+      checklistType = log.type || "--";
+    }
+
+    let queryParams: any = {};
+    if (log.store_id && log.store_id != "") {
+      queryParams = {
+        ChecklistDate: formattedDate,
+        storeId: log.store_id,
+        checklistType: checklistType,
+        sourceCheckList_id: log.sourceCheckList_id,
+      };
+    } else {
+      queryParams = {
+        ChecklistDate: formattedDate,
+        userEmail: log.userEmail,
+        checklistType: checklistType,
+        sourceCheckList_id: log.sourceCheckList_id,
+      };
+    }
+    if (log.redoStatus) {
+      queryParams.redoStatus = true;
+    }
+    this.router.navigate(["/manage/trax/gallery"], { queryParams });
+  }
+
+  datechange(event: any) {
+    if (event && event.startDate && event.endDate) {
+      this.selectedDateRange = {
+        startDate: event.startDate,
+        endDate: event.endDate,
+      };
+
+      this.selectedFilters.date = {
+        startDate: event.startDate,
+        endDate: event.endDate,
+      };
+
+      // localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+      // this.resetValidation();
+      // this.gs.dataRangeValue.next(this.selectedFilters);
+
+      // Reset the picker to force re-render
+      this.isActivityLog = false;
+      this.changeDetector.detectChanges();
+
+      // setTimeout(() => {
+      //   this.isActivityLog = true;
+      //   this.changeDetector.detectChanges();
+      // }, 10);
+
+      // Call API
+      this.getActivityLogTableData();
+    } else {
+    }
+  }
+
+  resetValidation() {
+    this.isCustomDate = (m: dayjs.Dayjs) => {
+      // Check if the given date is before yesterday
+      return m.isAfter(this.dayjs(), "day") ? "invalid-date" : false;
+    };
+  }
+}

package/src/lib/components/activity-log-v2/log-view-popup/date-range-picker/date-range-picker.component.html

@@ -0,0 +1,19 @@
+<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" [autoApply]="true"
+        [alwaysShowCalendars]="false" [keepCalendarOpeningWithRange]="true" [showCancel]="true" autocomplete="off"
+        [(ngModel)]="selectedDateRange" [isCustomDate]="isCustomDate" (click)="resetValidation()"  (startDateChanged)="onStartDateChange($event)"
+        [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+         name="daterange1" [readonly]="true" (datesUpdated)="emitDateChange($event)"/>
+</div>
+
+<!-- (startDateChanged)="onStartDateChange($event)" -->
+
+<!-- (datesUpdated)="emitDateChange($event)" -->

package/src/lib/components/activity-log-v2/log-view-popup/date-range-picker/date-range-picker.component.scss

@@ -0,0 +1,148 @@
+.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;
+          }
+}