sf-i-events 1.0.937 → 1.0.938

package/src/sf-i-events.ts

@@ -1691,6 +1691,8 @@ export class SfIEvents extends LitElement {
 
   registerFilters: { [key: string]: { [key: string]: boolean } } = {};
 
+  suspenseFlag: boolean = false;
+
   tablecols: string[] = []
   static override styles = css`
 
@@ -4589,7 +4591,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 d-flex align-center no-shrink DASHBOARD_SUSPENSE_CLASS"><span class="material-symbols-outlined color-not-started">question_mark</span>&nbsp;&nbsp;<span>Suspense:</span>&nbsp;<span id="graph-total">DASHBOARD_SUSPENSE</span></div>';
+    html += `<div part="${this.suspenseFlag ? "badge-dashboard-selected" : "badge-dashboard-not-selected"}" id="chip-suspense" class="mr-10 mb-10 d-flex align-center no-shrink DASHBOARD_SUSPENSE_CLASS"><span class="material-symbols-outlined color-not-started">question_mark</span>&nbsp;&nbsp;<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>';
@@ -4799,11 +4801,14 @@ export class SfIEvents extends LitElement {
     const eventIdSanitized = event.id.replace(/-/g, '_');
     const mmddSanitized = mmdd.replace(/\//g, '-');
     const dueDateParts = event.duedate.split('/');
-    const isReportedLocation = event.reportedlocationsflag == true
+    const isReportedLocation = event.reportedlocationsflag == true 
+    const isSuspense = event.suspense == true 
+    const isReviewed = event.review == true 
     const showCheckbox = !(hasReportFormat || isBulk || hasCustomReporting || isReportedLocation);
     // const showReportingButton = !hasReportFormat && !hasCustomReporting && event.reporters == null;
     const showReportingButton = !hasReportFormat && !hasCustomReporting && event.concise != null && !isReportedLocation;
     const showLocationRisk = event.concise != null;
+    const showReview = event.concise != null;
     const showLastUpdated = event.concise == null && lastUpdated.length > 0;
     // console.log('showReportingButton', showReportingButton)
     console.log('isReportedLocation', isReportedLocation, 'showCheckbox', showCheckbox, 'showReportingButton', showReportingButton, 'showLocationRisk', showLocationRisk, 'showLastUpdated', showLastUpdated);
@@ -4815,7 +4820,7 @@ export class SfIEvents extends LitElement {
           type="checkbox"
         />
         ${isBulk ? '<div class="lds-dual-ring1 bulk-loader mr-10"></div>' : ''}
-        ${isReportedLocation ? '<div class="material-symbols-outlined mr-10">arrow_or_edge</div>' : ''}
+        ${(isReportedLocation && !isSuspense) ? '<div class="material-symbols-outlined mr-10">arrow_or_edge</div>' : ''}
         <sf-i-elastic-text exportparts="highlight,highlight-count" 
           class="stream-event-title${!isBulk ? ' button-event-title' : ''}" 
           id="stream-event-title-${mmddSanitized}-${itemNumber}-${moduleType}-${(isReportedLocation) ? 'reportedlocations' : ''}" 
@@ -4838,6 +4843,16 @@ export class SfIEvents extends LitElement {
             edit_note
           </button>
         ` : ''}
+        ${showReview ? `
+          <input 
+            type="checkbox"
+            id="input-checkbox-review-${mmddSanitized}-${itemNumber}" 
+            part="input-checkbox" 
+            class="material-icons ml-10 input-checkbox-review"
+            ${isReviewed ? 'checked' : ''}
+          />
+          <label for="input-checkbox-review-${mmddSanitized}-${itemNumber}" part="label-checkbox" class="label-checkbox">${isReviewed ? 'Reviewed' : 'Review'}</label>
+        ` : ''}
         ${showLastUpdated ? `
           &nbsp;&nbsp;<div part="event-last-updated-time" class="d-flex align-center">
             ${lastUpdated}
@@ -5172,9 +5187,9 @@ export class SfIEvents extends LitElement {
 
     let graphParam = this.getGraphParam(event);
     // console.log("graphParam", graphParam.split(';')[0]);
-    html += '<div class="d-flex align-center event-user-labels-container"><div part="badge-filter-name" class="graphparamname graphparamname1 mb-20' + (event.concise == null ? "" : ' hide') + '">' + graphParam.split(';')[0] + '</div>' + reporterStr + approverStr + ((event.concise == null && ((event.reportformat == null || event.reportformat.length == 0) && (event.customreporting == null) && (event.reportedlocationsflag != true))) ? ('<button id="button-list-reporting-' + mmdd.replace('/', '-') + '-' + j + '-" part="button-list-reporting" class="material-icons ml-10 mb-20 button-list-reporting">edit_note</button>') : '') + '</div>';
+    html += '<div class="d-flex align-center event-user-labels-container"><div part="badge-filter-name" class="graphparamname graphparamname1 mb-20' + (event.concise == null ? "" : ' hide') + '">' + graphParam.split(';')[0] + '</div>' + reporterStr + approverStr + ((event.concise == null && ((event.reportformat == null || event.reportformat.length == 0) && (event.customreporting == null) && (event.reportedlocationsflag != true))) ? ('<button id="button-list-reporting-' + mmdd.replace('/', '-') + '-' + j + '-" part="button-list-reporting" class="material-icons ml-10 mb-20 button-list-reporting">edit_note</button>') : '') + ((event.module == "compliances" || event.module == null) ? ('<input type="checkbox" id="input-checkbox-review-' + mmdd.replace('/', '-') + '-' + j + '" part="input-checkbox" class="material-icons mb-20 ml-10 input-checkbox-review"' + (event.review ? 'checked' : '') + '/><label for="input-checkbox-review-' + mmdd.replace('/', '-') + '-' + j + '" part="label-checkbox" class="label-checkbox mb-20">' + (event.review ? 'Reviewed' : 'Review') + '</label></div>') : '</div>');
     // }
-
+    
     return html;
 
   }
@@ -6241,7 +6256,7 @@ export class SfIEvents extends LitElement {
         dateOfCompletion = "";
       }
       console.log('dateOfCompletion', dateOfCompletion)
-      await this.fetchEventDetails(event, mmddyyyy, null, eventsContainer, true, listReportingContainer, reportercomments, approvercomments, inputReportingPercentage, selectReportedLocation, documents, dateOfCompletion);
+      await this.fetchEventDetails(event, mmddyyyy, null, eventsContainer, "", "", true, listReportingContainer, reportercomments, approvercomments, inputReportingPercentage, selectReportedLocation, documents, dateOfCompletion);
     })
     if (this.mode == "consumer" || this.mode == "next") {
       let inputReportingPercentage = listReportingContainer.querySelector('#input-reporter-percentage') as HTMLInputElement;
@@ -7048,6 +7063,25 @@ export class SfIEvents extends LitElement {
       })
     }
   }
+
+  attachReviewListeners = (eventsContainer: HTMLDivElement) => {
+    let inputReviews = eventsContainer.querySelectorAll('.input-checkbox-review') as NodeListOf<HTMLInputElement>
+    for (let inputReview of inputReviews) {
+      inputReview?.addEventListener('click', async (ev: any) => {
+        const id = ev.target.id;
+        const idArr = id.split("-")
+        const mmdd = idArr[3] + "/" + idArr[4];
+        const yyyy = this.getYearFromMonthBetween(this.sdate, this.edate, idArr[3]);
+        // const i = idArr[5];
+        const j = idArr[5];
+        console.log('review clicked', mmdd, yyyy, j, this.events[mmdd][j], ev.target.checked);
+        let eventKey = this.events[mmdd][j].entityid + ';' + this.events[mmdd][j].locationid + ';' + this.events[mmdd][j].id;
+        await this.markReviewed(eventKey, yyyy, ev.target.checked);
+        const buttonRefresh = eventsContainer.querySelector('#button-refresh') as HTMLButtonElement
+        buttonRefresh.click();
+      })
+    }
+  }
   renderStreamEvents = (index: number, month: number, year: number, showGraph: boolean = true, showBackgroundButton: boolean = false) => {
 
     //console.log('flowgraph renderStreamEvents', this.flowGraph);
@@ -7224,11 +7258,18 @@ export class SfIEvents extends LitElement {
       this.processDateSelection(eventsContainer)
     })
 
+    const chipSuspense = eventsContainer.querySelector('#chip-suspense') as HTMLDivElement
+    chipSuspense?.addEventListener('click', async () => {
+      this.suspenseFlag = !this.suspenseFlag
+      this.processDateSelection(eventsContainer)
+    })
+
     this.attachListReportingListeners(eventsContainer);
+    this.attachReviewListeners(eventsContainer);
     const buttonArr = eventsContainer.querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
 
     for (var i = 0; i < buttonArr.length; i++) {
-
+      let indexPrevNext = i;
       buttonArr[i].addEventListener('click', (ev: any) => {
 
         const id = ev.target.id;
@@ -7263,7 +7304,39 @@ export class SfIEvents extends LitElement {
 
 
           // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + yyyy, null);
-          this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, null, eventsContainer);
+          let prevString = "";
+          let flagPrev = true;
+          let indexPrev = indexPrevNext
+          while (flagPrev) {
+            if (indexPrev > 0) {
+              if (Util.isVisible((buttonArr[indexPrev - 1] as HTMLButtonElement))) {
+                prevString = (buttonArr[indexPrev - 1] as HTMLButtonElement).id;
+                flagPrev = false;
+              } else {
+                prevString = "";
+                indexPrev--
+              }
+            } else {
+              flagPrev = false;
+            }
+          }
+          let nextString = "";
+          let flagNext = true;
+          let indexNext = indexPrevNext
+          while (flagNext) {
+            if (indexNext < buttonArr.length - 1) {
+              if (Util.isVisible((buttonArr[indexNext + 1] as HTMLButtonElement))) {
+                nextString = (buttonArr[indexNext + 1] as HTMLButtonElement).id;
+                flagNext = false;
+              } else {
+                nextString = "";
+                indexNext++
+              }
+            } else {
+              flagNext = false;
+            }
+          }
+          this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, null, eventsContainer, prevString, nextString);
         }
       })
 
@@ -7271,7 +7344,7 @@ export class SfIEvents extends LitElement {
     const titleArr = eventsContainer.querySelectorAll('.button-event-title') as NodeListOf<HTMLButtonElement>;
 
     for (var i = 0; i < titleArr.length; i++) {
-
+      let indexPrevNext = i;
       titleArr[i].addEventListener('click', (ev: any) => {
 
         const id = ev.target.id;
@@ -7307,7 +7380,49 @@ export class SfIEvents extends LitElement {
 
           // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
 
-
+          let prevString = "";
+          let flagPrev = true;
+          let indexPrev = indexPrevNext
+          while (flagPrev) {
+            if (indexPrev > 0) {
+              if (Util.isVisible((titleArr[indexPrev - 1] as HTMLButtonElement))) {
+                prevString = (titleArr[indexPrev - 1] as HTMLButtonElement).id;
+                let prevIdArr = prevString.split("-")
+                if ((prevIdArr[7] ?? "") == "reportedlocations") {
+                  prevString = "";
+                  indexPrev--;
+                } else {
+                  flagPrev = false;
+                }
+              } else {
+                prevString = "";
+                indexPrev--;
+              }
+            } else {
+              flagPrev = false;
+            }
+          }
+          let nextString = "";
+          let flagNext = true;
+          let indexNext = indexPrevNext
+          while (flagNext) {
+            if (indexNext < titleArr.length - 1) {
+              if (Util.isVisible((titleArr[indexNext + 1] as HTMLButtonElement))) {
+                nextString = (titleArr[indexNext + 1] as HTMLButtonElement).id;
+                let nextIdArr = nextString.split("-")
+                if ((nextIdArr[7] ?? "") == "reportedlocations") {
+                  nextString = "";
+                  indexNext++;
+                } else {
+                  flagNext = false;
+                }
+              } else {
+                indexNext++;
+              }
+            } else {
+              flagNext = false;
+            }
+          }
 
           // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + yyyy, null);
           this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, null, eventsContainer);
@@ -11826,11 +11941,23 @@ export class SfIEvents extends LitElement {
       this.renderThis(index, showGraph, showBackgroundButton);
     })
 
+    const chipSuspense = (this._SfThisContainer as HTMLDivElement).querySelector('#chip-suspense') as HTMLDivElement
+    chipSuspense?.addEventListener('click', async () => {
+      this.suspenseFlag = !this.suspenseFlag
+      this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+      this.currentColumnIndex = index + "";
+      const dateResult = this.calculateStartAndEndDateOfThis(index);
+      // await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
+      await this.renderWithFeatures(dateResult.startDate, dateResult.endDate);
+      this.renderThis(index, showGraph, showBackgroundButton);
+    })
+
     this.attachListReportingListeners(this._SfThisContainer as HTMLDivElement);
+    this.attachReviewListeners(this._SfThisContainer as HTMLDivElement);
     const buttonArr = (this._SfThisContainer as HTMLDivElement).querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
 
     for (i = 0; i < buttonArr.length; i++) {
-
+      let indexPrevNext = i;
       buttonArr[i].addEventListener('click', (ev: any) => {
 
         const id = ev.target.id;
@@ -11862,9 +11989,40 @@ export class SfIEvents extends LitElement {
           // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
 
 
-
+          let prevString = "";
+          let flagPrev = true;
+          let indexPrev = indexPrevNext
+          while (flagPrev) {
+            if (indexPrev > 0) {
+              if (Util.isVisible((buttonArr[indexPrev - 1] as HTMLButtonElement))) {
+                prevString = (buttonArr[indexPrev - 1] as HTMLButtonElement).id;
+                flagPrev = false;
+              } else {
+                prevString = "";
+                indexPrev--
+              }
+            } else {
+              flagPrev = false;
+            }
+          }
+          let nextString = "";
+          let flagNext = true;
+          let indexNext = indexPrevNext
+          while (flagNext) {
+            if (indexNext < buttonArr.length - 1) {
+              if (Util.isVisible((buttonArr[indexNext + 1] as HTMLButtonElement))) {
+                nextString = (buttonArr[indexNext + 1] as HTMLButtonElement).id;
+                flagNext = false;
+              } else {
+                nextString = "";
+                indexNext++
+              }
+            } else {
+              flagNext = false;
+            }
+          }
           // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + yyyy, (this._SfThisContainer as HTMLDivElement).querySelector('#stream-month-'+this.currentColumnIndex) as HTMLButtonElement);
-          this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, (this._SfThisContainer as HTMLDivElement).querySelector('#stream-month-' + this.currentColumnIndex) as HTMLButtonElement, this._SfThisContainer as HTMLDivElement);
+          this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, (this._SfThisContainer as HTMLDivElement).querySelector('#stream-month-' + this.currentColumnIndex) as HTMLButtonElement, this._SfThisContainer as HTMLDivElement, prevString, nextString);
         }
       })
 
@@ -11873,7 +12031,7 @@ export class SfIEvents extends LitElement {
     const titleArr = (this._SfThisContainer as HTMLDivElement).querySelectorAll('.button-event-title') as NodeListOf<HTMLButtonElement>;
 
     for (var i = 0; i < titleArr.length; i++) {
-
+      let indexPrevNext = i;
       titleArr[i].addEventListener('click', (ev: any) => {
 
         const id = ev.target.id;
@@ -11910,9 +12068,51 @@ export class SfIEvents extends LitElement {
           // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
 
 
-
+          let prevString = "";
+          let flagPrev = true;
+          let indexPrev = indexPrevNext
+          while (flagPrev) {
+            if (indexPrev > 0) {
+              if (Util.isVisible((titleArr[indexPrev - 1] as HTMLButtonElement))) {
+                prevString = (titleArr[indexPrev - 1] as HTMLButtonElement).id;
+                let prevIdArr = prevString.split("-")
+                if ((prevIdArr[7] ?? "") == "reportedlocations") {
+                  prevString = "";
+                  indexPrev--;
+                } else {
+                  flagPrev = false;
+                }
+              } else {
+                prevString = "";
+                indexPrev--;
+              }
+            } else {
+              flagPrev = false;
+            }
+          }
+          let nextString = "";
+          let flagNext = true;
+          let indexNext = indexPrevNext
+          while (flagNext) {
+            if (indexNext < titleArr.length - 1) {
+              if (Util.isVisible((titleArr[indexNext + 1] as HTMLButtonElement))) {
+                nextString = (titleArr[indexNext + 1] as HTMLButtonElement).id;
+                let nextIdArr = nextString.split("-")
+                if ((nextIdArr[7] ?? "") == "reportedlocations") {
+                  nextString = "";
+                  indexNext++;
+                } else {
+                  flagNext = false;
+                }
+              } else {
+                indexNext++;
+              }
+            } else {
+              flagNext = false;
+            }
+          }
           // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + yyyy, null);
-          this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, null, (this._SfThisContainer as HTMLDivElement));
+          this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, null, (this._SfThisContainer as HTMLDivElement), prevString, nextString);
         }
       })
 
@@ -12447,13 +12647,29 @@ export class SfIEvents extends LitElement {
       this.renderStream(index, showGraph, showBackgroundButton);
     })
 
+    const chipSuspense = (this._SfStreamContainer as HTMLDivElement).querySelector('#chip-suspense') as HTMLDivElement
+    chipSuspense?.addEventListener('click', async () => {
+      this.suspenseFlag = !this.suspenseFlag
+      const dateResult = this.calculateStartAndEndDateOfStream(index);
+      const monthResult = this.calculateMonthFromIndex(index);
+      console.log('monthResult', monthResult);
+      console.log('dateresult', dateResult);
+      this.currentColumnIndex = index + "";
+      if (dateResult != null) {
+        await this.renderWithFeatures(dateResult.startDate, dateResult.endDate, "", "yes", ("0" + monthResult).slice(-2));
+        // await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate,"","yes",("0" + monthResult).slice(-2));
+      }
+      this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
+      this.renderStream(index, showGraph, showBackgroundButton);
+    })
+
     this.attachListReportingListeners(this._SfStreamContainer as HTMLDivElement);
+    this.attachReviewListeners(this._SfStreamContainer as HTMLDivElement);
     const buttonArr = (this._SfStreamContainer as HTMLDivElement).querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
 
     for (i = 0; i < buttonArr.length; i++) {
-
+      let indexPrevNext = i;
       buttonArr[i].addEventListener('click', (ev: any) => {
-
         const id = ev.target.id;
         const idArr = id.split("-")
         const mmdd = idArr[3] + "/" + idArr[4];
@@ -12486,10 +12702,42 @@ export class SfIEvents extends LitElement {
           //console.log('commentsinlist', (this._SfStreamContainer as HTMLDivElement).querySelector('#stream-month-'+this.currentColumnIndex) as HTMLButtonElement, this.events[mmdd][j].comments, mmdd, j);
 
 
-
+          let prevString = "";
+          let flagPrev = true;
+          let indexPrev = indexPrevNext
+          while (flagPrev) {
+            if (indexPrev > 0) {
+              if (Util.isVisible((buttonArr[indexPrev - 1] as HTMLButtonElement))) {
+                prevString = (buttonArr[indexPrev - 1] as HTMLButtonElement).id;
+                flagPrev = false;
+              } else {
+                prevString = "";
+                indexPrev--
+              }
+            } else {
+              flagPrev = false;
+            }
+          }
+          let nextString = "";
+          let flagNext = true;
+          let indexNext = indexPrevNext
+          while (flagNext) {
+            if (indexNext < buttonArr.length - 1) {
+              if (Util.isVisible((buttonArr[indexNext + 1] as HTMLButtonElement))) {
+                nextString = (buttonArr[indexNext + 1] as HTMLButtonElement).id;
+                flagNext = false;
+              } else {
+                nextString = "";
+                indexNext++
+              }
+            } else {
+              flagNext = false;
+            }
+          }
           // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + yyyy, (this._SfStreamContainer as HTMLDivElement).querySelector('#stream-month-'+this.currentColumnIndex) as HTMLButtonElement);
           // console.log('errorFetchEvent', mmdd, j, buttonArr[i].outerHTML, idArr);
-          this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, (this._SfStreamContainer as HTMLDivElement).querySelector('#stream-month-' + this.currentColumnIndex) as HTMLButtonElement, this._SfStreamContainer as HTMLDivElement);
+          console.log('previous event clicked', buttonArr[indexPrevNext - 1], prevString, indexPrevNext);
+          this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, (this._SfStreamContainer as HTMLDivElement).querySelector('#stream-month-' + this.currentColumnIndex) as HTMLButtonElement, this._SfStreamContainer as HTMLDivElement, prevString, nextString);
         }
 
       })
@@ -12499,7 +12747,7 @@ export class SfIEvents extends LitElement {
     const titleArr = (this._SfStreamContainer as HTMLDivElement).querySelectorAll('.button-event-title') as NodeListOf<HTMLButtonElement>;
 
     for (var i = 0; i < titleArr.length; i++) {
-
+      let indexPrevNext = i;
       titleArr[i].addEventListener('click', (ev: any) => {
 
         const id = ev.target.id;
@@ -12536,9 +12784,51 @@ export class SfIEvents extends LitElement {
           // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
 
 
-
+          let prevString = "";
+          let flagPrev = true;
+          let indexPrev = indexPrevNext
+          while (flagPrev) {
+            if (indexPrev > 0) {
+              if (Util.isVisible((titleArr[indexPrev - 1] as HTMLButtonElement))) {
+                prevString = (titleArr[indexPrev - 1] as HTMLButtonElement).id;
+                let prevIdArr = prevString.split("-")
+                if ((prevIdArr[7] ?? "") == "reportedlocations") {
+                  prevString = "";
+                  indexPrev--;
+                } else {
+                  flagPrev = false;
+                }
+              } else {
+                prevString = "";
+                indexPrev--;
+              }
+            } else {
+              flagPrev = false;
+            }
+          }
+          let nextString = "";
+          let flagNext = true;
+          let indexNext = indexPrevNext
+          while (flagNext) {
+            if (indexNext < titleArr.length - 1) {
+              if (Util.isVisible((titleArr[indexNext + 1] as HTMLButtonElement))) {
+                nextString = (titleArr[indexNext + 1] as HTMLButtonElement).id;
+                let nextIdArr = nextString.split("-")
+                if ((nextIdArr[7] ?? "") == "reportedlocations") {
+                  nextString = "";
+                  indexNext++;
+                } else {
+                  flagNext = false;
+                }
+              } else {
+                indexNext++;
+              }
+            } else {
+              flagNext = false;
+            }
+          }
           // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + yyyy, null);
-          this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, null, (this._SfStreamContainer as HTMLDivElement));
+          this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, null, (this._SfStreamContainer as HTMLDivElement), prevString, nextString);
         }
       })
 
@@ -17434,7 +17724,7 @@ export class SfIEvents extends LitElement {
     }
   }
 
-  fetchEventDetails = async (listEvent: any, mmddyyyy: any, currentColumnButton: HTMLButtonElement | null, eventsContainer: HTMLDivElement, flagUploadGuidance: boolean = false, listEventContainer: HTMLDivElement | null = null, reportercomments: string | null = null, approvercomments: string | null = null, inputReportingPercentage: string | null = null, selectReportedLocation: string | null = null, documents: any | null = null, dateOfCompletion: string | null = null) => {
+  fetchEventDetails = async (listEvent: any, mmddyyyy: any, currentColumnButton: HTMLButtonElement | null, eventsContainer: HTMLDivElement, previousId: string = "", nextId: string = "", flagUploadGuidance: boolean = false, listEventContainer: HTMLDivElement | null = null, reportercomments: string | null = null, approvercomments: string | null = null, inputReportingPercentage: string | null = null, selectReportedLocation: string | null = null, documents: any | null = null, dateOfCompletion: string | null = null) => {
     console.log('listEvent', listEvent, listEvent.id)
     let url = "https://" + this.apiId + "/getalleventdetails";
 
@@ -17476,7 +17766,7 @@ export class SfIEvents extends LitElement {
           this.renderListReporting(listEventContainer, data, mmddyyyy, eventsContainer)
         }
       } else {
-        this.renderEventDetail(jsonRespose.data, mmddyyyy, currentColumnButton, eventsContainer);
+        this.renderEventDetail(jsonRespose.data, mmddyyyy, currentColumnButton, eventsContainer, previousId, nextId);
       }
 
     } else {
@@ -17498,9 +17788,9 @@ export class SfIEvents extends LitElement {
     }
   }
 
-  renderEventDetail = (event: any, mmddyyyy: any, currentColumnButton: HTMLButtonElement | null, eventsContainer: HTMLDivElement) => {
+  renderEventDetail = (event: any, mmddyyyy: any, currentColumnButton: HTMLButtonElement | null, eventsContainer: HTMLDivElement, previousId: string, nextId: string) => {
     console.log('event details', event, mmddyyyy, currentColumnButton == null ? "null currentColumnButton" : currentColumnButton.id);
-
+    console.log('previousid', previousId, 'nextid', nextId);
     let comments, docs, approved, /*dateOfCompletion,*/ makercheckers: Array<string>, docsOptional: boolean | any, documentType: string | any;
     let entityId: string = "";
     let locationId: string = "";
@@ -17555,6 +17845,15 @@ export class SfIEvents extends LitElement {
     
     `;
 
+    if (previousId != "" || nextId != "") {
+      html += `
+      <div part="compliance-detail-prev-next" class="d-flex justify-between m-20">
+        <button id="button-detail-previous" part="button-icon" class="material-icons${previousId != "" ? "" : " invisible"}">chevron_left</button>
+        <button id="button-detail-next" part="button-icon" class="material-icons${nextId != "" ? "" : " invisible"}">chevron_right</button>
+      </div>
+      `
+    }
+
     if (this.selectedItemIds.length > 1) {
 
       html += `
@@ -18016,6 +18315,24 @@ export class SfIEvents extends LitElement {
 
     });
 
+    (this._SfDetailContainer as HTMLDivElement).querySelector('#button-detail-previous')?.addEventListener('click', () => {
+      var clickEvent = new MouseEvent("click", {
+        "view": window,
+        "bubbles": true,
+        "cancelable": false
+      });
+      ((eventsContainer as HTMLDivElement).querySelector('#' + previousId) as HTMLElement)?.dispatchEvent(clickEvent);
+    });
+
+    (this._SfDetailContainer as HTMLDivElement).querySelector('#button-detail-next')?.addEventListener('click', () => {
+      var clickEvent = new MouseEvent("click", {
+        "view": window,
+        "bubbles": true,
+        "cancelable": false
+      });
+      ((eventsContainer as HTMLDivElement).querySelector('#' + nextId) as HTMLElement)?.dispatchEvent(clickEvent);
+    });
+
     (this._SfDetailContainer as HTMLDivElement).querySelector('.head-basic')?.addEventListener('click', () => {
 
       //console.log('head basic clicked', ((this._SfDetailContainer as HTMLDivElement).querySelector('.body-basic') as HTMLDivElement).style.display);
@@ -24010,7 +24327,7 @@ export class SfIEvents extends LitElement {
     var html = '';
 
     html += '<div class="d-flex justify-end align-start">';
-    if ((this.selectedFeatures.indexOf('compliances') >= 0) && (this.selectedFeatures.indexOf('notices') < 0) && (this.selectedFeatures.indexOf('contracts') < 0) && (this.selectedFeatures.indexOf('licenses') < 0) && (this.selectedFeatures.indexOf('rcmresources') < 0)) {    
+    if ((this.selectedFeatures.indexOf('compliances') >= 0) && (this.selectedFeatures.indexOf('notices') < 0) && (this.selectedFeatures.indexOf('contracts') < 0) && (this.selectedFeatures.indexOf('licenses') < 0) && (this.selectedFeatures.indexOf('rcmresources') < 0)) {
       html += '<button class="tab-button" id="input-show-reported-locations" part="' + (this.showReportedLocations ? 'calendar-tab-button-selected' : 'calendar-tab-button-not-selected') + '" class="mr-10"><span class="material-symbols-outlined">arrow_or_edge</span></button>';
     }
     if (selectedTab === 0) {
@@ -28901,6 +29218,34 @@ export class SfIEvents extends LitElement {
     }
   }
 
+  markReviewed = async (suspenseKey: any, year: string, review: boolean) => {
+    let url = "https://" + this.apiId + "/markreviewed";
+
+    //console.log('fetch calendar url', url);
+    let urlBody: any = { "projectid": this.projectId, "eventid": suspenseKey.split(';')[2], "entityid": suspenseKey.split(';')[0], "locationid": suspenseKey.split(';')[1], "year": year, "mark" : review };
+
+    //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";
@@ -29096,7 +29441,7 @@ export class SfIEvents extends LitElement {
       view = "entity";
     }
 
-    path = "getallcountryevents4";
+    path = "getallcountryevents5";
 
     let sDate = "";
     let eDate = "";
@@ -29115,7 +29460,7 @@ export class SfIEvents extends LitElement {
     let url = "https://" + this.apiId + "/" + path;
 
     //console.log('fetch calendar url', url);
-    let urlBody: any = { "projectid": this.projectId, "userprofileid": this.userProfileId, "role": this.myRole, "entityid": this.entityId, "countryid": this.countryId, "functionid": this.functionId, "locationid": this.locationId, "tagid": this.tagId, "adhoc": "false", "exclusivestartkey": 0, "sdate": sDate, "edate": eDate, "view": view, "year": year, "list": list, "month": month };
+    let urlBody: any = { "projectid": this.projectId, "userprofileid": this.userProfileId, "role": this.myRole, "entityid": this.entityId, "countryid": this.countryId, "functionid": this.functionId, "locationid": this.locationId, "tagid": this.tagId, "adhoc": "false", "exclusivestartkey": 0, "sdate": sDate, "edate": eDate, "view": view, "year": year, "list": list, "month": month, "suspense": this.suspenseFlag };
 
     if (searchString.length > 0) {
       urlBody["searchstring"] = searchString;
@@ -29238,7 +29583,7 @@ export class SfIEvents extends LitElement {
       view = "entity";
     }
 
-    path = "getallcountryevents4";
+    path = "getallcountryevents5";
 
     let url = "https://" + this.apiId + "/" + path;
     let temptagid = tagid;
@@ -30677,7 +31022,7 @@ export class SfIEvents extends LitElement {
     const buttonArr = this._SfIEventsC.querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
 
     for (var i = 0; i < buttonArr.length; i++) {
-
+      let indexPrevNext = i;
       buttonArr[i].addEventListener('click', (ev: any) => {
 
         const id = ev.target.id;
@@ -30722,7 +31067,15 @@ export class SfIEvents extends LitElement {
         }
         console.log('redering detail', this.myRole)
         // this.renderEventDetail(eventsData[role][mmdd][j], mmdd + "/" + yyyy, null);
-        this.fetchEventDetails(eventsData[role][mmdd][j], mmdd + "/" + yyyy, null, (this._SfIEventsC as HTMLDivElement));
+        let prevString = "";
+        if (indexPrevNext > 0) {
+          prevString = (buttonArr[indexPrevNext - 1] as HTMLButtonElement).id;
+        }
+        let nextString = "";
+        if (indexPrevNext < buttonArr.length - 1) {
+          nextString = (buttonArr[indexPrevNext + 1] as HTMLButtonElement).id;
+        }
+        this.fetchEventDetails(eventsData[role][mmdd][j], mmdd + "/" + yyyy, null, (this._SfIEventsC as HTMLDivElement), prevString, nextString);
 
       })
 
@@ -30969,7 +31322,7 @@ export class SfIEvents extends LitElement {
           day = '0' + day;
         let eDate = month + "/" + day + "/" + year
         let urlBody: any = { "projectid": this.projectId, "userprofileid": this.userProfileId, "role": this.myRole, "entityid": complianceEntityId, "countryid": "", "functionid": "", "locationid": complianceLocationId, "tagid": this.tagId, "adhoc": "false", "exclusivestartkey": 0, "sdate": sDate, "edate": eDate, "view": "location", "year": this.calendarStartYYYY };
-        let url = "https://" + this.apiId + "/getallcountryevents4";
+        let url = "https://" + this.apiId + "/getallcountryevents5";
         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 = '';
@@ -31062,7 +31415,7 @@ export class SfIEvents extends LitElement {
     console.log('fetching compliances', sortid)
     let complianceEntityId = sortid.split(';')[1]
     let complianceLocationId = sortid.split(';')[2]
-    let url = "https://" + this.apiId + "/getallcountryevents4";
+    let url = "https://" + this.apiId + "/getallcountryevents5";
     let sDateObj = selectedDate
     sDateObj.setDate(selectedDate.getDate() - 60)
     let day = '' + sDateObj.getDate();