Merge branch 'master' into features/NEW-COLORS-EXTERNALIZATION-PROD

# Conflicts: # src/app/analytics/metrics/requests/requests.component.scss # src/assets/i18n/ar.json # src/assets/i18n/az.json # src/assets/i18n/de.json # src/assets/i18n/en.json # src/assets/i18n/es.json # src/assets/i18n/fr.json # src/assets/i18n/it.json # src/assets/i18n/kk.json # src/assets/i18n/pt.json # src/assets/i18n/ru.json # src/assets/i18n/sr.json # src/assets/i18n/sv.json # src/assets/i18n/tr.json # src/assets/i18n/uk.json # src/assets/i18n/uz.json
Tiledesk · Jan 14, 2025 · 68dfd21 · 68dfd21
2 parents 7a8dd89 + 7ed24b0
commit 68dfd21
Show file tree

Hide file tree

Showing 33 changed files with 518 additions and 170 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # tiledesk-dashboard
 
+### 2.7.59
+- Improves and fixes the conversations report in Analytics > Metrics > Conversations
+
+### 2.7.58
+- Minor improvements and bug fixing
+
 ### 2.7.57
 - Improves the Changelog notifications
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tiledesk/tiledesk-dashboard",
-  "version": "2.7.57",
+  "version": "2.7.59",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --aot",

diff --git a/src/app/analytics/metrics/requests/requests.component.html b/src/app/analytics/metrics/requests/requests.component.html
@@ -9,27 +9,138 @@ <h4 class="section-title">
 <div class="row" style="text-align: center; margin-top: 6px;">
   <!-- left side card -->
   <div class="col-md-3">
-    <div class="card" style="border-radius: 10px; min-height: 424px;">
-      <div
+    <div class="card" style="border-radius: 10px; min-height: 468px;">
+      <!-- <div
         style="padding-bottom: 28px; padding-top: 30px; font-size: 18px; font-family: 'Poppins', 'Roboto',  'Arial', sans-serif">
         {{ "Last30DaysConversations" | translate }}
       </div>
       <div class="card-content">
         <p class="number-analytics">{{ conversationsCountLastMonth }}</p>
-        <!-- <p *ngIf="conversationsCountLastMonth == null" class="number-analytics" style="font-size: 35px;">0</p> -->
+      </div> -->
+
+      <div class="conv-analytics-left-card-title-wpr">
+        <!-- {{ 'Analytics.RequestChartTitle' | translate }} {{lastdays}}
+        <span *ngIf="selectedDaysId <= 30">{{ 'Analytics.Days' | translate }}</span>
+        <span *ngIf="selectedDaysId === 90 || selectedDaysId === 180  ">{{ 'Analytics.Months' | translate }}</span>
+        <span *ngIf="selectedDaysId === 360">{{ 'Analytics.Year' | translate }}</span> -->
+
+
+        <div class="conv-analytics-left-card-title" *ngIf="selectedDaysId === 7">
+          <!-- {{ 'Analytics.Last' | translate}} 7 <span style="text-transform: lowercase;"> {{ 'Analytics.Days' |
+            translate}} </span><span style="text-transform: lowercase;"> {{ 'Requests' | translate }}</span> -->
+            {{'ConversationsInTheLastDays' | translate: {range_count: 7} }}
+        </div>
+        <div class="conv-analytics-left-card-title" *ngIf="selectedDaysId === 15">
+          {{'ConversationsInTheLastDays' | translate: {range_count: 15} }}
+        </div>
+        <div class="conv-analytics-left-card-title" *ngIf="selectedDaysId === 30">
+          {{'ConversationsInTheLastDays' | translate: {range_count: 30} }}
+        </div>
+        <div class="conv-analytics-left-card-title" *ngIf="selectedDaysId === 90">
+          {{'ConversationsInTheLastMonths' | translate: {range_count: 3} }}
+        </div>
+        <div class="conv-analytics-left-card-title" *ngIf="selectedDaysId === 180">
+          {{'ConversationsInTheLastMonths' | translate: {range_count: 6} }}
+        </div>
+        <div class="conv-analytics-left-card-title" *ngIf="selectedDaysId === 365">
+          {{'ConversationsInTheLastDays' | translate: {range_count: 365} }}
+        </div>
       </div>
 
-      <!-- <div *ngIf="messageCountLastMonth != null" class="card-footer request_count_footer"
-        style="font-size: 16px; margin-top: 9px; padding-top: 21px;  padding-bottom: 19px;">
-        Footer Label 
-        <span style="display: block"><b>{{ messageCountLastMonth }}</b></span>
+      <!-- <div class="conv-analytics-indicator-wpr">
+        <div class="conv-analytics-indicator">
+          <div class="conv-analytics-indicator-title">
+            Total
+          </div>
+          <div class="conv-analytics-indicator-val">
+            {{totalHuman + totalBot | number:'1.0-0'}}
+          </div>
+
+        </div>
       </div>
+      <div>
+        <div class="conv-analytics-total-handled-by-bot">
+          Handled by bots: {{totalBot | number:'1.0-0'}}
+        </div>
 
-      <div *ngIf="messageCountLastMonth == null" class="card-footer request_count_footer"
-        style="font-size: 16px; margin-top: 9px; padding-top: 21px;  padding-bottom: 19px;">
-        {{ "NoMessagesValue" | translate}} 
-        <span style="display: block"></span>
+        <div class="conv-analytics-total-handled-by-bot">
+          Percentage handled by bots: {{percentageOfRequestsHandledByBots}}%
+        </div>
       </div> -->
+      <!-- Total -->
+      <div class="conv-analytics-indicator-container">
+        <div class="conv-analytics-indicator-title-wpr">
+          <h2 class="conv-analytics-indicator-title">
+            {{'TotalConversations' | translate}}
+          </h2>
+        </div>
+
+
+        <div class="conv-analytics-indicator-value-wpr">
+          <h2 color="disabled" class="conv-analytics-indicator-value">
+            <!-- {{totalHuman + totalBot | number:'1.0-0'}} -->
+              <span *ngIf="!agentIsAChatbot">
+                {{totalHuman | number:'1.0-0'}}
+              </span>
+              <span *ngIf="agentIsAChatbot">
+                {{totalBot | number:'1.0-0'}}
+              </span>
+
+          </h2>
+        </div>
+
+      </div>
+
+       <!-- Handled by human -->
+       <!-- <div class="conv-analytics-indicator-container">
+        <div class="conv-analytics-indicator-title-wpr">
+          <h2 class="conv-analytics-indicator-title">
+            {{'HandledByHuman' | translate}}
+          </h2>
+        </div>
+
+
+        <div class="conv-analytics-indicator-value-wpr">
+          <h2 color="disabled" class="conv-analytics-indicator-value">
+            {{totalHuman | number:'1.0-0'}}
+          </h2>
+        </div>
+
+      </div> -->
+
+      <!-- Handled by bots -->
+      <div class="conv-analytics-indicator-container">
+        <div class="conv-analytics-indicator-title-wpr">
+          <h2 class="conv-analytics-indicator-title">
+            {{'HandledByBots' | translate}}
+          </h2>
+        </div>
+
+
+        <div class="conv-analytics-indicator-value-wpr">
+          <h2 color="disabled" class="conv-analytics-indicator-value">
+            {{totalBot | number:'1.0-0'}}
+          </h2>
+        </div>
+
+      </div>
+
+      <!-- Percentage handled by bots -->
+      <div class="conv-analytics-indicator-container">
+        <div class="conv-analytics-indicator-title-wpr">
+          <h2 class="conv-analytics-indicator-title">
+            {{'PercentageHandledByBots' | translate}}
+          </h2>
+        </div>
+
+
+        <div class="conv-analytics-indicator-value-wpr">
+          <h2 color="disabled" class="conv-analytics-indicator-value">
+            {{percentageOfRequestsHandledByBots}}<span class="percentage-symbol"> % </span>
+          </h2>
+        </div>
+
+      </div>
     </div>
   </div>
 
@@ -38,14 +149,14 @@ <h4 class="section-title">
     <div class="card" style="border-radius: 10px;">
       <div style="padding-top: 27px; padding-bottom: 10px">
         <span
-            style="padding-bottom: 12px; padding-top:30px; font-size: 18px; font-family: 'Poppins', 'Roboto',  'Arial', sans-serif">
-            {{ 'Analytics.RequestChartTitle' | translate }} {{lastdays}}
-            <span *ngIf="selectedDaysId <= 30">{{ 'Analytics.Days' | translate }}</span>
-            <span *ngIf="selectedDaysId === 90 || selectedDaysId === 180  ">{{ 'Analytics.Months' | translate }}</span>
-            <span *ngIf="selectedDaysId === 360">{{ 'Analytics.Year' | translate }}</span>
-            <span class="analytics-date-range-selected"> {{initDay}} <i class="material-icons arrow_forward-custom">
-                arrow_forward </i> {{endDay}}</span>
-          </span>
+          style="padding-bottom: 12px; padding-top:30px; font-size: 18px; font-family: 'Poppins', 'Roboto',  'Arial', sans-serif">
+          {{ 'Analytics.RequestChartTitle' | translate }} {{lastdays}}
+          <span *ngIf="selectedDaysId <= 30">{{ 'Analytics.Days' | translate }}</span>
+          <span *ngIf="selectedDaysId === 90 || selectedDaysId === 180  ">{{ 'Analytics.Months' | translate }}</span>
+          <span *ngIf="selectedDaysId === 365">{{ 'Analytics.Year' | translate }}</span>
+          <span class="analytics-date-range-selected"> {{initDay}} <i class="material-icons arrow_forward-custom">
+              arrow_forward </i> {{endDay}}</span>
+        </span>
       </div>
 
       <div class="row" style="padding-left: 52px; padding-right: 38px;">
@@ -59,17 +170,20 @@ <h4 class="section-title">
               </label>
               <!-- margin-bottom: 20px; -->
               <div class="col-sm-12" style="margin-bottom: 6px; text-align: left;">
-                <ng-select class="custom ng-select-days" 
-                  name="days" 
-                  [(ngModel)]="selectedDaysId" 
-                  [clearable]="false"
+                <ng-select class="custom ng-select-days" name="days" [(ngModel)]="selectedDaysId" [clearable]="false"
                   (change)="daysSelect(selectedDaysId, $event)">
-                  <ng-option [value]="7">{{ 'Analytics.Last' | translate}} 7 {{ 'Analytics.Days' | translate}}</ng-option>
-                  <ng-option [value]="15">{{ 'Analytics.Last' | translate}} 15 {{ 'Analytics.Days' | translate}}</ng-option>
-                  <ng-option [value]="30">{{ 'Analytics.Last' | translate}} 30 {{ 'Analytics.Days' | translate}}</ng-option>
-                  <ng-option [value]="90">{{ 'Analytics.Last' | translate}} 3 {{ 'Analytics.Months' | translate}}</ng-option>
-                  <ng-option [value]="180">{{ 'Analytics.Last' | translate}} 6 {{ 'Analytics.Months' | translate}}</ng-option>
-                  <ng-option [value]="360">{{ 'Analytics.Last' | translate}} 1 {{ 'Analytics.Year' | translate}}</ng-option>
+                  <ng-option [value]="7">{{ 'Analytics.Last' | translate}} 7 {{ 'Analytics.Days' |
+                    translate}}</ng-option>
+                  <ng-option [value]="15">{{ 'Analytics.Last' | translate}} 15 {{ 'Analytics.Days' |
+                    translate}}</ng-option>
+                  <ng-option [value]="30">{{ 'Analytics.Last' | translate}} 30 {{ 'Analytics.Days' |
+                    translate}}</ng-option>
+                  <ng-option [value]="90">{{ 'Analytics.Last' | translate}} 3 {{ 'Analytics.Months' |
+                    translate}}</ng-option>
+                  <ng-option [value]="180">{{ 'Analytics.Last' | translate}} 6 {{ 'Analytics.Months' |
+                    translate}}</ng-option>
+                  <ng-option [value]="365">{{ 'Analytics.Last' | translate}} 1 {{ 'Analytics.Year' |
+                    translate}}</ng-option>
                 </ng-select>
               </div>
             </div>
@@ -101,10 +215,7 @@ <h4 class="section-title">
               </label>
               <!-- margin-bottom: 20px; -->
               <div class="col-sm-12" style="margin-bottom: 6px; text-align: left;">
-                <ng-select class="custom ng-select-dept" 
-                  name="dept" 
-                  [(ngModel)]="selectedDeptId" 
-                  [clearable]="false"
+                <ng-select class="custom ng-select-dept" name="dept" [(ngModel)]="selectedDeptId" [clearable]="false"
                   (change)="depSelected(selectedDeptId)">
                   <ng-option [value]="''">{{ 'HistoryPage.AllDepts' | translate }}</ng-option>
                   <ng-option *ngFor="let dept of departments" [value]="dept._id">{{dept.name}}</ng-option>
@@ -122,13 +233,11 @@ <h4 class="section-title">
                 {{ "Agent" | translate }}
               </label>
               <div class="col-sm-12" style="margin-bottom: 6px; text-align: left;">
-                <ng-select class="custom ng-select-agent" 
-                  name="agent" 
-                  [(ngModel)]="selectedAgentId" 
-                  [clearable]="false"
+                <ng-select class="custom ng-select-agent" name="agent" [(ngModel)]="selectedAgentId" [clearable]="false"
                   (change)="agentSelected(selectedAgentId)">
                   <ng-option [value]="''">{{'AllAgents' | translate}}</ng-option>
-                  <ng-option *ngFor="let agent of projectUserAndBotsArray" value="{{ agent.id }}">{{ agent.name}}</ng-option>
+                  <ng-option *ngFor="let agent of projectUserAndBotsArray" value="{{ agent.id }}">{{
+                    agent.name}}</ng-option>
                   <!-- <ng-option *ngFor="let agent of projectUsersList" [value]="agent.id_user._id">
                   {{ agent.id_user.firstname }} {{ agent.id_user.lastname }}
                 </ng-option>
@@ -150,12 +259,11 @@ <h4 class="section-title">
                 {{ "MessageChannel" | translate }}
               </label>
               <div class="col-sm-12" style="margin-bottom: 6px; text-align: left;">
-                <ng-select class="custom ng-select-conversation-type" 
-                    name="conversation-type" 
-                    [(ngModel)]="selectedChannelId" 
-                    [clearable]="false"
-                    (change)="conversationTypeSelected(selectedChannelId)">
-                  <ng-option *ngFor="let channel of conversationType" value="{{ channel.id }}">{{ channel.name}}</ng-option>
+                <ng-select class="custom ng-select-conversation-type" name="conversation-type"
+                  [(ngModel)]="selectedChannelId" [clearable]="false"
+                  (change)="conversationTypeSelected(selectedChannelId)">
+                  <ng-option *ngFor="let channel of conversationType" value="{{ channel.id }}">{{
+                    channel.name}}</ng-option>
                 </ng-select>
               </div>
             </div>