sf-i-events 1.0.712 → 1.0.714

package/src/sf-i-events.ts

@@ -4639,7 +4639,7 @@ export class SfIEvents extends LitElement {
     return graphParam;
   }
 
-  renderCalendarAnnotations = (event: any) => {
+  renderCalendarAnnotations = (event: any, mmdd: string, i: number, j:number) => {
 
     var html = '';
 
@@ -4650,7 +4650,7 @@ export class SfIEvents extends LitElement {
 
     let graphParam = this.getGraphParam(event);
     console.log("graphParam", graphParam.split(';')[0]);
-    html += '<div class="d-flex"><div part="badge-filter-name" class="graphparamname graphparamname1 mb-20">' + graphParam.split(';')[0] + '</div>' + reporterStr + approverStr + '</div>';
+    html += '<div class="d-flex align-center"><div part="badge-filter-name" class="graphparamname graphparamname1 mb-20">' + graphParam.split(';')[0] + '</div>' + reporterStr + approverStr + '<button id="button-list-reporting-'+mmdd.replace('/', '-')+'-'+ i + '-' + j +'" part="button-list-reporting" class="material-icons ml-10 mb-20 button-list-reporting">summarize</button></div>';
 
     return html;
 
@@ -4842,7 +4842,8 @@ export class SfIEvents extends LitElement {
           html += this.renderCalendarRowDivItemDivStart(mmdd, this.events[mmdd][j], j, partStatus);
           html += this.renderCalendarRowDivItemDivTableHead(this.events[mmdd][j], partStatus);
           html += this.renderCalendarRowDivItemDivTableBody(this.events[mmdd][j], partStatus, lateStatus, complianceStatus, mmdd, i, j);
-          html += this.renderCalendarAnnotations(this.events[mmdd][j]);
+          html += this.renderCalendarAnnotations(this.events[mmdd][j], mmdd, i, j);
+          html += '<div class="list-reporting-container d-flex flex-col hide" id="list-reporting-container-' + i + '-' + j + '"></div>'
           html += this.renderCalendarRowDivItemDivEnd();
 
         }
@@ -4907,6 +4908,531 @@ export class SfIEvents extends LitElement {
 
   }
 
+  renderReporting = (event: any, mmddyyyy: any) => {
+    let html = '';
+    let completeness = this.getCompletenessStatus(event);
+    let docs = event['documents'] == null ? [] : event['documents'] == null ? [] :  (event['documents']);
+    let approved = event['approved'] == null ? false : event['approved'] == null ? false : event['approved'];
+    let dateOfCompletion = event['dateofcompletion'] == null ? '' : event['dateofcompletion'] == null ? '' : event['dateofcompletion'];
+    let makercheckers = event['makercheckers'] == null ? [] : event['makercheckers'] == null ? [] : event['makercheckers']; 
+    let docsOptional = event['docs'] == null ? [] : event['docs'] == null ? [] : event['docs'];
+    if(this.myRole == this.TAB_APPROVER || this.myRole == this.TAB_FUNCTION_HEAD) {
+      if(event.comments.length > 0) {
+
+        html += '<div class="d-flex justify-between m-20">';
+        html += '<h3 part="results-title" class="m-0"><br />Approve Compliance</h3>';
+        html += '</div>';
+        html += '<div class="m-20" part="report-container">';
+        html += '<div class="d-flex justify-between align-center">'
+          html += '<button class="invisible" part="button">Save</button>'
+          html += '<button id="button-uploader-submit-approve" class="button-submit" part="button">Save</button>'
+        html += '</div>'
+        
+        if(this.myRole != this.TAB_FUNCTION_HEAD && event.docs.length > 0) {
+          html += '<div class="m-20">';
+          html += '<label part="input-label">Supporting Documents</label>';
+          html += '<slot name="uploader"></slot>';
+          html += '<div part="uploader-analysis-message" class="uploader-analysis-message mt-20">The analysis is running in the background. You can proceed further.</div>'
+          html += '</div>';  
+        }
+
+        html += '<div class="d-flex m-20 flex-col">';
+          html += '<label part="input-label">Approver Comments*</label>';
+          html += '<input id="input-approver-comments" type="text" part="input" value=""/><br />';
+          html += '<label part="input-label">Date of Completion*</label>';
+          html += '<input id="input-approver-doc" part="input" type="date" value="'+(dateOfCompletion == "" ? dateOfCompletion : new Date(parseInt(dateOfCompletion)).toISOString().substring(0,10))+'" disabled/><br />';
+          html += '<div>'
+            html += '<label part="input-label">Approve?*</label><br />';
+            html += '<div class="mt-5">'
+            html += '<input id="input-approve-yes" name="radio-approved" type="radio"/> Yes';
+            html += '<input id="input-approve-no" name="radio-approved" type="radio" checked/> No';
+            html += '</div>'
+          html += '</div>';
+        html += '</div>';
+        html += '</div>';
+
+      }
+
+    } 
+    
+    if(this.myRole == this.TAB_REPORTER || this.myRole == this.TAB_FUNCTION_HEAD) {
+
+      html += '<div class="d-flex justify-between m-20">';
+      html += '<h3 part="results-title" class="m-0"><br />Report Compliance</h3>';
+      html += '</div>';
+
+      var showSubmissionSection = true;
+      var showGoogleFormLink = false;
+
+      if(event['form'] != null && event['form'].length > 5) {
+
+        if(event['form'].indexOf('docs.google.com/forms') >= 0) {
+          showSubmissionSection = false;
+          if(!approved) {
+            showGoogleFormLink = true;
+            
+          }
+        }
+        
+      }
+
+      if(showGoogleFormLink) {
+        html += ('<div part="detail-summary-form" class="mt-20 pl-20 pr-20"><button part="button" onclick="window.open(\'' + event['form'] + (this.projectId + '_' + event.entityid + '_' + event.locationid + '_' + event['id'] + '_' + mmddyyyy) + '\',\'_blank\')">Submit Via Link</button></div>');
+      }
+
+      if(showSubmissionSection) {
+
+        html += '<div class="m-20" part="report-container">';
+        html += '<div class="d-flex justify-between align-center">'
+          html += '<button class="invisible" part="button">Save</button>'
+          html += '<button id="button-uploader-submit-report" class="button-submit" part="button">Save</button>'
+        html += '</div>'
+
+        html += '<div class="d-flex m-20 flex-col">';
+          html += '<label part="input-label">Reporter Comments*</label>';
+          html += '<input id="input-reporter-comments" type="text" part="input" value=""/><br />';
+          html += '<label part="input-label">Date of Completion*</label>';
+          html += '<input id="input-reporter-doc" part="input" type="date" value="'+(dateOfCompletion == "" ? dateOfCompletion : new Date(parseInt(dateOfCompletion)).toISOString().substring(0,10))+'" max="'+(new Date().toISOString().substring(0, 10))+'"/><br />';
+          // if(docsOptional.length === 0) {
+            html += '<label part="input-label">Supporting Documents' + ((docsOptional.length > 0) ? '' : '*') + '</label>';
+
+            if(event['uploadguidance'] != null && event['uploadguidance'].length > 0) {
+              html += ('<div part="uploader-analysis-message">'+event['uploadguidance']+'</div>');
+            }
+
+            html += '<slot name="uploader"></slot>';
+            html += '<div part="uploader-analysis-message" class="uploader-analysis-message mt-20">The analysis is running in the background. You can proceed further.</div>'
+          // }
+          html += '<br />';
+          if(event['reportformat'] != null && event['reportformat'].length > 0){
+            html += '<div id="report-format-container"><div class="box"></div></div>'
+          }
+          html += '<br />';
+          if(makercheckers.length > 0) {
+            html += '<div part="td-head" class="td-head d-flex justify-center align-center"><span class="material-symbols-outlined">check_small</span><div>&nbsp;Auto-approve Enabled</div></div>';
+          
+            if(completeness == "pending-approval" && this.enableDeleteLatestReport) {
+              html += '<div part="td-head" class="td-head d-flex justify-center align-center"><button class="mt-5" part="button" id="button-auto-approve">Auto Approve</button></div>';
+            }
+          }
+        html += '</div>';
+        html += '</div>';
+
+      }
+
+    }
+
+    if(this.myRole == this.TAB_AUDITOR) {
+
+      html += '<div class="d-flex justify-between m-20">';
+      html += '<h3 part="results-title" class="m-0"><br />Audit Compliance</h3>';
+      html += '</div>';
+      html += '<div class="m-20" part="report-container">';
+      html += '<div class="d-flex justify-between align-center">'
+        html += '<button class="invisible" part="button">Save</button>'
+        html += '<button id="button-uploader-submit-audit" class="button-submit" part="button">Save</button>'
+      html += '</div>'
+
+      html += '<div class="d-flex m-20 flex-col">';
+        html += '<label part="input-label">Auditor Comments</label>';
+        html += '<input id="input-auditor-comments" type="text" part="input" value=""/><br />';
+        html += '<label part="input-label">Date of Completion</label>';
+        html += '<input id="input-auditor-doc" part="input" type="date" value="'+(dateOfCompletion == "" ? dateOfCompletion : new Date(parseInt(dateOfCompletion)).toISOString().substring(0,10))+'" max="'+(new Date().toISOString().substring(0, 10))+'" readonly/><br />';
+        html += '<div>'
+            html += '<label part="input-label">Approve?</label><br />';
+            html += '<div class="mt-5">'
+            html += '<input id="input-approve-yes" name="radio-approved" type="radio" checked/> Yes';
+            html += '<input id="input-approve-no" name="radio-approved" type="radio"/> No';
+            html += '</div>'
+          html += '</div>';
+        html += '<br />';
+        if(docs.length > 0) {
+          html += '<label part="input-label">Supporting Documents</label>';
+          html += '<slot name="uploader"></slot>';
+          html += '<div part="uploader-analysis-message" class="uploader-analysis-message mt-20">The analysis is running in the background. You can proceed further.</div>'
+        }
+      html += '</div>';
+      html += '</div>';
+
+    }
+    
+    if(this.myRole == this.TAB_VIEWER) {
+
+      html += '<div class="d-flex justify-between m-20">';
+      html += '<h3 part="results-title" class="m-0"><br />View Compliance</h3>';
+      html += '</div>';
+      html += '<div class="m-20" part="report-container">';
+
+      html += '<div class="d-flex m-20 flex-col">';
+        html += '<div>'
+            html += '<label part="input-label">Approve?</label><br />';
+            html += '<div class="mt-5">'
+            html += '<input id="input-approve-yes" name="radio-approved" type="radio" checked/> Yes';
+            html += '<input id="input-approve-no" name="radio-approved" type="radio"/> No';
+            html += '</div>'
+          html += '</div>';
+        html += '<br />';
+        if(docs.length === 0) {
+          html += '<label part="input-label">Supporting Documents</label>';
+          html += '<slot name="uploader"></slot>';
+          html += '<div part="uploader-analysis-message" class="uploader-analysis-message mt-20">The analysis is running in the background. You can proceed further.</div>'
+        }
+      html += '</div>';
+      html += '</div>';
+    }
+    return html;
+  }
+  renderListReporting = (listReportingContainer: HTMLDivElement, event: any, mmddyyyy: any, eventsContainer: HTMLDivElement) => {
+    let html = ''
+    let mmdd = mmddyyyy.split('/')[0] + '/' + mmddyyyy.split('/')[1]
+    
+    let reportformatName: string = '';
+    if(event['reportformat'] != null){
+      reportformatName = (event['reportformat'][0] ?? "").trim().replace('&amp;','&');
+    }
+    let docs = event['documents'] == null ? [] : event['documents'] == null ? [] :  (event['documents']);
+    html = this.renderReporting(event, mmddyyyy);
+    console.log('reporting html', html);
+    let listReportingContainers = eventsContainer.querySelectorAll('.list-reporting-container') as NodeListOf<HTMLDivElement>
+    for(let tempReportingContainer of listReportingContainers){
+      tempReportingContainer.style.display = 'none';
+      tempReportingContainer.innerHTML = '';
+    } 
+    listReportingContainer.style.display = 'flex';
+    listReportingContainer.innerHTML = html;
+    listReportingContainer.querySelector('.button-delete')?.addEventListener('click', async () => {
+
+      await this.fetchDeleteReview(event["id"], mmddyyyy, event.entityid, event.locationid);
+      this.setSuccess('Deleted successfully!')
+      setTimeout(() => {
+        this.clearMessages()
+      }, 3000);
+      //console.log('deleted', resultDelete);
+      if(this.getCurrentTab() == this.TAB_CUSTOM) {
+        this.processDateSelection((this._SfCustomContainer as HTMLDivElement));
+      } else {
+        // if(currentColumnButton != null) {
+        //   currentColumnButton.click();
+        // }
+      }
+
+    });
+    listReportingContainer.querySelector('#button-auto-approve')?.addEventListener('click', async () => {
+      await this.uploadReview(event.entityid, event.locationid, mmddyyyy, event["id"], "Auto approved", true);
+      this.setSuccess('Auto-Approved successfully!')
+      setTimeout(() => {
+        this.clearMessages()
+      }, 3000);
+      if(this.getCurrentTab() == this.TAB_CUSTOM) {
+        this.processDateSelection((this._SfCustomContainer as HTMLDivElement));
+      } else {
+        // if(currentColumnButton != null) {
+        //   currentColumnButton.click();
+        // }
+      }
+
+    });
+    if(this.mode == "consumer" || this.mode == "next") {
+
+      listReportingContainer.querySelector('#button-uploader-submit-approve')?.addEventListener('click', async () => {
+
+        const comments = (listReportingContainer.querySelector('#input-approver-comments') as HTMLInputElement).value;
+        const approved = (listReportingContainer.querySelector('#input-approve-yes') as HTMLInputElement).checked;
+        await this.uploadReview(event.entityid, event.locationid, mmddyyyy, event["id"], comments, approved)
+        for( var p = 0 ; p < this.events[mmdd].length; p ++){
+          if(this.events[mmdd][p].id == event.id && this.events[mmdd][p].locationid == event.locationid && this.events[mmdd][p].entityid == event.entityid){
+            
+            this.events[mmdd][p].comments.push({'author': 'Approver', 'comment': comments + ` (Approved: ${approved ? 'Yes' : 'No'})`, 'timestamp': new Date().toISOString()})
+            this.events[mmdd][p].lastupdated = new Date().toISOString()
+          }
+        }
+        
+        if(this.mode == "next"){
+          // this.fetchNext(this.nextPage)
+          this.renderRoleTabsNext(this.nextPage)
+        }else{
+          if(this.getCurrentTab() == this.TAB_CUSTOM) {
+            this.processDateSelection((this._SfCustomContainer as HTMLDivElement));
+          } else if(this.getCurrentTab() == this.TAB_FIND) {
+            const searchString = ((this._SfFindContainer as HTMLDivElement).querySelector('#stream-search') as HTMLInputElement).value;
+            this.processFindSelection((this._SfFindContainer as HTMLDivElement), searchString);
+          } else {
+            if(this.selectedItemIds.length > 0) {  
+              await this.fetchBulkReportingData();
+            }
+            this.renderAppropriateStream(this.sdate,this.edate, true);
+          }
+        }
+
+      });
+
+      listReportingContainer.querySelector('#button-uploader-submit-audit')?.addEventListener('click', async () => {
+
+        const comments = (listReportingContainer.querySelector('#input-auditor-comments') as HTMLInputElement).value;
+        const approved = (listReportingContainer.querySelector('#input-approve-yes') as HTMLInputElement).checked;
+
+        if(comments.trim().length === 0) {
+
+          this.setError('Comments cannot be blank!');
+          setTimeout(() => {
+            this.clearMessages();
+          }, 3000);
+
+        } else {
+          await this.uploadAudit(event.entityid, event.locationid, mmddyyyy, event["id"], comments, approved)
+          for( var p = 0 ; p < this.events[mmdd].length; p ++){
+            if(this.events[mmdd][p].id == event.id && this.events[mmdd][p].locationid == event.locationid && this.events[mmdd][p].entityid == event.entityid){
+              this.events[mmdd][p].approved = approved
+              this.events[mmdd][p].comments.push({'author': 'Auditor', 'comment': comments + ` (Approved: ${approved ? 'Yes' : 'No'})`, 'timestamp': new Date().toISOString()})
+              this.events[mmdd][p].lastupdated = new Date().toISOString()
+            }
+          }
+          if(this.mode == "next"){
+            this.fetchNext(this.nextPage, this.nextTabRole, this.nextTabStatus)
+          }else{
+            if(this.getCurrentTab() == this.TAB_CUSTOM) {
+              this.processDateSelection((this._SfCustomContainer as HTMLDivElement));
+            } else if(this.getCurrentTab() == this.TAB_FIND) {
+              const searchString = ((this._SfFindContainer as HTMLDivElement).querySelector('#stream-search') as HTMLInputElement).value;
+              this.processFindSelection((this._SfFindContainer as HTMLDivElement), searchString);
+            } else {
+              if(this.selectedItemIds.length > 0) {
+                await this.fetchBulkReportingData();
+              }
+              this.renderAppropriateStream(this.sdate,this.edate,true);
+              // if(currentColumnButton != null) {
+              //   currentColumnButton.click();
+              // }
+            }
+          }
+
+        }
+
+        
+
+      });
+
+      if(this.myRole == this.TAB_REPORTER || this.myRole == this.TAB_FUNCTION_HEAD) {
+
+        if(event.approved) {
+
+          if((listReportingContainer.querySelector('#button-uploader-submit-report') as HTMLElement) != null) {
+            (listReportingContainer.querySelector('#button-uploader-submit-report') as HTMLElement).style.visibility = 'hidden';
+          }
+          
+
+        } else {
+
+          if((listReportingContainer.querySelector('#button-uploader-submit-report') as HTMLElement) != null) {
+
+
+            (listReportingContainer.querySelector('#button-uploader-submit-report') as HTMLElement).style.visibility = 'visible';
+
+            listReportingContainer.querySelector('#button-uploader-submit-report')?.addEventListener('click', async () => {
+
+              const reportercomments = (listReportingContainer.querySelector('#input-reporter-comments') as HTMLInputElement).value;
+
+              //console.log('reporter comments 1', reportercomments);
+
+              const reporterdoc = (listReportingContainer.querySelector('#input-reporter-doc') as HTMLInputElement).value.length > 0 ? (new Date((listReportingContainer.querySelector('#input-reporter-doc') as HTMLInputElement).value).getTime() + "") : "";
+              let docs:any[] = [];
+
+              //console.log('reporter comments 2', reportercomments);
+              
+              // if(docsOptional.length === 0) {
+                docs = (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.selectedValues();
+              // }
+      
+              //console.log('docs', docs);
+              let reportformatvalues:string = "";
+              let reportformatschema:string = "";
+              if(this._SfReporting[0] != null){
+                reportformatvalues = JSON.stringify((this._SfReporting[0].querySelector('#reporting-format') as SfIReporting)!.selectedValues()) ?? "";
+                reportformatschema = (this._SfReporting[0].querySelector('#reporting-format') as SfIReporting)!.configjson ?? "";
+              }
+              
+
+              if(docs.length === 0 && event.docsOptional.length === 0) {
+
+                //console.log('reporter comments 3', reportercomments);
+
+                this.setError('No documents uploaded!');
+                setTimeout(() => {
+                  this.clearMessages();
+                }, 3000);
+
+              } else {
+
+                //console.log('reporterdoc', reporterdoc);
+
+                if(reporterdoc.length === 0) {
+
+                  this.setError('Date of completion not selected!');
+                  setTimeout(() => {
+                    this.clearMessages();
+                  }, 3000);
+
+                } else {
+
+                  //console.log('makerscheckers 1', reportercomments);
+
+                  if(reportercomments.trim().length === 0) {
+
+                    this.setError('Comments cannot be blank!');
+                    setTimeout(() => {
+                      this.clearMessages();
+                    }, 3000);
+
+                  } else {
+
+                    await this.uploadReport(event.entityid, event.locationid, mmddyyyy, event["id"], reportercomments, reporterdoc, docs, event, reportformatvalues, reportformatschema)
+                    console.log('this.events', this.events);
+                    for( var p = 0 ; p < this.events[mmdd].length; p ++){
+                      if(this.events[mmdd][p].id == event.id && this.events[mmdd][p].locationid == event.locationid && this.events[mmdd][p].entityid == event.entityid){
+                        this.events[mmdd][p].documents = docs
+                        this.events[mmdd][p].comments.push({'author': 'Reporter', 'comment': reportercomments + ` (Documents Saved: ${docs.length}})`, 'timestamp': new Date().toISOString()})
+                        this.events[mmdd][p].lastupdated = new Date().toISOString()
+                      }
+                    }
+                    if(event.makercheckers.length > 0) {
+
+                      await this.uploadReview(event.entityid, event.locationid, mmddyyyy, event["id"], "Auto approved", true);
+                      for( var p = 0 ; p < this.events[mmdd].length; p ++){
+                        if(this.events[mmdd][p].id == event.id && this.events[mmdd][p].locationid == event.locationid && this.events[mmdd][p].entityid == event.entityid){
+                          this.events[mmdd][p].approved = true
+                          // this.events[mmdd][p].documents = docs
+                          this.events[mmdd][p].comments.push({'author': 'Auditor', 'comment': `Auto approved (Approved: Yes})`, 'timestamp': new Date().toISOString()})
+                          this.events[mmdd][p].lastupdated = new Date().toISOString()
+                        }
+                      }
+                    }
+
+                    if(this.mode == "next"){
+                      this.fetchNext(this.nextPage, this.nextTabRole, this.nextTabStatus)
+                    }else{
+                      if(this.getCurrentTab() == this.TAB_CUSTOM) {
+                        this.processDateSelection((this._SfCustomContainer as HTMLDivElement));
+                      } else if(this.getCurrentTab() == this.TAB_FIND) {
+                        const searchString = ((this._SfFindContainer as HTMLDivElement).querySelector('#stream-search') as HTMLInputElement).value;
+                        this.processFindSelection((this._SfFindContainer as HTMLDivElement), searchString);
+                      } else {
+                        if(this.selectedItemIds.length > 0) {
+                          await this.fetchBulkReportingData();
+                        }
+                        this.renderAppropriateStream(this.sdate,this.edate,true)
+                        // if(currentColumnButton != null) {
+                        //   currentColumnButton.click();
+                        // }
+                      }
+                    }
+
+                  }
+                }
+              }
+      
+            });
+
+          }
+          
+        }
+
+      }
+      
+      if(this._SfUploader[0] != null) {
+        if((listReportingContainer.querySelector('.uploader-analysis-message') as HTMLDivElement) != null){
+          (listReportingContainer.querySelector('.uploader-analysis-message') as HTMLDivElement).style.display = "none"
+        }
+        this._SfUploader[0].querySelector('#uploader').addEventListener('analysisInProgress', (_ev: any) => {
+          console.log('uploader analysisInProgress', _ev);
+          (listReportingContainer.querySelector('.uploader-analysis-message') as HTMLDivElement).style.display = "block"
+        });  
+        this._SfUploader[0].querySelector('#uploader').addEventListener('analysisCompleted', (_ev: any) => {
+          console.log('uploader analysisInProgress', _ev);
+          (listReportingContainer.querySelector('.uploader-analysis-message') as HTMLDivElement).style.display = "none"
+        });  
+
+
+        //console.log('documentType checking', documentType);
+
+        if(event.documentType != null) {
+          (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.docType = event.documentType;  
+        }
+
+        (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.prepopulatedInputArr = JSON.stringify([]);
+        console.log('uploader', (this._SfUploader[0].querySelector('#uploader') as SfIUploader));
+        (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.loadMode();
+
+        if(docs.length > 0) {
+          (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.prepopulatedInputArr = JSON.stringify(docs);
+          (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.loadMode();
+        }
+
+        if(this.myRole == this.TAB_APPROVER || event.approved) {
+          (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.readOnly = true;
+          (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.loadMode();
+        } else {
+          (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.readOnly = false;
+          (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.loadMode();
+        }
+
+        const dataPassthrough = {
+          projectId: this.projectId,
+          countryId: this.countryId,
+          entityId: event.entityid,
+          locationId: event.locationid,
+          mmddyyyy: mmddyyyy,
+          complianceId: event['id'],
+          path: "uploadextract"
+        };
+
+        const callbackUrlHost = "8icpy39ru0.execute-api.us-east-1.amazonaws.com";
+        const callbackUrlPath = "test/uploadextract";
+
+        (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.projectId = this.projectId;
+        (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.dataPassthrough = JSON.stringify(dataPassthrough);
+        (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.callbackUrlHost = callbackUrlHost;
+        (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.callbackUrlPath = callbackUrlPath;
+        (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.loadMode();
+
+      }
+
+      
+      
+      //console.log('approved 1', event["approved"], this.myRole, this.TAB_APPROVER);
+      if(this.myRole == this.TAB_APPROVER || this.myRole == this.TAB_VIEWER || this.myRole == this.TAB_AUDITOR || this.myRole == this.TAB_FUNCTION_HEAD) {
+        //console.log('approved 1', event["approved"], this.myRole, this.TAB_APPROVER);
+        if(event["approved"] != null) {
+          if(event["approved"] === true) {
+            //console.log('approved 2', event["approved"], this.myRole, this.TAB_APPROVER);
+            if((listReportingContainer.querySelector('#input-approve-yes') as HTMLInputElement) != null) {
+              (listReportingContainer.querySelector('#input-approve-yes') as HTMLInputElement).checked = true;
+            }
+            if((listReportingContainer.querySelector('#input-approve-no') as HTMLInputElement) != null) {
+              (listReportingContainer.querySelector('#input-approve-no') as HTMLInputElement).checked = false;
+            }
+          } else {
+            if((listReportingContainer.querySelector('#input-approve-yes') as HTMLInputElement) != null) {
+              (listReportingContainer.querySelector('#input-approve-yes') as HTMLInputElement)!.checked = false;
+            }
+            if((listReportingContainer.querySelector('#input-approve-no') as HTMLInputElement) != null) {
+              (listReportingContainer.querySelector('#input-approve-no') as HTMLInputElement)!.checked = true;
+            }
+          }
+        } else {
+          if(listReportingContainer.querySelector('#input-approve-yes') as HTMLInputElement != null) {
+            (listReportingContainer.querySelector('#input-approve-yes') as HTMLInputElement).checked = false;
+          }
+          if((listReportingContainer.querySelector('#input-approve-no') as HTMLInputElement) != null) {
+            (listReportingContainer.querySelector('#input-approve-no') as HTMLInputElement).checked = true;
+          }
+        }
+      }
+    }
+    if(event['reportformat'] != null && event['reportformat'].length > 0){
+      this.fetchReportFormat(listReportingContainer, reportformatName, event['reportformatschema'] ?? "", event['reportformatvalues'] ?? "");
+    }
+  }
+ 
   renderStreamEvents = (index: number, month: number, year: number, showGraph: boolean = true) => {
  
     //console.log('flowgraph renderStreamEvents', this.flowGraph);
@@ -4997,6 +5523,25 @@ export class SfIEvents extends LitElement {
     buttonRefresh.addEventListener('click',async ()=>{
       this.processDateSelection(eventsContainer)
     })
+    let buttonListReports = eventsContainer.querySelectorAll('.button-list-reporting') as NodeListOf<HTMLButtonElement>
+    for(let buttonListReport of buttonListReports){
+      buttonListReport?.addEventListener('click',(ev:any) => {
+        const id = ev.target.id;
+        const idArr = id.split("-")
+        const mmdd = idArr[3] + "/" + idArr[4];
+        const yyyy = this.getCurrentYear(idArr[3]);
+        const i = idArr[5];
+        const j = idArr[6];
+        let listReportingContainer = eventsContainer.querySelector('#list-reporting-container-'+i+'-'+j) as HTMLDivElement
+        console.log('mmddyyyy', this.events[mmdd][j], 'display',listReportingContainer.style.display);
+        if(listReportingContainer.style.display == 'none' || listReportingContainer.style.display == ''){
+          this.renderListReporting(listReportingContainer,this.events[mmdd][j], mmdd + '/' + yyyy, (this._SfStreamContainer as HTMLDivElement))
+        }else{
+          listReportingContainer.innerHTML = '';
+          listReportingContainer.style.display = 'none';
+        }
+      })
+    }
     const buttonArr = eventsContainer.querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
 
     for(var i = 0; i < buttonArr.length; i++) {
@@ -5025,7 +5570,7 @@ export class SfIEvents extends LitElement {
         var yyyy = this.getCurrentYear(idArr[3]);
 
         // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + yyyy, null);
-        this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, null);
+        this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, null, eventsContainer);
   
       })
 
@@ -8247,6 +8792,25 @@ export class SfIEvents extends LitElement {
       await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
       this.renderThis(index);
     })
+    let buttonListReports = (this._SfThisContainer as HTMLDivElement).querySelectorAll('.button-list-reporting') as NodeListOf<HTMLButtonElement>
+    for(let buttonListReport of buttonListReports){
+      buttonListReport?.addEventListener('click',(ev:any) => {
+        const id = ev.target.id;
+        const idArr = id.split("-")
+        const mmdd = idArr[3] + "/" + idArr[4];
+        const yyyy = this.getCurrentYear(idArr[3]);
+        const i = idArr[5];
+        const j = idArr[6];
+        let listReportingContainer = (this._SfThisContainer as HTMLDivElement).querySelector('#list-reporting-container-'+i+'-'+j) as HTMLDivElement
+        console.log('mmddyyyy', this.events[mmdd][j], 'display',listReportingContainer.style.display);
+        if(listReportingContainer.style.display == 'none' || listReportingContainer.style.display == ''){
+          this.renderListReporting(listReportingContainer,this.events[mmdd][j], mmdd + '/' + yyyy, (this._SfStreamContainer as HTMLDivElement))
+        }else{
+          listReportingContainer.innerHTML = '';
+          listReportingContainer.style.display = 'none';
+        }
+      })
+    }
     const buttonArr = (this._SfThisContainer as HTMLDivElement).querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
 
     for(i = 0; i < buttonArr.length; i++) {
@@ -8274,7 +8838,7 @@ export class SfIEvents extends LitElement {
         var yyyy = this.getCurrentYear(idArr[3]);
 
         // 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.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, (this._SfThisContainer as HTMLDivElement).querySelector('#stream-month-'+this.currentColumnIndex) as HTMLButtonElement, this._SfThisContainer as HTMLDivElement);
   
       })
 
@@ -8408,7 +8972,7 @@ export class SfIEvents extends LitElement {
 
   renderButtonRefresh = (eventsContainer: HTMLDivElement) => {
     document.addEventListener('scroll',() => {
-      console.log('scroll',window.scrollY)
+      // console.log('scroll',window.scrollY)
       let buttonRefresh = eventsContainer.querySelector('#button-refresh') as HTMLButtonElement
       if(window.scrollY > 720){
         if(buttonRefresh.style.display == "flex"){
@@ -8610,6 +9174,7 @@ export class SfIEvents extends LitElement {
       
     });
     
+    
     // const buttonStatusMore = (this._SfStreamContainer as HTMLDivElement).querySelector('#button-status-more');
     // buttonStatusMore?.addEventListener('click', () => {
 
@@ -8665,6 +9230,26 @@ export class SfIEvents extends LitElement {
       this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
       this.renderStream(index);
     })
+
+    let buttonListReports = (this._SfStreamContainer as HTMLDivElement).querySelectorAll('.button-list-reporting') as NodeListOf<HTMLButtonElement>
+    for(let buttonListReport of buttonListReports){
+      buttonListReport?.addEventListener('click',(ev:any) => {
+        const id = ev.target.id;
+        const idArr = id.split("-")
+        const mmdd = idArr[3] + "/" + idArr[4];
+        const yyyy = this.getCurrentYear(idArr[3]);
+        const i = idArr[5];
+        const j = idArr[6];
+        let listReportingContainer = (this._SfStreamContainer as HTMLDivElement).querySelector('#list-reporting-container-'+i+'-'+j) as HTMLDivElement
+        console.log('mmddyyyy', this.events[mmdd][j], 'display',listReportingContainer.style.display);
+        if(listReportingContainer.style.display == 'none' || listReportingContainer.style.display == ''){
+          this.renderListReporting(listReportingContainer,this.events[mmdd][j], mmdd + '/' + yyyy, (this._SfStreamContainer as HTMLDivElement))
+        }else{
+          listReportingContainer.innerHTML = '';
+          listReportingContainer.style.display = 'none';
+        }
+      })
+    }
     const buttonArr = (this._SfStreamContainer as HTMLDivElement).querySelectorAll('.button-expand') as NodeListOf<HTMLButtonElement>;
 
     for(i = 0; i < buttonArr.length; i++) {
@@ -8695,7 +9280,7 @@ export class SfIEvents extends LitElement {
         var yyyy = this.getCurrentYear(idArr[3]);
         
         // this.renderEventDetail(this.events[mmdd][j], mmdd + "/" + yyyy, (this._SfStreamContainer as HTMLDivElement).querySelector('#stream-month-'+this.currentColumnIndex) as HTMLButtonElement);
-        this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, (this._SfStreamContainer as HTMLDivElement).querySelector('#stream-month-'+this.currentColumnIndex) as HTMLButtonElement);
+        this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, (this._SfStreamContainer as HTMLDivElement).querySelector('#stream-month-'+this.currentColumnIndex) as HTMLButtonElement, this._SfStreamContainer as HTMLDivElement);
   
       })
 
@@ -9725,7 +10310,7 @@ export class SfIEvents extends LitElement {
 
   }
 
-  fetchEventDetails = async (listEvent: any, mmddyyyy: any, currentColumnButton: HTMLButtonElement | null) => {
+  fetchEventDetails = async (listEvent: any, mmddyyyy: any, currentColumnButton: HTMLButtonElement | null, eventsContainer: HTMLDivElement) => {
     console.log('listEvent', listEvent, listEvent.id)
     let url = "https://"+this.apiId+"/getalleventdetails";
     
@@ -9741,7 +10326,7 @@ export class SfIEvents extends LitElement {
 
       const jsonRespose = JSON.parse(xhr.responseText);
       console.log('jsonRespose', jsonRespose);
-      this.renderEventDetail(jsonRespose.data,mmddyyyy, currentColumnButton);
+      this.renderEventDetail(jsonRespose.data,mmddyyyy, currentColumnButton, eventsContainer);
 
     } else {
 
@@ -9759,10 +10344,10 @@ export class SfIEvents extends LitElement {
     }
   }
 
-  renderEventDetail = (event: any, mmddyyyy: any, currentColumnButton: HTMLButtonElement | null) => {
+  renderEventDetail = (event: any, mmddyyyy: any, currentColumnButton: HTMLButtonElement | null, eventsContainer: HTMLDivElement) => {
     console.log('event details', event, mmddyyyy, currentColumnButton == null ? "null currentColumnButton" : currentColumnButton.id);
 
-    let comments, docs, approved, dateOfCompletion, makercheckers: Array<string>, docsOptional, documentType;
+    let comments, docs, approved, /*dateOfCompletion,*/ makercheckers: Array<string>, docsOptional, documentType;
     let entityId: string = "";
     let locationId: string = "";
     let statuteName: string = "";
@@ -9770,11 +10355,11 @@ export class SfIEvents extends LitElement {
     let mmdd = mmddyyyy.split('/')[0] + '/' + mmddyyyy.split('/')[1] 
     entityId = event.entityid;
     locationId = event.locationid;
-    let completeness = this.getCompletenessStatus(event);
+    // let completeness = this.getCompletenessStatus(event);
     comments = event['comments'] == null ? [] : (event['comments']);
     docs = event['documents'] == null ? [] : event['documents'] == null ? [] :  (event['documents']);
     approved = event['approved'] == null ? false : event['approved'] == null ? false : event['approved'];
-    dateOfCompletion = event['dateofcompletion'] == null ? '' : event['dateofcompletion'] == null ? '' : event['dateofcompletion'];
+    // dateOfCompletion = event['dateofcompletion'] == null ? '' : event['dateofcompletion'] == null ? '' : event['dateofcompletion'];
     makercheckers = event['makercheckers'] == null ? [] : event['makercheckers'] == null ? [] : event['makercheckers']; 
     docsOptional = event['docs'] == null ? [] : event['docs'] == null ? [] : event['docs'];
     documentType = event['documenttype'] == null ? null : event['documenttype'][0] == null ? null : event['documenttype'][0].split(" ")[0];
@@ -9793,6 +10378,12 @@ export class SfIEvents extends LitElement {
     const complianceFields = ['specificity', 'reference', 'obligation', 'penalty', 'authority', 'frequency', 'obligationtype', 'duedate', 'applicability', 'form'];
     const grcFields = ['internalcontrols', 'firstlineofdefence', 'risk', 'riskarea'];
 
+    let listReportingContainers = eventsContainer.querySelectorAll('.list-reporting-container') as NodeListOf<HTMLDivElement>
+    for(let tempReportingContainer of listReportingContainers){
+      tempReportingContainer.style.display = 'none';
+      tempReportingContainer.innerHTML = '';
+    } 
+
     var html = `
     
       <div class="d-flex justify-between m-20">
@@ -10046,7 +10637,7 @@ export class SfIEvents extends LitElement {
       //console.log('docs received', comments);
       //console.log('docs received', approved);
         
-      if(this.myRole == this.TAB_APPROVER || this.myRole == this.TAB_FUNCTION_HEAD) {
+      /* if(this.myRole == this.TAB_APPROVER || this.myRole == this.TAB_FUNCTION_HEAD) {
 
         if(comments.length > 0) {
 
@@ -10214,7 +10805,8 @@ export class SfIEvents extends LitElement {
         html += '</div>';
         html += '</div>';
 
-      }
+      } */
+      html += this.renderReporting(event, mmddyyyy);
 
       html += '<div class="d-flex justify-between m-20">';
       html += '<h3 part="results-title" class="m-0"><br />Comments</h3>';
@@ -10963,7 +11555,7 @@ export class SfIEvents extends LitElement {
     this.fetchStatuteDefinitionDetails(statuteName);
 
     if(event['reportformat'] != null && event['reportformat'].length > 0){
-      this.fetchReportFormat(reportformatName, event['reportformatschema'] ?? "", event['reportformatvalues'] ?? "");
+      this.fetchReportFormat((this._SfDetailContainer as HTMLDivElement), reportformatName, event['reportformatschema'] ?? "", event['reportformatvalues'] ?? "");
     }
   }
 
@@ -12086,7 +12678,7 @@ export class SfIEvents extends LitElement {
           if(equal) {
             
             (multiArr[i] as SfIForm).preselectedValues = JSON.stringify(taggingArray.data.mappings.mappings[j][colName]);
-            if(taggingArray.data.mappings.mappings[j][colName].length > 0) {
+            if(taggingArray.data.mappings.mappings[j][colName] != null && taggingArray.data.mappings.mappings[j][colName].length > 0) {
               ((multiArr[i] as SfIForm).parentElement as HTMLTableCellElement).setAttribute("part", "row-mapped");
             }
 
@@ -19297,7 +19889,7 @@ export class SfIEvents extends LitElement {
 
   }
 
-  fetchReportFormat = async(searchName: string, reportformatschema: string = "", reportformatvalues: string = "") => {
+  fetchReportFormat = async(reportingContainer: HTMLDivElement, searchName: string, reportformatschema: string = "", reportformatvalues: string = "") => {
     let jsonContentIndex:number;
     let jsonContentFound:string = "";
     if(reportformatschema == ""){
@@ -19322,15 +19914,17 @@ export class SfIEvents extends LitElement {
       console.log('format not found');
       return;
     }
-    (this._SfDetailContainer as HTMLDivElement).querySelector('#report-format-container')!.innerHTML = `<slot name="reporting"></slot>`;
-    console.log('innerhtml', (this._SfDetailContainer as HTMLDivElement).querySelector('#report-format-container')!.innerHTML);
-    (this._SfReporting[0].querySelector('#reporting-format') as SfIReporting).name = searchName;
-    (this._SfReporting[0].querySelector('#reporting-format') as SfIReporting).mode = reportformatvalues != "" ? "edit" : "new";
-    (this._SfReporting[0].querySelector('#reporting-format') as SfIReporting).configjson = jsonContentFound;
-    if(reportformatvalues != ""){
-      (this._SfReporting[0].querySelector('#reporting-format') as SfIReporting).prepopulateValJson = reportformatvalues
+    if(reportingContainer.querySelector('#report-format-container') != null){
+      reportingContainer.querySelector('#report-format-container')!.innerHTML = `<slot name="reporting"></slot>`;
+      console.log('innerhtml', reportingContainer.querySelector('#report-format-container')!.innerHTML);
+      (this._SfReporting[0].querySelector('#reporting-format') as SfIReporting).name = searchName;
+      (this._SfReporting[0].querySelector('#reporting-format') as SfIReporting).mode = reportformatvalues != "" ? "edit" : "new";
+      (this._SfReporting[0].querySelector('#reporting-format') as SfIReporting).configjson = jsonContentFound;
+      if(reportformatvalues != ""){
+        (this._SfReporting[0].querySelector('#reporting-format') as SfIReporting).prepopulateValJson = reportformatvalues
+      }
+      (this._SfReporting[0].querySelector('#reporting-format') as SfIReporting).loadMode();
     }
-    (this._SfReporting[0].querySelector('#reporting-format') as SfIReporting).loadMode();
   }
 
   fetchSearchReportformats = async (searchString: string, cursor: string = "") => {
@@ -21613,7 +22207,7 @@ 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.fetchEventDetails(eventsData[role][mmdd][j], mmdd + "/" + yyyy, null, (this._SfIEventsC as HTMLDivElement));
     
         })