diff --git a/src/app/content/hemat-app/device/device.component.html b/src/app/content/hemat-app/device/device.component.html
index 48a1615..e672022 100644
--- a/src/app/content/hemat-app/device/device.component.html
+++ b/src/app/content/hemat-app/device/device.component.html
@@ -11,9 +11,7 @@
             *blockUI="'zeroConfiguration'; message: 'Loading'"
           >
             <m-card>
-              <ng-container mCardHeaderTitle>
-                Device Table
-              </ng-container>
+              <ng-container mCardHeaderTitle> Device Table </ng-container>
               <ng-container mCardBody>
                 <div class="row mb-2">
                   <div class="col-md-6">
@@ -23,15 +21,21 @@
                       placeholder="Search..."
                       [(ngModel)]="searchTerm"
                       (input)="filterRows()"
-                      (touchstart)="onTouchStart($event)"
                     />
                   </div>
                   <div class="col-md-6 text-right">
                     <button
                       class="btn btn-secondary"
-                      [routerLink]="['/device/add-row']"
+                      [disabled]="spinnerActive"
+                      (click)="addDevice()"
                     >
-                      <i class="feather ft-plus"></i>&nbsp; Add new device
+                      <i
+                        class="la la-spinner spinner"
+                        *ngIf="spinnerActive"
+                      ></i>
+                      <i class="feather ft-plus" *ngIf="!spinnerActive"></i
+                      >&nbsp;
+                      <span>Syncing Data</span>
                     </button>
                   </div>
                 </div>
diff --git a/src/app/content/hemat-app/device/device.component.ts b/src/app/content/hemat-app/device/device.component.ts
index c3c22d7..84492f2 100644
--- a/src/app/content/hemat-app/device/device.component.ts
+++ b/src/app/content/hemat-app/device/device.component.ts
@@ -16,6 +16,7 @@ export class DeviceComponent implements OnInit {
   searchTerm: string = "";
   rows: any = [];
   public breadcrumb: any;
+  spinnerActive: boolean = false;
 
   @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
 
@@ -108,7 +109,17 @@ export class DeviceComponent implements OnInit {
     console.log("Delete row:", row);
   }
 
-  onTouchStart(event: Event) {
-    event.preventDefault(); // Add this if necessary
+  addDevice(): void {
+    // Aktifkan spinner
+    this.spinnerActive = true;
+
+    // Lakukan proses tambahan (misalnya, panggil API atau proses yang memakan waktu)
+    setTimeout(() => {
+      // Selesaikan proses tambahan di sini
+
+      // Nonaktifkan spinner setelah proses selesai
+      this.spinnerActive = false;
+      this.fetchData();
+    }, 3000); // Ganti 3000 dengan waktu yang sesuai dengan proses tambahan Anda (dalam milidetik)
   }
 }
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 28f91b4..907e9e3 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 import { BlockUI, NgBlockUI } from "ng-block-ui";
 import { ChartApiService } from "src/app/_services/chart.api";
 interface Sales {
@@ -17,9 +18,14 @@ export class DetailComponent {
   data: any;
   chartOption: any;
   Sales: any;
+  mode: string;
   ExpenseschartOption: any;
   public breadcrumb: any;
-  constructor(private chartApiservice: ChartApiService) {}
+  constructor(
+    private chartApiservice: ChartApiService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
   @BlockUI("totalReceivables") blockUITotalReceivables: NgBlockUI;
   @BlockUI("salesRecieptsDues") blockUISalesRecieptsDues: NgBlockUI;
   getInvoicechart() {
@@ -148,23 +154,47 @@ export class DetailComponent {
     };
   }
   ngOnInit() {
-    this.breadcrumb = {
-      mainlabel: "Detail Monitoring",
-      linkBack: '/monitoring',
-      isLinkBack: true,
-      links: [
-        {
-          name: "Home",
-          isLink: false,
-          link: "",
-        },
-        {
-          name: "Detail Monitoring",
-          isLink: false,
-          link: "",
-        }
-      ],
-    };
+    this.route.data.subscribe((data) => {
+      this.mode = data.mode;
+    });
+    if (this.mode === "room") {
+      this.breadcrumb = {
+        mainlabel: "Detail Monitoring",
+        linkBack: "/monitoring/monitoring-room",
+        isLinkBack: true,
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+            link: "",
+          },
+          {
+            name: "Detail Monitoring",
+            isLink: false,
+            link: "",
+          },
+        ],
+      };
+    } else {
+      this.breadcrumb = {
+        mainlabel: "Detail Monitoring",
+        linkBack: "/monitoring",
+        isLinkBack: true,
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+            link: "",
+          },
+          {
+            name: "Detail Monitoring",
+            isLink: false,
+            link: "",
+          },
+        ],
+      };
+    }
+
     this.chartApiservice.getInvoiceData().subscribe((Response) => {
       this.data = Response;
       this.getInvoicechart();
diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts
index 9df8713..cda61af 100644
--- a/src/app/content/hemat-app/monitoring/monitoring.module.ts
+++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts
@@ -55,7 +55,8 @@ import { NgxEchartsModule } from 'ngx-echarts';
       },
       {
         path: 'monitoring-room',
-        component: RoomComponent
+        component: RoomComponent,
+        data: { mode: 'room' }
       },
       {
         path: 'add-new-room',
@@ -77,6 +78,11 @@ import { NgxEchartsModule } from 'ngx-echarts';
         component: DetailComponent,
         data: { mode: 'build' }
       },
+      {
+        path: 'view-new-room/:id',
+        component: DetailComponent,
+        data: { mode: 'room' }
+      },
     ])
   ]
 })
diff --git a/src/app/content/hemat-app/monitoring/room/room.component.html b/src/app/content/hemat-app/monitoring/room/room.component.html
index 78448fb..75ad23d 100644
--- a/src/app/content/hemat-app/monitoring/room/room.component.html
+++ b/src/app/content/hemat-app/monitoring/room/room.component.html
@@ -73,6 +73,7 @@
                   class="btn btn-icon btn-outline-primary mr-1"
                   triggers="hover:click:hover"
                   ngbTooltip="Edit"
+                  (click)="editRow(data)"
                 >
                   <i class="feather ft-edit"></i>
                 </button>
@@ -81,6 +82,7 @@
                   class="btn btn-icon btn-outline-primary mr-1"
                   triggers="hover:click:hover"
                   ngbTooltip="Detail"
+                  (click)="viewRow(data)"
                 >
                   <i class="la la-building"></i>
                 </button>
diff --git a/src/app/content/hemat-app/monitoring/room/room.component.ts b/src/app/content/hemat-app/monitoring/room/room.component.ts
index 83e889c..6e13b14 100644
--- a/src/app/content/hemat-app/monitoring/room/room.component.ts
+++ b/src/app/content/hemat-app/monitoring/room/room.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { TableMonitoringService } from "../monitoring.service";
 
 @Component({
@@ -16,7 +16,8 @@ export class RoomComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
-    private monitoringService: TableMonitoringService
+    private monitoringService: TableMonitoringService,
+    private router: Router
   ) {}
 
   ngOnInit() {
@@ -67,4 +68,11 @@ export class RoomComponent implements OnInit {
         value !== null && value.toString().toLowerCase().includes(searchTermLC)
     );
   }
+  viewRow(row) {
+    this.router.navigate(["/monitoring/view-new-room", row.id]);
+  }
+
+  editRow(row) {
+    this.router.navigate(["/monitoring/edit-new-room", row.id]);
+  }
 }
diff --git a/src/assets/data/hemat/monitoring.json b/src/assets/data/hemat/monitoring.json
index c82974b..68b57b7 100644
--- a/src/assets/data/hemat/monitoring.json
+++ b/src/assets/data/hemat/monitoring.json
@@ -1,5 +1,6 @@
 [
   {
+    "id": 1,
     "type": "danger",
     "value": 95,
     "product": "Ruang Meeting 1",
@@ -8,6 +9,7 @@
     "bagde": "+8 more"
   },
   {
+    "id": 2,
     "type": "warning",
     "value": 75,
     "product": "Ruang Meeting 2",
@@ -16,6 +18,7 @@
     "bagde": "+5 more"
   },
   {
+    "id": 3,
     "type": "success",
     "value": 65,
     "product": "Ruang Meeting 3",
@@ -24,6 +27,7 @@
     "bagde": "+3 more"
   },
   {
+    "id": 4,
     "type": "success",
     "value": 55,
     "product": "Dapur",
@@ -31,6 +35,7 @@
     "amount": "$ 1150.00"
   },
   {
+    "id": 5,
     "type": "success",
     "value": 45,
     "product": "Ruang Musola",
@@ -38,6 +43,7 @@
     "amount": "$ 1180.00"
   },
   {
+    "id": 6,
     "type": "danger",
     "value": 90,
     "product": "Ruang Server",
@@ -46,6 +52,7 @@
     "bagde": "+8 more"
   },
   {
+    "id": 7,
     "type": "warning",
     "value": 75,
     "product": "Ruang Kepala Bagian",
@@ -54,6 +61,7 @@
     "bagde": "+5 more"
   },
   {
+    "id": 8,
     "type": "success",
     "value": 65,
     "product": "Ruang Tengah",