@memberjunction/ng-dashboards 2.121.0 → 2.122.0

package/dist/DataExplorer/data-explorer-dashboard.component.js

@@ -0,0 +1,2129 @@
+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, Input, HostListener, ViewChild } from '@angular/core';
+import { NavigationEnd } from '@angular/router';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { Subject } from 'rxjs';
+import { takeUntil, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
+import { BaseDashboard } from '@memberjunction/ng-shared';
+import { RegisterClass } from '@memberjunction/global';
+import { Metadata, RunView, CompositeKey } from '@memberjunction/core';
+import { EntityViewerComponent } from '@memberjunction/ng-entity-viewer';
+import { ViewSelectorComponent } from './components/view-selector/view-selector.component';
+import * as i0 from "@angular/core";
+import * as i1 from "./services/explorer-state.service";
+import * as i2 from "@angular/router";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@angular/forms";
+import * as i5 from "@memberjunction/ng-entity-viewer";
+import * as i6 from "./components/navigation-panel/navigation-panel.component";
+import * as i7 from "./components/view-selector/view-selector.component";
+import * as i8 from "./components/view-config-panel/view-config-panel.component";
+import * as i9 from "@angular/common";
+const _c0 = ["filterInput"];
+const _forTrack0 = ($index, $item) => $item.label;
+const _forTrack1 = ($index, $item) => $item.ID;
+const _forTrack2 = ($index, $item) => $item.entityId + "|" + $item.recordId;
+const _forTrack3 = ($index, $item) => $item.entityId;
+const _forTrack4 = ($index, $item) => $item.userFavoriteId;
+function DataExplorerDashboardComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 16)(1, "mj-explorer-navigation-panel", 17);
+    i0.ɵɵlistener("entitySelected", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_entitySelected_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onEntitySelected($event)); })("toggleCollapse", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_toggleCollapse_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleNavigationPanel()); })("sectionToggled", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_sectionToggled_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.stateService.toggleSection($event)); })("openRecord", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_openRecord_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenRecordFromNav($event)); })("selectRecord", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_selectRecord_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectRecordFromNav($event)); })("expandAndFocus", function DataExplorerDashboardComponent_Conditional_1_Template_mj_explorer_navigation_panel_expandAndFocus_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onExpandAndFocus($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("width", ctx_r1.state.navigationPanelCollapsed ? 48 : ctx_r1.state.navigationPanelWidth, "px");
+    i0.ɵɵclassProp("collapsed", ctx_r1.state.navigationPanelCollapsed);
+    i0.ɵɵproperty("@slideInLeft", undefined);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("entities", ctx_r1.entities)("selectedEntityName", ctx_r1.state.selectedEntityName)("favorites", ctx_r1.state.favorites)("recentItems", ctx_r1.state.recentItems)("collapsed", ctx_r1.state.navigationPanelCollapsed)("allowedEntityNames", ctx_r1.allowedEntityNames)("favoritesSectionExpanded", ctx_r1.state.favoritesSectionExpanded)("recentSectionExpanded", ctx_r1.state.recentSectionExpanded)("entitiesSectionExpanded", ctx_r1.state.entitiesSectionExpanded)("viewsSectionExpanded", ctx_r1.state.viewsSectionExpanded);
+} }
+function DataExplorerDashboardComponent_Conditional_3_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 22);
+} if (rf & 2) {
+    const crumb_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(crumb_r5.icon);
+} }
+function DataExplorerDashboardComponent_Conditional_3_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 21);
+} }
+function DataExplorerDashboardComponent_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 18);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_3_For_2_Template_span_click_0_listener() { const ctx_r3 = i0.ɵɵrestoreView(_r3); const crumb_r5 = ctx_r3.$implicit; const ɵ$index_13_r6 = ctx_r3.$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onBreadcrumbClick(crumb_r5, ɵ$index_13_r6)); });
+    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_3_For_2_Conditional_1_Template, 1, 2, "i", 19);
+    i0.ɵɵelementStart(2, "span", 20);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(4, DataExplorerDashboardComponent_Conditional_3_For_2_Conditional_4_Template, 1, 0, "i", 21);
+} if (rf & 2) {
+    const crumb_r5 = ctx.$implicit;
+    const ɵ$index_13_r6 = ctx.$index;
+    const ɵ$count_13_r7 = ctx.$count;
+    i0.ɵɵclassProp("clickable", !(ɵ$index_13_r6 === ɵ$count_13_r7 - 1))("current", ɵ$index_13_r6 === ɵ$count_13_r7 - 1);
+    i0.ɵɵproperty("title", crumb_r5.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(crumb_r5.icon ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(crumb_r5.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!(ɵ$index_13_r6 === ɵ$count_13_r7 - 1) ? 4 : -1);
+} }
+function DataExplorerDashboardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵrepeaterCreate(1, DataExplorerDashboardComponent_Conditional_3_For_2_Template, 5, 8, null, null, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.breadcrumbs);
+} }
+function DataExplorerDashboardComponent_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 25);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "number");
+    i0.ɵɵpipe(3, "number");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(2, 2, ctx_r1.filteredRecordCount), " of ", i0.ɵɵpipeBind1(3, 4, ctx_r1.totalRecordCount), " records");
+} }
+function DataExplorerDashboardComponent_Conditional_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 25);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "number");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(2, 1, ctx_r1.totalRecordCount), " records");
+} }
+function DataExplorerDashboardComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "i", 23);
+    i0.ɵɵelementStart(1, "h2", 24);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, DataExplorerDashboardComponent_Conditional_6_Conditional_3_Template, 4, 6, "span", 25)(4, DataExplorerDashboardComponent_Conditional_6_Conditional_4_Template, 3, 3, "span", 25);
+    i0.ɵɵelementStart(5, "mj-view-selector", 26);
+    i0.ɵɵlistener("viewSelected", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_viewSelected_5_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewSelected($event)); })("saveViewRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_saveViewRequested_5_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveViewRequested($event)); })("manageViewsRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_manageViewsRequested_5_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onManageViewsRequested()); })("openInTabRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_openInTabRequested_5_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenInTabRequested($event)); })("configureViewRequested", function DataExplorerDashboardComponent_Conditional_6_Template_mj_view_selector_configureViewRequested_5_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfigureViewRequested()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r1.getEntityIcon(ctx_r1.selectedEntity));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedEntity.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.debouncedFilterText && ctx_r1.filteredRecordCount !== ctx_r1.totalRecordCount ? 3 : 4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("entity", ctx_r1.selectedEntity)("selectedViewId", ctx_r1.state.selectedViewId)("viewModified", ctx_r1.state.viewModified);
+} }
+function DataExplorerDashboardComponent_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 23);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r1.displayIcon);
+} }
+function DataExplorerDashboardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, DataExplorerDashboardComponent_Conditional_7_Conditional_0_Template, 1, 2, "i", 27);
+    i0.ɵɵelementStart(1, "h2", 24);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 25);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.displayIcon ? 0 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.displayTitle);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", ctx_r1.entities.length, " entities available");
+} }
+function DataExplorerDashboardComponent_Conditional_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_9_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSmartFilterChanged("")); });
+    i0.ɵɵelement(1, "i", 32);
+    i0.ɵɵelementEnd();
+} }
+function DataExplorerDashboardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelement(1, "i", 28);
+    i0.ɵɵelementStart(2, "input", 29, 0);
+    i0.ɵɵlistener("ngModelChange", function DataExplorerDashboardComponent_Conditional_9_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSmartFilterChanged($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, DataExplorerDashboardComponent_Conditional_9_Conditional_4_Template, 2, 0, "button", 30);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngModel", ctx_r1.state.smartFilterPrompt);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.state.smartFilterPrompt ? 4 : -1);
+} }
+function DataExplorerDashboardComponent_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_10_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.entityFilterText = ""); });
+    i0.ɵɵelement(1, "i", 32);
+    i0.ɵɵelementEnd();
+} }
+function DataExplorerDashboardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelement(1, "i", 28);
+    i0.ɵɵelementStart(2, "input", 33, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function DataExplorerDashboardComponent_Conditional_10_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.entityFilterText, $event) || (ctx_r1.entityFilterText = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, DataExplorerDashboardComponent_Conditional_10_Conditional_4_Template, 2, 0, "button", 30);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.entityFilterText);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.entityFilterText ? 4 : -1);
+} }
+function DataExplorerDashboardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "button", 34);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("grid")); });
+    i0.ɵɵelement(2, "i", 35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 36);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_12_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged("cards")); });
+    i0.ɵɵelement(4, "i", 37);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r1.state.viewMode === "grid");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.state.viewMode === "cards");
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "mj-loading", 40);
+    i0.ɵɵelementEnd();
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_5_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_5_For_4_Template_button_click_0_listener() { const entity_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.setRecentRecordsEntityFilter(entity_r16.entityId)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const entity_r16 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(6);
+    i0.ɵɵclassProp("active", ctx_r1.recentRecordsEntityFilter === entity_r16.entityId);
+    i0.ɵɵproperty("title", entity_r16.entityName);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(entity_r16.icon);
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 55)(1, "button", 58);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.setRecentRecordsEntityFilter(null)); });
+    i0.ɵɵelement(2, "i", 59);
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(3, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_5_For_4_Template, 2, 5, "button", 60, _forTrack3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r1.recentRecordsEntityFilter === null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.uniqueRecentRecordEntities);
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_For_8_Template_div_click_0_listener() { const record_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onRecentRecordClick(record_r18)); });
+    i0.ɵɵelementStart(1, "div", 63);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 64)(4, "span", 65);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 66);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "span", 67);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const record_r18 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("title", record_r18.entityName + " - " + record_r18.recordId);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.getEntityIconById(record_r18.entityId));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(record_r18.recordName || record_r18.recordId);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(record_r18.entityName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.formatRelativeTime(record_r18.latestAt));
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39)(1, "div", 53);
+    i0.ɵɵelement(2, "i", 54);
+    i0.ɵɵelementStart(3, "h3", 45);
+    i0.ɵɵtext(4, "Recent Records");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Conditional_5_Template, 5, 2, "div", 55);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 56);
+    i0.ɵɵrepeaterCreate(7, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_For_8_Template, 10, 6, "div", 57, _forTrack2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r1.showRecentRecordsEntityFilter ? 5 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.filteredRecentRecords);
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_3_For_7_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_3_For_7_Template_div_click_0_listener() { const record_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onFavoriteRecordClick(record_r20)); });
+    i0.ɵɵelementStart(1, "div", 63);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 64)(4, "span", 65);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 66);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const record_r20 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("title", record_r20.entityName + " - " + record_r20.recordId);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.getEntityIconById(record_r20.entityId));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(record_r20.recordName || record_r20.recordId);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(record_r20.entityName);
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39)(1, "div", 53);
+    i0.ɵɵelement(2, "i", 68);
+    i0.ɵɵelementStart(3, "h3", 45);
+    i0.ɵɵtext(4, "Favorite Records");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 56);
+    i0.ɵɵrepeaterCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_3_For_7_Template, 8, 5, "div", 57, _forTrack4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(6);
+    i0.ɵɵrepeater(ctx_r1.favoriteRecords);
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_5_For_7_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_5_For_7_Template_div_click_0_listener() { const entity_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r22)); });
+    i0.ɵɵelementStart(1, "div", 73);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 74)(4, "span", 75);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "button", 76);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_5_For_7_Template_button_click_6_listener($event) { const entity_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleEntityFavorite(entity_r22, $event)); });
+    i0.ɵɵelement(7, "i");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const entity_r22 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("title", entity_r22.Description || entity_r22.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r22));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(entity_r22.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("favorited", ctx_r1.isEntityFavorited(entity_r22));
+    i0.ɵɵproperty("title", ctx_r1.isEntityFavorited(entity_r22) ? "Remove from favorites" : "Add to favorites");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.isEntityFavorited(entity_r22) ? "fa-solid fa-star" : "fa-regular fa-star");
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39)(1, "div", 53);
+    i0.ɵɵelement(2, "i", 69);
+    i0.ɵɵelementStart(3, "h3", 45);
+    i0.ɵɵtext(4, "Recent Entities");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 70);
+    i0.ɵɵrepeaterCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_5_For_7_Template, 8, 9, "div", 71, _forTrack1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(6);
+    i0.ɵɵrepeater(ctx_r1.recentEntities);
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_6_For_7_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_6_For_7_Template_div_click_0_listener() { const entity_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r24)); });
+    i0.ɵɵelementStart(1, "div", 73);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 74)(4, "span", 75);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "button", 77);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_6_For_7_Template_button_click_6_listener($event) { const entity_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.toggleEntityFavorite(entity_r24, $event)); });
+    i0.ɵɵelement(7, "i", 78);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const entity_r24 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("title", entity_r24.Description || entity_r24.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r24));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(entity_r24.Name);
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39)(1, "div", 53);
+    i0.ɵɵelement(2, "i", 68);
+    i0.ɵɵelementStart(3, "h3", 45);
+    i0.ɵɵtext(4, "Favorite Entities");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 70);
+    i0.ɵɵrepeaterCreate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_6_For_7_Template, 8, 4, "div", 71, _forTrack1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(6);
+    i0.ɵɵrepeater(ctx_r1.favoriteEntities);
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41)(1, "div", 52);
+    i0.ɵɵtemplate(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_2_Template, 9, 1, "div", 39)(3, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_3_Template, 8, 0, "div", 39);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 52);
+    i0.ɵɵtemplate(5, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_5_Template, 8, 0, "div", 39)(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Conditional_6_Template, 8, 0, "div", 39);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.recentRecords.length > 0 ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.favoriteRecords.length > 0 ? 3 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.recentEntities.length > 0 ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.favoriteEntities.length > 0 ? 6 : -1);
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " All Entities ");
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Common Entities ");
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 46);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r1.filteredEntities.length, " matching");
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 47)(1, "button", 79);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_9_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowAllEntities()); });
+    i0.ɵɵtext(2, " Common ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 79);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowAllEntities()); });
+    i0.ɵɵtext(4, " All ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", !ctx_r1.state.showAllEntities);
+    i0.ɵɵpropertyInterpolate1("title", "Show common entities (", ctx_r1.commonEntitiesCount, ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.state.showAllEntities);
+    i0.ɵɵpropertyInterpolate1("title", "Show all entities (", ctx_r1.allEntitiesCount, ")");
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 84);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const entity_r27 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(entity_r27.Description);
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 80);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Template_div_click_0_listener() { const entity_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEntitySelected(entity_r27)); });
+    i0.ɵɵelementStart(1, "div", 81);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 82)(4, "h4", 83);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Conditional_6_Template, 2, 1, "p", 84);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 76);
+    i0.ɵɵlistener("click", function DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Template_button_click_7_listener($event) { const entity_r27 = i0.ɵɵrestoreView(_r26).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleEntityFavorite(entity_r27, $event)); });
+    i0.ɵɵelement(8, "i");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const entity_r27 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", entity_r27.Description || entity_r27.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r1.getEntityIcon(entity_r27));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(entity_r27.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(entity_r27.Description ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("favorited", ctx_r1.isEntityFavorited(entity_r27));
+    i0.ɵɵproperty("title", ctx_r1.isEntityFavorited(entity_r27) ? "Remove from favorites" : "Add to favorites");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.isEntityFavorited(entity_r27) ? "fa-solid fa-star" : "fa-regular fa-star");
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵelement(1, "i", 85);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "No Matching Entities");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("No entities match \"", ctx_r1.entityFilterText, "\"");
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "i", 86);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "No Entities Available");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "There are no entities configured for this application.");
+    i0.ɵɵelementEnd()();
+} }
+function DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_0_Template, 7, 4, "div", 41);
+    i0.ɵɵelementStart(1, "div", 39)(2, "div", 42)(3, "div", 43);
+    i0.ɵɵelement(4, "i", 44);
+    i0.ɵɵelementStart(5, "h3", 45);
+    i0.ɵɵtemplate(6, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_6_Template, 1, 0)(7, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_7_Template, 1, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(8, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_8_Template, 2, 1, "span", 46);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(9, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_9_Template, 5, 8, "div", 47);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 48);
+    i0.ɵɵrepeaterCreate(11, DataExplorerDashboardComponent_Conditional_14_Conditional_2_For_12_Template, 9, 10, "div", 49, _forTrack1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(13, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_13_Template, 6, 1, "div", 50)(14, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Conditional_14_Template, 6, 0, "div", 51);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.hasTopSectionContent ? 0 : -1);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r1.state.showAllEntities || !ctx_r1.showCommonAllToggle ? 6 : 7);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.entityFilterText && ctx_r1.filteredEntities.length !== ctx_r1.entities.length ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showCommonAllToggle ? 9 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.filteredEntities);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.filteredEntities.length === 0 && ctx_r1.entities.length > 0 ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.entities.length === 0 ? 14 : -1);
+} }
+function DataExplorerDashboardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_14_Conditional_1_Template, 2, 0, "div", 38)(2, DataExplorerDashboardComponent_Conditional_14_Conditional_2_Template, 15, 6, "div", 39);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isLoadingEntities ? 1 : 2);
+} }
+function DataExplorerDashboardComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-entity-viewer", 87);
+    i0.ɵɵlistener("viewModeChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_viewModeChange_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewModeChanged($event)); })("filterTextChange", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_filterTextChange_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilterTextChanged($event)); })("recordSelected", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_recordSelected_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewerRecordSelected($event)); })("recordOpened", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_recordOpened_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onViewerRecordOpened($event)); })("dataLoaded", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_dataLoaded_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDataLoaded($event)); })("filteredCountChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_filteredCountChanged_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFilteredCountChanged($event)); })("gridStateChanged", function DataExplorerDashboardComponent_Conditional_15_Template_mj_entity_viewer_gridStateChanged_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onGridStateChanged($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("entity", ctx_r1.selectedEntity)("viewEntity", ctx_r1.selectedViewEntity)("viewMode", ctx_r1.state.viewMode)("filterText", ctx_r1.debouncedFilterText)("selectedRecordId", ctx_r1.state.selectedRecordId)("config", ctx_r1.viewerConfig)("gridState", ctx_r1.currentGridState);
+} }
+function DataExplorerDashboardComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 88)(1, "mj-entity-record-detail-panel", 89);
+    i0.ɵɵlistener("close", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_close_1_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDetailPanelClosed()); })("openRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openRecord_1_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenRecord($event)); })("navigateToRelated", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_navigateToRelated_1_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNavigateToRelated($event)); })("openRelatedRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openRelatedRecord_1_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenRelatedRecord($event)); })("openForeignKeyRecord", function DataExplorerDashboardComponent_Conditional_16_Template_mj_entity_record_detail_panel_openForeignKeyRecord_1_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenForeignKeyRecord($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("width", ctx_r1.state.detailPanelWidth, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("entity", ctx_r1.detailPanelEntity)("record", ctx_r1.selectedRecord);
+} }
+/**
+ * Data Explorer Dashboard - Power user interface for exploring data across entities
+ * Combines card-based browsing with grid views and relationship visualization
+ *
+ * Uses mj-entity-viewer composite component for the main content area,
+ * which handles data loading, filtering, and view mode switching.
+ */
+let DataExplorerDashboardComponent = class DataExplorerDashboardComponent extends BaseDashboard {
+    stateService;
+    cdr;
+    router;
+    recentAccessService;
+    destroy$ = new Subject();
+    metadata = new Metadata();
+    /** Reference to the filter input for keyboard shortcuts */
+    filterInputRef;
+    /** Reference to the view selector for refreshing after save */
+    viewSelectorRef;
+    /** Reference to the entity viewer for refreshing after view save */
+    entityViewerRef;
+    /**
+     * Optional filter to constrain which entities are shown in the explorer.
+     * Can filter by applicationId, schemaNames, or explicit entityNames.
+     */
+    entityFilter = null;
+    /**
+     * Optional deep link to navigate to a specific entity/record on load.
+     * Parsed from URL query parameters (e.g., ?entity=Users&record=123)
+     */
+    deepLink = null;
+    /**
+     * Optional context name to display in the header instead of "Data Explorer".
+     * Use this to customize the explorer for specific applications (e.g., "CRM", "Association Demo").
+     */
+    contextName = null;
+    /**
+     * Optional context icon (Font Awesome class) to display in the header.
+     * Use this alongside contextName for a fully customized header (e.g., "fa-solid fa-users" for CRM).
+     */
+    contextIcon = null;
+    // State
+    state;
+    // Entity data - all entities available to the user
+    allEntities = [];
+    // Filtered entities based on entityFilter
+    entities = [];
+    // Entity IDs for the current application (loaded when applicationId filter is set)
+    applicationEntityIds = new Set();
+    selectedEntity = null;
+    // Record counts (updated by mj-entity-viewer)
+    totalRecordCount = 0;
+    filteredRecordCount = 0;
+    // Selected record for detail panel
+    selectedRecord = null;
+    // Entity info for the detail panel (may differ from selectedEntity when viewing FK/related records)
+    detailPanelEntity = null;
+    // Currently loaded records from mj-entity-viewer (for back/forward navigation lookup)
+    loadedRecords = [];
+    // Currently selected view entity (for view data loading)
+    selectedViewEntity = null;
+    // Debounced filter text (synced with mj-entity-viewer)
+    debouncedFilterText = '';
+    filterInput$ = new Subject();
+    // Entity filter text for home screen
+    entityFilterText = '';
+    // Breadcrumbs for navigation display
+    breadcrumbs = [];
+    // Loading state for entities
+    isLoadingEntities = true;
+    // Flag to skip URL updates during initialization (when applying deep link)
+    skipUrlUpdates = true;
+    // Track the last URL we navigated to, to avoid reacting to our own navigation
+    lastNavigatedUrl = '';
+    // Recent records from User Record Logs
+    recentRecords = [];
+    // Favorite records from User Favorites (non-entity favorites)
+    favoriteRecords = [];
+    // Loading state for home screen sections
+    isLoadingRecentRecords = true;
+    // Entity filter for recent records (null = show all, string = filter by entityId)
+    recentRecordsEntityFilter = null;
+    /**
+     * Filtered entities based on entityFilterText (for home screen)
+     * Excludes entities shown in recent or favorites sections
+     * Applies Common/All toggle filtering
+     */
+    get filteredEntities() {
+        // Get IDs of entities in recent and favorites to exclude
+        const recentEntityIds = new Set(this.state.recentEntityAccesses.map(r => r.entityId));
+        const favoriteEntityIds = new Set(this.state.favoriteEntities.map(f => f.entityId));
+        let result = this.entities.filter(e => {
+            // Exclude entities shown in recent or favorites sections
+            if (recentEntityIds.has(e.ID) || favoriteEntityIds.has(e.ID)) {
+                return false;
+            }
+            // Apply Common/All toggle filter (only if we have DefaultForNewUser info)
+            if (!this.state.showAllEntities && this.stateService.DefaultEntityIds.size > 0) {
+                if (!this.stateService.DefaultEntityIds.has(e.ID)) {
+                    return false;
+                }
+            }
+            return true;
+        });
+        // Apply text filter
+        if (this.entityFilterText && this.entityFilterText.trim() !== '') {
+            const filter = this.entityFilterText.toLowerCase().trim();
+            result = result.filter(e => e.Name.toLowerCase().includes(filter) ||
+                (e.Description && e.Description.toLowerCase().includes(filter)));
+        }
+        return result;
+    }
+    /**
+     * Get recent entities for home screen display (max 5)
+     */
+    get recentEntities() {
+        return this.state.recentEntityAccesses
+            .slice(0, 5)
+            .map(r => this.entities.find(e => e.ID === r.entityId))
+            .filter((e) => e !== undefined);
+    }
+    /**
+     * Get favorite entities for home screen display
+     */
+    get favoriteEntities() {
+        return this.state.favoriteEntities
+            .map(f => this.entities.find(e => e.ID === f.entityId))
+            .filter((e) => e !== undefined);
+    }
+    /**
+     * Check if we should show the Common/All toggle
+     * Only show if we have DefaultForNewUser information
+     */
+    get showCommonAllToggle() {
+        return this.stateService.DefaultEntityIds.size > 0;
+    }
+    /**
+     * Total count of all entities (for display)
+     */
+    get allEntitiesCount() {
+        return this.entities.length;
+    }
+    /**
+     * Count of common (DefaultForNewUser) entities
+     */
+    get commonEntitiesCount() {
+        return this.entities.filter(e => this.stateService.DefaultEntityIds.has(e.ID)).length;
+    }
+    /**
+     * Check if we have any content for the top two-column section
+     * (recent/favorite entities OR recent/favorite records)
+     */
+    get hasTopSectionContent() {
+        return this.recentEntities.length > 0 ||
+            this.favoriteEntities.length > 0 ||
+            this.recentRecords.length > 0 ||
+            this.favoriteRecords.length > 0;
+    }
+    /**
+     * Get unique entities from recent records for the filter strip.
+     * Returns up to 5 entities, sorted by frequency in the recent records.
+     */
+    get uniqueRecentRecordEntities() {
+        const entityCounts = new Map();
+        for (const record of this.recentRecords) {
+            const existing = entityCounts.get(record.entityId);
+            if (existing) {
+                existing.count++;
+            }
+            else {
+                entityCounts.set(record.entityId, {
+                    entityId: record.entityId,
+                    entityName: record.entityName,
+                    count: 1
+                });
+            }
+        }
+        // Convert to array, sort by count (descending), take first 5
+        return Array.from(entityCounts.values())
+            .sort((a, b) => b.count - a.count)
+            .slice(0, 5)
+            .map(e => ({
+            ...e,
+            icon: this.getEntityIconById(e.entityId)
+        }));
+    }
+    /**
+     * Check if we should show the entity filter strip for recent records.
+     * Only show when there are 2+ unique entities.
+     */
+    get showRecentRecordsEntityFilter() {
+        return this.uniqueRecentRecordEntities.length >= 2;
+    }
+    /**
+     * Get filtered recent records based on entity filter.
+     */
+    get filteredRecentRecords() {
+        if (!this.recentRecordsEntityFilter) {
+            return this.recentRecords;
+        }
+        return this.recentRecords.filter(r => r.entityId === this.recentRecordsEntityFilter);
+    }
+    /**
+     * Set the entity filter for recent records
+     */
+    setRecentRecordsEntityFilter(entityId) {
+        this.recentRecordsEntityFilter = entityId;
+    }
+    /**
+     * Get the display title for the header.
+     * Priority: contextName > entityFilter.applicationName > "Data Explorer"
+     */
+    get displayTitle() {
+        return this.contextName || this.entityFilter?.applicationName || 'Data Explorer';
+    }
+    /**
+     * Get the display icon for the header (when at home level).
+     * Returns contextIcon if provided, otherwise null.
+     */
+    get displayIcon() {
+        return this.contextIcon;
+    }
+    /**
+     * Configuration for mj-entity-viewer composite component
+     * Hides the built-in header since we have a custom header in the dashboard
+     * Uses server-side pagination with 100 records per page (default)
+     */
+    viewerConfig = {
+        showFilter: false, // We have our own filter in the dashboard header
+        showViewModeToggle: false, // We have our own toggle in the dashboard header
+        showRecordCount: false, // We show count in the dashboard header
+        showPagination: true, // Show the pagination UI with "Load More" button
+        serverSideFiltering: true, // Use RunView's UserSearchString for filtering
+        serverSideSorting: true, // Use RunView's OrderBy for sorting
+        height: '100%'
+    };
+    /**
+     * Current grid state (built from view entity or local state changes)
+     * This is passed to mj-entity-viewer to control column display
+     */
+    currentGridState = null;
+    constructor(stateService, cdr, router, recentAccessService) {
+        super();
+        this.stateService = stateService;
+        this.cdr = cdr;
+        this.router = router;
+        this.recentAccessService = recentAccessService;
+        this.state = this.stateService.CurrentState;
+    }
+    async ngOnInit() {
+        // Parse URL state FIRST - URL wins over persisted state
+        // This must happen before loading entities to prevent race conditions
+        const urlState = this.parseUrlState();
+        // Set context for state service (enables context-specific settings)
+        await this.stateService.setContext(this.entityFilter);
+        this.state = this.stateService.CurrentState;
+        // Initialize debounced filter from persisted state (only if no URL state)
+        if (!urlState && this.state.smartFilterPrompt) {
+            this.debouncedFilterText = this.state.smartFilterPrompt;
+        }
+        // Load available entities (async to support applicationId filter)
+        // Pass urlState so we don't restore persisted entity if URL specifies one
+        await this.loadEntities(urlState);
+        // Apply URL state after entities are loaded
+        if (urlState) {
+            // URL has state - apply it (overrides persisted state)
+            this.applyUrlState(urlState);
+        }
+        else if (this.deepLink) {
+            // No URL state but @Input deepLink provided - use that
+            await this.applyDeepLink(this.deepLink);
+        }
+        // Subscribe to state changes
+        this.stateService.State
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(state => {
+            const entityChanged = state.selectedEntityName !== this.state.selectedEntityName;
+            this.state = state;
+            // When entity changes, immediately update the debounced filter text
+            if (entityChanged && state.smartFilterPrompt !== this.debouncedFilterText) {
+                this.debouncedFilterText = state.smartFilterPrompt;
+            }
+            this.onStateChanged();
+            // Update URL to reflect current state (for deep linking)
+            if (!this.skipUrlUpdates) {
+                this.updateUrl();
+            }
+            this.cdr.detectChanges();
+        });
+        // Subscribe to breadcrumb changes
+        this.stateService.Breadcrumbs
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(breadcrumbs => {
+            this.breadcrumbs = breadcrumbs;
+            this.cdr.detectChanges();
+        });
+        // Setup debounced filter
+        this.filterInput$
+            .pipe(debounceTime(250), distinctUntilChanged(), takeUntil(this.destroy$))
+            .subscribe(filterText => {
+            this.debouncedFilterText = filterText;
+            this.cdr.detectChanges();
+        });
+        // Subscribe to recent records changes
+        this.stateService.RecentRecords
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(records => {
+            this.recentRecords = records;
+            this.isLoadingRecentRecords = false;
+            this.cdr.detectChanges();
+        });
+        // Subscribe to favorite records changes
+        this.stateService.FavoriteRecords
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(records => {
+            this.favoriteRecords = records;
+            this.cdr.detectChanges();
+        });
+        // Subscribe to router NavigationEnd events for back/forward button support
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.destroy$))
+            .subscribe(event => {
+            // Only react to navigation events that weren't triggered by us
+            // Normalize URLs by decoding to handle + vs %20 encoding differences
+            // Note: decodeURIComponent doesn't decode +, so we also replace + with space
+            const currentUrl = event.urlAfterRedirects || event.url;
+            const normalizedCurrentUrl = decodeURIComponent(currentUrl).replace(/\+/g, ' ');
+            const normalizedLastUrl = decodeURIComponent(this.lastNavigatedUrl).replace(/\+/g, ' ');
+            const isExternal = normalizedCurrentUrl !== normalizedLastUrl;
+            if (isExternal) {
+                this.onExternalNavigation(currentUrl);
+            }
+        });
+        // Enable URL updates now that initialization is complete
+        this.skipUrlUpdates = false;
+        // Update URL to reflect current state (whether from URL, deepLink, or persisted)
+        this.updateUrl();
+    }
+    /**
+     * Handle keyboard shortcuts
+     * "/" or Cmd+K focuses the filter input
+     */
+    handleKeyboardShortcut(event) {
+        // Skip if user is typing in an input field
+        const target = event.target;
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+            // Allow Escape to blur the input
+            if (event.key === 'Escape') {
+                target.blur();
+            }
+            return;
+        }
+        // "/" to focus filter
+        if (event.key === '/') {
+            event.preventDefault();
+            this.focusFilterInput();
+        }
+        // Cmd+K or Ctrl+K to focus filter
+        if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+            event.preventDefault();
+            this.focusFilterInput();
+        }
+    }
+    /**
+     * Focus the filter input
+     */
+    focusFilterInput() {
+        if (this.filterInputRef) {
+            this.filterInputRef.nativeElement.focus();
+            this.filterInputRef.nativeElement.select();
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        super.ngOnDestroy();
+    }
+    async ngOnChanges(changes) {
+        // Re-apply filter when entityFilter changes
+        if (changes['entityFilter'] && !changes['entityFilter'].firstChange) {
+            // Update context for new filter (loads context-specific state)
+            await this.stateService.setContext(this.entityFilter);
+            this.state = this.stateService.CurrentState;
+            await this.loadEntities();
+        }
+    }
+    initDashboard() {
+        // Called by BaseDashboard
+    }
+    loadData() {
+        // Data loading is handled by mj-entity-viewer
+    }
+    // ========================================
+    // ENTITY MANAGEMENT
+    // ========================================
+    /**
+     * Load all available entities the user can access, applying any configured filter
+     * @param urlState Optional URL state - if provided, skip restoring persisted entity to avoid race conditions
+     */
+    async loadEntities(urlState) {
+        console.log('[DataExplorer] loadEntities called, entityFilter:', this.entityFilter);
+        this.isLoadingEntities = true;
+        try {
+            // First, load all entities the user can access
+            this.allEntities = this.metadata.Entities
+                .filter(e => {
+                const perms = e.GetUserPermisions(this.metadata.CurrentUser);
+                return perms.CanRead && e.IncludeInAPI;
+            })
+                .sort((a, b) => a.Name.localeCompare(b.Name));
+            console.log('[DataExplorer] allEntities count:', this.allEntities.length);
+            // If we have an applicationId filter, load the application entities
+            if (this.entityFilter?.applicationId) {
+                await this.loadApplicationEntityIds(this.entityFilter.applicationId);
+                console.log('[DataExplorer] applicationEntityIds count:', this.applicationEntityIds.size);
+            }
+            // Apply filter to get the final entity list
+            this.entities = this.applyEntityFilter(this.allEntities);
+            console.log('[DataExplorer] filtered entities count:', this.entities.length);
+            // Only restore entity from persisted state if there's no URL state
+            // This prevents race conditions where persisted entity triggers data load
+            // before URL state can override it
+            if (!urlState && this.state.selectedEntityName) {
+                this.selectedEntity = this.entities.find(e => e.Name === this.state.selectedEntityName) || null;
+            }
+        }
+        finally {
+            this.isLoadingEntities = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /**
+     * Load entity IDs associated with a specific application
+     */
+    async loadApplicationEntityIds(applicationId) {
+        this.applicationEntityIds.clear();
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'Application Entities',
+            ExtraFilter: `ApplicationID = '${applicationId}'`,
+            ResultType: 'entity_object'
+        });
+        if (result.Success && result.Results) {
+            for (const appEntity of result.Results) {
+                this.applicationEntityIds.add(appEntity.EntityID);
+            }
+        }
+    }
+    /**
+     * Apply the configured filter to the entity list
+     */
+    applyEntityFilter(entities) {
+        if (!this.entityFilter) {
+            return entities;
+        }
+        return entities.filter(entity => {
+            // Filter by application (via ApplicationEntities)
+            if (this.entityFilter.applicationId) {
+                if (!this.applicationEntityIds.has(entity.ID)) {
+                    return false;
+                }
+            }
+            // Filter by schema names
+            if (this.entityFilter.schemaNames && this.entityFilter.schemaNames.length > 0) {
+                if (!this.entityFilter.schemaNames.includes(entity.SchemaName)) {
+                    return false;
+                }
+            }
+            // Filter by explicit entity names
+            if (this.entityFilter.entityNames && this.entityFilter.entityNames.length > 0) {
+                if (!this.entityFilter.entityNames.includes(entity.Name)) {
+                    return false;
+                }
+            }
+            // Filter out system entities unless explicitly included
+            if (!this.entityFilter.includeSystemEntities) {
+                // Skip entities with names starting with __ (MJ system entities)
+                if (entity.Name.startsWith('__')) {
+                    return false;
+                }
+                // Could add more system schema checks here if needed
+            }
+            return true;
+        });
+    }
+    /**
+     * Handle entity selection from navigation panel or home screen
+     */
+    onEntitySelected(entity) {
+        this.resetRecordCounts();
+        this.selectedEntity = entity;
+        this.stateService.selectEntity(entity.Name);
+        // Track entity access for recent entities
+        this.stateService.trackEntityAccess(entity.Name, entity.ID);
+        // mj-entity-viewer will automatically load data when entity changes
+    }
+    /**
+     * Handle state changes from external sources
+     */
+    onStateChanged() {
+        if (this.state.selectedEntityName !== this.selectedEntity?.Name) {
+            this.resetRecordCounts();
+            this.selectedEntity = this.entities.find(e => e.Name === this.state.selectedEntityName) || null;
+        }
+    }
+    /**
+     * Reset record counts when entity changes.
+     * The actual counts will be updated when mj-entity-viewer emits dataLoaded event.
+     */
+    resetRecordCounts() {
+        this.totalRecordCount = 0;
+        this.filteredRecordCount = 0;
+    }
+    // ========================================
+    // VIEW MANAGEMENT
+    // ========================================
+    /**
+     * Handle view selection from view selector dropdown
+     */
+    onViewSelected(event) {
+        this.selectedViewEntity = event.view;
+        this.stateService.selectView(event.viewId);
+        // When a view is selected, apply its configuration
+        if (event.view) {
+            // Parse and apply the view's grid state
+            this.currentGridState = this.parseViewGridState(event.view);
+            // Apply the view's filter - for Smart Filter views, use SmartFilterPrompt
+            // For regular filter views, the WhereClause is applied in the entity-viewer
+            if (event.view.SmartFilterEnabled && event.view.SmartFilterPrompt) {
+                this.stateService.setSmartFilterPrompt(event.view.SmartFilterPrompt);
+                this.debouncedFilterText = event.view.SmartFilterPrompt;
+            }
+            else {
+                // Clear the quick filter when switching to a view with regular filters
+                this.stateService.setSmartFilterPrompt('');
+                this.debouncedFilterText = '';
+            }
+        }
+        else {
+            // Switching to default view - clear grid state and filters
+            this.currentGridState = null;
+            this.stateService.setSmartFilterPrompt('');
+            this.debouncedFilterText = '';
+        }
+    }
+    /**
+     * Parse GridState JSON from a UserView entity
+     * Returns null if no valid GridState is present
+     */
+    parseViewGridState(view) {
+        if (!view.GridState) {
+            return null;
+        }
+        try {
+            const parsed = JSON.parse(view.GridState);
+            // Validate structure - expect columnSettings array
+            if (parsed && Array.isArray(parsed.columnSettings)) {
+                return {
+                    columnSettings: parsed.columnSettings,
+                    sortSettings: parsed.sortSettings || []
+                };
+            }
+            return null;
+        }
+        catch (error) {
+            console.warn('[DataExplorer] Failed to parse GridState:', error);
+            return null;
+        }
+    }
+    /**
+     * Handle grid state changes from entity-viewer (column resize, reorder, etc.)
+     * Updates the local currentGridState and marks view as modified
+     */
+    onGridStateChanged(event) {
+        this.currentGridState = event.gridState;
+        // Mark view as modified if we have a selected view
+        if (this.state.selectedViewId) {
+            this.stateService.setViewModified(true);
+        }
+    }
+    /**
+     * Handle save view request from view selector
+     */
+    onSaveViewRequested(event) {
+        // TODO: Implement in Phase 4 - View CRUD Operations
+        // For now, just open the config panel where save functionality will be
+        this.stateService.openViewConfigPanel();
+    }
+    /**
+     * Handle manage views request - opens view browser
+     */
+    onManageViewsRequested() {
+        // TODO: Implement navigation to view management
+        // For now, just log
+        console.log('[DataExplorer] Manage views requested');
+    }
+    /**
+     * Handle open in tab request
+     */
+    onOpenInTabRequested(viewId) {
+        // Use OpenEntityRecord to open the view as a resource in a new tab
+        // Views are a known resource type in MJ
+        const compositeKey = new CompositeKey();
+        compositeKey.KeyValuePairs = [{ FieldName: 'ID', Value: viewId }];
+        this.OpenEntityRecord.emit({
+            EntityName: 'User Views',
+            RecordPKey: compositeKey
+        });
+    }
+    /**
+     * Handle configure view request - opens the configuration panel
+     */
+    onConfigureViewRequested() {
+        this.stateService.openViewConfigPanel();
+    }
+    /**
+     * Close the view configuration panel
+     */
+    onCloseViewConfigPanel() {
+        this.stateService.closeViewConfigPanel();
+    }
+    /**
+     * Handle save view from config panel
+     */
+    async onSaveView(event) {
+        if (!this.selectedEntity)
+            return;
+        try {
+            const md = new Metadata();
+            // Build GridState in Kendo-compatible format
+            const gridState = this.buildGridState(event);
+            // Build SortState in Kendo-compatible format
+            const sortState = this.buildSortState(event);
+            if (event.saveAsNew || !this.selectedViewEntity) {
+                // Create new view
+                const newView = await md.GetEntityObject('User Views');
+                newView.Name = event.name || 'Custom';
+                newView.Description = event.description;
+                newView.EntityID = this.selectedEntity.ID;
+                newView.UserID = md.CurrentUser.ID;
+                newView.IsShared = event.isShared;
+                newView.IsDefault = false;
+                // Set GridState and SortState
+                if (gridState) {
+                    newView.GridState = JSON.stringify(gridState);
+                }
+                if (sortState) {
+                    newView.SortState = JSON.stringify(sortState);
+                }
+                // Set Smart Filter settings
+                newView.SmartFilterEnabled = event.smartFilterEnabled;
+                newView.SmartFilterPrompt = event.smartFilterPrompt;
+                const saved = await newView.Save();
+                if (saved) {
+                    this.selectedViewEntity = newView;
+                    this.stateService.selectView(newView.ID);
+                    this.stateService.setViewModified(false);
+                    // Update currentGridState from the saved view to refresh the grid
+                    this.currentGridState = this.parseViewGridState(newView);
+                    // Refresh the view selector dropdown
+                    await this.viewSelectorRef?.loadViews();
+                    // Note: For new views, ngOnChanges will trigger refresh automatically
+                    // because selectedViewEntity reference changes
+                }
+            }
+            else {
+                // Update existing view
+                this.selectedViewEntity.Name = event.name;
+                this.selectedViewEntity.Description = event.description;
+                this.selectedViewEntity.IsShared = event.isShared;
+                // Update GridState and SortState
+                if (gridState) {
+                    this.selectedViewEntity.GridState = JSON.stringify(gridState);
+                }
+                if (sortState) {
+                    this.selectedViewEntity.SortState = JSON.stringify(sortState);
+                }
+                // Update Smart Filter settings
+                this.selectedViewEntity.SmartFilterEnabled = event.smartFilterEnabled;
+                this.selectedViewEntity.SmartFilterPrompt = event.smartFilterPrompt;
+                const saved = await this.selectedViewEntity.Save();
+                if (saved) {
+                    this.stateService.setViewModified(false);
+                    // Update currentGridState from the saved view to refresh the grid columns
+                    this.currentGridState = this.parseViewGridState(this.selectedViewEntity);
+                    // Force change detection to ensure grid picks up the new gridState
+                    this.cdr.detectChanges();
+                    // Refresh the view selector dropdown
+                    await this.viewSelectorRef?.loadViews();
+                    // Note: Grid will rebuild columns via ngOnChanges when currentGridState changes
+                }
+            }
+            this.stateService.closeViewConfigPanel();
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            console.error('[DataExplorer] Error saving view:', error);
+        }
+    }
+    /**
+     * Build GridState in Kendo-compatible format
+     * Format: { columnSettings: [{ID, Name, DisplayName, hidden, width, orderIndex}], sortSettings: [{field, dir}] }
+     *
+     * Priority for column settings:
+     * 1. If event.columns provided (from config panel) - use those
+     * 2. If currentGridState exists (from grid interactions) - use that
+     * 3. Otherwise return null
+     */
+    buildGridState(event) {
+        let columnSettings;
+        // First check if the event has columns configured (from config panel)
+        if (event.columns.length > 0) {
+            columnSettings = event.columns.map((col, idx) => ({
+                ID: col.fieldId,
+                Name: col.fieldName,
+                DisplayName: col.displayName,
+                hidden: false, // Visible columns only
+                width: col.width || null,
+                orderIndex: idx
+            }));
+        }
+        // Otherwise, use the current grid state if available (from grid interactions)
+        else if (this.currentGridState?.columnSettings && this.currentGridState.columnSettings.length > 0) {
+            columnSettings = this.currentGridState.columnSettings;
+        }
+        // No columns to save
+        else {
+            return null;
+        }
+        // Build sort settings - prefer event.sortField, fall back to currentGridState
+        let sortSettings;
+        if (event.sortField) {
+            sortSettings = [{
+                    field: event.sortField,
+                    dir: event.sortDirection // 'asc' or 'desc'
+                }];
+        }
+        else if (this.currentGridState?.sortSettings && this.currentGridState.sortSettings.length > 0) {
+            sortSettings = this.currentGridState.sortSettings;
+        }
+        return { columnSettings, sortSettings };
+    }
+    /**
+     * Build SortState in Kendo-compatible format
+     * Format: [{field, direction}] where direction is 'asc' or 'desc'
+     */
+    buildSortState(event) {
+        if (!event.sortField)
+            return null;
+        return [{
+                field: event.sortField,
+                direction: event.sortDirection // 'asc' or 'desc'
+            }];
+    }
+    /**
+     * Handle delete view from config panel
+     */
+    async onDeleteView() {
+        if (!this.selectedViewEntity)
+            return;
+        try {
+            const deleted = await this.selectedViewEntity.Delete();
+            if (deleted) {
+                this.selectedViewEntity = null;
+                this.stateService.selectView(null);
+                this.stateService.closeViewConfigPanel();
+            }
+        }
+        catch (error) {
+            console.error('[DataExplorer] Error deleting view:', error);
+        }
+    }
+    // ========================================
+    // VIEW MODE & FILTERING (Dashboard Header)
+    // ========================================
+    /**
+     * Handle view mode toggle from dashboard header
+     */
+    onViewModeChanged(mode) {
+        this.stateService.setViewMode(mode);
+        // Mark view as modified when view mode changes
+        if (this.state.selectedViewId) {
+            this.stateService.setViewModified(true);
+        }
+    }
+    /**
+     * Handle smart filter change from dashboard header
+     */
+    onSmartFilterChanged(prompt) {
+        this.stateService.setSmartFilterPrompt(prompt);
+        this.filterInput$.next(prompt);
+    }
+    /**
+     * Handle filter text change from mj-entity-viewer (two-way binding)
+     */
+    onFilterTextChanged(filterText) {
+        this.stateService.setSmartFilterPrompt(filterText);
+    }
+    // ========================================
+    // ENTITY VIEWER EVENT HANDLERS
+    // ========================================
+    /**
+     * Handle record selection from mj-entity-viewer
+     */
+    onViewerRecordSelected(event) {
+        this.selectedRecord = event.record;
+        // When selecting from grid, detail panel entity matches the grid entity
+        this.detailPanelEntity = this.selectedEntity;
+        const recordName = this.getRecordDisplayName(event.record);
+        this.stateService.selectRecord(event.record.PrimaryKey.ToConcatenatedString(), recordName);
+        // Add to recent items (local state for navigation panel)
+        if (this.selectedEntity) {
+            this.stateService.addRecentItem({
+                entityName: this.selectedEntity.Name,
+                compositeKeyString: event.record.PrimaryKey.ToConcatenatedString(),
+                displayName: recordName
+            });
+            // Update local recent records immediately for instant home screen updates
+            const recordId = event.record.PrimaryKey.KeyValuePairs[0]?.Value?.toString() || '';
+            this.stateService.addLocalRecentRecord(this.selectedEntity.Name, this.selectedEntity.ID, recordId, recordName);
+            // Log to User Record Logs for persistence (fire-and-forget)
+            this.recentAccessService.logAccess(this.selectedEntity.Name, event.record.PrimaryKey.Values(), 'record');
+        }
+    }
+    /**
+     * Handle record opened from mj-entity-viewer (double-click or open button)
+     */
+    onViewerRecordOpened(event) {
+        this.OpenEntityRecord.emit({
+            EntityName: event.entity.Name,
+            RecordPKey: event.compositeKey
+        });
+    }
+    /**
+     * Handle data loaded from mj-entity-viewer
+     */
+    onDataLoaded(event) {
+        this.totalRecordCount = event.totalRowCount;
+        this.filteredRecordCount = event.loadedRowCount;
+        // Store loaded records for back/forward navigation lookup
+        this.loadedRecords = event.records;
+        // Handle pending record selection from deep link
+        if (this.pendingRecordSelection) {
+            const recordId = this.pendingRecordSelection;
+            this.pendingRecordSelection = null; // Clear it so we don't keep trying
+            // Try to find the record by primary key or concatenated string
+            const record = event.records.find(r => {
+                const pkString = r.PrimaryKey.ToConcatenatedString();
+                const pkValue = r.PrimaryKey.KeyValuePairs[0]?.Value?.toString();
+                return pkString === recordId || pkValue === recordId;
+            });
+            if (record) {
+                this.selectedRecord = record;
+                this.detailPanelEntity = this.selectedEntity;
+                const recordName = this.getRecordDisplayName(record);
+                this.stateService.selectRecord(record.PrimaryKey.ToConcatenatedString(), recordName);
+            }
+            else {
+                console.warn(`[DataExplorer] Deep link record not found: ${recordId}`);
+            }
+        }
+        // Restore selected record if we have a persisted selectedRecordId
+        else if (this.state.selectedRecordId && this.state.detailPanelOpen && !this.selectedRecord) {
+            const record = event.records.find(r => r.PrimaryKey.ToConcatenatedString() === this.state.selectedRecordId);
+            if (record) {
+                this.selectedRecord = record;
+                this.detailPanelEntity = this.selectedEntity;
+            }
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle filtered count change from mj-entity-viewer
+     */
+    onFilteredCountChanged(event) {
+        this.filteredRecordCount = event.filteredCount;
+        this.totalRecordCount = event.totalCount;
+        this.cdr.detectChanges();
+    }
+    // ========================================
+    // DETAIL PANEL
+    // ========================================
+    /**
+     * Handle detail panel close
+     */
+    onDetailPanelClosed() {
+        this.selectedRecord = null;
+        this.detailPanelEntity = null;
+        this.stateService.closeDetailPanel();
+    }
+    /**
+     * Handle opening a record in full view (from detail panel)
+     * Uses detailPanelEntity since the panel may be showing a different entity than the grid
+     */
+    onOpenRecord(record) {
+        if (!this.detailPanelEntity)
+            return;
+        this.OpenEntityRecord.emit({
+            EntityName: this.detailPanelEntity.Name,
+            RecordPKey: record.PrimaryKey
+        });
+    }
+    /**
+     * Handle navigation to a related entity from detail panel.
+     * Navigates within the explorer and applies filter to show related records.
+     */
+    onNavigateToRelated(event) {
+        const entity = this.entities.find(e => e.Name === event.entityName);
+        if (!entity) {
+            // Entity not in our filtered list - it may exist in the system but not be part of this app
+            console.warn(`Entity not found in explorer: ${event.entityName}`);
+            return;
+        }
+        // Close detail panel and clear current record
+        this.selectedRecord = null;
+        this.detailPanelEntity = null;
+        this.stateService.closeDetailPanel();
+        // Navigate to the entity
+        this.selectedEntity = entity;
+        this.stateService.selectEntity(entity.Name);
+        // Apply the filter to show related records
+        // The filter is in SQL format like "ParentID='xxx'" - we just show it in the filter box
+        // The entity viewer will apply it as a smart filter
+        if (event.filter) {
+            // For now, we'll apply the filter as-is
+            // A future enhancement could parse and display it more user-friendly
+            this.stateService.setSmartFilterPrompt(event.filter);
+            this.debouncedFilterText = event.filter;
+        }
+    }
+    /**
+     * Handle opening a related record - display in detail panel (not new tab)
+     * The record is already loaded, so just update the detail panel
+     */
+    onOpenRelatedRecord(event) {
+        this.showRecordInDetailPanel(event.entityName, event.record);
+    }
+    /**
+     * Handle opening a foreign key record (from FK field link in detail panel)
+     * Loads the record and displays it in the detail panel
+     */
+    async onOpenForeignKeyRecord(event) {
+        await this.loadAndShowRecordInDetailPanel(event.entityName, event.recordId);
+    }
+    /**
+     * Show an already-loaded record in the detail panel
+     * Note: This does NOT change selectedEntity (the main grid's entity)
+     * It only updates detailPanelEntity which is used by the detail panel
+     */
+    showRecordInDetailPanel(entityName, record) {
+        const entityInfo = this.metadata.Entities.find(e => e.Name === entityName);
+        if (!entityInfo) {
+            console.warn(`Entity not found: ${entityName}`);
+            return;
+        }
+        // Update the detail panel entity and record
+        // detailPanelEntity may differ from selectedEntity when viewing FK/related records
+        this.detailPanelEntity = entityInfo;
+        this.selectedRecord = record;
+        // Use selectRecord to open the panel with proper state tracking
+        const recordName = this.getRecordDisplayName(record);
+        this.stateService.selectRecord(record.PrimaryKey.ToConcatenatedString(), recordName);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Load a record by ID and show it in the detail panel
+     */
+    async loadAndShowRecordInDetailPanel(entityName, recordId) {
+        const entityInfo = this.metadata.Entities.find(e => e.Name === entityName);
+        if (!entityInfo) {
+            console.warn(`Entity not found: ${entityName}`);
+            return;
+        }
+        try {
+            // Load the record
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: entityName,
+                ExtraFilter: `ID='${recordId}'`,
+                ResultType: 'entity_object',
+                MaxRows: 1
+            });
+            if (result.Success && result.Results.length > 0) {
+                this.showRecordInDetailPanel(entityName, result.Results[0]);
+            }
+            else {
+                console.warn(`Record not found: ${entityName} ID=${recordId}`);
+            }
+        }
+        catch (error) {
+            console.error(`Failed to load record: ${entityName} ID=${recordId}`, error);
+        }
+    }
+    // ========================================
+    // NAVIGATION PANEL
+    // ========================================
+    /**
+     * Handle opening a record from navigation panel (recent/favorites)
+     */
+    onOpenRecordFromNav(event) {
+        this.OpenEntityRecord.emit({
+            EntityName: event.entityName,
+            RecordPKey: event.compositeKey
+        });
+    }
+    /**
+     * Handle selecting a record from navigation panel (recent/favorites).
+     * Navigates to the entity within Data Explorer and selects the record
+     * in the detail panel (instead of opening full record view).
+     */
+    onSelectRecordFromNav(event) {
+        const entity = this.entities.find(e => e.Name === event.entityName);
+        if (entity) {
+            // Set pending record selection - will be resolved in onDataLoaded
+            this.pendingRecordSelection = event.recordId;
+            this.onEntitySelected(entity);
+        }
+    }
+    /**
+     * Toggle navigation panel
+     */
+    toggleNavigationPanel() {
+        this.stateService.toggleNavigationPanel();
+    }
+    /**
+     * Handle expand and focus from collapsed nav icon click
+     */
+    onExpandAndFocus(section) {
+        this.stateService.expandAndFocusSection(section);
+    }
+    // ========================================
+    // DEEP LINK HANDLING
+    // ========================================
+    /**
+     * Apply a deep link to navigate to a specific entity/record
+     */
+    async applyDeepLink(deepLink) {
+        // Apply view mode if specified
+        if (deepLink.viewMode) {
+            this.stateService.setViewMode(deepLink.viewMode);
+        }
+        // Navigate to entity if specified
+        if (deepLink.entity) {
+            const entity = this.entities.find(e => e.Name.toLowerCase() === deepLink.entity.toLowerCase());
+            if (entity) {
+                // Reset counts before setting entity to prevent stale data display
+                this.resetRecordCounts();
+                this.selectedEntity = entity;
+                this.stateService.selectEntity(entity.Name);
+                // Apply filter if specified
+                if (deepLink.filter) {
+                    this.stateService.setSmartFilterPrompt(deepLink.filter);
+                    this.debouncedFilterText = deepLink.filter;
+                }
+                // Note: Record selection is handled after data loads via onDataLoaded
+                // We store the record ID to select once data is available
+                if (deepLink.record) {
+                    this.pendingRecordSelection = deepLink.record;
+                }
+            }
+            else {
+                console.warn(`[DataExplorer] Deep link entity not found: ${deepLink.entity}`);
+            }
+        }
+    }
+    /** Record ID to select once data loads (from deep link) */
+    pendingRecordSelection = null;
+    // ========================================
+    // BREADCRUMB NAVIGATION
+    // ========================================
+    /**
+     * Handle breadcrumb click - navigate to that level
+     */
+    onBreadcrumbClick(breadcrumb, index) {
+        // Don't navigate if it's the last (current) breadcrumb
+        if (index === this.breadcrumbs.length - 1) {
+            return;
+        }
+        this.stateService.navigateToBreadcrumb(breadcrumb);
+        // If navigating to application level, clear entity selection
+        if (breadcrumb.type === 'application') {
+            this.selectedEntity = null;
+            this.selectedRecord = null;
+            this.detailPanelEntity = null;
+        }
+    }
+    // ========================================
+    // HELPERS
+    // ========================================
+    /**
+     * Get the set of allowed entity names for filtering favorites/recents.
+     * Returns null if no filter is active (all entities allowed).
+     */
+    get allowedEntityNames() {
+        if (!this.entityFilter) {
+            return null;
+        }
+        return new Set(this.entities.map(e => e.Name));
+    }
+    /**
+     * Get display name for a record
+     */
+    getRecordDisplayName(record) {
+        if (!this.selectedEntity)
+            return 'Unknown';
+        if (this.selectedEntity.NameField) {
+            const nameValue = record.Get(this.selectedEntity.NameField.Name);
+            if (nameValue)
+                return String(nameValue);
+        }
+        return record.PrimaryKey.ToString();
+    }
+    /**
+     * Get the icon class for an entity
+     */
+    getEntityIcon(entity) {
+        if (entity.Icon) {
+            return this.formatEntityIcon(entity.Icon);
+        }
+        return 'fa-solid fa-table';
+    }
+    /**
+     * Format entity icon to ensure proper Font Awesome class format
+     */
+    formatEntityIcon(icon) {
+        if (!icon) {
+            return 'fa-solid fa-table';
+        }
+        if (icon.startsWith('fa-') || icon.startsWith('fa ')) {
+            if (icon.startsWith('fa-solid') || icon.startsWith('fa-regular') ||
+                icon.startsWith('fa-light') || icon.startsWith('fa-brands') ||
+                icon.startsWith('fa ')) {
+                return icon;
+            }
+            return `fa-solid ${icon}`;
+        }
+        return `fa-solid fa-${icon}`;
+    }
+    // ========================================
+    // URL DEEP LINKING
+    // ========================================
+    /**
+     * Parse URL query string and return a deep link object.
+     * Returns null if no relevant params found.
+     *
+     * Query params:
+     * - entity: Selected entity name
+     * - record: Selected record ID (URL segment format via CompositeKey)
+     * - filter: Current filter text
+     * - view: View mode (grid or cards)
+     */
+    parseUrlState() {
+        const url = this.router.url;
+        const queryIndex = url.indexOf('?');
+        if (queryIndex === -1) {
+            return null;
+        }
+        const queryString = url.substring(queryIndex + 1);
+        const params = new URLSearchParams(queryString);
+        const entity = params.get('entity');
+        const record = params.get('record');
+        const filter = params.get('filter');
+        const view = params.get('view');
+        // If no params, return null
+        if (!entity && !record && !filter && !view) {
+            return null;
+        }
+        return {
+            entity: entity || undefined,
+            record: record || undefined,
+            filter: filter || undefined,
+            viewMode: view || undefined
+        };
+    }
+    /**
+     * Apply URL state to the component.
+     * Used both during init and for popstate handling.
+     */
+    applyUrlState(urlState) {
+        // Apply view mode if specified
+        if (urlState.viewMode) {
+            this.stateService.setViewMode(urlState.viewMode);
+        }
+        // Navigate to entity if specified
+        if (urlState.entity) {
+            const entity = this.entities.find(e => e.Name.toLowerCase() === urlState.entity.toLowerCase());
+            if (entity) {
+                const entityChanged = this.selectedEntity?.Name !== entity.Name;
+                if (entityChanged) {
+                    // Entity changed - reset counts and select new entity
+                    this.resetRecordCounts();
+                    this.selectedEntity = entity;
+                    this.stateService.selectEntity(entity.Name);
+                }
+                // Apply filter if specified
+                if (urlState.filter) {
+                    this.stateService.setSmartFilterPrompt(urlState.filter);
+                    this.debouncedFilterText = urlState.filter;
+                }
+                else if (entityChanged) {
+                    // Only clear filter if entity changed (selectEntity already handles this)
+                    this.stateService.setSmartFilterPrompt('');
+                    this.debouncedFilterText = '';
+                }
+                // Handle record selection
+                if (urlState.record) {
+                    if (entityChanged) {
+                        // Entity changed - need to wait for data to load
+                        this.pendingRecordSelection = urlState.record;
+                    }
+                    else {
+                        // Entity is the same - find record from already-loaded data
+                        const record = this.loadedRecords.find(r => {
+                            const pkString = r.PrimaryKey.ToConcatenatedString();
+                            const pkValue = r.PrimaryKey.KeyValuePairs[0]?.Value?.toString();
+                            return pkString === urlState.record || pkValue === urlState.record;
+                        });
+                        if (record) {
+                            this.selectedRecord = record;
+                            this.detailPanelEntity = this.selectedEntity;
+                            const recordName = this.getRecordDisplayName(record);
+                            this.stateService.selectRecord(record.PrimaryKey.ToConcatenatedString(), recordName);
+                        }
+                        else {
+                            // Record not in current page - update state but panel won't show
+                            this.stateService.selectRecord(urlState.record, this.state.selectedRecordName || undefined);
+                        }
+                    }
+                }
+                else {
+                    // Clear record selection if not in URL
+                    this.selectedRecord = null;
+                    this.detailPanelEntity = null;
+                    this.stateService.closeDetailPanel();
+                }
+            }
+        }
+        else {
+            // No entity in URL - go to home view
+            this.selectedEntity = null;
+            this.selectedRecord = null;
+            this.detailPanelEntity = null;
+            this.stateService.selectEntity(null);
+            this.stateService.closeDetailPanel();
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Update the URL query string to reflect current navigation state.
+     * This enables deep linking - users can bookmark or share URLs to specific views.
+     * Called immediately on state changes (not debounced).
+     * Uses Angular Router for proper browser history integration.
+     */
+    updateUrl() {
+        const params = new URLSearchParams();
+        // Add entity if selected
+        if (this.state.selectedEntityName) {
+            params.set('entity', this.state.selectedEntityName);
+        }
+        // Add record if selected (only if entity is also selected)
+        // Use the stored selectedRecordId which is already in URL segment format
+        if (this.state.selectedRecordId && this.state.selectedEntityName) {
+            // The selectedRecordId is stored using ToConcatenatedString which uses the same format as ToURLSegment
+            params.set('record', this.state.selectedRecordId);
+        }
+        // Add filter if present (only if entity is also selected)
+        if (this.state.smartFilterPrompt && this.state.selectedEntityName) {
+            params.set('filter', this.state.smartFilterPrompt);
+        }
+        // Add view mode if not default (grid is default)
+        if (this.state.viewMode && this.state.viewMode !== 'grid') {
+            params.set('view', this.state.viewMode);
+        }
+        // Get the current path without query string
+        const currentUrl = this.router.url;
+        const currentPath = currentUrl.split('?')[0];
+        // Build the new URL
+        const queryString = params.toString();
+        const newUrl = queryString ? `${currentPath}?${queryString}` : currentPath;
+        // Track this URL so we don't react to our own navigation
+        this.lastNavigatedUrl = newUrl;
+        // Use Angular Router for proper browser history integration
+        // This allows back/forward buttons to work correctly
+        this.router.navigateByUrl(newUrl, { replaceUrl: false });
+    }
+    /**
+     * Handle external navigation (back/forward buttons).
+     * Parses the URL and applies the state without triggering a new navigation.
+     */
+    onExternalNavigation(url) {
+        // Check if this URL is for our component (contains our base path)
+        const currentPath = this.router.url.split('?')[0];
+        const newPath = url.split('?')[0];
+        // Only handle if we're still on the same base path (same dashboard instance)
+        if (currentPath !== newPath) {
+            return; // Different route entirely, shell will handle it
+        }
+        // Parse the new URL state
+        const urlState = this.parseUrlFromString(url);
+        // Apply the state without triggering URL updates
+        this.skipUrlUpdates = true;
+        if (urlState) {
+            this.applyUrlState(urlState);
+        }
+        else {
+            // No params means go to home view
+            this.selectedEntity = null;
+            this.selectedRecord = null;
+            this.detailPanelEntity = null;
+            this.stateService.selectEntity(null);
+            this.stateService.closeDetailPanel();
+        }
+        this.skipUrlUpdates = false;
+        // Update the tracked URL
+        this.lastNavigatedUrl = url;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Parse URL state from a URL string (used for external navigation).
+     */
+    parseUrlFromString(url) {
+        const queryIndex = url.indexOf('?');
+        if (queryIndex === -1) {
+            return null;
+        }
+        const queryString = url.substring(queryIndex + 1);
+        const params = new URLSearchParams(queryString);
+        const entity = params.get('entity');
+        const record = params.get('record');
+        const filterParam = params.get('filter');
+        const view = params.get('view');
+        // If no params, return null
+        if (!entity && !record && !filterParam && !view) {
+            return null;
+        }
+        return {
+            entity: entity || undefined,
+            record: record || undefined,
+            filter: filterParam || undefined,
+            viewMode: view || undefined
+        };
+    }
+    // ========================================
+    // HOME SCREEN ACTIONS
+    // ========================================
+    /**
+     * Toggle entity favorite status
+     */
+    async toggleEntityFavorite(entity, event) {
+        event.stopPropagation(); // Prevent card click
+        if (this.stateService.isEntityFavorited(entity.ID)) {
+            await this.stateService.removeEntityFromFavorites(entity.ID);
+        }
+        else {
+            await this.stateService.addEntityToFavorites(entity.Name, entity.ID);
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Check if entity is favorited (for template)
+     */
+    isEntityFavorited(entity) {
+        return this.stateService.isEntityFavorited(entity.ID);
+    }
+    /**
+     * Toggle show all entities vs common entities
+     */
+    toggleShowAllEntities() {
+        this.stateService.toggleShowAllEntities();
+    }
+    /**
+     * Handle clicking on a recent record from home screen.
+     * Navigates to the entity and sets up pending selection to select the record
+     * and open the detail panel once data loads.
+     */
+    onRecentRecordClick(record) {
+        const entity = this.entities.find(e => e.ID === record.entityId);
+        if (entity) {
+            // Set pending record selection - will be resolved in onDataLoaded
+            this.pendingRecordSelection = record.recordId;
+            this.onEntitySelected(entity);
+        }
+    }
+    /**
+     * Handle clicking on a favorite record from home screen.
+     * Navigates to the entity and sets up pending selection to select the record
+     * and open the detail panel once data loads.
+     */
+    onFavoriteRecordClick(record) {
+        const entity = this.entities.find(e => e.ID === record.entityId);
+        if (entity) {
+            // Set pending record selection - will be resolved in onDataLoaded
+            this.pendingRecordSelection = record.recordId;
+            this.onEntitySelected(entity);
+        }
+    }
+    /**
+     * Get the icon for an entity by ID (for recent records)
+     */
+    getEntityIconById(entityId) {
+        const entity = this.metadata.Entities.find(e => e.ID === entityId);
+        if (entity) {
+            return this.getEntityIcon(entity);
+        }
+        return 'fa-solid fa-table';
+    }
+    /**
+     * Format relative time for display (e.g., "2 hours ago")
+     */
+    formatRelativeTime(date) {
+        const now = new Date();
+        const diff = now.getTime() - new Date(date).getTime();
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(diff / 3600000);
+        const days = Math.floor(diff / 86400000);
+        if (minutes < 1)
+            return 'Just now';
+        if (minutes < 60)
+            return `${minutes}m ago`;
+        if (hours < 24)
+            return `${hours}h ago`;
+        if (days < 7)
+            return `${days}d ago`;
+        return new Date(date).toLocaleDateString();
+    }
+    /**
+     * Check if we're at the home level (no entity selected)
+     */
+    get isAtHomeLevel() {
+        return !this.selectedEntity;
+    }
+    static ɵfac = function DataExplorerDashboardComponent_Factory(t) { return new (t || DataExplorerDashboardComponent)(i0.ɵɵdirectiveInject(i1.ExplorerStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(i3.RecentAccessService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataExplorerDashboardComponent, selectors: [["mj-data-explorer-dashboard"]], viewQuery: function DataExplorerDashboardComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(ViewSelectorComponent, 5);
+            i0.ɵɵviewQuery(EntityViewerComponent, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterInputRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewSelectorRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityViewerRef = _t.first);
+        } }, hostBindings: function DataExplorerDashboardComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function DataExplorerDashboardComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyboardShortcut($event); }, false, i0.ɵɵresolveDocument);
+        } }, inputs: { entityFilter: "entityFilter", deepLink: "deepLink", contextName: "contextName", contextIcon: "contextIcon" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 18, vars: 15, consts: [["filterInput", ""], [1, "data-explorer-container"], [1, "navigation-panel", 3, "collapsed", "width"], [1, "content-area"], [1, "breadcrumb-bar"], [1, "content-header"], [1, "header-left"], [1, "header-center"], [1, "smart-filter-container"], [1, "header-right"], [1, "view-mode-toggle"], [1, "content-body"], [1, "entity-home-view"], [3, "entity", "viewEntity", "viewMode", "filterText", "selectedRecordId", "config", "gridState"], [1, "detail-panel", 3, "width"], [3, "close", "save", "delete", "entity", "viewEntity", "isOpen", "currentGridState"], [1, "navigation-panel"], [3, "entitySelected", "toggleCollapse", "sectionToggled", "openRecord", "selectRecord", "expandAndFocus", "entities", "selectedEntityName", "favorites", "recentItems", "collapsed", "allowedEntityNames", "favoritesSectionExpanded", "recentSectionExpanded", "entitiesSectionExpanded", "viewsSectionExpanded"], [1, "breadcrumb-item", 3, "click", "title"], [1, "breadcrumb-icon", 3, "class"], [1, "breadcrumb-label"], [1, "fa-solid", "fa-chevron-right", "breadcrumb-separator"], [1, "breadcrumb-icon"], [1, "entity-icon"], [1, "entity-title"], [1, "record-count"], [3, "viewSelected", "saveViewRequested", "manageViewsRequested", "openInTabRequested", "configureViewRequested", "entity", "selectedViewId", "viewModified"], [1, "entity-icon", 3, "class"], [1, "fa-solid", "fa-search", "filter-icon"], ["type", "text", "placeholder", "Filter records... (press / to focus)", 1, "smart-filter-input", 3, "ngModelChange", "ngModel"], [1, "clear-filter-btn"], [1, "clear-filter-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["type", "text", "placeholder", "Filter entities... (press / to focus)", 1, "smart-filter-input", 3, "ngModelChange", "ngModel"], ["title", "Grid View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Cards View", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-grip"], [1, "loading-state"], [1, "home-section"], ["text", "Loading entities...", "size", "medium"], [1, "home-two-column-layout"], [1, "section-header-with-toggle"], [1, "section-header-left"], [1, "fa-solid", "fa-database", "section-icon"], [1, "section-title"], [1, "section-count"], [1, "inline-toggle"], [1, "entity-card-grid"], [1, "entity-card", 3, "title"], [1, "empty-state", "small"], [1, "empty-state"], [1, "home-column"], [1, "section-header"], [1, "fa-solid", "fa-history", "section-icon"], [1, "entity-filter-strip"], [1, "recent-records-list"], [1, "recent-record-item", 3, "title"], ["title", "Show all entities", 1, "entity-filter-btn", 3, "click"], [1, "fa-solid", "fa-layer-group"], [1, "entity-filter-btn", 3, "active", "title"], [1, "entity-filter-btn", 3, "click", "title"], [1, "recent-record-item", 3, "click", "title"], [1, "recent-record-icon"], [1, "recent-record-content"], [1, "recent-record-name"], [1, "recent-record-entity"], [1, "recent-record-time"], [1, "fa-solid", "fa-star", "section-icon"], [1, "fa-solid", "fa-clock", "section-icon"], [1, "entity-list"], [1, "entity-list-item", 3, "title"], [1, "entity-list-item", 3, "click", "title"], [1, "entity-list-icon"], [1, "entity-list-content"], [1, "entity-list-name"], [1, "favorite-btn", 3, "click", "title"], ["title", "Remove from favorites", 1, "favorite-btn", "favorited", 3, "click"], [1, "fa-solid", "fa-star"], [1, "toggle-btn", 3, "click", "title"], [1, "entity-card", 3, "click", "title"], [1, "entity-card-icon"], [1, "entity-card-content"], [1, "entity-card-title"], [1, "entity-card-description"], [1, "fa-solid", "fa-search", "empty-icon"], [1, "fa-solid", "fa-database", "empty-icon"], [3, "viewModeChange", "filterTextChange", "recordSelected", "recordOpened", "dataLoaded", "filteredCountChanged", "gridStateChanged", "entity", "viewEntity", "viewMode", "filterText", "selectedRecordId", "config", "gridState"], [1, "detail-panel"], [3, "close", "openRecord", "navigateToRelated", "openRelatedRecord", "openForeignKeyRecord", "entity", "record"]], template: function DataExplorerDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵtemplate(1, DataExplorerDashboardComponent_Conditional_1_Template, 2, 15, "div", 2);
+            i0.ɵɵelementStart(2, "div", 3);
+            i0.ɵɵtemplate(3, DataExplorerDashboardComponent_Conditional_3_Template, 3, 0, "div", 4);
+            i0.ɵɵelementStart(4, "div", 5)(5, "div", 6);
+            i0.ɵɵtemplate(6, DataExplorerDashboardComponent_Conditional_6_Template, 6, 7)(7, DataExplorerDashboardComponent_Conditional_7_Template, 5, 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "div", 7);
+            i0.ɵɵtemplate(9, DataExplorerDashboardComponent_Conditional_9_Template, 5, 2, "div", 8)(10, DataExplorerDashboardComponent_Conditional_10_Template, 5, 2, "div", 8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "div", 9);
+            i0.ɵɵtemplate(12, DataExplorerDashboardComponent_Conditional_12_Template, 5, 4, "div", 10);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(13, "div", 11);
+            i0.ɵɵtemplate(14, DataExplorerDashboardComponent_Conditional_14_Template, 3, 1, "div", 12)(15, DataExplorerDashboardComponent_Conditional_15_Template, 1, 7, "mj-entity-viewer", 13);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(16, DataExplorerDashboardComponent_Conditional_16_Template, 2, 4, "div", 14);
+            i0.ɵɵelementStart(17, "mj-view-config-panel", 15);
+            i0.ɵɵlistener("close", function DataExplorerDashboardComponent_Template_mj_view_config_panel_close_17_listener() { return ctx.onCloseViewConfigPanel(); })("save", function DataExplorerDashboardComponent_Template_mj_view_config_panel_save_17_listener($event) { return ctx.onSaveView($event); })("delete", function DataExplorerDashboardComponent_Template_mj_view_config_panel_delete_17_listener() { return ctx.onDeleteView(); });
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isAtHomeLevel ? 1 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.isAtHomeLevel && ctx.breadcrumbs.length > 0 ? 3 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("home-header", ctx.isAtHomeLevel);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.selectedEntity ? 6 : 7);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.selectedEntity ? 9 : 10);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.selectedEntity ? 12 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("home-content", ctx.isAtHomeLevel);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.selectedEntity ? 14 : 15);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.state.detailPanelOpen && ctx.selectedRecord ? 16 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("entity", ctx.selectedEntity)("viewEntity", ctx.selectedViewEntity)("isOpen", ctx.state.viewConfigPanelOpen)("currentGridState", ctx.currentGridState);
+        } }, dependencies: [i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i5.EntityViewerComponent, i5.EntityRecordDetailPanelComponent, i3.LoadingComponent, i6.NavigationPanelComponent, i7.ViewSelectorComponent, i8.ViewConfigPanelComponent, i9.DecimalPipe], styles: [".data-explorer-container[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  background: #f5f7fa;\n  overflow: hidden;\n}\n\n.navigation-panel[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #e0e0e0;\n  transition: width 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);\n}\n.navigation-panel.collapsed[_ngcontent-%COMP%] {\n  width: 48px;\n}\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: #f5f7fa;\n}\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 24px;\n  background: white;\n  border-bottom: 1px solid #eee;\n  flex-shrink: 0;\n  font-size: 13px;\n  min-height: 40px;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: #666;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  max-width: 200px;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n  color: #1976d2;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n  color: #1a1a1a;\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-label[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: #ccc;\n  flex-shrink: 0;\n}\n\n.content-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 24px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n  gap: 24px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n\n\n.header-left[_ngcontent-%COMP%]     mj-view-selector {\n  margin-left: 8px;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.record-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #666;\n  font-weight: 500;\n}\n\n.header-center[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 600px;\n}\n\n.smart-filter-container[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n}\n\n.smart-filter-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 40px 10px 16px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  font-size: 14px;\n  background: #fafafa;\n  transition: all 0.15s ease;\n}\n.smart-filter-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #1976d2;\n  background: white;\n  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n.smart-filter-input[_ngcontent-%COMP%]::placeholder {\n  color: #999;\n}\n\n.clear-filter-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n}\n.clear-filter-btn[_ngcontent-%COMP%]:hover {\n  background: #e0e0e0;\n  color: #424242;\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  transition: all 0.15s ease;\n}\n.toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n}\n.toggle-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.content-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n}\n\n.loading-container[_ngcontent-%COMP%], \n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 16px;\n  background: white;\n  border-radius: 8px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n.loading-message[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  color: #666;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: #757575;\n  background: white;\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: #e0e0e0;\n  margin-bottom: 24px;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #333;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: #666;\n}\n\n\n\n.entity-home-view[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 4px;\n}\n\n.entity-card-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 16px;\n  padding: 0;\n}\n\n.entity-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: white;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);\n  border-color: #1976d2;\n}\n\n.entity-card[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.entity-card-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .entity-card-icon[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #1976d2, #1565c0);\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .entity-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: white;\n}\n\n.entity-card-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-card-title[_ngcontent-%COMP%] {\n  margin: 0 0 6px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-card-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n[_nghost-%COMP%]     mj-explorer-grid-view, \n[_nghost-%COMP%]     mj-explorer-cards-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n\n\n\n\n\n\n\n.content-header.home-header[_ngcontent-%COMP%] {\n  border-bottom: none;\n  background: transparent;\n  box-shadow: none;\n  padding: 24px 24px 16px;\n}\n\n.content-body.home-content[_ngcontent-%COMP%] {\n  padding-top: 0;\n}\n\n\n\n.filter-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #999;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.smart-filter-container[_ngcontent-%COMP%]   .smart-filter-input[_ngcontent-%COMP%] {\n  padding-left: 40px;\n}\n\n\n\n\n\n\n.home-section[_ngcontent-%COMP%] {\n  margin-bottom: 28px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #1976d2;\n  width: 20px;\n  text-align: center;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #888;\n  font-weight: 500;\n  margin-left: 8px;\n}\n\n\n\n\n\n\n.home-two-column-layout[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n  margin-bottom: 28px;\n}\n\n.home-column[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n\n\n.section-header-with-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n\n\n.inline-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.inline-toggle[_ngcontent-%COMP%]   .toggle-btn[_ngcontent-%COMP%] {\n  width: auto;\n  height: 26px;\n  padding: 0 10px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  font-size: 11px;\n  font-weight: 500;\n  transition: all 0.15s ease;\n}\n\n.inline-toggle[_ngcontent-%COMP%]   .toggle-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n}\n\n.inline-toggle[_ngcontent-%COMP%]   .toggle-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n\n\n\n.entity-card-row[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding: 0;\n}\n\n.entity-card.compact[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n  width: auto;\n  min-width: 180px;\n  max-width: 280px;\n  padding: 12px 16px;\n  gap: 12px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n.entity-card.compact[_ngcontent-%COMP%]   .entity-card-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n\n\n\n\n\n.favorite-btn[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #ccc;\n  transition: all 0.15s ease;\n  margin-left: auto;\n}\n\n.favorite-btn[_ngcontent-%COMP%]:hover {\n  background: rgba(255, 193, 7, 0.1);\n  color: #ffc107;\n  transform: scale(1.1);\n}\n\n.favorite-btn.favorited[_ngcontent-%COMP%] {\n  color: #ffc107;\n}\n\n.favorite-btn.favorited[_ngcontent-%COMP%]:hover {\n  background: rgba(255, 193, 7, 0.15);\n  color: #ffb300;\n}\n\n.entity-card[_ngcontent-%COMP%]   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 0;\n  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;\n}\n\n.entity-card[_ngcontent-%COMP%]:hover   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.entity-card[_ngcontent-%COMP%]   .favorite-btn.favorited[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n\n\n\n\n\n.recent-records-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.recent-record-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.recent-record-item[_ngcontent-%COMP%]:hover {\n  background: #f5f7fa;\n}\n\n.recent-record-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.recent-record-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #4caf50;\n}\n\n.recent-record-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.recent-record-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.recent-record-entity[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #888;\n}\n\n.recent-record-time[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: #aaa;\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n.entity-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-list-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.entity-list-item[_ngcontent-%COMP%]:hover {\n  background: #f5f7fa;\n}\n\n.entity-list-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-list-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #1976d2;\n}\n\n.entity-list-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.entity-list-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-list-item[_ngcontent-%COMP%]   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.entity-list-item[_ngcontent-%COMP%]:hover   .favorite-btn[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.entity-list-item[_ngcontent-%COMP%]   .favorite-btn.favorited[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n\n\n\n\n\n.entity-filter-strip[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  margin-left: auto;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 3px;\n}\n\n.entity-filter-btn[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.entity-filter-btn[_ngcontent-%COMP%]:hover {\n  color: #333;\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.entity-filter-btn.active[_ngcontent-%COMP%] {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%]   .toggle-btn[_ngcontent-%COMP%] {\n  width: auto;\n  padding: 0 12px;\n  gap: 6px;\n}\n\n.toggle-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n}\n\n\n\n\n\n\n.empty-state.small[_ngcontent-%COMP%] {\n  height: auto;\n  padding: 32px;\n  background: #fafafa;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n\n.empty-state.small[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n@media (max-width: 1200px) {\n  .entity-card-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n  }\n}\n\n@media (max-width: 900px) {\n  .content-header[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .header-center[_ngcontent-%COMP%] {\n    order: 3;\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card.compact[_ngcontent-%COMP%] {\n    min-width: 160px;\n  }\n\n  \n\n  .home-two-column-layout[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n}\n\n@media (max-width: 600px) {\n  .data-explorer-container[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .navigation-panel[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .content-header[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n  }\n\n  .content-body[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n  }\n\n  .entity-card-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .entity-card[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n\n  .entity-card.compact[_ngcontent-%COMP%] {\n    min-width: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card-row[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .view-mode-toggle[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .section-title[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .home-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n  }\n}"], data: { animation: [
+                trigger('slideInLeft', [
+                    transition(':enter', [
+                        style({ transform: 'translateX(-100%)', opacity: 0 }),
+                        animate('200ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))
+                    ]),
+                    transition(':leave', [
+                        animate('200ms ease-in', style({ transform: 'translateX(-100%)', opacity: 0 }))
+                    ])
+                ])
+            ] } });
+};
+DataExplorerDashboardComponent = __decorate([
+    RegisterClass(BaseDashboard, 'DataExplorer')
+], DataExplorerDashboardComponent);
+export { DataExplorerDashboardComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataExplorerDashboardComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-data-explorer-dashboard', animations: [
+                    trigger('slideInLeft', [
+                        transition(':enter', [
+                            style({ transform: 'translateX(-100%)', opacity: 0 }),
+                            animate('200ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))
+                        ]),
+                        transition(':leave', [
+                            animate('200ms ease-in', style({ transform: 'translateX(-100%)', opacity: 0 }))
+                        ])
+                    ])
+                ], template: "<div class=\"data-explorer-container\">\n  <!-- Navigation Panel (Left) - Hidden at home level, animated -->\n  @if (!isAtHomeLevel) {\n    <div\n      class=\"navigation-panel\"\n      [class.collapsed]=\"state.navigationPanelCollapsed\"\n      [style.width.px]=\"state.navigationPanelCollapsed ? 48 : state.navigationPanelWidth\"\n      [@slideInLeft]>\n\n      <mj-explorer-navigation-panel\n        [entities]=\"entities\"\n        [selectedEntityName]=\"state.selectedEntityName\"\n        [favorites]=\"state.favorites\"\n        [recentItems]=\"state.recentItems\"\n        [collapsed]=\"state.navigationPanelCollapsed\"\n        [allowedEntityNames]=\"allowedEntityNames\"\n        [favoritesSectionExpanded]=\"state.favoritesSectionExpanded\"\n        [recentSectionExpanded]=\"state.recentSectionExpanded\"\n        [entitiesSectionExpanded]=\"state.entitiesSectionExpanded\"\n        [viewsSectionExpanded]=\"state.viewsSectionExpanded\"\n        (entitySelected)=\"onEntitySelected($event)\"\n        (toggleCollapse)=\"toggleNavigationPanel()\"\n        (sectionToggled)=\"stateService.toggleSection($event)\"\n        (openRecord)=\"onOpenRecordFromNav($event)\"\n        (selectRecord)=\"onSelectRecordFromNav($event)\"\n        (expandAndFocus)=\"onExpandAndFocus($event)\">\n      </mj-explorer-navigation-panel>\n    </div>\n  }\n\n  <!-- Main Content Area -->\n  <div class=\"content-area\">\n    <!-- Breadcrumb Bar - Hidden at home level -->\n    @if (!isAtHomeLevel && breadcrumbs.length > 0) {\n      <div class=\"breadcrumb-bar\">\n        @for (crumb of breadcrumbs; track crumb.label; let i = $index; let last = $last) {\n          <span\n            class=\"breadcrumb-item\"\n            [class.clickable]=\"!last\"\n            [class.current]=\"last\"\n            (click)=\"onBreadcrumbClick(crumb, i)\"\n            [title]=\"crumb.label\">\n            @if (crumb.icon) {\n              <i [class]=\"crumb.icon\" class=\"breadcrumb-icon\"></i>\n            }\n            <span class=\"breadcrumb-label\">{{ crumb.label }}</span>\n          </span>\n          @if (!last) {\n            <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n          }\n        }\n      </div>\n    }\n\n    <!-- Header -->\n    <div class=\"content-header\" [class.home-header]=\"isAtHomeLevel\">\n      <div class=\"header-left\">\n        @if (selectedEntity) {\n          <i [class]=\"getEntityIcon(selectedEntity)\" class=\"entity-icon\"></i>\n          <h2 class=\"entity-title\">{{ selectedEntity.Name }}</h2>\n          @if (debouncedFilterText && filteredRecordCount !== totalRecordCount) {\n            <span class=\"record-count\">{{ filteredRecordCount | number }} of {{ totalRecordCount | number }} records</span>\n          } @else {\n            <span class=\"record-count\">{{ totalRecordCount | number }} records</span>\n          }\n\n          <!-- View Selector -->\n          <mj-view-selector\n            [entity]=\"selectedEntity\"\n            [selectedViewId]=\"state.selectedViewId\"\n            [viewModified]=\"state.viewModified\"\n            (viewSelected)=\"onViewSelected($event)\"\n            (saveViewRequested)=\"onSaveViewRequested($event)\"\n            (manageViewsRequested)=\"onManageViewsRequested()\"\n            (openInTabRequested)=\"onOpenInTabRequested($event)\"\n            (configureViewRequested)=\"onConfigureViewRequested()\">\n          </mj-view-selector>\n        } @else {\n          @if (displayIcon) {\n            <i [class]=\"displayIcon\" class=\"entity-icon\"></i>\n          }\n          <h2 class=\"entity-title\">{{ displayTitle }}</h2>\n          <span class=\"record-count\">{{ entities.length }} entities available</span>\n        }\n      </div>\n\n      <div class=\"header-center\">\n        @if (selectedEntity) {\n          <div class=\"smart-filter-container\">\n            <i class=\"fa-solid fa-search filter-icon\"></i>\n            <input\n              #filterInput\n              type=\"text\"\n              class=\"smart-filter-input\"\n              placeholder=\"Filter records... (press / to focus)\"\n              [ngModel]=\"state.smartFilterPrompt\"\n              (ngModelChange)=\"onSmartFilterChanged($event)\"\n            />\n            @if (state.smartFilterPrompt) {\n              <button class=\"clear-filter-btn\" (click)=\"onSmartFilterChanged('')\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        } @else {\n          <!-- Entity filter for home screen -->\n          <div class=\"smart-filter-container\">\n            <i class=\"fa-solid fa-search filter-icon\"></i>\n            <input\n              #filterInput\n              type=\"text\"\n              class=\"smart-filter-input\"\n              placeholder=\"Filter entities... (press / to focus)\"\n              [(ngModel)]=\"entityFilterText\"\n            />\n            @if (entityFilterText) {\n              <button class=\"clear-filter-btn\" (click)=\"entityFilterText = ''\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"header-right\">\n        @if (selectedEntity) {\n          <!-- View Mode Toggle -->\n          <div class=\"view-mode-toggle\">\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"state.viewMode === 'grid'\"\n              (click)=\"onViewModeChanged('grid')\"\n              title=\"Grid View\">\n              <i class=\"fa-solid fa-list\"></i>\n            </button>\n            <button\n              class=\"toggle-btn\"\n              [class.active]=\"state.viewMode === 'cards'\"\n              (click)=\"onViewModeChanged('cards')\"\n              title=\"Cards View\">\n              <i class=\"fa-solid fa-grip\"></i>\n            </button>\n          </div>\n        }\n        <!-- Common/All toggle moved to inline with All Entities section header -->\n      </div>\n    </div>\n\n    <!-- Content Body - Using mj-entity-viewer composite -->\n    <div class=\"content-body\" [class.home-content]=\"isAtHomeLevel\">\n      @if (!selectedEntity) {\n        <!-- Entity Home View - Two-Column Layout -->\n        <div class=\"entity-home-view\">\n          @if (isLoadingEntities) {\n            <div class=\"loading-state\">\n              <mj-loading text=\"Loading entities...\" size=\"medium\"></mj-loading>\n            </div>\n          } @else {\n            <!-- Two-Column Layout: Records (left) | Entities (right) -->\n            @if (hasTopSectionContent) {\n              <div class=\"home-two-column-layout\">\n                <!-- Left Column: Recent & Favorite Records (most actionable) -->\n                <div class=\"home-column\">\n                  <!-- Recent Records Section -->\n                  @if (recentRecords.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-history section-icon\"></i>\n                        <h3 class=\"section-title\">Recent Records</h3>\n                        <!-- Entity filter strip - only show with 2+ entities -->\n                        @if (showRecentRecordsEntityFilter) {\n                          <div class=\"entity-filter-strip\">\n                            <button\n                              class=\"entity-filter-btn\"\n                              [class.active]=\"recentRecordsEntityFilter === null\"\n                              (click)=\"setRecentRecordsEntityFilter(null)\"\n                              title=\"Show all entities\">\n                              <i class=\"fa-solid fa-layer-group\"></i>\n                            </button>\n                            @for (entity of uniqueRecentRecordEntities; track entity.entityId) {\n                              <button\n                                class=\"entity-filter-btn\"\n                                [class.active]=\"recentRecordsEntityFilter === entity.entityId\"\n                                (click)=\"setRecentRecordsEntityFilter(entity.entityId)\"\n                                [title]=\"entity.entityName\">\n                                <i [class]=\"entity.icon\"></i>\n                              </button>\n                            }\n                          </div>\n                        }\n                      </div>\n                      <div class=\"recent-records-list\">\n                        @for (record of filteredRecentRecords; track record.entityId + '|' + record.recordId) {\n                          <div\n                            class=\"recent-record-item\"\n                            (click)=\"onRecentRecordClick(record)\"\n                            [title]=\"record.entityName + ' - ' + record.recordId\">\n                            <div class=\"recent-record-icon\">\n                              <i [class]=\"getEntityIconById(record.entityId)\"></i>\n                            </div>\n                            <div class=\"recent-record-content\">\n                              <span class=\"recent-record-name\">{{ record.recordName || record.recordId }}</span>\n                              <span class=\"recent-record-entity\">{{ record.entityName }}</span>\n                            </div>\n                            <span class=\"recent-record-time\">{{ formatRelativeTime(record.latestAt) }}</span>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n\n                  <!-- Favorite Records Section -->\n                  @if (favoriteRecords.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-star section-icon\"></i>\n                        <h3 class=\"section-title\">Favorite Records</h3>\n                      </div>\n                      <div class=\"recent-records-list\">\n                        @for (record of favoriteRecords; track record.userFavoriteId) {\n                          <div\n                            class=\"recent-record-item\"\n                            (click)=\"onFavoriteRecordClick(record)\"\n                            [title]=\"record.entityName + ' - ' + record.recordId\">\n                            <div class=\"recent-record-icon\">\n                              <i [class]=\"getEntityIconById(record.entityId)\"></i>\n                            </div>\n                            <div class=\"recent-record-content\">\n                              <span class=\"recent-record-name\">{{ record.recordName || record.recordId }}</span>\n                              <span class=\"recent-record-entity\">{{ record.entityName }}</span>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n\n                <!-- Right Column: Recent & Favorite Entities -->\n                <div class=\"home-column\">\n                  <!-- Recent Entities Section (list format) -->\n                  @if (recentEntities.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-clock section-icon\"></i>\n                        <h3 class=\"section-title\">Recent Entities</h3>\n                      </div>\n                      <div class=\"entity-list\">\n                        @for (entity of recentEntities; track entity.ID) {\n                          <div\n                            class=\"entity-list-item\"\n                            (click)=\"onEntitySelected(entity)\"\n                            [title]=\"entity.Description || entity.Name\">\n                            <div class=\"entity-list-icon\">\n                              <i [class]=\"getEntityIcon(entity)\"></i>\n                            </div>\n                            <div class=\"entity-list-content\">\n                              <span class=\"entity-list-name\">{{ entity.Name }}</span>\n                            </div>\n                            <button\n                              class=\"favorite-btn\"\n                              [class.favorited]=\"isEntityFavorited(entity)\"\n                              (click)=\"toggleEntityFavorite(entity, $event)\"\n                              [title]=\"isEntityFavorited(entity) ? 'Remove from favorites' : 'Add to favorites'\">\n                              <i [class]=\"isEntityFavorited(entity) ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n\n                  <!-- Favorite Entities Section (list format) -->\n                  @if (favoriteEntities.length > 0) {\n                    <div class=\"home-section\">\n                      <div class=\"section-header\">\n                        <i class=\"fa-solid fa-star section-icon\"></i>\n                        <h3 class=\"section-title\">Favorite Entities</h3>\n                      </div>\n                      <div class=\"entity-list\">\n                        @for (entity of favoriteEntities; track entity.ID) {\n                          <div\n                            class=\"entity-list-item\"\n                            (click)=\"onEntitySelected(entity)\"\n                            [title]=\"entity.Description || entity.Name\">\n                            <div class=\"entity-list-icon\">\n                              <i [class]=\"getEntityIcon(entity)\"></i>\n                            </div>\n                            <div class=\"entity-list-content\">\n                              <span class=\"entity-list-name\">{{ entity.Name }}</span>\n                            </div>\n                            <button\n                              class=\"favorite-btn favorited\"\n                              (click)=\"toggleEntityFavorite(entity, $event)\"\n                              title=\"Remove from favorites\">\n                              <i class=\"fa-solid fa-star\"></i>\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- All/Common Entities Section - Full Width -->\n            <div class=\"home-section\">\n              <div class=\"section-header-with-toggle\">\n                <div class=\"section-header-left\">\n                  <i class=\"fa-solid fa-database section-icon\"></i>\n                  <h3 class=\"section-title\">\n                    @if (state.showAllEntities || !showCommonAllToggle) {\n                      All Entities\n                    } @else {\n                      Common Entities\n                    }\n                  </h3>\n                  @if (entityFilterText && filteredEntities.length !== entities.length) {\n                    <span class=\"section-count\">{{ filteredEntities.length }} matching</span>\n                  }\n                </div>\n                @if (showCommonAllToggle) {\n                  <div class=\"inline-toggle\">\n                    <button\n                      class=\"toggle-btn\"\n                      [class.active]=\"!state.showAllEntities\"\n                      (click)=\"toggleShowAllEntities()\"\n                      title=\"Show common entities ({{ commonEntitiesCount }})\">\n                      Common\n                    </button>\n                    <button\n                      class=\"toggle-btn\"\n                      [class.active]=\"state.showAllEntities\"\n                      (click)=\"toggleShowAllEntities()\"\n                      title=\"Show all entities ({{ allEntitiesCount }})\">\n                      All\n                    </button>\n                  </div>\n                }\n              </div>\n              <div class=\"entity-card-grid\">\n                @for (entity of filteredEntities; track entity.ID) {\n                  <div\n                    class=\"entity-card\"\n                    (click)=\"onEntitySelected(entity)\"\n                    [title]=\"entity.Description || entity.Name\">\n                    <div class=\"entity-card-icon\">\n                      <i [class]=\"getEntityIcon(entity)\"></i>\n                    </div>\n                    <div class=\"entity-card-content\">\n                      <h4 class=\"entity-card-title\">{{ entity.Name }}</h4>\n                      @if (entity.Description) {\n                        <p class=\"entity-card-description\">{{ entity.Description }}</p>\n                      }\n                    </div>\n                    <button\n                      class=\"favorite-btn\"\n                      [class.favorited]=\"isEntityFavorited(entity)\"\n                      (click)=\"toggleEntityFavorite(entity, $event)\"\n                      [title]=\"isEntityFavorited(entity) ? 'Remove from favorites' : 'Add to favorites'\">\n                      <i [class]=\"isEntityFavorited(entity) ? 'fa-solid fa-star' : 'fa-regular fa-star'\"></i>\n                    </button>\n                  </div>\n                }\n              </div>\n              @if (filteredEntities.length === 0 && entities.length > 0) {\n                <div class=\"empty-state small\">\n                  <i class=\"fa-solid fa-search empty-icon\"></i>\n                  <h3>No Matching Entities</h3>\n                  <p>No entities match \"{{ entityFilterText }}\"</p>\n                </div>\n              }\n              @if (entities.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-database empty-icon\"></i>\n                  <h3>No Entities Available</h3>\n                  <p>There are no entities configured for this application.</p>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      } @else {\n        <mj-entity-viewer\n          [entity]=\"selectedEntity\"\n          [viewEntity]=\"selectedViewEntity\"\n          [viewMode]=\"state.viewMode\"\n          [filterText]=\"debouncedFilterText\"\n          [selectedRecordId]=\"state.selectedRecordId\"\n          [config]=\"viewerConfig\"\n          [gridState]=\"currentGridState\"\n          (viewModeChange)=\"onViewModeChanged($event)\"\n          (filterTextChange)=\"onFilterTextChanged($event)\"\n          (recordSelected)=\"onViewerRecordSelected($event)\"\n          (recordOpened)=\"onViewerRecordOpened($event)\"\n          (dataLoaded)=\"onDataLoaded($event)\"\n          (filteredCountChanged)=\"onFilteredCountChanged($event)\"\n          (gridStateChanged)=\"onGridStateChanged($event)\">\n        </mj-entity-viewer>\n      }\n    </div>\n  </div>\n\n  <!-- Detail Panel (Right - Slide In) -->\n  @if (state.detailPanelOpen && selectedRecord) {\n    <div class=\"detail-panel\" [style.width.px]=\"state.detailPanelWidth\">\n      <mj-entity-record-detail-panel\n        [entity]=\"detailPanelEntity\"\n        [record]=\"selectedRecord\"\n        (close)=\"onDetailPanelClosed()\"\n        (openRecord)=\"onOpenRecord($event)\"\n        (navigateToRelated)=\"onNavigateToRelated($event)\"\n        (openRelatedRecord)=\"onOpenRelatedRecord($event)\"\n        (openForeignKeyRecord)=\"onOpenForeignKeyRecord($event)\">\n      </mj-entity-record-detail-panel>\n    </div>\n  }\n\n  <!-- View Configuration Panel -->\n  <mj-view-config-panel\n    [entity]=\"selectedEntity\"\n    [viewEntity]=\"selectedViewEntity\"\n    [isOpen]=\"state.viewConfigPanelOpen\"\n    [currentGridState]=\"currentGridState\"\n    (close)=\"onCloseViewConfigPanel()\"\n    (save)=\"onSaveView($event)\"\n    (delete)=\"onDeleteView()\">\n  </mj-view-config-panel>\n</div>\n", styles: [".data-explorer-container {\n  display: flex;\n  height: 100%;\n  width: 100%;\n  background: #f5f7fa;\n  overflow: hidden;\n}\n\n.navigation-panel {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-right: 1px solid #e0e0e0;\n  transition: width 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);\n}\n.navigation-panel.collapsed {\n  width: 48px;\n}\n\n.content-area {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: #f5f7fa;\n}\n\n/* Breadcrumb Bar */\n.breadcrumb-bar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 24px;\n  background: white;\n  border-bottom: 1px solid #eee;\n  flex-shrink: 0;\n  font-size: 13px;\n  min-height: 40px;\n}\n\n.breadcrumb-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: #666;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  max-width: 200px;\n}\n\n.breadcrumb-item.clickable {\n  cursor: pointer;\n}\n\n.breadcrumb-item.clickable:hover {\n  background: #f0f0f0;\n  color: #1976d2;\n}\n\n.breadcrumb-item.current {\n  color: #1a1a1a;\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-icon {\n  font-size: 12px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.breadcrumb-separator {\n  font-size: 10px;\n  color: #ccc;\n  flex-shrink: 0;\n}\n\n.content-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 24px;\n  background: white;\n  border-bottom: 1px solid #e0e0e0;\n  flex-shrink: 0;\n  gap: 24px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n/* View Selector within header */\n.header-left ::ng-deep mj-view-selector {\n  margin-left: 8px;\n}\n\n.entity-icon {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-title {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #1a1a1a;\n}\n\n.record-count {\n  font-size: 13px;\n  color: #666;\n  font-weight: 500;\n}\n\n.header-center {\n  flex: 1;\n  max-width: 600px;\n}\n\n.smart-filter-container {\n  position: relative;\n  width: 100%;\n}\n\n.smart-filter-input {\n  width: 100%;\n  padding: 10px 40px 10px 16px;\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  font-size: 14px;\n  background: #fafafa;\n  transition: all 0.15s ease;\n}\n.smart-filter-input:focus {\n  outline: none;\n  border-color: #1976d2;\n  background: white;\n  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);\n}\n.smart-filter-input::placeholder {\n  color: #999;\n}\n\n.clear-filter-btn {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #757575;\n  transition: all 0.15s ease;\n}\n.clear-filter-btn:hover {\n  background: #e0e0e0;\n  color: #424242;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex-shrink: 0;\n}\n\n.view-mode-toggle {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 8px;\n  padding: 3px;\n}\n\n.toggle-btn {\n  width: 36px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  transition: all 0.15s ease;\n}\n.toggle-btn:hover {\n  color: #333;\n}\n.toggle-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.content-body {\n  flex: 1;\n  overflow: hidden;\n  padding: 20px 24px;\n  display: flex;\n  flex-direction: column;\n}\n\n.loading-container,\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: 16px;\n  background: white;\n  border-radius: 8px;\n}\n\n.loading-spinner {\n  font-size: 32px;\n  color: #1976d2;\n}\n\n.loading-message {\n  margin: 0;\n  font-size: 14px;\n  color: #666;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  text-align: center;\n  color: #757575;\n  background: white;\n  border-radius: 8px;\n  padding: 40px;\n}\n\n.empty-icon {\n  font-size: 64px;\n  color: #e0e0e0;\n  margin-bottom: 24px;\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #333;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  color: #666;\n}\n\n/* Entity Home View - Card Grid */\n.entity-home-view {\n  flex: 1;\n  overflow: auto;\n  padding: 4px;\n}\n\n.entity-card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 16px;\n  padding: 0;\n}\n\n.entity-card {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px;\n  background: white;\n  border-radius: 10px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-card:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);\n  border-color: #1976d2;\n}\n\n.entity-card:active {\n  transform: translateY(0);\n}\n\n.entity-card-icon {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-card-icon i {\n  font-size: 20px;\n  color: #1976d2;\n}\n\n.entity-card:hover .entity-card-icon {\n  background: linear-gradient(135deg, #1976d2, #1565c0);\n}\n\n.entity-card:hover .entity-card-icon i {\n  color: white;\n}\n\n.entity-card-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-card-title {\n  margin: 0 0 6px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-card-description {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.detail-panel {\n  flex-shrink: 0;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #e0e0e0;\n  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  animation: slideIn 0.2s ease-out;\n}\n\n@keyframes slideIn {\n  from {\n    transform: translateX(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n:host ::ng-deep mj-explorer-grid-view,\n:host ::ng-deep mj-explorer-cards-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n/* ============================================\n   HOME SCREEN STYLES\n   ============================================ */\n\n/* Home-level header adjustments */\n.content-header.home-header {\n  border-bottom: none;\n  background: transparent;\n  box-shadow: none;\n  padding: 24px 24px 16px;\n}\n\n.content-body.home-content {\n  padding-top: 0;\n}\n\n/* Smart filter with search icon */\n.filter-icon {\n  position: absolute;\n  left: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #999;\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.smart-filter-container .smart-filter-input {\n  padding-left: 40px;\n}\n\n/* ============================================\n   HOME SECTIONS\n   ============================================ */\n\n.home-section {\n  margin-bottom: 28px;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-icon {\n  font-size: 14px;\n  color: #1976d2;\n  width: 20px;\n  text-align: center;\n}\n\n.section-title {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.section-count {\n  font-size: 12px;\n  color: #888;\n  font-weight: 500;\n  margin-left: 8px;\n}\n\n/* ============================================\n   TWO-COLUMN LAYOUT (Entities left, Records right)\n   ============================================ */\n\n.home-two-column-layout {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n  margin-bottom: 28px;\n}\n\n.home-column {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n/* Section header with inline toggle */\n.section-header-with-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 14px;\n  padding-left: 4px;\n}\n\n.section-header-left {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n/* Inline Common/All toggle (compact) */\n.inline-toggle {\n  display: flex;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 2px;\n}\n\n.inline-toggle .toggle-btn {\n  width: auto;\n  height: 26px;\n  padding: 0 10px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  font-size: 11px;\n  font-weight: 500;\n  transition: all 0.15s ease;\n}\n\n.inline-toggle .toggle-btn:hover {\n  color: #333;\n}\n\n.inline-toggle .toggle-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* ============================================\n   COMPACT ENTITY CARDS (Recent/Favorites rows)\n   ============================================ */\n\n.entity-card-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  padding: 0;\n}\n\n.entity-card.compact {\n  flex: 0 0 auto;\n  width: auto;\n  min-width: 180px;\n  max-width: 280px;\n  padding: 12px 16px;\n  gap: 12px;\n}\n\n.entity-card.compact .entity-card-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n}\n\n.entity-card.compact .entity-card-icon i {\n  font-size: 16px;\n}\n\n.entity-card.compact .entity-card-title {\n  margin: 0;\n  font-size: 14px;\n}\n\n.entity-card.compact .entity-card-content {\n  display: flex;\n  align-items: center;\n}\n\n/* ============================================\n   FAVORITE BUTTON\n   ============================================ */\n\n.favorite-btn {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #ccc;\n  transition: all 0.15s ease;\n  margin-left: auto;\n}\n\n.favorite-btn:hover {\n  background: rgba(255, 193, 7, 0.1);\n  color: #ffc107;\n  transform: scale(1.1);\n}\n\n.favorite-btn.favorited {\n  color: #ffc107;\n}\n\n.favorite-btn.favorited:hover {\n  background: rgba(255, 193, 7, 0.15);\n  color: #ffb300;\n}\n\n.entity-card .favorite-btn {\n  opacity: 0;\n  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;\n}\n\n.entity-card:hover .favorite-btn {\n  opacity: 1;\n}\n\n.entity-card .favorite-btn.favorited {\n  opacity: 1;\n}\n\n/* ============================================\n   RECENT RECORDS LIST\n   ============================================ */\n\n.recent-records-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.recent-record-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.recent-record-item:hover {\n  background: #f5f7fa;\n}\n\n.recent-record-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.recent-record-icon i {\n  font-size: 14px;\n  color: #4caf50;\n}\n\n.recent-record-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.recent-record-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.recent-record-entity {\n  font-size: 12px;\n  color: #888;\n}\n\n.recent-record-time {\n  font-size: 11px;\n  color: #aaa;\n  flex-shrink: 0;\n}\n\n/* ============================================\n   ENTITY LIST (for Recent/Favorite Entities)\n   ============================================ */\n\n.entity-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: white;\n  border-radius: 10px;\n  padding: 8px;\n  border: 1px solid #e8e8e8;\n}\n\n.entity-list-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 12px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.entity-list-item:hover {\n  background: #f5f7fa;\n}\n\n.entity-list-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.entity-list-icon i {\n  font-size: 14px;\n  color: #1976d2;\n}\n\n.entity-list-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.entity-list-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #1a1a1a;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.entity-list-item .favorite-btn {\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.entity-list-item:hover .favorite-btn {\n  opacity: 1;\n}\n\n.entity-list-item .favorite-btn.favorited {\n  opacity: 1;\n}\n\n/* ============================================\n   ENTITY FILTER STRIP (for Recent Records)\n   ============================================ */\n\n.entity-filter-strip {\n  display: flex;\n  gap: 4px;\n  margin-left: auto;\n  background: #f0f0f0;\n  border-radius: 6px;\n  padding: 3px;\n}\n\n.entity-filter-btn {\n  width: 28px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #666;\n  font-size: 12px;\n  transition: all 0.15s ease;\n}\n\n.entity-filter-btn:hover {\n  color: #333;\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.entity-filter-btn.active {\n  background: white;\n  color: #1976d2;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* ============================================\n   COMMON/ALL TOGGLE WITH LABELS\n   ============================================ */\n\n.view-mode-toggle .toggle-btn {\n  width: auto;\n  padding: 0 12px;\n  gap: 6px;\n}\n\n.toggle-label {\n  font-size: 12px;\n  font-weight: 500;\n}\n\n/* ============================================\n   EMPTY STATE VARIANTS\n   ============================================ */\n\n.empty-state.small {\n  height: auto;\n  padding: 32px;\n  background: #fafafa;\n}\n\n.empty-state.small .empty-icon {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n.empty-state.small h3 {\n  font-size: 16px;\n}\n\n.empty-state.small p {\n  font-size: 13px;\n}\n\n/* ============================================\n   RESPONSIVE STYLES\n   ============================================ */\n\n@media (max-width: 1200px) {\n  .entity-card-grid {\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n  }\n}\n\n@media (max-width: 900px) {\n  .content-header {\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .header-center {\n    order: 3;\n    flex-basis: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card.compact {\n    min-width: 160px;\n  }\n\n  /* Stack two-column layout on smaller screens */\n  .home-two-column-layout {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n}\n\n@media (max-width: 600px) {\n  .data-explorer-container {\n    flex-direction: column;\n  }\n\n  .navigation-panel {\n    display: none;\n  }\n\n  .content-header {\n    padding: 12px 16px;\n  }\n\n  .content-body {\n    padding: 12px 16px;\n  }\n\n  .entity-card-grid {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .entity-card {\n    padding: 16px;\n  }\n\n  .entity-card.compact {\n    min-width: 100%;\n    max-width: 100%;\n  }\n\n  .entity-card-row {\n    flex-direction: column;\n  }\n\n  .view-mode-toggle {\n    display: none;\n  }\n\n  .section-title {\n    font-size: 13px;\n  }\n\n  .home-section {\n    margin-bottom: 20px;\n  }\n}\n"] }]
+    }], () => [{ type: i1.ExplorerStateService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }, { type: i3.RecentAccessService }], { filterInputRef: [{
+            type: ViewChild,
+            args: ['filterInput']
+        }], viewSelectorRef: [{
+            type: ViewChild,
+            args: [ViewSelectorComponent]
+        }], entityViewerRef: [{
+            type: ViewChild,
+            args: [EntityViewerComponent]
+        }], entityFilter: [{
+            type: Input
+        }], deepLink: [{
+            type: Input
+        }], contextName: [{
+            type: Input
+        }], contextIcon: [{
+            type: Input
+        }], handleKeyboardShortcut: [{
+            type: HostListener,
+            args: ['document:keydown', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataExplorerDashboardComponent, { className: "DataExplorerDashboardComponent", filePath: "src/DataExplorer/data-explorer-dashboard.component.ts", lineNumber: 55 }); })();
+/**
+ * Tree-shaking prevention
+ */
+export function LoadDataExplorerDashboard() {
+    // Force inclusion in production builds
+}
+//# sourceMappingURL=data-explorer-dashboard.component.js.map