sf-i-events 1.0.977 → 1.0.979

package/src/sf-i-events.ts

@@ -14,6 +14,7 @@ import { Chart, ChartItem, registerables } from 'chart.js';
 import { SfIElasticText } from 'sf-i-elastic-text';
 import { SfIMultitextarea } from 'sf-i-multitextarea';
 import { SfIReporting } from 'sf-i-reporting';
+import { SfMultiselectSearch } from 'sf-multiselect-search';
 // import {LitElement, html, css} from 'lit';
 // import {customElement} from 'lit/decorators.js';
 
@@ -3112,6 +3113,9 @@ export class SfIEvents extends LitElement {
   @query('#internalcontrols-container')
   _SfOnboardingInternalControlsContainer: any;
 
+  @query('#reportedlocations-list-container')
+  _SfOnboardingReportedLocationsListContainer: any;
+
   @query('#reportedlocations-container')
   _SfOnboardingReportedLocationsContainer: any;
 
@@ -7755,7 +7759,7 @@ export class SfIEvents extends LitElement {
         console.log('idArr', idArr);
         const mmdd = idArr[2] + "/" + idArr[3];
         const j = idArr[4];
-        const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[3]);
+        const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[2]);
         let renewEvent = this.events[mmdd][j];
         let fullEvent = await this.fetchRCMResourceDetails(renewEvent, mmdd + "/" + yyyy, true);
         console.log('renew clicked', fullEvent, fullEvent.reportformatvalues);
@@ -10240,82 +10244,86 @@ export class SfIEvents extends LitElement {
     this.renderOnboardingStatutes(mappedStatutes);
   }
 
-  loadOnboardingCompliances = async () => {
+  loadOnboardingCompliances = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingCompliancesContainer as HTMLDivElement).style.display = 'flex';
-    const mappedStatutes = await this.fetchMappedStatutes();
-    const mappedCompliances = await this.fetchMappedCompliances();
-    this.renderOnboardingCompliances(mappedStatutes, mappedCompliances);
+    const mappedStatutes = await this.fetchMappedStatutesList();
+    console.log("mapped statutes", mappedStatutes);
+    // const mappedStatutes = await this.fetchMappedStatutes();
+    // const mappedCompliances = await this.fetchMappedCompliances();
+    // this.renderOnboardingCompliances(mappedStatutes, mappedCompliances);
+    this.renderOnboardingStatutesDropdownMapping(this._SfOnboardingCompliancesContainer as HTMLDivElement, mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.renderOnboardingCompliances);
   }
 
-  loadOnboardingCountries = async () => {
+  loadOnboardingCountries = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingCountriesContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList();
     // const countriesJobs = await this.fetchCountriesJobs();
-    const mappedCountries = await this.fetchMappedCountries();
-    const mappedCompliances = await this.fetchMappedCompliances();
+    // const mappedCountries = await this.fetchMappedCountries();
+    // const mappedCompliances = await this.fetchMappedCompliances();
     // const mappedStatutes = await this.fetchMappedStatutes();
-    //console.log('countriesJobs', countriesJobs);
-    console.log('mappedCompliances', mappedCompliances);
-    console.log('mappedCountries', mappedCountries);
-
-
-    for (var i = 0; i < mappedCompliances.data.mappings.mappings.length; i++) {
-
-      if (mappedCompliances.data.mappings.mappings[i].id == "33a0deab-e93e-41b7-831a-473f9ea3eea2") {
-        //console.log('uniqcol zero', mappedCompliances.data.mappings.mappings[i]);
-      }
-
-    }
-    this.renderOnboardingCountries(mappedCountries, mappedCompliances, null);
+    // //console.log('countriesJobs', countriesJobs);
+    // console.log('mappedCompliances', mappedCompliances);
+    // console.log('mappedCountries', mappedCountries);
+    // this.renderOnboardingCountries(mappedCountries, mappedCompliances, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingCountriesContainer as HTMLDivElement, 'countries-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, () => { return [] }, this.fetchMappedCountries, this.renderOnboardingCountries);
   }
 
-  loadOnboardingEntities = async () => {
+  loadOnboardingEntities = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingEntitiesContainer as HTMLDivElement).style.display = 'flex';
     // const entitiesJobs = await this.fetchEntitiesJobs();
-    const mappedEntities = await this.fetchMappedEntities();
-    const mappedSerializedCountries = await this.fetchMappedSerializedCountries();
-    const arrStatuteEntitiesApplicabilities = await this.loadProposedFromStatutes(1);
-    // const mappedStatutes = await this.fetchMappedStatutes();
+    const mappedStatutes = await this.fetchMappedStatutesList();
+    // const mappedEntities = await this.fetchMappedEntities();
+    // const mappedSerializedCountries = await this.fetchMappedSerializedCountries();
+    // const arrStatuteEntitiesApplicabilities = await this.loadProposedFromStatutes(1);
+    // // const mappedStatutes = await this.fetchMappedStatutes();
     //console.log('mappedSerializedCountries', mappedSerializedCountries);
     //console.log('mappedEntities', mappedEntities);
     //console.log('entitiesApplicabilities', arrStatuteEntitiesApplicabilities);
-    this.renderOnboardingEntities(mappedEntities, mappedSerializedCountries, null, arrStatuteEntitiesApplicabilities);
+    // this.renderOnboardingEntities(mappedEntities, mappedSerializedCountries, null, arrStatuteEntitiesApplicabilities);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingEntitiesContainer as HTMLDivElement, 'entities-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedCountries, this.fetchMappedEntities, this.renderOnboardingEntities);
   }
 
-  loadOnboardingLocations = async () => {
+  loadOnboardingLocations = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingLocationsContainer as HTMLDivElement).style.display = 'flex';
     // const locationsJobs = await this.fetchLocationsJobs();
-    const mappedSerializedEntities = await this.fetchMappedSerializedEntities();
-    const mappedLocations = await this.fetchMappedLocations();
+    const mappedStatutes = await this.fetchMappedStatutesList();
+    // const mappedSerializedEntities = await this.fetchMappedSerializedEntities();
+    // const mappedLocations = await this.fetchMappedLocations();
     //console.log('mappedserializedentities', mappedSerializedEntities);
-    //console.log('mappedlocations', mappedLocations);
-    this.renderOnboardingLocations(mappedLocations, mappedSerializedEntities, null);
+    //console.log('mappedlocations', mappedLocations); 
+    // this.renderOnboardingLocations(mappedLocations, mappedSerializedEntities, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingLocationsContainer as HTMLDivElement, 'locations-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedEntities, this.fetchMappedLocations, this.renderOnboardingLocations);
   }
 
-  loadOnboardingFunctions = async () => {
+  loadOnboardingFunctions = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingFunctionsContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const functionsJobs = await this.fetchFunctionJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedFunctions = await this.fetchMappedFunctions();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedFunctions = await this.fetchMappedFunctions();
     //console.log('functionjobs', functionsJobs);
     //console.log('mappedserializedlocations', mappedSerializedLocations);
     //console.log('mappedfunctions', mappedFunctions);
-    this.renderOnboardingFunctions(mappedFunctions, mappedSerializedLocations, null);
+    // this.renderOnboardingFunctions(mappedFunctions, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingFunctionsContainer as HTMLDivElement, 'functions-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedLocations, this.fetchMappedFunctions, this.renderOnboardingFunctions);
   }
 
-  loadOnboardingTags = async () => {
+  loadOnboardingTags = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingTagsContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const tagsJobs = await this.fetchTagsJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedTags = await this.fetchMappedTags();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedTags = await this.fetchMappedTags();
     //console.log('mappedSerializedLocations', mappedSerializedLocations);
     //console.log('mappedtags', mappedTags);
-    this.renderOnboardingTags(mappedTags, mappedSerializedLocations, null);
+    // this.renderOnboardingTags(mappedTags, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingTagsContainer as HTMLDivElement, 'tags-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedTags, this.renderOnboardingTags);
   }
 
   loadProposedFromStatutes = async (fieldIndex: number) => {
@@ -10337,175 +10345,206 @@ export class SfIEvents extends LitElement {
     return arrStatuteReporters;
   }
 
-  loadOnboardingReporters = async () => {
+  loadOnboardingReporters = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingReportersContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const reportersJobs = await this.fetchReportersJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedReporters = await this.fetchMappedReporters();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedReporters = await this.fetchMappedReporters();
     // const arrStatuteReporters = await this.loadProposedFromStatutes(1);
     //console.log('mappedSerializedLocations', mappedSerializedLocations);
     //console.log('mappedreporters', mappedReporters);
     //console.log('arrstatutereporters', arrStatuteReporters);
-    this.renderOnboardingReporters(mappedReporters, mappedSerializedLocations, null, null);
+    // this.renderOnboardingReporters(mappedReporters, mappedSerializedLocations, null, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingReportersContainer as HTMLDivElement, 'reporters-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedReporters, this.renderOnboardingReporters);
   }
 
-  loadOnboardingApprovers = async () => {
+  loadOnboardingApprovers = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingApproversContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const approversJobs = await this.fetchApproversJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedApprovers = await this.fetchMappedApprovers();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedApprovers = await this.fetchMappedApprovers();
     // const arrStatuteApprovers = await this.loadProposedFromStatutes(2);
     //console.log('mappedserializedlocations', mappedSerializedLocations);
     //console.log('mappedapprovers', mappedApprovers);
-    this.renderOnboardingApprovers(mappedApprovers, mappedSerializedLocations, null, null);
+    // this.renderOnboardingApprovers(mappedApprovers, mappedSerializedLocations, null, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingApproversContainer as HTMLDivElement, 'approvers-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedApprovers, this.renderOnboardingApprovers);
   }
 
-  loadOnboardingFunctionHeads = async () => {
+  loadOnboardingFunctionHeads = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingFunctionHeadsContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const functionHeadsJobs = await this.fetchFunctionHeadsJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedFunctionHeads = await this.fetchMappedFunctionHeads();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedFunctionHeads = await this.fetchMappedFunctionHeads();
     // const arrStatuteFunctionheads = await this.loadProposedFromStatutes(3);
     //console.log('mappedserializedlocations', mappedSerializedLocations);
     //console.log('mappedfunctionheads', mappedFunctionHeads);
-    this.renderOnboardingFunctionHeads(mappedFunctionHeads, mappedSerializedLocations, null, null);
+    // this.renderOnboardingFunctionHeads(mappedFunctionHeads, mappedSerializedLocations, null, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingFunctionHeadsContainer as HTMLDivElement, 'functionheads-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedFunctionHeads, this.renderOnboardingFunctionHeads);
   }
 
-  loadOnboardingViewers = async () => {
+  loadOnboardingViewers = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingViewersContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const makerViewersJobs = await this.fetchViewersJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedViewers = await this.fetchMappedViewers();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedViewers = await this.fetchMappedViewers();
     // const arrStatuteViewers = await this.loadProposedFromStatutes(5);
     //console.log('mappedSerializedLocations', mappedSerializedLocations);
     //console.log('mappedViewers', mappedViewers);
-    this.renderOnboardingViewers(mappedViewers, mappedSerializedLocations, null, null);
+    // this.renderOnboardingViewers(mappedViewers, mappedSerializedLocations, null, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingViewersContainer as HTMLDivElement, 'viewers-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedViewers, this.renderOnboardingViewers);
   }
 
-  loadOnboardingDocs = async () => {
+  loadOnboardingDocs = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingDocsContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const docsJobs = await this.fetchDocsJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedDocs = await this.fetchMappedDocs();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedDocs = await this.fetchMappedDocs();
     //console.log('mappedSerializedLocations', mappedSerializedLocations);
     //console.log('mappedDocs', mappedDocs);
-    this.renderOnboardingDocs(mappedDocs, mappedSerializedLocations, null);
+    // this.renderOnboardingDocs(mappedDocs, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingDocsContainer as HTMLDivElement, 'docs-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedDocs, this.renderOnboardingDocs);
   }
 
-  loadOnboardingMakerCheckers = async () => {
+  loadOnboardingMakerCheckers = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingMakerCheckersContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const makerCheckersJobs = await this.fetchMakerCheckersJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedMakerCheckers = await this.fetchMappedMakerCheckers();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedMakerCheckers = await this.fetchMappedMakerCheckers();
     //console.log('mappedSerializedLocations', mappedSerializedLocations);
     //console.log('mappedMakerCheckers', mappedMakerCheckers);
-    this.renderOnboardingMakerCheckers(mappedMakerCheckers, mappedSerializedLocations, null);
+    // this.renderOnboardingMakerCheckers(mappedMakerCheckers, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingMakerCheckersContainer as HTMLDivElement, 'makercheckers-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedMakerCheckers, this.renderOnboardingMakerCheckers);
   }
 
-  loadOnboardingAuditors = async () => {
+  loadOnboardingAuditors = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingAuditorsContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const auditorsJobs = await this.fetchAuditorsJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedAuditors = await this.fetchMappedAuditors();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedAuditors = await this.fetchMappedAuditors();
     // const arrStatuteAuditors = await this.loadProposedFromStatutes(4);
     //console.log('mappedSerializedFunctionheads', mappedSerializedLocations);
     //console.log('mappedAuditors', mappedAuditors);
-    this.renderOnboardingAuditors(mappedAuditors, mappedSerializedLocations, null, null);
+    // this.renderOnboardingAuditors(mappedAuditors, mappedSerializedLocations, null, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingAuditorsContainer as HTMLDivElement, 'auditors-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedAuditors, this.renderOnboardingAuditors);
+
   }
 
-  loadOnboardingDuedates = async () => {
+  loadOnboardingDuedates = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingDuedatesContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const duedatesJobs = await this.fetchDueDatesJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedDuedates = await this.fetchMappedDuedates();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedDuedates = await this.fetchMappedDuedates();
     //console.log('mappedSerializedLocations', mappedSerializedLocations);
     //console.log('mappedduedates', mappedDuedates);
-    this.renderOnboardingDuedates(mappedDuedates, mappedSerializedLocations, null);
+    // this.renderOnboardingDuedates(mappedDuedates, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingDuedatesContainer as HTMLDivElement, 'duedates-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedDuedates, this.renderOnboardingDuedates);
   }
 
-  loadOnboardingActivations = async () => {
+  loadOnboardingActivations = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingActivationsContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const activationsJobs = await this.fetchExtensionsJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedActivations = await this.fetchMappedActivations();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedActivations = await this.fetchMappedActivations();
     //console.log('mappedserializedlocations', mappedSerializedLocations);
     //console.log('mappedactivations', mappedActivations);
-    this.renderOnboardingActivations(mappedActivations, mappedSerializedLocations, null);
+    // this.renderOnboardingActivations(mappedActivations, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingActivationsContainer as HTMLDivElement, 'activations-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedActivations, this.renderOnboardingActivations);
   }
 
-  loadOnboardingInvalidations = async () => {
+  loadOnboardingInvalidations = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingInvalidationsContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const invalidationsJobs = await this.fetchExtensionsJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedInvalidations = await this.fetchMappedInvalidations();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedInvalidations = await this.fetchMappedInvalidations();
     //console.log('mappedserializedlocations', mappedSerializedLocations);
     //console.log('mappedinvalidations', mappedInvalidations);
-    this.renderOnboardingInvalidations(mappedInvalidations, mappedSerializedLocations, null);
+    // this.renderOnboardingInvalidations(mappedInvalidations, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingInvalidationsContainer as HTMLDivElement, 'invalidations-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedInvalidations, this.renderOnboardingInvalidations);
   }
 
-  loadOnboardingAlertSchedules = async () => {
+  loadOnboardingAlertSchedules = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingAlertSchedulesContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const alertschedulesJobs = await this.fetchAlertSchedulesJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedAlertSchedules = await this.fetchMappedAlertSchedules();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedAlertSchedules = await this.fetchMappedAlertSchedules();
     //console.log('mappedserializedlocations', mappedSerializedLocations);
     //console.log('mappedalertschedules', mappedAlertSchedules);
-    this.renderOnboardingAlertSchedules(mappedAlertSchedules, mappedSerializedLocations, null);
+    // this.renderOnboardingAlertSchedules(mappedAlertSchedules, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingAlertSchedulesContainer as HTMLDivElement, 'alertschedules-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedAlertSchedules, this.renderOnboardingAlertSchedules);
   }
 
-  loadOnboardingExtensions = async () => {
+  loadOnboardingExtensions = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingExtensionsContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const extensionsJobs = await this.fetchExtensionsJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedExtensions = await this.fetchMappedExtensions();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedExtensions = await this.fetchMappedExtensions();
     //console.log('mappedserializedlocations', mappedSerializedLocations);
     //console.log('mappedextensions', mappedExtensions);
-    this.renderOnboardingExtensions(mappedExtensions, mappedSerializedLocations, null);
+    // this.renderOnboardingExtensions(mappedExtensions, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingExtensionsContainer as HTMLDivElement, 'extensions-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedExtensions, this.renderOnboardingExtensions);
   }
 
-  loadOnboardingTriggers = async () => {
+  loadOnboardingTriggers = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingTriggersContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const triggersJobs = await this.fetchInternalControlsJobs();
     // const mappedSerializedAlertSchedules = await this.fetchMappedSerializedAlertSchedules();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedTriggers = await this.fetchMappedTriggers();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedTriggers = await this.fetchMappedTriggers();
     //console.log('mappedSerializedAlertSchedules', mappedSerializedAlertSchedules);
     //console.log('mappedTriggers', mappedTriggers);
-    this.renderOnboardingTriggers(mappedTriggers, mappedSerializedLocations, null);
+    // this.renderOnboardingTriggers(mappedTriggers, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingTriggersContainer as HTMLDivElement, 'triggers-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedTriggers, this.renderOnboardingTriggers);
   }
 
-  loadOnboardingInternalControls = async () => {
+  loadOnboardingInternalControls = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingInternalControlsContainer as HTMLDivElement).style.display = 'flex';
+    const mappedStatutes = await this.fetchMappedStatutesList()
     // const internalcontrolsJobs = await this.fetchInternalControlsJobs();
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedInternalControls = await this.fetchMappedInternalControls();
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedInternalControls = await this.fetchMappedInternalControls();
     //console.log('mappedSerializedlocations', mappedSerializedLocations);
     //console.log('mappedinternalcontrols', mappedInternalControls);
-    this.renderOnboardingInternalControls(mappedInternalControls, mappedSerializedLocations, null);
+    // this.renderOnboardingInternalControls(mappedInternalControls, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingInternalControlsContainer as HTMLDivElement, 'internalcontrols-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedInternalControls, this.renderOnboardingInternalControls);
   }
 
-  loadOnboardingReportedLocations = async () => {
+  loadOnboardingReportedLocations = async (selectedStatutes: any = []) => {
     this.hideTabContainers();
     (this._SfOnboardingReportedLocationsContainer as HTMLDivElement).style.display = 'flex';
-    const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
-    const mappedReportedLocations = await this.fetchMappedReportedLocations();
+    const mappedStatutes = await this.fetchMappedStatutesList()
+    // const mappedSerializedLocations = await this.fetchMappedSerializedLocations();
+    // const mappedReportedLocations = await this.fetchMappedReportedLocations();
     //console.log('mappedSerializedlocations', mappedSerializedLocations);
     //console.log('mappedReportedLocations', mappedReportedLocations);
-    this.renderOnboardingReportedLocations(mappedReportedLocations, mappedSerializedLocations, null);
+    // this.renderOnboardingReportedLocations(mappedReportedLocations, mappedSerializedLocations, null);
+    this.renderOnboardingStatutesDropdownTagging(this._SfOnboardingReportedLocationsContainer as HTMLDivElement, 'reportedlocations-list-container', mappedStatutes, selectedStatutes, this.fetchMappedCompliances, this.fetchMappedFunctions, this.fetchMappedReportedLocations, this.renderOnboardingReportedLocations);
   }
 
   loadOnboardingSignoff = async () => {
@@ -12467,7 +12506,7 @@ export class SfIEvents extends LitElement {
         console.log('idArr', idArr);
         const mmdd = idArr[2] + "/" + idArr[3];
         const j = idArr[4];
-        const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[3]);
+        const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[2]);
         let renewEvent = this.events[mmdd][j];
         let fullEvent = await this.fetchRCMResourceDetails(renewEvent, mmdd + "/" + yyyy, true);
         console.log('renew clicked', fullEvent, fullEvent.reportformatvalues);
@@ -13200,7 +13239,7 @@ export class SfIEvents extends LitElement {
         console.log('idArr', idArr);
         const mmdd = idArr[2] + "/" + idArr[3];
         const j = idArr[4];
-        const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[3]);
+        const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[2]);
         let renewEvent = this.events[mmdd][j];
         let fullEvent = await this.fetchRCMResourceDetails(renewEvent, mmdd + "/" + yyyy, true);
         console.log('renew clicked', fullEvent, fullEvent.reportformatvalues);
@@ -13413,7 +13452,7 @@ export class SfIEvents extends LitElement {
     const startDate = new Date(startDateStr);
     const endDate = new Date(endDateStr);
     const month = parseInt(monthStr, 10); // Ensure month is a number
-
+    console.log('getting date', startDate, endDate, month);
     if (isNaN(month) || month < 1 || month > 12) {
       return this.calendarStartYYYY
     }
@@ -14494,7 +14533,7 @@ export class SfIEvents extends LitElement {
         console.log('idArr', idArr);
         const mmdd = idArr[2] + "/" + idArr[3];
         const j = idArr[4];
-        const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[3]);
+        const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[2]);
         let renewEvent = this.events[mmdd][j];
         let fullEvent = await this.fetchRCMResourceDetails(renewEvent, mmdd + "/" + yyyy, true);
         console.log('renew clicked', fullEvent, fullEvent.reportformatvalues);
@@ -20169,6 +20208,63 @@ export class SfIEvents extends LitElement {
 
   }
 
+  applyAndReloadTaggingNew = (e: any, colName: string, taggingArray: any, sourceArray: any, divElement: any) => {
+
+    const selectedIndex = e.currentTarget.id.split('-')[1];
+    const tempArray = [];
+    console.log('sourceArray apply', sourceArray, taggingArray);
+    console.log('selectedindexchecking 1', this.selectedCbs)
+    for (var count = 0; count < taggingArray.data.mappings.mappings.length; count++) {
+      console.log('selectedindexchecking', selectedIndex, count, this.selectedCbs.includes(selectedIndex + ""), this.selectedCbs.includes(count + ""));
+      tempArray.push(taggingArray.data.mappings.mappings[count]);
+      if (this.selectedCbs.includes(selectedIndex + '') && this.selectedCbs.includes(count + '')) {
+        if (((divElement as HTMLDivElement).querySelector('#tags-' + selectedIndex) as SfIForm).selectedValues != null) {
+
+          if (tempArray[count] == null) tempArray[count] = {};
+          tempArray[count][colName] = ((divElement as HTMLDivElement).querySelector('#tags-' + selectedIndex) as SfIForm).selectedValues();
+        } else {
+
+          if (tempArray[count] == null) tempArray[count] = {};
+          tempArray[count][colName] = ((divElement as HTMLDivElement).querySelector('#tags-' + selectedIndex) as HTMLInputElement).value;
+        }
+
+      } else {
+
+        if (((divElement as HTMLDivElement).querySelector('#tags-' + count) as SfIForm).selectedValues != null) {
+
+          if (tempArray[count] == null) tempArray[count] = {};
+          if (colName == "countries" || colName == "entities" || colName == "locations") {
+            let selectedValues = ((divElement as HTMLDivElement).querySelector('#tags-' + count) as SfIForm).selectedValues()
+            if (selectedValues == null || selectedValues.length == 0) {
+              tempArray[count] = {};
+              console.log('deleting1', tempArray)
+            } else {
+              tempArray[count][colName] = ((divElement as HTMLDivElement).querySelector('#tags-' + count) as SfIForm).selectedValues();
+            }
+          } else {
+            tempArray[count][colName] = ((divElement as HTMLDivElement).querySelector('#tags-' + count) as SfIForm).selectedValues();
+          }
+
+
+        } else {
+          //console.log('selectedindexchecking D');
+
+          if (tempArray[count] == null) tempArray[count] = {};
+          if (colName == "countries" || colName == "entities" || colName == "locations") {
+            tempArray[count] = {};
+            console.log('deleting2', tempArray);
+          } else {
+            tempArray[count][colName] = ((divElement as HTMLDivElement).querySelector('#tags-' + count) as HTMLInputElement).value;
+          }
+        }
+      }
+    }
+
+    taggingArray.data.mappings.mappings = tempArray;
+    console.log('selectedindexchecking', colName, taggingArray);
+
+  }
+
   getDataValue = (jsonData: any, id: string) => {
 
     let ret: any = null;
@@ -20203,7 +20299,7 @@ export class SfIEvents extends LitElement {
 
   }
 
-  saveMapping = async (divElement: any, uploadBlock: number, jsonData: any, extraFields: any, searchString: string, uploadFunction: any, refreshFunction: any, saveInBackground: boolean = false) => {
+  saveMapping = async (divElement: any, uploadBlock: number, jsonData: any, extraFields: any, searchString: string, uploadFunction: any, refreshFunction: any, saveInBackground: boolean = false, mappedStatutes: Array<any>) => {
 
     const process = async () => {
       const tableRowArr = (divElement as HTMLDivElement).querySelectorAll('.tablerow') as NodeListOf<HTMLTableRowElement>;
@@ -20218,33 +20314,85 @@ export class SfIEvents extends LitElement {
       let updatedRows = [];
       let jsonArr = [];
       if (uploadBlock < 0) {
-        for (var i = 0; i < checkboxArr.length; i++) {
+        if (mappedStatutes.length == 0) {
+          for (var i = 0; i < checkboxArr.length; i++) {
 
-          //console.log('tablerow', (tableRowArr[i] as HTMLTableRowElement));
+            //console.log('tablerow', (tableRowArr[i] as HTMLTableRowElement));
+            if (checkboxArr[i].checked !== true) {
+              continue;
+            }
 
-          if ((tableRowArr[i] as HTMLTableRowElement).style.display == 'none') {
-          } else {
-            updatedRows.push((statuteArr[i] as SfIElasticText).text);
+            if ((tableRowArr[i] as HTMLTableRowElement).style.display == 'none') {
+            } else {
+              updatedRows.push((statuteArr[i] as SfIElasticText).text);
+            }
+            let cols = JSON.parse(this.getColsValue(jsonData, (statuteArr[i] as SfIElasticText).text)[0]);
+            let data = JSON.parse(this.getDataValue(jsonData, (statuteArr[i] as SfIElasticText).text)[0]);
+            var dataToBePushed: any = { id: (statuteArr[i] as SfIElasticText).text, name: data[cols.indexOf('name')], countryname: data[cols.indexOf('country')][0] };
+            /* var dataToBePushed = { id: (statuteArr[k] as SfIElasticText).text, selected: checkboxArr[k].checked, data: this.getDataValue(jsonData, (statuteArr[k] as SfIElasticText).text), cols: this.getColsValue(jsonData, (statuteArr[k] as SfIElasticText).text), extraFields: [] as string[], updatedFields: [] as string[] };
+            for (var j = 0; j < extraFields.length; j++) {
+              const inputArr = (divElement as HTMLDivElement).querySelectorAll('.extra-field-' + j) as NodeListOf<SfIMultitextarea>;
+              const value = inputArr[k].getValues();
+              dataToBePushed.extraFields.push(value);
+              if (j === 0) {
+                const fields = inputArr[i].getFields();
+                dataToBePushed.updatedFields.push(...fields);
+              }
+            } */
+
+            jsonArr.push(dataToBePushed)
           }
+          console.log('jsonArr', jsonArr);
+          //console.log('updatedRows', updatedRows);
+          // const batchNum = new Date().getTime();
+          // await uploadFunction({ "searchstring": searchString, "mappings": jsonArr, "batch": batchNum, "updatedrows": updatedRows });
 
-          var dataToBePushed = { id: (statuteArr[i] as SfIElasticText).text, selected: checkboxArr[i].checked, data: this.getDataValue(jsonData, (statuteArr[i] as SfIElasticText).text), cols: this.getColsValue(jsonData, (statuteArr[i] as SfIElasticText).text), extraFields: [] as string[], updatedFields: [] as string[] };
-          for (var j = 0; j < extraFields.length; j++) {
-            const inputArr = (divElement as HTMLDivElement).querySelectorAll('.extra-field-' + j) as NodeListOf<SfIMultitextarea>;
-            const value = inputArr[i].getValues();
-            // //console.log('value', value);
-            dataToBePushed.extraFields.push(value);
-            if (j === 0) {
-              const fields = inputArr[i].getFields();
-              dataToBePushed.updatedFields.push(...fields);
+          await uploadFunction({ "searchstring": searchString, "mappings": jsonArr });
+        } else {
+          for (var i = 0; i < checkboxArr.length; i++) {
+
+            //console.log('tablerow', (tableRowArr[i] as HTMLTableRowElement));
+            if (checkboxArr[i].checked !== true) {
+              continue;
+            }
+
+            if ((tableRowArr[i] as HTMLTableRowElement).style.display == 'none') {
+            } else {
+              updatedRows.push((statuteArr[i] as SfIElasticText).text);
+            }
+            let cols = JSON.parse(this.getColsValue(jsonData, (statuteArr[i] as SfIElasticText).text)[0]);
+            let data = JSON.parse(this.getDataValue(jsonData, (statuteArr[i] as SfIElasticText).text)[0]);
+            var dataToBePushed: any = { id: (statuteArr[i] as SfIElasticText).text, data: [JSON.stringify(data)], cols: [JSON.stringify(cols)] };
+            /* var dataToBePushed = { id: (statuteArr[k] as SfIElasticText).text, selected: checkboxArr[k].checked, data: this.getDataValue(jsonData, (statuteArr[k] as SfIElasticText).text), cols: this.getColsValue(jsonData, (statuteArr[k] as SfIElasticText).text), extraFields: [] as string[], updatedFields: [] as string[] };
+            for (var j = 0; j < extraFields.length; j++) {
+              const inputArr = (divElement as HTMLDivElement).querySelectorAll('.extra-field-' + j) as NodeListOf<SfIMultitextarea>;
+              const value = inputArr[k].getValues();
+              dataToBePushed.extraFields.push(value);
+              if (j === 0) {
+                const fields = inputArr[i].getFields();
+                dataToBePushed.updatedFields.push(...fields);
+              }
+            } */
+
+            jsonArr.push(dataToBePushed)
+          }
+          let jsonObj: { [key: string]: { [key: string]: any } } = {};
+
+          for (let statuteObj of mappedStatutes) {
+            let statuteid = statuteObj.id;
+            if (jsonObj[statuteid] == null) {
+              jsonObj[statuteid] = {};
+            }
+            for (let mappingObj of jsonArr) {
+              console.log('mappingObj', mappingObj.data, statuteid);
+              if (mappingObj.data[0].indexOf(statuteid) >= 0) {
+                jsonObj[statuteid][mappingObj.id] = mappingObj;
+              }
             }
           }
 
-          jsonArr.push(dataToBePushed)
+          await uploadFunction(jsonObj, mappedStatutes);
         }
-        //console.log('jsonArr', jsonArr);
-        //console.log('updatedRows', updatedRows);
-        const batchNum = new Date().getTime();
-        await uploadFunction({ "searchstring": searchString, "mappings": jsonArr, "batch": batchNum, "updatedrows": updatedRows });
 
       } else {
 
@@ -20261,7 +20409,7 @@ export class SfIEvents extends LitElement {
 
             if ((statuteArr[k] as SfIElasticText) != null) {
 
-              var dataToBePushed = { id: (statuteArr[k] as SfIElasticText).text, selected: checkboxArr[k].checked, data: this.getDataValue(jsonData, (statuteArr[k] as SfIElasticText).text), cols: this.getColsValue(jsonData, (statuteArr[k] as SfIElasticText).text), extraFields: [] as string[], updatedFields: [] as string[] };
+              var dataToBePushed: any = { id: (statuteArr[k] as SfIElasticText).text, selected: checkboxArr[k].checked, data: this.getDataValue(jsonData, (statuteArr[k] as SfIElasticText).text), cols: this.getColsValue(jsonData, (statuteArr[k] as SfIElasticText).text), extraFields: [] as string[], updatedFields: [] as string[] };
               for (var j = 0; j < extraFields.length; j++) {
                 const inputArr = (divElement as HTMLDivElement).querySelectorAll('.extra-field-' + j) as NodeListOf<SfIMultitextarea>;
                 const value = inputArr[k].getValues();
@@ -20287,7 +20435,7 @@ export class SfIEvents extends LitElement {
 
       }
 
-      if (!saveInBackground) refreshFunction();
+      if (!saveInBackground) refreshFunction(mappedStatutes);
     }
 
     if (this.disablesave == "yes") {
@@ -20312,14 +20460,54 @@ export class SfIEvents extends LitElement {
 
   }
 
-  saveTagging = async (mapping: any, uploadFunction: any, refreshFunction: any, saveInBackground: boolean) => {
+  saveTagging = async (mapping: any, selectedStatutes: any, uploadFunction: any, refreshFunction: any, saveInBackground: boolean, colName: string) => {
 
     async function process() {
 
-      //console.log('Saving...', mapping);
+      console.log('Saving...', JSON.stringify(mapping));
+      let statuteids = []
+      let statutewiseMapping: any = {}
+      for (let statutesObj of selectedStatutes) {
+        statuteids.push(statutesObj.id);
+        statutewiseMapping[statutesObj.id] = {};
+        for (let mapObj of mapping.mappings) {
+          if (mapObj.statuteid == statutesObj.id) {
+            let pushObj = mapObj;
+            delete pushObj.statuteid
+            let compoundid = mapObj.id
+
+            // if (colName == "countries" || colName == "entities" || colName == "locations") {
+            switch (colName) {
+              case "countries":
+                compoundid = mapObj.id
+                break;
+
+              case "entities":
+                compoundid = mapObj.countryid + ';' + mapObj.id;
+                break;
+
+              case "locations":
+                compoundid = mapObj.entityid + ';' + mapObj.id;
+                break;
+
+              default:
+                compoundid = mapObj.entityid + ';' + mapObj.locationid + ';' + mapObj.id
+                break;
+            }
 
-      await uploadFunction(mapping);
-      if (!saveInBackground) refreshFunction();
+            // }
+            if (statutewiseMapping[statutesObj.id][compoundid] != null) {
+              let pushObjOld = statutewiseMapping[statutesObj.id][compoundid];
+              pushObj[colName] = [...pushObjOld[colName], ...mapObj[colName]]
+            } else {
+              statutewiseMapping[statutesObj.id][compoundid] = pushObj;
+            }
+          }
+        }
+      }
+      console.log('Uploading ...', JSON.stringify(statutewiseMapping));
+      await uploadFunction(statutewiseMapping, statuteids);
+      if (!saveInBackground) refreshFunction(selectedStatutes);
     }
 
     if (this.disablesave == "yes") {
@@ -21497,7 +21685,7 @@ export class SfIEvents extends LitElement {
 
     const buttonSave = (divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement;
     buttonSave?.addEventListener('click', async () => {
-      await this.saveTagging(taggingArray.data.mappings, uploadFunction, refreshFunction, false);
+      await this.saveTagging(taggingArray.data.mappings, [], uploadFunction, refreshFunction, false, colName);
     });
 
     const buttonCancel = (divElement as HTMLDivElement).querySelector('.button-cancel') as HTMLButtonElement;
@@ -21541,145 +21729,1113 @@ export class SfIEvents extends LitElement {
     this.changedOnboardingItemIds = []
   }
 
-  renderMappingTable = (divElement: any, jsonData: Array<any>, cursor: Array<any>, fetchFunction: any, searchString: string, mappedArray: any, found: number, uploadFunction: any, refreshFunction: any, extraFields: Array<string>, uploadBlock: number, extraFieldPosition: number, colName: string, subfilter: string, statuteColName: string, extraHintsArr: Array<string>) => {
-    console.log('cols1', jsonData);
-    // console.log('cols', jsonData[0].data.cols);
-    //console.log('divelement', divElement);
-    //console.log('jsonData', jsonData);
-    //console.log('cursor', cursor);
-    //console.log('fetch', fetchFunction);
-    //console.log('searchstring', searchString);
-    //console.log('subfiltervalue', subfilter);
-
-    const arrCompliancesFrequencies: any = {};
-
-    if (jsonData.length === 0) return;
+  renderTaggingTableNew = (divElement: any, selectedStatutes: any, sourceObject: any, sourceMapping: any, taggingObject: any, sourceCols: any, uploadFunction: any, refreshFunction: any, colName: any, uniqCols: Array<any>, apiIdDropdown: string, dropdownSearchPhrase: any, mandatoryFields: any, compareFields: Array<any>, anotherProjection: any, extraFields: Array<string>, _arrFeedbackReference: any, proposedUsersLabel: string, subfilter: string) => {
+    console.log('sourceObj', sourceObject)
+    console.log('taggingObj', taggingObject)
+    let sourceArray: any = { data: { mappings: { mappings: sourceObject.data.mappings } } };
+    let taggingArray: any = { data: { mappings: { mappings: taggingObject.data.mappings } } };
+    if (taggingObject.data.mappings.mappings != null) {
+      taggingArray = taggingObject;
+    }
+    console.log('divelement', divElement);
+    console.log('sourcearray', sourceArray);
+    console.log('sourceMapping', sourceMapping);
+    console.log('taggingarray', JSON.stringify(taggingArray));
+    console.log('selectedStatutes', selectedStatutes);
 
     this.selectedCbs = [];
 
-    let colCountry = -1;
-    let colState = -1;
-    let colSubcategory = -1;
-    let colStatute = -1;
-
-    const unfilteredDict: any[] = [];
-
-    var html = '';
-
-    html += '<div>';
-    html += '<h3 part="results-title">Total Items (' + found + ')</h3>';
-    html += '<h4 id="span-filtered" part="results-title"></h4>'
-    html += '<h4 id="span-extra-filled" part="results-title"></h4>'
-    html += '</div>';
-
-
-    html += '<div class="d-flex justify-between align-center left-sticky flex-wrap mb-20">';
-
-    html += '<div id="div-subfiltered"></div>';
-    html += '<div id="scroll-overlay" part="onboarding-scroll-overlay" class="pos-fixed-scroll justify-center align-center">';
-    html += '<div id="scroll-overlay-left" class="mr-10"><button part="button-icon"><span class="material-symbols-outlined">arrow_left_alt</span></button></div>';
-    html += '<div id="scroll-overlay-right" class="ml-10"><button part="button-icon"><span class="material-symbols-outlined">arrow_right_alt</span></button></div>';
-    html += '</div>';
-
-    html += '<div id="detail-overlay" part="onboarding-detail-overlay" class="pos-fixed justify-center align-center hide">';
-    html += '<div class="cover-slide"></div>';
-    html += '<div class="detail-container p-10">';
-    html += '<div class="d-flex justify-between align-center mb-20">';
-    html += '<div part="results-title">Row Details</div>';
-    html += '<button part="button-icon" class="detail-close"><span class="material-symbols-outlined">close</span></button>';
-    html += '</div>';
-    html += '<div id="detail-overlay-list">';
-    html += '</div>';
-    html += '</div>';
-    html += '</div>';
-
-    html += '<div class="d-flex align-center">';
-    html += '<input part="input" type="text" placeholder="Filter" class="input-filter mr-10" value="' + subfilter + '" />';
-    html += '<div class="mr-10">';
-    html += '<div class="d-flex justify-end"><button part="calendar-tab-icon-not-selected" class="material-icons button-toggle-more">expand_more</button><button part="calendar-tab-icon-selected" class="material-icons button-toggle-more-back hide">expand_less</button></div>'
-    html += '<div style="position: absolute; margin-top: 5px;"><button part="button" class="hide d-flex align-center button-download-backups" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">file_save</span><span>Download Backups</span></button><button part="button" class="mt-10 hide d-flex align-center button-export-mapping" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">export_notes</span><span>Export Mapping</span></button></div>'
-    html += '</div>';
-    html += (this.disablesave == "yes" ? '' : '<button part="button" class="button-save" disabled>Save</button>');
-    html += '</div>';
-
-    html += '</div>';
-
-    html += '<table id="table-data">';
+    for (var i = 0; i < taggingArray.data.mappings.mappings.length; i++) {
 
-    html += '<thead>';
-    html += '<th part="td-head" class="td-head">'
-    // html += 'Select';
-    html += '<div id="select-all"><input class="checkbox checkbox-all" part="input-checkbox" type="checkbox" ' + ((this.disableflagggrcresponse.toLowerCase() == "yes") ? 'disabled' : '') + '/></div>';
-    html += '</th>'
-    html += '<th part="td-head" class="td-head">'
-    html += '<div>View</div>';
-    html += '</th>'
-    if (extraFieldPosition === 0) {
-      for (var i = 0; i < extraFields.length; i++) {
-        html += '<th part="td-head" class="td-head">'
-        html += extraFields[i];
-        html += '</th>'
+      if (taggingArray.data.mappings.mappings[i].id != null && sourceArray.data.mappings.mappings[taggingArray.data.mappings.mappings[i].id] == null) {
+        taggingArray.data.mappings.mappings.splice(i, 1)
       }
     }
-    if (colName.toLowerCase() == "compliances") {
-      html += '<th part="td-head" class="td-head">'
-      html += 'Proposed Users';
-      html += '</th>'
-    }
-    html += '<th part="td-head" class="td-head">'
-    html += 'Id';
-    html += '</th>'
+    let mandatoryPresent = true;
+    console.log('mandatoryFields', mandatoryFields);
+    for (i = 0; i < (mandatoryFields as Array<string>).length; i++) {
 
-    // for(var j = 0; j < JSON.parse(jsonData[0].data.cols).length; j++) {
+      for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
 
-    //   if(jsonData[0].cols.includes(JSON.parse(jsonData[0].data.cols)[j])) {
-    //     html += '<th part="td-head" class="td-head ' + (statuteColName.toLowerCase() == JSON.parse(jsonData[0].data.cols)[j].toLowerCase() ? 'left-sticky' : '') + '">'
-    //     html += JSON.parse(jsonData[0].data.cols)[j]
-    //     html += '</th>'
-    //   }
 
-    // }
+        if (taggingArray.data.mappings.mappings[j][mandatoryFields[i]] == null) {
+          console.log('mandatory not found', mandatoryFields[i])
+          mandatoryPresent = false;
+        }
 
-    for (var j = 0; j < jsonData[0].cols.length; j++) {
-      console.log('jsoncols', JSON.parse(jsonData[0].data.cols), jsonData[0].cols.length, j)
-      html += '<th part="td-head" class="td-head ' + (statuteColName.toLowerCase() == (JSON.parse(jsonData[0].data.cols)[j] ?? "").toLowerCase() ? 'left-sticky' : '') + '">'
-      // html += jsonData[0].cols[j]
-      html += '</th>'
+      }
 
     }
 
-    if (extraFieldPosition === 1) {
-      for (var i = 0; i < extraFields.length; i++) {
-        html += '<th part="td-head" class="td-head">'
-        html += extraFields[i];
-        html += '</th>'
+    var taggedIds = []
+    for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+      if (taggingArray.data.mappings.mappings[j] != null) {
+        if (sourceArray.data.mappings.mappings[taggingArray.data.mappings.mappings[j].id] != null) {
+          if (taggedIds.indexOf(taggingArray.data.mappings.mappings[j].id) < 0) {
+            taggedIds.push(taggingArray.data.mappings.mappings[j].id)
+          }
+        }
       }
     }
-    html += '</thead>'
-
-    //console.log('colstate',  JSON.parse(jsonData[0].data.cols));
-
-    for (var i = 0; i < JSON.parse(jsonData[0].data.cols).length; i++) {
-      if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "country") {
-        console.log('colstate country', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
-        colCountry = i;
-      }
-      if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "state") {
-        //console.log('colstate state', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
-        colState = i;
+    if(sourceMapping.data == null){
+      sourceMapping = {data:{mappings:Object.values(sourceArray.data.mappings.mappings)}}
+    }
+    for (var i = 0; i < (sourceMapping.data?.mappings ?? []).length; i++) {
+      let flagMatch = false;
+      if (sourceArray.data.mappings.mappings[sourceMapping.data.mappings[i].id] == null) {
+        continue;
       }
-      if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "subcategory") {
-        //console.log('colstate subcategory', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
-        colSubcategory = i;
+      for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+        if (taggingArray.data.mappings.mappings[j] != null) {
+          if (sourceMapping.data.mappings[i].id == taggingArray.data.mappings.mappings[j].id) {
+            let flagMatchObj = true;
+            for (let objKey of compareFields) {
+              if (sourceMapping.data.mappings[i][objKey] !== taggingArray.data.mappings.mappings[j][objKey] && taggingArray.data.mappings.mappings[j][objKey] != null) {
+                console.log('Flag Mismatch', objKey, sourceMapping.data.mappings[i][objKey], taggingArray.data.mappings.mappings[j][objKey])
+                flagMatchObj = false;
+                break;
+              }
+            }
+            if (flagMatchObj == true) {
+              flagMatch = true;
+              continue;
+            }
+          }
+        }
       }
-      if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == statuteColName) {
-        //console.log('colstate statute', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
-        colStatute = i;
+      if (!flagMatch) {
+        let objToPush: any = sourceMapping.data.mappings[i]
+        for (i = 0; i < (mandatoryFields as Array<string>).length; i++) {
+          objToPush[mandatoryFields[i]] = ""
+        }
+        taggingArray.data.mappings.mappings.push(objToPush);
       }
     }
 
-    //var countExtra0 = 0;
-    var countextra = [];
+
+    var tagged = 0;
+    var changed = 0;
+    var total = 0;
+    for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+      if (taggingArray.data.mappings.mappings[j] != null) {
+        if (sourceMapping.data == null) {
+          if (sourceArray.data.mappings.mappings[taggingArray.data.mappings.mappings[j].id] != null) {
+            total++;
+            let tagStr = ""
+            for (let col of compareFields) {
+              tagStr += `${taggingArray.data.mappings.mappings[j][col]};`
+            }
+            tagStr.slice(0, -1)
+            if (this.changedOnboardingItemIds.length > 0) {
+              let changedId = tagStr
+              if (this.changedOnboardingItemIds.indexOf(changedId) >= 0) {
+                changed++;
+              }
+            }
+            if (taggingArray.data.mappings.mappings[j][colName] == null || taggingArray.data.mappings.mappings[j][colName] == "" || taggingArray.data.mappings.mappings[j][colName].length == 0) {
+              if (colName == "countries" || colName == "entities" || colName == "locations") {
+                let flagNull = false;
+                for (let mandatoryfield of mandatoryFields) {
+                  if (taggingArray.data.mappings.mappings[j][mandatoryfield] == null || taggingArray.data.mappings.mappings[j][mandatoryfield] == "") {
+                    flagNull = true;
+                    break;
+                  }
+                }
+                if (flagNull) {
+                  continue
+                }
+              } else {
+                continue;
+              }
+            }
+            tagged++;
+          }else{
+            console.log('tagged not found', taggingArray.data.mappings.mappings[j], sourceObject)
+          }
+        } else {
+          let flagFound = false;
+          for (let sourceObj of sourceMapping.data.mappings) {
+            if (sourceObj.id == taggingArray.data.mappings.mappings[j].id) {
+              let flagEqual = true;
+              for (let col of compareFields) {
+                if (sourceObj[col] != taggingArray.data.mappings.mappings[j][col] && taggingArray.data.mappings.mappings[j][col] != null) {
+                  flagEqual = false;
+                  break;
+                }
+              }
+              if (flagEqual) {
+                flagFound = true;
+                break;
+              }
+            }
+          }
+          if (flagFound) {
+            let tagStr = ""
+            for (let col of compareFields) {
+              tagStr += `${taggingArray.data.mappings.mappings[j][col]};`
+            }
+            tagStr.slice(0, -1)
+            total++;
+            if (this.changedOnboardingItemIds.length > 0) {
+              let changedId = tagStr
+              if (this.changedOnboardingItemIds.indexOf(changedId) >= 0) {
+                changed++;
+              }
+            }
+            if (taggingArray.data.mappings.mappings[j][colName] == null || taggingArray.data.mappings.mappings[j][colName] == "" || taggingArray.data.mappings.mappings[j][colName].length == 0) {
+              if (colName == "countries" || colName == "entities" || colName == "locations") {
+                let flagNull = false;
+                for (let mandatoryfield of mandatoryFields) {
+                  if (taggingArray.data.mappings.mappings[j][mandatoryfield] == null || taggingArray.data.mappings.mappings[j][mandatoryfield] == "") {
+                    flagNull = true;
+                    break;
+                  }
+                }
+                if (flagNull) {
+                  continue
+                }
+              } else {
+                continue;
+              }
+            }
+            tagged++;
+          } else {
+            console.log('tagged not found', taggingArray.data.mappings.mappings[j], sourceObject)
+          }
+        }
+      }
+    }
+    console.log('taggingarray3', JSON.stringify(taggingArray.data.mappings.mappings));
+    console.log('tagged', tagged, 'total', total);
+    const unfilteredDict: any[] = [];
+    if (divElement == null) {
+      return;
+    }
+    var html = '';
+
+    var showTable = true;
+
+    html += '<div class="d-flex justify-between flex-wrap align-center"> ';
+
+    var status = '';
+    if (tagged < total) {
+      status = '<span class="color-pending material-icons">pending</span>';
+    } else {
+      status = '<span class="color-done material-icons">check_circle</span>';
+    }
+
+    var mandatoryStatus = '';
+    if (!mandatoryPresent) {
+      mandatoryStatus = '<span class="color-late-executed material-icons">error</span>&nbsp;&nbsp;Mandatory fields are not present';
+    } else {
+      mandatoryStatus = '<span class="color-done material-icons">check_circle</span>&nbsp;&nbsp;Mandatory fields are present';
+    }
+
+    if (showTable) {
+
+      html += ('<div class="left-sticky d-flex justify-between align-center mr-10"><h4 id="mapped-stats-title" part="results-title" class="d-flex align-center m-0">' + status + '&nbsp;&nbsp;Mapped ' + tagged + ' out of ' + total + '</h4></div>');
+
+    } else {
+
+      html += ('<div class="left-sticky d-flex justify-between align-center mr-10"><h4 id="mapped-stats-title" part="results-title" class="d-flex align-center m-0">' + status + '&nbsp;&nbsp;Mapped ' + tagged + ' out of ' + total + '</h4></div>')
+
+    }
+    if (changed > 0) {
+      html += ('<div class="left-sticky d-flex justify-between align-center mr-10"><h4 part="results-title" class="d-flex align-center m-0"><span class="color-pending material-icons">pending</span>&nbsp;&nbsp;' + changed + ' Items changed</h4></div>')
+    }
+    html += ('<div class="left-sticky d-flex justify-between align-center mr-10"><h4 part="results-title" class="d-flex align-center m-0">' + mandatoryStatus + '</h4></div>')
+
+    html += ('<div class="left-sticky d-flex justify-between align-center mr-10"><h4 id="span-extra-filled" class="m-0" part="results-title"></h4></div>')
+
+    html += '<div class="d-flex align-center">';
+    html += '<div class="mr-10">';
+    html += '<div class="d-flex justify-end"><button part="calendar-tab-icon-not-selected" class="material-icons button-toggle-more">expand_more</button><button part="calendar-tab-icon-selected" class="material-icons button-toggle-more-back hide">expand_less</button></div>'
+
+    html += '<div style="position: absolute; margin-top: 5px;">'
+    html += '<button part="button" class="hide d-flex align-center button-download-backups" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">file_save</span><span>Download Backups</span></button><button part="button" class="mt-10 hide d-flex align-center button-export-mapping" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">export_notes</span><span>Export Mapping</span></button><button part="button" class="mt-10 hide d-flex align-center button-export-mapping-csv" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">data_table</span><span>Export CSV</span></button>'
+
+    // console.log('jobs', jobs);
+    html += ('<input id="fileInput" type="file" style="display:none;" /><button part="button" class="mt-10 hide button-local-load d-flex align-center mr-10" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">upload_file</span><span>Load From Local</span></button><button part="button" class="mt-10 hide button-local-save d-flex align-center mr-10" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">save</span><span>Save Locally</span></button>');
+    html += '</div>';
+    html += '</div>';
+    html += '<button part="button" class="button-apply d-flex align-center mr-10"><span class="material-symbols-outlined mr-10">touch_app</span><span>Apply</span></button>'
+    html += '<button part="button" class="button-save d-flex align-center"><span class="material-symbols-outlined mr-10">save</span><span>Save On Cloud</span></button>'
+    html += '</div>';
+
+    html += '</div>';
+
+    html += '<div>';
+    html += '<h4 id="span-filtered" part="results-title"></h4>'
+    html += '<div id="div-subfiltered"></div>'
+    html += '</div>';
+
+    html += '<br />';
+
+    var subfiltered = 0;
+
+    if (showTable) {
+
+      html += '<table id="table-data" class="mt-20" style="height: 200px">';
+
+      html += '<thead>';
+      html += '<th part="td-head" class="td-head">'
+      html += '<div id="select-all"><input class="checkbox checkbox-all" part="input-checkbox" type="checkbox" ' + ((this.disableflagggrcresponse.toLowerCase() == "yes") ? 'disabled' : '') + '/></div>';
+      html += '</th>'
+      for (var i = 0; i < extraFields.length; i++) {
+        html += '<th part="td-head" class="td-head">'
+        html += extraFields[i];
+        html += '</th>'
+      }
+      html += '<th part="td-head" class="td-head">'
+      html += colName;
+      html += '</th>'
+
+      for (i = 0; i < uniqCols.length; i++) {
+        html += '<th part="td-head" class="td-head">'
+        html += uniqCols[i];
+        html += '</th>'
+      }
+      for (i = 0; i < sourceCols.length; i++) {
+        html += '<th part="td-head" class="td-head">'
+        html += sourceCols[i];
+        html += '</th>'
+      }
+
+      html += '</thead>';
+      html += '<tbody>';
+      // console.log('changedIds', this.changedOnboardingItemIds);
+      for (i = 0; i < taggingArray.data.mappings.mappings.length; i++) {
+
+        let complianceid = taggingArray.data.mappings.mappings[i].id
+        console.log('compliance id', complianceid);
+        var showSearch = false;
+
+        if (subfilter == "") {
+          //console.log('showsearch true 1');
+          showSearch = true;
+        }
+
+        var classBg = "";
+
+        if (i % 2 === 0) {
+          if (this.changedOnboardingItemIds.length > 0) {
+            let changedId = ""
+            for (let [k, col] of uniqCols.entries()) {
+              // console.log('taggingarray rendered', i, col)
+              changedId += taggingArray.data.mappings.mappings[i][col];
+              if (k < (uniqCols.length - 1)) {
+                changedId += ";"
+              }
+            }
+            if (this.changedOnboardingItemIds.indexOf(changedId) >= 0) {
+              classBg = 'td-light-selected';
+            } else {
+              classBg = 'td-light';
+            }
+          } else {
+            classBg = 'td-light';
+          }
+        } else {
+          if (this.changedOnboardingItemIds.length > 0) {
+            let changedId = ""
+            for (let [k, col] of uniqCols.entries()) {
+              if (taggingArray.data.mappings.mappings[i] == null) {
+                // console.log('id not found', i, taggingArray.data.mappings.mappings.length, sourceArray.data.mappings.mappings.length)
+              }
+              changedId += taggingArray.data.mappings.mappings[i][col];
+              if (k < (uniqCols.length - 1)) {
+                changedId += ";"
+              }
+            }
+            if (this.changedOnboardingItemIds.indexOf(changedId) >= 0) {
+              classBg = 'td-dark-selected';
+            } else {
+              classBg = 'td-dark';
+            }
+          } else {
+            classBg = 'td-dark';
+          }
+        }
+
+        html += '<tr class="" id="tablerow-' + i + '">';
+
+        html += '<td class="left-sticky td-body ' + classBg + '" ><div class="' + (!showSearch ? 'truncate' : '') + '"><input id="cb-' + i + '" type="checkbox" class="checkbox-row cb-select"/></div></td>';
+
+        for (var j = 0; j < extraFields.length; j++) {
+
+          if (i < taggingArray.data.mappings.mappings.length) {
+
+            html += '<td part="td-body" class="' + classBg + '">';
+            html += '<div class="' + (!showSearch ? 'truncate' : '') + '">'
+            html += '<textarea part="input" id="extra-field-' + i + '-' + j + '" class="extra-field extra-field-' + j + '" ' + (extraFields != null ? (extraFields[j] != null ? ((extraFields[j].toLowerCase() == "client remarks" && this.disableclientresponse.toLowerCase() == "yes") ? 'disabled' : ((extraFields[j].toLowerCase() == "flagggrc response" && this.disableflagggrcresponse.toLowerCase() == "yes") ? 'disabled' : '')) : "") : "") + ' >' + (taggingArray.data.mappings.mappings[i].extraFields != null ? (taggingArray.data.mappings.mappings[i].extraFields[j] != null ? (typeof taggingArray.data.mappings.mappings[i].extraFields[j] == 'string' ? taggingArray.data.mappings.mappings[i].extraFields[j] : "") : "") : "") + '</textarea>';
+            html += '</div>';
+            html += '</td>';
+          } else {
+
+            html += '<td part="td-body" class="' + classBg + '">';
+            html += '<div class="' + (!showSearch ? 'truncate' : '') + '">';
+            html += '<textarea part="input" id="extra-field-' + i + '-' + j + '" class="extra-field extra-field-' + j + '" type="text" value="" ' + ((extraFields[j].toLowerCase() == "flagggrc response" && this.disableflagggrcresponse.toLowerCase() == "yes") ? 'disabled' : '') + ' ></textarea>';
+            html += '</div>';
+            html += '</td>';
+          }
+
+
+        }
+
+        html += '<td class="td-body ' + classBg + '" part="td-key">'
+        html += '<div class="' + (!showSearch ? 'truncate' : '') + '">';
+        if (apiIdDropdown.length > 0) {
+          if (anotherProjection != null) {
+            html += '<sf-i-form id="tags-' + i + '" class="tags-input tags-' + i + '" name="Tags" label="Select ' + colName + '" apiId="' + apiIdDropdown + '" mode="multiselect-dropdown" searchPhrase="' + this.projectName + ((dropdownSearchPhrase != null && dropdownSearchPhrase != "") ? dropdownSearchPhrase : "") + '" selectProjection="name" selectAnotherProjection="' + anotherProjection + '" mandatory></sf-i-form>';
+          } else {
+            html += '<sf-i-form id="tags-' + i + '" class="tags-input tags-' + i + '" name="Tags" label="Select ' + colName + '" apiId="' + apiIdDropdown + '" mode="multiselect-dropdown" searchPhrase="' + this.projectName + ((dropdownSearchPhrase != null && dropdownSearchPhrase != "") ? dropdownSearchPhrase : "") + '" selectProjection="name" mandatory></sf-i-form>';
+          }
+
+        } else {
+
+          if (colName.toLowerCase() == "internalcontrols") {
+            html += '<textarea id="tags-' + i + '" type="text" part="input" class="tags-input"></textarea>';
+          } else {
+            html += '<input id="tags-' + i + '" type="text" part="input" class="tags-input"/>';
+          }
+
+        }
+        html += '</div>';
+        html += '</td>'
+
+        for (var l = 0; l < uniqCols.length; l++) {
+          html += '<td class="td-body ' + classBg + '" part="td-key">'
+          html += '<div class="' + (!showSearch ? 'truncate' : '') + '">';
+          html += '<sf-i-elastic-text exportparts="highlight,highlight-count" text="' + taggingArray.data.mappings.mappings[i][uniqCols[l]].replace(/ *\([^)]*\) */g, "") + '" minLength="20"></sf-i-elastic-text>';
+          html += '</div>';
+          html += '</td>'
+        }
+
+
+        for (l = 0; l < sourceCols.length; l++) {
+
+          for (var j = 0; j < JSON.parse(sourceArray.data.mappings.mappings[complianceid].cols).length; j++) {
+
+            if (sourceCols[l] == JSON.parse(sourceArray.data.mappings.mappings[complianceid].cols)[j]) {
+
+              if (sourceArray.data.mappings.mappings[complianceid].data != null) {
+
+                html += '<td class="td-body ' + classBg + '" part="td-body">';
+                html += '<div class="' + (!showSearch ? 'truncate' : '') + '">';
+
+                if (Array.isArray(JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j])) {
+
+                  for (var k = 0; k < JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j].length; k++) {
+                    html += ('<sf-i-elastic-text exportparts="highlight,highlight-count" text="' + JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j][k] + '" minLength="100" lineSize="4"></sf-i-elastic-text>');
+                  }
+
+                } else {
+                  if (typeof JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j] == "string" && Util.isJSONParsable(JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j])) {
+                    html += ('<sf-i-elastic-text exportparts="highlight,highlight-count" text="' + JSON.parse(JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j]) + '" minLength="100" lineSize="4"></sf-i-elastic-text>')
+
+                  } else {
+                    html += ('<sf-i-elastic-text exportparts="highlight,highlight-count" text="' + JSON.parse(sourceArray.data.mappings.mappings[complianceid].data)[j] + '" minLength="100" lineSize="4"></sf-i-elastic-text>')
+                  }
+                }
+
+                html += '</div>';
+                html += '</td>';
+
+              }
+
+            }
+
+          }
+
+        }
+
+        html += '</tr>';
+        //console.log('i=', i);
+
+      }
+      html += '</tbody>';
+      html += '</table>';
+
+    }
+    if (divElement == null) {
+      return;
+    }
+    divElement.innerHTML = html;
+
+    if (unfilteredDict.length > 0) {
+      var html = '';
+      html += '<div class="mb-10">Items In Your Category (' + unfilteredDict.length + ")</div>";
+      html += this.getFilterOnboardingString();
+      ((divElement as HTMLDivElement).querySelector('#span-filtered') as HTMLDivElement).innerHTML = html;
+
+    } else {
+      ((divElement as HTMLDivElement).querySelector('#span-filtered') as HTMLDivElement).style.display = 'none';
+    }
+
+    if (subfiltered > 0) {
+      ((divElement as HTMLDivElement).querySelector('#div-subfiltered') as HTMLDivElement).innerHTML = '<h4 part="results-title">Filtered Results (' + subfiltered + ')</h4>';
+    }
+
+    if (this.getfilterOnboarding().length > 0) {
+      for (var i = 0; i < taggingArray.data.mappings.mappings.length; i++) {
+
+        if (!unfilteredDict.includes(i)) {
+          const tableRow = (divElement as HTMLDivElement).querySelector('#tablerow-' + i);
+          if (tableRow != null) {
+            (tableRow as HTMLTableRowElement).style.display = 'none';
+          }
+
+        }
+
+      }
+    }
+
+    (divElement as HTMLDivElement).querySelector('.checkbox-all')?.addEventListener('change', (e: any) => {
+
+      ((divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement).disabled = false;
+
+      const arrCheckBoxes = (divElement as HTMLDivElement).querySelectorAll('.checkbox-row') as NodeListOf<HTMLInputElement>;
+      //console.log('cb-length', arrCheckBoxes.length);
+      for (var i = 0; i < arrCheckBoxes.length; i++) {
+        const tableRow = (divElement as HTMLDivElement).querySelector('#tablerow-' + (i)) as HTMLElement;
+        //console.log('tablerow', i, tableRow);
+        if (tableRow != null) {
+          if (tableRow.style.display != 'none') {
+            //console.log('tablerow setting', e.currentTarget.checked, (arrCheckBoxes[i] as HTMLInputElement));
+            (arrCheckBoxes[i] as HTMLInputElement).checked = e.currentTarget.checked;
+            if (e.currentTarget.checked) {
+              if (!this.selectedCbs.includes(i + '')) {
+                this.selectedCbs.push(i + '');
+              }
+            } else {
+              this.selectedCbs = [];
+            }
+          }
+        }
+      }
+
+      //console.log('checkedarr', this.selectedCbs);
+
+    });
+
+    for (var j = 0; j < extraFields.length; j++) {
+
+      const inputArrJ = (divElement as HTMLDivElement).querySelectorAll('.extra-field-' + j) as NodeListOf<SfIForm | HTMLInputElement>;
+      for (var k = 0; k < inputArrJ.length; k++) {
+        inputArrJ[k].addEventListener('keyup', (e: any) => {
+
+          ((divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement).disabled = false;
+
+          if (e.key == "Enter") {
+
+            this.applyAndReloadTaggingNew(e, colName, taggingArray, sourceArray, divElement);
+
+            const activeIndex = e.target.id.split('-')[2];
+
+            for (var count = 0; count < taggingArray.data.mappings.mappings.length; count++) {
+
+              taggingArray.data.mappings.mappings[count].extraFields = [];
+
+              if (this.selectedCbs.length > 0 && this.selectedCbs.includes(count + "")) {
+
+                for (var l = 0; l < extraFields.length; l++) {
+                  const inputExtraField = ((divElement as HTMLDivElement).querySelector('#extra-field-' + activeIndex + '-' + l) as HTMLInputElement);
+                  taggingArray.data.mappings.mappings[count].extraFields.push(inputExtraField.value)
+                }
+
+              } else {
+
+                for (var l = 0; l < extraFields.length; l++) {
+                  const inputExtraField = ((divElement as HTMLDivElement).querySelector('#extra-field-' + count + '-' + l) as HTMLInputElement);
+                  taggingArray.data.mappings.mappings[count].extraFields.push(inputExtraField.value)
+                }
+
+              }
+
+            }
+
+            this.renderTaggingTableNew(divElement, selectedStatutes, sourceObject, sourceMapping, taggingArray, sourceCols, uploadFunction, refreshFunction, colName, uniqCols, apiIdDropdown, dropdownSearchPhrase, mandatoryFields, compareFields, anotherProjection, extraFields, _arrFeedbackReference, proposedUsersLabel, subfilter)
+
+          }
+
+          // this.saveTagging(taggingArray.data.mappings, uploadFunction, refreshFunction, true);
+
+        });
+
+        inputArrJ[k].addEventListener('focusout', (e: any) => {
+
+          this.applyAndReloadTaggingNew(e, colName, taggingArray, sourceArray, divElement);
+
+          const activeIndex = e.target.id.split('-')[2];
+
+          for (var count = 0; count < taggingArray.data.mappings.mappings.length; count++) {
+
+            taggingArray.data.mappings.mappings[count].extraFields = [];
+
+            if (this.selectedCbs.length > 0 && this.selectedCbs.includes(count + "")) {
+
+              for (var l = 0; l < extraFields.length; l++) {
+                const inputExtraField = ((divElement as HTMLDivElement).querySelector('#extra-field-' + activeIndex + '-' + l) as HTMLInputElement);
+                taggingArray.data.mappings.mappings[count].extraFields.push(inputExtraField.value)
+              }
+
+            } else {
+
+              for (var l = 0; l < extraFields.length; l++) {
+                const inputExtraField = ((divElement as HTMLDivElement).querySelector('#extra-field-' + count + '-' + l) as HTMLInputElement);
+                taggingArray.data.mappings.mappings[count].extraFields.push(inputExtraField.value)
+              }
+
+            }
+
+          }
+
+          this.renderTaggingTableNew(divElement, selectedStatutes, sourceObject, sourceMapping, taggingArray, sourceCols, uploadFunction, refreshFunction, colName, uniqCols, apiIdDropdown, dropdownSearchPhrase, mandatoryFields, compareFields, anotherProjection, extraFields, _arrFeedbackReference, proposedUsersLabel, subfilter)
+
+        });
+      }
+
+    }
+
+    const multiArr = (divElement as HTMLDivElement).querySelectorAll('.tags-input') as NodeListOf<SfIForm | HTMLInputElement>;
+
+    for (var i = 0; i < multiArr.length; i++) {
+
+      if (apiIdDropdown.length > 0) {
+
+
+        // for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+
+        var equal = true;
+        let complianceid = taggingArray.data.mappings.mappings[i].id
+        for (var k = 0; k < uniqCols.length; k++) {
+          if (uniqCols[k] != "id") { continue; }
+          if (sourceArray.data.mappings.mappings[complianceid] != null && taggingArray.data.mappings.mappings[i] != null) {
+            if (sourceArray.data.mappings.mappings[complianceid][uniqCols[k]] != taggingArray.data.mappings.mappings[i][uniqCols[k]]) {
+              equal = false;
+            }
+          }
+
+        }
+
+        if (equal) {
+          let preselctedVals = []
+          if ((colName == "countries" || colName == "entities" || colName == "locations") && taggingArray.data.mappings.mappings[i][colName] == null) {
+            let preselctedValsStr = ""
+            for (let mandatoryfield of mandatoryFields) {
+              if (taggingArray.data.mappings.mappings[i][mandatoryfield] == null || taggingArray.data.mappings.mappings[i][mandatoryfield] == "") {
+                preselctedValsStr = ""
+              } else {
+                preselctedValsStr += `${taggingArray.data.mappings.mappings[i][mandatoryfield]};`
+              }
+            }
+
+            preselctedValsStr = preselctedValsStr.slice(0, -1);
+            if (preselctedValsStr.indexOf(';') >= 0) {
+              preselctedVals.push(preselctedValsStr)
+            }
+          } else {
+            preselctedVals = taggingArray.data.mappings.mappings[i][colName];
+          }
+          (multiArr[i] as SfIForm).preselectedValues = JSON.stringify(preselctedVals);
+          if (preselctedVals.length > 0) {
+            ((multiArr[i] as SfIForm).parentElement as HTMLTableCellElement).setAttribute("part", "row-mapped");
+          }
+
+        }
+
+        // }
+
+        multiArr[i].addEventListener('valueChanged', async (e: any) => {
+
+          ((divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement).disabled = false;
+          this.applyAndReloadTaggingNew(e, colName, taggingArray, sourceArray, divElement);
+        });
+
+      } else {
+
+        // for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+
+        var equal = true;
+        let complianceid = taggingArray.data.mappings.mappings[i].id
+        for (var k = 0; k < uniqCols.length; k++) {
+          if (uniqCols[k] != "id") { continue; }
+          if (sourceArray.data.mappings.mappings[complianceid] != null && taggingArray.data.mappings.mappings[i] != null) {
+            if (sourceArray.data.mappings.mappings[complianceid][uniqCols[k]] != taggingArray.data.mappings.mappings[i][uniqCols[k]]) {
+              equal = false;
+            }
+          }
+
+        }
+
+        if (equal) {
+
+          if (taggingArray.data.mappings.mappings[i] != null) {
+            if (Util.isJSONParsable(sourceArray.data.mappings.mappings[complianceid][colName])) {
+              (multiArr[i] as HTMLInputElement).value = JSON.parse(sourceArray.data.mappings.mappings[complianceid][colName])[0];
+            } else {
+              (multiArr[i] as HTMLInputElement).value = sourceArray.data.mappings.mappings[complianceid][colName] ?? "";
+            }
+          }
+
+        }
+
+        // }
+
+
+
+        multiArr[i].addEventListener('keyup', async (e: any) => {
+
+          if (e.key == "Enter") {
+
+            ((divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement).disabled = false;
+            this.applyAndReloadTaggingNew(e, colName, taggingArray, sourceArray, divElement);
+          }
+
+        });
+
+        multiArr[i].addEventListener('focusout', async (e: any) => {
+
+          ((divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement).disabled = false;
+          this.applyAndReloadTaggingNew(e, colName, taggingArray, sourceArray, divElement);
+        });
+
+
+      }
+
+
+    }
+
+    const buttonApply = (divElement as HTMLDivElement).querySelector('.button-apply') as HTMLButtonElement;
+    buttonApply.addEventListener('click', () => {
+      // console.log('applied');
+      // this.applyAndReloadTagging(e,colName, taggingArray, sourceArray, divElement);
+      this.renderTaggingTableNew(divElement, selectedStatutes, sourceObject, sourceMapping, taggingArray, sourceCols, uploadFunction, refreshFunction, colName, uniqCols, apiIdDropdown, dropdownSearchPhrase, mandatoryFields, compareFields, anotherProjection, extraFields, _arrFeedbackReference, proposedUsersLabel, subfilter)
+    })
+
+    const buttonToggleMoreBack = (divElement as HTMLDivElement).querySelector('.button-toggle-more-back') as HTMLButtonElement;
+    const buttonToggleMore = (divElement as HTMLDivElement).querySelector('.button-toggle-more') as HTMLButtonElement;
+
+    buttonToggleMore.addEventListener('click', async (ev: any) => {
+
+      ev.target.classList.add('hide');
+      buttonToggleMoreBack.classList.remove('hide');
+      const buttonDownloadBackups = (divElement as HTMLDivElement).querySelector('.button-download-backups') as HTMLButtonElement;
+      buttonDownloadBackups.style.display = 'flex';
+      const buttonExportMapping = (divElement as HTMLDivElement).querySelector('.button-export-mapping') as HTMLButtonElement;
+      buttonExportMapping.style.display = 'flex';
+      const buttonExportMappingCSV = (divElement as HTMLDivElement).querySelector('.button-export-mapping-csv') as HTMLButtonElement;
+      buttonExportMappingCSV.style.display = 'flex';
+      // const buttonApply = (divElement as HTMLDivElement).querySelector('.button-apply') as HTMLButtonElement;
+      // buttonApply.style.display = 'flex';
+      const buttonLoadLocal = (divElement as HTMLDivElement).querySelector('.button-local-load') as HTMLButtonElement;
+      buttonLoadLocal.style.display = 'flex';
+      const buttonSaveLocal = (divElement as HTMLDivElement).querySelector('.button-local-save') as HTMLButtonElement;
+      buttonSaveLocal.style.display = 'flex';
+      // const buttonSave = (divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement;
+      // buttonSave.style.display = 'flex';
+
+      const buttonDownloadBackupsNew = Util.clearListeners(buttonDownloadBackups);
+      buttonDownloadBackupsNew.addEventListener('click', async () => {
+
+        const result = await this.fetchGetStoredMapping(colName);
+
+        for (var i = 0; i < result.data.length; i++) {
+
+          const blob = new Blob([result.data[i].mappings != null ? JSON.stringify(result.data[i].mappings) : JSON.stringify(result.data[i])], { type: 'text/html' });
+          const url = window.URL.createObjectURL(blob)
+          const a = document.createElement('a')
+          a.setAttribute('href', url)
+          a.setAttribute('download', 'report_' + colName + '_' + i + '.json');
+          a.click()
+
+        }
+
+        (buttonToggleMoreBack as HTMLButtonElement).click();
+
+        if (result.data.length === 0) {
+
+          this.setError("No backups found!")
+          setTimeout(() => {
+            this.clearMessages();
+          }, 3000);
+
+        }
+
+      });
+
+      const buttonExportMappingNew = Util.clearListeners(buttonExportMapping);
+      buttonExportMappingNew.addEventListener('click', async () => {
+
+        let valueStr: string[] = [];
+
+        for (var i = 0; i < multiArr.length; i++) {
+
+          if (apiIdDropdown.length > 0) {
+
+            for (var j = 0; j < taggingArray.data.mappings.mappings.length; j++) {
+
+              var equal = true;
+              let complianceid = taggingArray.data.mappings.mappings[j].id
+              for (var k = 0; k < uniqCols.length; k++) {
+                if (uniqCols[k] != "id") { continue; }
+                if (sourceArray.data.mappings.mappings[complianceid] != null && taggingArray.data.mappings.mappings[j] != null) {
+                  if (sourceArray.data.mappings.mappings[complianceid][uniqCols[k]] != taggingArray.data.mappings.mappings[j][uniqCols[k]]) {
+                    equal = false;
+                  }
+                }
+
+              }
+
+              if (equal) {
+                valueStr.push(JSON.stringify(taggingArray.data.mappings.mappings[j][colName]));
+              }
+            }
+
+          } else {
+
+            if (taggingArray.data.mappings.mappings[i] != null) {
+              valueStr.push(taggingArray.data.mappings.mappings[i][colName]);
+            } else {
+              valueStr.push('');
+            }
+
+          }
+
+        }
+
+        //console.log('valueStr', valueStr);
+
+        const valuesHTML = JSON.stringify(valueStr);
+
+        const outerHTML = '<h3>This extract is generated on ' + new Date() + '</h3>' + ((divElement as HTMLDivElement).querySelector('#span-filtered') as HTMLHeadingElement).outerHTML + '<br /><h2>' + ((divElement as HTMLDivElement).querySelector('#mapped-stats-title') as HTMLHeadingElement).outerHTML + '</h2>' + ((divElement as HTMLDivElement).querySelector('#table-data') as HTMLTableElement).outerHTML;
+
+        let tableHTML = this.TAGGING_HTML.replace(/TABLE_DATA/g, outerHTML);
+        tableHTML = tableHTML.replace(/TABLE_VALUES/g, valuesHTML);
+
+        const blob = new Blob([tableHTML], { type: 'text/html' });
+        const url = window.URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.setAttribute('href', url)
+        a.setAttribute('download', 'mapping_' + colName + '_' + new Date().getTime() + '.html');
+        a.click()
+
+      });
+
+      const buttonExportMappingCSVNew = Util.clearListeners(buttonExportMappingCSV);
+      buttonExportMappingCSVNew?.addEventListener('click', async () => {
+        let csvArray = JSON.parse(JSON.stringify(taggingArray.data.mappings.mappings))
+        for (let [i, obj] of csvArray.entries()) {
+          let tempCsvObj = obj
+          let tempId = obj.id;
+          let tempCompliance = sourceArray.data.mappings.mappings[tempId]
+          if (tempCompliance['cols'] != null && tempCompliance['data'] != null) {
+            let dataArr = JSON.parse(tempCompliance['data'])
+            let colsArr = JSON.parse(tempCompliance['cols'])
+            for (let [j, colKey] of colsArr.entries()) {
+              tempCsvObj['cols_' + colKey] = dataArr[j]
+            }
+          }
+          csvArray[i] = tempCsvObj
+        }
+        console.log('csv array', csvArray)
+        let csvData = Util.convertToCSV(csvArray);
+        // let csvData = Util.convertToCSV(taggingArray.data.mappings.mappings);
+        console.log('csvData', csvData);
+        const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
+        const url = window.URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.setAttribute('href', url)
+        a.setAttribute('download', 'mapping_' + colName + '_' + new Date().getTime() + '.csv');
+        a.click()
+      })
+
+      const buttonLoadLocalNew = Util.clearListeners(buttonLoadLocal);
+      buttonLoadLocalNew?.addEventListener('click', async () => {
+        console.log('load-local');
+        ((divElement as HTMLDivElement).querySelector('#fileInput') as HTMLInputElement).click();
+      });
+
+      const fileInput = (divElement as HTMLDivElement).querySelector('#fileInput') as HTMLButtonElement;
+      fileInput.value = '';
+      const fileInputNew = Util.clearListeners(fileInput);
+      fileInputNew.addEventListener('change', (e: any) => {
+        var fr = new FileReader();
+        fr.onload = () => {
+          this.renderTaggingTableNew(divElement, selectedStatutes, sourceObject, sourceMapping, JSON.parse(fr.result + ""), sourceCols, uploadFunction, refreshFunction, colName, uniqCols, apiIdDropdown, dropdownSearchPhrase, mandatoryFields, compareFields, anotherProjection, extraFields, _arrFeedbackReference, proposedUsersLabel, subfilter);
+        };
+        var frCsv = new FileReader();
+        frCsv.onload = () => {
+          console.log('taggingarray onload called');
+          console.log('csv result', frCsv.result);
+          const tempArr = Util.parseCsv(frCsv.result + "");
+          console.log('csv data', tempArr)
+          let changeCount = 0;
+          for (let [i, obj] of tempArr.entries()) {
+            let tempObj = taggingArray.data.mappings.mappings[i]
+            for(let key of Object.keys(tempObj)){
+              if(key.indexOf('cols_') >= 0){
+                delete tempObj[key]
+              }
+            }
+            delete tempObj['delta'];
+            delete tempObj['lastupdated'];
+            let tempNewObj = obj
+            for(let key of Object.keys(tempNewObj)){
+              if(key.indexOf('cols_') >= 0){
+                delete tempNewObj[key]
+              }
+            }
+            delete tempNewObj['delta'];
+            delete tempNewObj['lastupdated'];
+            if (JSON.stringify(tempObj) !== JSON.stringify(tempNewObj)) {
+              // console.log('item changed', taggingArray.data.mappings.mappings[i], obj)
+              let changedId = ""
+              for (let [k, col] of uniqCols.entries()) {
+                // if (col != "id") { continue; }
+                changedId += tempObj[col];
+                if (k < (uniqCols.length - 1)) {
+                  changedId += ";"
+                }
+              }
+
+              this.changedOnboardingItemIds.push(changedId)
+              changeCount++
+            }
+          }
+          this.setSuccessBtn(changeCount + " items changed. Do you wish to apply?", ["No", "Yes"], [
+            () => {
+              this.clearMessages();
+              this.changedOnboardingItemIds = [];
+              (buttonToggleMoreBack as HTMLButtonElement).click();
+            },
+            () => {
+              this.clearMessages();
+              let tempObj: any = {}
+              tempObj["data"] = {}
+              tempObj["data"]["mappings"] = {}
+              tempObj["data"]["mappings"]["mappings"] = tempArr
+              let tempObjStr = JSON.stringify(tempObj)
+
+              console.log('csv taggingarray cols', uniqCols, JSON.parse(tempObjStr)["data"]["mappings"]["mappings"].length, Object.keys(tempObj.data.mappings.mappings[0]), sourceMapping)
+
+              this.renderTaggingTableNew(divElement, selectedStatutes, sourceObject, sourceMapping, JSON.parse(tempObjStr), sourceCols, uploadFunction, refreshFunction, colName, uniqCols, apiIdDropdown, dropdownSearchPhrase, mandatoryFields, compareFields, anotherProjection, extraFields, _arrFeedbackReference, proposedUsersLabel, subfilter);
+            }
+          ])
+        }
+        if (e.target.files[0].name.toLowerCase().indexOf(colName.toLowerCase()) >= 0) {
+          let ext = e.target.files[0].name.split('.')[e.target.files[0].name.split('.').length - 1]
+          if (ext.toLowerCase() == "csv") {
+            frCsv.readAsText(e.target.files[0]);
+          } else {
+            fr.readAsText(e.target.files[0]);
+          }
+        }
+      })
+
+      const buttonSaveLocalNew = Util.clearListeners(buttonSaveLocal);
+      buttonSaveLocalNew?.addEventListener('click', async () => {
+        console.log('save-local');
+        const blob = new Blob([JSON.stringify(taggingArray)], { type: 'text/plain' });
+        const url = window.URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.setAttribute('href', url)
+        a.setAttribute('download', 'mapping_' + colName + '_' + new Date().toLocaleString() + '.txt');
+        a.click()
+      });
+
+    });
+
+    buttonToggleMoreBack.addEventListener('click', async (ev: any) => {
+
+      ev.target.classList.add('hide');
+      buttonToggleMore.classList.remove('hide');
+      const buttonDownloadBackups = (divElement as HTMLDivElement).querySelector('.button-download-backups') as HTMLButtonElement;
+      buttonDownloadBackups.style.display = 'none';
+      const buttonExportMapping = (divElement as HTMLDivElement).querySelector('.button-export-mapping') as HTMLButtonElement;
+      buttonExportMapping.style.display = 'none';
+      const buttonExportMappingCSV = (divElement as HTMLDivElement).querySelector('.button-export-mapping-csv') as HTMLButtonElement;
+      buttonExportMappingCSV.style.display = 'none';
+      // const buttonApply = (divElement as HTMLDivElement).querySelector('.button-apply') as HTMLButtonElement;
+      // buttonApply.style.display = 'none';
+      const buttonLoadLocal = (divElement as HTMLDivElement).querySelector('.button-local-load') as HTMLButtonElement;
+      buttonLoadLocal.style.display = 'none';
+      const buttonSaveLocal = (divElement as HTMLDivElement).querySelector('.button-local-save') as HTMLButtonElement;
+      buttonSaveLocal.style.display = 'none';
+      // const buttonSave = (divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement;
+      // buttonSave.style.display = 'none';
+
+    });
+
+    const buttonSave = (divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement;
+    buttonSave?.addEventListener('click', async () => {
+      await this.saveTagging(taggingArray.data.mappings, selectedStatutes, uploadFunction, refreshFunction, false, colName);
+    });
+
+    const buttonCancel = (divElement as HTMLDivElement).querySelector('.button-cancel') as HTMLButtonElement;
+    buttonCancel?.addEventListener('click', async () => {
+      //console.log('cancel clicked');
+      await this.fetchCancelOnboardingJob(colName);
+      refreshFunction();
+    });
+
+    const cbArr = (divElement as HTMLDivElement).querySelectorAll('.cb-select') as NodeListOf<HTMLInputElement>;
+    for (i = 0; i < cbArr.length; i++) {
+      cbArr[i].addEventListener('change', (ev: any) => {
+        const cbSelectId = ev.currentTarget.id;
+        const cbSelectIndex = cbSelectId.split('-')[1];
+
+        if (!this.selectedCbs.includes(cbSelectIndex)) {
+          this.selectedCbs.push(cbSelectIndex);
+        } else {
+          this.selectedCbs.splice(this.selectedCbs.indexOf(cbSelectIndex), 1);
+        }
+        //console.log(this.selectedCbs);
+      })
+    }
+
+    this.changedOnboardingItemIds = []
+  }
+
+  renderMappingTable = (divElement: any, jsonData: Array<any>, cursor: Array<any>, fetchFunction: any, searchString: string, mappedArray: any, found: number, uploadFunction: any, refreshFunction: any, extraFields: Array<string>, uploadBlock: number, extraFieldPosition: number, colName: string, subfilter: string, statuteColName: string, extraHintsArr: Array<string>, mappedStatutes: Array<any> = []) => {
+    console.log('cols1', jsonData);
+    // console.log('cols', jsonData[0].data.cols);
+    //console.log('divelement', divElement);
+    //console.log('jsonData', jsonData);
+    //console.log('cursor', cursor);
+    //console.log('fetch', fetchFunction);
+    //console.log('searchstring', searchString);
+    //console.log('subfiltervalue', subfilter);
+
+    const arrCompliancesFrequencies: any = {};
+
+    if (jsonData.length === 0) return;
+
+    this.selectedCbs = [];
+
+    let colCountry = -1;
+    let colState = -1;
+    let colSubcategory = -1;
+    let colStatute = -1;
+
+    const unfilteredDict: any[] = [];
+
+    var html = '';
+
+    html += '<div>';
+    html += '<h3 part="results-title">Total Items (' + found + ')</h3>';
+    html += '<h4 id="span-filtered" part="results-title"></h4>'
+    html += '<h4 id="span-extra-filled" part="results-title"></h4>'
+    html += '</div>';
+
+
+    html += '<div class="d-flex justify-between align-center left-sticky flex-wrap mb-20">';
+
+    html += '<div id="div-subfiltered"></div>';
+    html += '<div id="scroll-overlay" part="onboarding-scroll-overlay" class="pos-fixed-scroll justify-center align-center">';
+    html += '<div id="scroll-overlay-left" class="mr-10"><button part="button-icon"><span class="material-symbols-outlined">arrow_left_alt</span></button></div>';
+    html += '<div id="scroll-overlay-right" class="ml-10"><button part="button-icon"><span class="material-symbols-outlined">arrow_right_alt</span></button></div>';
+    html += '</div>';
+
+    html += '<div id="detail-overlay" part="onboarding-detail-overlay" class="pos-fixed justify-center align-center hide">';
+    html += '<div class="cover-slide"></div>';
+    html += '<div class="detail-container p-10">';
+    html += '<div class="d-flex justify-between align-center mb-20">';
+    html += '<div part="results-title">Row Details</div>';
+    html += '<button part="button-icon" class="detail-close"><span class="material-symbols-outlined">close</span></button>';
+    html += '</div>';
+    html += '<div id="detail-overlay-list">';
+    html += '</div>';
+    html += '</div>';
+    html += '</div>';
+
+    html += '<div class="d-flex align-center">';
+    // html += '<input part="input" type="text" placeholder="Filter" class="input-filter mr-10" value="' + subfilter + '" />';
+    html += '<div class="mr-10">';
+    html += '<div class="d-flex justify-end"><button part="calendar-tab-icon-not-selected" class="material-icons button-toggle-more">expand_more</button><button part="calendar-tab-icon-selected" class="material-icons button-toggle-more-back hide">expand_less</button></div>'
+    html += '<div style="position: absolute; margin-top: 5px;"><button part="button" class="hide d-flex align-center button-download-backups" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">file_save</span><span>Download Backups</span></button><button part="button" class="mt-10 hide d-flex align-center button-export-mapping" style="margin-left: -80px"><span class="material-symbols-outlined mr-10">export_notes</span><span>Export Mapping</span></button></div>'
+    html += '</div>';
+    html += (this.disablesave == "yes" ? '' : '<button part="button" class="button-save" disabled>Save</button>');
+    html += '</div>';
+
+    html += '</div>';
+
+    html += '<table id="table-data">';
+
+    html += '<thead>';
+    html += '<th part="td-head" class="td-head">'
+    // html += 'Select';
+    html += '<div id="select-all"><input class="checkbox checkbox-all" part="input-checkbox" type="checkbox" ' + ((this.disableflagggrcresponse.toLowerCase() == "yes") ? 'disabled' : '') + '/></div>';
+    html += '</th>'
+    html += '<th part="td-head" class="td-head">'
+    html += '<div>View</div>';
+    html += '</th>'
+    if (extraFieldPosition === 0) {
+      for (var i = 0; i < extraFields.length; i++) {
+        html += '<th part="td-head" class="td-head">'
+        html += extraFields[i];
+        html += '</th>'
+      }
+    }
+    if (colName.toLowerCase() == "compliances") {
+      html += '<th part="td-head" class="td-head">'
+      html += 'Proposed Users';
+      html += '</th>'
+    }
+    html += '<th part="td-head" class="td-head">'
+    html += 'Id';
+    html += '</th>'
+
+    // for(var j = 0; j < JSON.parse(jsonData[0].data.cols).length; j++) {
+
+    //   if(jsonData[0].cols.includes(JSON.parse(jsonData[0].data.cols)[j])) {
+    //     html += '<th part="td-head" class="td-head ' + (statuteColName.toLowerCase() == JSON.parse(jsonData[0].data.cols)[j].toLowerCase() ? 'left-sticky' : '') + '">'
+    //     html += JSON.parse(jsonData[0].data.cols)[j]
+    //     html += '</th>'
+    //   }
+
+    // }
+
+    for (var j = 0; j < jsonData[0].cols.length; j++) {
+      console.log('jsoncols', JSON.parse(jsonData[0].data.cols), jsonData[0].cols.length, j)
+      html += '<th part="td-head" class="td-head ' + (statuteColName.toLowerCase() == (JSON.parse(jsonData[0].data.cols)[j] ?? "").toLowerCase() ? 'left-sticky' : '') + '">'
+      // html += jsonData[0].cols[j]
+      html += '</th>'
+
+    }
+
+    if (extraFieldPosition === 1) {
+      for (var i = 0; i < extraFields.length; i++) {
+        html += '<th part="td-head" class="td-head">'
+        html += extraFields[i];
+        html += '</th>'
+      }
+    }
+    html += '</thead>'
+
+    //console.log('colstate',  JSON.parse(jsonData[0].data.cols));
+
+    for (var i = 0; i < JSON.parse(jsonData[0].data.cols).length; i++) {
+      if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "country") {
+        console.log('colstate country', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
+        colCountry = i;
+      }
+      if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "state") {
+        //console.log('colstate state', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
+        colState = i;
+      }
+      if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == "subcategory") {
+        //console.log('colstate subcategory', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
+        colSubcategory = i;
+      }
+      if (JSON.parse(jsonData[0].data.cols)[i].toLowerCase() == statuteColName) {
+        //console.log('colstate statute', JSON.parse(jsonData[0].data.cols)[i].toLowerCase(), i);
+        colStatute = i;
+      }
+    }
+
+    //var countExtra0 = 0;
+    var countextra = [];
 
     var subfiltered = 0;
 
@@ -22141,25 +23297,25 @@ export class SfIEvents extends LitElement {
 
     }
 
-    // Filter field handlers
+    // // Filter field handlers
 
-    const inputFilter = (divElement as HTMLDivElement).querySelector('.input-filter') as HTMLInputElement;
-    inputFilter.addEventListener('keyup', (e: any) => {
+    // const inputFilter = (divElement as HTMLDivElement).querySelector('.input-filter') as HTMLInputElement;
+    // inputFilter.addEventListener('keyup', (e: any) => {
 
-      if (e.key == 'Enter') {
-        //console.log(inputFilter.value);
-        if (this._SfLoader != null) {
-          this._SfLoader.innerHTML = '<div class="lds-dual-ring"></div>';
-          this._SfLoader.innerHTML += ('<div class="lds-text"><div class="lds-text-c"></div></div>');
-        }
-        setTimeout(() => {
-          this.renderMappingTable(divElement, jsonData, cursor, fetchFunction, searchString, mappedArray, found, uploadFunction, refreshFunction, extraFields, uploadBlock, extraFieldPosition, colName, inputFilter.value, statuteColName, extraHintsArr)
-          this._SfLoader.innerHTML = '';
-        }, 1000);
+    //   if (e.key == 'Enter') {
+    //     //console.log(inputFilter.value);
+    //     if (this._SfLoader != null) {
+    //       this._SfLoader.innerHTML = '<div class="lds-dual-ring"></div>';
+    //       this._SfLoader.innerHTML += ('<div class="lds-text"><div class="lds-text-c"></div></div>');
+    //     }
+    //     setTimeout(() => {
+    //       this.renderMappingTable(divElement, jsonData, cursor, fetchFunction, searchString, mappedArray, found, uploadFunction, refreshFunction, extraFields, uploadBlock, extraFieldPosition, colName, inputFilter.value, statuteColName, extraHintsArr)
+    //       this._SfLoader.innerHTML = '';
+    //     }, 1000);
 
-      }
+    //   }
 
-    });
+    // });
 
     // More button handlers
 
@@ -22331,7 +23487,7 @@ export class SfIEvents extends LitElement {
         //console.log(e.currentTarget, (e.currentTarget as HTMLInputElement).checked);
         ((divElement as HTMLDivElement).querySelector('.button-save') as HTMLButtonElement).disabled = false;
         if (extraFieldPosition === 1) {
-          await this.saveMapping(divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, true)
+          await this.saveMapping(divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, true, mappedStatutes)
         }
       });
     }
@@ -22409,7 +23565,7 @@ export class SfIEvents extends LitElement {
 
     (this._SfButtonSave as HTMLButtonElement)?.addEventListener('click', async () => {
 
-      await this.saveMapping(divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, false)
+      await this.saveMapping(divElement, uploadBlock, jsonData, extraFields, searchString, uploadFunction, refreshFunction, false, mappedStatutes)
 
     });
 
@@ -23158,368 +24314,450 @@ export class SfIEvents extends LitElement {
 
     });
 
-    //this.refreshCalendar();
-
-  }
-
-  renderOnboardingTriggers = (mappedTriggers: any, mappedSerializedAlertSchedules: any, triggersJobs: any) => {
-
-    var html = '';
-
-    html += '<div id="triggers-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
-
-    (this._SfOnboardingTriggersContainer as HTMLDivElement).innerHTML = html;
-
-    //console.log('rendering triggers...', (this._SfOnboardingTriggersContainer as HTMLDivElement).innerHTML);
-
-    this.renderTaggingTable((this._SfOnboardingTriggersListContainer as HTMLDivElement), mappedSerializedAlertSchedules, mappedTriggers, ["shortid", "obligationtitle", "obligationtype"], this.uploadTriggersMapping, this.loadOnboardingTriggers, "triggers", ["id", "entityname", "locationname"], '', "", ["triggers"], triggersJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    //this.refreshCalendar();
 
   }
 
-  renderOnboardingInternalControls = (mappedInternalControls: any, mappedSerializedTriggers: any, internalcontrolsJobs: any) => {
+  renderOnboardingTriggers = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedTriggers: any) => {
 
-    var html = '';
+    this.renderTaggingTableNew((this._SfOnboardingTriggersListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedTriggers, ["shortid", "obligationtitle", "obligationtype"], this.uploadTriggersMapping, this.loadOnboardingTriggers, "triggers", ["id"], '', "", ["triggers"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
 
-    html += '<div id="internalcontrols-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+  }
 
-    (this._SfOnboardingInternalControlsContainer as HTMLDivElement).innerHTML = html;
+  renderOnboardingInternalControls = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedInternalControls: any) => {
 
-    this.renderTaggingTable((this._SfOnboardingInternalControlsListContainer as HTMLDivElement), mappedSerializedTriggers, mappedInternalControls, ["shortid", "obligationtitle", "obligationtype"], this.uploadInternalControlsMapping, this.loadOnboardingInternalControls, "internalcontrols", ["id", "entityname", "locationname"], '', "", ["internalcontrols"], internalcontrolsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    this.renderTaggingTableNew((this._SfOnboardingInternalControlsListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedInternalControls, ["shortid", "obligationtitle", "obligationtype"], this.uploadInternalControlsMapping, this.loadOnboardingInternalControls, "internalcontrols", ["id", "entityname", "locationname"], '', "", ["internalcontrols"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
 
   }
 
-  renderOnboardingReportedLocations = (mappedReportedLocations: any, mappedSerializedTriggers: any, reportedlocationsJobs: any) => {
+  renderOnboardingReportedLocations = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedReportedLocations: any) => {
 
-    var html = '';
+    this.renderTaggingTableNew((this._SfOnboardingReportedLocationsListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedReportedLocations, ["shortid", "obligationtitle", "obligationtype"], this.uploadReportedLocationsMapping, this.loadOnboardingReportedLocations, "reportedlocations", ["id", "entityname", "locationname"], '', "", ["reportedlocations"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
 
-    html += '<div id="reportedlocations-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+  }
 
-    (this._SfOnboardingReportedLocationsContainer as HTMLDivElement).innerHTML = html;
+  renderOnboardingActivations = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedActivations: any) => {
 
-    this.renderTaggingTable((this._SfOnboardingReportedLocationsContainer as HTMLDivElement), mappedSerializedTriggers, mappedReportedLocations, ["shortid", "obligationtitle", "obligationtype"], this.uploadReportedLocationsMapping, this.loadOnboardingReportedLocations, "reportedlocations", ["id", "entityname", "locationname"], '', "", ["reportedlocations"], reportedlocationsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    this.renderTaggingTableNew((this._SfOnboardingActivationListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedActivations, ["shortid", "obligationtitle", "obligationtype"], this.uploadActivationsMapping, this.loadOnboardingActivations, "activations", ["id", "entityname", "locationname"], '', "", ["activations"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
 
   }
 
-  renderOnboardingActivations = (mappedActivations: any, mappedSerializedExtensions: any, activationsJobs: any) => {
+  renderOnboardingInvalidations = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedInvalidations: any) => {
 
-    var html = '';
+    this.renderTaggingTableNew((this._SfOnboardingInvalidationListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedInvalidations, ["shortid", "obligationtitle", "obligationtype"], this.uploadInvalidationsMapping, this.loadOnboardingInvalidations, "invalidations", ["id", "entityname", "locationname"], '', "", ["invalidations"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
 
-    html += '<div id="activations-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+  }
 
-    (this._SfOnboardingActivationsContainer as HTMLDivElement).innerHTML = html;
+  renderOnboardingAlertSchedules = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedAlertSchedules: any) => {
 
-    this.renderTaggingTable((this._SfOnboardingActivationListContainer as HTMLDivElement), mappedSerializedExtensions, mappedActivations, ["shortid", "obligationtitle", "obligationtype"], this.uploadActivationsMapping, this.loadOnboardingActivations, "activations", ["id", "entityname", "locationname"], '', "", ["activations"], activationsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    this.renderTaggingTableNew((this._SfOnboardingAlertSchedulesListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedAlertSchedules, ["shortid", "obligationtitle", "obligationtype"], this.uploadAlertSchedulesMapping, this.loadOnboardingAlertSchedules, "alertschedules", ["id", "entityname", "locationname"], '', "", ["alertschedules"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
 
   }
 
-  renderOnboardingInvalidations = (mappedInvalidations: any, mappedSerializedExtensions: any, invalidationsJobs: any) => {
+  renderOnboardingExtensions = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedExtensions: any) => {
 
-    var html = '';
+    this.renderTaggingTableNew((this._SfOnboardingExtensionsListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedExtensions, ["shortid", "obligationtitle", "obligationtype"], this.uploadExtensionsMapping, this.loadOnboardingExtensions, "extensions", ["id", "entityname", "locationname"], '', "", ["extensions"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
 
-    html += '<div id="invalidations-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+  }
 
-    (this._SfOnboardingInvalidationsContainer as HTMLDivElement).innerHTML = html;
+  renderOnboardingDuedates = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedDuedates: any) => {
 
-    this.renderTaggingTable((this._SfOnboardingInvalidationListContainer as HTMLDivElement), mappedSerializedExtensions, mappedInvalidations, ["shortid", "obligationtitle", "obligationtype"], this.uploadInvalidationsMapping, this.loadOnboardingInvalidations, "invalidations", ["id", "entityname", "locationname"], '', "", ["invalidations"], invalidationsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    this.renderTaggingTableNew((this._SfOnboardingDuedatesListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedDuedates, ["shortid", "obligationtitle", "obligationtype"], this.uploadDuedatesMapping, this.loadOnboardingDuedates, "duedates", ["id", "entityname", "locationname"], '', "", ["duedates"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
 
   }
 
-  renderOnboardingAlertSchedules = (mappedAlertSchedules: any, mappedSerializedExtensions: any, alertschedulesJobs: any) => {
+  renderOnboardingReporters = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedReporters: any) => {
 
-    var html = '';
+    this.renderTaggingTableNew((this._SfOnboardingReportersListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedReporters, ["shortid", "obligationtitle", "obligationtype"], this.uploadReportersMapping, this.loadOnboardingReporters, "reporters", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["reporters"], ["id", "countryid", "entityid", "locationid"], null, [], null, "Guidelines", "");
 
-    html += '<div id="alertschedules-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+  }
 
-    (this._SfOnboardingAlertSchedulesContainer as HTMLDivElement).innerHTML = html;
+  renderOnboardingApprovers = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedApprovers: any) => {
 
-    this.renderTaggingTable((this._SfOnboardingAlertSchedulesListContainer as HTMLDivElement), mappedSerializedExtensions, mappedAlertSchedules, ["shortid", "obligationtitle", "obligationtype"], this.uploadAlertSchedulesMapping, this.loadOnboardingAlertSchedules, "alertschedules", ["id", "entityname", "locationname"], '', "", ["alertschedules"], alertschedulesJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    this.renderTaggingTableNew((this._SfOnboardingApproversListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedApprovers, ["shortid", "obligationtitle", "obligationtype"], this.uploadApproversMapping, this.loadOnboardingApprovers, "approvers", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["approvers"], ["id", "countryid", "entityid", "locationid"], null, [], null, "Guidelines", "");
 
   }
 
-  renderOnboardingExtensions = (mappedExtensions: any, mappedSerializedDuedates: any, extensionsJobs: any) => {
+  renderOnboardingFunctionHeads = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedFunctionHeads: any) => {
 
-    var html = '';
-
-    html += '<div id="extensions-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
-
-    (this._SfOnboardingExtensionsContainer as HTMLDivElement).innerHTML = html;
 
-    this.renderTaggingTable((this._SfOnboardingExtensionsListContainer as HTMLDivElement), mappedSerializedDuedates, mappedExtensions, ["shortid", "obligationtitle", "obligationtype"], this.uploadExtensionsMapping, this.loadOnboardingExtensions, "extensions", ["id", "entityname", "locationname"], '', "", ["extensions"], extensionsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    this.renderTaggingTableNew((this._SfOnboardingFunctionHeadsListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedFunctionHeads, ["shortid", "obligationtitle", "obligationtype"], this.uploadFunctionHeadsMapping, this.loadOnboardingFunctionHeads, "functionheads", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["functionheads"], ["id", "countryid", "entityid", "locationid"], null, [], null, "Guidelines", "");
 
   }
 
-  renderOnboardingDuedates = (mappedDuedates: any, mappedSerializedMakerCheckers: any, duedatesJobs: any) => {
-
-    var html = '';
-
-    html += '<div id="duedates-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
-
-    (this._SfOnboardingDuedatesContainer as HTMLDivElement).innerHTML = html;
+  renderOnboardingMakerCheckers = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedMakerCheckers: any) => {
 
-    this.renderTaggingTable((this._SfOnboardingDuedatesListContainer as HTMLDivElement), mappedSerializedMakerCheckers, mappedDuedates, ["shortid", "obligationtitle", "obligationtype"], this.uploadDuedatesMapping, this.loadOnboardingDuedates, "duedates", ["id", "entityname", "locationname"], '', "", ["duedates"], duedatesJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    this.renderTaggingTableNew((this._SfOnboardingMakerCheckersListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedMakerCheckers, ["shortid", "obligationtitle", "obligationtype"], this.uploadMakerCheckersMapping, this.loadOnboardingMakerCheckers, "makercheckers", ["id", "entityname", "locationname"], this.apiIdTags, "&MakerChecker", ["makercheckers"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
 
   }
 
-  renderOnboardingReporters = (mappedReporters: any, mappedSerializedTags: any, reportersJobs: any, _arrFeedbackReference: any) => {
+  renderOnboardingDocs = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedDocs: any) => {
 
-    var html = '';
+    this.renderTaggingTableNew((this._SfOnboardingDocsListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedDocs, ["shortid", "obligationtitle", "obligationtype"], this.uploadDocsMapping, this.loadOnboardingDocs, "docs", ["id", "entityname", "locationname"], this.apiIdTags, "&MakerChecker", ["docs"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
 
-    html += '<div id="reporters-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+  }
 
-    (this._SfOnboardingReportersContainer as HTMLDivElement).innerHTML = html;
+  renderOnboardingAuditors = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedAuditors: any) => {
 
-    this.renderTaggingTable((this._SfOnboardingReportersListContainer as HTMLDivElement), mappedSerializedTags, mappedReporters, ["shortid", "obligationtitle", "obligationtype"], this.uploadReportersMapping, this.loadOnboardingReporters, "reporters", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["reporters"], reportersJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
+    this.renderTaggingTableNew((this._SfOnboardingAuditorsListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedAuditors, ["shortid", "obligationtitle", "obligationtype"], this.uploadAuditorsMapping, this.loadOnboardingAuditors, "auditors", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["auditors"], ["id", "countryid", "entityid", "locationid"], null, [], null, "Guidelines", "");
 
   }
 
-  renderOnboardingApprovers = (mappedApprovers: any, mappedSerializedReporters: any, approversJobs: any, _arrFeedbackReference: any) => {
+  renderOnboardingViewers = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedViewers: any) => {
 
-    var html = '';
+    this.renderTaggingTableNew((this._SfOnboardingViewersListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedViewers, ["shortid", "obligationtitle", "obligationtype"], this.uploadViewersMapping, this.loadOnboardingViewers, "viewers", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["viewers"], ["id", "countryid", "entityid", "locationid"], null, [], null, "Guidelines", "");
 
-    html += '<div id="approvers-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+  }
 
-    (this._SfOnboardingApproversContainer as HTMLDivElement).innerHTML = html;
+  renderOnboardingTags = (selectedStatutes: any, mappedCompliances: any, mappedFunctions: any, mappedTags: any) => {
 
-    this.renderTaggingTable((this._SfOnboardingApproversListContainer as HTMLDivElement), mappedSerializedReporters, mappedApprovers, ["shortid", "obligationtitle", "obligationtype"], this.uploadApproversMapping, this.loadOnboardingApprovers, "approvers", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["approvers"], approversJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
+    this.renderTaggingTableNew((this._SfOnboardingTagsListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedFunctions, mappedTags, ["shortid", "obligationtitle", "obligationtype"], this.uploadTagsMapping, this.loadOnboardingTags, "tags", ["id", "entityname", "locationname"], this.apiIdTags, "&Tag", ["tags"], ["id", "countryid", "entityid", "locationid"], "tagtype", [], null, "", "");
 
   }
 
-  renderOnboardingFunctionHeads = (mappedFunctionHeads: any, mappedSerializedApprovers: any, functionHeadsJobs: any, _arrFeedbackReference: any) => {
+  renderOnboardingFunctions = (selectedStatutes: any, mappedCompliances: any, mappedLocations: any, mappedFunctions: any) => {
 
-    var html = '';
+    this.renderTaggingTableNew((this._SfOnboardingFunctionsListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedLocations, mappedFunctions, ["shortid", "obligationtitle", "obligationtype"], this.uploadFunctionsMapping, this.loadOnboardingFunctions, "functions", ["id", "entityname", "locationname"], this.apiIdTags, "&Function", ["functions"], ["id", "countryid", "entityid", "locationid"], null, [], null, "", "");
 
-    html += '<div id="functionheads-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+  }
 
-    (this._SfOnboardingFunctionHeadsContainer as HTMLDivElement).innerHTML = html;
+  renderOnboardingLocations = (selectedStatutes: any, mappedCompliances: any, mappedEntities: any, mappedLocations: any) => {
 
-    this.renderTaggingTable((this._SfOnboardingFunctionHeadsListContainer as HTMLDivElement), mappedSerializedApprovers, mappedFunctionHeads, ["shortid", "obligationtitle", "obligationtype"], this.uploadFunctionHeadsMapping, this.loadOnboardingFunctionHeads, "functionheads", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["functionheads"], functionHeadsJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
+    this.renderTaggingTableNew((this._SfOnboardingLocationsListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedEntities, mappedLocations, ["shortid", "applicability", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute", "reference", "activations", "invalidations"], this.uploadLocationsMapping, this.loadOnboardingLocations, "locations", ["id", "entityname"], this.apiIdTags, "&Location", ["locationname", "locationid"], ["id", "countryid", "entityid"], null, [], null, "", "");
 
   }
 
-  renderOnboardingMakerCheckers = (mappedMakerCheckers: any, mappedSerializedDocs: any, makerCheckerJobs: any) => {
-
+  renderOnboardingStatutesDropdownMapping = (container: HTMLDivElement, mappedStatutes: any, selectedStatutes: any, fetchtaggingfunction: Function, rendermappingfunction: Function) => {
+    console.log('rendering dropdown', mappedStatutes.length);
     var html = '';
 
-    html += '<div id="makercheckers-list-container" class="d-flex flex-col w-100 scroll-x">';
+    html += '<div class="d-flex flex-col w-100" style="height: 75vh">';
+    html += '<div class="d-flex flex-col justify-center align-stretch w-100">';
+    html += '<label part="input-label">Select Statute</label>';
+    html += '<sf-multiselect-search mode="edit" exportparts="input:multiselect-input, button-icon-multiselect-button-icon, multiselect-item:multiselect-item, multiselecct-checkbox:multiselect-checkbox, multiselecct-checkbox-label:multiselect-checkbox-label" id="statute-select"></sf-multiselect-search>';
     html += '</div>';
 
-    (this._SfOnboardingMakerCheckersContainer as HTMLDivElement).innerHTML = html;
-
-    this.renderTaggingTable((this._SfOnboardingMakerCheckersListContainer as HTMLDivElement), mappedSerializedDocs, mappedMakerCheckers, ["shortid", "obligationtitle", "obligationtype"], this.uploadMakerCheckersMapping, this.loadOnboardingMakerCheckers, "makercheckers", ["id", "entityname", "locationname"], this.apiIdTags, "&MakerChecker", ["makercheckers"], makerCheckerJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
-
-  }
-
-  renderOnboardingDocs = (mappedDocs: any, mappedSerializedViewers: any, docsJobs: any) => {
-
-    var html = '';
-
-    html += '<div id="docs-list-container" class="d-flex flex-col w-100 scroll-x">';
+    html += '<div id="compliances-list-container" class="d-flex flex-col w-100 scroll-x">';
     html += '</div>';
+    html += '</div>';
+    console.log('attaching html', html);
+    container.innerHTML = html;
 
-    (this._SfOnboardingDocsContainer as HTMLDivElement).innerHTML = html;
+    let multiselectStatute = container.querySelector('#statute-select') as SfMultiselectSearch;
+    multiselectStatute.listelements = mappedStatutes;
+    let selectedStatutesObj: any = {}
+    for (let statuteObj of selectedStatutes) {
+      selectedStatutesObj[statuteObj.id] = true
+    }
+    multiselectStatute.listselection = selectedStatutesObj;
+    multiselectStatute.loadMode();
+    multiselectStatute.addEventListener('valueChanged', async (e: any) => {
+      let multiselect = e.currentTarget as SfMultiselectSearch;
+      console.log('selected statutes', multiselect.selectedValuesNames());
+      if (Object.keys(multiselect.selectedValuesNames()).length == 0) {
+        return;
+      }
+      let selectedStatutes = [];
+      const regex = /^\[.*?\] - /;
+      for (let statuteid of Object.keys(multiselect.selectedValuesNames())) {
+        selectedStatutes.push({ id: statuteid, selected: true, statutename: multiselect.selectedValuesNames()[statuteid].name.replace(regex, '') });
+      }
 
-    this.renderTaggingTable((this._SfOnboardingDocsListContainer as HTMLDivElement), mappedSerializedViewers, mappedDocs, ["shortid", "obligationtitle", "obligationtype"], this.uploadDocsMapping, this.loadOnboardingDocs, "docs", ["id", "entityname", "locationname"], this.apiIdTags, "&MakerChecker", ["docs"], docsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+      let mappedCompliances = await fetchtaggingfunction(Object.keys(multiselect.selectedValuesNames()));
 
+      rendermappingfunction({ data: { mappings: { mappings: selectedStatutes } } }, mappedCompliances);
+    })
   }
 
-  renderOnboardingAuditors = (mappedAuditors: any, mappedSerializedFunctionheads: any, auditorsJobs: any, _arrFeedbackReference: any) => {
-
-    //console.log('inside rendering auditors..');
-
+  renderOnboardingStatutesDropdownTagging = (container: HTMLDivElement, listcontainerid: string, mappedStatutes: any, selectedStatutes: any, fetchcompliancesfunction: Function, fetchsourcemapping: Function, fetchtaggingfunction: Function, rendertaggingfunction: Function) => {
+    console.log('rendering dropdown', mappedStatutes.length);
     var html = '';
 
-    html += '<div id="auditors-list-container" class="d-flex flex-col w-100 scroll-x">';
+    html += '<div class="d-flex flex-col w-100" style="height: 75vh">';
+    html += '<div class="d-flex flex-col justify-center align-stretch w-100">';
+    html += '<label part="input-label">Select Statute</label>';
+    html += '<sf-multiselect-search mode="edit" exportparts="input:multiselect-input, button-icon-multiselect-button-icon, multiselect-item:multiselect-item, multiselecct-checkbox:multiselect-checkbox, multiselecct-checkbox-label:multiselect-checkbox-label" id="statute-select"></sf-multiselect-search>';
     html += '</div>';
 
-    (this._SfOnboardingAuditorsContainer as HTMLDivElement).innerHTML = html;
+    html += '<div id="' + listcontainerid + '" class="d-flex flex-col w-100 scroll-x">';
+    html += '</div>';
+    html += '</div>';
+    console.log('attaching html', html);
+    container.innerHTML = html;
 
-    this.renderTaggingTable((this._SfOnboardingAuditorsListContainer as HTMLDivElement), mappedSerializedFunctionheads, mappedAuditors, ["shortid", "obligationtitle", "obligationtype"], this.uploadAuditorsMapping, this.loadOnboardingAuditors, "auditors", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["auditors"], auditorsJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
+    let multiselectStatute = container.querySelector('#statute-select') as SfMultiselectSearch;
+    multiselectStatute.listelements = mappedStatutes;
+    let selectedStatutesObj: any = {}
+    for (let statuteObj of selectedStatutes) {
+      selectedStatutesObj[statuteObj.id] = true
+    }
+    multiselectStatute.listselection = selectedStatutesObj;
+    multiselectStatute.loadMode();
+    multiselectStatute.addEventListener('valueChanged', async (e: any) => {
+      let multiselect = e.currentTarget as SfMultiselectSearch;
+      console.log('selected statutes', multiselect.selectedValuesNames());
+      if (Object.keys(multiselect.selectedValuesNames()).length == 0) {
+        return;
+      }
+      let selectedStatutes = [];
+      const regex = /^\[.*?\] - /;
+      for (let statuteid of Object.keys(multiselect.selectedValuesNames())) {
+        selectedStatutes.push({ id: statuteid, selected: true, statutename: multiselect.selectedValuesNames()[statuteid].name.replace(regex, '') });
+      }
 
+      let sourceMappingArray = await fetchsourcemapping(Object.keys(multiselect.selectedValuesNames()));
+      let mappingArray = await fetchtaggingfunction(Object.keys(multiselect.selectedValuesNames()));
+      let mappedCompliances = await fetchcompliancesfunction(Object.keys(multiselect.selectedValuesNames()));
+      let mappedCompliancesArr: any = { data: { mappings: {} } };
+      console.log('mapped compliances', mappedCompliances)
+      for (let statuteObj of selectedStatutes) {
+        for (let complianceid of Object.keys(mappedCompliances.data.mappings[statuteObj.id])) {
+          let pushObj = mappedCompliances.data.mappings[statuteObj.id][complianceid];
+          pushObj.id = complianceid;
+          pushObj.statuteid = statuteObj.id;
+          mappedCompliancesArr.data.mappings[complianceid] = pushObj;
+        }
+      }
+      rendertaggingfunction(selectedStatutes, mappedCompliancesArr, sourceMappingArray, mappingArray);
+    })
   }
 
-  renderOnboardingViewers = (mappedViewers: any, mappedSerializedAuditors: any, viewersJobs: any, _arrFeedbackReference: any) => {
+  renderOnboardingCompliances = async (mappedStatutes: any, mappedCompliancesArr: any) => {
+
+    //console.log('mappedcompliances', mappedCompliances);
+    //console.log('mappedstatutes', mappedStatutes);
 
-    //console.log('inside rendering viewers..');
+    var searchString = "";
+    let mappedCompliances: any = { data: { mappings: { mappings: [] } } };
+    for (var i = 0; i < (mappedStatutes.data.mappings.mappings as Array<any>).length; i++) {
+      if ((mappedStatutes.data.mappings.mappings as Array<any>)[i].selected) {
+        let statuteid = (mappedStatutes.data.mappings.mappings as Array<any>)[i].id
+        if (mappedCompliancesArr.data.mappings[statuteid] != null) {
+          for (let complianceid of Object.keys(mappedCompliancesArr.data.mappings[statuteid])) {
+            let pushObj = mappedCompliancesArr.data.mappings[statuteid][complianceid];
+            pushObj.id = complianceid;
+            mappedCompliances.data.mappings.mappings.push(pushObj);
+          }
+        }
+        searchString += statuteid + "|";
+      }
+    }
+    searchString = searchString.slice(0, -1);
 
-    var html = '';
+    //console.log('searchstring', searchString);
 
-    html += '<div id="viewers-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+    var initCursor = "";
 
-    (this._SfOnboardingViewersContainer as HTMLDivElement).innerHTML = html;
+    // var html = '';
 
-    this.renderTaggingTable((this._SfOnboardingViewersListContainer as HTMLDivElement), mappedSerializedAuditors, mappedViewers, ["shortid", "obligationtitle", "obligationtype"], this.uploadViewersMapping, this.loadOnboardingViewers, "viewers", ["id", "entityname", "locationname"], this.apiIdUsers, "", ["viewers"], viewersJobs, null, ["Client remarks", "FlaggGRC response"], null, "Guidelines", "");
+    // html += '<div class="d-flex flex-col w-100" style="height: 75vh">';
+    // html += '<div class="d-flex flex-col w-100">';
+    // html += '<label part="input-label">Search Compliances</label>';
+    // html += '<div class="d-flex">';
+    // html += '<input part="input" type="text" class="w-100 input-search" placeholder="Use | to separate..." disabled/>'
+    // html += '<button part="button-icon" class="ml-10 material-icons button-search">search</button>'
+    // html += '</div>';
+    // html += '</div>';
 
-  }
+    // html += '<div id="compliances-list-container" class="d-flex flex-col w-100 scroll-x">';
+    // html += '</div>';
+    // html += '</div>';
 
-  renderOnboardingTags = (mappedTags: any, mappedSerializedFunctions: any, tagsJobs: any) => {
+    // (this._SfOnboardingCompliancesContainer as HTMLDivElement).innerHTML = html;
 
-    var html = '';
+    // (this._SfButtonSearch as HTMLButtonElement)?.addEventListener('click', async () => {
+    //   //console.log('clicked', mappedStatutes.data.mappings.mappings);
+    //   const searchString = (this._SfInputSearch as HTMLButtonElement).value;
+    //   //console.log('searchstring', searchString);
+    //   if (searchString.length > 0) {
 
-    html += '<div id="tags-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+    //     const arrSearchString = searchString.split('|');
 
-    (this._SfOnboardingTagsContainer as HTMLDivElement).innerHTML = html;
+    //     const arrSearchStringProcessed: any = [];
 
-    this.renderTaggingTable((this._SfOnboardingTagsListContainer as HTMLDivElement), mappedSerializedFunctions, mappedTags, ["shortid", "obligationtitle", "obligationtype"], this.uploadTagsMapping, this.loadOnboardingTags, "tags", ["id", "countryname", "entityname", "locationname"], this.apiIdTags, "&Tag", ["tags"], tagsJobs, "tagtype", ["Client remarks", "FlaggGRC response"], null, "", "");
+    //     arrSearchString.forEach((complianceId: string) => {
 
-  }
+    //       if (complianceId.length === 36) {
+    //         arrSearchStringProcessed.push(complianceId);
+    //       }
 
-  renderOnboardingFunctions = (mappedFunctions: any, mappedSerializedLocations: any, functionsJobs: any) => {
+    //     });
 
-    var html = '';
+    //     var resultCompliances: any = {};
+    //     resultCompliances.values = [];
+    //     const chunkSize = 20;
+    //     for (let k = 0; k < arrSearchStringProcessed.length; k += chunkSize) {
 
-    html += '<div id="functions-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+    //       const chunk = arrSearchStringProcessed.slice(k, k + chunkSize);
+    //       console.log('chunk', chunk);
+    //       // do whatever
+    //       const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchStringProcessed.length);
+    //       console.log(tempResultCompliances)
+    //       resultCompliances.values.push(...tempResultCompliances.values);
+    //       //console.log(resultCompliances);
 
-    for (var i = 0; i < mappedSerializedLocations.data.mappings.mappings.length; i++) {
+    //     }
 
-      if (mappedSerializedLocations.data.mappings.mappings[i].id == "33a0deab-e93e-41b7-831a-473f9ea3eea2") {
-        //console.log('mappedSerializedLocations', mappedSerializedLocations.data.mappings.mappings[i]);
-      }
+    //     // var resultCompliances : any = {};
+    //     // resultCompliances.values = [];
+    //     // const chunkSize = 20;
+    //     // for (let k = 0; k < arrSearchString.length; k += chunkSize) {
 
-    }
+    //     //   const chunk = arrSearchString.slice(k, k + chunkSize);
+    //     //   console.log('chunk', chunk);
+    //     //     // do whatever
+    //     //   const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchString.length);
+    //     //   console.log(tempResultCompliances)
+    //     //   resultCompliances.values.push(...tempResultCompliances.values);
+    //     //   //console.log(resultCompliances);
 
-    (this._SfOnboardingFunctionsContainer as HTMLDivElement).innerHTML = html;
+    //     // }
 
-    this.renderTaggingTable((this._SfOnboardingFunctionsListContainer as HTMLDivElement), mappedSerializedLocations, mappedFunctions, ["shortid", "obligationtitle", "obligationtype"], this.uploadFunctionsMapping, this.loadOnboardingFunctions, "functions", ["id", "countryname", "entityname", "locationname"], this.apiIdTags, "&Function", ["functions"], functionsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    //     if (resultCompliances != null) {
 
-  }
+    //       const jsonData = [];
 
-  renderOnboardingLocations = (mappedLocations: any, mappedSerializedEntities: any, locationsJobs: any) => {
+    //       const arrCompliancesFrequencies: any = {};
 
-    var html = '';
+    //       for (var i = 0; i < resultCompliances.values.length; i++) {
 
-    html += '<div id="locations-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
+    //         if (arrCompliancesFrequencies[resultCompliances.values[i].id] != null) {
+    //           continue;
+    //         } else {
+    //           arrCompliancesFrequencies[resultCompliances.values[i].id] = 0;
+    //         }
 
-    (this._SfOnboardingLocationsContainer as HTMLDivElement).innerHTML = html;
+    //         var mapped = false;
+    //         var extraFields = null;
+    //         var previousExtraFields = null;
+    //         console.log('mappedcompliances', mappedCompliances)
+    //         for (var j = 0; j < mappedCompliances.data.mappings.mappings.length; j++) {
+    //           if (mappedCompliances.data.mappings.mappings[j].id == resultCompliances.values[i].id) {
+    //             if (mappedCompliances.data.mappings.mappings[j].selected) {
+    //               mapped = true;
+    //             }
+    //             extraFields = mappedCompliances.data.mappings.mappings[j].extraFields;
+    //           }
+    //         }
 
-    this.renderTaggingTable((this._SfOnboardingLocationsListContainer as HTMLDivElement), mappedSerializedEntities, mappedLocations, ["shortid", "applicability", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute", "reference", "activations", "invalidations"], this.uploadLocationsMapping, this.loadOnboardingLocations, "locations", ["id", "countryname", "entityname"], this.apiIdTags, "&Location", ["locations"], locationsJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
+    //         for (j = 0; j < mappedStatutes.data.mappings.mappings.length; j++) {
 
-  }
+    //           // console.log('mappedStatutes.data.mappings.mappings[j]', mappedStatutes.data.mappings.mappings[j]);
+    //           if (Array.isArray(mappedStatutes.data.mappings.mappings[j].statutename)) {
+    //             // sometimes this error occurs
+    //             continue;
 
-  renderOnboardingCompliances = (mappedStatutes: any, mappedCompliances: any) => {
+    //           }
 
-    //console.log('mappedcompliances', mappedCompliances);
-    //console.log('mappedstatutes', mappedStatutes);
+    //           if (mappedStatutes.data.mappings.mappings[j].statutename.trim() == JSON.parse(resultCompliances.values[i].fields.data[0])[6][0].trim()) {
 
-    var searchString = "";
+    //             // if (mappedStatutes.data.mappings.mappings[j].statutename.trim() == "Corporation Act, 2001") {
+    //             //   console.log('pushpreviousvalues', mappedStatutes.data.mappings.mappings[j], Object.keys(mappedStatutes.data.mappings.mappings[j].extraFields[0]));
+    //             // }
+    //             previousExtraFields = mappedStatutes.data.mappings.mappings[j].extraFields
+    //           }
+    //         }
+    //         jsonData.push({ id: resultCompliances.values[i].id, mapped: mapped, data: resultCompliances.values[i].fields, cols: ["country", "jurisdiction", "state", "category", "subcategory", "statute", "applicability", "obligationtitle", "obligation", "risk", "riskarea", "frequency", "penalty", "reference", "form", "subfrequency", "obligationtype", "duedate"], extraFields: extraFields, previousExtraFields: previousExtraFields })
+    //       }
 
-    for (var i = 0; i < (mappedStatutes.data.mappings.mappings as Array<any>).length; i++) {
-      if ((mappedStatutes.data.mappings.mappings as Array<any>)[i].selected) {
-        searchString += (mappedStatutes.data.mappings.mappings as Array<any>)[i].id + "|";
-      }
-    }
-    searchString = searchString.slice(0, -1);
 
-    //console.log('searchstring', searchString);
+    //       this.renderMappingTable((this._SfOnboardingCompliancesListContainer as HTMLDivElement), jsonData, [{ prev: initCursor, next: resultCompliances.cursor }], this.fetchSearchCompliances, searchString, mappedCompliances, resultCompliances.values.length, this.uploadCompliancesMapping, this.loadOnboardingCompliances, ["Client remarks", "FlaggGRC response"], -1, 0, "compliances", "", "statute", ["optional", "optional"]);
 
-    var initCursor = "";
+    //     }
 
-    var html = '';
+    //   }
 
-    html += '<div class="d-flex flex-col w-100" style="height: 75vh">';
-    html += '<div class="d-flex flex-col w-100">';
-    html += '<label part="input-label">Search Compliances</label>';
-    html += '<div class="d-flex">';
-    html += '<input part="input" type="text" class="w-100 input-search" placeholder="Use | to separate..." disabled/>'
-    html += '<button part="button-icon" class="ml-10 material-icons button-search">search</button>'
-    html += '</div>';
-    html += '</div>';
+    // });
 
-    html += '<div id="compliances-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
-    html += '</div>';
+    //console.log('compliances searchstring', searchString);
 
-    (this._SfOnboardingCompliancesContainer as HTMLDivElement).innerHTML = html;
+    // if (searchString != "") {
+    //   (this._SfInputSearch as HTMLInputElement).value = searchString;
+    //   (this._SfButtonSearch as HTMLButtonElement).click();
+    // }
 
-    (this._SfButtonSearch as HTMLButtonElement).addEventListener('click', async () => {
-      //console.log('clicked', mappedStatutes.data.mappings.mappings);
-      const searchString = (this._SfInputSearch as HTMLButtonElement).value;
-      //console.log('searchstring', searchString);
-      if (searchString.length > 0) {
+    if (searchString.length > 0) {
 
-        const arrSearchString = searchString.split('|');
+      const arrSearchString = searchString.split('|');
 
-        const arrSearchStringProcessed: any = [];
+      const arrSearchStringProcessed: any = [];
 
-        arrSearchString.forEach((complianceId: string) => {
+      arrSearchString.forEach((complianceId: string) => {
 
-          if (complianceId.length === 36) {
-            arrSearchStringProcessed.push(complianceId);
-          }
+        if (complianceId.length === 36) {
+          arrSearchStringProcessed.push(complianceId);
+        }
 
-        });
+      });
 
-        var resultCompliances: any = {};
-        resultCompliances.values = [];
-        const chunkSize = 20;
-        for (let k = 0; k < arrSearchStringProcessed.length; k += chunkSize) {
+      var resultCompliances: any = {};
+      resultCompliances.values = [];
+      const chunkSize = 20;
+      for (let k = 0; k < arrSearchStringProcessed.length; k += chunkSize) {
 
-          const chunk = arrSearchStringProcessed.slice(k, k + chunkSize);
-          console.log('chunk', chunk);
-          // do whatever
-          const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchStringProcessed.length);
-          console.log(tempResultCompliances)
-          resultCompliances.values.push(...tempResultCompliances.values);
-          //console.log(resultCompliances);
+        const chunk = arrSearchStringProcessed.slice(k, k + chunkSize);
+        console.log('chunk', chunk);
+        // do whatever
+        const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchStringProcessed.length);
+        console.log(tempResultCompliances)
+        resultCompliances.values.push(...tempResultCompliances.values);
+        //console.log(resultCompliances);
 
-        }
+      }
 
-        // var resultCompliances : any = {};
-        // resultCompliances.values = [];
-        // const chunkSize = 20;
-        // for (let k = 0; k < arrSearchString.length; k += chunkSize) {
+      // var resultCompliances : any = {};
+      // resultCompliances.values = [];
+      // const chunkSize = 20;
+      // for (let k = 0; k < arrSearchString.length; k += chunkSize) {
 
-        //   const chunk = arrSearchString.slice(k, k + chunkSize);
-        //   console.log('chunk', chunk);
-        //     // do whatever
-        //   const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchString.length);
-        //   console.log(tempResultCompliances)
-        //   resultCompliances.values.push(...tempResultCompliances.values);
-        //   //console.log(resultCompliances);
+      //   const chunk = arrSearchString.slice(k, k + chunkSize);
+      //   console.log('chunk', chunk);
+      //     // do whatever
+      //   const tempResultCompliances = await this.fetchSearchCompliances(chunk.join('|'), "", k, arrSearchString.length);
+      //   console.log(tempResultCompliances)
+      //   resultCompliances.values.push(...tempResultCompliances.values);
+      //   //console.log(resultCompliances);
 
-        // }
+      // }
 
-        if (resultCompliances != null) {
+      if (resultCompliances != null) {
 
-          const jsonData = [];
+        const jsonData = [];
 
-          const arrCompliancesFrequencies: any = {};
+        const arrCompliancesFrequencies: any = {};
 
-          for (var i = 0; i < resultCompliances.values.length; i++) {
+        for (var i = 0; i < resultCompliances.values.length; i++) {
 
-            if (arrCompliancesFrequencies[resultCompliances.values[i].id] != null) {
-              continue;
-            } else {
-              arrCompliancesFrequencies[resultCompliances.values[i].id] = 0;
-            }
+          if (arrCompliancesFrequencies[resultCompliances.values[i].id] != null) {
+            continue;
+          } else {
+            arrCompliancesFrequencies[resultCompliances.values[i].id] = 0;
+          }
 
-            var mapped = false;
-            var extraFields = null;
-            var previousExtraFields = null;
-            console.log('mappedcompliances', mappedCompliances)
-            for (var j = 0; j < mappedCompliances.data.mappings.mappings.length; j++) {
-              if (mappedCompliances.data.mappings.mappings[j].id == resultCompliances.values[i].id) {
-                if (mappedCompliances.data.mappings.mappings[j].selected) {
+          var mapped = false;
+          var extraFields = null;
+          var previousExtraFields = null;
+          console.log('mappedcompliances', mappedCompliances)
+          if (mappedCompliances.data.mappings.mappings == null) {
+            for (var j = 0; j < Object.keys(mappedCompliances.data.mappings).length; j++) {
+              let statuteKey = Object.keys(mappedCompliances.data.mappings)[j];
+              for (var k = 0; k < Object.keys(mappedCompliances.data.mappings[statuteKey]).length; k++) {
+                let complianceKey = Object.keys(mappedCompliances.data.mappings[statuteKey])[k];
+                if (mappedCompliances.data.mappings[statuteKey][complianceKey].id == resultCompliances.values[i].id) {
                   mapped = true;
+                  extraFields = mappedCompliances.data.mappings[statuteKey][complianceKey].extraFields;
                 }
+              }
+            }
+          } else {
+            for (var j = 0; j < mappedCompliances.data.mappings.mappings.length; j++) {
+              if (mappedCompliances.data.mappings.mappings[j].id == resultCompliances.values[i].id) {
+                mapped = true;
                 extraFields = mappedCompliances.data.mappings.mappings[j].extraFields;
               }
             }
 
+
             for (j = 0; j < mappedStatutes.data.mappings.mappings.length; j++) {
 
               // console.log('mappedStatutes.data.mappings.mappings[j]', mappedStatutes.data.mappings.mappings[j]);
@@ -23531,76 +24769,34 @@ export class SfIEvents extends LitElement {
 
               if (mappedStatutes.data.mappings.mappings[j].statutename.trim() == JSON.parse(resultCompliances.values[i].fields.data[0])[6][0].trim()) {
 
-                if (mappedStatutes.data.mappings.mappings[j].statutename.trim() == "Corporation Act, 2001") {
-                  //console.log('pushpreviousvalues', mappedStatutes.data.mappings.mappings[j], Object.keys(mappedStatutes.data.mappings.mappings[j].extraFields[0]));
-                }
+                // if (mappedStatutes.data.mappings.mappings[j].statutename.trim() == "Corporation Act, 2001") {
+                //   //console.log('pushpreviousvalues', mappedStatutes.data.mappings.mappings[j], Object.keys(mappedStatutes.data.mappings.mappings[j].extraFields[0]));
+                // }
                 previousExtraFields = mappedStatutes.data.mappings.mappings[j].extraFields
               }
             }
-            jsonData.push({ id: resultCompliances.values[i].id, mapped: mapped, data: resultCompliances.values[i].fields, cols: ["country", "jurisdiction", "state", "category", "subcategory", "statute", "applicability", "obligationtitle", "obligation", "risk", "riskarea", "frequency", "penalty", "reference", "form", "subfrequency", "obligationtype", "duedate"], extraFields: extraFields, previousExtraFields: previousExtraFields })
           }
-
-
-          this.renderMappingTable((this._SfOnboardingCompliancesListContainer as HTMLDivElement), jsonData, [{ prev: initCursor, next: resultCompliances.cursor }], this.fetchSearchCompliances, searchString, mappedCompliances, resultCompliances.values.length, this.uploadCompliancesMapping, this.loadOnboardingCompliances, ["Client remarks", "FlaggGRC response"], -1, 0, "compliances", "", "statute", ["optional", "optional"]);
-
+          jsonData.push({ id: resultCompliances.values[i].id, mapped: mapped, data: resultCompliances.values[i].fields, cols: ["country", "jurisdiction", "state", "category", "subcategory", "statute", "applicability", "obligationtitle", "obligation", "risk", "riskarea", "frequency", "penalty", "reference", "form", "subfrequency", "obligationtype", "duedate"], extraFields: extraFields, previousExtraFields: previousExtraFields })
         }
 
-      }
 
-    });
+        this.renderMappingTable((this._SfOnboardingCompliancesListContainer as HTMLDivElement), jsonData, [{ prev: initCursor, next: resultCompliances.cursor }], this.fetchSearchCompliances, searchString, mappedCompliances, resultCompliances.values.length, this.uploadCompliancesMapping, this.loadOnboardingCompliances, [], -1, 0, "compliances", "", "statute", ["optional", "optional"], mappedStatutes.data.mappings.mappings);
 
-    //console.log('compliances searchstring', searchString);
+      }
 
-    if (searchString != "") {
-      (this._SfInputSearch as HTMLInputElement).value = searchString;
-      (this._SfButtonSearch as HTMLButtonElement).click();
     }
 
   }
 
-  renderOnboardingEntities = (mappedEntities: any, mappedSerializedCountries: any, entitiesJobs: any, arrFeedbackReference: any) => {
-
-    var html = '';
-
-    html += '<div id="entities-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
-
-    (this._SfOnboardingEntitiesContainer as HTMLDivElement).innerHTML = html;
+  renderOnboardingEntities = (selectedStatutes: any, mappedCompliances: any, mappedCountries: any, mappedEntities: any) => {
 
-    this.renderTaggingTable((this._SfOnboardingEntitiesListContainer as HTMLDivElement), mappedSerializedCountries, mappedEntities, ["shortid", "applicability", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute"], this.uploadEntitiesMapping, this.loadOnboardingEntities, "entities", ["id", "countryname"], this.apiIdTags, "&Entity", ["entities"], entitiesJobs, null, ["Client remarks", "FlaggGRC response"], arrFeedbackReference, "Guideline", "");
+    this.renderTaggingTableNew((this._SfOnboardingEntitiesListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, mappedCountries, mappedEntities, ["shortid", "applicability", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute"], this.uploadEntitiesMapping, this.loadOnboardingEntities, "entities", ["id", "countryname"], this.apiIdTags, "&Entity", ["entityname", "entityid"], ["id", "countryid"], null, [], [], "Guideline", "");
 
   }
 
-  renderOnboardingCountries = (mappedCountries: any, mappedCompliances: any, countriesJobs: any) => {
-
-    var html = '';
-
-    html += '<div id="countries-list-container" class="d-flex flex-col w-100 scroll-x">';
-    html += '</div>';
-
-    (this._SfOnboardingCountriesContainer as HTMLDivElement).innerHTML = html;
-
-    const arr1 = [];
-
-    for (var i = 0; i < mappedCompliances.data.mappings.mappings.length; i++) {
-      if (mappedCompliances.data.mappings.mappings[i].selected) {
-        arr1.push(mappedCompliances.data.mappings.mappings[i]);
-      }
-    }
-
-    mappedCompliances.data.mappings.mappings = arr1;
-
-    // const arr2 = [];
-    // for(var i = 0; i < mappedCountries.data.mappings.mappings.length; i++) {
-    //   if(mappedCountries.data.mappings.mappings[i].selected) {
-    //     arr2.push(mappedCountries.data.mappings.mappings[i]);
-    //   }
-    // }
-
-    // mappedCountries.data.mappings.mappings = arr2;
-
-    this.renderTaggingTable((this._SfOnboardingCountriesListContainer as HTMLDivElement), mappedCompliances, mappedCountries, ["shortid", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute", "state", "subcategory"], this.uploadCountriesMapping, this.loadOnboardingCountries, "countries", ["id"], this.apiIdTags, "-Country", ["countries"], countriesJobs, null, ["Client remarks", "FlaggGRC response"], null, "", "");
-
+  renderOnboardingCountries = (selectedStatutes: any, mappedCompliances: any, sourceMapping: any, mappedCountries: any) => {
+    sourceMapping = {}
+    this.renderTaggingTableNew((this._SfOnboardingCountriesListContainer as HTMLDivElement), selectedStatutes, mappedCompliances, sourceMapping, mappedCountries, ["shortid", "firstlineofdefence", "obligationtitle", "obligationtype", "country", "statute", "state", "subcategory"], this.uploadCountriesMapping, this.loadOnboardingCountries, "countries", ["id"], this.apiIdTags, "-Country", ["countryname", "countryid"], ["id"], null, [], null, "", "");
   }
 
   renderOnboardingStatutes = (mappedStatutes: any) => {
@@ -23646,9 +24842,9 @@ export class SfIEvents extends LitElement {
               for (var j = 0; j < mappedStatutes.data.mappings.mappings.length; j++) {
                 if (mappedStatutes.data.mappings.mappings[j].id == resultStatutes.values[i].id) {
                   //console.log('comparing',mappedStatutes.data.mappings.mappings[j].id,resultStatutes.values[i].id);
-                  if (mappedStatutes.data.mappings.mappings[j].selected) {
-                    mapped = true;
-                  }
+                  // if (mappedStatutes.data.mappings.mappings[j].selected) {
+                  mapped = true;
+                  // }
                   extraFields = mappedStatutes.data.mappings.mappings[j].extraFields;
                 }
               }
@@ -23914,7 +25110,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-statutes')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_STATUTES;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       await this.loadOnboardingStatutes();
 
     });
@@ -23922,7 +25118,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-compliances')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_COMPLIANCES;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingCompliances();
 
     });
@@ -23930,7 +25126,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-countries')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_COUNTRIES;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingCountries();
 
     });
@@ -23938,7 +25134,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-entities')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_ENTITIES;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingEntities();
 
     });
@@ -23946,7 +25142,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-locations')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_LOCATIONS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingLocations();
 
     });
@@ -23954,7 +25150,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-functions')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_FUNCTIONS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingFunctions();
 
     });
@@ -23962,7 +25158,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-tags')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_TAGS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingTags();
 
     });
@@ -23970,7 +25166,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-reporters')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_REPORTERS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingReporters();
 
     });
@@ -23978,7 +25174,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-approvers')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_APPROVERS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingApprovers();
 
     });
@@ -23986,7 +25182,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-functionheads')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_FUNCTION_HEADS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingFunctionHeads();
 
     });
@@ -23994,7 +25190,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-auditors')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_AUDITORS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingAuditors();
 
     });
@@ -24002,7 +25198,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-viewers')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_VIEWERS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingViewers();
 
     });
@@ -24010,7 +25206,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-makercheckers')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_MAKER_CHECKERS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingMakerCheckers();
 
     });
@@ -24018,7 +25214,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-docs')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_DOCS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingDocs();
 
     });
@@ -24026,7 +25222,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-duedates')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_DUEDATES;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingDuedates();
 
     });
@@ -24034,7 +25230,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-alertschedules')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_ALERTSCHEDULES;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingAlertSchedules();
 
     });
@@ -24042,7 +25238,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-activations')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_ACTIVATIONS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingActivations();
 
     });
@@ -24050,7 +25246,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-invalidations')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_INVALIDATION;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingInvalidations();
 
     });
@@ -24058,7 +25254,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-triggers')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_TRIGGERS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingTriggers();
 
     });
@@ -24066,7 +25262,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-extensions')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_EXTENSIONS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingExtensions();
 
     });
@@ -24074,7 +25270,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-internalcontrols')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_INTERNALCONTROLS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingInternalControls();
 
     });
@@ -24082,7 +25278,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-reportedlocations')?.addEventListener('click', async () => {
 
       this.myOnboardingTab = this.TAB_REPORTEDLOCATIONS;
-      this.renderOnboardingTabs();
+      await this.renderOnboardingTabs();
       this.loadOnboardingReportedLocations();
 
     });
@@ -28142,90 +29338,90 @@ export class SfIEvents extends LitElement {
 
   }
 
-  uploadTriggersMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'triggers');
+  uploadTriggersMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'triggers', statuteids);
   }
 
-  uploadInternalControlsMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'internalcontrols');
+  uploadInternalControlsMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'internalcontrols', statuteids);
   }
 
-  uploadReportedLocationsMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'reportedlocations');
+  uploadReportedLocationsMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'reportedlocations', statuteids);
   }
 
-  uploadAlertSchedulesMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'alertschedules');
+  uploadAlertSchedulesMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'alertschedules', statuteids);
   }
 
-  uploadActivationsMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'activations');
+  uploadActivationsMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'activations', statuteids);
   }
 
-  uploadInvalidationsMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'invalidations');
+  uploadInvalidationsMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'invalidations', statuteids);
   }
 
-  uploadDuedatesMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'duedates');
+  uploadDuedatesMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'duedates', statuteids);
 
   }
 
-  uploadExtensionsMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'extensions');
+  uploadExtensionsMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'extensions', statuteids);
 
   }
 
-  uploadApproversMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'approvers');
+  uploadApproversMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'approvers', statuteids);
 
   }
 
-  uploadFunctionHeadsMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'functionheads');
+  uploadFunctionHeadsMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'functionheads', statuteids);
   }
 
-  uploadMakerCheckersMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'makercheckers');
+  uploadMakerCheckersMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'makercheckers', statuteids);
   }
 
-  uploadDocsMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'docs');
+  uploadDocsMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'docs', statuteids);
 
   }
 
-  uploadAuditorsMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'auditors');
+  uploadAuditorsMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'auditors', statuteids);
 
   }
 
-  uploadViewersMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'viewers');
+  uploadViewersMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'viewers', statuteids);
 
   }
 
-  uploadReportersMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'reporters');
+  uploadReportersMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'reporters', statuteids);
   }
 
-  uploadTagsMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'tags');
+  uploadTagsMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'tags', statuteids);
   }
 
-  uploadFunctionsMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'functions');
+  uploadFunctionsMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'functions', statuteids);
   }
 
-  uploadLocationsMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'locations');
+  uploadLocationsMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'locations', statuteids);
   }
 
-  uploadEntitiesMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'entities');
+  uploadEntitiesMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'entities', statuteids);
   }
 
-  uploadCountriesMapping = async (data: any) => {
-    await this.uploadOnboardingMapping(data, 'countries');
+  uploadCountriesMapping = async (data: any, statuteids: string[]) => {
+    await this.uploadOnboardingMapping(data, 'countries', statuteids);
   }
 
   uploadMappedSuspense = async (data: any, year: string) => {
@@ -28262,11 +29458,11 @@ export class SfIEvents extends LitElement {
 
   }
 
-  uploadOnboardingMapping = async (data: any, onboardingstep: string) => {
+  uploadOnboardingMapping = async (data: any, onboardingstep: string, statuteids: string[]) => {
 
     //console.log('uploading..', data);
 
-    let url = "https://" + this.apiId + "/updatemappedonboarding";
+    let url = "https://" + this.apiId + "/updatemappedonboarding1";
 
     // const body = { 
     //   "projectid": this.projectId, 
@@ -28277,7 +29473,8 @@ export class SfIEvents extends LitElement {
     let body: any = {
       "projectid": this.projectId,
       "presigned": true,
-      "onboardingstep": onboardingstep
+      "onboardingstep": onboardingstep,
+      "statuteids": statuteids
     }
 
     let authorization: any = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
@@ -28292,7 +29489,8 @@ export class SfIEvents extends LitElement {
       body = {
         "projectid": this.projectId,
         "key": jsonRespose.key,
-        "onboardingstep": onboardingstep
+        "onboardingstep": onboardingstep,
+        "statuteids": statuteids
       }
       authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
       xhr = (await this.prepareXhr(body, url, this._SfLoader, authorization)) as any;
@@ -28320,11 +29518,14 @@ export class SfIEvents extends LitElement {
     }
   }
 
-  uploadCompliancesMapping = async (data: any) => {
-
-    //console.log('uploading..', data);
-    let url = "https://" + this.apiId + "/updatemappedcompliances";
+  uploadCompliancesMapping = async (data: any, mappedstatutes: Array<any>) => {
 
+    console.log('uploading..', data, mappedstatutes);
+    let url = "https://" + this.apiId + "/updatemappedcompliances1";
+    let statuteids = []
+    for (let statuteObj of mappedstatutes) {
+      statuteids.push(statuteObj.id);
+    }
     let body: any = {
       "projectid": this.projectId,
       "presigned": true,
@@ -28341,6 +29542,7 @@ export class SfIEvents extends LitElement {
 
       body = {
         "projectid": this.projectId,
+        "statuteids": statuteids,
         "key": jsonRespose.key
       }
       authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
@@ -28363,28 +29565,35 @@ export class SfIEvents extends LitElement {
 
   uploadStatutesMapping = async (data: any) => {
 
-    //console.log('uploading..', data);
-    let url = "https://" + this.apiId + "/updatemappedstatutes";
-
-    var searchstring = '';
+    // console.log('uploading..', data);
+    let url = "https://" + this.apiId + "/updatemappedstatutes1";
 
-    for (var i = 0; i < data.mappings.length; i++) {
+    // var searchstring = '';
 
-      const dataItem = JSON.parse(data.mappings[i].data);
-      // //console.log(dataItem[3])
-      searchstring += dataItem[3];
-      if (i < (data.mappings.length - 1)) {
-        searchstring += '|';
-      }
+    // for (var i = 0; i < data.mappings.length; i++) {
 
-    }
+    //   // const dataItem = JSON.parse(data.mappings[i].data);
+    //   const dataId = data.mappings[i].id;
+    //   // console.log(dataItem[3])
+    //   if (data.mappings[i].selected == true) {
+    //     searchstring += dataId;
+    //     // if (i < (data.mappings.length - 1)) {
+    //       searchstring += '|';
+    //     // }
+    //   }
 
-    // const body = { 
+    // }
+    // if(searchstring.length > 0){
+    //   searchstring = searchstring.slice(0, -1);
+    // }
+    // const bodyUpload = { 
     //   "projectid": this.projectId, 
-    //   "data": JSON.stringify(data),
+    //   // "data": JSON.stringify(data),
     //   "compliancessearchstring": searchstring
     // }
 
+    // console.log("upload body", bodyUpload)
+    // return;
 
     let body: any = {
       "projectid": this.projectId,
@@ -28402,7 +29611,6 @@ export class SfIEvents extends LitElement {
       body = {
         "projectid": this.projectId,
         "key": jsonRespose.key,
-        "compliancessearchstring": searchstring
       }
 
       authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
@@ -29657,11 +30865,11 @@ export class SfIEvents extends LitElement {
 
   }
 
-  fetchMappedCompliances = async () => {
+  fetchMappedCompliances = async (statuteids = []) => {
 
-    let url = "https://" + this.apiId + "/getmappedcompliances";
+    let url = "https://" + this.apiId + "/getmappedcompliances1";
     const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
-    const xhr: any = (await this.prepareXhr({ "projectid": this.projectId }, url, this._SfLoader, authorization)) as any;
+    const xhr: any = (await this.prepareXhr({ "projectid": this.projectId, "statuteids": statuteids }, url, this._SfLoader, authorization)) as any;
     this._SfLoader.innerHTML = '';
     if (xhr.status == 200) {
 
@@ -29843,7 +31051,7 @@ export class SfIEvents extends LitElement {
 
   fetchSerializedMapping = async (onboardingstep: string) => {
 
-    const url = "https://" + this.apiId + "/getmappedserializedonboarding";
+    const url = "https://" + this.apiId + "/getmappedserializedonboarding1";
     const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
     const xhr: any = (await this.prepareXhr({ "projectid": this.projectId, "onboardingstep": onboardingstep }, url, this._SfLoader, authorization)) as any;
     this._SfLoader.innerHTML = '';
@@ -29952,129 +31160,129 @@ export class SfIEvents extends LitElement {
 
   }
 
-  fetchMappedTriggers = async () => {
+  fetchMappedTriggers = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('triggers'));
+    return (await this.fetchMappedOnboarding('triggers', statuteids));
 
   }
 
-  fetchMappedInternalControls = async () => {
+  fetchMappedInternalControls = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('internalcontrols'));
+    return (await this.fetchMappedOnboarding('internalcontrols', statuteids));
 
   }
 
-  fetchMappedReportedLocations = async () => {
+  fetchMappedReportedLocations = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('reportedlocations'));
+    return (await this.fetchMappedOnboarding('reportedlocations', statuteids));
 
   }
 
-  fetchMappedAlertSchedules = async () => {
+  fetchMappedAlertSchedules = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('alertschedules'));
+    return (await this.fetchMappedOnboarding('alertschedules', statuteids));
 
   }
 
-  fetchMappedActivations = async () => {
+  fetchMappedActivations = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('activations'));
+    return (await this.fetchMappedOnboarding('activations', statuteids));
 
   }
 
-  fetchMappedInvalidations = async () => {
+  fetchMappedInvalidations = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('invalidations'));
+    return (await this.fetchMappedOnboarding('invalidations', statuteids));
 
   }
 
-  fetchMappedExtensions = async () => {
+  fetchMappedExtensions = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('extensions'));
+    return (await this.fetchMappedOnboarding('extensions', statuteids));
 
   }
 
-  fetchMappedDuedates = async () => {
+  fetchMappedDuedates = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('duedates'));
+    return (await this.fetchMappedOnboarding('duedates', statuteids));
 
   }
 
-  fetchMappedReporters = async () => {
+  fetchMappedReporters = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('reporters'));
+    return (await this.fetchMappedOnboarding('reporters', statuteids));
 
   }
 
-  fetchMappedApprovers = async () => {
+  fetchMappedApprovers = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('approvers'));
+    return (await this.fetchMappedOnboarding('approvers', statuteids));
 
   }
 
-  fetchMappedFunctionHeads = async () => {
+  fetchMappedFunctionHeads = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('functionheads'));
+    return (await this.fetchMappedOnboarding('functionheads', statuteids));
 
   }
 
-  fetchMappedMakerCheckers = async () => {
+  fetchMappedMakerCheckers = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('makercheckers'));
+    return (await this.fetchMappedOnboarding('makercheckers', statuteids));
 
   }
 
-  fetchMappedDocs = async () => {
+  fetchMappedDocs = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('docs'));
+    return (await this.fetchMappedOnboarding('docs', statuteids));
 
   }
 
-  fetchMappedAuditors = async () => {
+  fetchMappedAuditors = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('auditors'));
+    return (await this.fetchMappedOnboarding('auditors', statuteids));
 
   }
 
-  fetchMappedViewers = async () => {
+  fetchMappedViewers = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('viewers'));
+    return (await this.fetchMappedOnboarding('viewers', statuteids));
 
   }
 
-  fetchMappedTags = async () => {
+  fetchMappedTags = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('tags'));
+    return (await this.fetchMappedOnboarding('tags', statuteids));
 
   }
 
-  fetchMappedLocations = async () => {
+  fetchMappedLocations = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('locations'));
+    return (await this.fetchMappedOnboarding('locations', statuteids));
 
   }
 
-  fetchMappedFunctions = async () => {
+  fetchMappedFunctions = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('functions'));
+    return (await this.fetchMappedOnboarding('functions', statuteids));
   }
 
-  fetchMappedEntities = async () => {
+  fetchMappedEntities = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('entities'));
+    return (await this.fetchMappedOnboarding('entities', statuteids));
   }
 
-  fetchMappedCountries = async () => {
+  fetchMappedCountries = async (statuteids = []) => {
 
-    return (await this.fetchMappedOnboarding('countries'));
+    return (await this.fetchMappedOnboarding('countries', statuteids));
 
   }
 
-  fetchMappedOnboarding = async (onboardingstep: string) => {
+  fetchMappedOnboarding = async (onboardingstep: string, statuteids: string[]) => {
 
-    const url = "https://" + this.apiId + "/getmappedonboarding";
+    const url = "https://" + this.apiId + "/getmappedonboarding1";
     const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
-    const xhr: any = (await this.prepareXhr({ "projectid": this.projectId, "onboardingstep": onboardingstep }, url, this._SfLoader, authorization)) as any;
+    const xhr: any = (await this.prepareXhr({ "projectid": this.projectId, "onboardingstep": onboardingstep, "statuteids": statuteids }, url, this._SfLoader, authorization)) as any;
     this._SfLoader.innerHTML = '';
     if (xhr.status == 200) {
 
@@ -30083,7 +31291,17 @@ export class SfIEvents extends LitElement {
       resultPresigned = {};
       resultPresigned.data = {};
       let tempObj = await this.fetchPresignedUrl(jsRespose.signedUrlGet)
-      resultPresigned.data.mappings = (tempObj.mappings != null) ? tempObj : { mappings: [] };
+      let tempArr = [];
+      for (let statuteid of statuteids) {
+        for (let foundObjId of Object.keys(tempObj[statuteid] ?? [])) {
+          let tempPushObj = tempObj[statuteid][foundObjId];
+          tempPushObj.id = foundObjId.split(';')[foundObjId.split(';').length - 1];
+          tempPushObj.statuteid = statuteid;
+          tempArr.push(tempPushObj);
+        }
+      }
+      // resultPresigned.data.mappings = (tempObj.mappings != null) ? tempObj : { mappings: [] };
+      resultPresigned.data.mappings = tempArr;
       console.log('resultPresigned onboarding1', tempObj);
       console.log('resultPresigned onboarding', resultPresigned);
       // await this.fetchPresignedUrlDelete(jsRespose.signedUrlDelete)
@@ -30127,7 +31345,7 @@ export class SfIEvents extends LitElement {
 
   fetchMappedStatutes = async () => {
 
-    let url = "https://" + this.apiId + "/getmappedstatutes";
+    let url = "https://" + this.apiId + "/getmappedstatutes1";
     const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
     const xhr: any = (await this.prepareXhr({ "projectid": this.projectId }, url, this._SfLoader, authorization)) as any;
     this._SfLoader.innerHTML = '';
@@ -30149,6 +31367,30 @@ export class SfIEvents extends LitElement {
 
   }
 
+  fetchMappedStatutesList = async () => {
+
+    let url = "https://" + this.apiId + "/getmappedstatuteslist";
+    const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
+    const xhr: any = (await this.prepareXhr({ "projectid": this.projectId }, url, this._SfLoader, authorization)) as any;
+    this._SfLoader.innerHTML = '';
+    if (xhr.status == 200) {
+
+      const jsonRespose = JSON.parse(xhr.responseText);
+      //console.log(jsonRespose);
+      return jsonRespose.data;
+
+    } else {
+      if (xhr.status == 401) {
+        let changeEvent = new CustomEvent('tokenExpired', { bubbles: true });
+        this.dispatchEvent(changeEvent);
+      }
+      const jsonRespose = JSON.parse(xhr.responseText);
+      this.setError(jsonRespose.error);
+
+    }
+
+  }
+
   fetchCreateRcmJob = async (complianceid: string, data: any, triggerDate: string, triggerMessage: string, projects: any) => {
 
     data.trigger = {};