@eric-emg/symphiq-components 1.2.188 → 1.2.190

package/fesm2022/symphiq-components.mjs

@@ -57267,46 +57267,7 @@ var areaChart_component = /*#__PURE__*/Object.freeze({
     AreaChartComponent: AreaChartComponent
 });
 
-var RelatedMetricType;
-(function (RelatedMetricType) {
-    RelatedMetricType["FUNNEL"] = "funnel";
-    RelatedMetricType["VOLUME"] = "volume";
-    RelatedMetricType["RATE"] = "rate";
-    RelatedMetricType["INVERSE"] = "inverse";
-    RelatedMetricType["MULTIPLIER"] = "multiplier";
-    RelatedMetricType["DERIVED"] = "derived";
-})(RelatedMetricType || (RelatedMetricType = {}));
-const METRIC_TYPE_MAP = {
-    [MetricEnum.SCREEN_PAGE_VIEWS]: RelatedMetricType.FUNNEL,
-    [MetricEnum.ITEM_VIEW_EVENTS]: RelatedMetricType.FUNNEL,
-    [MetricEnum.ADD_TO_CARTS]: RelatedMetricType.FUNNEL,
-    [MetricEnum.CHECKOUTS]: RelatedMetricType.FUNNEL,
-    [MetricEnum.ECOMMERCE_PURCHASES]: RelatedMetricType.FUNNEL,
-    [MetricEnum.PURCHASE_REVENUE]: RelatedMetricType.FUNNEL,
-    [MetricEnum.SESSIONS]: RelatedMetricType.VOLUME,
-    [MetricEnum.ACTIVE_USERS]: RelatedMetricType.VOLUME,
-    [MetricEnum.NEW_USERS]: RelatedMetricType.VOLUME,
-    [MetricEnum.BOUNCE_RATE]: RelatedMetricType.INVERSE,
-    [MetricEnum.PRODUCT_VIEW_RATE]: RelatedMetricType.RATE,
-    [MetricEnum.VIEW_TO_PRODUCT_VIEW_CONVERSION_RATE]: RelatedMetricType.RATE,
-    [MetricEnum.ACTIVE_USER_ADD_TO_CART_RATE]: RelatedMetricType.RATE,
-    [MetricEnum.ADD_TO_CART_RATE]: RelatedMetricType.RATE,
-    [MetricEnum.PRODUCT_VIEW_TO_CART_CONVERSION_RATE]: RelatedMetricType.RATE,
-    [MetricEnum.CART_TO_CHECKOUT_CONVERSION_RATE]: RelatedMetricType.RATE,
-    [MetricEnum.ACTIVE_USER_CHECKOUT_RATE]: RelatedMetricType.RATE,
-    [MetricEnum.PRODUCT_VIEW_CONVERSION_RATE]: RelatedMetricType.RATE,
-    [MetricEnum.ADD_TO_CART_CONVERSION_RATE]: RelatedMetricType.RATE,
-    [MetricEnum.CHECKOUT_CONVERSION_RATE]: RelatedMetricType.RATE,
-    [MetricEnum.ECOMMERCE_CONVERSION_RATE]: RelatedMetricType.RATE,
-    [MetricEnum.AVERAGE_ORDER_VALUE]: RelatedMetricType.MULTIPLIER,
-    [MetricEnum.REVENUE_PER_PRODUCT_VIEW]: RelatedMetricType.DERIVED,
-    [MetricEnum.REVENUE_PER_ADD_TO_CART]: RelatedMetricType.DERIVED,
-    [MetricEnum.REVENUE_PER_CHECKOUT]: RelatedMetricType.DERIVED
-};
-function getMetricType(metric) {
-    return METRIC_TYPE_MAP[metric] || RelatedMetricType.RATE;
-}
-function calculateMetricTargetsFromRevenue(revenueTarget, priorYearRevenue, funnelMetrics, baselineValues, lockedMetrics = new Map()) {
+function calculateMetricTargetsFromRevenue(revenueTarget, priorYearRevenue, funnelMetrics, baselineValues) {
     const revenuePercentageIncrease = ((revenueTarget - priorYearRevenue) / priorYearRevenue) * 100;
     const metricCalculations = [];
     const sortedFunnelMetrics = [...funnelMetrics].sort((a, b) => {
@@ -57318,35 +57279,39 @@ function calculateMetricTargetsFromRevenue(revenueTarget, priorYearRevenue, funn
         const bRelated = b.relatedInd ?? 999;
         return aRelated - bRelated;
     });
-    const numFunnelStages = new Set(sortedFunnelMetrics.map((fm) => fm.funnelInd)).size;
-    const revenueMultiplier = 1 + revenuePercentageIncrease / 100;
-    const perStageMultiplier = Math.pow(revenueMultiplier, 1 / numFunnelStages);
-    const funnelStagePercentageIncrease = (perStageMultiplier - 1) * 100;
+    const funnelStages = getUniqueFunnelStages(sortedFunnelMetrics);
+    const numFunnelStages = funnelStages.length;
+    const revenueIncreaseFactor = revenueTarget / priorYearRevenue;
+    const perStageFactor = Math.pow(revenueIncreaseFactor, 1 / numFunnelStages);
+    const funnelStageMetrics = new Map();
+    sortedFunnelMetrics.forEach(fm => {
+        if (fm.funnelMetric) {
+            if (!funnelStageMetrics.has(fm.funnelMetric)) {
+                funnelStageMetrics.set(fm.funnelMetric, []);
+            }
+            funnelStageMetrics.get(fm.funnelMetric).push(fm);
+        }
+    });
+    const stagePercentageIncrease = (perStageFactor - 1) * 100;
     sortedFunnelMetrics.forEach((funnelMetric) => {
         const metric = funnelMetric.relatedMetric;
         if (!metric)
             return;
         const currentValue = baselineValues.get(metric) || 0;
         const isFunnelStage = funnelMetric.funnelMetric === metric;
-        const metricType = getMetricType(metric);
-        const isLocked = lockedMetrics.has(metric);
         let percentageIncrease;
         let targetValue;
-        if (isLocked) {
-            targetValue = lockedMetrics.get(metric);
-            percentageIncrease = currentValue !== 0 ? ((targetValue - currentValue) / currentValue) * 100 : 0;
+        if (metric === MetricEnum.BOUNCE_RATE) {
+            percentageIncrease = -stagePercentageIncrease;
+            targetValue = currentValue * (1 + percentageIncrease / 100);
         }
-        else if (metricType === RelatedMetricType.DERIVED) {
+        else if (isDerivedMetric(metric)) {
             percentageIncrease = 0;
             targetValue = currentValue;
         }
-        else if (metricType === RelatedMetricType.INVERSE) {
-            percentageIncrease = -funnelStagePercentageIncrease;
-            targetValue = currentValue * (1 + percentageIncrease / 100);
-        }
         else {
-            percentageIncrease = funnelStagePercentageIncrease;
-            targetValue = currentValue * (1 + percentageIncrease / 100);
+            percentageIncrease = stagePercentageIncrease;
+            targetValue = currentValue * perStageFactor;
         }
         metricCalculations.push({
             metric,
@@ -57355,8 +57320,6 @@ function calculateMetricTargetsFromRevenue(revenueTarget, priorYearRevenue, funn
             targetValue,
             percentageIncrease,
             isFunnelStage,
-            metricType,
-            isLocked,
             funnelInd: funnelMetric.funnelInd,
             relatedInd: funnelMetric.relatedInd,
             description: funnelMetric.relatedMetricDescription
@@ -57368,34 +57331,24 @@ function calculateMetricTargetsFromRevenue(revenueTarget, priorYearRevenue, funn
         metricCalculations
     };
 }
-function recalculateWithLockedMetrics(revenueTarget, priorYearRevenue, funnelMetrics, baselineValues, lockedMetrics) {
-    const numFunnelStages = new Set(funnelMetrics.map((fm) => fm.funnelInd)).size;
-    const targetRevenueMultiplier = revenueTarget / priorYearRevenue;
-    let lockedContribution = 1;
-    let unlockedStageCount = numFunnelStages;
-    const lockedByStage = new Map();
-    funnelMetrics.forEach((fm) => {
-        const metric = fm.relatedMetric;
-        if (!metric)
-            return;
-        const funnelInd = fm.funnelInd ?? 0;
-        const isFunnelStage = fm.funnelMetric === metric;
-        if (isFunnelStage && lockedMetrics.has(metric)) {
-            const currentValue = baselineValues.get(metric) || 1;
-            const lockedValue = lockedMetrics.get(metric);
-            const multiplier = lockedValue / currentValue;
-            if (!lockedByStage.has(funnelInd)) {
-                lockedByStage.set(funnelInd, []);
-            }
-            lockedByStage.get(funnelInd).push({ metric, multiplier });
-            lockedContribution *= multiplier;
+function getUniqueFunnelStages(funnelMetrics) {
+    const stages = [];
+    const seen = new Set();
+    funnelMetrics.forEach(fm => {
+        if (fm.funnelMetric && fm.funnelMetric === fm.relatedMetric && !seen.has(fm.funnelMetric)) {
+            seen.add(fm.funnelMetric);
+            stages.push(fm.funnelMetric);
         }
     });
-    unlockedStageCount = numFunnelStages - lockedByStage.size;
-    const remainingMultiplier = targetRevenueMultiplier / lockedContribution;
-    const perUnlockedStageMultiplier = unlockedStageCount > 0 ? Math.pow(remainingMultiplier, 1 / unlockedStageCount) : 1;
-    const unlockedPercentageIncrease = (perUnlockedStageMultiplier - 1) * 100;
-    return calculateMetricTargetsFromRevenue(revenueTarget, priorYearRevenue, funnelMetrics, baselineValues, lockedMetrics);
+    return stages;
+}
+const DERIVED_METRICS = new Set([
+    MetricEnum.REVENUE_PER_PRODUCT_VIEW,
+    MetricEnum.REVENUE_PER_ADD_TO_CART,
+    MetricEnum.REVENUE_PER_CHECKOUT
+]);
+function isDerivedMetric(metric) {
+    return DERIVED_METRICS.has(metric);
 }
 function generateTargetsFromCalculations(shopId, calculations) {
     const startDate = getCurrentYearStart();
@@ -57424,10 +57377,10 @@ function getFunnelStageMetrics(calculations) {
     return calculations.filter((calc) => calc.isFunnelStage);
 }
 
-function transformUiDataToChartSeries(mainUiData, yoyUiData, metricToExtract) {
+function transformUiDataToChartSeries(mainUiData, ytdComparisonUiData, metricToExtract) {
     const series = [];
-    if (yoyUiData?.convertedDataResults) {
-        const priorYearSeries = extractSeriesFromConvertedData(yoyUiData.convertedDataResults, metricToExtract, 'Prior Year');
+    if (ytdComparisonUiData?.convertedDataResults) {
+        const priorYearSeries = extractSeriesFromConvertedData(ytdComparisonUiData.convertedDataResults, metricToExtract, 'Prior Year');
         if (priorYearSeries) {
             series.push(priorYearSeries);
         }
@@ -57576,27 +57529,27 @@ function sumMetricFromUiData(uiData, metricToSum) {
 }
 
 class RevenueCalculatorService {
-    calculateTargetsFromRevenue(revenueTarget, yoyUiData, funnelMetrics) {
-        const priorYearRevenue = this.extractPriorYearRevenue(yoyUiData);
-        const baselineValues = this.extractBaselineValues(yoyUiData, funnelMetrics);
+    calculateTargetsFromRevenue(revenueTarget, mainUiData, funnelMetrics) {
+        const priorYearRevenue = this.extractPriorYearRevenue(mainUiData);
+        const baselineValues = this.extractBaselineValues(mainUiData, funnelMetrics);
         return calculateMetricTargetsFromRevenue(revenueTarget, priorYearRevenue, funnelMetrics, baselineValues);
     }
-    calculateTargetsFromPercentage(percentageIncrease, yoyUiData, funnelMetrics) {
-        const priorYearRevenue = this.extractPriorYearRevenue(yoyUiData);
+    calculateTargetsFromPercentage(percentageIncrease, mainUiData, funnelMetrics) {
+        const priorYearRevenue = this.extractPriorYearRevenue(mainUiData);
         const revenueTarget = priorYearRevenue * (1 + percentageIncrease / 100);
-        return this.calculateTargetsFromRevenue(revenueTarget, yoyUiData, funnelMetrics);
+        return this.calculateTargetsFromRevenue(revenueTarget, mainUiData, funnelMetrics);
     }
-    extractPriorYearRevenue(yoyUiData) {
-        return sumMetricFromUiData(yoyUiData, MetricEnum.PURCHASE_REVENUE);
+    extractPriorYearRevenue(mainUiData) {
+        return sumMetricFromUiData(mainUiData, MetricEnum.PURCHASE_REVENUE);
     }
-    extractBaselineValues(yoyUiData, funnelMetrics) {
+    extractBaselineValues(mainUiData, funnelMetrics) {
         const baselineValues = new Map();
-        if (!yoyUiData) {
+        if (!mainUiData) {
             return baselineValues;
         }
         funnelMetrics.forEach(fm => {
             if (fm.relatedMetric) {
-                const value = sumMetricFromUiData(yoyUiData, fm.relatedMetric);
+                const value = sumMetricFromUiData(mainUiData, fm.relatedMetric);
                 baselineValues.set(fm.relatedMetric, value);
             }
         });
@@ -57795,7 +57748,6 @@ class InitialTargetSettingComponent {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.funnelMetrics = input([], ...(ngDevMode ? [{ debugName: "funnelMetrics" }] : []));
         this.mainUiData = input(undefined, ...(ngDevMode ? [{ debugName: "mainUiData" }] : []));
-        this.yoyUiData = input(undefined, ...(ngDevMode ? [{ debugName: "yoyUiData" }] : []));
         this.trendUiData = input(undefined, ...(ngDevMode ? [{ debugName: "trendUiData" }] : []));
         this.shopId = input(undefined, ...(ngDevMode ? [{ debugName: "shopId" }] : []));
         this.pacingMetrics = input(undefined, ...(ngDevMode ? [{ debugName: "pacingMetrics" }] : []));
@@ -57806,7 +57758,7 @@ class InitialTargetSettingComponent {
         this.percentageInput = signal(0, ...(ngDevMode ? [{ debugName: "percentageInput" }] : []));
         this.isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
         this.priorYearRevenue = computed(() => {
-            return sumMetricFromUiData(this.yoyUiData(), MetricEnum.PURCHASE_REVENUE);
+            return sumMetricFromUiData(this.mainUiData(), MetricEnum.PURCHASE_REVENUE);
         }, ...(ngDevMode ? [{ debugName: "priorYearRevenue" }] : []));
         this.currentPaceProjection = computed(() => {
             const pacingData = this.pacingMetrics();
@@ -57847,13 +57799,13 @@ class InitialTargetSettingComponent {
             if (revenue <= 0)
                 return [];
             const mode = this.inputMode();
-            const yoyData = this.yoyUiData();
+            const mainData = this.mainUiData();
             const metrics = this.funnelMetrics();
             if (mode === 'absolute') {
-                return this.revenueCalcService.calculateTargetsFromRevenue(revenue, yoyData, metrics).metricCalculations;
+                return this.revenueCalcService.calculateTargetsFromRevenue(revenue, mainData, metrics).metricCalculations;
             }
             else {
-                return this.revenueCalcService.calculateTargetsFromPercentage(this.percentageInput(), yoyData, metrics).metricCalculations;
+                return this.revenueCalcService.calculateTargetsFromPercentage(this.percentageInput(), mainData, metrics).metricCalculations;
             }
         }, ...(ngDevMode ? [{ debugName: "metricCalculations" }] : []));
         this.isValid = computed(() => {
@@ -58035,7 +57987,7 @@ class InitialTargetSettingComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.absoluteInputRef = _t.first);
-        } }, 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: [["absoluteInputRef", ""], [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", "height"], [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) {
+        } }, inputs: { viewMode: [1, "viewMode"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], trendUiData: [1, "trendUiData"], shopId: [1, "shopId"], pacingMetrics: [1, "pacingMetrics"], dataResults: [1, "dataResults"] }, outputs: { targetsCreated: "targetsCreated" }, decls: 29, vars: 21, consts: [["absoluteInputRef", ""], [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", "height"], [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", 1)(1, "div", 2)(2, "h2", 3);
             i0.ɵɵtext(3, " Calculate Your Revenue Target ");
             i0.ɵɵelementEnd();
@@ -58305,7 +58257,7 @@ class InitialTargetSettingComponent {
     }], null, { absoluteInputRef: [{
             type: ViewChild,
             args: ['absoluteInputRef']
-        }], 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"] }] }); })();
+        }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], funnelMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "funnelMetrics", required: false }] }], mainUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], shopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shopId", required: false }] }], pacingMetrics: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingMetrics", required: false }] }], dataResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataResults", required: false }] }], 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: 217 }); })();
 
 function IndeterminateSpinnerComponent_For_5_Template(rf, ctx) { if (rf & 1) {
@@ -58486,7 +58438,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(11, _c0$q))("mainUiData", ctx_r0.mainUiData())("yoyUiData", ctx_r0.yoyUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults());
+    i0.ɵɵproperty("viewMode", ctx_r0.viewMode())("funnelMetrics", ctx_r0.funnelMetrics() ?? i0.ɵɵpureFunction0(10, _c0$q))("mainUiData", ctx_r0.mainUiData())("trendUiData", ctx_r0.trendUiData())("shopId", ctx_r0.shopId())("pacingMetrics", ctx_r0.pacingResponse())("dataResults", ctx_r0.dataResults());
 } }
 function SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-revenue-calculator-welcome-banner", 14);
@@ -58522,7 +58474,7 @@ class SymphiqRevenueCalculatorDashboardComponent {
         this.targets = input([], ...(ngDevMode ? [{ debugName: "targets" }] : []));
         this.funnelMetrics = input([], ...(ngDevMode ? [{ debugName: "funnelMetrics" }] : []));
         this.mainUiData = input(undefined, ...(ngDevMode ? [{ debugName: "mainUiData" }] : []));
-        this.yoyUiData = input(undefined, ...(ngDevMode ? [{ debugName: "yoyUiData" }] : []));
+        this.ytdComparisonUiData = input(undefined, ...(ngDevMode ? [{ debugName: "ytdComparisonUiData" }] : []));
         this.trendUiData = input(undefined, ...(ngDevMode ? [{ debugName: "trendUiData" }] : []));
         this.pacingResponse = input(undefined, ...(ngDevMode ? [{ debugName: "pacingResponse" }] : []));
         this.dataResults = input([], ...(ngDevMode ? [{ debugName: "dataResults" }] : []));
@@ -58658,7 +58610,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"], pacingResponse: [1, "pacingResponse"], 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) {
+        } }, inputs: { viewMode: [1, "viewMode"], isLoading: [1, "isLoading"], dataLoadStatus: [1, "dataLoadStatus"], targets: [1, "targets"], funnelMetrics: [1, "funnelMetrics"], mainUiData: [1, "mainUiData"], ytdComparisonUiData: [1, "ytdComparisonUiData"], trendUiData: [1, "trendUiData"], pacingResponse: [1, "pacingResponse"], 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", "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();
@@ -58676,7 +58628,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, 12)(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, 11)(26, SymphiqRevenueCalculatorDashboardComponent_Conditional_26_Template, 10, 7);
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
@@ -58725,188 +58677,187 @@ 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]="isScrolled()"
-              [class.opacity-0]="isScrolled()"
-              [class.max-h-96]="!isScrolled()"
-              [class.opacity-100]="!isScrolled()">
-            <div
-                class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-                [class.pointer-events-none]="isScrolled()"
-                [class.pointer-events-auto]="!isScrolled()">
-              <div class="flex items-center justify-between">
-                <div>
-                  <h1 [ngClass]="getMainTitleClasses()">
-                    Revenue Calculator
-                  </h1>
-                  <p [ngClass]="getSubtitleClasses()">
-                    Set Your Revenue Target and See Required Metric Improvements
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Condensed Header -->
-          <div
-              class="transition-all duration-300 ease-in-out overflow-hidden"
-              [class.max-h-0]="!isScrolled()"
-              [class.opacity-0]="!isScrolled()"
-              [class.max-h-20]="isScrolled()"
-              [class.opacity-100]="isScrolled()">
-            <div
-                class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-                [class.pointer-events-none]="!isScrolled()"
-                [class.pointer-events-auto]="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]="pacingResponse()"
-                    [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>
+                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]="isScrolled()"
+              [class.opacity-0]="isScrolled()"
+              [class.max-h-96]="!isScrolled()"
+              [class.opacity-100]="!isScrolled()">
+            <div
+                class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
+                [class.pointer-events-none]="isScrolled()"
+                [class.pointer-events-auto]="!isScrolled()">
+              <div class="flex items-center justify-between">
+                <div>
+                  <h1 [ngClass]="getMainTitleClasses()">
+                    Revenue Calculator
+                  </h1>
+                  <p [ngClass]="getSubtitleClasses()">
+                    Set Your Revenue Target and See Required Metric Improvements
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Condensed Header -->
+          <div
+              class="transition-all duration-300 ease-in-out overflow-hidden"
+              [class.max-h-0]="!isScrolled()"
+              [class.opacity-0]="!isScrolled()"
+              [class.max-h-20]="isScrolled()"
+              [class.opacity-100]="isScrolled()">
+            <div
+                class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
+                [class.pointer-events-none]="!isScrolled()"
+                [class.pointer-events-auto]="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()"
+                    [trendUiData]="trendUiData()"
+                    [shopId]="shopId()"
+                    [pacingMetrics]="pacingResponse()"
+                    [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 }] }], pacingResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingResponse", 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: [{
+    }], () => [], { 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 }] }], ytdComparisonUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "ytdComparisonUiData", required: false }] }], trendUiData: [{ type: i0.Input, args: [{ isSignal: true, alias: "trendUiData", required: false }] }], pacingResponse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pacingResponse", 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: 219 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqRevenueCalculatorDashboardComponent, { className: "SymphiqRevenueCalculatorDashboardComponent", filePath: "lib/components/revenue-calculator-dashboard/symphiq-revenue-calculator-dashboard.component.ts", lineNumber: 218 }); })();
 
 function HierarchyDisplayComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1)(1, "div", 1);
@@ -108765,5 +108716,5 @@ const PROFILE_ANALYSIS_METRIC_SCREEN_PAGE_VIEWS = ({
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartComponent, BUSINESS_PROFILE, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, FUNNEL_ANALYSIS, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, METRIC_TYPE_MAP, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PROFILE_ANALYSIS_FOCUS_AREA_AFFILIATE, PROFILE_ANALYSIS_METRIC_SCREEN_PAGE_VIEWS, PROFILE_ANALYSIS_SHOP, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RelatedMetricType, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, calculateMetricTargetsFromRevenue, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricType, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, recalculateWithLockedMetrics };
+export { AreaChartComponent, BUSINESS_PROFILE, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, FUNNEL_ANALYSIS, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PROFILE_ANALYSIS_FOCUS_AREA_AFFILIATE, PROFILE_ANALYSIS_METRIC_SCREEN_PAGE_VIEWS, PROFILE_ANALYSIS_SHOP, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, isLightMode };
 //# sourceMappingURL=symphiq-components.mjs.map