Skip to content

fix(dashboards): standardize no-data messaging across ed drawers #699

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mrautela365 wants to merge 2 commits into
base: main
Choose a base branch
from
+148 −110
Open

fix(dashboards): standardize no-data messaging across ed drawers #699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cbff737
fix(dashboards): standardize no-data messaging across ED drawers
mrautela365 May 13, 2026
8d3d5a6
fix(dashboards): address review feedback on no-data guards
mrautela365 May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions ...ards/executive-director/components/brand-health-drawer/brand-health-drawer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,8 +152,8 @@ <h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
<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">
<span class="text-sm font-semibold text-gray-900">No brand mention data available</span>
<p class="text-sm text-gray-500">No brand mentions are currently available for this foundation</p>
<span class="text-sm font-semibold text-gray-900">No brand mention activity detected</span>
<p class="text-sm text-gray-500">Engage with marketing ops to activate campaigns and start tracking results.</p>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ...dashboards/executive-director/components/email-ctr-drawer/email-ctr-drawer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,8 @@ <h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
<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 active campaigns detected</h3>
<p class="text-sm text-gray-500">No email, paid, or attribution activity is currently available for this foundation</p>
<h3 class="text-sm font-semibold text-gray-900">No email or paid activity detected</h3>
<p class="text-sm text-gray-500">Engage with marketing ops to activate campaigns and start tracking results.</p>
</div>
</div>
</div>
Expand Down
115 changes: 65 additions & 50 deletions ...tive-director/components/engaged-community-drawer/engaged-community-drawer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,65 +53,80 @@ <h2 class="text-lg font-semibold text-gray-900" data-testid="engaged-community-d
</lfx-card>
</div>

<!-- FIRST FOLD: Needs Your Attention -->
@if (attentionActions().length > 0 || attentionInsights().length > 0) {
@if (hasNoData()) {
<div
class="flex flex-col rounded-lg border border-gray-200 border-l-4 border-l-red-600 bg-white overflow-hidden"
data-testid="engaged-community-drawer-attention">
<div class="flex items-center gap-2 px-4 pt-4 pb-2">
<i class="fa-light fa-triangle-exclamation text-red-600"></i>
<h3 class="text-sm font-semibold text-red-700">Needs Your Attention</h3>
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="engaged-community-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 community engagement activity detected</h3>
<p class="text-sm text-gray-500">Engage with marketing ops to activate campaigns and start tracking results.</p>
</div>
</div>

@for (action of attentionActions(); track action.title) {
<div class="flex items-start justify-between gap-4 px-4 py-3 border-t border-gray-100">
<div class="flex flex-col gap-1 flex-1 min-w-0">
<span class="text-sm font-semibold text-gray-900">{{ action.title }}</span>
<p class="text-sm text-gray-500">{{ action.description }}</p>
</div>
@if (action.priority === 'high') {
<lfx-tag value="High Priority" severity="danger" [rounded]="true" />
} @else {
<lfx-tag value="Medium Priority" severity="warn" [rounded]="true" />
}
</div>
} @else {
<!-- FIRST FOLD: Needs Your Attention -->
@if (attentionActions().length > 0 || attentionInsights().length > 0) {
<div
class="flex flex-col rounded-lg border border-gray-200 border-l-4 border-l-red-600 bg-white overflow-hidden"
data-testid="engaged-community-drawer-attention">
<div class="flex items-center gap-2 px-4 pt-4 pb-2">
<i class="fa-light fa-triangle-exclamation text-red-600"></i>
<h3 class="text-sm font-semibold text-red-700">Needs Your Attention</h3>
</div>
}

@for (insight of attentionInsights(); track insight.text) {
<div class="flex items-center gap-2 px-4 py-3 border-t border-gray-100 text-sm text-gray-700">
<i class="fa-light fa-triangle-exclamation text-red-500 flex-shrink-0"></i>
<span>{{ insight.text }}</span>
</div>
}
</div>
}
@for (action of attentionActions(); track action.title) {
<div class="flex items-start justify-between gap-4 px-4 py-3 border-t border-gray-100">
<div class="flex flex-col gap-1 flex-1 min-w-0">
<span class="text-sm font-semibold text-gray-900">{{ action.title }}</span>
<p class="text-sm text-gray-500">{{ action.description }}</p>
</div>
@if (action.priority === 'high') {
<lfx-tag value="High Priority" severity="danger" [rounded]="true" />
} @else {
<lfx-tag value="Medium Priority" severity="warn" [rounded]="true" />
}
</div>
}

<!-- SECOND FOLD: Performing Well -->
@if (performingActions().length > 0 || performingInsights().length > 0) {
<div
class="flex flex-col rounded-lg border border-gray-200 border-l-4 border-l-green-600 bg-white overflow-hidden"
data-testid="engaged-community-drawer-performing">
<div class="flex items-center gap-2 px-4 pt-4 pb-2">
<i class="fa-light fa-check text-green-600"></i>
<h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
@for (insight of attentionInsights(); track insight.text) {
<div class="flex items-center gap-2 px-4 py-3 border-t border-gray-100 text-sm text-gray-700">
<i class="fa-light fa-triangle-exclamation text-red-500 flex-shrink-0"></i>
<span>{{ insight.text }}</span>
</div>
}
</div>
}

@for (action of performingActions(); track action.title) {
<div class="flex items-start gap-4 px-4 py-3 border-t border-gray-100">
<div class="flex flex-col gap-1 flex-1 min-w-0">
<span class="text-sm font-semibold text-gray-900">{{ action.title }}</span>
<p class="text-sm text-gray-500">{{ action.description }}</p>
</div>
<!-- SECOND FOLD: Performing Well -->
@if (performingActions().length > 0 || performingInsights().length > 0) {
<div
class="flex flex-col rounded-lg border border-gray-200 border-l-4 border-l-green-600 bg-white overflow-hidden"
data-testid="engaged-community-drawer-performing">
<div class="flex items-center gap-2 px-4 pt-4 pb-2">
<i class="fa-light fa-check text-green-600"></i>
<h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
</div>
}

@for (insight of performingInsights(); track insight.text) {
<div class="flex items-center gap-2 px-4 py-3 border-t border-gray-100 text-sm text-gray-700">
<i class="fa-light fa-check text-green-600 flex-shrink-0"></i>
<span>{{ insight.text }}</span>
</div>
}
</div>
@for (action of performingActions(); track action.title) {
<div class="flex items-start gap-4 px-4 py-3 border-t border-gray-100">
<div class="flex flex-col gap-1 flex-1 min-w-0">
<span class="text-sm font-semibold text-gray-900">{{ action.title }}</span>
<p class="text-sm text-gray-500">{{ action.description }}</p>
</div>
</div>
}

@for (insight of performingInsights(); track insight.text) {
<div class="flex items-center gap-2 px-4 py-3 border-t border-gray-100 text-sm text-gray-700">
<i class="fa-light fa-check text-green-600 flex-shrink-0"></i>
<span>{{ insight.text }}</span>
</div>
}
</div>
}
}

<!-- Growth Trend Chart -->
Expand Down
4 changes: 4 additions & 0 deletions ...cutive-director/components/engaged-community-drawer/engaged-community-drawer.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ export class EngagedCommunityDrawerComponent {
weeklyTrend: [],
});
// === Computed Signals ===
protected readonly hasNoData: Signal<boolean> = computed(() => {
const { totalMembers, changePercentage, monthlyData } = this.data();
return (totalMembers === 0 && monthlyData.length === 0) || (changePercentage === 0 && monthlyData.length === 0);
});
protected readonly formattedTotalMembers: Signal<string> = computed(() => formatNumber(this.data().totalMembers));
protected readonly recommendedActions: Signal<MarketingRecommendedAction[]> = this.initRecommendedActions();
protected readonly keyInsights: Signal<MarketingKeyInsight[]> = this.initKeyInsights();
Expand Down
115 changes: 65 additions & 50 deletions ...-director/components/flywheel-conversion-drawer/flywheel-conversion-drawer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,65 +61,80 @@ <h2 class="text-lg font-semibold text-gray-900" data-testid="flywheel-conversion
</lfx-card>
</div>

<!-- FIRST FOLD: Needs Your Attention -->
@if (attentionActions().length > 0 || attentionInsights().length > 0) {
@if (hasNoData()) {
<div
class="flex flex-col rounded-lg border border-gray-200 border-l-4 border-l-red-600 bg-white overflow-hidden"
data-testid="flywheel-conversion-drawer-attention">
<div class="flex items-center gap-2 px-4 pt-4 pb-2">
<i class="fa-light fa-triangle-exclamation text-red-600"></i>
<h3 class="text-sm font-semibold text-red-700">Needs Your Attention</h3>
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="flywheel-conversion-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 flywheel conversion activity detected</h3>
<p class="text-sm text-gray-500">Engage with marketing ops to activate campaigns and start tracking results.</p>
</div>
</div>

@for (action of attentionActions(); track action.title) {
<div class="flex items-start justify-between gap-4 px-4 py-3 border-t border-gray-100">
<div class="flex flex-col gap-1 flex-1 min-w-0">
<span class="text-sm font-semibold text-gray-900">{{ action.title }}</span>
<p class="text-sm text-gray-500">{{ action.description }}</p>
</div>
@if (action.priority === 'high') {
<lfx-tag value="High Priority" severity="danger" [rounded]="true" />
} @else {
<lfx-tag value="Medium Priority" severity="warn" [rounded]="true" />
}
</div>
} @else {
<!-- FIRST FOLD: Needs Your Attention -->
@if (attentionActions().length > 0 || attentionInsights().length > 0) {
<div
class="flex flex-col rounded-lg border border-gray-200 border-l-4 border-l-red-600 bg-white overflow-hidden"
data-testid="flywheel-conversion-drawer-attention">
<div class="flex items-center gap-2 px-4 pt-4 pb-2">
<i class="fa-light fa-triangle-exclamation text-red-600"></i>
<h3 class="text-sm font-semibold text-red-700">Needs Your Attention</h3>
</div>
}

@for (insight of attentionInsights(); track insight.text) {
<div class="flex items-center gap-2 px-4 py-3 border-t border-gray-100 text-sm text-gray-700">
<i class="fa-light fa-triangle-exclamation text-red-500 flex-shrink-0"></i>
<span>{{ insight.text }}</span>
</div>
}
</div>
}
@for (action of attentionActions(); track action.title) {
<div class="flex items-start justify-between gap-4 px-4 py-3 border-t border-gray-100">
<div class="flex flex-col gap-1 flex-1 min-w-0">
<span class="text-sm font-semibold text-gray-900">{{ action.title }}</span>
<p class="text-sm text-gray-500">{{ action.description }}</p>
</div>
@if (action.priority === 'high') {
<lfx-tag value="High Priority" severity="danger" [rounded]="true" />
} @else {
<lfx-tag value="Medium Priority" severity="warn" [rounded]="true" />
}
</div>
}

<!-- SECOND FOLD: Performing Well -->
@if (performingActions().length > 0 || performingInsights().length > 0) {
<div
class="flex flex-col rounded-lg border border-gray-200 border-l-4 border-l-green-600 bg-white overflow-hidden"
data-testid="flywheel-conversion-drawer-performing">
<div class="flex items-center gap-2 px-4 pt-4 pb-2">
<i class="fa-light fa-check text-green-600"></i>
<h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
@for (insight of attentionInsights(); track insight.text) {
<div class="flex items-center gap-2 px-4 py-3 border-t border-gray-100 text-sm text-gray-700">
<i class="fa-light fa-triangle-exclamation text-red-500 flex-shrink-0"></i>
<span>{{ insight.text }}</span>
</div>
}
</div>
}

@for (action of performingActions(); track action.title) {
<div class="flex items-start gap-4 px-4 py-3 border-t border-gray-100">
<div class="flex flex-col gap-1 flex-1 min-w-0">
<span class="text-sm font-semibold text-gray-900">{{ action.title }}</span>
<p class="text-sm text-gray-500">{{ action.description }}</p>
</div>
<!-- SECOND FOLD: Performing Well -->
@if (performingActions().length > 0 || performingInsights().length > 0) {
<div
class="flex flex-col rounded-lg border border-gray-200 border-l-4 border-l-green-600 bg-white overflow-hidden"
data-testid="flywheel-conversion-drawer-performing">
<div class="flex items-center gap-2 px-4 pt-4 pb-2">
<i class="fa-light fa-check text-green-600"></i>
<h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
</div>
}

@for (insight of performingInsights(); track insight.text) {
<div class="flex items-center gap-2 px-4 py-3 border-t border-gray-100 text-sm text-gray-700">
<i class="fa-light fa-check text-green-600 flex-shrink-0"></i>
<span>{{ insight.text }}</span>
</div>
}
</div>
@for (action of performingActions(); track action.title) {
<div class="flex items-start gap-4 px-4 py-3 border-t border-gray-100">
<div class="flex flex-col gap-1 flex-1 min-w-0">
<span class="text-sm font-semibold text-gray-900">{{ action.title }}</span>
<p class="text-sm text-gray-500">{{ action.description }}</p>
</div>
</div>
}

@for (insight of performingInsights(); track insight.text) {
<div class="flex items-center gap-2 px-4 py-3 border-t border-gray-100 text-sm text-gray-700">
<i class="fa-light fa-check text-green-600 flex-shrink-0"></i>
<span>{{ insight.text }}</span>
</div>
}
</div>
}
}

<!-- Re-engagement Funnel Chart -->
Expand Down
4 changes: 4 additions & 0 deletions ...ve-director/components/flywheel-conversion-drawer/flywheel-conversion-drawer.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@ export class FlywheelConversionDrawerComponent {
// === Computed Signals ===
protected readonly formattedEventAttendees: Signal<string> = computed(() => formatNumber(this.data().funnel.eventAttendees));
protected readonly reengagement: Signal<NonNullable<FlywheelConversionResponse['reengagement']>> = computed(() => getFlywheelReengagement(this.data()));
protected readonly hasNoData: Signal<boolean> = computed(() => {
const { conversionRate, funnel, monthlyData } = this.data();
return conversionRate === 0 && funnel.eventAttendees === 0 && monthlyData.length === 0;
});
protected readonly reengagementRate: Signal<string> = computed(() => `${this.reengagement().reengagementRate.toFixed(1)}%`);
protected readonly recommendedActions: Signal<MarketingRecommendedAction[]> = computed(() => buildFlywheelRecommendedActions(this.data()));
protected readonly keyInsights: Signal<MarketingKeyInsight[]> = computed(() => buildFlywheelKeyInsights(this.data()));
Expand Down
2 changes: 1 addition & 1 deletion ...ve-director/components/member-acquisition-drawer/member-acquisition-drawer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ <h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
<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 membership activity detected</h3>
<p class="text-sm text-gray-500">No member acquisition data is currently available for this foundation</p>
<p class="text-sm text-gray-500">Engage with marketing ops to activate campaigns and start tracking results.</p>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ...cutive-director/components/member-retention-drawer/member-retention-drawer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,8 @@ <h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
<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 retention data available</h3>
<p class="text-sm text-gray-500">No member retention data is currently available for this foundation</p>
<h3 class="text-sm font-semibold text-gray-900">No retention activity detected</h3>
<p class="text-sm text-gray-500">Engage with marketing ops to activate campaigns and start tracking results.</p>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...ards/executive-director/components/social-media-drawer/social-media-drawer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ <h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
<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 social media activity detected</h3>
<p class="text-sm text-gray-500">No follower or engagement data is currently available for this foundation</p>
<p class="text-sm text-gray-500">Engage with marketing ops to activate campaigns and start tracking results.</p>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions .../executive-director/components/website-visits-drawer/website-visits-drawer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,8 @@ <h3 class="text-sm font-semibold text-green-700">Performing Well</h3>
<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>
<h3 class="text-sm font-semibold text-gray-900">No website traffic detected</h3>
<p class="text-sm text-gray-500">Engage with marketing ops to activate campaigns and start tracking results.</p>
</div>
</div>
</div>
Expand Down
Loading