diff --git a/src/app/content/hemat-app/master/master-floor/master-floor.component.ts b/src/app/content/hemat-app/master/master-floor/master-floor.component.ts
index a83cf46..2b53cc5 100644
--- a/src/app/content/hemat-app/master/master-floor/master-floor.component.ts
+++ b/src/app/content/hemat-app/master/master-floor/master-floor.component.ts
@@ -151,8 +151,6 @@ export class MasterFloorComponent {
                 .putHeaderDetailParam(result, row.id)
                 .subscribe((res) => {
                   this.fetchData();
-                  console.log(res);
-
                   if (res.status === 400) {
                     this.toastr.error(
                       "Warning",
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.html b/src/app/content/hemat-app/monitoring/building/building.component.html
index d8d00b8..2b97b6d 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.html
+++ b/src/app/content/hemat-app/monitoring/building/building.component.html
@@ -1,4 +1,4 @@
-<div class="app-content content" style="background-color: #FBFBFB;">
+<div class="app-content content" style="background-color: #fbfbfb">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -6,16 +6,75 @@
     <div class="content-body">
       <section id="social-cards">
         <div class="row mb-2">
-          <div class="col-md-6">
-            <input
-              type="text"
-              class="form-control"
-              placeholder="Search..."
-              [(ngModel)]="searchTerm"
-              (input)="filterRows()"
-            />
+          <div class="col-3">
+            <div class="form-group">
+              <ng-select
+                class="select-custom"
+                [items]="dataBuildingList"
+                [searchable]="true"
+                bindLabel="name"
+                bindValue="id"
+                placeholder="Select Building"
+                [(ngModel)]="buildingSelected"
+              >
+              </ng-select>
+            </div>
+          </div>
+          <div class="col-3">
+            <div class="form-group">
+              <ng-select
+                class="select-custom"
+                [items]="dataFloorList"
+                [searchable]="true"
+                bindLabel="name"
+                bindValue="id"
+                placeholder="Select Floor"
+                [(ngModel)]="floorSelected"
+              >
+              </ng-select>
+            </div>
+          </div>
+          <div class="col-3 text-left">
+            <div class="d-flex">
+              <button
+                type="button"
+                class="btn ml-2"
+                (click)="doFilter()"
+                style="
+                  background-color: #37a647 !important;
+                  border-color: #37a647 !important;
+                  border-radius: 12px;
+                  color: #ffffff;
+                "
+                [disabled]="spinnerFilterActive"
+              >
+                <i
+                  class="la la-search"
+                  style="color: #ffffff !important"
+                  *ngIf="!spinnerFilterActive"
+                ></i>
+                <i
+                  class="la la-spinner spinner"
+                  style="color: #ffffff !important"
+                  *ngIf="spinnerFilterActive"
+                ></i>
+              </button>
+              <button
+                type="button"
+                class="btn ml-2"
+                style="
+                  background-color: #fbfbfb !important;
+                  border-color: #242222 !important;
+                  color: #242222;
+                  border-radius: 12px;
+                "
+              >
+                Cancel
+              </button>
+            </div>
           </div>
         </div>
+
         <div class="row mt-2">
           <div
             class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-4"
@@ -28,7 +87,7 @@
               <div class="card-header mb-2 custom-card-header">
                 <div class="row">
                   <div class="col-12 text-center">
-                    <h4 class="header-title">Building</h4>
+                    <h4 class="header-title">{{labelData}}</h4>
                     <h3 class="header-subtitle">
                       {{ data.build_name ? data.build_name : data.name }}
                     </h3>
@@ -58,25 +117,21 @@
                     transform: translate(-50%, -50%);
                   "
                 >
-                  <h3
-                    class="custom-total"
-                  >
-                    {{ data.total }} KWH
-                  </h3>
+                  <h3 class="custom-total">{{ data.total }} KWH</h3>
                   <h6 class="custom-label-chart">Consumption</h6>
                 </div>
 
                 <div class="form-group text-center">
-                  <button
+                  <!-- <button
                     type="button"
                     class="btn btn-min-width mr-1 mb-1 btn-room"
                     (click)="viewRoom(data)"
                   >
                     Room
-                  </button>
+                  </button> -->
                   <button
                     type="button"
-                    class="btn btn-min-width mr-1 mb-1 btn-detail"
+                    class="btn btn-min-width mr-1 mb-1 btn-room"
                     (click)="viewRow(data)"
                   >
                     Detail
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.ts b/src/app/content/hemat-app/monitoring/building/building.component.ts
index c689366..261b459 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.ts
+++ b/src/app/content/hemat-app/monitoring/building/building.component.ts
@@ -3,6 +3,7 @@ import { TableMonitoringService } from "../monitoring.service";
 import { Router } from "@angular/router";
 import { BuildingService } from "../../service/monitoring-api.service";
 import { LoginService } from "../../service/login.service";
+import { DeviceService } from "../../service/device.service";
 
 @Component({
   selector: "app-building",
@@ -10,7 +11,6 @@ import { LoginService } from "../../service/login.service";
   styleUrls: ["./building.component.css"],
 })
 export class BuildingComponent {
-  data: any;
   public breadcrumb: any;
   feedbacksdonutChart: any;
   donutChart1: any;
@@ -18,10 +18,19 @@ export class BuildingComponent {
   topUseData: any;
   searchTerm: string = "";
   colorChart: string = "";
+  spinnerFilterActive = false;
+  typeData: any;
+  labelData: any;
+
+  dataBuildingList: any;
+  buildingSelected: any;
+  dataFloorList: any;
+  floorSelected: any;
 
   constructor(
     private monitoringService: TableMonitoringService,
     private monitoringApiService: BuildingService,
+    private deviceService: DeviceService,
     private router: Router,
     private authService: LoginService
   ) {}
@@ -51,38 +60,59 @@ export class BuildingComponent {
         showLabel: false,
       },
     };
-    this.listBuilding();
+    this.listBuilding(this.buildingSelected, this.floorSelected);
+    this.dataListBuilding();
+    this.dataListFloor();
   }
 
-  listBuilding() {
-    this.monitoringApiService.listBuilding().subscribe((res) => {
-      this.data = res.data;
-      this.filteredRows = res.data;
+  dataListBuilding() {
+    this.monitoringApiService.getBuildingList().subscribe((data) => {
+      this.dataBuildingList = data.data.filter(
+        (item) => item.statusName.toLowerCase() === "aktif"
+      );
     });
   }
 
-  // buildingData() {
-  //   this.monitoringApiService.getBuildingData().subscribe((res) => {
-  //     console.log(res);
-  //   });
-  // }
-
-  filterRows() {
-    if (!this.searchTerm) {
-      this.filteredRows = [...this.data];
-    } else {
-      this.filteredRows = this.data.filter((row) =>
-        this.rowContainsSearchTerm(row)
+  dataListFloor() {
+    this.monitoringApiService.getMasterData().subscribe((data) => {
+      const dataMasterFloor = data.results.data.find(
+        (item) => item.name === "master_floor"
       );
-    }
+      const listFloor = dataMasterFloor.headerDetailParam.sort(
+        (a, b) => b.id - a.id
+      );
+      const newArray = listFloor
+        .map((item) => ({
+          id: item.id,
+          name: `${item.name} (${item.code})`,
+        }))
+        .sort((a, b) => b.id - a.id);
+
+      this.dataFloorList = newArray;
+    });
   }
 
-  rowContainsSearchTerm(row: any): boolean {
-    const searchTermLC = this.searchTerm.toLowerCase();
-    return Object.values(row).some(
-      (value) =>
-        value !== null && value.toString().toLowerCase().includes(searchTermLC)
-    );
+  listBuilding(buildingId, floorId) {
+    this.deviceService.filterDashboard(buildingId, floorId).subscribe((res) => {
+      this.filteredRows = res.data;
+      this.typeData = this.filteredRows[0].type;
+      console.log(this.filteredRows[0].type);
+      if (this.typeData === "building") {
+        this.labelData = "Building";
+      } else if (this.typeData === "floor") {
+        this.labelData = "Floor";
+      } else if (this.typeData === "room") {
+        this.labelData = "Room";
+      }
+    });
+  }
+
+  doFilter() {
+    this.spinnerFilterActive = true;
+    this.listBuilding(this.buildingSelected, this.floorSelected);
+    setTimeout(() => {
+      this.spinnerFilterActive = false;
+    }, 3000);
   }
 
   viewRow(row) {
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.html b/src/app/content/hemat-app/monitoring/detail/detail.component.html
index d84e2f7..a791aa0 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.html
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html
@@ -148,18 +148,17 @@
           </div>
         </div>
       </div>
+
       <div class="row">
         <div class="col-12">
           <div class="card" style="background-color: #dde1e6 !important">
             <div class="card-body">
               <div
+                (chartClick)="onChartClick($event)"
                 echarts
                 [options]="chartOptionBar"
                 class="echart-container"
-                style="
-                  height: 400px !important;
-                  display: block;
-                "
+                style="height: 400px !important; display: block"
               ></div>
             </div>
           </div>
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
index 7c4386b..9ef5c26 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -37,6 +37,7 @@ export class DetailComponent {
   currentTime: string;
   chartOption: any;
   chartOptionBar: any;
+  chartInstance: any;
 
   // chart bar
   public barChartLabels: string[] = [];
@@ -333,9 +334,19 @@ export class DetailComponent {
             },
           ],
         };
+        onClick: (params) => {
+          this.onChartClick(params);
+        }
       });
   }
 
+  onChartClick(params) {
+    console.log(params);
+    
+    // Show popup with details
+    // alert(`Day: ${params.name}\nKWH Consumption: ${params.value}`);
+  }
+
   seeMore(paramsId) {
     this.router.navigate(["/monitoring/control-device-see-more/", paramsId]);
   }
diff --git a/src/app/content/hemat-app/service/device.service.ts b/src/app/content/hemat-app/service/device.service.ts
index 7dd42d7..fc44ae3 100644
--- a/src/app/content/hemat-app/service/device.service.ts
+++ b/src/app/content/hemat-app/service/device.service.ts
@@ -98,4 +98,21 @@ export class DeviceService {
     });
     return this.http.get<any>(url, { headers });
   }
+
+  filterDashboard(building, floor): Observable<any> {
+    const endpoint = `/building/dashboard/list`;
+    const params = new URLSearchParams({
+      building_id: building ? building : 0,
+      floor_id: floor ? floor :0,
+    });
+    // if (category) {
+    //   params.append("category_id", category);
+    // }
+    const url = `${BASE_URL}${endpoint}?${params.toString()}`;
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
+    });
+    return this.http.get<any>(url, { headers });
+  }
 }
diff --git a/src/app/content/hemat-app/service/monitoring-api.service.ts b/src/app/content/hemat-app/service/monitoring-api.service.ts
index ad3c85b..b7e386e 100644
--- a/src/app/content/hemat-app/service/monitoring-api.service.ts
+++ b/src/app/content/hemat-app/service/monitoring-api.service.ts
@@ -277,4 +277,6 @@ export class BuildingService {
       // device.mapping.some((map: any) => console.log(map))
     );
   }
+
+  
 }