@eric-emg/symphiq-components 1.2.542 → 1.2.544

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" }] : []));
@@ -70062,10 +70099,13 @@ class MetricExecutiveSummaryComponent {
             : 'bg-blue-100 text-blue-800', ...(ngDevMode ? [{ debugName: "numberBadgeClasses" }] : []));
         this.quickWinTextClasses = computed(() => this.isDark() ? 'text-slate-100' : 'text-slate-900', ...(ngDevMode ? [{ debugName: "quickWinTextClasses" }] : []));
         this.metaTextClasses = computed(() => this.isDark() ? 'text-slate-400' : 'text-slate-600', ...(ngDevMode ? [{ debugName: "metaTextClasses" }] : []));
+        console.log('[MetricExecutiveSummary] Component constructed - button should be clickable!');
     }
     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 +70198,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 +70216,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 +70249,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().pacingStatus ? 17 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.summary().metricHealth ? 17 : -1);
+            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 +70371,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">
@@ -70514,8 +70576,8 @@ class MetricExecutiveSummaryComponent {
     </section>
   `
             }]
-    }], 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 }); })();
+    }], () => [], { 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: 314 }); })();
 
 const _c0$t = a0 => ({ name: "chevron-right", source: a0 });
 function GoalCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
@@ -74915,6 +74977,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 +75007,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 +75143,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 +75160,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 +75194,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 +75217,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 +75233,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 +75243,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 +75291,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 +75342,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 +75384,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 });
@@ -92780,7 +92890,7 @@ function SymphiqProfileShopAnalysisDashboardComponent_Conditional_10_Conditional
 function SymphiqProfileShopAnalysisDashboardComponent_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "symphiq-metric-executive-summary", 92);
-    i0.ɵɵlistener("topPrioritiesClick", function SymphiqProfileShopAnalysisDashboardComponent_Conditional_10_Conditional_1_Template_symphiq_metric_executive_summary_topPrioritiesClick_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleMetricTopPrioritiesClick()); })("priorityDetailClick", function SymphiqProfileShopAnalysisDashboardComponent_Conditional_10_Conditional_1_Template_symphiq_metric_executive_summary_priorityDetailClick_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleMetricPriorityDetailClick($event)); });
+    i0.ɵɵlistener("topPrioritiesClick", function SymphiqProfileShopAnalysisDashboardComponent_Conditional_10_Conditional_1_Template_symphiq_metric_executive_summary_topPrioritiesClick_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleMetricTopPrioritiesClick()); })("priorityDetailClick", function SymphiqProfileShopAnalysisDashboardComponent_Conditional_10_Conditional_1_Template_symphiq_metric_executive_summary_priorityDetailClick_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleMetricPriorityDetailClick($event)); })("viewMetricDetailsClick", function SymphiqProfileShopAnalysisDashboardComponent_Conditional_10_Conditional_1_Template_symphiq_metric_executive_summary_viewMetricDetailsClick_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleMetricViewDetailsClick()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -93643,6 +93753,66 @@ class SymphiqProfileShopAnalysisDashboardComponent {
             this.modalService.navigateToTopPriorityDetail(priority, index, this.viewMode(), metricName, totalCount);
         }
     }
+    handleMetricViewDetailsClick() {
+        console.log('[ShopDashboard.ViewMetricDetails] Handler called');
+        const summary = this.metricExecutiveSummary();
+        const metricKey = summary?.metric || this.metricName();
+        console.log('[ShopDashboard.ViewMetricDetails] metricKey:', metricKey);
+        if (!metricKey) {
+            console.log('[ShopDashboard.ViewMetricDetails] No metricKey found, returning early');
+            return;
+        }
+        const allMetricsArr = this.allMetrics();
+        console.log('[ShopDashboard.ViewMetricDetails] allMetrics count:', allMetricsArr.length);
+        const metric = allMetricsArr.find(m => m.metric === metricKey);
+        console.log('[ShopDashboard.ViewMetricDetails] Found metric:', metric?.metric);
+        if (metric) {
+            const charts = this.chartsForMetric(metric);
+            console.log('[ShopDashboard.ViewMetricDetails] Filtered charts count:', charts.length);
+            this.modalService.openMetricModal(metric, charts);
+        }
+        else if (summary) {
+            const constructedMetric = {
+                metric: metricKey,
+                currentValue: typeof summary.currentValue === 'string' ? parseFloat(summary.currentValue) || 0 : (summary.currentValue ?? 0),
+                targetValue: typeof summary.targetValue === 'string' ? parseFloat(summary.targetValue) || 0 : (summary.targetValue ?? 0),
+                description: summary.gradeRationale
+            };
+            console.log('[ShopDashboard.ViewMetricDetails] Using constructed metric');
+            const charts = this.chartsForMetric(constructedMetric);
+            console.log('[ShopDashboard.ViewMetricDetails] Filtered charts count:', charts.length);
+            this.modalService.openMetricModal(constructedMetric, charts);
+        }
+    }
+    chartsForMetric(metric) {
+        const metricId = metric.performanceItemId;
+        const metricName = metric.metric;
+        console.log('[ShopDashboard.chartsForMetric] Called with metric:', metricName, 'performanceItemId:', metricId);
+        if (!metricId && !metricName) {
+            return [];
+        }
+        const allChartsArr = this.allCharts();
+        console.log('[ShopDashboard.chartsForMetric] Total allCharts:', allChartsArr.length);
+        const matchingCharts = [];
+        const metricNameLower = metricName?.toLowerCase() || '';
+        const metricNameNormalized = metricNameLower.replace(/\s+/g, '_');
+        for (const chart of allChartsArr) {
+            const chartId = chart.performanceItemId || '';
+            const chartIdLower = chartId.toLowerCase();
+            if (metricId) {
+                const prefix = metricId + '_';
+                if (chartId === metricId || chartId.startsWith(prefix)) {
+                    matchingCharts.push(chart);
+                    continue;
+                }
+            }
+            if (metricName && chartIdLower.includes(metricNameNormalized)) {
+                matchingCharts.push(chart);
+            }
+        }
+        console.log('[ShopDashboard.chartsForMetric] Matching charts count:', matchingCharts.length);
+        return matchingCharts;
+    }
     getCurrentModalState() {
         return {
             type: this.modalType(),
@@ -93985,7 +94155,7 @@ class SymphiqProfileShopAnalysisDashboardComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.planSelectionContainer = _t.first);
         } }, hostBindings: function SymphiqProfileShopAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqProfileShopAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileShop: [1, "profileShop"], profileShopQuestions: [1, "profileShopQuestions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], itemStatusProfileShop: [1, "itemStatusProfileShop"], itemStatusProfileAnalysis: [1, "itemStatusProfileAnalysis"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], currentUser: [1, "currentUser"], maxAccessibleStepId: [1, "maxAccessibleStepId"], isMarkingAsReviewed: [1, "isMarkingAsReviewed"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", checkoutPlanClick: "checkoutPlanClick", answerShopProfileQuestions: "answerShopProfileQuestions", continueShopProfileQuestions: "continueShopProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave", shopProfileAdminAnswerAction: "shopProfileAdminAnswerAction", markAsReviewedClick: "markAsReviewedClick" }, features: [i0.ɵɵNgOnChangesFeature], decls: 31, vars: 58, consts: [["shopProfileStatusCard", ""], ["planSelectionContainer", ""], [1, "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate", "showControls"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "expandedRecommendationId", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "viewMode", "totalQuestions", "answeredQuestions", "buttonConfig"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "markAsReviewedClick", "viewMode", "reviewStatus", "selfContentStatus", "isMarkingAsReviewed"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "mb-12"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "metricName", "isOnboarded"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", "backdrop-blur-sm", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "justify-center", "space-y-4"], ["size", "large", 3, "viewMode"], [1, "text-center"], [1, "text-lg", "font-semibold", "mb-1", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "mb-8"], [3, "startCategoryQuestions", "answerSave", "adminAnswerAction", "viewMode", "totalQuestions", "answeredQuestions", "questions", "profileAnswers", "profileAnswerHistories", "users", "config", "groupConfig", "currentUser"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], ["title", "Generating Your Shop Profile", "subtitle", "We're analyzing your data to create shop specific questions and answers. They will appear when ready.", 3, "itemStatus", "viewMode"], [3, "goals", "viewMode"], ["subtitle", "We're analyzing your data to create your personalized analysis. It will appear when ready.", 3, "itemStatus", "viewMode", "title"], [3, "viewMoreClick", "goals", "viewMode"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "selectionChanged", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [1, "mb-32"], [3, "periodUnitChanged", "planSelected", "editCurrency", "checkout", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [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, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [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", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg: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, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [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"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [3, "continueClick", "viewMode", "totalQuestions", "answeredQuestions", "buttonConfig"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "flex-1", "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "flex", "items-center", "justify-center", "gap-3", "shadow-2xl", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileShopAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileShop: [1, "profileShop"], profileShopQuestions: [1, "profileShopQuestions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], itemStatusProfileShop: [1, "itemStatusProfileShop"], itemStatusProfileAnalysis: [1, "itemStatusProfileAnalysis"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], currentUser: [1, "currentUser"], maxAccessibleStepId: [1, "maxAccessibleStepId"], isMarkingAsReviewed: [1, "isMarkingAsReviewed"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", checkoutPlanClick: "checkoutPlanClick", answerShopProfileQuestions: "answerShopProfileQuestions", continueShopProfileQuestions: "continueShopProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave", shopProfileAdminAnswerAction: "shopProfileAdminAnswerAction", markAsReviewedClick: "markAsReviewedClick" }, features: [i0.ɵɵNgOnChangesFeature], decls: 31, vars: 58, consts: [["shopProfileStatusCard", ""], ["planSelectionContainer", ""], [1, "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate", "showControls"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "expandedRecommendationId", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "viewMode", "totalQuestions", "answeredQuestions", "buttonConfig"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "markAsReviewedClick", "viewMode", "reviewStatus", "selfContentStatus", "isMarkingAsReviewed"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "mb-12"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "metricName", "isOnboarded"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", "backdrop-blur-sm", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "justify-center", "space-y-4"], ["size", "large", 3, "viewMode"], [1, "text-center"], [1, "text-lg", "font-semibold", "mb-1", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "mb-8"], [3, "startCategoryQuestions", "answerSave", "adminAnswerAction", "viewMode", "totalQuestions", "answeredQuestions", "questions", "profileAnswers", "profileAnswerHistories", "users", "config", "groupConfig", "currentUser"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], ["title", "Generating Your Shop Profile", "subtitle", "We're analyzing your data to create shop specific questions and answers. They will appear when ready.", 3, "itemStatus", "viewMode"], [3, "goals", "viewMode"], ["subtitle", "We're analyzing your data to create your personalized analysis. It will appear when ready.", 3, "itemStatus", "viewMode", "title"], [3, "viewMoreClick", "goals", "viewMode"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "selectionChanged", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [1, "mb-32"], [3, "periodUnitChanged", "planSelected", "editCurrency", "checkout", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [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, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [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", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg: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, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [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"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMetricDetailsClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [3, "continueClick", "viewMode", "totalQuestions", "answeredQuestions", "buttonConfig"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "flex-1", "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "flex", "items-center", "justify-center", "gap-3", "shadow-2xl", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileShopAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵelement(1, "div", 3);
             i0.ɵɵelementStart(2, "div");
@@ -94522,6 +94692,7 @@ class SymphiqProfileShopAnalysisDashboardComponent {
                   [allGoals]="allGoals()"
                   (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
                   (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
+                  (viewMetricDetailsClick)="handleMetricViewDetailsClick()"
               />
             }
 
@@ -94819,7 +94990,7 @@ class SymphiqProfileShopAnalysisDashboardComponent {
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileShopAnalysisDashboardComponent, { className: "SymphiqProfileShopAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-shop-dashboard/symphiq-profile-shop-analysis-dashboard.component.ts", lineNumber: 831 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileShopAnalysisDashboardComponent, { className: "SymphiqProfileShopAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-shop-dashboard/symphiq-profile-shop-analysis-dashboard.component.ts", lineNumber: 834 }); })();
 
 function ProfileAnalysisStatusSummaryComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 3);
@@ -99222,7 +99393,7 @@ class SymphiqProfileMetricsAnalysesDashboardComponent {
             i0.ɵɵstyleProp("width", ctx.scrollProgress(), "%");
             i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "bg-gradient-to-r from-blue-500 to-cyan-500" : "bg-gradient-to-r from-blue-400 to-cyan-400");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("title", "Metric Analysis")("subtitle", "Provide context for funnel stage metrics and performance")("viewMode", ctx.viewMode())("showControls", false);
+            i0.ɵɵproperty("title", "Funnel Metrics")("subtitle", "Provide context for funnel stage metrics and performance")("viewMode", ctx.viewMode())("showControls", false);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isSimplifiedView() ? 6 : -1);
             i0.ɵɵadvance(2);
@@ -99314,7 +99485,7 @@ class SymphiqProfileMetricsAnalysesDashboardComponent {
       <div class="relative z-[51]">
         <!-- Dashboard Header -->
         <symphiq-dashboard-header
-            [title]="'Metric Analysis'"
+            [title]="'Funnel Metrics'"
             [subtitle]="'Provide context for funnel stage metrics and performance'"
             [viewMode]="viewMode()"
             [showControls]="false"
@@ -100294,6 +100465,10 @@ class SymphiqProfileAnalysisMetricDashboardComponent {
         }
     }
     ngOnInit() {
+        console.log('[MetricDashboard] ngOnInit');
+        console.log('[MetricDashboard] isSimplifiedView:', this.isSimplifiedView());
+        console.log('[MetricDashboard] currentDisplayMode:', this.currentDisplayMode());
+        console.log('[MetricDashboard] metricExecutiveSummary:', !!this.metricExecutiveSummary());
         this.funnelAnalysisSignal.set(this.funnelAnalysis());
         const profileToUse = this.profile();
         if (profileToUse) {
@@ -100364,25 +100539,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 +100592,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 +100609,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 {
@@ -100491,6 +100681,8 @@ class SymphiqProfileAnalysisMetricDashboardComponent {
         return null;
     }
     handleDisplayModeChange(mode) {
+        console.log('[MetricDashboard] handleDisplayModeChange:', mode);
+        console.log('[MetricDashboard] Will show MetricExecutiveSummary:', mode !== DisplayModeEnum.SIMPLIFIED);
         this.currentDisplayMode.set(mode);
         if (mode === DisplayModeEnum.EXPANDED) {
             this.viewModeService.setViewMode('expanded');