diff --git a/src/app/_layout/footer/footer.component.html b/src/app/_layout/footer/footer.component.html
index 99b9904..18a5731 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-1.01)
+        >Smart Building Management Systems (V@2024-07-1.01)
       </a></span
     >
   </p>
diff --git a/src/app/_services/tableexcel.service.ts b/src/app/_services/tableexcel.service.ts
index ce75892..9c9a96e 100644
--- a/src/app/_services/tableexcel.service.ts
+++ b/src/app/_services/tableexcel.service.ts
@@ -172,6 +172,7 @@ export class TableexcelService {
 
     const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(filteredJson);
     const columnWidths = [
+      { wch: 30 },
       { wch: 40 },
       { wch: 30 },
       { wch: 30 },
@@ -180,11 +181,11 @@ export class TableexcelService {
       { wch: 20 },
       { wch: 20 },
       { wch: 20 },
-      { wch: 30 },
     ];
     worksheet["!cols"] = columnWidths;
 
     const header = [
+      "Periode",
       "Device",
       "Room",
       "Category",
@@ -193,7 +194,6 @@ export class TableexcelService {
       "Watt",
       "Duration",
       "Price Kwh",
-      "Periode",
     ];
     XLSX.utils.sheet_add_aoa(worksheet, [header]);
 
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 47f4096..d14ac38 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
@@ -24,6 +24,16 @@
           </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 : "dd/MM/yyyy" }}
+          </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>
@@ -106,16 +116,6 @@
           </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 : "dd/MM/yyyy" }}
-          </p>
-        </ng-template>
-      </ngx-datatable-column>
     </ngx-datatable>
   </div>
 </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 fade767..b0463ba 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
@@ -28,7 +28,8 @@ export class ModalExportComponent {
   ) {}
 
   ngOnInit() {
-    this.formattedEndDate = this.dataRow.endDate.slice(0, 7);
+    const dateRow = this.convertToUTC7(this.dataRow.endDate)
+    this.formattedEndDate = dateRow.slice(0, 7);
   }
 
   ngAfterViewInit(): void {
@@ -45,6 +46,7 @@ export class ModalExportComponent {
       .getCostDetail(category, room, period)
       .subscribe((response) => {
         this.dataExport = response.data;
+        console.log(this.dataExport);
         this.data_cost = response.data.map((item) => ({
           deviceName: item.device_name,
           roomName: item.room_name,
@@ -54,27 +56,39 @@ export class ModalExportComponent {
           watt: item.watt,
           duration: item.duration,
           priceKwh: item.price_kwh,
-          periode: item.periode,
+          // periode: item.periode,
+          periode: this.convertToUTC7(item.periode)
         }));
+        console.log(this.data_cost);
+        
       });
   }
 
+  convertToUTC7(dateString: string): string {
+    const date = new Date(dateString);
+    const utc7Offset = 7 * 60; // UTC+7 in minutes
+    const localOffset = date.getTimezoneOffset();
+    const totalOffset = utc7Offset - localOffset;
+    const utc7Date = new Date(date.getTime() + totalOffset * 60 * 1000);
+    return utc7Date.toISOString();
+  }
+
   export() {
     this.spinnerExportActive = true;
     setTimeout(() => {
       const columnsToExport = [
-        "device_name",
-        "room_name",
-        "category_name",
-        "estimation_cost",
-        "total_kwh",
+        "periode",
+        "deviceName",
+        "roomName",
+        "categoryName",
+        "estimationCost",
+        "totalKwh",
         "watt",
         "duration",
-        "price_kwh",
-        "periode",
+        "priceKwh",
       ];
       this.tableexcelService.exportAsExcelFileManageDetail(
-        this.dataExport,
+        this.data_cost,
         "export_detail_cost_management",
         columnsToExport
       );
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 89ee29f..7cbe230 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.1.01)</span>
+                  <span>(v@2024.07.1.01)</span>
                 </p>
                 <!-- <div class="card-body">
                   <a