diff --git a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html
index 022168f..312abf1 100644
--- a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html
+++ b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html
@@ -76,6 +76,16 @@
                               *ngIf="spinnerFilterActive"
                             ></i>
                           </button>
+                          <button
+                            type="button"
+                            class="btn btn-outline-success ml-2"
+                            (click)="doFilterCancel()"
+                            style="
+                              background-color: #252525 !important;
+                              border-color: #bef264 !important;
+                            "
+                          >Cancel
+                          </button>
                         </div>
                       </div>
                     </div>
diff --git a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts
index 1fae177..d664b88 100644
--- a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts
+++ b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { BuildingService } from '../../service/monitoring-api.service';
 import { DeviceService } from '../../service/device.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-control-device-seemore',
@@ -29,6 +30,7 @@ export class ControlDeviceSeemoreComponent {
     private deviceService: DeviceService,
     private monitoringApiService: BuildingService,
     private route: ActivatedRoute,
+    private toastr: ToastrService,
   ) {}
 
   ngOnInit() {
@@ -101,15 +103,30 @@ export class ControlDeviceSeemoreComponent {
   }
 
   doFilter() {
-    this.spinnerFilterActive = true;
-    this.fetchData(
-      this.buildingSelected,
-      this.categorySelected,
-      this.statusSelected
-    );
-    setTimeout(() => {
-      this.spinnerFilterActive = false;
-    }, 3000);
+    if (!this.buildingSelected) {
+      this.toastr.error("Warning", "Filter Building tidak boleh kosong.", {
+        timeOut: 5000,
+        closeButton: true,
+      });
+    } else {
+      this.spinnerFilterActive = true;
+      this.fetchData(
+        this.buildingSelected,
+        this.categorySelected,
+        this.statusSelected
+      );
+      setTimeout(() => {
+        this.spinnerFilterActive = false;
+      }, 3000);
+    }
+    
+  }
+
+  doFilterCancel(){
+    this.buildingSelected = parseInt(this.paramsId);
+    this.categorySelected = undefined;
+    this.statusSelected = undefined;
+    this.fetchData(this.buildingSelected, 0, 0);
   }
 
   filterRows() {
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 341b051..594f308 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.html
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html
@@ -5,13 +5,13 @@
     </div>
     <div class="content-body">
       <div class="row">
-        <div class="col-xl-4 col-md-6 col-12">
+        <div class="col-xl-3 col-md-6 col-12">
           <div class="card" style="background-color: #252525 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h5 style="color: #ffffff">Electricity</h5>
+                    <h5 style="color: #ffffff">Kwh Consumption</h5>
                     <h3 style="color: #ffffff">
                       {{ topCard?.kwh_consumption }} Kwh
                     </h3>
@@ -39,7 +39,7 @@
             </div>
           </div>
         </div>
-        <div class="col-xl-4 col-md-6 col-12">
+        <div class="col-xl-3 col-md-6 col-12">
           <div class="card" style="background-color: #252525 !important">
             <div class="card-content">
               <div class="card-body">
@@ -71,7 +71,7 @@
             </div>
           </div>
         </div>
-        <div class="col-xl-4 col-md-6 col-12">
+        <div class="col-xl-3 col-md-6 col-12">
           <div class="card" style="background-color: #252525 !important">
             <div class="card-content">
               <div class="card-body">
@@ -103,6 +103,43 @@
             </div>
           </div>
         </div>
+        <div class="col-xl-3 col-md-6 col-12">
+          <div class="card" style="background-color: #252525 !important">
+            <div class="card-content">
+              <div class="card-body">
+                <div class="media d-flex">
+                  <div class="media-body text-left">
+                    <h5 style="color: #ffffff">Summary Cost</h5>
+                    <h3 style="color: #ffffff">
+                      {{
+                        summaryCost?.summary_cost
+                          | currency : "Rp " : "symbol" : "1.0-0"
+                      }}
+                    </h3>
+                  </div>
+                  <div class="align-self-center">
+                    <div
+                      style="
+                        background-color: #414f2b;
+                        border-radius: 50%;
+                        width: 50px;
+                        height: 50px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                      "
+                    >
+                      <i
+                        class="ri-money-dollar-box-line font-large-1 float-right"
+                        style="color: #bef264 !important"
+                      ></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="row">
         <div class="col-12">
@@ -131,7 +168,7 @@
           </div>
         </div>
       </div>
-      <div class="row">
+      <!-- <div class="row">
         <div class="col-4">
           <div class="card" style="background-color: #252525 !important">
             <div
@@ -250,25 +287,41 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
       <div class="row">
         <div class="col-6" *ngFor="let item of deviceCategory?.usesd">
-          <div class="card overflow-hidden" style="background-color: #000000 !important">
+          <div
+            class="card overflow-hidden"
+            style="background-color: #000000 !important"
+          >
             <div class="card-content">
               <div class="card-body clearfix">
                 <div class="media align-items-stretch mb-2">
                   <div class="align-self-center">
-                    <i class="icon-bulb background-round info font-large-1 mr-2" style="color: #bff264 !important"></i>
+                    <i
+                      class="icon-bulb background-round info font-large-1 mr-2"
+                      style="color: #bff264 !important"
+                    ></i>
                   </div>
                   <div class="media-body">
                     <p style="color: #ffffff !important">
                       {{ item.category_device }}
-                      <span class="float-right text-bold-600" style="color: #ffffff">{{ item.value.toFixed(1) }}%</span>
+                      <span
+                        class="float-right text-bold-600"
+                        style="color: #ffffff"
+                        >{{ item.value.toFixed(1) }}%</span
+                      >
                     </p>
-                    <div class="d-flex align-items-center justify-content-between">
-                      <span style="color: #5F5454; margin-right: 5px;">0%</span>
-                      <ngb-progressbar height="7px" [value]="item.value" style="flex-grow: 1; margin: 0 10px;"></ngb-progressbar>
-                      <span style="color: #5F5454; margin-left: 5px;">100%</span>
+                    <div
+                      class="d-flex align-items-center justify-content-between"
+                    >
+                      <span style="color: #5f5454; margin-right: 5px">0%</span>
+                      <ngb-progressbar
+                        height="7px"
+                        [value]="item.value"
+                        style="flex-grow: 1; margin: 0 10px"
+                      ></ngb-progressbar>
+                      <span style="color: #5f5454; margin-left: 5px">100%</span>
                     </div>
                   </div>
                 </div>
@@ -276,9 +329,7 @@
             </div>
           </div>
         </div>
-        
-        
-        
+
         <div class="col-12 text-right">
           <button
             class="btn btn-primary"