diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.ts b/src/app/content/hemat-app/cost-management/cost-management.component.ts
index 251e6c8..2d9e539 100644
--- a/src/app/content/hemat-app/cost-management/cost-management.component.ts
+++ b/src/app/content/hemat-app/cost-management/cost-management.component.ts
@@ -92,9 +92,9 @@ export class CostManagementComponent implements OnInit {
       .subscribe((response) => {
         this.data = response.results.data;
         this.filteredRows = this.data;
-        let kwhData = parseFloat(response.results.kwh)
+        let kwhData = parseFloat(response.results.kwh);
         this.kwhTerm = kwhData.toFixed(1);
-        
+
         this.costTerm = response.results.cost;
 
         this.data_cost = this.filteredRows.map((item) => ({
@@ -135,8 +135,9 @@ export class CostManagementComponent implements OnInit {
 
   dataListBuilding() {
     this.monitoringApiService.getBuildingList().subscribe((data) => {
-      this.dataBuildingList = data.data.filter((item) => item.statusName.toLowerCase() === "aktif");
-      
+      this.dataBuildingList = data.data.filter(
+        (item) => item.statusName.toLowerCase() === "aktif"
+      );
     });
   }
 
@@ -144,79 +145,80 @@ export class CostManagementComponent implements OnInit {
     this.costService.getCompPrevMonthCost(buildingId).subscribe((data) => {
       this.dataCompPrev = data.data;
       this.chartOption = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params) {
+            var tar = params[1];
+            return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
+          },
+        },
+
         grid: {
           left: "25%",
           right: "25%",
           top: "20%",
           bottom: "20%",
         },
-
-        // Add tooltip
-        tooltip: {
-          trigger: "axis",
-          enterable: false,
-          formatter: function (params) {
-            return `${params[0].name}<br/>${
-              params[0].seriesName
-            }: Rp. ${params[0].value.toLocaleString()}`;
+        color: ["#37A647"],
+        xAxis: {
+          type: "category",
+          splitLine: { show: false },
+          data: [this.dataCompPrev[0].name, this.dataCompPrev[1].name],
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#37A647",
+              width: 7,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
           },
         },
 
-        // Add legend
-        legend: false,
+        yAxis: {
+          type: "value",
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+        },
 
-        // Add custom colors
-        color: ["#37A647"],
-
-        // Horizontal axis
-        xAxis: [
+        series: [
           {
-            type: "category",
-            data: [this.dataCompPrev[0].name, this.dataCompPrev[1].name],
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "#37A647",
-                width: 4,
+            name: "Placeholder",
+            type: "bar",
+            stack: "Total",
+            itemStyle: {
+              borderColor: "transparent",
+              color: "transparent",
+            },
+            emphasis: {
+              itemStyle: {
+                borderColor: "transparent",
+                color: "transparent",
               },
             },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
+            data: [1000, 1000],
           },
-        ],
-
-        // Vertical axis
-        yAxis: [
-          {
-            type: "value",
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-          },
-        ],
-
-        // Add series
-        series: [
           {
             name: "Cost",
             type: "bar",
-            data: [this.dataCompPrev[0].rupiah, this.dataCompPrev[1].rupiah],
+            stack: "Total",
             label: {
               show: true,
               position: "top",
@@ -225,7 +227,8 @@ export class CostManagementComponent implements OnInit {
                 return `Rp. ${params.value.toLocaleString()}`;
               },
             },
-            barWidth: "50%",
+            // barWidth: "50%",
+            data: [this.dataCompPrev[0].rupiah, this.dataCompPrev[1].rupiah],
           },
         ],
       };
@@ -236,79 +239,80 @@ export class CostManagementComponent implements OnInit {
     this.costService.getCompActEstCost(buildingId).subscribe((data) => {
       this.dataCompAct = data.data[0];
       this.chartOption2 = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params) {
+            var tar = params[1];
+            return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
+          },
+        },
+
         grid: {
           left: "25%",
           right: "25%",
           top: "20%",
           bottom: "20%",
         },
-
-        // Add tooltip
-        tooltip: {
-          trigger: "axis",
-          enterable: false,
-          formatter: function (params) {
-            return `${params[0].name}<br/>${
-              params[0].seriesName
-            }: Rp. ${params[0].value.toLocaleString()}`;
+        color: ["#37A647"],
+        xAxis: {
+          type: "category",
+          splitLine: { show: false },
+          data: ["Estimation Cost", "Actual Cost"],
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#37A647",
+              width: 7,
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
           },
         },
 
-        // Add legend
-        legend: false,
+        yAxis: {
+          type: "value",
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+        },
 
-        // Add custom colors
-        color: ["#37A647"],
-
-        // Horizontal axis
-        xAxis: [
+        series: [
           {
-            type: "category",
-            data: ["Estimation Cost", "Actual Cost"],
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: "#37A647",
-                width: 4,
+            name: "Placeholder",
+            type: "bar",
+            stack: "Total",
+            itemStyle: {
+              borderColor: "transparent",
+              color: "transparent",
+            },
+            emphasis: {
+              itemStyle: {
+                borderColor: "transparent",
+                color: "transparent",
               },
             },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
+            data: [2500, 2500],
           },
-        ],
-
-        // Vertical axis
-        yAxis: [
-          {
-            type: "value",
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-            axisLabel: {
-              show: false,
-            },
-          },
-        ],
-
-        // Add series
-        series: [
           {
             name: "Cost",
             type: "bar",
-            data: [this.dataCompAct.est_cost, this.dataCompAct.real_cost],
+            stack: "Total",
             label: {
               show: true,
               position: "top",
@@ -317,7 +321,8 @@ export class CostManagementComponent implements OnInit {
                 return `Rp. ${params.value.toLocaleString()}`;
               },
             },
-            barWidth: "50%", // Adjust bar width
+            // barWidth: "50%",
+            data: [this.dataCompAct.est_cost, this.dataCompAct.real_cost],
           },
         ],
       };
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 90f9534..e6c7b14 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
@@ -36,6 +36,7 @@
           id="code"
           formControlName="code"
           maxlength="10"
+          (input)="toUppercase($event)"
         />
         <div
           *ngIf="myForm.get('code').touched && myForm.get('code').invalid"
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 5366a30..6454415 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
@@ -64,6 +64,12 @@ export class AddEditMasterRoomComponent {
     });
   }
 
+  toUppercase(event: Event) {
+    const input = event.target as HTMLInputElement;
+    input.value = input.value.toUpperCase();
+    this.myForm.get('code').setValue(input.value);
+  }
+
   listDataStatus() {
     this.monitoringApiService.getMasterData().subscribe((res) => {
       this.data = res.results.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 a4a332b..7c4386b 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -284,6 +284,7 @@ export class DetailComponent {
           legend: {},
           toolbox: {
             show: true,
+            orient: 'vertical',
             feature: {
               dataView: { show: true, readOnly: false },
               magicType: { show: true, type: ['line', 'bar'] },