add labels

src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.html

@@ -6,8 +6,7 @@
   <div class="main-header">
     <app-btn-modal-dismiss (click)="goBack()" ></app-btn-modal-dismiss>
     <div class="thetitle">
-      <ion-label *ngIf="SessionStore.user.Profile =='MDGPR'" >{{environment.dispatchPR }}</ion-label>
-      <ion-label *ngIf="SessionStore.user.Profile =='PR'" >Despachos</ion-label>
+      <ion-label  >{{environment.dispatchPR }}</ion-label>
     </div>
     <div class="theicon btn-refresh">
       <button class="btn-no-color" (click)="doRefresh($event)">
@@ -34,12 +33,12 @@
       <div >
         <ion-list>
           <div
-            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
+            class=" ion-no-padding ion-no-margin cursor-pointer"  
             *ngFor = "let task of despachoprstore.list; let i = index"
             (click)="goToDespachoPr(task.SerialNumber)"
           >
             <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
-            <div class="item width-100">
+            <div class="item width-100 expedientes">
               <div class="exp-top-detail">
                 <div class="subject d-flex align-center">
                   <ion-label>{{ task.Folio }}</ion-label>

src/app/pages/gabinete-digital/despachos-pr/despachos-pr.page.ts

@@ -153,21 +153,7 @@ export class DespachosPrPage implements OnInit {
         date.setMonth(date.getMonth() + 1);
         let taskDate = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
 
-        let task = {
-          "SerialNumber": element.serialNumber,
-          "Folio": element.workflowInstanceDataFields.Subject,
-          "Senders": element.workflowInstanceDataFields.Sender,
-          "CreateDate": new Date(element.taskStartDate),
-          "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
-          "Remetente": element.workflowInstanceDataFields.Remetente,
-          "DocumentsQty": element.totalDocuments,
-          "DocId": element.workflowInstanceDataFields.DocIdDiferimento,
-          "WorkflowName": element.workflowDisplayName,
-          "FolderID": element?.workflowInstanceDataFields?.FolderID,
-          "activityInstanceName": element.activityInstanceName,
-          "Status": element?.workflowInstanceDataFields?.Status,
-          "TaskStatus": element.taskStatus
-        }
+        let task = this.customTaskPipe.transform(element)
 
         this.despachoList.push(task);
       });

src/app/pages/gabinete-digital/despachos/despachos.page.html

@@ -32,12 +32,12 @@
       <div class="height-100">
         <ion-list>
           <div
-            class="expediente ion-no-padding ion-no-margin cursor-pointer"  
+            class=" ion-no-padding ion-no-margin cursor-pointer"  
             *ngFor = "let task of despachoStore.list; let i = index"
             (click)="GoToDespacho(task.SerialNumber)"
           >
             <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
-            <div class="item width-100">
+            <div class="item width-100 expediente">
               <div class="exp-top-detail">
                 <div class="subject d-flex align-center">
                   <ion-label>{{ task.Folio }}</ion-label>

src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.module.ts

@@ -9,6 +9,21 @@ import { DiplomasAssinarPageRoutingModule } from './diplomas-assinar-routing.mod
 import { DiplomasAssinarPage } from './diplomas-assinar.page';
 import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
 
+import { MatInputModule } from '@angular/material/input';
+import { MatNativeDateModule } from '@angular/material/core';
+
+import {
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule
+} from '@angular-material-components/datetime-picker';
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+
+
 @NgModule({
   imports: [
     CommonModule,
@@ -17,6 +32,15 @@ import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-
     DiplomasAssinarPageRoutingModule,
 
     BtnModalDismissPageModule,
+    //
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
   ],
   declarations: [DiplomasAssinarPage]
 })

src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.html

@@ -8,6 +8,31 @@
     <app-btn-modal-dismiss (click)="goBack()"></app-btn-modal-dismiss>
     <div class="thetitle"><ion-label >Diplomas</ion-label></div>
     <div class="theicon btn-refresh">
+      <mat-form-field class="task-filter-input" appearance="none"   color="ion-color-secondary"  placeholder="Selecione agenda">
+        <mat-select [(value)]="filterName">
+
+          <mat-option value="Para hoje" >
+            Para hoje
+          </mat-option>
+
+          <mat-option value="Novos" >
+            Novos
+          </mat-option>
+
+          <mat-option value="Lidos" >
+            Lidos
+          </mat-option>
+
+          <mat-option value="Não Lidos" >
+            Não lidos
+          </mat-option>
+
+          <mat-option value="Todos" >
+            Todos
+          </mat-option>
+
+        </mat-select>
+      </mat-form-field>
       <button class="btn-no-color" (click)="doRefresh($event)">
         <ion-icon slot="end" class="title-icon font-awesome" name="reload-circle"></ion-icon>
       </button>
@@ -35,12 +60,12 @@
         <ion-list >
 
           <div
-            class="expediente ion-no-padding ion-no-margin cursor-pointer"
+            class=" ion-no-padding ion-no-margin cursor-pointer"
             *ngFor = "let task of deplomasStore.diplomasParaAssinarList"
             (click)="goToDiploma(task.SerialNumber || task.serialNumber)"
           >
 
-            <div class="item width-100">
+            <div class="item width-100 expediente" *ngIf="TaskService.filter(task, filterName)">
               <div class="exp-top-detail">
                 <div class="subject d-flex align-center">
                   <ion-label>{{ task.Folio || task.workflowInstanceDataFields.Subject }}</ion-label>

src/app/pages/gabinete-digital/diplomas-assinar/diplomas-assinar.page.ts

@@ -28,6 +28,8 @@ export class DiplomasAssinarPage implements OnInit {
  customTaskPipe = new CustomTaskPipe()
  skeletonLoader = true
  deplomasStore = DeplomasStore
+ filterName: 'Para hoje' | 'Novos'| 'Lidos'| 'Não lidos'| 'Todos' = 'Todos'
+  
 
  constructor(
    private processes:ProcessesService,

src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar.module.ts

@@ -9,13 +9,37 @@ import { DiplomasGerarPageRoutingModule } from './diplomas-gerar-routing.module'
 import { DiplomasGerarPage } from './diplomas-gerar.page';
 import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
 
+
+import { MatInputModule } from '@angular/material/input';
+import { MatNativeDateModule } from '@angular/material/core';
+
+import {
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule
+} from '@angular-material-components/datetime-picker';
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
     DiplomasGerarPageRoutingModule,
-    BtnModalDismissPageModule
+    BtnModalDismissPageModule,
+    //
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
   ],
   declarations: [DiplomasGerarPage]
 })

src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar.page.html

@@ -36,11 +36,11 @@
       <div *ngIf="deplomasStore.DiplomaGerarList">
         <ion-list >
           <div
-            class="expediente ion-no-padding ion-no-margin cursor-pointer"
+            class=" ion-no-padding ion-no-margin cursor-pointer"
             *ngFor = "let task of deplomasStore.DiplomaGerarList"
             (click)="goToDiploma(task.SerialNumber)"
           >
-            <div class="item width-100">
+            <div class="item width-100 expediente" *ngIf="TaskService.filter(task, filterName)">
               <div class="exp-top-detail">
                 <div class="subject d-flex align-center">
                   <ion-label>{{ task.Folio }}</ion-label>

src/app/pages/gabinete-digital/diplomas-gerar/diplomas-gerar.page.ts

@@ -29,6 +29,8 @@ export class DiplomasGerarPage implements OnInit {
   skeletonLoader = true
   deplomasStore = DeplomasStore
  
+  filterName: 'Para hoje' | 'Novos'| 'Lidos'| 'Não lidos'| 'Todos' = 'Todos'
+  
   constructor(
     private processes:ProcessesService,
     private modalController: ModalController,

src/app/pages/gabinete-digital/diplomas/diplomas.module.ts

@@ -10,6 +10,20 @@ import { DiplomasPage } from './diplomas.page';
 
 import { HeaderPageModule } from 'src/app/shared/header/header.module';
 import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
+import { MatInputModule } from '@angular/material/input';
+import { MatNativeDateModule } from '@angular/material/core';
+
+import {
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule
+} from '@angular-material-components/datetime-picker';
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+
 
 @NgModule({
   imports: [
@@ -18,6 +32,15 @@ import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-
     IonicModule,
     DiplomasPageRoutingModule,
     BtnModalDismissPageModule,
+    //
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
   ],
   declarations: [DiplomasPage]
 })

src/app/pages/gabinete-digital/diplomas/diplomas.page.html

@@ -3,6 +3,31 @@
     <app-btn-modal-dismiss (click)="goBack()"></app-btn-modal-dismiss>
     <div class="thetitle"><ion-label >Diplomas</ion-label></div>
     <div class="theicon btn-refresh">
+      <mat-form-field class="task-filter-input" appearance="none"   color="ion-color-secondary"  placeholder="Selecione agenda">
+        <mat-select [(value)]="filterName">
+
+          <mat-option value="Para hoje" >
+            Para hoje
+          </mat-option>
+
+          <mat-option value="Novos" >
+            Novos
+          </mat-option>
+
+          <mat-option value="Lidos" >
+            Lidos
+          </mat-option>
+
+          <mat-option value="Não Lidos" >
+            Não lidos
+          </mat-option>
+
+          <mat-option value="Todos" >
+            Todos
+          </mat-option>
+
+        </mat-select>
+      </mat-form-field>
       <button class="btn-no-color" (click)="doRefresh($event)">
         <ion-icon slot="end" class="title-icon font-awesome" name="reload-circle"></ion-icon>
       </button>
@@ -32,12 +57,12 @@
 
         <ion-list *ngSwitchCase="'validar'">
           <ion-item
-              class="expediente ion-no-padding cursor-pointer"
+              class=" ion-no-padding cursor-pointer"
               *ngFor = "let task of diplomasList"
               (click)="goToDiploma(task.SerialNumber)"
               lines="none"
               >
-              <div class="item width-100">
+              <div class="item width-100 expediente">
                 <div class="exp-top-detail">
                   <div class="subject d-flex align-center">
                     <ion-label>{{ task.Folio }}</ion-label>

src/app/pages/gabinete-digital/diplomas/diplomas.page.ts

@@ -30,6 +30,7 @@ export class DiplomasPage implements OnInit, OnDestroy {
   skeletonLoader = true
   deplomasStore = DeplomasStore
   customTaskPipe = new CustomTaskPipe()
+  filterName: 'Para hoje' | 'Novos'| 'Lidos'| 'Não lidos'| 'Todos' = 'Todos'
   
   constructor(
     private processes: ProcessesService,

src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.module.ts

@@ -9,6 +9,21 @@ import { ExpedientesPrPageRoutingModule } from './expedientes-pr-routing.module'
 import { ExpedientesPrPage } from './expedientes-pr.page';
 import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
 
+
+import { MatInputModule } from '@angular/material/input';
+import { MatNativeDateModule } from '@angular/material/core';
+
+import {
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule
+} from '@angular-material-components/datetime-picker';
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+
 @NgModule({
   imports: [
     CommonModule,
@@ -16,6 +31,15 @@ import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-
     IonicModule,
     ExpedientesPrPageRoutingModule,
     BtnModalDismissPageModule,
+        //
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
   ],
   declarations: [ExpedientesPrPage]
 })

src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.html

@@ -9,6 +9,31 @@
   <div class="title">
     <div class="thetitle"><ion-label >Expediente</ion-label></div>
     <div class="theicon btn-refresh">
+      <mat-form-field class="task-filter-input" appearance="none"   color="ion-color-secondary"  placeholder="Selecione agenda">
+        <mat-select [(value)]="filterName">
+
+          <mat-option value="Para hoje" >
+            Para hoje
+          </mat-option>
+
+          <mat-option value="Novos" >
+            Novos
+          </mat-option>
+
+          <mat-option value="Lidos" >
+            Lidos
+          </mat-option>
+
+          <mat-option value="Não Lidos" >
+            Não lidos
+          </mat-option>
+
+          <mat-option value="Todos" >
+            Todos
+          </mat-option>
+
+        </mat-select>
+      </mat-form-field>
       <button class="btn-no-color" (click)="refreshing()">
         <ion-icon slot="end" class="title-icon font-awesome" name="reload-circle"></ion-icon>
       </button>
@@ -29,11 +54,11 @@
       <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
       <ion-list>
         <div
-          class="expediente ion-no-padding ion-no-margin cursor-pointer"
+          class=" ion-no-padding ion-no-margin cursor-pointer"
           *ngFor = "let task of expedienteGdStore.list"
           (click)="goToExpediente(task.SerialNumber)"
         >
-          <div class="item width-100">
+          <div class="item width-100 expediente" *ngIf="TaskService.filter(task, filterName)">
             <div class="exp-top-detail">
               <div class="subject d-flex align-center">
                 <ion-label>{{ task.Subject }}</ion-label>

src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.ts

@@ -34,7 +34,8 @@ export class ExpedientesPrPage implements OnInit {
   skeletonLoader = true
   expedienteGdStore = ExpedienteGdStore;
   expedienteTaskPipe = new ExpedienteTaskPipe()
-
+  filterName: 'Para hoje' | 'Novos'| 'Lidos'| 'Não lidos'| 'Todos' = 'Todos'
+  
   constructor(
     private processes:ProcessesService,
     private modalController: ModalController,

src/app/pages/gabinete-digital/gabinete-digital.page.html

@@ -157,9 +157,15 @@
                   </div>
                   <div class="exp-card-text">
                     <!-- <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])">Despacho do Presidente da República</p> -->
-                    <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])">Despachos {{ environment.despachoLabel }}</p>
-                    <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks]) && !p.userPermission([p.permissionList.Gabinete.md_tasks])">Despachos criados por mim</p>
-                    <p class="text-center exp-card-content"> {{ despachoprstore.count }} <span class="title1">Documentos</span> </p>
+                    <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.md_tasks])">
+                      Despachos {{ environment.despachoLabel }} <br>
+                      <span class="new-task-count">{{ despachoprstore.newList.length}} Despacho <span *ngIf="despachoprstore.newList.length >=2">s</span> {{ environment.despachoLabel }} novo <span *ngIf="despachoprstore.newList.length >=2">s</span></span></p>
+
+                    <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks]) && !p.userPermission([p.permissionList.Gabinete.md_tasks])">
+                      Despachos criados por mim<br>
+                      <span class="new-task-count">{{ despachoprstore.newList.length}} Despacho <span *ngIf="despachoprstore.newList.length >=2">s</span> {{ environment.despachoLabel }} novo <span *ngIf="despachoprstore.newList.length >=2">s</span></span></p>
+                    <p class="text-center exp-card-content"> {{ despachoprstore.count }} 
+                      <span class="title1">Documentos</span> </p>
                   </div>
                 </div>
               </div>
@@ -171,9 +177,13 @@
                   <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DiplomasAssinados'"  src="assets/images/theme/gov/icons-diplomas-assinados-presidente.svg"></ion-icon>
                   <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DiplomasAssinados'"  src="assets/images/theme/gov/icons-diplomas-assinados-presidente-hover.svg"></ion-icon>
                 </div>
-                <p class="text-center exp-card-title " *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])">Diplomas assinados PR</p>
-                <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" >Diplomas</p>
-                <p class="text-center exp-card-content"> {{ deplomasStore.countDiplomasAssinadoListCount }} <span class="title1">Documentos</span></p>
+                <p class="text-center exp-card-title " *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])">
+                  Diplomas assinados PR <br>
+                  <span class="new-task-count">{{ deplomasStore.diplomasAssinadoListNewCount.length}} Diploma <span *ngIf="deplomasStore.diplomasAssinadoListNewCount.length >=2">s</span> por Assinar PR novo<span *ngIf="deplomasStore.diplomasAssinadoListNewCount.length >=2">s</span></span></p>
+                <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" >Diplomas <br>
+                  <span class="new-task-count">{{ deplomasStore.diplomasAssinadoListNewCount.length}} Diplomas novo</span></p>
+                <p class="text-center exp-card-content"> {{ deplomasStore.countDiplomasAssinadoListCount }}
+                  <span class="title1">Documentos</span></p>
               </div>
               
 
@@ -187,7 +197,8 @@
                   <ion-icon  *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/{{ThemeService.currentTheme}}/icons-expediente-diploma.svg"></ion-icon>
                   <ion-icon hidden *ngIf="ThemeService.currentTheme == 'doneIt' && selectedElement == 'DiplomasParaAssinar' " src="assets/images/theme/{{ThemeService.currentTheme}}/icons-expediente-diploma-hover.svg"></ion-icon>
                 </div>
-                <p class="text-center exp-card-title">Diplomas por Assinar {{ environment.PR}} </p>
+                <p class="text-center exp-card-title">Diplomas por Assinar {{ environment.PR}} <br>
+                  <span class="new-task-count">{{ deplomasStore.diplomasParaAssinarNewCount.length}} Diploma<span *ngIf="deplomasStore.diplomasParaAssinarNewCount.length >=2">s</span>  por Assinar {{ environment.PR}} novo<span *ngIf="deplomasStore.diplomasParaAssinarNewCount.length >=2">s</span></span></p>
                 <p class="text-center exp-card-content"> {{ deplomasStore.diplomasParaAssinartCount }} <span class="title1">Documentos</span></p>
               </div>
               
@@ -198,7 +209,9 @@
                   <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement != 'DiplomasPorValidar' " src="assets/images/theme/gov/icons-expediente-diploma.svg"></ion-icon>
                   <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' && selectedElement == 'DiplomasPorValidar' " src="assets/images/theme/gov/icons-expediente-diploma-hover.svg"></ion-icon>
                 </div>
-                <p class="text-center exp-card-title " >Diplomas por Validar</p>
+                <p class="text-center exp-card-title " >
+                  Diplomas por Validar<br>
+                  <span class="new-task-count">{{ deplomasStore.diplomasReviewListNewCount.length}} Diploma<span *ngIf="deplomasStore.diplomasReviewListNewCount.length >=2">s</span> por validar novo<span *ngIf="deplomasStore.diplomasReviewListNewCount.length >=2">s</span></span></p>
                 <!-- <p class="text-center exp-card-title " *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])">Diplomas por Assinar PR</p> -->
                 <p class="text-center exp-card-content"> {{ deplomasStore.deplomasReviewCount }} <span class="title1">Documentos</span> </p>
               </div>
@@ -213,7 +226,8 @@
                   <ion-icon  *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/{{ThemeService.currentTheme}}/icons-expediente-diploma.svg"></ion-icon>
                   <ion-icon hidden *ngIf="ThemeService.currentTheme == 'doneIt' && selectedElement == 'DiplomasParaAssinar' " src="assets/images/theme/{{ThemeService.currentTheme}}/icons-expediente-diploma-hover.svg"></ion-icon>
                 </div>
-                <p class="text-center exp-card-title">Diplomas para Assinar</p>
+                <p class="text-center exp-card-title">Diplomas para Assinar<br>
+                  <span class="new-task-count">{{ deplomasStore.diplomasParaAssinarNewCount.length}} Diploma<span *ngIf="deplomasStore.diplomasReviewListNewCount.length >=2">s</span> para assinar novo<span *ngIf="deplomasStore.diplomasReviewListNewCount.length >=2">s</span></span></p>
                 <p class="text-center exp-card-content"> {{ deplomasStore.diplomasParaAssinartCount }} <span class="title1">Documentos</span></p>
               </div>
               
@@ -228,7 +242,9 @@
                   <ion-icon hidden *ngIf="ThemeService.currentTheme == 'doneIt' && selectedElement == 'gerarDiplomas'"  src="assets/images/theme/{{ThemeService.currentTheme}}/icons-diplomas-assinados-presidente-hover.svg"></ion-icon>
                 </div>
 
-                <p class="text-center exp-card-title" >Diplomas por elaborar</p>
+                <p class="text-center exp-card-title" >
+                  Diplomas por elaborar <br>
+                  <span class="new-task-count">{{ deplomasStore.diplomasGerarListNewCount.length}} Diploma<span *ngIf="deplomasStore.diplomasReviewListNewCount.length >=2">s</span> por elaborar novo<span *ngIf="deplomasStore.diplomasReviewListNewCount.length >=2">s</span></span></p>
                 <p class="text-center exp-card-content"> {{  deplomasStore.DiplomaGerarList.length }} <span class="title1">Documentos</span></p>
 
               </div>
@@ -251,8 +267,15 @@
                   <ion-icon  *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/{{ThemeService.currentTheme}}/icons-correspondencia.svg"></ion-icon>
                   <ion-icon hidden  *ngIf="ThemeService.currentTheme == 'doneIt' && selectedElement == 'Correspondence'" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-correspondencia-hover.svg"></ion-icon>
                 </div>
-                <p class="text-center exp-card-title ">Expediente</p>
+
+                <p class="text-center exp-card-title ">Expediente <br>
+                  <span *ngIf="despachoStore.newList.length == 1" class="new-task-count">{{ expedientegbstore.newList.length}} Expediente novo</span>
+                  <span *ngIf="despachoStore.newList.length >= 2" class="new-task-count">{{ expedientegbstore.newList.length}} Expedientes novos</span>
+                  <span class="new-task-count">{{ expedientegbstore.newList.length}} Expediente novo</span>
+                </p>
+
                 <p class="text-center exp-card-content"> {{expedientegbstore.count}} <span class="title1">Documentos</span></p>
+                
               </div>
 
               <!-- List -->
@@ -264,7 +287,9 @@
                   <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt'"  src="assets/images/theme/{{ThemeService.currentTheme}}/icons-despachos-presidente.svg"></ion-icon>
                   <ion-icon hidden *ngIf="ThemeService.currentTheme == 'doneIt' && selectedElement == 'Dispatches'"  src="assets/images/theme/{{ThemeService.currentTheme}}/icons-despachos-presidente-hover.svg"></ion-icon>
                 </div>
-                <p class="text-center exp-card-title ">Despachos</p>
+                <p class="text-center exp-card-title ">Despachos<br>
+                  <span class="new-task-count">{{ despachoStore.newList.length}} 
+                    Despacho<span *ngIf="deplomasStore.diplomasReviewListNewCount.length >=2">s</span> novo<span *ngIf="despachoStore.newList.length >=2">s</span></span></p>
                 <p class="text-center exp-card-content"> {{despachoStore.count}} <span class="title1">Documentos</span> </p>
               </div>
               
@@ -280,8 +305,12 @@
                   <ion-icon  *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/{{ThemeService.currentTheme}}/icons-expediente-parecer.svg"></ion-icon>
                   <ion-icon hidden  *ngIf="ThemeService.currentTheme == 'doneIt' && selectedElement == 'RequestsForOpinion'" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-expediente-parecer-hover.svg"></ion-icon>
                 </div>
-                <p *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Pedidos de Parecer</p>
-                <p *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Pedidos de Parecer solicitados por mim</p>
+                <p *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">
+                  Pedidos de Parecer<br>
+                  <span class="new-task-count">{{ pedidosstore.listParecerCount.length}} Pedido<span *ngIf="pedidosstore.listParecerCount.length >=2">s</span> de Parecer</span></p>
+                <p *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">
+                  Pedidos de Parecer solicitados por mim <br>
+                  <span class="new-task-count">{{ pedidosstore.listParecerCount.length}} Despacho<span *ngIf="pedidosstore.listParecerCount.length >=2">s</span> de Parecer</span></p>
                 <p class="text-center exp-card-content"> {{pedidosstore.countparecer}} <span class="title1">Documentos</span></p>
               </div>
               
@@ -295,7 +324,9 @@
                   <ion-icon  *ngIf="ThemeService.currentTheme == 'doneIt' " src="assets/images/theme/{{ThemeService.currentTheme}}/icons-expediente-deferimento.svg"></ion-icon>
                   <ion-icon hidden  *ngIf="ThemeService.currentTheme == 'doneIt' && selectedElement == 'RequestForApproval'" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-expediente-deferimento-hover.svg"></ion-icon>
                 </div>
-                <p class="text-center exp-card-title ">Pedidos de Deferimento</p>
+                <p class="text-center exp-card-title ">
+                  Pedidos de Deferimento<br>
+                  <span class="new-task-count">{{ pedidosstore.listDeferimentoCount.length}} Pedido<span *ngIf="pedidosstore.listDeferimentoCount.length >=2">s</span> de Deferimento</span></p>
                 <p class="text-center exp-card-content"> {{pedidosstore.countdeferimento}} <span class="title1">Documentos</span></p>
               </div>
             
@@ -308,8 +339,11 @@
                   <ion-icon  *ngIf="ThemeService.currentTheme == 'doneIt'" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-expediente-pendente.svg"></ion-icon>
                   <ion-icon hidden  *ngIf="ThemeService.currentTheme == 'doneIt' && selectedElement == 'Pending'" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-expediente-pendente-hover.svg"></ion-icon>
                 </div>
-                <p *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Pendentes</p>
-                <p *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Meus Pendentes</p>
+                <p *ngIf="!p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">
+                  Pendentes<br>
+                  <span class="new-task-count">{{ pendentesstore.newList.length}} Pendente<span *ngIf="pendentesstore.newList.length >=2">s</span> novo<span *ngIf="pendentesstore.newList.length >=2">s</span></span></p>
+                <p *ngIf="p.userPermission([p.permissionList.Gabinete.pr_tasks])" class="text-center exp-card-title ">Meus Pendentes<br>
+                  <span class="new-task-count">{{ pendentesstore.newList.length}} Meus Pendente<span *ngIf="pendentesstore.newList.length >=2">s</span> novo<span *ngIf="pendentesstore.newList.length >=2">s</span></span></p>
                 <p class="text-center exp-card-content"> <span class="number">{{pendentesstore.count}} </span> <span class="title1">Documentos</span></p>
               </div>
             

src/app/pages/gabinete-digital/gabinete-digital.page.scss

@@ -567,6 +567,10 @@ ion-content{
   background: var(--gabinete-active-hove-background) !important;
   box-sizing: border-box;
 
+  .new-task-count {
+    color: white;
+  }
+  
   .exp-card-content, .icon-selected{
     color: white !important;
   }
@@ -684,4 +688,9 @@ ion-content{
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
+}
+
+.new-task-count{
+  color: red;
+  font-size: 13px;
 }

src/app/pages/gabinete-digital/gabinete-digital.page.ts

@@ -578,37 +578,13 @@ export class GabineteDigitalPage implements OnInit {
     this.pedidosstore.countparecer = Object.keys(allParecer.filter(data => data.workflowInstanceDataFields.Status == "Active")).length;
     
     this.pedidosstore.resetparecer(allParecer.filter(data => data.workflowInstanceDataFields.Status == "Active").map((element) => {
-      return {
-        "SerialNumber": element.serialNumber,
-        "Folio": element.workflowInstanceDataFields.Subject,
-        "Senders": element.workflowInstanceDataFields.Sender,
-        "CreateDate": new Date(element.taskStartDate),
-        "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
-        "Remetente": element.workflowInstanceDataFields.Remetente,
-        "DocumentsQty": element.totalDocuments,
-        "DocId": element.workflowInstanceDataFields.DocIdDiferimento,
-        "WorkflowName": element.workflowDisplayName,
-        "activityInstanceName": element.activityInstanceName,
-        "deadline": element.deadline
-      }
+      return this.customTaskPipe.transform(element)
     }));    
 
     let deferimentos = await this.processesbackend.GetTasksList("Pedido de Deferimento", false).toPromise();
     this.pedidosstore.countdeferimento = Object.keys(deferimentos.filter(data => data.workflowInstanceDataFields.Status == "Active")).length
     this.pedidosstore.resetdeferimento(deferimentos.filter(data => data.workflowInstanceDataFields.Status == "Active").map((element) => {
-      return {
-        "SerialNumber": element.serialNumber,
-        "Folio": element.workflowInstanceDataFields.Subject,
-        "Senders": element.workflowInstanceDataFields.Sender,
-        "CreateDate": new Date(element.taskStartDate),
-        "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
-        "Remetente": element.workflowInstanceDataFields.Remetente,
-        "DocumentsQty": element.totalDocuments,
-        "DocId": element.workflowInstanceDataFields.DocIdDiferimento,
-        "WorkflowName": element.workflowDisplayName,
-        "activityInstanceName": element.activityInstanceName,
-        "deadline": element.deadline
-      }
+      return this.customTaskPipe.transform(element)
     }));
 
 
@@ -650,20 +626,7 @@ export class GabineteDigitalPage implements OnInit {
       date.setMonth(date.getMonth() + 1);
       let taskDate = date.getFullYear()+"-"+ date.getMonth()+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+ ":"+date.getSeconds();
 
-      return {
-        "SerialNumber": element.serialNumber,
-        "Folio": element.workflowInstanceDataFields.Subject,
-        "Senders": element.workflowInstanceDataFields.Sender,
-        "CreateDate": taskDate,
-        "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
-        "Remetente": element.workflowInstanceDataFields.Remetente,
-        "DocumentsQty": element.totalDocuments,
-        "DocId": element.workflowInstanceDataFields.DocIdDiferimento,
-        "WorkflowName": element.workflowDisplayName,
-        "activityInstanceName": element.activityInstanceName,
-        "Status": element.workflowInstanceDataFields.Status,
-        "deadline": element.deadline
-      }
+      return this.customTaskPipe.transform(element)
     }))
 
 

src/app/pages/gabinete-digital/pedidos/pedidos.module.ts

@@ -9,11 +9,36 @@ import { PedidosPageRoutingModule } from './pedidos-routing.module';
 import { PedidosPage } from './pedidos.page';
 import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
 
+
+import { MatInputModule } from '@angular/material/input';
+import { MatNativeDateModule } from '@angular/material/core';
+
+import {
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule
+} from '@angular-material-components/datetime-picker';
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    //
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
 
     PedidosPageRoutingModule,
     BtnModalDismissPageModule,

src/app/pages/gabinete-digital/pedidos/pedidos.page.html

@@ -7,6 +7,31 @@
   <div class="title">
     <div class="thetitle"><ion-label >Pedidos</ion-label></div>
     <div class="theicon btn-refresh">
+      <mat-form-field class="task-filter-input" appearance="none"   color="ion-color-secondary"  placeholder="Selecione agenda">
+        <mat-select [(value)]="filterName">
+
+          <mat-option value="Para hoje" >
+            Para hoje
+          </mat-option>
+
+          <mat-option value="Novos" >
+            Novos
+          </mat-option>
+
+          <mat-option value="Lidos" >
+            Lidos
+          </mat-option>
+
+          <mat-option value="Não Lidos" >
+            Não lidos
+          </mat-option>
+
+          <mat-option value="Todos" >
+            Todos
+          </mat-option>
+
+        </mat-select>
+      </mat-form-field>
       <button class="btn-no-color" (click)="doRefresh($event)">
         <ion-icon slot="end" class="title-icon font-awesome" name="reload-circle"></ion-icon>
       </button>
@@ -43,13 +68,13 @@
           <!-- *ngFor = "let task of pedidosstorage.listparecer; let i = index"
           (click)="viewExpedientDetail(task.SerialNumber)" -->
           <div
-            class="expediente ion-no-padding ion-no-margin cursor-pointer"
+            class="ion-no-padding ion-no-margin cursor-pointer"
             *ngFor = "let task of pedidosstorage.listparecer"
             (click)="goToPedido(task.SerialNumber)"
           >
             <!-- (click)="viewExpedientDetail(task.SerialNumber)" -->
             <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
-            <div class="item width-100">
+            <div class="item width-100 expediente" *ngIf="TaskService.filter(task, filterName)">
               <div class="exp-top-detail">
                 <div class="subject d-flex align-center">
                   <ion-label>{{ task.Folio }}</ion-label>

src/app/pages/gabinete-digital/pedidos/pedidos.page.ts

@@ -13,7 +13,7 @@ import { BackgroundService } from 'src/app/services/background.service';
 import { SortService } from 'src/app/services/functions/sort.service';
 import { ThemeService } from 'src/app/services/theme.service'
 import { TaskService } from 'src/app/services/task.service'
-
+import { CustomTaskPipe } from 'src/app/pipes/custom-task.pipe';
 @Component({
   selector: 'app-pedidos',
   templateUrl: './pedidos.page.html',
@@ -37,10 +37,12 @@ export class PedidosPage implements OnInit {
   serialNumber: string;
   skeletonLoader = true
   pedidosstorage = PedidosStore;
+  customTaskPipe = new CustomTaskPipe()
 
   segment: string;
   @Output() openExpedientDetail: EventEmitter<any> = new EventEmitter<any>();
-
+  filterName: 'Para hoje' | 'Novos'| 'Lidos'| 'Não lidos'| 'Todos' = 'Todos'
+  
   constructor(
     private router: Router,
     private processes: ProcessesService,
@@ -150,21 +152,7 @@ export class PedidosPage implements OnInit {
           let month = date.getMonth() + 1;
           let taskDate = date.getFullYear() + "-" + month + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
 
-          let task = {
-            "SerialNumber": element.serialNumber,
-            "Folio": element.workflowInstanceDataFields.Subject,
-            "Senders": element.workflowInstanceDataFields.Sender,
-            "CreateDate": new Date(element.taskStartDate),
-            "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
-            "Remetente": element.workflowInstanceDataFields.Remetente,
-            "DocumentsQty": element.totalDocuments,
-            "DocId": element.workflowInstanceDataFields.DocIdDiferimento,
-            "WorkflowName": element.workflowDisplayName,
-            "activityInstanceName": element.activityInstanceName,
-            "TaskStartDate": element.taskStartDate,
-            "Deadline": element.deadline,
-            "TaskStatus": element.taskStatus
-          }
+          let task = this.customTaskPipe.transform(element);
           this.parecerList.push(task);
         });
         this.addPedidoToDb(this.parecerList);
@@ -192,21 +180,7 @@ export class PedidosPage implements OnInit {
             let month = date.getMonth() + 1;
             let taskDate = date.getFullYear() + "-" + month + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
 
-            let task = {
-              "SerialNumber": element.serialNumber,
-              "Folio": element.workflowInstanceDataFields.Subject,
-              "Senders": element.workflowInstanceDataFields.Sender,
-              "CreateDate": new Date(element.taskStartDate),
-              "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
-              "Remetente": element.workflowInstanceDataFields.Remetente,
-              "DocumentsQty": element.totalDocuments,
-              "DocId": element.workflowInstanceDataFields.DocIdDiferimento,
-              "WorkflowName": element.workflowDisplayName,
-              "activityInstanceName": element.activityInstanceName,
-              "TaskStartDate": element.taskStartDate,
-              "Deadline": element.deadline,
-              "TaskStatus": element.taskStatus
-            }
+            let task = this.customTaskPipe.transform(element);
 
             if (element.workflowInstanceDataFields.Status == "Active") {
               this.deferimentoList.push(task);

src/app/pages/gabinete-digital/pendentes/pendentes.module.ts

@@ -11,6 +11,21 @@ import { SharedModule } from 'src/app/shared/shared.module';
 import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
 import { TaskListPageModule } from 'src/app/shared/gabinete-digital/generic/task-list/task-list.module';
 
+import { MatInputModule } from '@angular/material/input';
+import { MatNativeDateModule } from '@angular/material/core';
+
+import {
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule
+} from '@angular-material-components/datetime-picker';
+
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+
+
 @NgModule({
   imports: [
     CommonModule,
@@ -19,7 +34,17 @@ import { TaskListPageModule } from 'src/app/shared/gabinete-digital/generic/task
     PendentesPageRoutingModule,
     BtnModalDismissPageModule,
     // entryComponents
-    TaskListPageModule
+    TaskListPageModule,
+    //
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    
   ],
   declarations: [PendentesPage]
 })

src/app/pages/gabinete-digital/pendentes/pendentes.page.html

@@ -8,6 +8,31 @@
   <div class="title">
     <div class="thetitle"><ion-label >Pendentes</ion-label></div>
     <div class="theicon btn-refresh">
+      <mat-form-field class="task-filter-input" appearance="none"   color="ion-color-secondary"  placeholder="Selecione agenda">
+        <mat-select [(value)]="filterName">
+
+          <mat-option value="Para hoje" >
+            Para hoje
+          </mat-option>
+
+          <mat-option value="Novos" >
+            Novos
+          </mat-option>
+
+          <mat-option value="Lidos" >
+            Lidos
+          </mat-option>
+
+          <mat-option value="Não Lidos" >
+            Não lidos
+          </mat-option>
+
+          <mat-option value="Todos" >
+            Todos
+          </mat-option>
+
+        </mat-select>
+      </mat-form-field>
       <button class="btn-no-color" (click)="doRefresh($event)">
         <ion-icon slot="end" class="title-icon font-awesome" name="reload-circle"></ion-icon>
       </button>

src/app/pages/gabinete-digital/pendentes/pendentes.page.ts

@@ -39,7 +39,8 @@ export class PendentesPage implements OnInit {
   pendentesstore = PendentesStore;
   customTaskPipe = new CustomTaskPipe()
   listToPresent = [];
-
+  filterName: 'Para hoje' | 'Novos'| 'Lidos'| 'Não lidos'| 'Todos' = 'Todos'
+  
   constructor(
     private processes: ProcessesService,
     private alertService: AlertService,