@memberjunction/ng-core-entity-forms 6.1.0-edge.2 → 6.1.0-edge.3

package/dist/lib/custom/Conversations/conversation-overview.panel.js

@@ -0,0 +1,199 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChangeDetectionStrategy, inject, ChangeDetectorRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RunView } from '@memberjunction/core';
+import { RegisterClassEx } from '@memberjunction/global';
+import { BaseFormPanel } from '@memberjunction/ng-base-forms';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.ID;
+function ConversationOverviewPanel_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 11);
+    i0.ɵɵtext(1, "No messages in this conversation yet.");
+    i0.ɵɵdomElementEnd();
+} }
+function ConversationOverviewPanel_Conditional_33_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 7)(1, "span", 12)(2, "strong");
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "span", 13);
+    i0.ɵɵtext(6);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const msg_r1 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", msg_r1.Role, ":");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", msg_r1.Message, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("mj-pill-blue", msg_r1.Role === "user")("mj-pill-green", msg_r1.Role !== "user");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", msg_r1.Role, " ");
+} }
+function ConversationOverviewPanel_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ConversationOverviewPanel_Conditional_33_For_1_Template, 7, 7, "div", 7, _forTrack0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r1.RecentMessages);
+} }
+let ConversationOverviewPanel = class ConversationOverviewPanel extends BaseFormPanel {
+    constructor() {
+        super(...arguments);
+        this.cdr = inject(ChangeDetectorRef);
+        this.Messages = [];
+    }
+    ngOnInit() {
+        this.LoadConversationMessages();
+    }
+    get UserMessageCount() {
+        return this.Messages.filter(m => m.Role?.toLowerCase() === 'user').length;
+    }
+    get AgentMessageCount() {
+        return this.Messages.filter(m => m.Role?.toLowerCase() !== 'user').length;
+    }
+    get RecentMessages() {
+        return this.Messages.slice(0, 4);
+    }
+    async LoadConversationMessages() {
+        if (!this.Record?.ID)
+            return;
+        try {
+            const rv = new RunView();
+            const res = await rv.RunView({
+                EntityName: 'Conversation Details',
+                ExtraFilter: `ConversationID = '${this.Record.ID}'`,
+                Fields: ['ID', 'Role', 'Message', '__mj_CreatedAt'],
+                OrderBy: '__mj_CreatedAt DESC',
+                MaxRows: 50,
+                ResultType: 'simple'
+            });
+            if (res.Success && res.Results) {
+                this.Messages = res.Results;
+                this.cdr.markForCheck();
+            }
+        }
+        catch (e) {
+            console.error('Failed to load conversation details:', e);
+        }
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵConversationOverviewPanel_BaseFactory; return function ConversationOverviewPanel_Factory(__ngFactoryType__) { return (ɵConversationOverviewPanel_BaseFactory || (ɵConversationOverviewPanel_BaseFactory = i0.ɵɵgetInheritedFactory(ConversationOverviewPanel)))(__ngFactoryType__ || ConversationOverviewPanel); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConversationOverviewPanel, selectors: [["mj-conversation-overview-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 34, vars: 5, consts: [[1, "mj-convo-overview-grid"], [1, "mj-overview-card"], [1, "mj-card-header"], [1, "mj-card-title"], [1, "fa-solid", "fa-comments", 2, "color", "var(--mj-brand-primary, #38bdf8)"], [1, "mj-card-badge"], [1, "mj-card-body"], [1, "mj-metric-row"], [1, "mj-metric-label"], [1, "mj-metric-val"], [1, "fa-solid", "fa-clock-rotate-left", 2, "color", "#10b981"], [2, "font-size", "12px", "color", "var(--mj-text-muted)"], [1, "mj-metric-label", 2, "text-overflow", "ellipsis", "overflow", "hidden", "white-space", "nowrap", "max-width", "200px"], [1, "mj-pill"]], template: function ConversationOverviewPanel_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
+            i0.ɵɵdomElement(4, "i", 4);
+            i0.ɵɵtext(5, " Turn Summary");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(6, "span", 5);
+            i0.ɵɵtext(7);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(8, "div", 6)(9, "div", 7)(10, "span", 8);
+            i0.ɵɵtext(11, "Total Messages");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(12, "span", 9);
+            i0.ɵɵtext(13);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(14, "div", 7)(15, "span", 8);
+            i0.ɵɵtext(16, "User Prompts");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(17, "span", 9);
+            i0.ɵɵtext(18);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(19, "div", 7)(20, "span", 8);
+            i0.ɵɵtext(21, "Agent Responses");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(22, "span", 9);
+            i0.ɵɵtext(23);
+            i0.ɵɵdomElementEnd()()()();
+            i0.ɵɵdomElementStart(24, "div", 1)(25, "div", 2)(26, "div", 3);
+            i0.ɵɵdomElement(27, "i", 10);
+            i0.ɵɵtext(28, " Recent Turns");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(29, "span", 5);
+            i0.ɵɵtext(30, "History");
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(31, "div", 6);
+            i0.ɵɵconditionalCreate(32, ConversationOverviewPanel_Conditional_32_Template, 2, 0, "span", 11)(33, ConversationOverviewPanel_Conditional_33_Template, 2, 0);
+            i0.ɵɵdomElementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate1("", ctx.Messages.length, " Turns");
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.Messages.length);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.UserMessageCount);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.AgentMessageCount);
+            i0.ɵɵadvance(9);
+            i0.ɵɵconditional(ctx.Messages.length === 0 ? 32 : 33);
+        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-convo-overview-grid[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header[_ngcontent-%COMP%] {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title[_ngcontent-%COMP%] {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge[_ngcontent-%COMP%] {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body[_ngcontent-%COMP%] {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label[_ngcontent-%COMP%] { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val[_ngcontent-%COMP%] { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-pill[_ngcontent-%COMP%] { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green[_ngcontent-%COMP%] { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue[_ngcontent-%COMP%] { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }"], changeDetection: 0 }); }
+};
+ConversationOverviewPanel = __decorate([
+    RegisterClassEx(BaseFormPanel, {
+        key: 'form-panel:Conversations:overview',
+        metadata: {
+            entity: 'Conversations',
+            slot: 'before-fields',
+            sortKey: 10,
+        },
+    })
+], ConversationOverviewPanel);
+export { ConversationOverviewPanel };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConversationOverviewPanel, [{
+        type: Component,
+        args: [{ selector: 'mj-conversation-overview-panel', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <div class="mj-convo-overview-grid">
+            <!-- Card 1: Message Flow Metrics -->
+            <div class="mj-overview-card">
+                <div class="mj-card-header">
+                    <div class="mj-card-title"><i class="fa-solid fa-comments" style="color: var(--mj-brand-primary, #38bdf8);"></i> Turn Summary</div>
+                    <span class="mj-card-badge">{{ Messages.length }} Turns</span>
+                </div>
+                <div class="mj-card-body">
+                    <div class="mj-metric-row">
+                        <span class="mj-metric-label">Total Messages</span>
+                        <span class="mj-metric-val">{{ Messages.length }}</span>
+                    </div>
+                    <div class="mj-metric-row">
+                        <span class="mj-metric-label">User Prompts</span>
+                        <span class="mj-metric-val">{{ UserMessageCount }}</span>
+                    </div>
+                    <div class="mj-metric-row">
+                        <span class="mj-metric-label">Agent Responses</span>
+                        <span class="mj-metric-val">{{ AgentMessageCount }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Card 2: Recent Activity Stream -->
+            <div class="mj-overview-card">
+                <div class="mj-card-header">
+                    <div class="mj-card-title"><i class="fa-solid fa-clock-rotate-left" style="color: #10b981;"></i> Recent Turns</div>
+                    <span class="mj-card-badge">History</span>
+                </div>
+                <div class="mj-card-body">
+                    @if (Messages.length === 0) {
+                        <span style="font-size: 12px; color: var(--mj-text-muted);">No messages in this conversation yet.</span>
+                    } @else {
+                        @for (msg of RecentMessages; track msg.ID) {
+                            <div class="mj-metric-row">
+                                <span class="mj-metric-label" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 200px;">
+                                    <strong>{{ msg.Role }}:</strong> {{ msg.Message }}
+                                </span>
+                                <span class="mj-pill" [class.mj-pill-blue]="msg.Role === 'user'" [class.mj-pill-green]="msg.Role !== 'user'">
+                                    {{ msg.Role }}
+                                </span>
+                            </div>
+                        }
+                    }
+                </div>
+            </div>
+        </div>
+    `, styles: ["\n        :host { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-convo-overview-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-pill { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }\n    "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConversationOverviewPanel, { className: "ConversationOverviewPanel", filePath: "src/lib/custom/Conversations/conversation-overview.panel.ts", lineNumber: 135 }); })();
+//# sourceMappingURL=conversation-overview.panel.js.map

package/dist/lib/custom/Conversations/conversation-overview.panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-overview.panel.js","sourceRoot":"","sources":["../../../../src/lib/custom/Conversations/conversation-overview.panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAU,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;;;;IAuDtC,mCAA4D;IAAA,qDAAqC;IAAA,oBAAO;;;IAK5F,AADJ,AADJ,iCAA2B,eACiG,aAC5G;IAAA,YAAe;IAAA,oBAAS;IAAC,YACrC;IAAA,oBAAO;IACP,mCAA6G;IACzG,YACJ;IACJ,AADI,oBAAO,EACL;;;IALU,eAAe;IAAf,2CAAe;IAAU,cACrC;IADqC,+CACrC;IACsB,cAA0C;IAAC,AAA3C,sDAA0C,yCAA4C;IACxG,cACJ;IADI,4CACJ;;;IAPR,2GASC;;;IATD,oCASC;;AAgElB,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,aAAmC;IAA3E;;QACK,QAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;QACjC,aAAQ,GAA4B,EAAE,CAAC;KAsCjD;IApCU,QAAQ;QACX,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACpC,CAAC;IAED,IAAW,gBAAgB;QACvB,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,MAAM,CAAC;IAC9E,CAAC;IAED,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,MAAM,CAAC,CAAC,MAAM,CAAC;IAC9E,CAAC;IAED,IAAW,cAAc;QACrB,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACrC,CAAC;IAEO,KAAK,CAAC,wBAAwB;QAClC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;YAAE,OAAO;QAC7B,IAAI,CAAC;YACD,MAAM,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;YACzB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC,OAAO,CAAwB;gBAChD,UAAU,EAAE,sBAAsB;gBAClC,WAAW,EAAE,qBAAqB,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG;gBACnD,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,CAAC;gBACnD,OAAO,EAAE,qBAAqB;gBAC9B,OAAO,EAAE,EAAE;gBACX,UAAU,EAAE,QAAQ;aACvB,CAAC,CAAC;YACH,IAAI,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;gBAC7B,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC;gBAC5B,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;YAC5B,CAAC;QACL,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACT,OAAO,CAAC,KAAK,CAAC,sCAAsC,EAAE,CAAC,CAAC,CAAC;QAC7D,CAAC;IACL,CAAC;wRAvCQ,yBAAyB,yBAAzB,yBAAyB;oEAAzB,yBAAyB;YAtGlB,AADJ,AADJ,AAFJ,iCAAoC,aAEF,aACE,aACG;YAAA,0BAAqF;YAAC,6BAAY;YAAA,oBAAM;YACnI,kCAA4B;YAAA,YAA2B;YAC3D,AAD2D,oBAAO,EAC5D;YAGE,AADJ,AADJ,iCAA0B,aACK,eACO;YAAA,+BAAc;YAAA,oBAAO;YACnD,mCAA4B;YAAA,aAAqB;YACrD,AADqD,oBAAO,EACtD;YAEF,AADJ,kCAA2B,eACO;YAAA,6BAAY;YAAA,oBAAO;YACjD,mCAA4B;YAAA,aAAsB;YACtD,AADsD,oBAAO,EACvD;YAEF,AADJ,kCAA2B,eACO;YAAA,gCAAe;YAAA,oBAAO;YACpD,mCAA4B;YAAA,aAAuB;YAG/D,AADI,AADI,AADuD,oBAAO,EACxD,EACJ,EACJ;YAKE,AADJ,AADJ,kCAA8B,cACE,cACG;YAAA,4BAAqE;YAAC,8BAAY;YAAA,oBAAM;YACnH,mCAA4B;YAAA,wBAAO;YACvC,AADuC,oBAAO,EACxC;YACN,kCAA0B;YAGpB,AAFF,+FAA6B,6DAEpB;YAcrB,AADI,AADI,oBAAM,EACJ,EACJ;;YAzCkC,eAA2B;YAA3B,wDAA2B;YAKvB,eAAqB;YAArB,yCAAqB;YAIrB,eAAsB;YAAtB,0CAAsB;YAItB,eAAuB;YAAvB,2CAAuB;YAYvD,eAaC;YAbD,qDAaC;4BA9CP,YAAY;;AA6Gb,yBAAyB;IAxHrC,eAAe,CAAC,aAAa,EAAE;QAC5B,GAAG,EAAE,mCAAmC;QACxC,QAAQ,EAAE;YACN,MAAM,EAAE,eAAe;YACvB,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,EAAE;SACd;KACJ,CAAC;GAiHW,yBAAyB,CAwCrC;;iFAxCY,yBAAyB;cAhHrC,SAAS;2BACI,gCAAgC,cAC9B,IAAI,WACP,CAAC,YAAY,CAAC,mBACN,uBAAuB,CAAC,MAAM,YACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDT;;kFA2DQ,yBAAyB","sourcesContent":["import { Component, ChangeDetectionStrategy, OnInit, inject, ChangeDetectorRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RunView } from '@memberjunction/core';\nimport { RegisterClassEx } from '@memberjunction/global';\nimport { BaseFormPanel } from '@memberjunction/ng-base-forms';\nimport { MJConversationEntity } from '@memberjunction/core-entities';\n\ninterface ConversationDetailRow {\n    ID: string;\n    Role: string;\n    Message: string;\n    CreatedAt: string;\n}\n\n@RegisterClassEx(BaseFormPanel, {\n    key: 'form-panel:Conversations:overview',\n    metadata: {\n        entity: 'Conversations',\n        slot: 'before-fields',\n        sortKey: 10,\n    },\n})\n@Component({\n    selector: 'mj-conversation-overview-panel',\n    standalone: true,\n    imports: [CommonModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        <div class=\"mj-convo-overview-grid\">\n            <!-- Card 1: Message Flow Metrics -->\n            <div class=\"mj-overview-card\">\n                <div class=\"mj-card-header\">\n                    <div class=\"mj-card-title\"><i class=\"fa-solid fa-comments\" style=\"color: var(--mj-brand-primary, #38bdf8);\"></i> Turn Summary</div>\n                    <span class=\"mj-card-badge\">{{ Messages.length }} Turns</span>\n                </div>\n                <div class=\"mj-card-body\">\n                    <div class=\"mj-metric-row\">\n                        <span class=\"mj-metric-label\">Total Messages</span>\n                        <span class=\"mj-metric-val\">{{ Messages.length }}</span>\n                    </div>\n                    <div class=\"mj-metric-row\">\n                        <span class=\"mj-metric-label\">User Prompts</span>\n                        <span class=\"mj-metric-val\">{{ UserMessageCount }}</span>\n                    </div>\n                    <div class=\"mj-metric-row\">\n                        <span class=\"mj-metric-label\">Agent Responses</span>\n                        <span class=\"mj-metric-val\">{{ AgentMessageCount }}</span>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Card 2: Recent Activity Stream -->\n            <div class=\"mj-overview-card\">\n                <div class=\"mj-card-header\">\n                    <div class=\"mj-card-title\"><i class=\"fa-solid fa-clock-rotate-left\" style=\"color: #10b981;\"></i> Recent Turns</div>\n                    <span class=\"mj-card-badge\">History</span>\n                </div>\n                <div class=\"mj-card-body\">\n                    @if (Messages.length === 0) {\n                        <span style=\"font-size: 12px; color: var(--mj-text-muted);\">No messages in this conversation yet.</span>\n                    } @else {\n                        @for (msg of RecentMessages; track msg.ID) {\n                            <div class=\"mj-metric-row\">\n                                <span class=\"mj-metric-label\" style=\"text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 200px;\">\n                                    <strong>{{ msg.Role }}:</strong> {{ msg.Message }}\n                                </span>\n                                <span class=\"mj-pill\" [class.mj-pill-blue]=\"msg.Role === 'user'\" [class.mj-pill-green]=\"msg.Role !== 'user'\">\n                                    {{ msg.Role }}\n                                </span>\n                            </div>\n                        }\n                    }\n                </div>\n            </div>\n        </div>\n    `,\n    styles: [`\n        :host { display: block; width: 100%; margin-bottom: 20px; }\n        .mj-convo-overview-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 16px;\n        }\n        .mj-overview-card {\n            background: var(--mj-bg-surface-card, #141f36);\n            border: 1px solid var(--mj-border-default, #223254);\n            border-radius: 10px;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n        }\n        .mj-card-header {\n            padding: 10px 14px;\n            background: var(--mj-bg-surface, #111a2e);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .mj-card-title {\n            font-size: 12.5px;\n            font-weight: 700;\n            color: var(--mj-text-primary, #f8fafc);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        .mj-card-badge {\n            font-size: 11px;\n            padding: 2px 7px;\n            border-radius: 9999px;\n            background: var(--mj-bg-surface-elevated, #1a2744);\n            color: var(--mj-text-secondary, #94a3b8);\n            border: 1px solid var(--mj-border-default, #223254);\n        }\n        .mj-card-body {\n            padding: 14px;\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n        .mj-metric-row {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            font-size: 12px;\n        }\n        .mj-metric-label { color: var(--mj-text-secondary, #94a3b8); }\n        .mj-metric-val { font-weight: 600; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n        .mj-pill { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }\n        .mj-pill-green { background: rgba(16, 185, 129, 0.15); color: #10b981; }\n        .mj-pill-blue { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }\n    `]\n})\nexport class ConversationOverviewPanel extends BaseFormPanel<MJConversationEntity> implements OnInit {\n    private cdr = inject(ChangeDetectorRef);\n    public Messages: ConversationDetailRow[] = [];\n\n    public ngOnInit(): void {\n        this.LoadConversationMessages();\n    }\n\n    public get UserMessageCount(): number {\n        return this.Messages.filter(m => m.Role?.toLowerCase() === 'user').length;\n    }\n\n    public get AgentMessageCount(): number {\n        return this.Messages.filter(m => m.Role?.toLowerCase() !== 'user').length;\n    }\n\n    public get RecentMessages(): ConversationDetailRow[] {\n        return this.Messages.slice(0, 4);\n    }\n\n    private async LoadConversationMessages(): Promise<void> {\n        if (!this.Record?.ID) return;\n        try {\n            const rv = new RunView();\n            const res = await rv.RunView<ConversationDetailRow>({\n                EntityName: 'Conversation Details',\n                ExtraFilter: `ConversationID = '${this.Record.ID}'`,\n                Fields: ['ID', 'Role', 'Message', '__mj_CreatedAt'],\n                OrderBy: '__mj_CreatedAt DESC',\n                MaxRows: 50,\n                ResultType: 'simple'\n            });\n            if (res.Success && res.Results) {\n                this.Messages = res.Results;\n                this.cdr.markForCheck();\n            }\n        } catch (e) {\n            console.error('Failed to load conversation details:', e);\n        }\n    }\n}\n"]}

package/dist/lib/custom/Employees/employee-header.panel.d.ts

@@ -0,0 +1,12 @@
+import { BaseFormPanel } from '@memberjunction/ng-base-forms';
+import { MJEmployeeEntity } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+export declare class EmployeeHeaderPanel extends BaseFormPanel<MJEmployeeEntity> {
+    IsCollapsed: boolean;
+    ngOnInit(): void;
+    get Employee(): MJEmployeeEntity | null;
+    ToggleCollapsed(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EmployeeHeaderPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EmployeeHeaderPanel, "mj-employee-header-panel", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=employee-header.panel.d.ts.map

package/dist/lib/custom/Employees/employee-header.panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"employee-header.panel.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Employees/employee-header.panel.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAkB,MAAM,+BAA+B,CAAC;;AAIjF,qBA2Fa,mBAAoB,SAAQ,aAAa,CAAC,gBAAgB,CAAC;IAC7D,WAAW,UAAS;IAEpB,QAAQ,IAAI,IAAI;IAKvB,IAAW,QAAQ,IAAI,gBAAgB,GAAG,IAAI,CAE7C;IAEM,eAAe,IAAI,IAAI;yCAZrB,mBAAmB;2CAAnB,mBAAmB;CAgB/B"}

package/dist/lib/custom/Employees/employee-header.panel.js

@@ -0,0 +1,180 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RegisterClassEx } from '@memberjunction/global';
+import { BaseFormPanel } from '@memberjunction/ng-base-forms';
+import { UserInfoEngine } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+function EmployeeHeaderPanel_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span");
+    i0.ɵɵtext(1, "\u2022");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.Employee.Email);
+} }
+function EmployeeHeaderPanel_Conditional_0_Conditional_15_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 11)(1, "span", 12);
+    i0.ɵɵtext(2, "Phone");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "span", 13);
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.Employee.Phone);
+} }
+function EmployeeHeaderPanel_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 10)(1, "div", 11)(2, "span", 12);
+    i0.ɵɵtext(3, "Employee ID");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "span", 13);
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(6, "div", 11)(7, "span", 12);
+    i0.ɵɵtext(8, "Status");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(9, "span", 14);
+    i0.ɵɵtext(10, "Active");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵconditionalCreate(11, EmployeeHeaderPanel_Conditional_0_Conditional_15_Conditional_11_Template, 5, 1, "div", 11);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.Employee.ID == null ? null : ctx_r1.Employee.ID.substring(0, 8));
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r1.Employee.Phone ? 11 : -1);
+} }
+function EmployeeHeaderPanel_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
+    i0.ɵɵdomElement(4, "i", 4);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "div")(6, "h1", 5);
+    i0.ɵɵtext(7);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "div", 6)(9, "span");
+    i0.ɵɵtext(10);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(11, EmployeeHeaderPanel_Conditional_0_Conditional_11_Template, 4, 1);
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵdomElementStart(12, "div", 7)(13, "button", 8);
+    i0.ɵɵdomListener("click", function EmployeeHeaderPanel_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCollapsed()); });
+    i0.ɵɵdomElement(14, "i", 9);
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵconditionalCreate(15, EmployeeHeaderPanel_Conditional_0_Conditional_15_Template, 12, 2, "div", 10);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate2("", ctx_r1.Employee.FirstName, " ", ctx_r1.Employee.LastName);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.Employee.Title || "Team Member");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Employee.Email ? 11 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("title", ctx_r1.IsCollapsed ? "Expand Header" : "Collapse Header");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-chevron-up", !ctx_r1.IsCollapsed)("fa-chevron-down", ctx_r1.IsCollapsed);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.IsCollapsed ? 15 : -1);
+} }
+const SETTING_KEY = 'mj.form.employees.headerCollapsed';
+let EmployeeHeaderPanel = class EmployeeHeaderPanel extends BaseFormPanel {
+    constructor() {
+        super(...arguments);
+        this.IsCollapsed = false;
+    }
+    ngOnInit() {
+        const raw = UserInfoEngine.Instance.GetSetting(SETTING_KEY);
+        if (raw)
+            this.IsCollapsed = raw === 'true';
+    }
+    get Employee() {
+        return this.Record;
+    }
+    ToggleCollapsed() {
+        this.IsCollapsed = !this.IsCollapsed;
+        UserInfoEngine.Instance.SetSettingDebounced(SETTING_KEY, String(this.IsCollapsed));
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵEmployeeHeaderPanel_BaseFactory; return function EmployeeHeaderPanel_Factory(__ngFactoryType__) { return (ɵEmployeeHeaderPanel_BaseFactory || (ɵEmployeeHeaderPanel_BaseFactory = i0.ɵɵgetInheritedFactory(EmployeeHeaderPanel)))(__ngFactoryType__ || EmployeeHeaderPanel); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EmployeeHeaderPanel, selectors: [["mj-employee-header-panel"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [[1, "mj-entity-hero-header"], [1, "mj-hero-top"], [1, "mj-hero-identity"], [1, "mj-hero-avatar", 2, "background", "linear-gradient(135deg, #10b981, #047857)"], [1, "fa-solid", "fa-id-badge"], [1, "mj-hero-title"], [1, "mj-hero-subline"], [1, "mj-hero-actions"], ["type", "button", 1, "mj-hero-toggle-btn", 3, "click", "title"], [1, "fa-solid"], [1, "mj-hero-metrics-row"], [1, "mj-hero-metric"], [1, "mj-hero-metric-label"], [1, "mj-hero-metric-val"], [1, "mj-hero-metric-val", 2, "color", "#10b981"]], template: function EmployeeHeaderPanel_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, EmployeeHeaderPanel_Conditional_0_Template, 16, 10, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.Employee ? 0 : -1);
+        } }, dependencies: [CommonModule], styles: ["[_nghost-%COMP%] { display: block; width: 100%; }\n        .mj-entity-hero-header[_ngcontent-%COMP%] {\n            background: linear-gradient(180deg, var(--mj-bg-surface, #111a2e) 0%, var(--mj-bg-surface-card, #141f36) 100%);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            padding: 16px 24px;\n        }\n        .mj-hero-top[_ngcontent-%COMP%] { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n        .mj-hero-identity[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 14px; }\n        .mj-hero-avatar[_ngcontent-%COMP%] {\n            width: 44px; height: 44px; border-radius: 10px;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 18px; color: #fff; flex-shrink: 0;\n        }\n        .mj-hero-title[_ngcontent-%COMP%] { font-size: 18px; font-weight: 800; color: var(--mj-text-primary, #f8fafc); }\n        .mj-hero-subline[_ngcontent-%COMP%] { font-size: 12.5px; color: var(--mj-text-secondary, #94a3b8); margin-top: 2px; display: flex; gap: 8px; align-items: center; }\n        .mj-hero-toggle-btn[_ngcontent-%COMP%] {\n            background: none; border: 1px solid var(--mj-border-default, #223254);\n            color: var(--mj-text-muted, #64748b); border-radius: 6px;\n            padding: 6px 10px; cursor: pointer;\n        }\n        .mj-hero-metrics-row[_ngcontent-%COMP%] {\n            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 12px; margin-top: 14px; padding-top: 12px;\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\n        }\n        .mj-hero-metric[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 2px; }\n        .mj-hero-metric-label[_ngcontent-%COMP%] { font-size: 10.5px; font-weight: 700; color: var(--mj-text-muted, #64748b); text-transform: uppercase; }\n        .mj-hero-metric-val[_ngcontent-%COMP%] { font-size: 14px; font-weight: 700; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }"], changeDetection: 0 }); }
+};
+EmployeeHeaderPanel = __decorate([
+    RegisterClassEx(BaseFormPanel, {
+        key: 'form-panel:Employees:header',
+        metadata: {
+            entity: 'Employees',
+            slot: 'header',
+            sortKey: 10,
+        },
+    })
+], EmployeeHeaderPanel);
+export { EmployeeHeaderPanel };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EmployeeHeaderPanel, [{
+        type: Component,
+        args: [{ selector: 'mj-employee-header-panel', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        @if (Employee) {
+            <div class="mj-entity-hero-header">
+                <div class="mj-hero-top">
+                    <div class="mj-hero-identity">
+                        <div class="mj-hero-avatar" style="background: linear-gradient(135deg, #10b981, #047857);">
+                            <i class="fa-solid fa-id-badge"></i>
+                        </div>
+                        <div>
+                            <h1 class="mj-hero-title">{{ Employee.FirstName }} {{ Employee.LastName }}</h1>
+                            <div class="mj-hero-subline">
+                                <span>{{ Employee.Title || 'Team Member' }}</span>
+                                @if (Employee.Email) {
+                                    <span>•</span>
+                                    <span>{{ Employee.Email }}</span>
+                                }
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mj-hero-actions">
+                        <button type="button" class="mj-hero-toggle-btn" (click)="ToggleCollapsed()" [title]="IsCollapsed ? 'Expand Header' : 'Collapse Header'">
+                            <i class="fa-solid" [class.fa-chevron-up]="!IsCollapsed" [class.fa-chevron-down]="IsCollapsed"></i>
+                        </button>
+                    </div>
+                </div>
+
+                @if (!IsCollapsed) {
+                    <div class="mj-hero-metrics-row">
+                        <div class="mj-hero-metric">
+                            <span class="mj-hero-metric-label">Employee ID</span>
+                            <span class="mj-hero-metric-val">{{ Employee.ID?.substring(0, 8) }}</span>
+                        </div>
+                        <div class="mj-hero-metric">
+                            <span class="mj-hero-metric-label">Status</span>
+                            <span class="mj-hero-metric-val" style="color: #10b981;">Active</span>
+                        </div>
+                        @if (Employee.Phone) {
+                            <div class="mj-hero-metric">
+                                <span class="mj-hero-metric-label">Phone</span>
+                                <span class="mj-hero-metric-val">{{ Employee.Phone }}</span>
+                            </div>
+                        }
+                    </div>
+                }
+            </div>
+        }
+    `, styles: ["\n        :host { display: block; width: 100%; }\n        .mj-entity-hero-header {\n            background: linear-gradient(180deg, var(--mj-bg-surface, #111a2e) 0%, var(--mj-bg-surface-card, #141f36) 100%);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            padding: 16px 24px;\n        }\n        .mj-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n        .mj-hero-identity { display: flex; align-items: center; gap: 14px; }\n        .mj-hero-avatar {\n            width: 44px; height: 44px; border-radius: 10px;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 18px; color: #fff; flex-shrink: 0;\n        }\n        .mj-hero-title { font-size: 18px; font-weight: 800; color: var(--mj-text-primary, #f8fafc); }\n        .mj-hero-subline { font-size: 12.5px; color: var(--mj-text-secondary, #94a3b8); margin-top: 2px; display: flex; gap: 8px; align-items: center; }\n        .mj-hero-toggle-btn {\n            background: none; border: 1px solid var(--mj-border-default, #223254);\n            color: var(--mj-text-muted, #64748b); border-radius: 6px;\n            padding: 6px 10px; cursor: pointer;\n        }\n        .mj-hero-metrics-row {\n            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 12px; margin-top: 14px; padding-top: 12px;\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\n        }\n        .mj-hero-metric { display: flex; flex-direction: column; gap: 2px; }\n        .mj-hero-metric-label { font-size: 10.5px; font-weight: 700; color: var(--mj-text-muted, #64748b); text-transform: uppercase; }\n        .mj-hero-metric-val { font-size: 14px; font-weight: 700; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n    "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EmployeeHeaderPanel, { className: "EmployeeHeaderPanel", filePath: "src/lib/custom/Employees/employee-header.panel.ts", lineNumber: 100 }); })();
+//# sourceMappingURL=employee-header.panel.js.map

package/dist/lib/custom/Employees/employee-header.panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"employee-header.panel.js","sourceRoot":"","sources":["../../../../src/lib/custom/Employees/employee-header.panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAoB,cAAc,EAAE,MAAM,+BAA+B,CAAC;;;IA8B7C,+BAAM;IAAA,sBAAC;IAAA,oBAAO;IACd,+BAAM;IAAA,YAAoB;IAAA,oBAAO;;;IAA3B,eAAoB;IAApB,2CAAoB;;;IAwB9B,AADJ,kCAA4B,eACW;IAAA,qBAAK;IAAA,oBAAO;IAC/C,mCAAiC;IAAA,YAAoB;IACzD,AADyD,oBAAO,EAC1D;;;IAD+B,eAAoB;IAApB,2CAAoB;;;IAVzD,AADJ,AADJ,kCAAiC,cACD,eACW;IAAA,2BAAW;IAAA,oBAAO;IACrD,mCAAiC;IAAA,YAAkC;IACvE,AADuE,oBAAO,EACxE;IAEF,AADJ,kCAA4B,eACW;IAAA,sBAAM;IAAA,oBAAO;IAChD,mCAAyD;IAAA,uBAAM;IACnE,AADmE,oBAAO,EACpE;IACN,qHAAsB;IAM1B,oBAAM;;;IAZmC,eAAkC;IAAlC,4FAAkC;IAMvE,eAKC;IALD,iDAKC;;;;IApCD,AADJ,AADJ,AADJ,iCAAmC,aACN,aACS,aACiE;IACvF,0BAAoC;IACxC,oBAAM;IAEF,AADJ,8BAAK,YACyB;IAAA,YAAgD;IAAA,oBAAK;IAE3E,AADJ,iCAA6B,WACnB;IAAA,aAAqC;IAAA,oBAAO;IAClD,2FAAsB;IAMlC,AADI,AADI,oBAAM,EACJ,EACJ;IAEF,AADJ,kCAA6B,iBACgH;IAAxF,2LAAS,wBAAiB,KAAC;IACxE,2BAAmG;IAG/G,AADI,AADI,oBAAS,EACP,EACJ;IAEN,uGAAoB;IAkBxB,oBAAM;;;IAnCoC,eAAgD;IAAhD,mFAAgD;IAEhE,eAAqC;IAArC,4DAAqC;IAC3C,cAGC;IAHD,iDAGC;IAKoE,eAA2D;IAA3D,mFAA2D;IAChH,cAAoC;IAAC,AAArC,oDAAoC,uCAAsC;IAK1G,cAiBC;IAjBD,+CAiBC;;AA1DjB,MAAM,WAAW,GAAG,mCAAmC,CAAC;AA6FjD,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,aAA+B;IAAjE;;QACI,gBAAW,GAAG,KAAK,CAAC;KAe9B;IAbU,QAAQ;QACX,MAAM,GAAG,GAAG,cAAc,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QAC5D,IAAI,GAAG;YAAE,IAAI,CAAC,WAAW,GAAG,GAAG,KAAK,MAAM,CAAC;IAC/C,CAAC;IAED,IAAW,QAAQ;QACf,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IAEM,eAAe;QAClB,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;QACrC,cAAc,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IACvF,CAAC;gQAfQ,mBAAmB,yBAAnB,mBAAmB;oEAAnB,mBAAmB;YA7ExB,uFAAgB;;YAAhB,uCA4CC;4BA/CK,YAAY;;AAgFb,mBAAmB;IA3F/B,eAAe,CAAC,aAAa,EAAE;QAC5B,GAAG,EAAE,6BAA6B;QAClC,QAAQ,EAAE;YACN,MAAM,EAAE,WAAW;YACnB,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,EAAE;SACd;KACJ,CAAC;GAoFW,mBAAmB,CAgB/B;;iFAhBY,mBAAmB;cAnF/B,SAAS;2BACI,0BAA0B,cACxB,IAAI,WACP,CAAC,YAAY,CAAC,mBACN,uBAAuB,CAAC,MAAM,YACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8CT;;kFAgCQ,mBAAmB","sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RegisterClassEx } from '@memberjunction/global';\nimport { BaseFormPanel } from '@memberjunction/ng-base-forms';\nimport { MJEmployeeEntity, UserInfoEngine } from '@memberjunction/core-entities';\n\nconst SETTING_KEY = 'mj.form.employees.headerCollapsed';\n\n@RegisterClassEx(BaseFormPanel, {\n    key: 'form-panel:Employees:header',\n    metadata: {\n        entity: 'Employees',\n        slot: 'header',\n        sortKey: 10,\n    },\n})\n@Component({\n    selector: 'mj-employee-header-panel',\n    standalone: true,\n    imports: [CommonModule],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    template: `\n        @if (Employee) {\n            <div class=\"mj-entity-hero-header\">\n                <div class=\"mj-hero-top\">\n                    <div class=\"mj-hero-identity\">\n                        <div class=\"mj-hero-avatar\" style=\"background: linear-gradient(135deg, #10b981, #047857);\">\n                            <i class=\"fa-solid fa-id-badge\"></i>\n                        </div>\n                        <div>\n                            <h1 class=\"mj-hero-title\">{{ Employee.FirstName }} {{ Employee.LastName }}</h1>\n                            <div class=\"mj-hero-subline\">\n                                <span>{{ Employee.Title || 'Team Member' }}</span>\n                                @if (Employee.Email) {\n                                    <span>•</span>\n                                    <span>{{ Employee.Email }}</span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"mj-hero-actions\">\n                        <button type=\"button\" class=\"mj-hero-toggle-btn\" (click)=\"ToggleCollapsed()\" [title]=\"IsCollapsed ? 'Expand Header' : 'Collapse Header'\">\n                            <i class=\"fa-solid\" [class.fa-chevron-up]=\"!IsCollapsed\" [class.fa-chevron-down]=\"IsCollapsed\"></i>\n                        </button>\n                    </div>\n                </div>\n\n                @if (!IsCollapsed) {\n                    <div class=\"mj-hero-metrics-row\">\n                        <div class=\"mj-hero-metric\">\n                            <span class=\"mj-hero-metric-label\">Employee ID</span>\n                            <span class=\"mj-hero-metric-val\">{{ Employee.ID?.substring(0, 8) }}</span>\n                        </div>\n                        <div class=\"mj-hero-metric\">\n                            <span class=\"mj-hero-metric-label\">Status</span>\n                            <span class=\"mj-hero-metric-val\" style=\"color: #10b981;\">Active</span>\n                        </div>\n                        @if (Employee.Phone) {\n                            <div class=\"mj-hero-metric\">\n                                <span class=\"mj-hero-metric-label\">Phone</span>\n                                <span class=\"mj-hero-metric-val\">{{ Employee.Phone }}</span>\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n        }\n    `,\n    styles: [`\n        :host { display: block; width: 100%; }\n        .mj-entity-hero-header {\n            background: linear-gradient(180deg, var(--mj-bg-surface, #111a2e) 0%, var(--mj-bg-surface-card, #141f36) 100%);\n            border-bottom: 1px solid var(--mj-border-default, #223254);\n            padding: 16px 24px;\n        }\n        .mj-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n        .mj-hero-identity { display: flex; align-items: center; gap: 14px; }\n        .mj-hero-avatar {\n            width: 44px; height: 44px; border-radius: 10px;\n            display: flex; align-items: center; justify-content: center;\n            font-size: 18px; color: #fff; flex-shrink: 0;\n        }\n        .mj-hero-title { font-size: 18px; font-weight: 800; color: var(--mj-text-primary, #f8fafc); }\n        .mj-hero-subline { font-size: 12.5px; color: var(--mj-text-secondary, #94a3b8); margin-top: 2px; display: flex; gap: 8px; align-items: center; }\n        .mj-hero-toggle-btn {\n            background: none; border: 1px solid var(--mj-border-default, #223254);\n            color: var(--mj-text-muted, #64748b); border-radius: 6px;\n            padding: 6px 10px; cursor: pointer;\n        }\n        .mj-hero-metrics-row {\n            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n            gap: 12px; margin-top: 14px; padding-top: 12px;\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\n        }\n        .mj-hero-metric { display: flex; flex-direction: column; gap: 2px; }\n        .mj-hero-metric-label { font-size: 10.5px; font-weight: 700; color: var(--mj-text-muted, #64748b); text-transform: uppercase; }\n        .mj-hero-metric-val { font-size: 14px; font-weight: 700; color: var(--mj-text-primary, #f8fafc); font-family: monospace; }\n    `]\n})\nexport class EmployeeHeaderPanel extends BaseFormPanel<MJEmployeeEntity> {\n    public IsCollapsed = false;\n\n    public ngOnInit(): void {\n        const raw = UserInfoEngine.Instance.GetSetting(SETTING_KEY);\n        if (raw) this.IsCollapsed = raw === 'true';\n    }\n\n    public get Employee(): MJEmployeeEntity | null {\n        return this.Record;\n    }\n\n    public ToggleCollapsed(): void {\n        this.IsCollapsed = !this.IsCollapsed;\n        UserInfoEngine.Instance.SetSettingDebounced(SETTING_KEY, String(this.IsCollapsed));\n    }\n}\n"]}

package/dist/lib/custom/Employees/employee-overview.panel.d.ts

@@ -0,0 +1,21 @@
+import { OnInit } from '@angular/core';
+import { BaseFormPanel } from '@memberjunction/ng-base-forms';
+import { MJEmployeeEntity } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+interface DirectReportRow {
+    ID: string;
+    FirstName: string;
+    LastName: string;
+    Title: string;
+}
+export declare class EmployeeOverviewPanel extends BaseFormPanel<MJEmployeeEntity> implements OnInit {
+    private cdr;
+    Reports: DirectReportRow[];
+    get Employee(): MJEmployeeEntity | null;
+    ngOnInit(): void;
+    private LoadDirectReports;
+    static ɵfac: i0.ɵɵFactoryDeclaration<EmployeeOverviewPanel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EmployeeOverviewPanel, "mj-employee-overview-panel", never, {}, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=employee-overview.panel.d.ts.map

package/dist/lib/custom/Employees/employee-overview.panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"employee-overview.panel.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Employees/employee-overview.panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,MAAM,EAA6B,MAAM,eAAe,CAAC;AAItG,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;;AAEjE,UAAU,eAAe;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,qBAmHa,qBAAsB,SAAQ,aAAa,CAAC,gBAAgB,CAAE,YAAW,MAAM;IACxF,OAAO,CAAC,GAAG,CAA6B;IACjC,OAAO,EAAE,eAAe,EAAE,CAAM;IAEvC,IAAW,QAAQ,IAAI,gBAAgB,GAAG,IAAI,CAE7C;IAEM,QAAQ,IAAI,IAAI;YAIT,iBAAiB;yCAZtB,qBAAqB;2CAArB,qBAAqB;CA+BjC"}