sf-i-events 1.0.712 → 1.0.714

package/sf-i-events.js

@@ -2489,14 +2489,14 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
             return graphParam;
         };
-        this.renderCalendarAnnotations = (event) => {
+        this.renderCalendarAnnotations = (event, mmdd, i, j) => {
             var html = '';
             html += '<div class="hidden-filtername hide"><table><thead><th part="badge-filter-name" class="filtername"></th></thead></table></div>';
             let reporterStr = this.getReporterStringFromEvent(event);
             let approverStr = this.getApproverStringFromEvent(event);
             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;
         };
         this.renderEvents = (_firstDay, _endDay, iInit, iLast, showGraph, index, month, period, firstDate = null, parametersTitle) => {
@@ -2654,7 +2654,8 @@ let SfIEvents = 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();
                     }
                     html += this.renderCalendarRowDivEnd();
@@ -2699,6 +2700,455 @@ let SfIEvents = class SfIEvents extends LitElement {
             this.htmlDataStats += '<tr><td class="w-14 text-center td-odd">' + total + '</td><td class="w-14 text-center td-odd">' + scheduled + '</td><td class="w-14 text-center td-odd">' + notComplied + '</td><td class="w-14 text-center td-odd">' + partiallyComplied + '</td><td class="w-14 text-center td-odd">' + complied + '</td><tr></table>';
             return html;
         };
+        this.renderReporting = (event, mmddyyyy) => {
+            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;
+        };
+        this.renderListReporting = (listReportingContainer, event, mmddyyyy, eventsContainer) => {
+            var _a, _b, _c, _f, _g, _h, _j, _k;
+            let html = '';
+            let mmdd = mmddyyyy.split('/')[0] + '/' + mmddyyyy.split('/')[1];
+            let reportformatName = '';
+            if (event['reportformat'] != null) {
+                reportformatName = ((_a = event['reportformat'][0]) !== null && _a !== void 0 ? _a : "").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');
+            for (let tempReportingContainer of listReportingContainers) {
+                tempReportingContainer.style.display = 'none';
+                tempReportingContainer.innerHTML = '';
+            }
+            listReportingContainer.style.display = 'flex';
+            listReportingContainer.innerHTML = html;
+            (_b = listReportingContainer.querySelector('.button-delete')) === null || _b === void 0 ? void 0 : _b.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);
+                }
+                else {
+                    // if(currentColumnButton != null) {
+                    //   currentColumnButton.click();
+                    // }
+                }
+            });
+            (_c = listReportingContainer.querySelector('#button-auto-approve')) === null || _c === void 0 ? void 0 : _c.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);
+                }
+                else {
+                    // if(currentColumnButton != null) {
+                    //   currentColumnButton.click();
+                    // }
+                }
+            });
+            if (this.mode == "consumer" || this.mode == "next") {
+                (_f = listReportingContainer.querySelector('#button-uploader-submit-approve')) === null || _f === void 0 ? void 0 : _f.addEventListener('click', async () => {
+                    const comments = listReportingContainer.querySelector('#input-approver-comments').value;
+                    const approved = listReportingContainer.querySelector('#input-approve-yes').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);
+                        }
+                        else if (this.getCurrentTab() == this.TAB_FIND) {
+                            const searchString = this._SfFindContainer.querySelector('#stream-search').value;
+                            this.processFindSelection(this._SfFindContainer, searchString);
+                        }
+                        else {
+                            if (this.selectedItemIds.length > 0) {
+                                await this.fetchBulkReportingData();
+                            }
+                            this.renderAppropriateStream(this.sdate, this.edate, true);
+                        }
+                    }
+                });
+                (_g = listReportingContainer.querySelector('#button-uploader-submit-audit')) === null || _g === void 0 ? void 0 : _g.addEventListener('click', async () => {
+                    const comments = listReportingContainer.querySelector('#input-auditor-comments').value;
+                    const approved = listReportingContainer.querySelector('#input-approve-yes').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);
+                            }
+                            else if (this.getCurrentTab() == this.TAB_FIND) {
+                                const searchString = this._SfFindContainer.querySelector('#stream-search').value;
+                                this.processFindSelection(this._SfFindContainer, 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') != null) {
+                            listReportingContainer.querySelector('#button-uploader-submit-report').style.visibility = 'hidden';
+                        }
+                    }
+                    else {
+                        if (listReportingContainer.querySelector('#button-uploader-submit-report') != null) {
+                            listReportingContainer.querySelector('#button-uploader-submit-report').style.visibility = 'visible';
+                            (_h = listReportingContainer.querySelector('#button-uploader-submit-report')) === null || _h === void 0 ? void 0 : _h.addEventListener('click', async () => {
+                                var _a, _b;
+                                const reportercomments = listReportingContainer.querySelector('#input-reporter-comments').value;
+                                //console.log('reporter comments 1', reportercomments);
+                                const reporterdoc = listReportingContainer.querySelector('#input-reporter-doc').value.length > 0 ? (new Date(listReportingContainer.querySelector('#input-reporter-doc').value).getTime() + "") : "";
+                                let docs = [];
+                                //console.log('reporter comments 2', reportercomments);
+                                // if(docsOptional.length === 0) {
+                                docs = this._SfUploader[0].querySelector('#uploader').selectedValues();
+                                // }
+                                //console.log('docs', docs);
+                                let reportformatvalues = "";
+                                let reportformatschema = "";
+                                if (this._SfReporting[0] != null) {
+                                    reportformatvalues = (_a = JSON.stringify(this._SfReporting[0].querySelector('#reporting-format').selectedValues())) !== null && _a !== void 0 ? _a : "";
+                                    reportformatschema = (_b = this._SfReporting[0].querySelector('#reporting-format').configjson) !== null && _b !== void 0 ? _b : "";
+                                }
+                                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);
+                                                }
+                                                else if (this.getCurrentTab() == this.TAB_FIND) {
+                                                    const searchString = this._SfFindContainer.querySelector('#stream-search').value;
+                                                    this.processFindSelection(this._SfFindContainer, 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') != null) {
+                        listReportingContainer.querySelector('.uploader-analysis-message').style.display = "none";
+                    }
+                    this._SfUploader[0].querySelector('#uploader').addEventListener('analysisInProgress', (_ev) => {
+                        console.log('uploader analysisInProgress', _ev);
+                        listReportingContainer.querySelector('.uploader-analysis-message').style.display = "block";
+                    });
+                    this._SfUploader[0].querySelector('#uploader').addEventListener('analysisCompleted', (_ev) => {
+                        console.log('uploader analysisInProgress', _ev);
+                        listReportingContainer.querySelector('.uploader-analysis-message').style.display = "none";
+                    });
+                    //console.log('documentType checking', documentType);
+                    if (event.documentType != null) {
+                        this._SfUploader[0].querySelector('#uploader').docType = event.documentType;
+                    }
+                    this._SfUploader[0].querySelector('#uploader').prepopulatedInputArr = JSON.stringify([]);
+                    console.log('uploader', this._SfUploader[0].querySelector('#uploader'));
+                    this._SfUploader[0].querySelector('#uploader').loadMode();
+                    if (docs.length > 0) {
+                        this._SfUploader[0].querySelector('#uploader').prepopulatedInputArr = JSON.stringify(docs);
+                        this._SfUploader[0].querySelector('#uploader').loadMode();
+                    }
+                    if (this.myRole == this.TAB_APPROVER || event.approved) {
+                        this._SfUploader[0].querySelector('#uploader').readOnly = true;
+                        this._SfUploader[0].querySelector('#uploader').loadMode();
+                    }
+                    else {
+                        this._SfUploader[0].querySelector('#uploader').readOnly = false;
+                        this._SfUploader[0].querySelector('#uploader').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').projectId = this.projectId;
+                    this._SfUploader[0].querySelector('#uploader').dataPassthrough = JSON.stringify(dataPassthrough);
+                    this._SfUploader[0].querySelector('#uploader').callbackUrlHost = callbackUrlHost;
+                    this._SfUploader[0].querySelector('#uploader').callbackUrlPath = callbackUrlPath;
+                    this._SfUploader[0].querySelector('#uploader').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') != null) {
+                                listReportingContainer.querySelector('#input-approve-yes').checked = true;
+                            }
+                            if (listReportingContainer.querySelector('#input-approve-no') != null) {
+                                listReportingContainer.querySelector('#input-approve-no').checked = false;
+                            }
+                        }
+                        else {
+                            if (listReportingContainer.querySelector('#input-approve-yes') != null) {
+                                listReportingContainer.querySelector('#input-approve-yes').checked = false;
+                            }
+                            if (listReportingContainer.querySelector('#input-approve-no') != null) {
+                                listReportingContainer.querySelector('#input-approve-no').checked = true;
+                            }
+                        }
+                    }
+                    else {
+                        if (listReportingContainer.querySelector('#input-approve-yes') != null) {
+                            listReportingContainer.querySelector('#input-approve-yes').checked = false;
+                        }
+                        if (listReportingContainer.querySelector('#input-approve-no') != null) {
+                            listReportingContainer.querySelector('#input-approve-no').checked = true;
+                        }
+                    }
+                }
+            }
+            if (event['reportformat'] != null && event['reportformat'].length > 0) {
+                this.fetchReportFormat(listReportingContainer, reportformatName, (_j = event['reportformatschema']) !== null && _j !== void 0 ? _j : "", (_k = event['reportformatvalues']) !== null && _k !== void 0 ? _k : "");
+            }
+        };
         this.renderStreamEvents = (index, month, year, showGraph = true) => {
             //console.log('flowgraph renderStreamEvents', this.flowGraph);
             const lastDay = this.getLastDayOfMonth(month, year);
@@ -2758,6 +3208,26 @@ let SfIEvents = class SfIEvents extends LitElement {
             buttonRefresh.addEventListener('click', async () => {
                 this.processDateSelection(eventsContainer);
             });
+            let buttonListReports = eventsContainer.querySelectorAll('.button-list-reporting');
+            for (let buttonListReport of buttonListReports) {
+                buttonListReport === null || buttonListReport === void 0 ? void 0 : buttonListReport.addEventListener('click', (ev) => {
+                    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);
+                    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);
+                    }
+                    else {
+                        listReportingContainer.innerHTML = '';
+                        listReportingContainer.style.display = 'none';
+                    }
+                });
+            }
             const buttonArr = eventsContainer.querySelectorAll('.button-expand');
             for (var i = 0; i < buttonArr.length; i++) {
                 buttonArr[i].addEventListener('click', (ev) => {
@@ -2779,7 +3249,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
                     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);
                 });
             }
             const streamEventsContainer = eventsContainer.querySelectorAll('.stream-events-container');
@@ -5367,6 +5837,26 @@ let SfIEvents = class SfIEvents extends LitElement {
                 await this.fetchAndYearlyRenderUserCalendar_2(dateResult.startDate, dateResult.endDate);
                 this.renderThis(index);
             });
+            let buttonListReports = this._SfThisContainer.querySelectorAll('.button-list-reporting');
+            for (let buttonListReport of buttonListReports) {
+                buttonListReport === null || buttonListReport === void 0 ? void 0 : buttonListReport.addEventListener('click', (ev) => {
+                    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.querySelector('#list-reporting-container-' + i + '-' + j);
+                    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);
+                    }
+                    else {
+                        listReportingContainer.innerHTML = '';
+                        listReportingContainer.style.display = 'none';
+                    }
+                });
+            }
             const buttonArr = this._SfThisContainer.querySelectorAll('.button-expand');
             for (i = 0; i < buttonArr.length; i++) {
                 buttonArr[i].addEventListener('click', (ev) => {
@@ -5387,7 +5877,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                     // (this._SfDetailContainer as HTMLDivElement).style.display = 'block'
                     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.querySelector('#stream-month-' + this.currentColumnIndex));
+                    this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, this._SfThisContainer.querySelector('#stream-month-' + this.currentColumnIndex), this._SfThisContainer);
                 });
             }
             const streamEventsContainer = this._SfThisContainer.querySelectorAll('.stream-events-container');
@@ -5495,7 +5985,7 @@ let SfIEvents = class SfIEvents extends LitElement {
         };
         this.renderButtonRefresh = (eventsContainer) => {
             document.addEventListener('scroll', () => {
-                console.log('scroll', window.scrollY);
+                // console.log('scroll',window.scrollY)
                 let buttonRefresh = eventsContainer.querySelector('#button-refresh');
                 if (window.scrollY > 720) {
                     if (buttonRefresh.style.display == "flex") {
@@ -5687,6 +6177,26 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this.flowGraph = this.FLOW_GRAPH_COMPLETENESS;
                 this.renderStream(index);
             });
+            let buttonListReports = this._SfStreamContainer.querySelectorAll('.button-list-reporting');
+            for (let buttonListReport of buttonListReports) {
+                buttonListReport === null || buttonListReport === void 0 ? void 0 : buttonListReport.addEventListener('click', (ev) => {
+                    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.querySelector('#list-reporting-container-' + i + '-' + j);
+                    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);
+                    }
+                    else {
+                        listReportingContainer.innerHTML = '';
+                        listReportingContainer.style.display = 'none';
+                    }
+                });
+            }
             const buttonArr = this._SfStreamContainer.querySelectorAll('.button-expand');
             for (i = 0; i < buttonArr.length; i++) {
                 buttonArr[i].addEventListener('click', (ev) => {
@@ -5709,7 +6219,7 @@ let SfIEvents = 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);
                     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.querySelector('#stream-month-' + this.currentColumnIndex));
+                    this.fetchEventDetails(this.events[mmdd][j], mmdd + "/" + yyyy, this._SfStreamContainer.querySelector('#stream-month-' + this.currentColumnIndex), this._SfStreamContainer);
                 });
             }
             const streamEventsContainer = this._SfStreamContainer.querySelectorAll('.stream-events-container');
@@ -6485,7 +6995,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }
             });
         };
-        this.fetchEventDetails = async (listEvent, mmddyyyy, currentColumnButton) => {
+        this.fetchEventDetails = async (listEvent, mmddyyyy, currentColumnButton, eventsContainer) => {
             console.log('listEvent', listEvent, listEvent.id);
             let url = "https://" + this.apiId + "/getalleventdetails";
             //console.log('fetch calendar url', url);
@@ -6497,7 +7007,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             if (xhr.status == 200) {
                 const jsonRespose = JSON.parse(xhr.responseText);
                 console.log('jsonRespose', jsonRespose);
-                this.renderEventDetail(jsonRespose.data, mmddyyyy, currentColumnButton);
+                this.renderEventDetail(jsonRespose.data, mmddyyyy, currentColumnButton, eventsContainer);
             }
             else {
                 if (xhr.status === 404) {
@@ -6511,10 +7021,10 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }
             }
         };
-        this.renderEventDetail = (event, mmddyyyy, currentColumnButton) => {
+        this.renderEventDetail = (event, mmddyyyy, currentColumnButton, eventsContainer) => {
             var _a, _b, _c, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             console.log('event details', event, mmddyyyy, currentColumnButton == null ? "null currentColumnButton" : currentColumnButton.id);
-            let comments, docs, approved, dateOfCompletion, makercheckers, docsOptional, documentType;
+            let comments, docs, approved, /*dateOfCompletion,*/ makercheckers, docsOptional, documentType;
             let entityId = "";
             let locationId = "";
             let statuteName = "";
@@ -6522,11 +7032,11 @@ let SfIEvents = 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];
@@ -6542,6 +7052,11 @@ let SfIEvents = class SfIEvents extends LitElement {
             const statuteFields = ['jurisdiction', 'country', 'state', 'category', 'subcategory', 'statute'];
             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');
+            for (let tempReportingContainer of listReportingContainers) {
+                tempReportingContainer.style.display = 'none';
+                tempReportingContainer.innerHTML = '';
+            }
             var html = `
     
       <div class="d-flex justify-between m-20">
@@ -6738,142 +7253,176 @@ let SfIEvents = class SfIEvents extends LitElement {
                 //console.log('docs received', event['documents']);
                 //console.log('docs received', comments);
                 //console.log('docs received', approved);
-                if (this.myRole == this.TAB_APPROVER || this.myRole == this.TAB_FUNCTION_HEAD) {
-                    if (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 && 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>';
+                /* if(this.myRole == this.TAB_APPROVER || this.myRole == this.TAB_FUNCTION_HEAD) {
+          
+                  if(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 && 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 += '<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>'
+                      html += '</div>';
                     html += '</div>';
-                    var showSubmissionSection = true;
-                    var showGoogleFormLink = false;
-                    if (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 + '_' + entityId + '_' + 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 += '</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'].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 + '_' + entityId + '_' + 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>');
+          
+                        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 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 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">';
+          
+                  }
+          
+          
+                  
+          
+                }
+          
+                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 += '<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>';
+                    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>';
+                  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>';
+                
+                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>';
+                    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>';
-                }
+                  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>';
                 html += '</div>';
@@ -7503,7 +8052,7 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
             this.fetchStatuteDefinitionDetails(statuteName);
             if (event['reportformat'] != null && event['reportformat'].length > 0) {
-                this.fetchReportFormat(reportformatName, (_p = event['reportformatschema']) !== null && _p !== void 0 ? _p : "", (_q = event['reportformatvalues']) !== null && _q !== void 0 ? _q : "");
+                this.fetchReportFormat(this._SfDetailContainer, reportformatName, (_p = event['reportformatschema']) !== null && _p !== void 0 ? _p : "", (_q = event['reportformatvalues']) !== null && _q !== void 0 ? _q : "");
             }
         };
         this.renderCalendar = () => {
@@ -8321,7 +8870,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                         }
                         if (equal) {
                             multiArr[i].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].parentElement.setAttribute("part", "row-mapped");
                             }
                         }
@@ -13993,7 +14542,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                 this.setError(jsonRespose.error);
             }
         };
-        this.fetchReportFormat = async (searchName, reportformatschema = "", reportformatvalues = "") => {
+        this.fetchReportFormat = async (reportingContainer, searchName, reportformatschema = "", reportformatvalues = "") => {
             let jsonContentIndex;
             let jsonContentFound = "";
             if (reportformatschema == "") {
@@ -14019,15 +14568,17 @@ let SfIEvents = class SfIEvents extends LitElement {
                 console.log('format not found');
                 return;
             }
-            this._SfDetailContainer.querySelector('#report-format-container').innerHTML = `<slot name="reporting"></slot>`;
-            console.log('innerhtml', this._SfDetailContainer.querySelector('#report-format-container').innerHTML);
-            this._SfReporting[0].querySelector('#reporting-format').name = searchName;
-            this._SfReporting[0].querySelector('#reporting-format').mode = reportformatvalues != "" ? "edit" : "new";
-            this._SfReporting[0].querySelector('#reporting-format').configjson = jsonContentFound;
-            if (reportformatvalues != "") {
-                this._SfReporting[0].querySelector('#reporting-format').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').name = searchName;
+                this._SfReporting[0].querySelector('#reporting-format').mode = reportformatvalues != "" ? "edit" : "new";
+                this._SfReporting[0].querySelector('#reporting-format').configjson = jsonContentFound;
+                if (reportformatvalues != "") {
+                    this._SfReporting[0].querySelector('#reporting-format').prepopulateValJson = reportformatvalues;
+                }
+                this._SfReporting[0].querySelector('#reporting-format').loadMode();
             }
-            this._SfReporting[0].querySelector('#reporting-format').loadMode();
         };
         this.fetchSearchReportformats = async (searchString, cursor = "") => {
             let url = "https://" + this.apiidReportformats + "/listlarge";
@@ -15716,7 +16267,7 @@ let SfIEvents = 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);
                 });
             }
             const streamEventsContainer = this._SfIEventsC.querySelectorAll('.stream-events-container');