diff --git a/src/app/_layout/footer/footer.component.html b/src/app/_layout/footer/footer.component.html
index 49b2ea5..c76e469 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: #000000 !important;"
-        >Smart Building Management Systems (V@2024-06-28.01)
+        >Smart Building Management Systems (V@2024-06-28.02)
       </a></span
     >
   </p>
diff --git a/src/app/_services/tableexcel.service.ts b/src/app/_services/tableexcel.service.ts
index 64c9a39..ce75892 100644
--- a/src/app/_services/tableexcel.service.ts
+++ b/src/app/_services/tableexcel.service.ts
@@ -98,11 +98,17 @@ export class TableexcelService {
       });
       return filteredItem;
     });
-  
+
     // Calculate totals for estimation_cost and total_use
-    const totalEstimationCost = filteredJson.reduce((sum, item) => sum + (item['estimation_cost'] || 0), 0);
-    const totalUse = filteredJson.reduce((sum, item) => sum + (item['total_use'] || 0), 0);
-  
+    const totalEstimationCost = filteredJson.reduce(
+      (sum, item) => sum + (item["estimation_cost"] || 0),
+      0
+    );
+    const totalUse = filteredJson.reduce(
+      (sum, item) => sum + (item["total_use"] || 0),
+      0
+    );
+
     // Create the worksheet
     const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(filteredJson);
     const columnWidths = [
@@ -114,7 +120,7 @@ export class TableexcelService {
       { wch: 30 },
     ];
     worksheet["!cols"] = columnWidths;
-  
+
     // Add header
     const header = [
       "Building",
@@ -125,7 +131,7 @@ export class TableexcelService {
       "Date",
     ];
     XLSX.utils.sheet_add_aoa(worksheet, [header]);
-  
+
     // Add totals row
     const totalsRow = [
       "Totals",
@@ -133,21 +139,73 @@ export class TableexcelService {
       "",
       `Total: ${totalUse} Kwh`,
       `Total: ${totalEstimationCost}`,
-      ""
+      "",
     ];
     XLSX.utils.sheet_add_aoa(worksheet, [totalsRow], { origin: -1 });
-  
+
     // Create the workbook
     const workbook: XLSX.WorkBook = {
       Sheets: { data: worksheet },
       SheetNames: ["data"],
     };
-  
+
     // Write the workbook and save it
     const excelBuffer: any = XLSX.write(workbook, {
       bookType: "xlsx",
       type: "array",
     });
     this.saveAsExcelFile(excelBuffer, excelFileName);
-  }  
+  }
+
+  public exportAsExcelFileManageDetail(
+    json: any[],
+    excelFileName: string,
+    columns: string[]
+  ): 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);
+    const columnWidths = [
+      { wch: 40 },
+      { wch: 30 },
+      { wch: 30 },
+      { wch: 20 },
+      { wch: 20 },
+      { wch: 20 },
+      { wch: 20 },
+      { wch: 20 },
+      { wch: 30 },
+    ];
+    worksheet["!cols"] = columnWidths;
+
+    const header = [
+      "Device",
+      "Room",
+      "Category",
+      "Estimation Cost",
+      "Total Kwh",
+      "Watt",
+      "Duration",
+      "Price Kwh",
+      "Periode",
+    ];
+    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/cost-management/cost-management.component.css b/src/app/content/hemat-app/cost-management/cost-management.component.css
index 3b51239..a99d931 100644
--- a/src/app/content/hemat-app/cost-management/cost-management.component.css
+++ b/src/app/content/hemat-app/cost-management/cost-management.component.css
@@ -417,3 +417,8 @@ input[type="month"]::-webkit-calendar-picker-indicator {
   background-color: #1a1a1a; /* Darker black for hover effect */
 }
 
+.modal-open .content {
+  filter: blur(5px);
+  transition: filter 0.3s ease-in-out;
+}
+
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 109c61e..9d36b8a 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
@@ -97,6 +97,8 @@ export class CostManagementComponent implements OnInit {
           totalUse: item.total_use,
           endDate: item.end_date,
           statusId: item.status_id,
+          categoryId: item.category_id,
+          roomId: item.room_id,
         }));
       });
   }
diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css
index 10cac6b..d4aff3e 100644
--- a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css
+++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css
@@ -1,3 +1,419 @@
+:host ::ng-deep .progress-bar {
+  background-color: #bef264 !important;
+}
+
+:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
+  stroke: #8a8a8a;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
+  stroke: #bef264;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart2 .ct-label {
+  fill: #ffffff;
+  color: rgb(255, 255, 255);
+  font-size: 12px;
+  line-height: 1;
+}
+
+:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point {
+  stroke: #bef264;
+}
+
+:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line {
+  stroke: #bef264;
+}
+
+:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area {
+  fill: #bef264;
+  fill-opacity: 1;
+}
+
+:host ::ng-deep .sp-line-total-cost .ct-point {
+  stroke-width: 0px;
+}
+
+.ct-chart-bar .ct-series .ct-bar {
+  stroke-width: 20px !important; /* Atur lebar bar sesuai kebutuhan */
+}
+
+.ct-chart-bar .ct-label.ct-horizontal {
+  margin-left: -10px !important; /* Mengatur margin label horizontal */
+  margin-right: -10px !important;
+}
+
+:host ::ng-deep .donut-chart3 .ct-series-a .ct-bar {
+  stroke: #bef264;
+  fill: none;
+  stroke-width: 30px;
+}
+
+:host ::ng-deep .donut-chart3 .ct-series-b .ct-bar {
+  stroke: #bef264;
+  fill: none;
+  stroke-width: 30px;
+}
+
+:host ::ng-deep .donut-chart3 .ct-label {
+  fill: #ffffff;
+  color: rgb(255, 255, 255);
+  font-size: 12px;
+  line-height: 1;
+  margin-right: 20px;
+}
+
+:host ::ng-deep .ct-label.ct-horizontal {
+  font-size: 12px; /* Adjust font size */
+  transform: rotate(-45deg); /* Rotate labels if needed for better fit */
+  text-anchor: end;
+  margin-top: 10px;
+}
+
+:host ::ng-deep .ct-chart-bar .ct-labels .ct-label.ct-horizontal {
+  margin-right: 20px; /* Adjust margin for labels */
+}
+
+.chart-title {
+  font-size: 18px;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+/* Hide the default calendar icon */
+input[type="month"]::-webkit-calendar-picker-indicator {
+  background-color: #ffffff;
+}
+
+/* table */
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-header
+  .datatable-header-cell
+  .datatable-header-cell-label {
+  font-family: inherit;
+  font-size: medium;
+  font-weight: bold;
+  color: #6b6f82;
+}
+:host ::ng-deep .ngx-datatable .datatable-row-center,
+.ngx-datatable .datatable-row-group,
+.ngx-datatable .datatable-row-right {
+  position: relative;
+  height: 50px !important;
+}
+
+:host ::ng-deep .datatable-icon-right:before {
+  font-family: "icofont";
+  font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-skip:before {
+  font-family: "icofont";
+  font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-left:before {
+  font-family: "icofont";
+  font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-left:before {
+  content: "\2039";
+  font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-prev:before {
+  content: "\00AB";
+  font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-right:before {
+  content: "\203A";
+  font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-skip:before {
+  content: "\00BB";
+  font-size: x-large;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-left,
+.ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-right,
+.ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-prev {
+  font-size: 16px;
+  line-height: 22px;
+  padding: 0px 09px;
+  background-color: #d4d2e7;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-right,
+.ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-right {
+  font-size: 16px;
+  line-height: 22px;
+  padding: 0px 09px;
+  background-color: #d4d2e7;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-skip {
+  font-size: 16px;
+  line-height: 22px;
+  padding: 0px 09px;
+  background-color: #d4d2e7;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-prev {
+  font-size: 16px;
+  line-height: 22px;
+  padding: 0px 09px;
+  background-color: #d4d2e7;
+}
+
+:host
+  ::ng-deep
+  .datatable-footer
+  .datatable-pager
+  ul
+  li:not(.disabled).active
+  a,
+.ngx-datatable.bootstrap[_ngcontent-c11]
+  .datatable-footer[_ngcontent-c11]
+  .datatable-pager[_ngcontent-c11]
+  ul[_ngcontent-c11]
+  li[_ngcontent-c11]:not(.disabled):hover
+  a[_ngcontent-c11] {
+  background-color: #d4d2e7;
+  font-weight: bold;
+  font-size: larger;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
+  height: 32px;
+  min-width: 34px;
+  line-height: 22px;
+  padding: 0;
+  border-radius: 3px;
+  margin: 0 3px;
+  text-align: center;
+  vertical-align: top;
+  padding-top: 3px;
+  text-decoration: none;
+  vertical-align: bottom;
+  color: #7c8091;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-left,
+.ngx-datatable.bootstrap[_ngcontent-c11]
+  .datatable-footer[_ngcontent-c11]
+  .datatable-pager[_ngcontent-c11]
+  .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11]
+  .datatable-footer[_ngcontent-c11]
+  .datatable-pager[_ngcontent-c11]
+  .datatable-icon-prev[_ngcontent-c11] {
+  font-size: 14px;
+  line-height: 9px;
+  padding: 0px 08px;
+  background-color: #ffffff;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-left,
+.ngx-datatable.bootstrap[_ngcontent-c11]
+  .datatable-footer[_ngcontent-c11]
+  .datatable-pager[_ngcontent-c11]
+  .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11]
+  .datatable-footer[_ngcontent-c11]
+  .datatable-pager[_ngcontent-c11]
+  .datatable-icon-prev[_ngcontent-c11] {
+  font-size: 0px;
+  line-height: 22px;
+  padding: 0px 09px;
+  background-color: #ffffff;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-right,
+.ngx-datatable.bootstrap[_ngcontent-c11]
+  .datatable-footer[_ngcontent-c11]
+  .datatable-pager[_ngcontent-c11]
+  .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11]
+  .datatable-footer[_ngcontent-c11]
+  .datatable-pager[_ngcontent-c11]
+  .datatable-icon-prev[_ngcontent-c11] {
+  font-size: 0px;
+  line-height: 22px;
+  padding: 0px 09px;
+  background-color: #ffffff;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-skip,
+.ngx-datatable.bootstrap[_ngcontent-c11]
+  .datatable-footer[_ngcontent-c11]
+  .datatable-pager[_ngcontent-c11]
+  .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11]
+  .datatable-footer[_ngcontent-c11]
+  .datatable-pager[_ngcontent-c11]
+  .datatable-icon-prev[_ngcontent-c11] {
+  font-size: 0px;
+  line-height: 22px;
+  padding: 0px 09px;
+  background-color: #ffffff;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  .datatable-icon-prev,
+.ngx-datatable.bootstrap[_ngcontent-c11]
+  .datatable-footer[_ngcontent-c11]
+  .datatable-pager[_ngcontent-c11]
+  .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11]
+  .datatable-footer[_ngcontent-c11]
+  .datatable-pager[_ngcontent-c11]
+  .datatable-icon-prev[_ngcontent-c11] {
+  font-size: 0px;
+  line-height: 22px;
+  padding: 0px 09px;
+  background-color: #ffffff;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  ul
+  li:not(.disabled):hover
+  a {
+  background-color: #545454;
+  font-weight: bold;
+  color: white;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  ul
+  li:not(.disabled).active
+  a,
+.ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  ul
+  li:not(.disabled):hover
+  a {
+  background-color: #252525;
+  font-weight: bold;
+  color: white;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
+  background: #252525;
+  color: #ededed;
+  margin-top: -1px;
+  overflow: inherit;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+  font-weight: bold;
+  height: unset !important;
+  overflow: inherit;
+}
+
+:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
+  flex: 0 0 0%;
+}
+
+:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
+  display: flex;
+}
+
+:host
+  ::ng-deep
+  .ngx-datatable
+  .datatable-footer
+  .selected-count
+  .datatable-pager {
+  flex: 0 0 0%;
+}
+
+:host ::ng-deep .ngx-datatable {
+  display: -webkit-box;
+}
+
+:host ::ng-deep .ng-select .ng-select-container {
+  color: #ffffff !important;
+  background-color: #252525 !important;
+  height: 40px !important;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
+  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
+  background-color: #1a1a1a; /* Darker black for hover effect */
+}
+
 ::ng-deep .modal-backdrop.show {
   z-index: auto !important;
 }
diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html
index f7d5727..dfdbbc0 100644
--- a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html
+++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html
@@ -1,7 +1,121 @@
-<div class="modal-body" style="background-color: #252525 !important">
-  <h4 style="color: #ffffff">Input the actual cost of your expenses</h4>
-  <p style="color: #ffffff">Building : {{ dataRow.building }}</p>
-    <!-- <p style="color: #ffffff">Periode : {{ formattedDate }}</p> -->
+<div class="modal-body" style="background-color: #5b5b5b !important">
+  <h4 style="color: #ffffff; margin-bottom: 20px !important">
+    Comparison of Water and Electricity Costs > {{ dataRow.building }}
+  </h4>
+
+  <div class="card-dashboard">
+    <ngx-datatable
+      class="bootstrap table-bordered"
+      [limit]="10"
+      [rows]="data_cost"
+      [columnMode]="'force'"
+      [headerHeight]="50"
+      [footerHeight]="50"
+      [rowHeight]="50"
+      fxFlex="auto"
+      [scrollbarH]="true"
+    >
+      <ngx-datatable-column name="#" [flexGrow]="0.5" [minWidth]="30">
+        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex">
+          <p style="color: #ffffff !important">
+            {{ rowIndex + 1 }}
+          </p>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column name="deviceName" [flexGrow]="1" [minWidth]="90">
+        <ng-template ngx-datatable-header-template>
+          <span style="color: #ffffff !important">Device</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #ffffff !important">{{ value }}</p>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90">
+        <ng-template ngx-datatable-header-template>
+          <span style="color: #ffffff !important">Room</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #ffffff !important">{{ value }}</p>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column name="categoryName" [flexGrow]="1" [minWidth]="90">
+        <ng-template ngx-datatable-header-template>
+          <span style="color: #ffffff !important">Category</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #ffffff !important">{{ value }}</p>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column
+        name="estimationCost"
+        [flexGrow]="1"
+        [minWidth]="90"
+      >
+        <ng-template ngx-datatable-header-template>
+          <span style="color: #ffffff !important">Estimation Cost</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #ffffff !important">
+            {{
+              value.toLocaleString("id-ID", {
+                style: "currency",
+                currency: "IDR"
+              })
+            }}
+          </p>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column name="totalKwh" [flexGrow]="1" [minWidth]="90">
+        <ng-template ngx-datatable-header-template>
+          <span style="color: #ffffff !important">Total Kwh</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #ffffff !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: #ffffff !important">Watt</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #ffffff !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: #ffffff !important">Duration</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #ffffff !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: #ffffff !important">Price Kwh</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #ffffff !important">
+            {{
+              value.toLocaleString("id-ID", {
+                style: "currency",
+                currency: "IDR"
+              })
+            }}
+          </p>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90">
+        <ng-template ngx-datatable-header-template>
+          <span style="color: #ffffff !important">Tanggal</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #ffffff !important">
+            {{ value | date : "MM/yyyy" }}
+          </p>
+        </ng-template>
+      </ngx-datatable-column>
+    </ngx-datatable>
+  </div>
 </div>
 <div
   class="modal-footer justify-content-between"
@@ -31,7 +145,10 @@
       border-color: #c3f164 !important;
       border-radius: 10px;
     "
+    [disabled]="spinnerExportActive"
+    (click)="export()"
   >
-    Add
+    <i class="la la-spinner spinner" *ngIf="spinnerExportActive"></i>
+    Export
   </button>
 </div>
diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts
index 43d0339..26c973c 100644
--- a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts
+++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts
@@ -1,6 +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";
 
 @Component({
   selector: "app-modal-export",
@@ -13,30 +15,65 @@ export class ModalExportComponent {
   data: any;
   filteredRows: any[];
   data_device: any[];
+  kwhTerm: string = "";
+  costTerm: string = "";
+  data_cost: any;
+  formattedEndDate: any;
+  spinnerExportActive = false;
   constructor(
     public activeModal: NgbActiveModal,
-    private deviceService: DeviceService
+    private costService: CostManagementService,
+    private tableexcelService: TableexcelService
   ) {}
 
   ngOnInit() {
-    this.fetchData(this.buildingId);
+    this.formattedEndDate = this.dataRow.endDate.slice(0, 7);
+    this.fetchData(
+      this.dataRow.categoryId,
+      this.dataRow.roomId,
+      this.formattedEndDate
+    );
   }
 
-  fetchData(buildingSelected) {
-    this.deviceService.getDeviceDataById(buildingSelected).subscribe((res) => {
-      this.data = res;
-      this.filteredRows = this.data.results.data;
-      this.data_device = this.filteredRows.map((item) => ({
-        buildingName: item.building_name,
-        id: item.id,
-        name: item.name,
-        icon: item.icon,
-        watt: item.watt,
-        categoryName: item.category_name,
-        typeName: item.type_name,
-        voltageName: item.voltage_name,
-        statusName: item.status_name,
-      }));
-    });
+  fetchData(category, room, period) {
+    this.costService
+      .getCostDetail(category, room, period)
+      .subscribe((response) => {
+        this.data_cost = response.data.map((item) => ({
+          deviceName: item.device_name,
+          roomName: item.room_name,
+          categoryName: item.category_name,
+          estimationCost: item.estimation_cost,
+          totalKwh: item.total_kwh,
+          watt: item.watt,
+          duration: item.duration,
+          priceKwh: item.price_kwh,
+          periode: item.periode,
+        }));
+      });
+  }
+
+  export() {
+    this.spinnerExportActive = true;
+    setTimeout(() => {
+      const columnsToExport = [
+        "deviceName",
+        "roomName",
+        "categoryName",
+        "estimationCost",
+        "totalKwh",
+        "watt",
+        "duration",
+        "priceKwh",
+        "periode",
+      ];
+      this.tableexcelService.exportAsExcelFileManageDetail(
+        this.data_cost,
+        "export_detail_cost_management",
+        columnsToExport
+      );
+      this.spinnerExportActive = false;
+      this.activeModal.close('Export completed');
+    }, 3000);
   }
 }
diff --git a/src/app/content/hemat-app/service/cost-management.service.ts b/src/app/content/hemat-app/service/cost-management.service.ts
index 2ef9a63..0e6ebf6 100644
--- a/src/app/content/hemat-app/service/cost-management.service.ts
+++ b/src/app/content/hemat-app/service/cost-management.service.ts
@@ -98,4 +98,14 @@ export class CostManagementService {
     });
     return this.http.get<any>(url, { headers });
   }
+
+  getCostDetail(category: any, room: any, period: any): Observable<any> {
+    const endpoint = `/cost-detail/get/Details`;
+    const url = `${BASE_URL}${endpoint}?category_id=${category}&room_id=${room}&periode=${period}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.get<any>(url, { headers });
+  }
 }
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index c4a5aac..ccb6ed1 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.06.28.01)</span>
+                  <span>(v@2024.06.28.02)</span>
                 </p>
                 <!-- <div class="card-body">
                   <a