@eric-emg/symphiq-components 1.2.395 → 1.2.396

package/fesm2022/symphiq-components.mjs

@@ -68326,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();
@@ -68350,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_r1.isLightMode() ? "text-slate-600 font-medium" : "text-slate-400 font-medium");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.isLightMode() ? "text-slate-600 font-medium" : "text-slate-400 font-medium");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentSection(), " ");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.currentSection(), " ");
+    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.ɵɵconditional(ctx_r0.currentSubsection() ? 3 : -1);
+    i0.ɵɵproperty("ngClass", ctx_r1.getViewModeButtonClasses());
 } }
 class DashboardHeaderComponent {
     constructor() {
@@ -68383,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);
@@ -68439,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();
@@ -68448,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());
@@ -68500,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();
@@ -68523,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, [{
@@ -68564,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">
@@ -68628,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>
@@ -68650,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() {
@@ -87912,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);
@@ -87923,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) {
@@ -87977,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();
@@ -87993,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 {
@@ -90416,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" }] : []));
@@ -90986,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" }] : []));
@@ -91038,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;
@@ -91057,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();
@@ -91129,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);
@@ -91191,6 +91263,8 @@ class ShopProfileStatusCardComponent {
             this.root.dispose();
         }
         this.chartElement = undefined;
+        this.chartSeries = undefined;
+        this.centerLabel = undefined;
         this.root = undefined;
     }
     createChart() {
@@ -91204,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) {
@@ -91239,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),
@@ -91274,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
@@ -91334,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();
@@ -91360,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)); });
@@ -91401,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);
@@ -93069,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();
@@ -93900,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");
@@ -93941,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;
@@ -93949,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());
@@ -93958,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();
@@ -93980,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();
@@ -94014,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: [{
@@ -94680,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() {