@eric-emg/symphiq-components 1.2.546 → 1.2.549

package/fesm2022/symphiq-components.mjs

@@ -175,16 +175,11 @@ class ModalService {
         this.modalState.next(newState);
     }
     openMetricModal(metric, charts = [], previousState, expandedSection) {
-        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 with charts:', newState.charts.length);
         this.modalState.next(newState);
-        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] : [];
@@ -1938,10 +1933,6 @@ class HeaderScrollService {
         };
     }
     log(message, data) {
-        if (this.DEBUG) {
-            const timestamp = new Date().toISOString().split('T')[1];
-            console.log(`[HeaderScroll ${timestamp}] ${message}`, data ?? '');
-        }
     }
     configure(config) {
         this.config = {
@@ -3518,7 +3509,6 @@ class DataLoaderService {
         const url = `${this.baseUrl()}/${key}.json`;
         if (!this.cache.has(key)) {
             this.cache.set(key, this.http.get(url).pipe(shareReplay$1(1), catchError$1(err => {
-                console.error(`Failed to load ${key}:`, err);
                 this.cache.delete(key);
                 throw err;
             })));
@@ -8520,14 +8510,6 @@ 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) {
@@ -16616,14 +16598,11 @@ class ModalComponent {
         this.modalService.modalState$
             .pipe(takeUntilDestroyed())
             .subscribe(state => {
-            console.log('[FunnelAnalysisModal] Received modal state:', state.type, state);
             if (state.type === 'visualization') {
-                console.log('[FunnelAnalysisModal] Skipping visualization type');
                 return;
             }
             // Delegate business insight types to Profile Analysis Modal and item-detail to Business Analysis Modal
             if (state.type === 'business-insight-detail' || state.type === 'goal-business-insights-list' || state.type === 'item-detail') {
-                console.log('[FunnelAnalysisModal] Delegating to other modal, clearing state');
                 this.modalStateSignal.set({
                     type: null,
                     data: null,
@@ -16656,9 +16635,6 @@ class ModalComponent {
                 chainDepth++;
                 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,
@@ -16668,7 +16644,6 @@ class ModalComponent {
                 expandedSection: state.expandedSection,
                 navigationStack: state.navigationStack || []
             });
-            console.log('[FunnelAnalysisModal] isOpen() should now be:', state.type !== null);
         });
         // Effect to trigger animations when metrics list modal opens
         effect(() => {
@@ -43286,7 +43261,6 @@ 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',
@@ -43577,14 +43551,12 @@ 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 || []);
@@ -58784,7 +58756,7 @@ class ProgressToTargetChartComponent {
     buildChart(chartData) {
         if (!this.root || !this.chart || !this.xAxis || !this.yAxis)
             return;
-        const { currentValue, paceValue, targetValue, status } = chartData;
+        const { currentValue, paceValue, targetValue, status, pacingPercentage } = chartData;
         const xAxisMax = this.calculateXAxisMax(paceValue, targetValue, currentValue);
         this.xAxis.set('max', xAxisMax);
         const categoryDataItems = [
@@ -58795,8 +58767,8 @@ class ProgressToTargetChartComponent {
             }
         ];
         this.yAxis.data.setAll(categoryDataItems);
-        const paceColors = this.getPaceColors(status);
-        const currentColors = this.getCurrentColors(status);
+        const paceColors = this.getPaceColors(status, pacingPercentage);
+        const currentColors = this.getCurrentColors(status, pacingPercentage);
         const paceSeries = this.chart.series.push(ColumnSeries.new(this.root, {
             name: 'Pace',
             xAxis: this.xAxis,
@@ -58908,7 +58880,10 @@ class ProgressToTargetChartComponent {
         }
         return max * 1.1;
     }
-    getPaceColors(status) {
+    getPaceColors(status, pacingPercentage) {
+        if (pacingPercentage !== undefined && pacingPercentage < 0) {
+            return this.getNegativePacingColors(pacingPercentage);
+        }
         switch (status) {
             case 'ahead':
                 return {
@@ -58928,7 +58903,10 @@ class ProgressToTargetChartComponent {
                 };
         }
     }
-    getCurrentColors(status) {
+    getCurrentColors(status, pacingPercentage) {
+        if (pacingPercentage !== undefined && pacingPercentage < 0) {
+            return this.getNegativePacingCurrentColors(pacingPercentage);
+        }
         switch (status) {
             case 'ahead':
                 return {
@@ -58948,6 +58926,60 @@ class ProgressToTargetChartComponent {
                 };
         }
     }
+    getNegativePacingColors(pacingPercentage) {
+        const absPercent = Math.abs(pacingPercentage);
+        if (absPercent < 2) {
+            return {
+                color1: color(0xFACC15),
+                color2: color(0xEAB308)
+            };
+        }
+        else if (absPercent < 5) {
+            return {
+                color1: color(0xFB923C),
+                color2: color(0xF97316)
+            };
+        }
+        else if (absPercent < 10) {
+            return {
+                color1: color(0xF87171),
+                color2: color(0xEF4444)
+            };
+        }
+        else {
+            return {
+                color1: color(0xF04438),
+                color2: color(0xdc2626)
+            };
+        }
+    }
+    getNegativePacingCurrentColors(pacingPercentage) {
+        const absPercent = Math.abs(pacingPercentage);
+        if (absPercent < 2) {
+            return {
+                color1: color(0xFDE047),
+                color2: color(0xFACC15)
+            };
+        }
+        else if (absPercent < 5) {
+            return {
+                color1: color(0xFDBA74),
+                color2: color(0xFB923C)
+            };
+        }
+        else if (absPercent < 10) {
+            return {
+                color1: color(0xFCA5A5),
+                color2: color(0xF87171)
+            };
+        }
+        else {
+            return {
+                color1: color(0xF86C59),
+                color2: color(0xE65143)
+            };
+        }
+    }
     static { this.ɵfac = function ProgressToTargetChartComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProgressToTargetChartComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProgressToTargetChartComponent, selectors: [["symphiq-progress-to-target-chart"]], viewQuery: function ProgressToTargetChartComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$D, 7);
@@ -58962,16 +58994,16 @@ class ProgressToTargetChartComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProgressToTargetChartComponent, [{
         type: Component,
-        args: [{ selector: 'symphiq-progress-to-target-chart', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="progress-chart-container">
-      <div #chartdiv class="chart" style="width: 100%; height: 160px;"></div>
-    </div>
+        args: [{ selector: 'symphiq-progress-to-target-chart', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="progress-chart-container">
+      <div #chartdiv class="chart" style="width: 100%; height: 160px;"></div>
+    </div>
   `, styles: [".progress-chart-container{width:100%;margin-top:50px;overflow:visible}.chart{overflow:visible}\n"] }]
     }], () => [], { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], chartDiv: [{
             type: ViewChild,
             args: ['chartdiv', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressToTargetChartComponent, { className: "ProgressToTargetChartComponent", filePath: "lib/components/revenue-calculator-dashboard/progress-to-target-chart.component.ts", lineNumber: 66 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressToTargetChartComponent, { className: "ProgressToTargetChartComponent", filePath: "lib/components/revenue-calculator-dashboard/progress-to-target-chart.component.ts", lineNumber: 67 }); })();
 
 const _forTrack0$z = ($index, $item) => $item.metric;
 function MetricReportModalComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
@@ -59627,7 +59659,8 @@ class MetricReportModalComponent {
                 currentValue: this.ytdValue(),
                 paceValue: pacing.projectedValue,
                 targetValue: metric.targetValue,
-                status: pacing.status
+                status: pacing.status,
+                pacingPercentage: pacing.pacingPercentage
             };
         }, ...(ngDevMode ? [{ debugName: "progressToTargetData" }] : []));
         this.chartLegendDescription = computed(() => {
@@ -69723,7 +69756,7 @@ function MetricExecutiveSummaryComponent_Conditional_14_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.metricValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.summary().currentValue, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatNumber(ctx_r0.summary().currentValue), " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.summary().yoyChange ? 7 : -1);
 } }
@@ -69746,7 +69779,7 @@ function MetricExecutiveSummaryComponent_Conditional_15_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.metricValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.summary().targetValue, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatNumber(ctx_r0.summary().targetValue), " ");
 } }
 function MetricExecutiveSummaryComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12)(1, "div", 22);
@@ -69767,13 +69800,13 @@ function MetricExecutiveSummaryComponent_Conditional_16_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.metricValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.projectedValue(), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatNumber(ctx_r0.projectedValue()), " ");
 } }
 function MetricExecutiveSummaryComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 12)(1, "div", 22);
     i0.ɵɵelement(2, "symphiq-icon", 23);
     i0.ɵɵelementStart(3, "span", 24);
-    i0.ɵɵtext(4, " Pacing ");
+    i0.ɵɵtext(4, " Pacing vs Target ");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "div", 28);
     i0.ɵɵtext(6);
@@ -69826,7 +69859,7 @@ function MetricExecutiveSummaryComponent_Conditional_18_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.summary().metricHealthDescription ? 7 : -1);
 } }
-function MetricExecutiveSummaryComponent_Conditional_30_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_29_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 32);
     i0.ɵɵelement(1, "symphiq-napkin-visual-placeholder", 35);
     i0.ɵɵelementEnd();
@@ -69835,12 +69868,12 @@ function MetricExecutiveSummaryComponent_Conditional_30_Conditional_4_Template(r
     i0.ɵɵadvance();
     i0.ɵɵproperty("visual", ctx_r0.summary().napkinVisual)("viewMode", ctx_r0.viewMode());
 } }
-function MetricExecutiveSummaryComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 19)(1, "h3", 30);
     i0.ɵɵtext(2, " Analysis Narrative ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 31);
-    i0.ɵɵconditionalCreate(4, MetricExecutiveSummaryComponent_Conditional_30_Conditional_4_Template, 2, 2, "div", 32);
+    i0.ɵɵconditionalCreate(4, MetricExecutiveSummaryComponent_Conditional_29_Conditional_4_Template, 2, 2, "div", 32);
     i0.ɵɵelementStart(5, "p", 33);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
@@ -69859,7 +69892,7 @@ function MetricExecutiveSummaryComponent_Conditional_30_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.summary().narrative, " ");
 } }
-function MetricExecutiveSummaryComponent_Conditional_31_For_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_30_For_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 44)(1, "div", 45);
     i0.ɵɵelement(2, "symphiq-icon", 46);
     i0.ɵɵelementStart(3, "div")(4, "span", 47);
@@ -69881,10 +69914,10 @@ function MetricExecutiveSummaryComponent_Conditional_31_For_5_Conditional_8_Temp
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", priority_r4.expectedImpact, " ");
 } }
-function MetricExecutiveSummaryComponent_Conditional_31_For_5_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_30_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 39);
-    i0.ɵɵlistener("click", function MetricExecutiveSummaryComponent_Conditional_31_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_30_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", 40)(2, "span", 41);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
@@ -69894,7 +69927,7 @@ function MetricExecutiveSummaryComponent_Conditional_31_For_5_Template(rf, ctx)
     i0.ɵɵelementStart(6, "p", 43);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, MetricExecutiveSummaryComponent_Conditional_31_For_5_Conditional_8_Template, 8, 8, "div", 44);
+    i0.ɵɵconditionalCreate(8, MetricExecutiveSummaryComponent_Conditional_30_For_5_Conditional_8_Template, 8, 8, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const priority_r4 = ctx.$implicit;
@@ -69916,12 +69949,12 @@ function MetricExecutiveSummaryComponent_Conditional_31_For_5_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵconditional(priority_r4.expectedImpact ? 8 : -1);
 } }
-function MetricExecutiveSummaryComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 20)(1, "h3", 36);
     i0.ɵɵtext(2, "Top Priorities");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 37);
-    i0.ɵɵrepeaterCreate(4, MetricExecutiveSummaryComponent_Conditional_31_For_5_Template, 9, 8, "button", 38, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(4, MetricExecutiveSummaryComponent_Conditional_30_For_5_Template, 9, 8, "button", 38, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -69930,7 +69963,7 @@ function MetricExecutiveSummaryComponent_Conditional_31_Template(rf, ctx) { if (
     i0.ɵɵadvance(3);
     i0.ɵɵrepeater(ctx_r0.summary().topPriorities);
 } }
-function MetricExecutiveSummaryComponent_Conditional_32_For_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_31_For_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 57);
     i0.ɵɵelement(1, "symphiq-icon", 15);
     i0.ɵɵelementStart(2, "span");
@@ -69945,7 +69978,7 @@ function MetricExecutiveSummaryComponent_Conditional_32_For_5_Conditional_12_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(win_r6.estimatedTimeframe);
 } }
-function MetricExecutiveSummaryComponent_Conditional_32_For_5_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_31_For_5_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 58)(1, "h4", 24);
     i0.ɵɵtext(2, " Related Goal ");
     i0.ɵɵelementEnd();
@@ -69959,7 +69992,7 @@ function MetricExecutiveSummaryComponent_Conditional_32_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_32_For_5_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_31_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 51)(1, "div", 52)(2, "div", 53)(3, "span", 41);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
@@ -69972,8 +70005,8 @@ function MetricExecutiveSummaryComponent_Conditional_32_For_5_Template(rf, ctx)
     i0.ɵɵelementStart(10, "span", 56);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(12, MetricExecutiveSummaryComponent_Conditional_32_For_5_Conditional_12_Template, 4, 5, "div", 57);
-    i0.ɵɵconditionalCreate(13, MetricExecutiveSummaryComponent_Conditional_32_For_5_Conditional_13_Template, 4, 7, "div", 58);
+    i0.ɵɵconditionalCreate(12, MetricExecutiveSummaryComponent_Conditional_31_For_5_Conditional_12_Template, 4, 5, "div", 57);
+    i0.ɵɵconditionalCreate(13, MetricExecutiveSummaryComponent_Conditional_31_For_5_Conditional_13_Template, 4, 7, "div", 58);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const win_r6 = ctx.$implicit;
@@ -70001,12 +70034,12 @@ function MetricExecutiveSummaryComponent_Conditional_32_For_5_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵconditional(win_r6.relatedGoalId && ctx_r0.allGoals() ? 13 : -1);
 } }
-function MetricExecutiveSummaryComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+function MetricExecutiveSummaryComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 21)(1, "h3", 49);
     i0.ɵɵtext(2, "Quick Wins");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 50);
-    i0.ɵɵrepeaterCreate(4, MetricExecutiveSummaryComponent_Conditional_32_For_5_Template, 14, 11, "div", 51, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵrepeaterCreate(4, MetricExecutiveSummaryComponent_Conditional_31_For_5_Template, 14, 11, "div", 51, i0.ɵɵrepeaterTrackByIndex);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -70118,16 +70151,11 @@ 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');
     }
     handleViewReportClick() {
-        console.log('[MetricExecutiveSummary] View Report button clicked!');
         this.viewReportClick.emit();
     }
     getYoyIcon() {
@@ -70220,8 +70248,16 @@ class MetricExecutiveSummaryComponent {
             return '';
         return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
     }
+    formatNumber(value) {
+        if (value === undefined || value === null || value === '')
+            return '';
+        const num = typeof value === 'string' ? parseFloat(value) : value;
+        if (isNaN(num))
+            return String(value);
+        return num.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
+    }
     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", viewReportClick: "viewReportClick" }, decls: 33, vars: 24, 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"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [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-xs", "mt-1", "truncate", "max-w-full", "cursor-help", 3, "libSymphiqTooltip", "tooltipPosition", "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", viewReportClick: "viewReportClick" }, decls: 32, vars: 24, 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", "flex-wrap", "items-center", "justify-center", "gap-3", "mt-4"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-lg", "text-sm", "font-semibold", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["size", "w-4 h-4", 3, "icon"], ["type", "button", 1, "inline-flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [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-xs", "mt-1", "truncate", "max-w-full", "cursor-help", 3, "libSymphiqTooltip", "tooltipPosition", "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);
@@ -70240,25 +70276,27 @@ class MetricExecutiveSummaryComponent {
             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, 8, 9, "div", 12);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "div", 13)(20, "div", 14)(21, "span");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(19, "div", 13)(20, "button", 14);
+            i0.ɵɵlistener("click", function MetricExecutiveSummaryComponent_Template_button_click_20_listener() { return ctx.handleViewMetricDetailsClick(); });
+            i0.ɵɵelementStart(21, "span");
             i0.ɵɵtext(22, "View Metric Details");
             i0.ɵɵelementEnd();
             i0.ɵɵelement(23, "symphiq-icon", 15);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(24, "div", 13)(25, "button", 16);
-            i0.ɵɵlistener("click", function MetricExecutiveSummaryComponent_Template_button_click_25_listener() { return ctx.handleViewReportClick(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "button", 16);
+            i0.ɵɵlistener("click", function MetricExecutiveSummaryComponent_Template_button_click_24_listener() { return ctx.handleViewReportClick(); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(26, "svg", 17);
-            i0.ɵɵelement(27, "path", 18);
+            i0.ɵɵelementStart(25, "svg", 17);
+            i0.ɵɵelement(26, "path", 18);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(28, "span");
-            i0.ɵɵtext(29, "View Report");
+            i0.ɵɵelementStart(27, "span");
+            i0.ɵɵtext(28, "View Report");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(30, MetricExecutiveSummaryComponent_Conditional_30_Template, 8, 5, "div", 19);
-            i0.ɵɵconditionalCreate(31, MetricExecutiveSummaryComponent_Conditional_31_Template, 6, 1, "div", 20);
-            i0.ɵɵconditionalCreate(32, MetricExecutiveSummaryComponent_Conditional_32_Template, 6, 1, "div", 21);
+            i0.ɵɵconditionalCreate(29, MetricExecutiveSummaryComponent_Conditional_29_Template, 8, 5, "div", 19);
+            i0.ɵɵconditionalCreate(30, MetricExecutiveSummaryComponent_Conditional_30_Template, 6, 1, "div", 20);
+            i0.ɵɵconditionalCreate(31, MetricExecutiveSummaryComponent_Conditional_31_Template, 6, 1, "div", 21);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             let tmp_18_0;
@@ -70291,14 +70329,14 @@ class MetricExecutiveSummaryComponent {
             i0.ɵɵproperty("ngClass", ctx.viewDetailsButtonClasses());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("icon", i0.ɵɵpureFunction1(22, _c1$d, ctx.iconSource));
-            i0.ɵɵadvance(2);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.viewReportButtonClasses());
             i0.ɵɵadvance(5);
-            i0.ɵɵconditional(ctx.summary().narrative ? 30 : -1);
+            i0.ɵɵconditional(ctx.summary().narrative ? 29 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.summary().topPriorities && (((tmp_18_0 = ctx.summary().topPriorities) == null ? null : tmp_18_0.length) ?? 0) > 0 ? 31 : -1);
+            i0.ɵɵconditional(ctx.summary().topPriorities && (((tmp_18_0 = ctx.summary().topPriorities) == null ? null : tmp_18_0.length) ?? 0) > 0 ? 30 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.summary().quickWins && (((tmp_19_0 = ctx.summary().quickWins) == null ? null : tmp_19_0.length) ?? 0) > 0 ? 32 : -1);
+            i0.ɵɵconditional(ctx.summary().quickWins && (((tmp_19_0 = ctx.summary().quickWins) == null ? null : tmp_19_0.length) ?? 0) > 0 ? 31 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, GradeBadgeComponent,
             SymphiqIconComponent,
             NapkinVisualPlaceholderComponent,
@@ -70372,7 +70410,7 @@ class MetricExecutiveSummaryComponent {
                   </span>
                 </div>
                 <div [ngClass]="metricValueClasses()" class="text-2xl font-bold">
-                  {{ summary().currentValue }}
+                  {{ formatNumber(summary().currentValue) }}
                 </div>
                 @if (summary().yoyChange) {
                   <div class="flex items-center gap-1 mt-2">
@@ -70403,7 +70441,7 @@ class MetricExecutiveSummaryComponent {
                   </span>
                 </div>
                 <div [ngClass]="metricValueClasses()" class="text-2xl font-bold">
-                  {{ summary().targetValue }}
+                  {{ formatNumber(summary().targetValue) }}
                 </div>
               </div>
             }
@@ -70422,7 +70460,7 @@ class MetricExecutiveSummaryComponent {
                   </span>
                 </div>
                 <div [ngClass]="metricValueClasses()" class="text-2xl font-bold">
-                  {{ projectedValue() }}
+                  {{ formatNumber(projectedValue()) }}
                 </div>
               </div>
             }
@@ -70437,7 +70475,7 @@ class MetricExecutiveSummaryComponent {
                     [ngClass]="metricLabelClasses()"
                   />
                   <span [ngClass]="metricLabelClasses()" class="text-xs font-semibold uppercase tracking-wider">
-                    Pacing
+                    Pacing vs Target
                   </span>
                 </div>
                 <div [ngClass]="getPacingValueClasses()" class="text-xl font-bold">
@@ -70476,20 +70514,24 @@ class MetricExecutiveSummaryComponent {
             }
           </div>
 
-            <!-- View Details Button -->
-            <div class="flex items-center justify-center mt-4">
-              <div [ngClass]="viewDetailsButtonClasses()" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200 group-hover:scale-105">
-                <span>View Metric Details</span>
-                <symphiq-icon
-                  [icon]="{ name: 'arrow-right', source: iconSource }"
-                  size="w-4 h-4"
-                />
-              </div>
-            </div>
           </button>
 
-          <!-- View Report Button -->
-          <div class="flex items-center justify-center mt-4">
+          <!-- Action Buttons -->
+          <div class="flex flex-wrap items-center justify-center gap-3 mt-4">
+            <!-- View Details Button -->
+            <button
+              type="button"
+              (click)="handleViewMetricDetailsClick()"
+              [ngClass]="viewDetailsButtonClasses()"
+              class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-200 hover:scale-105">
+              <span>View Metric Details</span>
+              <symphiq-icon
+                [icon]="{ name: 'arrow-right', source: iconSource }"
+                size="w-4 h-4"
+              />
+            </button>
+
+            <!-- View Report Button -->
             <button
               type="button"
               (click)="handleViewReportClick()"
@@ -70637,8 +70679,8 @@ class MetricExecutiveSummaryComponent {
     </section>
   `
             }]
-    }], () => [], { 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"] }], viewReportClick: [{ type: i0.Output, args: ["viewReportClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricExecutiveSummaryComponent, { className: "MetricExecutiveSummaryComponent", filePath: "lib/components/profile-analysis-shop-dashboard/metric-executive-summary.component.ts", lineNumber: 340 }); })();
+    }], 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"] }], viewReportClick: [{ type: i0.Output, args: ["viewReportClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MetricExecutiveSummaryComponent, { className: "MetricExecutiveSummaryComponent", filePath: "lib/components/profile-analysis-shop-dashboard/metric-executive-summary.component.ts", lineNumber: 344 }); })();
 
 const _c0$t = a0 => ({ name: "chevron-right", source: a0 });
 function GoalCardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
@@ -73729,7 +73771,7 @@ class KeyDriverCardComponent {
         }, ...(ngDevMode ? [{ debugName: "answerTextClasses" }] : []));
     }
     static { this.ɵfac = function KeyDriverCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KeyDriverCardComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KeyDriverCardComponent, selectors: [["symphiq-key-driver-card"]], inputs: { driver: [1, "driver"], viewMode: [1, "viewMode"] }, decls: 13, vars: 12, consts: [[1, "rounded-xl", "p-5", "border", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "gap-3", "mb-3"], [1, "flex", "items-start", "gap-3", "flex-1", "min-w-0"], [1, "p-2", "rounded-lg", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["size", "w-4 h-4", 3, "icon"], [1, "flex-1", "min-w-0"], [1, "font-semibold", "text-sm", "mb-1", "leading-tight", 3, "ngClass"], [1, "px-2.5", "py-1", "rounded-full", "text-xs", "font-bold", "uppercase", "tracking-wider", "flex-shrink-0", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "rounded-lg", "p-3", "space-y-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "mb-2"], ["size", "w-3.5 h-3.5", 3, "icon", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wide", 3, "ngClass"], [1, "rounded", "p-2", 3, "ngClass"], [1, "text-xs", "leading-relaxed", "italic", 3, "ngClass"]], template: function KeyDriverCardComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KeyDriverCardComponent, selectors: [["symphiq-key-driver-card"]], inputs: { driver: [1, "driver"], viewMode: [1, "viewMode"] }, decls: 13, vars: 12, consts: [[1, "rounded-xl", "p-5", "border", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "gap-3", "mb-3"], [1, "flex", "items-center", "gap-3", "flex-1", "min-w-0"], [1, "p-2", "rounded-lg", "flex-shrink-0", "mt-0.5", 3, "ngClass"], ["size", "w-4 h-4", 3, "icon"], [1, "flex-1", "min-w-0"], [1, "font-semibold", "text-sm", "mb-1", "leading-tight", 3, "ngClass"], [1, "px-2.5", "py-1", "rounded-full", "text-xs", "font-bold", "uppercase", "tracking-wider", "flex-shrink-0", 3, "ngClass"], [1, "text-sm", "leading-relaxed", "mb-4", 3, "ngClass"], [1, "rounded-lg", "p-3", "space-y-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "mb-2"], ["size", "w-3.5 h-3.5", 3, "icon", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wide", 3, "ngClass"], [1, "rounded", "p-2", 3, "ngClass"], [1, "text-xs", "leading-relaxed", "italic", 3, "ngClass"]], template: function KeyDriverCardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵelement(4, "symphiq-icon", 4);
             i0.ɵɵelementEnd();
@@ -73776,7 +73818,7 @@ class KeyDriverCardComponent {
                 template: `
     <div [ngClass]="cardClasses()" class="rounded-xl p-5 border transition-all duration-200">
       <div class="flex items-start justify-between gap-3 mb-3">
-        <div class="flex items-start gap-3 flex-1 min-w-0">
+        <div class="flex items-center gap-3 flex-1 min-w-0">
           <div [ngClass]="iconClasses()" class="p-2 rounded-lg flex-shrink-0 mt-0.5">
             <symphiq-icon
               [icon]="{ name: 'arrow-trending-up', source: iconSource }"
@@ -75058,7 +75100,7 @@ function PerformanceMetricsCardComponent_Conditional_32_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.valueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.metrics().projectedValue, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatNumber(ctx_r0.metrics().projectedValue), " ");
 } }
 class PerformanceMetricsCardComponent {
     constructor() {
@@ -75220,6 +75262,14 @@ class PerformanceMetricsCardComponent {
             this.viewMode.set(this.mode());
         });
     }
+    formatNumber(value) {
+        if (value === undefined || value === null || value === '')
+            return '';
+        const num = typeof value === 'string' ? parseFloat(value) : value;
+        if (isNaN(num))
+            return String(value);
+        return num.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
+    }
     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: 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);
@@ -75290,7 +75340,7 @@ class PerformanceMetricsCardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.valueClasses());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.metrics().currentValue, " ");
+            i0.ɵɵtextInterpolate1(" ", ctx.formatNumber(ctx.metrics().currentValue), " ");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.metricBoxClasses());
             i0.ɵɵadvance(2);
@@ -75300,7 +75350,7 @@ class PerformanceMetricsCardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.valueClasses());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.metrics().previousYearValue, " ");
+            i0.ɵɵtextInterpolate1(" ", ctx.formatNumber(ctx.metrics().previousYearValue), " ");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.metricBoxClasses());
             i0.ɵɵadvance(2);
@@ -75310,7 +75360,7 @@ class PerformanceMetricsCardComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.valueClasses());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.metrics().targetValue, " ");
+            i0.ɵɵtextInterpolate1(" ", ctx.formatNumber(ctx.metrics().targetValue), " ");
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.metrics().projectedValue ? 32 : -1);
             i0.ɵɵadvance(3);
@@ -75366,7 +75416,7 @@ class PerformanceMetricsCardComponent {
             </span>
           </div>
           <div [ngClass]="valueClasses()" class="text-2xl font-bold">
-            {{ metrics().currentValue }}
+            {{ formatNumber(metrics().currentValue) }}
           </div>
         </div>
 
@@ -75383,7 +75433,7 @@ class PerformanceMetricsCardComponent {
             </span>
           </div>
           <div [ngClass]="valueClasses()" class="text-2xl font-bold">
-            {{ metrics().previousYearValue }}
+            {{ formatNumber(metrics().previousYearValue) }}
           </div>
         </div>
 
@@ -75400,7 +75450,7 @@ class PerformanceMetricsCardComponent {
             </span>
           </div>
           <div [ngClass]="valueClasses()" class="text-2xl font-bold">
-            {{ metrics().targetValue }}
+            {{ formatNumber(metrics().targetValue) }}
           </div>
         </div>
 
@@ -75418,7 +75468,7 @@ class PerformanceMetricsCardComponent {
               </span>
             </div>
             <div [ngClass]="valueClasses()" class="text-2xl font-bold">
-              {{ metrics().projectedValue }}
+              {{ formatNumber(metrics().projectedValue) }}
             </div>
           </div>
         }
@@ -86132,16 +86182,12 @@ class CollapsibleAnalysisSectionGroupComponent {
         }
     }
     handleViewMetricDetailsClick() {
-        console.log('[CollapsibleAnalysisSectionGroup] handleViewMetricDetailsClick called');
         const metricKey = this.metricExecutiveSummary()?.metric;
-        console.log('[CollapsibleAnalysisSectionGroup] metricKey:', metricKey);
         if (!metricKey) {
-            console.log('[CollapsibleAnalysisSectionGroup] No metricKey found');
             return;
         }
         const allMetrics = this.allMetrics();
         const metric = allMetrics.find(m => m.metric === metricKey);
-        console.log('[CollapsibleAnalysisSectionGroup] Found metric:', !!metric);
         if (metric) {
             const allCharts = this.allCharts();
             const metricCharts = allCharts.filter(chart => {
@@ -86149,7 +86195,6 @@ class CollapsibleAnalysisSectionGroupComponent {
                 const metricId = metricKey.toLowerCase();
                 return chartId.includes(metricId) || chartId.startsWith(metricId);
             });
-            console.log('[CollapsibleAnalysisSectionGroup] Opening modal with metric and', metricCharts.length, 'charts');
             this.modalService.openMetricModal(metric, metricCharts);
         }
         else {
@@ -86161,15 +86206,12 @@ class CollapsibleAnalysisSectionGroupComponent {
                     targetValue: typeof summary.targetValue === 'string' ? parseFloat(summary.targetValue) || 0 : (summary.targetValue ?? 0),
                     description: summary.gradeRationale
                 };
-                console.log('[CollapsibleAnalysisSectionGroup] Opening modal with constructed metric');
                 this.modalService.openMetricModal(constructedMetric, []);
             }
         }
     }
     handleViewReportClick() {
-        console.log('[CollapsibleAnalysisSectionGroup] handleViewReportClick called');
         const metricKey = this.metricExecutiveSummary()?.metric;
-        console.log('[CollapsibleAnalysisSectionGroup] Emitting viewReportClick with metricKey:', metricKey);
         if (metricKey) {
             this.viewReportClick.emit(metricKey);
         }
@@ -93890,21 +93932,15 @@ class SymphiqProfileShopAnalysisDashboardComponent {
         }
     }
     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) {
@@ -93914,21 +93950,17 @@ class SymphiqProfileShopAnalysisDashboardComponent {
                 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, '_');
@@ -93946,7 +93978,6 @@ class SymphiqProfileShopAnalysisDashboardComponent {
                 matchingCharts.push(chart);
             }
         }
-        console.log('[ShopDashboard.chartsForMetric] Matching charts count:', matchingCharts.length);
         return matchingCharts;
     }
     getCurrentModalState() {
@@ -100653,10 +100684,6 @@ 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) {
@@ -100727,68 +100754,46 @@ class SymphiqProfileAnalysisMetricDashboardComponent {
     chartsForMetric(metric) {
         const metricId = metric.performanceItemId;
         const metricName = metric.metric;
-        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();
             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(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() {
-        console.log('[ViewMetricDetails] Handler called');
         const funnelMetric = this.funnelMetric();
         let metricKey = funnelMetric?.relatedMetric;
-        console.log('[ViewMetricDetails] funnelMetric:', funnelMetric);
-        console.log('[ViewMetricDetails] metricKey from funnelMetric:', metricKey);
         if (!metricKey) {
             metricKey = this.profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric;
-            console.log('[ViewMetricDetails] metricKey from profileAnalysis:', metricKey);
         }
         if (!metricKey) {
-            console.log('[ViewMetricDetails] No metricKey found, returning early');
             return;
         }
         const allMetrics = this.allMetrics();
-        console.log('[ViewMetricDetails] allMetrics count:', allMetrics.length);
-        console.log('[ViewMetricDetails] allMetrics keys:', allMetrics.map(m => m.metric));
         const metric = allMetrics.find(m => m.metric === metricKey);
-        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 {
             const summary = this.metricExecutiveSummary();
-            console.log('[ViewMetricDetails] metricExecutiveSummary:', summary);
             if (summary) {
                 const constructedMetric = {
                     metric: metricKey,
@@ -100796,22 +100801,15 @@ class SymphiqProfileAnalysisMetricDashboardComponent {
                     targetValue: typeof summary.targetValue === 'string' ? parseFloat(summary.targetValue) || 0 : (summary.targetValue ?? 0),
                     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 {
-                console.log('[ViewMetricDetails] Emitting viewMetricDetailsClick event with key:', metricKey);
                 this.viewMetricDetailsClick.emit(metricKey);
             }
         }
-        console.log('[ViewMetricDetails] openMetricModal called - check FunnelAnalysisModal logs');
     }
     handleViewReportClick(metricKey) {
-        console.log('[ViewReport] Handler called with metricKey:', metricKey);
         this.openMetricReport(metricKey);
     }
     openMetricReport(metricEnum) {
@@ -100881,8 +100879,6 @@ 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');
@@ -100954,8 +100950,8 @@ class SymphiqProfileAnalysisMetricDashboardComponent {
                     percentageIncrease = ((targetValue - currentValue) / currentValue) * 100;
                 }
             }
-            const funnelMetricMatch = funnelMetricsList.find(fm => fm.funnelMetric === metric && fm.funnelMetric === fm.relatedMetric);
-            const relatedMetricMatch = funnelMetricsList.find(fm => fm.relatedMetric === metric && fm.funnelMetric !== fm.relatedMetric);
+            const funnelMetricMatch = funnelMetricsList?.find(fm => fm.funnelMetric === metric && fm.funnelMetric === fm.relatedMetric);
+            const relatedMetricMatch = funnelMetricsList?.find(fm => fm.relatedMetric === metric && fm.funnelMetric !== fm.relatedMetric);
             if (funnelMetricMatch) {
                 results.push({
                     metric,
@@ -101531,7 +101527,7 @@ class SymphiqProfileAnalysisMetricDashboardComponent {
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisMetricDashboardComponent, { className: "SymphiqProfileAnalysisMetricDashboardComponent", filePath: "lib/components/profile-analysis-metric-dashboard/symphiq-profile-analysis-metric-dashboard.component.ts", lineNumber: 512 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisMetricDashboardComponent, { className: "SymphiqProfileAnalysisMetricDashboardComponent", filePath: "lib/components/profile-analysis-metric-dashboard/symphiq-profile-analysis-metric-dashboard.component.ts", lineNumber: 513 }); })();
 
 const _forTrack0$4 = ($index, $item) => $item.id;
 function ShopProfileCategoryListComponent_For_2_Template(rf, ctx) { if (rf & 1) {