@eric-emg/symphiq-components 1.2.173 → 1.2.175

package/fesm2022/symphiq-components.mjs

@@ -55707,58 +55707,298 @@ function formatNumber(value) {
     });
 }
 
+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)
+        return 'ahead';
+    if (currentValue >= priorValue * 0.95)
+        return 'on-pace';
+    return 'behind';
+}
+function getPacingColor(pacingPercentage) {
+    if (pacingPercentage >= 5)
+        return 'text-emerald-600';
+    if (pacingPercentage >= -5)
+        return 'text-amber-600';
+    return 'text-red-600';
+}
+function getPacingColorDark(pacingPercentage) {
+    if (pacingPercentage >= 5)
+        return 'text-emerald-400';
+    if (pacingPercentage >= -5)
+        return 'text-amber-400';
+    return 'text-red-400';
+}
+function getPacingBgClass(status, isDark) {
+    if (status === 'ahead') {
+        return isDark ? 'bg-emerald-900/30' : 'bg-emerald-50';
+    }
+    if (status === 'on-pace') {
+        return isDark ? 'bg-amber-900/30' : 'bg-amber-50';
+    }
+    return isDark ? 'bg-red-900/30' : 'bg-red-50';
+}
+function getPacingTextClass(status, isDark) {
+    if (status === 'ahead') {
+        return isDark ? 'text-emerald-300' : 'text-emerald-700';
+    }
+    if (status === 'on-pace') {
+        return isDark ? 'text-amber-300' : 'text-amber-700';
+    }
+    return isDark ? 'text-red-300' : 'text-red-700';
+}
+function getPacingBorderClass(status, isDark) {
+    if (status === 'ahead') {
+        return isDark ? 'border-emerald-500/30' : 'border-emerald-300';
+    }
+    if (status === 'on-pace') {
+        return isDark ? 'border-amber-500/30' : 'border-amber-300';
+    }
+    return isDark ? 'border-red-500/30' : 'border-red-300';
+}
+function formatPacingDisplay(pacingPercentage) {
+    const sign = pacingPercentage >= 0 ? '+' : '';
+    const formatted = Math.abs(pacingPercentage).toFixed(1);
+    if (pacingPercentage >= 5) {
+        return `${sign}${formatted}% ahead`;
+    }
+    if (pacingPercentage >= -5) {
+        return `${sign}${formatted}% on pace`;
+    }
+    return `${sign}${formatted}% behind`;
+}
+function calculateGapToTarget(projectedValue, targetValue) {
+    const amount = targetValue - projectedValue;
+    const percentage = projectedValue > 0 ? (amount / projectedValue) * 100 : 0;
+    return { amount, percentage };
+}
+function projectFullYearValue(ytdValue, dayOfYear) {
+    const daysInYear = 365;
+    if (dayOfYear === 0 || dayOfYear > daysInYear)
+        return ytdValue;
+    return (ytdValue / dayOfYear) * daysInYear;
+}
+function getPacingDisplayInfo(pacingPercentage, status, isDark) {
+    const displayText = formatPacingDisplay(pacingPercentage);
+    const colorClass = getPacingTextClass(status, isDark);
+    const bgClass = getPacingBgClass(status, isDark);
+    const borderClass = getPacingBorderClass(status, isDark);
+    let iconClass = '';
+    if (status === 'ahead') {
+        iconClass = 'heroicons-solid-arrow-trending-up';
+    }
+    else if (status === 'on-pace') {
+        iconClass = 'heroicons-solid-arrow-right';
+    }
+    else {
+        iconClass = 'heroicons-solid-arrow-trending-down';
+    }
+    return {
+        status,
+        colorClass,
+        bgClass,
+        borderClass,
+        iconClass,
+        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);
+    return {
+        pacingPercentage,
+        status,
+        projectedValue
+    };
+}
+
+class PacingStatusBadgeComponent {
+    constructor() {
+        this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+        this.pacingPercentage = input(0, ...(ngDevMode ? [{ debugName: "pacingPercentage" }] : []));
+        this.status = input('on-pace', ...(ngDevMode ? [{ debugName: "status" }] : []));
+        this.displayInfo = computed(() => {
+            const isDark = this.viewMode() === ViewModeEnum.DARK;
+            return getPacingDisplayInfo(this.pacingPercentage(), this.status(), isDark);
+        }, ...(ngDevMode ? [{ debugName: "displayInfo" }] : []));
+        this.badgeClasses = computed(() => {
+            const info = this.displayInfo();
+            return `${info.bgClass} ${info.colorClass} ${info.borderClass}`;
+        }, ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
+        this.iconClasses = computed(() => {
+            return this.displayInfo().colorClass;
+        }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+        this.iconSymbol = computed(() => {
+            const status = this.status();
+            if (status === 'ahead')
+                return '↗';
+            if (status === 'behind')
+                return '↘';
+            return '→';
+        }, ...(ngDevMode ? [{ debugName: "iconSymbol" }] : []));
+        this.displayText = computed(() => {
+            return this.displayInfo().displayText;
+        }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
+    }
+    static { this.ɵfac = function PacingStatusBadgeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PacingStatusBadgeComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PacingStatusBadgeComponent, selectors: [["symphiq-pacing-status-badge"]], inputs: { viewMode: [1, "viewMode"], pacingPercentage: [1, "pacingPercentage"], status: [1, "status"] }, decls: 5, vars: 4, consts: [[1, "inline-flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "border", "font-semibold", "text-sm", "transition-all", 3, "ngClass"], [1, "text-lg", 3, "ngClass"]], template: function PacingStatusBadgeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "span", 1);
+            i0.ɵɵtext(2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "span");
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngClass", ctx.badgeClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", ctx.iconClasses());
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.iconSymbol(), " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.displayText());
+        } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PacingStatusBadgeComponent, [{
+        type: Component,
+        args: [{
+                selector: 'symphiq-pacing-status-badge',
+                standalone: true,
+                imports: [CommonModule],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div
+      [ngClass]="badgeClasses()"
+      class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border font-semibold text-sm transition-all"
+    >
+      <span [ngClass]="iconClasses()" class="text-lg">
+        {{ iconSymbol() }}
+      </span>
+      <span>{{ displayText() }}</span>
+    </div>
+  `
+            }]
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pacingPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingPercentage", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PacingStatusBadgeComponent, { className: "PacingStatusBadgeComponent", filePath: "lib/components/revenue-calculator-dashboard/pacing-status-badge.component.ts", lineNumber: 23 }); })();
+
 const _forTrack0$i = ($index, $item) => $item.stageMetric.metric;
-const _forTrack1$3 = ($index, $item) => $item.metric;
-function FunnelMetricsVisualizationComponent_For_3_Conditional_20_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15)(1, "div", 16)(2, "p", 17);
-    i0.ɵɵtext(3);
+const _forTrack1$3 = ($index, $item) => $item.calc.metric;
+function FunnelMetricsVisualizationComponent_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-pacing-status-badge", 8);
+} if (rf & 2) {
+    const stage_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", stage_r1.pacingInfo.pacingPercentage)("status", stage_r1.pacingInfo.status);
+} }
+function FunnelMetricsVisualizationComponent_For_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 11);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 18);
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(3, "p", 12);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 19)(7, "div")(8, "p", 20);
-    i0.ɵɵtext(9);
+} if (rf & 2) {
+    const stage_r1 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentYear(), " Projected ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.projectedValueClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.pacingInfo.projectedValue, stage_r1.stageMetric.metric), " ");
+} }
+function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-pacing-status-badge", 8);
+} if (rf & 2) {
+    const metric_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("pacingPercentage", metric_r3.pacingInfo.pacingPercentage)("status", metric_r3.pacingInfo.status);
+} }
+function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 23);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div")(11, "p", 20);
-    i0.ɵɵtext(12);
+} if (rf & 2) {
+    const metric_r3 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("Proj: ", ctx_r1.formatMetricValue(metric_r3.pacingInfo.projectedValue, metric_r3.calc.metric));
+} }
+function FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 18)(2, "p", 19);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 20);
+    i0.ɵɵconditionalCreate(5, FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_5_Template, 1, 3, "symphiq-pacing-status-badge", 8);
+    i0.ɵɵelementStart(6, "span", 21);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(8, "div", 22)(9, "div")(10, "p", 23);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(12, FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Conditional_12_Template, 3, 2, "div");
+    i0.ɵɵelementStart(13, "div")(14, "p", 23);
+    i0.ɵɵtext(15);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const metric_r1 = ctx.$implicit;
+    const metric_r3 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedMetricCardClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedMetricNameClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getMetricTitle(metric_r1), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getMetricTitle(metric_r3.calc), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(metric_r3.pacingInfo ? 5 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.relatedPercentageBadgeClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", ctx_r1.formatPercentage(metric_r1.percentageIncrease, 1), " ");
-    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" +", ctx_r1.formatPercentage(metric_r3.calc.percentageIncrease, 1), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", metric_r3.pacingInfo ? "grid-cols-3" : "grid-cols-2");
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("Prior: ", ctx_r1.formatMetricValue(metric_r1.currentValue, metric_r1.metric));
+    i0.ɵɵtextInterpolate2("", ctx_r1.priorYear(), ": ", ctx_r1.formatMetricValue(metric_r3.calc.currentValue, metric_r3.calc.metric));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(metric_r3.pacingInfo ? 12 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("Target: ", ctx_r1.formatMetricValue(metric_r1.targetValue, metric_r1.metric));
+    i0.ɵɵtextInterpolate1("Target: ", ctx_r1.formatMetricValue(metric_r3.calc.targetValue, metric_r3.calc.metric));
 } }
-function FunnelMetricsVisualizationComponent_For_3_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 11);
-    i0.ɵɵelementStart(1, "div", 12)(2, "p", 13);
+function FunnelMetricsVisualizationComponent_For_3_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 13);
+    i0.ɵɵelementStart(1, "div", 14)(2, "p", 15);
     i0.ɵɵtext(3, " Related Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 14);
-    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_3_Conditional_20_For_6_Template, 13, 9, "div", 15, _forTrack1$3);
+    i0.ɵɵelementStart(4, "div", 16);
+    i0.ɵɵrepeaterCreate(5, FunnelMetricsVisualizationComponent_For_3_Conditional_23_For_6_Template, 16, 13, "div", 17, _forTrack1$3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const stage_r3 = i0.ɵɵnextContext().$implicit;
+    const stage_r1 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r1.dividerClasses());
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.relatedTitleClasses());
     i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(stage_r3.relatedMetrics);
+    i0.ɵɵrepeater(stage_r1.relatedMetrics);
 } }
 function FunnelMetricsVisualizationComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "h3", 5);
@@ -55768,65 +56008,91 @@ function FunnelMetricsVisualizationComponent_For_3_Template(rf, ctx) { if (rf &
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(7, "div", 7);
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 8)(10, "div")(11, "p", 9);
-    i0.ɵɵtext(12, " Prior Year ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "p", 10);
+    i0.ɵɵconditionalCreate(8, FunnelMetricsVisualizationComponent_For_3_Conditional_8_Template, 1, 3, "symphiq-pacing-status-badge", 8);
+    i0.ɵɵelementStart(9, "div", 9);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(11, "div", 10)(12, "div")(13, "p", 11);
     i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "p", 12);
+    i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div")(16, "p", 9);
-    i0.ɵɵtext(17, " Target ");
+    i0.ɵɵconditionalCreate(17, FunnelMetricsVisualizationComponent_For_3_Conditional_17_Template, 5, 4, "div");
+    i0.ɵɵelementStart(18, "div")(19, "p", 11);
+    i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "p", 10);
-    i0.ɵɵtext(19);
+    i0.ɵɵelementStart(21, "p", 12);
+    i0.ɵɵtext(22);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(20, FunnelMetricsVisualizationComponent_For_3_Conditional_20_Template, 7, 2);
+    i0.ɵɵconditionalCreate(23, FunnelMetricsVisualizationComponent_For_3_Conditional_23_Template, 7, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const stage_r3 = ctx.$implicit;
+    const stage_r1 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngClass", ctx_r1.stageCardClasses());
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.stageTitleClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.getMetricTitle(stage_r3.stageMetric), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getMetricTitle(stage_r1.stageMetric), " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.stageDescriptionClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", stage_r3.stageMetric.description, " ");
+    i0.ɵɵtextInterpolate1(" ", stage_r1.stageMetric.description, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(stage_r1.pacingInfo ? 8 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.percentageBadgeClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", ctx_r1.formatPercentage(stage_r3.stageMetric.percentageIncrease, 1), " ");
+    i0.ɵɵtextInterpolate1(" +", ctx_r1.formatPercentage(stage_r1.stageMetric.percentageIncrease, 1), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.priorYear(), " Actual ");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.valueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r3.stageMetric.currentValue, stage_r3.stageMetric.metric), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.currentValue, stage_r1.stageMetric.metric), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(stage_r1.pacingInfo ? 17 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.labelClasses());
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentYear(), " Target ");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.targetValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r3.stageMetric.targetValue, stage_r3.stageMetric.metric), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatMetricValue(stage_r1.stageMetric.targetValue, stage_r1.stageMetric.metric), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(stage_r3.relatedMetrics.length > 0 ? 20 : -1);
+    i0.ɵɵconditional(stage_r1.relatedMetrics.length > 0 ? 23 : -1);
 } }
 class FunnelMetricsVisualizationComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.calculations = input([], ...(ngDevMode ? [{ debugName: "calculations" }] : []));
+        this.pacingMetrics = input([], ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        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 pacing = this.pacingMetrics();
             const grouped = new Map();
             const stageMetrics = calcs.filter(c => c.isFunnelStage);
             const relatedMetrics = calcs.filter(c => !c.isFunnelStage);
             stageMetrics.forEach(stageMetric => {
                 const related = relatedMetrics.filter(rm => rm.funnelMetric === stageMetric.metric);
-                grouped.set(stageMetric.metric, { stageMetric, relatedMetrics: related });
+                const stagePacingMetric = pacing.find(p => p.metric === stageMetric.metric);
+                const stagePacingInfo = stagePacingMetric ? calculateMetricPacing(stagePacingMetric) : null;
+                const relatedWithPacing = related.map(relMetric => {
+                    const relPacingMetric = pacing.find(p => p.metric === relMetric.metric);
+                    const relPacingInfo = relPacingMetric ? calculateMetricPacing(relPacingMetric) : null;
+                    return { calc: relMetric, pacingInfo: relPacingInfo };
+                });
+                grouped.set(stageMetric.metric, {
+                    stageMetric,
+                    relatedMetrics: relatedWithPacing,
+                    pacingInfo: stagePacingInfo
+                });
             });
             return Array.from(grouped.values()).sort((a, b) => {
                 const aInd = a.stageMetric.funnelInd ?? 999;
@@ -55870,6 +56136,11 @@ class FunnelMetricsVisualizationComponent {
             ? 'text-purple-300'
             : 'text-purple-700';
     }
+    projectedValueClasses() {
+        return this.viewMode() === ViewModeEnum.DARK
+            ? 'text-amber-300'
+            : 'text-amber-700';
+    }
     dividerClasses() {
         return this.viewMode() === ViewModeEnum.DARK
             ? 'border-t border-purple-500/20'
@@ -55922,21 +56193,21 @@ class FunnelMetricsVisualizationComponent {
             .join(' ');
     }
     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"] }, decls: 4, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-3"], [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, "text-lg", "font-bold", "mb-1", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "px-4", "py-2", "rounded-lg", "font-bold", "text-sm", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "mb-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [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, "text-sm", "font-semibold", "flex-1", 3, "ngClass"], [1, "px-2", "py-1", "rounded", "text-xs", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-2", "text-xs"], [3, "ngClass"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FunnelMetricsVisualizationComponent, selectors: [["symphiq-funnel-metrics-visualization"]], inputs: { viewMode: [1, "viewMode"], calculations: [1, "calculations"], pacingMetrics: [1, "pacingMetrics"] }, decls: 4, vars: 0, consts: [[1, "space-y-6"], [1, "space-y-3"], [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, "text-lg", "font-bold", "mb-1", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [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"], [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, "text-sm", "font-semibold", "flex-1", 3, "ngClass"], [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"]], template: function FunnelMetricsVisualizationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵrepeaterCreate(2, FunnelMetricsVisualizationComponent_For_3_Template, 21, 14, "div", 2, _forTrack0$i);
+            i0.ɵɵrepeaterCreate(2, FunnelMetricsVisualizationComponent_For_3_Template, 24, 18, "div", 2, _forTrack0$i);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.funnelStages());
-        } }, dependencies: [CommonModule, i1$1.NgClass], encapsulation: 2, changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1$1.NgClass, PacingStatusBadgeComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FunnelMetricsVisualizationComponent, [{
         type: Component,
         args: [{
                 selector: 'symphiq-funnel-metrics-visualization',
                 standalone: true,
-                imports: [CommonModule],
+                imports: [CommonModule, PacingStatusBadgeComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: `
     <div class="space-y-6">
@@ -55952,23 +56223,42 @@ class FunnelMetricsVisualizationComponent {
                   {{ stage.stageMetric.description }}
                 </p>
               </div>
-              <div [ngClass]="percentageBadgeClasses()" class="px-4 py-2 rounded-lg font-bold text-sm">
-                +{{ formatPercentage(stage.stageMetric.percentageIncrease, 1) }}
+              <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-2 gap-4 mb-4">
+            <div class="grid grid-cols-3 gap-4 mb-4">
               <div>
                 <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                  Prior Year
+                  {{ 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) }}
+                  </p>
+                </div>
+              }
               <div>
                 <p [ngClass]="labelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
-                  Target
+                  {{ currentYear() }} Target
                 </p>
                 <p [ngClass]="targetValueClasses()" class="text-2xl font-bold">
                   {{ formatMetricValue(stage.stageMetric.targetValue, stage.stageMetric.metric) }}
@@ -55984,22 +56274,36 @@ class FunnelMetricsVisualizationComponent {
                   Related Metrics
                 </p>
                 <div class="grid gap-2">
-                  @for (metric of stage.relatedMetrics; track metric.metric) {
+                  @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">
                         <p [ngClass]="relatedMetricNameClasses()" class="text-sm font-semibold flex-1">
-                          {{ getMetricTitle(metric) }}
+                          {{ getMetricTitle(metric.calc) }}
                         </p>
-                        <span [ngClass]="relatedPercentageBadgeClasses()" class="px-2 py-1 rounded text-xs font-bold">
-                          +{{ formatPercentage(metric.percentageIncrease, 1) }}
-                        </span>
+                        <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 grid-cols-2 gap-2 text-xs">
+                      <div class="grid gap-2 text-xs" [ngClass]="metric.pacingInfo ? 'grid-cols-3' : 'grid-cols-2'">
                         <div>
-                          <p [ngClass]="relatedLabelClasses()">Prior: {{ formatMetricValue(metric.currentValue, metric.metric) }}</p>
+                          <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) }}</p>
+                          </div>
+                        }
                         <div>
-                          <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.targetValue, metric.metric) }}</p>
+                          <p [ngClass]="relatedLabelClasses()">Target: {{ formatMetricValue(metric.calc.targetValue, metric.calc.metric) }}</p>
                         </div>
                       </div>
                     </div>
@@ -56013,8 +56317,8 @@ class FunnelMetricsVisualizationComponent {
     </div>
   `
             }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], calculations: [{ type: i0.Input, args: [{ isSignal: true, alias: "calculations", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 87 }); })();
+    }], 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 }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FunnelMetricsVisualizationComponent, { className: "FunnelMetricsVisualizationComponent", filePath: "lib/components/revenue-calculator-dashboard/funnel-metrics-visualization.component.ts", lineNumber: 122 }); })();
 
 function StickySubmitBarComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -57000,120 +57304,163 @@ class RevenueCalculatorService {
             }]
     }], null, null); })();
 
-function InitialTargetSettingComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "span", 16);
+function InitialTargetSettingComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.priorYearLabelClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Current Pace Projection: ", ctx_r0.formatCurrency(ctx_r0.currentPaceProjection()), " ");
+} }
+function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "span", 17);
     i0.ɵɵtext(2, " $ ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "input", 17);
-    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_16_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.absoluteInput, $event) || (ctx_r1.absoluteInput = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_16_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAbsoluteInputChange()); });
+    i0.ɵɵelementStart(3, "input", 18);
+    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_18_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.absoluteInput, $event) || (ctx_r0.absoluteInput = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_18_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onAbsoluteInputChange()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.inputPrefixClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.inputPrefixClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.absoluteInput);
-    i0.ɵɵproperty("ngClass", ctx_r1.inputClasses());
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.absoluteInput);
+    i0.ɵɵproperty("ngClass", ctx_r0.inputClasses());
 } }
-function InitialTargetSettingComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function InitialTargetSettingComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "input", 18);
-    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_17_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.percentageInput, $event) || (ctx_r1.percentageInput = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_17_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onPercentageInputChange()); });
+    i0.ɵɵelementStart(0, "div", 10)(1, "input", 19);
+    i0.ɵɵtwoWayListener("ngModelChange", function InitialTargetSettingComponent_Conditional_19_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.percentageInput, $event) || (ctx_r0.percentageInput = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function InitialTargetSettingComponent_Conditional_19_Template_input_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onPercentageInputChange()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 19);
+    i0.ɵɵelementStart(2, "span", 20);
     i0.ɵɵtext(3, " % ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.percentageInput);
-    i0.ɵɵproperty("ngClass", ctx_r1.inputClasses());
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.percentageInput);
+    i0.ɵɵproperty("ngClass", ctx_r0.inputClasses());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.inputSuffixClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.inputSuffixClasses());
 } }
-function InitialTargetSettingComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "div", 20)(2, "div")(3, "p", 21);
+function InitialTargetSettingComponent_Conditional_20_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "div")(2, "p", 22);
+    i0.ɵɵtext(3, " Gap to Close ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 25);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div")(7, "p", 22);
+    i0.ɵɵtext(8, " Additional Growth Needed ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "p", 25);
+    i0.ɵɵtext(10);
+    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.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.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
+    i0.ɵɵadvance(2);
+    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_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 21)(2, "div")(3, "p", 22);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 22);
+    i0.ɵɵelementStart(5, "p", 23);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 23)(8, "div")(9, "p", 21);
+    i0.ɵɵelementStart(7, "div", 24)(8, "div")(9, "p", 22);
     i0.ɵɵtext(10, " Increase Amount ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "p", 24);
+    i0.ɵɵelementStart(11, "p", 25);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div")(14, "p", 21);
+    i0.ɵɵelementStart(13, "div")(14, "p", 22);
     i0.ɵɵtext(15, " % Growth ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "p", 24);
+    i0.ɵɵelementStart(16, "p", 25);
     i0.ɵɵtext(17);
-    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_20_Conditional_18_Template, 11, 8, "div", 24);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.calculatedValuesCardClasses());
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.calculatedValuesCardClasses());
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.calculatedLabelClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentYear(), " Revenue Target ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.currentYear(), " Revenue Target ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.calculatedValueClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.calculatedValueClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatCurrency(ctx_r1.calculatedRevenue()), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.calculatedRevenue()), " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.calculatedDividerClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.calculatedDividerClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.calculatedLabelClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.calculatedSecondaryClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatCurrency(ctx_r1.calculatedRevenue() - ctx_r1.priorYearRevenue()), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatCurrency(ctx_r0.calculatedRevenue() - ctx_r0.priorYearRevenue()), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.calculatedLabelClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.calculatedLabelClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.calculatedSecondaryClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.calculatedSecondaryClasses());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" +", ctx_r0.formatPercentage(ctx_r0.percentageIncrease(), 1), " ");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" +", ctx_r1.formatPercentage(ctx_r1.percentageIncrease(), 1), " ");
+    i0.ɵɵconditional(ctx_r0.currentPaceProjection() > 0 && ctx_r0.gapToClose().amount !== 0 ? 18 : -1);
 } }
-function InitialTargetSettingComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "symphiq-area-chart", 13);
+function InitialTargetSettingComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "symphiq-area-chart", 14);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("chart", ctx_r1.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r1.viewMode())("currencySymbol", "$");
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("chart", ctx_r0.revenueChartData())("showAxisLabels", true)("viewMode", ctx_r0.viewMode())("currencySymbol", "$");
 } }
-function InitialTargetSettingComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "p", 25);
+function InitialTargetSettingComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15)(1, "p", 26);
     i0.ɵɵtext(2, " No revenue data available ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r1.noDataClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.noDataClasses());
 } }
-function InitialTargetSettingComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 26)(2, "h2", 27);
+function InitialTargetSettingComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 27)(2, "h2", 28);
     i0.ɵɵtext(3, " Contributing Metrics ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 25);
+    i0.ɵɵelementStart(4, "p", 26);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 28);
+    i0.ɵɵelement(6, "symphiq-funnel-metrics-visualization", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", ctx_r1.sectionCardClasses());
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", ctx_r0.sectionCardClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.sectionTitleClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.sectionTitleClasses());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.sectionDescriptionClasses());
+    i0.ɵɵproperty("ngClass", ctx_r0.sectionDescriptionClasses());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" To achieve your revenue target of ", ctx_r1.formatCurrency(ctx_r1.calculatedRevenue()), ", the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth. ");
+    i0.ɵɵtextInterpolate1(" To achieve your revenue target of ", ctx_r0.formatCurrency(ctx_r0.calculatedRevenue()), ", the following metrics need to improve by these amounts. These improvements compound through your funnel to drive revenue growth. ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("calculations", ctx_r1.metricCalculations());
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("calculations", ctx_r0.metricCalculations())("pacingMetrics", ctx_r0.pacingMetrics());
 } }
 class InitialTargetSettingComponent {
     constructor() {
@@ -57123,7 +57470,9 @@ class InitialTargetSettingComponent {
         this.mainUiData = input(undefined, ...(ngDevMode ? [{ debugName: "mainUiData" }] : []));
         this.yoyUiData = input(undefined, ...(ngDevMode ? [{ debugName: "yoyUiData" }] : []));
         this.trendUiData = input(undefined, ...(ngDevMode ? [{ debugName: "trendUiData" }] : []));
-        this.shopId = input(0, ...(ngDevMode ? [{ debugName: "shopId" }] : []));
+        this.shopId = input(undefined, ...(ngDevMode ? [{ debugName: "shopId" }] : []));
+        this.pacingMetrics = input([], ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        this.dataResults = input([], ...(ngDevMode ? [{ debugName: "dataResults" }] : []));
         this.targetsCreated = output();
         this.inputMode = signal('absolute', ...(ngDevMode ? [{ debugName: "inputMode" }] : []));
         this.absoluteInput = signal(0, ...(ngDevMode ? [{ debugName: "absoluteInput" }] : []));
@@ -57132,6 +57481,19 @@ class InitialTargetSettingComponent {
         this.priorYearRevenue = computed(() => {
             return sumMetricFromUiData(this.yoyUiData(), MetricEnum.PURCHASE_REVENUE);
         }, ...(ngDevMode ? [{ debugName: "priorYearRevenue" }] : []));
+        this.currentPaceProjection = computed(() => {
+            const revenuePacing = this.pacingMetrics().find(m => m.metric === MetricEnum.PURCHASE_REVENUE);
+            return revenuePacing?.projectedValue || 0;
+        }, ...(ngDevMode ? [{ debugName: "currentPaceProjection" }] : []));
+        this.gapToClose = computed(() => {
+            const target = this.calculatedRevenue();
+            const projection = this.currentPaceProjection();
+            if (target === 0 || projection === 0)
+                return { amount: 0, percentage: 0 };
+            const amount = target - projection;
+            const percentage = (amount / projection) * 100;
+            return { amount, percentage };
+        }, ...(ngDevMode ? [{ debugName: "gapToClose" }] : []));
         this.calculatedRevenue = computed(() => {
             const mode = this.inputMode();
             const priorRevenue = this.priorYearRevenue();
@@ -57237,6 +57599,9 @@ class InitialTargetSettingComponent {
     formatPercentage(value, decimals) {
         return formatPercentage(value, decimals);
     }
+    absValue(value) {
+        return Math.abs(value);
+    }
     sectionCardClasses() {
         return this.viewMode() === ViewModeEnum.DARK
             ? 'bg-slate-800/40 border-slate-700/50'
@@ -57329,37 +57694,39 @@ class InitialTargetSettingComponent {
             : 'text-slate-400';
     }
     static { this.ɵfac = function InitialTargetSettingComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InitialTargetSettingComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InitialTargetSettingComponent, selectors: [["symphiq-initial-target-setting"]], inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], yoyUiData: [1, "yoyUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"] }, outputs: { targetsCreated: "targetsCreated" }, decls: 27, vars: 20, consts: [[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, "grid", "lg:grid-cols-2", "gap-8"], [1, "space-y-6"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-xs", "mb-3", 3, "ngClass"], [1, "flex", "gap-2", "mb-4"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol"], [1, "h-64", "flex", "items-center", "justify-center"], [3, "submitClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText"], [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, "space-y-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-4", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "mb-6"], [1, "text-2xl", "font-bold", "mb-2", 3, "ngClass"], [3, "viewMode", "calculations"]], template: function InitialTargetSettingComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InitialTargetSettingComponent, selectors: [["symphiq-initial-target-setting"]], inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], yoyUiData: [1, "yoyUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"] }, outputs: { targetsCreated: "targetsCreated" }, decls: 29, vars: 21, consts: [[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, "grid", "lg:grid-cols-2", "gap-8"], [1, "space-y-6"], [1, "block", "text-sm", "font-semibold", "mb-2", 3, "ngClass"], [1, "space-y-1", "mb-4"], [1, "text-xs", 3, "ngClass"], [1, "flex", "gap-2", "mb-4"], [1, "flex-1", "py-2", "px-4", "rounded-lg", "text-sm", "font-semibold", "transition-all", 3, "click", "ngClass"], [1, "relative"], [1, "p-6", "rounded-xl", "border-2", 3, "ngClass"], [1, "text-sm", "font-semibold", "mb-3", 3, "ngClass"], [1, "rounded-xl", "border", "p-4", 3, "ngClass"], [3, "chart", "showAxisLabels", "viewMode", "currencySymbol"], [1, "h-64", "flex", "items-center", "justify-center"], [3, "submitClick", "viewMode", "isValid", "isSubmitting", "validationMessage", "buttonText"], [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, "space-y-4"], [1, "text-xs", "font-medium", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-2", "gap-4", "pt-4", 3, "ngClass"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", 3, "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", 0)(1, "div", 1)(2, "h2", 2);
             i0.ɵɵtext(3, " Calculate Your Revenue Target ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(4, "div", 3)(5, "div", 4)(6, "div")(7, "label", 5);
             i0.ɵɵtext(8);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "p", 6);
-            i0.ɵɵtext(10);
+            i0.ɵɵelementStart(9, "div", 6)(10, "p", 7);
+            i0.ɵɵtext(11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(12, InitialTargetSettingComponent_Conditional_12_Template, 2, 2, "p", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "div", 7)(12, "button", 8);
-            i0.ɵɵlistener("click", function InitialTargetSettingComponent_Template_button_click_12_listener() { return ctx.setInputMode("absolute"); });
-            i0.ɵɵtext(13, " Absolute Amount ");
+            i0.ɵɵelementStart(13, "div", 8)(14, "button", 9);
+            i0.ɵɵlistener("click", function InitialTargetSettingComponent_Template_button_click_14_listener() { return ctx.setInputMode("absolute"); });
+            i0.ɵɵtext(15, " Absolute Amount ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(14, "button", 8);
-            i0.ɵɵlistener("click", function InitialTargetSettingComponent_Template_button_click_14_listener() { return ctx.setInputMode("percentage"); });
-            i0.ɵɵtext(15, " % Increase ");
+            i0.ɵɵelementStart(16, "button", 9);
+            i0.ɵɵlistener("click", function InitialTargetSettingComponent_Template_button_click_16_listener() { return ctx.setInputMode("percentage"); });
+            i0.ɵɵtext(17, " % Increase ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(16, InitialTargetSettingComponent_Conditional_16_Template, 4, 3, "div", 9)(17, InitialTargetSettingComponent_Conditional_17_Template, 4, 3, "div", 9);
+            i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_18_Template, 4, 3, "div", 10)(19, InitialTargetSettingComponent_Conditional_19_Template, 4, 3, "div", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(18, InitialTargetSettingComponent_Conditional_18_Template, 18, 12, "div", 10);
+            i0.ɵɵconditionalCreate(20, InitialTargetSettingComponent_Conditional_20_Template, 19, 13, "div", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "div")(20, "p", 11);
-            i0.ɵɵtext(21, " Year-over-Year Revenue Trend ");
+            i0.ɵɵelementStart(21, "div")(22, "p", 12);
+            i0.ɵɵtext(23, " Year-over-Year Revenue Trend ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "div", 12);
-            i0.ɵɵconditionalCreate(23, InitialTargetSettingComponent_Conditional_23_Template, 1, 4, "symphiq-area-chart", 13)(24, InitialTargetSettingComponent_Conditional_24_Template, 3, 1, "div", 14);
+            i0.ɵɵelementStart(24, "div", 13);
+            i0.ɵɵconditionalCreate(25, InitialTargetSettingComponent_Conditional_25_Template, 1, 4, "symphiq-area-chart", 14)(26, InitialTargetSettingComponent_Conditional_26_Template, 3, 1, "div", 15);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(25, InitialTargetSettingComponent_Conditional_25_Template, 7, 6, "div", 1);
-            i0.ɵɵelementStart(26, "symphiq-sticky-submit-bar", 15);
-            i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_26_listener() { return ctx.handleSubmit(); });
+            i0.ɵɵconditionalCreate(27, InitialTargetSettingComponent_Conditional_27_Template, 7, 7, "div", 1);
+            i0.ɵɵelementStart(28, "symphiq-sticky-submit-bar", 16);
+            i0.ɵɵlistener("submitClick", function InitialTargetSettingComponent_Template_symphiq_sticky_submit_bar_submitClick_28_listener() { return ctx.handleSubmit(); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -57370,26 +57737,28 @@ class InitialTargetSettingComponent {
             i0.ɵɵproperty("ngClass", ctx.labelClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.currentYear(), " Revenue ");
-            i0.ɵɵadvance();
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.priorYearLabelClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate2(" ", ctx.priorYear(), " Revenue: ", ctx.formatCurrency(ctx.priorYearRevenue()), " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.currentPaceProjection() > 0 ? 12 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.inputModeButtonClasses("absolute"));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.inputModeButtonClasses("percentage"));
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.inputMode() === "absolute" ? 16 : 17);
+            i0.ɵɵconditional(ctx.inputMode() === "absolute" ? 18 : 19);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 18 : -1);
+            i0.ɵɵconditional(ctx.calculatedRevenue() > 0 ? 20 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.chartTitleClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.chartContainerClasses());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.revenueChartData() ? 23 : 24);
+            i0.ɵɵconditional(ctx.revenueChartData() ? 25 : 26);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.showMetricsVisualization() ? 25 : -1);
+            i0.ɵɵconditional(ctx.showMetricsVisualization() ? 27 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("viewMode", ctx.viewMode())("isValid", ctx.isValid())("isSubmitting", ctx.isSubmitting())("validationMessage", ctx.validationMessage())("buttonText", "Set Revenue Targets");
         } }, 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,
@@ -57422,9 +57791,16 @@ class InitialTargetSettingComponent {
               <label [ngClass]="labelClasses()" class="block text-sm font-semibold mb-2">
                 {{ currentYear() }} Revenue
               </label>
-              <p [ngClass]="priorYearLabelClasses()" class="text-xs mb-3">
-                {{ priorYear() }} Revenue: {{ formatCurrency(priorYearRevenue()) }}
-              </p>
+              <div class="space-y-1 mb-4">
+                <p [ngClass]="priorYearLabelClasses()" class="text-xs">
+                  {{ priorYear() }} Revenue: {{ formatCurrency(priorYearRevenue()) }}
+                </p>
+                @if (currentPaceProjection() > 0) {
+                  <p [ngClass]="priorYearLabelClasses()" class="text-xs">
+                    Current Pace Projection: {{ formatCurrency(currentPaceProjection()) }}
+                  </p>
+                }
+              </div>
 
               <div class="flex gap-2 mb-4">
                 <button
@@ -57504,6 +57880,26 @@ class InitialTargetSettingComponent {
                       </p>
                     </div>
                   </div>
+                  @if (currentPaceProjection() > 0 && gapToClose().amount !== 0) {
+                    <div class="grid grid-cols-2 gap-4 pt-4" [ngClass]="calculatedDividerClasses()">
+                      <div>
+                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                          Gap to Close
+                        </p>
+                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                          {{ formatCurrency(absValue(gapToClose().amount)) }}
+                        </p>
+                      </div>
+                      <div>
+                        <p [ngClass]="calculatedLabelClasses()" class="text-xs font-medium uppercase tracking-wider mb-1">
+                          Additional Growth Needed
+                        </p>
+                        <p [ngClass]="calculatedSecondaryClasses()" class="text-xl font-bold">
+                          {{ gapToClose().amount > 0 ? '+' : '' }}{{ formatPercentage(gapToClose().percentage, 1) }}
+                        </p>
+                      </div>
+                    </div>
+                  }
                 </div>
               </div>
             }
@@ -57547,6 +57943,7 @@ class InitialTargetSettingComponent {
           <symphiq-funnel-metrics-visualization
             [viewMode]="viewMode()"
             [calculations]="metricCalculations()"
+            [pacingMetrics]="pacingMetrics()"
           />
         </div>
       }
@@ -57562,8 +57959,8 @@ class InitialTargetSettingComponent {
     </div>
   `
             }]
-    }], null, { 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 }] }], yoyUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "yoyUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 179 }); })();
+    }], null, { 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 }] }], yoyUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "yoyUiData", 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 }] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InitialTargetSettingComponent, { className: "InitialTargetSettingComponent", filePath: "lib/components/revenue-calculator-dashboard/initial-target-setting.component.ts", lineNumber: 215 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 5);
@@ -57743,7 +58140,7 @@ function SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("dataLoadStatus", ctx_r0.dataLoadStatus() ?? ctx_r0.ShopDataLoadStatusEnum.NOT_LOADED)("hasTargets", false);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(9, _c0$q))("mainUiData", ctx_r0.mainUiData())("yoyUiData", ctx_r0.yoyUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId() ?? 0);
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(11, _c0$q))("mainUiData", ctx_r0.mainUiData())("yoyUiData", ctx_r0.yoyUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingMetrics())("dataResults", ctx_r0.dataResults());
 } }
 function SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 14);
@@ -57782,6 +58179,8 @@ class SymphiqRevenueCalculatorDashboardComponent {
         this.mainUiData = input(undefined, ...(ngDevMode ? [{ debugName: "mainUiData" }] : []));
         this.yoyUiData = input(undefined, ...(ngDevMode ? [{ debugName: "yoyUiData" }] : []));
         this.trendUiData = input(undefined, ...(ngDevMode ? [{ debugName: "trendUiData" }] : []));
+        this.pacingMetrics = input([], ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
+        this.dataResults = input([], ...(ngDevMode ? [{ debugName: "dataResults" }] : []));
         this.shopId = input(0, ...(ngDevMode ? [{ debugName: "shopId" }] : []));
         this.embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
         this.scrollEvent = input(...(ngDevMode ? [undefined, { debugName: "scrollEvent" }] : []));
@@ -57898,7 +58297,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
     static { this.ɵfac = function SymphiqRevenueCalculatorDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqRevenueCalculatorDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqRevenueCalculatorDashboardComponent, selectors: [["symphiq-revenue-calculator-dashboard"]], hostBindings: function SymphiqRevenueCalculatorDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqRevenueCalculatorDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], yoyUiData: [1, "yoyUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated" }, decls: 27, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "viewMode", "funnelMetrics", "mainUiData", "yoyUiData", "trendUiData", "shopId"], [1, "mt-8", "rounded-2xl", "border-2", "border-dashed", "p-12", 3, "ngClass"], [1, "text-center", "space-y-4"], [1, "flex", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "max-w-2xl", "mx-auto", 3, "ngClass"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], yoyUiData: [1, "yoyUiData"], trendUiData: [1, "trendUiData"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"], shopId: [1, "shopId"], embedded: [1, "embedded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], forDemo: [1, "forDemo"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", targetsCreated: "targetsCreated" }, decls: 27, vars: 42, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [3, "stepClick", "nextStepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative"], [1, "flex", "items-center", "justify-center", "min-h-[400px]"], ["size", "large", 3, "viewMode"], [3, "viewMode", "dataLoadStatus", "hasTargets"], [1, "mt-8", "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-8", "py-12", 3, "ngClass"], [1, "flex", "flex-col", "items-center", "text-center", "space-y-6"], [1, "space-y-2"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "max-w-md", 3, "ngClass"], [1, "mt-8"], [3, "targetsCreated", "viewMode", "funnelMetrics", "mainUiData", "yoyUiData", "trendUiData", "shopId", "pacingMetrics", "dataResults"], [1, "mt-8", "rounded-2xl", "border-2", "border-dashed", "p-12", 3, "ngClass"], [1, "text-center", "space-y-4"], [1, "flex", "justify-center"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-16", "h-16", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "text-base", "max-w-2xl", "mx-auto", 3, "ngClass"]], template: function SymphiqRevenueCalculatorDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
@@ -57916,7 +58315,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
             i0.ɵɵlistener("stepClick", function SymphiqRevenueCalculatorDashboardComponent_Template_symphiq_journey_progress_indicator_stepClick_20_listener($event) { return ctx.stepClick.emit($event); })("nextStepClick", function SymphiqRevenueCalculatorDashboardComponent_Template_symphiq_journey_progress_indicator_nextStepClick_20_listener() { return ctx.nextStepClick.emit(); });
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(21, "main", 11)(22, "div", 6);
-            i0.ɵɵconditionalCreate(23, SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template, 2, 1, "div", 12)(24, SymphiqRevenueCalculatorDashboardComponent_Conditional_24_Template, 10, 8)(25, SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template, 3, 10)(26, SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template, 10, 7);
+            i0.ɵɵconditionalCreate(23, SymphiqRevenueCalculatorDashboardComponent_Conditional_23_Template, 2, 1, "div", 12)(24, SymphiqRevenueCalculatorDashboardComponent_Conditional_24_Template, 10, 8)(25, SymphiqRevenueCalculatorDashboardComponent_Conditional_25_Template, 3, 12)(26, SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template, 10, 7);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -57965,179 +58364,181 @@ class SymphiqRevenueCalculatorDashboardComponent {
                     IndeterminateSpinnerComponent
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="getContainerClasses()">
-      <!-- Scroll Progress Bar -->
-      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
-        <div
-          [style.width.%]="scrollProgress()"
-          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
-          class="h-full transition-all duration-200 ease-out">
-        </div>
-      </div>
-
-      <!-- Animated Background Bubbles -->
-      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
-
-      <div class="relative z-[51]">
-        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
-          <!-- Expanded Header -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="headerScrollService.isScrolled()"
-            [class.opacity-0]="headerScrollService.isScrolled()"
-            [class.max-h-96]="!headerScrollService.isScrolled()"
-            [class.opacity-100]="!headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-              [class.pointer-events-none]="headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div>
-                  <h1 [ngClass]="getMainTitleClasses()">
-                    Revenue Calculator
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Set Metric-Level Targets for Bottom-Up Revenue Planning
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Condensed Header -->
-          <div
-            class="transition-all duration-300 ease-in-out overflow-hidden"
-            [class.max-h-0]="!headerScrollService.isScrolled()"
-            [class.opacity-0]="!headerScrollService.isScrolled()"
-            [class.max-h-20]="headerScrollService.isScrolled()"
-            [class.opacity-100]="headerScrollService.isScrolled()">
-            <div
-              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-              [class.pointer-events-none]="!headerScrollService.isScrolled()"
-              [class.pointer-events-auto]="headerScrollService.isScrolled()">
-              <div class="flex items-center justify-between">
-                <div class="flex-1 min-w-0 mr-4">
-                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
-                    Revenue Calculator
-                  </h1>
-                </div>
-              </div>
-            </div>
-          </div>
-        </header>
-
-        <!-- Journey Progress Indicator -->
-        <symphiq-journey-progress-indicator
-          [viewMode]="viewMode()"
-          [currentStepId]="JourneyStepIdEnum.REVENUE_CALCULATOR"
-          [showNextStepAction]="hasCurrentYearTargets()"
-          [forDemo]="forDemo()"
-          [maxAccessibleStepId]="maxAccessibleStepId()"
-          (stepClick)="stepClick.emit($event)"
-          (nextStepClick)="nextStepClick.emit()"
-        />
-
-        <main class="relative">
-          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-
-            <!-- State 1: Pure Loading (isLoading = true) -->
-            @if (isLoading()) {
-              <div class="flex items-center justify-center min-h-[400px]">
-                <symphiq-indeterminate-spinner
-                  [viewMode]="viewMode()"
-                  size="large"
-                />
-              </div>
-            }
-
-            <!-- State 2: Data Loading Message (isLoading = false && dataLoadStatus !== FULLY_LOADED) -->
-            @else if (dataLoadStatus() !== ShopDataLoadStatusEnum.FULLY_LOADED) {
-              <symphiq-revenue-calculator-welcome-banner
-                [viewMode]="viewMode()"
-                [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
-                [hasTargets]="false"
-              />
-
-              <!-- Loading Message Card -->
-              <div [ngClass]="loadingMessageContainerClasses()" class="mt-8 rounded-2xl border shadow-lg overflow-hidden">
-                <div [ngClass]="loadingMessageContentClasses()" class="px-8 py-12">
-                  <div class="flex flex-col items-center text-center space-y-6">
-                    <symphiq-indeterminate-spinner
-                      [viewMode]="viewMode()"
-                      size="large"
-                    />
-                    <div class="space-y-2">
-                      <h3 [ngClass]="loadingTitleClasses()" class="text-xl font-bold">
-                        Downloading Your Google Analytics 4 Data
-                      </h3>
-                      <p [ngClass]="loadingTextClasses()" class="text-sm max-w-md">
-                        Symphiq is fetching your historical metrics to establish baseline performance. This may take a moment as we gather your funnel data.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            }
-
-            <!-- State 3a: Initial Target Setting (isLoading = false && dataLoadStatus === FULLY_LOADED && !hasCurrentYearTargets) -->
-            @else if (!hasCurrentYearTargets()) {
-              <symphiq-revenue-calculator-welcome-banner
-                [viewMode]="viewMode()"
-                [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
-                [hasTargets]="false"
-              />
-
-              <div class="mt-8">
-                <symphiq-initial-target-setting
-                  [viewMode]="viewMode()"
-                  [funnelMetrics]="funnelMetrics() ?? []"
-                  [mainUiData]="mainUiData()"
-                  [yoyUiData]="yoyUiData()"
-                  [trendUiData]="trendUiData()"
-                  [shopId]="shopId() ?? 0"
-                  (targetsCreated)="targetsCreated.emit($event)"
-                />
-              </div>
-            }
-
-            <!-- State 3b: Final Dashboard (isLoading = false && dataLoadStatus === FULLY_LOADED && hasCurrentYearTargets) -->
-            @else {
-              <symphiq-revenue-calculator-welcome-banner
-                [viewMode]="viewMode()"
-                [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
-                [hasTargets]="true"
-              />
-
-              <!-- Placeholder for Revenue Calculator Content -->
-              <div [ngClass]="placeholderContainerClasses()" class="mt-8 rounded-2xl border-2 border-dashed p-12">
-                <div class="text-center space-y-4">
-                  <div class="flex justify-center">
-                    <svg [ngClass]="placeholderIconClasses()" class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
-                    </svg>
-                  </div>
-                  <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
-                    Revenue Calculator Dashboard
-                  </h3>
-                  <p [ngClass]="placeholderTextClasses()" class="text-base max-w-2xl mx-auto">
-                    Your targets are set! The full revenue calculator dashboard with pacing and insights will be displayed here.
-                  </p>
-                </div>
-              </div>
-            }
-
-          </div>
-        </main>
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="getContainerClasses()">
+      <!-- Scroll Progress Bar -->
+      <div [class]="embedded() ? 'sticky top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30' : 'fixed top-0 left-0 right-0 h-1 z-[60] bg-slate-200/30'">
+        <div
+          [style.width.%]="scrollProgress()"
+          [ngClass]="isLightMode() ? 'bg-gradient-to-r from-blue-500 to-purple-500' : 'bg-gradient-to-r from-blue-400 to-purple-400'"
+          class="h-full transition-all duration-200 ease-out">
+        </div>
+      </div>
+
+      <!-- Animated Background Bubbles -->
+      <div class="animated-bubbles" [class.light-mode]="isLightMode()" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none;"></div>
+
+      <div class="relative z-[51]">
+        <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
+          <!-- Expanded Header -->
+          <div
+            class="transition-all duration-300 ease-in-out overflow-hidden"
+            [class.max-h-0]="headerScrollService.isScrolled()"
+            [class.opacity-0]="headerScrollService.isScrolled()"
+            [class.max-h-96]="!headerScrollService.isScrolled()"
+            [class.opacity-100]="!headerScrollService.isScrolled()">
+            <div
+              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
+              [class.pointer-events-none]="headerScrollService.isScrolled()"
+              [class.pointer-events-auto]="!headerScrollService.isScrolled()">
+              <div class="flex items-center justify-between">
+                <div>
+                  <h1 [ngClass]="getMainTitleClasses()">
+                    Revenue Calculator
+                  </h1>
+                  <p [ngClass]="getSubtitleClasses()">
+                    Set Metric-Level Targets for Bottom-Up Revenue Planning
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Condensed Header -->
+          <div
+            class="transition-all duration-300 ease-in-out overflow-hidden"
+            [class.max-h-0]="!headerScrollService.isScrolled()"
+            [class.opacity-0]="!headerScrollService.isScrolled()"
+            [class.max-h-20]="headerScrollService.isScrolled()"
+            [class.opacity-100]="headerScrollService.isScrolled()">
+            <div
+              class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
+              [class.pointer-events-none]="!headerScrollService.isScrolled()"
+              [class.pointer-events-auto]="headerScrollService.isScrolled()">
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0 mr-4">
+                  <h1 [ngClass]="isLightMode() ? 'text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate' : 'text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent truncate'">
+                    Revenue Calculator
+                  </h1>
+                </div>
+              </div>
+            </div>
+          </div>
+        </header>
+
+        <!-- Journey Progress Indicator -->
+        <symphiq-journey-progress-indicator
+          [viewMode]="viewMode()"
+          [currentStepId]="JourneyStepIdEnum.REVENUE_CALCULATOR"
+          [showNextStepAction]="hasCurrentYearTargets()"
+          [forDemo]="forDemo()"
+          [maxAccessibleStepId]="maxAccessibleStepId()"
+          (stepClick)="stepClick.emit($event)"
+          (nextStepClick)="nextStepClick.emit()"
+        />
+
+        <main class="relative">
+          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+
+            <!-- State 1: Pure Loading (isLoading = true) -->
+            @if (isLoading()) {
+              <div class="flex items-center justify-center min-h-[400px]">
+                <symphiq-indeterminate-spinner
+                  [viewMode]="viewMode()"
+                  size="large"
+                />
+              </div>
+            }
+
+            <!-- State 2: Data Loading Message (isLoading = false && dataLoadStatus !== FULLY_LOADED) -->
+            @else if (dataLoadStatus() !== ShopDataLoadStatusEnum.FULLY_LOADED) {
+              <symphiq-revenue-calculator-welcome-banner
+                [viewMode]="viewMode()"
+                [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
+                [hasTargets]="false"
+              />
+
+              <!-- Loading Message Card -->
+              <div [ngClass]="loadingMessageContainerClasses()" class="mt-8 rounded-2xl border shadow-lg overflow-hidden">
+                <div [ngClass]="loadingMessageContentClasses()" class="px-8 py-12">
+                  <div class="flex flex-col items-center text-center space-y-6">
+                    <symphiq-indeterminate-spinner
+                      [viewMode]="viewMode()"
+                      size="large"
+                    />
+                    <div class="space-y-2">
+                      <h3 [ngClass]="loadingTitleClasses()" class="text-xl font-bold">
+                        Downloading Your Google Analytics 4 Data
+                      </h3>
+                      <p [ngClass]="loadingTextClasses()" class="text-sm max-w-md">
+                        Symphiq is fetching your historical metrics to establish baseline performance. This may take a moment as we gather your funnel data.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            }
+
+            <!-- State 3a: Initial Target Setting (isLoading = false && dataLoadStatus === FULLY_LOADED && !hasCurrentYearTargets) -->
+            @else if (!hasCurrentYearTargets()) {
+              <symphiq-revenue-calculator-welcome-banner
+                [viewMode]="viewMode()"
+                [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
+                [hasTargets]="false"
+              />
+
+              <div class="mt-8">
+                <symphiq-initial-target-setting
+                  [viewMode]="viewMode()"
+                  [funnelMetrics]="funnelMetrics() ?? []"
+                  [mainUiData]="mainUiData()"
+                  [yoyUiData]="yoyUiData()"
+                  [trendUiData]="trendUiData()"
+                  [shopId]="shopId()"
+                  [pacingMetrics]="pacingMetrics()"
+                  [dataResults]="dataResults()"
+                  (targetsCreated)="targetsCreated.emit($event)"
+                />
+              </div>
+            }
+
+            <!-- State 3b: Final Dashboard (isLoading = false && dataLoadStatus === FULLY_LOADED && hasCurrentYearTargets) -->
+            @else {
+              <symphiq-revenue-calculator-welcome-banner
+                [viewMode]="viewMode()"
+                [dataLoadStatus]="dataLoadStatus() ?? ShopDataLoadStatusEnum.NOT_LOADED"
+                [hasTargets]="true"
+              />
+
+              <!-- Placeholder for Revenue Calculator Content -->
+              <div [ngClass]="placeholderContainerClasses()" class="mt-8 rounded-2xl border-2 border-dashed p-12">
+                <div class="text-center space-y-4">
+                  <div class="flex justify-center">
+                    <svg [ngClass]="placeholderIconClasses()" class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+                    </svg>
+                  </div>
+                  <h3 [ngClass]="placeholderTitleClasses()" class="text-2xl font-bold">
+                    Revenue Calculator Dashboard
+                  </h3>
+                  <p [ngClass]="placeholderTextClasses()" class="text-base max-w-2xl mx-auto">
+                    Your targets are set! The full revenue calculator dashboard with pacing and insights will be displayed here.
+                  </p>
+                </div>
+              </div>
+            }
+
+          </div>
+        </main>
+      </div>
+    </div>
   `
             }]
-    }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], dataLoadStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLoadStatus", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], yoyUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "yoyUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], onWindowScroll: [{
+    }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], dataLoadStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataLoadStatus", required: false }] }], targets: [{ type: i0.Input, args: [{ isSignal: true, alias: "targets", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], yoyUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "yoyUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], scrollEvent: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollEvent", required: false }] }], scrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollElement", required: false }] }], forDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "forDemo", required: false }] }], maxAccessibleStepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAccessibleStepId", required: false }] }], stepClick: [{ type: i0.Output, args: ["stepClick"] }], nextStepClick: [{ type: i0.Output, args: ["nextStepClick"] }], targetsCreated: [{ type: i0.Output, args: ["targetsCreated"] }], onWindowScroll: [{
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 203 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 213 }); })();
 
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);