feat(dashboards): refactor metrics to individual signals and update ui (#187)

* feat(dashboards): refactor metrics to individual signals and update ui

LFXV2-836 LFXV2-837

- Refactor foundation-health, organization-involvement, and recent-progress
  components to use individual computed signals per metric card
- Add private initialization methods for computed signals
- Add per-card loading states instead of global loading
- Update metric-card component to support loading property
- Update Ask LFX Lens button to use gradient styling
- Fix responsive layout issues in dashboard components

🤖 Generated with [Claude Code](https://claude.ai/code)

Signed-off-by: Asitha de Silva <[email protected]>

* fix(ui): prevent NaN in health scores and simplify hover

- Add guard for maxCount === 0 to prevent NaN in heightPx calculation
- Remove redundant hover:border and hover:border-solid classes

🤖 Generated with [Claude Code](https://claude.ai/code)

Signed-off-by: Asitha de Silva <[email protected]>

---------

Signed-off-by: Asitha de Silva <[email protected]>

Author: asithade

apps/lfx-one/src/app/modules/dashboards/board-member/board-member-dashboard.component.html

@@ -11,7 +11,7 @@ <h1>{{ selectedFoundation()?.name }} Overview</h1>
 
   <!-- Organization Selector -->
   @if (showOrganizationSelector()) {
-    <div class="mb-6 flex items-center gap-4" data-testid="organization-selector">
+    <div class="mb-6 flex flex-wrap items-center gap-4" data-testid="organization-selector">
       <label for="organization-select" class="text-sm font-semibold text-gray-700">Organization:</label>
       <lfx-select
         [form]="form"
@@ -23,7 +23,7 @@ <h1>{{ selectedFoundation()?.name }} Overview</h1>
         filterPlaceholder="Search organizations..."
         placeholder="Select an organization"
         [showClear]="false"
-        styleClass="min-w-[300px]"
+        styleClass="w-full sm:min-w-[300px]"
         inputId="organization-select"
         data-testid="organization-select" />
     </div>

apps/lfx-one/src/app/modules/dashboards/components/foundation-health/foundation-health.component.html

@@ -2,20 +2,21 @@
 <!-- SPDX-License-Identifier: MIT -->
 
 <section data-testid="foundation-health-section">
-  <div class="flex items-center justify-between mb-4">
-    <div class="flex flex-col md:flex-row md:items-center gap-3">
-      <h2>{{ title() }}</h2>
+  <div class="flex flex-wrap gap-3 items-end justify-between mb-4">
+    <div class="flex flex-col gap-3">
+      <div class="flex gap-3 flex-wrap">
+        <h2 class="mb-0">{{ title() }}</h2>
+        <!-- Data Copilot Button -->
+        <lfx-data-copilot></lfx-data-copilot>
+      </div>
 
-      <div class="flex items-center gap-2">
+      <div class="flex flex-wrap items-center gap-2">
         <!-- Filter Pills -->
         <lfx-filter-pills
           [options]="filterOptions"
           [selectedFilter]="selectedFilter()"
           (filterChange)="handleFilterChange($event)"
           data-testid="foundation-health-filters"></lfx-filter-pills>
-
-        <!-- Data Copilot Button -->
-        <lfx-data-copilot [includeOrganizationId]="false" [includeOrganizationName]="false"></lfx-data-copilot>
       </div>
     </div>
 
@@ -49,19 +50,11 @@ <h2>{{ title() }}</h2>
         <p class="text-xs text-gray-500">Use the project selector in the sidebar to choose a foundation</p>
       </div>
     </div>
-  } @else if (isLoading() && !metricCards()) {
-    <!-- Loading State -->
-    <div class="flex items-center justify-center p-12">
-      <div class="text-center space-y-3">
-        <i class="fa-light fa-spinner-third fa-spin text-4xl text-blue-500"></i>
-        <p class="text-sm text-gray-500">Loading foundation health data...</p>
-      </div>
-    </div>
   } @else {
     <!-- Carousel Container -->
     <div class="overflow-hidden">
       <div #carouselScroll class="flex gap-4 overflow-x-auto pb-2 hide-scrollbar scroll-smooth" data-testid="foundation-health-carousel">
-        @for (card of metricCards(); track card.title) {
+        @for (card of metricCards(); track card.testId) {
           @switch (card.customContentType) {
             <!-- Bar Chart - Use shared metric card -->
             @case ('bar-chart') {
@@ -73,7 +66,8 @@ <h2>{{ title() }}</h2>
                 [chartData]="card.chartData"
                 [chartOptions]="barChartOptions"
                 [value]="card.value"
-                [subtitle]="card.subtitle"></lfx-metric-card>
+                [subtitle]="card.subtitle"
+                [loading]="card.loading"></lfx-metric-card>
             }
 
             <!-- Top Projects List - Custom content -->
@@ -84,7 +78,8 @@ <h2>{{ title() }}</h2>
                 [testId]="card.testId"
                 [chartType]="card.chartType"
                 [value]="card.value"
-                [subtitle]="card.subtitle">
+                [subtitle]="card.subtitle"
+                [loading]="card.loading">
                 <ng-template #customContent>
                   @if (card.topProjects) {
                     <div class="space-y-0.5 p-0 pl-[60px] m-0 mb-[5px]">
@@ -109,7 +104,8 @@ <h2>{{ title() }}</h2>
                 [testId]="card.testId"
                 [chartType]="card.chartType"
                 [value]="card.value"
-                [subtitle]="card.subtitle">
+                [subtitle]="card.subtitle"
+                [loading]="card.loading">
                 <ng-template #customContent>
                   @if (card.busFactor) {
                     <div class="flex-1 flex flex-col justify-end pb-2">
@@ -139,7 +135,8 @@ <h2>{{ title() }}</h2>
                 [testId]="card.testId"
                 [chartType]="card.chartType"
                 [value]="card.value"
-                [subtitle]="card.subtitle">
+                [subtitle]="card.subtitle"
+                [loading]="card.loading">
                 <ng-template #customContent>
                   @if (card.healthScores) {
                     <div class="flex-1 flex flex-col justify-end p-0">
@@ -173,7 +170,8 @@ <h2>{{ title() }}</h2>
                 [chartData]="card.chartData"
                 [chartOptions]="card.chartOptions"
                 [value]="card.value"
-                [subtitle]="card.subtitle"></lfx-metric-card>
+                [subtitle]="card.subtitle"
+                [loading]="card.loading"></lfx-metric-card>
             }
           }
         }