@eric-emg/symphiq-components 1.2.209 → 1.2.211

package/fesm2022/symphiq-components.mjs

@@ -54704,19 +54704,13 @@ class RevenueCalculatorWelcomeBannerComponent {
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], dataLoadStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLoadStatus", required: false }] }], hasTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasTargets", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RevenueCalculatorWelcomeBannerComponent, { className: "RevenueCalculatorWelcomeBannerComponent", filePath: "lib/components/revenue-calculator-dashboard/revenue-calculator-welcome-banner.component.ts", lineNumber: 85 }); })();
 
-function calculatePacingStatus(currentValue, priorValue, targetValue) {
-    if (targetValue !== undefined && targetValue > 0) {
-        const targetGrowth = ((targetValue - priorValue) / priorValue) * 100;
-        const actualGrowth = ((currentValue - priorValue) / priorValue) * 100;
-        if (actualGrowth >= targetGrowth * 1.05)
-            return 'ahead';
-        if (actualGrowth >= targetGrowth * 0.95)
-            return 'on-pace';
-        return 'behind';
-    }
-    if (currentValue >= priorValue * 1.05)
+function calculatePacingStatus(projectedValue, targetValue) {
+    if (targetValue <= 0)
+        return 'on-pace';
+    const pacingPercent = ((projectedValue - targetValue) / targetValue) * 100;
+    if (pacingPercent >= 5)
         return 'ahead';
-    if (currentValue >= priorValue * 0.95)
+    if (pacingPercent >= -5)
         return 'on-pace';
     return 'behind';
 }
@@ -54807,42 +54801,44 @@ function getPacingDisplayInfo(pacingPercentage, status, isDark) {
         displayText
     };
 }
-function calculateMetricPacing(metric) {
-    const currentValue = metric.currentValue || 0;
-    const priorYtdValue = metric.priorYtdValue || 0;
-    const targetValue = metric.targetValue;
-    const pacingPercentage = metric.pacingPercentage ||
-        (priorYtdValue > 0 ? ((currentValue - priorYtdValue) / priorYtdValue) * 100 : 0);
-    const projectedValue = metric.projectedValue || currentValue;
-    const status = calculatePacingStatus(currentValue, priorYtdValue, targetValue);
+function calculateMetricPacing(projectedValue, targetValue) {
+    console.group(`[PACING] calculateMetricPacing`);
+    console.log('[PACING] Input:', { projectedValue, targetValue });
+    const pacingPercentage = targetValue > 0
+        ? ((projectedValue - targetValue) / targetValue) * 100
+        : 0;
+    const status = calculatePacingStatus(projectedValue, targetValue);
+    console.log('[PACING] Result:', { pacingPercentage, status, projectedValue });
+    console.groupEnd();
     return {
         pacingPercentage,
         status,
         projectedValue
     };
 }
-function extractMetricPacing(pacingResponse, metricEnum) {
-    if (!pacingResponse)
+function extractProjectedValue(pacingResponse, metricEnum) {
+    console.group(`[PACING] extractProjectedValue for ${metricEnum}`);
+    if (!pacingResponse) {
+        console.log('[PACING] No pacingResponse provided - returning null');
+        console.groupEnd();
         return null;
-    const soFarMetric = pacingResponse.soFarMetricValues?.find(m => m.metric === metricEnum);
-    const projectedMetric = pacingResponse.projectedMetricValues?.find(m => m.metric === metricEnum);
-    const lastYearMetrics = pacingResponse.lastYearMetricValuesMonthly?.filter(m => m.metric === metricEnum) || [];
-    if (!soFarMetric && !projectedMetric)
+    }
+    const resp = pacingResponse;
+    console.log('[PACING] pacingResponse structure:', {
+        hasProjectedMetricValues: !!resp.projectedMetricValues,
+        projectedMetricValuesCount: resp.projectedMetricValues?.length ?? 0
+    });
+    const projectedMetric = resp.projectedMetricValues?.find((m) => m.metric === metricEnum);
+    console.log('[PACING] Found projectedMetric for', metricEnum, ':', projectedMetric ? { metric: projectedMetric.metric, value: projectedMetric.value } : null);
+    if (!projectedMetric?.value) {
+        console.log('[PACING] No projectedMetric found - returning null');
+        console.groupEnd();
         return null;
-    const currentValue = soFarMetric?.value ? parseFloat(soFarMetric.value) : 0;
-    const projectedValue = projectedMetric?.value ? parseFloat(projectedMetric.value) : 0;
-    const priorYtdValue = lastYearMetrics.reduce((sum, m) => {
-        return sum + (m.value ? parseFloat(m.value) : 0);
-    }, 0);
-    const pacingPercentage = priorYtdValue > 0 ? ((currentValue - priorYtdValue) / priorYtdValue) * 100 : 0;
-    return {
-        metric: metricEnum,
-        currentValue,
-        priorYtdValue,
-        projectedValue,
-        pacingPercentage,
-        ytdVariancePercent: pacingPercentage
-    };
+    }
+    const projectedValue = parseFloat(projectedMetric.value);
+    console.log('[PACING] Returning projectedValue:', projectedValue);
+    console.groupEnd();
+    return projectedValue;
 }
 
 class PacingStatusBadgeComponent {
@@ -55015,7 +55011,7 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.relatedPercentageBadgeClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", ctx_r1.formatPercentage(metric_r3.calc.percentageIncrease, 1), " ");
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.getGrowthSign(metric_r3.calc.metric), "", ctx_r1.formatPercentage(ctx_r1.Math.abs(metric_r3.calc.percentageIncrease), 1), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", metric_r3.pacingInfo ? "grid-cols-3" : "grid-cols-2");
     i0.ɵɵadvance(2);
@@ -55035,7 +55031,7 @@ function FunnelMetricsVisualizationComponent_For_4_Conditional_23_Template(rf, c
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 19);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template, 18, 14, "div", 20, _forTrack1$3);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_4_Conditional_23_For_6_Template, 18, 15, "div", 20, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const stage_r1 = i0.ɵɵnextContext().$implicit;
@@ -55087,7 +55083,7 @@ function FunnelMetricsVisualizationComponent_For_4_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.percentageBadgeClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", ctx_r1.formatPercentage(stage_r1.stageMetric.percentageIncrease, 1), " ");
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.getGrowthSign(stage_r1.stageMetric.metric), "", ctx_r1.formatPercentage(ctx_r1.Math.abs(stage_r1.stageMetric.percentageIncrease), 1), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
     i0.ɵɵadvance();
@@ -55114,21 +55110,39 @@ class FunnelMetricsVisualizationComponent {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.calculations = input([], ...(ngDevMode ? [{ debugName: "calculations" }] : []));
         this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        this.Math = Math;
         this.currentYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
         this.priorYear = computed(() => new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));
         this.funnelStages = computed(() => {
             const calcs = this.calculations();
             const pacingResponse = this.pacingMetrics();
+            console.group('[PACING] funnelStages computed');
+            console.log('[PACING] calculations count:', calcs.length);
+            console.log('[PACING] calculations:', calcs.map(c => ({ metric: c.metric, isFunnelStage: c.isFunnelStage, funnelMetric: c.funnelMetric })));
+            console.log('[PACING] pacingResponse exists:', !!pacingResponse);
+            if (pacingResponse) {
+                console.log('[PACING] pacingResponse raw:', JSON.stringify(pacingResponse, null, 2));
+            }
             const grouped = new Map();
             const stageMetrics = calcs.filter(c => c.isFunnelStage);
             const relatedMetrics = calcs.filter(c => !c.isFunnelStage);
+            console.log('[PACING] stageMetrics count:', stageMetrics.length);
+            console.log('[PACING] stageMetrics:', stageMetrics.map(s => s.metric));
+            console.log('[PACING] relatedMetrics count:', relatedMetrics.length);
             stageMetrics.forEach(stageMetric => {
                 const related = relatedMetrics.filter(rm => rm.funnelMetric === stageMetric.metric);
-                const stagePacingMetric = extractMetricPacing(pacingResponse, stageMetric.metric);
-                const stagePacingInfo = stagePacingMetric ? calculateMetricPacing(stagePacingMetric) : null;
+                console.log(`[PACING] Processing stage: ${stageMetric.metric}`);
+                const stageProjectedValue = extractProjectedValue(pacingResponse, stageMetric.metric);
+                console.log(`[PACING] stageProjectedValue for ${stageMetric.metric}:`, stageProjectedValue);
+                const stagePacingInfo = stageProjectedValue !== null
+                    ? calculateMetricPacing(stageProjectedValue, stageMetric.targetValue)
+                    : null;
+                console.log(`[PACING] stagePacingInfo for ${stageMetric.metric}:`, stagePacingInfo);
                 const relatedWithPacing = related.map(relMetric => {
-                    const relPacingMetric = extractMetricPacing(pacingResponse, relMetric.metric);
-                    const relPacingInfo = relPacingMetric ? calculateMetricPacing(relPacingMetric) : null;
+                    const relProjectedValue = extractProjectedValue(pacingResponse, relMetric.metric);
+                    const relPacingInfo = relProjectedValue !== null
+                        ? calculateMetricPacing(relProjectedValue, relMetric.targetValue)
+                        : null;
                     return { calc: relMetric, pacingInfo: relPacingInfo };
                 });
                 grouped.set(stageMetric.metric, {
@@ -55137,11 +55151,18 @@ class FunnelMetricsVisualizationComponent {
                     pacingInfo: stagePacingInfo
                 });
             });
-            return Array.from(grouped.values()).sort((a, b) => {
+            const result = Array.from(grouped.values()).sort((a, b) => {
                 const aInd = a.stageMetric.funnelInd ?? 999;
                 const bInd = b.stageMetric.funnelInd ?? 999;
                 return aInd - bInd;
             });
+            console.log('[PACING] Final funnelStages result:', result.map(r => ({
+                stage: r.stageMetric.metric,
+                hasPacingInfo: !!r.pacingInfo,
+                pacingPercentage: r.pacingInfo?.pacingPercentage
+            })));
+            console.groupEnd();
+            return result;
         }, ...(ngDevMode ? [{ debugName: "funnelStages" }] : []));
     }
     stageCardClasses() {
@@ -55242,12 +55263,15 @@ class FunnelMetricsVisualizationComponent {
     getMarkdownTooltipContent(markdown, title) {
         return { title, markdown };
     }
+    getGrowthSign(metric) {
+        return MetricEnumUtil.increaseBad(metric) ? '-' : '+';
+    }
     static { this.ɵfac = function FunnelMetricsVisualizationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FunnelMetricsVisualizationComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 5, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-8"], [1, "rounded-xl", "p-6", "border-2", "transition-all", "duration-200", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "mb-4"], [1, "flex-1"], [1, "flex", "items-center", "gap-2", "mb-1"], [1, "text-lg", "font-bold", "leading-tight", "m-0", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-6", "h-6", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "flex", "items-center", "gap-3"], [3, "viewMode", "pacingPercentage", "status"], [1, "px-4", "py-2", "rounded-lg", "font-bold", "text-sm", 3, "ngClass"], [1, "grid", "grid-cols-3", "gap-4", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "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", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "my-4", 3, "ngClass"], [1, "space-y-2"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-3", 3, "ngClass"], [1, "grid", "gap-2"], [1, "p-3", "rounded-lg", 3, "ngClass"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "flex", "items-center", "gap-2", "flex-1"], [1, "text-sm", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "right", 1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], [1, "flex", "items-center", "gap-2"], [1, "px-2", "py-1", "rounded", "text-xs", "font-bold", 3, "ngClass"], [1, "grid", "gap-2", "text-xs", 3, "ngClass"], [3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3.5", "h-3.5"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵelement(1, "symphiq-tooltip-container");
             i0.ɵɵelementStart(2, "div", 1);
-            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 24, 17, "div", 2, _forTrack0$i);
+            i0.ɵɵrepeaterCreate(3, FunnelMetricsVisualizationComponent_For_4_Template, 24, 18, "div", 2, _forTrack0$i);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -55261,140 +55285,140 @@ class FunnelMetricsVisualizationComponent {
                 standalone: true,
                 imports: [CommonModule, PacingStatusBadgeComponent, TooltipDirective, TooltipContainerComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="space-y-6">
-      <symphiq-tooltip-container />
-      <div class="space-y-8">
-        @for (stage of funnelStages(); track stage.stageMetric.metric) {
-          <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
-            <div class="flex items-start justify-between mb-4">
-              <div class="flex-1">
-                <div class="flex items-center gap-2 mb-1">
-                  <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold leading-tight m-0">
-                    {{ getMetricTitle(stage.stageMetric) }}
-                  </h3>
-                  @if (stage.stageMetric.description) {
-                    <button
-                      type="button"
-                      [ngClass]="infoIconClasses()"
-                      class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
-                      [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
-                      tooltipType="markdown"
-                      tooltipPosition="right">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      </svg>
-                    </button>
-                  }
-                </div>
-              </div>
-              <div class="flex items-center gap-3">
-                @if (stage.pacingInfo) {
-                  <symphiq-pacing-status-badge
-                    [viewMode]="viewMode()"
-                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
-                    [status]="stage.pacingInfo.status"
-                  />
-                }
-                <div [ngClass]="percentageBadgeClasses()" class="px-4 py-2 rounded-lg font-bold text-sm">
-                  +{{ formatPercentage(stage.stageMetric.percentageIncrease, 1) }}
-                </div>
-              </div>
-            </div>
-
-            <div class="grid grid-cols-3 gap-4 mb-4">
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                  {{ priorYear() }} Actual
-                </p>
-                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
-                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
-                </p>
-              </div>
-              @if (stage.pacingInfo) {
-                <div>
-                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                    {{ currentYear() }} Projected
-                  </p>
-                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold">
-                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
-                  </p>
-                </div>
-              }
-              <div>
-                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                  {{ currentYear() }} Target
-                </p>
-                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
-                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric) }}
-                </p>
-              </div>
-            </div>
-
-            @if (stage.relatedMetrics.length > 0) {
-              <div [ngClass]="dividerClasses()" class="my-4"></div>
-
-              <div class="space-y-2">
-                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
-                  Related Metrics
-                </p>
-                <div class="grid gap-2">
-                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
-                    <div [ngClass]="relatedMetricCardClasses()" class="p-3 rounded-lg">
-                      <div class="flex items-center justify-between mb-2">
-                        <div class="flex items-center gap-2 flex-1">
-                          <p [ngClass]="relatedMetricNameClasses()" class="text-sm font-semibold leading-tight">
-                            {{ getMetricTitle(metric.calc) }}
-                          </p>
-                          @if (metric.calc.description) {
-                            <button
-                              type="button"
-                              [ngClass]="infoIconClasses()"
-                              class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
-                              [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
-                              tooltipType="markdown"
-                              tooltipPosition="right">
-                              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                              </svg>
-                            </button>
-                          }
-                        </div>
-                        <div class="flex items-center gap-2">
-                          @if (metric.pacingInfo) {
-                            <symphiq-pacing-status-badge
-                              [viewMode]="viewMode()"
-                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
-                              [status]="metric.pacingInfo.status"
-                            />
-                          }
-                          <span [ngClass]="relatedPercentageBadgeClasses()" class="px-2 py-1 rounded text-xs font-bold">
-                            +{{ formatPercentage(metric.calc.percentageIncrease, 1) }}
-                          </span>
-                        </div>
-                      </div>
-                      <div class="grid gap-2 text-xs" [ngClass]="metric.pacingInfo ? 'grid-cols-3' : 'grid-cols-2'">
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()">{{ priorYear() }}: {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}</p>
-                        </div>
-                        @if (metric.pacingInfo) {
-                          <div>
-                            <p [ngClass]="relatedLabelClasses()">Proj: {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}</p>
-                          </div>
-                        }
-                        <div>
-                          <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric) }}</p>
-                        </div>
-                      </div>
-                    </div>
-                  }
-                </div>
-              </div>
-            }
-          </div>
-        }
-      </div>
-    </div>
+                template: `
+    <div class="space-y-6">
+      <symphiq-tooltip-container />
+      <div class="space-y-8">
+        @for (stage of funnelStages(); track stage.stageMetric.metric) {
+          <div [ngClass]="stageCardClasses()" class="rounded-xl p-6 border-2 transition-all duration-200">
+            <div class="flex items-start justify-between mb-4">
+              <div class="flex-1">
+                <div class="flex items-center gap-2 mb-1">
+                  <h3 [ngClass]="stageTitleClasses()" class="text-lg font-bold leading-tight m-0">
+                    {{ getMetricTitle(stage.stageMetric) }}
+                  </h3>
+                  @if (stage.stageMetric.description) {
+                    <button
+                      type="button"
+                      [ngClass]="infoIconClasses()"
+                      class="flex-shrink-0 w-6 h-6 rounded-full inline-flex items-center justify-center transition-colors"
+                      [libSymphiqTooltip]="getMarkdownTooltipContent(stage.stageMetric.description, getMetricTitle(stage.stageMetric))"
+                      tooltipType="markdown"
+                      tooltipPosition="right">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                    </button>
+                  }
+                </div>
+              </div>
+              <div class="flex items-center gap-3">
+                @if (stage.pacingInfo) {
+                  <symphiq-pacing-status-badge
+                    [viewMode]="viewMode()"
+                    [pacingPercentage]="stage.pacingInfo.pacingPercentage"
+                    [status]="stage.pacingInfo.status"
+                  />
+                }
+                <div [ngClass]="percentageBadgeClasses()" class="px-4 py-2 rounded-lg font-bold text-sm">
+                  {{ getGrowthSign(stage.stageMetric.metric) }}{{ formatPercentage(Math.abs(stage.stageMetric.percentageIncrease), 1) }}
+                </div>
+              </div>
+            </div>
+
+            <div class="grid grid-cols-3 gap-4 mb-4">
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                  {{ priorYear() }} Actual
+                </p>
+                <p [ngClass]="valueClasses()" class="text-2xl font-bold">
+                  {{ formatMetricValue(stage.stageMetric.currentValue, stage.stageMetric.metric) }}
+                </p>
+              </div>
+              @if (stage.pacingInfo) {
+                <div>
+                  <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                    {{ currentYear() }} Projected
+                  </p>
+                  <p [ngClass]="projectedValueClasses()" class="text-2xl font-bold">
+                    {{ formatMetricValue(stage.pacingInfo.projectedValue, stage.stageMetric.metric, false) }}
+                  </p>
+                </div>
+              }
+              <div>
+                <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                  {{ currentYear() }} Target
+                </p>
+                <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
+                  {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric) }}
+                </p>
+              </div>
+            </div>
+
+            @if (stage.relatedMetrics.length > 0) {
+              <div [ngClass]="dividerClasses()" class="my-4"></div>
+
+              <div class="space-y-2">
+                <p [ngClass]="relatedTitleClasses()" class="text-xs font-semibold uppercase tracking-wider mb-3">
+                  Related Metrics
+                </p>
+                <div class="grid gap-2">
+                  @for (metric of stage.relatedMetrics; track metric.calc.metric) {
+                    <div [ngClass]="relatedMetricCardClasses()" class="p-3 rounded-lg">
+                      <div class="flex items-center justify-between mb-2">
+                        <div class="flex items-center gap-2 flex-1">
+                          <p [ngClass]="relatedMetricNameClasses()" class="text-sm font-semibold leading-tight">
+                            {{ getMetricTitle(metric.calc) }}
+                          </p>
+                          @if (metric.calc.description) {
+                            <button
+                              type="button"
+                              [ngClass]="infoIconClasses()"
+                              class="flex-shrink-0 w-5 h-5 rounded-full inline-flex items-center justify-center transition-colors"
+                              [libSymphiqTooltip]="getMarkdownTooltipContent(metric.calc.description, getMetricTitle(metric.calc))"
+                              tooltipType="markdown"
+                              tooltipPosition="right">
+                              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                              </svg>
+                            </button>
+                          }
+                        </div>
+                        <div class="flex items-center gap-2">
+                          @if (metric.pacingInfo) {
+                            <symphiq-pacing-status-badge
+                              [viewMode]="viewMode()"
+                              [pacingPercentage]="metric.pacingInfo.pacingPercentage"
+                              [status]="metric.pacingInfo.status"
+                            />
+                          }
+                          <span [ngClass]="relatedPercentageBadgeClasses()" class="px-2 py-1 rounded text-xs font-bold">
+                            {{ getGrowthSign(metric.calc.metric) }}{{ formatPercentage(Math.abs(metric.calc.percentageIncrease), 1) }}
+                          </span>
+                        </div>
+                      </div>
+                      <div class="grid gap-2 text-xs" [ngClass]="metric.pacingInfo ? 'grid-cols-3' : 'grid-cols-2'">
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()">{{ priorYear() }}: {{ formatMetricValue(metric.calc.currentValue, metric.calc.metric) }}</p>
+                        </div>
+                        @if (metric.pacingInfo) {
+                          <div>
+                            <p [ngClass]="relatedLabelClasses()">Proj: {{ formatMetricValue(metric.pacingInfo.projectedValue, metric.calc.metric, false) }}</p>
+                          </div>
+                        }
+                        <div>
+                          <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric) }}</p>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        }
+      </div>
+    </div>
   `
             }]
     }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], calculations: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculations", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }] }); })();
@@ -56226,7 +56250,7 @@ var areaChart_component = /*#__PURE__*/Object.freeze({
 
 const _c0$r = ["absoluteInputRef"];
 const _c1$b = ["percentageInputRef"];
-function InitialTargetSettingComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelementStart(1, "svg", 11);
@@ -56250,14 +56274,14 @@ function InitialTargetSettingComponent_Conditional_17_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.currentPaceProjection()), " ");
 } }
-function InitialTargetSettingComponent_Conditional_21_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 34)(1, "span", 35);
     i0.ɵɵtext(2, " $ ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "input", 36, 0);
-    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_21_Conditional_5_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.absoluteInput, $event) || (ctx_r0.absoluteInput = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_21_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
+    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.absoluteInput, $event) || (ctx_r0.absoluteInput = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_5_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -56267,11 +56291,11 @@ function InitialTargetSettingComponent_Conditional_21_Conditional_5_Template(rf,
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.absoluteInput);
     i0.ɵɵproperty("ngClass", ctx_r0.inputClasses());
 } }
-function InitialTargetSettingComponent_Conditional_21_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 34)(1, "input", 37, 1);
-    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_21_Conditional_6_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.percentageInput, $event) || (ctx_r0.percentageInput = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_21_Conditional_6_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
+    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.percentageInput, $event) || (ctx_r0.percentageInput = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_22_Conditional_6_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span", 38);
     i0.ɵɵtext(4, " % ");
@@ -56284,17 +56308,17 @@ function InitialTargetSettingComponent_Conditional_21_Conditional_6_Template(rf,
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.inputSuffixClasses());
 } }
-function InitialTargetSettingComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 32)(1, "button", 33);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_21_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("absolute")); });
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_22_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("absolute")); });
     i0.ɵɵtext(2, " Absolute Amount ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "button", 33);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_21_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("percentage")); });
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_22_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setInputMode("percentage")); });
     i0.ɵɵtext(4, " % Increase ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_21_Conditional_5_Template, 5, 3, "div", 34)(6, InitialTargetSettingComponent_Conditional_21_Conditional_6_Template, 5, 3, "div", 34);
+    i0.ɵɵconditionalCreate(5, InitialTargetSettingComponent_Conditional_22_Conditional_5_Template, 5, 3, "div", 34)(6, InitialTargetSettingComponent_Conditional_22_Conditional_6_Template, 5, 3, "div", 34);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -56304,13 +56328,13 @@ function InitialTargetSettingComponent_Conditional_21_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.inputMode() === "absolute" ? 5 : 6);
 } }
-function InitialTargetSettingComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-area-chart", 22);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "108px");
 } }
-function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 23)(1, "p", 39);
     i0.ɵɵtext(2, " No revenue data available ");
     i0.ɵɵelementEnd()();
@@ -56319,77 +56343,96 @@ function InitialTargetSettingComponent_Conditional_29_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
 } }
-function InitialTargetSettingComponent_Conditional_32_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_33_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 49);
-    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_32_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleAdjustTarget()); });
+    i0.ɵɵelementStart(0, "button", 50);
+    i0.ɵɵlistener("click", function InitialTargetSettingComponent_Conditional_33_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.handleAdjustTarget()); });
     i0.ɵɵtext(1, " Adjust Revenue Target ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.secondaryButtonClasses());
 } }
-function InitialTargetSettingComponent_Conditional_32_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44)(1, "div", 45)(2, "span", 46);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 47)(5, "div")(6, "p", 41);
-    i0.ɵɵtext(7, " Gap to Close ");
+function InitialTargetSettingComponent_Conditional_33_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44)(1, "div", 45);
+    i0.ɵɵelement(2, "div", 46);
+    i0.ɵɵelementStart(3, "span", 47);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "p", 48);
-    i0.ɵɵtext(9);
+    i0.ɵɵelement(5, "div", 46);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 48)(7, "div")(8, "p", 41);
+    i0.ɵɵtext(9, " Gap to Close ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "p", 49);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div")(11, "p", 41);
-    i0.ɵɵtext(12, " Additional Growth Needed ");
+    i0.ɵɵelementStart(12, "div")(13, "div", 51)(14, "p", 13);
+    i0.ɵɵtext(15, " Additional Growth Needed ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "p", 48);
-    i0.ɵɵtext(14);
+    i0.ɵɵelementStart(16, "button", 52);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(17, "svg", 53);
+    i0.ɵɵelement(18, "path", 54);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(19, "p", 49);
+    i0.ɵɵtext(20);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r0.calculatedDividerClasses());
     i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.dividerLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.currentYear(), " YTD Gap ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.absValue(ctx_r0.gapToClose().amount)), " ");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r0.infoIconClasses())("libSymphiqTooltip", ctx_r0.additionalGrowthTooltip);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2(" ", ctx_r0.gapToClose().amount > 0 ? "+" : "", "", ctx_r0.formatPercentage(ctx_r0.gapToClose().percentage, 1), " ");
 } }
-function InitialTargetSettingComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 26)(1, "div", 17)(2, "div", 40)(3, "div")(4, "p", 41);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "p", 42);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, InitialTargetSettingComponent_Conditional_32_Conditional_8_Template, 2, 1, "button", 43);
+    i0.ɵɵconditionalCreate(8, InitialTargetSettingComponent_Conditional_33_Conditional_8_Template, 2, 1, "button", 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 44)(10, "div", 45)(11, "span", 46);
-    i0.ɵɵtext(12);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 47)(14, "div")(15, "p", 41);
-    i0.ɵɵtext(16, " Increase Amount ");
+    i0.ɵɵelementStart(9, "div", 44)(10, "div", 45);
+    i0.ɵɵelement(11, "div", 46);
+    i0.ɵɵelementStart(12, "span", 47);
+    i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "p", 48);
-    i0.ɵɵtext(18);
+    i0.ɵɵelement(14, "div", 46);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 48)(16, "div")(17, "p", 41);
+    i0.ɵɵtext(18, " Increase Amount ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "p", 49);
+    i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div")(20, "p", 41);
-    i0.ɵɵtext(21, " % Growth ");
+    i0.ɵɵelementStart(21, "div")(22, "p", 41);
+    i0.ɵɵtext(23, " % Growth ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "p", 48);
-    i0.ɵɵtext(23);
+    i0.ɵɵelementStart(24, "p", 49);
+    i0.ɵɵtext(25);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(24, InitialTargetSettingComponent_Conditional_32_Conditional_24_Template, 15, 10, "div", 44);
+    i0.ɵɵconditionalCreate(26, InitialTargetSettingComponent_Conditional_33_Conditional_26_Template, 21, 13, "div", 44);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56404,12 +56447,14 @@ function InitialTargetSettingComponent_Conditional_32_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.displayedTargetRevenue()), " ");
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.calculationState() === "results" ? 8 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.calculatedDividerClasses());
-    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r0.dividerLabelClasses());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" vs. ", ctx_r0.priorYear(), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.dividerBorderClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance(2);
@@ -56423,15 +56468,15 @@ function InitialTargetSettingComponent_Conditional_32_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.percentageIncrease(), 1), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 24 : -1);
+    i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 26 : -1);
 } }
-function InitialTargetSettingComponent_Conditional_33_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_34_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-area-chart", 22);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$")("height", "320px");
 } }
-function InitialTargetSettingComponent_Conditional_33_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_34_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 23)(1, "p", 39);
     i0.ɵɵtext(2, " No revenue data available ");
     i0.ɵɵelementEnd()();
@@ -56440,12 +56485,12 @@ function InitialTargetSettingComponent_Conditional_33_Conditional_5_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
 } }
-function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 27)(1, "p", 20);
     i0.ɵɵtext(2, " Year-over-Year Revenue Trend ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 21);
-    i0.ɵɵconditionalCreate(4, InitialTargetSettingComponent_Conditional_33_Conditional_4_Template, 1, 5, "symphiq-area-chart", 22)(5, InitialTargetSettingComponent_Conditional_33_Conditional_5_Template, 3, 1, "div", 23);
+    i0.ɵɵconditionalCreate(4, InitialTargetSettingComponent_Conditional_34_Conditional_4_Template, 1, 5, "symphiq-area-chart", 22)(5, InitialTargetSettingComponent_Conditional_34_Conditional_5_Template, 3, 1, "div", 23);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56456,14 +56501,14 @@ function InitialTargetSettingComponent_Conditional_33_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.revenueChartData() ? 4 : 5);
 } }
-function InitialTargetSettingComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 50)(2, "h2", 51);
+function InitialTargetSettingComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 55)(2, "h2", 56);
     i0.ɵɵtext(3, " Contributing Metrics ");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p", 39);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 52);
+    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 57);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -56535,16 +56580,33 @@ class InitialTargetSettingComponent {
         }, ...(ngDevMode ? [{ debugName: "percentageIncrease" }] : []));
         this.displayedMetricCalculations = computed(() => {
             const response = this.storedResponse();
+            const pacingData = this.pacingMetrics();
+            console.group('[PACING] displayedMetricCalculations computed');
+            console.log('[PACING] storedResponse exists:', !!response);
+            console.log('[PACING] pacingMetrics exists:', !!pacingData);
+            if (pacingData) {
+                console.log('[PACING] pacingMetrics summary:', {
+                    soFarMetricValuesCount: pacingData.soFarMetricValues?.length ?? 0,
+                    soFarMetrics: pacingData.soFarMetricValues?.map(m => ({ metric: m.metric, value: m.value })),
+                    projectedMetricValuesCount: pacingData.projectedMetricValues?.length ?? 0,
+                    lastYearMetricValuesMonthlyCount: pacingData.lastYearMetricValuesMonthly?.length ?? 0,
+                    lastYearUniqueMetrics: [...new Set(pacingData.lastYearMetricValuesMonthly?.map(m => m.metric))]
+                });
+            }
             if (!response) {
+                console.log('[PACING] No storedResponse - returning empty array');
+                console.groupEnd();
                 return [];
             }
             const results = [];
             if (response.funnelMetricValues) {
+                console.log('[PACING] Processing funnelMetricValues:', response.funnelMetricValues.length);
                 response.funnelMetricValues.forEach((metricValue) => {
                     const metric = metricValue.metric;
                     const funnelMetric = this.funnelMetrics().find(fm => fm.funnelMetric === metric && fm.funnelMetric === fm.relatedMetric);
                     const currentValue = sumMetricFromUiData(this.mainUiData(), metric, 'priorYear');
                     const { targetValue, percentageIncrease } = this.parseMetricValue(metricValue.value);
+                    console.log(`[PACING] Stage metric ${metric}:`, { currentValue, targetValue, percentageIncrease, funnelInd: funnelMetric?.funnelInd });
                     results.push({
                         metric,
                         funnelMetric: metric,
@@ -56559,6 +56621,7 @@ class InitialTargetSettingComponent {
                 });
             }
             if (response.relatedMetricTargets) {
+                console.log('[PACING] Processing relatedMetricTargets:', response.relatedMetricTargets.length);
                 response.relatedMetricTargets.forEach((metricValue) => {
                     const metric = metricValue.metric;
                     const funnelMetric = this.funnelMetrics().find(fm => fm.relatedMetric === metric);
@@ -56577,6 +56640,10 @@ class InitialTargetSettingComponent {
                     });
                 });
             }
+            console.log('[PACING] Final results count:', results.length);
+            console.log('[PACING] Stage metrics:', results.filter(r => r.isFunnelStage).map(r => r.metric));
+            console.log('[PACING] Related metrics:', results.filter(r => !r.isFunnelStage).map(r => r.metric));
+            console.groupEnd();
             return results;
         }, ...(ngDevMode ? [{ debugName: "displayedMetricCalculations" }] : []));
         this.displayedTargetRevenue = computed(() => {
@@ -56643,6 +56710,10 @@ class InitialTargetSettingComponent {
         }, ...(ngDevMode ? [{ debugName: "revenueChartData" }] : []));
         this.currentYear = computed(() => new Date().getFullYear(), ...(ngDevMode ? [{ debugName: "currentYear" }] : []));
         this.priorYear = computed(() => new Date().getFullYear() - 1, ...(ngDevMode ? [{ debugName: "priorYear" }] : []));
+        this.additionalGrowthTooltip = {
+            title: 'Additional Growth Needed',
+            markdown: 'This percentage represents the additional growth required beyond your current projected pace to reach your revenue target. It shows how much more improvement is needed in your funnel metrics to close the gap between your projected performance and your goal.'
+        };
         effect(() => {
             const response = this.reverseCalculationResponse();
             if (response) {
@@ -56828,6 +56899,11 @@ class InitialTargetSettingComponent {
             ? 'border-t border-purple-500/20'
             : 'border-t border-purple-200';
     }
+    dividerBorderClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-purple-500/20'
+            : 'bg-purple-200';
+    }
     chartTitleClasses() {
         return this.viewMode() === ViewModeEnum.DARK
             ? 'text-slate-200'
@@ -56898,6 +56974,11 @@ class InitialTargetSettingComponent {
             ? 'bg-slate-800/60 border-slate-600'
             : 'bg-slate-50 border-slate-300';
     }
+    infoIconClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'bg-slate-700/50 text-slate-400 hover:bg-slate-600/50 hover:text-slate-300'
+            : 'bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-700';
+    }
     static { this.ɵfac = function InitialTargetSettingComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InitialTargetSettingComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InitialTargetSettingComponent, selectors: [["symphiq-initial-target-setting"]], viewQuery: function InitialTargetSettingComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$r, 5);
@@ -56906,46 +56987,48 @@ class InitialTargetSettingComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.percentageInputRef = _t.first);
-        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 38, vars: 33, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "flex", "flex-col", "gap-8"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "flex", "flex-col", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "relative", "pt-6", "mt-6", 3, "ngClass"], [1, "absolute", "top-0", "left-1/2", "-translate-x-1/2", "-translate-y-1/2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "h2", 4);
-            i0.ɵɵtext(3);
+        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], reverseCalculationResponse: [1, "reverseCalculationResponse"] }, outputs: { targetsCreated: "targetsCreated", calculateRevenueRequest: "calculateRevenueRequest" }, decls: 39, vars: 33, consts: [["absoluteInputRef", ""], ["percentageInputRef", ""], [1, "space-y-8", "pb-32"], [1, "rounded-2xl", "border", "shadow-lg", "p-8", 3, "ngClass"], [1, "text-2xl", "font-bold", "mb-6", 3, "ngClass"], [1, "flex", "flex-col", "gap-8"], [1, "grid", "lg:grid-cols-2", "gap-8"], [1, "flex", "flex-col", "gap-4"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-4", "place-content-between"], [1, "flex", "items-center", "gap-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", 3, "ngClass"], [1, "text-lg", "font-bold", 3, "ngClass"], [1, "form-area-collapse"], [1, "form-area-content"], [1, "space-y-6"], [1, "chart-in-column"], [1, "chart-in-column-content"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol", "height"], [1, "h-64", "flex", "items-center", "justify-center"], [1, "calculated-card-enter", "order-first", "lg:order-last"], [1, "calculated-card-content"], [1, "p-6", "rounded-xl", "border-2", "h-full", 3, "ngClass"], [1, "w-full"], [1, "metrics-section-enter"], [1, "metrics-section-content"], [3, "submitClick", "cancelClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText", "showCancelButton"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"], [1, "flex", "gap-2"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "absolute", "left-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "step", "1000", 1, "w-full", "pl-10", "pr-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], ["type", "number", "placeholder", "0", "min", "0", "max", "1000", "step", "0.1", 1, "w-full", "pr-10", "pl-4", "py-4", "rounded-xl", "text-2xl", "font-bold", "border-2", "transition-all", 3, "ngModelChange", "ngModel", "ngClass"], [1, "absolute", "right-4", "top-1/2", "-translate-y-1/2", "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "ngClass"], [1, "relative", "pt-6", "mt-6"], [1, "absolute", "top-0", "left-0", "right-0", "flex", "items-center", "-translate-y-1/2"], [1, "flex-1", "h-px", 3, "ngClass"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", "whitespace-nowrap", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "text-sm", "font-semibold", "transition-all", "whitespace-nowrap", 3, "click", "ngClass"], [1, "flex", "items-center", "gap-1", "mb-1"], ["type", "button", "tooltipType", "markdown", "tooltipPosition", "top", 1, "flex-shrink-0", "w-4", "h-4", "rounded-full", "inline-flex", "items-center", "justify-center", "transition-colors", 3, "ngClass", "libSymphiqTooltip"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-3", "h-3"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations", "pacingMetrics"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 2);
+            i0.ɵɵelement(1, "symphiq-tooltip-container");
+            i0.ɵɵelementStart(2, "div", 3)(3, "h2", 4);
+            i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "div", 5)(5, "div", 6)(6, "div", 7)(7, "div", 8)(8, "div", 9)(9, "div", 10);
+            i0.ɵɵelementStart(5, "div", 5)(6, "div", 6)(7, "div", 7)(8, "div", 8)(9, "div", 9)(10, "div", 10);
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(10, "svg", 11);
-            i0.ɵɵelement(11, "path", 12);
+            i0.ɵɵelementStart(11, "svg", 11);
+            i0.ɵɵelement(12, "path", 12);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(12, "div")(13, "p", 13);
-            i0.ɵɵtext(14);
+            i0.ɵɵelementStart(13, "div")(14, "p", 13);
+            i0.ɵɵtext(15);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "p", 14);
-            i0.ɵɵtext(16);
+            i0.ɵɵelementStart(16, "p", 14);
+            i0.ɵɵtext(17);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(17, InitialTargetSettingComponent_Conditional_17_Template, 8, 4, "div", 10);
+            i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_18_Template, 8, 4, "div", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 15)(19, "div", 16)(20, "div", 17);
-            i0.ɵɵconditionalCreate(21, InitialTargetSettingComponent_Conditional_21_Template, 7, 3);
+            i0.ɵɵelementStart(19, "div", 15)(20, "div", 16)(21, "div", 17);
+            i0.ɵɵconditionalCreate(22, InitialTargetSettingComponent_Conditional_22_Template, 7, 3);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(22, "div", 18)(23, "div", 19)(24, "div")(25, "p", 20);
-            i0.ɵɵtext(26, " Year-over-Year Revenue Trend ");
+            i0.ɵɵelementStart(23, "div", 18)(24, "div", 19)(25, "div")(26, "p", 20);
+            i0.ɵɵtext(27, " Year-over-Year Revenue Trend ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "div", 21);
-            i0.ɵɵconditionalCreate(28, InitialTargetSettingComponent_Conditional_28_Template, 1, 5, "symphiq-area-chart", 22)(29, InitialTargetSettingComponent_Conditional_29_Template, 3, 1, "div", 23);
+            i0.ɵɵelementStart(28, "div", 21);
+            i0.ɵɵconditionalCreate(29, InitialTargetSettingComponent_Conditional_29_Template, 1, 5, "symphiq-area-chart", 22)(30, InitialTargetSettingComponent_Conditional_30_Template, 3, 1, "div", 23);
             i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(30, "div", 24)(31, "div", 25);
-            i0.ɵɵconditionalCreate(32, InitialTargetSettingComponent_Conditional_32_Template, 25, 16, "div", 26);
+            i0.ɵɵelementStart(31, "div", 24)(32, "div", 25);
+            i0.ɵɵconditionalCreate(33, InitialTargetSettingComponent_Conditional_33_Template, 27, 17, "div", 26);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(33, InitialTargetSettingComponent_Conditional_33_Template, 6, 3, "div", 27);
+            i0.ɵɵconditionalCreate(34, InitialTargetSettingComponent_Conditional_34_Template, 6, 3, "div", 27);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(34, "div", 28)(35, "div", 29);
-            i0.ɵɵconditionalCreate(36, InitialTargetSettingComponent_Conditional_36_Template, 7, 7, "div", 3);
+            i0.ɵɵelementStart(35, "div", 28)(36, "div", 29);
+            i0.ɵɵconditionalCreate(37, InitialTargetSettingComponent_Conditional_37_Template, 7, 7, "div", 3);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(37, "symphiq-sticky-submit-bar", 30);
-            i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_37_listener() { return ctx.handleSubmitClick(); })("cancelClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_cancelClick_37_listener() { return ctx.handleCancel(); });
+            i0.ɵɵelementStart(38, "symphiq-sticky-submit-bar", 30);
+            i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_38_listener() { return ctx.handleSubmitClick(); })("cancelClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_cancelClick_38_listener() { return ctx.handleCancel(); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance();
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.sectionCardClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.sectionTitleClasses());
@@ -56966,11 +57049,11 @@ class InitialTargetSettingComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.formatCurrency(ctx.priorYearRevenue()), " ");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 17 : -1);
+            i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 18 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("form-area-collapse-hidden", ctx.calculationState() === "results");
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.calculationState() !== "results" ? 21 : -1);
+            i0.ɵɵconditional(ctx.calculationState() !== "results" ? 22 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("chart-in-column-active", ctx.calculationState() === "results");
             i0.ɵɵadvance(3);
@@ -56978,22 +57061,24 @@ class InitialTargetSettingComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.chartContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.revenueChartData() ? 28 : 29);
+            i0.ɵɵconditional(ctx.revenueChartData() ? 29 : 30);
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("calculated-card-enter-active", ctx.calculatedRevenue() > 0);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 32 : -1);
+            i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 33 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.calculationState() !== "results" ? 33 : -1);
+            i0.ɵɵconditional(ctx.calculationState() !== "results" ? 34 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("metrics-section-enter-active", ctx.showMetricsVisualization());
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.showMetricsVisualization() ? 36 : -1);
+            i0.ɵɵconditional(ctx.showMetricsVisualization() ? 37 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("viewMode", ctx.viewMode())("isValid", ctx.isValid())("isSubmitting", ctx.isCalculating())("validationMessage", ctx.validationMessage())("buttonText", ctx.submitButtonText())("showCancelButton", ctx.calculationState() === "input" && ctx.hasStoredResponse());
         } }, dependencies: [CommonModule, i1$1.NgClass, FormsModule, i2$1.DefaultValueAccessor, i2$1.NumberValueAccessor, i2$1.NgControlStatus, i2$1.MinValidator, i2$1.MaxValidator, i2$1.NgModel, FunnelMetricsVisualizationComponent,
             StickySubmitBarComponent,
-            AreaChartComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}"], changeDetection: 0 }); }
+            AreaChartComponent,
+            TooltipDirective,
+            TooltipContainerComponent], styles: [".calculated-card-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-out}.calculated-card-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.calculated-card-content[_ngcontent-%COMP%]{overflow:hidden}.form-area-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.form-area-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.form-area-content[_ngcontent-%COMP%]{overflow:hidden}.chart-section-collapse[_ngcontent-%COMP%]{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease-out}.chart-section-collapse-hidden[_ngcontent-%COMP%]{grid-template-rows:0fr}.chart-section-content[_ngcontent-%COMP%]{overflow:hidden}.chart-in-column[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease-out}.chart-in-column-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.chart-in-column-content[_ngcontent-%COMP%]{overflow:hidden}.metrics-section-enter[_ngcontent-%COMP%]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease-out}.metrics-section-enter-active[_ngcontent-%COMP%]{grid-template-rows:1fr}.metrics-section-content[_ngcontent-%COMP%]{overflow:hidden}"], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InitialTargetSettingComponent, [{
         type: Component,
@@ -57002,9 +57087,12 @@ class InitialTargetSettingComponent {
                     FormsModule,
                     FunnelMetricsVisualizationComponent,
                     StickySubmitBarComponent,
-                    AreaChartComponent
+                    AreaChartComponent,
+                    TooltipDirective,
+                    TooltipContainerComponent
                 ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="space-y-8 pb-32">
+      <symphiq-tooltip-container />
       <div [ngClass]="sectionCardClasses()" class="rounded-2xl border shadow-lg p-8">
         <h2 [ngClass]="sectionTitleClasses()" class="text-2xl font-bold mb-6">
           Calculate Your {{ currentYear() }} Revenue Target
@@ -57156,11 +57244,13 @@ class InitialTargetSettingComponent {
                         }
                       </div>
 
-                      <div class="relative pt-6 mt-6" [ngClass]="calculatedDividerClasses()">
-                        <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                      <div class="relative pt-6 mt-6">
+                        <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
+                          <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
                           <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
                             vs. {{ priorYear() }}
                           </span>
+                          <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
                         </div>
                         <div class="grid grid-cols-2 gap-4 pt-2">
                           <div>
@@ -57183,11 +57273,13 @@ class InitialTargetSettingComponent {
                       </div>
 
                       @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
-                        <div class="relative pt-6 mt-6" [ngClass]="calculatedDividerClasses()">
-                          <div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                        <div class="relative pt-6 mt-6">
+                          <div class="absolute top-0 left-0 right-0 flex items-center -translate-y-1/2">
+                            <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
                             <span [ngClass]="dividerLabelClasses()" class="px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap">
                               {{ currentYear() }} YTD Gap
                             </span>
+                            <div class="flex-1 h-px" [ngClass]="dividerBorderClasses()"></div>
                           </div>
                           <div class="grid grid-cols-2 gap-4 pt-2">
                             <div>
@@ -57199,9 +57291,22 @@ class InitialTargetSettingComponent {
                               </p>
                             </div>
                             <div>
-                              <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                                Additional Growth Needed
-                              </p>
+                              <div class="flex items-center gap-1 mb-1">
+                                <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider">
+                                  Additional Growth Needed
+                                </p>
+                                <button
+                                  type="button"
+                                  [ngClass]="infoIconClasses()"
+                                  class="flex-shrink-0 w-4 h-4 rounded-full inline-flex items-center justify-center transition-colors"
+                                  [libSymphiqTooltip]="additionalGrowthTooltip"
+                                  tooltipType="markdown"
+                                  tooltipPosition="top">
+                                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                  </svg>
+                                </button>
+                              </div>
                               <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
                                 {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(gapToClose().percentage, 1) }}
                               </p>
@@ -57285,7 +57390,7 @@ class InitialTargetSettingComponent {
             type: ViewChild,
             args: ['percentageInputRef']
         }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], reverseCalculationResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseCalculationResponse", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], calculateRevenueRequest: [{ type: i0.Output, args: ["calculateRevenueRequest"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 396 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 418 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);