@eric-emg/symphiq-components 1.2.393 → 1.2.396

package/fesm2022/symphiq-components.mjs

@@ -21,6 +21,7 @@ import { Root, color, Tooltip, Bullet, Circle, Legend, percent, LinearGradient,
 import { XYChart, CategoryAxis, AxisRendererX, ValueAxis, AxisRendererY, XYCursor, LineSeries, DateAxis, ColumnSeries } from '@amcharts/amcharts5/xy';
 import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
 import { PieChart, PieSeries } from '@amcharts/amcharts5/percent';
+import { EMAIL_IS_EMG_APPS } from '@jebgem/util';
 
 class FunnelOrderService {
     constructor() {
@@ -49482,9 +49483,6 @@ class SymphiqFunnelAnalysisDashboardComponent {
  * Provides reusable color computation functions for consistent theming
  * across dashboard and preview components. Supports light and dark modes.
  */
-function EMAIL_IS_EMG_APPS(email) {
-    return email?.endsWith('@emgapps.com') ?? false;
-}
 /**
  * Determine if the current view mode is light
  */
@@ -68328,23 +68326,47 @@ class SymphiqBusinessAnalysisDashboardComponent {
 function DashboardHeaderComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 6);
 } }
-function DashboardHeaderComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "div", 15);
+function DashboardHeaderComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "symphiq-search-button", 16);
+    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_11_Template_symphiq_search_button_searchClick_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 17);
+    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_11_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(3, "svg", 18);
+    i0.ɵɵelement(4, "path", 19)(5, "path", 20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("isLightMode", ctx_r1.isLightMode());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.viewModeLabel());
+} }
+function DashboardHeaderComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 10);
     i0.ɵɵtext(2, "Generated At");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 16);
+    i0.ɵɵelementStart(3, "div", 11);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r0.metaLabelClass());
+    i0.ɵɵclassMap(ctx_r1.metaLabelClass());
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r0.headerTitleClass());
+    i0.ɵɵclassMap(ctx_r1.headerTitleClass());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.formattedGeneratedDate());
+    i0.ɵɵtextInterpolate(ctx_r1.formattedGeneratedDate());
 } }
-function DashboardHeaderComponent_Conditional_33_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function DashboardHeaderComponent_Conditional_26_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1, "\u203A");
     i0.ɵɵelementEnd();
@@ -68352,27 +68374,44 @@ function DashboardHeaderComponent_Conditional_33_Conditional_3_Template(rf, ctx)
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "text-slate-400" : "text-slate-500");
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-400" : "text-slate-500");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "text-slate-500" : "text-slate-500");
+    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-500" : "text-slate-500");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.currentSubsection(), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSubsection(), " ");
 } }
-function DashboardHeaderComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "span", 5);
+function DashboardHeaderComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15)(1, "span", 5);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_33_Conditional_3_Template, 4, 3);
+    i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_26_Conditional_3_Template, 4, 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "text-slate-600 font-medium" : "text-slate-400 font-medium");
+    i0.ɵɵproperty("ngClass", ctx_r1.isLightMode() ? "text-slate-600 font-medium" : "text-slate-400 font-medium");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.currentSection(), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSection(), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.currentSubsection() ? 3 : -1);
+    i0.ɵɵconditional(ctx_r1.currentSubsection() ? 3 : -1);
+} }
+function DashboardHeaderComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "symphiq-search-button", 21);
+    i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Conditional_27_Template_symphiq_search_button_searchClick_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchClick()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "button", 22);
+    i0.ɵɵlistener("click", function DashboardHeaderComponent_Conditional_27_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeClick()); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 18);
+    i0.ɵɵelement(3, "path", 19)(4, "path", 20);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("isLightMode", ctx_r1.isLightMode())("minimized", true);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
 } }
 class DashboardHeaderComponent {
     constructor() {
@@ -68385,6 +68424,7 @@ class DashboardHeaderComponent {
         this.currentSection = input(...(ngDevMode ? [undefined, { debugName: "currentSection" }] : []));
         this.currentSubsection = input(...(ngDevMode ? [undefined, { debugName: "currentSubsection" }] : []));
         this.isLoading = input(...(ngDevMode ? [undefined, { debugName: "isLoading" }] : []));
+        this.showControls = input(true, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
         this.searchClick = output();
         this.viewModeClick = output();
         this.headerScrollService = inject(HeaderScrollService);
@@ -68441,7 +68481,7 @@ class DashboardHeaderComponent {
             : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-700';
     }
     static { this.ɵfac = function DashboardHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DashboardHeaderComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], viewModeLabel: [1, "viewModeLabel"], currentSection: [1, "currentSection"], currentSubsection: [1, "currentSubsection"], isLoading: [1, "isLoading"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 39, vars: 46, consts: [[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, "flex", "items-center", "gap-3"], [3, "ngClass"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "items-center", "gap-2"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"]], template: function DashboardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: [1, "title"], subtitle: [1, "subtitle"], viewMode: [1, "viewMode"], viewModeLabel: [1, "viewModeLabel"], currentSection: [1, "currentSection"], currentSubsection: [1, "currentSubsection"], isLoading: [1, "isLoading"], showControls: [1, "showControls"] }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 28, vars: 42, consts: [[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, "flex", "items-center", "gap-3"], [3, "ngClass"], ["title", "Refreshing data...", 1, "animate-spin", "w-4", "h-4", "border-2", "border-blue-500/30", "border-t-blue-500", "rounded-full"], [1, "flex", "items-center", "gap-2"], [1, "flex", "flex-col", "gap-4", "min-w-[180px]"], [1, "text-left", "sm:text-right"], [1, "text-xs", "sm:text-sm"], [1, "text-sm", "sm:text-base", "font-medium"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-3"], [1, "flex-1", "min-w-0", "mr-4"], [1, "flex", "items-center", "gap-4"], [1, "flex", "items-center", "gap-2", "text-sm", "flex-shrink-0"], [3, "searchClick", "isLightMode"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-3", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 12a3 3 0 11-6 0 3 3 0 016 0z"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"], [3, "searchClick", "isLightMode", "minimized"], ["type", "button", 1, "cursor-pointer", "flex", "items-center", "gap-2", "px-2", "py-1.5", "rounded-lg", "text-xs", "font-medium", "transition-all", "duration-200", "hover:scale-105", 3, "click", "ngClass"]], template: function DashboardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div")(5, "div", 4)(6, "h1", 5);
             i0.ɵɵtext(7);
             i0.ɵɵelementEnd();
@@ -68450,43 +68490,24 @@ class DashboardHeaderComponent {
             i0.ɵɵelementStart(9, "p", 5);
             i0.ɵɵtext(10);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(11, "div", 7)(12, "symphiq-search-button", 8);
-            i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Template_symphiq_search_button_searchClick_12_listener() { return ctx.onSearchClick(); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "button", 9);
-            i0.ɵɵlistener("click", function DashboardHeaderComponent_Template_button_click_13_listener() { return ctx.onViewModeClick(); });
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(14, "svg", 10);
-            i0.ɵɵelement(15, "path", 11)(16, "path", 12);
+            i0.ɵɵconditionalCreate(11, DashboardHeaderComponent_Conditional_11_Template, 8, 3, "div", 7);
+            i0.ɵɵelementStart(12, "div", 8);
+            i0.ɵɵconditionalCreate(13, DashboardHeaderComponent_Conditional_13_Template, 5, 5, "div", 9);
+            i0.ɵɵelementStart(14, "div", 9)(15, "div", 10);
+            i0.ɵɵtext(16, "Requested by");
             i0.ɵɵelementEnd();
-            i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(17, "span");
+            i0.ɵɵelementStart(17, "div", 11);
             i0.ɵɵtext(18);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(19, "div", 13);
-            i0.ɵɵconditionalCreate(20, DashboardHeaderComponent_Conditional_20_Template, 5, 5, "div", 14);
-            i0.ɵɵelementStart(21, "div", 14)(22, "div", 15);
-            i0.ɵɵtext(23, "Requested by");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "div", 16);
-            i0.ɵɵtext(25);
             i0.ɵɵelementEnd()()()()()();
-            i0.ɵɵelementStart(26, "div", 1)(27, "div", 17)(28, "div", 3)(29, "div", 18)(30, "h1", 5);
-            i0.ɵɵtext(31);
+            i0.ɵɵelementStart(19, "div", 1)(20, "div", 12)(21, "div", 3)(22, "div", 13)(23, "h1", 5);
+            i0.ɵɵtext(24);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(32, "div", 19);
-            i0.ɵɵconditionalCreate(33, DashboardHeaderComponent_Conditional_33_Template, 4, 3, "div", 20);
-            i0.ɵɵelementStart(34, "symphiq-search-button", 21);
-            i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Template_symphiq_search_button_searchClick_34_listener() { return ctx.onSearchClick(); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(35, "button", 22);
-            i0.ɵɵlistener("click", function DashboardHeaderComponent_Template_button_click_35_listener() { return ctx.onViewModeClick(); });
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(36, "svg", 10);
-            i0.ɵɵelement(37, "path", 11)(38, "path", 12);
-            i0.ɵɵelementEnd()()()()()()();
+            i0.ɵɵelementStart(25, "div", 14);
+            i0.ɵɵconditionalCreate(26, DashboardHeaderComponent_Conditional_26_Template, 4, 3, "div", 15);
+            i0.ɵɵconditionalCreate(27, DashboardHeaderComponent_Conditional_27_Template, 5, 3);
+            i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
-            let tmp_18_0;
+            let tmp_16_0;
             i0.ɵɵproperty("ngClass", ctx.getHeaderClasses());
             i0.ɵɵadvance();
             i0.ɵɵclassProp("max-h-0", ctx.headerScrollService.isScrolled())("opacity-0", ctx.headerScrollService.isScrolled())("max-h-96", !ctx.headerScrollService.isScrolled())("opacity-100", !ctx.headerScrollService.isScrolled());
@@ -68502,20 +68523,16 @@ class DashboardHeaderComponent {
             i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.subtitle(), " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("isLightMode", ctx.isLightMode());
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.getViewModeButtonClasses());
-            i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(ctx.viewModeLabel());
+            i0.ɵɵconditional(ctx.showControls() ? 11 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.formattedGeneratedDate() ? 20 : -1);
+            i0.ɵɵconditional(ctx.formattedGeneratedDate() ? 13 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵclassMap(ctx.metaLabelClass());
             i0.ɵɵadvance(2);
             i0.ɵɵclassMap(ctx.headerTitleClass());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate2("", (tmp_18_0 = ctx.requestedByUser()) == null ? null : tmp_18_0.firstName, " ", (tmp_18_0 = ctx.requestedByUser()) == null ? null : tmp_18_0.lastName);
+            i0.ɵɵtextInterpolate2("", (tmp_16_0 = ctx.requestedByUser()) == null ? null : tmp_16_0.firstName, " ", (tmp_16_0 = ctx.requestedByUser()) == null ? null : tmp_16_0.lastName);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("max-h-0", !ctx.headerScrollService.isScrolled())("opacity-0", !ctx.headerScrollService.isScrolled())("max-h-20", ctx.headerScrollService.isScrolled())("opacity-100", ctx.headerScrollService.isScrolled());
             i0.ɵɵadvance();
@@ -68525,11 +68542,9 @@ class DashboardHeaderComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.title(), " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.currentSection() ? 33 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("isLightMode", ctx.isLightMode())("minimized", true);
+            i0.ɵɵconditional(ctx.currentSection() ? 26 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", ctx.getViewModeButtonClasses());
+            i0.ɵɵconditional(ctx.showControls() ? 27 : -1);
         } }, dependencies: [CommonModule, i1$1.NgClass, SearchButtonComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardHeaderComponent, [{
@@ -68566,23 +68581,25 @@ class DashboardHeaderComponent {
                 {{ subtitle() }}
               </p>
             </div>
-            <div class="flex items-center gap-2">
-              <symphiq-search-button
-                [isLightMode]="isLightMode()"
-                (searchClick)="onSearchClick()"
-              />
-              <button
-                type="button"
-                (click)="onViewModeClick()"
-                [ngClass]="getViewModeButtonClasses()"
-                class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                </svg>
-                <span>{{ viewModeLabel() }}</span>
-              </button>
-            </div>
+            @if (showControls()) {
+              <div class="flex items-center gap-2">
+                <symphiq-search-button
+                  [isLightMode]="isLightMode()"
+                  (searchClick)="onSearchClick()"
+                />
+                <button
+                  type="button"
+                  (click)="onViewModeClick()"
+                  [ngClass]="getViewModeButtonClasses()"
+                  class="cursor-pointer flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                  </svg>
+                  <span>{{ viewModeLabel() }}</span>
+                </button>
+              </div>
+            }
             <div class="flex flex-col gap-4 min-w-[180px]">
               @if (formattedGeneratedDate()) {
                 <div class="text-left sm:text-right">
@@ -68630,21 +68647,23 @@ class DashboardHeaderComponent {
                   }
                 </div>
               }
-              <symphiq-search-button
-                [isLightMode]="isLightMode()"
-                [minimized]="true"
-                (searchClick)="onSearchClick()"
-              />
-              <button
-                type="button"
-                (click)="onViewModeClick()"
-                [ngClass]="getViewModeButtonClasses()"
-                class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                </svg>
-              </button>
+              @if (showControls()) {
+                <symphiq-search-button
+                  [isLightMode]="isLightMode()"
+                  [minimized]="true"
+                  (searchClick)="onSearchClick()"
+                />
+                <button
+                  type="button"
+                  (click)="onViewModeClick()"
+                  [ngClass]="getViewModeButtonClasses()"
+                  class="cursor-pointer flex items-center gap-2 px-2 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 hover:scale-105">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                  </svg>
+                </button>
+              }
             </div>
           </div>
         </div>
@@ -68652,8 +68671,8 @@ class DashboardHeaderComponent {
     </header>
   `
             }]
-    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeLabel", required: false }] }], currentSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSection", required: false }] }], currentSubsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSubsection", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], viewModeClick: [{ type: i0.Output, args: ["viewModeClick"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 126 }); })();
+    }], null, { requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], viewModeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeLabel", required: false }] }], currentSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSection", required: false }] }], currentSubsection: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSubsection", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], searchClick: [{ type: i0.Output, args: ["searchClick"] }], viewModeClick: [{ type: i0.Output, args: ["viewModeClick"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 130 }); })();
 
 class GradeBadgeComponent {
     constructor() {
@@ -87914,6 +87933,7 @@ function ShopProfileCategoryListComponent_For_2_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("ngClass", ctx_r2.getProgressBarContainerClasses());
     i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2.delayAnimation() ? "h-full rounded-full" : "h-full transition-all duration-500 ease-out rounded-full");
     i0.ɵɵstyleProp("width", item_r2.progress, "%");
     i0.ɵɵproperty("ngClass", ctx_r2.getProgressBarFillClasses());
     i0.ɵɵadvance(2);
@@ -87925,6 +87945,7 @@ class ShopProfileCategoryListComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
         this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.delayAnimation = input(false, ...(ngDevMode ? [{ debugName: "delayAnimation" }] : []));
         this.itemClick = output();
     }
     onItemClick(item) {
@@ -87979,9 +88000,9 @@ class ShopProfileCategoryListComponent {
             : 'text-emerald-600';
     }
     static { this.ɵfac = function ShopProfileCategoryListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ShopProfileCategoryListComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopProfileCategoryListComponent, selectors: [["symphiq-shop-profile-category-list"]], inputs: { viewMode: [1, "viewMode"], items: [1, "items"] }, outputs: { itemClick: "itemClick" }, decls: 3, vars: 0, consts: [[1, "space-y-4"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", "hover:scale-[1.01]", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-lg", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", 1, "flex-shrink-0", "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "space-y-2"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "flex", "justify-between", "items-center"], [1, "text-sm", "font-medium", 3, "ngClass"]], template: function ShopProfileCategoryListComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopProfileCategoryListComponent, selectors: [["symphiq-shop-profile-category-list"]], inputs: { viewMode: [1, "viewMode"], items: [1, "items"], delayAnimation: [1, "delayAnimation"] }, outputs: { itemClick: "itemClick" }, decls: 3, vars: 0, consts: [[1, "space-y-4"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", "hover:scale-[1.01]", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-lg", "font-semibold", "leading-tight", 3, "ngClass"], ["type", "button", 1, "flex-shrink-0", "px-5", "py-2.5", "rounded-lg", "font-medium", "text-sm", "transition-all", "duration-300", "flex", "items-center", "gap-2", "hover:scale-105", "active:scale-95", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5l7 7-7 7"], [1, "space-y-2"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [3, "ngClass"], [1, "flex", "justify-between", "items-center"], [1, "text-sm", "font-medium", 3, "ngClass"]], template: function ShopProfileCategoryListComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵrepeaterCreate(1, ShopProfileCategoryListComponent_For_2_Template, 19, 14, "div", 1, _forTrack0$5);
+            i0.ɵɵrepeaterCreate(1, ShopProfileCategoryListComponent_For_2_Template, 19, 16, "div", 1, _forTrack0$5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -87995,59 +88016,59 @@ class ShopProfileCategoryListComponent {
                 standalone: true,
                 imports: [CommonModule],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div class="space-y-4">
-      @for (item of items(); track item.id) {
-        <div
-          [ngClass]="getCardClasses()"
-          class="rounded-xl p-6 transition-all duration-300 hover:scale-[1.01]"
-        >
-          <div class="space-y-4">
-            <div class="flex items-start justify-between gap-4">
-              <div class="flex-1 min-w-0">
-                <div [ngClass]="getLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
-                  {{ item.label }}
-                </div>
-                <h3 [ngClass]="getNameClasses()" class="text-lg font-semibold leading-tight">
-                  {{ item.name }}
-                </h3>
-              </div>
-
-              <button
-                type="button"
-                (click)="onItemClick(item)"
-                [ngClass]="getButtonClasses(item)"
-                class="flex-shrink-0 px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 flex items-center gap-2 hover:scale-105 active:scale-95"
-              >
-                <span>{{ getButtonText(item) }}</span>
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                </svg>
-              </button>
-            </div>
-
-            <div class="space-y-2">
-              <div [ngClass]="getProgressBarContainerClasses()" class="h-2 rounded-full overflow-hidden">
-                <div
-                  [ngClass]="getProgressBarFillClasses()"
-                  class="h-full transition-all duration-500 ease-out rounded-full"
-                  [style.width.%]="item.progress"
-                ></div>
-              </div>
-
-              <div class="flex justify-between items-center">
-                <span [ngClass]="getProgressTextClasses()" class="text-sm font-medium">
-                  {{ item.answeredQuestions }} / {{ item.totalQuestions }} questions answered
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      }
-    </div>
+                template: `
+    <div class="space-y-4">
+      @for (item of items(); track item.id) {
+        <div
+          [ngClass]="getCardClasses()"
+          class="rounded-xl p-6 transition-all duration-300 hover:scale-[1.01]"
+        >
+          <div class="space-y-4">
+            <div class="flex items-start justify-between gap-4">
+              <div class="flex-1 min-w-0">
+                <div [ngClass]="getLabelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
+                  {{ item.label }}
+                </div>
+                <h3 [ngClass]="getNameClasses()" class="text-lg font-semibold leading-tight">
+                  {{ item.name }}
+                </h3>
+              </div>
+
+              <button
+                type="button"
+                (click)="onItemClick(item)"
+                [ngClass]="getButtonClasses(item)"
+                class="flex-shrink-0 px-5 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 flex items-center gap-2 hover:scale-105 active:scale-95"
+              >
+                <span>{{ getButtonText(item) }}</span>
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              </button>
+            </div>
+
+            <div class="space-y-2">
+              <div [ngClass]="getProgressBarContainerClasses()" class="h-2 rounded-full overflow-hidden">
+                <div
+                  [ngClass]="getProgressBarFillClasses()"
+                  [class]="delayAnimation() ? 'h-full rounded-full' : 'h-full transition-all duration-500 ease-out rounded-full'"
+                  [style.width.%]="item.progress"
+                ></div>
+              </div>
+
+              <div class="flex justify-between items-center">
+                <span [ngClass]="getProgressTextClasses()" class="text-sm font-medium">
+                  {{ item.answeredQuestions }} / {{ item.totalQuestions }} questions answered
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
   `
             }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] }); })();
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], delayAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "delayAnimation", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileCategoryListComponent, { className: "ShopProfileCategoryListComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-category-list.component.ts", lineNumber: 71 }); })();
 
 class ShopProfileViewToggleComponent {
@@ -89675,13 +89696,13 @@ class ShopProfileQuestionAnswerComponent {
 
 const _forTrack0$2 = ($index, $item) => $item.answer.id;
 const _forTrack1 = ($index, $item) => $item.history.id;
-function ShopProfileQuestionHistoryComponent_Conditional_12_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17)(1, "span", 18);
+function ShopProfileQuestionHistoryComponent_Conditional_16_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "span", 21);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "symphiq-user-display", 19);
+    i0.ɵɵelement(3, "symphiq-user-display", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 20);
+    i0.ɵɵelementStart(4, "div", 23);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -89699,15 +89720,15 @@ function ShopProfileQuestionHistoryComponent_Conditional_12_For_8_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Answered ", ctx_r1.formatDate(answerData_r1.answer.createdDate), " ");
 } }
-function ShopProfileQuestionHistoryComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "h4", 11);
+function ShopProfileQuestionHistoryComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13)(1, "h4", 14);
     i0.ɵɵtext(2, " Current answers ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 14)(4, "p", 15);
+    i0.ɵɵelementStart(3, "div", 17)(4, "p", 18);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 16);
-    i0.ɵɵrepeaterCreate(7, ShopProfileQuestionHistoryComponent_Conditional_12_For_8_Template, 6, 8, null, null, _forTrack0$2);
+    i0.ɵɵelementStart(6, "div", 19);
+    i0.ɵɵrepeaterCreate(7, ShopProfileQuestionHistoryComponent_Conditional_16_For_8_Template, 6, 8, null, null, _forTrack0$2);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -89722,20 +89743,20 @@ function ShopProfileQuestionHistoryComponent_Conditional_12_Template(rf, ctx) {
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.currentAnswers());
 } }
-function ShopProfileQuestionHistoryComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function ShopProfileQuestionHistoryComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " No history yet ");
 } }
-function ShopProfileQuestionHistoryComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function ShopProfileQuestionHistoryComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " 1 change ");
 } }
-function ShopProfileQuestionHistoryComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function ShopProfileQuestionHistoryComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.historyEntries().length, " changes ");
 } }
-function ShopProfileQuestionHistoryComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12)(1, "div", 21);
+function ShopProfileQuestionHistoryComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 24);
     i0.ɵɵtext(2, " No previous changes to display ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -89744,11 +89765,11 @@ function ShopProfileQuestionHistoryComponent_Conditional_18_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.emptyStateTextClasses());
 } }
-function ShopProfileQuestionHistoryComponent_Conditional_19_For_2_For_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26)(1, "div", 27);
+function ShopProfileQuestionHistoryComponent_Conditional_23_For_2_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29)(1, "div", 30);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 28);
+    i0.ɵɵelementStart(3, "div", 31);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -89765,14 +89786,14 @@ function ShopProfileQuestionHistoryComponent_Conditional_19_For_2_For_7_Template
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", answer_r3, " ");
 } }
-function ShopProfileQuestionHistoryComponent_Conditional_19_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "div", 22)(2, "div", 23);
+function ShopProfileQuestionHistoryComponent_Conditional_23_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 25)(2, "div", 26);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "symphiq-user-display", 24);
+    i0.ɵɵelement(4, "symphiq-user-display", 27);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 25);
-    i0.ɵɵrepeaterCreate(6, ShopProfileQuestionHistoryComponent_Conditional_19_For_2_For_7_Template, 5, 5, "div", 26, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(5, "div", 28);
+    i0.ɵɵrepeaterCreate(6, ShopProfileQuestionHistoryComponent_Conditional_23_For_2_For_7_Template, 5, 5, "div", 29, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const entry_r4 = ctx.$implicit;
@@ -89787,9 +89808,9 @@ function ShopProfileQuestionHistoryComponent_Conditional_19_For_2_Template(rf, c
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(entry_r4.answers);
 } }
-function ShopProfileQuestionHistoryComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionHistoryComponent_Conditional_19_For_2_Template, 8, 9, "div", 14, _forTrack1);
+function ShopProfileQuestionHistoryComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵrepeaterCreate(1, ShopProfileQuestionHistoryComponent_Conditional_23_For_2_Template, 8, 9, "div", 17, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -89804,6 +89825,7 @@ class ShopProfileQuestionHistoryComponent {
         this.profileAnswers = input([], ...(ngDevMode ? [{ debugName: "profileAnswers" }] : []));
         this.users = input([], ...(ngDevMode ? [{ debugName: "users" }] : []));
         this.close = output();
+        this.back = output();
         this.currentAnswers = computed(() => {
             const questionId = this.question().id;
             const answers = this.profileAnswers();
@@ -89862,6 +89884,9 @@ class ShopProfileQuestionHistoryComponent {
     onClose() {
         this.close.emit();
     }
+    onBack() {
+        this.back.emit(this.question().id);
+    }
     isLightMode() {
         return this.viewMode() === ViewModeEnum.LIGHT;
     }
@@ -89980,32 +90005,41 @@ class ShopProfileQuestionHistoryComponent {
         }
     }
     static { this.ɵfac = function ShopProfileQuestionHistoryComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ShopProfileQuestionHistoryComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopProfileQuestionHistoryComponent, selectors: [["symphiq-shop-profile-question-history"]], inputs: { viewMode: [1, "viewMode"], question: [1, "question"], profileAnswerHistories: [1, "profileAnswerHistories"], profileAnswers: [1, "profileAnswers"], users: [1, "users"] }, outputs: { close: "close" }, decls: 20, vars: 10, consts: [[1, "h-full", "flex", "flex-col", 3, "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "flex-shrink-0", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-xl", "font-bold", "leading-tight", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", "flex-shrink-0", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "flex-1", "overflow-y-auto", "px-6", "py-6"], [1, "mb-8"], [1, "text-base", "font-bold", "mb-4", 3, "ngClass"], [1, "rounded-xl", "border-2", "border-dashed", "p-8", "text-center", 3, "ngClass"], [1, "space-y-6"], [1, "rounded-xl", "border-2", "p-5", 3, "ngClass"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-3"], [1, "flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], [3, "viewMode", "user", "showEmail"], [1, "self-center", "text-xs", "-ml-1", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "gap-4", "mb-4"], [1, "text-sm", "font-semibold", 3, "ngClass"], [3, "viewMode", "user", "avatarSize", "showEmail"], [1, "space-y-2"], [1, "flex", "items-start", "gap-3", "px-4", "py-3", "rounded-lg", 3, "ngClass"], [1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "flex", "items-center", "justify-center", "text-xs", "font-bold", "mt-0.5", 3, "ngClass"], [1, "flex-1", "text-sm", "font-medium", 3, "ngClass"]], template: function ShopProfileQuestionHistoryComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
-            i0.ɵɵtext(5, " Answer History ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "h3", 5);
-            i0.ɵɵtext(7);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ShopProfileQuestionHistoryComponent, selectors: [["symphiq-shop-profile-question-history"]], inputs: { viewMode: [1, "viewMode"], question: [1, "question"], profileAnswerHistories: [1, "profileAnswerHistories"], profileAnswers: [1, "profileAnswers"], users: [1, "users"] }, outputs: { close: "close", back: "back" }, decls: 24, vars: 11, consts: [[1, "h-full", "flex", "flex-col", 3, "ngClass"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "flex-shrink-0", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex", "items-start", "gap-3", "flex-1", "min-w-0"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "flex-shrink-0", "mt-1", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "flex-1", "min-w-0"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-2", 3, "ngClass"], [1, "text-xl", "font-bold", "leading-tight", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", "flex-shrink-0", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "flex-1", "overflow-y-auto", "px-6", "py-6"], [1, "mb-8"], [1, "text-base", "font-bold", "mb-4", 3, "ngClass"], [1, "rounded-xl", "border-2", "border-dashed", "p-8", "text-center", 3, "ngClass"], [1, "space-y-6"], [1, "rounded-xl", "border-2", "p-5", 3, "ngClass"], [1, "text-sm", "mb-4", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-3"], [1, "flex", "items-center", "gap-2", "px-4", "py-2.5", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], [3, "viewMode", "user", "showEmail"], [1, "self-center", "text-xs", "-ml-1", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [1, "flex", "items-start", "justify-between", "gap-4", "mb-4"], [1, "text-sm", "font-semibold", 3, "ngClass"], [3, "viewMode", "user", "avatarSize", "showEmail"], [1, "space-y-2"], [1, "flex", "items-start", "gap-3", "px-4", "py-3", "rounded-lg", 3, "ngClass"], [1, "flex-shrink-0", "w-5", "h-5", "rounded-full", "flex", "items-center", "justify-center", "text-xs", "font-bold", "mt-0.5", 3, "ngClass"], [1, "flex-1", "text-sm", "font-medium", 3, "ngClass"]], template: function ShopProfileQuestionHistoryComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "button", 4);
+            i0.ɵɵlistener("click", function ShopProfileQuestionHistoryComponent_Template_button_click_4_listener() { return ctx.onBack(); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(5, "svg", 5);
+            i0.ɵɵelement(6, "path", 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(8, "button", 6);
-            i0.ɵɵlistener("click", function ShopProfileQuestionHistoryComponent_Template_button_click_8_listener() { return ctx.onClose(); });
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(7, "div", 7)(8, "div", 8);
+            i0.ɵɵtext(9, " Answer History ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "h3", 9);
+            i0.ɵɵtext(11);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(12, "button", 10);
+            i0.ɵɵlistener("click", function ShopProfileQuestionHistoryComponent_Template_button_click_12_listener() { return ctx.onClose(); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(9, "svg", 7);
-            i0.ɵɵelement(10, "path", 8);
+            i0.ɵɵelementStart(13, "svg", 5);
+            i0.ɵɵelement(14, "path", 11);
             i0.ɵɵelementEnd()()()();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(11, "div", 9);
-            i0.ɵɵconditionalCreate(12, ShopProfileQuestionHistoryComponent_Conditional_12_Template, 9, 4, "div", 10);
-            i0.ɵɵelementStart(13, "div")(14, "h4", 11);
-            i0.ɵɵconditionalCreate(15, ShopProfileQuestionHistoryComponent_Conditional_15_Template, 1, 0)(16, ShopProfileQuestionHistoryComponent_Conditional_16_Template, 1, 0)(17, ShopProfileQuestionHistoryComponent_Conditional_17_Template, 1, 1);
+            i0.ɵɵelementStart(15, "div", 12);
+            i0.ɵɵconditionalCreate(16, ShopProfileQuestionHistoryComponent_Conditional_16_Template, 9, 4, "div", 13);
+            i0.ɵɵelementStart(17, "div")(18, "h4", 14);
+            i0.ɵɵconditionalCreate(19, ShopProfileQuestionHistoryComponent_Conditional_19_Template, 1, 0)(20, ShopProfileQuestionHistoryComponent_Conditional_20_Template, 1, 0)(21, ShopProfileQuestionHistoryComponent_Conditional_21_Template, 1, 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(18, ShopProfileQuestionHistoryComponent_Conditional_18_Template, 3, 2, "div", 12)(19, ShopProfileQuestionHistoryComponent_Conditional_19_Template, 3, 0, "div", 13);
+            i0.ɵɵconditionalCreate(22, ShopProfileQuestionHistoryComponent_Conditional_22_Template, 3, 2, "div", 15)(23, ShopProfileQuestionHistoryComponent_Conditional_23_Template, 3, 0, "div", 16);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.containerClasses());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.headerClasses());
             i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", ctx.closeButtonClasses());
+            i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngClass", ctx.labelClasses());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.titleClasses());
@@ -90014,13 +90048,13 @@ class ShopProfileQuestionHistoryComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.closeButtonClasses());
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.currentAnswers().length > 0 ? 12 : -1);
+            i0.ɵɵconditional(ctx.currentAnswers().length > 0 ? 16 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngClass", ctx.sectionTitleClasses());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.historyEntries().length === 0 ? 15 : ctx.historyEntries().length === 1 ? 16 : 17);
+            i0.ɵɵconditional(ctx.historyEntries().length === 0 ? 19 : ctx.historyEntries().length === 1 ? 20 : 21);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.historyEntries().length === 0 ? 18 : 19);
+            i0.ɵɵconditional(ctx.historyEntries().length === 0 ? 22 : 23);
         } }, dependencies: [CommonModule, i1$1.NgClass, UserDisplayComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShopProfileQuestionHistoryComponent, [{
@@ -90030,123 +90064,134 @@ class ShopProfileQuestionHistoryComponent {
                 standalone: true,
                 imports: [CommonModule, UserDisplayComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="h-full flex flex-col">
-      <!-- Header -->
-      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm flex-shrink-0">
-        <div class="flex items-start justify-between">
-          <div class="flex-1 min-w-0">
-            <div [ngClass]="labelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
-              Answer History
-            </div>
-            <h3 [ngClass]="titleClasses()" class="text-xl font-bold leading-tight">
-              {{ question().question }}
-            </h3>
-          </div>
-          <button
-            type="button"
-            (click)="onClose()"
-            [ngClass]="closeButtonClasses()"
-            class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90 cursor-pointer relative ml-4 flex-shrink-0">
-            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      <!-- Content -->
-      <div class="flex-1 overflow-y-auto px-6 py-6">
-        <!-- Current Answers Section -->
-        @if (currentAnswers().length > 0) {
-          <div class="mb-8">
-            <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4">
-              Current answers
-            </h4>
-            <div [ngClass]="currentAnswersContainerClasses()" class="rounded-xl border-2 p-5">
-              <p [ngClass]="contextClasses()" class="text-sm mb-4">
-                {{ question().context }}
-              </p>
-              <div class="flex flex-wrap gap-3">
-                @for (answerData of currentAnswers(); track answerData.answer.id) {
-                  <div [ngClass]="currentAnswerChipClasses()" class="flex items-center gap-2 px-4 py-2.5 rounded-full">
-                    <span [ngClass]="currentAnswerTextClasses()" class="text-sm font-medium">
-                      {{ answerData.answer.answer }}
-                    </span>
-                    <symphiq-user-display
-                      [viewMode]="viewMode()"
-                      [user]="answerData.user"
-                      [showEmail]="false"
-                    />
-                  </div>
-                  <div [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
-                    Answered {{ formatDate(answerData.answer.createdDate) }}
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-        }
-
-        <!-- History Timeline -->
-        <div>
-          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4">
-            @if (historyEntries().length === 0) {
-              No history yet
-            } @else if (historyEntries().length === 1) {
-              1 change
-            } @else {
-              {{ historyEntries().length }} changes
-            }
-          </h4>
-
-          @if (historyEntries().length === 0) {
-            <div [ngClass]="emptyStateClasses()" class="rounded-xl border-2 border-dashed p-8 text-center">
-              <div [ngClass]="emptyStateTextClasses()" class="text-sm">
-                No previous changes to display
-              </div>
-            </div>
-          } @else {
-            <div class="space-y-6">
-              @for (entry of historyEntries(); track entry.history.id) {
-                <div [ngClass]="historyEntryClasses()" class="rounded-xl border-2 p-5">
-                  <!-- Entry Header -->
-                  <div class="flex items-start justify-between gap-4 mb-4">
-                    <div [ngClass]="entryHeaderClasses()" class="text-sm font-semibold">
-                      {{ getEntryCount(entry) }} {{ entry.isAddition ? 'added' : 'removed' }} on {{ formatFullDate(entry.history.createdDate) }}
-                    </div>
-                    <symphiq-user-display
-                      [viewMode]="viewMode()"
-                      [user]="entry.user"
-                      [avatarSize]="'medium'"
-                      [showEmail]="true"
-                    />
-                  </div>
-
-                  <!-- Answers -->
-                  <div class="space-y-2">
-                    @for (answer of entry.answers; track answer) {
-                      <div [ngClass]="answerItemClasses(entry.isAddition)" class="flex items-start gap-3 px-4 py-3 rounded-lg">
-                        <div [ngClass]="answerIconClasses(entry.isAddition)" class="flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">
-                          {{ entry.isAddition ? '+' : '−' }}
-                        </div>
-                        <div [ngClass]="answerContentClasses(entry.isAddition)" class="flex-1 text-sm font-medium">
-                          {{ answer }}
-                        </div>
-                      </div>
-                    }
-                  </div>
-                </div>
-              }
-            </div>
-          }
-        </div>
-      </div>
-    </div>
+                template: `
+    <div [ngClass]="containerClasses()" class="h-full flex flex-col">
+      <!-- Header -->
+      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm flex-shrink-0">
+        <div class="flex items-start justify-between">
+          <div class="flex items-start gap-3 flex-1 min-w-0">
+            <button
+              type="button"
+              (click)="onBack()"
+              [ngClass]="closeButtonClasses()"
+              class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90 cursor-pointer flex-shrink-0 mt-1">
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+              </svg>
+            </button>
+            <div class="flex-1 min-w-0">
+              <div [ngClass]="labelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-2">
+                Answer History
+              </div>
+              <h3 [ngClass]="titleClasses()" class="text-xl font-bold leading-tight">
+                {{ question().question }}
+              </h3>
+            </div>
+          </div>
+          <button
+            type="button"
+            (click)="onClose()"
+            [ngClass]="closeButtonClasses()"
+            class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90 cursor-pointer relative ml-4 flex-shrink-0">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 overflow-y-auto px-6 py-6">
+        <!-- Current Answers Section -->
+        @if (currentAnswers().length > 0) {
+          <div class="mb-8">
+            <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4">
+              Current answers
+            </h4>
+            <div [ngClass]="currentAnswersContainerClasses()" class="rounded-xl border-2 p-5">
+              <p [ngClass]="contextClasses()" class="text-sm mb-4">
+                {{ question().context }}
+              </p>
+              <div class="flex flex-wrap gap-3">
+                @for (answerData of currentAnswers(); track answerData.answer.id) {
+                  <div [ngClass]="currentAnswerChipClasses()" class="flex items-center gap-2 px-4 py-2.5 rounded-full">
+                    <span [ngClass]="currentAnswerTextClasses()" class="text-sm font-medium">
+                      {{ answerData.answer.answer }}
+                    </span>
+                    <symphiq-user-display
+                      [viewMode]="viewMode()"
+                      [user]="answerData.user"
+                      [showEmail]="false"
+                    />
+                  </div>
+                  <div [ngClass]="answerDateClasses()" class="self-center text-xs -ml-1">
+                    Answered {{ formatDate(answerData.answer.createdDate) }}
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        }
+
+        <!-- History Timeline -->
+        <div>
+          <h4 [ngClass]="sectionTitleClasses()" class="text-base font-bold mb-4">
+            @if (historyEntries().length === 0) {
+              No history yet
+            } @else if (historyEntries().length === 1) {
+              1 change
+            } @else {
+              {{ historyEntries().length }} changes
+            }
+          </h4>
+
+          @if (historyEntries().length === 0) {
+            <div [ngClass]="emptyStateClasses()" class="rounded-xl border-2 border-dashed p-8 text-center">
+              <div [ngClass]="emptyStateTextClasses()" class="text-sm">
+                No previous changes to display
+              </div>
+            </div>
+          } @else {
+            <div class="space-y-6">
+              @for (entry of historyEntries(); track entry.history.id) {
+                <div [ngClass]="historyEntryClasses()" class="rounded-xl border-2 p-5">
+                  <!-- Entry Header -->
+                  <div class="flex items-start justify-between gap-4 mb-4">
+                    <div [ngClass]="entryHeaderClasses()" class="text-sm font-semibold">
+                      {{ getEntryCount(entry) }} {{ entry.isAddition ? 'added' : 'removed' }} on {{ formatFullDate(entry.history.createdDate) }}
+                    </div>
+                    <symphiq-user-display
+                      [viewMode]="viewMode()"
+                      [user]="entry.user"
+                      [avatarSize]="'medium'"
+                      [showEmail]="true"
+                    />
+                  </div>
+
+                  <!-- Answers -->
+                  <div class="space-y-2">
+                    @for (answer of entry.answers; track answer) {
+                      <div [ngClass]="answerItemClasses(entry.isAddition)" class="flex items-start gap-3 px-4 py-3 rounded-lg">
+                        <div [ngClass]="answerIconClasses(entry.isAddition)" class="flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold mt-0.5">
+                          {{ entry.isAddition ? '+' : '−' }}
+                        </div>
+                        <div [ngClass]="answerContentClasses(entry.isAddition)" class="flex-1 text-sm font-medium">
+                          {{ answer }}
+                        </div>
+                      </div>
+                    }
+                  </div>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      </div>
+    </div>
   `
             }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], profileAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswerHistories", required: false }] }], profileAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswers", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionHistoryComponent, { className: "ShopProfileQuestionHistoryComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-history.component.ts", lineNumber: 146 }); })();
+    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], question: [{ type: i0.Input, args: [{ isSignal: true, alias: "question", required: true }] }], profileAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswerHistories", required: false }] }], profileAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswers", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], back: [{ type: i0.Output, args: ["back"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionHistoryComponent, { className: "ShopProfileQuestionHistoryComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-question-history.component.ts", lineNumber: 157 }); })();
 
 const _c0$4 = ["modalContent"];
 const _c1$1 = ["modalWrapper"];
@@ -90155,7 +90200,7 @@ const _forTrack0$1 = ($index, $item) => $item.id;
 function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "symphiq-shop-profile-question-history", 10);
-    i0.ɵɵlistener("close", function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_8_Conditional_0_Template_symphiq_shop_profile_question_history_close_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onBackFromHistoryMode()); });
+    i0.ɵɵlistener("close", function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_8_Conditional_0_Template_symphiq_shop_profile_question_history_close_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onBackFromHistoryMode()); })("back", function ShopProfileQuestionsModalComponent_Conditional_0_Conditional_8_Conditional_0_Template_symphiq_shop_profile_question_history_back_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onBackFromHistoryMode($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -90394,19 +90439,20 @@ class ShopProfileQuestionsModalComponent {
         }, ...(ngDevMode ? [{ debugName: "displayTitle" }] : []));
         this.filteredQuestions = computed(() => {
             const allQuestions = this.questions();
+            const sortQuestions = (questions) => [...questions].sort((a, b) => (a.id ?? 0) - (b.id ?? 0));
             if (this.showAllQuestions()) {
-                return allQuestions;
+                return sortQuestions(allQuestions);
             }
             const categoryId = this.selectedCategoryId();
             const focusAreaId = this.selectedFocusAreaId();
             if (categoryId) {
-                return allQuestions.filter(q => q.category === categoryId);
+                return sortQuestions(allQuestions.filter(q => q.category === categoryId));
             }
             else if (focusAreaId) {
-                return allQuestions.filter(q => {
+                return sortQuestions(allQuestions.filter(q => {
                     const focusAreas = q.focusAreaDomains || [];
                     return focusAreas.includes(focusAreaId);
-                });
+                }));
             }
             return [];
         }, ...(ngDevMode ? [{ debugName: "filteredQuestions" }] : []));
@@ -90486,9 +90532,12 @@ class ShopProfileQuestionsModalComponent {
         this.historyModeActive.set(true);
         this.questionForHistory.set(question);
     }
-    onBackFromHistoryMode() {
+    onBackFromHistoryMode(questionId) {
         this.historyModeActive.set(false);
         this.questionForHistory.set(null);
+        if (questionId) {
+            this.scrollToQuestion(questionId);
+        }
     }
     onBackFromAnswerMode() {
         const history = this.navigationHistory();
@@ -90690,7 +90739,7 @@ class ShopProfileQuestionsModalComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.modalWrapper = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.scrollContainer = _t.first);
-        } }, inputs: { isOpen: [1, "isOpen"], questions: [1, "questions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], showAllQuestions: [1, "showAllQuestions"], startDirectAnswer: [1, "startDirectAnswer"], viewMode: [1, "viewMode"] }, outputs: { close: "close", questionAnswerClick: "questionAnswerClick", answerSave: "answerSave" }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], ["scrollContainer", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "block", "h-[80vh]", 3, "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "block", "h-[80vh]", 3, "close", "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "text-center", "py-12"], [1, "flex", "flex-col", "gap-6"], [1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users"], [3, "answerClick", "historyClick", "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "h-[70vh]", "overflow-hidden"], [1, "block", "h-full", 3, "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers"], [1, "block", "h-full", 3, "backClick", "saveClick", "saveAndNextClick", "navigateToList", "navigateToNextQuestion", "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers"]], template: function ShopProfileQuestionsModalComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { isOpen: [1, "isOpen"], questions: [1, "questions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"], selectedCategoryId: [1, "selectedCategoryId"], selectedFocusAreaId: [1, "selectedFocusAreaId"], showAllQuestions: [1, "showAllQuestions"], startDirectAnswer: [1, "startDirectAnswer"], viewMode: [1, "viewMode"] }, outputs: { close: "close", questionAnswerClick: "questionAnswerClick", answerSave: "answerSave" }, decls: 1, vars: 1, consts: [["modalWrapper", ""], ["modalContent", ""], ["scrollContainer", ""], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]"], [1, "fixed", "inset-0", "overflow-y-auto", "z-[9000]", 3, "click"], [1, "flex", "items-center", "justify-center", "min-h-screen", "px-4", "pt-4", "pb-20", "text-center", "sm:block", "sm:p-0"], ["aria-hidden", "true", 1, "fixed", "inset-0", "backdrop-blur-sm", 3, "ngClass"], ["aria-hidden", "true", 1, "hidden", "sm:inline-block", "sm:align-middle", "sm:h-screen"], [1, "relative", "inline-block", "align-bottom", "rounded-2xl", "text-left", "overflow-hidden", "shadow-xl", "sm:my-8", "sm:align-middle", "sm:w-full", "sm:max-w-4xl", "border", "backdrop-blur-xl", 3, "click", "ngClass"], [1, "block", "h-[80vh]", 3, "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "block", "h-[80vh]", 3, "close", "back", "question", "viewMode", "profileAnswerHistories", "profileAnswers", "users"], [1, "px-6", "py-5", "border-b", "backdrop-blur-sm", "sticky", "top-0", "z-10", 3, "ngClass"], [1, "flex", "items-start", "justify-between"], [1, "flex-1"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", "mb-1", 3, "ngClass"], [1, "text-xl", "font-bold", "mb-3", 3, "ngClass"], [1, "space-y-2"], [1, "h-2", "rounded-full", "overflow-hidden", 3, "ngClass"], [1, "h-full", "transition-all", "duration-500", "ease-out", "rounded-full", 3, "ngClass"], [1, "text-sm", "font-medium", 3, "ngClass"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", "relative", "ml-4", 3, "click", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], [1, "px-6", "py-8", "max-h-[70vh]", "overflow-y-auto", "backdrop-blur-sm", 3, "ngClass"], [1, "text-center", "py-12"], [1, "flex", "flex-col", "gap-6"], [1, "w-16", "h-16", "mx-auto", "mb-4", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-full", "h-full"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "1.5", "d", "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"], [1, "text-lg", "font-semibold", "mb-2", 3, "ngClass"], [1, "text-sm", 3, "ngClass"], [3, "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users"], [3, "answerClick", "historyClick", "id", "question", "viewMode", "viewType", "profileAnswers", "profileAnswerHistories", "users"], [1, "flex", "items-center", "gap-3"], ["type", "button", 1, "transition-all", "rounded-lg", "p-1", "hover:scale-110", "active:scale-90", "cursor-pointer", 3, "click", "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M15 19l-7-7 7-7"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "h-[70vh]", "overflow-hidden"], [1, "block", "h-full", 3, "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers"], [1, "block", "h-full", 3, "backClick", "saveClick", "saveAndNextClick", "navigateToList", "navigateToNextQuestion", "question", "viewMode", "viewType", "selectedCategoryId", "selectedFocusAreaId", "filteredQuestions", "profileAnswers"]], template: function ShopProfileQuestionsModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ShopProfileQuestionsModalComponent_Conditional_0_Template, 11, 5, "div", 3);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen() ? 0 : -1);
@@ -90730,181 +90779,182 @@ class ShopProfileQuestionsModalComponent {
                         ])
                     ])
                 ],
-                template: `
-    @if (isOpen()) {
-      <div
-        #modalWrapper
-        class="fixed inset-0 overflow-y-auto z-[9000]"
-        (click)="onBackdropClick()">
-        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-          <div
-            [ngClass]="backdropClasses()"
-            class="fixed inset-0 backdrop-blur-sm"
-            aria-hidden="true"
-            @fadeIn></div>
-
-          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-
-          <div
-            #modalContent
-            (click)="$event.stopPropagation()"
-            [ngClass]="containerClasses()"
-            class="relative inline-block align-bottom rounded-2xl text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:w-full sm:max-w-4xl border backdrop-blur-xl"
-            @slideUpFade>
-
-            @if (historyModeActive()) {
-              <!-- History Mode -->
-              @if (questionForHistory()) {
-                <symphiq-shop-profile-question-history
-                  class="block h-[80vh]"
-                  [question]="questionForHistory()!"
-                  [viewMode]="viewMode()"
-                  [profileAnswerHistories]="profileAnswerHistories()"
-                  [profileAnswers]="profileAnswers()"
-                  [users]="users()"
-                  (close)="onBackFromHistoryMode()" />
-              }
-            } @else if (!answerModeActive()) {
-              <!-- Header -->
-              <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
-                <div class="flex items-start justify-between">
-                  <div class="flex-1">
-                    <!-- Label -->
-                    <div [ngClass]="labelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-1">
-                      {{ viewType() === 'all' ? 'All Questions' : (viewType() === 'category' ? 'Category' : 'Focus Area') }}
-                    </div>
-
-                    <!-- Title -->
-                    <h3 [ngClass]="titleClasses()" class="text-xl font-bold mb-3">
-                      {{ displayTitle() }}
-                    </h3>
-
-                    <!-- Progress Bar -->
-                    <div class="space-y-2">
-                      <div [ngClass]="progressBarContainerClasses()" class="h-2 rounded-full overflow-hidden">
-                        <div
-                          [ngClass]="progressBarFillClasses()"
-                          class="h-full transition-all duration-500 ease-out rounded-full"
-                          [style.width.%]="progressPercentage()"></div>
-                      </div>
-                      <div [ngClass]="progressTextClasses()" class="text-sm font-medium">
-                        {{ answeredCount() }} / {{ totalCount() }} questions answered
-                      </div>
-                    </div>
-                  </div>
-
-                  <!-- Close Button -->
-                  <button
-                    type="button"
-                    (click)="onClose()"
-                    [ngClass]="closeButtonClasses()"
-                    class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90 cursor-pointer relative ml-4">
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-
-              <!-- Content -->
-              <div #scrollContainer [ngClass]="contentClasses()" class="px-6 py-8 max-h-[70vh] overflow-y-auto backdrop-blur-sm">
-                @if (filteredQuestions().length === 0) {
-                  <div class="text-center py-12">
-                    <div [ngClass]="emptyStateIconClasses()" class="w-16 h-16 mx-auto mb-4">
-                      <svg class="w-full h-full" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-                      </svg>
-                    </div>
-                    <h3 [ngClass]="emptyStateTitleClasses()" class="text-lg font-semibold mb-2">
-                      No questions found
-                    </h3>
-                    <p [ngClass]="emptyStateTextClasses()" class="text-sm">
-                      There are no questions for this {{ viewType() === 'category' ? 'category' : 'focus area' }}.
-                    </p>
-                  </div>
-                } @else {
-                  <div class="flex flex-col gap-6">
-                    @for (question of filteredQuestions(); track question.id) {
-                      <symphiq-shop-profile-question-card
-                        [id]="'question-' + question.id"
-                        [question]="question"
-                        [viewMode]="viewMode()"
-                        [viewType]="viewType()"
-                        [profileAnswers]="profileAnswers()"
-                        [profileAnswerHistories]="profileAnswerHistories()"
-                        [users]="users()"
-                        (answerClick)="onQuestionAnswerClick($event)"
-                        (historyClick)="onQuestionHistoryClick($event)" />
-                    }
-                  </div>
-                }
-              </div>
-            } @else {
-              <!-- Answer Mode Header -->
-              <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
-                <div class="flex items-start justify-between">
-                  <div class="flex items-center gap-3">
-                    <!-- Back Button -->
-                    <button
-                      type="button"
-                      (click)="onBackFromAnswerMode()"
-                      [ngClass]="closeButtonClasses()"
-                      class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90 cursor-pointer">
-                      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-                      </svg>
-                    </button>
-                    <div>
-                      <!-- Label - hide for All Questions mode -->
-                      @if (viewType() !== 'all') {
-                        <div [ngClass]="labelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-1">
-                          {{ viewType() === 'category' ? 'Category' : 'Focus Area' }}
-                        </div>
-                      }
-                      <!-- Title -->
-                      <h3 [ngClass]="titleClasses()" class="text-xl font-bold">
-                        {{ displayTitle() }}
-                      </h3>
-                    </div>
-                  </div>
-
-                  <!-- Close Button -->
-                  <button
-                    type="button"
-                    (click)="onClose()"
-                    [ngClass]="closeButtonClasses()"
-                    class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90 cursor-pointer">
-                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                    </svg>
-                  </button>
-                </div>
-              </div>
-
-              <!-- Answer Mode Content -->
-              <div class="h-[70vh] overflow-hidden">
-                @if (questionForAnswer()) {
-                  <symphiq-shop-profile-question-answer
-                    class="block h-full"
-                    [question]="questionForAnswer()!"
-                    [viewMode]="viewMode()"
-                    [viewType]="viewType()"
-                    [selectedCategoryId]="selectedCategoryId()"
-                    [selectedFocusAreaId]="selectedFocusAreaId()"
-                    [filteredQuestions]="filteredQuestions()"
-                    [profileAnswers]="profileAnswers()"
-                    (backClick)="onBackFromAnswerMode()"
-                    (saveClick)="onSaveAnswer($event)"
-                    (saveAndNextClick)="onSaveAndNextAnswer($event)"
-                    (navigateToList)="onNavigateToList()"
-                    (navigateToNextQuestion)="onNavigateToNextQuestion()" />
-                }
-              </div>
-            }
-          </div>
-        </div>
-      </div>
-    }
+                template: `
+    @if (isOpen()) {
+      <div
+        #modalWrapper
+        class="fixed inset-0 overflow-y-auto z-[9000]"
+        (click)="onBackdropClick()">
+        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+          <div
+            [ngClass]="backdropClasses()"
+            class="fixed inset-0 backdrop-blur-sm"
+            aria-hidden="true"
+            @fadeIn></div>
+
+          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+          <div
+            #modalContent
+            (click)="$event.stopPropagation()"
+            [ngClass]="containerClasses()"
+            class="relative inline-block align-bottom rounded-2xl text-left overflow-hidden shadow-xl sm:my-8 sm:align-middle sm:w-full sm:max-w-4xl border backdrop-blur-xl"
+            @slideUpFade>
+
+            @if (historyModeActive()) {
+              <!-- History Mode -->
+              @if (questionForHistory()) {
+                <symphiq-shop-profile-question-history
+                  class="block h-[80vh]"
+                  [question]="questionForHistory()!"
+                  [viewMode]="viewMode()"
+                  [profileAnswerHistories]="profileAnswerHistories()"
+                  [profileAnswers]="profileAnswers()"
+                  [users]="users()"
+                  (close)="onBackFromHistoryMode()"
+                  (back)="onBackFromHistoryMode($event)" />
+              }
+            } @else if (!answerModeActive()) {
+              <!-- Header -->
+              <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
+                <div class="flex items-start justify-between">
+                  <div class="flex-1">
+                    <!-- Label -->
+                    <div [ngClass]="labelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-1">
+                      {{ viewType() === 'all' ? 'All Questions' : (viewType() === 'category' ? 'Category' : 'Focus Area') }}
+                    </div>
+
+                    <!-- Title -->
+                    <h3 [ngClass]="titleClasses()" class="text-xl font-bold mb-3">
+                      {{ displayTitle() }}
+                    </h3>
+
+                    <!-- Progress Bar -->
+                    <div class="space-y-2">
+                      <div [ngClass]="progressBarContainerClasses()" class="h-2 rounded-full overflow-hidden">
+                        <div
+                          [ngClass]="progressBarFillClasses()"
+                          class="h-full transition-all duration-500 ease-out rounded-full"
+                          [style.width.%]="progressPercentage()"></div>
+                      </div>
+                      <div [ngClass]="progressTextClasses()" class="text-sm font-medium">
+                        {{ answeredCount() }} / {{ totalCount() }} questions answered
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Close Button -->
+                  <button
+                    type="button"
+                    (click)="onClose()"
+                    [ngClass]="closeButtonClasses()"
+                    class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90 cursor-pointer relative ml-4">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+
+              <!-- Content -->
+              <div #scrollContainer [ngClass]="contentClasses()" class="px-6 py-8 max-h-[70vh] overflow-y-auto backdrop-blur-sm">
+                @if (filteredQuestions().length === 0) {
+                  <div class="text-center py-12">
+                    <div [ngClass]="emptyStateIconClasses()" class="w-16 h-16 mx-auto mb-4">
+                      <svg class="w-full h-full" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                      </svg>
+                    </div>
+                    <h3 [ngClass]="emptyStateTitleClasses()" class="text-lg font-semibold mb-2">
+                      No questions found
+                    </h3>
+                    <p [ngClass]="emptyStateTextClasses()" class="text-sm">
+                      There are no questions for this {{ viewType() === 'category' ? 'category' : 'focus area' }}.
+                    </p>
+                  </div>
+                } @else {
+                  <div class="flex flex-col gap-6">
+                    @for (question of filteredQuestions(); track question.id) {
+                      <symphiq-shop-profile-question-card
+                        [id]="'question-' + question.id"
+                        [question]="question"
+                        [viewMode]="viewMode()"
+                        [viewType]="viewType()"
+                        [profileAnswers]="profileAnswers()"
+                        [profileAnswerHistories]="profileAnswerHistories()"
+                        [users]="users()"
+                        (answerClick)="onQuestionAnswerClick($event)"
+                        (historyClick)="onQuestionHistoryClick($event)" />
+                    }
+                  </div>
+                }
+              </div>
+            } @else {
+              <!-- Answer Mode Header -->
+              <div [ngClass]="headerClasses()" class="px-6 py-5 border-b backdrop-blur-sm sticky top-0 z-10">
+                <div class="flex items-start justify-between">
+                  <div class="flex items-center gap-3">
+                    <!-- Back Button -->
+                    <button
+                      type="button"
+                      (click)="onBackFromAnswerMode()"
+                      [ngClass]="closeButtonClasses()"
+                      class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90 cursor-pointer">
+                      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                      </svg>
+                    </button>
+                    <div>
+                      <!-- Label - hide for All Questions mode -->
+                      @if (viewType() !== 'all') {
+                        <div [ngClass]="labelClasses()" class="text-xs font-semibold uppercase tracking-wider mb-1">
+                          {{ viewType() === 'category' ? 'Category' : 'Focus Area' }}
+                        </div>
+                      }
+                      <!-- Title -->
+                      <h3 [ngClass]="titleClasses()" class="text-xl font-bold">
+                        {{ displayTitle() }}
+                      </h3>
+                    </div>
+                  </div>
+
+                  <!-- Close Button -->
+                  <button
+                    type="button"
+                    (click)="onClose()"
+                    [ngClass]="closeButtonClasses()"
+                    class="transition-all rounded-lg p-1 hover:scale-110 active:scale-90 cursor-pointer">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+
+              <!-- Answer Mode Content -->
+              <div class="h-[70vh] overflow-hidden">
+                @if (questionForAnswer()) {
+                  <symphiq-shop-profile-question-answer
+                    class="block h-full"
+                    [question]="questionForAnswer()!"
+                    [viewMode]="viewMode()"
+                    [viewType]="viewType()"
+                    [selectedCategoryId]="selectedCategoryId()"
+                    [selectedFocusAreaId]="selectedFocusAreaId()"
+                    [filteredQuestions]="filteredQuestions()"
+                    [profileAnswers]="profileAnswers()"
+                    (backClick)="onBackFromAnswerMode()"
+                    (saveClick)="onSaveAnswer($event)"
+                    (saveAndNextClick)="onSaveAndNextAnswer($event)"
+                    (navigateToList)="onNavigateToList()"
+                    (navigateToNextQuestion)="onNavigateToNextQuestion()" />
+                }
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    }
   `
             }]
     }], () => [], { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], questions: [{ type: i0.Input, args: [{ isSignal: true, alias: "questions", required: false }] }], profileAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswers", required: false }] }], profileAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswerHistories", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], selectedCategoryId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCategoryId", required: false }] }], selectedFocusAreaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedFocusAreaId", required: false }] }], showAllQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAllQuestions", required: false }] }], startDirectAnswer: [{ type: i0.Input, args: [{ isSignal: true, alias: "startDirectAnswer", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], questionAnswerClick: [{ type: i0.Output, args: ["questionAnswerClick"] }], answerSave: [{ type: i0.Output, args: ["answerSave"] }], modalContent: [{
@@ -90917,7 +90967,7 @@ class ShopProfileQuestionsModalComponent {
             type: ViewChild,
             args: ['scrollContainer']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionsModalComponent, { className: "ShopProfileQuestionsModalComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-questions-modal.component.ts", lineNumber: 218 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileQuestionsModalComponent, { className: "ShopProfileQuestionsModalComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-questions-modal.component.ts", lineNumber: 219 }); })();
 
 const _c0$3 = ["chartdiv"];
 function ShopProfileStatusCardComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
@@ -90960,37 +91010,54 @@ function ShopProfileStatusCardComponent_Conditional_25_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("currentView", ctx_r1.currentView());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("items", ctx_r1.currentGroupedQuestions());
+    i0.ɵɵproperty("viewMode", ctx_r1.viewMode())("items", ctx_r1.currentGroupedQuestions())("delayAnimation", ctx_r1.questionsModalOpen());
 } }
-function ShopProfileStatusCardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+function ShopProfileStatusCardComponent_Conditional_26_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20)(1, "button", 26);
-    i0.ɵɵlistener("click", function ShopProfileStatusCardComponent_Conditional_26_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.adminAnswerAction.emit(false)); });
+    i0.ɵɵelementStart(0, "button", 27);
+    i0.ɵɵlistener("click", function ShopProfileStatusCardComponent_Conditional_26_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.adminAnswerAction.emit(false)); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(2, "svg", 27);
-    i0.ɵɵelement(3, "path", 28);
+    i0.ɵɵelementStart(1, "svg", 28);
+    i0.ɵɵelement(2, "path", 29);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(4, "span");
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "button", 26);
-    i0.ɵɵlistener("click", function ShopProfileStatusCardComponent_Conditional_26_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.adminAnswerAction.emit(true)); });
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Un-answer ", ctx_r1.computedAnsweredCount(), " ?s");
+} }
+function ShopProfileStatusCardComponent_Conditional_26_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 27);
+    i0.ɵɵlistener("click", function ShopProfileStatusCardComponent_Conditional_26_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.adminAnswerAction.emit(true)); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(7, "svg", 27);
-    i0.ɵɵelement(8, "path", 29);
+    i0.ɵɵelementStart(1, "svg", 28);
+    i0.ɵɵelement(2, "path", 30);
     i0.ɵɵelementEnd();
     i0.ɵɵnamespaceHTML();
-    i0.ɵɵelementStart(9, "span");
-    i0.ɵɵtext(10);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1("Un-answer ", ctx_r1.answeredQuestions(), " ?s");
-    i0.ɵɵadvance(5);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1("Answer ", ctx_r1.unansweredQuestions(), " ?s");
 } }
+function ShopProfileStatusCardComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵconditionalCreate(1, ShopProfileStatusCardComponent_Conditional_26_Conditional_1_Template, 5, 1, "button", 26);
+    i0.ɵɵconditionalCreate(2, ShopProfileStatusCardComponent_Conditional_26_Conditional_2_Template, 5, 1, "button", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.computedAnsweredCount() > 0 ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.unansweredQuestions() > 0 ? 2 : -1);
+} }
 class ShopProfileStatusCardComponent {
     constructor() {
         this.viewMode = input(ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
@@ -91012,17 +91079,22 @@ class ShopProfileStatusCardComponent {
         this.selectedFocusAreaId = signal(null, ...(ngDevMode ? [{ debugName: "selectedFocusAreaId" }] : []));
         this.showAllQuestions = signal(false, ...(ngDevMode ? [{ debugName: "showAllQuestions" }] : []));
         this.startDirectAnswer = signal(false, ...(ngDevMode ? [{ debugName: "startDirectAnswer" }] : []));
+        this.computedAnsweredCount = computed(() => {
+            const questions = this.questions();
+            const answers = this.profileAnswers();
+            return questions.filter(q => answers.some(a => a.profileQuestionId === q.id)).length;
+        }, ...(ngDevMode ? [{ debugName: "computedAnsweredCount" }] : []));
         this.completionPercentage = computed(() => {
             const total = this.totalQuestions();
             if (total === 0)
                 return 0;
-            return (this.answeredQuestions() / total) * 100;
+            return (this.computedAnsweredCount() / total) * 100;
         }, ...(ngDevMode ? [{ debugName: "completionPercentage" }] : []));
         this.notStartedPercentage = computed(() => {
             return 100 - this.completionPercentage();
         }, ...(ngDevMode ? [{ debugName: "notStartedPercentage" }] : []));
         this.shouldShowFullIntro = computed(() => {
-            return this.answeredQuestions() === 0;
+            return this.computedAnsweredCount() === 0;
         }, ...(ngDevMode ? [{ debugName: "shouldShowFullIntro" }] : []));
         this.hasQuestions = computed(() => {
             return this.questions().length > 0;
@@ -91031,7 +91103,7 @@ class ShopProfileStatusCardComponent {
             return EMAIL_IS_EMG_APPS(this.currentUser()?.email);
         }, ...(ngDevMode ? [{ debugName: "showAdminButtons" }] : []));
         this.unansweredQuestions = computed(() => {
-            return this.totalQuestions() - this.answeredQuestions();
+            return this.totalQuestions() - this.computedAnsweredCount();
         }, ...(ngDevMode ? [{ debugName: "unansweredQuestions" }] : []));
         this.questionsByCategory = computed(() => {
             const questions = this.questions();
@@ -91103,6 +91175,32 @@ class ShopProfileStatusCardComponent {
                 ? this.questionsByCategory()
                 : this.questionsByFocusArea();
         }, ...(ngDevMode ? [{ debugName: "currentGroupedQuestions" }] : []));
+        effect(() => {
+            const completionPct = this.completionPercentage();
+            const notStartedPct = this.notStartedPercentage();
+            this.updateChartData(completionPct, notStartedPct);
+        });
+    }
+    updateChartData(completionPct, notStartedPct) {
+        if (!this.chartSeries || !this.centerLabel)
+            return;
+        const pieData = [];
+        if (completionPct > 0) {
+            pieData.push({
+                category: 'Complete',
+                value: completionPct,
+                sliceSettings: { fill: color(0x0BA5EC) }
+            });
+        }
+        if (notStartedPct > 0) {
+            pieData.push({
+                category: 'Not started',
+                value: notStartedPct,
+                sliceSettings: { fill: color(0xF04438) }
+            });
+        }
+        this.chartSeries.data.setAll(pieData);
+        this.centerLabel.set('text', `${completionPct.toFixed(1)}%\nComplete`);
     }
     handleViewChange(view) {
         this.currentView.set(view);
@@ -91165,6 +91263,8 @@ class ShopProfileStatusCardComponent {
             this.root.dispose();
         }
         this.chartElement = undefined;
+        this.chartSeries = undefined;
+        this.centerLabel = undefined;
         this.root = undefined;
     }
     createChart() {
@@ -91178,33 +91278,33 @@ class ShopProfileStatusCardComponent {
             radius: percent(95),
             innerRadius: percent(60)
         }));
-        const series = this.chartElement.series.push(PieSeries.new(this.root, {
+        this.chartSeries = this.chartElement.series.push(PieSeries.new(this.root, {
             valueField: 'value',
             categoryField: 'category',
             alignLabels: false
         }));
-        series.slices.template.setAll({
+        this.chartSeries.slices.template.setAll({
             templateField: 'sliceSettings',
             strokeOpacity: 0
         });
-        series.labels.template.setAll({
+        this.chartSeries.labels.template.setAll({
             textType: 'circular',
             fill: color(0xFFFFFF),
             text: '{category}',
             fontSize: 12
         });
-        series.ticks.template.set('forceHidden', true);
-        series.states.create('hidden', {
+        this.chartSeries.ticks.template.set('forceHidden', true);
+        this.chartSeries.states.create('hidden', {
             startAngle: 180,
             endAngle: 180
         });
-        series.slices.template.states.create('hover', {
+        this.chartSeries.slices.template.states.create('hover', {
             scale: 1
         });
-        series.slices.template.states.create('active', {
+        this.chartSeries.slices.template.states.create('active', {
             shiftRadius: 0
         });
-        series.labels.template.adapters.add('visible', function (visible, radialLabel) {
+        this.chartSeries.labels.template.adapters.add('visible', function (visible, radialLabel) {
             if (radialLabel.dataItem && radialLabel.dataItem.dataContext) {
                 const pieData = radialLabel.dataItem.dataContext;
                 if (pieData.value < 8) {
@@ -91213,30 +91313,9 @@ class ShopProfileStatusCardComponent {
             }
             return visible;
         });
-        const pieData = [];
         const completionPct = this.completionPercentage();
-        const notStartedPct = this.notStartedPercentage();
-        if (completionPct > 0) {
-            pieData.push({
-                category: 'Complete',
-                value: completionPct,
-                sliceSettings: {
-                    fill: color(0x0BA5EC)
-                }
-            });
-        }
-        if (notStartedPct > 0) {
-            pieData.push({
-                category: 'Not started',
-                value: notStartedPct,
-                sliceSettings: {
-                    fill: color(0xF04438)
-                }
-            });
-        }
-        series.data.setAll(pieData);
         const percentageText = `${completionPct.toFixed(1)}%\nComplete`;
-        this.chartElement.children.unshift(Label.new(this.root, {
+        this.centerLabel = Label.new(this.root, {
             text: percentageText,
             fontSize: 16,
             fill: color(0xFFFFFF),
@@ -91248,9 +91327,11 @@ class ShopProfileStatusCardComponent {
             centerY: percent(50),
             paddingTop: 0,
             paddingBottom: 0
-        }));
+        });
+        this.chartElement.children.unshift(this.centerLabel);
+        this.updateChartData(completionPct, this.notStartedPercentage());
         this.chartElement.appear(1000, 100);
-        series.appear();
+        this.chartSeries.appear();
     }
     containerClasses() {
         return this.viewMode() === ViewModeEnum.DARK
@@ -91308,7 +91389,7 @@ class ShopProfileStatusCardComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chartDiv = _t.first);
-        } }, inputs: { viewMode: [1, "viewMode"], totalQuestions: [1, "totalQuestions"], answeredQuestions: [1, "answeredQuestions"], questions: [1, "questions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"], startAnsweringAll: [1, "startAnsweringAll"], currentUser: [1, "currentUser"] }, outputs: { startCategoryQuestions: "startCategoryQuestions", questionAnswerRequested: "questionAnswerRequested", answerSave: "answerSave", adminAnswerAction: "adminAnswerAction" }, decls: 28, vars: 23, consts: [["chartdiv", ""], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "flex", "flex-wrap", "items-center", "gap-6", "mb-8"], [1, "rounded-xl", "p-6", "flex-1", "min-w-[300px]", 3, "ngClass"], [1, "flex", "items-start", "gap-4"], [1, "flex-shrink-0", "p-2", "rounded-lg", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex-1"], [1, "leading-relaxed", 3, "ngClass"], [1, "flex-shrink-0"], [1, "w-[250px]", "h-[250px]"], [1, "flex", "items-center", "justify-center", "gap-4", "mt-6", "pt-6", "border-t", "border-slate-700/50"], [3, "close", "questionAnswerClick", "answerSave", "isOpen", "questions", "profileAnswers", "profileAnswerHistories", "users", "selectedCategoryId", "selectedFocusAreaId", "showAllQuestions", "startDirectAnswer", "viewMode"], [1, "font-semibold", "text-lg", "mb-3", 3, "ngClass"], [1, "flex", "justify-center", "mb-6"], [3, "viewChanged", "viewMode", "currentView"], [3, "itemClick", "viewMode", "items"], ["type", "button", 1, "flex", "items-center", "gap-2", "px-4", "py-2", "rounded-lg", "border-2", "border-violet-500/70", "bg-transparent", "text-violet-400", "hover:bg-violet-500/10", "transition-colors", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"]], template: function ShopProfileStatusCardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], totalQuestions: [1, "totalQuestions"], answeredQuestions: [1, "answeredQuestions"], questions: [1, "questions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], users: [1, "users"], startAnsweringAll: [1, "startAnsweringAll"], currentUser: [1, "currentUser"] }, outputs: { startCategoryQuestions: "startCategoryQuestions", questionAnswerRequested: "questionAnswerRequested", answerSave: "answerSave", adminAnswerAction: "adminAnswerAction" }, decls: 28, vars: 23, consts: [["chartdiv", ""], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [1, "px-6", "py-5", "border-b", 3, "ngClass"], [1, "flex", "items-center", "justify-between"], [1, "flex", "items-center", "gap-3"], [1, "p-2.5", "rounded-lg", 3, "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-5", "h-5"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "text-sm", "mt-0.5", 3, "ngClass"], [1, "p-6", 3, "ngClass"], [1, "flex", "flex-wrap", "items-center", "gap-6", "mb-8"], [1, "rounded-xl", "p-6", "flex-1", "min-w-[300px]", 3, "ngClass"], [1, "flex", "items-start", "gap-4"], [1, "flex-shrink-0", "p-2", "rounded-lg", 3, "ngClass"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "flex-1"], [1, "leading-relaxed", 3, "ngClass"], [1, "flex-shrink-0"], [1, "w-[250px]", "h-[250px]"], [1, "flex", "items-center", "justify-center", "gap-4", "mt-6", "pt-6", "border-t", "border-slate-700/50"], [3, "close", "questionAnswerClick", "answerSave", "isOpen", "questions", "profileAnswers", "profileAnswerHistories", "users", "selectedCategoryId", "selectedFocusAreaId", "showAllQuestions", "startDirectAnswer", "viewMode"], [1, "font-semibold", "text-lg", "mb-3", 3, "ngClass"], [1, "flex", "justify-center", "mb-6"], [3, "viewChanged", "viewMode", "currentView"], [3, "itemClick", "viewMode", "items", "delayAnimation"], ["type", "button", 1, "flex", "items-center", "gap-2", "px-4", "py-2", "rounded-lg", "border-2", "border-violet-500/70", "bg-transparent", "text-violet-400", "hover:bg-violet-500/10", "transition-colors"], ["type", "button", 1, "flex", "items-center", "gap-2", "px-4", "py-2", "rounded-lg", "border-2", "border-violet-500/70", "bg-transparent", "text-violet-400", "hover:bg-violet-500/10", "transition-colors", 3, "click"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M6 18L18 6M6 6l12 12"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M5 13l4 4L19 7"]], template: function ShopProfileStatusCardComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "div", 4)(4, "div", 5);
             i0.ɵɵnamespaceSVG();
@@ -91334,8 +91415,8 @@ class ShopProfileStatusCardComponent {
             i0.ɵɵelementStart(22, "div", 18);
             i0.ɵɵelement(23, "div", 19, 0);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(25, ShopProfileStatusCardComponent_Conditional_25_Template, 3, 4);
-            i0.ɵɵconditionalCreate(26, ShopProfileStatusCardComponent_Conditional_26_Template, 11, 2, "div", 20);
+            i0.ɵɵconditionalCreate(25, ShopProfileStatusCardComponent_Conditional_25_Template, 3, 5);
+            i0.ɵɵconditionalCreate(26, ShopProfileStatusCardComponent_Conditional_26_Template, 3, 2, "div", 20);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(27, "symphiq-shop-profile-questions-modal", 21);
             i0.ɵɵlistener("close", function ShopProfileStatusCardComponent_Template_symphiq_shop_profile_questions_modal_close_27_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onQuestionsModalClose()); })("questionAnswerClick", function ShopProfileStatusCardComponent_Template_symphiq_shop_profile_questions_modal_questionAnswerClick_27_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onQuestionAnswerClick($event)); })("answerSave", function ShopProfileStatusCardComponent_Template_symphiq_shop_profile_questions_modal_answerSave_27_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onAnswerSave($event)); });
@@ -91375,129 +91456,134 @@ class ShopProfileStatusCardComponent {
                 standalone: true,
                 imports: [CommonModule, ShopProfileCategoryListComponent, ShopProfileViewToggleComponent, ShopProfileQuestionsModalComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-3">
-            <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
-              </svg>
-            </div>
-            <div>
-              <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
-                Shop Profile
-              </h2>
-              <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
-                {{ answeredQuestions() }} of {{ totalQuestions() }} questions answered
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div [ngClass]="contentClasses()" class="p-6">
-        <!-- Chart and Explanatory Text Side by Side -->
-        <div class="flex flex-wrap items-center gap-6 mb-8">
-          <!-- Explanatory Text -->
-          <div [ngClass]="getIntroductionContainerClasses()" class="rounded-xl p-6 flex-1 min-w-[300px]">
-          <div class="flex items-start gap-4">
-            <div [ngClass]="getIntroIconClasses()" class="flex-shrink-0 p-2 rounded-lg">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-              </svg>
-            </div>
-            <div class="flex-1">
-              @if (shouldShowFullIntro()) {
-                <h3 [ngClass]="getIntroTitleClasses()" class="font-semibold text-lg mb-3">
-                  Why Shop Profile Questions Matter
-                </h3>
-                <p [ngClass]="getIntroTextClasses()" class="leading-relaxed">
-                  Shop Profile questions are a <strong>critical part of your onboarding journey</strong>. These questions provide crucial qualitative data to the Symphiq engine, enabling personalized analysis and strategic recommendations tailored to your business. Your insights help us understand your unique operations, challenges, and goals.
-                </p>
-              } @else {
-                <p [ngClass]="getIntroTextClasses()" class="leading-relaxed">
-                  <strong>Great progress!</strong> Continue answering questions to unlock deeper insights and more accurate recommendations. Each answer helps Symphiq better understand your business context.
-                </p>
-              }
-            </div>
-          </div>
-        </div>
-
-          <!-- Donut Chart -->
-          <div class="flex-shrink-0">
-            <div #chartdiv class="w-[250px] h-[250px]"></div>
-          </div>
-        </div>
-
-        <!-- View Toggle -->
-        @if (hasQuestions()) {
-          <div class="flex justify-center mb-6">
-            <symphiq-shop-profile-view-toggle
-              [viewMode]="viewMode()"
-              [currentView]="currentView()"
-              (viewChanged)="handleViewChange($event)"
-            />
-          </div>
-
-          <!-- Category/Focus Area List -->
-          <symphiq-shop-profile-category-list
-            [viewMode]="viewMode()"
-            [items]="currentGroupedQuestions()"
-            (itemClick)="handleItemClick($event)"
-          />
-        }
-
-        @if (showAdminButtons()) {
-          <div class="flex items-center justify-center gap-4 mt-6 pt-6 border-t border-slate-700/50">
-            <button
-              type="button"
-              (click)="adminAnswerAction.emit(false)"
-              class="flex items-center gap-2 px-4 py-2 rounded-lg border-2 border-violet-500/70 bg-transparent text-violet-400 hover:bg-violet-500/10 transition-colors"
-            >
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-              </svg>
-              <span>Un-answer {{ answeredQuestions() }} ?s</span>
-            </button>
-            <button
-              type="button"
-              (click)="adminAnswerAction.emit(true)"
-              class="flex items-center gap-2 px-4 py-2 rounded-lg border-2 border-violet-500/70 bg-transparent text-violet-400 hover:bg-violet-500/10 transition-colors"
-            >
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-              </svg>
-              <span>Answer {{ unansweredQuestions() }} ?s</span>
-            </button>
-          </div>
-        }
-      </div>
-    </div>
-
-    <!-- Questions Modal -->
-    <symphiq-shop-profile-questions-modal
-      [isOpen]="questionsModalOpen()"
-      [questions]="questions()"
-      [profileAnswers]="profileAnswers()"
-      [profileAnswerHistories]="profileAnswerHistories()"
-      [users]="users()"
-      [selectedCategoryId]="selectedCategoryId()"
-      [selectedFocusAreaId]="selectedFocusAreaId()"
-      [showAllQuestions]="showAllQuestions()"
-      [startDirectAnswer]="startDirectAnswer()"
-      [viewMode]="viewMode()"
-      (close)="onQuestionsModalClose()"
-      (questionAnswerClick)="onQuestionAnswerClick($event)"
-      (answerSave)="onAnswerSave($event)" />
+                template: `
+    <div [ngClass]="containerClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+      <div [ngClass]="headerClasses()" class="px-6 py-5 border-b">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <div [ngClass]="iconContainerClasses()" class="p-2.5 rounded-lg">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
+              </svg>
+            </div>
+            <div>
+              <h2 [ngClass]="titleClasses()" class="text-xl font-bold">
+                Shop Profile
+              </h2>
+              <p [ngClass]="subtitleClasses()" class="text-sm mt-0.5">
+                {{ answeredQuestions() }} of {{ totalQuestions() }} questions answered
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div [ngClass]="contentClasses()" class="p-6">
+        <!-- Chart and Explanatory Text Side by Side -->
+        <div class="flex flex-wrap items-center gap-6 mb-8">
+          <!-- Explanatory Text -->
+          <div [ngClass]="getIntroductionContainerClasses()" class="rounded-xl p-6 flex-1 min-w-[300px]">
+          <div class="flex items-start gap-4">
+            <div [ngClass]="getIntroIconClasses()" class="flex-shrink-0 p-2 rounded-lg">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+            </div>
+            <div class="flex-1">
+              @if (shouldShowFullIntro()) {
+                <h3 [ngClass]="getIntroTitleClasses()" class="font-semibold text-lg mb-3">
+                  Why Shop Profile Questions Matter
+                </h3>
+                <p [ngClass]="getIntroTextClasses()" class="leading-relaxed">
+                  Shop Profile questions are a <strong>critical part of your onboarding journey</strong>. These questions provide crucial qualitative data to the Symphiq engine, enabling personalized analysis and strategic recommendations tailored to your business. Your insights help us understand your unique operations, challenges, and goals.
+                </p>
+              } @else {
+                <p [ngClass]="getIntroTextClasses()" class="leading-relaxed">
+                  <strong>Great progress!</strong> Continue answering questions to unlock deeper insights and more accurate recommendations. Each answer helps Symphiq better understand your business context.
+                </p>
+              }
+            </div>
+          </div>
+        </div>
+
+          <!-- Donut Chart -->
+          <div class="flex-shrink-0">
+            <div #chartdiv class="w-[250px] h-[250px]"></div>
+          </div>
+        </div>
+
+        <!-- View Toggle -->
+        @if (hasQuestions()) {
+          <div class="flex justify-center mb-6">
+            <symphiq-shop-profile-view-toggle
+              [viewMode]="viewMode()"
+              [currentView]="currentView()"
+              (viewChanged)="handleViewChange($event)"
+            />
+          </div>
+
+          <!-- Category/Focus Area List -->
+          <symphiq-shop-profile-category-list
+            [viewMode]="viewMode()"
+            [items]="currentGroupedQuestions()"
+            [delayAnimation]="questionsModalOpen()"
+            (itemClick)="handleItemClick($event)"
+          />
+        }
+
+        @if (showAdminButtons()) {
+          <div class="flex items-center justify-center gap-4 mt-6 pt-6 border-t border-slate-700/50">
+            @if (computedAnsweredCount() > 0) {
+              <button
+                type="button"
+                (click)="adminAnswerAction.emit(false)"
+                class="flex items-center gap-2 px-4 py-2 rounded-lg border-2 border-violet-500/70 bg-transparent text-violet-400 hover:bg-violet-500/10 transition-colors"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+                <span>Un-answer {{ computedAnsweredCount() }} ?s</span>
+              </button>
+            }
+            @if (unansweredQuestions() > 0) {
+              <button
+                type="button"
+                (click)="adminAnswerAction.emit(true)"
+                class="flex items-center gap-2 px-4 py-2 rounded-lg border-2 border-violet-500/70 bg-transparent text-violet-400 hover:bg-violet-500/10 transition-colors"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                </svg>
+                <span>Answer {{ unansweredQuestions() }} ?s</span>
+              </button>
+            }
+          </div>
+        }
+      </div>
+    </div>
+
+    <!-- Questions Modal -->
+    <symphiq-shop-profile-questions-modal
+      [isOpen]="questionsModalOpen()"
+      [questions]="questions()"
+      [profileAnswers]="profileAnswers()"
+      [profileAnswerHistories]="profileAnswerHistories()"
+      [users]="users()"
+      [selectedCategoryId]="selectedCategoryId()"
+      [selectedFocusAreaId]="selectedFocusAreaId()"
+      [showAllQuestions]="showAllQuestions()"
+      [startDirectAnswer]="startDirectAnswer()"
+      [viewMode]="viewMode()"
+      (close)="onQuestionsModalClose()"
+      (questionAnswerClick)="onQuestionAnswerClick($event)"
+      (answerSave)="onAnswerSave($event)" />
   `
             }]
-    }], null, { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], totalQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalQuestions", required: false }] }], answeredQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "answeredQuestions", required: false }] }], questions: [{ type: i0.Input, args: [{ isSignal: true, alias: "questions", required: false }] }], profileAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswers", required: false }] }], profileAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswerHistories", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], startAnsweringAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAnsweringAll", required: false }] }], currentUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUser", required: false }] }], startCategoryQuestions: [{ type: i0.Output, args: ["startCategoryQuestions"] }], questionAnswerRequested: [{ type: i0.Output, args: ["questionAnswerRequested"] }], answerSave: [{ type: i0.Output, args: ["answerSave"] }], adminAnswerAction: [{ type: i0.Output, args: ["adminAnswerAction"] }], chartDiv: [{
+    }], () => [], { viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], totalQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalQuestions", required: false }] }], answeredQuestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "answeredQuestions", required: false }] }], questions: [{ type: i0.Input, args: [{ isSignal: true, alias: "questions", required: false }] }], profileAnswers: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswers", required: false }] }], profileAnswerHistories: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileAnswerHistories", required: false }] }], users: [{ type: i0.Input, args: [{ isSignal: true, alias: "users", required: false }] }], startAnsweringAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAnsweringAll", required: false }] }], currentUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUser", required: false }] }], startCategoryQuestions: [{ type: i0.Output, args: ["startCategoryQuestions"] }], questionAnswerRequested: [{ type: i0.Output, args: ["questionAnswerRequested"] }], answerSave: [{ type: i0.Output, args: ["answerSave"] }], adminAnswerAction: [{ type: i0.Output, args: ["adminAnswerAction"] }], chartDiv: [{
             type: ViewChild,
             args: ['chartdiv', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileStatusCardComponent, { className: "ShopProfileStatusCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-status-card.component.ts", lineNumber: 153 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ShopProfileStatusCardComponent, { className: "ShopProfileStatusCardComponent", filePath: "lib/components/profile-analysis-dashboard/cards/shop-profile-status-card.component.ts", lineNumber: 159 }); })();
 
 function ShopProfileStickyFooterComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 5);
@@ -93043,11 +93129,16 @@ class SymphiqProfileAnalysisDashboardComponent {
             const profileShop = this.profileShop();
             return profileShop && profileShop.selfContentStatus === AiDynamicContentStatusEnum.GENERATED;
         }, ...(ngDevMode ? [{ debugName: "shouldShowShopProfileStatus" }] : []));
+        this.shouldShowHeaderControls = computed(() => {
+            return !!this.profileAnalysis() && this.profileShop()?.selfContentStatus === AiDynamicContentStatusEnum.GENERATED;
+        }, ...(ngDevMode ? [{ debugName: "shouldShowHeaderControls" }] : []));
         this.totalShopQuestions = computed(() => {
             return this.profileShopQuestions()?.length || 0;
         }, ...(ngDevMode ? [{ debugName: "totalShopQuestions" }] : []));
         this.answeredShopQuestions = computed(() => {
-            return this.profileShopQuestions()?.filter(q => q.answered === true).length || 0;
+            const questions = this.profileShopQuestions() || [];
+            const answers = this.profileAnswers() || [];
+            return questions.filter(q => answers.some(a => a.profileQuestionId === q.id)).length;
         }, ...(ngDevMode ? [{ debugName: "answeredShopQuestions" }] : []));
         this.shopQuestionsCompletionPercentage = computed(() => {
             const total = this.totalShopQuestions();
@@ -93874,7 +93965,7 @@ class SymphiqProfileAnalysisDashboardComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.shopProfileStatusCard = _t.first);
         } }, hostBindings: function SymphiqProfileAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqProfileAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onWindowScroll($event); }, i0.ɵɵresolveWindow);
-        } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], analysisType: [1, "analysisType"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileShop: [1, "profileShop"], profileShopQuestions: [1, "profileShopQuestions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], itemStatusProfileShop: [1, "itemStatusProfileShop"], itemStatusProfileAnalysis: [1, "itemStatusProfileAnalysis"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], currentUser: [1, "currentUser"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", checkoutPlanClick: "checkoutPlanClick", answerShopProfileQuestions: "answerShopProfileQuestions", continueShopProfileQuestions: "continueShopProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave", shopProfileAdminAnswerAction: "shopProfileAdminAnswerAction" }, features: [i0.ɵɵNgOnChangesFeature], decls: 30, vars: 51, consts: [["shopProfileStatusCard", ""], [1, "min-h-screen", "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "viewMode", "totalQuestions", "answeredQuestions"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "startCategoryQuestions", "answerSave", "adminAnswerAction", "viewMode", "totalQuestions", "answeredQuestions", "questions", "profileAnswers", "profileAnswerHistories", "users", "currentUser"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [3, "goals", "viewMode"], ["title", "Generating Your Shop Profile", "subtitle", "We're analyzing your data to create shop specific questions and answers. They will appear when ready.", 3, "itemStatus", "viewMode"], [3, "viewMoreClick", "goals", "viewMode"], [1, "mb-32"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [3, "periodUnitChanged", "planSelected", "editCurrency", "checkout", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [3, "continueClick", "viewMode", "totalQuestions", "answeredQuestions"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "flex-1", "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "flex", "items-center", "justify-center", "gap-3", "shadow-2xl", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: [1, "viewMode"], requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: [1, "embedded"], profileAnalysis: [1, "profileAnalysis"], profile: [1, "profile"], funnelAnalysis: [1, "funnelAnalysis"], analysisType: [1, "analysisType"], focusAreaDetails: [1, "focusAreaDetails"], account: [1, "account"], profileShop: [1, "profileShop"], profileShopQuestions: [1, "profileShopQuestions"], profileAnswers: [1, "profileAnswers"], profileAnswerHistories: [1, "profileAnswerHistories"], itemStatusProfileShop: [1, "itemStatusProfileShop"], itemStatusProfileAnalysis: [1, "itemStatusProfileAnalysis"], planCardInfos: [1, "planCardInfos"], isOnboarded: [1, "isOnboarded"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], users: [1, "users"], isLoading: [1, "isLoading"], forDemo: [1, "forDemo"], currentUser: [1, "currentUser"], maxAccessibleStepId: [1, "maxAccessibleStepId"] }, outputs: { stepClick: "stepClick", nextStepClick: "nextStepClick", currencySelectionClick: "currencySelectionClick", editCurrencyClick: "editCurrencyClick", periodUnitChanged: "periodUnitChanged", planSelected: "planSelected", checkoutPlanClick: "checkoutPlanClick", answerShopProfileQuestions: "answerShopProfileQuestions", continueShopProfileQuestions: "continueShopProfileQuestions", profileQuestionAnswerSave: "profileQuestionAnswerSave", shopProfileAdminAnswerAction: "shopProfileAdminAnswerAction" }, features: [i0.ɵɵNgOnChangesFeature], decls: 30, vars: 52, consts: [["shopProfileStatusCard", ""], [1, "min-h-screen", "relative", 3, "ngClass"], [1, "animated-bubbles", 2, "position", "fixed", "top", "0", "left", "0", "right", "0", "bottom", "0", "width", "100vw", "height", "100vh", "z-index", "1", "pointer-events", "none"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate", "showControls"], [3, "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [1, "relative", "z-10", "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-12", "space-y-12"], [1, "mb-12"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState", "businessProfile"], [3, "goal", "viewMode"], [3, "objective", "goalTitle", "viewMode"], [3, "strategy", "objectiveTitle", "goalTitle", "viewMode", "allMetrics", "allCharts", "allInsights", "allBusinessInsights", "currentModalState"], [3, "category", "viewMode", "scrollToSection"], [3, "strength", "viewMode", "allFunnelStrengths", "currentModalState"], [3, "gap", "viewMode", "allGoals", "allWeaknesses", "currentModalState"], [3, "opportunity", "viewMode", "allStrengths", "currentModalState"], [3, "isLightMode", "viewMode", "allMetrics", "allInsights", "allCharts"], [3, "isLightMode"], [3, "viewMode", "isEnabled", "isLoading"], [3, "viewMode", "totalQuestions", "answeredQuestions"], [1, "fixed", "bottom-0", "left-0", "right-0", "z-50", "border-t", "backdrop-blur-lg", 3, "ngClass"], [3, "nextStepClick", "stepClick", "viewMode", "currentStepId", "showNextStepAction", "forDemo", "maxAccessibleStepId"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "startCategoryQuestions", "answerSave", "adminAnswerAction", "viewMode", "totalQuestions", "answeredQuestions", "questions", "profileAnswers", "profileAnswerHistories", "users", "currentUser"], [1, "rounded-2xl", "border", "shadow-lg", "overflow-hidden", 3, "ngClass"], [3, "goals", "viewMode"], ["title", "Generating Your Shop Profile", "subtitle", "We're analyzing your data to create shop specific questions and answers. They will appear when ready.", 3, "itemStatus", "viewMode"], [3, "viewMoreClick", "goals", "viewMode"], [1, "mb-32"], [3, "viewMode", "selectedCurrency"], [3, "currencySelected", "viewMode", "isLoading", "initialCurrency"], [3, "viewMode"], [3, "periodUnitChanged", "planSelected", "editCurrency", "checkout", "viewMode", "selectedCurrency", "planCardInfos", "isLoading", "selectedPeriodUnit"], [3, "editCurrency", "viewMode", "selectedCurrency"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["id", "section-executive-summary", 1, "space-y-6", "scroll-mt-24"], [3, "viewMode", "summary", "allGoals"], [3, "viewMode", "summary", "metricName", "allGoals"], [1, "space-y-8"], [1, "rounded-2xl", "p-8", "shadow-xl", 3, "ngClass"], [1, "space-y-6"], [1, "flex", "items-start", "justify-between", "gap-4"], [1, "flex-1"], [1, "text-2xl", "font-bold", "mb-3", 3, "ngClass"], [1, "text-lg", "leading-relaxed", 3, "ngClass"], [3, "grade", "gradeRationale", "viewMode"], [1, "rounded-xl", "p-6", 3, "ngClass"], [1, "grid", "grid-cols-1", "md:grid-cols-3", "gap-4"], ["type", "button", 1, "p-4", "rounded-xl", "text-left", "transition-all", "duration-200", "hover:scale-[1.02]", "active:scale-[0.98]", "group", "cursor-pointer", 3, "click", "ngClass"], [1, "text-xs", "font-semibold", "uppercase", "mb-1", 3, "ngClass"], [1, "text-3xl", "font-bold", "mb-2", 3, "ngClass"], [1, "flex", "items-center", "gap-1.5", "text-xs", "font-medium"], [3, "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-x-1", 3, "icon", "ngClass"], ["size", "w-4 h-4", 1, "transition-transform", "group-hover:translate-y-1", "animate-bounce", 3, "icon", "ngClass"], ["id", "quick-wins-section", 1, "space-y-4", "scroll-mt-24"], [1, "text-lg", "font-semibold", "mb-3", 3, "ngClass"], [1, "relative"], [1, "mb-6", "lg:float-left", "lg:mr-6", "lg:mb-4", "lg:max-w-[66%]"], [1, "text-sm", "leading-relaxed", "whitespace-pre-line", 3, "ngClass"], [1, "clear-both"], [3, "visual", "viewMode"], [1, "text-xl", "font-bold", 3, "ngClass"], [1, "grid", "grid-cols-1", "lg:grid-cols-2", "gap-6"], [1, "rounded-xl", "p-6", "transition-all", "duration-300", 3, "ngClass"], [1, "space-y-4"], [1, "flex", "items-start", "gap-3"], [1, "flex-shrink-0", "w-8", "h-8", "rounded-full", "flex", "items-center", "justify-center", "text-sm", "font-bold", 3, "ngClass"], [1, "font-semibold", "leading-tight", "flex-1", 3, "ngClass"], [1, "flex", "flex-wrap", "gap-2"], [1, "px-3", "py-1", "rounded-full", "text-xs", "font-semibold", 3, "ngClass"], [1, "flex", "items-center", "gap-2", "text-sm", 3, "ngClass"], [1, "space-y-2"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-4", "h-4"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"], [1, "text-xs", "font-semibold", "uppercase", "tracking-wider", 3, "ngClass"], [3, "relatedGoalIds", "allGoals", "viewMode"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "allGoals"], [3, "topPrioritiesClick", "priorityDetailClick", "viewMode", "summary", "metricName", "allGoals"], [3, "viewMode", "sectionIcon"], [1, "rounded-xl", "p-8", "scroll-mt-24", 3, "id", "ngClass"], [1, "flex", "items-start", "gap-3", "mb-6"], [1, "flex-shrink-0", "w-12", "h-12", "rounded-xl", "flex", "items-center", "justify-center", 3, "ngClass"], [1, "text-2xl", "font-bold", 3, "ngClass"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start", 3, "lg:flex-row-reverse"], [3, "section", "executiveSummary", "viewMode", "sectionIndex", "allGoals", "allMetrics", "allCharts", "allInsights", "businessProfile"], ["size", "w-6 h-6", 3, "icon"], [1, "mb-6", "flex", "flex-col", "lg:flex-row", "gap-6", "items-start"], [1, "w-full", "lg:w-2/3"], [1, "w-full", 3, "lg:w-1/3", "lg:w-full"], [1, "w-full"], [3, "continueClick", "viewMode", "isEnabled", "isLoading"], [3, "continueClick", "viewMode", "totalQuestions", "answeredQuestions"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-4"], [1, "flex", "items-center", "gap-4"], [1, "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "cursor-pointer", 3, "click", "ngClass"], [1, "flex-1", "px-6", "py-4", "rounded-xl", "font-semibold", "text-lg", "transition-all", "duration-300", "flex", "items-center", "justify-center", "gap-3", "shadow-2xl", 3, "click", "disabled", "ngClass"], ["fill", "none", "stroke", "currentColor", "viewBox", "0 0 24 24", 1, "w-6", "h-6", "transition-transform", "duration-200"], ["stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "d", "M13 7l5 5m0 0l-5 5m5-5H6"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵelement(1, "div", 2);
             i0.ɵɵelementStart(2, "div");
@@ -93915,7 +94006,6 @@ class SymphiqProfileAnalysisDashboardComponent {
         } if (rf & 2) {
             let tmp_5_0;
             let tmp_12_0;
-            let tmp_30_0;
             let tmp_31_0;
             let tmp_32_0;
             let tmp_33_0;
@@ -93923,6 +94013,7 @@ class SymphiqProfileAnalysisDashboardComponent {
             let tmp_35_0;
             let tmp_36_0;
             let tmp_37_0;
+            let tmp_38_0;
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
             i0.ɵɵadvance();
             i0.ɵɵclassProp("light-mode", ctx.isLightMode());
@@ -93932,7 +94023,7 @@ class SymphiqProfileAnalysisDashboardComponent {
             i0.ɵɵstyleProp("width", ctx.scrollProgress(), "%");
             i0.ɵɵproperty("ngClass", ctx.isLightMode() ? "bg-gradient-to-r from-blue-500 to-purple-500" : "bg-gradient-to-r from-blue-400 to-purple-400");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("title", ((tmp_5_0 = ctx.profileAnalysis()) == null ? null : tmp_5_0.profileAnalysisStructured == null ? null : tmp_5_0.profileAnalysisStructured.businessName) || "Profile Analysis")("subtitle", ctx.getAnalysisSubtitle())("currentSection", ctx.getAnalysisSubtitle())("viewMode", ctx.viewMode())("viewModeLabel", ctx.displayModeLabel())("isLoading", ctx.isLoading())("requestedByUser", ctx.requestedByUser())("createdDate", (tmp_12_0 = ctx.profileAnalysis()) == null ? null : tmp_12_0.selfContentCompletedDate);
+            i0.ɵɵproperty("title", ((tmp_5_0 = ctx.profileAnalysis()) == null ? null : tmp_5_0.profileAnalysisStructured == null ? null : tmp_5_0.profileAnalysisStructured.businessName) || "Profile Analysis")("subtitle", ctx.getAnalysisSubtitle())("currentSection", ctx.getAnalysisSubtitle())("viewMode", ctx.viewMode())("viewModeLabel", ctx.displayModeLabel())("isLoading", ctx.isLoading())("requestedByUser", ctx.requestedByUser())("createdDate", (tmp_12_0 = ctx.profileAnalysis()) == null ? null : tmp_12_0.selfContentCompletedDate)("showControls", ctx.shouldShowHeaderControls());
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isSimplifiedView() && !ctx.isOnboarded() ? 6 : -1);
             i0.ɵɵadvance();
@@ -93954,21 +94045,21 @@ class SymphiqProfileAnalysisDashboardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("isLightMode", ctx.isLightMode())("allMetrics", ctx.allMetrics())("allInsights", ctx.allInsights())("allBusinessInsights", ctx.allBusinessInsights())("allCharts", ctx.allCharts());
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_30_0 = ctx.modalType() === "goal-detail" && ctx.getGoalDetailData()) ? 16 : -1, tmp_30_0);
+            i0.ɵɵconditional((tmp_31_0 = ctx.modalType() === "goal-detail" && ctx.getGoalDetailData()) ? 16 : -1, tmp_31_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_31_0 = ctx.modalType() === "goal-objectives" && ctx.getGoalDetailData()) ? 17 : -1, tmp_31_0);
+            i0.ɵɵconditional((tmp_32_0 = ctx.modalType() === "goal-objectives" && ctx.getGoalDetailData()) ? 17 : -1, tmp_32_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_32_0 = ctx.modalType() === "objective-strategies" && ctx.getObjectiveStrategiesData()) ? 18 : -1, tmp_32_0);
+            i0.ɵɵconditional((tmp_33_0 = ctx.modalType() === "objective-strategies" && ctx.getObjectiveStrategiesData()) ? 18 : -1, tmp_33_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_33_0 = ctx.modalType() === "strategy-recommendations" && ctx.getStrategyRecommendationsData()) ? 19 : -1, tmp_33_0);
+            i0.ɵɵconditional((tmp_34_0 = ctx.modalType() === "strategy-recommendations" && ctx.getStrategyRecommendationsData()) ? 19 : -1, tmp_34_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_34_0 = ctx.modalType() === "category-detail" && ctx.getCategoryDetailData()) ? 20 : -1, tmp_34_0);
+            i0.ɵɵconditional((tmp_35_0 = ctx.modalType() === "category-detail" && ctx.getCategoryDetailData()) ? 20 : -1, tmp_35_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_35_0 = ctx.modalType() === "strength-detail" && ctx.getStrengthDetailData()) ? 21 : -1, tmp_35_0);
+            i0.ɵɵconditional((tmp_36_0 = ctx.modalType() === "strength-detail" && ctx.getStrengthDetailData()) ? 21 : -1, tmp_36_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_36_0 = ctx.modalType() === "gap-detail" && ctx.getGapDetailData()) ? 22 : -1, tmp_36_0);
+            i0.ɵɵconditional((tmp_37_0 = ctx.modalType() === "gap-detail" && ctx.getGapDetailData()) ? 22 : -1, tmp_37_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_37_0 = ctx.modalType() === "opportunity-detail" && ctx.getOpportunityDetailData()) ? 23 : -1, tmp_37_0);
+            i0.ɵɵconditional((tmp_38_0 = ctx.modalType() === "opportunity-detail" && ctx.getOpportunityDetailData()) ? 23 : -1, tmp_38_0);
             i0.ɵɵadvance();
             i0.ɵɵproperty("isLightMode", ctx.isLightMode())("viewMode", ctx.viewMode())("allMetrics", ctx.allMetrics())("allInsights", ctx.allInsights())("allCharts", ctx.allCharts());
             i0.ɵɵadvance();
@@ -93988,660 +94079,661 @@ class SymphiqProfileAnalysisDashboardComponent {
                 standalone: true,
                 imports: [CommonModule, DashboardHeaderComponent, SearchModalComponent, ViewModeSwitcherModalComponent, JourneyProgressIndicatorComponent, FloatingTocComponent, SectionNavigationComponent, GradeBadgeComponent, ShopWelcomeBannerComponent, FocusAreaWelcomeBannerComponent, MetricWelcomeBannerComponent, FocusAreaExecutiveSummaryComponent, MetricExecutiveSummaryComponent, NapkinVisualPlaceholderComponent, TooltipContainerComponent, ProfileSectionContentComponent, ProfileAnalysisModalComponent, ModalComponent, GoalCardComponent, GoalObjectivesModalContentComponent, ObjectiveStrategiesModalContentComponent, StrategyRecommendationsModalContentComponent, CategoryDetailModalContentComponent, StrengthDetailModalContentComponent, GapDetailModalContentComponent, OpportunityDetailModalContentComponent, BusinessAnalysisModalComponent, SectionDividerComponent, SymphiqIconComponent, RelatedGoalChipsComponent, StrategicGoalsTiledGridComponent, CollapsibleAnalysisSectionGroupComponent, BillingCurrencySelectorCardComponent, PlanSelectionPlaceholderCardComponent, PlanSelectionContainerComponent, SubscriptionValuePropositionCardComponent, StickySubscriptionContinueButtonComponent, ContentGenerationProgressComponent, ShopProfileStatusCardComponent, ShopProfileStickyFooterComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
-      <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>
-
-      <!-- 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>
-
-      <div class="relative z-[51]">
-        <!-- Dashboard Header -->
-        <symphiq-dashboard-header
-            [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
-            [subtitle]="getAnalysisSubtitle()"
-            [currentSection]="getAnalysisSubtitle()"
-            [viewMode]="viewMode()"
-            [viewModeLabel]="displayModeLabel()"
-            [isLoading]="isLoading()"
-            [requestedByUser]="requestedByUser()"
-            [createdDate]="profileAnalysis()?.selfContentCompletedDate"
-            (searchClick)="openSearch()"
-            (viewModeClick)="openViewModeSwitcher()"
-        />
-
-        <!-- Journey Progress Banner -->
-        @if (isSimplifiedView() && !isOnboarded()) {
-          <symphiq-journey-progress-indicator
-              [viewMode]="viewMode()"
-              [currentStepId]="currentStepId()"
-              [showNextStepAction]="shouldShowContinueButton()"
-              [forDemo]="forDemo()"
-              [maxAccessibleStepId]="maxAccessibleStepId()"
-              (nextStepClick)="nextStepClick.emit()"
-              (stepClick)="stepClick.emit($event)"
-          />
-        }
-
-        <!-- Main Content -->
-        <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12"
-              [class.pb-32]="shouldShowStickyButton() || shouldShowShopProfileStickyFooter()">
-
-          <!-- Welcome Banner (Simplified View Only) -->
-          @if (isSimplifiedView()) {
-            <div class="mb-12">
-              @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
-                <symphiq-shop-welcome-banner
-                    [viewMode]="viewMode()"
-                    [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
-                    [isOnboarded]="isOnboarded()"
-                />
-              }
-              @if (isFocusAreaAnalysis()) {
-                <symphiq-focus-area-welcome-banner
-                    [viewMode]="viewMode()"
-                    [focusAreaDomain]="focusAreaDomain()"
-                    [focusAreaName]="focusAreaName()"
-                    [focusAreaDetails]="focusAreaDetails()"
-                />
-              }
-              @if (isMetricAnalysis()) {
-                <symphiq-metric-welcome-banner
-                    [viewMode]="viewMode()"
-                    [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
-                    [isOnboarded]="isOnboarded()"
-                />
-              }
-            </div>
-          }
-
-          <!-- Simplified View Content -->
-          @if (isSimplifiedView()) {
-            <!-- Shop Profile Status Card -->
-            @if (shouldShowShopProfileStatus() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
-              <div class="mb-8">
-                <symphiq-shop-profile-status-card
-                    #shopProfileStatusCard
-                    [viewMode]="viewMode()"
-                    [totalQuestions]="totalShopQuestions()"
-                    [answeredQuestions]="answeredShopQuestions()"
-                    [questions]="profileShopQuestions() || []"
-                    [profileAnswers]="profileAnswers() || []"
-                    [profileAnswerHistories]="profileAnswerHistories() || []"
-                    [users]="users() || []"
-                    [currentUser]="currentUser()"
-                    (startCategoryQuestions)="handleStartCategoryQuestions($event)"
-                    (answerSave)="handleProfileQuestionAnswerSave($event)"
-                    (adminAnswerAction)="shopProfileAdminAnswerAction.emit($event)"
-                />
-              </div>
-            }
-
-            <!-- Strategic Insights & Goals (or Subscription Flow) -->
-            @if (profileAnalysis()) {
-              <div class="mb-8">
-                @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
-                  @if (isProfileShopGenerating() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
-                    <div [ngClass]="getProgressCardClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
-                      <symphiq-content-generation-progress
-                          [itemStatus]="itemStatusProfileShop()"
-                          [viewMode]="viewMode()"
-                          title="Generating Your Shop Profile"
-                          subtitle="We're analyzing your data to create shop specific questions and answers. They will appear when ready."
-                      />
-                    </div>
-                  } @else {
-                    <symphiq-strategic-goals-tiled-grid
-                        [goals]="strategicRoadmapGoals()"
-                        [viewMode]="viewMode()"
-                        (viewMoreClick)="openGoalModal($event)"
-                    />
-                  }
-                } @else {
-                  <!-- Subscription Value Proposition -->
-                  @if (!hasBillingCurrency() || isEditingCurrency()) {
-                    @if (!hasBillingCurrency()) {
-                      <div class="mb-8">
-                        <symphiq-subscription-value-proposition-card
-                            [viewMode]="viewMode()"
-                        />
-                      </div>
-                    }
-
-                    <!-- Currency Selection -->
-                    <symphiq-billing-currency-selector-card
-                        [viewMode]="viewMode()"
-                        [isLoading]="isCurrencySelectionLoading()"
-                        [initialCurrency]="isEditingCurrency() ? (account()?.billingCurrencyCode || null) : null"
-                        (currencySelected)="handleCurrencyChange($event)"
-                    />
-                  } @else if (showPlanSelection()) {
-                    <!-- Plan Selection -->
-
-                    <div class="mb-32">
-                      <symphiq-plan-selection-container
-                          [viewMode]="viewMode()"
-                          [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
-                          [planCardInfos]="planCardInfos()"
-                          [isLoading]="isPlanLoading()"
-                          [selectedPeriodUnit]="selectedPeriodUnit()"
-                          (periodUnitChanged)="handlePeriodUnitChange($event)"
-                          (planSelected)="handlePlanSelection($event)"
-                          (editCurrency)="handleEditCurrencyClick()"
-                          (checkout)="checkoutPlanClick.emit($event)"
-                      />
-                    </div>
-                  } @else {
-                    <symphiq-plan-selection-placeholder-card
-                        [viewMode]="viewMode()"
-                        [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
-                        (editCurrency)="handleEditCurrencyClick()"
-                    />
-                  }
-                }
-              </div>
-            }
-
-            <!-- Supporting Business Context -->
-            @if (nonStrategicSections().length > 0) {
-              <div>
-                <symphiq-collapsible-analysis-section-group
-                    [sections]="nonStrategicSections()"
-                    [viewMode]="viewMode()"
-                    [executiveSummary]="executiveSummary()"
-                    [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
-                    [metricExecutiveSummary]="metricExecutiveSummary()"
-                    [metricName]="metricName()"
-                    [allGoals]="allGoals()"
-                    [allMetrics]="allMetrics()"
-                    [allCharts]="allCharts()"
-                    [allInsights]="allInsights()"
-                    [businessProfile]="profile()"
-                />
-              </div>
-            }
-          }
-
-          <!-- Compact & Expanded View Content -->
-          @if (!isSimplifiedView()) {
-            <!-- SHOP Executive Summary -->
-            @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
-              <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
-                <!-- Summary Banner -->
-                <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
-                  <div class="space-y-6">
-                    <div class="flex items-start justify-between gap-4">
-                      <div class="flex-1">
-                        <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
-                          Executive Summary
-                        </h2>
-                        <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
-                          {{ summary.gradeRationale }}
-                        </p>
-                      </div>
-                      @if (summary.overallGrade) {
-                        <symphiq-grade-badge
-                            [grade]="summary.overallGrade"
-                            [gradeRationale]="summary.gradeRationale || ''"
-                            [viewMode]="viewMode()"
-                        />
-                      }
-                    </div>
-
-                    @if (summary.narrative) {
-                      <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
-                        <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
-                          Analysis Narrative
-                        </h3>
-                        <div class="relative">
-                          @if (summary.napkinVisual && summary.napkinVisual.enabled) {
-                            <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
-                              <symphiq-napkin-visual-placeholder
-                                  [visual]="summary.napkinVisual"
-                                  [viewMode]="viewMode()"
-                              />
-                            </div>
-                          }
-                          <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
-                            {{ summary.narrative }}
-                          </p>
-                          <div class="clear-both"></div>
-                        </div>
-                      </div>
-                    }
-
-                    <!-- Stats -->
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                      <button
-                          type="button"
-                          (click)="onKeyStrengthsClick(summary)"
-                          [ngClass]="getKeyStrengthsStatCardClasses()"
-                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
-                        <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
-                          Key Strengths
-                        </div>
-                        <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
-                          {{ summary.keyStrengths?.length || 0 }}
-                        </div>
-                        <div class="flex items-center gap-1.5 text-xs font-medium">
-                          <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
-                          <symphiq-icon
-                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
-                              size="w-4 h-4"
-                              [ngClass]="getKeyStrengthsButtonTextClasses()"
-                              class="transition-transform group-hover:translate-x-1"
-                          />
-                        </div>
-                      </button>
-                      <button
-                          type="button"
-                          (click)="onCriticalGapsClick(summary)"
-                          [ngClass]="getCriticalGapsStatCardClasses()"
-                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
-                        <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
-                          Critical Gaps
-                        </div>
-                        <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
-                          {{ summary.criticalGaps?.length || 0 }}
-                        </div>
-                        <div class="flex items-center gap-1.5 text-xs font-medium">
-                          <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
-                          <symphiq-icon
-                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
-                              size="w-4 h-4"
-                              [ngClass]="getCriticalGapsButtonTextClasses()"
-                              class="transition-transform group-hover:translate-x-1"
-                          />
-                        </div>
-                      </button>
-                      <button
-                          type="button"
-                          (click)="scrollToQuickWins()"
-                          [ngClass]="getQuickWinsStatCardClasses()"
-                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
-                        <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
-                          Quick Wins
-                        </div>
-                        <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
-                          {{ summary.quickWins?.length || 0 }}
-                        </div>
-                        <div class="flex items-center gap-1.5 text-xs font-medium">
-                          <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
-                          <symphiq-icon
-                              [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
-                              size="w-4 h-4"
-                              [ngClass]="getQuickWinsButtonTextClasses()"
-                              class="transition-transform group-hover:translate-y-1 animate-bounce"
-                          />
-                        </div>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Quick Wins -->
-                @if (summary.quickWins && summary.quickWins.length > 0) {
-                  <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
-                    <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
-                      Quick Wins
-                    </h3>
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                      @for (win of summary.quickWins; track $index) {
-                        <div [ngClass]="getQuickWinCardClasses()"
-                             class="rounded-xl p-6 transition-all duration-300">
-                          <div class="space-y-4">
-                            <div class="flex items-start gap-3">
-                          <span [ngClass]="getNumberBadgeClasses()"
-                                class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
-                            {{ $index + 1 }}
-                          </span>
-                              <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
-                                {{ win.action }}
-                              </p>
-                            </div>
-
-                            <div class="flex flex-wrap gap-2">
-                          <span [ngClass]="getEffortBadgeClasses(win.effort)"
-                                class="px-3 py-1 rounded-full text-xs font-semibold">
-                            {{ formatLabel(win.effort) }} Effort
-                          </span>
-                              <span [ngClass]="getImpactBadgeClasses(win.impact)"
-                                    class="px-3 py-1 rounded-full text-xs font-semibold">
-                            {{ formatLabel(win.impact) }} Impact
-                          </span>
-                            </div>
-
-                            @if (win.estimatedTimeframe) {
-                              <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
-                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
-                                </svg>
-                                <span>{{ win.estimatedTimeframe }}</span>
-                              </div>
-                            }
-
-                            @if (win.relatedGoalId) {
-                              <div class="space-y-2">
-                                <h4 [ngClass]="getMetaTextClasses()"
-                                    class="text-xs font-semibold uppercase tracking-wider">
-                                  Related Goal
-                                </h4>
-                                <symphiq-related-goal-chips
-                                    [relatedGoalIds]="[win.relatedGoalId]"
-                                    [allGoals]="allGoals()"
-                                    [viewMode]="viewMode()"
-                                />
-                              </div>
-                            }
-                          </div>
-                        </div>
-                      }
-                    </div>
-                  </div>
-                }
-              </section>
-            }
-
-            <!-- FOCUS_AREA Executive Summary -->
-            @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
-              <symphiq-focus-area-executive-summary
-                  [viewMode]="viewMode()"
-                  [summary]="summary"
-                  [allGoals]="allGoals()"
-                  (topPrioritiesClick)="handleTopPrioritiesClick()"
-                  (priorityDetailClick)="handlePriorityDetailClick($event)"
-              />
-            }
-
-            <!-- METRIC Executive Summary -->
-            @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
-              <symphiq-metric-executive-summary
-                  [viewMode]="viewMode()"
-                  [summary]="summary"
-                  [metricName]="metricName()"
-                  [allGoals]="allGoals()"
-                  (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
-                  (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
-              />
-            }
-
-            <!-- Divider Before First Section -->
-            @if (sections(); as sectionList) {
-              @if (sectionList.length > 0 && sectionList[0].icon) {
-                <symphiq-section-divider
-                    [viewMode]="viewMode()"
-                    [sectionIcon]="sectionList[0].icon"
-                />
-              }
-            }
-
-            <!-- Profile Analysis Sections -->
-            @if (sections(); as sectionList) {
-              <section class="space-y-8">
-                @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
-                  <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
-                       class="rounded-xl p-8 scroll-mt-24">
-                    <!-- Icon and Title -->
-                    <div class="flex items-start gap-3 mb-6">
-                      @if (section.icon) {
-                        <div [ngClass]="getSectionIconClasses()"
-                             class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
-                          <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
-                        </div>
-                      }
-                      <div class="flex-1">
-                        <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
-                          {{ section.title }}
-                        </h3>
-                      </div>
-                    </div>
-
-                    <!-- Description and Visual Side-by-Side -->
-                    @if (section.description || (section.visual && section.visual.enabled)) {
-                      <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
-                           [class.lg:flex-row-reverse]="idx % 2 === 0">
-                        @if (section.visual && section.visual.enabled) {
-                          <div class="w-full lg:w-2/3">
-                            <symphiq-napkin-visual-placeholder
-                                [visual]="section.visual"
-                                [viewMode]="viewMode()"
-                            />
-                          </div>
-                        }
-                        @if (section.description) {
-                          <div class="w-full"
-                               [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
-                          <p [ngClass]="getSectionDescriptionClasses()"
-                             class="text-sm leading-relaxed whitespace-pre-line">
-                            {{ section.description }}
-                          </p>
-                          </div>
-                        }
-                      </div>
-                    }
-
-                    <!-- Section Content -->
-                    <symphiq-profile-section-content
-                        [section]="section"
-                        [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
-                        [viewMode]="viewMode()"
-                        [sectionIndex]="idx"
-                        [allGoals]="allGoals()"
-                        [allMetrics]="allMetrics()"
-                        [allCharts]="allCharts()"
-                        [allInsights]="allInsights()"
-                        [businessProfile]="profile()"
-                    />
-                  </div>
-
-                  <!-- Section Divider (between sections) -->
-                  @if (!last) {
-                    <symphiq-section-divider
-                        [viewMode]="viewMode()"
-                        [sectionIcon]="sectionList[idx + 1].icon"
-                    />
-                  }
-                }
-              </section>
-            }
-          }
-
-        </main>
-
-        <!-- Table of Contents (Compact & Expanded Views) -->
-        @if (!isSimplifiedView() && sections()) {
-          <symphiq-floating-toc
-              [sections]="tocSections()"
-              [viewMode]="viewMode()"
-              [embedded]="embedded()"
-              [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        <!-- Section Navigation Dots (Compact & Expanded Views) -->
-        @if (!isSimplifiedView() && sections()) {
-          <symphiq-section-navigation
-              [sections]="tocSections()"
-              [viewMode]="viewMode()"
-              [embedded]="embedded()"
-              [scrollElement]="scrollElement() ?? undefined"
-          />
-        }
-
-        <!-- Search Modal -->
-        <symphiq-search-modal
-            [isOpen]="isSearchOpen()"
-            [isLightMode]="isLightMode()"
-            (close)="closeSearch()"
-        />
-
-        <!-- View Mode Switcher Modal -->
-        <symphiq-view-mode-switcher-modal
-            [isOpen]="isViewModeSwitcherOpen()"
-            [currentMode]="currentDisplayMode()"
-            [viewMode]="viewMode()"
-            (close)="closeViewModeSwitcher()"
-            (modeSelected)="handleDisplayModeChange($event)"
-        />
-
-        <!-- Profile Analysis Modal -->
-        <symphiq-profile-analysis-modal
-            [isLightMode]="isLightMode()"
-            [allMetrics]="allMetrics()"
-            [allInsights]="allInsights()"
-            [allBusinessInsights]="allBusinessInsights()"
-            [allCharts]="allCharts()"
-        >
-          @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
-            <symphiq-goal-card
-                [goal]="data.goal"
-                [viewMode]="data.viewMode"
-                [isInModal]="true"
-                [allMetrics]="allMetrics()"
-                [allCharts]="allCharts()"
-                [allInsights]="allInsights()"
-                [currentModalState]="getCurrentModalState()"
-                [businessProfile]="profile()"
-            />
-          }
-          @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
-            <symphiq-goal-objectives-modal-content
-                [goal]="data.goal"
-                [viewMode]="data.viewMode"
-            />
-          }
-          @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
-            <symphiq-objective-strategies-modal-content
-                [objective]="data.objective"
-                [goalTitle]="data.goalTitle"
-                [viewMode]="data.viewMode"
-            />
-          }
-          @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
-            <symphiq-strategy-recommendations-modal-content
-                [strategy]="data.strategy"
-                [objectiveTitle]="data.objectiveTitle"
-                [goalTitle]="data.goalTitle"
-                [viewMode]="data.viewMode"
-                [allMetrics]="allMetrics()"
-                [allCharts]="allCharts()"
-                [allInsights]="allInsights()"
-                [allBusinessInsights]="allBusinessInsights()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
-            <symphiq-category-detail-modal-content
-                [category]="data.category"
-                [viewMode]="data.viewMode"
-                [scrollToSection]="data.scrollToSection"
-            />
-          }
-          @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
-            <symphiq-strength-detail-modal-content
-                [strength]="data.strength"
-                [viewMode]="data.viewMode"
-                [allFunnelStrengths]="funnelStrengths()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
-            <symphiq-gap-detail-modal-content
-                [gap]="data.gap"
-                [viewMode]="data.viewMode"
-                [allGoals]="allGoals()"
-                [allWeaknesses]="funnelWeaknesses()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-          @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
-            <symphiq-opportunity-detail-modal-content
-                [opportunity]="data.opportunity"
-                [viewMode]="data.viewMode"
-                [allStrengths]="funnelStrengths()"
-                [currentModalState]="getCurrentModalState()"
-            />
-          }
-        </symphiq-profile-analysis-modal>
-
-        <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
-        <symphiq-funnel-analysis-modal
-            [isLightMode]="isLightMode()"
-            [viewMode]="viewMode()"
-            [allMetrics]="allMetrics()"
-            [allInsights]="allInsights()"
-            [allCharts]="allCharts()"
-        />
-
-        <!-- Business Analysis Modal (for napkin visuals and other content) -->
-        <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
-
-        <!-- Tooltip Container -->
-        <symphiq-tooltip-container/>
-
-        <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
-        @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
-          <symphiq-sticky-subscription-continue-button
-              [viewMode]="viewMode()"
-              [isEnabled]="hasCurrencySelected()"
-              [isLoading]="isCurrencySelectionLoading()"
-              (continueClick)="handleStickyButtonClick()"
-          />
-        }
-
-        <!-- Shop Profile Sticky Footer -->
-        @if (shouldShowShopProfileStickyFooter()) {
-          <symphiq-shop-profile-sticky-footer
-              [viewMode]="viewMode()"
-              [totalQuestions]="totalShopQuestions()"
-              [answeredQuestions]="answeredShopQuestions()"
-              (continueClick)="handleShopProfileContinueClick()"
-          />
-        }
-
-        <!-- Sticky Footer for Edit Currency Mode -->
-        @if (isEditingCurrency()) {
-          <div
-              [ngClass]="getEditCurrencyFooterClasses()"
-              class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
-          >
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-              <div class="flex items-center gap-4">
-                <button
-                    (click)="handleCancelCurrencyEdit()"
-                    [ngClass]="getEditCurrencyCancelButtonClasses()"
-                    class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
-                >
-                  Cancel
-                </button>
-                <button
-                    (click)="handleContinueToPlans()"
-                    [disabled]="!editingCurrencySelection()"
-                    [ngClass]="getEditCurrencyContinueButtonClasses()"
-                    class="flex-1 px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 flex items-center justify-center gap-3 shadow-2xl"
-                >
-                  <span>Continue to Plans</span>
-                  <svg class="w-6 h-6 transition-transform duration-200"
-                       [class.translate-x-1]="editingCurrencySelection()" fill="none" stroke="currentColor"
-                       viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                          d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
-        }
-      </div>
+                template: `
+    <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
+      <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>
+
+      <!-- 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>
+
+      <div class="relative z-[51]">
+        <!-- Dashboard Header -->
+        <symphiq-dashboard-header
+            [title]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
+            [subtitle]="getAnalysisSubtitle()"
+            [currentSection]="getAnalysisSubtitle()"
+            [viewMode]="viewMode()"
+            [viewModeLabel]="displayModeLabel()"
+            [isLoading]="isLoading()"
+            [requestedByUser]="requestedByUser()"
+            [createdDate]="profileAnalysis()?.selfContentCompletedDate"
+            [showControls]="shouldShowHeaderControls()"
+            (searchClick)="openSearch()"
+            (viewModeClick)="openViewModeSwitcher()"
+        />
+
+        <!-- Journey Progress Banner -->
+        @if (isSimplifiedView() && !isOnboarded()) {
+          <symphiq-journey-progress-indicator
+              [viewMode]="viewMode()"
+              [currentStepId]="currentStepId()"
+              [showNextStepAction]="shouldShowContinueButton()"
+              [forDemo]="forDemo()"
+              [maxAccessibleStepId]="maxAccessibleStepId()"
+              (nextStepClick)="nextStepClick.emit()"
+              (stepClick)="stepClick.emit($event)"
+          />
+        }
+
+        <!-- Main Content -->
+        <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12"
+              [class.pb-32]="shouldShowStickyButton() || shouldShowShopProfileStickyFooter()">
+
+          <!-- Welcome Banner (Simplified View Only) -->
+          @if (isSimplifiedView()) {
+            <div class="mb-12">
+              @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
+                <symphiq-shop-welcome-banner
+                    [viewMode]="viewMode()"
+                    [businessName]="profileAnalysis()?.profileAnalysisStructured?.businessName || 'your shop'"
+                    [isOnboarded]="isOnboarded()"
+                />
+              }
+              @if (isFocusAreaAnalysis()) {
+                <symphiq-focus-area-welcome-banner
+                    [viewMode]="viewMode()"
+                    [focusAreaDomain]="focusAreaDomain()"
+                    [focusAreaName]="focusAreaName()"
+                    [focusAreaDetails]="focusAreaDetails()"
+                />
+              }
+              @if (isMetricAnalysis()) {
+                <symphiq-metric-welcome-banner
+                    [viewMode]="viewMode()"
+                    [metricName]="profileAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
+                    [isOnboarded]="isOnboarded()"
+                />
+              }
+            </div>
+          }
+
+          <!-- Simplified View Content -->
+          @if (isSimplifiedView()) {
+            <!-- Shop Profile Status Card -->
+            @if (shouldShowShopProfileStatus() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
+              <div class="mb-8">
+                <symphiq-shop-profile-status-card
+                    #shopProfileStatusCard
+                    [viewMode]="viewMode()"
+                    [totalQuestions]="totalShopQuestions()"
+                    [answeredQuestions]="answeredShopQuestions()"
+                    [questions]="profileShopQuestions() || []"
+                    [profileAnswers]="profileAnswers() || []"
+                    [profileAnswerHistories]="profileAnswerHistories() || []"
+                    [users]="users() || []"
+                    [currentUser]="currentUser()"
+                    (startCategoryQuestions)="handleStartCategoryQuestions($event)"
+                    (answerSave)="handleProfileQuestionAnswerSave($event)"
+                    (adminAnswerAction)="shopProfileAdminAnswerAction.emit($event)"
+                />
+              </div>
+            }
+
+            <!-- Strategic Insights & Goals (or Subscription Flow) -->
+            @if (profileAnalysis()) {
+              <div class="mb-8">
+                @if (isSubscriptionActive() || isFocusAreaAnalysis() || isMetricAnalysis()) {
+                  @if (isProfileShopGenerating() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
+                    <div [ngClass]="getProgressCardClasses()" class="rounded-2xl border shadow-lg overflow-hidden">
+                      <symphiq-content-generation-progress
+                          [itemStatus]="itemStatusProfileShop()"
+                          [viewMode]="viewMode()"
+                          title="Generating Your Shop Profile"
+                          subtitle="We're analyzing your data to create shop specific questions and answers. They will appear when ready."
+                      />
+                    </div>
+                  } @else {
+                    <symphiq-strategic-goals-tiled-grid
+                        [goals]="strategicRoadmapGoals()"
+                        [viewMode]="viewMode()"
+                        (viewMoreClick)="openGoalModal($event)"
+                    />
+                  }
+                } @else {
+                  <!-- Subscription Value Proposition -->
+                  @if (!hasBillingCurrency() || isEditingCurrency()) {
+                    @if (!hasBillingCurrency()) {
+                      <div class="mb-8">
+                        <symphiq-subscription-value-proposition-card
+                            [viewMode]="viewMode()"
+                        />
+                      </div>
+                    }
+
+                    <!-- Currency Selection -->
+                    <symphiq-billing-currency-selector-card
+                        [viewMode]="viewMode()"
+                        [isLoading]="isCurrencySelectionLoading()"
+                        [initialCurrency]="isEditingCurrency() ? (account()?.billingCurrencyCode || null) : null"
+                        (currencySelected)="handleCurrencyChange($event)"
+                    />
+                  } @else if (showPlanSelection()) {
+                    <!-- Plan Selection -->
+
+                    <div class="mb-32">
+                      <symphiq-plan-selection-container
+                          [viewMode]="viewMode()"
+                          [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
+                          [planCardInfos]="planCardInfos()"
+                          [isLoading]="isPlanLoading()"
+                          [selectedPeriodUnit]="selectedPeriodUnit()"
+                          (periodUnitChanged)="handlePeriodUnitChange($event)"
+                          (planSelected)="handlePlanSelection($event)"
+                          (editCurrency)="handleEditCurrencyClick()"
+                          (checkout)="checkoutPlanClick.emit($event)"
+                      />
+                    </div>
+                  } @else {
+                    <symphiq-plan-selection-placeholder-card
+                        [viewMode]="viewMode()"
+                        [selectedCurrency]="account()?.billingCurrencyCode || CurrencyCodeEnum.USD"
+                        (editCurrency)="handleEditCurrencyClick()"
+                    />
+                  }
+                }
+              </div>
+            }
+
+            <!-- Supporting Business Context -->
+            @if (nonStrategicSections().length > 0) {
+              <div>
+                <symphiq-collapsible-analysis-section-group
+                    [sections]="nonStrategicSections()"
+                    [viewMode]="viewMode()"
+                    [executiveSummary]="executiveSummary()"
+                    [focusAreaExecutiveSummary]="focusAreaExecutiveSummary()"
+                    [metricExecutiveSummary]="metricExecutiveSummary()"
+                    [metricName]="metricName()"
+                    [allGoals]="allGoals()"
+                    [allMetrics]="allMetrics()"
+                    [allCharts]="allCharts()"
+                    [allInsights]="allInsights()"
+                    [businessProfile]="profile()"
+                />
+              </div>
+            }
+          }
+
+          <!-- Compact & Expanded View Content -->
+          @if (!isSimplifiedView()) {
+            <!-- SHOP Executive Summary -->
+            @if (!isFocusAreaAnalysis() && executiveSummary(); as summary) {
+              <section id="section-executive-summary" class="space-y-6 scroll-mt-24">
+                <!-- Summary Banner -->
+                <div [ngClass]="getBannerClasses()" class="rounded-2xl p-8 shadow-xl">
+                  <div class="space-y-6">
+                    <div class="flex items-start justify-between gap-4">
+                      <div class="flex-1">
+                        <h2 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold mb-3">
+                          Executive Summary
+                        </h2>
+                        <p [ngClass]="getTextClasses()" class="text-lg leading-relaxed">
+                          {{ summary.gradeRationale }}
+                        </p>
+                      </div>
+                      @if (summary.overallGrade) {
+                        <symphiq-grade-badge
+                            [grade]="summary.overallGrade"
+                            [gradeRationale]="summary.gradeRationale || ''"
+                            [viewMode]="viewMode()"
+                        />
+                      }
+                    </div>
+
+                    @if (summary.narrative) {
+                      <div [ngClass]="getNarrativeClasses()" class="rounded-xl p-6">
+                        <h3 [ngClass]="getSubheadingClasses()" class="text-lg font-semibold mb-3">
+                          Analysis Narrative
+                        </h3>
+                        <div class="relative">
+                          @if (summary.napkinVisual && summary.napkinVisual.enabled) {
+                            <div class="mb-6 lg:float-left lg:mr-6 lg:mb-4 lg:max-w-[66%]">
+                              <symphiq-napkin-visual-placeholder
+                                  [visual]="summary.napkinVisual"
+                                  [viewMode]="viewMode()"
+                              />
+                            </div>
+                          }
+                          <p [ngClass]="getTextClasses()" class="text-sm leading-relaxed whitespace-pre-line">
+                            {{ summary.narrative }}
+                          </p>
+                          <div class="clear-both"></div>
+                        </div>
+                      </div>
+                    }
+
+                    <!-- Stats -->
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                      <button
+                          type="button"
+                          (click)="onKeyStrengthsClick(summary)"
+                          [ngClass]="getKeyStrengthsStatCardClasses()"
+                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
+                        <div [ngClass]="getKeyStrengthsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
+                          Key Strengths
+                        </div>
+                        <div [ngClass]="getKeyStrengthsStatValueClasses()" class="text-3xl font-bold mb-2">
+                          {{ summary.keyStrengths?.length || 0 }}
+                        </div>
+                        <div class="flex items-center gap-1.5 text-xs font-medium">
+                          <span [ngClass]="getKeyStrengthsButtonTextClasses()">View Details</span>
+                          <symphiq-icon
+                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
+                              size="w-4 h-4"
+                              [ngClass]="getKeyStrengthsButtonTextClasses()"
+                              class="transition-transform group-hover:translate-x-1"
+                          />
+                        </div>
+                      </button>
+                      <button
+                          type="button"
+                          (click)="onCriticalGapsClick(summary)"
+                          [ngClass]="getCriticalGapsStatCardClasses()"
+                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
+                        <div [ngClass]="getCriticalGapsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
+                          Critical Gaps
+                        </div>
+                        <div [ngClass]="getCriticalGapsStatValueClasses()" class="text-3xl font-bold mb-2">
+                          {{ summary.criticalGaps?.length || 0 }}
+                        </div>
+                        <div class="flex items-center gap-1.5 text-xs font-medium">
+                          <span [ngClass]="getCriticalGapsButtonTextClasses()">View Details</span>
+                          <symphiq-icon
+                              [icon]="{ name: 'chevron-right', source: IconSourceEnum.HEROICONS }"
+                              size="w-4 h-4"
+                              [ngClass]="getCriticalGapsButtonTextClasses()"
+                              class="transition-transform group-hover:translate-x-1"
+                          />
+                        </div>
+                      </button>
+                      <button
+                          type="button"
+                          (click)="scrollToQuickWins()"
+                          [ngClass]="getQuickWinsStatCardClasses()"
+                          class="p-4 rounded-xl text-left transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] group cursor-pointer">
+                        <div [ngClass]="getQuickWinsStatLabelClasses()" class="text-xs font-semibold uppercase mb-1">
+                          Quick Wins
+                        </div>
+                        <div [ngClass]="getQuickWinsStatValueClasses()" class="text-3xl font-bold mb-2">
+                          {{ summary.quickWins?.length || 0 }}
+                        </div>
+                        <div class="flex items-center gap-1.5 text-xs font-medium">
+                          <span [ngClass]="getQuickWinsButtonTextClasses()">Details Below</span>
+                          <symphiq-icon
+                              [icon]="{ name: 'chevron-down', source: IconSourceEnum.HEROICONS }"
+                              size="w-4 h-4"
+                              [ngClass]="getQuickWinsButtonTextClasses()"
+                              class="transition-transform group-hover:translate-y-1 animate-bounce"
+                          />
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Quick Wins -->
+                @if (summary.quickWins && summary.quickWins.length > 0) {
+                  <div id="quick-wins-section" class="space-y-4 scroll-mt-24">
+                    <h3 [ngClass]="getSectionTitleClasses()" class="text-xl font-bold">
+                      Quick Wins
+                    </h3>
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                      @for (win of summary.quickWins; track $index) {
+                        <div [ngClass]="getQuickWinCardClasses()"
+                             class="rounded-xl p-6 transition-all duration-300">
+                          <div class="space-y-4">
+                            <div class="flex items-start gap-3">
+                          <span [ngClass]="getNumberBadgeClasses()"
+                                class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold">
+                            {{ $index + 1 }}
+                          </span>
+                              <p [ngClass]="getQuickWinTextClasses()" class="font-semibold leading-tight flex-1">
+                                {{ win.action }}
+                              </p>
+                            </div>
+
+                            <div class="flex flex-wrap gap-2">
+                          <span [ngClass]="getEffortBadgeClasses(win.effort)"
+                                class="px-3 py-1 rounded-full text-xs font-semibold">
+                            {{ formatLabel(win.effort) }} Effort
+                          </span>
+                              <span [ngClass]="getImpactBadgeClasses(win.impact)"
+                                    class="px-3 py-1 rounded-full text-xs font-semibold">
+                            {{ formatLabel(win.impact) }} Impact
+                          </span>
+                            </div>
+
+                            @if (win.estimatedTimeframe) {
+                              <div class="flex items-center gap-2 text-sm" [ngClass]="getMetaTextClasses()">
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                                </svg>
+                                <span>{{ win.estimatedTimeframe }}</span>
+                              </div>
+                            }
+
+                            @if (win.relatedGoalId) {
+                              <div class="space-y-2">
+                                <h4 [ngClass]="getMetaTextClasses()"
+                                    class="text-xs font-semibold uppercase tracking-wider">
+                                  Related Goal
+                                </h4>
+                                <symphiq-related-goal-chips
+                                    [relatedGoalIds]="[win.relatedGoalId]"
+                                    [allGoals]="allGoals()"
+                                    [viewMode]="viewMode()"
+                                />
+                              </div>
+                            }
+                          </div>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                }
+              </section>
+            }
+
+            <!-- FOCUS_AREA Executive Summary -->
+            @if (isFocusAreaAnalysis() && focusAreaExecutiveSummary(); as summary) {
+              <symphiq-focus-area-executive-summary
+                  [viewMode]="viewMode()"
+                  [summary]="summary"
+                  [allGoals]="allGoals()"
+                  (topPrioritiesClick)="handleTopPrioritiesClick()"
+                  (priorityDetailClick)="handlePriorityDetailClick($event)"
+              />
+            }
+
+            <!-- METRIC Executive Summary -->
+            @if (isMetricAnalysis() && metricExecutiveSummary(); as summary) {
+              <symphiq-metric-executive-summary
+                  [viewMode]="viewMode()"
+                  [summary]="summary"
+                  [metricName]="metricName()"
+                  [allGoals]="allGoals()"
+                  (topPrioritiesClick)="handleMetricTopPrioritiesClick()"
+                  (priorityDetailClick)="handleMetricPriorityDetailClick($event)"
+              />
+            }
+
+            <!-- Divider Before First Section -->
+            @if (sections(); as sectionList) {
+              @if (sectionList.length > 0 && sectionList[0].icon) {
+                <symphiq-section-divider
+                    [viewMode]="viewMode()"
+                    [sectionIcon]="sectionList[0].icon"
+                />
+              }
+            }
+
+            <!-- Profile Analysis Sections -->
+            @if (sections(); as sectionList) {
+              <section class="space-y-8">
+                @for (section of sectionList; track section.id; let idx = $index; let last = $last) {
+                  <div [id]="'section-' + section.id" [ngClass]="getSectionCardClasses()"
+                       class="rounded-xl p-8 scroll-mt-24">
+                    <!-- Icon and Title -->
+                    <div class="flex items-start gap-3 mb-6">
+                      @if (section.icon) {
+                        <div [ngClass]="getSectionIconClasses()"
+                             class="flex-shrink-0 w-12 h-12 rounded-xl flex items-center justify-center">
+                          <symphiq-icon [icon]="section.icon" size="w-6 h-6"></symphiq-icon>
+                        </div>
+                      }
+                      <div class="flex-1">
+                        <h3 [ngClass]="getSectionTitleClasses()" class="text-2xl font-bold">
+                          {{ section.title }}
+                        </h3>
+                      </div>
+                    </div>
+
+                    <!-- Description and Visual Side-by-Side -->
+                    @if (section.description || (section.visual && section.visual.enabled)) {
+                      <div class="mb-6 flex flex-col lg:flex-row gap-6 items-start"
+                           [class.lg:flex-row-reverse]="idx % 2 === 0">
+                        @if (section.visual && section.visual.enabled) {
+                          <div class="w-full lg:w-2/3">
+                            <symphiq-napkin-visual-placeholder
+                                [visual]="section.visual"
+                                [viewMode]="viewMode()"
+                            />
+                          </div>
+                        }
+                        @if (section.description) {
+                          <div class="w-full"
+                               [class.lg:w-1/3]="section.visual && section.visual.enabled" [class.lg:w-full]="!section.visual || !section.visual.enabled">
+                          <p [ngClass]="getSectionDescriptionClasses()"
+                             class="text-sm leading-relaxed whitespace-pre-line">
+                            {{ section.description }}
+                          </p>
+                          </div>
+                        }
+                      </div>
+                    }
+
+                    <!-- Section Content -->
+                    <symphiq-profile-section-content
+                        [section]="section"
+                        [executiveSummary]="section.id === 'executive-summary' ? executiveSummary() : undefined"
+                        [viewMode]="viewMode()"
+                        [sectionIndex]="idx"
+                        [allGoals]="allGoals()"
+                        [allMetrics]="allMetrics()"
+                        [allCharts]="allCharts()"
+                        [allInsights]="allInsights()"
+                        [businessProfile]="profile()"
+                    />
+                  </div>
+
+                  <!-- Section Divider (between sections) -->
+                  @if (!last) {
+                    <symphiq-section-divider
+                        [viewMode]="viewMode()"
+                        [sectionIcon]="sectionList[idx + 1].icon"
+                    />
+                  }
+                }
+              </section>
+            }
+          }
+
+        </main>
+
+        <!-- Table of Contents (Compact & Expanded Views) -->
+        @if (!isSimplifiedView() && sections()) {
+          <symphiq-floating-toc
+              [sections]="tocSections()"
+              [viewMode]="viewMode()"
+              [embedded]="embedded()"
+              [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        <!-- Section Navigation Dots (Compact & Expanded Views) -->
+        @if (!isSimplifiedView() && sections()) {
+          <symphiq-section-navigation
+              [sections]="tocSections()"
+              [viewMode]="viewMode()"
+              [embedded]="embedded()"
+              [scrollElement]="scrollElement() ?? undefined"
+          />
+        }
+
+        <!-- Search Modal -->
+        <symphiq-search-modal
+            [isOpen]="isSearchOpen()"
+            [isLightMode]="isLightMode()"
+            (close)="closeSearch()"
+        />
+
+        <!-- View Mode Switcher Modal -->
+        <symphiq-view-mode-switcher-modal
+            [isOpen]="isViewModeSwitcherOpen()"
+            [currentMode]="currentDisplayMode()"
+            [viewMode]="viewMode()"
+            (close)="closeViewModeSwitcher()"
+            (modeSelected)="handleDisplayModeChange($event)"
+        />
+
+        <!-- Profile Analysis Modal -->
+        <symphiq-profile-analysis-modal
+            [isLightMode]="isLightMode()"
+            [allMetrics]="allMetrics()"
+            [allInsights]="allInsights()"
+            [allBusinessInsights]="allBusinessInsights()"
+            [allCharts]="allCharts()"
+        >
+          @if (modalType() === 'goal-detail' && getGoalDetailData(); as data) {
+            <symphiq-goal-card
+                [goal]="data.goal"
+                [viewMode]="data.viewMode"
+                [isInModal]="true"
+                [allMetrics]="allMetrics()"
+                [allCharts]="allCharts()"
+                [allInsights]="allInsights()"
+                [currentModalState]="getCurrentModalState()"
+                [businessProfile]="profile()"
+            />
+          }
+          @if (modalType() === 'goal-objectives' && getGoalDetailData(); as data) {
+            <symphiq-goal-objectives-modal-content
+                [goal]="data.goal"
+                [viewMode]="data.viewMode"
+            />
+          }
+          @if (modalType() === 'objective-strategies' && getObjectiveStrategiesData(); as data) {
+            <symphiq-objective-strategies-modal-content
+                [objective]="data.objective"
+                [goalTitle]="data.goalTitle"
+                [viewMode]="data.viewMode"
+            />
+          }
+          @if (modalType() === 'strategy-recommendations' && getStrategyRecommendationsData(); as data) {
+            <symphiq-strategy-recommendations-modal-content
+                [strategy]="data.strategy"
+                [objectiveTitle]="data.objectiveTitle"
+                [goalTitle]="data.goalTitle"
+                [viewMode]="data.viewMode"
+                [allMetrics]="allMetrics()"
+                [allCharts]="allCharts()"
+                [allInsights]="allInsights()"
+                [allBusinessInsights]="allBusinessInsights()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'category-detail' && getCategoryDetailData(); as data) {
+            <symphiq-category-detail-modal-content
+                [category]="data.category"
+                [viewMode]="data.viewMode"
+                [scrollToSection]="data.scrollToSection"
+            />
+          }
+          @if (modalType() === 'strength-detail' && getStrengthDetailData(); as data) {
+            <symphiq-strength-detail-modal-content
+                [strength]="data.strength"
+                [viewMode]="data.viewMode"
+                [allFunnelStrengths]="funnelStrengths()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'gap-detail' && getGapDetailData(); as data) {
+            <symphiq-gap-detail-modal-content
+                [gap]="data.gap"
+                [viewMode]="data.viewMode"
+                [allGoals]="allGoals()"
+                [allWeaknesses]="funnelWeaknesses()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+          @if (modalType() === 'opportunity-detail' && getOpportunityDetailData(); as data) {
+            <symphiq-opportunity-detail-modal-content
+                [opportunity]="data.opportunity"
+                [viewMode]="data.viewMode"
+                [allStrengths]="funnelStrengths()"
+                [currentModalState]="getCurrentModalState()"
+            />
+          }
+        </symphiq-profile-analysis-modal>
+
+        <!-- Funnel Analysis Modal (for insights and metrics from profile goals) -->
+        <symphiq-funnel-analysis-modal
+            [isLightMode]="isLightMode()"
+            [viewMode]="viewMode()"
+            [allMetrics]="allMetrics()"
+            [allInsights]="allInsights()"
+            [allCharts]="allCharts()"
+        />
+
+        <!-- Business Analysis Modal (for napkin visuals and other content) -->
+        <symphiq-business-analysis-modal [isLightMode]="isLightMode()"/>
+
+        <!-- Tooltip Container -->
+        <symphiq-tooltip-container/>
+
+        <!-- Sticky Continue Button (Only shown when not subscribed and no currency selected) -->
+        @if (!isSubscriptionActive() && !hasBillingCurrency() && isSimplifiedView() && !isFocusAreaAnalysis() && !isMetricAnalysis()) {
+          <symphiq-sticky-subscription-continue-button
+              [viewMode]="viewMode()"
+              [isEnabled]="hasCurrencySelected()"
+              [isLoading]="isCurrencySelectionLoading()"
+              (continueClick)="handleStickyButtonClick()"
+          />
+        }
+
+        <!-- Shop Profile Sticky Footer -->
+        @if (shouldShowShopProfileStickyFooter()) {
+          <symphiq-shop-profile-sticky-footer
+              [viewMode]="viewMode()"
+              [totalQuestions]="totalShopQuestions()"
+              [answeredQuestions]="answeredShopQuestions()"
+              (continueClick)="handleShopProfileContinueClick()"
+          />
+        }
+
+        <!-- Sticky Footer for Edit Currency Mode -->
+        @if (isEditingCurrency()) {
+          <div
+              [ngClass]="getEditCurrencyFooterClasses()"
+              class="fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur-lg"
+          >
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+              <div class="flex items-center gap-4">
+                <button
+                    (click)="handleCancelCurrencyEdit()"
+                    [ngClass]="getEditCurrencyCancelButtonClasses()"
+                    class="px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 cursor-pointer"
+                >
+                  Cancel
+                </button>
+                <button
+                    (click)="handleContinueToPlans()"
+                    [disabled]="!editingCurrencySelection()"
+                    [ngClass]="getEditCurrencyContinueButtonClasses()"
+                    class="flex-1 px-6 py-4 rounded-xl font-semibold text-lg transition-all duration-300 flex items-center justify-center gap-3 shadow-2xl"
+                >
+                  <span>Continue to Plans</span>
+                  <svg class="w-6 h-6 transition-transform duration-200"
+                       [class.translate-x-1]="editingCurrencySelection()" fill="none" stroke="currentColor"
+                       viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        }
+      </div>
   `
             }]
     }], () => [], { funnelModalComponent: [{
@@ -94654,7 +94746,7 @@ class SymphiqProfileAnalysisDashboardComponent {
             type: HostListener,
             args: ['window:scroll', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 781 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 782 }); })();
 
 class ScrollProgressBarComponent {
     constructor() {
@@ -95635,5 +95727,5 @@ var pieChart_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, DataLoaderService, EMAIL_IS_EMG_APPS, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricReportModalComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PacingStatusBadgeComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorService, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopProfileCategoryListComponent, ShopProfileQuestionAnswerComponent, ShopProfileQuestionCardComponent, ShopProfileQuestionsModalComponent, ShopProfileStatusCardComponent, ShopProfileStickyFooterComponent, ShopProfileViewToggleComponent, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, StickySubscriptionContinueButtonComponent, SubscriptionValuePropositionCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TargetChangeBadgeComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, UserAvatarComponent, UserDisplayComponent, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, calculateFunnelRatios, calculateMetricTargetsFromRevenue, calculateMetricTargetsFromRevenueReverse, calculateRelatedMetricRatios, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, validateRevenueTarget };
+export { AreaChartComponent, BarChartComponent, BreakdownSectionComponent, BusinessAnalysisModalComponent, BusinessProfileSearchService, ChartCardComponent, ChartContainerComponent, ChartThemeService, CircularProgressComponent, CompetitivePositioningSummaryComponent, CompetitorAnalysisCardComponent, ConfettiService, ConfidenceLevelCardComponent, ContentGenerationProgressComponent, ContentGenerationProgressWithConfettiComponent, CrossDashboardRelationshipsService, DataLoaderService, FloatingBackButtonComponent, FloatingTocComponent, FocusAreaDetailCardComponent, FocusAreaExecutiveSummaryComponent, FocusAreaQuestionComponent, FocusAreaToolsModalComponent, FunnelOrderService, GradeBadgeComponent, HeaderScrollService, HierarchyDisplayComponent, HorizontalBarComponent, IconService, IndeterminateSpinnerComponent, InsightCardComponent, JourneyProgressIndicatorComponent, JourneyStepIdEnum, LineChartComponent, MetricCardComponent, MetricExecutiveSummaryComponent, MetricFormatterService, MetricListItemComponent, MetricReportModalComponent, MetricWelcomeBannerComponent, MobileBottomNavComponent, MobileFABComponent, ModalComponent, ModalService, NapkinVisualPlaceholderComponent, NavigationStateService, OpportunityHighlightBannerComponent, OverallAssessmentComponent, PacingStatusBadgeComponent, PieChartComponent, ProfileItemCardComponent, ProfileSectionComponent, ProfileSubsectionComponent, RelatedContentSidebarComponent, RevenueCalculatorService, RevenueCalculatorWelcomeBannerComponent, ScrollDepthService, ScrollProgressBarComponent, SearchButtonComponent, SearchModalComponent, SectionDividerComponent, SectionNavigationComponent, ShadowElevationDirective, ShopPlatformEnum, ShopProfileCategoryListComponent, ShopProfileQuestionAnswerComponent, ShopProfileQuestionCardComponent, ShopProfileQuestionsModalComponent, ShopProfileStatusCardComponent, ShopProfileStickyFooterComponent, ShopProfileViewToggleComponent, ShopWelcomeBannerComponent, SkeletonBarComponent, SkeletonCardBaseComponent, SkeletonCircleComponent, SkeletonCompetitorCardComponent, SkeletonCustomerSegmentCardComponent, SkeletonFocusAreaCardComponent, SkeletonGenericCardComponent, SkeletonLoaderComponent, SkeletonPriceTierCardComponent, SkeletonProductCategoryCardComponent, SkeletonRegionCardComponent, SkeletonSeasonCardComponent, StickySubscriptionContinueButtonComponent, SubscriptionValuePropositionCardComponent, SymphiqBusinessAnalysisDashboardComponent, SymphiqConnectGaDashboardComponent, SymphiqCreateAccountDashboardComponent, SymphiqFunnelAnalysisDashboardComponent, SymphiqFunnelAnalysisPreviewComponent, SymphiqIconComponent, SymphiqProfileAnalysisDashboardComponent, SymphiqRevenueCalculatorDashboardComponent, SymphiqWelcomeDashboardComponent, TargetChangeBadgeComponent, TooltipContainerComponent, TooltipDataService, TooltipDirective, TooltipService, UserAvatarComponent, UserDisplayComponent, ViewModeService, ViewportAnimationDirective, VisualizationContainerComponent, calculateFunnelRatios, calculateMetricTargetsFromRevenue, calculateMetricTargetsFromRevenueReverse, calculateRelatedMetricRatios, generateTargetsFromCalculations, getBadgeLabelClasses, getButtonClasses, getCategoryBadgeClasses, getCategoryColor, getCompetitiveBadgeClasses, getContainerClasses, getFooterClasses, getFunnelStageMetrics, getGradeBadgeClasses, getHeaderClasses, getInsightsBadgeClasses, getInsightsCardClasses, getMetricLabelClasses, getMetricMiniCardClasses, getMetricValueClasses, getNarrativeTextClasses, getRevenueCardClasses, getRevenueIconClasses, getStatusBadgeClasses, getStatusDotClasses, getStatusIconClasses, getStatusSummaryClasses, getSubtitleClasses, getTitleClasses, getTrendClasses, getTrendIconClasses, getTrendValueClasses, groupMetricsByFunnelStage, isLightMode, validateRevenueTarget };
 //# sourceMappingURL=symphiq-components.mjs.map