vc-create-dashboard 3.0.84 → 3.0.85

package/src/lib/create-dashboard-container/create-dashboard.component.ts

@@ -1,1886 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  Input,
-  OnChanges,
-  OnInit,
-  Output,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { EditorConfig } from '@vcomply/editor';
-import { DatePickerComponent, IDatePickerConfig } from 'ng2-date-picker';
-import { CreateDashboardService } from './services/create-dashboard.service';
-import { PaginationService } from './services/pagination.service';
-import { UserListConfiguration } from './user-list/user-list.config';
-import { CreateDashboardForm } from './create-dashboard-config';
-import { SnackBarService } from '../ui-kit/snack-bar/snack-bar.service';
-
-import dayjs from 'dayjs';
-import { forkJoin, Observable } from 'rxjs';
-import { finalize, map } from 'rxjs/operators';
-import { PopoverService } from '../ui-kit/popover/popover.service';
-import { TextCountPipe } from './pipes/text-count.pipe';
-import { ASSETS } from './constants/assets.constant';
-import { PROGRAM_LIST_API } from './program-list/constant';
-import { ListItem } from './program-list/interfaces/list-item.interface';
-import {
-  buildProgramSelectionMapFromCategories,
-  extractCategoryIdsFromDashboard,
-  extractProgramIdsFromDashboard,
-  extractRcIdsFromDashboard,
-  filterActiveWidgets,
-  flattenProgramSelectionMap,
-  getEditDashboardCdid,
-  getSelectedProgramsMap,
-  hasProgramSelectionInMap,
-  normalizeIdArray,
-  normalizeProgramCategories,
-  normalizeProgramSelectionMap,
-  parseSailsProgramList,
-} from './utils/dashboard-edit.utils';
-
-@Component({
-  selector: 'app-create-dashboard',
-  templateUrl: './create-dashboard.component.html',
-  styleUrls: ['./create-dashboard.component.less'],
-  providers: [TextCountPipe],
-})
-export class CreateDashboardComponent implements OnInit, OnChanges {
-  @Input() feature: any;
-  activeSelector = '';
-  disabled = false;
-  @Input() mode = 'CREATE';
-  @Input() dashboardId = '';
-  @Input() dashboardDetails: any = null; // for edit dashboard
-  /** API dashboard object from createDashboard response (used when navigating after create). */
-  private createdDashboard: any = null;
-  /** True after CREATE API succeeds; widget save should emit `created` for app redirect. */
-  private redirectAfterCreate = false;
-  @Output() close = new EventEmitter();
-  @Input() createdBy = 0;
-  @ViewChild('fromDatePicker') fromDatePicker!: DatePickerComponent;
-  @ViewChild('toDatePicker') toDatePicker!: DatePickerComponent;
-  animation = true;
-  @Input() configureWidget = false;
-  ASSETS: any = ASSETS;
-
-  totalPages = 1;
-  totalList = 1;
-  usersList: any[] = [];
-  vLoader = true;
-  userListLoaded = false;
-  groupListLoaded = false;
-  rcListLoaded = false;
-  hideToDate = false;
-  listDetails: UserListConfiguration = {
-    selectedUsersList: [],
-    selectedGroupList: [],
-    nonRemovableUsersList: [],
-    displayElementKey: 'member_name',
-    displayGroupKey: 'group_name',
-    groupIdkey: 'group_id',
-    elementIdKey: 'member_id',
-    tooltipKey: 'member_email',
-  };
-  dashboardDescription: EditorConfig = {
-    placeholder: 'Description (Max limit: 250 characters)',
-    mode: 'prime',
-    id: 'description',
-  };
-  responsibilityCategoriesTree: any = {
-    regulations: {
-      list: [],
-      selectedList: [],
-    },
-    standards: {
-      list: [],
-      selectedList: [],
-    },
-    internalControls: {
-      list: [],
-      selectedList: [],
-    },
-    others: {
-      list: [],
-      selectedList: [],
-    },
-  };
-  allComplianceCategories: any[] = [];
-  allRiskCategories: any[] = [];
-  showRiskCategory = false;
-  showCriteria = true;
-
-  dashboardForm: CreateDashboardForm = {
-    dashboardName: '',
-    dashboardDescriptionText: '',
-    selectedViewers: [],
-    selectedGroup: [],
-    selectedFromDate: undefined,
-    selectedToDate: undefined,
-    selectedResponsibilityCenters: [],
-    selectedResponsibilityCategories: [],
-    selectedRiskCategories: [],
-    displayCriteria: 'or',
-    configureWidget: [],
-    frequencyDetails: '',
-    selectedFrequencyType: '',
-    selectedFrequencies: [0],
-    frequencyMessage: '',
-    frequencyDate: 1,
-  };
-
-  openConfigureWidgets = false;
-  selectedWidgets: any = [];
-  displayedWidgets: any = [];
-
-  responsibilityCentersList: any[] = [];
-  datePickerOverlay = false;
-  dayNames = [
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday',
-    'Sunday',
-  ];
-  monthNames = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-  quarters = [
-    'January, April, July, October',
-    'February, May, August, November',
-    'March, June, September, December',
-  ];
-
-  showRiskWidgets = false;
-  showComplianceWidgets = false;
-  isManageRisk: boolean = false;
-
-  riskCategoryList = {
-    strategic: {
-      list: [],
-      selectedList: [],
-    },
-    operational: {
-      list: [],
-      selectedList: [],
-    },
-    compliance: {
-      list: [],
-      selectedList: [],
-    },
-    others: {
-      list: [],
-      selectedList: [],
-    },
-  };
-  programListUrl: any = PROGRAM_LIST_API;
-
-  fromDatePickerConfig: IDatePickerConfig = {
-    min: this.getCurrentDate(),
-  };
-
-  toDatePickerConfig: IDatePickerConfig = {};
-
-  isSmiley!: boolean;
-  smileyMessage: string = '';
-  groupList: any;
-  groupsEnabled: boolean = true;
-  totalgroups: any;
-  @ViewChild('fromDatePicker', { read: ElementRef, static: false })
-  fromDatePickerPopup!: ElementRef;
-  @ViewChild('toDatePicker', { read: ElementRef, static: false })
-  toDatePickerPopup!: ElementRef;
-  openedDatePicker: string = '';
-  selectedPrograms: any = {};
-  allProgamSelected: any[] = [];
-  private pendingEditRcIds: number[] = [];
-  private pendingEditRcEntries: any[] = [];
-  private editFormHydrated = false;
-  /** Tracks in-flight EDIT hydration HTTP calls; loader stays on until zero. */
-  private editHydrationCount = 0;
-
-  constructor(
-    private createDashboardService: CreateDashboardService,
-    private paginationService: PaginationService,
-    private cdr: ChangeDetectorRef,
-    private snackBar: SnackBarService,
-    public popoverService: PopoverService,
-    private textCount: TextCountPipe
-  ) {}
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (this.createdBy) {
-      this.listDetails.nonRemovableUsersList.push(this.createdBy);
-    }
-    if (
-      this.mode === 'EDIT' &&
-      changes['dashboardDetails']?.currentValue &&
-      this.rcListLoaded &&
-      this.userListLoaded &&
-      this.groupListLoaded
-    ) {
-      this.hydrateEditForm();
-    }
-  }
-
-  @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(
-    event: KeyboardEvent
-  ) {
-    this.close.emit({ mode: 'discard' });
-    this.isSmiley = false;
-  }
-
-  ngOnInit(): void {
-    this.animateContainer();
-    this.getRCList();
-    this.checkWhetherAllListsLoaded();
-    this.getUsersList('');
-    this.getGroupList();
-    this.getUserInfo();
-  }
-  
-  animateContainer() {
-    this.animation = true;
-    setTimeout(() => {
-      this.animation = false;
-    }, 300);
-  }
-
-  getUserInfo(){
-    this.createDashboardService.getUserInformation().subscribe(
-      (res: any) => {
-        this.setPermission(res?.roleActions);
-        const quickLink = res.quick_link;
-        if (quickLink.risk) {
-          this.showRiskCategory = true;
-        } else {
-          this.showRiskCategory = false;
-        }
-      },
-      (error) => {
-        console.error(error);
-      }
-    );
-  }
-
-  /**
-   * Displays the listing pages the left side of policy form to set and edit the dropdown fields values
-   * @param type holds name of particular list is to be displayed
-   * @param event contains boolean value to display the list or not
-   */
-  activateSelector(type: any, event: boolean) {
-    if (type == 'frequency' || this.activeSelector == 'frequency') {
-      this.showCriteria = false;
-      setTimeout(() => {
-        this.showCriteria = true;
-      }, 1);
-    }
-    if (type === 'responsibilityCategories' && event) {
-      this.syncProgramSelectionMapFromForm();
-      this.ensureProgramSelectionMapForList();
-    }
-    this.activeSelector = event ? type : '';
-  }
-
-  onProgramSelectionChange(items: ListItem[]): void {
-    this.selectedPrograms = items;
-    this.allProgamSelected = ([] as any).concat(...Object.values(items));
-  }
-
-  selectCategory(): void {
-    this.dashboardForm.selectedResponsibilityCategories =
-      normalizeProgramCategories(this.allProgamSelected);
-    this.applyResponsibilityCategoryWidgetFilters();
-    this.activateSelector('', false);
-  }
-
-  checkDefaultProgramOnRemove(event: any) {
-    this.allProgamSelected = this.allProgamSelected.filter(
-      (program: any) => program?.id !== event?.id
-    );
-    this.removeProgram(event);
-
-  }
-
-  removeProgram(program: any): void {
-    const keys = Object.keys(this.selectedPrograms);
-    keys.forEach((key: any) => {
-      const index = this.selectedPrograms[key].findIndex(
-        (item: any) => item?.id === program?.id
-      );
-      if (index !== -1) {
-        this.selectedPrograms[key].splice(index, 1);
-      }
-    });
-  }
-
-  private syncProgramSelectionMapFromForm(): void {
-    if (hasProgramSelectionInMap(this.selectedPrograms)) {
-      return;
-    }
-    const flat =
-      this.allProgamSelected?.length > 0
-        ? this.allProgamSelected
-        : this.dashboardForm.selectedResponsibilityCategories ?? [];
-    const fromForm = buildProgramSelectionMapFromCategories(
-      flat,
-      this.allComplianceCategories
-    );
-    if (hasProgramSelectionInMap(fromForm)) {
-      this.applyProgramSelectionMap(fromForm);
-    }
-  }
-
-  private hydrateProgramsFromDashboardData(data: any): boolean {
-    if (!data) {
-      return false;
-    }
-    const programsRaw = data?.programs ?? data?.programId ?? data?.programIds;
-    if (
-      Array.isArray(programsRaw) &&
-      programsRaw.length &&
-      typeof programsRaw[0] === 'object'
-    ) {
-      const chips = programsRaw.map((p: any) => ({
-        id: p?.id ?? p?.programId,
-        category_id: p?.id ?? p?.programId,
-        name: p?.name ?? p?.item_name,
-        item_name: p?.name ?? p?.item_name,
-        programId: p?.id ?? p?.programId,
-      }));
-      this.allProgamSelected = normalizeProgramCategories(chips);
-      this.dashboardForm.selectedResponsibilityCategories = [
-        ...this.allProgamSelected,
-      ];
-      const map = buildProgramSelectionMapFromCategories(
-        chips,
-        this.allComplianceCategories
-      );
-      if (Object.keys(map).length) {
-        this.selectedPrograms = map;
-      }
-      return true;
-    }
-
-    const program = data?.program ?? {};
-    const selectedMap = getSelectedProgramsMap(data);
-    if (selectedMap && hasProgramSelectionInMap(selectedMap)) {
-      this.applyProgramSelectionMap(selectedMap);
-      return true;
-    }
-
-    const allPrograms = program?.all_programs;
-    if (Array.isArray(allPrograms) && allPrograms.length) {
-      if (typeof allPrograms[0] === 'object') {
-        const map = buildProgramSelectionMapFromCategories(
-          allPrograms,
-          this.allComplianceCategories
-        );
-        if (hasProgramSelectionInMap(map)) {
-          this.applyProgramSelectionMap(map);
-          return true;
-        }
-        this.allProgamSelected = normalizeProgramCategories(allPrograms);
-        this.dashboardForm.selectedResponsibilityCategories = [
-          ...this.allProgamSelected,
-        ];
-        return this.allProgamSelected.length > 0;
-      }
-    }
-
-    const categoryIds = extractCategoryIdsFromDashboard(data);
-    if (categoryIds.length) {
-      const stubs = categoryIds.map((id) => ({
-        category_id: id,
-        id,
-        item_name: `Category ${id}`,
-      }));
-      this.allProgamSelected = normalizeProgramCategories(stubs);
-      this.dashboardForm.selectedResponsibilityCategories = [
-        ...this.allProgamSelected,
-      ];
-      return true;
-    }
-    return false;
-  }
-
-  private applyFlatProgramCategories(categories: any[]): void {
-    if (!categories?.length) {
-      return;
-    }
-    this.allProgamSelected = normalizeProgramCategories(categories);
-    this.dashboardForm.selectedResponsibilityCategories = [
-      ...this.allProgamSelected,
-    ];
-    const map = buildProgramSelectionMapFromCategories(
-      categories,
-      this.allComplianceCategories
-    );
-    if (hasProgramSelectionInMap(map)) {
-      this.selectedPrograms = map;
-    }
-    this.cdr.detectChanges();
-  }
-
-  private applyResponsibilityCategoryWidgetFilters(): void {
-    if (this.dashboardForm.selectedResponsibilityCenters.length !== 0) {
-      return;
-    }
-    if (this.dashboardForm.selectedResponsibilityCategories.length === 0) {
-      this.selectedWidgets = this.selectedWidgets.filter(
-        (element: any) => element.module_name != 'COMPLIANCE'
-      );
-    } else if (this.dashboardForm.selectedRiskCategories.length === 0) {
-      this.selectedWidgets = this.selectedWidgets.filter(
-        (element: any) => element.module_name != 'RISK'
-      );
-    }
-  }
-
-  openFromDatePicker() {
-    this.openedDatePicker = 'FROM_DATE';
-
-    this.fromDatePicker?.api?.open();
-    this.datePickerOverlay = true;
-  }
-
-  openToDatePicker() {
-    this.openedDatePicker = 'TO_DATE';
-
-    this.toDatePicker?.api?.open();
-
-    this.datePickerOverlay = true;
-  }
-
-  closeFromDatePicker() {
-    this.fromDatePicker?.api?.close();
-    if (!this.dashboardForm.selectedFromDate) {
-      this.dashboardForm.selectedToDate = undefined;
-      this.hideToDate = true;
-      setTimeout(() => {
-        this.hideToDate = false;
-      }, 20);
-      this.fromDatePicker.api.close();
-      this.datePickerOverlay = false;
-      return;
-    }
-    let minToDate = this.setToDate(this.dashboardForm.selectedFromDate);
-    this.toDatePickerConfig = { min: minToDate };
-
-    const fromDate = new Date(minToDate.split('-').reverse().join('-'));
-    const toDate = new Date(this.dashboardForm.selectedToDate);
-    const inValidDate = fromDate >= toDate ? true : false;
-    if (inValidDate) {
-      this.dashboardForm.selectedToDate = undefined;
-      this.hideToDate = true;
-      setTimeout(() => {
-        this.hideToDate = false;
-      }, 20);
-    }
-
-    this.datePickerOverlay = false;
-  }
-
-  closeToDatePicker() {
-    this.toDatePicker?.api?.close();
-    this.datePickerOverlay = false;
-  }
-
-  animateImage() {
-    const circleImage = document.getElementsByClassName('image');
-  }
-
-  saveFrequency(eventValues: any) {
-    this.dashboardForm.selectedFrequencyType = eventValues.frequencyType;
-    this.dashboardForm.selectedFrequencies = eventValues.frequencies;
-    this.dashboardForm.frequencyMessage = eventValues.frequencyString;
-    this.dashboardForm.frequencyDate = eventValues.selectedDate;
-    this.activateSelector('', false);
-  }
-
-  getCurrentDate() {
-    let today = new Date();
-    return dayjs(today).format('DD-MM-YYYY');
-  }
-
-  setToDate(data: string) {
-    let today = new Date(data);
-    return dayjs(today).format('DD-MM-YYYY');
-  }
-
-  getFromDate(data: string) {
-    let today = new Date(data);
-    return (
-      today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear()
-    );
-  }
-
-  /**
-   * @param data - the date you want to format
-   * @returns Date string in YYYY-MM-DD format, e.g. 2026-05-19
-   */
-  getDateFormate(data: string) {
-    return dayjs(data).format('YYYY-MM-DD');
-  }
-
-
-  configureDashboard() {
-    let fieldsStatus = this.validateDashboard();
-    if (!fieldsStatus) {
-      return;
-    }
-    this.vLoader = true;
-    this.onSubmitDashboard();
-  
-  }
-
-
-
-  /**
-   * Get users list by making api call and pre selects all admins by adding to viewers
-   * @param url contains query params for organization users api
-   */
-  getUsersList(url: any) {
-    this.createDashboardService.getAllUsers().subscribe((res: any) => {
-      this.usersList = res;
-      this.userListLoaded = true;
-
-      if (this.mode === 'EDIT') {
-      } else {
-        this.dashboardForm.selectedViewers = this.setList(
-          this.usersList,
-          [this.createdBy],
-          'member_id'
-        );
-        this.listDetails.selectedUsersList = this.dashboardForm.selectedViewers;
-        this.vLoader = false;
-      }
-    });
-  }
-
-  getGroupList() {
-    this.createDashboardService.getAllGroups().subscribe((res: any) => {
-      this.totalgroups = res.total_items;
-      this.groupList = res.data;
-      this.groupListLoaded = true;
-      if (this.mode === 'EDIT') {
-      } else {
-        this.dashboardForm.selectedGroup = this.setList(
-          this.groupList,
-          [this.createdBy],
-          'group_id'
-        );
-        this.listDetails.selectedGroupList = this.dashboardForm.selectedGroup;
-        this.vLoader = false;
-      }
-    });
-  }
-
-
-  /**
-   * It is to ensure whether all required lists on Policy from is loaded from the api call or not
-   */
-  checkWhetherAllListsLoaded() {
-    // Category trees are no longer eagerly loaded here; these flags were never flipped and blocked EDIT indefinitely.
-    if (this.rcListLoaded && this.userListLoaded && this.groupListLoaded) {
-      if (this.mode === 'EDIT') {
-        this.hydrateEditForm();
-      } else {
-        this.vLoader = false;
-      }
-    } else {
-      setTimeout(() => {
-        this.checkWhetherAllListsLoaded();
-      }, 300);
-    }
-  }
-
-  setSelectedWidgets(data: any) {
-    if (this.mode === 'CREATE') {
-      const widgetsArray: any = [];
-      data.forEach((element: any) => {
-        let obj: any = {};
-        obj.module_name = element.module;
-        obj.widget_name = element.title;
-        obj.widget_code = element.id;
-        obj.sub_widgets = [];
-        obj.state = 'ACTIVE';
-        if (element.subWidgets.length > 0) {
-          element.subWidgets.forEach((subWidget: any) => {
-            let subWidgetObject: any = {};
-            subWidgetObject.widget_name = subWidget.title;
-            subWidgetObject.widget_code = subWidget.id;
-            subWidgetObject.state = subWidget.value ? 'ACTIVE' : 'INACTIVE';
-            obj.sub_widgets.push(Object.assign(subWidgetObject));
-          });
-        }
-        widgetsArray.push(obj);
-      });
-
-      this.dashboardForm.configureWidget = widgetsArray;
-    } else if (this.mode === 'EDIT') {
-      const widgetsArray: any = [];
-
-      data.forEach((element: any) => {
-        if (
-          !this.extractWidgetCodes(this.dashboardForm.configureWidget).includes(
-            element.id
-          )
-        ) {
-          let obj: any = {};
-          obj.module_name = element.module;
-          obj._id = '';
-          obj.widget_name = element.title;
-          obj.widget_code = element.id;
-          obj.sub_widgets = [];
-          obj.state = 'ACTIVE';
-          if (element.subWidgets.length > 0) {
-            element.subWidgets.forEach((subWidget: any) => {
-              let subWidgetObject: any = {};
-              subWidgetObject._id = '';
-              subWidgetObject.widget_name = subWidget.title;
-              subWidgetObject.widget_code = subWidget.id;
-              subWidgetObject.state = subWidget.value ? 'ACTIVE' : 'INACTIVE';
-              obj.sub_widgets.push(subWidgetObject);
-            });
-          }
-          this.dashboardForm.configureWidget.push(obj);
-        } else {
-          const index = this.selectedWidgets.findIndex(
-            (ele: any) => ele.widget_code == element.id
-          );
-          if (index != -1) {
-            this.selectedWidgets[index].state = 'ACTIVE';
-            if (this.selectedWidgets[index].sub_widgets.length > 0) {
-              this.selectedWidgets[index].sub_widgets.forEach(
-                (subWidgetData: any) => {
-                  const elementIndex = element.subWidgets.findIndex(
-                    (ele: any) => ele.id == subWidgetData.widget_code
-                  );
-                  if (elementIndex != -1) {
-                    subWidgetData.state = element.subWidgets[elementIndex].value
-                      ? 'ACTIVE'
-                      : 'INACTIVE';
-                  }
-                }
-              );
-            }
-          }
-        }
-      });
-      this.dashboardForm.configureWidget.forEach((savedWidget: any) => {
-        const index = data.findIndex(
-          (dataElement: any) => dataElement.id == savedWidget.widget_code
-        );
-        if (index == -1) {
-          savedWidget.state = 'INACTIVE';
-          if (savedWidget.sub_widgets.length > 0) {
-            savedWidget.sub_widgets.forEach((saveSubWidget: any) => {
-              saveSubWidget.state = 'INACTIVE';
-            });
-          }
-        }
-      });
-    }
-    this.selectedWidgets = data;
-    this.openConfigureWidgets = false;
-    this.submitDashboard();
-  }
-
-  extractWidgetCodes(widgets: any[]) {
-    const widgetCodes: any[] = [];
-
-    widgets?.forEach((widget: any) => {
-      if (widget?.widget_code) {
-        widgetCodes.push(widget?.widget_code);
-      }
-    });
-
-    return widgetCodes;
-  }
-
-  closeConfigureWidgets(event: boolean) {
-    this.openConfigureWidgets = event;
-  }
-
-  /**
-   * Filter list user's list based on pagination by making api call
-   * @param event specifies a boolean value to call api
-   */
-  paginationFilter(event: any) {
-    if (event) {
-      this.getUsersList({
-        p:
-          this.paginationService.currentPage === 1
-            ? ''
-            : this.paginationService.currentPage,
-        type: 'all_except_executive',
-        q: !this.paginationService.searchValue
-          ? ''
-          : this.paginationService.searchValue,
-      });
-    }
-  }
-
-  getRCList() {
-    this.createDashboardService.getResponsibilityCenterList().subscribe(
-      (res: any) => {
-        this.responsibilityCentersList = this.normalizeRcList(res);
-        this.rcListLoaded = true;
-        this.applyPendingResponsibilityCenters();
-        if (this.mode === 'EDIT') {
-          const ids = this.responsibilityCentersList.filter((rc: any) => this.dashboardDetails?.responsibilityCenters.includes(rc.rcid)).map((rc: any) => rc.item_id);
-          this.saveSelectedList('rc', ids);
-        }
-      },
-      (err: any) => {
-        console.error(err);
-        this.rcListLoaded = true;
-        this.applyPendingResponsibilityCenters();
-      }
-    );
-  }
-  /**
-   * #### Description
-   *
-   * Returns the unique array of object based on unique key
-   * @param array
-   * @param key
-   * @returns
-   */
-  uniqueByProp(array: any, key: string) {
-    return Array.from(
-      array
-        .reduce(
-          (acc: any, item: any) => (
-            item && item[key] && acc.set(item[key], item), acc
-          ),
-          new Map()
-        )
-        .values()
-    );
-  }
-
-  saveSelectedList(type: string, selectedItems: any) {
-    switch (type) {
-      case 'rc':
-        this.dashboardForm.selectedResponsibilityCenters = this.setList(
-          this.responsibilityCentersList,
-          selectedItems,
-          'item_id'
-        );
-        if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
-          if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'COMPLIANCE'
-            );
-          } else if (this.dashboardForm.selectedRiskCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'RISK'
-            );
-          }
-        }
-        break;
-      case 'whoCanView':
-        this.dashboardForm.selectedViewers = this.uniqueByProp(
-          selectedItems?.users,
-          'member_id'
-        );
-        this.listDetails.selectedUsersList = this.dashboardForm.selectedViewers;
-        this.dashboardForm.selectedGroup = this.uniqueByProp(
-          selectedItems?.groups,
-          'group_id'
-        );
-        this.listDetails.selectedGroupList = this.dashboardForm.selectedGroup;
-        break;
-      case 'responsibilityCategories':
-        this.dashboardForm.selectedResponsibilityCategories =
-          normalizeProgramCategories(
-            Array.isArray(selectedItems)
-              ? selectedItems
-              : flattenProgramSelectionMap(selectedItems ?? {})
-          );
-        this.applyResponsibilityCategoryWidgetFilters();
-        break;
-      case 'riskCategory':
-        this.dashboardForm.selectedRiskCategories = selectedItems;
-        if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
-          if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'COMPLIANCE'
-            );
-          } else if (this.dashboardForm.selectedRiskCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'RISK'
-            );
-          }
-        }
-        break;
-    }
-    this.activateSelector('', false);
-  }
-
-  remove(type: any, event: any, removeIndex?: any) {
-    switch (type) {
-      case 'rc':
-        const rcIndex =
-          this.dashboardForm.selectedResponsibilityCenters.findIndex(
-            (rc: any) => rc.rc_id == event.rc_id
-          );
-        if (rcIndex !== -1) {
-          const parentRc: any =
-            this.dashboardForm.selectedResponsibilityCenters[rcIndex];
-          this.dashboardForm.selectedResponsibilityCenters.splice(rcIndex, 1);
-
-          if (parentRc?.item_child_ids?.length > 0) {
-            parentRc.item_child_ids.forEach((childElement: any) => {
-              const removeIndex =
-                this.dashboardForm.selectedResponsibilityCenters.findIndex(
-                  (removeElement: any) => removeElement.rc_id == childElement
-                );
-              this.dashboardForm.selectedResponsibilityCenters.splice(
-                removeIndex,
-                1
-              );
-            });
-          }
-        }
-        if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
-          if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'COMPLIANCE'
-            );
-          } else if (this.dashboardForm.selectedRiskCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'RISK'
-            );
-          }
-        }
-        break;
-
-      case 'whoCanView':
-        const reviewerIndex = this.dashboardForm.selectedViewers.findIndex(
-          (viewer: any) => viewer.member_id == event.member_id
-        );
-        this.dashboardForm.selectedViewers.splice(reviewerIndex, 1);
-        break;
-      case 'whoCanViewGroup':
-        const groups = this.dashboardForm.selectedGroup.findIndex(
-          (ele: any) => ele?.group_id == event?.group_id
-        );
-        this.dashboardForm.selectedGroup.splice(groups, 1);
-        break;
-      case 'responsibilityCategories':
-        this.checkDefaultProgramOnRemove(event);
-        break;
-
-      case 'riskCategory':
-        const riskCategoryIndex =
-          this.dashboardForm.selectedRiskCategories.findIndex(
-            (riskCategory: any) => riskCategory.category_id == event.category_id
-          );
-        if (riskCategoryIndex !== -1) {
-          const parent: any =
-            this.dashboardForm.selectedRiskCategories[riskCategoryIndex];
-          this.dashboardForm.selectedRiskCategories.splice(
-            riskCategoryIndex,
-            1
-          );
-          if (parent?.child_cat_ids?.length > 0) {
-            parent.child_cat_ids.forEach((childElement: any) => {
-              const removeIndex =
-                this.dashboardForm.selectedRiskCategories.findIndex(
-                  (removeElement: any) =>
-                    removeElement.category_id == childElement
-                );
-              this.dashboardForm.selectedRiskCategories.splice(removeIndex, 1);
-            });
-          }
-        }
-        this.dashboardForm.selectedRiskCategories.splice(riskCategoryIndex, 1);
-        if (this.dashboardForm.selectedResponsibilityCenters.length == 0) {
-          if (this.dashboardForm.selectedResponsibilityCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'COMPLIANCE'
-            );
-          } else if (this.dashboardForm.selectedRiskCategories.length == 0) {
-            this.selectedWidgets = this.selectedWidgets.filter(
-              (element: any) => element.module_name != 'RISK'
-            );
-          }
-        }
-        break;
-    }
-  }
-
-  setList(list: any[], ids: any[], key: string) {
-    return this.setListByIds(list, ids, [key]);
-  }
-
-  private setListByIds(list: any[], ids: any[], keys: string[]) {
-    const data: any[] = [];
-    if (!Array.isArray(list) || !Array.isArray(ids)) {
-      return data;
-    }
-
-    ids.forEach((id: any) => {
-      const targetId =id;
-      for (const key of keys) {
-        const index = list.findIndex(
-          (listElement: any) =>
-            listElement?.[key] === targetId
-        );
-
-        if (index !== -1) {
-
-          data.push(list[index]);
-          break;
-        }
-      }
-    });
-    return data;
-  }
-
-  private flattenRcTree(nodes: any): any[] {
-    const flat: any[] = [];
-    const walk = (arr: any[]) => {
-      (arr ?? []).forEach((node) => {
-        if (!node || typeof node !== 'object') {
-          return;
-        }
-        flat.push(node);
-        if (Array.isArray(node.children)) {
-          walk(node.children);
-        }
-        if (Array.isArray(node.items)) {
-          walk(node.items);
-        }
-      });
-    };
-
-    if (Array.isArray(nodes)) {
-      walk(nodes);
-      return flat.length ? flat : nodes;
-    }
-    if (Array.isArray(nodes?.data)) {
-      walk(nodes.data);
-      return flat;
-    }
-    return [];
-  }
-
-  private normalizeRcList(list: any): any[] {
-    const items = this.flattenRcTree(list);
-    return items.map((rc: any) => ({
-      ...rc,
-      rcid: rc?.rcid ?? rc?.rc_id ?? rc?.item_id,
-      item_id: rc?.item_id ?? rc?.rc_id ?? rc?.rcid,
-      item_name:
-        rc?.item_name ??
-        rc?.item_name_string ??
-        (Array.isArray(rc?.rc_name) ? rc.rc_name.join(' < ') : rc?.rc_name) ??
-        '',
-    }));
-  }
-
-  private resolveRcFromTree(tree: any[], ids: number[]): any[] {
-    if (!ids.length || !tree.length) {
-      return [];
-    }
-    const selected: any[] = [];
-    const seen = new Set<number>();
-
-    ids.forEach((id) => {
-      const targetId = Number(id);
-      const match = tree.find(
-        (rc) =>
-          Number(rc?.item_id) === targetId ||
-          Number(rc?.rc_id) === targetId ||
-          Number(rc?.rcid) === targetId ||
-          Number(rc?.id) === targetId ||
-          rc?.item_child_ids?.some((childId: any) => Number(childId) === targetId) ||
-          rc?.item_parent_ids?.some((parentId: any) => Number(parentId) === targetId)
-      );
-      if (!match) {
-        return;
-      }
-      const key = Number(match?.item_id ?? match?.rc_id ?? match?.rcid ?? id);
-      if (!seen.has(key)) {
-        seen.add(key);
-        selected.push(match);
-      }
-    });
-    return selected;
-  }
-
-  private applyPreresolvedRcEntries(): boolean {
-    if (!this.pendingEditRcEntries?.length) {
-      return false;
-    }
-    const tree = this.responsibilityCentersList ?? [];
-    const selected = this.pendingEditRcEntries.map((entry) => {
-      const rcid = Number(entry?.rcid ?? entry?.rc_id ?? entry?.item_id);
-      const fromTree =
-        tree.find((rc) => Number(rc?.item_id) === rcid) ??
-        tree.find((rc) => Number(rc?.rcid) === rcid) ??
-        tree.find((rc) => Number(rc?.rc_id) === rcid);
-      return fromTree ? { ...fromTree } : { ...entry };
-    });
-    this.dashboardForm.selectedResponsibilityCenters = selected;
-    this.pendingEditRcIds = selected.map((rc) =>
-      Number(rc?.rcid ?? rc?.rc_id ?? rc?.item_id)
-    );
-    return true;
-  }
-
-  private applyPendingResponsibilityCenters(): void {
-    if (this.applyPreresolvedRcEntries()) {
-      this.cdr.detectChanges();
-      return;
-    }
-    if (!this.rcListLoaded || !this.pendingEditRcIds.length) {
-      return;
-    }
-    let selected = this.setListByIds(
-      this.responsibilityCentersList,
-      this.pendingEditRcIds,
-      ['item_id', 'rcid', 'rc_id', 'id']
-    );
-    if (selected.length < this.pendingEditRcIds.length) {
-      selected = this.resolveRcFromTree(
-        this.responsibilityCentersList,
-        this.pendingEditRcIds
-      );
-    }
-    this.dashboardForm.selectedResponsibilityCenters = selected;
-    this.cdr.detectChanges();
-  }
-
-  private beginEditHydration(): void {
-    if (this.mode !== 'EDIT') {
-      return;
-    }
-    this.editHydrationCount++;
-    this.vLoader = true;
-  }
-
-  private finishEditHydration(): void {
-    if (this.mode !== 'EDIT') {
-      return;
-    }
-    this.editHydrationCount = Math.max(0, this.editHydrationCount - 1);
-    if (this.editHydrationCount === 0) {
-      this.vLoader = false;
-      this.cdr.detectChanges();
-    }
-  }
-
-  private tryCompleteEditHydration(): void {
-    if (this.mode === 'EDIT' && this.editHydrationCount === 0) {
-      this.vLoader = false;
-      this.cdr.detectChanges();
-    }
-  }
-
-  private wrapEditRequest<T>(
-    request$: Observable<T>,
-    onNext: (value: T) => void
-  ): void {
-    if (this.mode === 'EDIT') {
-      this.beginEditHydration();
-    }
-    request$
-      .pipe(finalize(() => this.finishEditHydration()))
-      .subscribe({
-        next: onNext,
-        error: (err) => console.error(err),
-      });
-  }
-
-  private syncProgramsForEdit(data: any): void {
-    if (!data) {
-      return;
-    }
-    this.hydrateProgramsFromDashboardData(data);
-    this.applyProgramsFromDashboardIds(
-      extractProgramIdsFromDashboard(data),
-      extractCategoryIdsFromDashboard(data),
-      getSelectedProgramsMap(data),
-      data?.program
-    );
-    const categoryIds = extractCategoryIdsFromDashboard(data);
-    if (categoryIds.length) {
-      const fromCompliance = this.setList(
-        this.allComplianceCategories,
-        categoryIds,
-        'category_id'
-      );
-      if (fromCompliance.length && !this.allProgamSelected.length) {
-        this.applyFlatProgramCategories(fromCompliance);
-      }
-    }
-    if (
-      !this.allProgamSelected.length &&
-      this.dashboardForm.selectedResponsibilityCategories.length
-    ) {
-      this.allProgamSelected = [
-        ...this.dashboardForm.selectedResponsibilityCategories,
-      ];
-    }
-    this.syncProgramSelectionMapFromForm();
-  }
-
-  private applyProgramsFromDashboardIds(
-    programIds: number[],
-    categoryIds: number[],
-    selectedProgramsMap?: Record<string, any[]>,
-    programPayload?: { all_programs?: any[]; selected_programs?: any }
-  ): void {
-    if (categoryIds.length) {
-      this.loadProgramsForEdit(
-        programIds,
-        categoryIds,
-        selectedProgramsMap,
-        programPayload
-      );
-      return;
-    }
-    if (programIds.length) {
-      this.resolveProgramIdsForEdit(programIds);
-    }
-  }
-
-  private ensureProgramSelectionMapForList(): void {
-    if (hasProgramSelectionInMap(this.selectedPrograms)) {
-      return;
-    }
-    const categoryIds = normalizeIdArray(
-      this.dashboardForm.selectedResponsibilityCategories?.map(
-        (c: any) => c?.category_id ?? c?.id
-      ) ?? []
-    );
-    const programIds = [
-      ...new Set(
-        (this.dashboardForm.selectedResponsibilityCategories ?? []).map(
-          (c: any) => Number(c?.programId ?? c?.program_id ?? c?.parentId)
-        )
-      ),
-    ].filter((id) => !Number.isNaN(id));
-    if (programIds.length || categoryIds.length) {
-      this.loadProgramsForEdit(programIds, categoryIds);
-    }
-  }
-
-  private applyProgramSelectionMap(map: Record<string, any[]>): void {
-    const normalized = normalizeProgramSelectionMap(map);
-    if (!normalized) {
-      return;
-    }
-    this.selectedPrograms = normalized;
-    this.allProgamSelected = flattenProgramSelectionMap(this.selectedPrograms);
-    this.dashboardForm.selectedResponsibilityCategories =
-      normalizeProgramCategories(this.allProgamSelected);
-    this.cdr.detectChanges();
-  }
-
-  private categoryMatchesId(cat: any, categoryIdSet: Set<number>): boolean {
-    const id = Number(cat?.id);
-    const categoryId = Number(cat?.category_id);
-    return (
-      (!Number.isNaN(id) && categoryIdSet.has(id)) ||
-      (!Number.isNaN(categoryId) && categoryIdSet.has(categoryId))
-    );
-  }
-
-  private loadProgramsForEdit(
-    programIds: number[],
-    categoryIds: number[] = [],
-    selectedProgramsMap?: Record<string, any[]>,
-    programPayload?: { all_programs?: any[]; selected_programs?: any }
-  ): void {
-    if (
-      selectedProgramsMap &&
-      typeof selectedProgramsMap === 'object' &&
-      !Array.isArray(selectedProgramsMap) &&
-      hasProgramSelectionInMap(selectedProgramsMap)
-    ) {
-      this.applyProgramSelectionMap(selectedProgramsMap);
-      return;
-    }
-
-    if (
-      programPayload &&
-      this.hydrateProgramsFromDashboardData({ program: programPayload })
-    ) {
-      return;
-    }
-
-    if (!programIds.length && !categoryIds.length) {
-      return;
-    }
-
-    const completeProgramHydration = () => this.finishEditHydration();
-    if (this.mode === 'EDIT') {
-      this.beginEditHydration();
-    }
-
-    this.createDashboardService.getSailsProgramList().subscribe({
-      next: (res: any) => {
-        const programs = parseSailsProgramList(res);
-        const relevantPrograms =
-          programIds.length > 0
-            ? programs.filter((p: any) => programIds.includes(Number(p?.id)))
-            : programs;
-
-        if (!categoryIds.length) {
-          if (programIds.length) {
-            this.resolveProgramIdsForEdit(programIds, programs);
-          }
-          completeProgramHydration();
-          return;
-        }
-
-        const categoryIdSet = new Set(categoryIds);
-        const programsToFetch =
-          relevantPrograms.length > 0 ? relevantPrograms : programs;
-
-        if (!programsToFetch.length) {
-          completeProgramHydration();
-          return;
-        }
-
-        const categoryRequests = programsToFetch.map((program: any) =>
-          this.createDashboardService.getProgramCategories(program.id).pipe(
-            map((catRes: any) => ({
-              program,
-              categories: catRes?.data?.categories ?? catRes?.categories ?? [],
-            }))
-          )
-        );
-        forkJoin(categoryRequests)
-          .pipe(finalize(() => completeProgramHydration()))
-          .subscribe({
-            next: (rawResults: unknown) => {
-              const results = rawResults as Array<{
-                program: any;
-                categories: any[];
-              }>;
-              const map: Record<string, any[]> = {};
-              results.forEach(({ program, categories }) => {
-                const selected = (categories ?? []).filter((cat: any) =>
-                  this.categoryMatchesId(cat, categoryIdSet)
-                );
-                if (selected.length) {
-                  map[String(program.id)] = selected;
-                }
-              });
-              if (hasProgramSelectionInMap(map)) {
-                this.applyProgramSelectionMap(map);
-              } else if (this.allProgamSelected.length) {
-                this.syncProgramSelectionMapFromForm();
-              }
-            },
-            error: (err) => console.error(err),
-          });
-      },
-      error: (err) => {
-        console.error(err);
-        completeProgramHydration();
-      },
-    });
-  }
-
-  /** Custom dashboards often store program ids only — resolve names for form chips. */
-  private resolveProgramIdsForEdit(
-    programIds: number[],
-    programsFromList?: any[]
-  ): void {
-    if (!programIds.length) {
-      return;
-    }
-    const apply = (programs: any[]) => {
-      const matched = programs.filter((p: any) =>
-        programIds.includes(Number(p?.id))
-      );
-      if (!matched.length) {
-        return;
-      }
-      const chips = matched.map((p: any) => ({
-        id: p.id,
-        category_id: p.id,
-        name: p.name,
-        item_name: p.name,
-        programId: p.id,
-      }));
-      this.allProgamSelected = normalizeProgramCategories(chips);
-      this.dashboardForm.selectedResponsibilityCategories = [
-        ...this.allProgamSelected,
-      ];
-      const map: Record<string, any[]> = {};
-      matched.forEach((p: any) => {
-        map[String(p.id)] = [];
-      });
-      this.selectedPrograms = map;
-      this.cdr.detectChanges();
-    };
-
-    if (programsFromList?.length) {
-      apply(programsFromList);
-      return;
-    }
-
-    if (this.mode === 'EDIT') {
-      this.beginEditHydration();
-    }
-    this.createDashboardService
-      .getSailsProgramList()
-      .pipe(finalize(() => this.finishEditHydration()))
-      .subscribe({
-        next: (res: any) => {
-          apply(parseSailsProgramList(res));
-        },
-        error: (err) => console.error(err),
-      });
-  }
-
-  private buildEditDashboardData(): any {
-    const row = this.dashboardDetails ?? {};
-    const core = row?.dashboard_details ?? row?.dashboard ?? row;
-    const programSource =
-      core?.programs 
-    const rcSource =
-      core?.responsibilityCenters
-
-    return {
-      ...row,
-      ...core,
-      cdid: core?.cdid ?? row?.cdid,
-      dashboard_name: core?.name ?? row?.dashboard_name,
-      name: core?.name ?? row?.dashboard_name,
-      description: core?.description ?? row?.description,
-      viewers: core?.viewers ?? row?.viewers,
-      visible_to_users: core?.visible_to_users ?? row?.visible_to_users,
-      visible_to_groups: core?.visible_to_groups ?? row?.visible_to_groups,
-      programs: programSource,
-      programId: extractProgramIdsFromDashboard({
-        programs: programSource,
-        program: core?.program ?? row?.program,
-      }),
-      responsibility_category:
-        core?.responsibility_category ??
-        row?.responsibility_category ??
-        core?.responsibilityCategory ??
-        [],
-      rcId: core.rcId,
-      selectedRcEntries:
-        row?.selectedRcEntries ??
-        core?.selectedRcEntries ??
-        [],
-      responsibilityCenters: rcSource,
-      responsibility_center: rcSource,
-      responsibilityCenterId: core.rcId,
-      program: core?.program ?? row?.program,
-      timeframe:
-        core?.timeframe ??
-        (row?.time_frame_from || row?.time_frame_to
-          ? { from: row?.time_frame_from, to: row?.time_frame_to }
-          : undefined),
-      time_frame_from:
-        core?.timeframe?.from ??
-        core?.timeframe?.start_date ??
-        row?.time_frame_from,
-      time_frame_to:
-        core?.timeframe?.to ?? core?.timeframe?.end_date ?? row?.time_frame_to,
-      created_by: core?.createdBy ?? core?.created_by ?? row?.created_by,
-      createdBy: core?.createdBy ?? core?.created_by ?? row?.createdBy,
-    };
-  }
-  submitted = false;
-
-  /**
-   * Returns id's from a particular list elements
-   * @param list actual selected list
-   * @param key contains key to extract id from the list
-   */
-  returnIds(list: any[], key: string) {
-    return list?.map((ele) => {
-      if (ele[key]) {
-        return ele[key];
-      }
-    });
-  }
-
-  /**
-   * Validates the data submitted on create dashboard form
-   */
-  validateDashboard() {
-    setTimeout(() => {
-      this.submitted = true;
-    }, 100);
-    const event = this.dashboardForm.dashboardName;
-    const re = /&nbsp;|<br>/g;
-    this.dashboardForm.dashboardName = event.replace(re, '').trim();
-    const description = this.dashboardForm.dashboardDescriptionText;
-    this.dashboardForm.dashboardDescriptionText = description
-      .replace(re, '')
-      .trim();
-    if (
-      !this.dashboardForm.dashboardName ||
-      this.dashboardForm.dashboardName.trim() == '' ||
-      this.dashboardForm.dashboardName.length > 30 ||
-      this.textCount.transform(this.dashboardForm?.dashboardDescriptionText) >
-        250 ||
-      (this.dashboardForm?.selectedFromDate &&
-        !this.dashboardForm?.selectedToDate) ||
-      (this.dashboardForm.selectedResponsibilityCenters.length == 0)
-    ) {
-      return false;
-    }
-    return true;
-  }
-
-  /**
-   * Makes an api call to create a dashboad
-   * @param dashboard contains dashboardForm data
-   */
-  submitDashboard() {
-    this.submitted = false;
-    const valid = this.validateDashboard();
-    if (!valid) {
-      return false;
-    }
-    this.vLoader = true;
-    const dashboard = this.dashboardForm;
-    const payload: any = {
-      viewer: {
-        userId: this.returnIds(dashboard.selectedViewers, 'uid'),
-        userGroupId: this.returnIds(dashboard.selectedGroup, 'ugid'),
-      },
-
-      widget_details: dashboard.configureWidget,
-      dashboard_id: this.dashboardId,
-    };
-  
-    this.createDashboardService.saveWidgetDetails(payload).subscribe({
-      next: (res: any) => {
-        // saveWidgetDetails can return freshest bridge id; merge it for redirect.
-        const widgetPayload = res?.data ?? res ?? {};
-        this.createdDashboard = {
-          ...(this.createdDashboard ?? {}),
-          ...(widgetPayload?.dashboard ?? {}),
-          cddid:
-            this.createdDashboard?.cddid ??
-            widgetPayload?.cddid ??
-            widgetPayload?.cdid ??
-            widgetPayload?.dashboard_bridge_id,
-          cdid:
-            this.createdDashboard?.cdid ??
-            widgetPayload?.cdid ??
-            widgetPayload?.cddid ??
-            widgetPayload?.dashboard_bridge_id,
-          dashboard_bridge_id:
-            this.createdDashboard?.dashboard_bridge_id ??
-            widgetPayload?.dashboard_bridge_id ??
-            widgetPayload?.dashboardBridgeId,
-          dashboardBridgeId:
-            this.createdDashboard?.dashboardBridgeId ??
-            widgetPayload?.dashboardBridgeId ??
-            widgetPayload?.dashboard_bridge_id,
-        };
-        this.dashboardId = this.getCreatedDashboardCdid();
-        this.vLoader = false;
-        this.isSmiley = true;
-        this.smileyMessage = this.mode === 'EDIT' ? 'The dashboard has been updated.' : 'The dashboard has been created.';
-        setTimeout(() => {
-          this.isSmiley = false;
-          const cdid = this.getCreatedDashboardCdid();
-          const closeMode = this.redirectAfterCreate
-            ? 'created'
-            : this.mode === 'EDIT'
-              ? 'updated'
-              : 'created';
-          this.redirectAfterCreate = false;
-          this.close.emit({
-            mode: closeMode,
-            id: cdid,
-            cdid,
-            dashboardBridgeId:
-              this.createdDashboard?.dashboard_bridge_id ??
-              this.createdDashboard?.dashboardBridgeId,
-            dashboard: this.createdDashboard,
-          });
-        }, 3000);
-      },
-      error: (error: any) => {
-        console.error('saveWidgetDetails error =>', error);
-        this.snackBar.show(error.error.statusMessage, 'alert');
-        this.vLoader = false;
-      }
-    })
-
-
-  }
-
-  closeContainer(message: string) {
-    this.close.emit(message);
-  }
-
-  onSubmitDashboard() {
-    const dashboard = this.dashboardForm;
-    const payload: any = {
-      dashboard_name: dashboard.dashboardName,
-      description: [
-        {
-          content: dashboard.dashboardDescriptionText,
-          attachments: [],
-        },
-      ],
-      visible_to_users: this.returnIds(dashboard.selectedViewers, 'uid'),
-      visible_to_groups: this.returnIds(dashboard.selectedGroup, 'ugid'),
-      responsibility_center: this.returnIds(
-        dashboard.selectedResponsibilityCenters,
-        'rcid'
-      ),
-      responsibility_category: this.returnIds(
-        dashboard.selectedResponsibilityCategories,
-        'category_id'
-      ),
-      risk_category: this.returnIds(
-        dashboard.selectedRiskCategories,
-        'category_id'
-      ),
-      display_criteria:
-        dashboard.displayCriteria === 'and'
-          ? 'BOTH_RC_AND_CATEGORY'
-          : 'RC_OR_CATEGORY',
-
-      widget_details: dashboard.configureWidget,
-      program: {
-        all_programs: this.allProgamSelected,
-        selected_programs: this.selectedPrograms,
-      },
-      timeframe: {
-        start_date: dashboard.selectedFromDate
-          ? this.getDateFormate(dashboard?.selectedFromDate)
-          : '',
-        end_date: dashboard.selectedToDate
-          ? this.getDateFormate(dashboard?.selectedToDate)
-          : '',
-      },
-
-    };
-    const createDashboardPayload = this.createDashboardService.buildPayload(payload);
-    this.saveDashboard(createDashboardPayload);
-
-  }
-
-  saveDashboard(payload: any) {
-    let apiCall = this.createDashboardService.createDashboard(payload);
-    if(this.mode === 'EDIT') {
-      apiCall = this.createDashboardService.updateDashboard(payload, this.dashboardDetails?.recordId);
-    }
-    apiCall.subscribe({
-      next: (res: any) => {
-        const wasCreate = this.mode === 'CREATE';
-        this.createdDashboard = res?.data?.dashboard ?? null;
-        this.dashboardDetails = this.createdDashboard
-        this.dashboardId = this.getCreatedDashboardCdid();
-        this.dashboardDetails['recordId'] = this.createdDashboard?.id
-        this.vLoader = false;
-        this.openConfigureWidgets = true;
-        this.showComplianceWidgets = false;
-        if (wasCreate) {
-          this.redirectAfterCreate = true;
-        }
-        this.mode = 'EDIT'
-
-      },
-      error: (error: any) => {
-        this.vLoader = false;
-        if(error.status == 422) {
-          this.snackBar.show(
-            error.error.statusMessage,
-            'alert'
-          );        }
-      }
-    })
-  }
-
-  private getCreatedDashboardCdid(): string {
-    const dash = this.createdDashboard;
-    const cdid =
-      dash?.cddid ??
-      dash?.cdid ??
-      dash?.cdId ??
-      dash?.dashboard_bridge_id ??
-      dash?.dashboardBridgeId ??
-      dash?.dashboard?.dashboard_bridge_id ??
-      this.dashboardId;
-    return cdid != null && cdid !== '' ? String(cdid) : '';
-  }
-
-  private hydrateEditForm(): void {
-    if (this.editFormHydrated) {
-      return;
-    }
-    this.editFormHydrated = true;
-    this.editDashboard();
-  }
-
-  private applyWidgetsFromGetWidgetsResponse(widgets: {
-    widgetArr: any[];
-    allWidgetsArray: any[];
-  }): void {
-    const savedWidgets = filterActiveWidgets(widgets?.widgetArr ?? []);
-    const catalogWidgets = widgets?.allWidgetsArray?.length
-      ? widgets.allWidgetsArray
-      : savedWidgets;
-    this.dashboardForm.configureWidget = savedWidgets;
-    this.selectedWidgets = [...savedWidgets];
-    this.displayedWidgets = [...catalogWidgets];
-  }
-
-  /** EDIT mode only: GET getWidgets?dashboardId={cdid} */
-  private loadEditModeWidgets(cdid: string): void {
-    if (this.mode !== 'EDIT' || !cdid) {
-      return;
-    }
-    this.wrapEditRequest(
-      this.createDashboardService.fetchCustomDashboardWidgetDetails(cdid),
-      (widgets) => {
-        this.applyWidgetsFromGetWidgetsResponse(widgets);
-        this.cdr.detectChanges();
-      }
-    );
-  }
-
-  editDashboard() {
-    this.vLoader = true;
-    if (this.mode === 'EDIT') {
-      this.editHydrationCount = 0;
-    }
-    const data = this.buildEditDashboardData();
-    this.pendingEditRcEntries =
-      data?.selectedRcEntries ??
-      this.dashboardDetails?.selectedRcEntries ??
-      [];
-    const editCdid = getEditDashboardCdid(
-      data,
-      this.dashboardDetails,
-      this.dashboardId
-    );
-
-    this.listDetails.nonRemovableUsersList = [
-      data?.createdBy ?? data?.created_by,
-    ].filter((x) => x != null);
-    this.populateDashboardForm(data);
-
-    if (this.mode === 'EDIT' && editCdid) {
-      this.loadEditModeWidgets(editCdid);
-    }
-
-    this.tryCompleteEditHydration();
-  }
-
-  populateDashboardForm(data: any) {
-    try {
-      const descriptionBlock = Array.isArray(data?.description)
-        ? data.description[0]
-        : null;
-      const descriptionText =
-        descriptionBlock?.content ??
-        (typeof data?.description === 'string' ? data.description : '') ??
-        data?.dashboardDescriptionText ??
-        '';
-
-      const visibleUsers = data?.visible_to_users ?? data?.viewers?.userId ?? [];
-      const visibleUserIds = data?.viewers?.userId ?? [];
-      const visibleGroups = data?.viewers?.userGroupId ?? [];
-      const visibleGroupIds = data?.viewers?.userGroupId ?? [];
-      this.pendingEditRcEntries =
-        data?.selectedRcEntries ??
-        this.dashboardDetails?.selectedRcEntries ??
-        [];
-      this.pendingEditRcIds = extractRcIdsFromDashboard(data);
-      this.applyPreresolvedRcEntries();
-      const riskCategories = data?.risk_category ?? [];
-      const riskCategoryIds = (riskCategories ?? []).map((risk: any) =>
-        typeof risk === 'object' ? risk?.category_id ?? risk?.id : risk
-      );
-      const startDate =
-        data?.timeframe?.start_date ??
-        data?.timeframe?.from ??
-        data?.time_frame_from;
-      const endDate =
-        data?.timeframe?.end_date ??
-        data?.timeframe?.to ??
-        data?.time_frame_to;
-      this.dashboardForm.dashboardName =
-        data?.dashboard_name ?? data?.name ?? '';
-      this.dashboardForm.dashboardDescriptionText = descriptionText;
-      this.dashboardForm.selectedViewers = this.setListByIds(
-        this.usersList,
-        visibleUserIds,
-        ['member_id', 'uid', 'id']
-      );
-      this.listDetails.selectedUsersList = this.dashboardForm.selectedViewers;
-      this.dashboardForm.selectedGroup = this.setListByIds(
-        this.groupList,
-        visibleGroupIds,
-        ['group_id', 'ugid', 'id']
-      );
-      this.listDetails.selectedGroupList = this.dashboardForm.selectedGroup;
-      this.applyPendingResponsibilityCenters();
-      this.syncProgramsForEdit(data);
-      this.dashboardForm.selectedRiskCategories =
-        this.setList(
-        this.allRiskCategories,
-        riskCategoryIds,
-        'category_id'
-      );
-      this.dashboardForm.displayCriteria =
-        data?.display_criteria === 'BOTH_RC_AND_CATEGORY' ? 'and' : 'or';
-      this.dashboardForm.selectedFromDate = startDate
-        ? new Date(startDate)
-        : undefined;
-      this.dashboardForm.selectedToDate = endDate
-        ? new Date(endDate)
-        : undefined;
-      if (this.mode !== 'EDIT') {
-        this.vLoader = false;
-        const widgetDetailsRaw =
-          data?.widget_details ?? data?.widgets ?? [];
-        const widgetDetails = Array.isArray(widgetDetailsRaw)
-          ? widgetDetailsRaw
-          : [];
-        const allWidgetsRaw = data?.all_widgets ?? widgetDetails;
-        const allWidgets = Array.isArray(allWidgetsRaw) ? allWidgetsRaw : [];
-        this.dashboardForm.configureWidget = widgetDetails;
-        this.selectedWidgets =
-          widgetDetails.length > 0 ? [...new Set(widgetDetails)] : [];
-        this.displayedWidgets =
-          allWidgets.length > 0 ? [...new Set(allWidgets)] : [];
-      }
-      if (startDate) {
-        const minToDate = this.setToDate(startDate);
-        this.toDatePickerConfig = { min: minToDate };
-      }
-      this.hideToDate = true;
-      setTimeout(() => {
-        this.hideToDate = false;
-      }, 20);
-      this.cdr.detectChanges();
-    } catch (error) {
-      console.error('populate dashboard error =>', error);
-      this.vLoader = false;
-    }
-  }
-
-
-  ngAfterViewChecked() {
-    //your code to update the model
-    this.cdr.detectChanges();
-  }
-
-  setPermission(roleActions: any) {
-    let ifExistRisk = roleActions?.find((el: any) => el.moduleName == 'risk');
-    ifExistRisk?.subModule?.forEach((module: any) => {
-      module?.permissions?.forEach((permission: any) => {
-        switch (permission?.code) {
-          case 'RRMR': {
-            if (permission?.defaultPermission == 1 || permission?.enable == 1) {
-              this.isManageRisk = true;
-            }
-            break;
-          }
-        }
-      });
-    });
-  }
-
-  getElementClassName(el: any): string {
-    if (!el) return '';
-    if (typeof el?.className === 'string') return el?.className;
-    if (typeof el?.className === 'object' && 'baseVal' in el?.className) {
-      return el?.className?.baseVal;
-    }
-    return '';
-  }
-
-  @HostListener('document:click', ['$event'])
-  documentClick(event: any): void {
-    const targetElement = event?.target as Element;
-    const fromDateInputElement =
-      document.getElementById(this.openedDatePicker.toLowerCase()) || null;
-    const datePickerCalendarContainer = document.getElementsByClassName(
-      'dp-day-calendar-container'
-    )[0];
-    const monthYearElement = document.querySelector(
-      '.dp-month-calendar-container'
-    );
-    const isNotMonthYearElement = !monthYearElement?.contains(targetElement);
-
-    const openedElement =
-      this.openedDatePicker === 'FROM_DATE'
-        ? this.fromDatePickerPopup
-        : this.toDatePickerPopup;
-    const isOutsideFromDateInput =
-      !openedElement?.nativeElement?.contains(targetElement);
-    const isNotFromDateElement = event?.target !== fromDateInputElement;
-    const isNotInsideCalendar =
-      !datePickerCalendarContainer?.contains(targetElement);
-    const selectedDatePicker =
-      this.openedDatePicker === 'FROM_DATE'
-        ? this.fromDatePicker
-        : this.toDatePicker;
-
-    const className = this.getElementClassName(targetElement);
-    const isNotCalendarMonth = !className?.includes('dp-calendar-month');
-
-    if (
-      isOutsideFromDateInput &&
-      isNotFromDateElement &&
-      isNotInsideCalendar &&
-      isNotCalendarMonth &&
-      isNotMonthYearElement &&
-      datePickerCalendarContainer
-    ) {
-      this.documentClickListener(
-        event.target,
-        openedElement,
-        selectedDatePicker
-      );
-    }
-  }
-
-  documentClickListener(
-    target: any,
-    openedElements: ElementRef,
-    selectedDatePicker: any
-  ): void {
-    if (
-      !openedElements?.nativeElement?.contains(target) &&
-      selectedDatePicker?.areCalendarsShown
-    ) {
-      selectedDatePicker?.api?.close();
-      this.datePickerOverlay = false;
-    }
-  }
-}