@eric-emg/symphiq-components 1.2.542 → 1.2.543

package/fesm2022/symphiq-components.mjs

@@ -175,14 +175,16 @@ class ModalService {
         this.modalState.next(newState);
     }
     openMetricModal(metric, charts = [], previousState, expandedSection) {
-        console.log('[ModalService.openMetricModal] Called with metric:', metric);
+        console.log('[ModalService.openMetricModal] Called with metric:', metric?.metric);
+        console.log('[ModalService.openMetricModal] Charts count:', charts.length);
+        console.log('[ModalService.openMetricModal] Chart IDs:', charts.map(c => c.performanceItemId));
         const prevStack = previousState?.navigationStack || [];
         const navigationStack = previousState ? [...prevStack, previousState] : [];
         const openedFromMainBody = !previousState;
         const newState = { type: 'metric', data: metric, charts, previousState: previousState || null, expandedSection, navigationStack, openedFromMainBody };
-        console.log('[ModalService.openMetricModal] Setting modal state:', newState);
+        console.log('[ModalService.openMetricModal] Setting modal state with charts:', newState.charts.length);
         this.modalState.next(newState);
-        console.log('[ModalService.openMetricModal] Modal state after next:', this.modalState.value);
+        console.log('[ModalService.openMetricModal] Modal state value after next, charts count:', this.modalState.value?.charts?.length);
     }
     openChartModal(chart, previousState) {
         const navigationStack = previousState ? [...(previousState.navigationStack || []), previousState] : [];
@@ -8518,6 +8520,14 @@ class MetricCardComponent {
                 }
             });
         });
+        effect(() => {
+            const metric = this.metric();
+            const chartsInput = this.charts();
+            const allChartsInput = this.allCharts();
+            console.log('[MetricCard] Metric:', metric.metric);
+            console.log('[MetricCard] charts() count:', chartsInput.length, 'IDs:', chartsInput.map(c => c.performanceItemId));
+            console.log('[MetricCard] allCharts() count:', allChartsInput.length);
+        });
     }
     animateValue(target) {
         if (this.animationFrame !== null) {
@@ -16647,6 +16657,8 @@ class ModalComponent {
                 current = current.previousState;
             }
             console.log('[FunnelAnalysisModal] Setting modalStateSignal with type:', state.type);
+            console.log('[FunnelAnalysisModal] Charts received from state:', state.charts?.length ?? 0, 'charts');
+            console.log('[FunnelAnalysisModal] Chart IDs:', state.charts?.map((c) => c.performanceItemId));
             this.modalStateSignal.set({
                 type: state.type,
                 data: data,
@@ -32835,7 +32847,7 @@ const _c0$W = a0 => ({ name: "star", source: a0 });
 const _c1$u = a0 => ({ name: "globe-americas", source: a0 });
 const _c2$m = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$i = a0 => ({ name: "information-circle", source: a0 });
-const _c4$c = a0 => ({ name: "signal", source: a0 });
+const _c4$d = a0 => ({ name: "signal", source: a0 });
 const _c5$a = a0 => ({ name: "wrench-screwdriver", source: a0 });
 function RegionCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 2);
@@ -33026,7 +33038,7 @@ function RegionCardComponent_Conditional_21_Conditional_7_Template(rf, ctx) { if
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getCompetitiveGapSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$c, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$d, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -33909,7 +33921,7 @@ const _c0$V = a0 => ({ name: "calendar-days", source: a0 });
 const _c1$t = a0 => ({ name: "chart-bar", source: a0 });
 const _c2$l = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$h = a0 => ({ name: "information-circle", source: a0 });
-const _c4$b = a0 => ({ name: "signal", source: a0 });
+const _c4$c = a0 => ({ name: "signal", source: a0 });
 const _c5$9 = a0 => ({ name: "wrench-screwdriver", source: a0 });
 function SeasonCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 2);
@@ -34108,7 +34120,7 @@ function SeasonCardComponent_Conditional_20_Conditional_7_Template(rf, ctx) { if
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getCompetitiveGapSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$b, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$c, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -34743,7 +34755,7 @@ const _c0$U = a0 => ({ name: "currency-dollar", source: a0 });
 const _c1$s = a0 => ({ name: "chart-bar", source: a0 });
 const _c2$k = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$g = a0 => ({ name: "information-circle", source: a0 });
-const _c4$a = a0 => ({ name: "signal", source: a0 });
+const _c4$b = a0 => ({ name: "signal", source: a0 });
 const _c5$8 = a0 => ({ name: "wrench-screwdriver", source: a0 });
 function CustomerSegmentCardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 8);
@@ -34951,7 +34963,7 @@ function CustomerSegmentCardComponent_Conditional_23_Conditional_11_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getCompetitiveGapSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$a, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$b, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -35102,7 +35114,7 @@ function CustomerSegmentCardComponent_Conditional_24_Conditional_7_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getCompetitiveGapSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$a, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$b, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -35859,7 +35871,7 @@ const _c0$T = a0 => ({ name: "currency-dollar", source: a0 });
 const _c1$r = a0 => ({ name: "document-text", source: a0 });
 const _c2$j = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$f = a0 => ({ name: "information-circle", source: a0 });
-const _c4$9 = a0 => ({ name: "signal", source: a0 });
+const _c4$a = a0 => ({ name: "signal", source: a0 });
 const _c5$7 = a0 => ({ name: "wrench-screwdriver", source: a0 });
 function PriceTierCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 7);
@@ -36039,7 +36051,7 @@ function PriceTierCardComponent_Conditional_27_Conditional_7_Template(rf, ctx) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getCompetitiveGapSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$9, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$a, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -36695,7 +36707,7 @@ const _c0$S = () => ({ name: "cube", source: "HEROICONS" });
 const _c1$q = () => ({ name: "currency-dollar", source: "HEROICONS" });
 const _c2$i = () => ({ name: "chart-bar", source: "HEROICONS" });
 const _c3$e = a0 => ({ name: "chart-bar", source: a0 });
-const _c4$8 = a0 => ({ name: "academic-cap", source: a0 });
+const _c4$9 = a0 => ({ name: "academic-cap", source: a0 });
 const _c5$6 = a0 => ({ name: "information-circle", source: a0 });
 const _c6$2 = a0 => ({ name: "signal", source: a0 });
 const _c7$1 = a0 => ({ name: "wrench-screwdriver", source: a0 });
@@ -36928,7 +36940,7 @@ function ProductCategoryCardComponent_Conditional_18_Conditional_5_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getCompetitiveGapSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$8, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$9, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -37851,7 +37863,7 @@ const _c0$Q = a0 => ({ name: "shield-check", source: a0 });
 const _c1$p = a0 => ({ name: "building-storefront", source: a0 });
 const _c2$h = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$d = a0 => ({ name: "information-circle", source: a0 });
-const _c4$7 = a0 => ({ name: "signal", source: a0 });
+const _c4$8 = a0 => ({ name: "signal", source: a0 });
 const _c5$5 = a0 => ({ name: "wrench-screwdriver", source: a0 });
 function EnhancedListItemCardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
@@ -37984,7 +37996,7 @@ function EnhancedListItemCardComponent_Conditional_22_Conditional_7_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.getCompetitiveGapSectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$7, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$8, ctx_r0.IconSourceEnum.HEROICONS))("ngClass", ctx_r0.getExpandedIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.getExpandedTitleClasses());
     i0.ɵɵadvance(2);
@@ -41814,7 +41826,7 @@ const ProfileAnalysisModalComponent_Conditional_0_Conditional_28_Conditional_4_D
 const ProfileAnalysisModalComponent_Conditional_0_Conditional_28_Conditional_5_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return pieChart_component; }).then(m => m.PieChartComponent)];
 const ProfileAnalysisModalComponent_Conditional_0_Conditional_28_Conditional_6_Defer_2_DepsFn = () => [Promise.resolve().then(function () { return areaChart_component; }).then(m => m.AreaChartComponent)];
 const _c3$b = a0 => ({ name: "arrow-left", source: a0 });
-const _c4$6 = a0 => ({ name: "chevron-right", source: a0 });
+const _c4$7 = a0 => ({ name: "chevron-right", source: a0 });
 const _forTrack0$H = ($index, $item) => $item.performanceItemId || $index;
 const _forTrack1$6 = ($index, $item) => $item.id || $index;
 const _forTrack2$2 = ($index, $item) => $item.metric || $index;
@@ -41848,7 +41860,7 @@ function ProfileAnalysisModalComponent_Conditional_0_Conditional_7_For_5_Conditi
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(crumb_r5.stackIndex !== undefined || crumb_r5.backSteps !== undefined ? 0 : 1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(2, _c4$6, ctx_r1.IconSourceEnum.HEROICONS));
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(2, _c4$7, ctx_r1.IconSourceEnum.HEROICONS));
 } }
 function ProfileAnalysisModalComponent_Conditional_0_Conditional_7_For_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 40);
@@ -43274,6 +43286,7 @@ class ProfileAnalysisModalComponent {
         this.modalService.modalState$
             .pipe(takeUntilDestroyed())
             .subscribe(state => {
+            console.log('[ProfileAnalysisModal] Received modal state:', state.type, state);
             // Types that this modal handles (only update previousState for these)
             const handledTypes = [
                 'goal-detail', 'goal-objectives', 'objective-strategies', 'strategy-recommendations',
@@ -43564,12 +43577,14 @@ class ProfileAnalysisModalComponent {
                 this.currentCharts.set(state.charts || []);
             }
             else if (state.type === 'metric' && state.data) {
+                console.log('[ProfileAnalysisModal] Handling metric type, opening modal');
                 const metric = state.data;
                 this.modalData.set(metric);
                 const formattedName = metric.metric ? this.metricFormatter.formatMetricName(metric.metric) : 'Metric Details';
                 this.modalTitle.set(formattedName);
                 this.modalType.set('metric');
                 this.isOpen.set(true);
+                console.log('[ProfileAnalysisModal] isOpen set to true, modalType:', this.modalType());
                 const stack = state.navigationStack || [];
                 this.navigationStack.set(stack);
                 this.currentCharts.set(state.charts || []);
@@ -44609,7 +44624,7 @@ const _c0$L = a0 => ({ name: "light-bulb", source: a0 });
 const _c1$l = a0 => ({ name: "trophy", source: a0 });
 const _c2$e = a0 => ({ name: "academic-cap", source: a0 });
 const _c3$a = a0 => ({ name: "signal", source: a0 });
-const _c4$5 = a0 => ({ name: "wrench-screwdriver", source: a0 });
+const _c4$6 = a0 => ({ name: "wrench-screwdriver", source: a0 });
 const _c5$4 = a0 => ({ name: "link", source: a0 });
 function CompetitiveGapModalComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 7);
@@ -44718,7 +44733,7 @@ function CompetitiveGapModalComponent_Conditional_13_Template(rf, ctx) { if (rf
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.sectionClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c4$5, ctx_r0.iconSource))("ngClass", ctx_r0.sectionIconClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(4, _c4$6, ctx_r0.iconSource))("ngClass", ctx_r0.sectionIconClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.sectionTitleClasses());
     i0.ɵɵadvance(3);
@@ -47004,7 +47019,7 @@ const _c0$H = ["dashboardContainer"];
 const _c1$h = () => ({});
 const _c2$c = () => [1, 2, 3, 4, 5, 6];
 const _c3$8 = () => [1, 2, 3];
-const _c4$4 = () => [1, 2, 3, 4];
+const _c4$5 = () => [1, 2, 3, 4];
 const _c5$3 = () => [1, 2];
 const _forTrack0$F = ($index, $item) => $item.value;
 function SymphiqFunnelAnalysisDashboardComponent_Conditional_7_For_6_Template(rf, ctx) { if (rf & 1) {
@@ -47686,7 +47701,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_18_Conditional_4_Co
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "80px")("height", "36px")("isLightMode", ctx_r2.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(13, _c4$4));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(13, _c4$5));
 } }
 function SymphiqFunnelAnalysisDashboardComponent_Conditional_18_Conditional_4_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 115);
@@ -47779,7 +47794,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_18_Conditional_4_Co
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c4$4));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c4$5));
 } }
 function SymphiqFunnelAnalysisDashboardComponent_Conditional_18_Conditional_4_Conditional_29_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, SymphiqFunnelAnalysisDashboardComponent_Conditional_18_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_0_Template, 3, 0, "div", 132)(1, SymphiqFunnelAnalysisDashboardComponent_Conditional_18_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_1_Template, 3, 0, "div", 133)(2, SymphiqFunnelAnalysisDashboardComponent_Conditional_18_Conditional_4_Conditional_29_For_2_Conditional_2_Conditional_2_Template, 3, 1, "div", 132);
@@ -47970,7 +47985,7 @@ function SymphiqFunnelAnalysisDashboardComponent_Conditional_18_Conditional_5_Co
     i0.ɵɵadvance();
     i0.ɵɵproperty("width", "100px")("height", "24px")("isLightMode", ctx_r2.isLightMode());
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(i0.ɵɵpureFunction0(7, _c4$4));
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(7, _c4$5));
 } }
 function SymphiqFunnelAnalysisDashboardComponent_Conditional_18_Conditional_5_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 80);
@@ -69659,7 +69674,7 @@ const _c0$u = a0 => ({ name: "chart-bar", source: a0 });
 const _c1$d = a0 => ({ name: "arrow-right", source: a0 });
 const _c2$b = a0 => ({ name: "signal", source: a0 });
 const _c3$7 = (a0, a1) => ({ name: a0, source: a1 });
-const _c4$3 = a0 => ({ name: "flag", source: a0 });
+const _c4$4 = a0 => ({ name: "flag", source: a0 });
 const _c5$2 = a0 => ({ name: "arrow-trending-up", source: a0 });
 const _c6$1 = a0 => ({ name: "heart", source: a0 });
 const _c7 = a0 => ({ name: "light-bulb", source: a0 });
@@ -69725,7 +69740,7 @@ function MetricExecutiveSummaryComponent_Conditional_15_Template(rf, ctx) { if (
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r0.metricCardClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$3, ctx_r0.iconSource))("ngClass", ctx_r0.metricLabelClasses());
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$4, ctx_r0.iconSource))("ngClass", ctx_r0.metricLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.metricLabelClasses());
     i0.ɵɵadvance(2);
@@ -69734,6 +69749,27 @@ function MetricExecutiveSummaryComponent_Conditional_15_Template(rf, ctx) { if (
     i0.ɵɵtextInterpolate1(" ", ctx_r0.summary().targetValue, " ");
 } }
 function MetricExecutiveSummaryComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12)(1, "div", 19);
+    i0.ɵɵelement(2, "symphiq-icon", 20);
+    i0.ɵɵelementStart(3, "span", 21);
+    i0.ɵɵtext(4, " Projected ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 22);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.metricCardClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c0$u, ctx_r0.iconSource))("ngClass", ctx_r0.metricLabelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.metricLabelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.metricValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.projectedValue(), " ");
+} }
+function MetricExecutiveSummaryComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12)(1, "div", 19);
     i0.ɵɵelement(2, "symphiq-icon", 20);
     i0.ɵɵelementStart(3, "span", 21);
@@ -69754,7 +69790,7 @@ function MetricExecutiveSummaryComponent_Conditional_16_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.summary().pacingStatus, " ");
 } }
-function MetricExecutiveSummaryComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12)(1, "div", 19);
     i0.ɵɵelement(2, "symphiq-icon", 20);
     i0.ɵɵelementStart(3, "span", 21);
@@ -69776,7 +69812,7 @@ function MetricExecutiveSummaryComponent_Conditional_17_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", (tmp_6_0 = ctx_r0.summary().metricHealth) == null ? null : tmp_6_0.replace("_", " "), " ");
 } }
-function MetricExecutiveSummaryComponent_Conditional_23_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_24_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 28);
     i0.ɵɵelement(1, "symphiq-napkin-visual-placeholder", 31);
     i0.ɵɵelementEnd();
@@ -69785,12 +69821,12 @@ function MetricExecutiveSummaryComponent_Conditional_23_Conditional_4_Template(r
     i0.ɵɵadvance();
     i0.ɵɵproperty("visual", ctx_r0.summary().napkinVisual)("viewMode", ctx_r0.viewMode());
 } }
-function MetricExecutiveSummaryComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16)(1, "h3", 26);
     i0.ɵɵtext(2, " Analysis Narrative ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 27);
-    i0.ɵɵconditionalCreate(4, MetricExecutiveSummaryComponent_Conditional_23_Conditional_4_Template, 2, 2, "div", 28);
+    i0.ɵɵconditionalCreate(4, MetricExecutiveSummaryComponent_Conditional_24_Conditional_4_Template, 2, 2, "div", 28);
     i0.ɵɵelementStart(5, "p", 29);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
@@ -69809,7 +69845,7 @@ function MetricExecutiveSummaryComponent_Conditional_23_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.summary().narrative, " ");
 } }
-function MetricExecutiveSummaryComponent_Conditional_24_For_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_25_For_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 40)(1, "div", 41);
     i0.ɵɵelement(2, "symphiq-icon", 42);
     i0.ɵɵelementStart(3, "div")(4, "span", 43);
@@ -69831,10 +69867,10 @@ function MetricExecutiveSummaryComponent_Conditional_24_For_5_Conditional_8_Temp
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", priority_r4.expectedImpact, " ");
 } }
-function MetricExecutiveSummaryComponent_Conditional_24_For_5_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_25_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 35);
-    i0.ɵɵlistener("click", function MetricExecutiveSummaryComponent_Conditional_24_For_5_Template_button_click_0_listener() { const ctx_r2 = i0.ɵɵrestoreView(_r2); const priority_r4 = ctx_r2.$implicit; const $index_r5 = ctx_r2.$index; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.priorityDetailClick.emit({ priority: priority_r4, index: $index_r5 })); });
+    i0.ɵɵlistener("click", function MetricExecutiveSummaryComponent_Conditional_25_For_5_Template_button_click_0_listener() { const ctx_r2 = i0.ɵɵrestoreView(_r2); const priority_r4 = ctx_r2.$implicit; const $index_r5 = ctx_r2.$index; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.priorityDetailClick.emit({ priority: priority_r4, index: $index_r5 })); });
     i0.ɵɵelementStart(1, "div", 36)(2, "span", 37);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
@@ -69844,7 +69880,7 @@ function MetricExecutiveSummaryComponent_Conditional_24_For_5_Template(rf, ctx)
     i0.ɵɵelementStart(6, "p", 39);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, MetricExecutiveSummaryComponent_Conditional_24_For_5_Conditional_8_Template, 8, 8, "div", 40);
+    i0.ɵɵconditionalCreate(8, MetricExecutiveSummaryComponent_Conditional_25_For_5_Conditional_8_Template, 8, 8, "div", 40);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const priority_r4 = ctx.$implicit;
@@ -69866,12 +69902,12 @@ function MetricExecutiveSummaryComponent_Conditional_24_For_5_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵconditional(priority_r4.expectedImpact ? 8 : -1);
 } }
-function MetricExecutiveSummaryComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 17)(1, "h3", 32);
     i0.ɵɵtext(2, "Top Priorities");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 33);
-    i0.ɵɵrepeaterCreate(4, MetricExecutiveSummaryComponent_Conditional_24_For_5_Template, 9, 8, "button", 34, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(4, MetricExecutiveSummaryComponent_Conditional_25_For_5_Template, 9, 8, "button", 34, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -69880,7 +69916,7 @@ function MetricExecutiveSummaryComponent_Conditional_24_Template(rf, ctx) { if (
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r0.summary().topPriorities);
 } }
-function MetricExecutiveSummaryComponent_Conditional_25_For_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_26_For_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 53);
     i0.ɵɵelement(1, "symphiq-icon", 15);
     i0.ɵɵelementStart(2, "span");
@@ -69895,7 +69931,7 @@ function MetricExecutiveSummaryComponent_Conditional_25_For_5_Conditional_12_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(win_r6.estimatedTimeframe);
 } }
-function MetricExecutiveSummaryComponent_Conditional_25_For_5_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_26_For_5_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 54)(1, "h4", 21);
     i0.ɵɵtext(2, " Related Goal ");
     i0.ɵɵelementEnd();
@@ -69909,7 +69945,7 @@ function MetricExecutiveSummaryComponent_Conditional_25_For_5_Conditional_13_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("relatedGoalIds", i0.ɵɵpureFunction1(4, _c9, win_r6.relatedGoalId))("allGoals", ctx_r0.allGoals() || i0.ɵɵpureFunction0(6, _c10))("viewMode", ctx_r0.viewMode());
 } }
-function MetricExecutiveSummaryComponent_Conditional_25_For_5_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_26_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 47)(1, "div", 48)(2, "div", 49)(3, "span", 37);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
@@ -69922,8 +69958,8 @@ function MetricExecutiveSummaryComponent_Conditional_25_For_5_Template(rf, ctx)
     i0.ɵɵelementStart(10, "span", 52);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(12, MetricExecutiveSummaryComponent_Conditional_25_For_5_Conditional_12_Template, 4, 5, "div", 53);
-    i0.ɵɵconditionalCreate(13, MetricExecutiveSummaryComponent_Conditional_25_For_5_Conditional_13_Template, 4, 7, "div", 54);
+    i0.ɵɵconditionalCreate(12, MetricExecutiveSummaryComponent_Conditional_26_For_5_Conditional_12_Template, 4, 5, "div", 53);
+    i0.ɵɵconditionalCreate(13, MetricExecutiveSummaryComponent_Conditional_26_For_5_Conditional_13_Template, 4, 7, "div", 54);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const win_r6 = ctx.$implicit;
@@ -69951,12 +69987,12 @@ function MetricExecutiveSummaryComponent_Conditional_25_For_5_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵconditional(win_r6.relatedGoalId && ctx_r0.allGoals() ? 13 : -1);
 } }
-function MetricExecutiveSummaryComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 18)(1, "h3", 45);
     i0.ɵɵtext(2, "Quick Wins");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 46);
-    i0.ɵɵrepeaterCreate(4, MetricExecutiveSummaryComponent_Conditional_25_For_5_Template, 14, 11, "div", 47, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(4, MetricExecutiveSummaryComponent_Conditional_26_For_5_Template, 14, 11, "div", 47, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -69976,6 +70012,7 @@ class MetricExecutiveSummaryComponent {
         this.viewMetricDetailsClick = output();
         this.iconSource = IconSourceEnum.HEROICONS;
         this.isDark = computed(() => this.viewMode() === ViewModeEnum.DARK, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+        this.projectedValue = computed(() => this.summary().projectedValue, ...(ngDevMode ? [{ debugName: "projectedValue" }] : []));
         this.bannerClasses = computed(() => this.isDark()
             ? 'bg-gradient-to-br from-slate-800/50 to-slate-800/30 border border-slate-700/50'
             : 'bg-gradient-to-br from-white to-slate-50/50 border border-slate-200', ...(ngDevMode ? [{ debugName: "bannerClasses" }] : []));
@@ -70065,7 +70102,9 @@ class MetricExecutiveSummaryComponent {
     }
     handleViewMetricDetailsClick() {
         console.log('[MetricExecutiveSummary] View Metric Details button clicked!');
+        console.log('[MetricExecutiveSummary] viewMetricDetailsClick output exists:', !!this.viewMetricDetailsClick);
         this.viewMetricDetailsClick.emit();
+        console.log('[MetricExecutiveSummary] Event emitted');
     }
     getYoyIcon() {
         const change = this.summary().yoyChange;
@@ -70158,7 +70197,7 @@ class MetricExecutiveSummaryComponent {
         return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
     }
     static { this.ɵfac = function MetricExecutiveSummaryComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MetricExecutiveSummaryComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricExecutiveSummaryComponent, selectors: [["symphiq-metric-executive-summary"]], inputs: { viewMode: [1, "viewMode"], summary: [1, "summary"], metricName: [1, "metricName"], allGoals: [1, "allGoals"] }, outputs: { topPrioritiesClick: "topPrioritiesClick", priorityDetailClick: "priorityDetailClick", viewMetricDetailsClick: "viewMetricDetailsClick" }, decls: 26, vars: 22, consts: [["id", "section-metric-executive-summary", 1, "space-y-6", "scroll-mt-24"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-3", "mb-3"], [3, "icon", "size", "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], ["type", "button", 1, "w-full", "text-left", "cursor-pointer", "group", 3, "click"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-4", "gap-4"], [1, "rounded-xl", "p-4", "transition-all", "duration-200", "group-hover:scale-[1.02]", "group-hover:shadow-lg", 3, "ngClass"], [1, "flex", "items-center", "justify-center", "mt-4"], [1, "inline-flex", "items-center", "gap-2", "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "duration-200", "group-hover:scale-105", 3, "ngClass"], ["size", "w-4 h-4", 3, "icon"], [1, "rounded-xl", "p-6", "mt-6", 3, "ngClass"], [1, "mt-6"], ["id", "quick-wins-section", 1, "mt-8", "scroll-mt-24"], [1, "flex", "items-center", "gap-2", "mb-2"], ["size", "w-4 h-4", 3, "icon", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "flex", "items-center", "gap-1", "mt-2"], [1, "text-sm", "font-medium", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4"], ["type", "button", 1, "rounded-xl", "p-6", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", 3, "ngClass"], ["type", "button", 1, "rounded-xl", "p-6", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", 3, "click", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "text-lg", "font-semibold", "flex-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-3", 3, "ngClass"], [1, "rounded-lg", "p-3", 3, "ngClass"], [1, "flex", "items-start", "gap-2"], ["size", "w-4 h-4", 1, "mt-0.5", 3, "icon", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "block", "mb-1", 3, "ngClass"], [1, "text-xs", "leading-relaxed", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], [3, "relatedGoalIds", "allGoals", "viewMode"]], template: function MetricExecutiveSummaryComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MetricExecutiveSummaryComponent, selectors: [["symphiq-metric-executive-summary"]], inputs: { viewMode: [1, "viewMode"], summary: [1, "summary"], metricName: [1, "metricName"], allGoals: [1, "allGoals"] }, outputs: { topPrioritiesClick: "topPrioritiesClick", priorityDetailClick: "priorityDetailClick", viewMetricDetailsClick: "viewMetricDetailsClick" }, decls: 27, vars: 23, consts: [["id", "section-metric-executive-summary", 1, "space-y-6", "scroll-mt-24"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-3", "mb-3"], [3, "icon", "size", "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], ["type", "button", 1, "w-full", "text-left", "cursor-pointer", "group", 3, "click"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-4", "gap-4"], [1, "rounded-xl", "p-4", "transition-all", "duration-200", "group-hover:scale-[1.02]", "group-hover:shadow-lg", 3, "ngClass"], [1, "flex", "items-center", "justify-center", "mt-4"], [1, "inline-flex", "items-center", "gap-2", "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "duration-200", "group-hover:scale-105", 3, "ngClass"], ["size", "w-4 h-4", 3, "icon"], [1, "rounded-xl", "p-6", "mt-6", 3, "ngClass"], [1, "mt-6"], ["id", "quick-wins-section", 1, "mt-8", "scroll-mt-24"], [1, "flex", "items-center", "gap-2", "mb-2"], ["size", "w-4 h-4", 3, "icon", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "flex", "items-center", "gap-1", "mt-2"], [1, "text-sm", "font-medium", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", "mb-4", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-4"], ["type", "button", 1, "rounded-xl", "p-6", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", 3, "ngClass"], ["type", "button", 1, "rounded-xl", "p-6", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "cursor-pointer", 3, "click", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "text-lg", "font-semibold", "flex-1", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-3", 3, "ngClass"], [1, "rounded-lg", "p-3", 3, "ngClass"], [1, "flex", "items-start", "gap-2"], ["size", "w-4 h-4", 1, "mt-0.5", 3, "icon", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "block", "mb-1", 3, "ngClass"], [1, "text-xs", "leading-relaxed", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], [3, "relatedGoalIds", "allGoals", "viewMode"]], template: function MetricExecutiveSummaryComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "section", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4)(5, "div", 5);
             i0.ɵɵelement(6, "symphiq-icon", 6);
             i0.ɵɵelementStart(7, "h2", 7);
@@ -70176,23 +70215,24 @@ class MetricExecutiveSummaryComponent {
             i0.ɵɵconditionalCreate(15, MetricExecutiveSummaryComponent_Conditional_15_Template, 7, 8, "div", 12);
             i0.ɵɵconditionalCreate(16, MetricExecutiveSummaryComponent_Conditional_16_Template, 7, 8, "div", 12);
             i0.ɵɵconditionalCreate(17, MetricExecutiveSummaryComponent_Conditional_17_Template, 7, 8, "div", 12);
+            i0.ɵɵconditionalCreate(18, MetricExecutiveSummaryComponent_Conditional_18_Template, 7, 8, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 13)(19, "div", 14)(20, "span");
-            i0.ɵɵtext(21, "View Metric Details");
+            i0.ɵɵelementStart(19, "div", 13)(20, "div", 14)(21, "span");
+            i0.ɵɵtext(22, "View Metric Details");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(22, "symphiq-icon", 15);
+            i0.ɵɵelement(23, "symphiq-icon", 15);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(23, MetricExecutiveSummaryComponent_Conditional_23_Template, 8, 5, "div", 16);
-            i0.ɵɵconditionalCreate(24, MetricExecutiveSummaryComponent_Conditional_24_Template, 6, 1, "div", 17);
-            i0.ɵɵconditionalCreate(25, MetricExecutiveSummaryComponent_Conditional_25_Template, 6, 1, "div", 18);
+            i0.ɵɵconditionalCreate(24, MetricExecutiveSummaryComponent_Conditional_24_Template, 8, 5, "div", 16);
+            i0.ɵɵconditionalCreate(25, MetricExecutiveSummaryComponent_Conditional_25_Template, 6, 1, "div", 17);
+            i0.ɵɵconditionalCreate(26, MetricExecutiveSummaryComponent_Conditional_26_Template, 6, 1, "div", 18);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            let tmp_16_0;
             let tmp_17_0;
+            let tmp_18_0;
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.bannerClasses());
             i0.ɵɵadvance(5);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(18, _c0$u, ctx.iconSource))("size", "w-8 h-8")("ngClass", ctx.iconClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(19, _c0$u, ctx.iconSource))("size", "w-8 h-8")("ngClass", ctx.iconClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
             i0.ɵɵadvance();
@@ -70208,19 +70248,21 @@ class MetricExecutiveSummaryComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.summary().targetValue ? 15 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.summary().pacingStatus ? 16 : -1);
+            i0.ɵɵconditional(ctx.projectedValue() ? 16 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.summary().metricHealth ? 17 : -1);
+            i0.ɵɵconditional(ctx.summary().pacingStatus ? 17 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.summary().metricHealth ? 18 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.viewDetailsButtonClasses());
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(20, _c1$d, ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(21, _c1$d, ctx.iconSource));
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.summary().narrative ? 23 : -1);
+            i0.ɵɵconditional(ctx.summary().narrative ? 24 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.summary().topPriorities && (((tmp_16_0 = ctx.summary().topPriorities) == null ? null : tmp_16_0.length) ?? 0) > 0 ? 24 : -1);
+            i0.ɵɵconditional(ctx.summary().topPriorities && (((tmp_17_0 = ctx.summary().topPriorities) == null ? null : tmp_17_0.length) ?? 0) > 0 ? 25 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.summary().quickWins && (((tmp_17_0 = ctx.summary().quickWins) == null ? null : tmp_17_0.length) ?? 0) > 0 ? 25 : -1);
+            i0.ɵɵconditional(ctx.summary().quickWins && (((tmp_18_0 = ctx.summary().quickWins) == null ? null : tmp_18_0.length) ?? 0) > 0 ? 26 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, GradeBadgeComponent,
             SymphiqIconComponent,
             NapkinVisualPlaceholderComponent,
@@ -70328,6 +70370,25 @@ class MetricExecutiveSummaryComponent {
               </div>
             }
 
+            <!-- Projected Value -->
+            @if (projectedValue()) {
+              <div [ngClass]="metricCardClasses()" class="rounded-xl p-4 transition-all duration-200 group-hover:scale-[1.02] group-hover:shadow-lg">
+                <div class="flex items-center gap-2 mb-2">
+                  <symphiq-icon
+                    [icon]="{ name: 'chart-bar', source: iconSource }"
+                    size="w-4 h-4"
+                    [ngClass]="metricLabelClasses()"
+                  />
+                  <span [ngClass]="metricLabelClasses()" class="text-xs font-semibold uppercase tracking-wider">
+                    Projected
+                  </span>
+                </div>
+                <div [ngClass]="metricValueClasses()" class="text-2xl font-bold">
+                  {{ projectedValue() }}
+                </div>
+              </div>
+            }
+
             <!-- Pacing Status -->
             @if (summary().pacingStatus) {
               <div [ngClass]="metricCardClasses()" class="rounded-xl p-4 transition-all duration-200 group-hover:scale-[1.02] group-hover:shadow-lg">
@@ -70515,7 +70576,7 @@ class MetricExecutiveSummaryComponent {
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: true }] }], metricName: [{ type: i0.Input, args: [{ isSignal: true, alias: "metricName", required: false }] }], allGoals: [{ type: i0.Input, args: [{ isSignal: true, alias: "allGoals", required: false }] }], topPrioritiesClick: [{ type: i0.Output, args: ["topPrioritiesClick"] }], priorityDetailClick: [{ type: i0.Output, args: ["priorityDetailClick"] }], viewMetricDetailsClick: [{ type: i0.Output, args: ["viewMetricDetailsClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricExecutiveSummaryComponent, { className: "MetricExecutiveSummaryComponent", filePath: "lib/components/profile-analysis-shop-dashboard/metric-executive-summary.component.ts", lineNumber: 295 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricExecutiveSummaryComponent, { className: "MetricExecutiveSummaryComponent", filePath: "lib/components/profile-analysis-shop-dashboard/metric-executive-summary.component.ts", lineNumber: 314 }); })();
 
 const _c0$t = a0 => ({ name: "chevron-right", source: a0 });
 function GoalCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
@@ -74915,6 +74976,28 @@ const _c0$l = (a0, a1) => ({ name: a0, source: a1 });
 const _c1$9 = a0 => ({ name: "signal", source: a0 });
 const _c2$9 = a0 => ({ name: "calendar", source: a0 });
 const _c3$5 = a0 => ({ name: "flag", source: a0 });
+const _c4$3 = a0 => ({ name: "chart-bar", source: a0 });
+function PerformanceMetricsCardComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 9);
+    i0.ɵɵelement(2, "symphiq-icon", 10);
+    i0.ɵɵelementStart(3, "span", 11);
+    i0.ɵɵtext(4, " Projected ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 12);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.metricBoxClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(6, _c4$3, ctx_r0.iconSource))("ngClass", ctx_r0.labelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.labelClasses());
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.valueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.metrics().projectedValue, " ");
+} }
 class PerformanceMetricsCardComponent {
     constructor() {
         this.metrics = signal({
@@ -74923,7 +75006,8 @@ class PerformanceMetricsCardComponent {
             targetValue: '0',
             pacingStatus: PacingStatusEnum.ON_TRACK,
             percentToTarget: '0%',
-            trendDirection: ProfileAnalysisTrendDirectionEnum.STABLE
+            trendDirection: ProfileAnalysisTrendDirectionEnum.STABLE,
+            projectedValue: undefined
         }, ...(ngDevMode ? [{ debugName: "metrics" }] : []));
         this.viewMode = signal(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.iconSource = IconSourceEnum.HEROICONS;
@@ -75058,13 +75142,15 @@ class PerformanceMetricsCardComponent {
         effect(() => {
             const val = this.performanceMetrics();
             if (val) {
+                const valWithProjected = val;
                 this.metrics.set({
                     currentValue: val.currentValue ?? '0',
                     previousYearValue: val.previousYearValue ?? '0',
                     targetValue: val.targetValue ?? '0',
                     pacingStatus: val.pacingStatus ?? PacingStatusEnum.ON_TRACK,
                     percentToTarget: val.percentToTarget ?? '0%',
-                    trendDirection: val.trendDirection ?? ProfileAnalysisTrendDirectionEnum.STABLE
+                    trendDirection: val.trendDirection ?? ProfileAnalysisTrendDirectionEnum.STABLE,
+                    projectedValue: valWithProjected.projectedValue
                 });
             }
         });
@@ -75073,7 +75159,7 @@ class PerformanceMetricsCardComponent {
         });
     }
     static { this.ɵfac = function PerformanceMetricsCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PerformanceMetricsCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PerformanceMetricsCardComponent, selectors: [["symphiq-performance-metrics-card"]], inputs: { performanceMetrics: [1, "performanceMetrics"], mode: [1, "mode"] }, decls: 40, vars: 41, consts: [[1, "rounded-xl", "p-6", "shadow-lg", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-bold", "uppercase", "tracking-wider", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-bold", "uppercase", "tracking-wider", "flex", "items-center", "gap-1", 3, "ngClass"], ["size", "w-3 h-3", 3, "icon"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], [1, "rounded-lg", "p-4", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-2"], ["size", "w-4 h-4", 3, "icon", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mt-6"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "w-full", "h-3", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "rounded-full", "transition-all", "duration-500", 3, "ngClass"]], template: function PerformanceMetricsCardComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PerformanceMetricsCardComponent, selectors: [["symphiq-performance-metrics-card"]], inputs: { performanceMetrics: [1, "performanceMetrics"], mode: [1, "mode"] }, decls: 41, vars: 42, consts: [[1, "rounded-xl", "p-6", "shadow-lg", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "flex", "items-center", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-bold", "uppercase", "tracking-wider", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-bold", "uppercase", "tracking-wider", "flex", "items-center", "gap-1", 3, "ngClass"], ["size", "w-3 h-3", 3, "icon"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-4", "gap-4"], [1, "rounded-lg", "p-4", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "mb-2"], ["size", "w-4 h-4", 3, "icon", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mt-6"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "text-sm", "font-semibold", 3, "ngClass"], [1, "w-full", "h-3", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "rounded-full", "transition-all", "duration-500", 3, "ngClass"]], template: function PerformanceMetricsCardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3", 2);
             i0.ɵɵtext(3, " Performance Metrics ");
             i0.ɵɵelementEnd();
@@ -75107,15 +75193,17 @@ class PerformanceMetricsCardComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(30, "div", 12);
             i0.ɵɵtext(31);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(32, "div", 13)(33, "div", 14)(34, "span", 15);
-            i0.ɵɵtext(35, " Progress to Target ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵconditionalCreate(32, PerformanceMetricsCardComponent_Conditional_32_Template, 7, 8, "div", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(36, "span", 2);
-            i0.ɵɵtext(37);
+            i0.ɵɵelementStart(33, "div", 13)(34, "div", 14)(35, "span", 15);
+            i0.ɵɵtext(36, " Progress to Target ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(37, "span", 2);
+            i0.ɵɵtext(38);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(38, "div", 16);
-            i0.ɵɵelement(39, "div", 17);
+            i0.ɵɵelementStart(39, "div", 16);
+            i0.ɵɵelement(40, "div", 17);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.cardClasses());
@@ -75128,13 +75216,13 @@ class PerformanceMetricsCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.trendBadgeClasses());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(32, _c0$l, ctx.trendIcon(), ctx.iconSource));
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction2(33, _c0$l, ctx.trendIcon(), ctx.iconSource));
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.metrics().trendDirection, " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.metricBoxClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(35, _c1$9, ctx.iconSource))("ngClass", ctx.labelClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(36, _c1$9, ctx.iconSource))("ngClass", ctx.labelClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.labelClasses());
             i0.ɵɵadvance(2);
@@ -75144,7 +75232,7 @@ class PerformanceMetricsCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.metricBoxClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(37, _c2$9, ctx.iconSource))("ngClass", ctx.labelClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(38, _c2$9, ctx.iconSource))("ngClass", ctx.labelClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.labelClasses());
             i0.ɵɵadvance(2);
@@ -75154,13 +75242,15 @@ class PerformanceMetricsCardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.metricBoxClasses());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(39, _c3$5, ctx.iconSource))("ngClass", ctx.labelClasses());
+            i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(40, _c3$5, ctx.iconSource))("ngClass", ctx.labelClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.labelClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.valueClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.metrics().targetValue, " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.metrics().projectedValue ? 32 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngClass", ctx.labelClasses());
             i0.ɵɵadvance(2);
@@ -75200,7 +75290,7 @@ class PerformanceMetricsCardComponent {
       </div>
 
       <!-- Metrics Grid -->
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
         <!-- Current Value -->
         <div [ngClass]="metricBoxClasses()" class="rounded-lg p-4">
           <div class="flex items-center gap-2 mb-2">
@@ -75251,6 +75341,25 @@ class PerformanceMetricsCardComponent {
             {{ metrics().targetValue }}
           </div>
         </div>
+
+        <!-- Projected Value -->
+        @if (metrics().projectedValue) {
+          <div [ngClass]="metricBoxClasses()" class="rounded-lg p-4">
+            <div class="flex items-center gap-2 mb-2">
+              <symphiq-icon
+                [icon]="{ name: 'chart-bar', source: iconSource }"
+                size="w-4 h-4"
+                [ngClass]="labelClasses()"
+              />
+              <span [ngClass]="labelClasses()" class="text-xs font-semibold uppercase tracking-wider">
+                Projected
+              </span>
+            </div>
+            <div [ngClass]="valueClasses()" class="text-2xl font-bold">
+              {{ metrics().projectedValue }}
+            </div>
+          </div>
+        }
       </div>
 
       <!-- Progress to Target -->
@@ -75274,7 +75383,7 @@ class PerformanceMetricsCardComponent {
     </div>
   `, styles: ["@keyframes pulse-glow{0%,to{box-shadow:0 0 #ef4444b3}50%{box-shadow:0 0 0 8px #ef444400}}.pulse-critical{animation:pulse-glow 2s infinite}@keyframes badge-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.badge-pulse{animation:badge-pulse 2s infinite}\n"] }]
     }], () => [], { performanceMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "performanceMetrics", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerformanceMetricsCardComponent, { className: "PerformanceMetricsCardComponent", filePath: "lib/components/profile-analysis-shop-dashboard/cards/performance-metrics-card.component.ts", lineNumber: 138 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PerformanceMetricsCardComponent, { className: "PerformanceMetricsCardComponent", filePath: "lib/components/profile-analysis-shop-dashboard/cards/performance-metrics-card.component.ts", lineNumber: 157 }); })();
 
 const _c0$k = a0 => ({ name: "funnel", source: a0 });
 const _c1$8 = a0 => ({ name: "chart-bar-square", source: a0 });
@@ -100364,25 +100473,36 @@ class SymphiqProfileAnalysisMetricDashboardComponent {
     chartsForMetric(metric) {
         const metricId = metric.performanceItemId;
         const metricName = metric.metric;
-        if (!metricId && !metricName)
+        console.log('[chartsForMetric] Called with metric:', metricName, 'performanceItemId:', metricId);
+        if (!metricId && !metricName) {
+            console.log('[chartsForMetric] No metricId or metricName, returning empty');
             return [];
+        }
         const allCharts = this.allCharts();
+        console.log('[chartsForMetric] Total allCharts:', allCharts.length);
+        console.log('[chartsForMetric] Chart performanceItemIds:', allCharts.map(c => c.performanceItemId));
         const matchingCharts = [];
+        const metricNameLower = metricName?.toLowerCase() || '';
+        const metricNameNormalized = metricNameLower.replace(/\s+/g, '_');
+        console.log('[chartsForMetric] metricNameNormalized:', metricNameNormalized);
         for (const chart of allCharts) {
             const chartId = chart.performanceItemId || '';
             const chartIdLower = chartId.toLowerCase();
-            const metricNameLower = metricName?.toLowerCase() || '';
             if (metricId) {
                 const prefix = metricId + '_';
                 if (chartId === metricId || chartId.startsWith(prefix)) {
+                    console.log('[chartsForMetric] Matched by metricId:', chartId);
                     matchingCharts.push(chart);
                     continue;
                 }
             }
-            if (metricName && chartIdLower.includes(metricNameLower.replace(/_/g, ' ').replace(/ /g, '_'))) {
+            if (metricName && chartIdLower.includes(metricNameNormalized)) {
+                console.log('[chartsForMetric] Matched by name:', chartId, 'contains', metricNameNormalized);
                 matchingCharts.push(chart);
             }
         }
+        console.log('[chartsForMetric] Matching charts count:', matchingCharts.length);
+        console.log('[chartsForMetric] Matching chart IDs:', matchingCharts.map(c => c.performanceItemId));
         return matchingCharts;
     }
     handleViewMetricDetailsClick() {
@@ -100406,8 +100526,10 @@ class SymphiqProfileAnalysisMetricDashboardComponent {
         console.log('[ViewMetricDetails] Found metric in allMetrics:', metric);
         if (metric) {
             console.log('[ViewMetricDetails] Opening modal with metric from allMetrics');
+            console.log('[ViewMetricDetails] Metric performanceItemId:', metric.performanceItemId);
             const charts = this.chartsForMetric(metric);
             console.log('[ViewMetricDetails] Filtered charts count:', charts.length);
+            console.log('[ViewMetricDetails] Filtered chart IDs:', charts.map((c) => c.performanceItemId));
             this.modalService.openMetricModal(metric, charts);
         }
         else {
@@ -100421,8 +100543,10 @@ class SymphiqProfileAnalysisMetricDashboardComponent {
                     description: summary.gradeRationale
                 };
                 console.log('[ViewMetricDetails] Opening modal with constructed metric:', constructedMetric);
+                console.log('[ViewMetricDetails] Constructed metric performanceItemId:', constructedMetric.performanceItemId);
                 const charts = this.chartsForMetric(constructedMetric);
                 console.log('[ViewMetricDetails] Filtered charts count:', charts.length);
+                console.log('[ViewMetricDetails] Filtered chart IDs:', charts.map((c) => c.performanceItemId));
                 this.modalService.openMetricModal(constructedMetric, charts);
             }
             else {