diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index 7aa44c00e..edb7dd2a0 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -22,7 +22,7 @@
         </ion-tab-button>
         <ion-tab-button tab="publications">
           <ion-icon class="nav-icon" src="assets/images/icons-nav-actions.svg"></ion-icon>
-          <ion-label>Ações</ion-label>
+          <ion-label>Acções</ion-label>
         </ion-tab-button>
         <ion-tab-button tab="chat">
           <ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
index 0cc58df91..0a2089f60 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
@@ -1,10 +1,10 @@
-<ion-header  class="ion-no-border">
+<ion-header hidden  class="ion-no-border">
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="title-content">
         <app-btn-modal-dismiss></app-btn-modal-dismiss>
         <div class="middle">
-          <ion-label class="title">Detalhes do Expediente</ion-label>
+          <ion-label class="title">{{ task.Folio}}</ion-label>
         </div>
         <div class="div-icon">
             <ion-menu-button autoHide="false">
@@ -15,21 +15,8 @@
     </div>
   </ion-toolbar>
 </ion-header>
-<!-- <ion-header>
-  <ion-toolbar class="bg-blue">
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/expediente"></ion-back-button>
-    </ion-buttons>
-    <ion-title>Expediente</ion-title>
-    <ion-buttons slot="end">
-      <ion-menu-button autoHide="false">
-        <ion-icon name="ellipsis-vertical-outline"></ion-icon>
-      </ion-menu-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header> -->
 
-<ion-menu autoHide="false" side="end" content-id="main-content">
+<!-- <ion-menu autoHide="false" side="end" content-id="main-content">
   <ion-header>
     <ion-toolbar translucent>
       <ion-title>Menu</ion-title>
@@ -63,177 +50,152 @@
       </ion-item>
     </ion-list>
   </ion-content>
-</ion-menu>
-<div class="ion-page" id="main-content">
+</ion-menu> -->
+<!-- <div class="ion-page" id="main-content">
   <ion-menu-button></ion-menu-button>
-</div>
+</div> -->
 
-<ion-content  padding>
-  <div *ngIf="task">
-  <h3 class="h3-event-title">Detalhes do Expediente</h3>
-  <ion-item-group>
-    <ion-item>
-      <ion-label position="stacked">Assunto</ion-label>
-      <ion-input disabled="true">{{ task.Folio }}</ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">Remetentes</ion-label>
-      <ion-input disabled="true">{{task.Remetente}}</ion-input><!-- {{ task.Senders }} -->
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">Data</ion-label>
-      <ion-input disabled="true" value=''>{{ task.CreateDate | date: 'dd-MM-yy | hh:mm'}}</ion-input>
-    </ion-item>
-    <ion-button (click)="viewDocument()" class="btn-ok-no-width" fill="clear" color="#fff" shape="round" expand="block">
-      <ion-icon name="attach" slot="start"></ion-icon>
-      Ver documento
-    </ion-button>
-  </ion-item-group>
-    <div *ngIf="eventsList">
-      <h3 class="h3-event-title">Eventos Associados</h3>
-    <!-- <ion-list>
-        <ion-item-sliding>
-          <ion-item lines="none" 
-          *ngFor="let event of eventsList"
-          [routerLink]="['/home/gabinete-digital/expediente/events/', event.EventId, 'gabinete-digital/expediente/' + serialnumber]">
-            <div class="div-item-{{event.CalendarName}}">
-              <div class="div-up">
-                <div class="div-icon">
-                  <ion-icon slot="start" name="reader"></ion-icon>
-                </div>
-                <div class="div-content-{{event.CalendarName}}">
-                  <h3 class="capitalizeText">{{event.Subject}}</h3>
-                  <p>{{event.StartDate | date: 'dd-MM-yy | hh:mm'}} - {{event.EndDate| date: 'hh:mm'}}</p>
-                </div>
-              </div>
-              <div class="div-botton">
-                <div class="div-botton-left">
-                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
-                </div>
-                <div class="div-botton-middle">
-                  <p class="item-list-small capitalizeText">{{event.Location}}</p>
-                </div>
-                <div *ngIf="event.HasAttachments" class="div-botton-right">
-                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
-                </div>
-              </div>
-            </div>
-          </ion-item>
-        </ion-item-sliding>
-    </ion-list> -->
+<ion-content class="height-100">
+  <div class="main-content d-flex height-100">
+    <div class="content d-flex flex-column" *ngIf="task">
 
-    <ion-list>
-      <div *ngIf="eventsList">
-        <ion-item-sliding>
-          <ion-item 
-            class="Rectangle" lines="none" 
-            *ngFor="let event of eventsList"
-            (click)="viewEventDetail(event.EventId)"
-          >
-              <!-- [routerLink]="['/home/events', event.EventId, 'events']" -->
-              <div class="content-{{profile}}-{{event.CalendarName}}">
-                <div class="approve-event-time">
-                  <p>{{event.StartDate | date: 'hh:mm'}}</p>
-                  <p>{{event.EndDate | date: 'hh:mm'}}</p>
-                </div>
-                <div class="approve-event-detail">
-                  <p *ngIf="event.StartDate != event.EndDate">{{event.StartDate | date: 'd/M/yy' }} - {{ event.EndDate | date: 'dd/mm/yy'}}  |  {{event.Location}}</p>
-                  <p *ngIf="event.StartDate == event.EndDate">{{event.StartDate | date: 'd/M/yy' }}  |  {{event.Location}}</p>
-                  <h3>{{event.Subject}}</h3>
-                </div>
-              </div>
-            </ion-item>
-        </ion-item-sliding>
+      <div class="main-header">
+        <div class="title-content">
+          <app-btn-modal-dismiss></app-btn-modal-dismiss>
+          <div class="middle">
+            <ion-label class="title">{{ task.Folio}}</ion-label>
+          </div>
+          <div class="div-icon">
+              <ion-menu-button autoHide="false">
+                <ion-icon name="ellipsis-vertical-outline"></ion-icon>
+              </ion-menu-button>
+          </div>
+        </div>
+      </div>
+      <div class="upper-content">
+        <div class="content-details">
+          <ion-label>
+            <p><span class="date">Sexta, 14 de Abril</span><span class="label">Expediente</span></p>
+            <p><span class="color-red">Muitíssimo urgente</span></p>
+          </ion-label>
+        </div>
+      </div>
+      <div class="middle-content">
+        <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <h3>Intervenientes</h3>
+            <div>
+              <p>Tiago Kayaya</p>
+              <p>Tiago Kayaya</p>
+            </div>
+          </ion-label>
+        </ion-item>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <h3>Detalhes</h3>
+            <p>MINEC, MINFIN</p>
+          </ion-label>
+        </ion-item>
+      </div>
+      <div class="bottom-content width-100">
+        <ion-list>
+          <h3>Documentos Anexados</h3>
+          <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label
+          (click)="viewDocument()">
+            <p class="attach-title-item">{{ task.Folio }}</p>
+            <p><span class="span-left">{{task.Remetente}}</span><span class="span-right">{{ task.CreateDate | date: 'dd/MM/yy' }}</span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
       </div>
-    </ion-list>
 
+      <div *ngIf="eventsList">
+        <h3 class="h3-event-title">Eventos Associados</h3>
+        <ion-list>
+          <div *ngIf="eventsList">
+            <ion-item-sliding>
+              <ion-item 
+                class="Rectangle" lines="none" 
+                *ngFor="let event of eventsList"
+                (click)="viewEventDetail(event.EventId)"
+              >
+                  <!-- [routerLink]="['/home/events', event.EventId, 'events']" -->
+                  <div class="content-{{profile}}-{{event.CalendarName}}">
+                    <div class="approve-event-time">
+                      <p>{{event.StartDate | date: 'hh:mm'}}</p>
+                      <p>{{event.EndDate | date: 'hh:mm'}}</p>
+                    </div>
+                    <div class="approve-event-detail">
+                      <p *ngIf="event.StartDate != event.EndDate">{{event.StartDate | date: 'd/M/yy' }} - {{ event.EndDate | date: 'dd/mm/yy'}}  |  {{event.Location}}</p>
+                      <p *ngIf="event.StartDate == event.EndDate">{{event.StartDate | date: 'd/M/yy' }}  |  {{event.Location}}</p>
+                      <h3>{{event.Subject}}</h3>
+                    </div>
+                  </div>
+                </ion-item>
+            </ion-item-sliding>
+          </div>
+        </ion-list>
+      </div>
 
-  </div>
-  <!-- <div *ngIf="!eventsList"> 
-    <ion-list>
-      <ion-list-header>
-        <ion-label>
+    </div>
+    <div class="aside-right flex-column height-100">
+      <div class="buttons">
+        <button full class="btn-ok" shape="round" >Efectuar dispacho</button>
+        <button class="btn-cancel" shape="round" >Descartar</button>
+        <div class="solid"></div>
+        <button full class="btn-cancel" shape="round" >Solicitar</button>
+        <button class="btn-cancel" shape="round" >Pedido de Deferimento</button>
+        <button full class="btn-cancel" shape="round" >Marcar Reunião</button>
+        <button class="btn-cancel" shape="round" >Enviar para Pendentes</button>
+        <div class="solid"></div>
+        <button class="btn-cancel" shape="round" >Executar</button>
+        <button full class="btn-cancel" shape="round" >Delegar</button>
+        <button class="btn-cancel" shape="round" >Arquivar</button>
+      </div>
+    </div>
+
+    <div *ngIf="!task">
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </ion-label>
+        </ion-list-header>
+        <ion-item>
+          <ion-label>
+            <h3>
+              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+            </h3>
+            <p>
+              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+            </p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h3>
+              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+            </h3>
+            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h3>
+              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+            </h3>
+            <p>
+              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+            </p>
+          </ion-label>
+        </ion-item>
+        <ion-button color="medium" shape="round" expand="block">
+          <!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
           <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </ion-label>
-      </ion-list-header>
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <ion-skeleton-text animated></ion-skeleton-text>
-        </ion-thumbnail>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-          <p>
-            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <ion-skeleton-text animated></ion-skeleton-text>
-        </ion-thumbnail>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-          <p>
-            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-     
-    </ion-list>
-  </div> -->
-
-  
-</div>
-  <div *ngIf="!task">
-    <ion-list>
-      <ion-list-header>
-        <ion-label>
-          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </ion-label>
-      </ion-list-header>
-      <ion-item>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-button color="medium" shape="round" expand="block">
-        <!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
-        <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-      </ion-button>
-    </ion-list>
+        </ion-button>
+      </ion-list>
+    </div>
   </div>
 </ion-content>
 
diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
index b906a9f52..07c05c508 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
@@ -1,19 +1,17 @@
 @import '~src/function.scss';
-.header-toolbar{
-    --background:transparent;
-    --opacity: 1;
-
-    .main-header{
-        width: 100%; /* 400px */
-        height: 100%;
-        font-family: Roboto;
-        border-top-left-radius: 25px;
-        border-top-right-radius: 25px;
-        background-color: #fff;
-        overflow:hidden;
-        padding: 30px 20px 0px 20px;
-        color:#000;
-        transform: translate3d(0, 1px, 0);
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+  float: left;
+}
+.main-header{
+  font-family: Roboto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+  background-color: #fff;
+  overflow:auto;
+  color:#000;
+  transform: translate3d(0, 1px, 0);
         
         .header-top{
           width: 360px;
@@ -67,6 +65,7 @@
           font-size: 25px;
           overflow: auto;
           float: left;
+          padding-left: 5px;
         }
         .div-icon{
           width: 40px;
@@ -75,8 +74,7 @@
           overflow: auto;
           padding: 1px;
         }
-    }
- }
+}
 ion-item-group{
     margin: 15px;
 }
@@ -85,141 +83,121 @@ ion-button{
     width: 80%;
     margin: 20px auto;
 }
-.h3-event-title{
-    padding: 15px 0 0px 25px;
-    font-weight: bold;
+
+
+.upper-content{
+  margin-left: 41px;
+  overflow: auto;
+  font-size: 18px;
+
+  .label{
+      border-radius: 20px;
+      background: #fec077;
+      float: right;
+      padding: 5px 13.5px 5px 13.5px;
+      color: #fff;
+  }
+
+  .button-calendar-type ion-button{
+    height: 25px;
+  }
+  .content-details{
+    font-size: 17px;
+    font-weight: 600;
+    .date{
+      color: #797979;
+    }
+    .color-red{
+      color:#d30a0a;
+    }
+
+  } 
+}
+.middle-conten{
+  .middle-content h3, .middle-content p{
+    font-size: 16px;
+  }
+}
+.bottom-content{
+  //width: 360px;
+  margin: 0 auto;
+  
+  .bottom-content h3{
+    font-size: 16px;
+    margin: 0 0 0 10px;
+  }
+  .attach-document{
+    font-size: 15px;
+    color: #0d89d1;
+    margin: 5px 5px 5px 10px;
+    padding: 5px;
+    float: left;
+  }
+  .attach-icon{
+    width: 37px;
+    font-size: 35px;
+    float: left;
+  }
+  .attach-title-item{
+    width: 100%;
+    font-size: 15px;
+    color:#0d89d1;
+  }
+  /* SPAN */
+  .span-left{
+    float: left;
+    font-size: 15x;
+  }
+  .span-right{
+  text-align: right;
+  float: right;
+  font-size: 13px;
+  }
+}
+.aside-right{
+  padding: 30px 20px 0 20px !important;
+
+  .arrow-right{
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 20px;
+   
+    .arrow-right-icon{
+        width: 37px;
+        float: right;
+        font-size: 35px;
+        overflow: hidden;
+    }
+  }
+  .buttons{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .btn-ok, .btn-cancel, .btn-delete{
+      font-size: 16px !important;
+      font-weight: 600 !important;
+      width: 100% !important;
+      margin-bottom: 10px !important;
+      padding: 15px !important;
+    }
+  }
+  .solid {
+    display: block;
+    width: 90%;
+    border-top: 1px solid #bbb;
+    margin: 0 auto !important;
+    margin-bottom: 10px !important;
+  }
 }
 
-//DIV
-.div-item-Oficial{
-    width: 100%;
-    overflow: auto;
-    border-bottom: 1px solid #ccc;
-    margin: 10px 0 5px 0;
-    /* background: #cab0dc; */
-    /* border-radius: 20px; */
-    /* padding: 10px; */
-    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+@media only screen and (min-width: 1024px) {
+  .content{
+    width: 70%;
+    border-right: 1px solid #d8d8d8;
   }
-  .div-item-Pessoal{
-    width: 100%;
-    overflow: auto;
-    border-bottom: 1px solid #ccc;
-    margin: 10px 0 5px 0;
-    /* background: #cbeecb; */
-    /* border-radius: 20px; */
-    /* padding: 10px; */
-    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+
+  .aside-right{
+    width: 30%;
   }
-  .div-up{
-    width: 100%;
-    overflow: auto;
-  }
-  .div-up h3{
-    margin: 0;
-    padding: 0;
-    font-size: 17px;
-    width: 100%;
-  }
-  .div-icon{
-    width: 10%;
-    font-size: 22px;
-    float: left;
-    color: #808080;
-  }
-  .div-icon ion-icon{
-    display: block;
-    margin: 0 auto;
-  
-  }
-  .div-content-Oficial{
-    width: 85%;
-    float: left;
-    border-left: 4px solid #cab0dc;
-    padding: 0 0 0 12px;
-  }
-  .div-content-Pessoal{
-    width: 85%;
-    float: left;
-    border-left: 4px solid #cbeecb;
-    padding: 0 0 0 12px;
-  }
-  .div-content-Oficial h3, .div-content-Pessoal h3{
-    font-size: 14pt;
-    /* border: 1px solid red; */
-  }
-  .div-content-Oficial p, .div-content-Pessoal p{
-    font-size: 12pt;
-    color: rgb(94, 92, 92);
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-  .div-botton{
-    width: 100%;
-    overflow: auto;
-    margin: 10px 0 5px 0;
-  }
-  .div-botton-left{
-    width: 10%;
-    float: left;
-  }
-  .ion-icon-location{
-    text-align: center;
-    display: block;
-    color: #000;
-    font-size: 16px;
-    margin: 0 auto;
-  }
-  .div-botton-middle{
-    width: 75%;
-    float: left;
-    margin-top: 0.5px;
-  }
-  .div-botton-middle p{
-    padding: 0;
-    margin: 0;
-  }
-  .div-botton-right{
-    width: 10%;
-    float: left;
-    margin: 0;
-    padding: 0;
-  }
-  .ion-icon-attach{
-    color: #666666;
-    font-size: 20px;
-  }
-/* TOGGLE BUTTON */
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 90px;
-    height: 34px;
-    float: right;
-    margin:20px 20px 0 0;
-  }
-  .div-top-header{
-    width: 400px;
-    margin: 6px auto;
-    background-color: #0782c9;
-    overflow: auto;
-  }
-  .div-search{
-    font-size: 45px;
-    float: left;
-    margin: 0 0 0 10px
-  }
-  .div-logo{
-    background: transparent;
-    width: 150px;
-    margin: 2.5px 0 2.5px 71px;
-    float: left;
-  }
-  .div-logo img{
-    width: 100%;
-  }
-  .div-profile{
-    font-size: 45px;
-    float: right;
-    margin-right: 10px;
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/expediente/expediente.page.ts b/src/app/pages/gabinete-digital/expediente/expediente.page.ts
index 34b2fd05b..447317a76 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente.page.ts
+++ b/src/app/pages/gabinete-digital/expediente/expediente.page.ts
@@ -67,7 +67,6 @@ export class ExpedientePage implements OnInit {
   async viewExpedientDetail(serialNumber:any) {
     console.log(this.profile);
 
-
     let classs;
     if( window.innerWidth <= 1024){
       classs = 'modal modal-desktop'
@@ -75,7 +74,6 @@ export class ExpedientePage implements OnInit {
       classs = 'gabinete-digital-mobile-modal-to-Desktop'
     }
 
-    
     const modal = await this.modalController.create({
       component: ExpedienteDetailPage,
       componentProps:{
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.html b/src/app/pages/gabinete-digital/gabinete-digital.page.html
index 3f3d8b37b..211d1c35f 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.html
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.html
@@ -28,7 +28,7 @@
             <p class="text-center exp-card-title ">Correspondencia</p>
             <p class="text-center exp-card-content">{{count_exp_dailywork}} <span class="title1">Documentos</span></p>
           </div>
-          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
+          <div class="exp-card d-flex flex-column justify-center" (click)="viewEventDetail('1')">
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-expediente-pendente.svg"></ion-icon>
             </div>
@@ -71,7 +71,8 @@
       <div class="aside-content d-none flex-column height-100">
         <app-empty-container [texto]="emptyTextDescription" *ngIf="showEmptyContainer" class="d-flex height-100 flex-column"></app-empty-container>
         <app-events-to-approve [segment]="'MDGPR'" *ngIf="showEventsToApprove" class="d-flex height-100 flex-column"></app-events-to-approve>
-        <app-expedients [profile]="profile" class="d-flex height-100 flex-column" *ngIf="showExpedients"></app-expedients>
+        <app-expedients (openExpedientDetail)="openExpedientPage($event)" [profile]="profile" class="d-flex height-100 flex-column" *ngIf="showExpedients"></app-expedients>
+        <app-expediente (openExpedientList)="openExpedientListPage()" [profile]="profile" [serialNumber]="serialNumber" class="d-flex height-100 flex-column" *ngIf="showExpedientDetail"></app-expediente>
       </div>
   </div>
 </ion-content>
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.ts b/src/app/pages/gabinete-digital/gabinete-digital.page.ts
index 259bd8ab1..e195887c3 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.ts
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.ts
@@ -32,10 +32,13 @@ export class GabineteDigitalPage implements OnInit {
     showExpediente : false
   }
   showEventsToApprove = false;
-  showEmptyContainer = false;
-  showExpedients = true;
+  showEmptyContainer = true;
+  showExpedients = false;
+  showExpedientDetail = false;
   emptyTextDescription = 'Sem opção selecionada';
 
+  serialNumber:string;
+
   constructor(
     private processesbackend:ProcessesService,
     private modalController: ModalController,
@@ -99,6 +102,7 @@ this.processesbackend.GetActionsList().subscribe(res=>{
     this.showEventsToApprove = false;
     this.showExpedients = false;
     this.showExpedients = false;
+    this.showExpedientDetail = false;
   }
 
   LoadCounts() {
@@ -181,6 +185,18 @@ this.processesbackend.GetActionsList().subscribe(res=>{
       this.showExpedients = true;
     }
   }
+  openExpedientPage(data){
+    console.log(data);
+    
+    this.closeAllDesktopComponents();
+    if( window.innerWidth <= 1024){
+      //this.openExpedientList();
+    }
+    else{
+      this.serialNumber = data;
+      this.showExpedientDetail = true;
+    }
+  }
   async openExpedientList(){
     
     this.closeAllDesktopComponent();
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
index de66908ef..54f2c4c90 100644
--- a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
@@ -57,14 +57,14 @@
     letter-spacing: normal;
     color: var(--Antartic-grey);
     margin: 0;
-    padding: 0;
+    padding-bottom: 10px;
   }
   .approve-event-detail{
     float: left;
     margin-left: 10px;
   }
   .approve-event-detail p{
-    width: 250px;
+    //width: 250px;
     font-family: Roboto;
     font-size: 13px;
     font-weight: normal;
@@ -74,7 +74,7 @@
     letter-spacing: normal;
     color: var(--black);
     margin: 0;
-    padding: 0;
+    padding-bottom: 10px;
   }
   .approve-event-detail h3{
     width: 250px;
diff --git a/src/app/shared/gabinete-digital/expediente/expediente.page.html b/src/app/shared/gabinete-digital/expediente/expediente.page.html
index 92952c2d0..4ecda8927 100644
--- a/src/app/shared/gabinete-digital/expediente/expediente.page.html
+++ b/src/app/shared/gabinete-digital/expediente/expediente.page.html
@@ -2,110 +2,237 @@
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="title-content">
-        <app-btn-modal-dismiss></app-btn-modal-dismiss>
+        <app-btn-modal-dismiss (click)="openExpedientListPage()"></app-btn-modal-dismiss>
         <div class="middle">
-          <ion-label class="title">11Gabinete Digital</ion-label>
+          <ion-label class="title">Detalhes do Expediente</ion-label>
+        </div>
+        <div class="div-icon">
+            <ion-menu-button autoHide="false">
+              <ion-icon name="ellipsis-vertical-outline"></ion-icon>
+            </ion-menu-button>
         </div>
       </div>
     </div>
   </ion-toolbar>
-  <ion-toolbar>
-    <ion-segment [(ngModel)]="segment">
-      <ion-segment-button value="expediente">
-        Expediente
-      </ion-segment-button>
-      <ion-segment-button value="pendentes">
-        Pendentes
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
 </ion-header>
+<!-- <ion-header>
+  <ion-toolbar class="bg-blue">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/expediente"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Expediente</ion-title>
+    <ion-buttons slot="end">
+      <ion-menu-button autoHide="false">
+        <ion-icon name="ellipsis-vertical-outline"></ion-icon>
+      </ion-menu-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header> -->
 
-<ion-content>
-  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-      <ion-refresher-content
-        pullingIcon="chevron-down-circle-outline"
-        pullingText="deslize para actualizar"
-        refreshingSpinner="circles"
-        refreshingText="A actualizar...">
-      </ion-refresher-content>
-    </ion-refresher>
-  
-  <div [ngSwitch]="segment" *ngIf="taskslist">
-    <ion-list *ngSwitchCase="'expediente'">
-      <ion-item-group>
+<ion-menu autoHide="false" side="end" content-id="main-content">
+  <ion-header>
+    <ion-toolbar translucent>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item (click)="openExpedientActionsModal('0',fulltask)">
+        <ion-icon name="documents" slot="start"></ion-icon>
+        <ion-label>Efectuar Despacho</ion-label>
+      </ion-item>
+      <ion-item (click)="openExpedientActionsModal('1',fulltask)">
+        <ion-icon name="arrow-undo" slot="start"></ion-icon>
+        <ion-label>Pedido de Parecer</ion-label>
+      </ion-item>
+      <ion-item (click)="openExpedientActionsModal('2',fulltask)">
+        <ion-icon name="arrow-redo" slot="start"></ion-icon>
+        <ion-label>Pedido de Deferimento</ion-label>
+      </ion-item>
+      <ion-item (click)="openBookMeetingModal(task)">
+        <ion-icon name="calendar" slot="start"></ion-icon>
+        <ion-label>Marcar reunião</ion-label>
+      </ion-item>
+      <ion-item (click)="discartExpedient()">
+        <ion-icon name="trash" slot="start"></ion-icon>
+        <ion-label>Descartar</ion-label>
+      </ion-item>
+      <ion-item disabled>
+        <ion-icon name="paper-plane" slot="start"></ion-icon>
+        <ion-label>Enviar para pendentes</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+<div class="ion-page" id="main-content">
+  <ion-menu-button></ion-menu-button>
+</div>
+
+<ion-content  padding>
+  <div *ngIf="task">
+  <h3 class="h3-event-title">Detalhes do Expediente</h3>
+  <ion-item-group>
+    <ion-item>
+      <ion-label position="stacked">Assunto</ion-label>
+      <ion-input disabled="true">{{ task.Folio }}</ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Remetentes</ion-label>
+      <ion-input disabled="true">{{task.Remetente}}</ion-input><!-- {{ task.Senders }} -->
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Data</ion-label>
+      <ion-input disabled="true" value=''>{{ task.CreateDate | date: 'dd-MM-yy | hh:mm'}}</ion-input>
+    </ion-item>
+    <ion-button (click)="viewDocument()" class="btn-ok-no-width" fill="clear" color="#fff" shape="round" expand="block">
+      <ion-icon name="attach" slot="start"></ion-icon>
+      Ver documento
+    </ion-button>
+  </ion-item-group>
+    <div *ngIf="eventsList">
+      <h3 class="h3-event-title">Eventos Associados</h3>
+    <!-- <ion-list>
         <ion-item-sliding>
-          <!-- <ion-item lines="none" *ngFor = "let task of taskslist" >
-            <div class="div-content-expediente">
-              <ion-item lines="none"  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]">
-                <ion-icon slot="end" name="calendar"></ion-icon>
-                 <h3>{{ task.Folio }}</h3>
-              </ion-item>
-              <p><span class="span-left">{{task.Remetente}}</span><span class="span-right">{{ task.CreateDate | date: 'dd-MM-yy' }}</span></p>
-              <p><span class="span-left">{{ task.Senders }}</span><span class="span-right">{{ task.CreateDate | date: 'dd-MM-yy' }}</span></p>
-            </div>
-          </ion-item> -->
-
-          <ion-item 
-          class="expediente" 
-          lines="none"  
-          *ngFor = "let task of taskslist"
-          (click)="viewExpedientDetail(task.SerialNumber)"
-          >
-          <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
-            <div class="Rectangle">
-              <div class="exp-top-detail">
-                <div class="exp-date">
-                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+          <ion-item lines="none" 
+          *ngFor="let event of eventsList"
+          [routerLink]="['/home/gabinete-digital/expediente/events/', event.EventId, 'gabinete-digital/expediente/' + serialnumber]">
+            <div class="div-item-{{event.CalendarName}}">
+              <div class="div-up">
+                <div class="div-icon">
+                  <ion-icon slot="start" name="reader"></ion-icon>
                 </div>
-                <div class="exp-remetente">
-                  <ion-label>{{task.Remetente}}</ion-label>
-                </div>
-                <div class="exp-icon">
-                  <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                  <label></label>
+                <div class="div-content-{{event.CalendarName}}">
+                  <h3 class="capitalizeText">{{event.Subject}}</h3>
+                  <p>{{event.StartDate | date: 'dd-MM-yy | hh:mm'}} - {{event.EndDate| date: 'hh:mm'}}</p>
                 </div>
               </div>
-              <div class="exp-bottom-detail">
-                <ion-label>{{ task.Folio }}</ion-label>
+              <div class="div-botton">
+                <div class="div-botton-left">
+                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
+                </div>
+                <div class="div-botton-middle">
+                  <p class="item-list-small capitalizeText">{{event.Location}}</p>
+                </div>
+                <div *ngIf="event.HasAttachments" class="div-botton-right">
+                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
+                </div>
               </div>
             </div>
           </ion-item>
-
-
         </ion-item-sliding>
-      </ion-item-group>
-    </ion-list>
-    <ion-list *ngSwitchCase="'pendentes'">
-      <ion-item-group>
-        <ion-item-sliding>
-        </ion-item-sliding>
-      </ion-item-group>
-    </ion-list>
-  </div>
-  <div *ngIf="!taskslist">
-  
+    </ion-list> -->
+
     <ion-list>
+      <div *ngIf="eventsList">
+        <ion-item-sliding>
+          <ion-item 
+            class="Rectangle" lines="none" 
+            *ngFor="let event of eventsList"
+            (click)="viewEventDetail(event.EventId)"
+          >
+              <!-- [routerLink]="['/home/events', event.EventId, 'events']" -->
+              <div class="content-{{profile}}-{{event.CalendarName}}">
+                <div class="approve-event-time">
+                  <p>{{event.StartDate | date: 'hh:mm'}}</p>
+                  <p>{{event.EndDate | date: 'hh:mm'}}</p>
+                </div>
+                <div class="approve-event-detail">
+                  <p *ngIf="event.StartDate != event.EndDate">{{event.StartDate | date: 'd/M/yy' }} - {{ event.EndDate | date: 'dd/mm/yy'}}  |  {{event.Location}}</p>
+                  <p *ngIf="event.StartDate == event.EndDate">{{event.StartDate | date: 'd/M/yy' }}  |  {{event.Location}}</p>
+                  <h3>{{event.Subject}}</h3>
+                </div>
+              </div>
+            </ion-item>
+        </ion-item-sliding>
+      </div>
+    </ion-list>
+
+
+  </div>
+  <!-- <div *ngIf="!eventsList"> 
+    <ion-list>
+      <ion-list-header>
+        <ion-label>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </ion-label>
+      </ion-list-header>
       <ion-item>
-        <ion-thumbnail slot="end">
+        <ion-thumbnail slot="start">
           <ion-skeleton-text animated></ion-skeleton-text>
         </ion-thumbnail>
         <ion-label>
-          <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
-          <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
-          <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
         </ion-label>
       </ion-item>
       <ion-item>
-        <ion-thumbnail slot="end">
+        <ion-thumbnail slot="start">
           <ion-skeleton-text animated></ion-skeleton-text>
         </ion-thumbnail>
         <ion-label>
-          <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
-          <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
-          <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
         </ion-label>
       </ion-item>
+     
+    </ion-list>
+  </div> -->
+
+  
+</div>
+  <div *ngIf="!task">
+    <ion-list>
+      <ion-list-header>
+        <ion-label>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </ion-label>
+      </ion-list-header>
+      <ion-item>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-button color="medium" shape="round" expand="block">
+        <!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
+        <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+      </ion-button>
     </ion-list>
   </div>
 </ion-content>
diff --git a/src/app/shared/gabinete-digital/expediente/expediente.page.scss b/src/app/shared/gabinete-digital/expediente/expediente.page.scss
index 275e95e28..b906a9f52 100644
--- a/src/app/shared/gabinete-digital/expediente/expediente.page.scss
+++ b/src/app/shared/gabinete-digital/expediente/expediente.page.scss
@@ -77,48 +77,53 @@
         }
     }
  }
-/* CONTENT */
-.item-list-small{
-    font-size: 11px;
+ion-item-group{
+    margin: 15px;
+}
+ion-button{
+    display: block;
+    width: 80%;
+    margin: 20px auto;
+}
+.h3-event-title{
+    padding: 15px 0 0px 25px;
+    font-weight: bold;
+}
+
+//DIV
+.div-item-Oficial{
+    width: 100%;
+    overflow: auto;
+    border-bottom: 1px solid #ccc;
+    margin: 10px 0 5px 0;
+    /* background: #cab0dc; */
+    /* border-radius: 20px; */
+    /* padding: 10px; */
+    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+  }
+  .div-item-Pessoal{
+    width: 100%;
+    overflow: auto;
+    border-bottom: 1px solid #ccc;
+    margin: 10px 0 5px 0;
+    /* background: #cbeecb; */
+    /* border-radius: 20px; */
+    /* padding: 10px; */
+    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+  }
+  .div-up{
+    width: 100%;
     overflow: auto;
   }
-  .ion-item-class{
-    padding: 0;
-  
-  }
-  .label-text{
-    width: 100%;
-    padding: 0;
-    margin: 0;
-  }
-//DIV
-ion-item{
-  --background: none;
-}
-.div-content-expediente{
-  width: 100%;
-  float: left;
-  border-left: 3px solid #dae3f3;
-  padding:5px 5px 15px 5px;
-  margin: 10px 0 10px 0;
-  background:  #dae3f3;
-  border-radius: 20px;
-}
-.div-content-pendentes{
-  width: 100%;
-  float: left;
-  border-left: 3px solid #d9d9d9;
-  padding: 5px;
-}
-  .div-content-expediente h3, .div-content-pendentes h3{
+  .div-up h3{
     margin: 0;
     padding: 0;
-    font-size: 14pt;
+    font-size: 17px;
     width: 100%;
   }
   .div-icon{
     width: 10%;
-    font-size: 20px;
+    font-size: 22px;
     float: left;
     color: #808080;
   }
@@ -127,101 +132,94 @@ ion-item{
     margin: 0 auto;
   
   }
-  .div-content-expediente p, .div-content-pendentes p{
+  .div-content-Oficial{
+    width: 85%;
+    float: left;
+    border-left: 4px solid #cab0dc;
+    padding: 0 0 0 12px;
+  }
+  .div-content-Pessoal{
+    width: 85%;
+    float: left;
+    border-left: 4px solid #cbeecb;
+    padding: 0 0 0 12px;
+  }
+  .div-content-Oficial h3, .div-content-Pessoal h3{
     font-size: 14pt;
+    /* border: 1px solid red; */
+  }
+  .div-content-Oficial p, .div-content-Pessoal p{
+    font-size: 12pt;
     color: rgb(94, 92, 92);
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+  .div-botton{
+    width: 100%;
+    overflow: auto;
+    margin: 10px 0 5px 0;
+  }
+  .div-botton-left{
+    width: 10%;
+    float: left;
+  }
+  .ion-icon-location{
+    text-align: center;
+    display: block;
+    color: #000;
+    font-size: 16px;
+    margin: 0 auto;
+  }
+  .div-botton-middle{
+    width: 75%;
+    float: left;
+    margin-top: 0.5px;
+  }
+  .div-botton-middle p{
     padding: 0;
     margin: 0;
   }
-  .span-left{
-      /* border: 1px solid red; */
-      float: left;
-      font-size: 12px;
-      padding-left: 18px;
+  .div-botton-right{
+    width: 10%;
+    float: left;
+    margin: 0;
+    padding: 0;
   }
-  .span-right{
-    /* border: 1px solid blue; */
-    text-align: right;
+  .ion-icon-attach{
+    color: #666666;
+    font-size: 20px;
+  }
+/* TOGGLE BUTTON */
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 90px;
+    height: 34px;
     float: right;
-    font-size: 12px;
-    padding-right: 18px;
-}
-
-/* New CSS */
-.expediente{
-  padding-top: 10px;
-}
-.exp-list-item{
-  width: 368px;
-  overflow: auto;
-  /* border-bottom: 1px solid gray; */
-  margin: 10px auto;
-}
-.exp-top-detail{
-  width: 100%;
-  overflow: auto;
-}
-.exp-date{
-  width: auto;
-  font-family: Roboto;
-  font-size: 13px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  color: #797979;
-  float: left;
-}
-.exp-remetente{
-  width: 200px;
-  font-family: Roboto;
-  font-size: 13px;
-  font-weight: normal;
-  color: #000000;
-  float: left;
-  margin-left: 16px;
-
-}
-.exp-icon{
-  width: 45px;
-  float: right;
-  font-size: 13px;
-}
-.exp-icon ion-icon{
-  font-size: 25px;
-  color: #42b9fe;
-}
-.exp-bottom-detail{
-  width: 100px;
-  float: left;
-  font-family: Roboto;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0d89d1;
-}
-.div-top-header{
-  width: 400px;
-  margin: 6px auto;
-  background-color: #0782c9;
-  overflow: auto;
-}
-.div-search{
-  font-size: 45px;
-  float: left;
-  margin: 0 0 0 10px
-}
-.div-logo{
-  background: transparent;
-  width: 150px;
-  margin: 2.5px 0 2.5px 71px;
-  float: left;
-}
-.div-logo img{
-  width: 100%;
-}
-.div-profile{
-  font-size: 45px;
-  float: right;
-  margin-right: 10px;
-}
\ No newline at end of file
+    margin:20px 20px 0 0;
+  }
+  .div-top-header{
+    width: 400px;
+    margin: 6px auto;
+    background-color: #0782c9;
+    overflow: auto;
+  }
+  .div-search{
+    font-size: 45px;
+    float: left;
+    margin: 0 0 0 10px
+  }
+  .div-logo{
+    background: transparent;
+    width: 150px;
+    margin: 2.5px 0 2.5px 71px;
+    float: left;
+  }
+  .div-logo img{
+    width: 100%;
+  }
+  .div-profile{
+    font-size: 45px;
+    float: right;
+    margin-right: 10px;
+  }
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/expediente/expediente.page.ts b/src/app/shared/gabinete-digital/expediente/expediente.page.ts
index 8de6c53b6..e70a7cd4f 100644
--- a/src/app/shared/gabinete-digital/expediente/expediente.page.ts
+++ b/src/app/shared/gabinete-digital/expediente/expediente.page.ts
@@ -1,13 +1,19 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
-import { CalendarComponent } from 'ionic2-calendar';
-
-import { DailyWorkTask } from '../../../models/dailyworktask.model';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { ProcessesService } from 'src/app/services/processes.service';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { EventsService } from 'src/app/services/events.service';
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+import { DailyWorkTask } from 'src/app/models/dailyworktask.model';
+import { ActivatedRoute, Router } from '@angular/router';
 import { formatDate } from '@angular/common';
-import { LoadingService } from 'src/app/services/loading.service';
-import { ModalController, NavParams } from '@ionic/angular';
-import { ExpedienteDetailPage } from 'src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page';
+
+import { MenuController, ModalController, NavParams } from '@ionic/angular';
+import { AlertService } from 'src/app/services/alert.service';
+import { Event } from 'src/app/models/event.model';
+import { ViewEventPage } from 'src/app/pages/agenda/view-event/view-event.page';
+import { momentG }  from 'src/plugin/momentG';
+import { ExpedientTaskModalPage } from 'src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page';
+import { BookMeetingModalPage } from 'src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page';
 
 @Component({
   selector: 'app-expediente',
@@ -16,80 +22,143 @@ import { ExpedienteDetailPage } from 'src/app/pages/gabinete-digital/expediente/
 })
 export class ExpedientePage implements OnInit {
 
-  segment:string;
-  //profile:string;
-
-  @ViewChild(CalendarComponent) myCal: CalendarComponent;
-
-  taskslist:DailyWorkTask[];
-  serialNumber:string;
+  task: any;
+  fulltask: any;
+  eventsList: Event[];
+  //serialnumber: string;
+  //profile: string;
 
   @Input() profile:string;
+  @Input() serialNumber:string;
+  @Output() openExpedientList:EventEmitter<any> = new EventEmitter<any>();
 
-  constructor(
-    private processes:ProcessesService,
+  constructor(private activateRoute: ActivatedRoute,
+    private processes: ProcessesService,
+    private iab: InAppBrowser,
+    private attachments: AttachmentsService,
+    private events: EventsService,
+    private menu: MenuController,
+    private router: Router,
     private modalController: ModalController,
-    ) { 
-      this.profile = 'mdgpr';
+    //private navParams: NavParams,
+    private alertService: AlertService) { 
+      //this.serialnumber = this.navParams.get('serialNumber');
+      //this.profile = this.navParams.get('profile');
     }
 
   ngOnInit() {
-    //Inicializar segment
-    this.segment = "expediente";
-    this.LoadList();
+    this.profile = "mdgpr";
+    console.log(this.serialNumber);
+    
+    this.activateRoute.paramMap.subscribe(paramMap => {
+      if (!paramMap.has('SerialNumber')) {
+        return;
+      }
+      /* this.serialnumber = paramMap.get('SerialNumber'); */
+      this.LoadTaskDetail(this.serialNumber);
+      this.LoadRelatedEvents(this.serialNumber);
+    });
+    this.LoadTaskDetail(this.serialNumber);
+    this.LoadRelatedEvents(this.serialNumber);
+  }
+  openExpedientListPage(){
+    this.openExpedientList.emit();
   }
 
-  LoadList()
-  {
-    this.processes.GetTasksList("Expediente", false).subscribe(result => {
-      this.taskslist = new Array();
-      result.forEach(element => {
-        let task: DailyWorkTask = {
-          "SerialNumber": element.serialNumber,
-          "Folio": element.workflowInstanceFolio,
-          "Senders": element.originator.email,
-          "CreateDate": formatDate(new Date(element.taskStartDate), 'yyyy-MM-dd HH:mm', 'pt'),
-          "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
-          "Remetente": element.workflowInstanceDataFields.Remetente
-        }
-        this.taskslist.push(task);
-      });
+
+  async LoadTaskDetail(serial: string) {
+    this.processes.GetTask(serial).subscribe(res => {
+      this.task = {
+        "SerialNumber": res.serialNumber,
+        "Folio": res.workflowInstanceFolio,
+        "Senders": res.originator.email,
+        "CreateDate": momentG(new Date(res.taskStartDate),'yyyy-MM-dd HH:mm:ss'),
+        "DocumentURL": res.workflowInstanceDataFields.ViewerRequest,
+        "Remetente": res.workflowInstanceDataFields.Sender,
+      }
+      this.fulltask = res;
+      console.log(res);
+
     });
   }
 
-  doRefresh(event) {
-    this.LoadList();
-
-    setTimeout(() => {
-      event.target.complete();
-    }, 2000);
+  async LoadRelatedEvents(serial: string) {
+    if (this.eventsList == null) {
+      this.attachments.getAttachmentsBySerial(serial).subscribe(res => {
+        console.log(res);
+        res.forEach(att => {
+          if (this.eventsList == null) {
+            this.eventsList = new Array();
+          }
+          this.events.getEvent(att.ParentId).subscribe(event => {
+            this.eventsList.push(event);
+            console.log(this.eventsList);
+          });
+        });
+      });
+    }
   }
 
-  async viewExpedientDetail(serialNumber:any) {
-    console.log(this.profile);
+  viewDocument(){
+    const url: string = this.task.DocumentURL.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+    const browser = this.iab.create(url,"_parent");
+    browser.show();
+  }
 
-    let classs;
-    if( window.innerWidth <= 1024){
-      classs = 'modal'
-    } else  {
-      classs = 'gabinete-digital-mobile-modal-to-Desktop'
-    }
+  openMenu() {
+    this.menu.open();
+  }
 
+  async openExpedientActionsModal(taskAction: any, task: any) {
     const modal = await this.modalController.create({
-      component: ExpedienteDetailPage,
-      componentProps:{
-        enterAnimation: "",
-        serialNumber: serialNumber,
-        profile: this.profile,
+      component: ExpedientTaskModalPage,
+      componentProps: {
+        taskAction: taskAction,
+        task: task,
       },
-      cssClass: classs,
+      cssClass: 'expedient-task-modal modal-desktop',
       backdropDismiss: false
     });
     await modal.present();
-    modal.onDidDismiss().then((res)=>{
-      
-    });
+    modal.onDidDismiss();
   }
 
+  discartExpedient() {
+    let body = { "serialNumber": this.serialNumber, "action": "Task Completed" }
+    console.log(body);
+    this.processes.PostTaskAction(body);
+    this.router.navigate(['/home/gabinete-digital/expediente']);
+  }
+
+  async openBookMeetingModal(task: any) {
+    const modal = await this.modalController.create({
+      component: BookMeetingModalPage,
+      componentProps: {
+        task: task,
+      },
+      cssClass: 'book-meeting-modal modal-desktop',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
+  async viewEventDetail(eventId: any) {
+    console.log(this.profile);
+
+    const modal = await this.modalController.create({
+      component: ViewEventPage,
+      componentProps: {
+        eventId: eventId,
+        profile: this.profile,
+      },
+      cssClass: 'modal modal-desktop',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss().then((res) => {
+      if (res) {
+      }
+    });
+  }
 }
-  
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.html b/src/app/shared/gabinete-digital/expedients/expedients.page.html
index ac92756fd..00b6cffe0 100644
--- a/src/app/shared/gabinete-digital/expedients/expedients.page.html
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.html
@@ -1,6 +1,6 @@
 <ion-header class="ion-no-border">
   <div class="title">
-    <ion-label >Correspondencia</ion-label>
+    <ion-label >Correspondência</ion-label>
   </div>
   <ion-toolbar>
     <ion-segment [(ngModel)]="segment">
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.scss b/src/app/shared/gabinete-digital/expedients/expedients.page.scss
index 6e5e17b43..653bf936c 100644
--- a/src/app/shared/gabinete-digital/expedients/expedients.page.scss
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.scss
@@ -33,7 +33,7 @@ ion-item{
     //Sborder: solid 1px #e9e9e9;
     background-color: var(--white);
     margin: 0 auto;
-    padding: 10px;
+    //padding: 10px;
     margin-bottom: 10px;
     overflow: auto;
   }
@@ -94,7 +94,7 @@ ion-item{
   padding-top: 10px;
 }
 .exp-list-item{
-  width: 368px;
+  //width: 368px;
   overflow: auto;
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
@@ -116,7 +116,7 @@ ion-item{
   float: left;
 }
 .exp-remetente{
-  width: 200px;
+  //width: 200px;
   font-family: Roboto;
   font-size: 13px;
   font-weight: normal;
@@ -135,7 +135,6 @@ ion-item{
   color: #42b9fe;
 }
 .exp-bottom-detail{
-  width: 100px;
   float: left;
   font-family: Roboto;
   font-size: 16px;
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.ts b/src/app/shared/gabinete-digital/expedients/expedients.page.ts
index 00dd8602a..ef1d2af24 100644
--- a/src/app/shared/gabinete-digital/expedients/expedients.page.ts
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { CalendarComponent } from 'ionic2-calendar';
 
@@ -24,6 +24,7 @@ export class ExpedientsPage implements OnInit {
   serialNumber:string;
 
   @Input() profile:string;
+  @Output() openExpedientDetail:EventEmitter<any> = new EventEmitter<any>();
 
   constructor(
     private processes:ProcessesService,
@@ -38,6 +39,12 @@ export class ExpedientsPage implements OnInit {
     this.LoadList();
   }
 
+  openExpedientDetailPage(data){
+    console.log(data);
+    
+    this.openExpedientDetail.emit(data);
+  }
+
   LoadList()
   {
     this.processes.GetTasksList("Expediente", false).subscribe(result => {
@@ -81,8 +88,8 @@ export class ExpedientsPage implements OnInit {
         serialNumber: serialNumber,
         profile: this.profile,
       },
-      cssClass: classs,
-      backdropDismiss: false
+      cssClass: 'modal modal-desktop',
+      backdropDismiss: false,
     });
     await modal.present();
     modal.onDidDismiss().then((res)=>{