diff --git a/src/app/_services/tableexcel.service.ts b/src/app/_services/tableexcel.service.ts
index 9c9a96e..872cf76 100644
--- a/src/app/_services/tableexcel.service.ts
+++ b/src/app/_services/tableexcel.service.ts
@@ -208,4 +208,73 @@ export class TableexcelService {
     });
     this.saveAsExcelFile(excelBuffer, excelFileName);
   }
+
+  public exportAsExcelFileMonitoringDetail(
+    json: any[],
+    excelFileName: string,
+    columns: string[],
+    mode: any
+  ): void {
+    const filteredJson = json.map((item) => {
+      const filteredItem = {};
+      columns.forEach((column) => {
+        filteredItem[column] = item[column];
+      });
+      return filteredItem;
+    });
+
+    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(filteredJson);
+    let columnWidths = [];
+    if (mode === "building") {
+      columnWidths = [
+        { wch: 30 },
+        { wch: 40 },
+        { wch: 30 },
+        { wch: 30 },
+        { wch: 30 },
+        { wch: 30 },
+      ];
+    } else if (mode === "floor") {
+      columnWidths = [
+        { wch: 40 },
+        { wch: 30 },
+        { wch: 30 },
+        { wch: 30 },
+        { wch: 30 },
+      ];
+    } else if (mode === "room") {
+      columnWidths = [{ wch: 30 }, { wch: 30 }, { wch: 30 }, { wch: 30 }];
+    }
+
+    worksheet["!cols"] = columnWidths;
+
+    let header = [];
+    if (mode === "building") {
+      header = [
+        "Floor",
+        "Room",
+        "Device",
+        "Duration",
+        "Price Kwh",
+        "Estimation Cost",
+      ];
+    } else if (mode === "floor") {
+      header = ["Room", "Device", "Duration", "Price Kwh", "Estimation Cost"];
+    } else if (mode === "room") {
+      header = ["Device", "Duration", "Price Kwh", "Estimation Cost"];
+    }
+
+    XLSX.utils.sheet_add_aoa(worksheet, [header]);
+
+    const workbook: XLSX.WorkBook = {
+      Sheets: { data: worksheet },
+      SheetNames: ["data"],
+    };
+
+    const excelBuffer: any = XLSX.write(workbook, {
+      bookType: "xlsx",
+      type: "array",
+    });
+    this.saveAsExcelFile(excelBuffer, excelFileName);
+  }
 }
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 74b0e72..3d52cdb 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -6,6 +6,8 @@ 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";
 
 @Component({
   selector: "app-detail",
@@ -66,6 +68,7 @@ export class DetailComponent {
     private currencyPipe: CurrencyPipe,
     private router: Router,
     private authService: LoginService,
+    private modalService: NgbModal,
   ) {}
 
   get formattedSummaryCost(): string {
@@ -345,6 +348,27 @@ export class DetailComponent {
 
   onChartClick(params) {
     console.log(params);
+    const modalRef = this.modalService.open(ModalExportComponent, {
+      size: "xl",
+      centered: true,
+    });
+    modalRef.componentInstance.dataIndex = params.dataIndex;
+    modalRef.componentInstance.buildingId = this.buildingId;
+    modalRef.componentInstance.floorId = this.floorId;
+    modalRef.componentInstance.roomId = this.roomId;
+    modalRef.componentInstance.mode = this.mode;
+
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          console.log(result);
+          
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
     
     // Show popup with details
     // alert(`Day: ${params.name}\nKWH Consumption: ${params.value}`);
diff --git a/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.html b/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.html
index bf30cfe..783a8a3 100644
--- a/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.html
+++ b/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.html
@@ -1,9 +1,17 @@
-<div class="modal-body" style="background-color: #FBFBFB !important">
+<div class="modal-body" style="background-color: #fbfbfb !important">
   <h4 style="color: #242222; margin-bottom: 20px !important">
-    Comparison of Water and Electricity Costs > {{ dataRow.building }}
+    <div *ngIf="buildingOnly">
+      <strong>{{ data_cost[0].BuildingName }}</strong>
+    </div>
+    <div *ngIf="floorOnly">
+      {{data_cost[0].BuildingName}} > <strong>{{ data_cost[0].floorName }}</strong>
+    </div>
+    <div *ngIf="roomOnly">
+      {{data_cost[0].BuildingName}} > {{data_cost[0].floorName}} > <strong>{{ data_cost[0].roomName }}</strong>
+    </div>
   </h4>
-  <p style="color: #242222">Room : {{ dataRow?.roomName }}</p>
-  <p style="color: #242222">Category : {{ dataRow?.categoryName }}</p>
+  <!-- <p style="color: #242222">Room : dfd</p>
+  <p style="color: #242222">Category : gdfg</p> -->
 
   <div class="card-dashboard">
     <ngx-datatable
@@ -24,7 +32,7 @@
           </p>
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90">
+      <!-- <ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
           <span style="color: #242222 !important">Tanggal</span>
         </ng-template>
@@ -33,7 +41,25 @@
             {{ value | date : "dd/MM/yyyy" }}
           </p>
         </ng-template>
+      </ngx-datatable-column> -->
+      <ngx-datatable-column name="floorName" [flexGrow]="1" [minWidth]="90" *ngIf="buildingOnly">
+        <ng-template ngx-datatable-header-template>
+          <span style="color: #242222 !important">Floor</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #242222 !important">{{ value }}</p>
+        </ng-template>
       </ngx-datatable-column>
+
+      <ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90" *ngIf="buildingOnly || floorOnly">
+        <ng-template ngx-datatable-header-template>
+          <span style="color: #242222 !important">Room</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #242222 !important">{{ value }}</p>
+        </ng-template>
+      </ngx-datatable-column>
+
       <ngx-datatable-column name="deviceName" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
           <span style="color: #242222 !important">Device</span>
@@ -42,22 +68,41 @@
           <p style="color: #242222 !important">{{ value }}</p>
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90">
+
+      <ngx-datatable-column name="duration" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
-          <span style="color: #242222 !important">Room</span>
+          <span style="color: #242222 !important">Duration</span>
         </ng-template>
         <ng-template let-value="value" ngx-datatable-cell-template>
           <p style="color: #242222 !important">{{ value }}</p>
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column name="categoryName" [flexGrow]="1" [minWidth]="90">
+
+      <!-- <ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90">
         <ng-template ngx-datatable-header-template>
-          <span style="color: #242222 !important">Category</span>
+          <span style="color: #242222 !important">Price Kwh</span>
         </ng-template>
         <ng-template let-value="value" ngx-datatable-cell-template>
           <p style="color: #242222 !important">{{ value }}</p>
         </ng-template>
+      </ngx-datatable-column> -->
+
+      <ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90">
+        <ng-template ngx-datatable-header-template>
+          <span style="color: #242222 !important">Price Kwh</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #242222 !important">
+            {{
+              value.toLocaleString("id-ID", {
+                style: "currency",
+                currency: "IDR"
+              })
+            }}
+          </p>
+        </ng-template>
       </ngx-datatable-column>
+
       <ngx-datatable-column
         name="estimationCost"
         [flexGrow]="1"
@@ -77,51 +122,12 @@
           </p>
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column name="totalKwh" [flexGrow]="1" [minWidth]="90">
-        <ng-template ngx-datatable-header-template>
-          <span style="color: #242222 !important">Total Kwh</span>
-        </ng-template>
-        <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #242222 !important">{{ value }}</p>
-        </ng-template>
-      </ngx-datatable-column>
-      <ngx-datatable-column name="watt" [flexGrow]="1" [minWidth]="90">
-        <ng-template ngx-datatable-header-template>
-          <span style="color: #242222 !important">Watt</span>
-        </ng-template>
-        <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #242222 !important">{{ value }}</p>
-        </ng-template>
-      </ngx-datatable-column>
-      <ngx-datatable-column name="duration" [flexGrow]="1" [minWidth]="90">
-        <ng-template ngx-datatable-header-template>
-          <span style="color: #242222 !important">Duration</span>
-        </ng-template>
-        <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #242222 !important">{{ value }}</p>
-        </ng-template>
-      </ngx-datatable-column>
-      <ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90">
-        <ng-template ngx-datatable-header-template>
-          <span style="color: #242222 !important">Price Kwh</span>
-        </ng-template>
-        <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #242222 !important">
-            {{
-              value.toLocaleString("id-ID", {
-                style: "currency",
-                currency: "IDR"
-              })
-            }}
-          </p>
-        </ng-template>
-      </ngx-datatable-column>
     </ngx-datatable>
   </div>
 </div>
 <div
   class="modal-footer justify-content-between"
-  style="background-color: #FBFBFB !important; border-style: none !important"
+  style="background-color: #fbfbfb !important; border-style: none !important"
 >
   <button
     type="button"
@@ -129,7 +135,7 @@
     style="
       color: #242222;
       width: 25%;
-      background-color: #FBFBFB !important;
+      background-color: #fbfbfb !important;
       border-color: #242222 !important;
       border-radius: 10px;
     "
@@ -143,8 +149,8 @@
     style="
       color: #242222 !important;
       width: 25%;
-      background-color: #DDE1E6 !important;
-      border-color: #DDE1E6 !important;
+      background-color: #dde1e6 !important;
+      border-color: #dde1e6 !important;
       border-radius: 10px;
     "
     [disabled]="spinnerExportActive"
diff --git a/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.ts b/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.ts
index a6434b1..63582c2 100644
--- a/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.ts
+++ b/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.ts
@@ -1,9 +1,8 @@
 import { Component, Input } from "@angular/core";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
-import { DeviceService } from "../../service/device.service";
-import { CostManagementService } from "../../service/cost-management.service";
 import { TableexcelService } from "src/app/_services/tableexcel.service";
 import { LoginService } from "../../service/login.service";
+import { BuildingService } from "../../service/monitoring-api.service";
 
 @Component({
   selector: "app-modal-export",
@@ -11,8 +10,16 @@ import { LoginService } from "../../service/login.service";
   styleUrls: ["./modal-export.component.css"],
 })
 export class ModalExportComponent {
-  @Input() buildingId: number;
-  @Input() dataRow: any;
+  @Input() buildingId: any = 0;
+  @Input() dataIndex: any = 0;
+  @Input() floorId: any = 0;
+  @Input() roomId: any = 0;
+  @Input() mode: any = "";
+
+  buildingOnly = false;
+  floorOnly = false;
+  roomOnly = false;
+
   data: any;
   filteredRows: any[];
   data_device: any[];
@@ -24,47 +31,62 @@ export class ModalExportComponent {
   spinnerExportActive = false;
   constructor(
     public activeModal: NgbActiveModal,
-    private costService: CostManagementService,
     private tableexcelService: TableexcelService,
-    private authService: LoginService
+    private authService: LoginService,
+    private monitoringService: BuildingService
   ) {}
 
   ngOnInit() {
     this.authService.startTokenCheck();
     this.authService.startTrackingActivity();
-    const dateRow = this.convertToUTC7(this.dataRow.endDate)
-    this.formattedEndDate = dateRow.slice(0, 7);
+    this.fetchData();
   }
 
   ngAfterViewInit(): void {
-    console.log(this.dataRow);
-    this.fetchData(
-      this.dataRow.categoryId,
-      this.dataRow.roomId,
-      this.formattedEndDate
-    );
+    if (this.buildingId !== 0 && this.floorId === 0 && this.roomId === 0) {
+      this.buildingOnly = true;
+      this.floorOnly = false;
+      this.roomOnly = false;
+    } else if (
+      this.buildingId !== 0 &&
+      this.floorId !== 0 &&
+      this.roomId === 0
+    ) {
+      this.buildingOnly = false;
+      this.floorOnly = true;
+      this.roomOnly = false;
+    } else if (
+      this.buildingId !== 0 &&
+      this.floorId !== 0 &&
+      this.roomId !== 0
+    ) {
+      this.buildingOnly = false;
+      this.floorOnly = false;
+      this.roomOnly = true;
+    }
   }
 
-  fetchData(category, room, period) {
-    this.costService
-      .getCostDetail(category, room, period)
+  fetchData() {
+    this.monitoringService
+      .getDetailChart(
+        this.dataIndex + 1,
+        this.buildingId,
+        this.floorId,
+        this.roomId
+      )
       .subscribe((response) => {
         this.dataExport = response.data;
-        console.log(this.dataExport);
         this.data_cost = response.data.map((item) => ({
-          deviceName: item.device_name,
+          BuildingName: item.building_name,
+          floorName: item.floor_name,
           roomName: item.room_name,
-          categoryName: item.category_name,
-          estimationCost: item.estimation_cost,
-          totalKwh: item.total_kwh,
-          watt: item.watt,
+          deviceName: item.device_name,
           duration: item.duration,
           priceKwh: item.price_kwh,
-          // periode: item.periode,
-          periode: this.convertToUTC7(item.periode)
+          estimationCost: item.estimation_cost,
+          // periode: this.convertToUTC7(item.periode)
         }));
         console.log(this.data_cost);
-        
       });
   }
 
@@ -80,21 +102,42 @@ export class ModalExportComponent {
   export() {
     this.spinnerExportActive = true;
     setTimeout(() => {
-      const columnsToExport = [
-        "periode",
-        "deviceName",
-        "roomName",
-        "categoryName",
-        "estimationCost",
-        "totalKwh",
-        "watt",
-        "duration",
-        "priceKwh",
-      ];
-      this.tableexcelService.exportAsExcelFileManageDetail(
+      let columnsToExport = [];
+      let exportText = "";
+      if (this.mode === "building") {
+        columnsToExport = [
+          "floorName",
+          "roomName",
+          "deviceName",
+          "duration",
+          "priceKwh",
+          "estimationCost",
+        ];
+        exportText = "export_detail_monitoring_building";
+      } else if (this.mode === "floor") {
+        columnsToExport = [
+          "roomName",
+          "deviceName",
+          "duration",
+          "priceKwh",
+          "estimationCost",
+        ];
+        exportText = "export_detail_monitoring_floor";
+      } else if (this.mode === "room") {
+        columnsToExport = [
+          "deviceName",
+          "duration",
+          "priceKwh",
+          "estimationCost",
+        ];
+        exportText = "export_detail_monitoring_room";
+      }
+
+      this.tableexcelService.exportAsExcelFileMonitoringDetail(
         this.data_cost,
-        "export_detail_cost_management",
-        columnsToExport
+        exportText,
+        columnsToExport,
+        this.mode
       );
       this.spinnerExportActive = false;
       this.activeModal.close("Export completed");
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 ae1a260..0223cc6 100644
--- a/src/app/content/hemat-app/service/monitoring-api.service.ts
+++ b/src/app/content/hemat-app/service/monitoring-api.service.ts
@@ -160,4 +160,9 @@ export class BuildingService {
   getIconData(): Observable<any> {
     return this.http.get(this.loadDataIcon, httpOptions);
   }
+
+  getDetailChart(date_index: any, building_id: any, floor_id: any, room_id: any): Observable<any> {
+    return this.get<any>(`/dashboard/chartKwhWater/detail?date_index=${date_index}&building_id=${building_id}&floor_id=${floor_id}&room_id=${room_id}`);
+  }
+
 }