diff --git a/src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.ts b/src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.ts
index 898f61b..f2f0b3a 100644
--- a/src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.ts
+++ b/src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.ts
@@ -16,6 +16,7 @@ export class ModalAddActualComponent {
   dateCurrent: any;
   dataCost: any;
   formattedDate: any;
+  formattedDate2: any;
   buildingName: any;
 
   constructor(
@@ -29,16 +30,14 @@ export class ModalAddActualComponent {
   ngOnInit() {
     const currentDate = new Date();
     this.dateCurrent = currentDate.toISOString().slice(0, 7);
-    this.datalistcost();
     this.dateFormat();
     this.getBuildingById();
+    this.datalistcost();
   }
 
   dateFormat() {
     let year = this.periode.slice(0, 4);
-    let month = this.periode.slice(5);
-
-    // Ubah format bulan ke bahasa Indonesia (opsional)
+    let month = this.periode.slice(5, 7);
     let monthNames = [
       "Januari",
       "Februari",
@@ -53,10 +52,11 @@ export class ModalAddActualComponent {
       "November",
       "Desember",
     ];
-    let monthName = monthNames[parseInt(month) - 1]; // Menggunakan parseInt karena month dalam format string
-
-    // Gabungkan kembali untuk mendapatkan format "Juni 2024"
+    let monthName = monthNames[parseInt(month) - 1];
     this.formattedDate = `${monthName} ${year}`;
+    this.formattedDate2 = `${year}-${month}`;
+    
+    
   }
 
   createForm() {
@@ -73,7 +73,7 @@ export class ModalAddActualComponent {
 
   datalistcost() {
     this.costService
-      .getRealCostByBuildingId(this.buildingId, this.dateCurrent)
+      .getRealCostByBuildingId(this.buildingId, this.formattedDate2)
       .subscribe((data) => {
         this.dataCost = data.data[0];
         this.myForm.patchValue({
diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts
index 2fc8c35..ada1d7e 100644
--- a/src/app/content/hemat-app/monitoring/monitoring.module.ts
+++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts
@@ -27,6 +27,8 @@ import { SurveillanceComponent } from './surveillance/surveillance.component';
 import { WaterComponent } from './water/water.component';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { ControlDeviceSeemoreComponent } from './control-device-seemore/control-device-seemore.component';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpErrorInterceptorService } from 'src/app/interceptors/http-error-interceptor.service';
 
 @NgModule({
   declarations: [
@@ -101,6 +103,9 @@ import { ControlDeviceSeemoreComponent } from './control-device-seemore/control-
         data: { mode: 'room' }
       },
     ])
+  ],
+  providers: [
+    { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptorService, multi: true }
   ]
 })
 export class MonitoringModule { }
diff --git a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html
index e220000..6902d7b 100644
--- a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html
+++ b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html
@@ -214,15 +214,14 @@
               style="height: 500px !important"
             ></iframe> -->
 
-
-            <video id="streamplayer" class="video-js vjs-big-play-centered" style="width: 100% !important; height: 500px !important">
-              <source src="#" type="application/x-mpegurl">
+            <video id="streamplayer" class="video-js vjs-big-play-centered" style="width: 100% !important; height: 500px !important" autoplay>
+              <source src="" type="application/x-mpegurl">
             </video>
           </div>
         </div>
 
         <div class="row">
-          <div class="col-lg-3 col-md-6 col-12" *ngFor="let item of cameras">
+          <div class="col-lg-3 col-md-6 col-12" *ngFor="let item of filteredRows">
             <div class="card" style="background-color: #252525 !important">
               <div class="card-content">
                 <label style="color: #ffffff">{{ item.name }}</label>
@@ -230,7 +229,7 @@
                   class="card-img-top img-fluid"
                   src="../../../../../assets/images/cctv.jpg"
                   alt="Image 1"
-                  (click)="loadStream(item.videoUrl)"
+                  (click)="loadStream(item.device_id)"
                 />
               </div>
             </div>
diff --git a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts
index 0b67614..d8649d9 100644
--- a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts
+++ b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.ts
@@ -26,19 +26,21 @@ export class SurveillanceComponent {
   public breadcrumb: any;
   showIframe = false;
   clicktrue = false;
-  
+
+  bufferingTimeout: any;
+
   cameras = [
     {
       id: 1,
       name: "Pengadilan Agama Padang Cam 1",
       videoUrl:
-        "https://wework-7-us.stream.iot-11.com:8080/hls/eb48441e886701e55bbk52/cprg5g0d9fpsg3dvh27gSD1XjuVVd8h8oWqjoFJ6.m3u8?signInfo=C6fuX1l4syLFPeCPQ476iYDjNU_WZC24E6oGVwBvK3k6iIhqjvzzQIAAO5rUJjWLfeqY6YpDPsRB9JGEQTL_ZpxUOJB_L0VfgPX45SAecU_6_6ybAVcK-m0xxUrcGr3_EvzF_d1czqOHplNUMYodotvkWWQ9yP0NOEYJhtMemSw",
+        "https://wework-1-us.stream.iot-11.com:8080/hls/eb48441e886701e55bbk52/cpsgbti59barred964v0pXFm2hujw6pfrksNebnJ.m3u8?signInfo=1nOzF8oTGaesUDaWKWwVvm48YUWzA1giepIfLDeyEYHizShw3V4xT0zp9YI7NBbpOiPBfg1zDalVkjzpVQL_6l9z6Q3TptY5lOW3FkZFb7U3lbqHzHiLCh89GKPH6DvUzYXymA4X2hsKU89jJ9y9UwVZwUxs0jHq19rk3CrZ0cE",
     },
     {
       id: 2,
       name: "Pengadilan Agama Padang Cam 2",
       videoUrl:
-        "https://pdg2.cctvbadilag.my.id:5443/401900PTAPADANG/play.html?name=671014455048381705129283",
+        "https://wework-4-us.stream.iot-11.com:8080/hls/eb48441e886701e55bbk52/cpsgq28n0asmj2buiihgh0ssY0CuqMVC9LCVeEQH.m3u8?signInfo=0j00FMq5E3kn3oIImQU1laHoYvbLKZuQ8f_IPgKZjRPysw_xbZGfXpbqqP05DnRlsyG40oPuYr2dSylrSppO4vkr0YtJqeTTy0FELIv4nrLAv2vcMyD6So4NJev-nmHpS3GPOIuTiy879xuADEtnYMIt5BqU68L3s9yKaJx5AAE",
     },
     {
       id: 3,
@@ -53,7 +55,7 @@ export class SurveillanceComponent {
         "https://bdg2.cctvbadilag.my.id:5443/400854PAPURWAKARTA/play.html?name=113658520181242556385273",
     },
   ];
-
+  private intervalId: any;
   player: any;
   constructor(
     private router: Router,
@@ -88,35 +90,112 @@ export class SurveillanceComponent {
   }
 
   ngAfterViewInit() {
-    const options = {
-      controls: true,
-      preload: "none",
-      techOrder: ["html5"],
-      html5: {
-        hls: {
-          overrideNative: !videojs.browser.IS_SAFARI,
-        },
-      },
-    };
+    const deviceid = localStorage.getItem("deviceId");
+    const parsedData = JSON.parse(deviceid);
+    console.log(parsedData, "parsedData");
 
-    this.player = videojs("streamplayer", options);
+    this.deviceService
+      .getStreamUrl(parsedData.device_id)
+      .subscribe((data) => {
+        console.log("hit ini");
+
+        const options = {
+          controls: true,
+          autoplay: true,
+          preload: "none",
+          techOrder: ["html5"],
+          html5: {
+            hls: {
+              overrideNative: !videojs.browser.IS_SAFARI,
+            },
+          },
+        };
+        this.player = videojs("streamplayer", options);
+        this.player.src({
+          type: "application/x-mpegURL",
+          src: data.result.data.result.url,
+        });
+
+        // Event listener for errors
+        this.player.on("error", () => {
+          const error = this.player.error();
+          console.error("Video error:", error);
+          // Handle the error
+        });
+
+        // Event listener for stalled
+        this.player.on("stalled", () => {
+          console.warn("Video playback stalled");
+          // Handle the stall
+        });
+
+        this.player.on("waiting", () => {
+          console.warn("Video playback buffer");
+          this.clearBufferingTimeout();
+          this.bufferingTimeout = setTimeout(() => {
+            const savedData = localStorage.getItem("deviceId");
+            const parsedData = JSON.parse(savedData);
+            console.log('masuk timeout buffer');
+            this.loadStream(parsedData.device_id);
+          }, 60000);
+        });
+        this.player.on("playing", () => {
+          this.clearBufferingTimeout();
+        });
+      });
   }
 
-  loadStream(streamUrl) {
-    this.player.src({
-      type: "application/x-mpegURL",
-      src: streamUrl,
+  loadStream(device_id) {
+    localStorage.setItem("deviceId", JSON.stringify({ device_id: device_id }));
+    this.deviceService.getStreamUrl(device_id).subscribe((data) => {
+      this.player.src({
+        type: "application/x-mpegURL",
+        src: data.result.data.result.url,
+      });
+      this.player.controls(true);
+      this.player.play();
     });
-    this.player.controls(true);
-    this.player.play();
+  }
+
+  clearBufferingTimeout() {
+    if (this.bufferingTimeout) {
+      clearTimeout(this.bufferingTimeout);
+      this.bufferingTimeout = null;
+    }
   }
 
   fetchData(buildingSelected, categorySelected, statusSelected) {
     this.deviceService
       .getDeviceData(buildingSelected, categorySelected, statusSelected)
       .subscribe((res) => {
-        this.filteredRows = res.results.data;
-        console.log(this.filteredRows);
+        this.filteredRows = res.results.data.filter(
+          (item) => item.category_id === 30
+        );
+        localStorage.setItem(
+          "deviceId",
+          JSON.stringify({ device_id: this.filteredRows[0].device_id })
+        );
+        this.deviceService
+          .getStreamUrl(this.filteredRows[0].device_id)
+          .subscribe((data) => {
+            const options = {
+              controls: true,
+              autoplay: true,
+              preload: "none",
+              techOrder: ["html5"],
+              html5: {
+                hls: {
+                  overrideNative: !videojs.browser.IS_SAFARI,
+                },
+              },
+            };
+            this.player = videojs("streamplayer", options);
+            this.player.src({
+              type: "application/x-mpegURL",
+              src: data.result.data.result.url,
+            });
+          });
+        console.log(this.filteredRows, "filteredrow");
       });
   }
 
@@ -141,6 +220,12 @@ export class SurveillanceComponent {
     });
   }
 
+  dataListDevice() {
+    this.monitoringApiService.getBuildingList().subscribe((data) => {
+      this.dataBuildingList = data.data.filter((item) => item.statusId === 2);
+    });
+  }
+
   doFilter() {
     this.spinnerFilterActive = true;
     this.fetchData(
@@ -153,6 +238,14 @@ export class SurveillanceComponent {
     }, 3000);
   }
 
+  ngOnDestroy() {
+    localStorage.removeItem("deviceId");
+    this.clearBufferingTimeout();
+    if (this.player) {
+      this.player.dispose();
+    }
+  }
+
   // onClick(videoUrl: string) {
   //   const iframe = this.videoIframe.nativeElement;
   //   iframe.src = videoUrl;
diff --git a/src/app/content/hemat-app/service/device.service.ts b/src/app/content/hemat-app/service/device.service.ts
index 98ff73a..7f9a74b 100644
--- a/src/app/content/hemat-app/service/device.service.ts
+++ b/src/app/content/hemat-app/service/device.service.ts
@@ -60,4 +60,14 @@ export class DeviceService {
     });
     return this.http.post<any>(url, data, { headers });
   }
+
+  getStreamUrl(id): Observable<any> {
+    const endpoint = `/devices`;
+    const url = `${BASE_URL}${endpoint}/live-stream?device_id=${id}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.get<any>(url, { headers });
+  }
 }