diff --git a/src/app/_layout/footer/footer.component.html b/src/app/_layout/footer/footer.component.html
index 4623f2c..c83616c 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: #ffffff !important;"
-        >Smart Building Management Systems (V@2024-08-21.2)
+        >Smart Building Management Systems (V@2024-08-22.2)
       </a></span
     >
   </p>
diff --git a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts
index 6ecabfa..f496cf1 100644
--- a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts
+++ b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts
@@ -72,6 +72,8 @@ export class AddEditDeviceComponent implements OnInit {
   loadDevice(deviceId: string) {
     this.monitoringApiService.getDeviceById(deviceId).subscribe((data) => {
       this.dataDevice = data;
+      console.log(this.dataDevice);
+      
       this.formGetDevice(data);
     });
   }
@@ -254,7 +256,7 @@ export class AddEditDeviceComponent implements OnInit {
 
   saveEdit() {
     if (this.projectInfo.valid) {
-      if (this.projectInfo.get("roomBuildingId").value) {
+      if (this.dataDevice.data.roomBuildingId) {
         this.monitoringApiService
           .putDevice(this.projectInfo.value, this.deviceId)
           .subscribe((data) => {
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 3d52cdb..b99f1a7 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -1,11 +1,8 @@
 import { Component, ElementRef, ViewChild } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
-import { ChartOptions, ChartType, ChartDataset } from "chart.js";
 import { EnergyMonitoringService } from "../../service/energy-monitoring.service";
 import { CurrencyPipe } from "@angular/common";
 import { LoginService } from "../../service/login.service";
-import { DeviceService } from "../../service/device.service";
-import { color } from "echarts";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { ModalExportComponent } from "../modal-export/modal-export.component";
 
@@ -68,7 +65,7 @@ export class DetailComponent {
     private currencyPipe: CurrencyPipe,
     private router: Router,
     private authService: LoginService,
-    private modalService: NgbModal,
+    private modalService: NgbModal
   ) {}
 
   get formattedSummaryCost(): string {
@@ -88,33 +85,118 @@ export class DetailComponent {
     });
     this.breadcrumbLink();
     this.route.params.subscribe((params) => {
-
       this.buildingId = params["buildingId"] ? params["buildingId"] : 0;
       this.floorId = params["floorId"] ? params["floorId"] : 0;
       this.roomId = params["roomId"] ? params["roomId"] : 0;
 
-      if (this.buildingId !== undefined && this.floorId === undefined && this.roomId === undefined) {
+      if (
+        this.buildingId !== undefined &&
+        this.floorId === undefined &&
+        this.roomId === undefined
+      ) {
         this.dataEnergyMonitoringTopCard(this.buildingId, 0, 0);
         this.dataEnergyMonitoringSummary(this.buildingId, 0, 0);
         this.dataEnergyDeviceCategory(this.buildingId, 0, 0);
         this.dataEnergyChartKwhWater(this.buildingId, 0, 0);
-      } else if (this.buildingId !== undefined && this.floorId !== undefined && this.roomId === undefined) {
+      } else if (
+        this.buildingId !== undefined &&
+        this.floorId !== undefined &&
+        this.roomId === undefined
+      ) {
         this.dataEnergyMonitoringTopCard(this.buildingId, this.floorId, 0);
         this.dataEnergyMonitoringSummary(this.buildingId, this.floorId, 0);
         this.dataEnergyDeviceCategory(this.buildingId, this.floorId, 0);
         this.dataEnergyChartKwhWater(this.buildingId, this.floorId, 0);
-      } else if (this.buildingId !== undefined && this.floorId !== undefined && this.roomId !== undefined) {
-        this.dataEnergyMonitoringTopCard(this.buildingId, this.floorId, this.roomId);
-        this.dataEnergyMonitoringSummary(this.buildingId, this.floorId, this.roomId);
-        this.dataEnergyDeviceCategory(this.buildingId, this.floorId, this.roomId);
-        this.dataEnergyChartKwhWater(this.buildingId, this.floorId, this.roomId);
+      } else if (
+        this.buildingId !== undefined &&
+        this.floorId !== undefined &&
+        this.roomId !== undefined
+      ) {
+        this.dataEnergyMonitoringTopCard(
+          this.buildingId,
+          this.floorId,
+          this.roomId
+        );
+        this.dataEnergyMonitoringSummary(
+          this.buildingId,
+          this.floorId,
+          this.roomId
+        );
+        this.dataEnergyDeviceCategory(
+          this.buildingId,
+          this.floorId,
+          this.roomId
+        );
+        this.dataEnergyChartKwhWater(
+          this.buildingId,
+          this.floorId,
+          this.roomId
+        );
       }
-      
+
       this.dataDeviceIr();
       this.getAirQualityData();
     });
   }
 
+  breadcrumbLink() {
+    if (this.mode === "building") {
+      this.breadcrumb = {
+        mainlabel: "Energy Monitoring",
+        linkBack: "/monitoring",
+        isLinkBack: true,
+        links: [
+          {
+            name: "Building",
+            isLink: false,
+            link: "",
+          },
+        ],
+      };
+    } else if (this.mode === "floor") {
+      this.breadcrumb = {
+        mainlabel: "Energy Monitoring",
+        linkBack: "/monitoring",
+        isLinkBack: true,
+        links: [
+          {
+            name: "Building",
+            isLink: false,
+            link: "",
+          },
+          {
+            name: "Floor",
+            isLink: false,
+            link: "",
+          },
+        ],
+      };
+    } else if (this.mode === "room") {
+      this.breadcrumb = {
+        mainlabel: "Energy Monitoring",
+        linkBack: "/monitoring",
+        isLinkBack: true,
+        links: [
+          {
+            name: "Building",
+            isLink: false,
+            link: "",
+          },
+          {
+            name: "Floor",
+            isLink: false,
+            link: "",
+          },
+          {
+            name: "Room",
+            isLink: false,
+            link: "",
+          },
+        ],
+      };
+    }
+  }
+
   getAirQualityData() {
     this.valueAirQuality = Math.floor(Math.random() * 501);
     this.chartOption = {
@@ -214,26 +296,6 @@ export class DetailComponent {
     }
   }
 
-  breadcrumbLink() {
-    this.breadcrumb = {
-      mainlabel: "Energy Monitoring",
-      linkBack: "/monitoring",
-      isLinkBack: true,
-      links: [
-        {
-          name: "Dashboard",
-          isLink: false,
-          link: "",
-        },
-        {
-          name: "Energy Monitoring",
-          isLink: false,
-          link: "",
-        },
-      ],
-    };
-  }
-
   dataDeviceIr() {
     const today = new Date().getDay();
     this.days[today].isToday = true;
@@ -291,13 +353,13 @@ export class DetailComponent {
           legend: {},
           toolbox: {
             show: true,
-            orient: 'vertical',
+            orient: "vertical",
             feature: {
               dataView: { show: true, readOnly: false },
-              magicType: { show: true, type: ['line', 'bar'] },
+              magicType: { show: true, type: ["line", "bar"] },
               restore: { show: true },
-              saveAsImage: { show: true }
-            }
+              saveAsImage: { show: true },
+            },
           },
           grid: {
             left: "3%",
@@ -309,7 +371,6 @@ export class DetailComponent {
             {
               type: "category",
               data: this.barChartLabels,
-              
             },
           ],
           yAxis: [
@@ -342,7 +403,7 @@ export class DetailComponent {
         };
         onClick: (params) => {
           this.onChartClick(params);
-        }
+        };
       });
   }
 
@@ -362,19 +423,24 @@ export class DetailComponent {
       (result) => {
         if (result) {
           console.log(result);
-          
         }
       },
       (reason) => {
         console.log(`Dismissed: ${reason}`);
       }
     );
-    
+
     // Show popup with details
     // alert(`Day: ${params.name}\nKWH Consumption: ${params.value}`);
   }
 
   seeMore(buildingId, floorId, roomId) {
-    this.router.navigate(["/monitoring/control-device-see-more/", buildingId, floorId, roomId, this.mode]);
+    this.router.navigate([
+      "/monitoring/control-device-see-more/",
+      buildingId,
+      floorId,
+      roomId,
+      this.mode,
+    ]);
   }
 }
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 6268a4f..0192d31 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.08.21.2)</span>
+                  <span>(v@2024.08.22.2)</span>
                 </p>
                 <!-- <div class="card-body">
                   <a