diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 176e6d3..be403e2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -16,6 +16,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { ShortPipe } from './dashboard/short';
 import { FilterPipe } from './dashboard/filter.pipe';
 import { PontPipe } from './dashboard/font';
+import { TextShortPipe } from './dashboard/texrshort';
 
 
 @NgModule({
@@ -23,6 +24,7 @@ import { PontPipe } from './dashboard/font';
     AppComponent,
     ShortPipe,
     PontPipe,
+    TextShortPipe,
     LayoutComponent,
     DashboardComponent,
     FilterPipe
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index cfea0aa..d57a665 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -35,7 +35,6 @@
           <h1 class="icon-bubble font-green-sharp">
             <span class="caption-subject font-green-sharp sbold font"> Active</span>
           </h1>
-
           <div class="input-group" style="float: right; margin-top: 11px;">
             <div class="input-icon right">
               <i class="icon-magnifier">
@@ -49,11 +48,11 @@
         </div>
         <div class="panel-body">
           <div class="row">
-            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: '' ">
+            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: '' |  filter:FilterSearchButton: 'name.valueN' " >
               <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
                 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
                 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
-                <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 22px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
+                <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
                 <div class="visual">
                   <i class="fa fa-comments"></i>
                 </div>
@@ -108,7 +107,7 @@
               <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
                 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
                 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
-                <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 22px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
+                <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
                 <div class="visual">
                   <i class="fa fa-comments"></i>
                 </div>
@@ -665,7 +664,7 @@
           <h1 class="icon-bubble font-green-sharp">
             <span class="caption-subject font-green-sharp sbold font"> Active</span>
           </h1>
-
+          <button *ngFor="let name of ButtonValue" (click)="getButton(name.valueN)" >{{ name.name }}</button>
           <div class="input-group" style="float: right; margin-top: 11px;">
             <div class="input-icon right">
               <i class="icon-magnifier">
@@ -683,14 +682,14 @@
               <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
                 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
                 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
-                <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 22px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
+                <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
                 <div class="visual">
                   <i class="fa fa-comments"></i>
                 </div>
                 <table>
                   <tr>
                     <div class="details" style="width: calc(100% - 50px);">
-                      <div style="text-align: right; margin-top: -60px; color: black;">{{item.type}}</div>
+                      <div style="text-align: right; margin-top: -60px; color: black;">{{item.type | textshort}}</div>
                       <div style="text-align: right; color: black;">{{item.STATUS}}</div>
                       <div class="number" style=" color: black; display: block; text-align: right; margin-top: -7px;">
                         <span data-counter="counterup" data-value="">{{item.custgroupName}}</span>
@@ -738,7 +737,7 @@
               <a class="dashboard-stat dashboard-stat-v2 red " href="{{item.link}}" target="_blank" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}">
                 <!-- <div [ngStyle]="{'background-color':item.days === '366.0098' ? 'green' : 'red' }"></<div> -->
                 <!-- <div class="avater">{{(item.days).toFixed(0)}} D</div> -->
-                <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 22px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
+                <div class="avater" [ngStyle]="{'background-color': getColorDay(item.days.toFixed(0))}" style="font-size: 26px; text-align: center; font-weight: bold;">{{item.days.toFixed(0)}}D</div>
                 <div class="visual">
                   <i class="fa fa-comments"></i>
                 </div>
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 279e23f..ca8e340 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -13,8 +13,12 @@ export class DashboardComponent implements OnInit {
 
    FilterSearch = '';
    FilterSearchOnHold = '';
+   FilterSearchButton = '';
 
+   
 
+
+  
   getColorDay(days){
     console.log(days)
 
@@ -66,6 +70,21 @@ export class DashboardComponent implements OnInit {
   resultNum7:number = 0;
   resultDataOnHold7: any;
 
+  ButtonValue = [
+    {
+      name : 'apd',
+      valueN : 'apd' 
+    },
+    {
+      name : 'ade',
+      valueN : 'ade'
+    },
+  ];
+
+  Show: any;
+
+  
+
   
   async ngOnInit() {
     //----------------------------1------------------------
@@ -127,6 +146,8 @@ export class DashboardComponent implements OnInit {
       await this.getDataOnHold();
     }, 600000);
 
+    
+
     //----------------------------2------------------------
      // Active
     try {
@@ -436,7 +457,9 @@ export class DashboardComponent implements OnInit {
           this.resultData7[i].link = this._common.decodeURI(this.resultData7[i].link);
           this.resultData7[i].birth_date = this._common.convertDate(this.resultData7[i].birth_date);
           this.resultNum7 = this.resultData7.length;
+
         }
+        this.Show = Object.assign(this.resultData7);
       } else {
         this.resultData7 = [];
       }
@@ -478,6 +501,33 @@ export class DashboardComponent implements OnInit {
     }, 600000);
   }
 
+  getButton(valueN){
+    console.log(valueN);
+
+    if (this.resultData7.length === 0) {
+      return this.resultData7;
+    }
+
+    const resultArray = [];
+    for (const item of this.resultData7) {
+    console.log('item: ', item);
+
+    var st = '';
+      //  st = item['team'].toLowerCase() + item['COMMENT'].toLowerCase() + item['custgroupName'].toLowerCase() + item['STATUS'].toLowerCase() ;
+      if(item['type']){
+        st = item['type'].toLowerCase();
+      }
+
+      var string2 = valueN.toLowerCase();
+      if (st.indexOf(string2) > -1) {
+        console.log(st);
+        resultArray.push(item);
+      }
+      
+    }
+    this.resultData7 = resultArray;
+
+  }
   /////////////Get data come to use//////////////////////
 
 
diff --git a/src/app/dashboard/filter.pipe.ts b/src/app/dashboard/filter.pipe.ts
index 760c815..cf2e7c3 100644
--- a/src/app/dashboard/filter.pipe.ts
+++ b/src/app/dashboard/filter.pipe.ts
@@ -7,6 +7,7 @@ export class FilterPipe implements PipeTransform {
 
   transform(value: any, filterString: string, propName: any): any {
     console.log('propName: ', propName);
+    
     if (value.length === 0) {
       return value;
     }
@@ -17,18 +18,18 @@ export class FilterPipe implements PipeTransform {
 
       var st = '';
       //  st = item['team'].toLowerCase() + item['COMMENT'].toLowerCase() + item['custgroupName'].toLowerCase() + item['STATUS'].toLowerCase() ;
-      if(item['team']){
-        st += item['team'].toLowerCase();
-      }
-      if(item['COMMENT']){
-        st += item['COMMENT'].toLowerCase();
-      }
-      if(item['custgroupName']){
-        st += item['custgroupName'].toLowerCase();
-      }
-      if(item['STATUS']){
-        st += item['STATUS'].toLowerCase();
-      }
+      // if(item['team']){
+      //   st += item['team'].toLowerCase();
+      // }
+      // if(item['COMMENT']){
+      //   st += item['COMMENT'].toLowerCase();
+      // }
+      // if(item['custgroupName']){
+      //   st += item['custgroupName'].toLowerCase();
+      // }
+      // if(item['STATUS']){
+      //   st += item['STATUS'].toLowerCase();
+      // }
       if(item['type']){
         st += item['type'].toLowerCase();
       }
diff --git a/src/app/dashboard/texrshort.ts b/src/app/dashboard/texrshort.ts
new file mode 100644
index 0000000..d822426
--- /dev/null
+++ b/src/app/dashboard/texrshort.ts
@@ -0,0 +1,16 @@
+import { PipeTransform, Pipe } from "@angular/core";
+
+@Pipe ({
+    name: 'textshort'
+})
+export class TextShortPipe implements PipeTransform {
+    transform(value: string): string {
+        if(value === null){
+            value = '';
+        }
+        if (value.length > 28) {
+            return value.substr(0, 28) + ' ...';
+        }
+        return value;
+    }
+}
\ No newline at end of file
--
libgit2 0.21.2