From 8d99996f664d0f8339038046be93ee11fe2011cc Mon Sep 17 00:00:00 2001
From: Alex <adewitt@bitwarden.com>
Date: Thu, 30 Oct 2025 13:23:36 -0400
Subject: [PATCH] logic to fetch totals and new styling

---
 .../activity/assign-tasks-view.component.html | 191 +++++++++++++++---
 .../activity/assign-tasks-view.component.ts   |  24 ++-
 2 files changed, 180 insertions(+), 35 deletions(-)

diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/assign-tasks-view.component.html b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/assign-tasks-view.component.html
index 2d7be74f629..7d097425469 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/assign-tasks-view.component.html
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/assign-tasks-view.component.html
@@ -1,35 +1,173 @@
-<div class="tw-flex tw-flex-col tw-gap-4">
-  <!-- Task Summary Info Card (matches password-change-metric styling) -->
-  <div
-    class="tw-flex tw-flex-col tw-p-6 tw-box-border tw-bg-background tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg"
-  >
-    <div class="tw-mb-2">
-      <i class="bwi bwi-info-circle tw-text-muted tw-mr-2" aria-hidden="true"></i>
-      <span bitTypography="h6">{{ "taskSummary" | i18n }}</span>
+<div class="tw-flex tw-flex-col tw-gap-6">
+  <!-- Two-column layout: Left panel (stats) and Right panel (browser extension mockup) -->
+  <div class="tw-flex tw-flex-col md:tw-flex-row tw-gap-6">
+    <!-- Left Panel -->
+    <div class="tw-flex tw-flex-col tw-gap-4 tw-flex-1">
+      <!-- Task Summary Info Card -->
+      <div
+        class="tw-flex tw-flex-col tw-p-6 tw-box-border tw-bg-secondary-100 tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg"
+      >
+        <div class="tw-flex tw-items-center tw-mb-3">
+          <i class="bwi bwi-info-circle tw-text-primary-600 tw-mr-2" aria-hidden="true"></i>
+          <span bitTypography="h6" class="tw-font-semibold">{{ "taskSummary" | i18n }}</span>
+        </div>
+
+        <div bitTypography="body1" class="tw-text-main">
+          <strong>{{ criticalAppsAtRiskMemberCount }}</strong>
+          {{ "membersWithAtRiskPasswords" | i18n }}
+          for
+          <strong>{{ selectedApplicationsCount() }}</strong>
+          {{ "criticalApplications" | i18n }}
+        </div>
+      </div>
+
+      <!-- Stat Box: Members with At-Risk Passwords -->
+      <div class="tw-flex tw-items-start tw-gap-3">
+        <bit-icon-tile
+          icon="bwi-users"
+          variant="primary"
+          size="large"
+          aria-label=""
+        ></bit-icon-tile>
+        <div class="tw-flex tw-flex-col">
+          <span bitTypography="h2" class="tw-font-bold tw-mb-1">
+            {{ criticalAppsAtRiskMemberCount }}
+          </span>
+          <span bitTypography="body2" class="tw-text-muted">
+            {{ "membersWithAtRiskPasswords" | i18n }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Stat Box: Critical Applications At-Risk -->
+      <div class="tw-flex tw-items-start tw-gap-3">
+        <bit-icon-tile
+          icon="bwi-desktop"
+          variant="warning"
+          size="large"
+          aria-label=""
+        ></bit-icon-tile>
+        <div class="tw-flex tw-flex-col">
+          <div class="tw-flex tw-items-baseline tw-gap-2 tw-mb-1">
+            <span bitTypography="h2" class="tw-font-bold tw-text-main">
+              {{ selectedApplicationsCount() }}
+            </span>
+            <span bitTypography="body1" class="tw-text-muted">
+              of {{ totalApplicationsCount }} total
+            </span>
+          </div>
+          <span bitTypography="body2" class="tw-text-muted">
+            {{ "criticalApplications" | i18n }} at-risk
+          </span>
+        </div>
+      </div>
     </div>
 
-    <div class="tw-flex tw-items-baseline tw-gap-2 tw-mb-4">
-      <span bitTypography="h3">{{ selectedApplicationsCount() }}</span>
-      <span bitTypography="body2" class="tw-text-muted">
-        {{ "criticalApplicationsMarked" | i18n }}
-      </span>
-    </div>
+    <!-- Right Panel: Browser Extension Mockup -->
+    <div class="tw-flex tw-flex-col tw-gap-4 tw-flex-1">
+      <!-- Browser Extension Mockup -->
+      <div
+        class="tw-relative tw-bg-secondary-100 tw-rounded-lg tw-p-4 tw-border tw-border-secondary-300"
+      >
+        <!-- Browser Window Mockup -->
+        <div class="tw-bg-background tw-rounded tw-shadow-md tw-overflow-hidden">
+          <!-- Browser Top Bar -->
+          <div
+            class="tw-flex tw-items-center tw-gap-2 tw-bg-secondary-100 tw-px-3 tw-py-2 tw-border-b tw-border-secondary-300"
+          >
+            <div class="tw-flex tw-gap-1">
+              <div class="tw-size-3 tw-rounded-full tw-bg-secondary-300"></div>
+              <div class="tw-size-3 tw-rounded-full tw-bg-secondary-300"></div>
+              <div class="tw-size-3 tw-rounded-full tw-bg-secondary-300"></div>
+            </div>
+            <div
+              class="tw-flex-1 tw-bg-background tw-rounded tw-px-2 tw-py-1 tw-text-xs tw-text-muted tw-border tw-border-secondary-300"
+            >
+              example.com
+            </div>
+            <div class="tw-size-4 tw-bg-secondary-300 tw-rounded"></div>
+          </div>
 
-    <div class="tw-flex tw-items-baseline tw-gap-2">
-      <span bitTypography="h3">{{ criticalAppsAtRiskMemberCount }}</span>
-      <span bitTypography="body2" class="tw-text-muted">
-        {{ "membersWithAtRiskPasswords" | i18n }}
-      </span>
+          <!-- Browser Content Area -->
+          <div class="tw-p-4 tw-bg-primary-100 tw-min-h-[200px] tw-relative">
+            <!-- Extension Popup Mockup -->
+            <div
+              class="tw-absolute tw-top-4 tw-right-4 tw-w-64 tw-bg-background tw-rounded-lg tw-shadow-lg tw-border tw-border-secondary-300 tw-p-4"
+            >
+              <!-- Extension Items -->
+              <div class="tw-space-y-3 tw-mb-4">
+                <div class="tw-flex tw-items-center tw-gap-2">
+                  <div class="tw-size-6 tw-bg-secondary-300 tw-rounded"></div>
+                  <div class="tw-flex-1 tw-h-2 tw-bg-secondary-300 tw-rounded"></div>
+                  <button
+                    type="button"
+                    class="tw-text-xs tw-px-2 tw-py-1 tw-bg-secondary-100 tw-rounded tw-text-main"
+                  >
+                    {{ "change" | i18n }}
+                  </button>
+                </div>
+                <div class="tw-flex tw-items-center tw-gap-2">
+                  <div class="tw-size-6 tw-bg-secondary-300 tw-rounded"></div>
+                  <div class="tw-flex-1 tw-h-2 tw-bg-secondary-300 tw-rounded"></div>
+                  <button
+                    type="button"
+                    class="tw-text-xs tw-px-2 tw-py-1 tw-bg-secondary-100 tw-rounded tw-text-main"
+                  >
+                    {{ "change" | i18n }}
+                  </button>
+                </div>
+                <div class="tw-flex tw-items-center tw-gap-2">
+                  <div class="tw-size-6 tw-bg-secondary-300 tw-rounded"></div>
+                  <div class="tw-flex-1 tw-h-2 tw-bg-secondary-300 tw-rounded"></div>
+                  <button
+                    type="button"
+                    class="tw-text-xs tw-px-2 tw-py-1 tw-bg-secondary-100 tw-rounded tw-text-main"
+                  >
+                    {{ "change" | i18n }}
+                  </button>
+                </div>
+              </div>
+
+              <!-- Review Section -->
+              <div class="tw-mb-4">
+                <div class="tw-h-3 tw-bg-secondary-300 tw-rounded tw-mb-2 tw-w-3/4"></div>
+                <div class="tw-h-2 tw-bg-secondary-300 tw-rounded tw-w-full tw-mb-1"></div>
+                <div class="tw-h-2 tw-bg-secondary-300 tw-rounded tw-w-5/6"></div>
+              </div>
+
+              <!-- Pagination Dots -->
+              <div class="tw-flex tw-justify-center tw-gap-1 tw-mb-3">
+                <div class="tw-size-1.5 tw-rounded-full tw-bg-primary-600"></div>
+                <div class="tw-size-1.5 tw-rounded-full tw-bg-secondary-300"></div>
+                <div class="tw-size-1.5 tw-rounded-full tw-bg-secondary-300"></div>
+              </div>
+
+              <!-- Review Button -->
+              <button
+                type="button"
+                class="tw-w-full tw-py-2 tw-bg-primary-600 tw-text-contrast tw-rounded tw-text-sm tw-font-semibold"
+              >
+                {{ "reviewAtRiskPasswords" | i18n }}
+              </button>
+            </div>
+
+            <!-- Mouse Cursor Mockup -->
+            <div
+              class="tw-absolute tw-top-8 tw-right-16 tw-size-4 tw-border-2 tw-border-text-main tw-bg-background"
+            ></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Description Text -->
+      <div bitTypography="body2" class="tw-text-muted">
+        {{ "membersWillReceiveNotification" | i18n }}
+      </div>
     </div>
   </div>
 
-  <!-- Description Text -->
-  <div bitTypography="body2" class="tw-text-muted">
-    {{ "membersWillReceiveNotification" | i18n }}
-  </div>
-
-  <!-- Action Buttons -->
-  <div class="tw-flex tw-gap-2">
+  <!-- Footer: Action Buttons -->
+  <div class="tw-flex tw-gap-2 tw-pt-4 tw-pb-2">
     <button
       type="button"
       bitButton
@@ -40,7 +178,6 @@
       [loading]="isAssigning"
       [attr.aria-label]="'assignTasks' | i18n"
     >
-      <i class="bwi bwi-envelope tw-mr-2" aria-hidden="true"></i>
       {{ "assignTasks" | i18n }}
     </button>
     <button
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/assign-tasks-view.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/assign-tasks-view.component.ts
index 7d12ce4b0f8..4a58852e48f 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/assign-tasks-view.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/assign-tasks-view.component.ts
@@ -6,7 +6,12 @@ import { AllActivitiesService } from "@bitwarden/bit-common/dirt/reports/risk-in
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { OrganizationId } from "@bitwarden/common/types/guid";
-import { ButtonModule, ToastService, TypographyModule } from "@bitwarden/components";
+import {
+  ButtonModule,
+  IconTileComponent,
+  ToastService,
+  TypographyModule,
+} from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 import { DefaultAdminTaskService } from "../../../vault/services/default-admin-task.service";
@@ -18,7 +23,7 @@ import { AccessIntelligenceSecurityTasksService } from "../shared/security-tasks
  *
  * Important: This component provides its own instances of AccessIntelligenceSecurityTasksService
  * and DefaultAdminTaskService. These services are scoped to this component to ensure proper
- * dependency injection when the component is dynamically rendered within the dialog.
+ * dependency injection when the component is dynamically rendered within the structure.
  * Without these providers, Angular would throw NullInjectorError when trying to inject
  * DefaultAdminTaskService, which is required by AccessIntelligenceSecurityTasksService.
  */
@@ -27,7 +32,7 @@ import { AccessIntelligenceSecurityTasksService } from "../shared/security-tasks
 @Component({
   selector: "dirt-assign-tasks-view",
   templateUrl: "./assign-tasks-view.component.html",
-  imports: [CommonModule, ButtonModule, TypographyModule, I18nPipe],
+  imports: [CommonModule, ButtonModule, TypographyModule, I18nPipe, IconTileComponent],
   providers: [AccessIntelligenceSecurityTasksService, DefaultAdminTaskService],
 })
 export class AssignTasksViewComponent implements OnInit {
@@ -53,6 +58,7 @@ export class AssignTasksViewComponent implements OnInit {
   readonly back = output<void>();
 
   protected criticalAppsAtRiskMemberCount = 0;
+  protected totalApplicationsCount = 0;
   protected isAssigning = false;
 
   private allActivitiesService = inject(AllActivitiesService);
@@ -62,22 +68,24 @@ export class AssignTasksViewComponent implements OnInit {
   private logService = inject(LogService);
 
   async ngOnInit(): Promise<void> {
-    // Get unique members with at-risk passwords from report summary
+    // Get unique members with at-risk passwords and total applications from report summary
     // Uses the same pattern as all-activity.component.ts
-    await this.loadAtRiskMemberCount();
+    await this.loadReportSummary();
   }
 
   /**
-   * Loads the count of unique members with at-risk passwords.
+   * Loads the count of unique members with at-risk passwords and total applications.
    * Uses the same pattern as all-activity.component.ts
    */
-  private async loadAtRiskMemberCount(): Promise<void> {
+  private async loadReportSummary(): Promise<void> {
     try {
       const summary = await firstValueFrom(this.allActivitiesService.reportSummary$);
       this.criticalAppsAtRiskMemberCount = summary.totalCriticalAtRiskMemberCount;
+      this.totalApplicationsCount = summary.totalApplicationCount;
     } catch (error) {
-      this.logService.error("[AssignTasksView] Failed to load at-risk member count", error);
+      this.logService.error("[AssignTasksView] Failed to load report summary", error);
       this.criticalAppsAtRiskMemberCount = 0;
+      this.totalApplicationsCount = 0;
     }
   }