diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.html b/src/app/content/hemat-app/cost-management/cost-management.component.html
index 0ed3a67..fe19f82 100644
--- a/src/app/content/hemat-app/cost-management/cost-management.component.html
+++ b/src/app/content/hemat-app/cost-management/cost-management.component.html
@@ -168,8 +168,10 @@
                         type="button"
                         class="btn btn-outline-success ml-2"
                         (click)="doFilter()"
+                        [disabled]="spinnerFilterActive"
                       >
-                        <i class="la la-search"></i>
+                        <i class="la la-search" *ngIf="!spinnerFilterActive"></i>
+                        <i class="la la-spinner spinner" *ngIf="spinnerFilterActive"></i>
                       </button>
                     </div>
                   </div>
@@ -358,15 +360,9 @@
                       >
                         <button
                           class="btn btn-sm btn-warning mr-1"
-                          (click)="editRow(row)"
+                          (click)="viewRow(row)"
                         >
-                          <i class="ficon feather ft-edit"></i>
-                        </button>
-                        <button
-                          class="btn btn-sm btn-danger"
-                          (click)="deleteRow(row)"
-                        >
-                          <i class="ficon feather ft-trash-2"></i>
+                          <i class="ficon feather ft-eye"></i>
                         </button>
                       </ng-template>
                     </ngx-datatable-column>
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 fc4d24c..48b0c35 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
@@ -26,6 +26,7 @@ export class CostManagementComponent implements OnInit {
   public focucedElement = "";
   spinnerActive = false;
   spinnerActiveActual = false;
+  spinnerFilterActive = false;
 
   donutChart2: any;
 
@@ -67,32 +68,37 @@ export class CostManagementComponent implements OnInit {
     const currentDate = new Date();
     this.dateSelected = currentDate.toISOString().slice(0, 7);
 
-    this.fetchData(this.storedData.buildingId, this.dateSelected, this.categorySelected);
+    this.fetchData(
+      this.storedData.buildingId,
+      this.dateSelected,
+      this.categorySelected
+    );
     this.dataListMaster();
     this.dataListBuilding();
 
     this.dataCompWaterElectCost(this.storedData.buildingId);
     this.dataCompPrevMonthCost(this.storedData.buildingId);
     this.dataCompActEstCost(this.storedData.buildingId);
-    
   }
 
   fetchData(id, period, category) {
-    this.costService.getCostManagement(id, period, category).subscribe((response) => {
-      this.data = response.results.data;
-      this.filteredRows = this.data;
-      this.kwhTerm = response.results.kwh;
-      this.costTerm = response.results.cost;
+    this.costService
+      .getCostManagement(id, period, category)
+      .subscribe((response) => {
+        this.data = response.results.data;
+        this.filteredRows = this.data;
+        this.kwhTerm = response.results.kwh;
+        this.costTerm = response.results.cost;
 
-      this.data_cost = this.filteredRows.map((item) => ({
-        building: item.name,
-        categoryName: item.category_name,
-        estimationCost: item.estimation_cost,
-        totalUse: item.total_use,
-        endDate: item.end_date,
-        statusId: item.status_id,
-      }));
-    });
+        this.data_cost = this.filteredRows.map((item) => ({
+          building: item.name,
+          categoryName: item.category_name,
+          estimationCost: item.estimation_cost,
+          totalUse: item.total_use,
+          endDate: item.end_date,
+          statusId: item.status_id,
+        }));
+      });
   }
 
   dataListMaster() {
@@ -222,7 +228,11 @@ export class CostManagementComponent implements OnInit {
     });
     setTimeout(() => {
       this.spinnerActive = false;
-      this.fetchData(this.buildingSelected, this.dateSelected, this.categorySelected );
+      this.fetchData(
+        this.buildingSelected,
+        this.dateSelected,
+        this.categorySelected
+      );
     }, 3000);
   }
 
@@ -236,7 +246,11 @@ export class CostManagementComponent implements OnInit {
       });
     setTimeout(() => {
       this.spinnerActiveActual = false;
-      this.fetchData(this.buildingSelected, this.dateSelected, this.categorySelected );
+      this.fetchData(
+        this.buildingSelected,
+        this.dateSelected,
+        this.categorySelected
+      );
     }, 3000);
   }
 
@@ -247,10 +261,18 @@ export class CostManagementComponent implements OnInit {
       date: this.dateSelected,
       searchTerm: this.searchTerm,
     };
-    this.fetchData(this.buildingSelected, this.dateSelected, this.categorySelected );
-    this.dataCompWaterElectCost(this.buildingSelected);
-    this.dataCompPrevMonthCost(this.buildingSelected);
-    this.dataCompActEstCost(this.buildingSelected);
+    this.spinnerFilterActive = true;
+    setTimeout(() => {
+      this.spinnerFilterActive = false;
+      this.fetchData(
+        this.buildingSelected,
+        this.dateSelected,
+        this.categorySelected
+      );
+      this.dataCompWaterElectCost(this.buildingSelected);
+      this.dataCompPrevMonthCost(this.buildingSelected);
+      this.dataCompActEstCost(this.buildingSelected);
+    }, 3000);
   }
 
   addFieldValue() {
@@ -301,19 +323,4 @@ export class CostManagementComponent implements OnInit {
     console.log("View row:", row);
     this.router.navigate(["/cost-management/view", row.name]);
   }
-
-  editRow(row) {
-    console.log("Edit row:", row);
-    this.router.navigate(["/cost-management/edit", row.name]);
-  }
-
-  deleteRow(row) {
-    console.log("Delete row:", row);
-  }
-
-  onTouchStart(event: Event) {
-    event.preventDefault(); // Add this if necessary
-  }
-
-  
 }
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 6132a24..d309496 100644
--- a/src/app/content/hemat-app/service/cost-management.service.ts
+++ b/src/app/content/hemat-app/service/cost-management.service.ts
@@ -2,6 +2,8 @@ import { Injectable } from "@angular/core";
 import { HttpClient, HttpHeaders } from "@angular/common/http";
 import { Observable } from "rxjs";
 
+const BASE_URL = 'https://kapi.absys.ninja/hemat';
+
 @Injectable({
   providedIn: "root",
 })
@@ -9,7 +11,7 @@ export class CostManagementService {
   constructor(private http: HttpClient) {}
 
   getCostManagement(id, period, category): Observable<any> {
-    const baseUrl = `https://kapi.absys.ninja/hemat/cost_management`;
+    const endpoint = `/cost_management`;
     const params = new URLSearchParams({
       page: "1",
       limit: "100",
@@ -19,31 +21,37 @@ export class CostManagementService {
     if (category) {
       params.append("category_id", category);
     }
-    const url = `${baseUrl}?${params.toString()}`;
+    const url = `${BASE_URL}${endpoint}?${params.toString()}`;
     const headers = new HttpHeaders({
       "Content-Type": "application/json",
       "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
+
   getCompWaterElectCost(id): Observable<any> {
-    const url = `https://kapi.absys.ninja/hemat/cost_management/card/comp-water-elect-cost?building_id=${id}`;
+    const endpoint = `/cost_management/card/comp-water-elect-cost`;
+    const url = `${BASE_URL}${endpoint}?building_id=${id}`;
     const headers = new HttpHeaders({
       "Content-Type": "application/json",
       "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
+
   getCompPrevMonthCost(id): Observable<any> {
-    const url = `https://kapi.absys.ninja/hemat/cost_management/card/comp-prev-month-cost?building_id=${id}`;
+    const endpoint = `/cost_management/card/comp-prev-month-cost`;
+    const url = `${BASE_URL}${endpoint}?building_id=${id}`;
     const headers = new HttpHeaders({
       "Content-Type": "application/json",
       "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
     });
     return this.http.get<any>(url, { headers });
   }
+
   getCompActEstCost(id): Observable<any> {
-    const url = `https://kapi.absys.ninja/hemat/cost_management/card/comp-act-est-cost?building_id=${id}`;
+    const endpoint = `/cost_management/card/comp-act-est-cost`;
+    const url = `${BASE_URL}${endpoint}?building_id=${id}`;
     const headers = new HttpHeaders({
       "Content-Type": "application/json",
       "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
@@ -52,7 +60,8 @@ export class CostManagementService {
   }
 
   getSyncCost(data: any): Observable<any> {
-    const url = `https://kapi.absys.ninja/hemat/cost_management/cost/sync`;
+    const endpoint = `/cost_management/cost/sync`;
+    const url = `${BASE_URL}${endpoint}`;
     const headers = new HttpHeaders({
       "Content-Type": "application/json",
       "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
@@ -61,7 +70,8 @@ export class CostManagementService {
   }
 
   getRealCostByBuildingId(id: any, period: any): Observable<any> {
-    const url = `https://kapi.absys.ninja/hemat/real-cost/get/byBuildingId?building_id=${id}&periode=${period}`;
+    const endpoint = `/real-cost/get/byBuildingId`;
+    const url = `${BASE_URL}${endpoint}?building_id=${id}&periode=${period}`;
     const headers = new HttpHeaders({
       "Content-Type": "application/json",
       "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",