sf-i-events 1.0.927 → 1.0.928

package/dev/index.html

@@ -808,7 +808,7 @@
         </div>
         
     </sf-i-events> -->
-  <sf-i-events name="Calendar" apiid="dwqyez2puoxmu.cloudfront.net/event" mode="consumer"
+  <!-- <sf-i-events name="Calendar" apiid="dwqyez2puoxmu.cloudfront.net/event" mode="consumer"
     apiidtags="dnytrdlrmxgsy.cloudfront.net/tagging" apiidstatutes="dnytrdlrmxgsy.cloudfront.net/statute"
     apiiddefinitions="dwqyez2puoxmu.cloudfront.net/definition"
     apiidreportformats="dwqyez2puoxmu.cloudfront.net/reportformat"
@@ -833,7 +833,7 @@
       <sf-i-reporting id="reporting-format" mode="view"></sf-i-reporting>
     </div>
 
-  </sf-i-events>
+  </sf-i-events> -->
   <!-- <sf-i-events name="Calendar" apiid="dwqyez2puoxmu.cloudfront.net/event" mode="consumer"
     apiidtags="dnytrdlrmxgsy.cloudfront.net/tagging" apiidstatutes="dnytrdlrmxgsy.cloudfront.net/statute"
     apiiddefinitions="dwqyez2puoxmu.cloudfront.net/definition"
@@ -873,14 +873,14 @@
     disablesignoff="yes" disableclientresponse="yes">
 
   </sf-i-events> -->
-  <!-- <sf-i-events projectid="41ab3c86-ccc0-4c0e-8e31-cd079a07a710" projectname="ABC Global" mode="onboarding"
+  <sf-i-events projectid="41ab3c86-ccc0-4c0e-8e31-cd079a07a710" projectname="ABC Global" mode="onboarding"
     locations="{&quot;India&quot;:{&quot;Maharashtra&quot;:[&quot;Pune&quot;,&quot;Mumbai&quot;],&quot;Telangana&quot;:[&quot;Telangana&quot;]},&quot;Canada&quot;:{&quot;CanadaSO&quot;:[&quot;CanadaLO&quot;]},&quot;Singapore&quot;:{&quot;SingaporeSO&quot;:[&quot;Orchard&quot;,&quot;Raffles&quot;,&quot;Robinson&quot;,&quot;Tanjong&quot;,&quot;Tras&quot;]},&quot;United Kingdom&quot;:{&quot;UnitedSO&quot;:[&quot;UnitedLO&quot;]},&quot;United States of America&quot;:{&quot;AmericaSO&quot;:[&quot;AmericaLO&quot;]}}"
     contractstartdate="1/4/2024" apiid="dwqyez2puoxmu.cloudfront.net/event" username="ninad.t@flagggrc.tech"
     apiidstatutes="dnytrdlrmxgsy.cloudfront.net/statute" apiidcompliances="dnytrdlrmxgsy.cloudfront.net/compliance"
     apiidtags="dnytrdlrmxgsy.cloudfront.net/tagging" apiidusers="dnytrdlrmxgsy.cloudfront.net/userprofile"
     disablesignoff="yes" disableclientresponse="yes">
 
-  </sf-i-events> -->
+  </sf-i-events>
   <!-- <sf-i-events id="sf-i-events-next" name="Next Compliances" apiid="dwqyez2puoxmu.cloudfront.net/event"
     apiidstatutes="dnytrdlrmxgsy.cloudfront.net/statute" apiidcompliances="dnytrdlrmxgsy.cloudfront.net/compliance"
     apiidreportformats="dwqyez2puoxmu.cloudfront.net/reportformat"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sf-i-events",
   "private": false,
-  "version": "1.0.927",
+  "version": "1.0.928",
   "description": "Superflows Navigation Component",
   "main": "sf-i-events.js",
   "module": "sf-i-events.js",

package/sf-i-events.d.ts

@@ -72,6 +72,7 @@ export declare class SfIEvents extends LitElement {
     TAB_FUNCTIONS: string;
     TAB_COUNTRIES: string;
     TAB_CALENDAR: string;
+    TAB_SUSPENSE: string;
     TAB_RCM_COMPLIANCES: string;
     TAB_RCM_PROJECTS: string;
     TAB_RCM_DATE: string;
@@ -270,7 +271,7 @@ export declare class SfIEvents extends LitElement {
     locationPartStatusData: any;
     locationLateStatusData: any;
     locationComplianceStatusData: any;
-    suspenseCount: Number;
+    suspenseCount: number;
     selectedItemIds: Array<string>;
     selectedItems: Array<any>;
     selectedStatus: string;
@@ -402,6 +403,7 @@ export declare class SfIEvents extends LitElement {
     _SfOnboardingSignoffContainer: any;
     _SfOnboardingCalendarListContainer: any;
     _SfOnboardingCalendarContainer: any;
+    _SfOnboardingSuspenseContainer: any;
     _SfOnboardingTabGroup0: any;
     _SfOnboardingTabGroup1: any;
     _SfOnboardingTabGroup2: any;
@@ -572,6 +574,7 @@ export declare class SfIEvents extends LitElement {
     loadOnboardingReportedLocations: () => Promise<void>;
     loadOnboardingSignoff: () => Promise<void>;
     loadOnboardingCalendar: () => Promise<void>;
+    loadOnboardingSuspense: () => Promise<void>;
     calculateStartAndEndDateOfPast: (index?: number) => {
         startDate: string;
         endDate: string;
@@ -598,6 +601,7 @@ export declare class SfIEvents extends LitElement {
     attachTimelineFilterHandlers: (divContainer: HTMLDivElement) => void;
     getFinancialYear: (mmddyyyy: string) => string;
     getYearFromMonthBetween: (startDateStr: string, endDateStr: string, monthStr: string) => string;
+    getCurrentYearGeneric: () => string;
     getCurrentYear: (mm: string) => string;
     clearButtonSelection: () => void;
     clearGraphData: () => void;
@@ -651,6 +655,7 @@ export declare class SfIEvents extends LitElement {
     refreshCalendar: () => Promise<void>;
     renderNewOnboarding: () => void;
     renderOnboardingSignoff: (signoff: any) => void;
+    renderOnboardingSuspense: (_suspenseList: any) => void;
     renderOnboardingCalendar: (_calendarJobs: any) => void;
     renderOnboardingTriggers: (mappedTriggers: any, mappedSerializedAlertSchedules: any, triggersJobs: any) => void;
     renderOnboardingInternalControls: (mappedInternalControls: any, mappedSerializedTriggers: any, internalcontrolsJobs: any) => void;
@@ -832,6 +837,8 @@ export declare class SfIEvents extends LitElement {
     fetchRcmNotifications: (projectid: string) => Promise<any>;
     fetchRcmJobs: (complianceid: string) => Promise<any>;
     fetchCalendarJobs: () => Promise<any>;
+    deleteFromSuspense: (suspenseKey: any, year: string) => Promise<any>;
+    fetchSuspenseList: () => Promise<any>;
     fetchDetail: (value: any) => Promise<void>;
     fetchGetMappedCalendar: (year: string) => Promise<any>;
     sleepFunction: (ms: number) => Promise<unknown>;

package/sf-i-events.js

@@ -92,6 +92,7 @@ let SfIEvents = class SfIEvents extends LitElement {
         this.TAB_FUNCTIONS = "functions";
         this.TAB_COUNTRIES = "countries";
         this.TAB_CALENDAR = "calendar";
+        this.TAB_SUSPENSE = "suspense";
         this.TAB_RCM_COMPLIANCES = "compliances";
         this.TAB_RCM_PROJECTS = "projects";
         this.TAB_RCM_DATE = "date";
@@ -2403,7 +2404,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '<div part="badge-dashboard" id="chip-completeness-1" class="chip stat-completeness d-flex justify-center align-center mr-10 mb-10 no-shrink"><span class="material-symbols-outlined color-pending">pending</span>&nbsp;&nbsp;<span>Pending Approval:</span>&nbsp;<span id="graph-pending-approval">DASHBOARD_PENDING_APPROVAL</span></div>';
             html += '<div part="badge-dashboard" id="chip-completeness-2" class="chip stat-completeness d-flex justify-center align-center mr-10 mb-10 no-shrink"><span class="material-symbols-outlined color-rejected">block</span>&nbsp;&nbsp;<span>Rejected:</span>&nbsp;<span id="graph-rejected">DASHBOARD_REJECTED</span></div>';
             html += '<div part="badge-dashboard" id="chip-completeness-3" class="chip stat-completeness d-flex justify-center align-center mr-10 mb-10 no-shrink"><span class="material-symbols-outlined color-done">check_circle</span>&nbsp;&nbsp;<span>Approved:</span>&nbsp;<span id="graph-approved">DASHBOARD_APPROVED</span></div>';
-            html += '<div part="badge-dashboard" class="mr-10 mb-10 no-shrink"><span>Suspense:</span>&nbsp;<span id="graph-total">DASHBOARD_SUSPENSE</span></div>';
+            html += '<div part="badge-dashboard" class="mr-10 mb-10 no-shrink DASHBOARD_SUSPENSE_CLASS"><span>Suspense:</span>&nbsp;<span id="graph-total">DASHBOARD_SUSPENSE</span></div>';
             html += '<div part="badge-dashboard" id="chip-timeliness-0" class="chip stat-timeliness justify-center align-center mr-10 mb-10 no-shrink late-statuses"><span class="material-icons color-in-time">schedule</span>&nbsp;&nbsp;<span>In Time:</span>&nbsp;<span id="graph-in-time">DASHBOARD_IN_TIME</span></div>';
             html += '<div part="badge-dashboard" id="chip-timeliness-1" class="chip stat-timeliness justify-center align-center mr-10 mb-10 no-shrink late-statuses"><span class="material-icons color-past-due-date">timer</span>&nbsp;&nbsp;<span>Past Due Date:</span>&nbsp;<span id="graph-past-due-date">DASHBOARD_PAST_DUE_DATE</span></div>';
             html += '<div part="badge-dashboard" id="chip-timeliness-2" class="chip stat-timeliness justify-center align-center mr-10 mb-10 no-shrink late-statuses"><span class="material-icons color-late-reported">report_off</span>&nbsp;&nbsp;<span>Late Reported:</span>&nbsp;<span id="graph-late-reported">DASHBOARD_LATE_REPORTED</span></div>';
@@ -3279,6 +3280,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             //console.log('renderevents htmlcols', this.htmlDataCompliances);
             //console.log('progress', this.period, total, notStarted, approved)
             html = html.replace("DASHBOARD_TOTAL", total + "");
+            html = html.replace("DASHBOARD_SUSPENSE_CLASS", (this.suspenseCount > 0) ? "" : " hide");
             html = html.replace("DASHBOARD_SUSPENSE", this.suspenseCount + "");
             html = html.replace("DASHBOARD_NOT_STARTED", notStarted + "");
             html = html.replace("DASHBOARD_APPROVED", approved + "");
@@ -6766,6 +6768,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             this._SfOnboardingReportedLocationsContainer.style.display = 'none';
             this._SfOnboardingSignoffContainer.style.display = 'none';
             this._SfOnboardingCalendarContainer.style.display = 'none';
+            this._SfOnboardingSuspenseContainer.style.display = 'none';
             this._SfOnboardingStatutesContainer.innerHTML = '';
             this._SfOnboardingCompliancesContainer.innerHTML = '';
             this._SfOnboardingCountriesContainer.innerHTML = '';
@@ -6790,6 +6793,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             this._SfOnboardingReportedLocationsContainer.innerHTML = '';
             this._SfOnboardingSignoffContainer.innerHTML = '';
             this._SfOnboardingCalendarContainer.innerHTML = '';
+            this._SfOnboardingSuspenseContainer.innerHTML = '';
         };
         this.hideRcmTabContainers = async () => {
             this._SfRcmComplianceContainer.style.display = 'none';
@@ -7212,6 +7216,13 @@ let SfIEvents = class SfIEvents extends LitElement {
             const calendarJobs = await this.fetchCalendarJobs();
             this.renderOnboardingCalendar(calendarJobs);
         };
+        this.loadOnboardingSuspense = async () => {
+            this.hideTabContainers();
+            this._SfOnboardingSuspenseContainer.style.display = 'flex';
+            const suspenseList = await this.fetchSuspenseList();
+            console.log('suspenseList', suspenseList);
+            this.renderOnboardingSuspense(suspenseList);
+        };
         this.calculateStartAndEndDateOfPast = (index = 0) => {
             //console.log('calculating start and end of past');
             let block = 10;
@@ -9436,6 +9447,12 @@ let SfIEvents = class SfIEvents extends LitElement {
             // If no matching month found in the range
             return this.calendarStartYYYY;
         };
+        this.getCurrentYearGeneric = () => {
+            if (new Date().getMonth() >= 3) {
+                return new Date().getFullYear() + "";
+            }
+            return (new Date().getFullYear() - 1) + "";
+        };
         this.getCurrentYear = (mm) => {
             // var currMonth = new Date().getMonth() + 1;
             // // if(parseInt(mm) < parseInt(this.calendarStartMM) && currMonth < parseInt(this.calendarStartMM)) {
@@ -13760,7 +13777,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '</div>';
             if (this.myRole == this.TAB_FUNCTION_HEAD) {
                 html += '<div class="d-flex justify-end w-100">';
-                html += '<input part="input" id="feedback-suspense" class="mb-10 hide" type="checkbox"/>';
+                html += '<input id="feedback-suspense" class="mb-10 hide" type="checkbox"/>';
                 html += '<label part="input-label" id="feedback-suspense-label" class="ml-10 mb-10 hide">Move to suspense account</label>';
                 html += '</div>';
             }
@@ -14073,7 +14090,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                         mmddyyyy: mmddyyyy,
                         eventid: event.id,
                         entityid: entityId,
-                        locationid: locationId
+                        locationid: locationId,
+                        reporters: event.reporters,
+                        approvers: event.approvers,
                     });
                     // this.uploadTriggerMyEvent(
                     //   event.id + ";" + event.shortid,
@@ -16916,6 +16935,78 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this.loadOnboardingSignoff();
             });
         };
+        this.renderOnboardingSuspense = (_suspenseList) => {
+            //console.log('calendarjobs', calendarJobs);
+            var _a;
+            var html = '';
+            html += '<div id="suspense-list-container" class="pb-10 pt-10 w-100">';
+            html += '<div class="d-flex justify-center align-center w-100 mt-20 scroll-x">';
+            if (Object.keys(_suspenseList).length === 0) {
+                html += '<div part="rcm-section-title" class="d-flex mb-20"><span>No Suspense Items</span></div>';
+            }
+            else {
+                html += '<table>';
+                let tableBodyHtml = '';
+                for (var j = 0; j < Object.keys(_suspenseList).length; j++) {
+                    let uniqueKey = Object.keys(_suspenseList)[j];
+                    console.log('uniqueKey', uniqueKey);
+                    let eventid = uniqueKey.split(';')[3];
+                    let suspenseObj = _suspenseList[uniqueKey];
+                    console.log('suspenseObj', suspenseObj);
+                    tableBodyHtml += '<tr>';
+                    tableBodyHtml += ('<td class="td-body left-sticky" part="td-body-suspense"><button part="button-icon" id="button-icon-suspense-done-' + j + '" class="button-icon-suspense-done d-flex align-center"><span class="material-symbols-outlined">done</span>&nbsp;&nbsp;Done</button></td>');
+                    tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + eventid + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+                    tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + suspenseObj.mmddyyyy + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+                    tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + suspenseObj.entityname + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+                    tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + suspenseObj.locationname + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+                    let reporters = "";
+                    if (suspenseObj.reporters != null && suspenseObj.reporters.length > 0 && Array.isArray(suspenseObj.reporters)) {
+                        for (let reporter of suspenseObj.reporters) {
+                            reporters += reporter.split(';')[0];
+                            if (suspenseObj.reporters.indexOf(reporter) < suspenseObj.reporters.length - 1) {
+                                reporters += ', ';
+                            }
+                        }
+                    }
+                    tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + reporters + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+                    let approvers = "";
+                    if (suspenseObj.approvers != null && suspenseObj.approvers.length > 0 && Array.isArray(suspenseObj.approvers)) {
+                        for (let approver of suspenseObj.approvers) {
+                            approvers += approver.split(';')[0];
+                            if (suspenseObj.approvers.indexOf(approver) < suspenseObj.approvers.length - 1) {
+                                approvers += ', ';
+                            }
+                        }
+                    }
+                    tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + approvers + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+                    tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + ((_a = suspenseObj.message) !== null && _a !== void 0 ? _a : "") + '" minLength="30" lineSize="4"></sf-i-elastic-text></td>');
+                    tableBodyHtml += '</tr>';
+                }
+                html += '<thead><tr>';
+                html += '<th class="td-body" part="td-body-suspense"><span part="td-head" style="padding-left: 0px !important"></span></th>';
+                html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Complaince Id</span></th>';
+                html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Due Date</span></th>';
+                html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Entity</span></th>';
+                html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Location</span></th>';
+                html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Reporter</span></th>';
+                html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Approver</span></th>';
+                html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Message</span></th>';
+                html += '</tr></thead>';
+                html += tableBodyHtml;
+                html += '</table>';
+            }
+            html += '</div>';
+            html += '</div>';
+            this._SfOnboardingSuspenseContainer.innerHTML = html;
+            const arrButtonsDone = this._SfOnboardingSuspenseContainer.querySelectorAll('.button-icon-suspense-done');
+            for (var i = 0; i < arrButtonsDone.length; i++) {
+                arrButtonsDone[i].addEventListener('click', async (e) => {
+                    const id = e.currentTarget.id;
+                    const index = id.split("-")[4];
+                    await this.deleteFromSuspense(Object.keys(_suspenseList)[index], this.getCurrentYearGeneric());
+                });
+            }
+        };
         this.renderOnboardingCalendar = (_calendarJobs) => {
             //console.log('calendarjobs', calendarJobs);
             var _a;
@@ -17353,6 +17444,9 @@ let SfIEvents = class SfIEvents extends LitElement {
             if (this.myOnboardingTab == this.TAB_CALENDAR) {
                 this._SfOnboardingTabContainer.querySelector('#onboarding-tab-calendar').click();
             }
+            if (this.myOnboardingTab == this.TAB_SUSPENSE) {
+                this._SfOnboardingTabContainer.querySelector('#onboarding-tab-suspense').click();
+            }
         };
         this.renderOnboardingStatus = (status) => {
             for (var i = 0; i < status.length; i++) {
@@ -17444,7 +17538,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             this._SfOnboardingReportedLocationsContainer.innerHTML = '';
         };
         this.renderOnboardingTabs = async () => {
-            var _a, _b, _c, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+            var _a, _b, _c, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
             //console.log('render onboarding tabs', this.myOnboardingTabGroup);
             let initialLoad = false;
             if (this.myOnboardingTabGroup == "") {
@@ -17496,6 +17590,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             html += '<div id="onboarding-tab-group-3" class="' + (this.myOnboardingTabGroup == this.TAB_GROUP_ROLLOUT ? '' : 'hide') + ' d-flex justify-center flex-wrap sub-button">';
             html += '<button class="tab-button mb-10" id="onboarding-tab-signoff" part="' + (this.myOnboardingTab == this.TAB_SIGNOFF ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected') + '">Sign Off<br /><span id="button-status-signoff" class="d-flex button-status align-center justify-center" part="button-status">...</span></button>';
             html += '<button class="tab-button mb-10" id="onboarding-tab-calendar" part="' + (this.myOnboardingTab == this.TAB_CALENDAR ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected') + '">Calendar<br /><span id="button-status-calendar" class="d-flex button-status align-center justify-center" part="button-status">...</span></button>';
+            html += '<button class="tab-button mb-10" id="onboarding-tab-suspense" part="' + (this.myOnboardingTab == this.TAB_SUSPENSE ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected') + '">Suspense<br /><span id="button-status-suspense" class="d-flex button-status align-center justify-center" part="button-status">...</span></button>';
             html += '</div>';
             this._SfOnboardingTabContainer.innerHTML = html;
             (_a = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-statutes')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', async () => {
@@ -17618,6 +17713,12 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this.renderOnboardingTabs();
                 this.loadOnboardingCalendar();
             });
+            (_2 = this._SfOnboardingTabContainer.querySelector('#onboarding-tab-suspense')) === null || _2 === void 0 ? void 0 : _2.addEventListener('click', async () => {
+                this.myOnboardingTab = this.TAB_SUSPENSE;
+                this.renderOnboardingTabs();
+                this.loadOnboardingSuspense();
+                console.log('Suspense tab clicked');
+            });
             this._SfOnboardingTabGroupButton0.addEventListener('click', () => {
                 this.myOnboardingTabGroup = this.TAB_GROUP_BUSINESS_UNDERSTANDING;
                 this.hideTabContainers();
@@ -22512,6 +22613,52 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this.setError(jsonRespose.error);
             }
         };
+        this.deleteFromSuspense = async (suspenseKey, year) => {
+            let url = "https://" + this.apiId + "/deletefromsuspense";
+            //console.log('fetch calendar url', url);
+            let urlBody = { "projectid": this.projectId, "eventid": suspenseKey.split(';')[3], "entityid": suspenseKey.split(';')[1], "locationid": suspenseKey.split(';')[2], "mmddyyyy": suspenseKey.split(';')[0], "year": year };
+            //console.log('urlbody', urlBody);
+            const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
+            const xhr = (await this.prepareXhr(urlBody, url, this._SfLoader, authorization, 'Preparing'));
+            this._SfLoader.innerHTML = '';
+            if (xhr.status == 200) {
+                const jsonResponse = JSON.parse(xhr.responseText);
+                console.log('jsonResponse', jsonResponse);
+                return jsonResponse;
+            }
+            else {
+                if (xhr.status == 401) {
+                    let changeEvent = new CustomEvent('tokenExpired', { bubbles: true });
+                    this.dispatchEvent(changeEvent);
+                }
+                else {
+                    const jsonRespose = JSON.parse(xhr.responseText);
+                    this.setError(jsonRespose.error);
+                }
+            }
+        };
+        this.fetchSuspenseList = async () => {
+            let url = "https://" + this.apiId + "/getsuspenselist";
+            const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
+            const year = this.getCurrentYearGeneric();
+            const xhr = (await this.prepareXhr({ "projectid": this.projectId, "year": year }, url, this._SfLoader, authorization));
+            this._SfLoader.innerHTML = '';
+            if (xhr.status == 200) {
+                const jsonRespose = JSON.parse(xhr.responseText);
+                //console.log(jsonRespose);
+                let retData = await this.fetchPresignedUrl(jsonRespose.signedUrlGet);
+                await this.fetchPresignedUrlDelete(jsonRespose.signedUrlDelete);
+                return retData !== null && retData !== void 0 ? retData : {};
+            }
+            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);
+            }
+        };
         this.fetchDetail = async (value) => {
             const body = this.getApiBodyList();
             body.id = value;
@@ -22648,6 +22795,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             let path = "", view = "";
             this.sdate = startDate;
             this.edate = endDate;
+            this.suspenseCount = 0;
             if (this.tagId != null && this.tagId != "") {
                 view = "tag";
             }
@@ -22757,6 +22905,7 @@ let SfIEvents = class SfIEvents extends LitElement {
         this.fetchOnlyYearlyUserCalendar = async (startDate = "", endDate = "", searchString = "", list = "yes", month = "00", year = this.calendarStartYYYY, userprofileid = this.userProfileId, userrole = this.myRole, entityid = this.entityId, countryid = this.countryId, locationid = this.locationId, tagid = this.tagId, functionid = this.functionId) => {
             var _a;
             let path = "", view = "";
+            this.suspenseCount = 0;
             if (tagid != null && tagid != "") {
                 view = "tag";
             }
@@ -24816,6 +24965,9 @@ let SfIEvents = class SfIEvents extends LitElement {
             </div>
             <div class="d-flex flex-grow flex-wrap justify-start align-stretch scroll-x" id="calendar-container">
               
+            </div>
+            <div class="d-flex flex-grow flex-wrap justify-start align-stretch scroll-x" id="suspense-container">
+              
             </div>
           </div>
           
@@ -26981,6 +27133,9 @@ __decorate([
 __decorate([
     query('#calendar-container')
 ], SfIEvents.prototype, "_SfOnboardingCalendarContainer", void 0);
+__decorate([
+    query('#suspense-container')
+], SfIEvents.prototype, "_SfOnboardingSuspenseContainer", void 0);
 __decorate([
     query('#onboarding-tab-group-0')
 ], SfIEvents.prototype, "_SfOnboardingTabGroup0", void 0);

package/src/sf-i-events.ts

@@ -95,6 +95,7 @@ export class SfIEvents extends LitElement {
   TAB_FUNCTIONS = "functions";
   TAB_COUNTRIES = "countries";
   TAB_CALENDAR = "calendar";
+  TAB_SUSPENSE = "suspense";
   TAB_RCM_COMPLIANCES = "compliances";
   TAB_RCM_PROJECTS = "projects";
   TAB_RCM_DATE = "date";
@@ -1618,7 +1619,7 @@ export class SfIEvents extends LitElement {
   locationComplianceStatusData: any = null;
 
   @property()
-  suspenseCount: Number = 0;
+  suspenseCount: number = 0;
 
   @property({ type: Array })
   selectedItemIds: Array<string> = [];
@@ -3062,6 +3063,9 @@ export class SfIEvents extends LitElement {
   @query('#calendar-container')
   _SfOnboardingCalendarContainer: any;
 
+  @query('#suspense-container')
+  _SfOnboardingSuspenseContainer: any;
+
   @query('#onboarding-tab-group-0')
   _SfOnboardingTabGroup0: any;
 
@@ -4581,7 +4585,7 @@ export class SfIEvents extends LitElement {
     html += '<div part="badge-dashboard" id="chip-completeness-1" class="chip stat-completeness d-flex justify-center align-center mr-10 mb-10 no-shrink"><span class="material-symbols-outlined color-pending">pending</span>&nbsp;&nbsp;<span>Pending Approval:</span>&nbsp;<span id="graph-pending-approval">DASHBOARD_PENDING_APPROVAL</span></div>';
     html += '<div part="badge-dashboard" id="chip-completeness-2" class="chip stat-completeness d-flex justify-center align-center mr-10 mb-10 no-shrink"><span class="material-symbols-outlined color-rejected">block</span>&nbsp;&nbsp;<span>Rejected:</span>&nbsp;<span id="graph-rejected">DASHBOARD_REJECTED</span></div>';
     html += '<div part="badge-dashboard" id="chip-completeness-3" class="chip stat-completeness d-flex justify-center align-center mr-10 mb-10 no-shrink"><span class="material-symbols-outlined color-done">check_circle</span>&nbsp;&nbsp;<span>Approved:</span>&nbsp;<span id="graph-approved">DASHBOARD_APPROVED</span></div>';
-    html += '<div part="badge-dashboard" class="mr-10 mb-10 no-shrink"><span>Suspense:</span>&nbsp;<span id="graph-total">DASHBOARD_SUSPENSE</span></div>';
+    html += '<div part="badge-dashboard" class="mr-10 mb-10 no-shrink DASHBOARD_SUSPENSE_CLASS"><span>Suspense:</span>&nbsp;<span id="graph-total">DASHBOARD_SUSPENSE</span></div>';
 
     html += '<div part="badge-dashboard" id="chip-timeliness-0" class="chip stat-timeliness justify-center align-center mr-10 mb-10 no-shrink late-statuses"><span class="material-icons color-in-time">schedule</span>&nbsp;&nbsp;<span>In Time:</span>&nbsp;<span id="graph-in-time">DASHBOARD_IN_TIME</span></div>';
     html += '<div part="badge-dashboard" id="chip-timeliness-1" class="chip stat-timeliness justify-center align-center mr-10 mb-10 no-shrink late-statuses"><span class="material-icons color-past-due-date">timer</span>&nbsp;&nbsp;<span>Past Due Date:</span>&nbsp;<span id="graph-past-due-date">DASHBOARD_PAST_DUE_DATE</span></div>';
@@ -5573,6 +5577,7 @@ export class SfIEvents extends LitElement {
     //console.log('progress', this.period, total, notStarted, approved)
 
     html = html.replace("DASHBOARD_TOTAL", total + "");
+    html = html.replace("DASHBOARD_SUSPENSE_CLASS", (this.suspenseCount > 0) ? "" : " hide");
     html = html.replace("DASHBOARD_SUSPENSE", this.suspenseCount + "");
     html = html.replace("DASHBOARD_NOT_STARTED", notStarted + "");
     html = html.replace("DASHBOARD_APPROVED", approved + "");
@@ -9521,6 +9526,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingReportedLocationsContainer as HTMLDivElement).style.display = 'none';
     (this._SfOnboardingSignoffContainer as HTMLDivElement).style.display = 'none';
     (this._SfOnboardingCalendarContainer as HTMLDivElement).style.display = 'none';
+    (this._SfOnboardingSuspenseContainer as HTMLDivElement).style.display = 'none';
 
     (this._SfOnboardingStatutesContainer as HTMLDivElement).innerHTML = '';
     (this._SfOnboardingCompliancesContainer as HTMLDivElement).innerHTML = '';
@@ -9546,6 +9552,7 @@ export class SfIEvents extends LitElement {
     (this._SfOnboardingReportedLocationsContainer as HTMLDivElement).innerHTML = '';
     (this._SfOnboardingSignoffContainer as HTMLDivElement).innerHTML = '';
     (this._SfOnboardingCalendarContainer as HTMLDivElement).innerHTML = '';
+    (this._SfOnboardingSuspenseContainer as HTMLDivElement).innerHTML = '';
 
   }
 
@@ -10058,6 +10065,14 @@ export class SfIEvents extends LitElement {
     this.renderOnboardingCalendar(calendarJobs);
   }
 
+  loadOnboardingSuspense = async () => {
+    this.hideTabContainers();
+    (this._SfOnboardingSuspenseContainer as HTMLDivElement).style.display = 'flex';
+    const suspenseList = await this.fetchSuspenseList();
+    console.log('suspenseList', suspenseList);
+    this.renderOnboardingSuspense(suspenseList);
+  }
+
   calculateStartAndEndDateOfPast = (index: number = 0) => {
 
     //console.log('calculating start and end of past');
@@ -12749,6 +12764,12 @@ export class SfIEvents extends LitElement {
     return this.calendarStartYYYY;
   }
 
+  getCurrentYearGeneric = () => {
+    if (new Date().getMonth() >= 3) {
+      return new Date().getFullYear() + ""
+    }
+    return (new Date().getFullYear() - 1) + ""
+  }
 
   getCurrentYear = (mm: string) => {
 
@@ -17771,9 +17792,9 @@ export class SfIEvents extends LitElement {
     html += '<div class="d-flex justify-end w-100 mb-10">'
     html += '<textarea part="input" id="feedback-message" class="w-100 mt-10 mb-10 hide" placeholder="Type your feedback message here..."></textarea>'
     html += '</div>'
-    if(this.myRole == this.TAB_FUNCTION_HEAD) {
+    if (this.myRole == this.TAB_FUNCTION_HEAD) {
       html += '<div class="d-flex justify-end w-100">'
-      html += '<input part="input" id="feedback-suspense" class="mb-10 hide" type="checkbox"/>'
+      html += '<input id="feedback-suspense" class="mb-10 hide" type="checkbox"/>'
       html += '<label part="input-label" id="feedback-suspense-label" class="ml-10 mb-10 hide">Move to suspense account</label>'
       html += '</div>'
     }
@@ -18137,7 +18158,7 @@ export class SfIEvents extends LitElement {
       } else {
         feedbackMessage.setAttribute('style', 'border:');
         let feedbackSuspenseVal = false
-        if(feedbackSuspense != null && feedbackSuspense.checked){
+        if (feedbackSuspense != null && feedbackSuspense.checked) {
           feedbackSuspenseVal = true
         }
         this.uploadTriggerMyEvent(
@@ -18153,7 +18174,9 @@ export class SfIEvents extends LitElement {
             mmddyyyy: mmddyyyy,
             eventid: event.id,
             entityid: entityId,
-            locationid: locationId
+            locationid: locationId,
+            reporters: event.reporters,
+            approvers: event.approvers,
           }
         );
         // this.uploadTriggerMyEvent(
@@ -21698,6 +21721,91 @@ export class SfIEvents extends LitElement {
 
   }
 
+  renderOnboardingSuspense = (_suspenseList: any) => {
+
+    //console.log('calendarjobs', calendarJobs);
+
+    var html = '';
+
+    html += '<div id="suspense-list-container" class="pb-10 pt-10 w-100">';
+
+
+
+    html += '<div class="d-flex justify-center align-center w-100 mt-20 scroll-x">';
+    if (Object.keys(_suspenseList).length === 0) {
+      html += '<div part="rcm-section-title" class="d-flex mb-20"><span>No Suspense Items</span></div>';
+    } else {
+      html += '<table>';
+      let tableBodyHtml = ''
+      for (var j = 0; j < Object.keys(_suspenseList).length; j++) {
+
+        let uniqueKey = Object.keys(_suspenseList)[j];
+        console.log('uniqueKey', uniqueKey);
+        let eventid = uniqueKey.split(';')[3];
+        let suspenseObj = _suspenseList[uniqueKey];
+        console.log('suspenseObj', suspenseObj);
+        tableBodyHtml += '<tr>';
+        tableBodyHtml += ('<td class="td-body left-sticky" part="td-body-suspense"><button part="button-icon" id="button-icon-suspense-done-' + j + '" class="button-icon-suspense-done d-flex align-center"><span class="material-symbols-outlined">done</span>&nbsp;&nbsp;Done</button></td>');
+
+        tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + eventid + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+        tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + suspenseObj.mmddyyyy + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+        tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + suspenseObj.entityname + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+        tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + suspenseObj.locationname + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+        let reporters = ""
+        if (suspenseObj.reporters != null && suspenseObj.reporters.length > 0 && Array.isArray(suspenseObj.reporters)) {
+          for (let reporter of suspenseObj.reporters) {
+            reporters += reporter.split(';')[0]
+            if (suspenseObj.reporters.indexOf(reporter) < suspenseObj.reporters.length - 1) {
+              reporters += ', '
+            }
+          }
+        }
+        tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + reporters + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+        let approvers = ""
+        if (suspenseObj.approvers != null && suspenseObj.approvers.length > 0 && Array.isArray(suspenseObj.approvers)) {
+          for (let approver of suspenseObj.approvers) {
+            approvers += approver.split(';')[0]
+            if (suspenseObj.approvers.indexOf(approver) < suspenseObj.approvers.length - 1) {
+              approvers += ', '
+            }
+          }
+        }
+        tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + approvers + '" minLength="10" lineSize="4"></sf-i-elastic-text></td>');
+        tableBodyHtml += ('<td class="td-body" part="td-body-suspense"><sf-i-elastic-text exportparts="highlight,highlight-count" text="' + (suspenseObj.message ?? "") + '" minLength="30" lineSize="4"></sf-i-elastic-text></td>');
+        tableBodyHtml += '</tr>';
+      }
+      html += '<thead><tr>';
+      html += '<th class="td-body" part="td-body-suspense"><span part="td-head" style="padding-left: 0px !important"></span></th>'
+
+
+      html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Complaince Id</span></th>'
+      html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Due Date</span></th>'
+      html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Entity</span></th>'
+      html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Location</span></th>'
+      html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Reporter</span></th>'
+      html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Approver</span></th>'
+      html += '<th class="td-body" part="td-body-suspense"><div class="d-flex align-start"><span part="td-head">Message</span></th>'
+
+      html += '</tr></thead>';
+      html += tableBodyHtml;
+      html += '</table>';
+    }
+    html += '</div>';
+
+    html += '</div>';
+
+    (this._SfOnboardingSuspenseContainer as HTMLDivElement).innerHTML = html;
+
+    const arrButtonsDone = (this._SfOnboardingSuspenseContainer as HTMLDivElement).querySelectorAll('.button-icon-suspense-done') as NodeListOf<HTMLInputElement>;
+    for (var i = 0; i < arrButtonsDone.length; i++) {
+      arrButtonsDone[i].addEventListener('click', async (e: any) => {
+        const id = e.currentTarget.id;
+        const index = id.split("-")[4];
+        await this.deleteFromSuspense(Object.keys(_suspenseList)[index], this.getCurrentYearGeneric());
+      });
+    }
+  }
+
   renderOnboardingCalendar = (_calendarJobs: any) => {
 
     //console.log('calendarjobs', calendarJobs);
@@ -22336,6 +22444,9 @@ export class SfIEvents extends LitElement {
     if (this.myOnboardingTab == this.TAB_CALENDAR) {
       ((this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-calendar') as HTMLButtonElement).click();
     }
+    if (this.myOnboardingTab == this.TAB_SUSPENSE) {
+      ((this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-suspense') as HTMLButtonElement).click();
+    }
 
   }
 
@@ -22501,6 +22612,7 @@ export class SfIEvents extends LitElement {
     html += '<div id="onboarding-tab-group-3" class="' + (this.myOnboardingTabGroup == this.TAB_GROUP_ROLLOUT ? '' : 'hide') + ' d-flex justify-center flex-wrap sub-button">';
     html += '<button class="tab-button mb-10" id="onboarding-tab-signoff" part="' + (this.myOnboardingTab == this.TAB_SIGNOFF ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected') + '">Sign Off<br /><span id="button-status-signoff" class="d-flex button-status align-center justify-center" part="button-status">...</span></button>';
     html += '<button class="tab-button mb-10" id="onboarding-tab-calendar" part="' + (this.myOnboardingTab == this.TAB_CALENDAR ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected') + '">Calendar<br /><span id="button-status-calendar" class="d-flex button-status align-center justify-center" part="button-status">...</span></button>';
+    html += '<button class="tab-button mb-10" id="onboarding-tab-suspense" part="' + (this.myOnboardingTab == this.TAB_SUSPENSE ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected') + '">Suspense<br /><span id="button-status-suspense" class="d-flex button-status align-center justify-center" part="button-status">...</span></button>';
     html += '</div>';
 
     (this._SfOnboardingTabContainer as HTMLDivElement).innerHTML = html;
@@ -22697,6 +22809,15 @@ export class SfIEvents extends LitElement {
 
     });
 
+    (this._SfOnboardingTabContainer as HTMLDivElement).querySelector('#onboarding-tab-suspense')?.addEventListener('click', async () => {
+
+      this.myOnboardingTab = this.TAB_SUSPENSE;
+      this.renderOnboardingTabs();
+      this.loadOnboardingSuspense();
+      console.log('Suspense tab clicked')
+
+    });
+
     (this._SfOnboardingTabGroupButton0 as HTMLDivElement).addEventListener('click', () => {
 
       this.myOnboardingTabGroup = this.TAB_GROUP_BUSINESS_UNDERSTANDING;
@@ -28714,6 +28835,61 @@ export class SfIEvents extends LitElement {
 
   }
 
+  deleteFromSuspense = async (suspenseKey: any, year: string) => {
+    let url = "https://" + this.apiId + "/deletefromsuspense";
+
+    //console.log('fetch calendar url', url);
+    let urlBody: any = { "projectid": this.projectId, "eventid": suspenseKey.split(';')[3], "entityid": suspenseKey.split(';')[1], "locationid": suspenseKey.split(';')[2], "mmddyyyy": suspenseKey.split(';')[0], "year": year };
+
+    //console.log('urlbody', urlBody);
+
+    const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
+    const xhr: any = (await this.prepareXhr(urlBody, url, this._SfLoader, authorization, 'Preparing')) as any;
+    this._SfLoader.innerHTML = '';
+    if (xhr.status == 200) {
+
+      const jsonResponse = JSON.parse(xhr.responseText);
+      console.log('jsonResponse', jsonResponse);
+      return jsonResponse;
+    } else {
+      if (xhr.status == 401) {
+        let changeEvent = new CustomEvent('tokenExpired', { bubbles: true });
+        this.dispatchEvent(changeEvent);
+      } else {
+        const jsonRespose = JSON.parse(xhr.responseText);
+        this.setError(jsonRespose.error);
+      }
+
+    }
+  }
+
+  fetchSuspenseList = async () => {
+
+    let url = "https://" + this.apiId + "/getsuspenselist";
+    const authorization = btoa(Util.readCookie('email') + ":" + Util.readCookie('accessToken'));
+    const year = this.getCurrentYearGeneric();
+    const xhr: any = (await this.prepareXhr({ "projectid": this.projectId, "year": year }, url, this._SfLoader, authorization)) as any;
+    this._SfLoader.innerHTML = '';
+    if (xhr.status == 200) {
+
+      const jsonRespose = JSON.parse(xhr.responseText);
+      //console.log(jsonRespose);
+      let retData = await this.fetchPresignedUrl(jsonRespose.signedUrlGet);
+      await this.fetchPresignedUrlDelete(jsonRespose.signedUrlDelete)
+      return retData ?? {};
+
+    } 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);
+
+    }
+
+  }
+
   fetchDetail = async (value: any) => {
 
     const body: any = this.getApiBodyList();
@@ -28871,6 +29047,7 @@ export class SfIEvents extends LitElement {
     let path = "", view = "";
     this.sdate = startDate;
     this.edate = endDate;
+    this.suspenseCount = 0;
     if (this.tagId != null && this.tagId != "") {
       view = "tag";
     } else if (this.countryId != null && this.countryId != "") {
@@ -29012,6 +29189,7 @@ export class SfIEvents extends LitElement {
   fetchOnlyYearlyUserCalendar = async (startDate: string = "", endDate: string = "", searchString: string = "", list: string = "yes", month: string = "00", year: string = this.calendarStartYYYY, userprofileid: string = this.userProfileId, userrole: string = this.myRole, entityid = this.entityId, countryid = this.countryId, locationid = this.locationId, tagid = this.tagId, functionid = this.functionId) => {
 
     let path = "", view = "";
+    this.suspenseCount = 0;
     if (tagid != null && tagid != "") {
       view = "tag";
     } else if (countryid != null && countryid != "") {
@@ -31332,6 +31510,9 @@ export class SfIEvents extends LitElement {
             </div>
             <div class="d-flex flex-grow flex-wrap justify-start align-stretch scroll-x" id="calendar-container">
               
+            </div>
+            <div class="d-flex flex-grow flex-wrap justify-start align-stretch scroll-x" id="suspense-container">
+              
             </div>
           </div>