[PM-15498] - add risk insight data service (#12361)

* Adding more test cases

* Removing unnecessary file

* Test cases update

* Adding the fixme for strict types

* moving the fixme

* add risk insight data service and wire up components to it

* hook up all applications to risk insights report service. add loading state

* link up remaining props to risk insight report

* wire up children to risk insight data service

* add missing copy. remove loading state from risk insights

* fix types

* fix DI issue

* remove @Injectable from RiskInsightsDataService

---------

Co-authored-by: Tom <ttalty@bitwarden.com>
Co-authored-by: Tom <144813356+ttalty@users.noreply.github.com>

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts

@@ -57,7 +57,6 @@ export class OrganizationLayoutComponent implements OnInit {
   showPaymentAndHistory$: Observable<boolean>;
   hideNewOrgButton$: Observable<boolean>;
   organizationIsUnmanaged$: Observable<boolean>;
-  isAccessIntelligenceFeatureEnabled = false;
   enterpriseOrganization$: Observable<boolean>;
 
   constructor(

apps/web/src/locales/en/messages.json

@@ -3882,6 +3882,9 @@
   "updateBrowser": {
     "message": "Update browser"
   },
+  "generatingRiskInsights": {
+    "message": "Generating your risk insights..."
+  },
   "updateBrowserDesc": {
     "message": "You are using an unsupported web browser. The web vault may not function properly."
   },

bitwarden_license/bit-common/src/tools/reports/risk-insights/models/password-health.ts

@@ -25,7 +25,7 @@ export type ApplicationHealthReportDetail = {
   passwordCount: number;
   atRiskPasswordCount: number;
   memberCount: number;
-
+  atRiskMemberCount: number;
   memberDetails: MemberDetailsFlat[];
   atRiskMemberDetails: MemberDetailsFlat[];
 };

bitwarden_license/bit-common/src/tools/reports/risk-insights/services/index.ts

@@ -1,3 +1,4 @@
 export * from "./member-cipher-details-api.service";
 export * from "./password-health.service";
 export * from "./risk-insights-report.service";
+export * from "./risk-insights-data.service";

bitwarden_license/bit-common/src/tools/reports/risk-insights/services/risk-insights-data.service.ts

@@ -0,0 +1,60 @@
+import { BehaviorSubject } from "rxjs";
+import { finalize } from "rxjs/operators";
+
+import { ApplicationHealthReportDetail } from "../models/password-health";
+
+import { RiskInsightsReportService } from "./risk-insights-report.service";
+
+export class RiskInsightsDataService {
+  private applicationsSubject = new BehaviorSubject<ApplicationHealthReportDetail[] | null>(null);
+
+  applications$ = this.applicationsSubject.asObservable();
+
+  private isLoadingSubject = new BehaviorSubject<boolean>(false);
+  isLoading$ = this.isLoadingSubject.asObservable();
+
+  private isRefreshingSubject = new BehaviorSubject<boolean>(false);
+  isRefreshing$ = this.isRefreshingSubject.asObservable();
+
+  private errorSubject = new BehaviorSubject<string | null>(null);
+  error$ = this.errorSubject.asObservable();
+
+  private dataLastUpdatedSubject = new BehaviorSubject<Date | null>(null);
+  dataLastUpdated$ = this.dataLastUpdatedSubject.asObservable();
+
+  constructor(private reportService: RiskInsightsReportService) {}
+
+  /**
+   * Fetches the applications report and updates the applicationsSubject.
+   * @param organizationId The ID of the organization.
+   */
+  fetchApplicationsReport(organizationId: string, isRefresh?: boolean): void {
+    if (isRefresh) {
+      this.isRefreshingSubject.next(true);
+    } else {
+      this.isLoadingSubject.next(true);
+    }
+    this.reportService
+      .generateApplicationsReport$(organizationId)
+      .pipe(
+        finalize(() => {
+          this.isLoadingSubject.next(false);
+          this.isRefreshingSubject.next(false);
+          this.dataLastUpdatedSubject.next(new Date());
+        }),
+      )
+      .subscribe({
+        next: (reports: ApplicationHealthReportDetail[]) => {
+          this.applicationsSubject.next(reports);
+          this.errorSubject.next(null);
+        },
+        error: () => {
+          this.applicationsSubject.next([]);
+        },
+      });
+  }
+
+  refreshApplicationsReport(organizationId: string): void {
+    this.fetchApplicationsReport(organizationId, true);
+  }
+}

bitwarden_license/bit-common/src/tools/reports/risk-insights/services/risk-insights-report.service.ts

@@ -287,6 +287,7 @@ export class RiskInsightsReportService {
         : newUriDetail.cipherMembers,
       atRiskMemberDetails: existingUriDetail ? existingUriDetail.atRiskMemberDetails : [],
       atRiskPasswordCount: existingUriDetail ? existingUriDetail.atRiskPasswordCount : 0,
+      atRiskMemberCount: existingUriDetail ? existingUriDetail.atRiskMemberDetails.length : 0,
     } as ApplicationHealthReportDetail;
 
     if (isAtRisk) {

bitwarden_license/bit-web/src/app/tools/access-intelligence/access-intelligence.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 
 import {
   MemberCipherDetailsApiService,
+  RiskInsightsDataService,
   RiskInsightsReportService,
 } from "@bitwarden/bit-common/tools/reports/risk-insights/services";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -28,6 +29,10 @@ import { RiskInsightsComponent } from "./risk-insights.component";
         MemberCipherDetailsApiService,
       ],
     },
+    {
+      provide: RiskInsightsDataService,
+      deps: [RiskInsightsReportService],
+    },
   ],
 })
 export class AccessIntelligenceModule {}

bitwarden_license/bit-web/src/app/tools/access-intelligence/all-applications.component.html

@@ -1,16 +1,11 @@
-<div *ngIf="loading">
+<div *ngIf="isLoading$ | async">
-  <i
+  <tools-risk-insights-loading></tools-risk-insights-loading>
-    class="bwi bwi-spinner bwi-spin tw-text-muted"
-    title="{{ 'loading' | i18n }}"
-    aria-hidden="true"
-  ></i>
-  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </div>
-<div class="tw-mt-4" *ngIf="!dataSource.data.length">
+<div class="tw-mt-4" *ngIf="!(isLoading$ | async) && !dataSource.data.length">
   <bit-no-items [icon]="noItemsIcon" class="tw-text-main">
     <ng-container slot="title">
       <h2 class="tw-font-semibold mt-4">
-        {{ "noAppsInOrgTitle" | i18n: organization.name }}
+        {{ "noAppsInOrgTitle" | i18n: organization?.name }}
       </h2>
     </ng-container>
     <ng-container slot="description">
@@ -28,21 +23,21 @@
     </ng-container>
   </bit-no-items>
 </div>
-<div class="tw-mt-4 tw-flex tw-flex-col" *ngIf="!loading && dataSource.data.length">
+<div class="tw-mt-4 tw-flex tw-flex-col" *ngIf="!(isLoading$ | async) && dataSource.data.length">
   <h2 class="tw-mb-6" bitTypography="h2">{{ "allApplications" | i18n }}</h2>
   <div class="tw-flex tw-gap-6">
     <tools-card
       class="tw-flex-1"
       [title]="'atRiskMembers' | i18n"
-      [value]="mockAtRiskMembersCount"
+      [value]="applicationSummary.totalAtRiskMemberCount"
-      [maxValue]="mockTotalMembersCount"
+      [maxValue]="applicationSummary.totalMemberCount"
     >
     </tools-card>
     <tools-card
       class="tw-flex-1"
       [title]="'atRiskApplications' | i18n"
-      [value]="mockAtRiskAppsCount"
+      [value]="applicationSummary.totalAtRiskApplicationCount"
-      [maxValue]="mockTotalAppsCount"
+      [maxValue]="applicationSummary.totalApplicationCount"
     >
     </tools-card>
   </div>
@@ -57,7 +52,7 @@
       type="button"
       buttonType="secondary"
       bitButton
-      *ngIf="isCritialAppsFeatureEnabled"
+      *ngIf="isCriticalAppsFeatureEnabled"
       [disabled]="!selectedIds.size"
       [loading]="markingAsCritical"
       (click)="markAppsAsCritical()"
@@ -69,17 +64,17 @@
   <bit-table [dataSource]="dataSource">
     <ng-container header>
       <tr>
-        <th *ngIf="isCritialAppsFeatureEnabled"></th>
+        <th *ngIf="isCriticalAppsFeatureEnabled"></th>
-        <th bitSortable="name" bitCell>{{ "application" | i18n }}</th>
+        <th bitSortable="applicationName" bitCell>{{ "application" | i18n }}</th>
-        <th bitSortable="atRiskPasswords" bitCell>{{ "atRiskPasswords" | i18n }}</th>
+        <th bitSortable="atRiskPasswordCount" bitCell>{{ "atRiskPasswords" | i18n }}</th>
-        <th bitSortable="totalPasswords" bitCell>{{ "totalPasswords" | i18n }}</th>
+        <th bitSortable="passwordCount" bitCell>{{ "totalPasswords" | i18n }}</th>
-        <th bitSortable="atRiskMembers" bitCell>{{ "atRiskMembers" | i18n }}</th>
+        <th bitSortable="atRiskMemberCount" bitCell>{{ "atRiskMembers" | i18n }}</th>
-        <th bitSortable="totalMembers" bitCell>{{ "totalMembers" | i18n }}</th>
+        <th bitSortable="memberCount" bitCell>{{ "totalMembers" | i18n }}</th>
       </tr>
     </ng-container>
     <ng-template body let-rows$>
       <tr bitRow *ngFor="let r of rows$ | async; trackBy: trackByFunction">
-        <td *ngIf="isCritialAppsFeatureEnabled">
+        <td *ngIf="isCriticalAppsFeatureEnabled">
           <input
             bitCheckbox
             type="checkbox"
@@ -88,25 +83,25 @@
           />
         </td>
         <td bitCell>
-          <span>{{ r.name }}</span>
+          <span>{{ r.applicationName }}</span>
         </td>
         <td bitCell>
           <span>
-            {{ r.atRiskPasswords }}
+            {{ r.atRiskPasswordCount }}
           </span>
         </td>
         <td bitCell>
           <span>
-            {{ r.totalPasswords }}
+            {{ r.passwordCount }}
           </span>
         </td>
         <td bitCell>
           <span>
-            {{ r.atRiskMembers }}
+            {{ r.atRiskMemberCount }}
           </span>
         </td>
         <td bitCell data-testid="total-membership">
-          {{ r.totalMembers }}
+          {{ r.memberCount }}
         </td>
       </tr>
     </ng-template>

bitwarden_license/bit-web/src/app/tools/access-intelligence/all-applications.component.ts

@@ -1,20 +1,23 @@
-// FIXME: Update this file to be type safe and remove this and next line
+import { Component, DestroyRef, OnDestroy, OnInit, inject } from "@angular/core";
-// @ts-strict-ignore
-import { Component, DestroyRef, inject, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormControl } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
-import { debounceTime, firstValueFrom, map } from "rxjs";
+import { debounceTime, map, Observable, of, Subscription } from "rxjs";
 
-import { AuditService } from "@bitwarden/common/abstractions/audit.service";
+import {
+  RiskInsightsDataService,
+  RiskInsightsReportService,
+} from "@bitwarden/bit-common/tools/reports/risk-insights";
+import {
+  ApplicationHealthReportDetail,
+  ApplicationHealthReportSummary,
+} from "@bitwarden/bit-common/tools/reports/risk-insights/models/password-health";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
-import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import {
   Icons,
   NoItemsModule,
@@ -27,60 +30,76 @@ import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.mod
 import { SharedModule } from "@bitwarden/web-vault/app/shared";
 import { PipesModule } from "@bitwarden/web-vault/app/vault/individual-vault/pipes/pipes.module";
 
-import { applicationTableMockData } from "./application-table.mock";
+import { ApplicationsLoadingComponent } from "./risk-insights-loading.component";
 
 @Component({
   standalone: true,
   selector: "tools-all-applications",
   templateUrl: "./all-applications.component.html",
-  imports: [HeaderModule, CardComponent, SearchModule, PipesModule, NoItemsModule, SharedModule],
+  imports: [
+    ApplicationsLoadingComponent,
+    HeaderModule,
+    CardComponent,
+    SearchModule,
+    PipesModule,
+    NoItemsModule,
+    SharedModule,
+  ],
 })
-export class AllApplicationsComponent implements OnInit {
+export class AllApplicationsComponent implements OnInit, OnDestroy {
-  protected dataSource = new TableDataSource<any>();
+  protected dataSource = new TableDataSource<ApplicationHealthReportDetail>();
   protected selectedIds: Set<number> = new Set<number>();
   protected searchControl = new FormControl("", { nonNullable: true });
-  private destroyRef = inject(DestroyRef);
+  protected loading = true;
-  protected loading = false;
+  protected organization = {} as Organization;
-  protected organization: Organization;
   noItemsIcon = Icons.Security;
   protected markingAsCritical = false;
-  isCritialAppsFeatureEnabled = false;
+  protected applicationSummary = {} as ApplicationHealthReportSummary;
+  private subscription = new Subscription();
 
-  // MOCK DATA
+  destroyRef = inject(DestroyRef);
-  protected mockData = applicationTableMockData;
+  isLoading$: Observable<boolean> = of(false);
-  protected mockAtRiskMembersCount = 0;
+  isCriticalAppsFeatureEnabled = false;
-  protected mockAtRiskAppsCount = 0;
-  protected mockTotalMembersCount = 0;
-  protected mockTotalAppsCount = 0;
 
   async ngOnInit() {
-    this.activatedRoute.paramMap
+    this.isCriticalAppsFeatureEnabled = await this.configService.getFeatureFlag(
-      .pipe(
-        takeUntilDestroyed(this.destroyRef),
-        map(async (params) => {
-          const organizationId = params.get("organizationId");
-          this.organization = await firstValueFrom(this.organizationService.get$(organizationId));
-          // TODO: use organizationId to fetch data
-        }),
-      )
-      .subscribe();
-
-    this.isCritialAppsFeatureEnabled = await this.configService.getFeatureFlag(
       FeatureFlag.CriticalApps,
     );
+
+    const organizationId = this.activatedRoute.snapshot.paramMap.get("organizationId");
+
+    if (organizationId) {
+      this.organization = await this.organizationService.get(organizationId);
+      this.subscription = this.dataService.applications$
+        .pipe(
+          map((applications) => {
+            if (applications) {
+              this.dataSource.data = applications;
+              this.applicationSummary =
+                this.reportService.generateApplicationsSummary(applications);
+            }
+          }),
+          takeUntilDestroyed(this.destroyRef),
+        )
+        .subscribe();
+      this.isLoading$ = this.dataService.isLoading$;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
   }
 
   constructor(
     protected cipherService: CipherService,
-    protected passwordStrengthService: PasswordStrengthServiceAbstraction,
-    protected auditService: AuditService,
     protected i18nService: I18nService,
     protected activatedRoute: ActivatedRoute,
     protected toastService: ToastService,
-    protected organizationService: OrganizationService,
     protected configService: ConfigService,
+    protected dataService: RiskInsightsDataService,
+    protected organizationService: OrganizationService,
+    protected reportService: RiskInsightsReportService,
   ) {
-    this.dataSource.data = applicationTableMockData;
     this.searchControl.valueChanges
       .pipe(debounceTime(200), takeUntilDestroyed())
       .subscribe((v) => (this.dataSource.filter = v));
@@ -90,7 +109,7 @@ export class AllApplicationsComponent implements OnInit {
     // TODO: implement
     this.toastService.showToast({
       variant: "warning",
-      title: null,
+      title: "",
       message: "Not yet implemented",
     });
   };
@@ -103,7 +122,7 @@ export class AllApplicationsComponent implements OnInit {
         this.selectedIds.clear();
         this.toastService.showToast({
           variant: "success",
-          title: null,
+          title: "",
           message: this.i18nService.t("appsMarkedAsCritical"),
         });
         resolve(true);
@@ -112,8 +131,8 @@ export class AllApplicationsComponent implements OnInit {
     });
   };
 
-  trackByFunction(_: number, item: CipherView) {
+  trackByFunction(_: number, item: ApplicationHealthReportDetail) {
-    return item.id;
+    return item.applicationName;
   }
 
   onCheckboxChange(id: number, event: Event) {

bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights-loading.component.html

@@ -0,0 +1,8 @@
+<div class="tw-flex-col tw-flex tw-justify-center tw-items-center tw-gap-5 tw-mt-4">
+  <i
+    class="bwi bwi-2x bwi-spinner bwi-spin text-primary"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
+  <h2 bitTypography="h1">{{ "generatingRiskInsights" | i18n }}</h2>
+</div>

bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights-loading.component.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+
+@Component({
+  selector: "tools-risk-insights-loading",
+  standalone: true,
+  imports: [CommonModule, JslibModule],
+  templateUrl: "./risk-insights-loading.component.html",
+})
+export class ApplicationsLoadingComponent {
+  constructor() {}
+}

bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights.component.html

@@ -1,49 +1,58 @@
-<div class="tw-mb-1 text-primary" bitTypography="body1">{{ "accessIntelligence" | i18n }}</div>
+<ng-container>
-<h1 bitTypography="h1">{{ "riskInsights" | i18n }}</h1>
+  <div class="tw-mb-1 text-primary" bitTypography="body1">{{ "accessIntelligence" | i18n }}</div>
-<div class="tw-text-muted tw-max-w-4xl tw-mb-2">
+  <h1 bitTypography="h1">{{ "riskInsights" | i18n }}</h1>
-  {{ "reviewAtRiskPasswords" | i18n }}
+  <div class="tw-text-muted tw-max-w-4xl tw-mb-2">
-  &nbsp;<a class="text-primary" routerLink="/login">{{ "learnMore" | i18n }}</a>
+    {{ "reviewAtRiskPasswords" | i18n }}
-</div>
+    &nbsp;<a class="text-primary" routerLink="/login">{{ "learnMore" | i18n }}</a>
-<div class="tw-bg-primary-100 tw-rounded-lg tw-w-full tw-px-8 tw-py-2 tw-my-4">
+  </div>
-  <i class="bwi bwi-exclamation-triangle bwi-lg tw-text-[1.2rem] text-muted" aria-hidden="true"></i>
+  <div
-  <span class="tw-mx-4">{{
+    class="tw-bg-primary-100 tw-rounded-lg tw-w-full tw-px-8 tw-py-4 tw-my-4 tw-flex tw-items-center"
-    "dataLastUpdated" | i18n: (dataLastUpdated | date: "MMMM d, y 'at' h:mm a")
-  }}</span>
-  <a
-    bitButton
-    buttonType="unstyled"
-    class="tw-border-none !tw-font-normal tw-cursor-pointer"
-    [bitAction]="refreshData.bind(this)"
   >
-    {{ "refresh" | i18n }}
+    <i
-  </a>
+      class="bwi bwi-exclamation-triangle bwi-lg tw-text-[1.2rem] text-muted"
-</div>
+      aria-hidden="true"
-<bit-tab-group [(selectedIndex)]="tabIndex" (selectedIndexChange)="onTabChange($event)">
+    ></i>
-  <bit-tab label="{{ 'allApplicationsWithCount' | i18n: apps.length }}">
+    <span class="tw-mx-4">{{
-    <tools-all-applications></tools-all-applications>
+      "dataLastUpdated" | i18n: (dataLastUpdated$ | async | date: "MMMM d, y 'at' h:mm a")
-  </bit-tab>
+    }}</span>
-  <bit-tab *ngIf="isCritialAppsFeatureEnabled">
+    <span class="tw-flex tw-justify-center tw-w-16">
-    <ng-template bitTabLabel>
+      <a
-      <i class="bwi bwi-star"></i>
+        *ngIf="!(isRefreshing$ | async)"
-      {{ "criticalApplicationsWithCount" | i18n: criticalApps.length }}
+        bitButton
-    </ng-template>
+        buttonType="unstyled"
-    <tools-critical-applications></tools-critical-applications>
+        class="tw-border-none !tw-font-normal tw-cursor-pointer !tw-py-0"
-  </bit-tab>
+        [bitAction]="refreshData.bind(this)"
-  <bit-tab label="Raw Data">
+      >
-    <tools-password-health></tools-password-health>
+        {{ "refresh" | i18n }}
-  </bit-tab>
+      </a>
-  <bit-tab label="Raw Data + members">
+      <span>
-    <tools-password-health-members></tools-password-health-members>
+        <i
-  </bit-tab>
+          *ngIf="isRefreshing$ | async"
-  <bit-tab label="Raw Data + uri">
+          class="bwi bwi-spinner bwi-spin tw-text-muted tw-text-[1.2rem]"
-    <tools-password-health-members-uri></tools-password-health-members-uri>
+          aria-hidden="true"
-  </bit-tab>
+        ></i>
-  <!-- <bit-tab>
+      </span>
-    <ng-template bitTabLabel>
+    </span>
-      <i class="bwi bwi-envelope"></i>
+  </div>
-      {{ "notifiedMembersWithCount" | i18n: priorityApps.length }}
+  <bit-tab-group [(selectedIndex)]="tabIndex" (selectedIndexChange)="onTabChange($event)">
-    </ng-template>
+    <bit-tab label="{{ 'allApplicationsWithCount' | i18n: appsCount }}">
-    <h2 bitTypography="h2">{{ "notifiedMembers" | i18n }}</h2>
+      <tools-all-applications></tools-all-applications>
-    <tools-notified-members-table></tools-notified-members-table>
+    </bit-tab>
-  </bit-tab> -->
+    <bit-tab *ngIf="isCriticalAppsFeatureEnabled">
-</bit-tab-group>
+      <ng-template bitTabLabel>
+        <i class="bwi bwi-star"></i>
+        {{ "criticalApplicationsWithCount" | i18n: criticalAppsCount }}
+      </ng-template>
+      <tools-critical-applications></tools-critical-applications>
+    </bit-tab>
+    <bit-tab label="Raw Data">
+      <tools-password-health></tools-password-health>
+    </bit-tab>
+    <bit-tab label="Raw Data + members">
+      <tools-password-health-members></tools-password-health-members>
+    </bit-tab>
+    <bit-tab label="Raw Data + uri">
+      <tools-password-health-members-uri></tools-password-health-members-uri>
+    </bit-tab>
+  </bit-tab-group>
+</ng-container>

bitwarden_license/bit-web/src/app/tools/access-intelligence/risk-insights.component.ts

@@ -1,11 +1,13 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { Component, DestroyRef, OnInit, inject } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { ActivatedRoute, Router } from "@angular/router";
+import { Observable, EMPTY } from "rxjs";
+import { map, switchMap } from "rxjs/operators";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { RiskInsightsDataService } from "@bitwarden/bit-common/tools/reports/risk-insights";
+import { ApplicationHealthReportDetail } from "@bitwarden/bit-common/tools/reports/risk-insights/models/password-health";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { AsyncActionsModule, ButtonModule, TabsModule } from "@bitwarden/components";
@@ -43,45 +45,80 @@ export enum RiskInsightsTabType {
   ],
 })
 export class RiskInsightsComponent implements OnInit {
-  tabIndex: RiskInsightsTabType;
+  tabIndex: RiskInsightsTabType = RiskInsightsTabType.AllApps;
-  dataLastUpdated = new Date();
-  isCritialAppsFeatureEnabled = false;
 
-  apps: any[] = [];
+  dataLastUpdated: Date = new Date();
-  criticalApps: any[] = [];
-  notifiedMembers: any[] = [];
 
-  async refreshData() {
+  isCriticalAppsFeatureEnabled: boolean = false;
-    // TODO: Implement
+
-    return new Promise((resolve) =>
+  appsCount: number = 0;
-      setTimeout(() => {
+  criticalAppsCount: number = 0;
-        this.dataLastUpdated = new Date();
+  notifiedMembersCount: number = 0;
-        resolve(true);
+
-      }, 1000),
+  private organizationId: string | null = null;
-    );
+  private destroyRef = inject(DestroyRef);
+  isLoading$: Observable<boolean> = new Observable<boolean>();
+  isRefreshing$: Observable<boolean> = new Observable<boolean>();
+  dataLastUpdated$: Observable<Date | null> = new Observable<Date | null>();
+  refetching: boolean = false;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private configService: ConfigService,
+    private dataService: RiskInsightsDataService,
+  ) {
+    this.route.queryParams.pipe(takeUntilDestroyed()).subscribe(({ tabIndex }) => {
+      this.tabIndex = !isNaN(Number(tabIndex)) ? Number(tabIndex) : RiskInsightsTabType.AllApps;
+    });
   }
 
-  onTabChange = async (newIndex: number) => {
+  async ngOnInit() {
+    this.isCriticalAppsFeatureEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.CriticalApps,
+    );
+
+    this.route.paramMap
+      .pipe(
+        takeUntilDestroyed(this.destroyRef),
+        map((params) => params.get("organizationId")),
+        switchMap((orgId: string | null) => {
+          if (orgId) {
+            this.organizationId = orgId;
+            this.dataService.fetchApplicationsReport(orgId);
+            this.isLoading$ = this.dataService.isLoading$;
+            this.isRefreshing$ = this.dataService.isRefreshing$;
+            this.dataLastUpdated$ = this.dataService.dataLastUpdated$;
+            return this.dataService.applications$;
+          } else {
+            return EMPTY;
+          }
+        }),
+      )
+      .subscribe({
+        next: (applications: ApplicationHealthReportDetail[] | null) => {
+          if (applications) {
+            this.appsCount = applications.length;
+          }
+        },
+      });
+  }
+
+  /**
+   * Refreshes the data by re-fetching the applications report.
+   * This will automatically notify child components subscribed to the RiskInsightsDataService observables.
+   */
+  refreshData(): void {
+    if (this.organizationId) {
+      this.dataService.refreshApplicationsReport(this.organizationId);
+    }
+  }
+
+  async onTabChange(newIndex: number): Promise<void> {
     await this.router.navigate([], {
       relativeTo: this.route,
       queryParams: { tabIndex: newIndex },
       queryParamsHandling: "merge",
     });
-  };
-
-  async ngOnInit() {
-    this.isCritialAppsFeatureEnabled = await this.configService.getFeatureFlag(
-      FeatureFlag.CriticalApps,
-    );
-  }
-
-  constructor(
-    protected route: ActivatedRoute,
-    private router: Router,
-    private configService: ConfigService,
-  ) {
-    route.queryParams.pipe(takeUntilDestroyed()).subscribe(({ tabIndex }) => {
-      this.tabIndex = !isNaN(tabIndex) ? tabIndex : RiskInsightsTabType.AllApps;
-    });
   }
 }