diff --git a/src/app/_layout/footer/footer.component.html b/src/app/_layout/footer/footer.component.html
index c76e469..99b9904 100644
--- a/src/app/_layout/footer/footer.component.html
+++ b/src/app/_layout/footer/footer.component.html
@@ -13,7 +13,7 @@
         href="https://allbestsistem.com/"
         target="_blank"
         style="background-color: #000000 !important;"
-        >Smart Building Management Systems (V@2024-06-28.02)
+        >Smart Building Management Systems (V@2024-06-1.01)
       </a></span
     >
   </p>
diff --git a/src/app/content/hemat-app/device/device-control/device-control.component.html b/src/app/content/hemat-app/device/device-control/device-control.component.html
index 623ecc7..77ff717 100644
--- a/src/app/content/hemat-app/device/device-control/device-control.component.html
+++ b/src/app/content/hemat-app/device/device-control/device-control.component.html
@@ -111,7 +111,7 @@
               </div>
             </div>
           </div>
-          <div class="col-lg-4 col-12" *ngFor="let item of filteredRows">
+          <div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows">
             <div
               class="card"
               style="background-color: #252525; position: relative"
diff --git a/src/app/content/hemat-app/device/device-control/device-control.component.ts b/src/app/content/hemat-app/device/device-control/device-control.component.ts
index b29e7b9..5df0246 100644
--- a/src/app/content/hemat-app/device/device-control/device-control.component.ts
+++ b/src/app/content/hemat-app/device/device-control/device-control.component.ts
@@ -11,9 +11,9 @@ import { ToastrService } from "ngx-toastr";
 })
 export class DeviceControlComponent {
   data: any;
-  totalOn: any;
-  totalOff: any;
+
   filteredRows: any[];
+  filteredDeviceRows: any[];
   searchTerm: string = "";
   buildingSelected: any;
   statusSelected: any;
@@ -24,22 +24,10 @@ export class DeviceControlComponent {
   storedData: any;
   spinnerFilterActive = false;
   switchState: boolean;
-
   public breadcrumb: any;
   spinnerActive: boolean = false;
-
   singlebasicSelected: any;
 
-  singleSelectArray = [
-    { item_id: 1, item_text: "Alaska" },
-    { item_id: 2, item_text: "California" },
-    { item_id: 3, item_text: "Colorado" },
-    { item_id: 4, item_text: "New Mexico" },
-    { item_id: 5, item_text: "Alabama" },
-    { item_id: 6, item_text: "Connecticut" },
-    { item_id: 7, item_text: "New York" },
-  ];
-
   constructor(
     private router: Router,
     private deviceService: DeviceService,
@@ -79,10 +67,18 @@ export class DeviceControlComponent {
       .subscribe((res) => {
         this.data = res;
         this.filteredRows = this.data.results.data;
-        console.log(this.filteredRows);
+        this.filteredDeviceRows = this.filterDevices(this.filteredRows);
       });
   }
 
+  filterDevices(devices: any[]): any[] {
+    return devices.filter((device) =>
+      device.mapping.some(
+        (map) => map.name.startsWith("switch") && map.type === "Boolean"
+      )
+    );
+  }
+
   dataListMaster() {
     this.monitoringApiService.getMasterListData().subscribe((data) => {
       const dataCategory = data.data.find(
@@ -152,15 +148,16 @@ export class DeviceControlComponent {
   switchChanged(ev, data) {
     console.log(ev);
     console.log(data);
-    const requestData = {
-      device_id: data.device_id,
-      switch: data.mapping[0].switch,
-      value: ev,
-      command_type: "on_off",
-    };
-    this.deviceService.deviceSwitch(requestData).subscribe((res) => {
-      console.log(res);
-    });
+
+    // const requestData = {
+    //   device_id: data.device_id,
+    //   switch: data.mapping[0].switch,
+    //   value: ev,
+    //   command_type: "on_off",
+    // };
+    // this.deviceService.deviceSwitch(requestData).subscribe((res) => {
+    //   console.log(res);
+    // });
   }
 
   addFieldValue() {}
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 bd4b76d..fac29d5 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.html
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html
@@ -13,7 +13,7 @@
                   <div class="media-body text-left">
                     <h5 style="color: #ffffff">Kwh Consumption</h5>
                     <h3 style="color: #ffffff">
-                      {{ topCard?.kwh_consumption.toFixed(1) }} Kwh
+                      {{ topCard?.kwh_consumption ? topCard?.kwh_consumption.toFixed(1) : 0 }} Kwh
                     </h3>
                   </div>
                   <div class="align-self-center">
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 a19e4f1..fe038ee 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -195,6 +195,8 @@ export class DetailComponent {
       .getDashboardTopCard(buildingId)
       .subscribe((res) => {
         this.topCard = res.data;
+        console.log(this.topCard);
+        
       });
   }
   dataEnergyMonitoringSummary(buildingId) {
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 d3f8f00..ac45db3 100644
--- a/src/app/content/hemat-app/service/monitoring-api.service.ts
+++ b/src/app/content/hemat-app/service/monitoring-api.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from "@angular/core";
-import { HttpClient, HttpHeaders  } from "@angular/common/http";
+import { HttpClient, HttpHeaders } from "@angular/common/http";
 import { Observable } from "rxjs";
 
 @Injectable({
@@ -11,8 +11,8 @@ export class BuildingService {
   postLogin(data: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/users/login`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.post<any>(url, data, { headers });
   }
@@ -20,8 +20,8 @@ export class BuildingService {
   listBuilding(): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/building/dashboard/list`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
@@ -30,8 +30,8 @@ export class BuildingService {
     const url = `https://kapi.absys.ninja/hemat/building?page=${page}&limit=${limit}`;
     // const headers = new HttpHeaders().set('Content-Type', 'application/json');
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
@@ -39,8 +39,8 @@ export class BuildingService {
   getRoomByBuildingId(buildingId: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/room-building/list/byIds?buildingId=${buildingId}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
@@ -48,8 +48,8 @@ export class BuildingService {
   getDeviceById(deviceId: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/devices/${deviceId}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
@@ -57,8 +57,8 @@ export class BuildingService {
   getMasterListData(): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/header-param/list`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
@@ -66,17 +66,20 @@ export class BuildingService {
   getMasterData(page: number = 1, limit: number = 100): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/header-param?page=${page}&limit=${limit}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
 
-  getMasterBuildingData(page: number = 1, limit: number = 100): Observable<any> {
+  getMasterBuildingData(
+    page: number = 1,
+    limit: number = 100
+  ): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/building?page=${page}&limit=${limit}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
@@ -84,8 +87,8 @@ export class BuildingService {
   getBuildingList(): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/building/list`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
@@ -93,8 +96,8 @@ export class BuildingService {
   getListRoomData(): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/room/list`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
@@ -102,17 +105,17 @@ export class BuildingService {
   getMasterRoomData(page: number = 1, limit: number = 100): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/room?page=${page}&limit=${limit}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
 
-  getCostManagement(page: number = 1, limit: number = 100, ): Observable<any> {
+  getCostManagement(page: number = 1, limit: number = 100): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/cost_management?page=${page}&limit=${limit}&building_id=4&periode=2024-06`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
@@ -120,25 +123,25 @@ export class BuildingService {
   postHeaderDetailParam(data: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/header-detail-param`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.post<any>(url, data, { headers });
   }
   putHeaderDetailParam(data: any, id: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/header-detail-param/${id}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.put<any>(url, data, { headers });
   }
-  
+
   deleteHeaderDetailParam(id: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/header-detail-param/${id}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.delete<any>(url, { headers });
   }
@@ -146,16 +149,16 @@ export class BuildingService {
   postMasterBuildingParam(data: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/building`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.post<any>(url, data, { headers });
   }
   putMasterBuildingParam(data: any, id: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/building/${id}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.put<any>(url, data, { headers });
   }
@@ -163,8 +166,8 @@ export class BuildingService {
   deleteMasterBuildingParam(id: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/building/${id}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.delete<any>(url, { headers });
   }
@@ -172,16 +175,16 @@ export class BuildingService {
   postMasterRoomParam(data: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/room`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.post<any>(url, data, { headers });
   }
   putMasterRoomParam(data: any, id: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/room/${id}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.put<any>(url, data, { headers });
   }
@@ -189,8 +192,8 @@ export class BuildingService {
   postBatchBuilding(data: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/room-building/post-batch/room`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.post<any>(url, data, { headers });
   }
@@ -198,8 +201,8 @@ export class BuildingService {
   getBuildingRoomList(page: number = 1, limit: number = 100): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/room-building?page=${page}&limit=${limit}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
@@ -207,8 +210,8 @@ export class BuildingService {
   puttBuildingRoom(data: any, id: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/room-building/${id}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.put<any>(url, data, { headers });
   }
@@ -216,8 +219,8 @@ export class BuildingService {
   putDevice(data: any, id: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/devices/${id}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.put<any>(url, data, { headers });
   }
@@ -225,8 +228,8 @@ export class BuildingService {
   getRoomBuildingById(roomBuildingId: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/room-building/${roomBuildingId}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
@@ -234,9 +237,16 @@ export class BuildingService {
   deleteRoomBuilding(id: any): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/room-building/${id}`;
     const headers = new HttpHeaders({
-      'Content-Type': 'application/json',
-      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.delete<any>(url, { headers });
   }
+
+  getDevicesWithSwitchMapping(devices: any[]): any[] {
+    return devices.filter((device) =>
+      device.mapping.some((map: any) => map.name.includes('switch'))
+      // device.mapping.some((map: any) => console.log(map))
+    );
+  }
 }
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index ccb6ed1..89ee29f 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -138,7 +138,7 @@
                 <p
                   class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
                 >
-                  <span>(v@2024.06.28.02)</span>
+                  <span>(v@2024.06.1.01)</span>
                 </p>
                 <!-- <div class="card-body">
                   <a