From e6a2708daf0ea5a755fb93f92771bab265bb17e9 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sun, 22 Jun 2025 11:44:23 +0700
Subject: [PATCH] feat(component): create data provider status component

---
 .../data-provider-status.component.html       |  7 ++++
 .../data-provider-status.component.ts         | 35 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 apps/client/src/app/components/data-provider-status/data-provider-status.component.html
 create mode 100644 apps/client/src/app/components/data-provider-status/data-provider-status.component.ts

diff --git a/apps/client/src/app/components/data-provider-status/data-provider-status.component.html b/apps/client/src/app/components/data-provider-status/data-provider-status.component.html
new file mode 100644
index 000000000..e5eae16cf
--- /dev/null
+++ b/apps/client/src/app/components/data-provider-status/data-provider-status.component.html
@@ -0,0 +1,7 @@
+@if (status$ | async; as status) {
+  @if (status.isHealthy) {
+    <span class="text-success" i18n>Online</span>
+  } @else {
+    <span class="text-danger" i18n>Offline</span>
+  }
+}
diff --git a/apps/client/src/app/components/data-provider-status/data-provider-status.component.ts b/apps/client/src/app/components/data-provider-status/data-provider-status.component.ts
new file mode 100644
index 000000000..c9a945cce
--- /dev/null
+++ b/apps/client/src/app/components/data-provider-status/data-provider-status.component.ts
@@ -0,0 +1,35 @@
+import { DataService } from '@ghostfolio/client/services/data.service';
+
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit
+} from '@angular/core';
+import type { DataSource } from '@prisma/client';
+import { catchError, map, type Observable, of } from 'rxjs';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule],
+  selector: 'gf-data-provider-status',
+  standalone: true,
+  templateUrl: './data-provider-status.component.html'
+})
+export class GfDataProviderStatusComponent implements OnInit {
+  @Input() dataSource: DataSource;
+
+  public status$: Observable<{ isHealthy: boolean }>;
+
+  public constructor(private dataService: DataService) {}
+
+  public ngOnInit() {
+    this.status$ = this.dataService
+      .fetchDataProviderHealth(this.dataSource)
+      .pipe(
+        map(() => ({ isHealthy: true })),
+        catchError(() => of({ isHealthy: false }))
+      );
+  }
+}