sf-i-events 1.0.778 → 1.0.780

package/src/sf-i-events.ts

@@ -4403,7 +4403,33 @@ export class SfIEvents extends LitElement {
     return html;
 
   }
+  renderCalendarEventSummaryViewer = () => {
 
+    var html = '';
+
+    html += '<div id="stream-event-summary" part="stream-event-total" class="d-flex flex-wrap">';
+    html += '<div part="badge-dashboard" class="d-flex flex-col align-start mr-10 mb-10 no-shrink"><div class="d-flex justify-center"><span>Total:</span>&nbsp;<span id="graph-total">DASHBOARD_TOTAL</span></div><div class="d-flex justify-center">DASHBOARD_TOTAL_SUBFILTER</div></div>';
+    html += '<div part="badge-dashboard" id="chip-completeness-0" class="chip stat-completeness d-flex flex-col align-start mr-10 mb-10 no-shrink"><div class="d-flex justify-center"><span class="material-icons color-not-started">schedule</span>&nbsp;&nbsp;<span>Not Started:</span>&nbsp;<span id="graph-not-started">DASHBOARD_NOT_STARTED</span></div><div class="d-flex justify-center">DASHBOARD_NOT_STARTED_SUBFILTER</div></div>';
+    html += '<div part="badge-dashboard" id="chip-completeness-1" class="chip stat-completeness d-flex flex-col align-start mr-10 mb-10 no-shrink"><div class="d-flex justify-center"><span class="material-symbols-outlined color-pending">pending</span>&nbsp;&nbsp;<span>Pending Approval:</span>&nbsp;<span id="graph-pending-approval">DASHBOARD_PENDING_APPROVAL</span></div><div class="d-flex justify-center">DASHBOARD_PENDING_APPROVAL_SUBFILTER</div></div>';
+    html += '<div part="badge-dashboard" id="chip-completeness-2" class="chip stat-completeness d-flex flex-col align-start mr-10 mb-10 no-shrink"><div class="d-flex justify-center"><span class="material-symbols-outlined color-rejected">block</span>&nbsp;&nbsp;<span>Rejected:</span>&nbsp;<span id="graph-rejected">DASHBOARD_REJECTED</span></div><div class="d-flex justify-center">DASHBOARD_REJECTED_SUBFILTER</div></div>';
+    html += '<div part="badge-dashboard" id="chip-completeness-3" class="chip stat-completeness d-flex flex-col align-start mr-10 mb-10 no-shrink"><div class="d-flex justify-center"><span class="material-symbols-outlined color-done">check_circle</span>&nbsp;&nbsp;<span>Approved:</span>&nbsp;<span id="graph-approved">DASHBOARD_APPROVED</span></div><div class="d-flex justify-center">DASHBOARD_APPROVED_SUBFILTER</div></div>';
+    html += '<div part="badge-dashboard" id="chip-timeliness-0" class="chip stat-timeliness justify-center align-center mr-10 mb-10 no-shrink late-statuses"><span class="material-icons color-in-time">schedule</span>&nbsp;&nbsp;<span>In Time:</span>&nbsp;<span id="graph-in-time">DASHBOARD_IN_TIME</span></div>';
+    html += '<div part="badge-dashboard" id="chip-timeliness-1" class="chip stat-timeliness justify-center align-center mr-10 mb-10 no-shrink late-statuses"><span class="material-icons color-past-due-date">timer</span>&nbsp;&nbsp;<span>Past Due Date:</span>&nbsp;<span id="graph-past-due-date">DASHBOARD_PAST_DUE_DATE</span></div>';
+    html += '<div part="badge-dashboard" id="chip-timeliness-2" class="chip stat-timeliness justify-center align-center mr-10 mb-10 no-shrink late-statuses"><span class="material-icons color-late-reported">report_off</span>&nbsp;&nbsp;<span>Late Reported:</span>&nbsp;<span id="graph-late-reported">DASHBOARD_LATE_REPORTED</span></div>';
+    html += '<div part="badge-dashboard" id="chip-timeliness-3" class="chip stat-timeliness justify-center align-center mr-10 mb-10 no-shrink late-statuses"><span class="material-icons color-late-approved">remove_done</span>&nbsp;&nbsp;<span>Late Approved:</span>&nbsp;<span id="graph-late-approved">DASHBOARD_LATE_APPROVED</span></div>';
+    html += '<div part="badge-dashboard" id="chip-timeliness-4" class="chip stat-timeliness justify-center align-center mr-10 mb-10 no-shrink late-statuses"><span class="material-icons color-late-executed">running_with_errors</span>&nbsp;&nbsp;<span>Late Executed:</span>&nbsp;<span id="graph-late-executed">DASHBOARD_LATE_EXECUTED</span></div>';
+
+    html += '<div part="badge-dashboard" id="chip-compliance-0" class="chip stat-compliance justify-center align-center mr-10 mb-10 no-shrink compliance-statuses"><span class="material-icons color-scheduled">schedule</span>&nbsp;&nbsp;<span>Scheduled:</span>&nbsp;<span id="graph-scheduled">DASHBOARD_SCHEDULED</span></div>';
+    html += '<div part="badge-dashboard" id="chip-compliance-1" class="chip stat-compliance justify-center align-center mr-10 mb-10 no-shrink compliance-statuses"><span class="material-icons color-not-complied">disabled_by_default</span>&nbsp;&nbsp;<span>Not Complied:</span>&nbsp;<span id="graph-not-complied">DASHBOARD_NOT_COMPLIED</span></div>';
+    html += '<div part="badge-dashboard" id="chip-compliance-2" class="chip stat-compliance justify-center align-center mr-10 mb-10 no-shrink compliance-statuses"><span class="material-icons color-partially-complied">rule</span>&nbsp;&nbsp;<span>Partially Complied:</span>&nbsp;<span id="graph-partially-complied">DASHBOARD_PARTIALLY_COMPLIED</span></div>';
+    html += '<div part="badge-dashboard" id="chip-compliance-3" class="chip stat-compliance justify-center align-center mr-10 mb-10 no-shrink compliance-statuses"><span class="material-symbols-outlined color-complied">sweep</span>&nbsp;&nbsp;<span>Complied:</span>&nbsp;<span id="graph-complied">DASHBOARD_COMPLIED</span></div>';
+    html += '</div>';
+
+    html += '<div id="stream-event-filter" part="stream-event-total" class="d-flex flex-wrap"></div>';
+
+    return html;
+
+  }
   renderStatisticsFiltersTableStart = () => {
 
     var html = '';
@@ -4414,11 +4440,15 @@ export class SfIEvents extends LitElement {
 
   }
 
-  renderStatisticsFiltersTableRow = () => {
+  renderStatisticsFiltersTableRow = (filterUser: boolean = false) => {
 
     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>DASHBOARD_FILTER_NAME</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" class="pl-0-imp w-100 d-flex align-center">FILTER_CRITERIA_NAME</div><div>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" 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" 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"><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" 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"><span class="small-icon material-symbols-outlined color-rejected">block</span>&nbsp;&nbsp;Rejected</div><div>DASHBOARD_REJECTED</div></div></td>'
@@ -4433,7 +4463,7 @@ export class SfIEvents extends LitElement {
   renderStatisticsFiltersTableEnd = () => {
 
     var html = '';
-    html += '</tbody></table><div>';
+    html += '</tbody></table></div>';
 
     return html;
 
@@ -5099,7 +5129,13 @@ export class SfIEvents extends LitElement {
 
   renderStatistics = (_firstDay: any, _endDay: any, iInit: number, iLast: number, showGraph: boolean, index: number, month: number, period: string, firstDate: any = null, parametersTitle: string) => {
     var total = 0, notStarted = 0, approved = 0, pendingApproval = 0, rejected = 0;
+    let subfiltersTotal:any = {}
+    let subfiltersNotStarted:any = {}
+    let subfiltersPendingApproval:any = {}
+    let subfiltersRejected:any = {}
+    let subfiltersApproved:any = {}
     var html = '';
+
     // var lastDay = iLast;
     // var slice = 2;
     this.clearGraphData();
@@ -5108,7 +5144,7 @@ export class SfIEvents extends LitElement {
   
     html += this.renderCalendarStatisticsGraphs(showGraph, parametersTitle);
     html += this.renderCalendarContainerDivStart(index)
-    html += this.renderCalendarEventSummary();
+    html += this.renderCalendarEventSummaryViewer();
     let filtersTableHtml = ""
     if(Object.keys(this.statisticsFiltersData).length > 0){
       filtersTableHtml += this.renderStatisticsFiltersTableStart()
@@ -5139,26 +5175,69 @@ export class SfIEvents extends LitElement {
 
       if(this.statistics[mmdd] != null) {
 
-        console.log('mmdd', mmdd, this.statistics[mmdd]['approved']);  
+          
         // html += this.renderCalendarRowDivStart(i, firstDate, mmdd.split("/")[1] + "/" + mmdd.split("/")[0]);
         total += this.statistics[mmdd].count;
+        console.log('mmdd', mmdd, this.statistics[mmdd].count, total);
         notStarted += this.statistics[mmdd]["not-started"] ?? 0;
         pendingApproval += this.statistics[mmdd]["pending-approval"] ?? 0;
         rejected += this.statistics[mmdd]["rejected"] ?? 0;
         approved += this.statistics[mmdd]["approved"] ?? 0;
-          
+        for(let subfilter of Object.keys(this.statistics['subfilters'])){
+          if(subfiltersTotal[subfilter] == null){
+            subfiltersTotal[subfilter] = 0
+          }
+          if(subfiltersNotStarted[subfilter] == null){
+            subfiltersNotStarted[subfilter] = 0
+          }
+          if(subfiltersPendingApproval[subfilter] == null){
+            subfiltersPendingApproval[subfilter] = 0
+          }
+          if(subfiltersRejected[subfilter] == null){
+            subfiltersRejected[subfilter] = 0
+          }
+          if(subfiltersApproved[subfilter] == null){
+            subfiltersApproved[subfilter] = 0
+          }
+          if(this.statistics['subfilters'][subfilter][mmdd] != null){
+            
+            
+            subfiltersTotal[subfilter] += (this.statistics['subfilters'][subfilter][mmdd].count)
+
+            
+            subfiltersNotStarted[subfilter] += (this.statistics['subfilters'][subfilter][mmdd]['not-started'] ?? 0)
+
+            
+            subfiltersPendingApproval[subfilter] += (this.statistics['subfilters'][subfilter][mmdd]['pending-approval'] ?? 0)
+
+            
+            subfiltersRejected[subfilter] += (this.statistics['subfilters'][subfilter][mmdd]['rejected'] ?? 0)
+
+            
+            subfiltersApproved[subfilter] += (this.statistics['subfilters'][subfilter][mmdd]['approved'] ?? 0)
+          }
+        }
       } 
       
       
     }
 
     if(Object.keys(this.statisticsFiltersData).length > 0){
+      
       let filtercriteria = Object.keys(this.statisticsFiltersData)[0]
       let sortedFilters = Util.alphabeticalSort(this.statisticsMeta[filtercriteria])
       for(let [filterindex, filterval] of sortedFilters.entries()){
         let filtername = filterval.split(';')[0]
         let filterid = filterval.split(';')[1]
         let filterTotal = 0, filterNotStarted = 0, filterPendingApproval = 0, filterRejected = 0, filterApproved = 0;
+        let lastActive = "";
+        let lastAction = "";
+        let subfiltersFilterTotal:any = {}
+        let subfiltersFilterNotStarted:any = {}
+        let subfiltersFilterPendingApproval:any = {}
+        let subfiltersFilterRejected:any = {}
+        let subfiltersFilterApproved:any = {}
+
         for(var i = iInit; i <= iLast; i++) {
 
           let mmdd : string = "";
@@ -5171,16 +5250,50 @@ export class SfIEvents extends LitElement {
             mmdd = ("0" + (currDate.getMonth()+1)).slice(-2) + "/" + ("0" + currDate.getDate()).slice(-2);
           }
           if(this.statisticsFiltersData[filtercriteria][filterid] != null){
+            if(this.statisticsFiltersData[filtercriteria][filterid]['lasttime'] != null){
+              lastAction = this.statisticsFiltersData[filtercriteria][filterid]['lasttime']['lastaction'] ?? ""
+              lastActive = this.statisticsFiltersData[filtercriteria][filterid]['lasttime']['lastactive'] ?? ""
+            }
             if(this.statisticsFiltersData[filtercriteria][filterid][mmdd] != null){
               filterTotal += this.statisticsFiltersData[filtercriteria][filterid][mmdd].count
               filterNotStarted += this.statisticsFiltersData[filtercriteria][filterid][mmdd]['not-started'] ?? 0
               filterPendingApproval += this.statisticsFiltersData[filtercriteria][filterid][mmdd]['pending-approval'] ?? 0
               filterRejected += this.statisticsFiltersData[filtercriteria][filterid][mmdd]['rejected'] ?? 0
               filterApproved += this.statisticsFiltersData[filtercriteria][filterid][mmdd]['approved'] ?? 0
+              for(let subfilter of Object.keys(this.statisticsFiltersData[filtercriteria][filterid]['subfilters'])){
+                if(subfiltersFilterTotal[subfilter] == null){
+                  subfiltersFilterTotal[subfilter] = 0
+                }
+                if(subfiltersFilterNotStarted[subfilter] == null){
+                  subfiltersFilterNotStarted[subfilter] = 0
+                }
+                if(subfiltersFilterPendingApproval[subfilter] == null){
+                  subfiltersFilterPendingApproval[subfilter] = 0
+                }
+                if(subfiltersFilterRejected[subfilter] == null){
+                  subfiltersFilterRejected[subfilter] = 0
+                }
+                if(subfiltersFilterApproved[subfilter] == null){
+                  subfiltersFilterApproved[subfilter] = 0
+                }
+                if(this.statisticsFiltersData[filtercriteria][filterid]['subfilters'][subfilter][mmdd] != null){
+                  
+                  subfiltersFilterTotal[subfilter] += (this.statisticsFiltersData[filtercriteria][filterid]['subfilters'][subfilter][mmdd].count)
+                  console.log('subfilterTotal',subfiltersFilterTotal);
+                  
+                  subfiltersFilterNotStarted[subfilter] += (this.statisticsFiltersData[filtercriteria][filterid]['subfilters'][subfilter][mmdd]['not-started'] ?? 0)
+
+                  subfiltersFilterPendingApproval[subfilter] += (this.statisticsFiltersData[filtercriteria][filterid]['subfilters'][subfilter][mmdd]['pending-approval'] ?? 0)
+
+                  subfiltersFilterRejected[subfilter] += (this.statisticsFiltersData[filtercriteria][filterid]['subfilters'][subfilter][mmdd]['rejected'] ?? 0)
+
+                  subfiltersFilterApproved[subfilter] += (this.statisticsFiltersData[filtercriteria][filterid]['subfilters'][subfilter][mmdd]['approved'] ?? 0)
+                }
+              }
             }
           }
         }
-        filtersTableHtml += this.renderStatisticsFiltersTableRow()
+        filtersTableHtml += this.renderStatisticsFiltersTableRow(lastAction != "" || lastActive != "")
         if(filterindex % 2 == 0){
           filtersTableHtml = filtersTableHtml.replace(/TD_BODY_CLASS/g, "td-light");  
         }else{
@@ -5188,11 +5301,26 @@ export class SfIEvents extends LitElement {
         }
         filtersTableHtml = filtersTableHtml.replace("FILTER_CRITERIA_NAME", filtercriteria+"");
         filtersTableHtml = filtersTableHtml.replace("DASHBOARD_FILTER_NAME", (filtername+"").replace(/\([^)]*\)/g,""));
-        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_TOTAL", filterTotal+"");
-        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_NOT_STARTED", filterNotStarted+ Util.percentageString(filterNotStarted, filterTotal));
-        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_APPROVED", filterApproved + Util.percentageString(filterApproved, filterTotal));
-        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_PENDING_APPROVAL", filterPendingApproval + Util.percentageString(filterPendingApproval, filterTotal));
-        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_REJECTED", filterRejected + Util.percentageString(filterRejected, filterTotal));
+        let filterTotalHtml = filterTotal + ""
+        let filterNotStartedHtml = filterNotStarted + Util.percentageString(filterNotStarted, filterTotal)
+        let filterPendingApprovalHtml = filterPendingApproval + Util.percentageString(filterPendingApproval, filterTotal)
+        let filterRejectedHtml = filterRejected + Util.percentageString(filterRejected, filterTotal)
+        let filterApprovedHtml = filterApproved + Util.percentageString(filterApproved, filterTotal)
+        for(let subfilter of Object.keys(this.statisticsFiltersData[filtercriteria][filterid]['subfilters'])){
+          filterTotalHtml += `<br />${subfilter}: ${subfiltersFilterTotal[subfilter]}${Util.percentageString(subfiltersFilterTotal[subfilter], filterTotal)}`
+          filterNotStartedHtml += `<br />${subfilter}: ${subfiltersFilterNotStarted[subfilter]}${Util.percentageString(subfiltersFilterNotStarted[subfilter], filterNotStarted)}`
+          filterPendingApprovalHtml += `<br />${subfilter}: ${subfiltersFilterPendingApproval[subfilter]}${Util.percentageString(subfiltersFilterPendingApproval[subfilter], filterPendingApproval)}`
+          filterRejectedHtml += `<br />${subfilter}: ${subfiltersFilterRejected[subfilter]}${Util.percentageString(subfiltersFilterRejected[subfilter], filterRejected)}`
+          filterApprovedHtml += `<br />${subfilter}: ${subfiltersFilterApproved[subfilter]}${Util.percentageString(subfiltersFilterApproved[subfilter], filterApproved)}`
+        }
+        console.log('subfilterstotal', subfiltersFilterTotal)
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_TOTAL", filterTotalHtml);
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_NOT_STARTED", filterNotStartedHtml);
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_APPROVED", filterApprovedHtml);
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_PENDING_APPROVAL", filterPendingApprovalHtml);
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_REJECTED", filterRejectedHtml);
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_LAST_ACTION", lastAction);
+        filtersTableHtml = filtersTableHtml.replace("DASHBOARD_LAST_ACTIVE", lastActive);
       }
       filtersTableHtml += this.renderStatisticsFiltersTableEnd()
     }
@@ -5208,14 +5336,31 @@ export class SfIEvents extends LitElement {
 
     console.log('progress', this.period, total, notStarted, approved, this.statistics)
 
-    html = html.replace("DASHBOARD_TOTAL", total+"");
-    html = html.replace("DASHBOARD_NOT_STARTED", notStarted+"");
-    html = html.replace("DASHBOARD_APPROVED", approved+"");
-    html = html.replace("DASHBOARD_PENDING_APPROVAL", pendingApproval+"");
-    html = html.replace("DASHBOARD_REJECTED", rejected+"");
+    let totalHtml = ""
+    let notStartedHtml = ""
+    let pendingApprovalHtml = ""
+    let rejectedHtml = ""
+    let approvedHtml = ""
+    for(let subfilter of Object.keys(this.statistics['subfilters'])){
+      totalHtml += `<br />${subfilter}: ${subfiltersTotal[subfilter]}${Util.percentageString(subfiltersTotal[subfilter], total)}`
+      notStartedHtml += `<br />${subfilter}: ${subfiltersNotStarted[subfilter]}${Util.percentageString(subfiltersNotStarted[subfilter], notStarted)}`
+      pendingApprovalHtml += `<br />${subfilter}: ${subfiltersPendingApproval[subfilter]}${Util.percentageString(subfiltersPendingApproval[subfilter], pendingApproval)}`
+      rejectedHtml += `<br />${subfilter}: ${subfiltersRejected[subfilter]}${Util.percentageString(subfiltersRejected[subfilter], rejected)}`
+      approvedHtml += `<br />${subfilter}: ${subfiltersApproved[subfilter]}${Util.percentageString(subfiltersApproved[subfilter], approved)}`
+    }
+    html = html.replace("DASHBOARD_TOTAL", total + "");
+    html = html.replace("DASHBOARD_TOTAL_SUBFILTER", totalHtml.replace('<br />',''));
+    html = html.replace("DASHBOARD_NOT_STARTED", notStarted + "");
+    html = html.replace("DASHBOARD_NOT_STARTED_SUBFILTER", notStartedHtml.replace('<br />',''));
+    html = html.replace("DASHBOARD_APPROVED", approved + "");
+    html = html.replace("DASHBOARD_APPROVED_SUBFILTER", approvedHtml.replace('<br />',''));
+    html = html.replace("DASHBOARD_PENDING_APPROVAL", pendingApproval + "");
+    html = html.replace("DASHBOARD_PENDING_APPROVAL_SUBFILTER", pendingApprovalHtml.replace('<br />',''));
+    html = html.replace("DASHBOARD_REJECTED", rejected + "");
+    html = html.replace("DASHBOARD_REJECTED_SUBFILTER", rejectedHtml.replace('<br />',''));
 
     this.htmlDataStats = 'Completeness<br /><br /><table class="w-100"><tr><th class="w-14">Total</th><th class="w-14">Not Started</th><th class="w-14">Approved</th><th class="w-14">Pending Approval</th><th class="w-14">Rejected</th><tr>';
-    this.htmlDataStats += '<tr><td class="w-14 text-center td-odd">'+total+'</td><td class="w-14 text-center td-odd">'+notStarted+'</td><td class="w-14 text-center td-odd">'+approved+'</td><td class="w-14 text-center td-odd">'+pendingApproval+'</td><td class="w-14 text-center td-odd">'+rejected+'</td></table>'
+    this.htmlDataStats += '<tr><td class="w-14 text-center td-odd">'+total+totalHtml+'</td><td class="w-14 text-center td-odd">'+notStarted+notStartedHtml+'</td><td class="w-14 text-center td-odd">'+approved+approvedHtml+'</td><td class="w-14 text-center td-odd">'+pendingApproval+pendingApprovalHtml+'</td><td class="w-14 text-center td-odd">'+rejected+rejectedHtml+'</td></table>'
     if(Object.keys(this.statisticsFiltersData).length > 0){
       this.htmlDataStats += '<br /><br />Report<br /><br />'
       this.htmlDataStats += filtersTableHtml
@@ -6979,10 +7124,14 @@ export class SfIEvents extends LitElement {
     }
     
     for(let criteria of Object.keys(this.statisticsMeta)){
+      if(criteria == "subfilters"){
+        continue;
+      }
       let option = new Option()
       option.value = criteria;
       console.log('statistics filters criteria',criteria, filterscriteria, criteria == filterscriteria)
       option.selected = (criteria == filterscriteria)
+      
       if(criteria == "reporter" || criteria == "approver" || criteria == "functionhead"){
         option.innerHTML = "user:" + criteria
       }else{
@@ -7006,7 +7155,10 @@ export class SfIEvents extends LitElement {
       let inputLabelCriteria = eventsContainer.querySelector('#input-label-criteria') as HTMLLabelElement
       let selectFilterValues = eventsContainer.querySelector('#select-filter-values') as HTMLSelectElement
       selectFilterValues.value = ""
-      this.processDateSelectionViewer(eventsContainer)
+      let inputLabelSubfilters = eventsContainer.querySelector('#input-label-subfilter') as HTMLLabelElement
+      let selectSubfilterCriteria = eventsContainer.querySelector('#select-subfilter-criteria') as HTMLSelectElement
+      selectSubfilterCriteria.value = ""
+      
       
       selectFilterValues.innerHTML = ""
       let option = new Option()
@@ -7029,10 +7181,37 @@ export class SfIEvents extends LitElement {
           console.log('changed')
           this.processDateSelectionViewer(eventsContainer);
         })
+        selectSubfilterCriteria.style.display = 'block'
+        inputLabelSubfilters.style.display = 'block'
+        let sortedSubfilters = Util.alphabeticalSort(Object.keys(this.statisticsMeta.subfilters))
+        
+        if(sortedSubfilters.length > 1){
+          let option = new Option()
+          option.value = "";
+          option.innerHTML = "All";
+          selectSubfilterCriteria.add(option)
+        }
+        for(let subfilter of sortedSubfilters){
+          let option = new Option()
+          option.value = subfilter;
+          option.innerHTML = subfilter
+          selectSubfilterCriteria.add(option)
+        }
+        let inputLabelSubfiltersValue = eventsContainer.querySelector('#input-label-subfilter-value') as HTMLLabelElement
+        let selectSubfilterValues = eventsContainer.querySelector('#select-subfilter-values') as HTMLSelectElement
+        inputLabelSubfiltersValue.style.display = 'none'
+        selectSubfilterValues.style.display = 'none'
+        let selectSubfilterCriteriaNew = Util.clearListeners(selectSubfilterCriteria)
+        selectSubfilterCriteriaNew.addEventListener('change',() => {
+          this.processDateSelectionViewer(eventsContainer)
+        })
       }else{
         selectFilterValues.style.display = 'none'
         inputLabelCriteria.style.display = 'none'
+        selectSubfilterCriteria.style.display = 'none'
+        inputLabelSubfilters.style.display = 'none'
       }
+      this.processDateSelectionViewer(eventsContainer)
     })
     let selectFilterCriteriaMobileNew = Util.clearListeners(selectFilterCriteriaMobile)
     selectFilterCriteriaMobileNew.addEventListener('change',(ev: any) => {
@@ -7342,7 +7521,7 @@ export class SfIEvents extends LitElement {
     radioRisk?.addEventListener('click', () => {
 
       this.flowGraph = this.FLOW_GRAPH_RISKAREAS;
-      //console.log('setting flow graph to ', this.flowGraph);
+      // console.log('setting flow graph to ', this.flowGraph);
       this.renderRangeEvents(new Date(valueStart), (new Date(valueEnd).getTime() - new Date(valueStart).getTime())/(1000*60*60*24), eventContainer);
       this.renderRiskGraph(eventContainer)
       this.attachHandlers(eventContainer, valueStart, valueEnd);
@@ -7541,7 +7720,6 @@ export class SfIEvents extends LitElement {
     //console.log('valueend', valueEnd);
     let filtercriteria = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).value 
     let filtercriterianame = ""
-    console.log('criteria', ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).selectedIndex]);
     if(((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).selectedIndex] != null){
       filtercriterianame = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria') as HTMLSelectElement).selectedIndex].innerHTML
     } 
@@ -7571,6 +7749,31 @@ export class SfIEvents extends LitElement {
         this.htmlStatsFilter = "Filters Selected -> " + Util.titleCase(filtercriterianame) + " -> " + Util.titleCase(filtervaluename)
       }
     }
+
+    let subfiltervalue = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values') as HTMLSelectElement).value
+    let subfiltervaluename = ""
+    if(((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values') as HTMLSelectElement).selectedIndex] != null){
+      subfiltervaluename = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values') as HTMLSelectElement).selectedIndex].innerHTML 
+    }
+    if(subfiltervalue == ""){
+      subfiltervalue = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values-mobile') as HTMLSelectElement).value
+      if(((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values-mobile') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values-mobile') as HTMLSelectElement).selectedIndex] != null){
+        subfiltervaluename = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values-mobile') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values-mobile') as HTMLSelectElement).selectedIndex].innerHTML
+      }
+    }
+    console.log('subfiltervalue, subfiltervaluename', subfiltervalue, subfiltervaluename)
+    let subfiltercriteria = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria') as HTMLSelectElement).value 
+    let subfiltercriterianame = ""
+    if(((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria') as HTMLSelectElement).selectedIndex] != null){
+      subfiltercriterianame = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria') as HTMLSelectElement).selectedIndex].innerHTML
+    } 
+    if(subfiltercriteria == ""){
+      subfiltercriteria = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria-mobile') as HTMLSelectElement).value
+      if(((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria-mobile') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria-mobile') as HTMLSelectElement).selectedIndex] != null){
+        subfiltercriterianame = ((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria-mobile') as HTMLSelectElement).options[((this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria-mobile') as HTMLSelectElement).selectedIndex].innerHTML
+      }
+    }
+    console.log('subfiltercriteria, subfiltercriterianame', subfiltercriteria, subfiltercriterianame)
     if(valueStart != "" && valueEnd != "") {
       this.initCustomRightColViewer();
       if(!this.checkStartDateEarliness(valueStart)) {
@@ -7597,7 +7800,7 @@ export class SfIEvents extends LitElement {
       //console.log('tsstart', tsStart);
       //console.log('tsend', tsEnd);
       
-      let meta = await this.fetchStatistics((tsStart.getMonth() + 1) + "/" + tsStart.getDate() + "/" + tsStart.getFullYear(), (tsEnd.getMonth() + 1) + "/" + tsEnd.getDate() + "/" + tsEnd.getFullYear(), filtercriteria, filtervalue);
+      let meta = await this.fetchStatistics((tsStart.getMonth() + 1) + "/" + tsStart.getDate() + "/" + tsStart.getFullYear(), (tsEnd.getMonth() + 1) + "/" + tsEnd.getDate() + "/" + tsEnd.getFullYear(), filtercriteria, filtervalue, subfiltercriteria, subfiltervalue);
       this.renderRangeStatistics(new Date(valueStart), ((new Date(valueEnd).getTime()+24*60*60*1000) - new Date(valueStart).getTime())/(1000*60*60*24), (this._SfCustomContainer as HTMLDivElement));
       
       if(meta != null) this.renderStatisticsFilters((this._SfCustomContainer as HTMLDivElement))
@@ -9678,6 +9881,16 @@ export class SfIEvents extends LitElement {
         html += '<label part="input-label-filter-value" id="input-label-criteria-mobile"></label>'
         html += '<select id="select-filter-values-mobile"></select>'
       html += '</div>';
+      
+      html += '<div class="title-item-date">';
+        html += '<label part="input-label-subfilter-criteria" id="input-label-subfilter-mobile">Subfilter Criteria</label>'
+        html += '<select id="select-subfilter-criteria-mobile"></select>'
+      html += '</div>';
+      html += '<div class="title-item-date">';
+        html += '<label part="input-label-subfilter-value" id="input-label-subfilter-value-mobile"></label>'
+        html += '<select id="select-subfilter-values-mobile"></select>'
+      html += '</div>';
+      
 
     html += '</div>';
 
@@ -9709,6 +9922,15 @@ export class SfIEvents extends LitElement {
         html += '<label part="input-label-filter-value" id="input-label-criteria"></label>'
         html += '<select part="input-select-calendar-filter" id="select-filter-values"></select>'
         html += '</div>';
+        html += '<div class="title-item-date d-flex flex-col align-start">';
+        html += '<label part="input-label-subfilter-criteria" id="input-label-subfilter">Subfilter Criteria</label>'
+        html += '<select part="input-select-calendar-subfilter" id="select-subfilter-criteria"></select>'
+        html += '</div>';
+        html += '<div class="title-item-date d-flex flex-col align-start">';
+        html += '<label part="input-label-subfilter-value" id="input-label-subfilter-value"></label>'
+        html += '<select part="input-select-calendar-subfilter" id="select-subfilter-values"></select>'
+        
+        html += '</div>';
         
 
       html += '</div>';
@@ -9851,6 +10073,12 @@ export class SfIEvents extends LitElement {
     selectFilterValues.style.display = 'none'
     let inputLabelFilter = (this._SfCustomContainer as HTMLDivElement).querySelector('#input-label-filter') as HTMLLabelElement
     inputLabelFilter.style.display = 'none';
+    let selectSubfilterCriteria = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria') as HTMLSelectElement
+    selectSubfilterCriteria.style.display = 'none'
+    let selectSubfilterValues = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values') as HTMLSelectElement
+    selectSubfilterValues.style.display = 'none'
+    let inputLabelSubfilter = (this._SfCustomContainer as HTMLDivElement).querySelector('#input-label-subfilter') as HTMLLabelElement
+    inputLabelSubfilter.style.display = 'none';
 
     let selectFilterCriteriaMobile = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-filter-criteria-mobile') as HTMLSelectElement
     selectFilterCriteriaMobile.style.display = 'none'
@@ -9858,6 +10086,12 @@ export class SfIEvents extends LitElement {
     selectFilterValuesMobile.style.display = 'none'
     let inputLabelFilterMobile = (this._SfCustomContainer as HTMLDivElement).querySelector('#input-label-filter-mobile') as HTMLLabelElement
     inputLabelFilterMobile.style.display = 'none';
+    let selectSubfilterCriteriaMobile = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-criteria-mobile') as HTMLSelectElement
+    selectSubfilterCriteriaMobile.style.display = 'none'
+    let selectSubfilterValuesMobile = (this._SfCustomContainer as HTMLDivElement).querySelector('#select-subfilter-values-mobile') as HTMLSelectElement
+    selectSubfilterValuesMobile.style.display = 'none'
+    let inputLabelSubfilterMobile = (this._SfCustomContainer as HTMLDivElement).querySelector('#input-label-subfilter-mobile') as HTMLLabelElement
+    inputLabelSubfilterMobile.style.display = 'none';
     
     ((this._SfCustomContainer as HTMLDivElement).querySelector('#button-year-to-date') as HTMLButtonElement).click();
   }
@@ -21702,6 +21936,7 @@ export class SfIEvents extends LitElement {
       "approved": approved,
       "entityid": entityId,
       "locationid": locationId,
+      "userid": this.userProfileId,
       "username": this.userName,
       "module" : module
     } 
@@ -21760,6 +21995,7 @@ export class SfIEvents extends LitElement {
       "approved": approved,
       "entityid": entityId,
       "locationid": locationId,
+      "userid": this.userProfileId,
       "username": this.userName,
       "module" : module
     } 
@@ -23839,7 +24075,7 @@ export class SfIEvents extends LitElement {
 
   }
 
-  fetchStatistics = async(startDate: string = "", endDate: string = "", filtercriteria: string, filterid: string) => {
+  fetchStatistics = async(startDate: string = "", endDate: string = "", filtercriteria: string, filterid: string, subfiltercriteria: string, subfilterid: string) => {
 
     let path = "";
     this.sdate = startDate;
@@ -23869,7 +24105,7 @@ export class SfIEvents extends LitElement {
     }
     
     //console.log('fetch calendar url', url);
-    let urlBody :any = {"projectid": this.projectId, "userid": this.userProfileId, "role": this.myRole, "sdate": sDate, "edate": eDate,"filtercriteria": filtercriteria};
+    let urlBody :any = {"projectid": this.projectId, "userid": this.userProfileId, "role": this.myRole, "sdate": sDate, "edate": eDate,"filtercriteria": filtercriteria, "subfiltercriteria":subfiltercriteria, "subfilterid": subfilterid};
 
     if(filtercriteria == 'function') {
       urlBody["functionid"] = filterid;