diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 66127b8..9145593 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -4,7 +4,7 @@
   <div class="tabbable-custom nav-justified">
     <ul class="nav nav-tabs">
       <li class="active sbold font">
-        <a href="#tab1" data-toggle="tab" aria-expanded="true">ติดตั้ง
+        <a href="#tab1" data-toggle="tab" aria-expanded="false">ติดตั้ง
           <span class="badge"> {{resultNum}} </span>
         </a>
       </li>
@@ -38,9 +38,14 @@
           <span class="badge"> {{resultNum6}} </span>
         </a>
       </li>
+      <li class="sbold">
+        <a href="#tab8" data-toggle="tab" aria-expanded="true">Smart IT
+          <span class="badge"> </span>
+        </a>
+      </li>
     </ul>
     <div class="tab-content">
-      <div class="panel tab-pane active" id="tab1">
+      <div class="panel tab-pane " id="tab1">
         <div class="caption">
           <h1 class="icon-bubble font-green-sharp">
             <span class="caption-subject font-green-sharp sbold font"> Active</span>
@@ -54,13 +59,14 @@
           </div>
           <br>
           <br>
-            <button type="button" class ="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton1(name.valueN)" style="margin-left: 5px; margin-top: 3px;">{{ name.name }}</button>
+          <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton1(name.valueN)" style="margin-left: 5px; margin-top: 3px;">{{ name.name }}</button>
           <hr>
           <br>
         </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: '' |  filter:FilterSearchButton: 'name.valueN' ">
+            <div class="col-lg-4 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData | filter:FilterSearch: ''">
+              <p *ngIf="showSecret" style="text-align: center;">0 Tricket</p>
               <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> -->
@@ -112,7 +118,7 @@
           </div>
           <br>
           <br>
-          <button  class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton1Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton1Onhold(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -167,7 +173,7 @@
           </div>
           <br>
           <br>
-          <button  class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton2(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
+          <button class="btn btn-default " *ngFor="let name of ButtonValue" (click)="getButton2(name.valueN)" style="margin-left: 5px; margin-top: 2px;">{{ name.name }}</button>
           <hr>
           <br>
         </div>
@@ -826,11 +832,75 @@
         </div>
       </div>
 
+      <div class="panel tab-pane active" id="tab8">
+        <div class="container">
+          <div class="row">
+            <div class="col-xs-12">
+              <!-- <button class="btn" (click)="onToggleDetails()">
+                Display Details</button>
+              <p *ngIf="showSecret">Sercet Password = tuna</p> -->
+              <hr>
+              <div class="input-group" style="float: right; margin-top: 11px;">
+                <div class="input-icon right">
+                  <i class="icon-magnifier">
+                  </i>
+                  <input type="text" placeholder="Search.." class="form-control sbold font" [(ngModel)]="FilterSearch">
+                </div>
+              </div>
+              <br>
+              <br>
+              <button type="button" class="btn btn-circle button " *ngFor="let name of ButtonValue" (click)="getButton1(name.valueN)" style="margin-left: 5px; margin-top: 3px;">{{ name.name }}</button>
+              <p *ngIf="showSecret" style="text-align: center;">0 Tricket</p>
+              <hr>
+              <br>
+            </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: ''">
+
+
+                  
+
+
+
+                  <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: 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 | 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>
+                          </div>
+                          <div class="desc" style=" color: black;">{{item.team}}</div>
+                          <br>
+                          <!-- <div class="desc" style="text-align: left; text-align: bottom; color: black;">{{(item.COMMENT > 20)? | (item.COMMENT | slice:0:20) + '....':(item.COMMENT)}}</div> -->
+                        </div>
+                      </tr>
+                      <tr>
+                        <div class="details" style="width: calc(100% - 50px);">
+                          <div class="desc" style="text-align: left; color: black; margin-top: 120px;">{{item.COMMENT | short}}</div>
+                          <!-- <div class="a desc" style="text-align: left; color: black;">{{item.COMMENT | font}}</div> -->
+                          <div class="a desc" style="text-align: left; color: black;">{{item.COMMENT | font}}</div>
+                        </div>
+                      </tr>
+                    </table>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
-</div>
 
-<!-- งานเก่า
+    <!-- งานเก่า
     <div class="row">
       <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" *ngFor="let item of resultData">
         <a class="dashboard-stat dashboard-stat-v2 {{item.color}}" href="#">
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 8cf36c8..0ff0390 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -219,7 +219,11 @@ export class DashboardComponent implements OnInit {
       valueN: ''
     },
   ];
-
+  
+  showSecret = false;
+  onToggleDetails() {
+    this.showSecret = !this.showSecret;
+  }
 
   async ngOnInit() {
     //----------------------------1------------------------
@@ -242,9 +246,10 @@ export class DashboardComponent implements OnInit {
           this.resultNum = this.resultData.length;
           this.Show1.push(this.resultData[i]);
         }
-
+        
       } else {
         this.resultData = [];
+        this.showSecret = !this.showSecret;
       }
     } catch (error) {
       console.log(error);
@@ -679,6 +684,7 @@ export class DashboardComponent implements OnInit {
     }
 
     this.resultData = resultArray;
+    console.log(this.resultData);
   }
   /* buttondataOnhold1 */
   getButton1Onhold(valueN) {
diff --git a/src/app/dashboard/filter.pipe.ts b/src/app/dashboard/filter.pipe.ts
index c27b82e..2984883 100644
--- a/src/app/dashboard/filter.pipe.ts
+++ b/src/app/dashboard/filter.pipe.ts
@@ -8,29 +8,30 @@ export class FilterPipe implements PipeTransform {
   transform(value: any, filterString: string, propName: any): any {
     console.log('propName: ', propName);
     
+    
     if (value.length === 0) {
       return value;
     }
-
+    var txt = "0 hi"
     const resultArray = [];
     for (const item of value) {
       console.log('item: ', item);
 
       var st = '';
-       //st = item['team'].toLowerCase() + item['COMMENT'].toLowerCase() + item['custgroupName'].toLowerCase() + item['STATUS'].toLowerCase() ;
-      if(item['team']){
+      //st = item['team'].toLowerCase() + item['COMMENT'].toLowerCase() + item['custgroupName'].toLowerCase() + item['STATUS'].toLowerCase() ;
+      if (item['team']) {
         st += item['team'].toLowerCase();
       }
-      if(item['COMMENT']){
+      if (item['COMMENT']) {
         st += item['COMMENT'].toLowerCase();
       }
-      if(item['custgroupName']){
+      if (item['custgroupName']) {
         st += item['custgroupName'].toLowerCase();
       }
-      if(item['STATUS']){
+      if (item['STATUS']) {
         st += item['STATUS'].toLowerCase();
       }
-      if(item['type']){
+      if (item['type']) {
         st += item['type'].toLowerCase();
       }
 
@@ -39,9 +40,13 @@ export class FilterPipe implements PipeTransform {
         resultArray.push(item);
       }
     }
-      
-  
-    return resultArray;
+
+    // if(resultArray === []){
+    //   return resultArray.push(txt);
+    // }else{
+      return resultArray;
+    
+    
   }
 
 }
--
libgit2 0.21.2