@eric-emg/symphiq-components 1.2.118 → 1.2.119

package/fesm2022/symphiq-components.mjs

@@ -13,6 +13,7 @@ import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { StringMemoizeCache as StringMemoizeCache$1 } from '@symphiq-components/utils/memoize';
 import { Root, Tooltip, color, Bullet, Circle, Legend, percent, p100, p50 } from '@amcharts/amcharts5';
 import { XYChart, DateAxis, AxisRendererX, ValueAxis, AxisRendererY, XYCursor, LineSeries, CategoryAxis, ColumnSeries } from '@amcharts/amcharts5/xy';
 import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
@@ -51349,6 +51350,8 @@ class SectionNavigationComponent {
         this.sections = [];
         this.viewMode = ViewModeEnum.LIGHT;
         this.embedded = false;
+        this.parentHeaderOffset = 0;
+        this.HEADER_OFFSET = 80;
         this.activeSection = signal(0, ...(ngDevMode ? [{ debugName: "activeSection" }] : []));
     }
     ngOnInit() {
@@ -51399,14 +51402,33 @@ class SectionNavigationComponent {
     scrollToSection(sectionId) {
         const element = document.getElementById(`section-${sectionId}`);
         if (element) {
-            element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            this.scrollToElement(element);
+        }
+    }
+    getScrollOffset() {
+        return this.HEADER_OFFSET + this.parentHeaderOffset;
+    }
+    scrollToElement(element) {
+        const offset = this.getScrollOffset();
+        if (this.embedded && this.scrollElement) {
+            const scrollContainer = this.scrollElement;
+            const containerRect = scrollContainer.getBoundingClientRect();
+            const elementRect = element.getBoundingClientRect();
+            const relativeTop = elementRect.top - containerRect.top;
+            const targetScrollTop = scrollContainer.scrollTop + relativeTop - offset;
+            scrollContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
+        }
+        else {
+            const elementRect = element.getBoundingClientRect();
+            const targetScrollTop = window.scrollY + elementRect.top - offset;
+            window.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
         }
     }
     trackBySectionId(index, section) {
         return section.id || index;
     }
     static { this.ɵfac = function SectionNavigationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SectionNavigationComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SectionNavigationComponent, selectors: [["symphiq-section-navigation"]], inputs: { sections: "sections", viewMode: "viewMode", embedded: "embedded" }, decls: 3, vars: 3, consts: [[3, "ngClass"], [1, "flex", "flex-col", "gap-4"], ["type", "button", 3, "ngClass", "libSymphiqTooltip", "tooltipPosition", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", 3, "click", "ngClass", "libSymphiqTooltip", "tooltipPosition"]], template: function SectionNavigationComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SectionNavigationComponent, selectors: [["symphiq-section-navigation"]], inputs: { sections: "sections", viewMode: "viewMode", embedded: "embedded", scrollElement: "scrollElement", parentHeaderOffset: "parentHeaderOffset" }, decls: 3, vars: 3, consts: [[3, "ngClass"], [1, "flex", "flex-col", "gap-4"], ["type", "button", 3, "ngClass", "libSymphiqTooltip", "tooltipPosition", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["type", "button", 3, "click", "ngClass", "libSymphiqTooltip", "tooltipPosition"]], template: function SectionNavigationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "nav", 0)(1, "div", 1);
             i0.ɵɵtemplate(2, SectionNavigationComponent_button_2_Template, 2, 5, "button", 2);
             i0.ɵɵelementEnd()();
@@ -51423,22 +51445,22 @@ class SectionNavigationComponent {
                 standalone: true,
                 imports: [CommonModule, TooltipDirective],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <nav [ngClass]="getNavClasses()">
-      <div class="flex flex-col gap-4">
-        <button
-          *ngFor="let section of sections; let i = index; trackBy: trackBySectionId"
-          type="button"
-          [ngClass]="getDotClasses(i)"
-          (click)="scrollToSection(section.id!)"
-          [attr.aria-label]="'Navigate to ' + section.title"
-          [libSymphiqTooltip]="section.title"
-          [tooltipPosition]="'left'"
-        >
-          <div [ngClass]="getDotInnerClasses(i)"></div>
-        </button>
-      </div>
-    </nav>
+                template: `
+    <nav [ngClass]="getNavClasses()">
+      <div class="flex flex-col gap-4">
+        <button
+          *ngFor="let section of sections; let i = index; trackBy: trackBySectionId"
+          type="button"
+          [ngClass]="getDotClasses(i)"
+          (click)="scrollToSection(section.id!)"
+          [attr.aria-label]="'Navigate to ' + section.title"
+          [libSymphiqTooltip]="section.title"
+          [tooltipPosition]="'left'"
+        >
+          <div [ngClass]="getDotInnerClasses(i)"></div>
+        </button>
+      </div>
+    </nav>
   `
             }]
     }], null, { sections: [{
@@ -51447,6 +51469,10 @@ class SectionNavigationComponent {
             type: Input
         }], embedded: [{
             type: Input
+        }], scrollElement: [{
+            type: Input
+        }], parentHeaderOffset: [{
+            type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SectionNavigationComponent, { className: "SectionNavigationComponent", filePath: "lib/components/business-analysis-dashboard/section-navigation.component.ts", lineNumber: 29 }); })();
 
@@ -53617,13 +53643,13 @@ function SymphiqBusinessAnalysisDashboardComponent_Conditional_43_Template(rf, c
     i0.ɵɵelement(0, "symphiq-section-navigation", 20);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded());
+    i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded())("scrollElement", ctx_r0.scrollElement() ?? undefined);
 } }
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_44_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-floating-toc", 20);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded());
+    i0.ɵɵproperty("sections", ctx_r0.sections())("viewMode", ctx_r0.viewMode())("embedded", ctx_r0.embedded())("scrollElement", ctx_r0.scrollElement() ?? undefined);
 } }
 function SymphiqBusinessAnalysisDashboardComponent_Conditional_46_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
@@ -54113,7 +54139,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
     static { this.ɵfac = function SymphiqBusinessAnalysisDashboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SymphiqBusinessAnalysisDashboardComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SymphiqBusinessAnalysisDashboardComponent, selectors: [["symphiq-business-analysis-dashboard"]], hostBindings: function SymphiqBusinessAnalysisDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("scroll", function SymphiqBusinessAnalysisDashboardComponent_scroll_HostBindingHandler($event) { return ctx.onScroll($event); }, i0.ɵɵresolveWindow)("keydown", function SymphiqBusinessAnalysisDashboardComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyDown($event); }, i0.ɵɵresolveDocument);
-        } }, inputs: { embedded: [1, "embedded"], profile: [1, "profile"], parentHeaderOffset: [1, "parentHeaderOffset"], requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"] }, decls: 51, vars: 67, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "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, "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"], [1, "relative"], [3, "sections", "viewMode", "embedded"], [3, "viewMode", "embedded"], [3, "viewInContextRequested", "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "viewMode", "currentStepId", "showNextStepAction"], [1, "mb-8"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMoreClick", "recommendations", "viewMode"], [3, "sections", "viewMode"], [3, "section", "viewMode", "forceExpanded"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8"], [3, "viewMode", "subsections"]], template: function SymphiqBusinessAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { embedded: [1, "embedded"], profile: [1, "profile"], parentHeaderOffset: [1, "parentHeaderOffset"], requestedByUser: [1, "requestedByUser"], viewMode: [1, "viewMode"], scrollEvent: [1, "scrollEvent"], scrollElement: [1, "scrollElement"], isLoading: [1, "isLoading"], isOnboarded: [1, "isOnboarded"] }, decls: 51, vars: 67, consts: [[3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "relative", "z-[51]"], [1, "sticky", "top-0", "z-50", 3, "ngClass"], [1, "transition-all", "duration-300", "ease-in-out", "overflow-hidden"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8", "py-8"], [1, "flex", "items-center", "justify-between"], [1, "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, "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"], [1, "relative"], [3, "sections", "viewMode", "embedded", "scrollElement"], [3, "viewMode", "embedded"], [3, "viewInContextRequested", "isLightMode"], [3, "searchChange", "resultSelected", "close", "isLightMode", "isOpen", "searchQuery", "results", "hasResults", "selectedIndex", "placeholder"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode", "isLoading"], [1, "transition-opacity", "duration-300", 3, "ngClass"], [3, "viewMode", "currentStepId", "showNextStepAction"], [1, "mb-8"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMoreClick", "recommendations", "viewMode"], [3, "sections", "viewMode"], [3, "section", "viewMode", "forceExpanded"], [1, "max-w-7xl", "mx-auto", "px-4", "sm:px-6", "lg:px-8"], [3, "viewMode", "subsections"]], template: function SymphiqBusinessAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
@@ -54157,8 +54183,8 @@ class SymphiqBusinessAnalysisDashboardComponent {
             i0.ɵɵelementStart(40, "main", 19);
             i0.ɵɵconditionalCreate(41, SymphiqBusinessAnalysisDashboardComponent_Conditional_41_Template, 8, 8)(42, SymphiqBusinessAnalysisDashboardComponent_Conditional_42_Template, 2, 0);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(43, SymphiqBusinessAnalysisDashboardComponent_Conditional_43_Template, 1, 3, "symphiq-section-navigation", 20);
-            i0.ɵɵconditionalCreate(44, SymphiqBusinessAnalysisDashboardComponent_Conditional_44_Template, 1, 3, "symphiq-floating-toc", 20);
+            i0.ɵɵconditionalCreate(43, SymphiqBusinessAnalysisDashboardComponent_Conditional_43_Template, 1, 4, "symphiq-section-navigation", 20);
+            i0.ɵɵconditionalCreate(44, SymphiqBusinessAnalysisDashboardComponent_Conditional_44_Template, 1, 4, "symphiq-floating-toc", 20);
             i0.ɵɵelement(45, "symphiq-floating-back-button", 21);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(46, SymphiqBusinessAnalysisDashboardComponent_Conditional_46_Template, 2, 2, "div", 0);
@@ -54417,6 +54443,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             [sections]="sections()"
             [viewMode]="viewMode()"
             [embedded]="embedded()"
+            [scrollElement]="scrollElement() ?? undefined"
           />
         }
 
@@ -54425,6 +54452,7 @@ class SymphiqBusinessAnalysisDashboardComponent {
             [sections]="sections()"
             [viewMode]="viewMode()"
             [embedded]="embedded()"
+            [scrollElement]="scrollElement() ?? undefined"
           />
         }
 
@@ -54475,13 +54503,32 @@ class SymphiqBusinessAnalysisDashboardComponent {
             type: HostListener,
             args: ['document:keydown', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 301 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqBusinessAnalysisDashboardComponent, { className: "SymphiqBusinessAnalysisDashboardComponent", filePath: "lib/components/business-analysis-dashboard/symphiq-business-analysis-dashboard.component.ts", lineNumber: 303 }); })();
 
-function DashboardHeaderComponent_Conditional_24_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 4);
+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);
+    i0.ɵɵtext(2, "Generated At");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 16);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r0.metaLabelClass());
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r0.headerTitleClass());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.formattedGeneratedDate());
+} }
+function DashboardHeaderComponent_Conditional_33_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 5);
     i0.ɵɵtext(1, "\u203A");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 4);
+    i0.ɵɵelementStart(2, "span", 5);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -54492,11 +54539,11 @@ function DashboardHeaderComponent_Conditional_24_Conditional_3_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.currentSubsection, " ");
 } }
-function DashboardHeaderComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "span", 4);
+function DashboardHeaderComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "span", 5);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_24_Conditional_3_Template, 4, 3);
+    i0.ɵɵconditionalCreate(3, DashboardHeaderComponent_Conditional_33_Conditional_3_Template, 4, 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -54509,6 +54556,8 @@ function DashboardHeaderComponent_Conditional_24_Template(rf, ctx) { if (rf & 1)
 } }
 class DashboardHeaderComponent {
     constructor() {
+        this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
+        this.createdDate = input(...(ngDevMode ? [undefined, { debugName: "createdDate" }] : []));
         this.title = '';
         this.subtitle = '';
         this.viewMode = ViewModeEnum.LIGHT;
@@ -54517,6 +54566,17 @@ class DashboardHeaderComponent {
         this.viewModeClick = new EventEmitter();
         this.headerScrollService = inject(HeaderScrollService);
         this.isLightMode = computed(() => this.viewMode === ViewModeEnum.LIGHT, ...(ngDevMode ? [{ debugName: "isLightMode" }] : []));
+        this.dateFormatCache = new StringMemoizeCache$1();
+        this.formattedGeneratedDate = computed(() => {
+            let formatted = '';
+            const createdDate = this.createdDate();
+            if (createdDate) {
+                formatted = this.formatDate(createdDate.toISOString());
+            }
+            return formatted;
+        }, ...(ngDevMode ? [{ debugName: "formattedGeneratedDate" }] : []));
+        this.headerTitleClass = computed(() => this.isLightMode() ? 'text-slate-900' : 'text-white', ...(ngDevMode ? [{ debugName: "headerTitleClass" }] : []));
+        this.metaLabelClass = computed(() => this.isLightMode() ? 'text-slate-600' : 'text-slate-500', ...(ngDevMode ? [{ debugName: "metaLabelClass" }] : []));
     }
     onSearchClick() {
         this.searchClick.emit();
@@ -54524,6 +54584,14 @@ class DashboardHeaderComponent {
     onViewModeClick() {
         this.viewModeClick.emit();
     }
+    formatDate(dateString) {
+        // Cache date formatting operations
+        return this.dateFormatCache.get(dateString, (date) => new Date(date).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }));
+    }
     getHeaderClasses() {
         return this.isLightMode()
             ? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200'
@@ -54550,51 +54618,64 @@ 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: { title: "title", subtitle: "subtitle", viewMode: "viewMode", viewModeLabel: "viewModeLabel", currentSection: "currentSection", currentSubsection: "currentSubsection" }, outputs: { searchClick: "searchClick", viewModeClick: "viewModeClick" }, decls: 30, vars: 38, 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"], [3, "ngClass"], [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, "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) {
-            i0.ɵɵelementStart(0, "header", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div")(5, "h1", 4);
-            i0.ɵɵtext(6);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DashboardHeaderComponent, selectors: [["symphiq-dashboard-header"]], inputs: { requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], title: "title", subtitle: "subtitle", viewMode: "viewMode", viewModeLabel: "viewModeLabel", currentSection: "currentSection", currentSubsection: "currentSubsection", isLoading: "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) {
+            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();
-            i0.ɵɵelementStart(7, "p", 4);
-            i0.ɵɵtext(8);
+            i0.ɵɵconditionalCreate(8, DashboardHeaderComponent_Conditional_8_Template, 1, 0, "div", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "p", 5);
+            i0.ɵɵtext(10);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "div", 5)(10, "symphiq-search-button", 6);
-            i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Template_symphiq_search_button_searchClick_10_listener() { return ctx.onSearchClick(); });
+            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(11, "button", 7);
-            i0.ɵɵlistener("click", function DashboardHeaderComponent_Template_button_click_11_listener() { return ctx.onViewModeClick(); });
+            i0.ɵɵelementStart(13, "button", 9);
+            i0.ɵɵlistener("click", function DashboardHeaderComponent_Template_button_click_13_listener() { return ctx.onViewModeClick(); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(12, "svg", 8);
-            i0.ɵɵelement(13, "path", 9)(14, "path", 10);
+            i0.ɵɵelementStart(14, "svg", 10);
+            i0.ɵɵelement(15, "path", 11)(16, "path", 12);
             i0.ɵɵelementEnd();
             i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(15, "span");
-            i0.ɵɵtext(16);
+            i0.ɵɵelementStart(17, "span");
+            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(17, "div", 1)(18, "div", 11)(19, "div", 3)(20, "div", 12)(21, "h1", 4);
-            i0.ɵɵtext(22);
+            i0.ɵɵelementStart(26, "div", 1)(27, "div", 17)(28, "div", 3)(29, "div", 18)(30, "h1", 5);
+            i0.ɵɵtext(31);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(23, "div", 13);
-            i0.ɵɵconditionalCreate(24, DashboardHeaderComponent_Conditional_24_Template, 4, 3, "div", 14);
-            i0.ɵɵelementStart(25, "symphiq-search-button", 15);
-            i0.ɵɵlistener("searchClick", function DashboardHeaderComponent_Template_symphiq_search_button_searchClick_25_listener() { return ctx.onSearchClick(); });
+            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(26, "button", 16);
-            i0.ɵɵlistener("click", function DashboardHeaderComponent_Template_button_click_26_listener() { return ctx.onViewModeClick(); });
+            i0.ɵɵelementStart(35, "button", 22);
+            i0.ɵɵlistener("click", function DashboardHeaderComponent_Template_button_click_35_listener() { return ctx.onViewModeClick(); });
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(27, "svg", 8);
-            i0.ɵɵelement(28, "path", 9)(29, "path", 10);
+            i0.ɵɵelementStart(36, "svg", 10);
+            i0.ɵɵelement(37, "path", 11)(38, "path", 12);
             i0.ɵɵelementEnd()()()()()()();
         } if (rf & 2) {
+            let tmp_18_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());
             i0.ɵɵadvance();
             i0.ɵɵclassProp("pointer-events-none", ctx.headerScrollService.isScrolled())("pointer-events-auto", !ctx.headerScrollService.isScrolled());
-            i0.ɵɵadvance(3);
+            i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngClass", ctx.getMainTitleClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.title, " ");
             i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isLoading ? 8 : -1);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.getSubtitleClasses());
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.subtitle, " ");
@@ -54604,6 +54685,14 @@ class DashboardHeaderComponent {
             i0.ɵɵproperty("ngClass", ctx.getViewModeButtonClasses());
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate(ctx.viewModeLabel);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.formattedGeneratedDate() ? 20 : -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.ɵɵ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();
@@ -54613,7 +54702,7 @@ class DashboardHeaderComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.title, " ");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.currentSection ? 24 : -1);
+            i0.ɵɵconditional(ctx.currentSection ? 33 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("isLightMode", ctx.isLightMode())("minimized", true);
             i0.ɵɵadvance();
@@ -54627,103 +54716,120 @@ class DashboardHeaderComponent {
                 standalone: true,
                 imports: [CommonModule, SearchButtonComponent],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
-      <!-- Expanded Header (default state) -->
-      <div
-        class="transition-all duration-300 ease-in-out overflow-hidden"
-        [class.max-h-0]="headerScrollService.isScrolled()"
-        [class.opacity-0]="headerScrollService.isScrolled()"
-        [class.max-h-96]="!headerScrollService.isScrolled()"
-        [class.opacity-100]="!headerScrollService.isScrolled()">
-        <div
-          class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-          [class.pointer-events-none]="headerScrollService.isScrolled()"
-          [class.pointer-events-auto]="!headerScrollService.isScrolled()">
-          <div class="flex items-center justify-between">
-            <div>
-              <h1 [ngClass]="getMainTitleClasses()">
-                {{ title }}
-              </h1>
-              <p [ngClass]="getSubtitleClasses()">
-                {{ 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>
-          </div>
-        </div>
-      </div>
-
-      <!-- Condensed Header (scrolled state) -->
-      <div
-        class="transition-all duration-300 ease-in-out overflow-hidden"
-        [class.max-h-0]="!headerScrollService.isScrolled()"
-        [class.opacity-0]="!headerScrollService.isScrolled()"
-        [class.max-h-20]="headerScrollService.isScrolled()"
-        [class.opacity-100]="headerScrollService.isScrolled()">
-        <div
-          class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
-          [class.pointer-events-none]="!headerScrollService.isScrolled()"
-          [class.pointer-events-auto]="headerScrollService.isScrolled()">
-          <div class="flex items-center justify-between">
-            <div class="flex-1 min-w-0 mr-4">
-              <h1 [ngClass]="getCondensedTitleClasses()">
-                {{ title }}
-              </h1>
-            </div>
-            <div class="flex items-center gap-4">
-              @if (currentSection) {
-                <div class="flex items-center gap-2 text-sm flex-shrink-0">
-                  <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'">
-                    {{ currentSection }}
-                  </span>
-                  @if (currentSubsection) {
-                    <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'">›</span>
-                    <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'">
-                      {{ currentSubsection }}
-                    </span>
-                  }
-                </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>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
+                template: `
+    <header [ngClass]="getHeaderClasses()" class="sticky top-0 z-50">
+      <!-- Expanded Header (default state) -->
+      <div
+        class="transition-all duration-300 ease-in-out overflow-hidden"
+        [class.max-h-0]="headerScrollService.isScrolled()"
+        [class.opacity-0]="headerScrollService.isScrolled()"
+        [class.max-h-96]="!headerScrollService.isScrolled()"
+        [class.opacity-100]="!headerScrollService.isScrolled()">
+        <div
+          class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
+          [class.pointer-events-none]="headerScrollService.isScrolled()"
+          [class.pointer-events-auto]="!headerScrollService.isScrolled()">
+          <div class="flex items-center justify-between">
+            <div>
+              <div class="flex items-center gap-3">
+                <h1 [ngClass]="getMainTitleClasses()">
+                  {{ title }}
+                </h1>
+                @if (isLoading) {
+                  <div class="animate-spin w-4 h-4 border-2 border-blue-500/30 border-t-blue-500 rounded-full" title="Refreshing data..."></div>
+                }
+              </div>
+              <p [ngClass]="getSubtitleClasses()">
+                {{ 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>
+            <div class="flex flex-col gap-4 min-w-[180px]">
+              @if (formattedGeneratedDate()) {
+                <div class="text-left sm:text-right">
+                  <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Generated At</div>
+                  <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ formattedGeneratedDate() }}</div>
+                </div>
+              }
+              <div class="text-left sm:text-right">
+                <div [class]="metaLabelClass()" class="text-xs sm:text-sm">Requested by</div>
+                <div [class]="headerTitleClass()" class="text-sm sm:text-base font-medium">{{ requestedByUser()?.firstName }} {{ requestedByUser()?.lastName }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Condensed Header (scrolled state) -->
+      <div
+        class="transition-all duration-300 ease-in-out overflow-hidden"
+        [class.max-h-0]="!headerScrollService.isScrolled()"
+        [class.opacity-0]="!headerScrollService.isScrolled()"
+        [class.max-h-20]="headerScrollService.isScrolled()"
+        [class.opacity-100]="headerScrollService.isScrolled()">
+        <div
+          class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3"
+          [class.pointer-events-none]="!headerScrollService.isScrolled()"
+          [class.pointer-events-auto]="headerScrollService.isScrolled()">
+          <div class="flex items-center justify-between">
+            <div class="flex-1 min-w-0 mr-4">
+              <h1 [ngClass]="getCondensedTitleClasses()">
+                {{ title }}
+              </h1>
+            </div>
+            <div class="flex items-center gap-4">
+              @if (currentSection) {
+                <div class="flex items-center gap-2 text-sm flex-shrink-0">
+                  <span [ngClass]="isLightMode() ? 'text-slate-600 font-medium' : 'text-slate-400 font-medium'">
+                    {{ currentSection }}
+                  </span>
+                  @if (currentSubsection) {
+                    <span [ngClass]="isLightMode() ? 'text-slate-400' : 'text-slate-500'">›</span>
+                    <span [ngClass]="isLightMode() ? 'text-slate-500' : 'text-slate-500'">
+                      {{ currentSubsection }}
+                    </span>
+                  }
+                </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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
   `
             }]
-    }], null, { title: [{
+    }], 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: Input
         }], subtitle: [{
             type: Input
@@ -54735,12 +54841,14 @@ class DashboardHeaderComponent {
             type: Input
         }], currentSubsection: [{
             type: Input
+        }], isLoading: [{
+            type: Input
         }], searchClick: [{
             type: Output
         }], viewModeClick: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 108 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DashboardHeaderComponent, { className: "DashboardHeaderComponent", filePath: "lib/components/shared/dashboard-header.component.ts", lineNumber: 126 }); })();
 
 class GradeBadgeComponent {
     constructor() {
@@ -73147,13 +73255,13 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_11_Template(rf, ct
     i0.ɵɵelement(0, "symphiq-floating-toc", 8);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("sections", ctx_r0.tocSections())("viewMode", ctx_r0.viewMode)("embedded", ctx_r0.embedded);
+    i0.ɵɵproperty("sections", ctx_r0.tocSections())("viewMode", ctx_r0.viewMode)("embedded", ctx_r0.embedded)("scrollElement", ctx_r0.scrollElement ?? undefined);
 } }
 function SymphiqProfileAnalysisDashboardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-section-navigation", 8);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("sections", ctx_r0.tocSections())("viewMode", ctx_r0.viewMode)("embedded", ctx_r0.embedded);
+    i0.ɵɵproperty("sections", ctx_r0.tocSections())("viewMode", ctx_r0.viewMode)("embedded", ctx_r0.embedded)("scrollElement", ctx_r0.scrollElement ?? undefined);
 } }
 function SymphiqProfileAnalysisDashboardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "symphiq-goal-card", 12);
@@ -73211,9 +73319,45 @@ function SymphiqProfileAnalysisDashboardComponent_Conditional_23_Template(rf, ct
 class SymphiqProfileAnalysisDashboardComponent {
     constructor() {
         this.viewMode = ViewModeEnum.LIGHT;
+        this.requestedByUser = input(...(ngDevMode ? [undefined, { debugName: "requestedByUser" }] : []));
+        this.createdDate = input(...(ngDevMode ? [undefined, { debugName: "createdDate" }] : []));
         this.embedded = false;
         this.analysisType = ProfileAnalysisTypeEnum.SHOP;
         this.isOnboarded = false;
+        this.COLLAPSE_THRESHOLD = 20;
+        this.EXPAND_THRESHOLD = 10;
+        this.embeddedScrollEffect = effect(() => {
+            const scrollEvent = this.scrollEvent;
+            const isEmbedded = this.embedded;
+            if (isEmbedded && !scrollEvent) {
+                return;
+            }
+            if (!scrollEvent || !isEmbedded) {
+                return;
+            }
+            const detail = scrollEvent.detail;
+            if (!detail) {
+                return;
+            }
+            const scrollTop = detail.scrollTop || 0;
+            const currentState = this.headerScrollService.isScrolled();
+            if (!currentState && scrollTop > this.COLLAPSE_THRESHOLD) {
+                this.headerScrollService.isScrolled.set(true);
+            }
+            else if (currentState && scrollTop < this.EXPAND_THRESHOLD) {
+                this.headerScrollService.isScrolled.set(false);
+            }
+            const scrollElement = this.scrollElement;
+            if (scrollElement) {
+                const scrollHeight = scrollElement.scrollHeight || 0;
+                const clientHeight = scrollElement.clientHeight || 0;
+                const maxScroll = scrollHeight - clientHeight;
+                if (maxScroll > 0) {
+                    const progress = (scrollTop / maxScroll) * 100;
+                    this.scrollProgress.set(Math.min(100, Math.max(0, progress)));
+                }
+            }
+        }, ...(ngDevMode ? [{ debugName: "embeddedScrollEffect" }] : []));
         // Signal version of funnelAnalysis for reactive computed signals
         this.funnelAnalysisSignal = signal(undefined, ...(ngDevMode ? [{ debugName: "funnelAnalysisSignal" }] : []));
         this.headerScrollService = inject(HeaderScrollService);
@@ -73879,7 +74023,7 @@ class SymphiqProfileAnalysisDashboardComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.funnelModalComponent = _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: "viewMode", embedded: "embedded", profileAnalysis: "profileAnalysis", profile: "profile", funnelAnalysis: "funnelAnalysis", analysisType: "analysisType", focusAreaDetails: "focusAreaDetails", isOnboarded: "isOnboarded" }, features: [i0.ɵɵNgOnChangesFeature], decls: 27, vars: 42, consts: [[1, "min-h-screen", "relative", 3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "fixed", "inset-0", "bg-slate-900"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel"], [3, "viewMode", "currentStepId", "showNextStepAction"], [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"], [3, "close", "isOpen", "isLightMode"], [3, "close", "modeSelected", "isOpen", "currentMode", "viewMode"], [3, "isLightMode", "allMetrics", "allInsights", "allBusinessInsights", "allCharts"], [3, "goal", "viewMode", "isInModal", "allMetrics", "allCharts", "allInsights", "currentModalState"], [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"], [1, "absolute", "inset-0", "bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))]", "from-slate-800", "via-slate-900", "to-slate-900"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "viewMoreClick", "goals", "viewMode"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights"], ["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"], ["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"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { viewMode: "viewMode", requestedByUser: [1, "requestedByUser"], createdDate: [1, "createdDate"], embedded: "embedded", profileAnalysis: "profileAnalysis", profile: "profile", funnelAnalysis: "funnelAnalysis", analysisType: "analysisType", focusAreaDetails: "focusAreaDetails", isOnboarded: "isOnboarded", scrollEvent: "scrollEvent", scrollElement: "scrollElement", isLoading: "isLoading" }, features: [i0.ɵɵNgOnChangesFeature], decls: 27, vars: 45, consts: [[1, "min-h-screen", "relative", 3, "ngClass"], [1, "h-full", "transition-all", "duration-200", "ease-out", 3, "ngClass"], [1, "fixed", "inset-0", "bg-slate-900"], [1, "relative", "z-[51]"], [3, "searchClick", "viewModeClick", "title", "subtitle", "currentSection", "viewMode", "viewModeLabel", "isLoading", "requestedByUser", "createdDate"], [3, "viewMode", "currentStepId", "showNextStepAction"], [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"], [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"], [1, "absolute", "inset-0", "bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))]", "from-slate-800", "via-slate-900", "to-slate-900"], [3, "viewMode", "businessName", "isOnboarded"], [3, "viewMode", "focusAreaDomain", "focusAreaName", "focusAreaDetails"], [3, "viewMode", "metricName", "isOnboarded"], [1, "mb-8"], [3, "viewMoreClick", "goals", "viewMode"], [3, "sections", "viewMode", "executiveSummary", "focusAreaExecutiveSummary", "metricExecutiveSummary", "metricName", "allGoals", "allMetrics", "allCharts", "allInsights"], ["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"], ["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"]], template: function SymphiqProfileAnalysisDashboardComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div");
             i0.ɵɵelement(2, "div", 1);
             i0.ɵɵelementEnd();
@@ -73893,8 +74037,8 @@ class SymphiqProfileAnalysisDashboardComponent {
             i0.ɵɵconditionalCreate(9, SymphiqProfileAnalysisDashboardComponent_Conditional_9_Template, 3, 3);
             i0.ɵɵconditionalCreate(10, SymphiqProfileAnalysisDashboardComponent_Conditional_10_Template, 5, 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(11, SymphiqProfileAnalysisDashboardComponent_Conditional_11_Template, 1, 3, "symphiq-floating-toc", 8);
-            i0.ɵɵconditionalCreate(12, SymphiqProfileAnalysisDashboardComponent_Conditional_12_Template, 1, 3, "symphiq-section-navigation", 8);
+            i0.ɵɵconditionalCreate(11, SymphiqProfileAnalysisDashboardComponent_Conditional_11_Template, 1, 4, "symphiq-floating-toc", 8);
+            i0.ɵɵconditionalCreate(12, SymphiqProfileAnalysisDashboardComponent_Conditional_12_Template, 1, 4, "symphiq-section-navigation", 8);
             i0.ɵɵelementStart(13, "symphiq-search-modal", 9);
             i0.ɵɵlistener("close", function SymphiqProfileAnalysisDashboardComponent_Template_symphiq_search_modal_close_13_listener() { return ctx.closeSearch(); });
             i0.ɵɵelementEnd();
@@ -73915,14 +74059,15 @@ class SymphiqProfileAnalysisDashboardComponent {
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             let tmp_5_0;
-            let tmp_26_0;
-            let tmp_27_0;
-            let tmp_28_0;
+            let tmp_12_0;
             let tmp_29_0;
             let tmp_30_0;
             let tmp_31_0;
             let tmp_32_0;
             let tmp_33_0;
+            let tmp_34_0;
+            let tmp_35_0;
+            let tmp_36_0;
             i0.ɵɵproperty("ngClass", ctx.getContainerClasses());
             i0.ɵɵadvance();
             i0.ɵɵclassMap(ctx.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");
@@ -73932,7 +74077,7 @@ class SymphiqProfileAnalysisDashboardComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLightMode() ? 3 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("title", ((tmp_5_0 = ctx.currentAnalysis()) == 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());
+            i0.ɵɵproperty("title", ((tmp_5_0 = ctx.currentAnalysis()) == 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.currentAnalysis()) == null ? null : tmp_12_0.selfContentCompletedDate);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isSimplifiedView() && !ctx.isOnboarded ? 6 : -1);
             i0.ɵɵadvance(2);
@@ -73952,21 +74097,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_26_0 = ctx.modalType() === "goal-detail" && ctx.getGoalDetailData()) ? 16 : -1, tmp_26_0);
+            i0.ɵɵconditional((tmp_29_0 = ctx.modalType() === "goal-detail" && ctx.getGoalDetailData()) ? 16 : -1, tmp_29_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_27_0 = ctx.modalType() === "goal-objectives" && ctx.getGoalDetailData()) ? 17 : -1, tmp_27_0);
+            i0.ɵɵconditional((tmp_30_0 = ctx.modalType() === "goal-objectives" && ctx.getGoalDetailData()) ? 17 : -1, tmp_30_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_28_0 = ctx.modalType() === "objective-strategies" && ctx.getObjectiveStrategiesData()) ? 18 : -1, tmp_28_0);
+            i0.ɵɵconditional((tmp_31_0 = ctx.modalType() === "objective-strategies" && ctx.getObjectiveStrategiesData()) ? 18 : -1, tmp_31_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_29_0 = ctx.modalType() === "strategy-recommendations" && ctx.getStrategyRecommendationsData()) ? 19 : -1, tmp_29_0);
+            i0.ɵɵconditional((tmp_32_0 = ctx.modalType() === "strategy-recommendations" && ctx.getStrategyRecommendationsData()) ? 19 : -1, tmp_32_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_30_0 = ctx.modalType() === "category-detail" && ctx.getCategoryDetailData()) ? 20 : -1, tmp_30_0);
+            i0.ɵɵconditional((tmp_33_0 = ctx.modalType() === "category-detail" && ctx.getCategoryDetailData()) ? 20 : -1, tmp_33_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_31_0 = ctx.modalType() === "strength-detail" && ctx.getStrengthDetailData()) ? 21 : -1, tmp_31_0);
+            i0.ɵɵconditional((tmp_34_0 = ctx.modalType() === "strength-detail" && ctx.getStrengthDetailData()) ? 21 : -1, tmp_34_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_32_0 = ctx.modalType() === "gap-detail" && ctx.getGapDetailData()) ? 22 : -1, tmp_32_0);
+            i0.ɵɵconditional((tmp_35_0 = ctx.modalType() === "gap-detail" && ctx.getGapDetailData()) ? 22 : -1, tmp_35_0);
             i0.ɵɵadvance();
-            i0.ɵɵconditional((tmp_33_0 = ctx.modalType() === "opportunity-detail" && ctx.getOpportunityDetailData()) ? 23 : -1, tmp_33_0);
+            i0.ɵɵconditional((tmp_36_0 = ctx.modalType() === "opportunity-detail" && ctx.getOpportunityDetailData()) ? 23 : -1, tmp_36_0);
             i0.ɵɵadvance();
             i0.ɵɵproperty("isLightMode", ctx.isLightMode())("viewMode", ctx.viewMode)("allMetrics", ctx.allMetrics())("allInsights", ctx.allInsights())("allCharts", ctx.allCharts());
             i0.ɵɵadvance();
@@ -73980,514 +74125,527 @@ 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],
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                template: `
-    <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
-      <!-- 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>
-
-      <!-- Background -->
-      @if (!isLightMode()) {
-        <div class="fixed inset-0 bg-slate-900">
-          <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-slate-800 via-slate-900 to-slate-900"></div>
-        </div>
-      }
-
-      <div class="relative z-[51]">
-        <!-- Dashboard Header -->
-        <symphiq-dashboard-header
-          [title]="currentAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
-          [subtitle]="getAnalysisSubtitle()"
-          [currentSection]="getAnalysisSubtitle()"
-          [viewMode]="viewMode"
-          [viewModeLabel]="displayModeLabel()"
-          (searchClick)="openSearch()"
-          (viewModeClick)="openViewModeSwitcher()"
-        />
-
-        <!-- Journey Progress Banner -->
-        @if (isSimplifiedView() && !isOnboarded) {
-          <symphiq-journey-progress-indicator
-            [viewMode]="viewMode"
-            [currentStepId]="isMetricAnalysis() ? 'metric-analysis' : (isFocusAreaAnalysis() ? 'focus-area-analysis' : 'shop-analysis')"
-            [showNextStepAction]="false"
-          />
-        }
-
-      <!-- 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">
-
-        <!-- Welcome Banner (Simplified View Only) -->
-        @if (isSimplifiedView()) {
-          <div class="mb-12">
-            @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
-              <symphiq-shop-welcome-banner
-                [viewMode]="viewMode"
-                [businessName]="currentAnalysis()?.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]="currentAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
-                [isOnboarded]="isOnboarded"
-              />
-            }
-          </div>
-        }
-
-        <!-- Simplified View Content -->
-        @if (isSimplifiedView()) {
-          <!-- Strategic Insights & Goals -->
-          <div class="mb-8">
-            <symphiq-strategic-goals-tiled-grid
-              [goals]="strategicRoadmapGoals()"
-              [viewMode]="viewMode"
-              (viewMoreClick)="openGoalModal($event)"
-            />
-          </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()"
-              />
-            </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()"
-                />
-              </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"
-        />
-      }
-
-      <!-- Section Navigation Dots (Compact & Expanded Views) -->
-      @if (!isSimplifiedView() && sections()) {
-        <symphiq-section-navigation
-          [sections]="tocSections()"
-          [viewMode]="viewMode"
-          [embedded]="embedded"
-        />
-      }
-
-      <!-- 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()"
-          />
-        }
-        @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 />
-    </div>
+                template: `
+    <div [ngClass]="getContainerClasses()" class="min-h-screen relative">
+      <!-- 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>
+
+      <!-- Background -->
+      @if (!isLightMode()) {
+        <div class="fixed inset-0 bg-slate-900">
+          <div
+              class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-slate-800 via-slate-900 to-slate-900"></div>
+        </div>
+      }
+
+      <div class="relative z-[51]">
+        <!-- Dashboard Header -->
+        <symphiq-dashboard-header
+            [title]="currentAnalysis()?.profileAnalysisStructured?.businessName || 'Profile Analysis'"
+            [subtitle]="getAnalysisSubtitle()"
+            [currentSection]="getAnalysisSubtitle()"
+            [viewMode]="viewMode"
+            [viewModeLabel]="displayModeLabel()"
+            [isLoading]="isLoading"
+            [requestedByUser]="requestedByUser()"
+            [createdDate]="currentAnalysis()?.selfContentCompletedDate"
+            (searchClick)="openSearch()"
+            (viewModeClick)="openViewModeSwitcher()"
+        />
+
+        <!-- Journey Progress Banner -->
+        @if (isSimplifiedView() && !isOnboarded) {
+          <symphiq-journey-progress-indicator
+              [viewMode]="viewMode"
+              [currentStepId]="isMetricAnalysis() ? 'metric-analysis' : (isFocusAreaAnalysis() ? 'focus-area-analysis' : 'shop-analysis')"
+              [showNextStepAction]="false"
+          />
+        }
+
+        <!-- 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">
+
+          <!-- Welcome Banner (Simplified View Only) -->
+          @if (isSimplifiedView()) {
+            <div class="mb-12">
+              @if (!isFocusAreaAnalysis() && !isMetricAnalysis()) {
+                <symphiq-shop-welcome-banner
+                    [viewMode]="viewMode"
+                    [businessName]="currentAnalysis()?.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]="currentAnalysis()?.profileAnalysisStructured?.metricExecutiveSummary?.metric"
+                    [isOnboarded]="isOnboarded"
+                />
+              }
+            </div>
+          }
+
+          <!-- Simplified View Content -->
+          @if (isSimplifiedView()) {
+            <!-- Strategic Insights & Goals -->
+            <div class="mb-8">
+              <symphiq-strategic-goals-tiled-grid
+                  [goals]="strategicRoadmapGoals()"
+                  [viewMode]="viewMode"
+                  (viewMoreClick)="openGoalModal($event)"
+              />
+            </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()"
+                />
+              </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()"
+                    />
+                  </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()"
+            />
+          }
+          @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/>
+      </div>
   `
             }]
     }], () => [], { funnelModalComponent: [{
@@ -74495,7 +74653,7 @@ class SymphiqProfileAnalysisDashboardComponent {
             args: [ModalComponent]
         }], viewMode: [{
             type: Input
-        }], embedded: [{
+        }], requestedByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestedByUser", required: false }] }], createdDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "createdDate", required: false }] }], embedded: [{
             type: Input
         }], profileAnalysis: [{
             type: Input
@@ -74509,11 +74667,17 @@ class SymphiqProfileAnalysisDashboardComponent {
             type: Input
         }], isOnboarded: [{
             type: Input
+        }], scrollEvent: [{
+            type: Input
+        }], scrollElement: [{
+            type: Input
+        }], isLoading: [{
+            type: Input
         }], onWindowScroll: [{
             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: 581 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SymphiqProfileAnalysisDashboardComponent, { className: "SymphiqProfileAnalysisDashboardComponent", filePath: "lib/components/profile-analysis-dashboard/symphiq-profile-analysis-dashboard.component.ts", lineNumber: 613 }); })();
 
 class ScrollProgressBarComponent {
     constructor() {