@mj-biz-apps/orders-ng 5.1.0 → 5.2.0

package/dist/lib/pages/orders/orders-dashboard.page.js

@@ -2,104 +2,82 @@ import { ChangeDetectorRef, Component, EventEmitter, Output, inject } from '@ang
 import { CommonModule } from '@angular/common';
 import { MJODayBarsComponent } from '../../panels/day-bars.component.js';
 import { MJOStatTileComponent, MJOBarListComponent } from '../../panels/stat-tile.component.js';
-import { DaysSince, FormatMoney, MJOMoneyPipe } from '../../panels/money-format.js';
-import { MJAlertComponent, MJEmptyStateComponent } from '@memberjunction/ng-ui-components';
+import { DaysSince, FormatMoney } from '../../panels/money-format.js';
+import { MJAlertComponent, MJEmptyStateComponent, MJTabNavComponent } from '@memberjunction/ng-ui-components';
+import { EntityViewerModule } from '@memberjunction/ng-entity-viewer';
+import { Metadata } from '@memberjunction/core';
 import { GetOrders } from '../../data/orders-queries.js';
 import { LocalDay, ToISODate } from '@mj-biz-apps/orders-entities';
 import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-entity-viewer";
 const _forTrack0 = ($index, $item) => $item.Label;
-const _forTrack1 = ($index, $item) => $item.ID;
-const _forTrack2 = ($index, $item) => $item.Order.ID;
-function MJOOrdersDashboardPageComponent_For_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
+const _forTrack1 = ($index, $item) => $item.Order.ID;
+function MJOOrdersDashboardPageComponent_Conditional_3_For_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 40);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const queue_r2 = i0.ɵɵnextContext().$implicit;
+    const queue_r4 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(queue_r2.Note);
+    i0.ɵɵtextInterpolate(queue_r4.Note);
 } }
-function MJOOrdersDashboardPageComponent_For_13_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 29);
-    i0.ɵɵlistener("click", function MJOOrdersDashboardPageComponent_For_13_Template_a_click_0_listener($event) { const queue_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.go($event, queue_r2.PageId)); });
-    i0.ɵɵelementStart(1, "span", 30);
-    i0.ɵɵelement(2, "i", 31);
+function MJOOrdersDashboardPageComponent_Conditional_3_For_13_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 35);
+    i0.ɵɵlistener("click", function MJOOrdersDashboardPageComponent_Conditional_3_For_13_Template_a_click_0_listener($event) { const queue_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.goQueue($event, queue_r4)); });
+    i0.ɵɵelementStart(1, "span", 36);
+    i0.ɵɵelement(2, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 32)(4, "span", 33);
+    i0.ɵɵelementStart(3, "span", 38)(4, "span", 39);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJOOrdersDashboardPageComponent_For_13_Conditional_6_Template, 2, 1, "span", 34);
+    i0.ɵɵconditionalCreate(6, MJOOrdersDashboardPageComponent_Conditional_3_For_13_Conditional_6_Template, 2, 1, "span", 40);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "b", 35);
+    i0.ɵɵelementStart(7, "b", 41);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(9, "i", 36);
+    i0.ɵɵelement(9, "i", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const queue_r2 = ctx.$implicit;
+    const queue_r4 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵclassMap("mjo-tone-" + queue_r2.Tone);
+    i0.ɵɵclassMap("mjo-tone-" + queue_r4.Tone);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(queue_r2.Icon);
+    i0.ɵɵclassMap(queue_r4.Icon);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(queue_r2.Label);
+    i0.ɵɵtextInterpolate(queue_r4.Label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(queue_r2.Note ? 6 : -1);
+    i0.ɵɵconditional(queue_r4.Note ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(queue_r2.Count);
+    i0.ɵɵtextInterpolate(queue_r4.Count);
 } }
-function MJOOrdersDashboardPageComponent_ForEmpty_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
+function MJOOrdersDashboardPageComponent_Conditional_3_ForEmpty_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
     i0.ɵɵtext(1, "Nothing is waiting. Unusual, and worth enjoying.");
     i0.ɵɵelementEnd();
 } }
-function MJOOrdersDashboardPageComponent_For_54_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 37);
-    i0.ɵɵlistener("click", function MJOOrdersDashboardPageComponent_For_54_Template_tr_click_0_listener() { const order_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OrderOpened.emit(order_r5)); });
-    i0.ɵɵelementStart(1, "td")(2, "span", 38);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "td");
-    i0.ɵɵtext(5);
+function MJOOrdersDashboardPageComponent_Conditional_3_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-entity-viewer", 43);
+    i0.ɵɵlistener("RecordOpened", function MJOOrdersDashboardPageComponent_Conditional_3_Conditional_41_Template_mj_entity_viewer_RecordOpened_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRecordOpened($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "td")(7, "span", 39);
-    i0.ɵɵtext(8);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td", 24);
-    i0.ɵɵtext(10);
-    i0.ɵɵpipe(11, "mjoMoney");
-    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const order_r5 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(order_r5.OrderNumber);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r2.customerOf(order_r5));
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r2.statusClass(order_r5));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", order_r5.Status, " ");
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("mj-money--neg", (order_r5.TotalGross ?? 0) < 0);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 8, order_r5.TotalGross ?? 0), " ");
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Entity", ctx_r1.OrderEntityInfo);
 } }
-function MJOOrdersDashboardPageComponent_ForEmpty_55_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 40);
-    i0.ɵɵtext(2, "No orders yet.");
-    i0.ɵɵelementEnd()();
+function MJOOrdersDashboardPageComponent_Conditional_3_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵtext(1, "Loading order metadata...");
+    i0.ɵɵelementEnd();
 } }
-function MJOOrdersDashboardPageComponent_For_63_Template(rf, ctx) { if (rf & 1) {
+function MJOOrdersDashboardPageComponent_Conditional_3_For_50_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-alert", 27)(1, "strong");
+    i0.ɵɵelementStart(0, "mj-alert", 33)(1, "strong");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
-    i0.ɵɵelementStart(4, "a", 21);
-    i0.ɵɵlistener("click", function MJOOrdersDashboardPageComponent_For_63_Template_a_click_4_listener($event) { const item_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openFrom($event, item_r7.Order)); });
+    i0.ɵɵelementStart(4, "a", 28);
+    i0.ɵɵlistener("click", function MJOOrdersDashboardPageComponent_Conditional_3_For_50_Template_a_click_4_listener($event) { const item_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openFrom($event, item_r7.Order)); });
     i0.ɵɵtext(5, "Work it \u2192");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -110,70 +88,304 @@ function MJOOrdersDashboardPageComponent_For_63_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", item_r7.Detail, " ");
 } }
-function MJOOrdersDashboardPageComponent_ForEmpty_64_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 28);
+function MJOOrdersDashboardPageComponent_Conditional_3_ForEmpty_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 34);
+} }
+function MJOOrdersDashboardPageComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 6)(1, "mjo-stat-tile", 7);
+    i0.ɵɵlistener("Clicked", function MJOOrdersDashboardPageComponent_Conditional_3_Template_mjo_stat_tile_Clicked_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenExplorerPreset("all")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "mjo-stat-tile", 8);
+    i0.ɵɵlistener("Clicked", function MJOOrdersDashboardPageComponent_Conditional_3_Template_mjo_stat_tile_Clicked_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenExplorerPreset("unpaid")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "mjo-stat-tile", 9);
+    i0.ɵɵlistener("Clicked", function MJOOrdersDashboardPageComponent_Conditional_3_Template_mjo_stat_tile_Clicked_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenExplorerPreset("overdue")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "mjo-stat-tile", 10);
+    i0.ɵɵlistener("Clicked", function MJOOrdersDashboardPageComponent_Conditional_3_Template_mjo_stat_tile_Clicked_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenExplorerPreset("credits")); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 11)(6, "div", 12)(7, "div", 13);
+    i0.ɵɵelement(8, "i", 14);
+    i0.ɵɵelementStart(9, "h3");
+    i0.ɵɵtext(10, "Needs someone");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 15);
+    i0.ɵɵrepeaterCreate(12, MJOOrdersDashboardPageComponent_Conditional_3_For_13_Template, 10, 7, "a", 16, _forTrack0, false, MJOOrdersDashboardPageComponent_Conditional_3_ForEmpty_14_Template, 2, 0, "div", 17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "div", 12)(16, "div", 13);
+    i0.ɵɵelement(17, "i", 18);
+    i0.ɵɵelementStart(18, "h3");
+    i0.ɵɵtext(19, "Orders per day");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "span", 19);
+    i0.ɵɵtext(21, "last 7 days");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 20);
+    i0.ɵɵelement(23, "mjo-day-bars", 21);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(24, "div", 12)(25, "div", 13);
+    i0.ɵɵelement(26, "i", 22);
+    i0.ɵɵelementStart(27, "h3");
+    i0.ɵɵtext(28, "Where orders are sitting");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(29, "div", 20);
+    i0.ɵɵelement(30, "mjo-bar-list", 23);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(31, "div", 24)(32, "div", 25)(33, "div", 13);
+    i0.ɵɵelement(34, "i", 26);
+    i0.ɵɵelementStart(35, "h3");
+    i0.ɵɵtext(36, "Active Orders");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(37, "span", 27)(38, "a", 28);
+    i0.ɵɵlistener("click", function MJOOrdersDashboardPageComponent_Conditional_3_Template_a_click_38_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnTabChange("explorer")); });
+    i0.ɵɵtext(39, "Full-screen Explorer \u2192");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(40, "div", 29);
+    i0.ɵɵconditionalCreate(41, MJOOrdersDashboardPageComponent_Conditional_3_Conditional_41_Template, 1, 1, "mj-entity-viewer", 30)(42, MJOOrdersDashboardPageComponent_Conditional_3_Conditional_42_Template, 2, 0, "div", 31);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(43, "div", 12)(44, "div", 13);
+    i0.ɵɵelement(45, "i", 32);
+    i0.ɵɵelementStart(46, "h3");
+    i0.ɵɵtext(47, "Worth a look");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(48, "div", 20);
+    i0.ɵɵrepeaterCreate(49, MJOOrdersDashboardPageComponent_Conditional_3_For_50_Template, 6, 4, "mj-alert", 33, _forTrack1, false, MJOOrdersDashboardPageComponent_Conditional_3_ForEmpty_51_Template, 1, 0, "mj-empty-state", 34);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Value", ctx_r1.OpenCountDisplay)("Detail", ctx_r1.OpenValueDisplay);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Value", ctx_r1.OpenBalanceDisplay);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Value", ctx_r1.OverdueValueDisplay)("Detail", ctx_r1.OverdueDetail);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Value", ctx_r1.CreditsDisplay);
+    i0.ɵɵadvance(8);
+    i0.ɵɵrepeater(ctx_r1.Queues);
+    i0.ɵɵadvance(11);
+    i0.ɵɵproperty("Bars", ctx_r1.OrdersPerDay);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("Rows", ctx_r1.StatusMix);
+    i0.ɵɵadvance(11);
+    i0.ɵɵconditional(ctx_r1.OrderEntityInfo ? 41 : 42);
+    i0.ɵɵadvance(8);
+    i0.ɵɵrepeater(ctx_r1.WorthALook);
+} }
+function MJOOrdersDashboardPageComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-entity-viewer", 45);
+    i0.ɵɵlistener("RecordOpened", function MJOOrdersDashboardPageComponent_Conditional_4_Conditional_1_Template_mj_entity_viewer_RecordOpened_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRecordOpened($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Entity", ctx_r1.OrderEntityInfo)("ViewEntity", ctx_r1.ExplorerView);
+} }
+function MJOOrdersDashboardPageComponent_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵtext(1, "Loading order metadata...");
+    i0.ɵɵelementEnd();
+} }
+function MJOOrdersDashboardPageComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵconditionalCreate(1, MJOOrdersDashboardPageComponent_Conditional_4_Conditional_1_Template, 1, 2, "mj-entity-viewer", 44)(2, MJOOrdersDashboardPageComponent_Conditional_4_Conditional_2_Template, 2, 0, "div", 31);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.OrderEntityInfo ? 1 : 2);
+} }
+function MJOOrdersDashboardPageComponent_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-entity-viewer", 45);
+    i0.ɵɵlistener("RecordOpened", function MJOOrdersDashboardPageComponent_Conditional_5_Conditional_5_Template_mj_entity_viewer_RecordOpened_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRecordOpened($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Entity", ctx_r1.OrderLineEntityInfo)("ViewEntity", ctx_r1.FulfillmentQueueView);
+} }
+function MJOOrdersDashboardPageComponent_Conditional_5_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵtext(1, "Loading fulfillment queue...");
+    i0.ɵɵelementEnd();
+} }
+function MJOOrdersDashboardPageComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4)(1, "p", 46);
+    i0.ɵɵelement(2, "i", 47);
+    i0.ɵɵtext(3, " Everything here is already paid for and booked. What is outstanding is the goods, and what this queue controls is the physical line fulfillment state. ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 3);
+    i0.ɵɵconditionalCreate(5, MJOOrdersDashboardPageComponent_Conditional_5_Conditional_5_Template, 1, 2, "mj-entity-viewer", 44)(6, MJOOrdersDashboardPageComponent_Conditional_5_Conditional_6_Template, 2, 0, "div", 31);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r1.OrderLineEntityInfo ? 5 : 6);
+} }
+function MJOOrdersDashboardPageComponent_Conditional_6_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-entity-viewer", 45);
+    i0.ɵɵlistener("RecordOpened", function MJOOrdersDashboardPageComponent_Conditional_6_Conditional_16_Template_mj_entity_viewer_RecordOpened_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRecordOpened($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("Entity", ctx_r1.OrderEntityInfo)("ViewEntity", ctx_r1.AgingOverdueView);
+} }
+function MJOOrdersDashboardPageComponent_Conditional_6_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵtext(1, "Loading order metadata...");
+    i0.ɵɵelementEnd();
+} }
+function MJOOrdersDashboardPageComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6);
+    i0.ɵɵelement(2, "mjo-stat-tile", 48)(3, "mjo-stat-tile", 49)(4, "mjo-stat-tile", 50)(5, "mjo-stat-tile", 51);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 52)(7, "div", 53)(8, "div", 13);
+    i0.ɵɵelement(9, "i", 54);
+    i0.ɵɵelementStart(10, "h3");
+    i0.ɵɵtext(11, "Overdue Collections Worklist");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 27)(13, "a", 28);
+    i0.ɵɵlistener("click", function MJOOrdersDashboardPageComponent_Conditional_6_Template_a_click_13_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenExplorerPreset("overdue")); });
+    i0.ɵɵtext(14, "Open in Explorer \u2192");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(15, "div", 55);
+    i0.ɵɵconditionalCreate(16, MJOOrdersDashboardPageComponent_Conditional_6_Conditional_16_Template, 1, 2, "mj-entity-viewer", 44)(17, MJOOrdersDashboardPageComponent_Conditional_6_Conditional_17_Template, 2, 0, "div", 31);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("Value", ctx_r1.AgingCurrentDisplay);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Value", ctx_r1.Aging30Display);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Value", ctx_r1.Aging60Display);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Value", ctx_r1.Aging90Display);
+    i0.ɵɵadvance(11);
+    i0.ɵɵconditional(ctx_r1.OrderEntityInfo ? 16 : 17);
 } }
 /**
- * `mjo-orders-dashboard-page` — is today normal, and what needs a person?
- *
- * WORK QUEUES ABOVE THE TREND. What earns space on an operational dashboard is
- * what someone can act on. A chart of orders per day is interesting once a week;
- * "three drafts are sitting unfinished and four invoices are overdue" is
- * actionable now, so it comes first and it is clickable.
+ * `mjo-orders-dashboard-page` — Option B: Tabbed Command Workspace.
  *
- * EVERY FIGURE IS A CHEAP COUNT over rows the list screens already fetch. No
- * on-demand aggregate, no long-running rollup — a dashboard that takes four
- * seconds to load gets closed, and then it answers nothing.
- *
- * ## Example
- *
- * ```html
- * <mjo-orders-dashboard-page (NavigateRequested)="section.OnPageSelected($event)" />
- * ```
+ * Provides a unified workspace with 3 tabs:
+ * 1. Executive Overview & Action Queues
+ * 2. Full-featured Orders Explorer (<mj-entity-viewer>)
+ * 3. Receivables & Aging Breakdown
  */
 export class MJOOrdersDashboardPageComponent {
-    /**
-     * Render what was just loaded.
-     *
-     * These pages are created imperatively by the section shell through
-     * `ViewContainerRef.createComponent`. When an async load assigns across
-     * Angular's check/verify boundary, dev mode raises NG0100 and ABORTS the DOM
-     * write. Nothing re-renders afterwards, so the recorded "previous" value stays
-     * pre-load while the getter returns the loaded one — the mismatch then repeats
-     * on every tick and the view is frozen for good. It is not a flicker: this
-     * dashboard sat at "0 open orders / $0.00" against 73 real orders, reading as a
-     * quiet day rather than a broken screen.
-     *
-     * Writing the DOM here ends it: the rendered value matches the getter from the
-     * first pass on, so later verify passes agree.
-     */
     cdr = inject(ChangeDetectorRef);
-    /** A tile or queue was activated. Carries the rail page id to open. */
     NavigateRequested = new EventEmitter();
-    /** A row was chosen. The section routes it. */
     OrderOpened = new EventEmitter();
+    ActiveTab = 'overview';
+    Tabs = [
+        { key: 'overview', label: 'Executive Overview', icon: 'fa-solid fa-chart-pie' },
+        { key: 'explorer', label: 'Orders Explorer', icon: 'fa-solid fa-table-list' },
+        { key: 'fulfillment', label: 'Fulfillment Queue', icon: 'fa-solid fa-dolly' },
+        { key: 'aging', label: 'Receivables & Aging', icon: 'fa-solid fa-hourglass-half' }
+    ];
+    OrderEntityInfo = null;
+    OrderLineEntityInfo = null;
+    ExplorerView = null;
+    get AgingOverdueView() {
+        if (!this.OrderEntityInfo)
+            return null;
+        const today = new Date().toISOString().slice(0, 10);
+        return {
+            EntityID: this.OrderEntityInfo.ID,
+            Entity: this.OrderEntityInfo.Name,
+            WhereClause: `Balance > 0 AND DueDate IS NOT NULL AND DueDate < '${today}' AND Status NOT IN ('Draft','Quoted','Voided')`,
+            ID: 'preset-aging-overdue',
+            Name: 'Overdue Collections'
+        };
+    }
+    get FulfillmentQueueView() {
+        if (!this.OrderLineEntityInfo)
+            return null;
+        return {
+            EntityID: this.OrderLineEntityInfo.ID,
+            Entity: this.OrderLineEntityInfo.Name,
+            WhereClause: `FulfillmentStatus IN ('Pending', 'PartiallyFulfilled', 'Unfulfilled')`,
+            ID: 'preset-fulfillment-queue',
+            Name: 'Fulfillment Queue'
+        };
+    }
     orders = [];
     async ngOnInit() {
+        const md = new Metadata();
+        this.OrderEntityInfo = md.Entities.find(e => e.Name === 'MJ_BizApps_Orders: Order Headers') || null;
+        this.OrderLineEntityInfo = md.Entities.find(e => e.Name === 'MJ_BizApps_Orders: Order Lines') || null;
         this.orders = await GetOrders({ Preset: 'all' });
         this.cdr.detectChanges();
     }
-    /* ── Recent activity ────────────────────────────────────────────────── */
-    /**
-     * The last seven days, oldest first.
-     *
-     * Built from the orders ALREADY loaded rather than a grouped query. The
-     * dashboard has them in hand, and a GROUP BY round trip to bucket rows this
-     * screen is already holding is work with no answer attached to it.
-     */
+    OnTabChange(tabKey) {
+        this.ActiveTab = tabKey;
+        if (tabKey !== 'explorer') {
+            this.ExplorerView = null;
+        }
+        this.cdr.detectChanges();
+    }
+    OpenExplorerPreset(preset) {
+        const today = new Date().toISOString().slice(0, 10);
+        let whereClause = null;
+        let presetName = 'All Orders';
+        switch (preset) {
+            case 'overdue':
+                whereClause = `Balance > 0 AND DueDate IS NOT NULL AND DueDate < '${today}' AND Status NOT IN ('Draft','Quoted','Voided')`;
+                presetName = 'Overdue Orders';
+                break;
+            case 'unpaid':
+                whereClause = `Balance > 0 AND Status NOT IN ('Draft','Quoted','Voided')`;
+                presetName = 'Unpaid Orders';
+                break;
+            case 'drafts':
+                whereClause = `Status IN ('Draft','Quoted')`;
+                presetName = 'Draft & Quoted Orders';
+                break;
+            case 'credits':
+                whereClause = `Balance < 0 AND Status NOT IN ('Draft','Quoted','Voided')`;
+                presetName = 'Credit Balance Orders';
+                break;
+            default:
+                whereClause = null;
+                break;
+        }
+        if (whereClause && this.OrderEntityInfo) {
+            this.ExplorerView = {
+                EntityID: this.OrderEntityInfo.ID,
+                Entity: this.OrderEntityInfo.Name,
+                WhereClause: whereClause,
+                ID: `preset-${preset}`,
+                Name: presetName
+            };
+        }
+        else {
+            this.ExplorerView = null;
+        }
+        this.ActiveTab = 'explorer';
+        this.cdr.detectChanges();
+    }
+    OnRecordOpened(event) {
+        const id = (event.compositeKey?.GetValueByFieldName('ID') ?? event.record?.['ID']);
+        if (id) {
+            const match = this.orders.find(o => o.ID === id);
+            if (match) {
+                this.OrderOpened.emit(match);
+            }
+            else {
+                const surrogate = { ID: id };
+                this.OrderOpened.emit(surrogate);
+            }
+        }
+    }
     get OrdersPerDay() {
         const days = [];
         const today = new Date();
         for (let back = 6; back >= 0; back--) {
             const day = new Date(today);
             day.setDate(day.getDate() - back);
-            // LOCAL day for the key, matching the LOCAL day the label is built from. `toISOString()`
-            // here names tomorrow all evening east of the meridian, so the bar would say "Mon" and
-            // count Tuesday's orders.
             const iso = LocalDay(day);
             days.push({
                 Label: day.toLocaleDateString('en-US', { weekday: 'short' }),
@@ -183,20 +395,11 @@ export class MJOOrdersDashboardPageComponent {
         }
         return days;
     }
-    /** Newest first — what just happened, not what matters most. */
     get LatestOrders() {
         return [...this.orders]
             .sort((a, b) => String(b.OrderDate ?? '').localeCompare(String(a.OrderDate ?? '')))
             .slice(0, 7);
     }
-    /**
-     * Named, specific things to act on.
-     *
-     * Deliberately NOT a count. "4 overdue invoices" is a number someone has to
-     * go and decode; "ORD-0961 is 90 days past due, $890 from Marcus Webb" is
-     * already the decision. A vague attention panel trains people to skip it, so
-     * an empty one is better than a general one.
-     */
     get WorthALook() {
         const today = new Date().toISOString().slice(0, 10);
         const items = [];
@@ -227,16 +430,14 @@ export class MJOOrdersDashboardPageComponent {
         }
         return items;
     }
-    /** Who the order is for, however the customer is recorded. */
     customerOf(order) {
         return (order.BillToOrganization ?? order.BillToPerson ?? '—');
     }
     statusClass(order) {
         switch (order.Status) {
-            case 'Posted':
-            case 'Fulfilled':
-                return 'mj-chip--success';
             case 'Confirmed':
+                return 'mj-chip--success';
+            case 'Quoted':
                 return 'mj-chip--info';
             case 'Voided':
                 return 'mj-chip--outline';
@@ -244,12 +445,10 @@ export class MJOOrdersDashboardPageComponent {
                 return '';
         }
     }
-    /** Named `openFrom`, not `open` — `open` is already the set of open orders. */
     openFrom(event, order) {
         event.preventDefault();
         this.OrderOpened.emit(order);
     }
-    /* ── Tiles ──────────────────────────────────────────────────────────── */
     get open() {
         return this.orders.filter((o) => !['Draft', 'Quoted', 'Voided'].includes(o.Status));
     }
@@ -283,22 +482,55 @@ export class MJOOrdersDashboardPageComponent {
         const total = this.credits.reduce((s, o) => s + Math.abs((o.Balance ?? 0)), 0);
         return FormatMoney(total, { Zero: '—' });
     }
-    /* ── Queues ─────────────────────────────────────────────────────────── */
-    /** Only queues with something in them — an empty queue is not a call to action. */
+    get AgingCurrentDisplay() {
+        const today = new Date().toISOString().slice(0, 10);
+        const current = this.owing.filter((o) => !o.DueDate || DaysSince(o.DueDate, today) <= 30);
+        return FormatMoney(current.reduce((s, o) => s + (o.Balance ?? 0), 0), { Round: true });
+    }
+    get Aging30Display() {
+        const today = new Date().toISOString().slice(0, 10);
+        const b30 = this.owing.filter((o) => {
+            if (!o.DueDate)
+                return false;
+            const days = DaysSince(o.DueDate, today);
+            return days > 30 && days <= 60;
+        });
+        return FormatMoney(b30.reduce((s, o) => s + (o.Balance ?? 0), 0), { Round: true });
+    }
+    get Aging60Display() {
+        const today = new Date().toISOString().slice(0, 10);
+        const b60 = this.owing.filter((o) => {
+            if (!o.DueDate)
+                return false;
+            const days = DaysSince(o.DueDate, today);
+            return days > 60 && days <= 90;
+        });
+        return FormatMoney(b60.reduce((s, o) => s + (o.Balance ?? 0), 0), { Round: true });
+    }
+    get Aging90Display() {
+        const today = new Date().toISOString().slice(0, 10);
+        const b90 = this.owing.filter((o) => {
+            if (!o.DueDate)
+                return false;
+            const days = DaysSince(o.DueDate, today);
+            return days > 90;
+        });
+        return FormatMoney(b90.reduce((s, o) => s + (o.Balance ?? 0), 0), { Round: true });
+    }
     get Queues() {
         const drafts = this.orders.filter((o) => o.Status === 'Draft' || o.Status === 'Quoted').length;
-        const notPosted = this.orders.filter((o) => o.Status === 'Confirmed').length;
+        const awaitingFulfillment = this.orders.filter((o) => o.Status === 'Confirmed' && (o.FulfillmentStatus === 'Pending' || o.FulfillmentStatus === 'PartiallyFulfilled')).length;
         const all = [
-            { Label: 'Drafts waiting to be finished', Count: drafts, Icon: 'fa-solid fa-pen-ruler', Tone: 'neutral', PageId: 'list' },
+            { Label: 'Drafts waiting to be finished', Count: drafts, Icon: 'fa-solid fa-pen-ruler', Tone: 'neutral', PageId: 'list', Preset: 'drafts' },
             {
-                Label: 'Confirmed but not posted',
-                Note: 'Normally seconds — investigate if one lingers',
-                Count: notPosted,
-                Icon: 'fa-solid fa-clock',
-                Tone: 'info',
-                PageId: 'list',
+                Label: 'Fulfillment queue (items waiting to ship)',
+                Note: 'Order lines ready for picking and shipment',
+                Count: awaitingFulfillment,
+                Icon: 'fa-solid fa-dolly',
+                Tone: 'warning',
+                PageId: 'fulfillment'
             },
-            { Label: 'Overdue invoices', Count: this.overdue.length, Icon: 'fa-solid fa-hourglass-half', Tone: 'error', PageId: 'list' },
+            { Label: 'Overdue invoices', Count: this.overdue.length, Icon: 'fa-solid fa-hourglass-half', Tone: 'error', PageId: 'list', Preset: 'overdue' },
             {
                 Label: 'Credits customers are holding',
                 Note: 'Spendable — offer them before invoicing again',
@@ -306,264 +538,282 @@ export class MJOOrdersDashboardPageComponent {
                 Icon: 'fa-solid fa-piggy-bank',
                 Tone: 'success',
                 PageId: 'list',
+                Preset: 'credits'
             },
         ];
         return all.filter((q) => q.Count > 0);
     }
-    /* ── Status mix ─────────────────────────────────────────────────────── */
     get StatusMix() {
         const counts = new Map();
         for (const order of this.orders) {
             counts.set(order.Status, (counts.get(order.Status) ?? 0) + 1);
         }
-        // Lifecycle order, not alphabetical — the sequence is the story.
-        const order = ['Draft', 'Quoted', 'Confirmed', 'Posted', 'Fulfilled'];
+        const order = ['Draft', 'Quoted', 'Confirmed', 'Voided'];
         return order
             .filter((s) => counts.has(s))
             .map((s) => ({ Label: s, Value: counts.get(s), Display: String(counts.get(s)) }));
     }
-    go(event, pageId) {
+    goQueue(event, queue) {
         event.preventDefault();
-        this.NavigateRequested.emit(pageId);
+        if (queue.PageId === 'fulfillment') {
+            this.OnTabChange('fulfillment');
+            return;
+        }
+        if (queue.Preset) {
+            this.OpenExplorerPreset(queue.Preset);
+        }
+        else {
+            this.NavigateRequested.emit(queue.PageId);
+        }
     }
     static ɵfac = function MJOOrdersDashboardPageComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJOOrdersDashboardPageComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJOOrdersDashboardPageComponent, selectors: [["mjo-orders-dashboard-page"]], outputs: { NavigateRequested: "NavigateRequested", OrderOpened: "OrderOpened" }, decls: 65, vars: 11, consts: [[1, "mj-stat-grid"], ["Label", "Open orders", "Icon", "fa-solid fa-file-invoice-dollar", 3, "Value", "Detail"], ["Label", "Open balance", "Icon", "fa-solid fa-scale-balanced", "Detail", "Confirmed orders still carrying a balance", 3, "Value"], ["Label", "Overdue", "Icon", "fa-solid fa-hourglass-half", "Tone", "alert", 3, "Clicked", "Value", "Detail"], ["Label", "Credits held", "Icon", "fa-solid fa-piggy-bank", "Detail", "Offer these before invoicing again", 3, "Clicked", "Value"], [1, "mjo-dash__split"], [1, "mj-card"], [1, "mj-card-head"], ["aria-hidden", "true", 1, "fa-solid", "fa-list-check"], [1, "mj-card-pad", "mjo-dash__queues"], ["href", "#", 1, "mjo-dash__queue"], [1, "small", "muted"], ["aria-hidden", "true", 1, "fa-solid", "fa-chart-simple"], [1, "right", "small", "muted"], [1, "mj-card-pad"], ["Unit", "orders", 3, "Bars"], ["aria-hidden", "true", 1, "fa-solid", "fa-layer-group"], ["EmptyText", "No orders yet.", 3, "Rows"], [1, "mjo-dash__split", "mjo-dash__split--wide"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock-rotate-left"], [1, "right"], ["href", "#", 1, "small", 3, "click"], [1, "mj-table-wrap"], [1, "mj-table", "mj-table--compact"], [1, "num"], [1, "is-clickable"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"], ["Role", "note", 3, "Variant", "Icon"], ["Icon", "fa-solid fa-circle-check", "Title", "Nothing is asking for attention", "Size", "compact"], ["href", "#", 1, "mjo-dash__queue", 3, "click"], [1, "mjo-dash__icon"], ["aria-hidden", "true"], [1, "mjo-dash__queue-body"], [1, "mjo-dash__queue-label"], [1, "small", "muted", "mjo-dash__queue-note"], [1, "mj-num", "mjo-dash__count"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-right", "muted", "tiny"], [1, "is-clickable", 3, "click"], [1, "mono"], [1, "mj-chip"], ["colspan", "4", 1, "small", "muted"]], template: function MJOOrdersDashboardPageComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵelement(1, "mjo-stat-tile", 1)(2, "mjo-stat-tile", 2);
-            i0.ɵɵelementStart(3, "mjo-stat-tile", 3);
-            i0.ɵɵlistener("Clicked", function MJOOrdersDashboardPageComponent_Template_mjo_stat_tile_Clicked_3_listener() { return ctx.NavigateRequested.emit("list"); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "mjo-stat-tile", 4);
-            i0.ɵɵlistener("Clicked", function MJOOrdersDashboardPageComponent_Template_mjo_stat_tile_Clicked_4_listener() { return ctx.NavigateRequested.emit("list"); });
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(5, "div", 5)(6, "div", 6)(7, "div", 7);
-            i0.ɵɵelement(8, "i", 8);
-            i0.ɵɵelementStart(9, "h3");
-            i0.ɵɵtext(10, "Needs someone");
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJOOrdersDashboardPageComponent, selectors: [["mjo-orders-dashboard-page"]], outputs: { NavigateRequested: "NavigateRequested", OrderOpened: "OrderOpened" }, decls: 7, vars: 3, consts: [[1, "mjo-dashboard-container"], [1, "mjo-tab-container"], [3, "TabChange", "Tabs", "ActiveKey"], [1, "mjo-explorer-wrapper"], [1, "mjo-fulfillment-pane"], [1, "mjo-aging-pane"], [1, "mj-stat-grid"], ["Label", "Open orders", "Icon", "fa-solid fa-file-invoice-dollar", 3, "Clicked", "Value", "Detail"], ["Label", "Open balance", "Icon", "fa-solid fa-scale-balanced", "Detail", "Confirmed orders still carrying a balance", 3, "Clicked", "Value"], ["Label", "Overdue", "Icon", "fa-solid fa-hourglass-half", "Tone", "alert", 3, "Clicked", "Value", "Detail"], ["Label", "Credits held", "Icon", "fa-solid fa-piggy-bank", "Detail", "Offer these before invoicing again", 3, "Clicked", "Value"], [1, "mjo-dash__split"], [1, "mj-card"], [1, "mj-card-head"], ["aria-hidden", "true", 1, "fa-solid", "fa-list-check"], [1, "mj-card-pad", "mjo-dash__queues"], ["href", "#", 1, "mjo-dash__queue"], [1, "small", "muted"], ["aria-hidden", "true", 1, "fa-solid", "fa-chart-simple"], [1, "right", "small", "muted"], [1, "mj-card-pad"], ["Unit", "orders", 3, "Bars"], ["aria-hidden", "true", 1, "fa-solid", "fa-layer-group"], ["EmptyText", "No orders yet.", 3, "Rows"], [1, "mjo-dash__split", "mjo-dash__split--wide"], [1, "mj-card", "mjo-dash__viewer-card"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-list"], [1, "right"], ["href", "#", 1, "small", 3, "click"], [1, "mjo-dash__viewer-host"], [3, "Entity"], [1, "small", "muted", 2, "padding", "24px"], ["aria-hidden", "true", 1, "fa-solid", "fa-triangle-exclamation"], ["Role", "note", 3, "Variant", "Icon"], ["Icon", "fa-solid fa-circle-check", "Title", "Nothing is asking for attention", "Size", "compact"], ["href", "#", 1, "mjo-dash__queue", 3, "click"], [1, "mjo-dash__icon"], ["aria-hidden", "true"], [1, "mjo-dash__queue-body"], [1, "mjo-dash__queue-label"], [1, "small", "muted", "mjo-dash__queue-note"], [1, "mj-num", "mjo-dash__count"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-right", "muted", "tiny"], [3, "RecordOpened", "Entity"], [3, "Entity", "ViewEntity"], [3, "RecordOpened", "Entity", "ViewEntity"], [1, "mjo-note", "mjo-fq__note"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-info"], ["Label", "Current (0-30 days)", "Icon", "fa-solid fa-check", "Detail", "Due or recently invoiced", 3, "Value"], ["Label", "31\u201360 days", "Icon", "fa-solid fa-clock", "Tone", "default", "Detail", "First reminder interval", 3, "Value"], ["Label", "61\u201390 days", "Icon", "fa-solid fa-triangle-exclamation", "Tone", "alert", "Detail", "Escalated collection required", 3, "Value"], ["Label", "90+ days overdue", "Icon", "fa-solid fa-circle-xmark", "Tone", "alert", "Detail", "High risk receivables", 3, "Value"], [1, "mjo-dash__split", "mjo-dash__split--wide", 2, "margin-top", "var(--mj-space-6)"], [1, "mj-card", "mjo-dash__viewer-card", 2, "grid-column", "1 / -1", "height", "600px"], ["aria-hidden", "true", 1, "fa-solid", "fa-hourglass-half"], [1, "mjo-dash__viewer-host", 2, "min-height", "520px"]], template: function MJOOrdersDashboardPageComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "mj-tab-nav", 2);
+            i0.ɵɵlistener("TabChange", function MJOOrdersDashboardPageComponent_Template_mj_tab_nav_TabChange_2_listener($event) { return ctx.OnTabChange($event); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(11, "div", 9);
-            i0.ɵɵrepeaterCreate(12, MJOOrdersDashboardPageComponent_For_13_Template, 10, 7, "a", 10, _forTrack0, false, MJOOrdersDashboardPageComponent_ForEmpty_14_Template, 2, 0, "div", 11);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(15, "div", 6)(16, "div", 7);
-            i0.ɵɵelement(17, "i", 12);
-            i0.ɵɵelementStart(18, "h3");
-            i0.ɵɵtext(19, "Orders per day");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(20, "span", 13);
-            i0.ɵɵtext(21, "last 7 days");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(22, "div", 14);
-            i0.ɵɵelement(23, "mjo-day-bars", 15);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(24, "div", 6)(25, "div", 7);
-            i0.ɵɵelement(26, "i", 16);
-            i0.ɵɵelementStart(27, "h3");
-            i0.ɵɵtext(28, "Where orders are sitting");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(29, "div", 14);
-            i0.ɵɵelement(30, "mjo-bar-list", 17);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(31, "div", 18)(32, "div", 6)(33, "div", 7);
-            i0.ɵɵelement(34, "i", 19);
-            i0.ɵɵelementStart(35, "h3");
-            i0.ɵɵtext(36, "Latest orders");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(37, "span", 20)(38, "a", 21);
-            i0.ɵɵlistener("click", function MJOOrdersDashboardPageComponent_Template_a_click_38_listener($event) { return ctx.go($event, "list"); });
-            i0.ɵɵtext(39, "All orders \u2192");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(40, "div", 22)(41, "table", 23)(42, "thead")(43, "tr")(44, "th");
-            i0.ɵɵtext(45, "Order");
+            i0.ɵɵconditionalCreate(3, MJOOrdersDashboardPageComponent_Conditional_3_Template, 52, 11)(4, MJOOrdersDashboardPageComponent_Conditional_4_Template, 3, 1, "div", 3)(5, MJOOrdersDashboardPageComponent_Conditional_5_Template, 7, 1, "div", 4)(6, MJOOrdersDashboardPageComponent_Conditional_6_Template, 18, 5, "div", 5);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(46, "th");
-            i0.ɵɵtext(47, "Customer");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(48, "th");
-            i0.ɵɵtext(49, "Status");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(50, "th", 24);
-            i0.ɵɵtext(51, "Total");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(52, "tbody");
-            i0.ɵɵrepeaterCreate(53, MJOOrdersDashboardPageComponent_For_54_Template, 12, 10, "tr", 25, _forTrack1, false, MJOOrdersDashboardPageComponent_ForEmpty_55_Template, 3, 0, "tr");
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(56, "div", 6)(57, "div", 7);
-            i0.ɵɵelement(58, "i", 26);
-            i0.ɵɵelementStart(59, "h3");
-            i0.ɵɵtext(60, "Worth a look");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(61, "div", 14);
-            i0.ɵɵrepeaterCreate(62, MJOOrdersDashboardPageComponent_For_63_Template, 6, 4, "mj-alert", 27, _forTrack2, false, MJOOrdersDashboardPageComponent_ForEmpty_64_Template, 1, 0, "mj-empty-state", 28);
-            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Tabs", ctx.Tabs)("ActiveKey", ctx.ActiveTab);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("Value", ctx.OpenCountDisplay)("Detail", ctx.OpenValueDisplay);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("Value", ctx.OpenBalanceDisplay);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("Value", ctx.OverdueValueDisplay)("Detail", ctx.OverdueDetail);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("Value", ctx.CreditsDisplay);
-            i0.ɵɵadvance(8);
-            i0.ɵɵrepeater(ctx.Queues);
-            i0.ɵɵadvance(11);
-            i0.ɵɵproperty("Bars", ctx.OrdersPerDay);
-            i0.ɵɵadvance(7);
-            i0.ɵɵproperty("Rows", ctx.StatusMix);
-            i0.ɵɵadvance(23);
-            i0.ɵɵrepeater(ctx.LatestOrders);
-            i0.ɵɵadvance(9);
-            i0.ɵɵrepeater(ctx.WorthALook);
-        } }, dependencies: [CommonModule, MJAlertComponent, MJEmptyStateComponent, MJOStatTileComponent, MJOBarListComponent, MJODayBarsComponent, MJOMoneyPipe], styles: ["[_nghost-%COMP%] {\n                display: block;\n                height: 100%;\n                overflow: auto;\n                padding: var(--mj-space-6);\n            }\n            \n\n            .mjo-dash__split--wide[_ngcontent-%COMP%] {\n                grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);\n                margin-top: var(--mj-space-4);\n            }\n            .mjo-dash__split[_ngcontent-%COMP%] {\n                display: grid;\n                \n\n\n                grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);\n                gap: var(--mj-space-4);\n                margin-top: var(--mj-space-6);\n            }\n            .mjo-dash__queue[_ngcontent-%COMP%] {\n                display: flex;\n                align-items: center;\n                gap: var(--mj-space-3);\n                padding: var(--mj-space-3) 0;\n                border-bottom: 1px solid var(--mj-border-subtle);\n                color: inherit;\n            }\n            .mjo-dash__queue[_ngcontent-%COMP%]:last-child {\n                border-bottom: none;\n            }\n            .mjo-dash__queue[_ngcontent-%COMP%]:hover {\n                text-decoration: none;\n            }\n            .mjo-dash__queue[_ngcontent-%COMP%]:hover   .mjo-dash__queue-label[_ngcontent-%COMP%] {\n                color: var(--mj-brand-primary);\n            }\n            .mjo-dash__icon[_ngcontent-%COMP%] {\n                width: 32px;\n                height: 32px;\n                border-radius: var(--mj-radius-md);\n                flex: none;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 13px;\n            }\n            .mjo-tone-neutral[_ngcontent-%COMP%] { background: var(--mj-status-neutral-bg); color: var(--mj-status-neutral-text); }\n            .mjo-tone-info[_ngcontent-%COMP%]    { background: var(--mj-status-info-bg);    color: var(--mj-status-info-text); }\n            .mjo-tone-warning[_ngcontent-%COMP%] { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n            .mjo-tone-error[_ngcontent-%COMP%]   { background: var(--mj-status-error-bg);   color: var(--mj-status-error-text); }\n            .mjo-tone-success[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n            .mjo-tone-violet[_ngcontent-%COMP%]  { background: var(--mj-status-violet-bg);  color: var(--mj-status-violet-text); }\n            .mjo-dash__queue-body[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n            .mjo-dash__queue-label[_ngcontent-%COMP%] { font-weight: var(--mj-font-medium); }\n            .mjo-dash__queue-note[_ngcontent-%COMP%] { display: block; }\n            .mjo-dash__count[_ngcontent-%COMP%] { font-size: 16px; }\n            .mjo-dash__note[_ngcontent-%COMP%] { margin-top: var(--mj-space-3); }\n\n            @media (max-width: 1200px) {\n                \n\n\n                .mjo-dash__split[_ngcontent-%COMP%] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            }\n            @media (max-width: 1000px) {\n                .mjo-dash__split[_ngcontent-%COMP%], \n   .mjo-dash__split--wide[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n            }\n            @media (max-width: 760px) {\n                [_nghost-%COMP%] {\n                    padding: var(--mj-space-4);\n                }\n            }"] });
+            i0.ɵɵconditional(ctx.ActiveTab === "overview" ? 3 : ctx.ActiveTab === "explorer" ? 4 : ctx.ActiveTab === "fulfillment" ? 5 : ctx.ActiveTab === "aging" ? 6 : -1);
+        } }, dependencies: [CommonModule,
+            MJTabNavComponent,
+            EntityViewerModule, i1.EntityViewerComponent, MJAlertComponent,
+            MJEmptyStateComponent,
+            MJOStatTileComponent,
+            MJOBarListComponent,
+            MJODayBarsComponent], styles: ["[_nghost-%COMP%] {\n                display: flex;\n                flex-direction: column;\n                height: 100%;\n                width: 100%;\n                min-height: 0;\n                overflow: hidden;\n            }\n            .mjo-dashboard-container[_ngcontent-%COMP%] {\n                display: flex;\n                flex-direction: column;\n                height: 100%;\n                width: 100%;\n                min-height: 0;\n                overflow-y: auto;\n                padding: var(--mj-space-6);\n                box-sizing: border-box;\n                gap: var(--mj-space-4);\n            }\n            .mjo-tab-container[_ngcontent-%COMP%] {\n                flex-shrink: 0;\n                margin-bottom: var(--mj-space-2);\n            }\n            .mjo-explorer-wrapper[_ngcontent-%COMP%] {\n                flex: 1 1 auto;\n                min-height: 600px;\n                height: 100%;\n                background: var(--mj-bg-surface);\n                border: 1px solid var(--mj-border-default);\n                border-radius: var(--mj-radius-md);\n                overflow: hidden;\n                display: flex;\n                flex-direction: column;\n            }\n            .mjo-fulfillment-pane[_ngcontent-%COMP%] {\n                flex: 1 1 auto;\n                height: 100%;\n                display: flex;\n                flex-direction: column;\n                min-height: 600px;\n                gap: var(--mj-space-4);\n            }\n            .mjo-dash__viewer-card[_ngcontent-%COMP%] {\n                background: var(--mj-bg-surface);\n                border: 1px solid var(--mj-border-default);\n                border-radius: var(--mj-radius-md);\n                overflow: hidden;\n                display: flex;\n                flex-direction: column;\n                height: 560px;\n                min-height: 480px;\n            }\n            .mjo-dash__viewer-host[_ngcontent-%COMP%] {\n                flex: 1 1 auto;\n                height: 100%;\n                min-height: 400px;\n                display: flex;\n                flex-direction: column;\n            }\n            mj-entity-viewer[_ngcontent-%COMP%] {\n                display: flex;\n                flex-direction: column;\n                flex: 1 1 auto;\n                height: 100%;\n                min-height: 350px;\n                width: 100%;\n            }\n            .mjo-aging-pane[_ngcontent-%COMP%] {\n                display: flex;\n                flex-direction: column;\n                gap: var(--mj-space-4);\n            }\n            .mjo-dash__split--wide[_ngcontent-%COMP%] {\n                grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);\n                margin-top: var(--mj-space-4);\n            }\n            .mjo-dash__split[_ngcontent-%COMP%] {\n                display: grid;\n                grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);\n                gap: var(--mj-space-4);\n                margin-top: var(--mj-space-6);\n            }\n            .mjo-dash__queue[_ngcontent-%COMP%] {\n                display: flex;\n                align-items: center;\n                gap: var(--mj-space-3);\n                padding: var(--mj-space-3) 0;\n                border-bottom: 1px solid var(--mj-border-subtle);\n                color: inherit;\n                cursor: pointer;\n            }\n            .mjo-dash__queue[_ngcontent-%COMP%]:last-child {\n                border-bottom: none;\n            }\n            .mjo-dash__queue[_ngcontent-%COMP%]:hover {\n                text-decoration: none;\n            }\n            .mjo-dash__queue[_ngcontent-%COMP%]:hover   .mjo-dash__queue-label[_ngcontent-%COMP%] {\n                color: var(--mj-brand-primary);\n            }\n            .mjo-dash__icon[_ngcontent-%COMP%] {\n                width: 32px;\n                height: 32px;\n                border-radius: var(--mj-radius-md);\n                flex: none;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 13px;\n            }\n            .mjo-tone-neutral[_ngcontent-%COMP%] { background: var(--mj-status-neutral-bg); color: var(--mj-status-neutral-text); }\n            .mjo-tone-info[_ngcontent-%COMP%]    { background: var(--mj-status-info-bg);    color: var(--mj-status-info-text); }\n            .mjo-tone-warning[_ngcontent-%COMP%] { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n            .mjo-tone-error[_ngcontent-%COMP%]   { background: var(--mj-status-error-bg);   color: var(--mj-status-error-text); }\n            .mjo-tone-success[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n            .mjo-tone-violet[_ngcontent-%COMP%]  { background: var(--mj-status-violet-bg);  color: var(--mj-status-violet-text); }\n            .mjo-dash__queue-body[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n            .mjo-dash__queue-label[_ngcontent-%COMP%] { font-weight: var(--mj-font-medium); }\n            .mjo-dash__queue-note[_ngcontent-%COMP%] { display: block; }\n            .mjo-dash__count[_ngcontent-%COMP%] { font-size: 16px; }\n\n            @media (max-width: 1200px) {\n                .mjo-dash__split[_ngcontent-%COMP%] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            }\n            @media (max-width: 1000px) {\n                .mjo-dash__split[_ngcontent-%COMP%], \n   .mjo-dash__split--wide[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n            }\n            @media (max-width: 760px) {\n                .mjo-dashboard-container[_ngcontent-%COMP%] {\n                    padding: var(--mj-space-4);\n                }\n            }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJOOrdersDashboardPageComponent, [{
         type: Component,
-        args: [{ selector: 'mjo-orders-dashboard-page', standalone: true, imports: [CommonModule, MJAlertComponent, MJEmptyStateComponent, MJOStatTileComponent, MJOBarListComponent, MJODayBarsComponent, MJOMoneyPipe], template: `
-        <div class="mj-stat-grid">
-            <mjo-stat-tile
-                Label="Open orders"
-                Icon="fa-solid fa-file-invoice-dollar"
-                [Value]="OpenCountDisplay"
-                [Detail]="OpenValueDisplay" />
+        args: [{ selector: 'mjo-orders-dashboard-page', standalone: true, imports: [
+                    CommonModule,
+                    MJTabNavComponent,
+                    EntityViewerModule,
+                    MJAlertComponent,
+                    MJEmptyStateComponent,
+                    MJOStatTileComponent,
+                    MJOBarListComponent,
+                    MJODayBarsComponent
+                ], template: `
+        <div class="mjo-dashboard-container">
+            <div class="mjo-tab-container">
+                <mj-tab-nav [Tabs]="Tabs" [ActiveKey]="ActiveTab" (TabChange)="OnTabChange($event)"></mj-tab-nav>
+            </div>
 
-            <mjo-stat-tile
-                Label="Open balance"
-                Icon="fa-solid fa-scale-balanced"
-                [Value]="OpenBalanceDisplay"
-                Detail="Confirmed orders still carrying a balance" />
+            @if (ActiveTab === 'overview') {
+                <div class="mj-stat-grid">
+                    <mjo-stat-tile
+                        Label="Open orders"
+                        Icon="fa-solid fa-file-invoice-dollar"
+                        [Value]="OpenCountDisplay"
+                        [Detail]="OpenValueDisplay"
+                        (Clicked)="OpenExplorerPreset('all')" />
 
-            <mjo-stat-tile
-                Label="Overdue"
-                Icon="fa-solid fa-hourglass-half"
-                Tone="alert"
-                [Value]="OverdueValueDisplay"
-                [Detail]="OverdueDetail"
-                (Clicked)="NavigateRequested.emit('list')" />
+                    <mjo-stat-tile
+                        Label="Open balance"
+                        Icon="fa-solid fa-scale-balanced"
+                        [Value]="OpenBalanceDisplay"
+                        Detail="Confirmed orders still carrying a balance"
+                        (Clicked)="OpenExplorerPreset('unpaid')" />
 
-            <mjo-stat-tile
-                Label="Credits held"
-                Icon="fa-solid fa-piggy-bank"
-                [Value]="CreditsDisplay"
-                Detail="Offer these before invoicing again"
-                (Clicked)="NavigateRequested.emit('list')" />
-        </div>
+                    <mjo-stat-tile
+                        Label="Overdue"
+                        Icon="fa-solid fa-hourglass-half"
+                        Tone="alert"
+                        [Value]="OverdueValueDisplay"
+                        [Detail]="OverdueDetail"
+                        (Clicked)="OpenExplorerPreset('overdue')" />
 
-        <div class="mjo-dash__split">
-            <div class="mj-card">
-                <div class="mj-card-head">
-                    <i class="fa-solid fa-list-check" aria-hidden="true"></i>
-                    <h3>Needs someone</h3>
-                </div>
-                <div class="mj-card-pad mjo-dash__queues">
-                    @for (queue of Queues; track queue.Label) {
-                        <a href="#" class="mjo-dash__queue" (click)="go($event, queue.PageId)">
-                            <span class="mjo-dash__icon" [class]="'mjo-tone-' + queue.Tone">
-                                <i [class]="queue.Icon" aria-hidden="true"></i>
-                            </span>
-                            <span class="mjo-dash__queue-body">
-                                <span class="mjo-dash__queue-label">{{ queue.Label }}</span>
-                                @if (queue.Note) {
-                                    <span class="small muted mjo-dash__queue-note">{{ queue.Note }}</span>
-                                }
-                            </span>
-                            <b class="mj-num mjo-dash__count">{{ queue.Count }}</b>
-                            <i class="fa-solid fa-chevron-right muted tiny" aria-hidden="true"></i>
-                        </a>
-                    } @empty {
-                        <div class="small muted">Nothing is waiting. Unusual, and worth enjoying.</div>
-                    }
+                    <mjo-stat-tile
+                        Label="Credits held"
+                        Icon="fa-solid fa-piggy-bank"
+                        [Value]="CreditsDisplay"
+                        Detail="Offer these before invoicing again"
+                        (Clicked)="OpenExplorerPreset('credits')" />
                 </div>
-            </div>
 
-            <div class="mj-card">
-                <div class="mj-card-head">
-                    <i class="fa-solid fa-chart-simple" aria-hidden="true"></i>
-                    <h3>Orders per day</h3>
-                    <span class="right small muted">last 7 days</span>
-                </div>
-                <div class="mj-card-pad">
-                    <mjo-day-bars [Bars]="OrdersPerDay" Unit="orders" />
-                </div>
-            </div>
+                <div class="mjo-dash__split">
+                    <div class="mj-card">
+                        <div class="mj-card-head">
+                            <i class="fa-solid fa-list-check" aria-hidden="true"></i>
+                            <h3>Needs someone</h3>
+                        </div>
+                        <div class="mj-card-pad mjo-dash__queues">
+                            @for (queue of Queues; track queue.Label) {
+                                <a href="#" class="mjo-dash__queue" (click)="goQueue($event, queue)">
+                                    <span class="mjo-dash__icon" [class]="'mjo-tone-' + queue.Tone">
+                                        <i [class]="queue.Icon" aria-hidden="true"></i>
+                                    </span>
+                                    <span class="mjo-dash__queue-body">
+                                        <span class="mjo-dash__queue-label">{{ queue.Label }}</span>
+                                        @if (queue.Note) {
+                                            <span class="small muted mjo-dash__queue-note">{{ queue.Note }}</span>
+                                        }
+                                    </span>
+                                    <b class="mj-num mjo-dash__count">{{ queue.Count }}</b>
+                                    <i class="fa-solid fa-chevron-right muted tiny" aria-hidden="true"></i>
+                                </a>
+                            } @empty {
+                                <div class="small muted">Nothing is waiting. Unusual, and worth enjoying.</div>
+                            }
+                        </div>
+                    </div>
 
-            <div class="mj-card">
-                <div class="mj-card-head">
-                    <i class="fa-solid fa-layer-group" aria-hidden="true"></i>
-                    <h3>Where orders are sitting</h3>
-                </div>
-                <div class="mj-card-pad">
-                    <mjo-bar-list [Rows]="StatusMix" EmptyText="No orders yet." />
-                </div>
-            </div>
-        </div>
+                    <div class="mj-card">
+                        <div class="mj-card-head">
+                            <i class="fa-solid fa-chart-simple" aria-hidden="true"></i>
+                            <h3>Orders per day</h3>
+                            <span class="right small muted">last 7 days</span>
+                        </div>
+                        <div class="mj-card-pad">
+                            <mjo-day-bars [Bars]="OrdersPerDay" Unit="orders" />
+                        </div>
+                    </div>
 
-        <div class="mjo-dash__split mjo-dash__split--wide">
-            <div class="mj-card">
-                <div class="mj-card-head">
-                    <i class="fa-solid fa-clock-rotate-left" aria-hidden="true"></i>
-                    <h3>Latest orders</h3>
-                    <span class="right">
-                        <a href="#" class="small" (click)="go($event, 'list')">All orders →</a>
-                    </span>
+                    <div class="mj-card">
+                        <div class="mj-card-head">
+                            <i class="fa-solid fa-layer-group" aria-hidden="true"></i>
+                            <h3>Where orders are sitting</h3>
+                        </div>
+                        <div class="mj-card-pad">
+                            <mjo-bar-list [Rows]="StatusMix" EmptyText="No orders yet." />
+                        </div>
+                    </div>
                 </div>
-                <div class="mj-table-wrap">
-                    <table class="mj-table mj-table--compact">
-                        <thead>
-                            <tr>
-                                <th>Order</th>
-                                <th>Customer</th>
-                                <th>Status</th>
-                                <th class="num">Total</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            @for (order of LatestOrders; track order.ID) {
-                                <tr class="is-clickable" (click)="OrderOpened.emit(order)">
-                                    <td><span class="mono">{{ order.OrderNumber }}</span></td>
-                                    <td>{{ customerOf(order) }}</td>
-                                    <td>
-                                        <span class="mj-chip" [class]="statusClass(order)">
-                                            {{ order.Status }}
-                                        </span>
-                                    </td>
-                                    <td class="num" [class.mj-money--neg]="(order.TotalGross ?? 0) < 0">
-                                        {{ (order.TotalGross ?? 0) | mjoMoney }}
-                                    </td>
-                                </tr>
-                            } @empty {
-                                <tr><td colspan="4" class="small muted">No orders yet.</td></tr>
+
+                <div class="mjo-dash__split mjo-dash__split--wide">
+                    <div class="mj-card mjo-dash__viewer-card">
+                        <div class="mj-card-head">
+                            <i class="fa-solid fa-table-list" aria-hidden="true"></i>
+                            <h3>Active Orders</h3>
+                            <span class="right">
+                                <a href="#" class="small" (click)="OnTabChange('explorer')">Full-screen Explorer →</a>
+                            </span>
+                        </div>
+                        <div class="mjo-dash__viewer-host">
+                            @if (OrderEntityInfo) {
+                                <mj-entity-viewer
+                                    [Entity]="OrderEntityInfo"
+                                    (RecordOpened)="OnRecordOpened($event)">
+                                </mj-entity-viewer>
+                            } @else {
+                                <div class="small muted" style="padding: 24px;">Loading order metadata...</div>
                             }
-                        </tbody>
-                    </table>
-                </div>
-            </div>
+                        </div>
+                    </div>
 
-            <div class="mj-card">
-                <div class="mj-card-head">
-                    <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
-                    <h3>Worth a look</h3>
+                    <div class="mj-card">
+                        <div class="mj-card-head">
+                            <i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
+                            <h3>Worth a look</h3>
+                        </div>
+                        <div class="mj-card-pad">
+                            @for (item of WorthALook; track item.Order.ID) {
+                                <mj-alert [Variant]="item.Tone" [Icon]="item.Icon" Role="note">
+                                    <strong>{{ item.Headline }}</strong>
+                                    {{ item.Detail }}
+                                    <a href="#" class="small" (click)="openFrom($event, item.Order)">Work it →</a>
+                                </mj-alert>
+                            } @empty {
+                                <mj-empty-state
+                                    Icon="fa-solid fa-circle-check"
+                                    Title="Nothing is asking for attention"
+                                    Size="compact" />
+                            }
+                        </div>
+                    </div>
                 </div>
-                <div class="mj-card-pad">
-                    @for (item of WorthALook; track item.Order.ID) {
-                        <mj-alert [Variant]="item.Tone" [Icon]="item.Icon" Role="note">
-                                <strong>{{ item.Headline }}</strong>
-                                {{ item.Detail }}
-                                <a href="#" class="small" (click)="openFrom($event, item.Order)">Work it →</a>
-                        </mj-alert>
-                    } @empty {
-                        <mj-empty-state
-                            Icon="fa-solid fa-circle-check"
-                            Title="Nothing is asking for attention"
-                            Size="compact" />
+            } @else if (ActiveTab === 'explorer') {
+                <div class="mjo-explorer-wrapper">
+                    @if (OrderEntityInfo) {
+                        <mj-entity-viewer
+                            [Entity]="OrderEntityInfo"
+                            [ViewEntity]="ExplorerView"
+                            (RecordOpened)="OnRecordOpened($event)">
+                        </mj-entity-viewer>
+                    } @else {
+                        <div class="small muted" style="padding: 24px;">Loading order metadata...</div>
                     }
                 </div>
-            </div>
+            } @else if (ActiveTab === 'fulfillment') {
+                <div class="mjo-fulfillment-pane">
+                    <p class="mjo-note mjo-fq__note">
+                        <i class="fa-solid fa-circle-info" aria-hidden="true"></i>
+                        Everything here is already paid for and booked. What is outstanding is the goods, and what this queue controls is the physical line fulfillment state.
+                    </p>
+                    <div class="mjo-explorer-wrapper">
+                        @if (OrderLineEntityInfo) {
+                            <mj-entity-viewer
+                                [Entity]="OrderLineEntityInfo"
+                                [ViewEntity]="FulfillmentQueueView"
+                                (RecordOpened)="OnRecordOpened($event)">
+                            </mj-entity-viewer>
+                        } @else {
+                            <div class="small muted" style="padding: 24px;">Loading fulfillment queue...</div>
+                        }
+                    </div>
+                </div>
+            } @else if (ActiveTab === 'aging') {
+                <div class="mjo-aging-pane">
+                    <div class="mj-stat-grid">
+                        <mjo-stat-tile
+                            Label="Current (0-30 days)"
+                            Icon="fa-solid fa-check"
+                            [Value]="AgingCurrentDisplay"
+                            Detail="Due or recently invoiced" />
+                        <mjo-stat-tile
+                            Label="31–60 days"
+                            Icon="fa-solid fa-clock"
+                            Tone="default"
+                            [Value]="Aging30Display"
+                            Detail="First reminder interval" />
+                        <mjo-stat-tile
+                            Label="61–90 days"
+                            Icon="fa-solid fa-triangle-exclamation"
+                            Tone="alert"
+                            [Value]="Aging60Display"
+                            Detail="Escalated collection required" />
+                        <mjo-stat-tile
+                            Label="90+ days overdue"
+                            Icon="fa-solid fa-circle-xmark"
+                            Tone="alert"
+                            [Value]="Aging90Display"
+                            Detail="High risk receivables" />
+                    </div>
+
+                    <div class="mjo-dash__split mjo-dash__split--wide" style="margin-top: var(--mj-space-6);">
+                        <div class="mj-card mjo-dash__viewer-card" style="grid-column: 1 / -1; height: 600px;">
+                            <div class="mj-card-head">
+                                <i class="fa-solid fa-hourglass-half" aria-hidden="true"></i>
+                                <h3>Overdue Collections Worklist</h3>
+                                <span class="right">
+                                    <a href="#" class="small" (click)="OpenExplorerPreset('overdue')">Open in Explorer →</a>
+                                </span>
+                            </div>
+                            <div class="mjo-dash__viewer-host" style="min-height: 520px;">
+                                @if (OrderEntityInfo) {
+                                    <mj-entity-viewer
+                                        [Entity]="OrderEntityInfo"
+                                        [ViewEntity]="AgingOverdueView"
+                                        (RecordOpened)="OnRecordOpened($event)">
+                                    </mj-entity-viewer>
+                                } @else {
+                                    <div class="small muted" style="padding: 24px;">Loading order metadata...</div>
+                                }
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
         </div>
-    `, styles: ["\n            :host {\n                display: block;\n                height: 100%;\n                overflow: auto;\n                padding: var(--mj-space-6);\n            }\n            /* The bottom row is two panels, not three \u2014 a table needs the width. */\n            .mjo-dash__split--wide {\n                grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);\n                margin-top: var(--mj-space-4);\n            }\n            .mjo-dash__split {\n                display: grid;\n                /* Queues, the per-day chart, and the status mix. The queues get the\n                   most room because they are the only column anyone acts on. */\n                grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);\n                gap: var(--mj-space-4);\n                margin-top: var(--mj-space-6);\n            }\n            .mjo-dash__queue {\n                display: flex;\n                align-items: center;\n                gap: var(--mj-space-3);\n                padding: var(--mj-space-3) 0;\n                border-bottom: 1px solid var(--mj-border-subtle);\n                color: inherit;\n            }\n            .mjo-dash__queue:last-child {\n                border-bottom: none;\n            }\n            .mjo-dash__queue:hover {\n                text-decoration: none;\n            }\n            .mjo-dash__queue:hover .mjo-dash__queue-label {\n                color: var(--mj-brand-primary);\n            }\n            .mjo-dash__icon {\n                width: 32px;\n                height: 32px;\n                border-radius: var(--mj-radius-md);\n                flex: none;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 13px;\n            }\n            .mjo-tone-neutral { background: var(--mj-status-neutral-bg); color: var(--mj-status-neutral-text); }\n            .mjo-tone-info    { background: var(--mj-status-info-bg);    color: var(--mj-status-info-text); }\n            .mjo-tone-warning { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n            .mjo-tone-error   { background: var(--mj-status-error-bg);   color: var(--mj-status-error-text); }\n            .mjo-tone-success { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n            .mjo-tone-violet  { background: var(--mj-status-violet-bg);  color: var(--mj-status-violet-text); }\n            .mjo-dash__queue-body { flex: 1; min-width: 0; }\n            .mjo-dash__queue-label { font-weight: var(--mj-font-medium); }\n            .mjo-dash__queue-note { display: block; }\n            .mjo-dash__count { font-size: 16px; }\n            .mjo-dash__note { margin-top: var(--mj-space-3); }\n\n            @media (max-width: 1200px) {\n                /* Three panels do not survive this width; the chart is the one\n                   that reads worst when squeezed, so it wraps first. */\n                .mjo-dash__split { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            }\n            @media (max-width: 1000px) {\n                .mjo-dash__split,\n                .mjo-dash__split--wide { grid-template-columns: 1fr; }\n            }\n            @media (max-width: 760px) {\n                :host {\n                    padding: var(--mj-space-4);\n                }\n            }\n        "] }]
+    `, styles: ["\n            :host {\n                display: flex;\n                flex-direction: column;\n                height: 100%;\n                width: 100%;\n                min-height: 0;\n                overflow: hidden;\n            }\n            .mjo-dashboard-container {\n                display: flex;\n                flex-direction: column;\n                height: 100%;\n                width: 100%;\n                min-height: 0;\n                overflow-y: auto;\n                padding: var(--mj-space-6);\n                box-sizing: border-box;\n                gap: var(--mj-space-4);\n            }\n            .mjo-tab-container {\n                flex-shrink: 0;\n                margin-bottom: var(--mj-space-2);\n            }\n            .mjo-explorer-wrapper {\n                flex: 1 1 auto;\n                min-height: 600px;\n                height: 100%;\n                background: var(--mj-bg-surface);\n                border: 1px solid var(--mj-border-default);\n                border-radius: var(--mj-radius-md);\n                overflow: hidden;\n                display: flex;\n                flex-direction: column;\n            }\n            .mjo-fulfillment-pane {\n                flex: 1 1 auto;\n                height: 100%;\n                display: flex;\n                flex-direction: column;\n                min-height: 600px;\n                gap: var(--mj-space-4);\n            }\n            .mjo-dash__viewer-card {\n                background: var(--mj-bg-surface);\n                border: 1px solid var(--mj-border-default);\n                border-radius: var(--mj-radius-md);\n                overflow: hidden;\n                display: flex;\n                flex-direction: column;\n                height: 560px;\n                min-height: 480px;\n            }\n            .mjo-dash__viewer-host {\n                flex: 1 1 auto;\n                height: 100%;\n                min-height: 400px;\n                display: flex;\n                flex-direction: column;\n            }\n            mj-entity-viewer {\n                display: flex;\n                flex-direction: column;\n                flex: 1 1 auto;\n                height: 100%;\n                min-height: 350px;\n                width: 100%;\n            }\n            .mjo-aging-pane {\n                display: flex;\n                flex-direction: column;\n                gap: var(--mj-space-4);\n            }\n            .mjo-dash__split--wide {\n                grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);\n                margin-top: var(--mj-space-4);\n            }\n            .mjo-dash__split {\n                display: grid;\n                grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);\n                gap: var(--mj-space-4);\n                margin-top: var(--mj-space-6);\n            }\n            .mjo-dash__queue {\n                display: flex;\n                align-items: center;\n                gap: var(--mj-space-3);\n                padding: var(--mj-space-3) 0;\n                border-bottom: 1px solid var(--mj-border-subtle);\n                color: inherit;\n                cursor: pointer;\n            }\n            .mjo-dash__queue:last-child {\n                border-bottom: none;\n            }\n            .mjo-dash__queue:hover {\n                text-decoration: none;\n            }\n            .mjo-dash__queue:hover .mjo-dash__queue-label {\n                color: var(--mj-brand-primary);\n            }\n            .mjo-dash__icon {\n                width: 32px;\n                height: 32px;\n                border-radius: var(--mj-radius-md);\n                flex: none;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 13px;\n            }\n            .mjo-tone-neutral { background: var(--mj-status-neutral-bg); color: var(--mj-status-neutral-text); }\n            .mjo-tone-info    { background: var(--mj-status-info-bg);    color: var(--mj-status-info-text); }\n            .mjo-tone-warning { background: var(--mj-status-warning-bg); color: var(--mj-status-warning-text); }\n            .mjo-tone-error   { background: var(--mj-status-error-bg);   color: var(--mj-status-error-text); }\n            .mjo-tone-success { background: var(--mj-status-success-bg); color: var(--mj-status-success-text); }\n            .mjo-tone-violet  { background: var(--mj-status-violet-bg);  color: var(--mj-status-violet-text); }\n            .mjo-dash__queue-body { flex: 1; min-width: 0; }\n            .mjo-dash__queue-label { font-weight: var(--mj-font-medium); }\n            .mjo-dash__queue-note { display: block; }\n            .mjo-dash__count { font-size: 16px; }\n\n            @media (max-width: 1200px) {\n                .mjo-dash__split { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n            }\n            @media (max-width: 1000px) {\n                .mjo-dash__split,\n                .mjo-dash__split--wide { grid-template-columns: 1fr; }\n            }\n            @media (max-width: 760px) {\n                .mjo-dashboard-container {\n                    padding: var(--mj-space-4);\n                }\n            }\n        "] }]
     }], null, { NavigateRequested: [{
             type: Output
         }], OrderOpened: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJOOrdersDashboardPageComponent, { className: "MJOOrdersDashboardPageComponent", filePath: "lib/pages/orders/orders-dashboard.page.ts", lineNumber: 272 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJOOrdersDashboardPageComponent, { className: "MJOOrdersDashboardPageComponent", filePath: "lib/pages/orders/orders-dashboard.page.ts", lineNumber: 406 }); })();
 //# sourceMappingURL=orders-dashboard.page.js.map