vc-create-dashboard 3.0.83 → 3.0.84

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

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