fix(dashboards): show no-data state in website visits drawer (#686)

* fix(dashboards): show no-data state in website visits drawer

When website session data is zero the drawer skips both
"Needs Your Attention" and "Performing Well" and shows a
neutral blue info card guiding EDs to engage marketing ops
to drive website traffic.

LFXV2-1644

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Misha Rautela <mrautela@linuxfoundation.org>

* fix(dashboards): handle all-zero dailyData in hasNoData

Update hasNoData predicate to also treat dailyData arrays
filled with zeros as no-data. Reuse the signal in early
returns to avoid duplicating the condition.

LFXV2-1644

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Misha Rautela <mrautela@linuxfoundation.org>

* fix(dashboards): add a11y attrs and soften no-data copy

Add role=status and aria-live=polite to no-data card. Remove
actionable CTA language from description.

LFXV2-1644

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Misha Rautela <mrautela@linuxfoundation.org>

* fix(dashboards): extract hasNoData to initHasNoData, fix a11y

- Extract inline hasNoData computed to private initHasNoData()
  per component organization rules
- Drop redundant aria-live="polite" (implicit in role="status")
- Use h3 for no-data card title to match heading outline
- Use border-l-blue-600 to match design system -600 shade pattern

LFXV2-1644

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Misha Rautela <mrautela@linuxfoundation.org>

---------

Signed-off-by: Misha Rautela <mrautela@linuxfoundation.org>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: mrautela365

apps/lfx-one/src/app/modules/dashboards/executive-director/components/website-visits-drawer/website-visits-drawer.component.html

@@ -116,6 +116,21 @@ <h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
         </div>
       }
 
+      @if (hasNoData()) {
+        <div
+          class="flex flex-col rounded-lg border border-gray-200 border-l-4 border-l-blue-600 bg-white overflow-hidden"
+          role="status"
+          data-testid="website-visits-drawer-no-data">
+          <div class="flex items-start gap-4 px-4 py-4">
+            <i class="fa-light fa-circle-info text-blue-500 mt-0.5" aria-hidden="true"></i>
+            <div class="flex flex-col gap-1 flex-1 min-w-0">
+              <h3 class="text-sm font-semibold text-gray-900">No website traffic data available</h3>
+              <p class="text-sm text-gray-500">No web session data is currently available for this foundation</p>
+            </div>
+          </div>
+        </div>
+      }
+
       <!-- Daily Trend Chart -->
       <div class="flex flex-col gap-4 p-4 border border-gray-200 rounded-lg" data-testid="website-visits-drawer-trend-section">
         <div class="flex flex-col gap-1">

apps/lfx-one/src/app/modules/dashboards/executive-director/components/website-visits-drawer/website-visits-drawer.component.ts

@@ -53,6 +53,9 @@ export class WebsiteVisitsDrawerComponent {
   protected readonly performingActions: Signal<MarketingRecommendedAction[]> = computed(() => this.split().performingActions);
 
   protected readonly performingInsights: Signal<MarketingKeyInsight[]> = computed(() => this.split().performingInsights);
+
+  protected readonly hasNoData: Signal<boolean> = this.initHasNoData();
+
   protected readonly trendChartData: Signal<ChartData<'line'>> = this.initTrendChartData();
   protected readonly domainChartData: Signal<ChartData<'bar'>> = this.initDomainChartData();
 
@@ -134,6 +137,13 @@ export class WebsiteVisitsDrawerComponent {
   }
 
   // === Private Initializers ===
+  private initHasNoData(): Signal<boolean> {
+    return computed(() => {
+      const { totalSessions, dailyData } = this.drawerData();
+      return totalSessions === 0 && (dailyData.length === 0 || dailyData.every((v) => v === 0));
+    });
+  }
+
   private initDrawerData(): Signal<WebActivitiesSummaryResponse> {
     const defaultValue: WebActivitiesSummaryResponse = {
       totalSessions: 0,
@@ -175,7 +185,7 @@ export class WebsiteVisitsDrawerComponent {
       const { totalSessions, totalPageViews, domainGroups, dailyData } = this.drawerData();
       const actions: MarketingRecommendedAction[] = [];
 
-      if (totalSessions === 0 && dailyData.length === 0) {
+      if (this.hasNoData()) {
         return actions;
       }
 
@@ -226,12 +236,11 @@ export class WebsiteVisitsDrawerComponent {
         }
       }
 
-      if (actions.length === 0) {
+      if (actions.length === 0 && !this.hasNoData()) {
         actions.push({
           title: 'Continue current strategy',
           description: `${formatNumber(totalSessions)} sessions with healthy traffic distribution`,
           priority: 'low',
-
           actionType: 'growth',
         });
       }
@@ -245,7 +254,7 @@ export class WebsiteVisitsDrawerComponent {
       const { totalSessions, totalPageViews, domainGroups, dailyData } = this.drawerData();
       const insights: MarketingKeyInsight[] = [];
 
-      if (totalSessions === 0 && dailyData.length === 0) {
+      if (this.hasNoData()) {
         return insights;
       }