diff --git a/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.ts b/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.ts
index b5dd916..9e426ee 100644
--- a/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.ts
+++ b/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.ts
@@ -213,7 +213,11 @@ export class AddEditListComponent {
 
   dataListRoom() {
     this.monitoringApiService.getListRoomDataUnmap().subscribe(data => {
-      this.dataRoomList = data.data
+      const newArray = data.data.map(item => ({
+        id: item.id,
+        name: `${item.name} (${item.code})`
+      }));
+      this.dataRoomList = newArray
     });
   }
 
diff --git a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html
index 8f52007..90f9534 100644
--- a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html
+++ b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html
@@ -1,10 +1,15 @@
-<div class="modal-header" style="background-color: #FBFBFB !important">
-  <h4 class="modal-title" style="color: #242222">{{labelRoom}}</h4>
-  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+<div class="modal-header" style="background-color: #fbfbfb !important">
+  <h4 class="modal-title" style="color: #242222">{{ labelRoom }}</h4>
+  <button
+    type="button"
+    class="close"
+    aria-label="Close"
+    (click)="activeModal.dismiss('Cross click')"
+  >
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
-<div class="modal-body" style="background-color: #FBFBFB !important">
+<div class="modal-body" style="background-color: #fbfbfb !important">
   <form [formGroup]="myForm">
     <div class="form-row">
       <div class="form-group col-md-6">
@@ -23,6 +28,22 @@
           Name is required.
         </div>
       </div>
+      <div class="form-group col-md-6">
+        <label for="name" style="color: #242222">Room Code:</label>
+        <input
+          type="text"
+          class="form-control"
+          id="code"
+          formControlName="code"
+          maxlength="10"
+        />
+        <div
+          *ngIf="myForm.get('code').touched && myForm.get('code').invalid"
+          class="text-danger"
+        >
+          Code is required.
+        </div>
+      </div>
       <!-- <div class="form-group col-md-6">
         <label for="statusId" style="color: #242222">Building:</label>
         <select
@@ -52,7 +73,13 @@
           formControlName="description"
           maxlength="50"
         />
-        <div *ngIf="myForm.get('description').touched && myForm.get('description').invalid" class="text-danger">
+        <div
+          *ngIf="
+            myForm.get('description').touched &&
+            myForm.get('description').invalid
+          "
+          class="text-danger"
+        >
           Description is required.
         </div>
       </div>
@@ -74,14 +101,14 @@
     </div>
   </form>
 </div>
-<div class="modal-footer" style="background-color: #FBFBFB !important">
+<div class="modal-footer" style="background-color: #fbfbfb !important">
   <button
     type="button"
     class="btn btn-secondary"
     style="
       color: #242222 !important;
-      background-color: #FBFBFB !important;
-      border-color: #FBFBFB !important;
+      background-color: #fbfbfb !important;
+      border-color: #fbfbfb !important;
     "
     (click)="activeModal.dismiss('Cross click')"
   >
@@ -90,7 +117,7 @@
   <button
     type="button"
     class="btn btn-primary"
-    style="color: #ffffff !important; background-color: #37A647 !important"
+    style="color: #ffffff !important; background-color: #37a647 !important"
     (click)="addRow()"
   >
     Save
diff --git a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.ts b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.ts
index 72be9d2..5366a30 100644
--- a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.ts
+++ b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.ts
@@ -48,6 +48,7 @@ export class AddEditMasterRoomComponent {
   createForm() {
     this.myForm = this.fb.group({
       name: ["", Validators.required],
+      code: ["", Validators.required],
       description: ["", Validators.required],
     });
   }
@@ -58,6 +59,7 @@ export class AddEditMasterRoomComponent {
     this.myForm = this.fb.group({
       id: this.dataRow.id,
       name: [this.dataRow.name, Validators.required],
+      code: [this.dataRow.code, Validators.required],
       description: [this.dataRow.description, Validators.required],
     });
   }
diff --git a/src/app/content/hemat-app/master/master-room/master-room.component.ts b/src/app/content/hemat-app/master/master-room/master-room.component.ts
index fc0c1f3..87037b0 100644
--- a/src/app/content/hemat-app/master/master-room/master-room.component.ts
+++ b/src/app/content/hemat-app/master/master-room/master-room.component.ts
@@ -85,12 +85,19 @@ export class MasterRoomComponent {
         if (result) {
           const filteredData = {
             name: result.name,
+            code: result.code,
             description: result.description,
           };
           this.monitoringApiService
             .postMasterRoomParam(filteredData)
             .subscribe((res) => {
               this.fetchData();
+            }, (error) => {
+              console.error(error);
+              this.toastr.error("Error", error.error.message, {
+                timeOut: 2000,
+                closeButton: true,
+              });
             });
         }
       },
@@ -115,6 +122,7 @@ export class MasterRoomComponent {
           const filteredData = {
             id: result.roomId,
             name: result.name,
+            code: result.code,
             description: result.description,
           };
           this.monitoringApiService
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 4f4d514..f5a9c30 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -325,8 +325,8 @@ export class DetailComponent {
         this.chartKwhWater = res.data;
         this.barChartData[0].data = [];
         this.chartKwhWater.forEach((entry) => {
-          this.barChartData[0].data.push(entry.kwh);
           this.barChartData[1].data.push(entry.kwh);
+          this.barChartData[0].data.push(entry.cost);
           this.barChartLabels.push(entry.day);
         });