sf-i-events 1.0.894 → 1.0.896

package/dev/index.html

@@ -25,7 +25,7 @@
     import { SfISubSelect } from 'https://esm.run/sf-i-sub-select@1.0.83/sf-i-sub-select.js';
     import { SfIForm } from 'https://esm.run/sf-i-form@1.0.185/sf-i-form.js';
     import { SfIElasticText } from 'https://esm.run/sf-i-elastic-text@1.0.17/sf-i-elastic-text.js';
-    import { SfIUploader } from 'https://esm.run/sf-i-uploader@1.0.120/sf-i-uploader.js';
+    import { SfIUploader } from 'https://esm.run/sf-i-uploader@1.0.122/sf-i-uploader.js';
     import { SfIMultitextarea } from 'https://esm.run/sf-i-multitextarea@1.0.23/sf-i-multitextarea.js';
     // import { SfIReporting } from 'https://esm.run/sf-i-reporting@1.0.89/sf-i-reporting.js';
     import { SfIReporting } from '../../sf-i-reporting/sf-i-reporting.js';

package/package.json

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

package/sf-i-events.d.ts

@@ -684,6 +684,7 @@ export declare class SfIEvents extends LitElement {
     renderChartSettings: (container: HTMLDivElement, selectedTab: number | undefined, selectedSummary: number | undefined, ctx: any) => void;
     renderChartSummary: () => void;
     csvToHtmlTable: (strCsv: string) => string;
+    csvToHtmlTable1: (strCsv: string) => string;
     getFilteredString: () => string;
     getFilteredStringSummary: () => string;
     formatLabel: (str: string, maxwidth: number) => any;

package/sf-i-events.js

@@ -3746,7 +3746,9 @@ let SfIEvents = class SfIEvents extends LitElement {
                 }
             }
             listReportingContainer.innerHTML = html;
-            this._SfUploader[0].querySelector('#uploader').emailcontent = emailcontent;
+            if (this._SfUploader[0] != null) {
+                this._SfUploader[0].querySelector('#uploader').emailcontent = emailcontent;
+            }
             (_f = listReportingContainer.querySelector('.button-delete')) === null || _f === void 0 ? void 0 : _f.addEventListener('click', async () => {
                 await this.fetchDeleteReview(event["id"], mmddyyyy, event.entityid, event.locationid);
                 this.setSuccess('Deleted successfully!');
@@ -8991,7 +8993,7 @@ let SfIEvents = class SfIEvents extends LitElement {
         this.renderCompletenessCsvForGraph = (dataBar, parameter) => {
             this.csvCompletenessStats = parameter + ",Not Started,In Progress,Complete,Rejected\n";
             for (var i = 0; i < dataBar['labels'].length; i++) {
-                this.csvCompletenessStats += dataBar['labels'][i].join(" ") + "," + dataBar['datasets'][3]['data'][i] + "," + dataBar['datasets'][1]['data'][i] + "," + dataBar['datasets'][0]['data'][i] + "," + dataBar['datasets'][2]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\n" : "");
+                this.csvCompletenessStats += "\"" + dataBar['labels'][i].join(" ") + "\",\"" + dataBar['datasets'][3]['data'][i] + "\",\"" + dataBar['datasets'][1]['data'][i] + "\",\"" + dataBar['datasets'][0]['data'][i] + "\",\"" + dataBar['datasets'][2]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\"\n" : "");
             }
             console.log('rendering csv completeness', dataBar, this.csvCompletenessStats);
         };
@@ -8999,14 +9001,14 @@ let SfIEvents = class SfIEvents extends LitElement {
             //console.log('dataBar', dataBar);
             this.csvTimelinessStats = parameter + ",In Time,Past Due Date,Late Approved,Late Executed,Late Reported\n";
             for (var i = 0; i < dataBar['labels'].length; i++) {
-                this.csvTimelinessStats += dataBar['labels'][i].join(" ") + "," + dataBar['datasets'][0]['data'][i] + "," + dataBar['datasets'][1]['data'][i] + "," + dataBar['datasets'][3]['data'][i] + "," + dataBar['datasets'][2]['data'][i] + "," + dataBar['datasets'][4]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\n" : "");
+                this.csvTimelinessStats += "\"" + dataBar['labels'][i].join(" ") + "\",\"" + dataBar['datasets'][0]['data'][i] + "\",\"" + dataBar['datasets'][1]['data'][i] + "\",\"" + dataBar['datasets'][3]['data'][i] + "\",\"" + dataBar['datasets'][2]['data'][i] + "\",\"" + dataBar['datasets'][4]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\"\n" : "");
             }
             //console.log('rendering csv csvTimelinessStats', this.csvTimelinessStats);
         };
         this.renderComplianceCsvForGraph = (dataBar, parameter) => {
-            this.csvComplianceStats = parameter + ",Scheduled,Not Complied,Partially Complied,Complied\n";
+            this.csvComplianceStats = parameter + ",Scheduled,Not Complied,Partially Complied,Complied,Complied With Gaps,Reported Non Compliance\n";
             for (var i = 0; i < dataBar['labels'].length; i++) {
-                this.csvComplianceStats += dataBar['labels'][i].join(" ") + "," + dataBar['datasets'][0]['data'][i] + "," + dataBar['datasets'][1]['data'][i] + "," + dataBar['datasets'][3]['data'][i] + "," + dataBar['datasets'][2]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\n" : "");
+                this.csvComplianceStats += "\"" + dataBar['labels'][i].join(" ") + "\",\"" + dataBar['datasets'][0]['data'][i] + "\",\"" + dataBar['datasets'][1]['data'][i] + "\",\"" + dataBar['datasets'][2]['data'][i] + "\",\"" + dataBar['datasets'][3]['data'][i] + "\",\"" + dataBar['datasets'][4]['data'][i] + "\",\"" + dataBar['datasets'][5]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\"\n" : "");
             }
             //console.log('rendering csv csvComplianceStats', this.csvComplianceStats);
         };
@@ -9158,7 +9160,7 @@ let SfIEvents = class SfIEvents extends LitElement {
                         }]
                 };
                 this.csvGraphStats += 'Compliance,Scheduled,Not Complied,Partially Complied,Complied,Complied With Gaps,Reported Non Compliance,Total\n';
-                this.csvGraphStats += 'Count,' + parseInt(dataScheduled) + ',' + parseInt(dataNotComplied) + ',' + parseInt(dataPartiallyComplied) + ',' + parseInt(dataComplied) + ',' + parseInt(dataCompliedWithGaps) + ',' + parseInt(dataReportedNonComplaince) + ',' + parseInt(dataTotal) + '\n';
+                this.csvGraphStats += 'Count,' + parseInt(dataScheduled) + ',' + parseInt(dataNotComplied) + ',' + parseInt(dataPartiallyComplied) + ',' + parseInt(dataCompliedWithGaps) + ',' + parseInt(dataComplied) + ',' + parseInt(dataReportedNonComplaince) + ',' + parseInt(dataTotal) + '\n';
             }
             //console.log('rendering timeliness graph', this.csvGraphStats);
             const itemsTimeliness = divContainer.querySelectorAll('.stat-timeliness');
@@ -9423,17 +9425,17 @@ let SfIEvents = class SfIEvents extends LitElement {
             return data;
         };
         this.renderPieCsv = (pieData, csv, param) => {
-            csv += param + ',';
+            csv += '"' + param + '",';
             for (var i = 0; i < Object.keys(pieData).length; i++) {
-                csv += (Object.keys(pieData)[i]);
+                csv += '"' + (Object.keys(pieData)[i]) + '"';
                 if (i < (Object.keys(pieData).length - 1)) {
                     csv += ',';
                 }
             }
             csv += '\n';
-            csv += 'Count,';
+            csv += '"Count",';
             for (var i = 0; i < Object.keys(pieData).length; i++) {
-                csv += (pieData[Object.keys(pieData)[i]]);
+                csv += '"' + (pieData[Object.keys(pieData)[i]]) + '"';
                 if (i < (Object.keys(pieData).length - 1)) {
                     csv += ',';
                 }
@@ -17948,6 +17950,48 @@ let SfIEvents = class SfIEvents extends LitElement {
             }
         };
         this.csvToHtmlTable = (strCsv) => {
+            const htmlRows = [];
+            const lines = strCsv.trim().split(/\r?\n/);
+            const parseCsvLine = (line) => {
+                const result = [];
+                let current = '';
+                let inQuotes = false;
+                for (let i = 0; i < line.length; i++) {
+                    const char = line[i];
+                    const nextChar = line[i + 1];
+                    if (char === '"' && inQuotes && nextChar === '"') {
+                        current += '"'; // escaped quote
+                        i++; // skip next quote
+                    }
+                    else if (char === '"') {
+                        inQuotes = !inQuotes;
+                    }
+                    else if (char === ',' && !inQuotes) {
+                        result.push(current);
+                        current = '';
+                    }
+                    else {
+                        current += char;
+                    }
+                }
+                result.push(current);
+                return result;
+            };
+            htmlRows.push('<br />' + parseCsvLine(lines[0])[0] + '<br /><br />');
+            htmlRows.push('<table>');
+            lines.forEach((line, index) => {
+                const cells = parseCsvLine(line);
+                const tag = index === 0 ? 'th' : 'td';
+                htmlRows.push('<tr>');
+                cells.forEach(cell => {
+                    htmlRows.push(`<${tag} class="${tag === 'td' ? 'text-center' : ''}">${cell}</${tag}>`);
+                });
+                htmlRows.push('</tr>');
+            });
+            htmlRows.push('</table>');
+            return htmlRows.join('');
+        };
+        this.csvToHtmlTable1 = (strCsv) => {
             var html = '';
             //console.log('csvToHtmlTable', strCsv);
             var strArr = strCsv.split("\n");

package/src/sf-i-events.ts

@@ -4635,16 +4635,16 @@ export class SfIEvents extends LitElement {
 
     var html = '';
     html += '<tr class="tablerow">'
-    html += '<td part="td-body" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center">FILTER_CRITERIA_NAME</div><div part="td-head' + (isLocation ? '' : '-click') +'" id="filter-' + index + '">DASHBOARD_FILTER_NAME</div>'
+    html += '<td part="td-body" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head" class="pl-0-imp w-100 d-flex align-center">FILTER_CRITERIA_NAME</div><div part="td-head' + (isLocation ? '' : '-click') + '" id="filter-' + index + '">DASHBOARD_FILTER_NAME</div>'
     if (filterUser) {
       html += '<div part="td-head" class="pl-0-imp w-100 d-flex align-center">Last Access</div><div>DASHBOARD_LAST_ACTIVE</div><div part="td-head" class="pl-0-imp w-100 d-flex align-center">Last Action</div><div>DASHBOARD_LAST_ACTION</div>'
     }
     html += '</div></td>'
-    html += '<td part="td-body" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head' + (isLocation ? '' : '-click') +'" id="filter-not-started-' + index + '" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-icons color-not-started">schedule</span>&nbsp;&nbsp;Not Started</div><div>DASHBOARD_NOT_STARTED</div></div></td>'
-    html += '<td part="td-body" id="filter-pending-approval-' + index + '" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head' + (isLocation ? '' : '-click') +'" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-pending">pending</span>&nbsp;&nbsp;Pending Approval</div><div>DASHBOARD_PENDING_APPROVAL</div></div></td>'
-    html += '<td part="td-body" id="filter-rejected-' + index + '" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head' + (isLocation ? '' : '-click') +'" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-rejected">block</span>&nbsp;&nbsp;Rejected</div><div>DASHBOARD_REJECTED</div></div></td>'
-    html += '<td part="td-body" id="filter-approved-' + index + '" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head' + (isLocation ? '' : '-click') +'" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-done">check_circle</span>&nbsp;&nbsp;Approved</div><div>DASHBOARD_APPROVED</div></div></td>'
-    html += '<td part="td-body" id="filter-total-' + index + '" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head' + (isLocation ? '' : '-click') +'" class="pl-0-imp w-100 d-flex align-center">Total</div><div>DASHBOARD_TOTAL</div></div></td>'
+    html += '<td part="td-body" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head' + (isLocation ? '' : '-click') + '" id="filter-not-started-' + index + '" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-icons color-not-started">schedule</span>&nbsp;&nbsp;Not Started</div><div>DASHBOARD_NOT_STARTED</div></div></td>'
+    html += '<td part="td-body" id="filter-pending-approval-' + index + '" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head' + (isLocation ? '' : '-click') + '" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-pending">pending</span>&nbsp;&nbsp;Pending Approval</div><div>DASHBOARD_PENDING_APPROVAL</div></div></td>'
+    html += '<td part="td-body" id="filter-rejected-' + index + '" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head' + (isLocation ? '' : '-click') + '" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-rejected">block</span>&nbsp;&nbsp;Rejected</div><div>DASHBOARD_REJECTED</div></div></td>'
+    html += '<td part="td-body" id="filter-approved-' + index + '" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head' + (isLocation ? '' : '-click') + '" class="pl-0-imp w-100 d-flex align-center"><span class="small-icon material-symbols-outlined color-done">check_circle</span>&nbsp;&nbsp;Approved</div><div>DASHBOARD_APPROVED</div></div></td>'
+    html += '<td part="td-body" id="filter-total-' + index + '" class="td-body TD_BODY_CLASS"><div class="d-flex align-center flex-wrap"><div part="td-head' + (isLocation ? '' : '-click') + '" class="pl-0-imp w-100 d-flex align-center">Total</div><div>DASHBOARD_TOTAL</div></div></td>'
     html += '</tr>';
 
     return html;
@@ -6067,7 +6067,7 @@ export class SfIEvents extends LitElement {
     let ddmmyyyy = mmddyyyy.split('/')[1] + '/' + mmddyyyy.split('/')[0] + '/' + mmddyyyy.split('/')[2];
 
     let emailcontent = `<table border="0" cellspacing="0" style="color:#666666;border-radius:5px;border:solid 1px #efefef;width:100%; margin-top:20px"><tbody><tr><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#fbfbfb;font-size:110%;font-weight:bold">Compliance ID</td><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#fbfbfb;font-size:110%">${event.id}</td></tr><tr><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%;font-weight:bold">Country</td><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%">${event.countryname.replace(/ *\([^)]*\) */g, "")}</td></tr><tr><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#fbfbfb;font-size:110%;font-weight:bold">Entity</td><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#fbfbfb;font-size:110%">${event.entityname.replace(/ *\([^)]*\) */g, "")}</td></tr><tr><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%;font-weight:bold">Location</td><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%">${event.locationname.replace(/ *\([^)]*\) */g, "")}</td></tr><tr><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#fbfbfb;font-size:110%;font-weight:bold">Statute</td><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#fbfbfb;font-size:110%">${(event.statute[0] ?? "")}</td></tr><tr><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%;font-weight:bold">Subcategory</td><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%">${event.subcategory}</td></tr><tr><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%;font-weight:bold">Reporter</td><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%">${event.reporters[0].split(';')[0]}</td></tr><tr><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%;font-weight:bold">Approver</td><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%">${event.approvers[0].split(';')[0]}</td></tr><tr><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%;font-weight:bold">Due Date</td><td style="padding:10px;padding-top:10px;padding-bottom:10px;vertical-align:top;background-color:#f5f5f5;font-size:110%">${ddmmyyyy}</td></tr></tbody></table>`;
-    
+
     let listReportingContainers = eventsContainer.querySelectorAll('.list-reporting-container') as NodeListOf<HTMLDivElement>
     for (let tempReportingContainer of listReportingContainers) {
       tempReportingContainer.style.display = 'none';
@@ -6097,7 +6097,9 @@ export class SfIEvents extends LitElement {
       }
     }
     listReportingContainer.innerHTML = html;
-    (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.emailcontent = emailcontent;
+    if (this._SfUploader[0] != null) {
+      (this._SfUploader[0].querySelector('#uploader') as SfIUploader)!.emailcontent = emailcontent;
+    }
     listReportingContainer.querySelector('.button-delete')?.addEventListener('click', async () => {
 
       await this.fetchDeleteReview(event["id"], mmddyyyy, event.entityid, event.locationid);
@@ -8038,15 +8040,15 @@ export class SfIEvents extends LitElement {
           this.csvDataRegisters += ('\n');
         }
         html += '<div class="w-100p scroll-x ' + (i != this.selectedRegisterIndex ? 'hide' : '') + ' register-body-' + i + '">';
-          html += '<table>';
-      let tablecols: string[] = []
+        html += '<table>';
+        let tablecols: string[] = []
         for (var j = 0; j < Object.keys(objCountry[statute]).length; j++) {
           const complianceId = Object.keys(objCountry[statute])[j];
           const compliance = objCountry[statute][complianceId];
           const data = JSON.parse(compliance.data);
           const cols = JSON.parse(compliance.cols);
-          for(let col of cols){
-            if(!tablecols.includes(col.toLowerCase()) && !this.EXCLUDE_COLS_FROM_REGS.includes(col.toLowerCase())){
+          for (let col of cols) {
+            if (!tablecols.includes(col.toLowerCase()) && !this.EXCLUDE_COLS_FROM_REGS.includes(col.toLowerCase())) {
               tablecols.push(col)
             }
           }
@@ -8063,23 +8065,23 @@ export class SfIEvents extends LitElement {
               // this.csvDataRegisters += ('",');
             }
           }
-          if(compliance['entities'] != null && Array.isArray(compliance['entities'])){
+          if (compliance['entities'] != null && Array.isArray(compliance['entities'])) {
             let entities = '';
-            for(let entity of compliance['entities']){
+            for (let entity of compliance['entities']) {
               entities += entity.split(';')[0].replace(/\([^)]*\)/g, "") + ','
             }
             entities = entities.slice(0, entities.length - 1)
             html += ('<td class="td-body" part="td-body-register"><span part="td-head" style="padding-left: 0px !important">entities</span><br /><sf-i-elastic-text text="' + entities + '" minLength="80" lineSize="4"></sf-i-elastic-text></td>');
-              // this.csvDataRegisters += ('"' + (data[k] + "").replace(/"/g, '') + '",');
+            // this.csvDataRegisters += ('"' + (data[k] + "").replace(/"/g, '') + '",');
           }
-          if(compliance['locations'] != null && Array.isArray(compliance['locations'])){
+          if (compliance['locations'] != null && Array.isArray(compliance['locations'])) {
             let locations = '';
-            for(let location of compliance['locations']){
+            for (let location of compliance['locations']) {
               locations += location.split(';')[0].replace(/\([^)]*\)/g, "") + ','
             }
             locations = locations.slice(0, locations.length - 1)
             html += ('<td class="td-body" part="td-body-register"><span part="td-head" style="padding-left: 0px !important">locations</span><br /><sf-i-elastic-text text="' + locations + '" minLength="80" lineSize="4"></sf-i-elastic-text></td>');
-              // this.csvDataRegisters += ('"' + (data[k] + "").replace(/"/g, '') + '",');
+            // this.csvDataRegisters += ('"' + (data[k] + "").replace(/"/g, '') + '",');
           }
           this.csvDataRegisters = this.csvDataRegisters.replace(/,\s*$/, "");
           this.csvDataRegisters += ('\n');
@@ -8089,7 +8091,7 @@ export class SfIEvents extends LitElement {
           // html += '</div>';
         }
         html += '</table>';
-          html += '</div>';
+        html += '</div>';
 
         //   html += '</table>';
         // html += '</div>';
@@ -12328,7 +12330,7 @@ export class SfIEvents extends LitElement {
 
     this.csvCompletenessStats = parameter + ",Not Started,In Progress,Complete,Rejected\n";
     for (var i = 0; i < dataBar['labels'].length; i++) {
-      this.csvCompletenessStats += dataBar['labels'][i].join(" ") + "," + dataBar['datasets'][3]['data'][i] + "," + dataBar['datasets'][1]['data'][i] + "," + dataBar['datasets'][0]['data'][i] + "," + dataBar['datasets'][2]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\n" : "");
+      this.csvCompletenessStats += "\"" + dataBar['labels'][i].join(" ") + "\",\"" + dataBar['datasets'][3]['data'][i] + "\",\"" + dataBar['datasets'][1]['data'][i] + "\",\"" + dataBar['datasets'][0]['data'][i] + "\",\"" + dataBar['datasets'][2]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\"\n" : "");
     }
 
     console.log('rendering csv completeness', dataBar, this.csvCompletenessStats);
@@ -12341,7 +12343,7 @@ export class SfIEvents extends LitElement {
 
     this.csvTimelinessStats = parameter + ",In Time,Past Due Date,Late Approved,Late Executed,Late Reported\n";
     for (var i = 0; i < dataBar['labels'].length; i++) {
-      this.csvTimelinessStats += dataBar['labels'][i].join(" ") + "," + dataBar['datasets'][0]['data'][i] + "," + dataBar['datasets'][1]['data'][i] + "," + dataBar['datasets'][3]['data'][i] + "," + dataBar['datasets'][2]['data'][i] + "," + dataBar['datasets'][4]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\n" : "");
+      this.csvTimelinessStats += "\"" + dataBar['labels'][i].join(" ") + "\",\"" + dataBar['datasets'][0]['data'][i] + "\",\"" + dataBar['datasets'][1]['data'][i] + "\",\"" + dataBar['datasets'][3]['data'][i] + "\",\"" + dataBar['datasets'][2]['data'][i] + "\",\"" + dataBar['datasets'][4]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\"\n" : "");
     }
 
     //console.log('rendering csv csvTimelinessStats', this.csvTimelinessStats);
@@ -12350,9 +12352,9 @@ export class SfIEvents extends LitElement {
 
   renderComplianceCsvForGraph = (dataBar: any, parameter: string) => {
 
-    this.csvComplianceStats = parameter + ",Scheduled,Not Complied,Partially Complied,Complied\n";
+    this.csvComplianceStats = parameter + ",Scheduled,Not Complied,Partially Complied,Complied,Complied With Gaps,Reported Non Compliance\n";
     for (var i = 0; i < dataBar['labels'].length; i++) {
-      this.csvComplianceStats += dataBar['labels'][i].join(" ") + "," + dataBar['datasets'][0]['data'][i] + "," + dataBar['datasets'][1]['data'][i] + "," + dataBar['datasets'][3]['data'][i] + "," + dataBar['datasets'][2]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\n" : "");
+      this.csvComplianceStats += "\"" + dataBar['labels'][i].join(" ") + "\",\"" + dataBar['datasets'][0]['data'][i] + "\",\"" + dataBar['datasets'][1]['data'][i] + "\",\"" + dataBar['datasets'][2]['data'][i] + "\",\"" + dataBar['datasets'][3]['data'][i] + "\",\"" + dataBar['datasets'][4]['data'][i] + "\",\"" + dataBar['datasets'][5]['data'][i] + (i < (dataBar['labels'].length - 1) ? "\"\n" : "");
     }
 
     //console.log('rendering csv csvComplianceStats', this.csvComplianceStats);
@@ -12527,7 +12529,7 @@ export class SfIEvents extends LitElement {
       }
 
       this.csvGraphStats += 'Compliance,Scheduled,Not Complied,Partially Complied,Complied,Complied With Gaps,Reported Non Compliance,Total\n';
-      this.csvGraphStats += 'Count,' + parseInt(dataScheduled) + ',' + parseInt(dataNotComplied) + ',' + parseInt(dataPartiallyComplied) + ',' + parseInt(dataComplied) + ',' + parseInt(dataCompliedWithGaps) + ',' + parseInt(dataReportedNonComplaince) + ',' + parseInt(dataTotal) + '\n';
+      this.csvGraphStats += 'Count,' + parseInt(dataScheduled) + ',' + parseInt(dataNotComplied) + ',' + parseInt(dataPartiallyComplied) + ',' + parseInt(dataCompliedWithGaps) + ',' + parseInt(dataComplied) + ',' + parseInt(dataReportedNonComplaince) + ',' + parseInt(dataTotal) + '\n';
     }
 
     //console.log('rendering timeliness graph', this.csvGraphStats);
@@ -12866,18 +12868,18 @@ export class SfIEvents extends LitElement {
 
   renderPieCsv = (pieData: any, csv: string, param: string) => {
 
-    csv += param + ','
+    csv += '"' + param + '",'
     for (var i = 0; i < Object.keys(pieData).length; i++) {
-      csv += (Object.keys(pieData)[i])
+      csv += '"' + (Object.keys(pieData)[i]) + '"'
       if (i < (Object.keys(pieData).length - 1)) {
         csv += ','
       }
     }
     csv += '\n'
 
-    csv += 'Count,'
+    csv += '"Count",'
     for (var i = 0; i < Object.keys(pieData).length; i++) {
-      csv += (pieData[Object.keys(pieData)[i]])
+      csv += '"' + (pieData[Object.keys(pieData)[i]]) + '"'
       if (i < (Object.keys(pieData).length - 1)) {
         csv += ','
       }
@@ -12971,7 +12973,7 @@ export class SfIEvents extends LitElement {
     // let username = this.userName;
     let filterString = `countryid="${this.countryId}" locationid="${this.locationId}" entityid="${this.entityId}" tagid="${this.tagId}" selectedcriteria="${this.selectedCriteria}"`;
     let rolestr = "viewer"
-    ;
+      ;
     if (filter == "reporter" || filter == "approver" || filter == "functionhead") {
       userid = filterid;
       // username = filtervalue;
@@ -13061,7 +13063,7 @@ export class SfIEvents extends LitElement {
     for (var i = 0; i < itemsCompliance.length; i++) {
       itemsCompliance[i].style.display = 'none';
     }
-    if(filterstatus != ""){
+    if (filterstatus != "") {
       this.processGraphFilter(filterstatus, divContainer);
     }
     (this._SfDetailListContainer as HTMLDivElement).querySelector('#button-detail-close')?.addEventListener('click', () => {
@@ -23257,6 +23259,53 @@ export class SfIEvents extends LitElement {
   }
 
   csvToHtmlTable = (strCsv: string) => {
+    const htmlRows = [];
+    const lines = strCsv.trim().split(/\r?\n/);
+
+    const parseCsvLine = (line: string): string[] => {
+      const result = [];
+      let current = '';
+      let inQuotes = false;
+
+      for (let i = 0; i < line.length; i++) {
+        const char = line[i];
+        const nextChar = line[i + 1];
+
+        if (char === '"' && inQuotes && nextChar === '"') {
+          current += '"'; // escaped quote
+          i++; // skip next quote
+        } else if (char === '"') {
+          inQuotes = !inQuotes;
+        } else if (char === ',' && !inQuotes) {
+          result.push(current);
+          current = '';
+        } else {
+          current += char;
+        }
+      }
+      result.push(current);
+      return result;
+    };
+
+    htmlRows.push('<br />' + parseCsvLine(lines[0])[0] + '<br /><br />');
+    htmlRows.push('<table>');
+
+    lines.forEach((line, index) => {
+      const cells = parseCsvLine(line);
+      const tag = index === 0 ? 'th' : 'td';
+      htmlRows.push('<tr>');
+      cells.forEach(cell => {
+        htmlRows.push(`<${tag} class="${tag === 'td' ? 'text-center' : ''}">${cell}</${tag}>`);
+      });
+      htmlRows.push('</tr>');
+    });
+
+    htmlRows.push('</table>');
+    return htmlRows.join('');
+  };
+
+
+  csvToHtmlTable1 = (strCsv: string) => {
 
     var html = '';
 
@@ -24619,7 +24668,7 @@ export class SfIEvents extends LitElement {
         value: clickedValue
       };
       (streamEventFilters as HTMLDivElement).style.display = 'block';
-      (streamEventFilters as HTMLDivElement).innerHTML = '<div part="badge-dashboard" class="d-flex align-center justify-between mr-10 mb-10 no-shrink"><div><span>Filtered by</span>&nbsp;&nbsp;<span id="graph-total" part="badge-filter-name">' + clickedValue + '</span></div>' + (detailsListContainer == null ? '<button id="button-filter-cancel" part="button-icon"><span class="material-symbols-outlined">close</span></button>':'') + '</div>';
+      (streamEventFilters as HTMLDivElement).innerHTML = '<div part="badge-dashboard" class="d-flex align-center justify-between mr-10 mb-10 no-shrink"><div><span>Filtered by</span>&nbsp;&nbsp;<span id="graph-total" part="badge-filter-name">' + clickedValue + '</span></div>' + (detailsListContainer == null ? '<button id="button-filter-cancel" part="button-icon"><span class="material-symbols-outlined">close</span></button>' : '') + '</div>';
       (streamEventFilters as HTMLDivElement).querySelector('#button-filter-cancel')?.addEventListener('click', () => {
         this.graphFilter = "";
         this.clearSelectedGraphParam();
@@ -28055,14 +28104,14 @@ export class SfIEvents extends LitElement {
     } else {
       view = "entity";
     }
-    
+
     path = "getallcountryevents";
 
     let url = "https://" + this.apiId + "/" + path;
     let temptagid = tagid;
-    if(temptagid == "" && locationid != "") {
+    if (temptagid == "" && locationid != "") {
       temptagid = locationid
-    }else if(temptagid == "" && userprofileid != this.userProfileId) {
+    } else if (temptagid == "" && userprofileid != this.userProfileId) {
       temptagid = "allevents"
     }
     //console.log('fetch calendar url', url);