tin-spa 20.14.22 → 20.14.26

package/fesm2022/tin-spa.mjs

@@ -30,9 +30,11 @@ import * as i6 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i1$4 from '@angular/cdk/layout';
 import * as i1$5 from '@angular/service-worker';
+import * as i2$2 from '@angular/forms';
+import { FormControl, Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i19 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i5 from '@angular/material/progress-bar';
+import * as i6$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i14 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -40,8 +42,6 @@ import * as i15$1 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$2 from '@angular/forms';
-import { FormControl, Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i4$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i4$3 from '@angular/material/checkbox';
@@ -50,9 +50,9 @@ import * as i7$1 from '@angular/material/select';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i13 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i5$1 from '@angular/material/datepicker';
+import * as i5 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i5$2 from '@kolkov/angular-editor';
+import * as i5$1 from '@kolkov/angular-editor';
 import { AngularEditorModule } from '@kolkov/angular-editor';
 import * as i17 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
@@ -72,9 +72,9 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSortModule } from '@angular/material/sort';
-import * as i5$3 from '@angular/material/stepper';
+import * as i5$2 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
-import * as i5$4 from '@angular/material/tabs';
+import * as i3$2 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i19$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -1712,6 +1712,421 @@ function provideTinSpaRuntime(config) {
     ]);
 }
 
+class ApiErrorService {
+    constructor(messageService) {
+        this.messageService = messageService;
+        // One dialog per KIND per window. Keyed by kind rather than by URL on purpose: when the backend goes down,
+        // twenty different URLs fail for one single reason, and the user needs to be told that reason once.
+        this.lastShownAt = new Map();
+        /** How long a given kind stays suppressed after being shown. The user described "the same 10 seconds or so". */
+        this.suppressWindowMs = 10000;
+        // Added: submits dedupe over a much shorter window than background reads. Long enough to swallow a
+        // double-click or a duplicated emission, short enough that a user who reads the dialog, dismisses it and
+        // deliberately tries again is told again rather than met with silence.
+        this.submitSuppressWindowMs = 1500;
+        //================ Application-level failures (HTTP 200 + success:false) ================
+        // Added: fragments that mark a message as machine-authored rather than human-authored. Matched
+        // case-insensitively against the whole message. The list is deliberately about IMPLEMENTATION LEAKS, not
+        // about severity — a leaked identifier is useless to the user however serious the underlying fault is.
+        this.opaqueMarkers = [
+            // NOTE: matched as a SUBSTRING, never by equality. TinWeb's catch-all now appends a correlation code —
+            // "Error processing request (reference K7M2QP4T)" — so an equality test would classify every catch-all
+            // failure as a business message and show the raw text, which is worse than the behaviour this replaces.
+            'error processing request', // TinWeb BaseController/BaseController2/BaseService catch-all — by far the most common
+            'invalid column name', // SQL leaking through after a schema/migration drift
+            'sqlexception',
+            'object reference not set',
+            'an error occurred while', // EF Core's standard preamble ("...while updating the entries")
+            'inner exception',
+            'stack trace',
+            'the underlying provider failed',
+            'index was outside the bounds',
+            'timeout expired',
+            'exception', // catches DbUpdateException, InvalidOperationException, ... by suffix
+            // Raw SqlException text.
+            //
+            // Changed: this block used to say "TinCore's BaseRepository.SetErrorResp returns ex.InnerException.Message
+            // verbatim on HTTP 200 ... These never carry a correlation reference". BOTH halves of that are now FALSE
+            // and were left standing after the backend was fixed underneath them. `BaseRepository.BuildSafeMessage`
+            // (`Sharp/TinCore/Repositories/BaseRepository.cs:382-400`, read 2026-08-09) now logs the real exception
+            // out-of-band and returns `ClassifyFailure(ex) + " (reference X)"` — a friendly sentence WITH a reference.
+            // So the schema leak this list was written against no longer comes from there, and the failures that
+            // reach us from there do carry a code. Believing the old comment would lead the next reader to delete
+            // these markers as obsolete, which is exactly the wrong conclusion — see below for why they still matter.
+            //
+            // These fragments are still LIVE, for two independent reasons, both verified rather than assumed:
+            //   1. Other server paths still return raw exception text on HTTP 200 and never went through
+            //      BaseRepository at all — e.g. `TinWeb/Services/Agent/AgentApiService.cs:391` and `:480` return
+            //      `ex.InnerException?.Message ?? ex.Message` verbatim, which for a bad foreign key is precisely
+            //      "The INSERT statement conflicted with the FOREIGN KEY constraint ...". The accounting services
+            //      leak the same way but one level UP — `InvoiceService:311/347/681/1007/1108`,
+            //      `CreditNoteService:184`, `RevenueScheduleService:95/248` return the OUTER `ex.Message`, which for a
+            //      DbUpdateException is "An error occurred while updating the entries. See the inner exception for
+            //      details." That is why BOTH shapes are covered above: 'an error occurred while' and 'inner exception'
+            //      catch the outer form, the SQL phrases below catch the inner one. Neither list is redundant.
+            //   2. TinCore is consumed as a PACKAGE (`TinWeb.csproj` pins `TinCore 10.0.12`, the release that carries
+            //      this fix), so a consumer app on an older published TinCore still has the verbatim-`ex.Message`
+            //      behaviour. tin-spa ships to four SPAs that are not upgraded in step, and a classifier that assumes
+            //      the newest backend would leak schema on every one that lags. Their own APIs leak independently of
+            //      TinCore too — `Sharp/{Shift,Pulse,Piglet,Grip,Test}` carry ~39 hand-written `Message = ex.Message`
+            //      style returns that never touch BaseRepository at all.
+            //
+            // Two entries are kept WITHOUT a live producer, stated plainly rather than quietly: 'stack trace' and
+            // 'sqlexception' only appear in a full `ex.ToString()`, and no TinWeb/TinCore path puts one in a client
+            // Message today (checked 2026-08-09). They stay because a deny-list entry costs one `includes()` and the
+            // failure mode of removing one is a schema dump on a user's screen. Cheap insurance, not an oversight.
+            //
+            // Each fragment below is SQL Server's own wording. None of them can occur in a hand-authored message like
+            // "Registration number already in use" or "Customer not found", which is why they are matched as phrases
+            // rather than on single words such as "duplicate" or "constraint" that a human might legitimately write.
+            // Re-checked one by one against what the server produces today: none of the six friendly sentences
+            // `ClassifyFailure` can now return matches any marker here, so the fix upstream does not collide with
+            // this list — the good sentences stay 'business' and are shown, exactly as intended.
+            'statement conflicted with the', // "The INSERT statement conflicted with the FOREIGN KEY constraint ..."
+            'foreign key constraint',
+            'unique key constraint',
+            'primary key constraint',
+            'check constraint',
+            'cannot insert the value null',
+            'string or binary data would be truncated',
+            'violation of ', // "Violation of PRIMARY KEY constraint 'PK_...'"
+            'duplicate key', // "Cannot insert duplicate key row in object ..."
+            // Added 2026-08-09, found by re-checking this list against the backend rather than against the old comment.
+            // `BaseRepository.ClassifyFailure` maps six recognisable SQL failures to genuinely useful sentences ("A
+            // record with these details already exists.", "A required value is missing.") — those are real business
+            // messages and correctly stay toasts. Its SEVENTH return is the unrecognised fall-through, and it is a
+            // different animal: "Could not complete the operation. (reference X)" is human-SHAPED but carries exactly
+            // as much information as "Error processing request" — which is the first entry in this list. It was being
+            // classified 'business' purely because it is grammatical.
+            //
+            // That misclassification cost the user the one thing that failure has going for it. `BuildSafeMessage`
+            // deliberately logs the real exception and mints a reference precisely BECAUSE it could not say what went
+            // wrong — so this is the case where quoting the code to support is the whole remedy. As a toast the code
+            // is stripped (uncopyable in 5 seconds, see presentAppFailure) and the user is left with a shrug. As a
+            // dialog it renders as the footnote the message dialog already has, which is where a reference belongs.
+            // Verified unique: this exact phrase occurs nowhere else in Sharp/** or in tin-spa, so it cannot shadow a
+            // hand-authored message.
+            'could not complete the operation',
+        ];
+    }
+    // Classification is by status code first, because that is the only signal that is reliable across browsers.
+    // `statusText === 'Unknown Error'` is kept as a secondary network signal since some browsers report a failed
+    // connection that way while still surfacing status 0.
+    classify(error) {
+        const status = error?.status ?? 0;
+        // status 0 means the request never reached a server: offline, DNS failure, connection refused, CORS block.
+        // This is the single most common case for a field user and the one that was rendering blank.
+        if (status === 0 || error?.statusText === 'Unknown Error') {
+            return {
+                kind: 'network',
+                title: 'No connection',
+                message: `We couldn't reach the server. Please check your internet connection and try again.\n\n` +
+                    `If your connection is working, the service may be temporarily unavailable — your work is not lost, and you can try again in a moment.`,
+            };
+        }
+        if (status === 408 || status === 504) {
+            return {
+                kind: 'timeout',
+                title: 'Taking too long',
+                message: `The server is taking longer than expected to respond.\n\nPlease wait a moment and try again.`,
+            };
+        }
+        // Added: 429 Too Many Requests. Before this branch existed a 429 reached the 'unknown' fall-through at the
+        // bottom of this method and told the user "Please try again" — inviting the exact retry the server just
+        // refused. On a token-bucket or sliding-window limiter every one of those retries extends the block rather
+        // than clearing it, so the friendly-sounding advice actively made the situation worse.
+        //
+        // Two further things this deliberately does NOT do:
+        //   * it does not read like the user's fault. A 429 is usually the app being chatty, or a shared office IP
+        //     hitting one limit for everyone — nothing the person at the keyboard did.
+        //   * it does not say "contact your administrator". This clears on its own; sending them to support for a
+        //     condition that resolves in under a minute wastes their time and support's.
+        // The one instruction is to WAIT, with a duration when the server told us one.
+        if (status === 429) {
+            return {
+                kind: 'ratelimited',
+                title: 'Busy right now',
+                message: `The server is handling more requests than it can take right now, so it has asked us to pause for a moment. Nothing was lost, and nothing is wrong with your work.\n\n` +
+                    `Please wait ${this.retryAfterText(error)} before trying that again — trying repeatedly makes the wait longer, not shorter.`,
+            };
+        }
+        if (status === 503) {
+            return {
+                kind: 'unavailable',
+                title: 'Service unavailable',
+                message: `The service is temporarily unavailable, usually because it is being updated.\n\nPlease try again in a few minutes.`,
+            };
+        }
+        // A 400 is almost never the user's doing — the app sent a payload the server rejected. Saying "check your
+        // input" would send them hunting for a mistake they did not make, so this points at support instead.
+        if (status === 400 || status === 422) {
+            return {
+                kind: 'badrequest',
+                title: 'Something went wrong',
+                message: `We couldn't complete that action because of a technical problem in the app — not anything you did wrong.\n\n` +
+                    `Please try again. If it keeps happening, contact your administrator so it can be looked into.`,
+            };
+        }
+        if (status === 403) {
+            return {
+                kind: 'forbidden',
+                title: 'Not allowed',
+                message: `You don't have permission to do that.\n\nIf you think you should, please contact your administrator.`,
+            };
+        }
+        if (status === 404) {
+            return {
+                kind: 'notfound',
+                title: 'Not found',
+                message: `We couldn't find what you were looking for. It may have been moved or deleted by someone else.\n\n` +
+                    `Try refreshing the page. If it keeps happening, contact your administrator.`,
+            };
+        }
+        if (status >= 500) {
+            return {
+                kind: 'server',
+                title: 'Something went wrong',
+                message: `The server ran into a problem while handling your request.\n\n` +
+                    `Please try again shortly. If it keeps happening, contact your administrator.`,
+            };
+        }
+        return {
+            kind: 'unknown',
+            title: 'Something went wrong',
+            message: `We couldn't complete that action.\n\nPlease try again. If it keeps happening, contact your administrator.`,
+        };
+    }
+    // Added: turns a Retry-After header into something a person can act on. RFC 9110 allows two forms — a delay
+    // in seconds ("120") or an HTTP-date ("Wed, 21 Oct 2026 07:28:00 GMT") — and both are handled because which
+    // one arrives depends on the proxy in front of the API, not on our own code.
+    //
+    // Seconds are rounded to the nearest 5 (and never below 5) rather than quoted exactly: "wait about 30 seconds"
+    // is followed, "wait 27 seconds" invites someone to watch a clock and retry one second early. When the header
+    // is missing or unparseable the phrasing stays deliberately vague — an honest approximation beats a precise
+    // number we invented, and a limiter we cannot see the window of is exactly when not to promise one.
+    retryAfterText(error) {
+        const seconds = this.retryAfterSeconds(error); // Changed: parsing moved to retryAfterSeconds() so the sync layer can share it — see below
+        if (!(seconds > 0))
+            return 'a minute or so';
+        if (seconds <= 90)
+            return `about ${Math.max(5, Math.round(seconds / 5) * 5)} seconds`;
+        const minutes = Math.round(seconds / 60);
+        return `about ${minutes} minute${minutes === 1 ? '' : 's'}`;
+    }
+    // Added: the RAW parse, split out of retryAfterText() and made public so OfflineService can wait exactly as
+    // long as the server asked instead of guessing from an attempt count. It is deliberately ONE parser: the
+    // header has two legal forms (RFC 9110 delta-seconds and HTTP-date) and a second implementation of that would
+    // drift from this one the first time either is touched.
+    //
+    // Returns 0 — never a negative, never NaN — when the header is absent, malformed, or already in the past.
+    // Callers treat 0 as "the server said nothing", so a stale HTTP-date can never shorten a backoff to zero.
+    retryAfterSeconds(error) {
+        const raw = (error?.headers?.get ? error.headers.get('Retry-After') : null)?.trim() ?? '';
+        let seconds = 0;
+        if (/^\d+$/.test(raw)) {
+            seconds = parseInt(raw, 10);
+        }
+        else if (raw) {
+            const at = Date.parse(raw);
+            if (!isNaN(at))
+                seconds = Math.round((at - Date.now()) / 1000);
+        }
+        return seconds > 0 ? seconds : 0;
+    }
+    /** True when this kind was already shown inside the suppression window — i.e. the user has already been told. */
+    // Changed: window is now a parameter (defaulting to the existing suppressWindowMs, so present() is unaffected)
+    // because a submit failure needs a much shorter one than a burst of background reads — see presentAppFailure().
+    isSuppressed(kind, windowMs = this.suppressWindowMs) {
+        const last = this.lastShownAt.get(kind);
+        return last != null && (Date.now() - last) < windowMs;
+    }
+    // Presents at most ONE message per kind per window. The technical detail still goes to the console, where a
+    // developer wants it, so nothing is lost by keeping it out of the user's message.
+    //
+    // Changed: this comment used to read "at most ONE dialog per kind", and that stopped being true the moment
+    // 'ratelimited' gained its own branch below and went to a toast instead. What is uniform here is the
+    // SUPPRESSION — one message per kind per window — not the surface. The SURFACE is chosen per kind, and the
+    // 'ratelimited' block states the test for choosing it: a failure that is transient, self-clearing and
+    // presents the user with no decision to make does not earn a modal. Read that argument before adding a
+    // second exception; it is about weight, not about the specific status code.
+    present(error) {
+        const info = this.classify(error);
+        // Added: a 5xx from TinWeb's exception middleware now carries "(reference X)" in its body Message —
+        // pull it out so the dialog can quote it as a footnote, exactly as presentAppFailure() does for the
+        // 200-with-success:false catch-alls. Only the 'server' kind can carry one; a transport failure has no
+        // body at all (error.error is a ProgressEvent), which extractReference() tolerates as null.
+        if (info.kind === 'server') {
+            const body = error?.error;
+            info.reference = this.extractReference(body?.Message ?? body?.message) ?? undefined;
+        }
+        console.error(`[tin-spa] API error (${info.kind})`, { status: error?.status, url: error?.url, reference: info.reference, error }); // Changed: log the reference so console and server log line tie together
+        if (this.isSuppressed(info.kind))
+            return info; // already told them — a second dialog adds nothing
+        this.lastShownAt.set(info.kind, Date.now());
+        // Changed: a 429 gets a TOAST, not the modal every other kind gets. It is the only kind here that is
+        // guaranteed transient and self-clearing — the server has already said, in Retry-After, exactly when it
+        // will stop refusing. A modal is the wrong weight for that in three specific ways:
+        //
+        //   * It BLOCKS. The user must dismiss a dialog to get back to work they were not prevented from doing —
+        //     nothing was rejected except one request, and the next one may well succeed.
+        //   * It DEMANDS a decision for a condition with no decision to make. The only correct action is to wait,
+        //     and waiting is what happens if the app says nothing at all.
+        //   * During an OFFLINE DRAIN it is actively wrong. The sync layer leaves the op queued and retries on its
+        //     own backoff, so a modal saying something went wrong directly contradicts the sync indicator in the
+        //     toolbar, which is showing work still pending and perfectly healthy.
+        //
+        // The suppression above is deliberately shared and applied BEFORE this branch: a burst of throttled calls —
+        // which is the normal shape of a 429, since whatever tripped the limit is usually firing repeatedly — still
+        // yields exactly ONE toast per window, not a stack of them.
+        //
+        // The toast text is NOT info.message. That is dialog copy: three sentences over two paragraphs, written to
+        // be read at leisure in a 600px box. This surface is a 5-second snackbar, so the copy is compressed to the
+        // three things that are load-bearing and nothing else — that the cause is the server and not them, roughly
+        // how long to leave it, and that their work survived. info.message is still returned unchanged for callers.
+        if (info.kind === 'ratelimited') {
+            this.messageService.toast(`The server is busy — please wait ${this.retryAfterText(error)} before trying again. Nothing was lost.`);
+            return info;
+        }
+        this.messageService.errorWithSubject(info.title, info.message, info.reference); // Changed: pass the reference through so the dialog renders the quiet footnote
+        return info;
+    }
+    // Added: splits the server's message into 'opaque' (tells the user nothing, must not be shown raw) and
+    // 'business' (a deliberate sentence the backend author wrote for a human, genuinely worth reading).
+    //
+    // Written as a deny-list rather than an allow-list on purpose: business messages are open-ended and
+    // app-specific, so there is nothing to enumerate, whereas the ways a .NET exception leaks are few and stable.
+    // The consequence of the default is the safe one — an unrecognised message is treated as business and shown,
+    // so a real message is never swallowed; only recognisably technical text is replaced.
+    classifyMessage(message) {
+        const text = this.stripReference(message); // Changed: classify the SENTENCE, not the sentence plus the server's appended "(reference X)" — see below
+        // Changed: the reference is removed before classifying for two concrete reasons, neither cosmetic.
+        // First, the length test at the bottom is a heuristic about human authorship, and a 22-character machine
+        // suffix should not push a 285-character human message over it. Second, a body that is ONLY "(reference X)"
+        // now strips to empty and falls into the line below rather than toasting a bare code at the user — which
+        // would be the blank-message failure this whole service exists to kill, in a new costume.
+        if (!text)
+            return 'opaque'; // nothing to show — a blank toast is the very failure mode this service exists to kill
+        const lower = text.toLowerCase();
+        if (this.opaqueMarkers.some(marker => lower.includes(marker)))
+            return 'opaque';
+        if (/\bsystem\.[a-z]/i.test(text))
+            return 'opaque'; // a .NET namespace ("System.NullReferenceException")
+        if (/\bat\s+[\w.]+\s*\(/.test(text))
+            return 'opaque'; // a stack frame ("at Namespace.Method(")
+        if (text.length > 300)
+            return 'opaque'; // no human writes a 300-char error; this is a dump
+        return 'business';
+    }
+    // Added: pulls TinWeb's correlation code out of a catch-all message. The backend writes the same code into
+    // its log line as "[ref XXXXXXXX]", so quoting it in the dialog is what lets support jump straight to the log
+    // row instead of hunting by timestamp.
+    //
+    // The alphabet is A-Z/2-9 with 0/O/1/I/L removed (they are misread down a phone line), and the code is 8
+    // characters — but the pattern accepts 6-12 so a future length change does not silently stop matching. The
+    // reference is only ever EXTRACTED here; the rest of the raw message is still discarded, never shown.
+    extractReference(message) {
+        const match = (message ?? '').match(/\breference\s+([A-Z2-9]{6,12})\b/i);
+        return match ? match[1].toUpperCase() : null;
+    }
+    // Added: the sibling to extractReference() — it takes the code OUT of the sentence. Nothing is lost by this,
+    // because extractReference() has already read the code off the same string and it still reaches the console
+    // line in presentAppFailure() and, where the surface can hold it, the dialog footnote.
+    //
+    // This exists because the backend changed shape. Every failure from BaseRepository.BuildSafeMessage and from
+    // TinWeb's controller catch-alls now ends in "(reference XXXXXXXX)", so the reference is no longer the rare
+    // case it was when this service was written — it is on the majority of application-level failures, including
+    // the friendly ones. In a DIALOG that code is an asset: the box stays open, it renders as a quiet footnote,
+    // and the user can copy it. In a 5-second toast it is the opposite. Nobody transcribes eight random
+    // characters from a snackbar before it fades, so all it does is push the words that DO matter — "A record
+    // with these details already exists" — further from the eye and make a helpful sentence read like a fault
+    // report. The rule this settles on: the reference belongs on surfaces that persist long enough to copy it.
+    //
+    // Deliberately requires the PARENTHESES rather than matching a bare "reference XXXX" anywhere in the text.
+    // Every server path that appends one — BaseRepository:399, BaseController:190/688, BaseController2:175/219,
+    // BaseService:112/134, ExceptionMiddleware — writes the parenthesised form, so requiring them costs nothing,
+    // and it means a hand-authored sentence that legitimately says "quote reference on the invoice" survives.
+    stripReference(message) {
+        return (message ?? '')
+            .replace(/\s*\(\s*reference\s+[A-Z2-9]{6,12}\s*\)/gi, '')
+            .replace(/\s{2,}/g, ' ')
+            .trim();
+    }
+    // Added: the sibling to present() for failures that arrive as HTTP 200 with success:false.
+    //
+    // Opaque  -> the friendly dialog, through the SAME lastShownAt suppression map present() uses, so a burst
+    //            (a dashboard firing twenty calls at a broken backend) still yields exactly one dialog.
+    // Business -> the existing toast, unchanged in weight. Short, meaningful, non-blocking.
+    //
+    // Why 'submit' gets its own dedupe key rather than sharing with loads: suppression exists to collapse a BURST
+    // of background calls that all failed for one reason. A create/edit submit is not part of a burst — it is one
+    // deliberate action, and it is the exact case where a missed message leads the user to press the button again
+    // and duplicate the record. Sharing a key would let unrelated background load failures suppress the dialog
+    // for the one interaction that most needs it. Keeping a (short) window on the submit key still collapses a
+    // double-click, while letting a genuine retry a few seconds later speak up again.
+    presentAppFailure(response, context = 'action', url) {
+        const message = response?.message;
+        const failureClass = this.classifyMessage(message);
+        // Always log the raw response and URL, exactly as present() does — the developer loses nothing by the
+        // dialog being friendly, because the technical detail is right here.
+        const reference = this.extractReference(message); // Added: null for SqlException leaks and older backends, which never mint one
+        console.error(`[tin-spa] API failure (${failureClass}/${context})`, { url, message, reference, response }); // Changed: log the reference too, so the browser console and the server log line can be tied together
+        if (failureClass === 'business') {
+            // Changed: dropped the "Error: " prefix that every call site used to prepend. Verified nothing depends on
+            // it — no test in ng-space or any of the four consumer apps asserts on the literal "Error: ". The prefix
+            // only ever restated what the red-tinted message already conveyed, and it pushed the useful words right.
+            //
+            // Changed: the toast now shows the message with "(reference X)" REMOVED. This is the same argument as the
+            // dropped prefix, one step further. Since TinCore 10.0.12 every BaseRepository failure — including the
+            // GOOD ones — arrives as `ClassifyFailure(ex) + " (reference X)"`, so a genuinely useful sentence now
+            // reads "A record with these details already exists. (reference K7M2QP4T)". Twenty-two characters of
+            // machine correlation sit where the eye stops, on a surface that lives five seconds and cannot be copied
+            // from, and they change how the sentence is READ: a helpful instruction starts to look like a fault
+            // report. The code is not lost — extractReference() has already read it off the same string and it is on
+            // the console line above, where the developer who can use it is looking.
+            //
+            // The surface, deliberately, is MessageService.toast EXACTLY AS IT IS — no new variant, no second
+            // argument, nothing added to the toast API. The toast surface belongs to WS-7 and the whole correction
+            // here is which characters are handed to it.
+            //
+            // Safe by construction: classifyMessage() strips the same suffix and returns 'opaque' when what remains
+            // is empty, so a body that was ONLY "(reference X)" never reaches this branch and this can never toast
+            // an empty string.
+            this.messageService.toast(this.stripReference(message));
+            return failureClass;
+        }
+        const kind = context === 'submit' ? 'appfailure-submit' : 'appfailure';
+        if (this.isSuppressed(kind, context === 'submit' ? this.submitSuppressWindowMs : this.suppressWindowMs))
+            return failureClass;
+        this.lastShownAt.set(kind, Date.now());
+        // Copy matches classify() above: name the problem, absolve the user, say what to do next. The submit
+        // variant adds the two things that specifically stop a duplicate — that the data is still there, and that
+        // pressing the button again is not the fix.
+        // Changed: the reference is passed as its own argument rather than appended to the body, so the dialog can
+        // render it as a quiet footnote. It is omitted entirely when there isn't one — a SqlException leak and an
+        // older backend both arrive without a reference, and neither should show a dangling "quote reference" line.
+        if (context === 'submit') {
+            this.messageService.errorWithSubject('Not saved', `We couldn't save that because of a technical problem — not anything you did wrong.\n\n` +
+                `Nothing was saved, and your details are still on the form, so you can try again without re-entering them.\n\n` +
+                `If it keeps happening, please contact your administrator rather than submitting repeatedly, as that can create duplicates.`, reference ?? undefined);
+        }
+        else {
+            this.messageService.errorWithSubject('Something went wrong', `We couldn't complete that action because of a technical problem — not anything you did wrong.\n\n` +
+                `Please try again. If it keeps happening, contact your administrator.`, reference ?? undefined);
+        }
+        return failureClass;
+    }
+    /** Clears suppression so the next failure speaks up again — call after a successful request or reconnect. */
+    reset() {
+        this.lastShownAt.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ApiErrorService, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ApiErrorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ApiErrorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: MessageService }] });
+
 // Changed: Consolidated SignalR service — single hub connection for both notifications and entity broadcasts
 class SignalRService {
     // Changed: real-time is now driven centrally by tin-spa runtime config (provideTinSpaRuntime).
@@ -1879,11 +2294,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }] }] });
 
 class OfflineService {
-    constructor(httpService, authService, storage, messageService, signalR, zone, runtimeConfig) {
+    constructor(httpService, authService, storage, messageService, apiErrorService, // Added: shares ONE Retry-After parser with the dialog/toast path
+    signalR, zone, runtimeConfig) {
         this.httpService = httpService;
         this.authService = authService;
         this.storage = storage;
         this.messageService = messageService;
+        this.apiErrorService = apiErrorService;
         this.signalR = signalR;
         this.zone = zone;
         this.runtimeConfig = runtimeConfig;
@@ -1903,6 +2320,14 @@ class OfflineService {
         this.syncStarted = false;
         this.draining = false;
         this.backoffTimer = null;
+        // Added: how long the SERVER asked us to wait, in ms, from the Retry-After on the failure that just halted the
+        // drain — or null when it said nothing. Written by sendOp(), read once by drainLoop() on the very next line
+        // after it returns, so it is never stale: sendOp() clears it on entry, before any I/O.
+        this.serverRetryAfterMs = null;
+        // Added: epoch ms before which no AUTOMATIC drain may send, set only when the SERVER stated a Retry-After.
+        // Never set from the guessed attempt-count backoff — a reconnect drain jumping a guess is harmless and useful;
+        // jumping an instruction is not.
+        this.retryNotBefore = 0;
         this.periodicTimer = null;
         this.recoveryTimer = null;
     }
@@ -2432,7 +2857,7 @@ class OfflineService {
         if (!this.online$.value) {
             this.zone.run(() => this.online$.next(true)); // TS-20: re-enter Angular zone only on actual state flip (timer ticks run outside the zone)
             if (this.syncStarted)
-                setTimeout(() => this.zone.run(() => this.drain()), Math.floor(Math.random() * 5000)); // TS-20: drain (toasts/emissions) must run in-zone even when triggered from an out-of-zone timer path; jittered so a reconnecting fleet doesn't stampede
+                setTimeout(() => this.zone.run(() => this.drain(true)), Math.floor(Math.random() * 5000)); // TS-20: drain (toasts/emissions) must run in-zone even when triggered from an out-of-zone timer path; jittered so a reconnecting fleet doesn't stampede. Changed: auto=true — a reconnect must not jump a server-stated Retry-After
         }
         // Marry the two: whenever ping confirms we're reachable, revive SignalR if its own auto-reconnect gave up.
         // No-op when the hub is already connected, so this is safe to call on every online confirmation.
@@ -2468,10 +2893,10 @@ class OfflineService {
         this.zone.runOutsideAngular(() => {
             this.periodicTimer = setInterval(() => { if (this.online)
                 this.hasPending().then(has => { if (has)
-                    this.zone.run(() => this.drain()); }); }, 60000);
+                    this.zone.run(() => this.drain(true)); }); }, 60000); // Changed: auto=true — the 60s sweep must not jump a server-stated Retry-After
         });
         if (this.online)
-            this.drain();
+            this.drain(true); // Changed: auto=true — sync starting up is the app's decision, not the user's
     }
     // Added: reclaim work parked by a previous session. The sync engine otherwise only starts when a page happens
     // to register an offline table, so changes captured before a sign-out sat there until the user wandered back
@@ -2486,9 +2911,24 @@ class OfflineService {
         }
         catch { /* nothing parked, or the store isn't available */ }
     }
-    async drain() {
+    // Changed: `auto` marks a drain the APP decided to run (reconnect, the 60s sweep, sync start) as opposed to one
+    // the USER asked for. Only automatic drains are held back by a server-stated Retry-After — see retryNotBefore.
+    // It defaults to false so every EXTERNAL caller keeps today's behaviour untouched: the sync tray's "Sync Now"
+    // button (`sync.component.ts:29`) is a deliberate human action, and silently doing nothing when someone presses
+    // a button is precisely the quiet-failure shape this codebase keeps getting bitten by.
+    async drain(auto = false) {
         if (this.draining || !this.online)
             return;
+        // Added: honouring Retry-After ONLY inside scheduleBackoff was not enough, and a 32-op drain proved it — the
+        // retry arrived 9.5s after a 429 that said 20. The backoff timer was armed correctly, but a connectivity flip
+        // (SignalR dropping and reconnecting is routine, and each flip schedules its own drain within 5s of coming
+        // back) simply ran a drain in front of it. The wait has to bind every automatic entry point, not just the one
+        // timer, or the app still hammers a server that told it exactly when to come back.
+        //
+        // Deliberately fail-open: this is in-memory only, so a reload forgets it — and that is correct, because a
+        // reload also forgets the backoff timer, and a gate that outlived its own timer could strand the queue.
+        if (auto && Date.now() < this.retryNotBefore)
+            return;
         this.draining = true;
         const runner = () => this.drainLoop().finally(() => { this.draining = false; });
         const locks = navigator.locks;
@@ -2520,7 +2960,7 @@ class OfflineService {
                 op.status = 'pending';
                 op.attempts++;
                 await this.outbox.put(op);
-                this.scheduleBackoff(op.attempts);
+                this.scheduleBackoff(op.attempts, this.serverRetryAfterMs); // Changed: pass the server's own Retry-After, which overrides the attempt-count guess when present
                 break; // strict FIFO: a transient failure halts the drain until backoff/reconnect
             }
             if (outcome === 'synced')
@@ -2542,6 +2982,7 @@ class OfflineService {
         const payload = { ...op.payload };
         if (op.refMap && Object.keys(op.refMap).length)
             payload.clientRefs = JSON.stringify(op.refMap); // server resolves parent ClientRef -> real int FK
+        this.serverRetryAfterMs = null; // Added: cleared BEFORE the I/O, so a wait from a previous op can never leak into this one's backoff
         let response;
         try {
             response = await firstValueFrom(this.httpService.Post(op.url, payload));
@@ -2551,6 +2992,14 @@ class OfflineService {
             if (status === 0 || status === 408 || status === 429 || status >= 500) {
                 if (status === 0)
                     this.reportNetworkFailure();
+                // Added: the response headers were being thrown away here, and with them the one authoritative number in
+                // the whole exchange. A 429 (and a 503) may carry Retry-After — TinWeb's limiter always sends it, computed
+                // from the real window, and exposes it cross-origin — which is the server stating when it will stop
+                // refusing. Guessing from an attempt count instead means we either come back too early, get refused again
+                // and extend the block on a sliding window, or sit idle far longer than we needed to.
+                // Parsed by ApiErrorService so there is exactly ONE implementation of the two legal header forms.
+                const seconds = this.apiErrorService.retryAfterSeconds(err);
+                this.serverRetryAfterMs = seconds > 0 ? seconds * 1000 : null;
                 return 'transient';
             }
             return this.finishOp(op, 'failed', err?.message ?? `HTTP ${status}`);
@@ -2610,11 +3059,32 @@ class OfflineService {
             await this.outbox.put(op);
         }
     }
-    scheduleBackoff(attempts) {
+    // Changed: takes the server's stated Retry-After (ms, null when it said nothing) and OVERRIDES the computed
+    // backoff with it. Full jitter is right when we are guessing — it spreads a thundering herd across a window we
+    // invented — but it is wrong once the server has told us the answer, because `random * cap` can return almost
+    // zero and send us straight back into a limiter that has not reset. When Retry-After is present we wait the
+    // whole of it, and jitter only the ADDITIONAL second, which keeps clients from returning in lockstep without
+    // ever returning early.
+    //
+    // Clamped to an hour to match the clamp TinWeb applies to the header it sends, so a broken proxy inventing a
+    // Retry-After of a year cannot strand the outbox. A stated wait LONGER than the old 5-minute cap is honoured
+    // rather than capped at 5 minutes: coming back before the server said to only earns another refusal.
+    scheduleBackoff(attempts, serverRetryAfterMs = null) {
         if (this.backoffTimer)
             clearTimeout(this.backoffTimer);
-        const cap = Math.min(5000 * Math.pow(2, attempts), 300000); // exponential 5s·2^n capped 5min, full jitter
-        this.backoffTimer = setTimeout(() => this.drain(), Math.floor(Math.random() * cap));
+        let delay;
+        if (serverRetryAfterMs && serverRetryAfterMs > 0) {
+            delay = Math.min(serverRetryAfterMs, 3600000) + Math.floor(Math.random() * 1000); // obey the server, plus <=1s of de-sync jitter
+            this.retryNotBefore = Date.now() + delay; // Added: binds the reconnect and periodic drains too, not just this timer
+        }
+        else {
+            const cap = Math.min(5000 * Math.pow(2, attempts), 300000); // exponential 5s·2^n capped 5min, full jitter
+            delay = Math.floor(Math.random() * cap);
+            this.retryNotBefore = 0; // a guessed backoff never blocks another trigger — only a server instruction does
+        }
+        // This timer IS the scheduled resume, so it lifts its own gate rather than being held by it — a millisecond of
+        // timer skew must not turn the wait into a permanent stall.
+        this.backoffTimer = setTimeout(() => { this.retryNotBefore = 0; this.drain(); }, delay);
     }
     //================ Sync-tray actions ================
     async retryOp(opId) {
@@ -2624,6 +3094,7 @@ class OfflineService {
         op.status = 'pending';
         op.attempts = 0;
         op.enqueuedAt = Date.now();
+        this.retryNotBefore = 0; // Added: a deliberate user retry clears any server-stated wait, exactly as it clears attempts
         await this.outbox.put(op);
         this.drain();
     }
@@ -2644,6 +3115,7 @@ class OfflineService {
         op.status = 'pending';
         op.attempts = 0;
         op.enqueuedAt = Date.now();
+        this.retryNotBefore = 0; // Added: same as retryOp — an informed, explicit choice is not an automatic drain
         await this.outbox.put(op);
         this.drain();
     }
@@ -2661,13 +3133,13 @@ class OfflineService {
     hash(v) { let h = 0; for (let i = 0; i < v.length; i++)
         h = ((h << 5) - h + v.charCodeAt(i)) | 0; return Math.abs(h).toString(36); }
     sanitize(v) { return v.replace(/[^a-zA-Z0-9_-]/g, '_').toLowerCase(); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OfflineService, deps: [{ token: HttpService }, { token: AuthService }, { token: StorageService }, { token: MessageService }, { token: SignalRService }, { token: i0.NgZone }, { token: TIN_SPA_RUNTIME_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OfflineService, deps: [{ token: HttpService }, { token: AuthService }, { token: StorageService }, { token: MessageService }, { token: ApiErrorService }, { token: SignalRService }, { token: i0.NgZone }, { token: TIN_SPA_RUNTIME_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OfflineService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OfflineService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: HttpService }, { type: AuthService }, { type: StorageService }, { type: MessageService }, { type: SignalRService }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: HttpService }, { type: AuthService }, { type: StorageService }, { type: MessageService }, { type: ApiErrorService }, { type: SignalRService }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -3239,6 +3711,7 @@ class DataServiceLib {
         this.capPayrollRuns = new CapItem;
         this.capCommissionConfigs = new CapItem; // Changed: Added for Commission module
         this.capCommissionEntries = new CapItem; // Changed: Added for Commission module
+        this.capCommissionStatement = new CapItem; // Added (Phase 6): Driver Commission Statement (cap86)
         this.capSalaryAdvances = new CapItem; // Changed: Added for Salary Advance module
         this.capOvertimeEntries = new CapItem; // Changed: Added for Overtime module
         this.capApprovals = new CapItem;
@@ -4254,7 +4727,7 @@ class DataServiceLib {
         this.capPayroll.display = "Payroll";
         this.capPayroll.moduleKey = "payroll"; // Added (Setup v3)
         this.capPayroll.icon = "payments";
-        this.capPayroll.capSubItems = [this.capPayrollDashboard, this.capSalaryStructures, this.capStatutoryDeductions, this.capPayrollRuns, this.capCommissionConfigs, this.capCommissionEntries, this.capSalaryAdvances, this.capOvertimeEntries]; // Changed: Added payroll dashboard as first item
+        this.capPayroll.capSubItems = [this.capPayrollDashboard, this.capSalaryStructures, this.capStatutoryDeductions, this.capPayrollRuns, this.capCommissionConfigs, this.capCommissionEntries, this.capCommissionStatement, this.capSalaryAdvances, this.capOvertimeEntries]; // Changed (Phase 6): commission statement sits directly under the entries it explains
         this.capPayrollDashboard.name = "cap72"; // Changed: Reuses module cap number for dashboard visibility
         this.capPayrollDashboard.display = "Dashboard";
         this.capPayrollDashboard.link = "home/payroll/dashboard";
@@ -4281,6 +4754,14 @@ class DataServiceLib {
         this.capCommissionEntries.display = "Commission Entries";
         this.capCommissionEntries.link = "home/payroll/commission-entries";
         this.capCommissionEntries.icon = "request_quote";
+        // Added (Phase 6): the Driver Commission Statement — cap86, its own capability rather than cap77's, because
+        // it is the surface that GENERATES a period as well as reporting it, and because reading a whole period's
+        // commission across every driver is a wider grant than working one entry. Deliberately in NO role template:
+        // it is registered and reachable, and someone has to grant it on purpose.
+        this.capCommissionStatement.name = "cap86";
+        this.capCommissionStatement.display = "Commission Statement";
+        this.capCommissionStatement.link = "home/payroll/commission-statement";
+        this.capCommissionStatement.icon = "receipt_long";
         // Changed: Added Salary Advances sidebar item
         this.capSalaryAdvances.name = "cap78";
         this.capSalaryAdvances.display = "Salary Advances";
@@ -5863,7 +6344,12 @@ class InventoryService {
             heroField: 'requisitionID'
         };
         this.requisitionEditButton = { name: 'edit', dialog: true, action: { url: 'requisitions?action=edit', method: 'post' } };
-        this.requisitionSubmitButton = { name: 'submit', display: 'Submit Requisition', icon: { name: 'send', color: 'primary' }, action: { url: 'requisitions?action=submit', method: 'post', successMessage: 'Requisition Submitted' }, confirm: { message: 'Submit this requisition for approval?' }, visible: (row) => row.status === 0 };
+        // Changed: `inDialog: true` added. This button lives ONLY in requisitionDetailsConfig.buttons and is absent
+        // from the table's own buttons, and Core.setupButtons filters a details dialog's extraButtons on exactly that
+        // flag — so it rendered NOWHERE. Its two siblings below both carry it. Colour changed from the Material palette
+        // name 'primary', which ButtonService.getButtonColor puts verbatim into [style.color] where it computes to the
+        // inherited grey, to the house CSS keyword 'blue'.
+        this.requisitionSubmitButton = { name: 'submit', display: 'Submit Requisition', icon: { name: 'send', color: 'blue' }, inDialog: true, action: { url: 'requisitions?action=submit', method: 'post', successMessage: 'Requisition Submitted' }, confirm: { message: 'Submit this requisition for approval?' }, visible: (row) => row.status === 0 };
         this.requisitionIssueButton = { name: 'issue', display: 'Issue Items', icon: { name: 'check', color: 'green' }, inDialog: true, action: { url: 'requisitions?action=issue', method: 'post', successMessage: 'Items Issued' }, confirm: { message: 'Issue items for this requisition?' }, visible: (row) => row.pendingApproval === false && row.status === 0 };
         this.requisitionCancelButton = { name: 'cancel', display: 'Cancel Request', icon: { name: 'close', color: 'red' }, inDialog: true, action: { url: 'requisitions?action=cancel', method: 'post', successMessage: 'Requisition Cancelled' }, confirm: { message: 'Cancel this requisition?' }, visible: (row) => row.status === 0 };
         this.requisitionDetailsConfig = {
@@ -6676,6 +7162,54 @@ class AccountingService {
                 searchAction: { url: 'invoices/search?action=statement-search', method: 'post' }
             }
         };
+        //--------------------------Open-item statement (customer / supplier)-------------------------
+        // Added: the open-item statement was hand-written markup on the page (its own flex row of totals and its own
+        // <table>). These configs move it onto spa-tiles + spa-table so it looks and behaves like every other page.
+        // The figures the API returns are unrounded sums, hence format: 'money' on every tile.
+        // Added: headline figures for the customer open-item statement
+        this.customerStatementTileConfig = {
+            tiles: [
+                { name: 'totalInvoiced', alias: 'Total Invoiced', icon: 'receipt_long', color: '#2196f3', format: 'money', info: 'Everything invoiced in the period' },
+                { name: 'totalPaid', alias: 'Total Paid', icon: 'payments', color: '#4CAF50', format: 'money', info: 'Receipts allocated against those invoices' },
+                { name: 'totalCredited', alias: 'Total Credited', icon: 'undo', color: '#FF9800', format: 'money', info: 'Credit notes raised in the period' },
+                { name: 'totalOutstanding', alias: 'Total Outstanding', icon: 'account_balance_wallet', format: 'money', color: x => (x?.totalOutstanding > 0 ? '#F44336' : '#4CAF50'), info: 'What the customer still owes' } // red while owing, green once settled — the colour the old hand-written card carried
+            ]
+        };
+        // Added: headline figures for the supplier open-item statement (no credit notes on the purchase side)
+        this.supplierStatementTileConfig = {
+            tiles: [
+                { name: 'totalPurchased', alias: 'Total Purchased', icon: 'shopping_cart', color: '#2196f3', format: 'money', info: 'Everything purchased on credit in the period' },
+                { name: 'totalPaid', alias: 'Total Paid', icon: 'payments', color: '#4CAF50', format: 'money', info: 'Payments made against those purchases' },
+                { name: 'totalOutstanding', alias: 'Total Outstanding', icon: 'account_balance_wallet', format: 'money', color: x => (x?.totalOutstanding > 0 ? '#F44336' : '#4CAF50'), info: 'What is still owed to the supplier' }
+            ]
+        };
+        // Added: the statement lines themselves. Customer and supplier lines have the SAME shape, so one config serves
+        // both — the page clones it per tab so the two grids never share mutable state.
+        this.statementLinesTableConfig = {
+            showFilter: true,
+            flatButtons: true,
+            noDataMessage: 'No open items for the selected period',
+            minColumns: ['date', 'reference', 'outstanding'],
+            columns: [
+                { name: 'date', type: 'date', alias: 'Date' },
+                { name: 'reference', type: 'text', alias: 'Reference' },
+                { name: 'type', type: 'text', alias: 'Type' },
+                { name: 'total', type: 'money', alias: 'Total' },
+                { name: 'paid', type: 'money', alias: 'Paid' },
+                { name: 'outstanding', type: 'money', alias: 'Outstanding' },
+                { name: 'status', type: 'chip', alias: 'Status', // Changed: a chip, NOT type 'select' — a select column renders an editable dropdown, and a statement is read-only
+                    colors: [
+                        { name: '#A5D6A7', condition: x => x.status == 'Paid' },
+                        { name: '#FFD54F', condition: x => x.status == 'Paying' },
+                        { name: '#90CAF9', condition: x => x.status == 'Submitted' },
+                        { name: '#CE93D8', condition: x => x.status == 'Applied' },
+                        { name: '#9E9E9E', condition: x => x.status == 'Written Off' }
+                    ]
+                },
+                { name: 'agingBucket', type: 'text', alias: 'Aging' }
+            ],
+            buttons: []
+        };
         //--------------------------Tax Rates-------------------------
         // Changed: Tax Rate form configuration for VAT management
         this.taxRateFormConfig = {
@@ -8384,7 +8918,10 @@ class SalesService {
             heroField: 'salesOrderID'
         };
         this.salesOrderEditButton = { name: 'edit', dialog: true, action: { url: 'salesorders?action=edit', method: 'post' } };
-        this.salesOrderConfirmButton = { name: 'confirm', display: 'Confirm Order', icon: { name: 'check_circle', color: 'primary' }, inDialog: true, action: { url: 'salesorders?action=confirm', method: 'post', successMessage: 'Order Confirmed' }, confirm: { message: 'Confirm this order?' }, visible: (row) => row.status === 0 };
+        // Changed: colour was the Material palette name 'primary', which getButtonColor puts verbatim into
+        // [style.color] and which therefore computed to the inherited grey. 'blue' is the house CSS keyword, and it
+        // keeps 'green' meaning the terminal step (Mark Delivered, below).
+        this.salesOrderConfirmButton = { name: 'confirm', display: 'Confirm Order', icon: { name: 'check_circle', color: 'blue' }, inDialog: true, action: { url: 'salesorders?action=confirm', method: 'post', successMessage: 'Order Confirmed' }, confirm: { message: 'Confirm this order?' }, visible: (row) => row.status === 0 };
         this.salesOrderDeliverButton = { name: 'deliver', display: 'Mark Delivered', icon: { name: 'local_shipping', color: 'green' }, inDialog: true, action: { url: 'salesorders?action=deliver', method: 'post', successMessage: 'Order Delivered' }, confirm: { message: 'Mark this order as delivered?' }, visible: (row) => row.status === 1 };
         this.salesOrderDetailsConfig = {
             formConfig: this.salesOrderFormConfig,
@@ -8567,7 +9104,7 @@ class SalesService {
             heroField: 'saleID',
             stepConfig: this.saleStepConfig,
             buttons: [
-                { name: 'complete', display: 'Complete Sale', color: 'primary', inDialog: true, action: { url: 'sales?action=complete', method: 'post' }, confirm: { message: 'Complete this sale? This will reduce inventory and create accounting entries.' }, visible: x => x.timing === 0 && x.paymentStatus !== 1 },
+                { name: 'complete', display: 'Complete Sale', color: 'green', inDialog: true, action: { url: 'sales?action=complete', method: 'post' }, confirm: { message: 'Complete this sale? This will reduce inventory and create accounting entries.' }, visible: x => x.timing === 0 && x.paymentStatus !== 1 },
                 this.saleRecordPaymentButton
             ]
         };
@@ -9631,35 +10168,133 @@ class PayrollService {
             formConfig: this.employeeSalaryComponentFormConfig,
         };
         //--------------------------Commission Configs-------------------------
+        // Added (Phase 5): a commission rule is a parent with tier children, which is the two-step create shape —
+        // the create dialog captures the rule itself, then the details dialog opens with the Tiers tab. Extracted
+        // before detailsConfig so it can be referenced without a forward reference.
+        this.editCommissionConfigButton = { name: 'edit', dialog: true, inDialog: true, action: { url: 'commissionconfigs?action=edit', method: 'post' } };
         this.commissionConfigFormConfig = {
             security: { allow: [this.dataService.capCommissionConfigs] }, // Added: gate commission config form by commission configs cap
             title: 'Commission Config',
+            // Added (Phase 5): the two rules that make a config silently earn nothing, said out loud rather than left to
+            // be discovered when a period pays 0.00. Both mirror refusals CommissionRuleEvaluator already makes.
+            alertConfig: {
+                compact: true,
+                messages: [
+                    { message: 'This rule is scoped to nobody — set an employee, a position, or tick Applies To All Employees, or it can never resolve', type: 'critical',
+                        visible: (x) => !!x.commissionConfigID && !x.employeeID && !x.positionID && !x.appliesToAllEmployees
+                    },
+                    { message: 'Per-distance rates read trip mileage, which is only captured when Tyre Management is enabled — this rule will compute 0.00 until it is', type: 'warn',
+                        visible: (x) => x.basis === 4
+                    },
+                ]
+            },
             fields: [
-                { name: 'employeeID', type: 'select', alias: 'Employee', loadAction: { url: 'employees/list/x' }, required: true },
-                { name: 'name', type: 'text', required: true },
-                { name: 'metricType', alias: 'Metric Type', type: 'select', loadAction: { url: 'commissionconfigs/list/metric-type' }, required: true },
-                { name: 'rateType', alias: 'Rate Type', type: 'select', loadAction: { url: 'commissionconfigs/list/rate-type' }, required: true },
-                { name: 'rate', type: 'number', required: true },
+                { name: 'name', type: 'text', required: true, hint: 'How this arrangement is referred to, e.g. "Drivers 5% of load value"' },
                 { name: 'isActive', type: 'checkbox', alias: 'Active', defaultValue: true },
+                // Changed (Phase 5): who the rule resolves to. ResolveRules is a ladder — employee rules win, then position
+                // rules, then the tenant-wide rule — and the levels do NOT stack, so only one level is offered at a time.
+                { name: 'scope', type: 'section', alias: 'Scope', collapseOnView: true },
+                { name: 'employeeID', type: 'select', alias: 'Employee', section: 'scope', nullable: true, loadAction: { url: 'employees/list/x' }, requiredCondition: (x) => !x.positionID && !x.appliesToAllEmployees, hint: 'Leave empty to scope by position or across the whole company' },
+                { name: 'positionID', type: 'select', alias: 'Position', section: 'scope', nullable: true, loadAction: { url: 'positions/list/x' }, hidden: (x) => x.employeeID > 0, hint: 'Everyone holding this position, e.g. every Driver' },
+                { name: 'appliesToAllEmployees', type: 'checkbox', alias: 'Applies To All Employees', section: 'scope', hidden: (x) => x.employeeID > 0 || x.positionID > 0 },
+                { name: 'priority', type: 'number', alias: 'Priority', section: 'scope', defaultValue: 0, hint: 'Higher wins when two rules resolve at the same level' },
+                { name: 'customerID', type: 'select', alias: 'Only For Customer', section: 'scope', nullable: true, loadAction: { url: 'customers/list/x' }, hideOnCreate: true },
+                { name: 'serviceItemID', type: 'select', alias: 'Only For Service', section: 'scope', nullable: true, loadAction: { url: 'serviceitems/list/x' }, hideOnCreate: true },
+                { name: 'selfSourcedOnly', type: 'checkbox', alias: 'Self Sourced Loads Only', section: 'scope', hidden: (x) => x.basis === 1 || x.basis === 4, infoMessage: 'Pays the person recorded as Sourced By on the load rather than the driver who carried it. Load-level bases only — a trip has no sourcer.' }, // Changed (Phase 6, browser pass): the hyphen is gone on purpose — every alias is piped through Core.camelToWords, which inserts a space before each capital, so "Self-Sourced" rendered as "Self- Sourced" on screen
+                // Changed (Phase 5): Basis is what the engine actually measures. MetricType below is the superseded column,
+                // kept in step so old rows stay coherent, but nothing computes from it any more.
+                { name: 'rateAndTiers', type: 'section', alias: 'Rate & Tiers' },
+                { name: 'basis', type: 'select', alias: 'Basis', section: 'rateAndTiers', required: true, defaultValue: 1, loadAction: { url: 'commissionconfigs/list/basis' },
+                    onSelectChange: (value, data) => {
+                        data.metricType = (value === 2 || value === 5) ? 2 : 1; // keep the superseded MetricType consistent with Basis
+                        if (value === 1 || value === 4) {
+                            data.earnEvent = 1;
+                            data.selfSourcedOnly = false;
+                        } // trip-level bases: the engine skips any other earn event, and has no sourcer to pay
+                    }
+                },
+                { name: 'rateType', alias: 'Rate Type', type: 'select', section: 'rateAndTiers', loadAction: { url: 'commissionconfigs/list/rate-type' }, required: true },
+                { name: 'rate', type: 'number', alias: 'Rate', section: 'rateAndTiers', required: true, suffix: '%', hidden: (x) => x.rateType !== 2, hint: 'Percentage of the measured value. Used for any part of the metric no tier band covers.' },
+                { name: 'rate', type: 'number', alias: 'Rate', section: 'rateAndTiers', required: true, hidden: (x) => x.rateType === 2, hint: 'Amount per unit measured. Used for any part of the metric no tier band covers.' },
+                { name: 'metricType', type: 'select', hidden: true, defaultValue: 1 }, // superseded by Basis; posted only so existing rows keep a valid legacy value
+                // Changed (Phase 5): hidden on create because a money input cannot post "empty" — it posts 0, and a Maximum
+                // of 0 caps every period to nothing. Set deliberately on the saved rule instead of by accident on a new one.
+                { name: 'limits', type: 'section', alias: 'Limits', collapseOnView: true, hideOnCreate: true },
+                { name: 'minimumAmount', type: 'money', alias: 'Minimum Per Period', section: 'limits', hideOnCreate: true, clearContent: true, hint: 'Guaranteed floor. Leave empty for none.' },
+                { name: 'maximumAmount', type: 'money', alias: 'Maximum Per Period', section: 'limits', hideOnCreate: true, clearContent: true, hint: 'Cap. Leave empty for uncapped — a cap of 0 pays nothing.' },
+                // Changed (Phase 5): same reason — a date input posts today, and an Effective From of today silently drops
+                // every load earned earlier in the same month.
+                { name: 'timing', type: 'section', alias: 'Timing', collapseOnView: true },
+                { name: 'earnEvent', alias: 'Earned When', type: 'select', section: 'timing', required: true, defaultValue: 1, loadAction: { url: 'commissionconfigs/list/earn-event' }, readonlyCondition: (x) => x.basis === 1 || x.basis === 4, hint: 'Trip-level bases earn on completion only' },
+                { name: 'effectiveFrom', type: 'date', alias: 'Effective From', section: 'timing', hideOnCreate: true, clearContent: true, hint: 'Empty means the rule has always applied. Work before this date is excluded.' },
+                { name: 'effectiveTo', type: 'date', alias: 'Effective To', section: 'timing', hideOnCreate: true, clearContent: true, hint: 'Empty means the rule is open-ended' },
             ],
             loadAction: { url: 'commissionconfigs/id' },
             heroField: 'commissionConfigID',
             includeAudit: true,
         };
+        //--------------------------Commission Config Tiers (child of CommissionConfig)-------------------------
+        this.commissionConfigTierFormConfig = {
+            security: { allow: [this.dataService.capCommissionConfigs] }, // Added: a tier is gated by its parent rule's cap
+            title: 'Tier Band',
+            fixedTitle: true,
+            fields: [
+                { name: 'thresholdFrom', alias: 'From', type: 'number', required: true, defaultValue: 0, hint: 'Metric value where this band starts' },
+                { name: 'thresholdTo', alias: 'To', type: 'number', hint: 'Leave as 0 for the top, open-ended band' },
+                { name: 'rate', type: 'number', alias: 'Rate', required: true, hint: 'Applied only to the portion of the metric inside this band' },
+            ],
+            loadAction: { url: 'commissionconfigtiers/id' },
+            heroField: 'commissionConfigTierID',
+        };
+        this.commissionConfigTiersTableConfig = {
+            tabTitle: 'Tiers',
+            showFilter: false,
+            elevation: 'none',
+            flatButtons: true,
+            noDataMessage: 'No bands — the flat rate on the rule applies to the whole metric',
+            columns: [
+                { name: 'thresholdFrom', type: 'number', alias: 'From' },
+                { name: 'thresholdTo', type: 'number', alias: 'To',
+                    icons: [{ name: 'all_inclusive', color: 'grey', tip: 'Open-ended top band', condition: (row) => row?.isOpenEnded }]
+                },
+                { name: 'rate', type: 'number', alias: 'Rate' },
+            ],
+            buttons: [
+                { name: 'create', display: 'Add Band', dialog: true, action: { url: 'commissionconfigtiers?action=create', method: 'post' } },
+                { name: 'edit', dialog: true, action: { url: 'commissionconfigtiers?action=edit', method: 'post' } },
+                { name: 'delete', dialog: true, action: { url: 'commissionconfigtiers?action=delete', method: 'post' } },
+            ],
+            loadAction: { url: 'commissionconfigtiers/x/x' }, loadCriteria: 'config', loadIDField: 'commissionConfigID',
+            formConfig: this.commissionConfigTierFormConfig,
+        };
+        // Added (Phase 5): defined AFTER the tiers table and BEFORE the view/create buttons, per the two-step create pattern
+        this.commissionConfigDetailsConfig = {
+            formConfig: this.commissionConfigFormConfig,
+            heroField: 'commissionConfigID',
+            buttons: [this.editCommissionConfigButton],
+            tableConfigs: [this.commissionConfigTiersTableConfig],
+        };
+        this.viewCommissionConfigButton = { name: 'view', dialog: true, detailsConfig: this.commissionConfigDetailsConfig };
+        this.createCommissionConfigButton = { name: 'create', display: 'Create', dialog: true, onSuccessButton: this.viewCommissionConfigButton, action: { url: 'commissionconfigs?action=create', method: 'post' } };
         this.commissionConfigsTableConfig = {
             showFilter: true,
             flatButtons: true,
-            minColumns: ['employeeName', 'name', 'rate'],
+            minColumns: ['scopeName', 'name', 'rate'],
             columns: [
-                { name: 'employeeName', type: 'text', alias: 'Employee' },
+                { name: 'scopeName', type: 'text', alias: 'Applies To', // Changed (Phase 5): employeeName is blank on a position or company-wide rule, which read as an unassigned rule
+                    colors: [{ name: 'red', condition: (row) => !row?.employeeID && !row?.positionID && !row?.appliesToAllEmployees }]
+                },
                 { name: 'name', type: 'text' },
-                { name: 'metricTypeName', type: 'text', alias: 'Metric Type' },
+                { name: 'basisName', type: 'text', alias: 'Basis' }, // Changed (Phase 5): Basis replaced MetricType as what the engine measures
                 { name: 'rateTypeName', type: 'text', alias: 'Rate Type' },
                 { name: 'rate', type: 'text', alias: 'Rate' },
+                { name: 'tierCount', type: 'text', alias: 'Tiers' },
+                { name: 'earnEventName', type: 'text', alias: 'Earned When' },
                 { name: 'isActive', type: 'checkbox', alias: 'Active' },
             ],
             buttons: [
-                { name: 'create', display: 'Create', dialog: true, action: { url: 'commissionconfigs?action=create', method: 'post' } },
+                this.createCommissionConfigButton,
+                this.viewCommissionConfigButton,
                 { name: 'edit', dialog: true, action: { url: 'commissionconfigs?action=edit', method: 'post' } },
                 { name: 'delete', dialog: true, action: { url: 'commissionconfigs?action=delete', method: 'post' } },
             ],
@@ -9676,13 +10311,15 @@ class PayrollService {
             flatButtons: true,
             columns: [
                 { name: 'name', type: 'text' },
-                { name: 'metricTypeName', type: 'text', alias: 'Metric Type' },
+                { name: 'basisName', type: 'text', alias: 'Basis' }, // Changed (Phase 5): matches the main list
                 { name: 'rateTypeName', type: 'text', alias: 'Rate Type' },
                 { name: 'rate', type: 'text', alias: 'Rate' },
+                { name: 'tierCount', type: 'text', alias: 'Tiers' },
                 { name: 'isActive', type: 'checkbox', alias: 'Active' },
             ],
             buttons: [
-                { name: 'create', display: 'Create', dialog: true, action: { url: 'commissionconfigs?action=create', method: 'post' } },
+                { name: 'create', display: 'Create', dialog: true, onSuccessButton: this.viewCommissionConfigButton, action: { url: 'commissionconfigs?action=create', method: 'post' } }, // Changed (Phase 5): the tiers tab is only reachable through the details dialog, so a rule created here opens into it too
+                this.viewCommissionConfigButton,
                 { name: 'edit', dialog: true, action: { url: 'commissionconfigs?action=edit', method: 'post' } },
                 { name: 'delete', dialog: true, action: { url: 'commissionconfigs?action=delete', method: 'post' } },
             ],
@@ -9690,15 +10327,30 @@ class PayrollService {
             formConfig: this.commissionConfigFormConfig,
         };
         //--------------------------Commission Entries-------------------------
+        // Added (Phase 5): the approval gate, bound to the status CommissionEntriesController exposes
+        // (1=Draft, 2=Approved, 3=Paid, 4=Reversed). Only Approved entries are payable — Draft is a proposal and
+        // Paid is settled — and the server refuses BOTH transitions on an entry that has reached a payslip line,
+        // so isPaid is tested here too rather than trusting status alone.
+        // Changed (Phase 6, browser pass): the colours were 'primary' and 'warn' — Angular Material PALETTE names.
+        // ButtonService.getButtonColor returns button.icon.color verbatim into [style.color], which needs a CSS colour,
+        // so both computed to the inherited grey rgb(68,71,78) while edit rendered rgb(64,80,181) and delete rgb(244,67,54).
+        // The button that authorises money was visually indistinguishable from every other icon in the row.
+        // Added (Phase 6): `inDialog` is what puts a button in the details dialog's footer — Core.setupButtons filters
+        // extraButtons on it, so without it the two gates existed on the row and vanished the moment the entry was
+        // opened to read its breakdown. It is ignored by the row renderer, so one object serves both places and the
+        // gate cannot drift between them.
+        this.approveCommissionEntryButton = { name: 'approve', display: 'Approve', inDialog: true, icon: { name: 'check_circle', color: 'green' }, action: { url: 'commissionentries?action=approve', method: 'post', successMessage: 'Approved' }, confirm: { message: 'Approve this commission entry so it can be paid on a payslip?' }, visible: (row) => row?.status === 1 && !row?.isPaid };
+        this.returnCommissionEntryButton = { name: 'return', display: 'Return to Draft', inDialog: true, icon: { name: 'undo', color: 'orange' }, action: { url: 'commissionentries?action=return', method: 'post', successMessage: 'Returned to Draft' }, confirm: { message: 'Return this entry to Draft? It will not be picked up by a payroll run until it is approved again.' }, visible: (row) => row?.status === 2 && !row?.isPaid };
         this.commissionEntryFormConfig = {
             security: { allow: [this.dataService.capCommissionEntries] }, // Added: gate commission entry form by commission entries cap
             title: 'Commission Entry',
             fields: [
-                { name: 'employeeID', type: 'select', alias: 'Employee', loadAction: { url: 'employees/list/x' }, required: true },
-                { name: 'periodYear', alias: 'Year', type: 'number', required: true },
-                { name: 'periodMonth', alias: 'Month', type: 'number', required: true },
-                { name: 'metricValue', alias: 'Metric Value', type: 'number', required: true },
-                { name: 'commissionAmount', alias: 'Commission Amount', type: 'money', required: true },
+                { name: 'employeeID', type: 'select', alias: 'Employee', loadAction: { url: 'employees/list/x' }, required: true, readonlyCondition: (x) => x.isPaid },
+                { name: 'periodYear', alias: 'Year', type: 'number', required: true, readonlyCondition: (x) => x.isPaid },
+                { name: 'periodMonth', alias: 'Month', type: 'number', required: true, readonlyCondition: (x) => x.isPaid },
+                { name: 'metricValue', alias: 'Metric Value', type: 'number', required: true, readonlyCondition: (x) => x.isPaid },
+                { name: 'commissionAmount', alias: 'Commission Amount', type: 'money', required: true, readonlyCondition: (x) => x.isPaid }, // Changed (Phase 5): a settled figure is history — the payslip line it paid is already out
+                { name: 'statusName', alias: 'Status', type: 'text', readonly: true, hideOnCreate: true }, // Added (Phase 5): the gate itself, so an entry that pays nothing reads as Draft rather than as a bug
                 // Changed: sectioned — who earned what for which period is the entry; where it came from is provenance,
                 // read only when a figure is being queried
                 { name: 'source', type: 'section', alias: 'Source & Description', collapseOnView: true },
@@ -9710,23 +10362,70 @@ class PayrollService {
             heroField: 'commissionEntryID',
             includeAudit: true,
         };
+        //--------------------------Commission Entry Lines (child of CommissionEntry)-------------------------
+        // Added (Phase 6): the breakdown that makes a total explainable. Deliberately has NO buttons — a line is
+        // generated evidence and the header amount is the sum of these rows, so hand-editing one would make the
+        // breakdown disagree with what payroll actually paid. CommissionEntryLinesController refuses the writes
+        // server-side too; this is the same refusal said in the UI rather than only when a POST comes back.
+        this.commissionEntryLinesTableConfig = {
+            tabTitle: 'Lines',
+            showFilter: false,
+            elevation: 'none',
+            flatButtons: true,
+            noDataMessage: 'No breakdown — this entry was entered by hand rather than generated from trips',
+            columns: [
+                { name: 'eventDate', type: 'date', alias: 'Earned On' },
+                { name: 'sourceDescription', type: 'text', alias: 'Source', // Changed (Phase 6): an adjustment line is the floor/cap correction, not a trip — it has no source to open
+                    icons: [{ name: 'tune', color: 'grey', tip: 'Adjustment — the rule\'s minimum or maximum moved the total, this is the difference', condition: (row) => row?.isAdjustment }]
+                },
+                { name: 'sourceType', type: 'text', alias: 'Type' },
+                { name: 'metricValue', type: 'text', alias: 'Measured' },
+                { name: 'rateApplied', type: 'text', alias: 'Rate' },
+                { name: 'amount', type: 'money', alias: 'Amount' },
+            ],
+            buttons: [],
+            loadAction: { url: 'commissionentrylines/x/x' }, loadCriteria: 'entry', loadIDField: 'commissionEntryID',
+        };
+        // Added (Phase 6): defined AFTER the lines table and BEFORE the view button, per the two-step create pattern.
+        // The approve/return buttons are the SAME objects the table row uses, so the gate cannot drift between the
+        // two places it is offered — both read status and isPaid, and the server refuses both on a settled entry.
+        this.commissionEntryDetailsConfig = {
+            formConfig: this.commissionEntryFormConfig,
+            heroField: 'commissionEntryID',
+            buttons: [this.approveCommissionEntryButton, this.returnCommissionEntryButton],
+            tableConfigs: [this.commissionEntryLinesTableConfig],
+        };
+        this.viewCommissionEntryButton = { name: 'view', dialog: true, detailsConfig: this.commissionEntryDetailsConfig };
         this.commissionEntriesTableConfig = {
             showFilter: true,
             flatButtons: true,
-            minColumns: ['employeeName', 'commissionAmount', 'periodYear'],
+            minColumns: ['employeeName', 'commissionAmount', 'statusName'],
             columns: [
                 { name: 'employeeName', type: 'text', alias: 'Employee' },
                 { name: 'periodYear', type: 'text', alias: 'Year' },
                 { name: 'periodMonth', type: 'text', alias: 'Month' },
                 { name: 'metricValue', type: 'text', alias: 'Metric Value' },
-                { name: 'commissionAmount', type: 'money', alias: 'Amount' },
+                { name: 'commissionAmount', type: 'money', alias: 'Amount', // Changed (Phase 5): a 0.00 entry is legitimate (per-km with mileage off, or a clawback netting out) but it must never sit silently
+                    icons: [{ name: 'error_outline', color: 'orange', tip: 'This entry computed to nothing. Per-distance rules read trip mileage, which needs Tyre Management enabled; a credit-settled invoice is also not treated as paid.', condition: (row) => row?.commissionAmount === 0 }]
+                },
+                { name: 'statusName', type: 'text', alias: 'Status', // Changed (Phase 5): the approval gate — a Draft entry is invisible to payroll, which otherwise reads as commission being ignored
+                    colors: [
+                        { name: 'grey', condition: (row) => row?.status === 1 },
+                        { name: 'green', condition: (row) => row?.status === 2 },
+                        { name: 'red', condition: (row) => row?.status === 4 },
+                    ]
+                },
+                { name: 'isPaid', type: 'checkbox', alias: 'Paid' }, // Changed (Phase 5): settled on a payslip line and no longer changeable, by either side
                 { name: 'description', type: 'text' },
                 { name: 'sourceType', type: 'text', alias: 'Source' },
             ],
             buttons: [
                 { name: 'create', display: 'Create', dialog: true, action: { url: 'commissionentries?action=create', method: 'post' } },
-                { name: 'edit', dialog: true, action: { url: 'commissionentries?action=edit', method: 'post' } },
-                { name: 'delete', dialog: true, action: { url: 'commissionentries?action=delete', method: 'post' } },
+                this.viewCommissionEntryButton, // Added (Phase 6): the only way to the breakdown — a figure with no reachable explanation is what this phase exists to remove
+                this.approveCommissionEntryButton,
+                this.returnCommissionEntryButton,
+                { name: 'edit', dialog: true, action: { url: 'commissionentries?action=edit', method: 'post' }, visible: (row) => !row?.isPaid }, // Changed (Phase 5): mirrors the SalaryAdvance guard — a settled entry is not editable
+                { name: 'delete', dialog: true, action: { url: 'commissionentries?action=delete', method: 'post' }, visible: (row) => !row?.isPaid }, // Changed (Phase 5): deleting a paid entry would orphan the payslip line that settled it
             ],
             loadAction: { url: 'commissionentries/all/x' },
             formConfig: this.commissionEntryFormConfig,
@@ -9744,14 +10443,21 @@ class PayrollService {
                 { name: 'periodYear', type: 'text', alias: 'Year' },
                 { name: 'periodMonth', type: 'text', alias: 'Month' },
                 { name: 'metricValue', type: 'text', alias: 'Metric Value' },
-                { name: 'commissionAmount', type: 'money', alias: 'Amount' },
+                { name: 'commissionAmount', type: 'money', alias: 'Amount',
+                    icons: [{ name: 'error_outline', color: 'orange', tip: 'This entry computed to nothing — see the entry for why', condition: (row) => row?.commissionAmount === 0 }]
+                },
+                { name: 'statusName', type: 'text', alias: 'Status' }, // Changed (Phase 5): same gate as the main list — Draft never reaches a payslip
+                { name: 'isPaid', type: 'checkbox', alias: 'Paid' },
                 { name: 'description', type: 'text' },
                 { name: 'sourceType', type: 'text', alias: 'Source' },
             ],
             buttons: [
                 { name: 'create', display: 'Create', dialog: true, action: { url: 'commissionentries?action=create', method: 'post' } },
-                { name: 'edit', dialog: true, action: { url: 'commissionentries?action=edit', method: 'post' } },
-                { name: 'delete', dialog: true, action: { url: 'commissionentries?action=delete', method: 'post' } },
+                this.viewCommissionEntryButton, // Added (Phase 6): same breakdown, reached from the employee's own history
+                this.approveCommissionEntryButton,
+                this.returnCommissionEntryButton,
+                { name: 'edit', dialog: true, action: { url: 'commissionentries?action=edit', method: 'post' }, visible: (row) => !row?.isPaid }, // Changed (Phase 5): mirrors the main list's settled guard
+                { name: 'delete', dialog: true, action: { url: 'commissionentries?action=delete', method: 'post' }, visible: (row) => !row?.isPaid },
             ],
             loadAction: { url: 'commissionentries/x/x' }, loadCriteria: 'employee', loadIDField: 'employeeID',
             formConfig: this.commissionEntryFormConfig,
@@ -9877,6 +10583,10 @@ class PayrollService {
         this.submitPayrollButton = { name: 'submit', display: 'Submit', inDialog: true, action: { url: 'payrollruns?action=submit', method: 'post' }, visible: (row) => row?.status === 1 }; // Changed: null-check row to prevent TypeError when dialog renders before row data loads
         this.postPayrollButton = { name: 'post', display: 'Post', inDialog: true, action: { url: 'payrollruns?action=post', method: 'post' }, visible: (row) => row?.status === 2 }; // Changed: null-check row
         this.markPaidButton = { name: 'paid', display: 'Mark Paid', inDialog: true, action: { url: 'payrollruns?action=paid', method: 'post' }, visible: (row) => row?.status === 3 }; // Changed: null-check row
+        // Added (Phase 5): recalculate is how a late commission approval or a corrected salary structure reaches an
+        // open run. DRAFT ONLY — the server refuses it at Submitted, Posted and Paid, and a button that exists and
+        // always fails teaches people the product is broken. It discards and rebuilds the run's payslips, hence the confirm.
+        this.recalculatePayrollButton = { name: 'recalculate', display: 'Recalculate', inDialog: true, action: { url: 'payrollruns?action=recalculate', method: 'post', successMessage: 'Payslips rebuilt' }, confirm: { message: 'Rebuild this run\'s payslips from current salary structures and approved commission? The existing payslips are discarded.' }, visible: (row) => row?.status === 1 };
         this.payrollRunFormConfig = {
             security: { allow: [this.dataService.capPayrollRuns] }, // Added: gate payroll run form by payroll runs cap
             title: 'Payroll Run',
@@ -9912,7 +10622,7 @@ class PayrollService {
                     detailsConfig: {
                         formConfig: this.payrollRunFormConfig,
                         heroField: 'payrollRunID',
-                        buttons: [this.submitPayrollButton, this.postPayrollButton, this.markPaidButton],
+                        buttons: [this.recalculatePayrollButton, this.submitPayrollButton, this.postPayrollButton, this.markPaidButton],
                         tableConfigs: [this.payslipsChildTableConfig],
                     }
                 },
@@ -10280,6 +10990,13 @@ class TabService {
         this.dataService.CallApi(transformedAction, '', quiet ? { silent: true } : undefined).subscribe({
             // Changed: an unsuccessful response used to leave the badge silently blank with nothing recording that it
             // had failed, so it was never asked for again. Both outcomes now report through onSettled.
+            //
+            // DELIBERATELY SILENT to the USER (WS-6 Phase 4 triage), and this one is already solved better than a
+            // dialog could solve it. A tab-count badge is decoration on a tab strip that may hold a dozen tabs, all
+            // counting at once against the same backend — converting would turn one outage into a dozen suppressed
+            // duplicates of a message about a number. The failure is not swallowed: onSettled(false) hands it to the
+            // host, which re-requests the badge. Reporting to the code that can FIX it beats reporting to a person
+            // who cannot.
             next: (apiResponse) => {
                 if (apiResponse.success) {
                     tabCounts[tabIndex] = apiResponse.data;
@@ -10527,6 +11244,12 @@ class NotificationsService {
     // Changed: Uncommented HTTP poll for initial count on login
     loadNotifications() {
         this.dataService.CallApi({ url: 'notifications/count/x' }).subscribe((apiResponse) => {
+            // DELIBERATELY SILENT (WS-6 Phase 4 triage). This is THE poll of the set, and the one where converting
+            // would be most obviously wrong: it runs on login, on signup, on every visit to the notifications page,
+            // on every push message forwarded from the service worker, and — the decisive one — from
+            // signalRService.onReconnected. A flapping SignalR connection reconnects repeatedly, so a dialog here
+            // would fire once per reconnect for as long as the network is unhappy. That is the dialog storm this
+            // whole channel exists to prevent, arriving from the inside. A stale unread badge costs the user nothing.
             if (apiResponse.success) {
                 this.notificationCount.next(apiResponse.data);
             }
@@ -10547,9 +11270,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 
 // Frontend service for Agent chat — state management, API calls, and SignalR subscriptions (renamed from AssistantService)
 class AgentService {
-    constructor(dataService, signalRService) {
+    constructor(dataService, signalRService, apiErrorService // Changed: injected for loadMessages and deleteConversation only
+    ) {
         this.dataService = dataService;
         this.signalRService = signalRService;
+        this.apiErrorService = apiErrorService;
         this.messages = new BehaviorSubject([]);
         this.conversations = new BehaviorSubject([]);
         this.typing = new BehaviorSubject(false);
@@ -10595,6 +11320,9 @@ class AgentService {
     // Load agent config (greeting + suggested questions) from backend
     loadConfig() {
         this.dataService.CallApi({ url: `agent/config/${this.appName}` }).subscribe(res => {
+            // DELIBERATELY SILENT (WS-6 Phase 4 triage). Greeting text and suggested-question chips are decoration
+            // on a chat window that works perfectly without them — the user can still type. Nothing they can see is
+            // wrong, so there is nothing truthful to tell them.
             if (res.success && res.data) {
                 this.greeting.next(res.data.greeting || '');
                 this.suggestedQuestions.next(res.data.suggestedQuestions || []);
@@ -10604,6 +11332,13 @@ class AgentService {
     // Load user's conversation list
     loadConversations() {
         this.dataService.CallApi({ url: 'agent/conversations' }).subscribe(res => {
+            // DELIBERATELY SILENT (WS-6 Phase 4 triage), and this was the closest call in the sweep — an empty
+            // thread list IS a false statement about the user's own history. It stays silent because of WHEN it
+            // fires: agent.component.ts:212 calls it from the widget's ngOnInit, so it runs on every app-shell load
+            // whether or not anyone opens the chat. Converting would put a dialog in front of every user of the app
+            // for a list none of them had asked to see. loadMessages() below — which only ever runs because someone
+            // clicked a specific thread — is the one that reports, and it covers the same outage the moment the
+            // list is actually used.
             if (res.success) {
                 this.conversations.next(res.data || []);
             }
@@ -10613,6 +11348,12 @@ class AgentService {
     loadMessages(conversationId) {
         this.currentConversationId.next(conversationId);
         this.dataService.CallApi({ url: `agent/conversations/${conversationId}/messages` }).subscribe(res => {
+            // CONVERTED (WS-6 Phase 4 triage). Unlike everything else in this service, this only runs because the
+            // user clicked a named conversation in the switcher. Failing left the thread pane holding the PREVIOUS
+            // conversation's messages under the new conversation's id — so the next thing they typed would have
+            // been sent into a thread they were not looking at.
+            if (!res.success)
+                this.apiErrorService.presentAppFailure(res, 'load', `agent/conversations/${conversationId}/messages`);
             if (res.success) {
                 this.messages.next((res.data || []).map((m) => ({
                     conversationId: m.conversationID,
@@ -10783,6 +11524,10 @@ class AgentService {
         this.messages.next([]);
         this.currentConversationId.next(null);
         this.dataService.CallApi({ url: 'agent/conversations', method: 'post' }, { appName: this.appName }).subscribe(res => {
+            // DELIBERATELY SILENT (WS-6 Phase 4 triage). The UI has already done the thing the user asked for —
+            // messages cleared, id nulled, a blank thread on screen — before this call is even made. All the server
+            // round trip adds is a pre-allocated id, and sendMessage() creates one anyway when there is none. So a
+            // failure here changes nothing the user can see or do.
             if (res.success && res.data) {
                 this.currentConversationId.next(res.data.conversationID);
             }
@@ -10791,6 +11536,12 @@ class AgentService {
     // Delete a conversation
     deleteConversation(id) {
         this.dataService.CallApi({ url: `agent/conversations/${id}/delete`, method: 'post' }).subscribe(res => {
+            // CONVERTED (WS-6 Phase 4 triage). A delete the user pressed. Failing left the conversation sitting in
+            // the list exactly as it was, which reads as "the button did nothing" — and the answer to a button that
+            // did nothing is to press it again. Note the comment on the URL below: this endpoint has already been
+            // wrong once (a 405 on every call), and it was silence that let that survive.
+            if (!res.success)
+                this.apiErrorService.presentAppFailure(res, 'action', `agent/conversations/${id}/delete`);
             if (res.success) {
                 this.loadConversations();
                 if (this.currentConversationId.value === id) {
@@ -10828,13 +11579,13 @@ class AgentService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentService, deps: [{ token: DataServiceLib }, { token: SignalRService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentService, deps: [{ token: DataServiceLib }, { token: SignalRService }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: DataServiceLib }, { type: SignalRService }] });
+        }], ctorParameters: () => [{ type: DataServiceLib }, { type: SignalRService }, { type: ApiErrorService }] });
 
 class AnalyticsService {
     constructor(router) {
@@ -10882,248 +11633,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$1.Router }] });
 
-class ApiErrorService {
-    constructor(messageService) {
-        this.messageService = messageService;
-        // One dialog per KIND per window. Keyed by kind rather than by URL on purpose: when the backend goes down,
-        // twenty different URLs fail for one single reason, and the user needs to be told that reason once.
-        this.lastShownAt = new Map();
-        /** How long a given kind stays suppressed after being shown. The user described "the same 10 seconds or so". */
-        this.suppressWindowMs = 10000;
-        // Added: submits dedupe over a much shorter window than background reads. Long enough to swallow a
-        // double-click or a duplicated emission, short enough that a user who reads the dialog, dismisses it and
-        // deliberately tries again is told again rather than met with silence.
-        this.submitSuppressWindowMs = 1500;
-        //================ Application-level failures (HTTP 200 + success:false) ================
-        // Added: fragments that mark a message as machine-authored rather than human-authored. Matched
-        // case-insensitively against the whole message. The list is deliberately about IMPLEMENTATION LEAKS, not
-        // about severity — a leaked identifier is useless to the user however serious the underlying fault is.
-        this.opaqueMarkers = [
-            // NOTE: matched as a SUBSTRING, never by equality. TinWeb's catch-all now appends a correlation code —
-            // "Error processing request (reference K7M2QP4T)" — so an equality test would classify every catch-all
-            // failure as a business message and show the raw text, which is worse than the behaviour this replaces.
-            'error processing request', // TinWeb BaseController/BaseController2/BaseService catch-all — by far the most common
-            'invalid column name', // SQL leaking through after a schema/migration drift
-            'sqlexception',
-            'object reference not set',
-            'an error occurred while', // EF Core's standard preamble ("...while updating the entries")
-            'inner exception',
-            'stack trace',
-            'the underlying provider failed',
-            'index was outside the bounds',
-            'timeout expired',
-            'exception', // catches DbUpdateException, InvalidOperationException, ... by suffix
-            // Added: raw SqlException text. TinCore's BaseRepository.SetErrorResp returns ex.InnerException.Message
-            // verbatim on HTTP 200, so a bad foreign key currently shows the user the database, table, column AND
-            // constraint names — jargon and a schema leak at once. These never carry a correlation reference, because
-            // they never reach the catch-all that mints one.
-            //
-            // Each fragment below is SQL Server's own wording. None of them can occur in a hand-authored message like
-            // "Registration number already in use" or "Customer not found", which is why they are matched as phrases
-            // rather than on single words such as "duplicate" or "constraint" that a human might legitimately write.
-            'statement conflicted with the', // "The INSERT statement conflicted with the FOREIGN KEY constraint ..."
-            'foreign key constraint',
-            'unique key constraint',
-            'primary key constraint',
-            'check constraint',
-            'cannot insert the value null',
-            'string or binary data would be truncated',
-            'violation of ', // "Violation of PRIMARY KEY constraint 'PK_...'"
-            'duplicate key', // "Cannot insert duplicate key row in object ..."
-        ];
-    }
-    // Classification is by status code first, because that is the only signal that is reliable across browsers.
-    // `statusText === 'Unknown Error'` is kept as a secondary network signal since some browsers report a failed
-    // connection that way while still surfacing status 0.
-    classify(error) {
-        const status = error?.status ?? 0;
-        // status 0 means the request never reached a server: offline, DNS failure, connection refused, CORS block.
-        // This is the single most common case for a field user and the one that was rendering blank.
-        if (status === 0 || error?.statusText === 'Unknown Error') {
-            return {
-                kind: 'network',
-                title: 'No connection',
-                message: `We couldn't reach the server. Please check your internet connection and try again.\n\n` +
-                    `If your connection is working, the service may be temporarily unavailable — your work is not lost, and you can try again in a moment.`,
-            };
-        }
-        if (status === 408 || status === 504) {
-            return {
-                kind: 'timeout',
-                title: 'Taking too long',
-                message: `The server is taking longer than expected to respond.\n\nPlease wait a moment and try again.`,
-            };
-        }
-        if (status === 503) {
-            return {
-                kind: 'unavailable',
-                title: 'Service unavailable',
-                message: `The service is temporarily unavailable, usually because it is being updated.\n\nPlease try again in a few minutes.`,
-            };
-        }
-        // A 400 is almost never the user's doing — the app sent a payload the server rejected. Saying "check your
-        // input" would send them hunting for a mistake they did not make, so this points at support instead.
-        if (status === 400 || status === 422) {
-            return {
-                kind: 'badrequest',
-                title: 'Something went wrong',
-                message: `We couldn't complete that action because of a technical problem in the app — not anything you did wrong.\n\n` +
-                    `Please try again. If it keeps happening, contact your administrator so it can be looked into.`,
-            };
-        }
-        if (status === 403) {
-            return {
-                kind: 'forbidden',
-                title: 'Not allowed',
-                message: `You don't have permission to do that.\n\nIf you think you should, please contact your administrator.`,
-            };
-        }
-        if (status === 404) {
-            return {
-                kind: 'notfound',
-                title: 'Not found',
-                message: `We couldn't find what you were looking for. It may have been moved or deleted by someone else.\n\n` +
-                    `Try refreshing the page. If it keeps happening, contact your administrator.`,
-            };
-        }
-        if (status >= 500) {
-            return {
-                kind: 'server',
-                title: 'Something went wrong',
-                message: `The server ran into a problem while handling your request.\n\n` +
-                    `Please try again shortly. If it keeps happening, contact your administrator.`,
-            };
-        }
-        return {
-            kind: 'unknown',
-            title: 'Something went wrong',
-            message: `We couldn't complete that action.\n\nPlease try again. If it keeps happening, contact your administrator.`,
-        };
-    }
-    /** True when this kind was already shown inside the suppression window — i.e. the user has already been told. */
-    // Changed: window is now a parameter (defaulting to the existing suppressWindowMs, so present() is unaffected)
-    // because a submit failure needs a much shorter one than a burst of background reads — see presentAppFailure().
-    isSuppressed(kind, windowMs = this.suppressWindowMs) {
-        const last = this.lastShownAt.get(kind);
-        return last != null && (Date.now() - last) < windowMs;
-    }
-    // Presents at most ONE dialog per kind per window. The technical detail still goes to the console, where a
-    // developer wants it, so nothing is lost by keeping it out of the dialog.
-    present(error) {
-        const info = this.classify(error);
-        // Added: a 5xx from TinWeb's exception middleware now carries "(reference X)" in its body Message —
-        // pull it out so the dialog can quote it as a footnote, exactly as presentAppFailure() does for the
-        // 200-with-success:false catch-alls. Only the 'server' kind can carry one; a transport failure has no
-        // body at all (error.error is a ProgressEvent), which extractReference() tolerates as null.
-        if (info.kind === 'server') {
-            const body = error?.error;
-            info.reference = this.extractReference(body?.Message ?? body?.message) ?? undefined;
-        }
-        console.error(`[tin-spa] API error (${info.kind})`, { status: error?.status, url: error?.url, reference: info.reference, error }); // Changed: log the reference so console and server log line tie together
-        if (this.isSuppressed(info.kind))
-            return info; // already told them — a second dialog adds nothing
-        this.lastShownAt.set(info.kind, Date.now());
-        this.messageService.errorWithSubject(info.title, info.message, info.reference); // Changed: pass the reference through so the dialog renders the quiet footnote
-        return info;
-    }
-    // Added: splits the server's message into 'opaque' (tells the user nothing, must not be shown raw) and
-    // 'business' (a deliberate sentence the backend author wrote for a human, genuinely worth reading).
-    //
-    // Written as a deny-list rather than an allow-list on purpose: business messages are open-ended and
-    // app-specific, so there is nothing to enumerate, whereas the ways a .NET exception leaks are few and stable.
-    // The consequence of the default is the safe one — an unrecognised message is treated as business and shown,
-    // so a real message is never swallowed; only recognisably technical text is replaced.
-    classifyMessage(message) {
-        const text = (message ?? '').trim();
-        if (!text)
-            return 'opaque'; // nothing to show — a blank toast is the very failure mode this service exists to kill
-        const lower = text.toLowerCase();
-        if (this.opaqueMarkers.some(marker => lower.includes(marker)))
-            return 'opaque';
-        if (/\bsystem\.[a-z]/i.test(text))
-            return 'opaque'; // a .NET namespace ("System.NullReferenceException")
-        if (/\bat\s+[\w.]+\s*\(/.test(text))
-            return 'opaque'; // a stack frame ("at Namespace.Method(")
-        if (text.length > 300)
-            return 'opaque'; // no human writes a 300-char error; this is a dump
-        return 'business';
-    }
-    // Added: pulls TinWeb's correlation code out of a catch-all message. The backend writes the same code into
-    // its log line as "[ref XXXXXXXX]", so quoting it in the dialog is what lets support jump straight to the log
-    // row instead of hunting by timestamp.
-    //
-    // The alphabet is A-Z/2-9 with 0/O/1/I/L removed (they are misread down a phone line), and the code is 8
-    // characters — but the pattern accepts 6-12 so a future length change does not silently stop matching. The
-    // reference is only ever EXTRACTED here; the rest of the raw message is still discarded, never shown.
-    extractReference(message) {
-        const match = (message ?? '').match(/\breference\s+([A-Z2-9]{6,12})\b/i);
-        return match ? match[1].toUpperCase() : null;
-    }
-    // Added: the sibling to present() for failures that arrive as HTTP 200 with success:false.
-    //
-    // Opaque  -> the friendly dialog, through the SAME lastShownAt suppression map present() uses, so a burst
-    //            (a dashboard firing twenty calls at a broken backend) still yields exactly one dialog.
-    // Business -> the existing toast, unchanged in weight. Short, meaningful, non-blocking.
-    //
-    // Why 'submit' gets its own dedupe key rather than sharing with loads: suppression exists to collapse a BURST
-    // of background calls that all failed for one reason. A create/edit submit is not part of a burst — it is one
-    // deliberate action, and it is the exact case where a missed message leads the user to press the button again
-    // and duplicate the record. Sharing a key would let unrelated background load failures suppress the dialog
-    // for the one interaction that most needs it. Keeping a (short) window on the submit key still collapses a
-    // double-click, while letting a genuine retry a few seconds later speak up again.
-    presentAppFailure(response, context = 'action', url) {
-        const message = response?.message;
-        const failureClass = this.classifyMessage(message);
-        // Always log the raw response and URL, exactly as present() does — the developer loses nothing by the
-        // dialog being friendly, because the technical detail is right here.
-        const reference = this.extractReference(message); // Added: null for SqlException leaks and older backends, which never mint one
-        console.error(`[tin-spa] API failure (${failureClass}/${context})`, { url, message, reference, response }); // Changed: log the reference too, so the browser console and the server log line can be tied together
-        if (failureClass === 'business') {
-            // Changed: dropped the "Error: " prefix that every call site used to prepend. Verified nothing depends on
-            // it — no test in ng-space or any of the four consumer apps asserts on the literal "Error: ". The prefix
-            // only ever restated what the red-tinted message already conveyed, and it pushed the useful words right.
-            this.messageService.toast(message);
-            return failureClass;
-        }
-        const kind = context === 'submit' ? 'appfailure-submit' : 'appfailure';
-        if (this.isSuppressed(kind, context === 'submit' ? this.submitSuppressWindowMs : this.suppressWindowMs))
-            return failureClass;
-        this.lastShownAt.set(kind, Date.now());
-        // Copy matches classify() above: name the problem, absolve the user, say what to do next. The submit
-        // variant adds the two things that specifically stop a duplicate — that the data is still there, and that
-        // pressing the button again is not the fix.
-        // Changed: the reference is passed as its own argument rather than appended to the body, so the dialog can
-        // render it as a quiet footnote. It is omitted entirely when there isn't one — a SqlException leak and an
-        // older backend both arrive without a reference, and neither should show a dangling "quote reference" line.
-        if (context === 'submit') {
-            this.messageService.errorWithSubject('Not saved', `We couldn't save that because of a technical problem — not anything you did wrong.\n\n` +
-                `Nothing was saved, and your details are still on the form, so you can try again without re-entering them.\n\n` +
-                `If it keeps happening, please contact your administrator rather than submitting repeatedly, as that can create duplicates.`, reference ?? undefined);
-        }
-        else {
-            this.messageService.errorWithSubject('Something went wrong', `We couldn't complete that action because of a technical problem — not anything you did wrong.\n\n` +
-                `Please try again. If it keeps happening, contact your administrator.`, reference ?? undefined);
-        }
-        return failureClass;
-    }
-    /** Clears suppression so the next failure speaks up again — call after a successful request or reconnect. */
-    reset() {
-        this.lastShownAt.clear();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ApiErrorService, deps: [{ token: MessageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ApiErrorService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ApiErrorService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: MessageService }] });
-
 // Setup readiness ("Getting Started") service — NotificationsService mirror without SignalR.
 // Dormant unless appConfig.setupConfig.enabled; API failures leave count at 0 so the badge stays hidden.
 // v2 adds the module catalog (drives step + nav-menu gating) and predefined role templates.
 class SetupService {
-    constructor(dataService) {
+    constructor(dataService, apiErrorService) {
         this.dataService = dataService;
+        this.apiErrorService = apiErrorService;
         this.pendingCount = new BehaviorSubject(0);
         this.pendingCount$ = this.pendingCount.asObservable();
         this.status = new BehaviorSubject(null);
@@ -11131,7 +11647,7 @@ class SetupService {
         // Added (v2): module catalog — empty means the app has no module concept (nothing is ever hidden)
         this.modules = new BehaviorSubject([]);
         this.modules$ = this.modules.asObservable();
-    }
+    } // Changed: injected for loadStatus only
     get enabled() {
         return !!this.dataService.appConfig?.setupConfig?.enabled;
     }
@@ -11141,6 +11657,11 @@ class SetupService {
             return;
         this.dataService.CallApi({ url: 'setup/count', skipCache: true }).subscribe({
             next: (apiResponse) => {
+                // DELIBERATELY SILENT (WS-6 Phase 4 triage). A badge count, fired from login and from nav-menu init.
+                // Failing leaves the badge hidden, which is the same thing it shows when there is genuinely nothing
+                // pending — and "you have no setup left" is a harmless thing to under-report for a moment, because
+                // the Getting Started PAGE itself reports properly (see loadStatus below). A dialog on nav init would
+                // fire on every shell load for every user of an app whose SetupController is having a bad day.
                 if (apiResponse.success)
                     this.pendingCount.next(apiResponse.data);
             },
@@ -11153,6 +11674,13 @@ class SetupService {
             return;
         this.dataService.CallApi({ url: 'setup/status', skipCache: true }).subscribe({
             next: (apiResponse) => {
+                // CONVERTED, unlike its two neighbours in this file, and the difference is who asked. This one has
+                // exactly two callers — setup-guide.component.ts ngOnInit and refresh() from that same page — so it
+                // only ever runs because someone opened Getting Started or just completed a step there. Failing left
+                // the page rendering an empty checklist, which reads as "there is nothing to set up" to the one user
+                // who is by definition new and has no way to know better. (WS-6 Phase 4 triage)
+                if (!apiResponse.success)
+                    this.apiErrorService.presentAppFailure(apiResponse, 'load', 'setup/status');
                 if (apiResponse.success) {
                     this.status.next(apiResponse.data);
                     this.pendingCount.next(apiResponse.data?.pending ?? 0);
@@ -11168,6 +11696,10 @@ class SetupService {
             return;
         this.dataService.CallApi({ url: 'setup/modules', skipCache: true }).subscribe({
             next: (apiResponse) => {
+                // DELIBERATELY SILENT (WS-6 Phase 4 triage). Nav-menu init, and isModuleEnabled() below FAILS OPEN by
+                // design — an empty catalog hides nothing, so a failure here makes the app MORE visible, never less.
+                // There is no user-facing loss to report. It also runs on every shell init, which is precisely where
+                // a dialog becomes a wall.
                 if (apiResponse.success)
                     this.modules.next(apiResponse.data ?? []);
             },
@@ -11196,10 +11728,33 @@ class SetupService {
     createRoles(keys) {
         return this.dataService.CallApi({ url: 'setup/roles', method: 'post', skipCache: true }, { keys });
     }
+    // Added (presets): the notification rules on offer for this tenant, plus the roles the picker chooses a
+    // recipient from. skipCache like every other setup call — Exists is stamped per request and a cached
+    // catalogue would re-offer rules the user just created.
+    loadNotificationPresets() {
+        return this.dataService.CallApi({ url: 'setup/notificationpresets', skipCache: true });
+    }
+    // Added (presets): create notification rules from the ticked presets. Create-only server-side — unticking a
+    // rule that already exists deletes nothing, so this can never undo a deliberate user choice.
+    applyNotificationPresets(items, includeEmail) {
+        return this.dataService.CallApi({ url: 'setup/notifications', method: 'post', skipCache: true }, { items, includeEmail });
+    }
+    // Added (presets P4): the approval rules on offer, plus the roles that can ACTUALLY approve — the backend filters
+    // that list to roles somebody is a member of, because since SEC-10 only a member of the level's role can release a
+    // held record, so offering an empty role would build a config nobody could action.
+    loadApprovalPresets() {
+        return this.dataService.CallApi({ url: 'setup/approvalpresets', skipCache: true });
+    }
+    // Added (presets P4): create approval rules from the ticked presets. Create-only server-side, exactly like the
+    // notification apply. No includeEmail — an approval request is always in-app (an approver who misses it leaves
+    // records held), so the body deliberately carries items alone.
+    applyApprovalPresets(items) {
+        return this.dataService.CallApi({ url: 'setup/approvals', method: 'post', skipCache: true }, { items });
+    }
     refresh() {
         this.loadStatus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SetupService, deps: [{ token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SetupService, deps: [{ token: DataServiceLib }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SetupService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SetupService, decorators: [{
@@ -11207,7 +11762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: DataServiceLib }] });
+        }], ctorParameters: () => [{ type: DataServiceLib }, { type: ApiErrorService }] });
 
 // Added: the app-wide App Configuration record, loaded once and shared. Apps used to each solve this
 // themselves — Shift kept a copy in localStorage that went stale the moment anyone saved on another
@@ -11231,6 +11786,11 @@ class ConfigService {
         this.loaded = true;
         this.dataService.CallApi({ url: 'configuration/get', skipCache: true }).subscribe({
             next: (apiResponse) => {
+                // DELIBERATELY SILENT (WS-6 Phase 4 triage). This runs on login/bootstrap, before the user has asked
+                // for anything, and everything downstream of it FAILS OPEN: an empty config hides no nav item, gates
+                // no module and suffixes no unit. So a failure here costs cosmetics, not capability — and greeting
+                // someone with an error dialog the instant they sign in, for an app that then works, is a worse lie
+                // than saying nothing. The error callback below already absorbs the transport case for the same reason.
                 if (apiResponse.success)
                     this.config.next(apiResponse.data || {});
             },
@@ -11429,6 +11989,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Input
             }] } });
 
+// Added (presets): the library step keys the pickers attach to. They come from PresetCatalog and are identical in
+// all five apps, so a picker needs no per-app setupConfig entry (unlike roleTemplates, whose step key is
+// app-chosen). Kept as named constants rather than literals sprinkled through the class.
+const NOTIFICATION_PRESETS_STEP = 'notification-presets';
+const APPROVAL_PRESETS_STEP = 'approval-presets'; // Added (presets P4) — PresetCatalog.StepApprovals
+// Added (presets): the placeholder PresetCatalog authors into every Effect sentence, marking where the role
+// select is embedded. Splitting on it is the ONLY thing the UI does to that sentence.
+const PRESET_ROLE_TOKEN = '{role}';
 // Getting Started page — renders the per-app setup readiness catalog (top-down groups, no wizard).
 // Step actions come from appConfig.setupConfig.stepActions (create dialog Button, route link, Excel
 // import wizard, or the predefined role-template picker). v2 adds the module picker: optional modules
@@ -11439,6 +12007,7 @@ class SetupGuideComponent {
         this.setupService = inject(SetupService);
         this.dialogService = inject(DialogService);
         this.messageService = inject(MessageService); // Added: Demo Data card
+        this.apiErrorService = inject(ApiErrorService); // Added: routes this page's four unhandled failures through the shared classifier
         this.status = null;
         this.groups = []; // Changed: each group carries a spa-checklist config instead of raw steps
         this.modules = [];
@@ -11449,6 +12018,49 @@ class SetupGuideComponent {
         this.roleTemplates = [];
         this.selectedTemplates = {};
         this.creatingRoles = false;
+        // Added (presets): picker state. `groups` is materialized (same rule as moduleGroups above); selected/role are
+        // plain maps keyed by preset key so a reload never clobbers a manual choice.
+        // Changed (presets P4): one object per domain instead of a field per domain — see PresetPicker above.
+        this.includeEmail = false; // notifications only; approvals are always in-app
+        this.notificationPicker = {
+            stepKey: NOTIFICATION_PRESETS_STEP,
+            defaultGroup: 'Notifications',
+            // A notification addressed to nobody is inert, so with no roles we ask for roles instead of offering ticks
+            emptyText: 'Create your team roles first — a notification needs somebody to go to.',
+            doneText: 'Edit or remove it in Notif Config.',
+            roleAria: 'Who to tell — ',
+            showEmail: true,
+            buttonLabel: count => count === 0 ? 'Turn on notifications' : count === 1 ? 'Turn on 1 notification' : `Turn on ${count} notifications`,
+            toastLabel: created => created > 0 ? `${created} notification${created === 1 ? '' : 's'} turned on` : 'No new notifications were turned on',
+            loadUrl: 'setup/notificationpresets',
+            applyUrl: 'setup/notifications',
+            load: () => this.setupService.loadNotificationPresets(),
+            apply: items => this.setupService.applyNotificationPresets(items, this.includeEmail),
+            presets: [], roles: [], groups: [], selected: {}, role: {}, count: 0, loaded: false, applying: false,
+            action: { type: 'custom', display: 'Turn on notifications', primary: true, disabled: () => this.notificationPicker.count === 0 || this.notificationPicker.applying, onClick: () => this.applyPresets(this.notificationPicker) }
+        };
+        this.approvalPicker = {
+            stepKey: APPROVAL_PRESETS_STEP,
+            defaultGroup: 'Sign-off',
+            // 🔴 NOT "create your team roles first". The backend offers only roles somebody is actually a MEMBER of, because
+            // since SEC-10 only a member of the approver role can release a held record — so this list is empty in TWO
+            // different situations: no roles at all, and roles that nobody has been added to. Naming only the first would be
+            // flatly wrong in the second, and would send a user who already has roles off to create duplicates of them.
+            emptyText: 'Nobody can approve anything yet — sign-off goes to a role, and only the people in that role can release a held record. Create your roles and add your team to one first.',
+            doneText: 'Edit or remove it in Approvals Config.',
+            roleAria: 'Who approves — ',
+            showEmail: false, // an approval request is always in-app; an approver who misses it leaves records held
+            buttonLabel: count => count === 0 ? 'Turn on sign-off' : count === 1 ? 'Require sign-off for 1 action' : `Require sign-off for ${count} actions`,
+            toastLabel: created => created > 0 ? `Sign-off turned on for ${created} action${created === 1 ? '' : 's'}` : 'No new sign-off rules were added',
+            loadUrl: 'setup/approvalpresets',
+            applyUrl: 'setup/approvals',
+            load: () => this.setupService.loadApprovalPresets(),
+            apply: items => this.setupService.applyApprovalPresets(items),
+            presets: [], roles: [], groups: [], selected: {}, role: {}, count: 0, loaded: false, applying: false,
+            action: { type: 'custom', display: 'Turn on sign-off', primary: true, disabled: () => this.approvalPicker.count === 0 || this.approvalPicker.applying, onClick: () => this.applyPresets(this.approvalPicker) }
+        };
+        // Both pickers, in render order. Everything below iterates this rather than naming a domain.
+        this.pickers = [this.notificationPicker, this.approvalPicker];
         //---------- Demo data ----------
         // Added: seed/remove example records. This used to sit on each app's hand-written App Configuration page,
         // which is where a user looking for it would never think to look — filling the system with example data is
@@ -11467,6 +12079,10 @@ class SetupGuideComponent {
             this.buildGroups();
             if (this.hasRoleTemplatesStep())
                 this.loadRoleTemplates();
+            // Added (presets): only load a picker when the backend actually serves its step. The approvals step is gated
+            // on the approvals module, so turning that module off makes the step — and this call — disappear with it.
+            this.pickers.forEach(picker => { if (this.hasPresetsStep(picker))
+                this.loadPresets(picker); });
         });
         this.setupService.loadStatus();
     }
@@ -11490,9 +12106,13 @@ class SetupGuideComponent {
     buildActions(step) {
         const act = this.getAction(step);
         const actions = [];
+        const picker = this.pickerFor(step); // Changed (presets P4): whichever picker owns this step, if any
         if (this.hasRoleTemplates(step)) {
             actions.push({ type: 'custom', display: 'Create selected roles', primary: true, disabled: () => this.selectedTemplateCount === 0 || this.creatingRoles, onClick: () => this.createSelectedRoles() });
         }
+        else if (picker) {
+            actions.push(picker.action); // Added (presets): the same object every rebuild, so the mutated count label survives a status refresh
+        }
         else if (act.button) {
             actions.push({ type: 'create', display: this.primaryLabel(step), primary: true, onClick: () => this.doPrimary(step) }); // Changed: filled primary only for create dialogs — a bare link is never promoted to a filled button
         }
@@ -11573,9 +12193,13 @@ class SetupGuideComponent {
                 this.togglingKey = '';
                 if (resp.success)
                     this.setupService.refresh();
+                // Changed: the optimistic revert stays exactly as it was — it is correct and must not be lost — but it
+                // was the ONLY feedback. A switch the user flipped silently flipping itself back is not a failure
+                // message, it is a glitch: the likeliest reading is that the click missed, so they flip it again.
                 else {
                     mod.enabled = !target;
                     this.recountModuleGroups();
+                    this.apiErrorService.presentAppFailure(resp, 'action', 'setup/module');
                 }
             },
             error: () => { this.togglingKey = ''; mod.enabled = !target; this.recountModuleGroups(); }
@@ -11620,8 +12244,10 @@ class SetupGuideComponent {
     loadRoleTemplates() {
         this.setupService.loadRoleTemplates().subscribe({
             next: resp => {
-                if (!resp.success)
+                if (!resp.success) {
+                    this.apiErrorService.presentAppFailure(resp, 'load', 'setup/roles');
                     return;
+                } // Changed: was a bare `return`. The picker then rendered zero templates, which reads as "this app ships no predefined roles" — a completely different statement from "we could not fetch them"
                 this.roleTemplates = resp.data || [];
                 // Preselect everything not yet created — the common case is "give me all of these"
                 this.roleTemplates.forEach(t => { if (this.selectedTemplates[t.key] === undefined)
@@ -11633,11 +12259,120 @@ class SetupGuideComponent {
     get selectedTemplateCount() {
         return this.roleTemplates.filter(t => !t.exists && this.selectedTemplates[t.key]).length;
     }
-    // Added: whole-row toggle for the restyled picker (state-icon rows replaced the checkboxes)
-    toggleTemplate(tpl) {
-        if (tpl.exists)
+    // Added: whole-row toggle for the restyled picker (state-icon rows replaced the checkboxes)
+    toggleTemplate(tpl) {
+        if (tpl.exists)
+            return;
+        this.selectedTemplates[tpl.key] = !this.selectedTemplates[tpl.key];
+    }
+    //---------- Preset pickers (notifications, sign-off) ----------
+    // ONE code path, driven by the PresetPicker objects above. Tick a row, pick who it goes to, apply. Both backends
+    // are create-only and skip anything already configured, so neither can overwrite a rule the user has since
+    // edited, nor resurrect one they deleted.
+    // Which picker (if any) renders inside this step. Called from the template, so it must stay cheap and must
+    // return the SAME object each pass — find() over a two-element array returning an existing reference does.
+    pickerFor(step) {
+        return step ? this.pickers.find(p => p.stepKey === step.key) : undefined;
+    }
+    hasPresetsStep(picker) {
+        return (this.status?.steps || []).some(s => s.key === picker.stepKey);
+    }
+    loadPresets(picker) {
+        picker.load().subscribe({
+            next: (resp) => {
+                // Same reasoning as loadRoleTemplates: a bare return renders an empty picker, which reads as "this app
+                // offers no presets" — a completely different statement from "we could not fetch them".
+                if (!resp.success) {
+                    this.apiErrorService.presentAppFailure(resp, 'load', picker.loadUrl);
+                    return;
+                }
+                picker.loaded = true;
+                picker.presets = resp.data?.presets || [];
+                picker.roles = resp.data?.roles || [];
+                picker.presets.forEach(p => {
+                    if (picker.selected[p.key] === undefined)
+                        picker.selected[p.key] = !p.exists; // preselect what is not yet configured; the undefined guard preserves a manual untick across a reload
+                    if (picker.role[p.key] === undefined && p.roleID)
+                        picker.role[p.key] = p.roleID; // the server-resolved default, kept unless the user changes it
+                    // Changed (presets P4): fall back to the FIRST offered role when the server could resolve none. A <select>
+                    // with no selected option still DISPLAYS its first one, so without this the row showed a role it had not
+                    // stored — the tick then submitted nothing while the screen said otherwise. Reachable whenever the
+                    // onboarding user holds no role of their own, which is exactly when nothing else can be resolved. Every
+                    // offered role is a legitimate choice (for sign-off the backend has already filtered to actionable ones),
+                    // so the worst case is a default the user changes — never a control that lies about what it will do.
+                    if (picker.role[p.key] === undefined && picker.roles.length > 0)
+                        picker.role[p.key] = picker.roles[0].value;
+                });
+                this.buildPresetGroups(picker);
+            },
+            error: () => { }
+        });
+    }
+    // Materialize the rows once per load: group in catalogue order and split each Effect sentence around the
+    // {role} token. The sentence itself is authored in PresetCatalog server-side — this only cuts it in two so the
+    // select can sit in the gap. Nothing here composes wording. That is why the approval sentences can carry their
+    // own caveat about a deferred notification without this component knowing such a caveat exists.
+    buildPresetGroups(picker) {
+        const names = [];
+        picker.presets.forEach(p => { const name = p.group || picker.defaultGroup; if (!names.includes(name))
+            names.push(name); });
+        picker.groups = names.map(name => {
+            const rows = picker.presets.filter(p => (p.group || picker.defaultGroup) === name).map(p => this.toPresetRow(p));
+            return { name, rows, on: 0, total: rows.length };
+        });
+        this.recountPresets(picker);
+    }
+    toPresetRow(preset) {
+        const parts = (preset.effect || '').split(PRESET_ROLE_TOKEN);
+        // No token (an app author wrote a sentence without one) → the whole sentence leads and the select follows it.
+        // Still a server sentence, still not composed here.
+        return { preset, before: parts[0], after: parts.length > 1 ? parts.slice(1).join(PRESET_ROLE_TOKEN) : '' };
+    }
+    // Counters + button label. "on" counts what will be on after applying: already configured plus newly ticked.
+    recountPresets(picker) {
+        picker.groups.forEach(g => g.on = g.rows.filter(r => r.preset.exists || picker.selected[r.preset.key]).length);
+        // Changed (presets P4): the count now requires a chosen role, matching EXACTLY what applyPresets submits. It
+        // previously counted ticks alone, so with no selectable role the button read "Turn on 3 notifications", was
+        // enabled, and applied nothing — the failure mode this feature must not have. Where roles exist the server
+        // always stamps a default, so nothing changes for the ordinary case.
+        picker.count = picker.presets.filter(p => !p.exists && picker.selected[p.key] && picker.role[p.key]).length;
+        picker.action.display = picker.buttonLabel(picker.count);
+    }
+    // Whole-row toggle, mirroring toggleTemplate — a configured row is inert, never untickable
+    togglePreset(picker, preset) {
+        if (preset.exists)
             return;
-        this.selectedTemplates[tpl.key] = !this.selectedTemplates[tpl.key];
+        picker.selected[preset.key] = !picker.selected[preset.key];
+        this.recountPresets(picker);
+    }
+    // The role select lives inside the row, so its click must not reach the row's toggle
+    setPresetRole(picker, preset, value) {
+        picker.role[preset.key] = Number(value);
+        this.recountPresets(picker); // a row that had no role now counts towards the button
+    }
+    toggleIncludeEmail() {
+        this.includeEmail = !this.includeEmail;
+    }
+    applyPresets(picker) {
+        // A preset with no role would create a rule addressed to nobody — or, for sign-off, a config nobody could
+        // release — so it is never submitted
+        const items = picker.presets.filter(p => !p.exists && picker.selected[p.key] && picker.role[p.key]).map(p => ({ key: p.key, roleID: picker.role[p.key] }));
+        if (items.length === 0 || picker.applying)
+            return;
+        picker.applying = true;
+        picker.apply(items).subscribe({
+            next: (resp) => {
+                picker.applying = false;
+                if (!resp.success) {
+                    this.apiErrorService.presentAppFailure(resp, 'action', picker.applyUrl);
+                    return;
+                } // never the server's own words on a failure
+                this.messageService.toast(picker.toastLabel(resp.data || 0)); // call-site wording, like the Demo Data card
+                this.loadPresets(picker); // re-reads Exists so the applied rows come back as Configured
+                this.setupService.refresh(); // the step's count moves with the new configs
+            },
+            error: () => picker.applying = false
+        });
     }
     get showDemoData() {
         return !!this.dataService.appConfig?.setupConfig?.demoData;
@@ -11658,9 +12393,16 @@ class SetupGuideComponent {
             this.dataService.CallApi({ url, method: 'post' }, {}).subscribe({
                 next: (response) => {
                     this.demoBusy = false;
-                    this.messageService.toast(response.success ? success : (response.message || 'Demo data action failed'));
-                    if (response.success)
-                        this.setupService.refresh(); // seeded/removed records move the step counts
+                    // Changed: the SUCCESS path deliberately stays a toast — `success` is a real human sentence written
+                    // at the call site ("Demo data seeded successfully") and a non-blocking toast is the right weight
+                    // for it. Only the FAILURE branch moves: it was toasting `response.message`, i.e. the server's own
+                    // words, so seeding against a schema-behind database put "Invalid column name" on screen.
+                    if (response.success) {
+                        this.messageService.toast(success);
+                        this.setupService.refresh();
+                    } // seeded/removed records move the step counts
+                    else
+                        this.apiErrorService.presentAppFailure(response, 'action', url);
                 },
                 error: () => this.demoBusy = false
             });
@@ -11678,16 +12420,19 @@ class SetupGuideComponent {
                     this.loadRoleTemplates(); // refresh the Created chips
                     this.setupService.refresh();
                 }
+                else {
+                    this.apiErrorService.presentAppFailure(resp, 'action', 'setup/roles'); // Added: was silent. The Created chips simply never appeared, so the user's read is "the roles were created but the page did not refresh" — and the next thing they do is assign people to roles that do not exist
+                }
             },
             error: () => this.creatingRoles = false
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SetupGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SetupGuideComponent, isStandalone: false, selector: "spa-setup-guide", ngImport: i0, template: "<div class=\"setup-page\" *ngIf=\"status\">\n\n  <!-- Hero: overall readiness + celebration state at 100% -->\n  <mat-card class=\"setup-hero\" [class.celebrate]=\"status.percent === 100\">\n    <div class=\"hero-content\" *ngIf=\"status.percent < 100\">\n      <div class=\"hero-text\">\n        <h1>{{ title }}</h1>\n        <p>Complete these steps to get your system ready for day-to-day operation.</p>\n        <span class=\"hero-counter\">{{ status.completed }} of {{ status.total }} steps completed</span>\n      </div>\n      <div class=\"hero-progress\">\n        <span class=\"hero-percent\">{{ status.percent }}%</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"status.percent\"></mat-progress-bar>\n      </div>\n    </div>\n    <div class=\"hero-content celebration\" *ngIf=\"status.percent === 100\">\n      <mat-icon class=\"celebrate-icon\">celebration</mat-icon>\n      <div class=\"hero-text\">\n        <h1>You're all set!</h1>\n        <p>All setup steps are complete \u2014 your system is ready to operate.</p>\n      </div>\n    </div>\n  </mat-card>\n\n  <!-- Module picker (v2): choose what the business uses; optional modules toggle steps + menus -->\n  <mat-card class=\"setup-modules\" *ngIf=\"modules.length > 0\">\n    <div class=\"group-header\">\n      <h2>Your modules</h2>\n      <span class=\"group-counter\">Tap a module to turn it on or off \u2014 you can change this anytime.</span>\n    </div>\n    <!-- Changed (v3): grouped \u2014 the picker now carries the whole library catalog, so cards sit under their\n         group heading (the app's own modules first). A backend without groups yields one unnamed group,\n         which renders as the original flat grid. -->\n    <div class=\"module-section\" *ngFor=\"let mgroup of moduleGroups\">\n      <div class=\"module-section-head\">\n        <span class=\"module-section-name\">{{ mgroup.name }}</span>\n        <span class=\"module-section-count\">{{ mgroup.enabled }} of {{ mgroup.total }} on</span>\n      </div>\n      <div class=\"module-grid\">\n        <div class=\"module-card\" *ngFor=\"let mod of mgroup.modules\"\n             [class.enabled]=\"mod.enabled\" [class.core]=\"mod.core\" [class.busy]=\"togglingKey === mod.key\"\n             (click)=\"toggleModule(mod)\">\n          <div class=\"module-head\">\n            <mat-icon class=\"module-icon\">{{ mod.icon || 'extension' }}</mat-icon>\n            <mat-icon class=\"module-state\" [class.on]=\"mod.enabled\">{{ mod.enabled ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n          </div>\n          <div class=\"module-title\">{{ mod.title }}</div>\n          <div class=\"module-description\">{{ mod.description }}</div>\n          <span class=\"module-chip\" *ngIf=\"mod.core\">Always on</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"module-actions\" *ngIf=\"!modulesConfirmed\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"togglingKey !== ''\" (click)=\"confirmModules()\">Confirm selection</button>\n      <span class=\"module-hint\">Happy with this selection? Confirm it to complete the step below.</span>\n    </div>\n  </mat-card>\n\n  <!-- Category groups, top-down \u2014 Changed: flat spa-checklist replaces the raised mat-accordion -->\n  <mat-card class=\"setup-group\" *ngFor=\"let group of groups\">\n    <div class=\"group-header\">\n      <h2>{{ group.name }}</h2>\n      <span class=\"group-counter\">{{ group.completed }} of {{ group.total }}</span>\n    </div>\n    <spa-checklist [config]=\"group.config\" [itemTemplate]=\"stepExtrasTpl\"></spa-checklist>\n  </mat-card>\n\n  <!-- Demo data (opt-in via setupConfig.demoData) \u2014 moved here off the per-app configuration pages -->\n  <mat-card class=\"setup-group setup-demo\" *ngIf=\"showDemoData\">\n    <div class=\"group-header\">\n      <h2>Demo data</h2>\n      <span class=\"group-counter\">Explore with example records, then clear them out</span>\n    </div>\n    <p class=\"demo-description\">Seeding fills the system with example records so you can try it out before capturing anything real. Removing deletes only those example records.</p>\n    <div class=\"demo-actions\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"demoBusy\" (click)=\"seedDemoData()\"><mat-icon>add_circle</mat-icon> Seed demo data</button>\n      <button mat-stroked-button color=\"warn\" [disabled]=\"demoBusy\" (click)=\"removeDemoData()\"><mat-icon>delete</mat-icon> Remove demo data</button>\n    </div>\n  </mat-card>\n\n</div>\n\n<!-- Projected into the expanded checklist body: predefined roles picker on the roles step (v2) -->\n<ng-template #stepExtrasTpl let-item>\n  <div class=\"role-templates\" *ngIf=\"hasRoleTemplates(item.data) && roleTemplates.length > 0\">\n    <div class=\"role-template\" *ngFor=\"let tpl of roleTemplates\" [class.created]=\"tpl.exists\" [class.selected]=\"!tpl.exists && selectedTemplates[tpl.key]\" (click)=\"toggleTemplate(tpl)\">\n      <div class=\"role-head\">\n        <mat-icon class=\"role-state\" [class.on]=\"tpl.exists || selectedTemplates[tpl.key]\">{{ (tpl.exists || selectedTemplates[tpl.key]) ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        <span class=\"role-name\">{{ tpl.name }}</span>\n        <span class=\"role-created\" *ngIf=\"tpl.exists\"><mat-icon>check</mat-icon>Created</span>\n      </div>\n      <div class=\"role-description\">{{ tpl.description }}</div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Graceful empty state (feature disabled or status unavailable) -->\n<div class=\"setup-empty\" *ngIf=\"!status\">\n  <mat-icon>rocket_launch</mat-icon>\n  <p>Setup status is not available yet.</p>\n</div>\n", styles: [".setup-page{max-width:860px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.setup-hero{padding:24px}.hero-content{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.hero-text h1{margin:0 0 4px;font-size:24px}.hero-text p{margin:0 0 8px;color:#0009}.hero-counter{font-size:13px;color:#0009}.hero-progress{flex:1;min-width:220px;max-width:340px}.hero-percent{display:block;font-size:28px;font-weight:600;color:#2e7d32;margin-bottom:6px;text-align:right}.hero-progress mat-progress-bar{height:10px;border-radius:5px}.setup-hero.celebrate{background:linear-gradient(135deg,#e8f5e9,#f1f8e9)}.celebration{justify-content:flex-start}.celebrate-icon{font-size:48px;width:48px;height:48px;color:#2e7d32;animation:celebrate-pop .6s ease-out}@keyframes celebrate-pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.setup-group{padding:16px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.group-header h2{margin:0;font-size:17px}.group-counter{font-size:12px;color:#0000008c}.setup-modules{padding:16px}.module-section+.module-section{margin-top:18px}.module-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}.module-section-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0009}.module-section-count{font-size:11px;color:#00000073;white-space:nowrap}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}.module-card{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;opacity:.72;position:relative}.module-card:hover{border-color:#90a4ae}.module-card.enabled{border-color:#4caf50;background:#f6fbf6;opacity:1}.module-card.core{cursor:default}.module-card.busy{pointer-events:none;opacity:.5}.module-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.module-icon{color:#546e7a}.module-card.enabled .module-icon{color:#2e7d32}.module-state{color:#b0bec5}.module-state.on{color:#4caf50}.module-title{font-weight:600;font-size:14px;margin-bottom:4px}.module-description{font-size:12px;color:#0009;min-height:30px}.module-chip{display:inline-block;margin-top:8px;background:#eceff1;color:#546e7a;border-radius:12px;padding:2px 10px;font-size:11px}.module-actions{display:flex;align-items:center;gap:8px 12px;margin-top:14px;flex-wrap:wrap}.module-actions button{flex-shrink:0}.module-hint{font-size:12px;color:#0000008c}.role-templates{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}.role-template{border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}.role-template:hover{border-color:#90a4ae}.role-template.selected{border-color:#4caf50;background:#f6fbf6}.role-template.created{background:#f6fbf6;border-color:#c8e6c9;cursor:default}.role-head{display:flex;align-items:center;gap:8px}.role-state{color:#b0bec5;flex-shrink:0}.role-state.on{color:#4caf50}.role-name{font-weight:500;font-size:13px}.role-created{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#2e7d32}.role-created mat-icon{font-size:16px;width:16px;height:16px}.role-description{font-size:12px;color:#0009;margin:2px 0 0 32px}.setup-empty{text-align:center;padding:48px 16px;color:#00000080}.setup-empty mat-icon{font-size:40px;width:40px;height:40px}.demo-description{margin:8px 0 14px;font-size:13px;color:#0009}.demo-actions{display:flex;gap:12px;flex-wrap:wrap}@media (max-width: 700px){.module-hint{flex:0 0 100%}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ChecklistComponent, selector: "spa-checklist", inputs: ["config", "itemTemplate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SetupGuideComponent, isStandalone: false, selector: "spa-setup-guide", ngImport: i0, template: "<div class=\"setup-page\" *ngIf=\"status\">\n\n  <!-- Hero: overall readiness + celebration state at 100% -->\n  <mat-card class=\"setup-hero\" [class.celebrate]=\"status.percent === 100\">\n    <div class=\"hero-content\" *ngIf=\"status.percent < 100\">\n      <div class=\"hero-text\">\n        <h1>{{ title }}</h1>\n        <p>Complete these steps to get your system ready for day-to-day operation.</p>\n        <span class=\"hero-counter\">{{ status.completed }} of {{ status.total }} steps completed</span>\n      </div>\n      <div class=\"hero-progress\">\n        <span class=\"hero-percent\">{{ status.percent }}%</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"status.percent\"></mat-progress-bar>\n      </div>\n    </div>\n    <div class=\"hero-content celebration\" *ngIf=\"status.percent === 100\">\n      <mat-icon class=\"celebrate-icon\">celebration</mat-icon>\n      <div class=\"hero-text\">\n        <h1>You're all set!</h1>\n        <p>All setup steps are complete \u2014 your system is ready to operate.</p>\n      </div>\n    </div>\n  </mat-card>\n\n  <!-- Module picker (v2): choose what the business uses; optional modules toggle steps + menus -->\n  <mat-card class=\"setup-modules\" *ngIf=\"modules.length > 0\">\n    <div class=\"group-header\">\n      <h2>Your modules</h2>\n      <span class=\"group-counter\">Tap a module to turn it on or off \u2014 you can change this anytime.</span>\n    </div>\n    <!-- Changed (v3): grouped \u2014 the picker now carries the whole library catalog, so cards sit under their\n         group heading (the app's own modules first). A backend without groups yields one unnamed group,\n         which renders as the original flat grid. -->\n    <div class=\"module-section\" *ngFor=\"let mgroup of moduleGroups\">\n      <div class=\"module-section-head\">\n        <span class=\"module-section-name\">{{ mgroup.name }}</span>\n        <span class=\"module-section-count\">{{ mgroup.enabled }} of {{ mgroup.total }} on</span>\n      </div>\n      <div class=\"module-grid\">\n        <div class=\"module-card\" *ngFor=\"let mod of mgroup.modules\"\n             [class.enabled]=\"mod.enabled\" [class.core]=\"mod.core\" [class.busy]=\"togglingKey === mod.key\"\n             (click)=\"toggleModule(mod)\">\n          <div class=\"module-head\">\n            <mat-icon class=\"module-icon\">{{ mod.icon || 'extension' }}</mat-icon>\n            <mat-icon class=\"module-state\" [class.on]=\"mod.enabled\">{{ mod.enabled ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n          </div>\n          <div class=\"module-title\">{{ mod.title }}</div>\n          <div class=\"module-description\">{{ mod.description }}</div>\n          <span class=\"module-chip\" *ngIf=\"mod.core\">Always on</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"module-actions\" *ngIf=\"!modulesConfirmed\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"togglingKey !== ''\" (click)=\"confirmModules()\">Confirm selection</button>\n      <span class=\"module-hint\">Happy with this selection? Confirm it to complete the step below.</span>\n    </div>\n  </mat-card>\n\n  <!-- Category groups, top-down \u2014 Changed: flat spa-checklist replaces the raised mat-accordion -->\n  <mat-card class=\"setup-group\" *ngFor=\"let group of groups\">\n    <div class=\"group-header\">\n      <h2>{{ group.name }}</h2>\n      <span class=\"group-counter\">{{ group.completed }} of {{ group.total }}</span>\n    </div>\n    <spa-checklist [config]=\"group.config\" [itemTemplate]=\"stepExtrasTpl\"></spa-checklist>\n  </mat-card>\n\n  <!-- Demo data (opt-in via setupConfig.demoData) \u2014 moved here off the per-app configuration pages -->\n  <mat-card class=\"setup-group setup-demo\" *ngIf=\"showDemoData\">\n    <div class=\"group-header\">\n      <h2>Demo data</h2>\n      <span class=\"group-counter\">Explore with example records, then clear them out</span>\n    </div>\n    <p class=\"demo-description\">Seeding fills the system with example records so you can try it out before capturing anything real. Removing deletes only those example records.</p>\n    <div class=\"demo-actions\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"demoBusy\" (click)=\"seedDemoData()\"><mat-icon>add_circle</mat-icon> Seed demo data</button>\n      <button mat-stroked-button color=\"warn\" [disabled]=\"demoBusy\" (click)=\"removeDemoData()\"><mat-icon>delete</mat-icon> Remove demo data</button>\n    </div>\n  </mat-card>\n\n</div>\n\n<!-- Projected into the expanded checklist body: predefined roles picker on the roles step (v2) -->\n<ng-template #stepExtrasTpl let-item>\n  <div class=\"role-templates\" *ngIf=\"hasRoleTemplates(item.data) && roleTemplates.length > 0\">\n    <div class=\"role-template\" *ngFor=\"let tpl of roleTemplates\" [class.created]=\"tpl.exists\" [class.selected]=\"!tpl.exists && selectedTemplates[tpl.key]\" (click)=\"toggleTemplate(tpl)\">\n      <div class=\"role-head\">\n        <mat-icon class=\"role-state\" [class.on]=\"tpl.exists || selectedTemplates[tpl.key]\">{{ (tpl.exists || selectedTemplates[tpl.key]) ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        <span class=\"role-name\">{{ tpl.name }}</span>\n        <span class=\"role-created\" *ngIf=\"tpl.exists\"><mat-icon>check</mat-icon>Created</span>\n      </div>\n      <div class=\"role-description\">{{ tpl.description }}</div>\n    </div>\n  </div>\n\n  <!-- Added (presets): the preset picker. Same row as the role picker above \u2014 same state icon, same 8px stack,\n       same colours \u2014 plus ONE sentence and ONE control.\n       Changed (presets P4): rendered through ONE shared template for both the notification step and the sign-off\n       step, parameterised by the picker object. The two sit one above the other on the same page, so a second\n       near-identical block would drift and every difference would read as a mistake. -->\n  <ng-container *ngIf=\"pickerFor(item.data) as picker\">\n    <ng-container *ngTemplateOutlet=\"presetPickerTpl; context: { $implicit: picker }\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<!-- The one picker body. `picker` carries the domain: its rows, its roles, its wording, its apply call. -->\n<ng-template #presetPickerTpl let-picker>\n  <div class=\"preset-picker\" *ngIf=\"picker.loaded && picker.presets.length > 0\">\n\n    <!-- No selectable role \u2192 we ask for one instead of offering ticks that would build an inert rule. The wording\n         is the picker's own, because \"no roles\" and \"roles nobody is in\" are different situations. -->\n    <div class=\"preset-empty\" *ngIf=\"picker.roles.length === 0\">{{ picker.emptyText }}</div>\n\n    <ng-container *ngIf=\"picker.roles.length > 0\">\n      <div class=\"preset-section\" *ngFor=\"let pgroup of picker.groups\">\n        <div class=\"preset-section-head\">\n          <span class=\"preset-section-name\">{{ pgroup.name }}</span>\n          <span class=\"preset-section-count\">{{ pgroup.on }} of {{ pgroup.total }}</span>\n        </div>\n        <div class=\"preset-row\" *ngFor=\"let row of pgroup.rows\" role=\"checkbox\" tabindex=\"0\"\n             [class.configured]=\"row.preset.exists\" [class.selected]=\"!row.preset.exists && picker.selected[row.preset.key]\"\n             [attr.aria-checked]=\"row.preset.exists || !!picker.selected[row.preset.key]\" [attr.aria-disabled]=\"row.preset.exists\"\n             (click)=\"togglePreset(picker, row.preset)\"\n             (keydown.enter)=\"togglePreset(picker, row.preset)\"\n             (keydown.space)=\"togglePreset(picker, row.preset); $event.preventDefault()\">\n          <div class=\"preset-head\">\n            <mat-icon class=\"preset-state\" [class.on]=\"row.preset.exists || picker.selected[row.preset.key]\">{{ (row.preset.exists || picker.selected[row.preset.key]) ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n            <span class=\"preset-name\">{{ row.preset.name }}</span>\n            <span class=\"preset-configured\" *ngIf=\"row.preset.exists\"><mat-icon>check</mat-icon>Configured</span>\n          </div>\n          <div class=\"preset-description\">{{ row.preset.description }}</div>\n          <!-- The effect sentence comes from the server whole; `before` and `after` are its two halves either side\n               of the {role} placeholder, so reading the line IS reading the configuration. The sign-off sentences\n               carry their own deferred-notification caveat, which is why there is no extra note here. -->\n          <div class=\"preset-effect\" *ngIf=\"!row.preset.exists\">{{ row.before }}<select class=\"preset-role\" [attr.aria-label]=\"picker.roleAria + row.preset.name\"\n                    (click)=\"$event.stopPropagation()\"\n                    (keydown)=\"$event.stopPropagation()\"\n                    (change)=\"setPresetRole(picker, row.preset, $any($event.target).value)\">\n              <option *ngFor=\"let role of picker.roles\" [value]=\"role.value\" [selected]=\"role.value === picker.role[row.preset.key]\">{{ role.name }}</option>\n            </select>{{ row.after }}</div>\n          <div class=\"preset-effect preset-done\" *ngIf=\"row.preset.exists\">{{ picker.doneText }}</div>\n        </div>\n      </div>\n\n      <!-- One page-level channel choice, notifications only. In-app is the only channel that always works; SMS is a\n           stub and is never offered; an approval request is always in-app, so the sign-off picker has no such line. -->\n      <div class=\"preset-email\" *ngIf=\"picker.showEmail\" role=\"checkbox\" tabindex=\"0\" [attr.aria-checked]=\"includeEmail\"\n           (click)=\"toggleIncludeEmail()\"\n           (keydown.enter)=\"toggleIncludeEmail()\"\n           (keydown.space)=\"toggleIncludeEmail(); $event.preventDefault()\">\n        <mat-icon class=\"preset-state\" [class.on]=\"includeEmail\">{{ includeEmail ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <span class=\"preset-email-label\">Also send these by email</span>\n        <span class=\"preset-email-hint\">In-app always. Email needs your mail settings.</span>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Graceful empty state (feature disabled or status unavailable) -->\n<div class=\"setup-empty\" *ngIf=\"!status\">\n  <mat-icon>rocket_launch</mat-icon>\n  <p>Setup status is not available yet.</p>\n</div>\n", styles: [".setup-page{max-width:860px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.setup-hero{padding:24px}.hero-content{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.hero-text h1{margin:0 0 4px;font-size:24px}.hero-text p{margin:0 0 8px;color:#0009}.hero-counter{font-size:13px;color:#0009}.hero-progress{flex:1;min-width:220px;max-width:340px}.hero-percent{display:block;font-size:28px;font-weight:600;color:#2e7d32;margin-bottom:6px;text-align:right}.hero-progress mat-progress-bar{height:10px;border-radius:5px}.setup-hero.celebrate{background:linear-gradient(135deg,#e8f5e9,#f1f8e9)}.celebration{justify-content:flex-start}.celebrate-icon{font-size:48px;width:48px;height:48px;color:#2e7d32;animation:celebrate-pop .6s ease-out}@keyframes celebrate-pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.setup-group{padding:16px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.group-header h2{margin:0;font-size:17px}.group-counter{font-size:12px;color:#0000008c}.setup-modules{padding:16px}.module-section+.module-section{margin-top:18px}.module-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}.module-section-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0009}.module-section-count{font-size:11px;color:#00000073;white-space:nowrap}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}.module-card{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;opacity:.72;position:relative}.module-card:hover{border-color:#90a4ae}.module-card.enabled{border-color:#4caf50;background:#f6fbf6;opacity:1}.module-card.core{cursor:default}.module-card.busy{pointer-events:none;opacity:.5}.module-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.module-icon{color:#546e7a}.module-card.enabled .module-icon{color:#2e7d32}.module-state{color:#b0bec5}.module-state.on{color:#4caf50}.module-title{font-weight:600;font-size:14px;margin-bottom:4px}.module-description{font-size:12px;color:#0009;min-height:30px}.module-chip{display:inline-block;margin-top:8px;background:#eceff1;color:#546e7a;border-radius:12px;padding:2px 10px;font-size:11px}.module-actions{display:flex;align-items:center;gap:8px 12px;margin-top:14px;flex-wrap:wrap}.module-actions button{flex-shrink:0}.module-hint{font-size:12px;color:#0000008c}.role-templates{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}.role-template{border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}.role-template:hover{border-color:#90a4ae}.role-template.selected{border-color:#4caf50;background:#f6fbf6}.role-template.created{background:#f6fbf6;border-color:#c8e6c9;cursor:default}.role-head{display:flex;align-items:center;gap:8px}.role-state{color:#b0bec5;flex-shrink:0}.role-state.on{color:#4caf50}.role-name{font-weight:500;font-size:13px}.role-created{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#2e7d32}.role-created mat-icon{font-size:16px;width:16px;height:16px}.role-description{font-size:12px;color:#0009;margin:2px 0 0 32px}.preset-picker{display:flex;flex-direction:column;gap:14px;margin:0 0 12px}.preset-empty{font-size:12px;line-height:18px;color:#0009;max-width:62ch}.preset-section{display:flex;flex-direction:column;gap:8px}.preset-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}.preset-section-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0009}.preset-section-count{font-size:11px;color:#00000073;white-space:nowrap}.preset-row{border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}.preset-row:hover{border-color:#90a4ae}.preset-row:focus-visible{outline:2px solid #4caf50;outline-offset:2px}.preset-row.selected{border-color:#4caf50;background:#f6fbf6}.preset-row.configured{background:#f6fbf6;border-color:#c8e6c9;cursor:default}.preset-head{display:flex;align-items:center;gap:8px}.preset-state{color:#b0bec5;flex-shrink:0}.preset-state.on{color:#4caf50}.preset-name{font-weight:500;font-size:13px}.preset-configured{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#2e7d32;white-space:nowrap}.preset-configured mat-icon{font-size:16px;width:16px;height:16px}.preset-description{font-size:12px;color:#0009;margin:2px 0 0 32px}.preset-effect{font-size:12px;line-height:22px;color:#000000c7;margin:4px 0 0 32px}.preset-done{color:#2e7d32}.preset-role{font-family:inherit;font-size:12px;font-weight:500;color:#2e7d32;background:#fff;border:1px solid #c8e6c9;border-radius:6px;padding:2px 4px;margin:0 2px;max-width:100%;cursor:pointer}.preset-role:hover{border-color:#4caf50}.preset-role:focus-visible{outline:2px solid #4caf50;outline-offset:1px}.preset-email{display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer;padding:2px 0}.preset-email:focus-visible{outline:2px solid #4caf50;outline-offset:2px;border-radius:6px}.preset-email-label{font-size:13px;font-weight:500}.preset-email-hint{font-size:12px;color:#0000008c}.setup-empty{text-align:center;padding:48px 16px;color:#00000080}.setup-empty mat-icon{font-size:40px;width:40px;height:40px}.demo-description{margin:8px 0 14px;font-size:13px;color:#0009}.demo-actions{display:flex;gap:12px;flex-wrap:wrap}@media (max-width: 700px){.module-hint{flex:0 0 100%}.preset-role{display:block;width:100%;margin:4px 0 0;padding:6px 8px}.preset-email-hint{flex:0 0 100%}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: ChecklistComponent, selector: "spa-checklist", inputs: ["config", "itemTemplate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SetupGuideComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-setup-guide', standalone: false, template: "<div class=\"setup-page\" *ngIf=\"status\">\n\n  <!-- Hero: overall readiness + celebration state at 100% -->\n  <mat-card class=\"setup-hero\" [class.celebrate]=\"status.percent === 100\">\n    <div class=\"hero-content\" *ngIf=\"status.percent < 100\">\n      <div class=\"hero-text\">\n        <h1>{{ title }}</h1>\n        <p>Complete these steps to get your system ready for day-to-day operation.</p>\n        <span class=\"hero-counter\">{{ status.completed }} of {{ status.total }} steps completed</span>\n      </div>\n      <div class=\"hero-progress\">\n        <span class=\"hero-percent\">{{ status.percent }}%</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"status.percent\"></mat-progress-bar>\n      </div>\n    </div>\n    <div class=\"hero-content celebration\" *ngIf=\"status.percent === 100\">\n      <mat-icon class=\"celebrate-icon\">celebration</mat-icon>\n      <div class=\"hero-text\">\n        <h1>You're all set!</h1>\n        <p>All setup steps are complete \u2014 your system is ready to operate.</p>\n      </div>\n    </div>\n  </mat-card>\n\n  <!-- Module picker (v2): choose what the business uses; optional modules toggle steps + menus -->\n  <mat-card class=\"setup-modules\" *ngIf=\"modules.length > 0\">\n    <div class=\"group-header\">\n      <h2>Your modules</h2>\n      <span class=\"group-counter\">Tap a module to turn it on or off \u2014 you can change this anytime.</span>\n    </div>\n    <!-- Changed (v3): grouped \u2014 the picker now carries the whole library catalog, so cards sit under their\n         group heading (the app's own modules first). A backend without groups yields one unnamed group,\n         which renders as the original flat grid. -->\n    <div class=\"module-section\" *ngFor=\"let mgroup of moduleGroups\">\n      <div class=\"module-section-head\">\n        <span class=\"module-section-name\">{{ mgroup.name }}</span>\n        <span class=\"module-section-count\">{{ mgroup.enabled }} of {{ mgroup.total }} on</span>\n      </div>\n      <div class=\"module-grid\">\n        <div class=\"module-card\" *ngFor=\"let mod of mgroup.modules\"\n             [class.enabled]=\"mod.enabled\" [class.core]=\"mod.core\" [class.busy]=\"togglingKey === mod.key\"\n             (click)=\"toggleModule(mod)\">\n          <div class=\"module-head\">\n            <mat-icon class=\"module-icon\">{{ mod.icon || 'extension' }}</mat-icon>\n            <mat-icon class=\"module-state\" [class.on]=\"mod.enabled\">{{ mod.enabled ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n          </div>\n          <div class=\"module-title\">{{ mod.title }}</div>\n          <div class=\"module-description\">{{ mod.description }}</div>\n          <span class=\"module-chip\" *ngIf=\"mod.core\">Always on</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"module-actions\" *ngIf=\"!modulesConfirmed\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"togglingKey !== ''\" (click)=\"confirmModules()\">Confirm selection</button>\n      <span class=\"module-hint\">Happy with this selection? Confirm it to complete the step below.</span>\n    </div>\n  </mat-card>\n\n  <!-- Category groups, top-down \u2014 Changed: flat spa-checklist replaces the raised mat-accordion -->\n  <mat-card class=\"setup-group\" *ngFor=\"let group of groups\">\n    <div class=\"group-header\">\n      <h2>{{ group.name }}</h2>\n      <span class=\"group-counter\">{{ group.completed }} of {{ group.total }}</span>\n    </div>\n    <spa-checklist [config]=\"group.config\" [itemTemplate]=\"stepExtrasTpl\"></spa-checklist>\n  </mat-card>\n\n  <!-- Demo data (opt-in via setupConfig.demoData) \u2014 moved here off the per-app configuration pages -->\n  <mat-card class=\"setup-group setup-demo\" *ngIf=\"showDemoData\">\n    <div class=\"group-header\">\n      <h2>Demo data</h2>\n      <span class=\"group-counter\">Explore with example records, then clear them out</span>\n    </div>\n    <p class=\"demo-description\">Seeding fills the system with example records so you can try it out before capturing anything real. Removing deletes only those example records.</p>\n    <div class=\"demo-actions\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"demoBusy\" (click)=\"seedDemoData()\"><mat-icon>add_circle</mat-icon> Seed demo data</button>\n      <button mat-stroked-button color=\"warn\" [disabled]=\"demoBusy\" (click)=\"removeDemoData()\"><mat-icon>delete</mat-icon> Remove demo data</button>\n    </div>\n  </mat-card>\n\n</div>\n\n<!-- Projected into the expanded checklist body: predefined roles picker on the roles step (v2) -->\n<ng-template #stepExtrasTpl let-item>\n  <div class=\"role-templates\" *ngIf=\"hasRoleTemplates(item.data) && roleTemplates.length > 0\">\n    <div class=\"role-template\" *ngFor=\"let tpl of roleTemplates\" [class.created]=\"tpl.exists\" [class.selected]=\"!tpl.exists && selectedTemplates[tpl.key]\" (click)=\"toggleTemplate(tpl)\">\n      <div class=\"role-head\">\n        <mat-icon class=\"role-state\" [class.on]=\"tpl.exists || selectedTemplates[tpl.key]\">{{ (tpl.exists || selectedTemplates[tpl.key]) ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        <span class=\"role-name\">{{ tpl.name }}</span>\n        <span class=\"role-created\" *ngIf=\"tpl.exists\"><mat-icon>check</mat-icon>Created</span>\n      </div>\n      <div class=\"role-description\">{{ tpl.description }}</div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Graceful empty state (feature disabled or status unavailable) -->\n<div class=\"setup-empty\" *ngIf=\"!status\">\n  <mat-icon>rocket_launch</mat-icon>\n  <p>Setup status is not available yet.</p>\n</div>\n", styles: [".setup-page{max-width:860px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.setup-hero{padding:24px}.hero-content{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.hero-text h1{margin:0 0 4px;font-size:24px}.hero-text p{margin:0 0 8px;color:#0009}.hero-counter{font-size:13px;color:#0009}.hero-progress{flex:1;min-width:220px;max-width:340px}.hero-percent{display:block;font-size:28px;font-weight:600;color:#2e7d32;margin-bottom:6px;text-align:right}.hero-progress mat-progress-bar{height:10px;border-radius:5px}.setup-hero.celebrate{background:linear-gradient(135deg,#e8f5e9,#f1f8e9)}.celebration{justify-content:flex-start}.celebrate-icon{font-size:48px;width:48px;height:48px;color:#2e7d32;animation:celebrate-pop .6s ease-out}@keyframes celebrate-pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.setup-group{padding:16px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.group-header h2{margin:0;font-size:17px}.group-counter{font-size:12px;color:#0000008c}.setup-modules{padding:16px}.module-section+.module-section{margin-top:18px}.module-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}.module-section-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0009}.module-section-count{font-size:11px;color:#00000073;white-space:nowrap}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}.module-card{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;opacity:.72;position:relative}.module-card:hover{border-color:#90a4ae}.module-card.enabled{border-color:#4caf50;background:#f6fbf6;opacity:1}.module-card.core{cursor:default}.module-card.busy{pointer-events:none;opacity:.5}.module-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.module-icon{color:#546e7a}.module-card.enabled .module-icon{color:#2e7d32}.module-state{color:#b0bec5}.module-state.on{color:#4caf50}.module-title{font-weight:600;font-size:14px;margin-bottom:4px}.module-description{font-size:12px;color:#0009;min-height:30px}.module-chip{display:inline-block;margin-top:8px;background:#eceff1;color:#546e7a;border-radius:12px;padding:2px 10px;font-size:11px}.module-actions{display:flex;align-items:center;gap:8px 12px;margin-top:14px;flex-wrap:wrap}.module-actions button{flex-shrink:0}.module-hint{font-size:12px;color:#0000008c}.role-templates{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}.role-template{border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}.role-template:hover{border-color:#90a4ae}.role-template.selected{border-color:#4caf50;background:#f6fbf6}.role-template.created{background:#f6fbf6;border-color:#c8e6c9;cursor:default}.role-head{display:flex;align-items:center;gap:8px}.role-state{color:#b0bec5;flex-shrink:0}.role-state.on{color:#4caf50}.role-name{font-weight:500;font-size:13px}.role-created{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#2e7d32}.role-created mat-icon{font-size:16px;width:16px;height:16px}.role-description{font-size:12px;color:#0009;margin:2px 0 0 32px}.setup-empty{text-align:center;padding:48px 16px;color:#00000080}.setup-empty mat-icon{font-size:40px;width:40px;height:40px}.demo-description{margin:8px 0 14px;font-size:13px;color:#0009}.demo-actions{display:flex;gap:12px;flex-wrap:wrap}@media (max-width: 700px){.module-hint{flex:0 0 100%}}\n"] }]
+            args: [{ selector: 'spa-setup-guide', standalone: false, template: "<div class=\"setup-page\" *ngIf=\"status\">\n\n  <!-- Hero: overall readiness + celebration state at 100% -->\n  <mat-card class=\"setup-hero\" [class.celebrate]=\"status.percent === 100\">\n    <div class=\"hero-content\" *ngIf=\"status.percent < 100\">\n      <div class=\"hero-text\">\n        <h1>{{ title }}</h1>\n        <p>Complete these steps to get your system ready for day-to-day operation.</p>\n        <span class=\"hero-counter\">{{ status.completed }} of {{ status.total }} steps completed</span>\n      </div>\n      <div class=\"hero-progress\">\n        <span class=\"hero-percent\">{{ status.percent }}%</span>\n        <mat-progress-bar mode=\"determinate\" [value]=\"status.percent\"></mat-progress-bar>\n      </div>\n    </div>\n    <div class=\"hero-content celebration\" *ngIf=\"status.percent === 100\">\n      <mat-icon class=\"celebrate-icon\">celebration</mat-icon>\n      <div class=\"hero-text\">\n        <h1>You're all set!</h1>\n        <p>All setup steps are complete \u2014 your system is ready to operate.</p>\n      </div>\n    </div>\n  </mat-card>\n\n  <!-- Module picker (v2): choose what the business uses; optional modules toggle steps + menus -->\n  <mat-card class=\"setup-modules\" *ngIf=\"modules.length > 0\">\n    <div class=\"group-header\">\n      <h2>Your modules</h2>\n      <span class=\"group-counter\">Tap a module to turn it on or off \u2014 you can change this anytime.</span>\n    </div>\n    <!-- Changed (v3): grouped \u2014 the picker now carries the whole library catalog, so cards sit under their\n         group heading (the app's own modules first). A backend without groups yields one unnamed group,\n         which renders as the original flat grid. -->\n    <div class=\"module-section\" *ngFor=\"let mgroup of moduleGroups\">\n      <div class=\"module-section-head\">\n        <span class=\"module-section-name\">{{ mgroup.name }}</span>\n        <span class=\"module-section-count\">{{ mgroup.enabled }} of {{ mgroup.total }} on</span>\n      </div>\n      <div class=\"module-grid\">\n        <div class=\"module-card\" *ngFor=\"let mod of mgroup.modules\"\n             [class.enabled]=\"mod.enabled\" [class.core]=\"mod.core\" [class.busy]=\"togglingKey === mod.key\"\n             (click)=\"toggleModule(mod)\">\n          <div class=\"module-head\">\n            <mat-icon class=\"module-icon\">{{ mod.icon || 'extension' }}</mat-icon>\n            <mat-icon class=\"module-state\" [class.on]=\"mod.enabled\">{{ mod.enabled ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n          </div>\n          <div class=\"module-title\">{{ mod.title }}</div>\n          <div class=\"module-description\">{{ mod.description }}</div>\n          <span class=\"module-chip\" *ngIf=\"mod.core\">Always on</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"module-actions\" *ngIf=\"!modulesConfirmed\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"togglingKey !== ''\" (click)=\"confirmModules()\">Confirm selection</button>\n      <span class=\"module-hint\">Happy with this selection? Confirm it to complete the step below.</span>\n    </div>\n  </mat-card>\n\n  <!-- Category groups, top-down \u2014 Changed: flat spa-checklist replaces the raised mat-accordion -->\n  <mat-card class=\"setup-group\" *ngFor=\"let group of groups\">\n    <div class=\"group-header\">\n      <h2>{{ group.name }}</h2>\n      <span class=\"group-counter\">{{ group.completed }} of {{ group.total }}</span>\n    </div>\n    <spa-checklist [config]=\"group.config\" [itemTemplate]=\"stepExtrasTpl\"></spa-checklist>\n  </mat-card>\n\n  <!-- Demo data (opt-in via setupConfig.demoData) \u2014 moved here off the per-app configuration pages -->\n  <mat-card class=\"setup-group setup-demo\" *ngIf=\"showDemoData\">\n    <div class=\"group-header\">\n      <h2>Demo data</h2>\n      <span class=\"group-counter\">Explore with example records, then clear them out</span>\n    </div>\n    <p class=\"demo-description\">Seeding fills the system with example records so you can try it out before capturing anything real. Removing deletes only those example records.</p>\n    <div class=\"demo-actions\">\n      <button mat-flat-button color=\"primary\" [disabled]=\"demoBusy\" (click)=\"seedDemoData()\"><mat-icon>add_circle</mat-icon> Seed demo data</button>\n      <button mat-stroked-button color=\"warn\" [disabled]=\"demoBusy\" (click)=\"removeDemoData()\"><mat-icon>delete</mat-icon> Remove demo data</button>\n    </div>\n  </mat-card>\n\n</div>\n\n<!-- Projected into the expanded checklist body: predefined roles picker on the roles step (v2) -->\n<ng-template #stepExtrasTpl let-item>\n  <div class=\"role-templates\" *ngIf=\"hasRoleTemplates(item.data) && roleTemplates.length > 0\">\n    <div class=\"role-template\" *ngFor=\"let tpl of roleTemplates\" [class.created]=\"tpl.exists\" [class.selected]=\"!tpl.exists && selectedTemplates[tpl.key]\" (click)=\"toggleTemplate(tpl)\">\n      <div class=\"role-head\">\n        <mat-icon class=\"role-state\" [class.on]=\"tpl.exists || selectedTemplates[tpl.key]\">{{ (tpl.exists || selectedTemplates[tpl.key]) ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n        <span class=\"role-name\">{{ tpl.name }}</span>\n        <span class=\"role-created\" *ngIf=\"tpl.exists\"><mat-icon>check</mat-icon>Created</span>\n      </div>\n      <div class=\"role-description\">{{ tpl.description }}</div>\n    </div>\n  </div>\n\n  <!-- Added (presets): the preset picker. Same row as the role picker above \u2014 same state icon, same 8px stack,\n       same colours \u2014 plus ONE sentence and ONE control.\n       Changed (presets P4): rendered through ONE shared template for both the notification step and the sign-off\n       step, parameterised by the picker object. The two sit one above the other on the same page, so a second\n       near-identical block would drift and every difference would read as a mistake. -->\n  <ng-container *ngIf=\"pickerFor(item.data) as picker\">\n    <ng-container *ngTemplateOutlet=\"presetPickerTpl; context: { $implicit: picker }\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<!-- The one picker body. `picker` carries the domain: its rows, its roles, its wording, its apply call. -->\n<ng-template #presetPickerTpl let-picker>\n  <div class=\"preset-picker\" *ngIf=\"picker.loaded && picker.presets.length > 0\">\n\n    <!-- No selectable role \u2192 we ask for one instead of offering ticks that would build an inert rule. The wording\n         is the picker's own, because \"no roles\" and \"roles nobody is in\" are different situations. -->\n    <div class=\"preset-empty\" *ngIf=\"picker.roles.length === 0\">{{ picker.emptyText }}</div>\n\n    <ng-container *ngIf=\"picker.roles.length > 0\">\n      <div class=\"preset-section\" *ngFor=\"let pgroup of picker.groups\">\n        <div class=\"preset-section-head\">\n          <span class=\"preset-section-name\">{{ pgroup.name }}</span>\n          <span class=\"preset-section-count\">{{ pgroup.on }} of {{ pgroup.total }}</span>\n        </div>\n        <div class=\"preset-row\" *ngFor=\"let row of pgroup.rows\" role=\"checkbox\" tabindex=\"0\"\n             [class.configured]=\"row.preset.exists\" [class.selected]=\"!row.preset.exists && picker.selected[row.preset.key]\"\n             [attr.aria-checked]=\"row.preset.exists || !!picker.selected[row.preset.key]\" [attr.aria-disabled]=\"row.preset.exists\"\n             (click)=\"togglePreset(picker, row.preset)\"\n             (keydown.enter)=\"togglePreset(picker, row.preset)\"\n             (keydown.space)=\"togglePreset(picker, row.preset); $event.preventDefault()\">\n          <div class=\"preset-head\">\n            <mat-icon class=\"preset-state\" [class.on]=\"row.preset.exists || picker.selected[row.preset.key]\">{{ (row.preset.exists || picker.selected[row.preset.key]) ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n            <span class=\"preset-name\">{{ row.preset.name }}</span>\n            <span class=\"preset-configured\" *ngIf=\"row.preset.exists\"><mat-icon>check</mat-icon>Configured</span>\n          </div>\n          <div class=\"preset-description\">{{ row.preset.description }}</div>\n          <!-- The effect sentence comes from the server whole; `before` and `after` are its two halves either side\n               of the {role} placeholder, so reading the line IS reading the configuration. The sign-off sentences\n               carry their own deferred-notification caveat, which is why there is no extra note here. -->\n          <div class=\"preset-effect\" *ngIf=\"!row.preset.exists\">{{ row.before }}<select class=\"preset-role\" [attr.aria-label]=\"picker.roleAria + row.preset.name\"\n                    (click)=\"$event.stopPropagation()\"\n                    (keydown)=\"$event.stopPropagation()\"\n                    (change)=\"setPresetRole(picker, row.preset, $any($event.target).value)\">\n              <option *ngFor=\"let role of picker.roles\" [value]=\"role.value\" [selected]=\"role.value === picker.role[row.preset.key]\">{{ role.name }}</option>\n            </select>{{ row.after }}</div>\n          <div class=\"preset-effect preset-done\" *ngIf=\"row.preset.exists\">{{ picker.doneText }}</div>\n        </div>\n      </div>\n\n      <!-- One page-level channel choice, notifications only. In-app is the only channel that always works; SMS is a\n           stub and is never offered; an approval request is always in-app, so the sign-off picker has no such line. -->\n      <div class=\"preset-email\" *ngIf=\"picker.showEmail\" role=\"checkbox\" tabindex=\"0\" [attr.aria-checked]=\"includeEmail\"\n           (click)=\"toggleIncludeEmail()\"\n           (keydown.enter)=\"toggleIncludeEmail()\"\n           (keydown.space)=\"toggleIncludeEmail(); $event.preventDefault()\">\n        <mat-icon class=\"preset-state\" [class.on]=\"includeEmail\">{{ includeEmail ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n        <span class=\"preset-email-label\">Also send these by email</span>\n        <span class=\"preset-email-hint\">In-app always. Email needs your mail settings.</span>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n\n<!-- Graceful empty state (feature disabled or status unavailable) -->\n<div class=\"setup-empty\" *ngIf=\"!status\">\n  <mat-icon>rocket_launch</mat-icon>\n  <p>Setup status is not available yet.</p>\n</div>\n", styles: [".setup-page{max-width:860px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.setup-hero{padding:24px}.hero-content{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.hero-text h1{margin:0 0 4px;font-size:24px}.hero-text p{margin:0 0 8px;color:#0009}.hero-counter{font-size:13px;color:#0009}.hero-progress{flex:1;min-width:220px;max-width:340px}.hero-percent{display:block;font-size:28px;font-weight:600;color:#2e7d32;margin-bottom:6px;text-align:right}.hero-progress mat-progress-bar{height:10px;border-radius:5px}.setup-hero.celebrate{background:linear-gradient(135deg,#e8f5e9,#f1f8e9)}.celebration{justify-content:flex-start}.celebrate-icon{font-size:48px;width:48px;height:48px;color:#2e7d32;animation:celebrate-pop .6s ease-out}@keyframes celebrate-pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.setup-group{padding:16px}.group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.group-header h2{margin:0;font-size:17px}.group-counter{font-size:12px;color:#0000008c}.setup-modules{padding:16px}.module-section+.module-section{margin-top:18px}.module-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}.module-section-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0009}.module-section-count{font-size:11px;color:#00000073;white-space:nowrap}.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}.module-card{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;opacity:.72;position:relative}.module-card:hover{border-color:#90a4ae}.module-card.enabled{border-color:#4caf50;background:#f6fbf6;opacity:1}.module-card.core{cursor:default}.module-card.busy{pointer-events:none;opacity:.5}.module-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.module-icon{color:#546e7a}.module-card.enabled .module-icon{color:#2e7d32}.module-state{color:#b0bec5}.module-state.on{color:#4caf50}.module-title{font-weight:600;font-size:14px;margin-bottom:4px}.module-description{font-size:12px;color:#0009;min-height:30px}.module-chip{display:inline-block;margin-top:8px;background:#eceff1;color:#546e7a;border-radius:12px;padding:2px 10px;font-size:11px}.module-actions{display:flex;align-items:center;gap:8px 12px;margin-top:14px;flex-wrap:wrap}.module-actions button{flex-shrink:0}.module-hint{font-size:12px;color:#0000008c}.role-templates{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}.role-template{border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}.role-template:hover{border-color:#90a4ae}.role-template.selected{border-color:#4caf50;background:#f6fbf6}.role-template.created{background:#f6fbf6;border-color:#c8e6c9;cursor:default}.role-head{display:flex;align-items:center;gap:8px}.role-state{color:#b0bec5;flex-shrink:0}.role-state.on{color:#4caf50}.role-name{font-weight:500;font-size:13px}.role-created{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#2e7d32}.role-created mat-icon{font-size:16px;width:16px;height:16px}.role-description{font-size:12px;color:#0009;margin:2px 0 0 32px}.preset-picker{display:flex;flex-direction:column;gap:14px;margin:0 0 12px}.preset-empty{font-size:12px;line-height:18px;color:#0009;max-width:62ch}.preset-section{display:flex;flex-direction:column;gap:8px}.preset-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(0,0,0,.08)}.preset-section-name{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0009}.preset-section-count{font-size:11px;color:#00000073;white-space:nowrap}.preset-row{border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}.preset-row:hover{border-color:#90a4ae}.preset-row:focus-visible{outline:2px solid #4caf50;outline-offset:2px}.preset-row.selected{border-color:#4caf50;background:#f6fbf6}.preset-row.configured{background:#f6fbf6;border-color:#c8e6c9;cursor:default}.preset-head{display:flex;align-items:center;gap:8px}.preset-state{color:#b0bec5;flex-shrink:0}.preset-state.on{color:#4caf50}.preset-name{font-weight:500;font-size:13px}.preset-configured{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#2e7d32;white-space:nowrap}.preset-configured mat-icon{font-size:16px;width:16px;height:16px}.preset-description{font-size:12px;color:#0009;margin:2px 0 0 32px}.preset-effect{font-size:12px;line-height:22px;color:#000000c7;margin:4px 0 0 32px}.preset-done{color:#2e7d32}.preset-role{font-family:inherit;font-size:12px;font-weight:500;color:#2e7d32;background:#fff;border:1px solid #c8e6c9;border-radius:6px;padding:2px 4px;margin:0 2px;max-width:100%;cursor:pointer}.preset-role:hover{border-color:#4caf50}.preset-role:focus-visible{outline:2px solid #4caf50;outline-offset:1px}.preset-email{display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer;padding:2px 0}.preset-email:focus-visible{outline:2px solid #4caf50;outline-offset:2px;border-radius:6px}.preset-email-label{font-size:13px;font-weight:500}.preset-email-hint{font-size:12px;color:#0000008c}.setup-empty{text-align:center;padding:48px 16px;color:#00000080}.setup-empty mat-icon{font-size:40px;width:40px;height:40px}.demo-description{margin:8px 0 14px;font-size:13px;color:#0009}.demo-actions{display:flex;gap:12px;flex-wrap:wrap}@media (max-width: 700px){.module-hint{flex:0 0 100%}.preset-role{display:block;width:100%;margin:4px 0 0;padding:6px 8px}.preset-email-hint{flex:0 0 100%}}\n"] }]
         }] });
 
 // Quiet Loading — perceived-progress engine (FSD D1).
@@ -12751,7 +13496,7 @@ class DateComponent {
         return "";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DateComponent, isStandalone: false, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width", suffix: "suffix", infoMessage: "infoMessage", copyContent: "copyContent", clearContent: "clearContent" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Changed: Added mouse events for hover tracking, click handler for opening picker, and spa-suffix component -->\n<mat-form-field [class.spa-readonly]=\"readonly\" [ngStyle]=\"{'width':width ?? '100%'}\" subscriptSizing=\"dynamic\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <mat-label>{{display}}</mat-label>\n  <input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\" (click)=\"onInputClick(picker_date)\">\n  <mat-datepicker #picker_date></mat-datepicker>\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n      <div matSuffix class=\"suffix-icons\">\n        <mat-datepicker-toggle [for]=\"picker_date\"></mat-datepicker-toggle>\n        <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\n      </div>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DateComponent, isStandalone: false, selector: "spa-date", inputs: { required: "required", min: "min", max: "max", readonly: "readonly", hint: "hint", value: "value", display: "display", placeholder: "placeholder", width: "width", suffix: "suffix", infoMessage: "infoMessage", copyContent: "copyContent", clearContent: "clearContent" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Changed: Added mouse events for hover tracking, click handler for opening picker, and spa-suffix component -->\n<mat-form-field [class.spa-readonly]=\"readonly\" [ngStyle]=\"{'width':width ?? '100%'}\" subscriptSizing=\"dynamic\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n  <mat-label>{{display}}</mat-label>\n  <input [formControl]=\"control\" [min]=\"minDate.value\" [max]=\"maxDate.value\" matInput [matDatepicker]=\"picker_date\" (dateInput)=\"onChangeEvent()\" [placeholder]=\"display\" [readonly]=\"true\" (click)=\"onInputClick(picker_date)\">\n  <mat-datepicker #picker_date></mat-datepicker>\n  <mat-error *ngIf=\"control.invalid\">{{validate(control)}}</mat-error>\n      <div matSuffix class=\"suffix-icons\">\n        <mat-datepicker-toggle [for]=\"picker_date\"></mat-datepicker-toggle>\n        <spa-suffix [label]=\"suffix\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [clearContent]=\"clearContent\" [isHovered]=\"isHovered\" [(value)]=\"value\"></spa-suffix>\n      </div>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: SuffixComponent, selector: "spa-suffix", inputs: ["label", "infoMessage", "copyContent", "isHovered", "clearContent", "value"], outputs: ["infoClick", "copyClick", "clearClick", "valueChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
@@ -13525,7 +14270,7 @@ class EditorComponent {
         this.valueChange.emit(val);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: EditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: EditorComponent, isStandalone: false, selector: "spa-editor", inputs: { display: "display", value: "value", readonly: "readonly", required: "required", hint: "hint", infoMessage: "infoMessage", placeholder: "placeholder", width: "width", height: "height", minHeight: "minHeight", defaultFontName: "defaultFontName", editorConfig: "editorConfig" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Rich-text / WYSIWYG editor field -->\n<div class=\"spa-editor-wrap\" [class.spa-readonly]=\"readonly\" [ngStyle]=\"{'width': width ?? '100%'}\">\n\n  <div class=\"spa-editor-label\" *ngIf=\"display\">\n    <label>{{display}}<span *ngIf=\"required\" class=\"spa-editor-req\"> *</span></label>\n    <mat-icon *ngIf=\"infoMessage\" class=\"spa-editor-info\" matTooltip=\"{{infoMessage}}\" matTooltipPosition=\"above\">info</mat-icon>\n  </div>\n\n  <angular-editor\n    [ngModel]=\"value\"\n    (ngModelChange)=\"changed($event)\"\n    [config]=\"config\"\n    [placeholder]=\"placeholder\">\n  </angular-editor>\n\n  <div class=\"spa-editor-hint\" *ngIf=\"hint\">{{hint}}</div>\n</div>\n", styles: [".spa-editor-wrap{display:block;margin-right:5px;margin-bottom:4px}.spa-editor-label{display:flex;align-items:center;gap:6px;font-size:12px;color:#0009;margin-bottom:4px}.spa-editor-req{color:#f44336}.spa-editor-info{color:#4682b4;font-size:16px;width:16px;height:16px;cursor:help}.spa-editor-hint{font-size:11px;color:#0009;margin-top:2px}.spa-editor-wrap :deep(angular-editor .angular-editor-wrapper),.spa-editor-wrap angular-editor{border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$2.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: EditorComponent, isStandalone: false, selector: "spa-editor", inputs: { display: "display", value: "value", readonly: "readonly", required: "required", hint: "hint", infoMessage: "infoMessage", placeholder: "placeholder", width: "width", height: "height", minHeight: "minHeight", defaultFontName: "defaultFontName", editorConfig: "editorConfig" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Rich-text / WYSIWYG editor field -->\n<div class=\"spa-editor-wrap\" [class.spa-readonly]=\"readonly\" [ngStyle]=\"{'width': width ?? '100%'}\">\n\n  <div class=\"spa-editor-label\" *ngIf=\"display\">\n    <label>{{display}}<span *ngIf=\"required\" class=\"spa-editor-req\"> *</span></label>\n    <mat-icon *ngIf=\"infoMessage\" class=\"spa-editor-info\" matTooltip=\"{{infoMessage}}\" matTooltipPosition=\"above\">info</mat-icon>\n  </div>\n\n  <angular-editor\n    [ngModel]=\"value\"\n    (ngModelChange)=\"changed($event)\"\n    [config]=\"config\"\n    [placeholder]=\"placeholder\">\n  </angular-editor>\n\n  <div class=\"spa-editor-hint\" *ngIf=\"hint\">{{hint}}</div>\n</div>\n", styles: [".spa-editor-wrap{display:block;margin-right:5px;margin-bottom:4px}.spa-editor-label{display:flex;align-items:center;gap:6px;font-size:12px;color:#0009;margin-bottom:4px}.spa-editor-req{color:#f44336}.spa-editor-info{color:#4682b4;font-size:16px;width:16px;height:16px;cursor:help}.spa-editor-hint{font-size:11px;color:#0009;margin-top:2px}.spa-editor-wrap :deep(angular-editor .angular-editor-wrapper),.spa-editor-wrap angular-editor{border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5$1.AngularEditorComponent, selector: "angular-editor", inputs: ["id", "config", "placeholder", "tabIndex"], outputs: ["html", "viewMode", "blur", "focus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
@@ -14142,6 +14887,23 @@ class TilesComponent {
     isHidden(tile) {
         return !Core.isItemVisible(tile, this.data); // Changed: unified visible/hidden replaces hidden + hiddenCondition
     }
+    // Added: the tile figure as it should READ. Returns a primitive (never a new object), so binding it in the
+    // template is safe under OnPush — the no-allocating-getters rule is about object identity, not strings.
+    // Absent Tile.format the value is returned untouched, so every existing tile renders exactly as before.
+    displayValue(tile) {
+        const value = this.data?.[tile.name];
+        if (value === null || value === undefined)
+            return tile.chart ? value : 0; // Changed: preserves the old `?? 0` for non-chart tiles and the old blank for chart tiles
+        if (typeof value !== 'number' || !tile.format)
+            return value;
+        if (tile.format === 'money')
+            return value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+        return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+    }
+    // Added: resolves Tile.color, which may now be a function of the tile data
+    tileColor(tile) {
+        return typeof tile.color === 'function' ? tile.color(this.data) : tile.color;
+    }
     // Changed: Returns true only when data[tile.name] is a displayable primitive and not already shown by the chart
     isTileValuePrimitive(tile) {
         if (tile.chart)
@@ -14306,11 +15068,11 @@ class TilesComponent {
         return [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TilesComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i0.ChangeDetectorRef }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TilesComponent, isStandalone: false, selector: "spa-tiles", inputs: { config: "config", lastSearch: "lastSearch", data: "data", reload: "reload" }, outputs: { tileActionSelected: "tileActionSelected", tileClick: "tileClick", tileUnClick: "tileUnClick" }, viewQueries: [{ propertyName: "tileScroller", first: true, predicate: ["tileScroller"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Tile row layout. THREE modes, and the DEFAULT is the original.\n     'auto' (default, and what every existing page gets): the original bootstrap .row/.col \u2014 tiles stretch to\n     fill and shrink to a 150px floor, wrapping when they run out of room. This is byte-for-byte the markup\n     that shipped before, restored on the owner's instruction 2026-08-08: the grid I briefly made the default\n     forced ONE tile per row on a phone, because a 200px track floor does not fit twice in a ~380px viewport.\n     'wrap': a grid of equal tracks \u2014 opt in where uniform tile widths matter more than filling the row.\n     'carousel': one row, horizontal scroll. The Day Book opts into this.\n     The tile body itself is ONE template shared by all three, so the modes can never drift apart. -->\n\n<!-- AUTO \u2014 the original layout, unchanged -->\n<div *ngIf=\"isAuto\" class=\"d-flex row align-items-center justify-content-between\" [class.hide-value-mobile]=\"hideValueMobile\">\n  <ng-container *ngFor=\"let tile of tiles\">\n    <!-- Changed: tile-clickable class gives pointer + hover lift only on tiles that actually respond to clicks -->\n    <mat-card *ngIf=\"!isHidden(tile)\" class=\"col\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\n      <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n    </mat-card>\n  </ng-container>\n</div>\n\n<!-- WRAP / CAROUSEL \u2014 opt-in only -->\n<div *ngIf=\"!isAuto\" class=\"spa-tiles-outer\">\n\n  <!-- Carousel only: scroll affordances, shown solely when there is something to scroll to -->\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollLeft\" (click)=\"scrollTiles(-1)\" aria-label=\"Scroll tiles left\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n\n  <div #tileScroller class=\"spa-tiles\" [class.tiles-wrap]=\"!isCarousel\" [class.tiles-carousel]=\"isCarousel\" [class.hide-value-mobile]=\"hideValueMobile\" [ngStyle]=\"tilesStyle\" (scroll)=\"onTilesScroll()\">\n    <ng-container *ngFor=\"let tile of tiles\">\n      <mat-card *ngIf=\"!isHidden(tile)\" class=\"tile-card\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" (click)=\"clicked(tile)\">\n        <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n      </mat-card>\n    </ng-container>\n  </div>\n\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollRight\" (click)=\"scrollTiles(1)\" aria-label=\"Scroll tiles right\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n</div>\n\n<!-- The tile body, shared by all three modes. ctx() returns a CACHED context object per tile \u2014 building\n     `{ $implicit: tile }` inline would hand NgTemplateOutlet a new object every change-detection pass and\n     re-create every tile's view, which is the documented cause of a real livelock in this library. -->\n<ng-template #tileBody let-tile>\n\n      <!-- Changed: Chart-style tile \u2014 header, prominent chart, optional value, footer -->\n      <ng-container *ngIf=\"tile.chart; else standardTile\">\n        <!-- Changed: Header with tile name \u2014 left-aligned for better hierarchy -->\n        <div class=\"tile-chart-header\">\n          <span>{{tile.alias ?? tile.name | camelToWords}}</span>\n        </div>\n\n        <!-- Changed: Chart fills tile \u2014 uses helper method for reliable data detection -->\n        <div class=\"tile-chart\" *ngIf=\"hasTileChartData(tile)\" [style.height.px]=\"tile.chart.height ?? 120\">\n          <canvas baseChart\n            [type]=\"tile.chart.type\"\n            [data]=\"getTileMiniChartData(tile)\"\n            [options]=\"getMiniChartOptions(tile)\"\n            [plugins]=\"getTileChartPlugins(tile)\">\n          </canvas>\n        </div>\n\n        <!-- Changed: Optional value display below chart \u2014 only show primitive values, skip chart data objects -->\n        <div class=\"tile-chart-value\" *ngIf=\"tile.name && isTileValuePrimitive(tile)\">\n          <span class=\"tile-chart-value-text\" [style.color]=\"tile.color\">{{tile.prefix ?? ''}}{{data?.[tile.name]}}<span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span></span>\n        </div>\n\n        <!-- Changed: Footer with divider for chart tiles -->\n        <div class=\"tile-footer\" *ngIf=\"tile.footer || tile.info\">\n          <mat-divider></mat-divider>\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px; color: #9a9a9a; font-size: 12px; margin-top: 6px;\">\n            <mat-icon *ngIf=\"tile.footerIcon\" style=\"font-size: 16px; width: 16px; height: 16px;\">{{tile.footerIcon}}</mat-icon>\n            <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" style=\"font-size: 16px; width: 16px; height: 16px; color: steelblue;\">info</mat-icon>\n            <span>{{tile.footer ?? tile.info}}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Changed: Standard tile \u2014 Paper Dashboard style: icon left, label+value right, optional footer -->\n      <ng-template #standardTile>\n        <!-- Changed: Icon-style tile \u2014 icon left, label top-right, large value below -->\n        <ng-container *ngIf=\"tile.icon; else basicTile\">\n          <div class=\"tile-icon-row\">\n            <div class=\"tile-icon-wrap\" [style.color]=\"tile.color ?? '#2196f3'\">\n              <mat-icon>{{tile.icon}}</mat-icon>\n            </div>\n            <div class=\"tile-icon-content\">\n              <div class=\"tile-icon-label\">{{tile.alias ?? tile.name | camelToWords}}</div>\n              <!-- Changed (Quiet Loading D5): while the value is genuinely unknown the slot shows a shimmer chip instead of the old lying `0`; icon, label and footer render normally so the card never resizes. On a reload the previous number stays put and simply updates. -->\n              <div class=\"tile-icon-value\" [style.color]=\"tile.color\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\">\n                <span *ngIf=\"tile.prefix\">{{tile.prefix}}</span><span *ngIf=\"showValueGhost(tile); else iconTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #iconTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template><span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span>\n                <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n              </div>\n            </div>\n          </div>\n          <!-- Changed: Footer with divider \u2014 info tooltip or custom footer text -->\n          <div class=\"tile-icon-footer\" *ngIf=\"tile.info || tile.footer\">\n            <mat-divider></mat-divider>\n            <div class=\"tile-icon-footer-content\">\n              <mat-icon *ngIf=\"tile.footerIcon\" class=\"tile-icon-footer-icon\">{{tile.footerIcon}}</mat-icon>\n              <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" class=\"tile-icon-footer-icon\" style=\"color: steelblue;\">info</mat-icon>\n              <span>{{tile.footer ?? tile.info}}</span>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Basic tile fallback \u2014 centered number display (no icon) -->\n        <ng-template #basicTile>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div style=\"text-align: center;font-size: 30px;\">\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\n              <!-- Changed (Quiet Loading D5): same value ghost as the icon tile \u2014 chip while unknown, real number otherwise -->\n              <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\"><span *ngIf=\"showValueGhost(tile); else basicTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #basicTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template></mat-label>&nbsp;\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\n              <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n            </div>\n          </div>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\n              <mat-label style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\n              <mat-icon *ngIf=\"tile.info\" [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n\n</ng-template>\n", styles: [".card{min-width:180px;flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.spa-tiles-outer{display:flex;align-items:center;gap:4px}.spa-tiles{flex:1;min-width:0}.tiles-wrap{display:grid;gap:10px;align-items:stretch}.tiles-carousel{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;padding-bottom:6px}.tiles-carousel>.tile-card{scroll-snap-align:start;flex:0 0 var(--tile-basis, 200px)}@media (max-width: 700px){.tiles-nav{display:none}.tiles-carousel{gap:8px}.tiles-carousel>.tile-card{flex:0 0 44%}.tile-card{padding:8px 10px}.tile-icon-row{gap:8px;padding:2px 0}.tile-icon-wrap{width:30px;height:30px}.tile-icon-wrap mat-icon{font-size:26px;width:26px;height:26px}.tile-icon-label{font-size:10.5px;letter-spacing:.1px;line-height:1.25}.tile-icon-value{font-size:22px}.tile-icon-footer{margin-top:5px}.tile-icon-footer mat-divider{margin-bottom:4px}.tile-icon-footer-content{font-size:10.5px;gap:3px;line-height:1.25}.tile-icon-footer-icon{font-size:13px;width:13px;height:13px}.hide-value-mobile .tile-badge{display:none}}.tile-card{padding:10px 16px;margin:0}.tiles-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:#0000000a;color:#666;cursor:pointer;transition:background-color .2s ease,color .2s ease}.tiles-nav:hover{background:#2196f31f;color:#2196f3}.tiles-nav mat-icon{font-size:20px;width:20px;height:20px}.col{transition:all .2s ease}.tile-clickable{cursor:pointer}.tile-clickable:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000021;background-color:#2196f312}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px);border:2px solid #3f51b5}.selected-tile mat-label{font-weight:700}.selected-tile:hover{background-color:#e0e0e0}.tile-chart-header{display:flex;justify-content:flex-start;font-size:11px;font-weight:500;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.tile-chart{width:100%;position:relative;margin-top:4px;display:flex;align-items:center;justify-content:center}.tile-chart canvas{width:100%!important;height:100%!important;max-height:inherit}.tile-chart-value{text-align:center;margin-top:6px}.tile-chart-value-text{font-size:22px;font-weight:600;letter-spacing:-.5px}.tile-badge{display:inline-block;font-size:12px;font-weight:500;color:#fff;padding:2px 8px;border-radius:12px;vertical-align:middle;margin-left:4px}.tile-footer{margin-top:8px}.tile-icon-row{display:flex;align-items:flex-start;gap:12px;padding:4px 0}.tile-icon-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px}.tile-icon-wrap mat-icon{font-size:36px;width:36px;height:36px;opacity:.85}.tile-icon-content{flex:1;text-align:right;min-width:0}.tile-icon-label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.3px;line-height:1.4}.tile-icon-value{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.5px}.tile-icon-footer{margin-top:8px}.tile-icon-footer mat-divider{margin-bottom:6px}.tile-icon-footer-content{display:flex;align-items:center;gap:4px;font-size:12px;color:#999}.tile-icon-footer-icon{font-size:16px;width:16px;height:16px;color:#bbb}.tile-value-ghost{width:2.5ch;height:.72em;vertical-align:middle}.tile-value-in{animation:tile-value-in .15s ease-out both}@keyframes tile-value-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tile-value-in{animation:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i17.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TilesComponent, isStandalone: false, selector: "spa-tiles", inputs: { config: "config", lastSearch: "lastSearch", data: "data", reload: "reload" }, outputs: { tileActionSelected: "tileActionSelected", tileClick: "tileClick", tileUnClick: "tileUnClick" }, viewQueries: [{ propertyName: "tileScroller", first: true, predicate: ["tileScroller"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Tile row layout. THREE modes, and the DEFAULT is the original.\n     'auto' (default, and what every existing page gets): the original bootstrap .row/.col \u2014 tiles stretch to\n     fill and shrink to a 150px floor, wrapping when they run out of room. This is byte-for-byte the markup\n     that shipped before, restored on the owner's instruction 2026-08-08: the grid I briefly made the default\n     forced ONE tile per row on a phone, because a 200px track floor does not fit twice in a ~380px viewport.\n     'wrap': a grid of equal tracks \u2014 opt in where uniform tile widths matter more than filling the row.\n     'carousel': one row, horizontal scroll. The Day Book opts into this.\n     The tile body itself is ONE template shared by all three, so the modes can never drift apart. -->\n\n<!-- AUTO \u2014 the original layout, unchanged -->\n<div *ngIf=\"isAuto\" class=\"d-flex row align-items-center justify-content-between\" [class.hide-value-mobile]=\"hideValueMobile\">\n  <ng-container *ngFor=\"let tile of tiles\">\n    <!-- Changed: tile-clickable class gives pointer + hover lift only on tiles that actually respond to clicks -->\n    <mat-card *ngIf=\"!isHidden(tile)\" class=\"col\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\n      <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n    </mat-card>\n  </ng-container>\n</div>\n\n<!-- WRAP / CAROUSEL \u2014 opt-in only -->\n<div *ngIf=\"!isAuto\" class=\"spa-tiles-outer\">\n\n  <!-- Carousel only: scroll affordances, shown solely when there is something to scroll to -->\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollLeft\" (click)=\"scrollTiles(-1)\" aria-label=\"Scroll tiles left\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n\n  <div #tileScroller class=\"spa-tiles\" [class.tiles-wrap]=\"!isCarousel\" [class.tiles-carousel]=\"isCarousel\" [class.hide-value-mobile]=\"hideValueMobile\" [ngStyle]=\"tilesStyle\" (scroll)=\"onTilesScroll()\">\n    <ng-container *ngFor=\"let tile of tiles\">\n      <mat-card *ngIf=\"!isHidden(tile)\" class=\"tile-card\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" (click)=\"clicked(tile)\">\n        <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n      </mat-card>\n    </ng-container>\n  </div>\n\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollRight\" (click)=\"scrollTiles(1)\" aria-label=\"Scroll tiles right\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n</div>\n\n<!-- The tile body, shared by all three modes. ctx() returns a CACHED context object per tile \u2014 building\n     `{ $implicit: tile }` inline would hand NgTemplateOutlet a new object every change-detection pass and\n     re-create every tile's view, which is the documented cause of a real livelock in this library. -->\n<ng-template #tileBody let-tile>\n\n      <!-- Changed: Chart-style tile \u2014 header, prominent chart, optional value, footer -->\n      <ng-container *ngIf=\"tile.chart; else standardTile\">\n        <!-- Changed: Header with tile name \u2014 left-aligned for better hierarchy -->\n        <div class=\"tile-chart-header\">\n          <span>{{tile.alias ?? tile.name | camelToWords}}</span>\n        </div>\n\n        <!-- Changed: Chart fills tile \u2014 uses helper method for reliable data detection -->\n        <div class=\"tile-chart\" *ngIf=\"hasTileChartData(tile)\" [style.height.px]=\"tile.chart.height ?? 120\">\n          <canvas baseChart\n            [type]=\"tile.chart.type\"\n            [data]=\"getTileMiniChartData(tile)\"\n            [options]=\"getMiniChartOptions(tile)\"\n            [plugins]=\"getTileChartPlugins(tile)\">\n          </canvas>\n        </div>\n\n        <!-- Changed: Optional value display below chart \u2014 only show primitive values, skip chart data objects -->\n        <div class=\"tile-chart-value\" *ngIf=\"tile.name && isTileValuePrimitive(tile)\">\n          <span class=\"tile-chart-value-text\" [style.color]=\"tileColor(tile)\">{{tile.prefix ?? ''}}{{displayValue(tile)}}<span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span></span><!-- Changed: colour may be a function of the data; value honours Tile.format -->\n        </div>\n\n        <!-- Changed: Footer with divider for chart tiles -->\n        <div class=\"tile-footer\" *ngIf=\"tile.footer || tile.info\">\n          <mat-divider></mat-divider>\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px; color: #9a9a9a; font-size: 12px; margin-top: 6px;\">\n            <mat-icon *ngIf=\"tile.footerIcon\" style=\"font-size: 16px; width: 16px; height: 16px;\">{{tile.footerIcon}}</mat-icon>\n            <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" style=\"font-size: 16px; width: 16px; height: 16px; color: steelblue;\">info</mat-icon>\n            <span>{{tile.footer ?? tile.info}}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Changed: Standard tile \u2014 Paper Dashboard style: icon left, label+value right, optional footer -->\n      <ng-template #standardTile>\n        <!-- Changed: Icon-style tile \u2014 icon left, label top-right, large value below -->\n        <ng-container *ngIf=\"tile.icon; else basicTile\">\n          <div class=\"tile-icon-row\">\n            <div class=\"tile-icon-wrap\" [style.color]=\"tileColor(tile) ?? '#2196f3'\"><!-- Changed: colour may be a function of the data -->\n              <mat-icon>{{tile.icon}}</mat-icon>\n            </div>\n            <div class=\"tile-icon-content\">\n              <div class=\"tile-icon-label\">{{tile.alias ?? tile.name | camelToWords}}</div>\n              <!-- Changed (Quiet Loading D5): while the value is genuinely unknown the slot shows a shimmer chip instead of the old lying `0`; icon, label and footer render normally so the card never resizes. On a reload the previous number stays put and simply updates. -->\n              <div class=\"tile-icon-value\" [style.color]=\"tileColor(tile)\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\"><!-- Changed: colour may be a function of the data -->\n                <span *ngIf=\"tile.prefix\">{{tile.prefix}}</span><span *ngIf=\"showValueGhost(tile); else iconTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #iconTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{displayValue(tile)}}</span></ng-template><span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span><!-- Changed: value honours Tile.format; displayValue keeps the old `?? 0` -->\n                <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n              </div>\n            </div>\n          </div>\n          <!-- Changed: Footer with divider \u2014 info tooltip or custom footer text -->\n          <div class=\"tile-icon-footer\" *ngIf=\"tile.info || tile.footer\">\n            <mat-divider></mat-divider>\n            <div class=\"tile-icon-footer-content\">\n              <mat-icon *ngIf=\"tile.footerIcon\" class=\"tile-icon-footer-icon\">{{tile.footerIcon}}</mat-icon>\n              <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" class=\"tile-icon-footer-icon\" style=\"color: steelblue;\">info</mat-icon>\n              <span>{{tile.footer ?? tile.info}}</span>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Basic tile fallback \u2014 centered number display (no icon) -->\n        <ng-template #basicTile>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div style=\"text-align: center;font-size: 30px;\">\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\n              <!-- Changed (Quiet Loading D5): same value ghost as the icon tile \u2014 chip while unknown, real number otherwise -->\n              <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tileColor(tile) }\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\"><span *ngIf=\"showValueGhost(tile); else basicTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #basicTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{displayValue(tile)}}</span></ng-template></mat-label>&nbsp;<!-- Changed: colour may be a function of the data; value honours Tile.format -->\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\n              <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n            </div>\n          </div>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\n              <mat-label style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\n              <mat-icon *ngIf=\"tile.info\" [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n\n</ng-template>\n", styles: [".card{min-width:180px;flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.spa-tiles-outer{display:flex;align-items:center;gap:4px}.spa-tiles{flex:1;min-width:0}.tiles-wrap{display:grid;gap:10px;align-items:stretch}.tiles-carousel{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;padding-bottom:6px}.tiles-carousel>.tile-card{scroll-snap-align:start;flex:0 0 var(--tile-basis, 200px)}.tile-card{padding:10px 16px;margin:0}.tiles-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:#0000000a;color:#666;cursor:pointer;transition:background-color .2s ease,color .2s ease}.tiles-nav:hover{background:#2196f31f;color:#2196f3}.tiles-nav mat-icon{font-size:20px;width:20px;height:20px}.col{transition:all .2s ease}.tile-clickable{cursor:pointer}.tile-clickable:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000021;background-color:#2196f312}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px);border:2px solid #3f51b5}.selected-tile mat-label{font-weight:700}.selected-tile:hover{background-color:#e0e0e0}.tile-chart-header{display:flex;justify-content:flex-start;font-size:11px;font-weight:500;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.tile-chart{width:100%;position:relative;margin-top:4px;display:flex;align-items:center;justify-content:center}.tile-chart canvas{width:100%!important;height:100%!important;max-height:inherit}.tile-chart-value{text-align:center;margin-top:6px}.tile-chart-value-text{font-size:22px;font-weight:600;letter-spacing:-.5px}.tile-badge{display:inline-block;font-size:12px;font-weight:500;color:#fff;padding:2px 8px;border-radius:12px;vertical-align:middle;margin-left:4px}.tile-footer{margin-top:8px}.tile-icon-row{display:flex;align-items:flex-start;gap:12px;padding:4px 0}.tile-icon-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px}.tile-icon-wrap mat-icon{font-size:36px;width:36px;height:36px;opacity:.85}.tile-icon-content{flex:1;text-align:right;min-width:0}.tile-icon-label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.3px;line-height:1.4}.tile-icon-value{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.5px}.tile-icon-footer{margin-top:8px}.tile-icon-footer mat-divider{margin-bottom:6px}.tile-icon-footer-content{display:flex;align-items:center;gap:4px;font-size:12px;color:#999}.tile-icon-footer-icon{font-size:16px;width:16px;height:16px;color:#bbb}.tile-value-ghost{width:2.5ch;height:.72em;vertical-align:middle}.tile-value-in{animation:tile-value-in .15s ease-out both}@keyframes tile-value-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tile-value-in{animation:none}}@media (max-width: 700px){.tiles-nav{display:none}.tiles-carousel{gap:8px}.tiles-carousel>.tile-card{flex:0 0 44%}.tile-card{padding:8px 10px}.tile-icon-row{gap:8px;padding:2px 0}.tile-icon-wrap{width:30px;height:30px}.tile-icon-wrap mat-icon{font-size:26px;width:26px;height:26px}.tile-icon-label{font-size:10.5px;letter-spacing:.1px;line-height:1.25}.tile-icon-value{font-size:22px}.tile-icon-footer{margin-top:5px}.tile-icon-footer mat-divider{margin-bottom:4px}.tile-icon-footer-content{font-size:10.5px;gap:3px;line-height:1.25}.tile-icon-footer-icon{font-size:13px;width:13px;height:13px}.hide-value-mobile .tile-badge{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i17.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TilesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-tiles', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- Tile row layout. THREE modes, and the DEFAULT is the original.\n     'auto' (default, and what every existing page gets): the original bootstrap .row/.col \u2014 tiles stretch to\n     fill and shrink to a 150px floor, wrapping when they run out of room. This is byte-for-byte the markup\n     that shipped before, restored on the owner's instruction 2026-08-08: the grid I briefly made the default\n     forced ONE tile per row on a phone, because a 200px track floor does not fit twice in a ~380px viewport.\n     'wrap': a grid of equal tracks \u2014 opt in where uniform tile widths matter more than filling the row.\n     'carousel': one row, horizontal scroll. The Day Book opts into this.\n     The tile body itself is ONE template shared by all three, so the modes can never drift apart. -->\n\n<!-- AUTO \u2014 the original layout, unchanged -->\n<div *ngIf=\"isAuto\" class=\"d-flex row align-items-center justify-content-between\" [class.hide-value-mobile]=\"hideValueMobile\">\n  <ng-container *ngFor=\"let tile of tiles\">\n    <!-- Changed: tile-clickable class gives pointer + hover lift only on tiles that actually respond to clicks -->\n    <mat-card *ngIf=\"!isHidden(tile)\" class=\"col\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\n      <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n    </mat-card>\n  </ng-container>\n</div>\n\n<!-- WRAP / CAROUSEL \u2014 opt-in only -->\n<div *ngIf=\"!isAuto\" class=\"spa-tiles-outer\">\n\n  <!-- Carousel only: scroll affordances, shown solely when there is something to scroll to -->\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollLeft\" (click)=\"scrollTiles(-1)\" aria-label=\"Scroll tiles left\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n\n  <div #tileScroller class=\"spa-tiles\" [class.tiles-wrap]=\"!isCarousel\" [class.tiles-carousel]=\"isCarousel\" [class.hide-value-mobile]=\"hideValueMobile\" [ngStyle]=\"tilesStyle\" (scroll)=\"onTilesScroll()\">\n    <ng-container *ngFor=\"let tile of tiles\">\n      <mat-card *ngIf=\"!isHidden(tile)\" class=\"tile-card\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" (click)=\"clicked(tile)\">\n        <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n      </mat-card>\n    </ng-container>\n  </div>\n\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollRight\" (click)=\"scrollTiles(1)\" aria-label=\"Scroll tiles right\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n</div>\n\n<!-- The tile body, shared by all three modes. ctx() returns a CACHED context object per tile \u2014 building\n     `{ $implicit: tile }` inline would hand NgTemplateOutlet a new object every change-detection pass and\n     re-create every tile's view, which is the documented cause of a real livelock in this library. -->\n<ng-template #tileBody let-tile>\n\n      <!-- Changed: Chart-style tile \u2014 header, prominent chart, optional value, footer -->\n      <ng-container *ngIf=\"tile.chart; else standardTile\">\n        <!-- Changed: Header with tile name \u2014 left-aligned for better hierarchy -->\n        <div class=\"tile-chart-header\">\n          <span>{{tile.alias ?? tile.name | camelToWords}}</span>\n        </div>\n\n        <!-- Changed: Chart fills tile \u2014 uses helper method for reliable data detection -->\n        <div class=\"tile-chart\" *ngIf=\"hasTileChartData(tile)\" [style.height.px]=\"tile.chart.height ?? 120\">\n          <canvas baseChart\n            [type]=\"tile.chart.type\"\n            [data]=\"getTileMiniChartData(tile)\"\n            [options]=\"getMiniChartOptions(tile)\"\n            [plugins]=\"getTileChartPlugins(tile)\">\n          </canvas>\n        </div>\n\n        <!-- Changed: Optional value display below chart \u2014 only show primitive values, skip chart data objects -->\n        <div class=\"tile-chart-value\" *ngIf=\"tile.name && isTileValuePrimitive(tile)\">\n          <span class=\"tile-chart-value-text\" [style.color]=\"tile.color\">{{tile.prefix ?? ''}}{{data?.[tile.name]}}<span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span></span>\n        </div>\n\n        <!-- Changed: Footer with divider for chart tiles -->\n        <div class=\"tile-footer\" *ngIf=\"tile.footer || tile.info\">\n          <mat-divider></mat-divider>\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px; color: #9a9a9a; font-size: 12px; margin-top: 6px;\">\n            <mat-icon *ngIf=\"tile.footerIcon\" style=\"font-size: 16px; width: 16px; height: 16px;\">{{tile.footerIcon}}</mat-icon>\n            <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" style=\"font-size: 16px; width: 16px; height: 16px; color: steelblue;\">info</mat-icon>\n            <span>{{tile.footer ?? tile.info}}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Changed: Standard tile \u2014 Paper Dashboard style: icon left, label+value right, optional footer -->\n      <ng-template #standardTile>\n        <!-- Changed: Icon-style tile \u2014 icon left, label top-right, large value below -->\n        <ng-container *ngIf=\"tile.icon; else basicTile\">\n          <div class=\"tile-icon-row\">\n            <div class=\"tile-icon-wrap\" [style.color]=\"tile.color ?? '#2196f3'\">\n              <mat-icon>{{tile.icon}}</mat-icon>\n            </div>\n            <div class=\"tile-icon-content\">\n              <div class=\"tile-icon-label\">{{tile.alias ?? tile.name | camelToWords}}</div>\n              <!-- Changed (Quiet Loading D5): while the value is genuinely unknown the slot shows a shimmer chip instead of the old lying `0`; icon, label and footer render normally so the card never resizes. On a reload the previous number stays put and simply updates. -->\n              <div class=\"tile-icon-value\" [style.color]=\"tile.color\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\">\n                <span *ngIf=\"tile.prefix\">{{tile.prefix}}</span><span *ngIf=\"showValueGhost(tile); else iconTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #iconTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template><span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span>\n                <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n              </div>\n            </div>\n          </div>\n          <!-- Changed: Footer with divider \u2014 info tooltip or custom footer text -->\n          <div class=\"tile-icon-footer\" *ngIf=\"tile.info || tile.footer\">\n            <mat-divider></mat-divider>\n            <div class=\"tile-icon-footer-content\">\n              <mat-icon *ngIf=\"tile.footerIcon\" class=\"tile-icon-footer-icon\">{{tile.footerIcon}}</mat-icon>\n              <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" class=\"tile-icon-footer-icon\" style=\"color: steelblue;\">info</mat-icon>\n              <span>{{tile.footer ?? tile.info}}</span>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Basic tile fallback \u2014 centered number display (no icon) -->\n        <ng-template #basicTile>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div style=\"text-align: center;font-size: 30px;\">\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\n              <!-- Changed (Quiet Loading D5): same value ghost as the icon tile \u2014 chip while unknown, real number otherwise -->\n              <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\"><span *ngIf=\"showValueGhost(tile); else basicTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #basicTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template></mat-label>&nbsp;\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\n              <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n            </div>\n          </div>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\n              <mat-label style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\n              <mat-icon *ngIf=\"tile.info\" [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n\n</ng-template>\n", styles: [".card{min-width:180px;flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.spa-tiles-outer{display:flex;align-items:center;gap:4px}.spa-tiles{flex:1;min-width:0}.tiles-wrap{display:grid;gap:10px;align-items:stretch}.tiles-carousel{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;padding-bottom:6px}.tiles-carousel>.tile-card{scroll-snap-align:start;flex:0 0 var(--tile-basis, 200px)}@media (max-width: 700px){.tiles-nav{display:none}.tiles-carousel{gap:8px}.tiles-carousel>.tile-card{flex:0 0 44%}.tile-card{padding:8px 10px}.tile-icon-row{gap:8px;padding:2px 0}.tile-icon-wrap{width:30px;height:30px}.tile-icon-wrap mat-icon{font-size:26px;width:26px;height:26px}.tile-icon-label{font-size:10.5px;letter-spacing:.1px;line-height:1.25}.tile-icon-value{font-size:22px}.tile-icon-footer{margin-top:5px}.tile-icon-footer mat-divider{margin-bottom:4px}.tile-icon-footer-content{font-size:10.5px;gap:3px;line-height:1.25}.tile-icon-footer-icon{font-size:13px;width:13px;height:13px}.hide-value-mobile .tile-badge{display:none}}.tile-card{padding:10px 16px;margin:0}.tiles-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:#0000000a;color:#666;cursor:pointer;transition:background-color .2s ease,color .2s ease}.tiles-nav:hover{background:#2196f31f;color:#2196f3}.tiles-nav mat-icon{font-size:20px;width:20px;height:20px}.col{transition:all .2s ease}.tile-clickable{cursor:pointer}.tile-clickable:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000021;background-color:#2196f312}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px);border:2px solid #3f51b5}.selected-tile mat-label{font-weight:700}.selected-tile:hover{background-color:#e0e0e0}.tile-chart-header{display:flex;justify-content:flex-start;font-size:11px;font-weight:500;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.tile-chart{width:100%;position:relative;margin-top:4px;display:flex;align-items:center;justify-content:center}.tile-chart canvas{width:100%!important;height:100%!important;max-height:inherit}.tile-chart-value{text-align:center;margin-top:6px}.tile-chart-value-text{font-size:22px;font-weight:600;letter-spacing:-.5px}.tile-badge{display:inline-block;font-size:12px;font-weight:500;color:#fff;padding:2px 8px;border-radius:12px;vertical-align:middle;margin-left:4px}.tile-footer{margin-top:8px}.tile-icon-row{display:flex;align-items:flex-start;gap:12px;padding:4px 0}.tile-icon-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px}.tile-icon-wrap mat-icon{font-size:36px;width:36px;height:36px;opacity:.85}.tile-icon-content{flex:1;text-align:right;min-width:0}.tile-icon-label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.3px;line-height:1.4}.tile-icon-value{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.5px}.tile-icon-footer{margin-top:8px}.tile-icon-footer mat-divider{margin-bottom:6px}.tile-icon-footer-content{display:flex;align-items:center;gap:4px;font-size:12px;color:#999}.tile-icon-footer-icon{font-size:16px;width:16px;height:16px;color:#bbb}.tile-value-ghost{width:2.5ch;height:.72em;vertical-align:middle}.tile-value-in{animation:tile-value-in .15s ease-out both}@keyframes tile-value-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tile-value-in{animation:none}}\n"] }]
+            args: [{ selector: 'spa-tiles', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- Tile row layout. THREE modes, and the DEFAULT is the original.\n     'auto' (default, and what every existing page gets): the original bootstrap .row/.col \u2014 tiles stretch to\n     fill and shrink to a 150px floor, wrapping when they run out of room. This is byte-for-byte the markup\n     that shipped before, restored on the owner's instruction 2026-08-08: the grid I briefly made the default\n     forced ONE tile per row on a phone, because a 200px track floor does not fit twice in a ~380px viewport.\n     'wrap': a grid of equal tracks \u2014 opt in where uniform tile widths matter more than filling the row.\n     'carousel': one row, horizontal scroll. The Day Book opts into this.\n     The tile body itself is ONE template shared by all three, so the modes can never drift apart. -->\n\n<!-- AUTO \u2014 the original layout, unchanged -->\n<div *ngIf=\"isAuto\" class=\"d-flex row align-items-center justify-content-between\" [class.hide-value-mobile]=\"hideValueMobile\">\n  <ng-container *ngFor=\"let tile of tiles\">\n    <!-- Changed: tile-clickable class gives pointer + hover lift only on tiles that actually respond to clicks -->\n    <mat-card *ngIf=\"!isHidden(tile)\" class=\"col\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\n      <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n    </mat-card>\n  </ng-container>\n</div>\n\n<!-- WRAP / CAROUSEL \u2014 opt-in only -->\n<div *ngIf=\"!isAuto\" class=\"spa-tiles-outer\">\n\n  <!-- Carousel only: scroll affordances, shown solely when there is something to scroll to -->\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollLeft\" (click)=\"scrollTiles(-1)\" aria-label=\"Scroll tiles left\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n\n  <div #tileScroller class=\"spa-tiles\" [class.tiles-wrap]=\"!isCarousel\" [class.tiles-carousel]=\"isCarousel\" [class.hide-value-mobile]=\"hideValueMobile\" [ngStyle]=\"tilesStyle\" (scroll)=\"onTilesScroll()\">\n    <ng-container *ngFor=\"let tile of tiles\">\n      <mat-card *ngIf=\"!isHidden(tile)\" class=\"tile-card\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" (click)=\"clicked(tile)\">\n        <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n      </mat-card>\n    </ng-container>\n  </div>\n\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollRight\" (click)=\"scrollTiles(1)\" aria-label=\"Scroll tiles right\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n</div>\n\n<!-- The tile body, shared by all three modes. ctx() returns a CACHED context object per tile \u2014 building\n     `{ $implicit: tile }` inline would hand NgTemplateOutlet a new object every change-detection pass and\n     re-create every tile's view, which is the documented cause of a real livelock in this library. -->\n<ng-template #tileBody let-tile>\n\n      <!-- Changed: Chart-style tile \u2014 header, prominent chart, optional value, footer -->\n      <ng-container *ngIf=\"tile.chart; else standardTile\">\n        <!-- Changed: Header with tile name \u2014 left-aligned for better hierarchy -->\n        <div class=\"tile-chart-header\">\n          <span>{{tile.alias ?? tile.name | camelToWords}}</span>\n        </div>\n\n        <!-- Changed: Chart fills tile \u2014 uses helper method for reliable data detection -->\n        <div class=\"tile-chart\" *ngIf=\"hasTileChartData(tile)\" [style.height.px]=\"tile.chart.height ?? 120\">\n          <canvas baseChart\n            [type]=\"tile.chart.type\"\n            [data]=\"getTileMiniChartData(tile)\"\n            [options]=\"getMiniChartOptions(tile)\"\n            [plugins]=\"getTileChartPlugins(tile)\">\n          </canvas>\n        </div>\n\n        <!-- Changed: Optional value display below chart \u2014 only show primitive values, skip chart data objects -->\n        <div class=\"tile-chart-value\" *ngIf=\"tile.name && isTileValuePrimitive(tile)\">\n          <span class=\"tile-chart-value-text\" [style.color]=\"tileColor(tile)\">{{tile.prefix ?? ''}}{{displayValue(tile)}}<span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span></span><!-- Changed: colour may be a function of the data; value honours Tile.format -->\n        </div>\n\n        <!-- Changed: Footer with divider for chart tiles -->\n        <div class=\"tile-footer\" *ngIf=\"tile.footer || tile.info\">\n          <mat-divider></mat-divider>\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px; color: #9a9a9a; font-size: 12px; margin-top: 6px;\">\n            <mat-icon *ngIf=\"tile.footerIcon\" style=\"font-size: 16px; width: 16px; height: 16px;\">{{tile.footerIcon}}</mat-icon>\n            <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" style=\"font-size: 16px; width: 16px; height: 16px; color: steelblue;\">info</mat-icon>\n            <span>{{tile.footer ?? tile.info}}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Changed: Standard tile \u2014 Paper Dashboard style: icon left, label+value right, optional footer -->\n      <ng-template #standardTile>\n        <!-- Changed: Icon-style tile \u2014 icon left, label top-right, large value below -->\n        <ng-container *ngIf=\"tile.icon; else basicTile\">\n          <div class=\"tile-icon-row\">\n            <div class=\"tile-icon-wrap\" [style.color]=\"tileColor(tile) ?? '#2196f3'\"><!-- Changed: colour may be a function of the data -->\n              <mat-icon>{{tile.icon}}</mat-icon>\n            </div>\n            <div class=\"tile-icon-content\">\n              <div class=\"tile-icon-label\">{{tile.alias ?? tile.name | camelToWords}}</div>\n              <!-- Changed (Quiet Loading D5): while the value is genuinely unknown the slot shows a shimmer chip instead of the old lying `0`; icon, label and footer render normally so the card never resizes. On a reload the previous number stays put and simply updates. -->\n              <div class=\"tile-icon-value\" [style.color]=\"tileColor(tile)\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\"><!-- Changed: colour may be a function of the data -->\n                <span *ngIf=\"tile.prefix\">{{tile.prefix}}</span><span *ngIf=\"showValueGhost(tile); else iconTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #iconTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{displayValue(tile)}}</span></ng-template><span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span><!-- Changed: value honours Tile.format; displayValue keeps the old `?? 0` -->\n                <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n              </div>\n            </div>\n          </div>\n          <!-- Changed: Footer with divider \u2014 info tooltip or custom footer text -->\n          <div class=\"tile-icon-footer\" *ngIf=\"tile.info || tile.footer\">\n            <mat-divider></mat-divider>\n            <div class=\"tile-icon-footer-content\">\n              <mat-icon *ngIf=\"tile.footerIcon\" class=\"tile-icon-footer-icon\">{{tile.footerIcon}}</mat-icon>\n              <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" class=\"tile-icon-footer-icon\" style=\"color: steelblue;\">info</mat-icon>\n              <span>{{tile.footer ?? tile.info}}</span>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Basic tile fallback \u2014 centered number display (no icon) -->\n        <ng-template #basicTile>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div style=\"text-align: center;font-size: 30px;\">\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\n              <!-- Changed (Quiet Loading D5): same value ghost as the icon tile \u2014 chip while unknown, real number otherwise -->\n              <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tileColor(tile) }\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\"><span *ngIf=\"showValueGhost(tile); else basicTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #basicTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{displayValue(tile)}}</span></ng-template></mat-label>&nbsp;<!-- Changed: colour may be a function of the data; value honours Tile.format -->\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\n              <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n            </div>\n          </div>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\n              <mat-label style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\n              <mat-icon *ngIf=\"tile.info\" [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n\n</ng-template>\n", styles: [".card{min-width:180px;flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.spa-tiles-outer{display:flex;align-items:center;gap:4px}.spa-tiles{flex:1;min-width:0}.tiles-wrap{display:grid;gap:10px;align-items:stretch}.tiles-carousel{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;padding-bottom:6px}.tiles-carousel>.tile-card{scroll-snap-align:start;flex:0 0 var(--tile-basis, 200px)}.tile-card{padding:10px 16px;margin:0}.tiles-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:#0000000a;color:#666;cursor:pointer;transition:background-color .2s ease,color .2s ease}.tiles-nav:hover{background:#2196f31f;color:#2196f3}.tiles-nav mat-icon{font-size:20px;width:20px;height:20px}.col{transition:all .2s ease}.tile-clickable{cursor:pointer}.tile-clickable:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000021;background-color:#2196f312}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px);border:2px solid #3f51b5}.selected-tile mat-label{font-weight:700}.selected-tile:hover{background-color:#e0e0e0}.tile-chart-header{display:flex;justify-content:flex-start;font-size:11px;font-weight:500;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.tile-chart{width:100%;position:relative;margin-top:4px;display:flex;align-items:center;justify-content:center}.tile-chart canvas{width:100%!important;height:100%!important;max-height:inherit}.tile-chart-value{text-align:center;margin-top:6px}.tile-chart-value-text{font-size:22px;font-weight:600;letter-spacing:-.5px}.tile-badge{display:inline-block;font-size:12px;font-weight:500;color:#fff;padding:2px 8px;border-radius:12px;vertical-align:middle;margin-left:4px}.tile-footer{margin-top:8px}.tile-icon-row{display:flex;align-items:flex-start;gap:12px;padding:4px 0}.tile-icon-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px}.tile-icon-wrap mat-icon{font-size:36px;width:36px;height:36px;opacity:.85}.tile-icon-content{flex:1;text-align:right;min-width:0}.tile-icon-label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.3px;line-height:1.4}.tile-icon-value{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.5px}.tile-icon-footer{margin-top:8px}.tile-icon-footer mat-divider{margin-bottom:6px}.tile-icon-footer-content{display:flex;align-items:center;gap:4px;font-size:12px;color:#999}.tile-icon-footer-icon{font-size:16px;width:16px;height:16px;color:#bbb}.tile-value-ghost{width:2.5ch;height:.72em;vertical-align:middle}.tile-value-in{animation:tile-value-in .15s ease-out both}@keyframes tile-value-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tile-value-in{animation:none}}@media (max-width: 700px){.tiles-nav{display:none}.tiles-carousel{gap:8px}.tiles-carousel>.tile-card{flex:0 0 44%}.tile-card{padding:8px 10px}.tile-icon-row{gap:8px;padding:2px 0}.tile-icon-wrap{width:30px;height:30px}.tile-icon-wrap mat-icon{font-size:26px;width:26px;height:26px}.tile-icon-label{font-size:10.5px;letter-spacing:.1px;line-height:1.25}.tile-icon-value{font-size:22px}.tile-icon-footer{margin-top:5px}.tile-icon-footer mat-divider{margin-bottom:4px}.tile-icon-footer-content{font-size:10.5px;gap:3px;line-height:1.25}.tile-icon-footer-icon{font-size:13px;width:13px;height:13px}.hide-value-mobile .tile-badge{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: i0.ChangeDetectorRef }, { type: ApiErrorService }], propDecorators: { tileScroller: [{
                 type: ViewChild,
                 args: ['tileScroller']
@@ -16329,11 +17091,11 @@ class GroupsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GroupsComponent, deps: [{ token: ConditionService }, { token: ButtonService }, { token: DataServiceLib }, { token: i2$1.MatSnackBar }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: GroupsComponent, isStandalone: false, selector: "spa-groups", inputs: { config: "config", dataSource: "dataSource", displayedButtons: "displayedButtons", showOwnFilter: "showOwnFilter", filterText: "filterText" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<!-- Changed: this filter row was REMOVED from the grouped view's own markup and now lives in the table header,\n     beside the action buttons, where every other table config puts it. It used to sit on a row of its own\n     directly under the buttons row, leaving both rows half empty and visibly misaligned.\n     The filtering logic here is untouched \u2014 only the input that drives it moved, and its text arrives via the\n     filterText @Input relayed from the header. Kept as a fallback for a grouped view rendered WITHOUT the\n     standard header (spa-groups can be used directly), so filtering is never simply lost. -->\n<div class=\"groups-filter\" *ngIf=\"showOwnFilter\">\n  <mat-form-field appearance=\"outline\" class=\"filter-field\">\n    <mat-icon matPrefix>search</mat-icon>\n    <input matInput placeholder=\"Filter\" [(ngModel)]=\"filterText\" (ngModelChange)=\"applyFilter()\">\n    <button *ngIf=\"filterText\" mat-icon-button matSuffix (click)=\"filterText = ''; applyFilter()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<div class=\"groups-container\" cdkDropListGroup>\n\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\n\n    <div class=\"group-header\">\n      <div class=\"header-left\">\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\n        <!-- Changed: added the native title attribute. On a phone the title now truncates with an ellipsis rather\n             than wrapping to a second line, so the full name has to stay reachable somewhere \u2014 this is the\n             zero-cost way to keep it. No tooltip directive, so nothing changes on touch. -->\n        <label class=\"group-title\" [title]=\"group.displayName\">{{group.displayName}}</label>\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\n      </div>\n\n      <div class=\"header-right\">\n        <button\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\n          mat-icon-button\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\n          matTooltipPosition=\"above\"\n          [style.color]=\"getHeaderButtonColor(button, group)\"\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\n          (click)=\"headerButtonClicked(button, group)\">\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <hr class=\"group-divider\" />\n\n    <!-- Empty state: show when no items and drag is disabled -->\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n    </div>\n\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\n    <div\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\n      cdkDropList\n      [cdkDropListData]=\"group.items\"\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\n      (cdkDropListExited)=\"onDropListExited($event)\"\n      [class.drop-highlight]=\"group === highlightedGroup\"\n      class=\"drop-list items-container\">\n\n      <!-- Empty state inside drop list when drag is enabled -->\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n      </div>\n\n      <button\n        mat-stroked-button\n        *ngFor=\"let item of group.items\"\n        cdkDrag [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\n        [matMenuTriggerData]=\"{item: item, group: group}\"\n        class=\"item-button\">\n\n        <mat-icon\n          *ngIf=\"getItemIcon(item)\"\n          [style.color]=\"getItemIconColor(item)\"\n          [matTooltip]=\"getItemIconTip(item)\"\n          matTooltipPosition=\"above\"\n          class=\"item-icon\">\n          {{getItemIcon(item)}}\n        </mat-icon>\n\n        {{getItemText(item)}}\n\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\n          <mat-icon\n            [style.color]=\"additionalIcon.color\"\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\n            matTooltipPosition=\"above\"\n            class=\"item-additional-icon\">\n            {{additionalIcon.name}}\n          </mat-icon>\n        </ng-container>\n\n      </button>\n    </div>\n\n  </mat-card>\n\n</div>\n\n<mat-menu #itemMenu=\"matMenu\">\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\n    <button\n      *ngFor=\"let button of getVisibleButtons(item)\"\n      mat-menu-item\n      [disabled]=\"isButtonDisabled(button, item)\"\n      (click)=\"itemActionClicked(button.name, item, group)\">\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [".groups-filter{display:flex;justify-content:flex-end;margin-bottom:8px;padding-right:10px}.filter-field{width:300px;font-size:13px}.filter-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}.groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:8px 16px 16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:0;min-height:32px}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{margin-right:5px;font-size:24px;width:24px;height:24px;line-height:24px}.group-title{font-size:24px;font-weight:300;line-height:1.2}.group-count{font-size:12px;font-weight:300;margin-left:5px;line-height:1.2}.group-divider{margin-top:8px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.header-right button[mat-icon-button]{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:normal}.header-right button[mat-icon-button] mat-icon{margin:0;font-size:20px;width:20px;height:20px;line-height:20px;display:block}.header-right button[mat-icon-button] .mat-mdc-button-touch-target{display:none}@media (max-width: 700px){.groups-container{gap:12px;padding-right:0}.group-card{padding:8px 10px 10px}.header-left{flex:1 1 auto;min-width:0;gap:4px}.group-icon{flex:0 0 auto;margin-right:2px;font-size:20px;width:20px;height:20px;line-height:20px}.group-title{font-size:16px;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-count{flex:0 0 auto;margin-left:2px;font-size:11px}.header-right{flex:0 0 auto;gap:0}.header-right button[mat-icon-button] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.group-header{min-height:28px}.group-divider{margin-top:6px;margin-bottom:6px}.items-container{gap:6px;padding:4px 0}.item-button{min-width:0;height:32px;padding:0 9px;font-size:12.5px;letter-spacing:normal;border-radius:16px;border-color:#0000001f;--mdc-outlined-button-container-height: 32px;--mdc-outlined-button-container-shape: 16px;--mdc-outlined-button-label-text-size: 12.5px}.item-button ::ng-deep .mdc-button__label{letter-spacing:normal;display:inline-flex;align-items:center}.item-button ::ng-deep .mat-mdc-button-touch-target{height:100%}.item-icon{font-size:14px;width:14px;height:14px;margin-right:3px}.item-additional-icon{font-size:14px;width:14px;height:14px;margin-left:3px}.drop-list{min-height:32px}.empty-state{padding:4px 10px}}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i1$2.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: GroupsComponent, isStandalone: false, selector: "spa-groups", inputs: { config: "config", dataSource: "dataSource", displayedButtons: "displayedButtons", showOwnFilter: "showOwnFilter", filterText: "filterText" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<!-- Changed: this filter row was REMOVED from the grouped view's own markup and now lives in the table header,\n     beside the action buttons, where every other table config puts it. It used to sit on a row of its own\n     directly under the buttons row, leaving both rows half empty and visibly misaligned.\n     The filtering logic here is untouched \u2014 only the input that drives it moved, and its text arrives via the\n     filterText @Input relayed from the header. Kept as a fallback for a grouped view rendered WITHOUT the\n     standard header (spa-groups can be used directly), so filtering is never simply lost. -->\n<div class=\"groups-filter\" *ngIf=\"showOwnFilter\">\n  <mat-form-field appearance=\"outline\" class=\"filter-field\">\n    <mat-icon matPrefix>search</mat-icon>\n    <input matInput placeholder=\"Filter\" [(ngModel)]=\"filterText\" (ngModelChange)=\"applyFilter()\">\n    <button *ngIf=\"filterText\" mat-icon-button matSuffix (click)=\"filterText = ''; applyFilter()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<div class=\"groups-container\" cdkDropListGroup>\n\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\n\n    <div class=\"group-header\">\n      <div class=\"header-left\">\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\n        <!-- Changed: added the native title attribute. On a phone the title now truncates with an ellipsis rather\n             than wrapping to a second line, so the full name has to stay reachable somewhere \u2014 this is the\n             zero-cost way to keep it. No tooltip directive, so nothing changes on touch. -->\n        <label class=\"group-title\" [title]=\"group.displayName\">{{group.displayName}}</label>\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\n      </div>\n\n      <div class=\"header-right\">\n        <button\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\n          mat-icon-button\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\n          matTooltipPosition=\"above\"\n          [style.color]=\"getHeaderButtonColor(button, group)\"\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\n          (click)=\"headerButtonClicked(button, group)\">\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <hr class=\"group-divider\" />\n\n    <!-- Empty state: show when no items and drag is disabled -->\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n    </div>\n\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\n    <div\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\n      cdkDropList\n      [cdkDropListData]=\"group.items\"\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\n      (cdkDropListExited)=\"onDropListExited($event)\"\n      [class.drop-highlight]=\"group === highlightedGroup\"\n      class=\"drop-list items-container\">\n\n      <!-- Empty state inside drop list when drag is enabled -->\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n      </div>\n\n      <button\n        mat-stroked-button\n        *ngFor=\"let item of group.items\"\n        cdkDrag [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\n        [matMenuTriggerData]=\"{item: item, group: group}\"\n        class=\"item-button\">\n\n        <mat-icon\n          *ngIf=\"getItemIcon(item)\"\n          [style.color]=\"getItemIconColor(item)\"\n          [matTooltip]=\"getItemIconTip(item)\"\n          matTooltipPosition=\"above\"\n          class=\"item-icon\">\n          {{getItemIcon(item)}}\n        </mat-icon>\n\n        <!-- Changed: the item text moved into its own span so a runaway name can be capped and ellipsised without\n             also squeezing the icons, which share this projection slot with it. The native title attribute keeps the\n             full name recoverable on a truncated chip \u2014 same treatment already used on the group title above, and no\n             tooltip directive, so touch behaviour is unchanged. -->\n        <span class=\"item-label\" [title]=\"getItemText(item)\">{{getItemText(item)}}</span>\n\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\n          <mat-icon\n            [style.color]=\"additionalIcon.color\"\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\n            matTooltipPosition=\"above\"\n            class=\"item-additional-icon\">\n            {{additionalIcon.name}}\n          </mat-icon>\n        </ng-container>\n\n      </button>\n    </div>\n\n  </mat-card>\n\n</div>\n\n<mat-menu #itemMenu=\"matMenu\">\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\n    <button\n      *ngFor=\"let button of getVisibleButtons(item)\"\n      mat-menu-item\n      [disabled]=\"isButtonDisabled(button, item)\"\n      (click)=\"itemActionClicked(button.name, item, group)\">\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [".groups-filter{display:flex;justify-content:flex-end;margin-bottom:8px;padding-right:10px}.filter-field{width:300px;font-size:13px}.filter-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}.groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:8px 16px 16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:0;min-height:32px}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{margin-right:5px;font-size:24px;width:24px;height:24px;line-height:24px}.group-title{font-size:24px;font-weight:300;line-height:1.2}.group-count{font-size:12px;font-weight:300;margin-left:5px;line-height:1.2}.group-divider{margin-top:8px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-label{display:inline-block;max-width:260px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.header-right button[mat-icon-button]{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:normal}.header-right button[mat-icon-button] mat-icon{margin:0;font-size:20px;width:20px;height:20px;line-height:20px;display:block}.header-right button[mat-icon-button] .mat-mdc-button-touch-target{display:none}@media (max-width: 700px){.groups-container{gap:12px;padding-right:0}.group-card{padding:8px 10px 10px}.header-left{flex:1 1 auto;min-width:0;gap:4px}.group-icon{flex:0 0 auto;margin-right:2px;font-size:20px;width:20px;height:20px;line-height:20px}.group-title{font-size:16px;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-count{flex:0 0 auto;margin-left:2px;font-size:11px}.header-right{flex:0 0 auto;gap:0}.header-right button[mat-icon-button] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.group-header{min-height:28px}.group-divider{margin-top:6px;margin-bottom:6px}.items-container{gap:6px;padding:4px 0}.item-button{min-width:0;height:32px;padding:0 9px;font-size:12.5px;letter-spacing:normal;border-radius:16px;border-color:#0000001f;--mdc-outlined-button-container-height: 32px;--mdc-outlined-button-container-shape: 16px;--mdc-outlined-button-label-text-size: 12.5px}.item-button ::ng-deep .mdc-button__label{letter-spacing:normal;display:inline-flex;align-items:center}.item-button ::ng-deep .mat-mdc-button-touch-target{height:100%}.item-label{max-width:104px}.item-icon{font-size:14px;width:14px;height:14px;margin-right:3px}.item-additional-icon{font-size:14px;width:14px;height:14px;margin-left:3px}.drop-list{min-height:32px}.empty-state{padding:4px 10px}}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i1$2.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GroupsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-groups', standalone: false, template: "<!-- Changed: this filter row was REMOVED from the grouped view's own markup and now lives in the table header,\n     beside the action buttons, where every other table config puts it. It used to sit on a row of its own\n     directly under the buttons row, leaving both rows half empty and visibly misaligned.\n     The filtering logic here is untouched \u2014 only the input that drives it moved, and its text arrives via the\n     filterText @Input relayed from the header. Kept as a fallback for a grouped view rendered WITHOUT the\n     standard header (spa-groups can be used directly), so filtering is never simply lost. -->\n<div class=\"groups-filter\" *ngIf=\"showOwnFilter\">\n  <mat-form-field appearance=\"outline\" class=\"filter-field\">\n    <mat-icon matPrefix>search</mat-icon>\n    <input matInput placeholder=\"Filter\" [(ngModel)]=\"filterText\" (ngModelChange)=\"applyFilter()\">\n    <button *ngIf=\"filterText\" mat-icon-button matSuffix (click)=\"filterText = ''; applyFilter()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<div class=\"groups-container\" cdkDropListGroup>\n\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\n\n    <div class=\"group-header\">\n      <div class=\"header-left\">\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\n        <!-- Changed: added the native title attribute. On a phone the title now truncates with an ellipsis rather\n             than wrapping to a second line, so the full name has to stay reachable somewhere \u2014 this is the\n             zero-cost way to keep it. No tooltip directive, so nothing changes on touch. -->\n        <label class=\"group-title\" [title]=\"group.displayName\">{{group.displayName}}</label>\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\n      </div>\n\n      <div class=\"header-right\">\n        <button\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\n          mat-icon-button\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\n          matTooltipPosition=\"above\"\n          [style.color]=\"getHeaderButtonColor(button, group)\"\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\n          (click)=\"headerButtonClicked(button, group)\">\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <hr class=\"group-divider\" />\n\n    <!-- Empty state: show when no items and drag is disabled -->\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n    </div>\n\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\n    <div\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\n      cdkDropList\n      [cdkDropListData]=\"group.items\"\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\n      (cdkDropListExited)=\"onDropListExited($event)\"\n      [class.drop-highlight]=\"group === highlightedGroup\"\n      class=\"drop-list items-container\">\n\n      <!-- Empty state inside drop list when drag is enabled -->\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n      </div>\n\n      <button\n        mat-stroked-button\n        *ngFor=\"let item of group.items\"\n        cdkDrag [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\n        [matMenuTriggerData]=\"{item: item, group: group}\"\n        class=\"item-button\">\n\n        <mat-icon\n          *ngIf=\"getItemIcon(item)\"\n          [style.color]=\"getItemIconColor(item)\"\n          [matTooltip]=\"getItemIconTip(item)\"\n          matTooltipPosition=\"above\"\n          class=\"item-icon\">\n          {{getItemIcon(item)}}\n        </mat-icon>\n\n        {{getItemText(item)}}\n\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\n          <mat-icon\n            [style.color]=\"additionalIcon.color\"\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\n            matTooltipPosition=\"above\"\n            class=\"item-additional-icon\">\n            {{additionalIcon.name}}\n          </mat-icon>\n        </ng-container>\n\n      </button>\n    </div>\n\n  </mat-card>\n\n</div>\n\n<mat-menu #itemMenu=\"matMenu\">\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\n    <button\n      *ngFor=\"let button of getVisibleButtons(item)\"\n      mat-menu-item\n      [disabled]=\"isButtonDisabled(button, item)\"\n      (click)=\"itemActionClicked(button.name, item, group)\">\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [".groups-filter{display:flex;justify-content:flex-end;margin-bottom:8px;padding-right:10px}.filter-field{width:300px;font-size:13px}.filter-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}.groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:8px 16px 16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:0;min-height:32px}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{margin-right:5px;font-size:24px;width:24px;height:24px;line-height:24px}.group-title{font-size:24px;font-weight:300;line-height:1.2}.group-count{font-size:12px;font-weight:300;margin-left:5px;line-height:1.2}.group-divider{margin-top:8px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.header-right button[mat-icon-button]{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:normal}.header-right button[mat-icon-button] mat-icon{margin:0;font-size:20px;width:20px;height:20px;line-height:20px;display:block}.header-right button[mat-icon-button] .mat-mdc-button-touch-target{display:none}@media (max-width: 700px){.groups-container{gap:12px;padding-right:0}.group-card{padding:8px 10px 10px}.header-left{flex:1 1 auto;min-width:0;gap:4px}.group-icon{flex:0 0 auto;margin-right:2px;font-size:20px;width:20px;height:20px;line-height:20px}.group-title{font-size:16px;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-count{flex:0 0 auto;margin-left:2px;font-size:11px}.header-right{flex:0 0 auto;gap:0}.header-right button[mat-icon-button] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.group-header{min-height:28px}.group-divider{margin-top:6px;margin-bottom:6px}.items-container{gap:6px;padding:4px 0}.item-button{min-width:0;height:32px;padding:0 9px;font-size:12.5px;letter-spacing:normal;border-radius:16px;border-color:#0000001f;--mdc-outlined-button-container-height: 32px;--mdc-outlined-button-container-shape: 16px;--mdc-outlined-button-label-text-size: 12.5px}.item-button ::ng-deep .mdc-button__label{letter-spacing:normal;display:inline-flex;align-items:center}.item-button ::ng-deep .mat-mdc-button-touch-target{height:100%}.item-icon{font-size:14px;width:14px;height:14px;margin-right:3px}.item-additional-icon{font-size:14px;width:14px;height:14px;margin-left:3px}.drop-list{min-height:32px}.empty-state{padding:4px 10px}}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'spa-groups', standalone: false, template: "<!-- Changed: this filter row was REMOVED from the grouped view's own markup and now lives in the table header,\n     beside the action buttons, where every other table config puts it. It used to sit on a row of its own\n     directly under the buttons row, leaving both rows half empty and visibly misaligned.\n     The filtering logic here is untouched \u2014 only the input that drives it moved, and its text arrives via the\n     filterText @Input relayed from the header. Kept as a fallback for a grouped view rendered WITHOUT the\n     standard header (spa-groups can be used directly), so filtering is never simply lost. -->\n<div class=\"groups-filter\" *ngIf=\"showOwnFilter\">\n  <mat-form-field appearance=\"outline\" class=\"filter-field\">\n    <mat-icon matPrefix>search</mat-icon>\n    <input matInput placeholder=\"Filter\" [(ngModel)]=\"filterText\" (ngModelChange)=\"applyFilter()\">\n    <button *ngIf=\"filterText\" mat-icon-button matSuffix (click)=\"filterText = ''; applyFilter()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<div class=\"groups-container\" cdkDropListGroup>\n\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\n\n    <div class=\"group-header\">\n      <div class=\"header-left\">\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\n        <!-- Changed: added the native title attribute. On a phone the title now truncates with an ellipsis rather\n             than wrapping to a second line, so the full name has to stay reachable somewhere \u2014 this is the\n             zero-cost way to keep it. No tooltip directive, so nothing changes on touch. -->\n        <label class=\"group-title\" [title]=\"group.displayName\">{{group.displayName}}</label>\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\n      </div>\n\n      <div class=\"header-right\">\n        <button\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\n          mat-icon-button\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\n          matTooltipPosition=\"above\"\n          [style.color]=\"getHeaderButtonColor(button, group)\"\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\n          (click)=\"headerButtonClicked(button, group)\">\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <hr class=\"group-divider\" />\n\n    <!-- Empty state: show when no items and drag is disabled -->\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n    </div>\n\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\n    <div\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\n      cdkDropList\n      [cdkDropListData]=\"group.items\"\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\n      (cdkDropListExited)=\"onDropListExited($event)\"\n      [class.drop-highlight]=\"group === highlightedGroup\"\n      class=\"drop-list items-container\">\n\n      <!-- Empty state inside drop list when drag is enabled -->\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n      </div>\n\n      <button\n        mat-stroked-button\n        *ngFor=\"let item of group.items\"\n        cdkDrag [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\n        [matMenuTriggerData]=\"{item: item, group: group}\"\n        class=\"item-button\">\n\n        <mat-icon\n          *ngIf=\"getItemIcon(item)\"\n          [style.color]=\"getItemIconColor(item)\"\n          [matTooltip]=\"getItemIconTip(item)\"\n          matTooltipPosition=\"above\"\n          class=\"item-icon\">\n          {{getItemIcon(item)}}\n        </mat-icon>\n\n        <!-- Changed: the item text moved into its own span so a runaway name can be capped and ellipsised without\n             also squeezing the icons, which share this projection slot with it. The native title attribute keeps the\n             full name recoverable on a truncated chip \u2014 same treatment already used on the group title above, and no\n             tooltip directive, so touch behaviour is unchanged. -->\n        <span class=\"item-label\" [title]=\"getItemText(item)\">{{getItemText(item)}}</span>\n\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\n          <mat-icon\n            [style.color]=\"additionalIcon.color\"\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\n            matTooltipPosition=\"above\"\n            class=\"item-additional-icon\">\n            {{additionalIcon.name}}\n          </mat-icon>\n        </ng-container>\n\n      </button>\n    </div>\n\n  </mat-card>\n\n</div>\n\n<mat-menu #itemMenu=\"matMenu\">\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\n    <button\n      *ngFor=\"let button of getVisibleButtons(item)\"\n      mat-menu-item\n      [disabled]=\"isButtonDisabled(button, item)\"\n      (click)=\"itemActionClicked(button.name, item, group)\">\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [".groups-filter{display:flex;justify-content:flex-end;margin-bottom:8px;padding-right:10px}.filter-field{width:300px;font-size:13px}.filter-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}.groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:8px 16px 16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:0;min-height:32px}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{margin-right:5px;font-size:24px;width:24px;height:24px;line-height:24px}.group-title{font-size:24px;font-weight:300;line-height:1.2}.group-count{font-size:12px;font-weight:300;margin-left:5px;line-height:1.2}.group-divider{margin-top:8px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-label{display:inline-block;max-width:260px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.header-right button[mat-icon-button]{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:normal}.header-right button[mat-icon-button] mat-icon{margin:0;font-size:20px;width:20px;height:20px;line-height:20px;display:block}.header-right button[mat-icon-button] .mat-mdc-button-touch-target{display:none}@media (max-width: 700px){.groups-container{gap:12px;padding-right:0}.group-card{padding:8px 10px 10px}.header-left{flex:1 1 auto;min-width:0;gap:4px}.group-icon{flex:0 0 auto;margin-right:2px;font-size:20px;width:20px;height:20px;line-height:20px}.group-title{font-size:16px;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-count{flex:0 0 auto;margin-left:2px;font-size:11px}.header-right{flex:0 0 auto;gap:0}.header-right button[mat-icon-button] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.group-header{min-height:28px}.group-divider{margin-top:6px;margin-bottom:6px}.items-container{gap:6px;padding:4px 0}.item-button{min-width:0;height:32px;padding:0 9px;font-size:12.5px;letter-spacing:normal;border-radius:16px;border-color:#0000001f;--mdc-outlined-button-container-height: 32px;--mdc-outlined-button-container-shape: 16px;--mdc-outlined-button-label-text-size: 12.5px}.item-button ::ng-deep .mdc-button__label{letter-spacing:normal;display:inline-flex;align-items:center}.item-button ::ng-deep .mat-mdc-button-touch-target{height:100%}.item-label{max-width:104px}.item-icon{font-size:14px;width:14px;height:14px;margin-right:3px}.item-additional-icon{font-size:14px;width:14px;height:14px;margin-left:3px}.drop-list{min-height:32px}.empty-state{padding:4px 10px}}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: ConditionService }, { type: ButtonService }, { type: DataServiceLib }, { type: i2$1.MatSnackBar }, { type: ApiErrorService }], propDecorators: { config: [{
                 type: Input
             }], dataSource: [{
@@ -16715,6 +17477,25 @@ class TableComponent {
     startInlineEdit(row) {
         this.editingRow = row;
         this.editingModel = { ...row }; // shallow copy — scalars only change, cancel restores by discarding
+        this.seedInlineDefaults(row); // Added: a field the row does not carry would otherwise open blank
+    }
+    // Added: an inline-editable field the row has no value for (a weaning date on a "ready to wean" row) opened
+    // empty, so every operator retyped the same obvious answer. It now takes the field's OWN defaultValue, exactly
+    // as the dialog form does via Core.getInitialValue — including defaultValue:'now' for dates. defaultValue may
+    // additionally be a FUNCTION OF THE ROW here (count -> row.alive), which the dialog path has no need of because
+    // a create dialog has no row to read. Only null/undefined values are seeded, so real row data is never replaced.
+    seedInlineDefaults(row) {
+        if (!this.config.inlineEdit || !this.config.columns)
+            return;
+        for (const column of this.config.columns) {
+            const field = this.getInlineField(column);
+            if (!field || field.defaultValue === undefined || field.defaultValue === null)
+                continue;
+            const current = this.editingModel[field.name];
+            if (current !== undefined && current !== null && current !== '')
+                continue;
+            this.editingModel[field.name] = typeof field.defaultValue === 'function' ? field.defaultValue(row) : Core.getInitialValue(field);
+        }
     }
     cancelInlineEdit() {
         this.editingRow = null;
@@ -17656,11 +18437,11 @@ class TableComponent {
         this.setPaginator();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i1$4.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }, { token: AuthService }, { token: SignalRService }, { token: OfflineService }, { token: ApiErrorService }, { token: TIN_SPA_RUNTIME_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableComponent, isStandalone: false, selector: "spa-table", inputs: { data: "data", tileData: "tileData", config: "config", localMode: "localMode", parentDetails: "parentDetails", reload: "reload", activeTab: "activeTab", inTab: "inTab", nestingLevel: "nestingLevel" }, outputs: { dataLoad: "dataLoad", totalChange: "totalChange", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<ng-container *ngIf=\"hasFormAccess && !sectionHidden\"> <!-- Changed: sectionConfig.hideWhenEmpty hides the whole table -->\n\n  <!-- Added: collapsible flat section header (sectionConfig) \u2014 1px border, no elevation, whole row toggles -->\n  <div class=\"tbl-section-header\" *ngIf=\"config.sectionConfig\" (click)=\"toggleSection()\" [attr.aria-expanded]=\"!sectionCollapsed\" [class.tbl-section-static]=\"config.sectionConfig.collapsible === false\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"toggleSection()\">\n    <mat-icon class=\"tbl-section-icon\" *ngIf=\"config.sectionConfig.icon\">{{ config.sectionConfig.icon }}</mat-icon>\n    <span class=\"tbl-section-title\">{{ config.sectionConfig.title }}</span>\n    <span class=\"tbl-section-count\" *ngIf=\"config.sectionConfig.showCount !== false\">{{ dataSource?.length || 0 }}</span>\n    <span class=\"tbl-section-chip\" *ngFor=\"let chip of sectionChips()\" [style.color]=\"chip.color\">{{ chip.text }}</span>\n    <span class=\"tbl-section-spacer\"></span>\n    <!-- Changed: the label is wrapped so a NARROW screen can drop it and leave an icon-only button. Only a\n         button that HAS an icon loses its text \u2014 otherwise it would collapse to a blank square. -->\n    <button mat-stroked-button color=\"primary\" *ngFor=\"let btn of sectionButtons()\" (click)=\"sectionButtonClicked(btn, $event)\" [matTooltip]=\"btn.display || btn.name\"><mat-icon *ngIf=\"btn.icon?.name\">{{ btn.icon.name }}</mat-icon><span class=\"tbl-section-btn-text\" [class.has-icon]=\"!!btn.icon?.name\">{{ btn.display || btn.name }}</span></button>\n    <mat-icon class=\"tbl-section-chevron\" *ngIf=\"config.sectionConfig.collapsible !== false\">{{ sectionCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n  </div>\n\n  <!-- Added: the section's \"why this list exists\" line. It sits UNDER the title (a reason only makes sense once\n       the list has been named) and only while the section is open \u2014 a shut section already has its own summary\n       line, and a paragraph over the top of that is noise. -->\n  <p class=\"tbl-section-caption\" *ngIf=\"config.sectionConfig?.caption && !sectionCollapsed\">{{ config.sectionConfig.caption }}</p>\n\n  <!-- Added: collapsed section affordance \u2014 mirrors the Day Book \"Show the N\" pattern -->\n  <div class=\"tbl-section-more\" *ngIf=\"config.sectionConfig && sectionCollapsed && (dataSource?.length || 0) > 0\">\n    <button type=\"button\" class=\"tbl-section-link\" (click)=\"toggleSection()\">Show the {{ dataSource.length }}</button>\n  </div>\n\n  <ng-container *ngIf=\"!config.sectionConfig || !sectionCollapsed\"> <!-- Added: section collapse hides the table body -->\n\n  <!-- Search -->\n  <spa-search\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n  </spa-search>\n\n  <!-- Header -->\n  <app-table-header\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\n    [showFilterButton]=\"showFilterButton\" [isRealTime]=\"config.realTime\" [isConnected]=\"isSignalRConnected\" [refreshing]=\"loadingStage === 'refresh'\"\n    (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\" (filterChange)=\"filterChanged($event)\">\n  </app-table-header>\n\n  <!-- Added (Quiet Loading D4): refresh with data already on screen \u2014 a 2px line flush under the header and the\n       spinning refresh icon are the ONLY signals. Rows stay live, clickable and un-dimmed while they swap. -->\n  <div *ngIf=\"loadingStage === 'refresh'\" class=\"tin-load-line\" aria-hidden=\"true\">\n    <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n  </div>\n\n  <!-- Added: paged-mode filter hint \u2014 the client filter only covers rows loaded so far -->\n  <div *ngIf=\"pagedMode && filterActive && loadedRows.length < serverTotal\" class=\"paged-filter-hint\">\n    <mat-icon>info</mat-icon>\n    <span>Filtering only the {{loadedRows.length}} loaded rows of {{serverTotal}}. {{ config.searchConfig ? 'Use Search for complete results.' : 'Refine with search for complete results.' }}</span>\n  </div>\n\n\n  <!-- Table -->\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\n\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\n    <p *ngIf=\"!dataSource && !loadingStage\"><em>Loading...</em></p> <!-- Changed (Quiet Loading): the bare text is replaced by the stage below while a quiet load is on screen -->\n\n    <!-- Added (Quiet Loading D3): first load, nothing on screen yet. The progress module is the hero (eased bar +\n         counting percentage + caption) and the ghost rows hold the exact space the real rows will fill, so the\n         table does not jump when data lands. Only ever rendered when quiet loading is on. -->\n    <div *ngIf=\"loadingStage === 'initial'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n\n      <div class=\"tin-load-progress\">\n        <div class=\"tin-load-bar\">\n          <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n        </div>\n        <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n      </div>\n\n      <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n      <div class=\"tin-load-ghosts\">\n        <div class=\"tin-load-ghost-row\" *ngFor=\"let r of ghostRows\">\n          <div class=\"tin-load-ghost-cell\" *ngFor=\"let c of ghostColumns; let i = index\">\n            <span class=\"tin-skel\" [style.width.%]=\"ghostWidth(i, c)\" [style.animation-delay.ms]=\"r * 120\"></span> <!-- staggered sweep: each row starts 120ms after the one above -->\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"dataSource && loadingStage !== 'initial' && (!smallScreen || (smallScreen && dataSource?.length > 0))\" [class.tin-load-in]=\"effQuietLoading\"> <!-- Changed (Quiet Loading): the empty header-only table is suppressed while the initial stage stands in for it, and the real rows fade in where the ghosts were (D3) -->\n\n      <table mat-table [dataSource]=\"tableDataSource\" [trackBy]=\"trackByRow\" [ngClass]=\"elevation\" [class.tin-no-col-headers]=\"config.hideColumnHeaders\"> <!-- Changed: optional column-header suppression -->\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n            <!-- Added: inline edit \u2014 editable cells swap to their form-field editor while the row is in edit mode -->\n            <app-inline-cell *ngIf=\"isRowEditing(row) && getInlineField(column); else displayCell\" [field]=\"getInlineField(column)\" [data]=\"editingModel\"></app-inline-cell>\n\n            <!-- Rows -->\n            <ng-template #displayCell>\n              <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\n                (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n              </app-table-row>\n            </ng-template>\n\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\n            <div class=\"action-buttons-container\">\n\n              <!-- Added: inline edit \u2014 while a row edits in place, its actions collapse to submit/cancel -->\n              <ng-container *ngIf=\"isRowEditing(row); else rowActions\">\n                <button mat-icon-button matTooltip=\"Save\" matTooltipPosition=\"above\" (click)=\"submitInlineEdit()\"><mat-icon class=\"inline-save\">check</mat-icon></button> <!-- Changed: dropped color=\"primary\" \u2014 the icon now carries a green save cue -->\n                <button mat-icon-button matTooltip=\"Cancel\" matTooltipPosition=\"above\" (click)=\"cancelInlineEdit()\"><mat-icon class=\"inline-cancel\">close</mat-icon></button> <!-- Changed: red cancel cue -->\n              </ng-container>\n\n              <!-- Actions -->\n              <ng-template #rowActions>\n                <app-table-action\n                  [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n                </app-table-action>\n              </ng-template>\n\n            </div>\n          </td>\n        </ng-container>\n\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval, 'row-editing': isRowEditing(row)}\"></tr> <!-- Changed: row-editing flags the row that is open for inline edit -->\n      </table>\n\n    </div>\n\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\n    <!-- Changed: Legacy paginator only renders in non-paged mode (pagedMode is constant per instance, set before first render) -->\n    <mat-paginator *ngIf=\"!pagedMode\"\n      #tablePaginator\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      showFirstLastButtons>\n    </mat-paginator>\n\n    <!-- Added: manual paginator for server-side paged mode \u2014 fully state-bound, never attached to MatTableDataSource. Always visible: when filtering it pages the in-memory filtered subset (length = filtered count); otherwise the server window (length = true total). No first/last jump (would force fetching the whole gap). -->\n    <mat-paginator *ngIf=\"pagedMode\"\n      [length]=\"filterActive ? filteredRows.length : serverTotal + overlayDelta\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      (page)=\"onServerPage($event)\">\n    </mat-paginator>\n\n  </div>\n  \n  <!-- Added (Quiet Loading): the initial-load stage for the NON-table views.\n       Without this, card/capsule/grouped showed literally nothing during a first load \u2014 the view component\n       renders an empty dataSource and the \"No Data\" line is suppressed while the stage owns the space.\n       The progress header is identical to the table's so the two feel like one feature; only the ghost\n       furniture differs, because column-shaped rows are wrong in a card grid. -->\n  <div *ngIf=\"loadingStage === 'initial' && config?.viewType && config?.viewType !== 'table'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n    <div class=\"tin-load-progress\">\n      <div class=\"tin-load-bar\">\n        <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n      </div>\n      <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n    </div>\n    <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n    <div *ngIf=\"config?.viewType === 'capsule'\" class=\"tin-load-ghost-capsules\" aria-hidden=\"true\">\n      <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let c of ghostCapsules\"></span>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'card'\" class=\"tin-load-ghost-cards\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-card\" *ngFor=\"let c of ghostCards\">\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-title\"></span>\n        <span class=\"tin-skel tin-skel-text\"></span>\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-short\"></span>\n      </div>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'grouped'\" class=\"tin-load-ghost-groups\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-group\" *ngFor=\"let g of ghostGroups\">\n        <span class=\"tin-skel tin-load-ghost-group-head\"></span>\n        <!-- Pills, not rows: a group card's body is a wrap of chips, so full-width bars promised a table\n             and the stage did not resemble what replaced it. -->\n        <div class=\"tin-load-ghost-group-items\">\n          <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let r of ghostCards\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Capsules -->\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\n  </spa-capsules>\n\n\n  <!-- Cards -->\n  <spa-cards *ngIf=\"config?.viewType === 'card' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [smallScreen]=\"smallScreen\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\n    (showBannerEvent)=\"showBanner($event)\">\n  </spa-cards>\n\n  <!-- Groups - Added: New grouped view type -->\n  <!-- Changed: the grouped view no longer renders its own filter field. It used to sit on a row of its own\n       beneath the buttons row, which left both rows half empty and, more importantly, was a SECOND filter with\n       no refresh button. The standard header filter (which has refresh, like every other table) now drives it,\n       with its text relayed in through filterText. -->\n  <spa-groups *ngIf=\"config?.viewType === 'grouped' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [showOwnFilter]=\"false\"\n    [filterText]=\"groupFilterText\"\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\n  </spa-groups>\n\n\n  <div class=\"tin-center\">\n    <p *ngIf=\"dataSource?.length == 0 && loadingStage !== 'initial'\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p> <!-- Changed (Quiet Loading): the stage owns the space until it completes, then hands straight over to this message \u2014 no \"No Data\" flashing underneath the ghost rows -->\n  </div>\n\n  </ng-container> <!-- Added: end section-collapse wrapper -->\n\n</ng-container>\n\n\n<ng-container *ngIf=\"!hasFormAccess\">\n  <div class=\"tin-center\">\n    <p><em>Access Restricted</em></p>\n  </div>\n</ng-container>\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}.tbl-section-icon,.tbl-section-chevron,.tbl-section-count{flex:0 0 auto}.tbl-section-title{flex:1 1 auto;min-width:0}@media (max-width: 700px){.tbl-section-header{gap:8px;padding:10px}.tbl-section-chip,.tbl-section-btn-text.has-icon{display:none}.tbl-section-header button{min-width:0;padding:0 10px}}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i15$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData", "isRealTime", "isConnected", "refreshing"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick", "filterChange"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: InlineCellComponent, selector: "app-inline-cell", inputs: ["field", "data"], outputs: ["valueChange"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons", "showOwnFilter", "filterText"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableComponent, isStandalone: false, selector: "spa-table", inputs: { data: "data", tileData: "tileData", config: "config", localMode: "localMode", parentDetails: "parentDetails", reload: "reload", activeTab: "activeTab", inTab: "inTab", nestingLevel: "nestingLevel" }, outputs: { dataLoad: "dataLoad", totalChange: "totalChange", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<ng-container *ngIf=\"hasFormAccess && !sectionHidden\"> <!-- Changed: sectionConfig.hideWhenEmpty hides the whole table -->\n\n  <!-- Added: collapsible flat section header (sectionConfig) \u2014 1px border, no elevation, whole row toggles -->\n  <div class=\"tbl-section-header\" *ngIf=\"config.sectionConfig\" (click)=\"toggleSection()\" [attr.aria-expanded]=\"!sectionCollapsed\" [class.tbl-section-static]=\"config.sectionConfig.collapsible === false\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"toggleSection()\">\n    <mat-icon class=\"tbl-section-icon\" *ngIf=\"config.sectionConfig.icon\">{{ config.sectionConfig.icon }}</mat-icon>\n    <span class=\"tbl-section-title\">{{ config.sectionConfig.title }}</span>\n    <span class=\"tbl-section-count\" *ngIf=\"config.sectionConfig.showCount !== false\">{{ dataSource?.length || 0 }}</span>\n    <span class=\"tbl-section-chip\" *ngFor=\"let chip of sectionChips()\" [style.color]=\"chip.color\">{{ chip.text }}</span>\n    <span class=\"tbl-section-spacer\"></span>\n    <!-- Changed: the label is wrapped so a NARROW screen can drop it and leave an icon-only button. Only a\n         button that HAS an icon loses its text \u2014 otherwise it would collapse to a blank square. -->\n    <button mat-stroked-button color=\"primary\" *ngFor=\"let btn of sectionButtons()\" (click)=\"sectionButtonClicked(btn, $event)\" [matTooltip]=\"btn.display || btn.name\"><mat-icon *ngIf=\"btn.icon?.name\">{{ btn.icon.name }}</mat-icon><span class=\"tbl-section-btn-text\" [class.has-icon]=\"!!btn.icon?.name\">{{ btn.display || btn.name }}</span></button>\n    <mat-icon class=\"tbl-section-chevron\" *ngIf=\"config.sectionConfig.collapsible !== false\">{{ sectionCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n  </div>\n\n  <!-- Added: the section's \"why this list exists\" line. It sits UNDER the title (a reason only makes sense once\n       the list has been named) and only while the section is open \u2014 a shut section already has its own summary\n       line, and a paragraph over the top of that is noise. -->\n  <p class=\"tbl-section-caption\" *ngIf=\"config.sectionConfig?.caption && !sectionCollapsed\">{{ config.sectionConfig.caption }}</p>\n\n  <!-- Added: collapsed section affordance \u2014 mirrors the Day Book \"Show the N\" pattern -->\n  <div class=\"tbl-section-more\" *ngIf=\"config.sectionConfig && sectionCollapsed && (dataSource?.length || 0) > 0\">\n    <button type=\"button\" class=\"tbl-section-link\" (click)=\"toggleSection()\">Show the {{ dataSource.length }}</button>\n  </div>\n\n  <ng-container *ngIf=\"!config.sectionConfig || !sectionCollapsed\"> <!-- Added: section collapse hides the table body -->\n\n  <!-- Search -->\n  <spa-search\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n  </spa-search>\n\n  <!-- Header -->\n  <!-- Changed: [isRealTime] binds the RESOLVED value, not the raw config. It was `config.realTime`, so the live\n       indicator only ever appeared on a table that set the flag ITSELF \u2014 a table relying on the app-wide\n       `tableDefaults.realTime` was genuinely subscribed to SignalR (setupRealTimeSubscriptions and\n       realTimeRefreshOrFallback both resolve through effRealTime) and simply never showed the dot. That is\n       how \"Trips and Loads have no real time\" got reported: a status light disagreeing with the system it\n       reports on. effRealTime also gets the inverse right \u2014 realTime:true under a global false still lights,\n       and realTime:false under a global true stays dark. -->\n  <app-table-header\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\n    [showFilterButton]=\"showFilterButton\" [isRealTime]=\"effRealTime\" [isConnected]=\"isSignalRConnected\" [refreshing]=\"loadingStage === 'refresh'\"\n    (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\" (filterChange)=\"filterChanged($event)\">\n  </app-table-header>\n\n  <!-- Added (Quiet Loading D4): refresh with data already on screen \u2014 a 2px line flush under the header and the\n       spinning refresh icon are the ONLY signals. Rows stay live, clickable and un-dimmed while they swap. -->\n  <div *ngIf=\"loadingStage === 'refresh'\" class=\"tin-load-line\" aria-hidden=\"true\">\n    <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n  </div>\n\n  <!-- Added: paged-mode filter hint \u2014 the client filter only covers rows loaded so far -->\n  <div *ngIf=\"pagedMode && filterActive && loadedRows.length < serverTotal\" class=\"paged-filter-hint\">\n    <mat-icon>info</mat-icon>\n    <span>Filtering only the {{loadedRows.length}} loaded rows of {{serverTotal}}. {{ config.searchConfig ? 'Use Search for complete results.' : 'Refine with search for complete results.' }}</span>\n  </div>\n\n\n  <!-- Table -->\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\n\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\n    <p *ngIf=\"!dataSource && !loadingStage\"><em>Loading...</em></p> <!-- Changed (Quiet Loading): the bare text is replaced by the stage below while a quiet load is on screen -->\n\n    <!-- Added (Quiet Loading D3): first load, nothing on screen yet. The progress module is the hero (eased bar +\n         counting percentage + caption) and the ghost rows hold the exact space the real rows will fill, so the\n         table does not jump when data lands. Only ever rendered when quiet loading is on. -->\n    <div *ngIf=\"loadingStage === 'initial'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n\n      <div class=\"tin-load-progress\">\n        <div class=\"tin-load-bar\">\n          <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n        </div>\n        <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n      </div>\n\n      <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n      <div class=\"tin-load-ghosts\">\n        <div class=\"tin-load-ghost-row\" *ngFor=\"let r of ghostRows\">\n          <div class=\"tin-load-ghost-cell\" *ngFor=\"let c of ghostColumns; let i = index\">\n            <span class=\"tin-skel\" [style.width.%]=\"ghostWidth(i, c)\" [style.animation-delay.ms]=\"r * 120\"></span> <!-- staggered sweep: each row starts 120ms after the one above -->\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"dataSource && loadingStage !== 'initial' && (!smallScreen || (smallScreen && dataSource?.length > 0))\" [class.tin-load-in]=\"effQuietLoading\"> <!-- Changed (Quiet Loading): the empty header-only table is suppressed while the initial stage stands in for it, and the real rows fade in where the ghosts were (D3) -->\n\n      <table mat-table [dataSource]=\"tableDataSource\" [trackBy]=\"trackByRow\" [ngClass]=\"elevation\" [class.tin-no-col-headers]=\"config.hideColumnHeaders\"> <!-- Changed: optional column-header suppression -->\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n            <!-- Added: inline edit \u2014 editable cells swap to their form-field editor while the row is in edit mode -->\n            <app-inline-cell *ngIf=\"isRowEditing(row) && getInlineField(column); else displayCell\" [field]=\"getInlineField(column)\" [data]=\"editingModel\"></app-inline-cell>\n\n            <!-- Rows -->\n            <ng-template #displayCell>\n              <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\n                (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n              </app-table-row>\n            </ng-template>\n\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\n            <div class=\"action-buttons-container\">\n\n              <!-- Added: inline edit \u2014 while a row edits in place, its actions collapse to submit/cancel -->\n              <ng-container *ngIf=\"isRowEditing(row); else rowActions\">\n                <button mat-icon-button matTooltip=\"Save\" matTooltipPosition=\"above\" (click)=\"submitInlineEdit()\"><mat-icon class=\"inline-save\">check</mat-icon></button> <!-- Changed: dropped color=\"primary\" \u2014 the icon now carries a green save cue -->\n                <button mat-icon-button matTooltip=\"Cancel\" matTooltipPosition=\"above\" (click)=\"cancelInlineEdit()\"><mat-icon class=\"inline-cancel\">close</mat-icon></button> <!-- Changed: red cancel cue -->\n              </ng-container>\n\n              <!-- Actions -->\n              <ng-template #rowActions>\n                <app-table-action\n                  [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n                </app-table-action>\n              </ng-template>\n\n            </div>\n          </td>\n        </ng-container>\n\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval, 'row-editing': isRowEditing(row)}\"></tr> <!-- Changed: row-editing flags the row that is open for inline edit -->\n      </table>\n\n    </div>\n\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\n    <!-- Changed: Legacy paginator only renders in non-paged mode (pagedMode is constant per instance, set before first render) -->\n    <!-- Changed: hidePageSize on a phone. The \"Items per page\" label and its select cost a whole row of a\n         narrow screen for a control almost nobody touches there \u2014 the default is what gets used. The range\n         (\"1 \u2013 10 of 54\") and the arrows stay, which is the part that is actually navigated. Bound to\n         smallScreen, the component's existing breakpoint (max-width 600px, live via BreakpointObserver), so\n         the paginator agrees with how this table already decides what \"mobile\" means rather than\n         introducing a third breakpoint. -->\n    <mat-paginator *ngIf=\"!pagedMode\"\n      #tablePaginator\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [hidePageSize]=\"smallScreen\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      showFirstLastButtons>\n    </mat-paginator>\n\n    <!-- Added: manual paginator for server-side paged mode \u2014 fully state-bound, never attached to MatTableDataSource. Always visible: when filtering it pages the in-memory filtered subset (length = filtered count); otherwise the server window (length = true total). No first/last jump (would force fetching the whole gap). -->\n    <mat-paginator *ngIf=\"pagedMode\"\n      [length]=\"filterActive ? filteredRows.length : serverTotal + overlayDelta\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [hidePageSize]=\"smallScreen\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      (page)=\"onServerPage($event)\">\n    </mat-paginator>\n\n  </div>\n  \n  <!-- Added (Quiet Loading): the initial-load stage for the NON-table views.\n       Without this, card/capsule/grouped showed literally nothing during a first load \u2014 the view component\n       renders an empty dataSource and the \"No Data\" line is suppressed while the stage owns the space.\n       The progress header is identical to the table's so the two feel like one feature; only the ghost\n       furniture differs, because column-shaped rows are wrong in a card grid. -->\n  <div *ngIf=\"loadingStage === 'initial' && config?.viewType && config?.viewType !== 'table'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n    <div class=\"tin-load-progress\">\n      <div class=\"tin-load-bar\">\n        <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n      </div>\n      <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n    </div>\n    <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n    <div *ngIf=\"config?.viewType === 'capsule'\" class=\"tin-load-ghost-capsules\" aria-hidden=\"true\">\n      <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let c of ghostCapsules\"></span>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'card'\" class=\"tin-load-ghost-cards\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-card\" *ngFor=\"let c of ghostCards\">\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-title\"></span>\n        <span class=\"tin-skel tin-skel-text\"></span>\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-short\"></span>\n      </div>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'grouped'\" class=\"tin-load-ghost-groups\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-group\" *ngFor=\"let g of ghostGroups\">\n        <span class=\"tin-skel tin-load-ghost-group-head\"></span>\n        <!-- Pills, not rows: a group card's body is a wrap of chips, so full-width bars promised a table\n             and the stage did not resemble what replaced it. -->\n        <div class=\"tin-load-ghost-group-items\">\n          <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let r of ghostCards\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Capsules -->\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\n  </spa-capsules>\n\n\n  <!-- Cards -->\n  <spa-cards *ngIf=\"config?.viewType === 'card' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [smallScreen]=\"smallScreen\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\n    (showBannerEvent)=\"showBanner($event)\">\n  </spa-cards>\n\n  <!-- Groups - Added: New grouped view type -->\n  <!-- Changed: the grouped view no longer renders its own filter field. It used to sit on a row of its own\n       beneath the buttons row, which left both rows half empty and, more importantly, was a SECOND filter with\n       no refresh button. The standard header filter (which has refresh, like every other table) now drives it,\n       with its text relayed in through filterText. -->\n  <spa-groups *ngIf=\"config?.viewType === 'grouped' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [showOwnFilter]=\"false\"\n    [filterText]=\"groupFilterText\"\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\n  </spa-groups>\n\n\n  <div class=\"tin-center\">\n    <p *ngIf=\"dataSource?.length == 0 && loadingStage !== 'initial'\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p> <!-- Changed (Quiet Loading): the stage owns the space until it completes, then hands straight over to this message \u2014 no \"No Data\" flashing underneath the ghost rows -->\n  </div>\n\n  </ng-container> <!-- Added: end section-collapse wrapper -->\n\n</ng-container>\n\n\n<ng-container *ngIf=\"!hasFormAccess\">\n  <div class=\"tin-center\">\n    <p><em>Access Restricted</em></p>\n  </div>\n</ng-container>\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}.tbl-section-icon,.tbl-section-chevron,.tbl-section-count{flex:0 0 auto}.tbl-section-title{flex:1 1 auto;min-width:0}@media (max-width: 700px){.tbl-section-header{gap:8px;padding:10px}.tbl-section-chip,.tbl-section-btn-text.has-icon{display:none}.tbl-section-header button{min-width:0;padding:0 10px}}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i15$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData", "isRealTime", "isConnected", "refreshing"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick", "filterChange"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: InlineCellComponent, selector: "app-inline-cell", inputs: ["field", "data"], outputs: ["valueChange"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons", "showOwnFilter", "filterText"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-table', standalone: false, template: "\n<ng-container *ngIf=\"hasFormAccess && !sectionHidden\"> <!-- Changed: sectionConfig.hideWhenEmpty hides the whole table -->\n\n  <!-- Added: collapsible flat section header (sectionConfig) \u2014 1px border, no elevation, whole row toggles -->\n  <div class=\"tbl-section-header\" *ngIf=\"config.sectionConfig\" (click)=\"toggleSection()\" [attr.aria-expanded]=\"!sectionCollapsed\" [class.tbl-section-static]=\"config.sectionConfig.collapsible === false\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"toggleSection()\">\n    <mat-icon class=\"tbl-section-icon\" *ngIf=\"config.sectionConfig.icon\">{{ config.sectionConfig.icon }}</mat-icon>\n    <span class=\"tbl-section-title\">{{ config.sectionConfig.title }}</span>\n    <span class=\"tbl-section-count\" *ngIf=\"config.sectionConfig.showCount !== false\">{{ dataSource?.length || 0 }}</span>\n    <span class=\"tbl-section-chip\" *ngFor=\"let chip of sectionChips()\" [style.color]=\"chip.color\">{{ chip.text }}</span>\n    <span class=\"tbl-section-spacer\"></span>\n    <!-- Changed: the label is wrapped so a NARROW screen can drop it and leave an icon-only button. Only a\n         button that HAS an icon loses its text \u2014 otherwise it would collapse to a blank square. -->\n    <button mat-stroked-button color=\"primary\" *ngFor=\"let btn of sectionButtons()\" (click)=\"sectionButtonClicked(btn, $event)\" [matTooltip]=\"btn.display || btn.name\"><mat-icon *ngIf=\"btn.icon?.name\">{{ btn.icon.name }}</mat-icon><span class=\"tbl-section-btn-text\" [class.has-icon]=\"!!btn.icon?.name\">{{ btn.display || btn.name }}</span></button>\n    <mat-icon class=\"tbl-section-chevron\" *ngIf=\"config.sectionConfig.collapsible !== false\">{{ sectionCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n  </div>\n\n  <!-- Added: the section's \"why this list exists\" line. It sits UNDER the title (a reason only makes sense once\n       the list has been named) and only while the section is open \u2014 a shut section already has its own summary\n       line, and a paragraph over the top of that is noise. -->\n  <p class=\"tbl-section-caption\" *ngIf=\"config.sectionConfig?.caption && !sectionCollapsed\">{{ config.sectionConfig.caption }}</p>\n\n  <!-- Added: collapsed section affordance \u2014 mirrors the Day Book \"Show the N\" pattern -->\n  <div class=\"tbl-section-more\" *ngIf=\"config.sectionConfig && sectionCollapsed && (dataSource?.length || 0) > 0\">\n    <button type=\"button\" class=\"tbl-section-link\" (click)=\"toggleSection()\">Show the {{ dataSource.length }}</button>\n  </div>\n\n  <ng-container *ngIf=\"!config.sectionConfig || !sectionCollapsed\"> <!-- Added: section collapse hides the table body -->\n\n  <!-- Search -->\n  <spa-search\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n  </spa-search>\n\n  <!-- Header -->\n  <app-table-header\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\n    [showFilterButton]=\"showFilterButton\" [isRealTime]=\"config.realTime\" [isConnected]=\"isSignalRConnected\" [refreshing]=\"loadingStage === 'refresh'\"\n    (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\" (filterChange)=\"filterChanged($event)\">\n  </app-table-header>\n\n  <!-- Added (Quiet Loading D4): refresh with data already on screen \u2014 a 2px line flush under the header and the\n       spinning refresh icon are the ONLY signals. Rows stay live, clickable and un-dimmed while they swap. -->\n  <div *ngIf=\"loadingStage === 'refresh'\" class=\"tin-load-line\" aria-hidden=\"true\">\n    <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n  </div>\n\n  <!-- Added: paged-mode filter hint \u2014 the client filter only covers rows loaded so far -->\n  <div *ngIf=\"pagedMode && filterActive && loadedRows.length < serverTotal\" class=\"paged-filter-hint\">\n    <mat-icon>info</mat-icon>\n    <span>Filtering only the {{loadedRows.length}} loaded rows of {{serverTotal}}. {{ config.searchConfig ? 'Use Search for complete results.' : 'Refine with search for complete results.' }}</span>\n  </div>\n\n\n  <!-- Table -->\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\n\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\n    <p *ngIf=\"!dataSource && !loadingStage\"><em>Loading...</em></p> <!-- Changed (Quiet Loading): the bare text is replaced by the stage below while a quiet load is on screen -->\n\n    <!-- Added (Quiet Loading D3): first load, nothing on screen yet. The progress module is the hero (eased bar +\n         counting percentage + caption) and the ghost rows hold the exact space the real rows will fill, so the\n         table does not jump when data lands. Only ever rendered when quiet loading is on. -->\n    <div *ngIf=\"loadingStage === 'initial'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n\n      <div class=\"tin-load-progress\">\n        <div class=\"tin-load-bar\">\n          <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n        </div>\n        <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n      </div>\n\n      <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n      <div class=\"tin-load-ghosts\">\n        <div class=\"tin-load-ghost-row\" *ngFor=\"let r of ghostRows\">\n          <div class=\"tin-load-ghost-cell\" *ngFor=\"let c of ghostColumns; let i = index\">\n            <span class=\"tin-skel\" [style.width.%]=\"ghostWidth(i, c)\" [style.animation-delay.ms]=\"r * 120\"></span> <!-- staggered sweep: each row starts 120ms after the one above -->\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"dataSource && loadingStage !== 'initial' && (!smallScreen || (smallScreen && dataSource?.length > 0))\" [class.tin-load-in]=\"effQuietLoading\"> <!-- Changed (Quiet Loading): the empty header-only table is suppressed while the initial stage stands in for it, and the real rows fade in where the ghosts were (D3) -->\n\n      <table mat-table [dataSource]=\"tableDataSource\" [trackBy]=\"trackByRow\" [ngClass]=\"elevation\" [class.tin-no-col-headers]=\"config.hideColumnHeaders\"> <!-- Changed: optional column-header suppression -->\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n            <!-- Added: inline edit \u2014 editable cells swap to their form-field editor while the row is in edit mode -->\n            <app-inline-cell *ngIf=\"isRowEditing(row) && getInlineField(column); else displayCell\" [field]=\"getInlineField(column)\" [data]=\"editingModel\"></app-inline-cell>\n\n            <!-- Rows -->\n            <ng-template #displayCell>\n              <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\n                (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n              </app-table-row>\n            </ng-template>\n\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\n            <div class=\"action-buttons-container\">\n\n              <!-- Added: inline edit \u2014 while a row edits in place, its actions collapse to submit/cancel -->\n              <ng-container *ngIf=\"isRowEditing(row); else rowActions\">\n                <button mat-icon-button matTooltip=\"Save\" matTooltipPosition=\"above\" (click)=\"submitInlineEdit()\"><mat-icon class=\"inline-save\">check</mat-icon></button> <!-- Changed: dropped color=\"primary\" \u2014 the icon now carries a green save cue -->\n                <button mat-icon-button matTooltip=\"Cancel\" matTooltipPosition=\"above\" (click)=\"cancelInlineEdit()\"><mat-icon class=\"inline-cancel\">close</mat-icon></button> <!-- Changed: red cancel cue -->\n              </ng-container>\n\n              <!-- Actions -->\n              <ng-template #rowActions>\n                <app-table-action\n                  [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n                </app-table-action>\n              </ng-template>\n\n            </div>\n          </td>\n        </ng-container>\n\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval, 'row-editing': isRowEditing(row)}\"></tr> <!-- Changed: row-editing flags the row that is open for inline edit -->\n      </table>\n\n    </div>\n\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\n    <!-- Changed: Legacy paginator only renders in non-paged mode (pagedMode is constant per instance, set before first render) -->\n    <mat-paginator *ngIf=\"!pagedMode\"\n      #tablePaginator\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      showFirstLastButtons>\n    </mat-paginator>\n\n    <!-- Added: manual paginator for server-side paged mode \u2014 fully state-bound, never attached to MatTableDataSource. Always visible: when filtering it pages the in-memory filtered subset (length = filtered count); otherwise the server window (length = true total). No first/last jump (would force fetching the whole gap). -->\n    <mat-paginator *ngIf=\"pagedMode\"\n      [length]=\"filterActive ? filteredRows.length : serverTotal + overlayDelta\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      (page)=\"onServerPage($event)\">\n    </mat-paginator>\n\n  </div>\n  \n  <!-- Added (Quiet Loading): the initial-load stage for the NON-table views.\n       Without this, card/capsule/grouped showed literally nothing during a first load \u2014 the view component\n       renders an empty dataSource and the \"No Data\" line is suppressed while the stage owns the space.\n       The progress header is identical to the table's so the two feel like one feature; only the ghost\n       furniture differs, because column-shaped rows are wrong in a card grid. -->\n  <div *ngIf=\"loadingStage === 'initial' && config?.viewType && config?.viewType !== 'table'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n    <div class=\"tin-load-progress\">\n      <div class=\"tin-load-bar\">\n        <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n      </div>\n      <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n    </div>\n    <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n    <div *ngIf=\"config?.viewType === 'capsule'\" class=\"tin-load-ghost-capsules\" aria-hidden=\"true\">\n      <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let c of ghostCapsules\"></span>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'card'\" class=\"tin-load-ghost-cards\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-card\" *ngFor=\"let c of ghostCards\">\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-title\"></span>\n        <span class=\"tin-skel tin-skel-text\"></span>\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-short\"></span>\n      </div>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'grouped'\" class=\"tin-load-ghost-groups\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-group\" *ngFor=\"let g of ghostGroups\">\n        <span class=\"tin-skel tin-load-ghost-group-head\"></span>\n        <!-- Pills, not rows: a group card's body is a wrap of chips, so full-width bars promised a table\n             and the stage did not resemble what replaced it. -->\n        <div class=\"tin-load-ghost-group-items\">\n          <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let r of ghostCards\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Capsules -->\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\n  </spa-capsules>\n\n\n  <!-- Cards -->\n  <spa-cards *ngIf=\"config?.viewType === 'card' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [smallScreen]=\"smallScreen\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\n    (showBannerEvent)=\"showBanner($event)\">\n  </spa-cards>\n\n  <!-- Groups - Added: New grouped view type -->\n  <!-- Changed: the grouped view no longer renders its own filter field. It used to sit on a row of its own\n       beneath the buttons row, which left both rows half empty and, more importantly, was a SECOND filter with\n       no refresh button. The standard header filter (which has refresh, like every other table) now drives it,\n       with its text relayed in through filterText. -->\n  <spa-groups *ngIf=\"config?.viewType === 'grouped' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [showOwnFilter]=\"false\"\n    [filterText]=\"groupFilterText\"\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\n  </spa-groups>\n\n\n  <div class=\"tin-center\">\n    <p *ngIf=\"dataSource?.length == 0 && loadingStage !== 'initial'\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p> <!-- Changed (Quiet Loading): the stage owns the space until it completes, then hands straight over to this message \u2014 no \"No Data\" flashing underneath the ghost rows -->\n  </div>\n\n  </ng-container> <!-- Added: end section-collapse wrapper -->\n\n</ng-container>\n\n\n<ng-container *ngIf=\"!hasFormAccess\">\n  <div class=\"tin-center\">\n    <p><em>Access Restricted</em></p>\n  </div>\n</ng-container>\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}.tbl-section-icon,.tbl-section-chevron,.tbl-section-count{flex:0 0 auto}.tbl-section-title{flex:1 1 auto;min-width:0}@media (max-width: 700px){.tbl-section-header{gap:8px;padding:10px}.tbl-section-chip,.tbl-section-btn-text.has-icon{display:none}.tbl-section-header button{min-width:0;padding:0 10px}}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"] }]
+            args: [{ selector: 'spa-table', standalone: false, template: "\n<ng-container *ngIf=\"hasFormAccess && !sectionHidden\"> <!-- Changed: sectionConfig.hideWhenEmpty hides the whole table -->\n\n  <!-- Added: collapsible flat section header (sectionConfig) \u2014 1px border, no elevation, whole row toggles -->\n  <div class=\"tbl-section-header\" *ngIf=\"config.sectionConfig\" (click)=\"toggleSection()\" [attr.aria-expanded]=\"!sectionCollapsed\" [class.tbl-section-static]=\"config.sectionConfig.collapsible === false\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"toggleSection()\">\n    <mat-icon class=\"tbl-section-icon\" *ngIf=\"config.sectionConfig.icon\">{{ config.sectionConfig.icon }}</mat-icon>\n    <span class=\"tbl-section-title\">{{ config.sectionConfig.title }}</span>\n    <span class=\"tbl-section-count\" *ngIf=\"config.sectionConfig.showCount !== false\">{{ dataSource?.length || 0 }}</span>\n    <span class=\"tbl-section-chip\" *ngFor=\"let chip of sectionChips()\" [style.color]=\"chip.color\">{{ chip.text }}</span>\n    <span class=\"tbl-section-spacer\"></span>\n    <!-- Changed: the label is wrapped so a NARROW screen can drop it and leave an icon-only button. Only a\n         button that HAS an icon loses its text \u2014 otherwise it would collapse to a blank square. -->\n    <button mat-stroked-button color=\"primary\" *ngFor=\"let btn of sectionButtons()\" (click)=\"sectionButtonClicked(btn, $event)\" [matTooltip]=\"btn.display || btn.name\"><mat-icon *ngIf=\"btn.icon?.name\">{{ btn.icon.name }}</mat-icon><span class=\"tbl-section-btn-text\" [class.has-icon]=\"!!btn.icon?.name\">{{ btn.display || btn.name }}</span></button>\n    <mat-icon class=\"tbl-section-chevron\" *ngIf=\"config.sectionConfig.collapsible !== false\">{{ sectionCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n  </div>\n\n  <!-- Added: the section's \"why this list exists\" line. It sits UNDER the title (a reason only makes sense once\n       the list has been named) and only while the section is open \u2014 a shut section already has its own summary\n       line, and a paragraph over the top of that is noise. -->\n  <p class=\"tbl-section-caption\" *ngIf=\"config.sectionConfig?.caption && !sectionCollapsed\">{{ config.sectionConfig.caption }}</p>\n\n  <!-- Added: collapsed section affordance \u2014 mirrors the Day Book \"Show the N\" pattern -->\n  <div class=\"tbl-section-more\" *ngIf=\"config.sectionConfig && sectionCollapsed && (dataSource?.length || 0) > 0\">\n    <button type=\"button\" class=\"tbl-section-link\" (click)=\"toggleSection()\">Show the {{ dataSource.length }}</button>\n  </div>\n\n  <ng-container *ngIf=\"!config.sectionConfig || !sectionCollapsed\"> <!-- Added: section collapse hides the table body -->\n\n  <!-- Search -->\n  <spa-search\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n  </spa-search>\n\n  <!-- Header -->\n  <!-- Changed: [isRealTime] binds the RESOLVED value, not the raw config. It was `config.realTime`, so the live\n       indicator only ever appeared on a table that set the flag ITSELF \u2014 a table relying on the app-wide\n       `tableDefaults.realTime` was genuinely subscribed to SignalR (setupRealTimeSubscriptions and\n       realTimeRefreshOrFallback both resolve through effRealTime) and simply never showed the dot. That is\n       how \"Trips and Loads have no real time\" got reported: a status light disagreeing with the system it\n       reports on. effRealTime also gets the inverse right \u2014 realTime:true under a global false still lights,\n       and realTime:false under a global true stays dark. -->\n  <app-table-header\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\n    [showFilterButton]=\"showFilterButton\" [isRealTime]=\"effRealTime\" [isConnected]=\"isSignalRConnected\" [refreshing]=\"loadingStage === 'refresh'\"\n    (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\" (filterChange)=\"filterChanged($event)\">\n  </app-table-header>\n\n  <!-- Added (Quiet Loading D4): refresh with data already on screen \u2014 a 2px line flush under the header and the\n       spinning refresh icon are the ONLY signals. Rows stay live, clickable and un-dimmed while they swap. -->\n  <div *ngIf=\"loadingStage === 'refresh'\" class=\"tin-load-line\" aria-hidden=\"true\">\n    <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n  </div>\n\n  <!-- Added: paged-mode filter hint \u2014 the client filter only covers rows loaded so far -->\n  <div *ngIf=\"pagedMode && filterActive && loadedRows.length < serverTotal\" class=\"paged-filter-hint\">\n    <mat-icon>info</mat-icon>\n    <span>Filtering only the {{loadedRows.length}} loaded rows of {{serverTotal}}. {{ config.searchConfig ? 'Use Search for complete results.' : 'Refine with search for complete results.' }}</span>\n  </div>\n\n\n  <!-- Table -->\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\n\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\n    <p *ngIf=\"!dataSource && !loadingStage\"><em>Loading...</em></p> <!-- Changed (Quiet Loading): the bare text is replaced by the stage below while a quiet load is on screen -->\n\n    <!-- Added (Quiet Loading D3): first load, nothing on screen yet. The progress module is the hero (eased bar +\n         counting percentage + caption) and the ghost rows hold the exact space the real rows will fill, so the\n         table does not jump when data lands. Only ever rendered when quiet loading is on. -->\n    <div *ngIf=\"loadingStage === 'initial'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n\n      <div class=\"tin-load-progress\">\n        <div class=\"tin-load-bar\">\n          <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n        </div>\n        <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n      </div>\n\n      <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n      <div class=\"tin-load-ghosts\">\n        <div class=\"tin-load-ghost-row\" *ngFor=\"let r of ghostRows\">\n          <div class=\"tin-load-ghost-cell\" *ngFor=\"let c of ghostColumns; let i = index\">\n            <span class=\"tin-skel\" [style.width.%]=\"ghostWidth(i, c)\" [style.animation-delay.ms]=\"r * 120\"></span> <!-- staggered sweep: each row starts 120ms after the one above -->\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"dataSource && loadingStage !== 'initial' && (!smallScreen || (smallScreen && dataSource?.length > 0))\" [class.tin-load-in]=\"effQuietLoading\"> <!-- Changed (Quiet Loading): the empty header-only table is suppressed while the initial stage stands in for it, and the real rows fade in where the ghosts were (D3) -->\n\n      <table mat-table [dataSource]=\"tableDataSource\" [trackBy]=\"trackByRow\" [ngClass]=\"elevation\" [class.tin-no-col-headers]=\"config.hideColumnHeaders\"> <!-- Changed: optional column-header suppression -->\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n            <!-- Added: inline edit \u2014 editable cells swap to their form-field editor while the row is in edit mode -->\n            <app-inline-cell *ngIf=\"isRowEditing(row) && getInlineField(column); else displayCell\" [field]=\"getInlineField(column)\" [data]=\"editingModel\"></app-inline-cell>\n\n            <!-- Rows -->\n            <ng-template #displayCell>\n              <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\n                (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n              </app-table-row>\n            </ng-template>\n\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\n            <div class=\"action-buttons-container\">\n\n              <!-- Added: inline edit \u2014 while a row edits in place, its actions collapse to submit/cancel -->\n              <ng-container *ngIf=\"isRowEditing(row); else rowActions\">\n                <button mat-icon-button matTooltip=\"Save\" matTooltipPosition=\"above\" (click)=\"submitInlineEdit()\"><mat-icon class=\"inline-save\">check</mat-icon></button> <!-- Changed: dropped color=\"primary\" \u2014 the icon now carries a green save cue -->\n                <button mat-icon-button matTooltip=\"Cancel\" matTooltipPosition=\"above\" (click)=\"cancelInlineEdit()\"><mat-icon class=\"inline-cancel\">close</mat-icon></button> <!-- Changed: red cancel cue -->\n              </ng-container>\n\n              <!-- Actions -->\n              <ng-template #rowActions>\n                <app-table-action\n                  [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n                </app-table-action>\n              </ng-template>\n\n            </div>\n          </td>\n        </ng-container>\n\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval, 'row-editing': isRowEditing(row)}\"></tr> <!-- Changed: row-editing flags the row that is open for inline edit -->\n      </table>\n\n    </div>\n\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\n    <!-- Changed: Legacy paginator only renders in non-paged mode (pagedMode is constant per instance, set before first render) -->\n    <!-- Changed: hidePageSize on a phone. The \"Items per page\" label and its select cost a whole row of a\n         narrow screen for a control almost nobody touches there \u2014 the default is what gets used. The range\n         (\"1 \u2013 10 of 54\") and the arrows stay, which is the part that is actually navigated. Bound to\n         smallScreen, the component's existing breakpoint (max-width 600px, live via BreakpointObserver), so\n         the paginator agrees with how this table already decides what \"mobile\" means rather than\n         introducing a third breakpoint. -->\n    <mat-paginator *ngIf=\"!pagedMode\"\n      #tablePaginator\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [hidePageSize]=\"smallScreen\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      showFirstLastButtons>\n    </mat-paginator>\n\n    <!-- Added: manual paginator for server-side paged mode \u2014 fully state-bound, never attached to MatTableDataSource. Always visible: when filtering it pages the in-memory filtered subset (length = filtered count); otherwise the server window (length = true total). No first/last jump (would force fetching the whole gap). -->\n    <mat-paginator *ngIf=\"pagedMode\"\n      [length]=\"filterActive ? filteredRows.length : serverTotal + overlayDelta\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [hidePageSize]=\"smallScreen\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      (page)=\"onServerPage($event)\">\n    </mat-paginator>\n\n  </div>\n  \n  <!-- Added (Quiet Loading): the initial-load stage for the NON-table views.\n       Without this, card/capsule/grouped showed literally nothing during a first load \u2014 the view component\n       renders an empty dataSource and the \"No Data\" line is suppressed while the stage owns the space.\n       The progress header is identical to the table's so the two feel like one feature; only the ghost\n       furniture differs, because column-shaped rows are wrong in a card grid. -->\n  <div *ngIf=\"loadingStage === 'initial' && config?.viewType && config?.viewType !== 'table'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n    <div class=\"tin-load-progress\">\n      <div class=\"tin-load-bar\">\n        <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n      </div>\n      <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n    </div>\n    <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n    <div *ngIf=\"config?.viewType === 'capsule'\" class=\"tin-load-ghost-capsules\" aria-hidden=\"true\">\n      <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let c of ghostCapsules\"></span>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'card'\" class=\"tin-load-ghost-cards\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-card\" *ngFor=\"let c of ghostCards\">\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-title\"></span>\n        <span class=\"tin-skel tin-skel-text\"></span>\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-short\"></span>\n      </div>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'grouped'\" class=\"tin-load-ghost-groups\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-group\" *ngFor=\"let g of ghostGroups\">\n        <span class=\"tin-skel tin-load-ghost-group-head\"></span>\n        <!-- Pills, not rows: a group card's body is a wrap of chips, so full-width bars promised a table\n             and the stage did not resemble what replaced it. -->\n        <div class=\"tin-load-ghost-group-items\">\n          <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let r of ghostCards\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Capsules -->\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\n  </spa-capsules>\n\n\n  <!-- Cards -->\n  <spa-cards *ngIf=\"config?.viewType === 'card' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [smallScreen]=\"smallScreen\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\n    (showBannerEvent)=\"showBanner($event)\">\n  </spa-cards>\n\n  <!-- Groups - Added: New grouped view type -->\n  <!-- Changed: the grouped view no longer renders its own filter field. It used to sit on a row of its own\n       beneath the buttons row, which left both rows half empty and, more importantly, was a SECOND filter with\n       no refresh button. The standard header filter (which has refresh, like every other table) now drives it,\n       with its text relayed in through filterText. -->\n  <spa-groups *ngIf=\"config?.viewType === 'grouped' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [showOwnFilter]=\"false\"\n    [filterText]=\"groupFilterText\"\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\n  </spa-groups>\n\n\n  <div class=\"tin-center\">\n    <p *ngIf=\"dataSource?.length == 0 && loadingStage !== 'initial'\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p> <!-- Changed (Quiet Loading): the stage owns the space until it completes, then hands straight over to this message \u2014 no \"No Data\" flashing underneath the ghost rows -->\n  </div>\n\n  </ng-container> <!-- Added: end section-collapse wrapper -->\n\n</ng-container>\n\n\n<ng-container *ngIf=\"!hasFormAccess\">\n  <div class=\"tin-center\">\n    <p><em>Access Restricted</em></p>\n  </div>\n</ng-container>\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}.tbl-section-icon,.tbl-section-chevron,.tbl-section-count{flex:0 0 auto}.tbl-section-title{flex:1 1 auto;min-width:0}@media (max-width: 700px){.tbl-section-header{gap:8px;padding:10px}.tbl-section-chip,.tbl-section-btn-text.has-icon{display:none}.tbl-section-header button{min-width:0;padding:0 10px}}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"] }]
         }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: i1$4.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }, { type: AuthService }, { type: SignalRService }, { type: OfflineService }, { type: ApiErrorService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -17777,8 +18558,10 @@ class DayBookComponent {
             next: (response) => {
                 this.loading = false;
                 this.setShowLoading(false);
-                if (!response.success)
+                if (!response.success) {
+                    this.apiErrorService.presentAppFailure(response, 'load', this.config.loadAction.url);
                     return;
+                } // Changed: was a bare `return`, the last unhandled failure in this file — runPageAction below was already converted. rebuild() never ran, so the lanes, the tiles and every section stayed at their previous values: a Day Book that quietly shows yesterday's book is worse than one that admits it could not load
                 this.book = response.data;
                 this.rebuild();
             },
@@ -18444,8 +19227,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             }] } });
 
 class NotesComponent {
-    constructor(dataService) {
+    constructor(dataService, apiErrorService) {
         this.dataService = dataService;
+        this.apiErrorService = apiErrorService;
         // Input properties
         this.title = "Notes";
         this.notes = []; // Data array if provided directly
@@ -18453,7 +19237,7 @@ class NotesComponent {
         this.nameField = "createdByName";
         this.dateField = "createdDate";
         this.commentField = "details";
-    }
+    } // Changed: injected so a failed note load says so
     ngOnInit() {
         this.loadNotes();
     }
@@ -18480,19 +19264,25 @@ class NotesComponent {
                 url = url.replace('/x', '/' + idValue);
             }
             this.dataService.CallApi({ ...this.loadAction, url }).subscribe((apiResponse) => {
+                // CONVERTED (WS-6 Phase 4 triage). This is the same shape as the five field loads Phase 3 fixed —
+                // notes attached to a record are content, not decoration, and an empty panel asserts "there are no
+                // notes on this record", which is a statement someone will act on. It runs once per record view,
+                // not on a timer, so there is no storm to cause.
+                if (!apiResponse.success)
+                    this.apiErrorService.presentAppFailure(apiResponse, 'load', url);
                 if (apiResponse.success && apiResponse.data) {
                     this.notes = apiResponse.data;
                 }
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NotesComponent, deps: [{ token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NotesComponent, deps: [{ token: DataServiceLib }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: NotesComponent, isStandalone: false, selector: "spa-notes", inputs: { title: "title", notes: "notes", loadAction: "loadAction", loadIDField: "loadIDField", data: "data", nameField: "nameField", dateField: "dateField", commentField: "commentField" }, ngImport: i0, template: "  <div class=\"notes-container\" *ngIf=\"notes && notes.length > 0\">\n    <div class=\"tin-input-row mt-3\" *ngIf=\"title != ''\">\n      <mat-label style=\"font-size: 20px; font-weight: 300\">{{title}}</mat-label>\n    </div>\n  \n    <ul class=\"list-group list-group-flush\" style=\"max-height:350px; margin-left:5px\">\n      <li *ngFor=\"let note of notes\" class=\"list-group-item list-group-item-action flex-column align-items-start\">\n        <div class=\"d-flex w-100 justify-content-between\">\n          <div class=\"mb-0\">{{note[nameField] || note.createdByName}}</div>\n        </div>\n        <small>{{note[commentField] || note.details}} (<em>{{note[dateField] || note.createdDate | date: 'dd MMM yyyy HH:mm'}}</em>)</small>\n      </li>\n    </ul>\n  </div>\n  \n  <div *ngIf=\"!notes || notes.length == 0\" class=\"d-flex justify-content-center row align-items-center\" style=\"max-height:200px\">\n    No {{title.toLowerCase()}}\n  </div>", styles: [".notes-container{padding:10px;border-radius:4px;margin-bottom:15px}.list-group-item{background-color:transparent;border-left:none;border-right:none;border-radius:0;transition:background-color .2s}.list-group-item:hover{background-color:#00000008}.list-group-item small{display:block;margin-top:5px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NotesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-notes', standalone: false, template: "  <div class=\"notes-container\" *ngIf=\"notes && notes.length > 0\">\n    <div class=\"tin-input-row mt-3\" *ngIf=\"title != ''\">\n      <mat-label style=\"font-size: 20px; font-weight: 300\">{{title}}</mat-label>\n    </div>\n  \n    <ul class=\"list-group list-group-flush\" style=\"max-height:350px; margin-left:5px\">\n      <li *ngFor=\"let note of notes\" class=\"list-group-item list-group-item-action flex-column align-items-start\">\n        <div class=\"d-flex w-100 justify-content-between\">\n          <div class=\"mb-0\">{{note[nameField] || note.createdByName}}</div>\n        </div>\n        <small>{{note[commentField] || note.details}} (<em>{{note[dateField] || note.createdDate | date: 'dd MMM yyyy HH:mm'}}</em>)</small>\n      </li>\n    </ul>\n  </div>\n  \n  <div *ngIf=\"!notes || notes.length == 0\" class=\"d-flex justify-content-center row align-items-center\" style=\"max-height:200px\">\n    No {{title.toLowerCase()}}\n  </div>", styles: [".notes-container{padding:10px;border-radius:4px;margin-bottom:15px}.list-group-item{background-color:transparent;border-left:none;border-right:none;border-radius:0;transition:background-color .2s}.list-group-item:hover{background-color:#00000008}.list-group-item small{display:block;margin-top:5px}\n"] }]
-        }], ctorParameters: () => [{ type: DataServiceLib }], propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: DataServiceLib }, { type: ApiErrorService }], propDecorators: { title: [{
                 type: Input
             }], notes: [{
                 type: Input
@@ -18972,6 +19762,7 @@ class AppConfigurationComponent {
         this.messageService = inject(MessageService);
         this.authService = inject(AuthService);
         this.configService = inject(ConfigService);
+        this.apiErrorService = inject(ApiErrorService); // Added: the load and the save both needed a real failure surface
         this.router = inject(Router); // Added (v3)
         this.configuration = {};
         this.loading = false;
@@ -19009,8 +19800,10 @@ class AppConfigurationComponent {
         this.dataService.CallApi(this.config?.loadAction || { url: 'configuration/get' }).subscribe({
             next: (response) => {
                 this.loading = false;
-                if (!response.success)
+                if (!response.success) {
+                    this.apiErrorService.presentAppFailure(response, 'load', (this.config?.loadAction || { url: 'configuration/get' }).url);
                     return;
+                } // Changed: was a bare `return`, so buildCards() never ran and the page rendered its heading over nothing at all — the emptiest possible screen with no statement of why
                 this.configuration = response.data || {}; // the backend creates the row on first read, so this is never empty in practice
                 this.buildCards();
             },
@@ -19068,7 +19861,10 @@ class AppConfigurationComponent {
                     this.configService.refresh(); // every app-side subscriber (nav gating, unit suffixes) sees the change now, not next login
                 }
                 else {
-                    this.messageService.toast(response.message || 'Error updating configuration');
+                    // Changed: was toast(response.message ...) — the server's raw words for 5 seconds while the page
+                    // still showed every edited value, so it looked saved. 'submit' is exactly right and literally
+                    // true here: the user's configuration edits ARE still on the form and do not need re-entering.
+                    this.apiErrorService.presentAppFailure(response, 'submit', (this.config?.saveAction || { url: 'configuration/update' }).url);
                 }
             },
             error: () => this.saving = false
@@ -20581,7 +21377,7 @@ class StepsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: StepsComponent, deps: [{ token: i1$4.BreakpointObserver }, { token: DataServiceLib }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: StepsComponent, isStandalone: false, selector: "spa-steps", inputs: { value: "value", config: "config", data: "data", activeIndex: "activeIndex" }, providers: [{
                 provide: STEPPER_GLOBAL_OPTIONS, useValue: { displayDefaultIndicatorType: false }
-            }], viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<mat-horizontal-stepper class=\"transparent\" [labelPosition]=\"shouldShowLabels ? 'bottom' : 'end'\" #stepper [selectedIndex]=\"selectedIndex\">\n\n  <mat-step *ngFor=\"let step of getVisibleSteps()\"\n    [editable]=\"false\"  [label]=\"shouldShowLabels ? step.name : ''\" [state]=\"step.icon ?? 'number'\">\n  </mat-step>\n\n</mat-horizontal-stepper>\n", styles: [".transparent{background-color:#0000}:host ::ng-deep .mat-step-header{padding:5px!important}:host ::ng-deep .mat-stepper-horizontal-line{min-width:5px!important}:host ::ng-deep .mat-horizontal-content-container{padding:0!important}:host ::ng-deep .mat-horizontal-stepper-header{pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i5$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] }); }
+            }], viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<mat-horizontal-stepper class=\"transparent\" [labelPosition]=\"shouldShowLabels ? 'bottom' : 'end'\" #stepper [selectedIndex]=\"selectedIndex\">\n\n  <mat-step *ngFor=\"let step of getVisibleSteps()\"\n    [editable]=\"false\"  [label]=\"shouldShowLabels ? step.name : ''\" [state]=\"step.icon ?? 'number'\">\n  </mat-step>\n\n</mat-horizontal-stepper>\n", styles: [".transparent{background-color:#0000}:host ::ng-deep .mat-step-header{padding:5px!important}:host ::ng-deep .mat-stepper-horizontal-line{min-width:5px!important}:host ::ng-deep .mat-horizontal-content-container{padding:0!important}:host ::ng-deep .mat-horizontal-stepper-header{pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "component", type: i5$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: StepsComponent, decorators: [{
             type: Component,
@@ -21135,14 +21931,39 @@ class LoaderInterceptor {
                             complete: () => observer.complete()
                         });
                     }
-                    else {
+                    else if (result === 'rejected') {
                         this.refreshResult$.next('FAILED'); // Unblock waiting requests
-                        // Changed: gentle toast + login redirect instead of error dialog; on 'network' the refresh
-                        // token is preserved so the login page can silently restore once connectivity returns
+                        // Changed: gentle toast + login redirect instead of error dialog. This branch now fires ONLY for an
+                        // explicit server rejection — the refresh endpoint answered HTTP 200 with success:false, meaning the
+                        // refresh token is revoked or expired. That is the only outcome that genuinely ends a session, and it
+                        // is the only one where silentRefresh() clears the stored token (auth.service.ts:370-380).
                         this.authService.sessionExpired();
                         this.messageService.toast('Please sign in to continue');
                         observer.error(new Error('Token refresh failed'));
                     }
+                    else {
+                        // Changed: 'network' no longer logs the user out. silentRefresh() resolves 'network' for EVERY
+                        // non-2xx on User/refresh — status 0, 408, 429 and every 5xx alike — because HttpClient routes them
+                        // all to its error callback. Treating that as "session over" made a transient condition destroy a
+                        // session that was never invalid.
+                        //
+                        // The 429 case is the one that turns this from untidy into damaging: an office behind a single NAT
+                        // IP, whose tokens expire together after a shared morning sign-in, refreshes as one burst, trips one
+                        // shared rate limit, and logs ITSELF out — every user at once, for a condition that would have
+                        // cleared in seconds. 5xx and status 0 are grouped with it for the same reason: in none of them did
+                        // the server assert anything about the token, so inferring "your session is over" from them is an
+                        // inference the response does not support. Their common property is not the status number, it is the
+                        // ABSENCE of an authoritative rejection.
+                        //
+                        // Doing nothing destructive is also what auth.service.ts already does on its own refresh paths
+                        // (:265-269, :277-281, :299-304): only 'rejected' calls sessionExpired(), 'network' reschedules. This
+                        // branch was the single place in the codebase that disagreed. The refresh token is deliberately
+                        // preserved by silentRefresh(), the proactive timer will try again, and the next 401 re-enters here —
+                        // so the session recovers on its own with no user action.
+                        this.refreshResult$.next('FAILED'); // Unblock waiting requests — the ORIGINAL request still fails, only the session survives
+                        this.messageService.toast('The server is busy. You are still signed in — please try again in a moment.');
+                        observer.error(new Error('Token refresh unavailable'));
+                    }
                 });
             });
         }
@@ -21390,7 +22211,7 @@ class TabsComponent {
         return this.reload || this.tableReloads[index];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabsComponent, deps: [{ token: TabService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TabsComponent, isStandalone: false, selector: "spa-tabs", inputs: { tableConfigs: "tableConfigs", reload: "reload", reloadTab: "reloadTab", parentDetails: "parentDetails", localMode: "localMode", nestingLevel: "nestingLevel" }, outputs: { formRefresh: "formRefresh", actionSuccess: "actionSuccess" }, usesOnChanges: true, ngImport: i0, template: "<mat-tab-group (selectedTabChange)=\"onTabChange($event)\" [selectedIndex]=\"selectedTabIndex\">\n\n  <!-- Changed: Use cached visibleTabs property to prevent infinite change detection loop -->\n  <ng-container *ngFor=\"let tab of visibleTabs; let i = index\">\n    <mat-tab><!-- TS-11: visibleTabs is already filtered via getVisibleTabs; dropped per-tab isTabVisible() call per CD -->\n\n      <!-- Tab label with count pill.\n           Changed: was matBadge, which renders as a faint superscript unless the consuming app includes\n           Material's badge theme \u2014 several do not, so the number was effectively invisible. This pill is\n           styled entirely in this component, so every app gets the same legible count.\n           An empty tab still shows its count, muted rather than accented: saying \"nothing in here\" before\n           the tab is opened is the whole point, and it saves the round trip of opening it. -->\n      <ng-template matTabLabel>\n        <span class=\"tab-label\">\n          {{getTabTitle(tab.config)}}\n          <span *ngIf=\"shouldShowBadge(tab.originalIndex)\"\n                class=\"tab-count\"\n                [class.tab-count-zero]=\"getTabCount(tab.originalIndex) === 0\">{{getTabCount(tab.originalIndex)}}</span>\n        </span>\n      </ng-template>\n\n      <!-- Tab content: custom template when provided (tabTemplate), otherwise the lazy-loaded table.\n           Templates keep the same lazy semantics \u2014 rendered only once the tab has been activated. -->\n      <div *ngIf=\"shouldLoadTabData(i) && tab.config.tabTemplate\" class=\"tab-content\">\n        <ng-container [ngTemplateOutlet]=\"tab.config.tabTemplate\"></ng-container>\n      </div>\n\n      <div *ngIf=\"shouldLoadTabData(i) && !tab.config.tabTemplate\" class=\"tab-content\">\n        <spa-table\n          [config]=\"tab.config\"\n          [reload]=\"getReloadSubject(tab.originalIndex)\"\n          [inTab]=\"true\"\n          [activeTab]=\"selectedTabIndex === i\"\n          [nestingLevel]=\"nestingLevel\"\n          [localMode]=\"localMode\"\n          [parentDetails]=\"parentDetails\"\n          (totalChange)=\"onTabTotal(tab.originalIndex, $event)\"\n          (actionSuccess)=\"onTableActionSuccess(tab.originalIndex, $event)\">\n        </spa-table><!-- Changed: badge adopts the grid's filtered total so it can never show a global/unfiltered count --><!-- Changed: localMode + parentDetails passed through for one-step create local tables -->\n      </div>\n\n      <!-- Placeholder for non-loaded tabs -->\n      <div *ngIf=\"!shouldLoadTabData(i)\" class=\"tab-placeholder\">\n        <!-- Empty placeholder - content will load when tab is activated -->\n      </div>\n\n    </mat-tab>\n  </ng-container>\n\n</mat-tab-group>", styles: [":host{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-group{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-body-wrapper{flex:1}.tab-content{padding-top:16px;overflow-x:auto}.tab-placeholder{min-height:100px;display:flex;align-items:center;justify-content:center}.tab-label{display:inline-flex;align-items:center;gap:8px}.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:9px;background-color:#1976d2;color:#fff;font-size:11px;font-weight:600;line-height:1}.tab-count-zero{background-color:#d5d9de;color:#6b7280}.badge{background-color:#2196f3;color:#fff;border-radius:12px;padding:2px 8px;margin-left:8px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TabsComponent, isStandalone: false, selector: "spa-tabs", inputs: { tableConfigs: "tableConfigs", reload: "reload", reloadTab: "reloadTab", parentDetails: "parentDetails", localMode: "localMode", nestingLevel: "nestingLevel" }, outputs: { formRefresh: "formRefresh", actionSuccess: "actionSuccess" }, usesOnChanges: true, ngImport: i0, template: "<mat-tab-group (selectedTabChange)=\"onTabChange($event)\" [selectedIndex]=\"selectedTabIndex\">\n\n  <!-- Changed: Use cached visibleTabs property to prevent infinite change detection loop -->\n  <ng-container *ngFor=\"let tab of visibleTabs; let i = index\">\n    <mat-tab><!-- TS-11: visibleTabs is already filtered via getVisibleTabs; dropped per-tab isTabVisible() call per CD -->\n\n      <!-- Tab label with count pill.\n           Changed: was matBadge, which renders as a faint superscript unless the consuming app includes\n           Material's badge theme \u2014 several do not, so the number was effectively invisible. This pill is\n           styled entirely in this component, so every app gets the same legible count.\n           An empty tab still shows its count, muted rather than accented: saying \"nothing in here\" before\n           the tab is opened is the whole point, and it saves the round trip of opening it. -->\n      <ng-template matTabLabel>\n        <span class=\"tab-label\">\n          {{getTabTitle(tab.config)}}\n          <span *ngIf=\"shouldShowBadge(tab.originalIndex)\"\n                class=\"tab-count\"\n                [class.tab-count-zero]=\"getTabCount(tab.originalIndex) === 0\">{{getTabCount(tab.originalIndex)}}</span>\n        </span>\n      </ng-template>\n\n      <!-- Tab content: custom template when provided (tabTemplate), otherwise the lazy-loaded table.\n           Templates keep the same lazy semantics \u2014 rendered only once the tab has been activated. -->\n      <div *ngIf=\"shouldLoadTabData(i) && tab.config.tabTemplate\" class=\"tab-content\">\n        <ng-container [ngTemplateOutlet]=\"tab.config.tabTemplate\"></ng-container>\n      </div>\n\n      <div *ngIf=\"shouldLoadTabData(i) && !tab.config.tabTemplate\" class=\"tab-content\">\n        <spa-table\n          [config]=\"tab.config\"\n          [reload]=\"getReloadSubject(tab.originalIndex)\"\n          [inTab]=\"true\"\n          [activeTab]=\"selectedTabIndex === i\"\n          [nestingLevel]=\"nestingLevel\"\n          [localMode]=\"localMode\"\n          [parentDetails]=\"parentDetails\"\n          (totalChange)=\"onTabTotal(tab.originalIndex, $event)\"\n          (actionSuccess)=\"onTableActionSuccess(tab.originalIndex, $event)\">\n        </spa-table><!-- Changed: badge adopts the grid's filtered total so it can never show a global/unfiltered count --><!-- Changed: localMode + parentDetails passed through for one-step create local tables -->\n      </div>\n\n      <!-- Placeholder for non-loaded tabs -->\n      <div *ngIf=\"!shouldLoadTabData(i)\" class=\"tab-placeholder\">\n        <!-- Empty placeholder - content will load when tab is activated -->\n      </div>\n\n    </mat-tab>\n  </ng-container>\n\n</mat-tab-group>", styles: [":host{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-group{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-body-wrapper{flex:1}.tab-content{padding-top:16px;overflow-x:auto}.tab-placeholder{min-height:100px;display:flex;align-items:center;justify-content:center}.tab-label{display:inline-flex;align-items:center;gap:8px}.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;border-radius:9px;background-color:#1976d2;color:#fff;font-size:11px;font-weight:600;line-height:1}.tab-count-zero{background-color:#d5d9de;color:#6b7280}.badge{background-color:#2196f3;color:#fff;border-radius:12px;padding:2px 8px;margin-left:8px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
@@ -22225,10 +23046,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }] }] });
 
 class InvitationsTableComponent {
-    constructor(dataService, messageService, authService) {
+    constructor(dataService, messageService, authService, apiErrorService) {
         this.dataService = dataService;
         this.messageService = messageService;
         this.authService = authService;
+        this.apiErrorService = apiErrorService;
         this.tableReload = new Subject();
         this.invitationsTableConfig = {
             greyOut: (value) => value.accepted == false,
@@ -22246,7 +23068,7 @@ class InvitationsTableComponent {
             ],
             loadAction: { url: 'tenants/invitations/x' },
         };
-    }
+    } // Changed: injected ApiErrorService for the two membership actions
     ngOnInit() {
     }
     invActionClicked(x) {
@@ -22272,21 +23094,27 @@ class InvitationsTableComponent {
                                         this.messageService.toast("Switched Successfully, please login again");
                                         this.authService.logoff();
                                     }
+                                    else {
+                                        this.apiErrorService.presentAppFailure(apiResponse, 'action', 'tenants/dto?action=switch'); // Added: was silent. The invitation was already accepted at this point, so silence here left the user believing the switch had happened when they were still in the old organisation
+                                    }
                                 });
                             }
                         });
                     }
+                    else {
+                        this.apiErrorService.presentAppFailure(apiResponse, 'action', 'members/dto?action=' + action); // Added: was silent. Accept or Decline both left the row exactly as it was with no message, so the natural read is "it did not register my click" and the user presses it again
+                    }
                 });
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InvitationsTableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InvitationsTableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: InvitationsTableComponent, isStandalone: false, selector: "spa-invitations-table", ngImport: i0, template: "<spa-table [config]=\"invitationsTableConfig\" (actionClick)=\"invActionClicked($event)\" [reload]=\"tableReload\"></spa-table>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InvitationsTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-invitations-table', standalone: false, template: "<spa-table [config]=\"invitationsTableConfig\" (actionClick)=\"invActionClicked($event)\" [reload]=\"tableReload\"></spa-table>\n" }]
-        }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }] });
+        }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }, { type: ApiErrorService }] });
 
 // Generic AI-assisted import wizard: Upload -> Map -> Review -> Done. Config-driven via ImportConfig.
 class ImportDialogComponent {
@@ -22313,10 +23141,12 @@ class ImportDialogComponent {
     rebuildReviewRows() {
         this.reviewRows = this.rows.map(r => ({ rowNumber: r.rowNumber, statusName: r.statusName, status: r.status, issueText: this.rowIssueText(r), ...(r.values || {}), __row: r }));
     }
-    constructor(httpService, http, messageService, dialogRef, config) {
+    constructor(httpService, http, messageService, apiErrorService, // Changed: injected so a step failure is classified rather than shown verbatim
+    dialogRef, config) {
         this.httpService = httpService;
         this.http = http;
         this.messageService = messageService;
+        this.apiErrorService = apiErrorService;
         this.dialogRef = dialogRef;
         this.config = config;
         this.loading = false;
@@ -22368,6 +23198,10 @@ class ImportDialogComponent {
             // Changed: a Committed (4) OR Reversed (6) batch is finished — reopening starts a NEW import instead of
             // resuming to a stale screen. Reversed was missed when Undo was added, so after undoing an import the
             // wizard reopened onto the undone batch's mapping step.
+            // Deliberately silent: this is the "is there a batch to resume?" probe fired the instant the dialog
+            // opens, before the user has asked for anything. When it fails the wizard falls back to step 0 — a
+            // fully working fresh upload — so there is nothing for the user to do differently and nothing lost.
+            // A dialog here would greet them with an error for a screen that works. (WS-6 Phase 4 triage)
             if (r?.success && r.data?.hasItems && r.data.status !== 4 && r.data.status !== 6) {
                 this.applyBatch(r.data);
                 this.gotoStepForStatus();
@@ -22393,8 +23227,11 @@ class ImportDialogComponent {
                 this.goToStep(1);
             }
             else {
-                this.messageService.error(r?.message || 'Upload failed');
+                this.apiErrorService.presentAppFailure(r, 'submit', `import/upload/${this.entity}`); // Changed: was messageService.error(r?.message ...), which put the server's own words in a dialog — "Error processing request", or a leaked SQL fragment when the parse fails. The file the user chose is still selected, which is exactly what the 'submit' copy promises
             }
+            // The transport-error callback below is deliberately left as-is: it shows FIXED text, never server
+            // text, and the underlying HttpErrorResponse already reaches ApiErrorService through the interceptor.
+            // Same decision, same reasoning, as groups.component.ts in WS-6 Phase 3.
         }, () => { this.loading = false; this.messageService.error('Upload failed'); });
     }
     downloadTemplate() {
@@ -22459,7 +23296,7 @@ class ImportDialogComponent {
                 this.loadRows(() => this.goToStep(2));
             }
             else {
-                this.messageService.error(r?.message || 'Mapping failed');
+                this.apiErrorService.presentAppFailure(r, 'submit', `import/map/${this.batchId}`); // Changed: was messageService.error(r?.message ...). 'submit' is literally true here — the mapping the user built is still on screen and does not have to be redone
             }
         }, () => { this.loading = false; this.messageService.error('Mapping failed'); });
     }
@@ -22477,6 +23314,8 @@ class ImportDialogComponent {
     }
     loadRows(after) {
         this.httpService.Get(`import/rows/${this.batchId}`).subscribe(r => {
+            if (!r?.success)
+                this.apiErrorService.presentAppFailure(r, 'load', `import/rows/${this.batchId}`); // Added: was silent. A failed row fetch fell through to [] and rendered an EMPTY review grid — indistinguishable from a spreadsheet that mapped to nothing, which is the exact "empty or broken?" ambiguity WS-6 exists to kill
             this.rows = (r?.success && r.data) ? r.data : [];
             this.buildReviewTable(); // Changed: (re)build the spa-table config + flattened rows whenever fresh rows land
             if (after)
@@ -22507,18 +23346,29 @@ class ImportDialogComponent {
         this.loading = true;
         this.httpService.Post(`import/row/${row.importRowID}`, values).subscribe(r => {
             this.loading = false;
-            this.editingRowId = null;
-            this.editingRow = null; // Changed: close the edit panel
             if (r?.success) {
+                this.editingRowId = null; // Changed: only close the edit panel once the save actually succeeded
+                this.editingRow = null;
                 this.refreshBatch();
             }
             else {
-                this.messageService.error(r?.message || 'Could not update row');
+                // Changed: the panel is no longer closed before this branch. It was closed unconditionally, which
+                // discarded everything the user had typed the moment a save failed — they had to reopen the row and
+                // re-enter it from memory. The panel now stays open with editModel intact; Cancel remains the way out.
+                // Changed: context is now 'submit' rather than 'action'. 'action' was chosen only because the panel
+                // used to close regardless, which made the 'submit' copy ("your details are still on the form") a lie.
+                // That is now literally true, and this is exactly the case that copy exists for — one deliberate save,
+                // with its own dedupe key, where a missed message makes the user press Save again.
+                this.apiErrorService.presentAppFailure(r, 'submit', `import/row/${row.importRowID}`);
             }
         }, () => { this.loading = false; this.messageService.error('Could not update row'); });
     }
     refreshBatch() {
         this.httpService.Get(`import/batch/${this.batchId}`).subscribe(r => {
+            // Deliberately silent: loadRows() below fires against the same backend a moment later and DOES report,
+            // so anything that breaks this call is reported there. Adding a second call site for one outage is the
+            // dialog storm this channel was built to stop. Counts going stale is the only consequence, and the
+            // very next successful refresh corrects them. (WS-6 Phase 4 triage)
             if (r?.success && r.data)
                 this.applyBatch(r.data);
             this.loadRows();
@@ -22542,7 +23392,7 @@ class ImportDialogComponent {
                         this.config.onComplete(r.data);
                 }
                 else {
-                    this.messageService.error(r?.message || 'Import failed');
+                    this.apiErrorService.presentAppFailure(r, 'submit', `import/commit/${this.batchId}`); // Changed: was messageService.error(r?.message ...). This is the one press in the whole wizard that writes records, so it is exactly where the 'submit' copy — nothing was saved, do not press repeatedly, it can create duplicates — has to appear
                     this.refreshBatch();
                 }
             }, () => { this.loading = false; this.messageService.error('Import failed'); });
@@ -22581,7 +23431,7 @@ class ImportDialogComponent {
                     this.goToStep(0); // batch is Reversed — start fresh
                 }
                 else {
-                    this.messageService.error(r?.message || 'Undo failed');
+                    this.apiErrorService.presentAppFailure(r, 'action', `import/reverse/${this.batchId}`); // Changed: was messageService.error(r?.message ...). 'action' rather than 'submit' — this sits behind a confirm, there is no form still holding the user's input, and the 'submit' wording would describe a screen that is not there
                 }
             }, () => { this.loading = false; this.messageService.error('Undo failed'); });
         });
@@ -22635,13 +23485,13 @@ class ImportDialogComponent {
     goToStep(index) {
         this.stepIndex = index; // Changed: drives the spa-steps indicator + the *ngIf step panes directly
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ImportDialogComponent, deps: [{ token: HttpService }, { token: i1.HttpClient }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ImportDialogComponent, isStandalone: false, selector: "spa-import-dialog", ngImport: i0, template: "<!-- Changed: shell rebuilt on the details-dialog conventions \u2014 modern band header (tin-dlg-head), scrollable\n     mat-dialog-content, banded mat-dialog-actions footer (left-aligned, house rule). The stepper is spa-steps\n     as a read-only position indicator driven by stepIndex; navigation is ONLY via the footer buttons. -->\n<div class=\"import-dialog\">\n\n  <div class=\"tin-dlg-head import-head\">\n    <h2 class=\"tin-dlg-title\">{{ title }}</h2>\n    <button mat-icon-button class=\"import-close\" (click)=\"close()\" aria-label=\"Close\"><mat-icon>close</mat-icon></button>\n  </div>\n\n  <mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\" class=\"import-load-line\"></mat-progress-bar>\n\n  <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\n\n    <spa-steps class=\"import-steps\" [config]=\"stepsConfig\" [activeIndex]=\"stepIndex\"></spa-steps>\n\n    <!-- Step 1: Upload -->\n    <div *ngIf=\"stepIndex === 0\" class=\"step-body\">\n      <p class=\"hint\">Upload an Excel (.xlsx) file. Not sure of the format? Download a template with the expected columns.</p>\n      <div class=\"upload-row\">\n        <button mat-stroked-button color=\"primary\" (click)=\"fileInput.click()\"><mat-icon>attach_file</mat-icon>{{ selectedFile?.name || 'Choose file' }}</button>\n        <input type=\"file\" #fileInput accept=\".xlsx\" (change)=\"onFileSelected($event)\" hidden />\n        <button mat-stroked-button color=\"primary\" (click)=\"downloadTemplate()\"><mat-icon>download</mat-icon> Download template</button>\n      </div>\n    </div>\n\n    <!-- Step 2: Map columns -->\n    <div *ngIf=\"stepIndex === 1\" class=\"step-body\">\n      <div *ngIf=\"unmappedRequired.length\" class=\"alert alert-warn\">\n        Required fields not yet mapped: <strong>{{ unmappedRequired.join(', ') }}</strong>\n      </div>\n\n      <table class=\"map-table\">\n        <thead>\n          <tr><th>Spreadsheet column</th><th>Sample values</th><th>Maps to field</th><th>Match</th></tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let m of mappings\">\n            <td class=\"col-header\">{{ m.header }}</td>\n            <td class=\"col-samples\">\n              <span *ngFor=\"let s of samplesFor(m.header)\" class=\"sample\">{{ s }}</span>\n            </td>\n            <td>\n              <mat-select [(ngModel)]=\"m.property\" (selectionChange)=\"onMappingChange(m)\" placeholder=\"\u2014 Ignore \u2014\">\n                <mat-option [value]=\"null\">\u2014 Ignore \u2014</mat-option>\n                <mat-option *ngFor=\"let f of availableFields(m.header)\" [value]=\"f.property\">\n                  {{ f.display }}<span *ngIf=\"f.required\"> *</span>\n                </mat-option>\n              </mat-select>\n            </td>\n            <td>\n              <span class=\"chip\" [ngClass]=\"confidenceClass(m)\" [matTooltip]=\"m.reasoning || ''\">\n                {{ m.property ? (m.method === 'AI' ? ((m.confidence * 100) | number:'1.0-0') + '%' : m.method) : 'Unmapped' }}\n              </span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Step 3: Review -->\n    <div *ngIf=\"stepIndex === 2\" class=\"step-body\">\n      <!-- Changed: row edit panel \u2014 sits above the table because saving re-validates via the import endpoint -->\n      <div class=\"edit-panel\" *ngIf=\"editingRow\">\n        <div class=\"edit-title\">Edit row {{ editingRow.rowNumber }}</div>\n        <div class=\"edit-fields\">\n          <label class=\"edit-field\" *ngFor=\"let col of reviewColumns\">\n            <span>{{ col.display }}</span>\n            <input class=\"cell-input\" [(ngModel)]=\"editModel[col.property]\" />\n          </label>\n        </div>\n        <div class=\"edit-actions\">\n          <button mat-flat-button color=\"primary\" [disabled]=\"loading\" (click)=\"saveEdit()\">Save</button>\n          <button mat-stroked-button (click)=\"cancelEdit()\">Cancel</button>\n        </div>\n      </div>\n\n      <!-- Changed: the review grid IS spa-table with its INTEGRATED tiles (tileConfig on the TableConfig):\n           clickable icon tiles filter the rows in memory \u2014 the \"Only show rows with problems\" checkbox is gone -->\n      <spa-table *ngIf=\"reviewTableConfig\" [config]=\"reviewTableConfig\" [data]=\"reviewRows\" [tileData]=\"counts\"></spa-table>\n    </div>\n\n    <!-- Step 4: Done -->\n    <div *ngIf=\"stepIndex === 3\" class=\"step-body done-body\">\n      <mat-icon class=\"done-icon\">check_circle</mat-icon>\n      <h3>Imported {{ committedCount }} record(s)</h3>\n      <p *ngIf=\"counts.warning > 0\" class=\"hint\">{{ counts.warning }} row(s) imported with warnings.</p>\n    </div>\n\n  </mat-dialog-content>\n\n  <!-- Changed: per-step actions moved into the banded footer, LEFT-aligned (house rule) -->\n  <mat-dialog-actions>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 0\" [disabled]=\"!selectedFile || loading\" (click)=\"doUpload()\">Upload</button>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 1\" [disabled]=\"unmappedRequired.length > 0 || loading\" (click)=\"confirmMapping()\">Next</button>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 2\" [disabled]=\"counts.error > 0 || loading\" (click)=\"doCommit()\">Import {{ counts.total - counts.error }} record(s)</button>\n    <button mat-stroked-button *ngIf=\"stepIndex === 1 || stepIndex === 2\" (click)=\"startOver()\">Start over</button>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 3\" (click)=\"close()\">Close</button>\n    <button mat-stroked-button *ngIf=\"stepIndex === 3 && reversible && committedCount > 0\" [disabled]=\"loading\" (click)=\"undoImport()\"><mat-icon>undo</mat-icon>Undo import</button> <!-- Added (lifecycle) -->\n    <button mat-button *ngIf=\"stepIndex !== 3\" (click)=\"close()\">Close</button>\n  </mat-dialog-actions>\n\n</div>\n", styles: [".import-dialog{display:flex;flex-direction:column}.import-head{display:flex;align-items:center}.import-close{margin-left:auto}.import-load-line{height:2px}.import-steps{display:block;margin-bottom:4px}.import-tiles{display:block}.step-body{padding:12px 8px;display:flex;flex-direction:column;gap:14px}.hint{color:#0009;font-size:13px;margin:0}.upload-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.alert{padding:8px 12px;border-radius:4px;font-size:13px}.alert-warn{background:#fff3e0;color:#8a5300;border:1px solid #ffcc80}.map-table{width:100%;border-collapse:collapse}.map-table th,.map-table td{text-align:left;padding:6px 8px;border-bottom:1px solid #eee;vertical-align:middle}.map-table th{font-size:12px;color:#0009;font-weight:600}.col-header{font-weight:600}.col-samples .sample{display:inline-block;background:#f2f2f2;border-radius:3px;padding:1px 6px;margin:1px 3px 1px 0;font-size:12px;color:#555}.chip{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;color:#fff}.chip-green{background:#2e7d32}.chip-blue{background:#1565c0}.chip-orange{background:#ef6c00}.chip-grey{background:#9e9e9e}.chip-red{background:#c62828}.edit-panel{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.edit-title{font-size:13px;font-weight:600;color:#000000b3}.edit-fields{display:flex;gap:12px;flex-wrap:wrap}.edit-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#0009;min-width:160px}.edit-actions{display:flex;gap:8px}.cell-input{box-sizing:border-box;padding:6px 8px;border:1px solid rgba(0,0,0,.23);border-radius:4px;font:inherit}.done-body{align-items:center;text-align:center;padding:32px 8px}.done-icon{color:#2e7d32;font-size:56px;height:56px;width:56px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data", "activeIndex"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ImportDialogComponent, deps: [{ token: HttpService }, { token: i1.HttpClient }, { token: MessageService }, { token: ApiErrorService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ImportDialogComponent, isStandalone: false, selector: "spa-import-dialog", ngImport: i0, template: "<!-- Changed: shell rebuilt on the details-dialog conventions \u2014 modern band header (tin-dlg-head), scrollable\n     mat-dialog-content, banded mat-dialog-actions footer (left-aligned, house rule). The stepper is spa-steps\n     as a read-only position indicator driven by stepIndex; navigation is ONLY via the footer buttons. -->\n<div class=\"import-dialog\">\n\n  <div class=\"tin-dlg-head import-head\">\n    <h2 class=\"tin-dlg-title\">{{ title }}</h2>\n    <button mat-icon-button class=\"import-close\" (click)=\"close()\" aria-label=\"Close\"><mat-icon>close</mat-icon></button>\n  </div>\n\n  <mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\" class=\"import-load-line\"></mat-progress-bar>\n\n  <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\n\n    <spa-steps class=\"import-steps\" [config]=\"stepsConfig\" [activeIndex]=\"stepIndex\"></spa-steps>\n\n    <!-- Step 1: Upload -->\n    <div *ngIf=\"stepIndex === 0\" class=\"step-body\">\n      <p class=\"hint\">Upload an Excel (.xlsx) file. Not sure of the format? Download a template with the expected columns.</p>\n      <div class=\"upload-row\">\n        <button mat-stroked-button color=\"primary\" (click)=\"fileInput.click()\"><mat-icon>attach_file</mat-icon>{{ selectedFile?.name || 'Choose file' }}</button>\n        <input type=\"file\" #fileInput accept=\".xlsx\" (change)=\"onFileSelected($event)\" hidden />\n        <button mat-stroked-button color=\"primary\" (click)=\"downloadTemplate()\"><mat-icon>download</mat-icon> Download template</button>\n      </div>\n    </div>\n\n    <!-- Step 2: Map columns -->\n    <div *ngIf=\"stepIndex === 1\" class=\"step-body\">\n      <div *ngIf=\"unmappedRequired.length\" class=\"alert alert-warn\">\n        Required fields not yet mapped: <strong>{{ unmappedRequired.join(', ') }}</strong>\n      </div>\n\n      <table class=\"map-table\">\n        <thead>\n          <tr><th>Spreadsheet column</th><th>Sample values</th><th>Maps to field</th><th>Match</th></tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let m of mappings\">\n            <td class=\"col-header\">{{ m.header }}</td>\n            <td class=\"col-samples\">\n              <span *ngFor=\"let s of samplesFor(m.header)\" class=\"sample\">{{ s }}</span>\n            </td>\n            <td>\n              <mat-select [(ngModel)]=\"m.property\" (selectionChange)=\"onMappingChange(m)\" placeholder=\"\u2014 Ignore \u2014\">\n                <mat-option [value]=\"null\">\u2014 Ignore \u2014</mat-option>\n                <mat-option *ngFor=\"let f of availableFields(m.header)\" [value]=\"f.property\">\n                  {{ f.display }}<span *ngIf=\"f.required\"> *</span>\n                </mat-option>\n              </mat-select>\n            </td>\n            <td>\n              <span class=\"chip\" [ngClass]=\"confidenceClass(m)\" [matTooltip]=\"m.reasoning || ''\">\n                {{ m.property ? (m.method === 'AI' ? ((m.confidence * 100) | number:'1.0-0') + '%' : m.method) : 'Unmapped' }}\n              </span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Step 3: Review -->\n    <div *ngIf=\"stepIndex === 2\" class=\"step-body\">\n      <!-- Changed: row edit panel \u2014 sits above the table because saving re-validates via the import endpoint -->\n      <div class=\"edit-panel\" *ngIf=\"editingRow\">\n        <div class=\"edit-title\">Edit row {{ editingRow.rowNumber }}</div>\n        <div class=\"edit-fields\">\n          <label class=\"edit-field\" *ngFor=\"let col of reviewColumns\">\n            <span>{{ col.display }}</span>\n            <input class=\"cell-input\" [(ngModel)]=\"editModel[col.property]\" />\n          </label>\n        </div>\n        <div class=\"edit-actions\">\n          <button mat-flat-button color=\"primary\" [disabled]=\"loading\" (click)=\"saveEdit()\">Save</button>\n          <button mat-stroked-button (click)=\"cancelEdit()\">Cancel</button>\n        </div>\n      </div>\n\n      <!-- Changed: the review grid IS spa-table with its INTEGRATED tiles (tileConfig on the TableConfig):\n           clickable icon tiles filter the rows in memory \u2014 the \"Only show rows with problems\" checkbox is gone -->\n      <spa-table *ngIf=\"reviewTableConfig\" [config]=\"reviewTableConfig\" [data]=\"reviewRows\" [tileData]=\"counts\"></spa-table>\n    </div>\n\n    <!-- Step 4: Done -->\n    <div *ngIf=\"stepIndex === 3\" class=\"step-body done-body\">\n      <mat-icon class=\"done-icon\">check_circle</mat-icon>\n      <h3>Imported {{ committedCount }} record(s)</h3>\n      <p *ngIf=\"counts.warning > 0\" class=\"hint\">{{ counts.warning }} row(s) imported with warnings.</p>\n    </div>\n\n  </mat-dialog-content>\n\n  <!-- Changed: per-step actions moved into the banded footer, LEFT-aligned (house rule) -->\n  <mat-dialog-actions>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 0\" [disabled]=\"!selectedFile || loading\" (click)=\"doUpload()\">Upload</button>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 1\" [disabled]=\"unmappedRequired.length > 0 || loading\" (click)=\"confirmMapping()\">Next</button>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 2\" [disabled]=\"counts.error > 0 || loading\" (click)=\"doCommit()\">Import {{ counts.total - counts.error }} record(s)</button>\n    <button mat-stroked-button *ngIf=\"stepIndex === 1 || stepIndex === 2\" (click)=\"startOver()\">Start over</button>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 3\" (click)=\"close()\">Close</button>\n    <button mat-stroked-button *ngIf=\"stepIndex === 3 && reversible && committedCount > 0\" [disabled]=\"loading\" (click)=\"undoImport()\"><mat-icon>undo</mat-icon>Undo import</button> <!-- Added (lifecycle) -->\n    <button mat-button *ngIf=\"stepIndex !== 3\" (click)=\"close()\">Close</button>\n  </mat-dialog-actions>\n\n</div>\n", styles: [".import-dialog{display:flex;flex-direction:column}.import-head{display:flex;align-items:center}.import-close{margin-left:auto}.import-load-line{height:2px}.import-steps{display:block;margin-bottom:4px}.import-tiles{display:block}.step-body{padding:12px 8px;display:flex;flex-direction:column;gap:14px}.hint{color:#0009;font-size:13px;margin:0}.upload-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.alert{padding:8px 12px;border-radius:4px;font-size:13px}.alert-warn{background:#fff3e0;color:#8a5300;border:1px solid #ffcc80}.map-table{width:100%;border-collapse:collapse}.map-table th,.map-table td{text-align:left;padding:6px 8px;border-bottom:1px solid #eee;vertical-align:middle}.map-table th{font-size:12px;color:#0009;font-weight:600}.col-header{font-weight:600}.col-samples .sample{display:inline-block;background:#f2f2f2;border-radius:3px;padding:1px 6px;margin:1px 3px 1px 0;font-size:12px;color:#555}.chip{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;color:#fff}.chip-green{background:#2e7d32}.chip-blue{background:#1565c0}.chip-orange{background:#ef6c00}.chip-grey{background:#9e9e9e}.chip-red{background:#c62828}.edit-panel{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.edit-title{font-size:13px;font-weight:600;color:#000000b3}.edit-fields{display:flex;gap:12px;flex-wrap:wrap}.edit-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#0009;min-width:160px}.edit-actions{display:flex;gap:8px}.cell-input{box-sizing:border-box;padding:6px 8px;border:1px solid rgba(0,0,0,.23);border-radius:4px;font:inherit}.done-body{align-items:center;text-align:center;padding:32px 8px}.done-icon{color:#2e7d32;font-size:56px;height:56px;width:56px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i6$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data", "activeIndex"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ImportDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-import-dialog', standalone: false, template: "<!-- Changed: shell rebuilt on the details-dialog conventions \u2014 modern band header (tin-dlg-head), scrollable\n     mat-dialog-content, banded mat-dialog-actions footer (left-aligned, house rule). The stepper is spa-steps\n     as a read-only position indicator driven by stepIndex; navigation is ONLY via the footer buttons. -->\n<div class=\"import-dialog\">\n\n  <div class=\"tin-dlg-head import-head\">\n    <h2 class=\"tin-dlg-title\">{{ title }}</h2>\n    <button mat-icon-button class=\"import-close\" (click)=\"close()\" aria-label=\"Close\"><mat-icon>close</mat-icon></button>\n  </div>\n\n  <mat-progress-bar *ngIf=\"loading\" mode=\"indeterminate\" class=\"import-load-line\"></mat-progress-bar>\n\n  <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\n\n    <spa-steps class=\"import-steps\" [config]=\"stepsConfig\" [activeIndex]=\"stepIndex\"></spa-steps>\n\n    <!-- Step 1: Upload -->\n    <div *ngIf=\"stepIndex === 0\" class=\"step-body\">\n      <p class=\"hint\">Upload an Excel (.xlsx) file. Not sure of the format? Download a template with the expected columns.</p>\n      <div class=\"upload-row\">\n        <button mat-stroked-button color=\"primary\" (click)=\"fileInput.click()\"><mat-icon>attach_file</mat-icon>{{ selectedFile?.name || 'Choose file' }}</button>\n        <input type=\"file\" #fileInput accept=\".xlsx\" (change)=\"onFileSelected($event)\" hidden />\n        <button mat-stroked-button color=\"primary\" (click)=\"downloadTemplate()\"><mat-icon>download</mat-icon> Download template</button>\n      </div>\n    </div>\n\n    <!-- Step 2: Map columns -->\n    <div *ngIf=\"stepIndex === 1\" class=\"step-body\">\n      <div *ngIf=\"unmappedRequired.length\" class=\"alert alert-warn\">\n        Required fields not yet mapped: <strong>{{ unmappedRequired.join(', ') }}</strong>\n      </div>\n\n      <table class=\"map-table\">\n        <thead>\n          <tr><th>Spreadsheet column</th><th>Sample values</th><th>Maps to field</th><th>Match</th></tr>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let m of mappings\">\n            <td class=\"col-header\">{{ m.header }}</td>\n            <td class=\"col-samples\">\n              <span *ngFor=\"let s of samplesFor(m.header)\" class=\"sample\">{{ s }}</span>\n            </td>\n            <td>\n              <mat-select [(ngModel)]=\"m.property\" (selectionChange)=\"onMappingChange(m)\" placeholder=\"\u2014 Ignore \u2014\">\n                <mat-option [value]=\"null\">\u2014 Ignore \u2014</mat-option>\n                <mat-option *ngFor=\"let f of availableFields(m.header)\" [value]=\"f.property\">\n                  {{ f.display }}<span *ngIf=\"f.required\"> *</span>\n                </mat-option>\n              </mat-select>\n            </td>\n            <td>\n              <span class=\"chip\" [ngClass]=\"confidenceClass(m)\" [matTooltip]=\"m.reasoning || ''\">\n                {{ m.property ? (m.method === 'AI' ? ((m.confidence * 100) | number:'1.0-0') + '%' : m.method) : 'Unmapped' }}\n              </span>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n\n    <!-- Step 3: Review -->\n    <div *ngIf=\"stepIndex === 2\" class=\"step-body\">\n      <!-- Changed: row edit panel \u2014 sits above the table because saving re-validates via the import endpoint -->\n      <div class=\"edit-panel\" *ngIf=\"editingRow\">\n        <div class=\"edit-title\">Edit row {{ editingRow.rowNumber }}</div>\n        <div class=\"edit-fields\">\n          <label class=\"edit-field\" *ngFor=\"let col of reviewColumns\">\n            <span>{{ col.display }}</span>\n            <input class=\"cell-input\" [(ngModel)]=\"editModel[col.property]\" />\n          </label>\n        </div>\n        <div class=\"edit-actions\">\n          <button mat-flat-button color=\"primary\" [disabled]=\"loading\" (click)=\"saveEdit()\">Save</button>\n          <button mat-stroked-button (click)=\"cancelEdit()\">Cancel</button>\n        </div>\n      </div>\n\n      <!-- Changed: the review grid IS spa-table with its INTEGRATED tiles (tileConfig on the TableConfig):\n           clickable icon tiles filter the rows in memory \u2014 the \"Only show rows with problems\" checkbox is gone -->\n      <spa-table *ngIf=\"reviewTableConfig\" [config]=\"reviewTableConfig\" [data]=\"reviewRows\" [tileData]=\"counts\"></spa-table>\n    </div>\n\n    <!-- Step 4: Done -->\n    <div *ngIf=\"stepIndex === 3\" class=\"step-body done-body\">\n      <mat-icon class=\"done-icon\">check_circle</mat-icon>\n      <h3>Imported {{ committedCount }} record(s)</h3>\n      <p *ngIf=\"counts.warning > 0\" class=\"hint\">{{ counts.warning }} row(s) imported with warnings.</p>\n    </div>\n\n  </mat-dialog-content>\n\n  <!-- Changed: per-step actions moved into the banded footer, LEFT-aligned (house rule) -->\n  <mat-dialog-actions>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 0\" [disabled]=\"!selectedFile || loading\" (click)=\"doUpload()\">Upload</button>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 1\" [disabled]=\"unmappedRequired.length > 0 || loading\" (click)=\"confirmMapping()\">Next</button>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 2\" [disabled]=\"counts.error > 0 || loading\" (click)=\"doCommit()\">Import {{ counts.total - counts.error }} record(s)</button>\n    <button mat-stroked-button *ngIf=\"stepIndex === 1 || stepIndex === 2\" (click)=\"startOver()\">Start over</button>\n    <button mat-flat-button color=\"primary\" *ngIf=\"stepIndex === 3\" (click)=\"close()\">Close</button>\n    <button mat-stroked-button *ngIf=\"stepIndex === 3 && reversible && committedCount > 0\" [disabled]=\"loading\" (click)=\"undoImport()\"><mat-icon>undo</mat-icon>Undo import</button> <!-- Added (lifecycle) -->\n    <button mat-button *ngIf=\"stepIndex !== 3\" (click)=\"close()\">Close</button>\n  </mat-dialog-actions>\n\n</div>\n", styles: [".import-dialog{display:flex;flex-direction:column}.import-head{display:flex;align-items:center}.import-close{margin-left:auto}.import-load-line{height:2px}.import-steps{display:block;margin-bottom:4px}.import-tiles{display:block}.step-body{padding:12px 8px;display:flex;flex-direction:column;gap:14px}.hint{color:#0009;font-size:13px;margin:0}.upload-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.alert{padding:8px 12px;border-radius:4px;font-size:13px}.alert-warn{background:#fff3e0;color:#8a5300;border:1px solid #ffcc80}.map-table{width:100%;border-collapse:collapse}.map-table th,.map-table td{text-align:left;padding:6px 8px;border-bottom:1px solid #eee;vertical-align:middle}.map-table th{font-size:12px;color:#0009;font-weight:600}.col-header{font-weight:600}.col-samples .sample{display:inline-block;background:#f2f2f2;border-radius:3px;padding:1px 6px;margin:1px 3px 1px 0;font-size:12px;color:#555}.chip{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;color:#fff}.chip-green{background:#2e7d32}.chip-blue{background:#1565c0}.chip-orange{background:#ef6c00}.chip-grey{background:#9e9e9e}.chip-red{background:#c62828}.edit-panel{border:1px solid rgba(0,0,0,.12);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}.edit-title{font-size:13px;font-weight:600;color:#000000b3}.edit-fields{display:flex;gap:12px;flex-wrap:wrap}.edit-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#0009;min-width:160px}.edit-actions{display:flex;gap:8px}.cell-input{box-sizing:border-box;padding:6px 8px;border:1px solid rgba(0,0,0,.23);border-radius:4px;font:inherit}.done-body{align-items:center;text-align:center;padding:32px 8px}.done-icon{color:#2e7d32;font-size:56px;height:56px;width:56px}\n"] }]
-        }], ctorParameters: () => [{ type: HttpService }, { type: i1.HttpClient }, { type: MessageService }, { type: i4.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: HttpService }, { type: i1.HttpClient }, { type: MessageService }, { type: ApiErrorService }, { type: i4.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -24548,6 +25398,7 @@ class UsersComponent {
         this.dataService = inject(DataServiceLib);
         this.dialog = inject(MatDialog);
         this.messageService = inject(MessageService);
+        this.apiErrorService = inject(ApiErrorService); // Added: classifies the AD directory lookup failure
         this.userBaseFormConfig = {
             security: { allow: [this.dataService.capUsers] }, // Added: gate user form by users cap
             fields: [
@@ -24590,7 +25441,12 @@ class UsersComponent {
                                         this.messageService.toast('AD user found');
                                     }
                                     else {
-                                        this.messageService.toast(response.message || 'AD user not found');
+                                        // Changed: was toast(response.message || 'AD user not found'), which echoed whatever the
+                                        // directory lookup returned. CONVERTED rather than left silent because the user is watching
+                                        // three fields that were supposed to auto-fill and did not. Behaviour is unchanged for the
+                                        // common case — "AD user not found" is a human sentence, so classifyMessage keeps it a
+                                        // toast — while an LDAP or connection dump now gets replaced instead of displayed.
+                                        this.apiErrorService.presentAppFailure(response, 'load', `user/ad/${data.userName}`);
                                     }
                                 });
                             }
@@ -25365,6 +26221,9 @@ class AgingComponent {
             if (apiResponse.success) {
                 this.summaryData = apiResponse.data;
             }
+            else {
+                this.apiErrorService.presentAppFailure(apiResponse, 'load', 'invoices/aging-summary/x'); // Added: was silent. summaryData stayed undefined, the *ngIf dropped the whole tile strip, and an accounts-receivable page with NO aging totals reads as "you are owed nothing" rather than "we could not work it out"
+            }
         });
     }
     // Changed: Post IFRS 9 bad-debt provision — confirms, calls invoices provision custom action, shows returned summary
@@ -25372,9 +26231,17 @@ class AgingComponent {
         this.messageService.confirm('Post the bad-debt provision? This posts the allowance delta per the aging matrix as a GL journal.').subscribe((result) => {
             if (result == 'yes') {
                 this.dataServiceLib.CallApi({ url: 'invoices?action=provision', method: 'post' }, {}).subscribe((apiResponse) => {
-                    this.messageService.toast(apiResponse.success ? apiResponse.message : 'Error: ' + apiResponse.message);
-                    if (apiResponse.success)
+                    // Changed: REPLACES the old `'Error: ' + apiResponse.message` toast rather than layering on it.
+                    // That string prefixed the server's raw words with a second word for "error" and pushed the useful
+                    // part right; a leaked SQL fragment reached the user unchanged. 'action' rather than 'submit' —
+                    // this is a confirmed page button, not a form, so the 'submit' copy would describe a screen the
+                    // user is not looking at.
+                    if (apiResponse.success) {
+                        this.messageService.toast(apiResponse.message);
                         this.loadSummaryData();
+                    }
+                    else
+                        this.apiErrorService.presentAppFailure(apiResponse, 'action', 'invoices?action=provision');
                 });
             }
         });
@@ -25383,6 +26250,7 @@ class AgingComponent {
         this.dataServiceLib = dataServiceLib;
         this.accountingService = inject(AccountingService);
         this.messageService = inject(MessageService); // Changed: Injected for provision confirm/toast
+        this.apiErrorService = inject(ApiErrorService); // Changed: Injected for the summary load and the provision failure
         this.tileConfig = this.accountingService.agingTileConfig;
         // this.tileConfig = this.accountingService.agingTileConfig;
         this.agingTableConfigs = [
@@ -25464,11 +26332,15 @@ class SupplierAgingComponent {
             if (apiResponse.success) {
                 this.summaryData = apiResponse.data;
             }
+            else {
+                this.apiErrorService.presentAppFailure(apiResponse, 'load', 'purchases/aging-summary/x'); // Added: was silent. The tile strip vanished behind its *ngIf, so an accounts-payable page that could not compute its totals looked like a company that owes nothing
+            }
         });
     }
     constructor(dataServiceLib) {
         this.dataServiceLib = dataServiceLib;
         this.purchasingService = inject(PurchasingService);
+        this.apiErrorService = inject(ApiErrorService); // Changed: Injected so a failed summary load says so
         this.tileConfig = this.purchasingService.apAgingTileConfig;
         // Changed: Build 5-tab aging table layout using AP aging base config from PurchasingService
         this.agingTableConfigs = [
@@ -25561,6 +26433,7 @@ class JournalEntryDialogComponent {
         this.httpService = inject(HttpService);
         this.http = inject(HttpClient);
         this.messageService = inject(MessageService);
+        this.apiErrorService = inject(ApiErrorService); // Changed: injected so a rejected post is classified rather than echoed
         this.date = new Date().toISOString().substring(0, 10);
         this.description = '';
         this.journalType = 'Journal Entry'; // 'Opening Balance' posts the C2 take-on journal
@@ -25608,7 +26481,11 @@ class JournalEntryDialogComponent {
                 this.dialogRef.close(true);
             }
             else {
-                this.messageService.toast(res?.message ?? "Failed to post journal");
+                // Changed: was toast(res?.message ?? "Failed to post journal") — a 5-second snackbar at the bottom
+                // of the screen carrying raw server text, while this dialog stayed open with every line still
+                // filled in. That is the duplicate-record shape exactly: the obvious next move is to press Post
+                // again. 'submit' because the entry IS still on the form and genuinely does not need re-typing.
+                this.apiErrorService.presentAppFailure(res, 'submit', 'transactions/dto?action=create');
             }
         });
     }
@@ -25860,7 +26737,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-// Statement page (B4) — invoice history plus open-item customer/supplier statements with Excel export
+// Statement page (B4) — invoice history plus open-item customer/supplier statements with Excel/PDF export
+// Changed: the two open-item tabs were hand-written markup (a flex row of totals and a raw <table>). They are
+// now the library's own spa-tiles + spa-table, driven by config in AccountingService, so the page picks up
+// every table behaviour centrally: responsive minColumns, the filter box, money formatting and empty states.
+// The PDF and Excel downloads are untouched — both are produced SERVER-SIDE and nothing here contributes to them.
 class StatementComponent {
     constructor() {
         this.accountingService = inject(AccountingService);
@@ -25871,20 +26752,27 @@ class StatementComponent {
             tableConfig: this.accountingService.statementTableConfig,
             searchTableConfig: this.accountingService.statementSearchTableConfig
         };
-        // Per-kind UI state for the customer/supplier open-item tabs
+        // Per-kind UI state for the customer/supplier open-item tabs.
+        // Changed: each kind carries its OWN cloned table config — two grids are on screen at once and a TableConfig
+        // is mutated by the table it belongs to, so sharing one object between the tabs would cross their state.
         this.state = {
-            customer: { entityId: null, from: '', to: '', options: [], data: null },
-            supplier: { entityId: null, from: '', to: '', options: [], data: null }
+            customer: {
+                entityLabel: 'Customer', entityId: null, from: null, to: null, data: null, lines: [],
+                listAction: { url: 'customers/list/x' },
+                tileConfig: this.accountingService.customerStatementTileConfig,
+                tableConfig: { ...this.accountingService.statementLinesTableConfig }
+            },
+            supplier: {
+                entityLabel: 'Supplier', entityId: null, from: null, to: null, data: null, lines: [],
+                listAction: { url: 'suppliers/list/x' },
+                tileConfig: this.accountingService.supplierStatementTileConfig,
+                tableConfig: { ...this.accountingService.statementLinesTableConfig }
+            }
         };
     }
-    ngOnInit() {
-        this.loadOptions('customer', 'customers/list/x');
-        this.loadOptions('supplier', 'suppliers/list/x');
-    }
-    loadOptions(kind, url) {
-        this.http.get(`${this.httpService.apiUrl}${url}`)
-            .subscribe(res => this.state[kind].options = res?.data ?? res?.Data ?? []);
-    }
+    // Changed: the customer/supplier option lists are loaded by spa-select-lite's own loadAction now, so there is
+    // no hand-rolled options fetch left here. ngOnInit is kept for the interface and for future per-kind defaults.
+    ngOnInit() { }
     query(kind) {
         const s = this.state[kind];
         const params = [];
@@ -25896,10 +26784,16 @@ class StatementComponent {
     }
     load(kind) {
         const s = this.state[kind];
+        if (!s.entityId)
+            return; // Added: the header refresh icon routes here too, and it must not fire before an entity is chosen
         this.http.get(`${this.httpService.apiUrl}reports/${kind}-statement/${s.entityId}${this.query(kind)}`)
-            .subscribe(res => s.data = res?.data ?? res?.Data ?? null);
+            .subscribe(res => {
+            s.data = res?.data ?? res?.Data ?? null;
+            s.lines = s.data?.lines ?? []; // Changed: held as a stable reference — binding `data.lines || []` inline would hand spa-table a new array on every change-detection pass
+        });
     }
-    // C8: open-item customer statement as PDF
+    // C8: open-item customer statement as PDF — generated entirely server-side (reports/pdf/customer-statement);
+    // this method only asks for the blob and saves it. Unchanged by the page rewrite.
     exportPdf(kind) {
         const s = this.state[kind];
         this.http.get(`${this.httpService.apiUrl}reports/pdf/${kind}-statement${this.query(kind) ? this.query(kind) + '&' : '?'}${kind}Id=${s.entityId}`, { responseType: 'blob' })
@@ -25944,21 +26838,12 @@ class StatementComponent {
 
     <ng-template #statementTab let-kind="kind">
       <div style="padding: 16px 0;">
-        <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
-          <mat-form-field style="min-width: 240px;">
-            <mat-label>{{ kind === 'customer' ? 'Customer' : 'Supplier' }}</mat-label>
-            <mat-select [(ngModel)]="state[kind].entityId">
-              <mat-option *ngFor="let option of state[kind].options" [value]="option.value">{{ option.name }}</mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field>
-            <mat-label>From</mat-label>
-            <input matInput type="date" [(ngModel)]="state[kind].from">
-          </mat-form-field>
-          <mat-form-field>
-            <mat-label>To</mat-label>
-            <input matInput type="date" [(ngModel)]="state[kind].to">
-          </mat-form-field>
+
+        <!-- Changed: library inputs instead of raw mat-form-field markup — same three filters, same Run/Export/PDF rules -->
+        <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;">
+          <spa-select-lite [display]="state[kind].entityLabel" [loadAction]="state[kind].listAction" optionDisplay="name" optionValue="value" [required]="false" [(value)]="state[kind].entityId" width="240px"></spa-select-lite><!-- optionDisplay/optionValue are NOT defaulted by spa-select-common; without them every option binds undefined and nothing can be selected -->
+          <spa-date display="From" width="170px" [required]="false" [value]="state[kind].from" (valueChange)="state[kind].from = $event"></spa-date>
+          <spa-date display="To" width="170px" [required]="false" [value]="state[kind].to" (valueChange)="state[kind].to = $event"></spa-date>
           <button mat-flat-button color="primary" (click)="load(kind)" [disabled]="!state[kind].entityId">Run</button>
           <button mat-stroked-button (click)="export(kind)" [disabled]="!state[kind].entityId">
             <mat-icon>download</mat-icon> Export to Excel
@@ -25968,41 +26853,18 @@ class StatementComponent {
           </button>
         </div>
 
-        <mat-card *ngIf="state[kind].data" style="padding: 16px;">
-          <div style="display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 16px;">
-            <div><small>{{ kind === 'customer' ? 'Total Invoiced' : 'Total Purchased' }}</small><br><b>{{ (state[kind].data.totalInvoiced ?? state[kind].data.totalPurchased) | number:'1.2-2' }}</b></div>
-            <div><small>Total Paid</small><br><b>{{ state[kind].data.totalPaid | number:'1.2-2' }}</b></div>
-            <div *ngIf="kind === 'customer'"><small>Total Credited</small><br><b>{{ state[kind].data.totalCredited | number:'1.2-2' }}</b></div>
-            <div><small>Total Outstanding</small><br><b [style.color]="state[kind].data.totalOutstanding > 0 ? 'red' : 'green'">{{ state[kind].data.totalOutstanding | number:'1.2-2' }}</b></div>
+        <!-- Changed: totals are spa-tiles, lines are spa-table. Nothing renders until a statement has been run,
+             which is exactly what the old *ngIf on the results card did. -->
+        <ng-container *ngIf="state[kind].data">
+          <spa-tiles [config]="state[kind].tileConfig" [data]="state[kind].data"></spa-tiles>
+          <div style="margin-top: 12px;">
+            <spa-table [config]="state[kind].tableConfig" [data]="state[kind].lines" (refreshClick)="load(kind)"></spa-table>
           </div>
+        </ng-container>
 
-          <table style="width: 100%; border-collapse: collapse;" *ngIf="state[kind].data.lines?.length; else noLines">
-            <tr style="text-align: left; border-bottom: 2px solid #333;">
-              <th style="padding: 6px;">Date</th>
-              <th style="padding: 6px;">Reference</th>
-              <th style="padding: 6px;">Type</th>
-              <th style="padding: 6px; text-align: right;">Total</th>
-              <th style="padding: 6px; text-align: right;">Paid</th>
-              <th style="padding: 6px; text-align: right;">Outstanding</th>
-              <th style="padding: 6px;">Status</th>
-              <th style="padding: 6px;">Aging</th>
-            </tr>
-            <tr *ngFor="let line of state[kind].data.lines" style="border-bottom: 1px solid #eee;">
-              <td style="padding: 6px;">{{ line.date | date:'mediumDate' }}</td>
-              <td style="padding: 6px;">{{ line.reference }}</td>
-              <td style="padding: 6px;">{{ line.type }}</td>
-              <td style="padding: 6px; text-align: right;">{{ line.total | number:'1.2-2' }}</td>
-              <td style="padding: 6px; text-align: right;">{{ line.paid | number:'1.2-2' }}</td>
-              <td style="padding: 6px; text-align: right;">{{ line.outstanding | number:'1.2-2' }}</td>
-              <td style="padding: 6px;">{{ line.status }}</td>
-              <td style="padding: 6px;">{{ line.agingBucket }}</td>
-            </tr>
-          </table>
-          <ng-template #noLines><p><em>No open items for the selected period</em></p></ng-template>
-        </mat-card>
       </div>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad", "titleActionChange"] }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "lastSearch", "data", "reload"], outputs: ["tileActionSelected", "tileClick", "tileUnClick"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "suffix", "infoMessage", "copyContent", "clearContent"], outputs: ["valueChange"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad", "titleActionChange"] }, { kind: "component", type: SelectLiteComponent, selector: "spa-select-lite" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: StatementComponent, decorators: [{
             type: Component,
@@ -26027,21 +26889,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 
     <ng-template #statementTab let-kind="kind">
       <div style="padding: 16px 0;">
-        <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap;">
-          <mat-form-field style="min-width: 240px;">
-            <mat-label>{{ kind === 'customer' ? 'Customer' : 'Supplier' }}</mat-label>
-            <mat-select [(ngModel)]="state[kind].entityId">
-              <mat-option *ngFor="let option of state[kind].options" [value]="option.value">{{ option.name }}</mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field>
-            <mat-label>From</mat-label>
-            <input matInput type="date" [(ngModel)]="state[kind].from">
-          </mat-form-field>
-          <mat-form-field>
-            <mat-label>To</mat-label>
-            <input matInput type="date" [(ngModel)]="state[kind].to">
-          </mat-form-field>
+
+        <!-- Changed: library inputs instead of raw mat-form-field markup — same three filters, same Run/Export/PDF rules -->
+        <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;">
+          <spa-select-lite [display]="state[kind].entityLabel" [loadAction]="state[kind].listAction" optionDisplay="name" optionValue="value" [required]="false" [(value)]="state[kind].entityId" width="240px"></spa-select-lite><!-- optionDisplay/optionValue are NOT defaulted by spa-select-common; without them every option binds undefined and nothing can be selected -->
+          <spa-date display="From" width="170px" [required]="false" [value]="state[kind].from" (valueChange)="state[kind].from = $event"></spa-date>
+          <spa-date display="To" width="170px" [required]="false" [value]="state[kind].to" (valueChange)="state[kind].to = $event"></spa-date>
           <button mat-flat-button color="primary" (click)="load(kind)" [disabled]="!state[kind].entityId">Run</button>
           <button mat-stroked-button (click)="export(kind)" [disabled]="!state[kind].entityId">
             <mat-icon>download</mat-icon> Export to Excel
@@ -26051,38 +26904,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
           </button>
         </div>
 
-        <mat-card *ngIf="state[kind].data" style="padding: 16px;">
-          <div style="display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 16px;">
-            <div><small>{{ kind === 'customer' ? 'Total Invoiced' : 'Total Purchased' }}</small><br><b>{{ (state[kind].data.totalInvoiced ?? state[kind].data.totalPurchased) | number:'1.2-2' }}</b></div>
-            <div><small>Total Paid</small><br><b>{{ state[kind].data.totalPaid | number:'1.2-2' }}</b></div>
-            <div *ngIf="kind === 'customer'"><small>Total Credited</small><br><b>{{ state[kind].data.totalCredited | number:'1.2-2' }}</b></div>
-            <div><small>Total Outstanding</small><br><b [style.color]="state[kind].data.totalOutstanding > 0 ? 'red' : 'green'">{{ state[kind].data.totalOutstanding | number:'1.2-2' }}</b></div>
+        <!-- Changed: totals are spa-tiles, lines are spa-table. Nothing renders until a statement has been run,
+             which is exactly what the old *ngIf on the results card did. -->
+        <ng-container *ngIf="state[kind].data">
+          <spa-tiles [config]="state[kind].tileConfig" [data]="state[kind].data"></spa-tiles>
+          <div style="margin-top: 12px;">
+            <spa-table [config]="state[kind].tableConfig" [data]="state[kind].lines" (refreshClick)="load(kind)"></spa-table>
           </div>
+        </ng-container>
 
-          <table style="width: 100%; border-collapse: collapse;" *ngIf="state[kind].data.lines?.length; else noLines">
-            <tr style="text-align: left; border-bottom: 2px solid #333;">
-              <th style="padding: 6px;">Date</th>
-              <th style="padding: 6px;">Reference</th>
-              <th style="padding: 6px;">Type</th>
-              <th style="padding: 6px; text-align: right;">Total</th>
-              <th style="padding: 6px; text-align: right;">Paid</th>
-              <th style="padding: 6px; text-align: right;">Outstanding</th>
-              <th style="padding: 6px;">Status</th>
-              <th style="padding: 6px;">Aging</th>
-            </tr>
-            <tr *ngFor="let line of state[kind].data.lines" style="border-bottom: 1px solid #eee;">
-              <td style="padding: 6px;">{{ line.date | date:'mediumDate' }}</td>
-              <td style="padding: 6px;">{{ line.reference }}</td>
-              <td style="padding: 6px;">{{ line.type }}</td>
-              <td style="padding: 6px; text-align: right;">{{ line.total | number:'1.2-2' }}</td>
-              <td style="padding: 6px; text-align: right;">{{ line.paid | number:'1.2-2' }}</td>
-              <td style="padding: 6px; text-align: right;">{{ line.outstanding | number:'1.2-2' }}</td>
-              <td style="padding: 6px;">{{ line.status }}</td>
-              <td style="padding: 6px;">{{ line.agingBucket }}</td>
-            </tr>
-          </table>
-          <ng-template #noLines><p><em>No open items for the selected period</em></p></ng-template>
-        </mat-card>
       </div>
     </ng-template>
   `,
@@ -26361,7 +27191,7 @@ class BudgetVsActualComponent {
     <hr>
 
     <div style="max-width: 300px; margin-bottom: 16px;">
-      <spa-select-lite display="Select Budget" [loadAction]="{ url: 'budgets/list/x' }" [(value)]="selectedBudgetID" (valueChange)="onBudgetSelected()"></spa-select-lite>
+      <spa-select-lite display="Select Budget" [loadAction]="{ url: 'budgets/list/x' }" optionDisplay="name" optionValue="value" [(value)]="selectedBudgetID" (valueChange)="onBudgetSelected()"></spa-select-lite><!-- Changed: optionDisplay/optionValue are NOT defaulted by spa-select-common (both default to ""), so every option rendered blank and bound undefined — no budget could be picked. 'name'/'value' match BaseController.GetList's ListOption shape, same as the statement page -->
     </div>
 
     <spa-tiles *ngIf="summaryTileConfig.loadAction" [config]="summaryTileConfig"></spa-tiles>
@@ -26378,7 +27208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
     <hr>
 
     <div style="max-width: 300px; margin-bottom: 16px;">
-      <spa-select-lite display="Select Budget" [loadAction]="{ url: 'budgets/list/x' }" [(value)]="selectedBudgetID" (valueChange)="onBudgetSelected()"></spa-select-lite>
+      <spa-select-lite display="Select Budget" [loadAction]="{ url: 'budgets/list/x' }" optionDisplay="name" optionValue="value" [(value)]="selectedBudgetID" (valueChange)="onBudgetSelected()"></spa-select-lite><!-- Changed: optionDisplay/optionValue are NOT defaulted by spa-select-common (both default to ""), so every option rendered blank and bound undefined — no budget could be picked. 'name'/'value' match BaseController.GetList's ListOption shape, same as the statement page -->
     </div>
 
     <spa-tiles *ngIf="summaryTileConfig.loadAction" [config]="summaryTileConfig"></spa-tiles>
@@ -26762,7 +27592,7 @@ class VatReturnComponent {
         </mat-card>
       </mat-tab>
     </mat-tab-group>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: VatReturnComponent, decorators: [{
             type: Component,
@@ -28369,9 +29199,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         }], ctorParameters: () => [] });
 
 class OnboardingComponent {
-    constructor(dataService, authService) {
+    constructor(dataService, authService, apiErrorService) {
         this.dataService = dataService;
         this.authService = authService;
+        this.apiErrorService = apiErrorService;
         this.step = "terms";
         this.agree = false;
         this.own = true;
@@ -28391,7 +29222,7 @@ class OnboardingComponent {
             ],
             loadAction: { url: 'tenants/invitations/x' },
         };
-    }
+    } // Changed: injected ApiErrorService for the rename step
     ngOnInit() {
         this.loadMeta();
         this.authService.loggedUserFullName.subscribe(x => this.username = x);
@@ -28408,6 +29239,9 @@ class OnboardingComponent {
             if (apiResponse.success) {
                 this.authService.updateTenantName(this.myTenant.name);
             }
+            else {
+                this.apiErrorService.presentAppFailure(apiResponse, 'action', 'tenants/dto?action=rename'); // Added: was silent, and next() advances the wizard regardless of the outcome — so the user typed their company name, moved on, and only discovered weeks later that the organisation was still called whatever it defaulted to
+            }
         });
     }
     next() {
@@ -28436,13 +29270,13 @@ class OnboardingComponent {
     home() {
         this.dataService.Navigate('home');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OnboardingComponent, deps: [{ token: DataServiceLib }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OnboardingComponent, deps: [{ token: DataServiceLib }, { token: AuthService }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: OnboardingComponent, isStandalone: false, selector: "spa-onboarding", ngImport: i0, template: "<label class=\"title\">Welcome,  {{username}}</label>\n\n\n\n<!-- terms -->\n<div class=\"mt-3\" *ngIf=\"step=='terms'\">\n\n  <label class=\"subtitle text-muted mb-2\" >We care about our users and are dedicated to protecting your data and privacy -\n    thats why we want to be clear about what data we collect and how we use it to improve your experience.</label>\n\n  <br>\n  <spa-check display=\"I agree to the Terms and Privacy Policy\" [(value)]=\"agree\"></spa-check>\n</div>\n\n<!-- owner -->\n<div class=\"mt-3\" *ngIf=\"step=='name' && own\">\n\n  <label class=\"subtitle text-muted\" style=\" margin-bottom: 20px;\">The follow steps will guide you to customise your application.</label>\n\n  <div style=\"max-width: 400px;\">\n   <spa-text display=\"Organisation Name\" [(value)]=\"myTenant.name\" ></spa-text>\n  </div>\n\n  <label class=\"text-muted\" style=\" font-size: 12px;\">You can change the Organisation's name to your team or company name.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">The name can be changed later.</label>\n\n</div>\n\n<!-- guest -->\n<div *ngIf=\"step=='hi' && !own\">\n  <label class=\"subtitle text-muted\">You are now signed in to {{myTenant.name}}.</label>\n</div>\n\n\n<!-- invitations -->\n<div class=\"mt-3\" *ngIf=\"step=='invitations' && own\">\n\n  <label class=\"subtitle text-muted\">You have been requested to join the following organisations. If you accept, you have the option to switch to that org now or stay in you org.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">You will be able to switch later.</label>\n  <spa-invitations-table></spa-invitations-table>\n\n</div>\n\n\n<!-- Actions -->\n<div class=\"mt-3\">\n  <button  mat-stroked-button color=\"primary\" [disabled]=\"!agree\" (click)=\"next()\">Next <mat-icon>arrow_right_alt</mat-icon></button>\n</div>\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["appearance", "readonly", "hint", "display", "placeholder", "value", "format", "type", "width", "copyContent", "clearContent", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OnboardingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-onboarding', standalone: false, template: "<label class=\"title\">Welcome,  {{username}}</label>\n\n\n\n<!-- terms -->\n<div class=\"mt-3\" *ngIf=\"step=='terms'\">\n\n  <label class=\"subtitle text-muted mb-2\" >We care about our users and are dedicated to protecting your data and privacy -\n    thats why we want to be clear about what data we collect and how we use it to improve your experience.</label>\n\n  <br>\n  <spa-check display=\"I agree to the Terms and Privacy Policy\" [(value)]=\"agree\"></spa-check>\n</div>\n\n<!-- owner -->\n<div class=\"mt-3\" *ngIf=\"step=='name' && own\">\n\n  <label class=\"subtitle text-muted\" style=\" margin-bottom: 20px;\">The follow steps will guide you to customise your application.</label>\n\n  <div style=\"max-width: 400px;\">\n   <spa-text display=\"Organisation Name\" [(value)]=\"myTenant.name\" ></spa-text>\n  </div>\n\n  <label class=\"text-muted\" style=\" font-size: 12px;\">You can change the Organisation's name to your team or company name.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">The name can be changed later.</label>\n\n</div>\n\n<!-- guest -->\n<div *ngIf=\"step=='hi' && !own\">\n  <label class=\"subtitle text-muted\">You are now signed in to {{myTenant.name}}.</label>\n</div>\n\n\n<!-- invitations -->\n<div class=\"mt-3\" *ngIf=\"step=='invitations' && own\">\n\n  <label class=\"subtitle text-muted\">You have been requested to join the following organisations. If you accept, you have the option to switch to that org now or stay in you org.</label><br>\n  <label class=\"text-muted\" style=\" font-size: 12px;margin-top: 10px;\">You will be able to switch later.</label>\n  <spa-invitations-table></spa-invitations-table>\n\n</div>\n\n\n<!-- Actions -->\n<div class=\"mt-3\">\n  <button  mat-stroked-button color=\"primary\" [disabled]=\"!agree\" (click)=\"next()\">Next <mat-icon>arrow_right_alt</mat-icon></button>\n</div>\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}\n"] }]
-        }], ctorParameters: () => [{ type: DataServiceLib }, { type: AuthService }] });
+        }], ctorParameters: () => [{ type: DataServiceLib }, { type: AuthService }, { type: ApiErrorService }] });
 
 const HR_ROUTES = [
     { path: "employees", component: EmployeesComponent },
@@ -28564,6 +29398,493 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
+// Added (Phase 6): the Driver Commission Statement, and the only place the response-level warnings from
+// preview and generate reach a human. Phases 2-5 surfaced the ROW-level ones — a 0.00 entry, a rule scoped
+// to nobody — but a rule skipped because it expired, and an invoice excluded because a credit note settled
+// it rather than cash, live on the RESPONSE, and nothing rendered them. `execAction` on the table component
+// toasts apiResponse.message and drops apiResponse.data, so a Preview button bound to a table config would
+// have shown the one-line summary and silently discarded every named reason. Hence a page.
+class CommissionStatementComponent {
+    constructor() {
+        this.dataService = inject(DataServiceLib);
+        this.configService = inject(ConfigService);
+        this.messageService = inject(MessageService);
+        this.months = [
+            { value: 1, name: 'January' }, { value: 2, name: 'February' }, { value: 3, name: 'March' },
+            { value: 4, name: 'April' }, { value: 5, name: 'May' }, { value: 6, name: 'June' },
+            { value: 7, name: 'July' }, { value: 8, name: 'August' }, { value: 9, name: 'September' },
+            { value: 10, name: 'October' }, { value: 11, name: 'November' }, { value: 12, name: 'December' },
+        ];
+        this.periodYear = new Date().getFullYear();
+        this.periodMonth = new Date().getMonth() + 1;
+        this.busy = false;
+        this.previewResult = null;
+        this.generateResult = null;
+        this.entries = [];
+        this.statementLoaded = false;
+        this.totals = { draft: 0, approved: 0, paid: 0, reversed: 0, carried: 0 };
+        // Reads the one shared App Configuration record. An app whose configuration has no EnableTripCommission
+        // property simply gets undefined, so the generator hides — this fails CLOSED on purpose, matching the
+        // server's own late-bound read of the flag. A button that offers to write commission in an app that does
+        // not generate it is worse than no button.
+        this.tripCommissionEnabled = false;
+    }
+    ngOnInit() {
+        this.tripCommissionEnabled = !!this.configService.value?.enableTripCommission;
+        this.configService.config$.subscribe((config) => {
+            this.tripCommissionEnabled = !!config?.enableTripCommission;
+        });
+        this.loadStatement();
+    }
+    periodLabel() {
+        return `${this.months.find(m => m.value === this.periodMonth)?.name ?? this.periodMonth} ${this.periodYear}`;
+    }
+    get previewTotal() {
+        return (this.previewResult?.entries || []).reduce((sum, e) => sum + (e.commissionAmount || 0), 0);
+    }
+    statusClass(entry) {
+        if (entry?.status === 1)
+            return 'cs-status-draft';
+        if (entry?.status === 2)
+            return 'cs-status-approved';
+        if (entry?.status === 4)
+            return 'cs-status-reversed';
+        return '';
+    }
+    // Changing the period invalidates both result panels — leaving July's preview on screen above August's
+    // statement is how someone approves the wrong month.
+    clearResults() {
+        this.previewResult = null;
+        this.generateResult = null;
+        this.statementLoaded = false;
+    }
+    loadStatement() {
+        if (!this.validPeriod())
+            return;
+        this.busy = true;
+        this.dataService.CallApi({ url: `commissionentries/period/${this.periodYear}-${this.periodMonth}` }).subscribe({
+            next: (res) => {
+                this.busy = false;
+                if (!res.success) {
+                    this.messageService.toast(res.message || 'Could not load the statement');
+                    return;
+                }
+                this.entries = res.data || [];
+                this.statementLoaded = true;
+                this.recalculateTotals();
+            },
+            error: () => { this.busy = false; }
+        });
+    }
+    // Draft, Approved, Paid and Reversed are summed separately and never rolled into one figure. A single
+    // "total commission" would read as owed when most of it is a proposal nobody has approved.
+    recalculateTotals() {
+        this.totals = { draft: 0, approved: 0, paid: 0, reversed: 0, carried: 0 };
+        for (const e of this.entries) {
+            const amount = e.commissionAmount || 0;
+            if (e.isPaid || e.status === 3)
+                this.totals.paid += amount;
+            else if (e.status === 2)
+                this.totals.approved += amount;
+            else if (e.status === 4)
+                this.totals.reversed += amount;
+            else
+                this.totals.draft += amount;
+            if (e.isCarriedForward)
+                this.totals.carried += amount;
+        }
+    }
+    // PREVIEW WRITES NOTHING. It is gated on cap77 VIEW server-side for exactly that reason, and the result
+    // panel repeats it — a figure on screen that looks committed is the failure this button exists to avoid.
+    preview() {
+        if (!this.validPeriod())
+            return;
+        this.busy = true;
+        this.generateResult = null;
+        this.dataService.CallApi({ url: 'shiftcommission/preview', method: 'post' }, { periodYear: this.periodYear, periodMonth: this.periodMonth }).subscribe({
+            next: (res) => {
+                this.busy = false;
+                if (!res.success) {
+                    this.messageService.toast(res.message || 'Preview failed');
+                    return;
+                }
+                this.previewResult = res.data || {};
+            },
+            error: () => { this.busy = false; }
+        });
+    }
+    // GENERATE WRITES. Every entry lands as Draft, so nothing here can pay anybody without a separate
+    // approval — the confirm says so rather than leaving it to be discovered.
+    generate() {
+        if (!this.validPeriod())
+            return;
+        this.messageService.confirm(`Generate commission entries for ${this.periodLabel()}? They are created as Draft and still have to be approved before a payroll run can pay them. Regenerating a period reverses entries that were already approved or paid.`)
+            .subscribe((answer) => {
+            if (answer !== 'yes')
+                return;
+            this.busy = true;
+            this.previewResult = null;
+            this.dataService.CallApi({ url: 'shiftcommission/generate', method: 'post' }, { periodYear: this.periodYear, periodMonth: this.periodMonth }).subscribe({
+                next: (res) => {
+                    this.busy = false;
+                    if (!res.success) {
+                        this.messageService.toast(res.message || 'Generation failed');
+                        return;
+                    }
+                    this.generateResult = res.data || {};
+                    this.loadStatement(); // the statement below must agree with what was just written
+                },
+                error: () => { this.busy = false; }
+            });
+        });
+    }
+    validPeriod() {
+        if (!this.periodMonth || this.periodMonth < 1 || this.periodMonth > 12) {
+            this.messageService.toast('Choose a month');
+            return false;
+        }
+        if (!this.periodYear || this.periodYear < 2000 || this.periodYear > 2100) {
+            this.messageService.toast('Year must be between 2000 and 2100');
+            return false;
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CommissionStatementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: CommissionStatementComponent, isStandalone: false, selector: "spa-commission-statement", ngImport: i0, template: `
+    <div class="cs-container">
+
+      <h4 class="cs-title"><mat-icon>receipt_long</mat-icon> Driver Commission Statement</h4>
+
+      <!-- Period, and the two actions. Preview and Generate render only where trip commission is switched on,
+           which in practice means Shift — every other app gets the statement without the generator. -->
+      <div class="cs-bar">
+        <div class="cs-period">
+          <mat-form-field appearance="outline" class="cs-year">
+            <mat-label>Year</mat-label>
+            <input matInput type="number" [(ngModel)]="periodYear" (change)="clearResults()">
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="cs-month">
+            <mat-label>Month</mat-label>
+            <mat-select [(ngModel)]="periodMonth" (selectionChange)="clearResults()">
+              <mat-option *ngFor="let m of months" [value]="m.value">{{ m.name }}</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <button mat-stroked-button color="primary" (click)="loadStatement()" [disabled]="busy">Show Statement</button>
+        </div>
+
+        <div class="cs-actions" *ngIf="tripCommissionEnabled">
+          <button mat-stroked-button (click)="preview()" [disabled]="busy"><mat-icon>visibility</mat-icon> Preview (writes nothing)</button>
+          <button mat-flat-button color="primary" (click)="generate()" [disabled]="busy"><mat-icon>playlist_add</mat-icon> Generate from Trips</button>
+        </div>
+      </div>
+
+      <div class="alert alert-secondary cs-note" *ngIf="!tripCommissionEnabled">
+        Commission is not generated from trips in this app, so this page reports what has been recorded rather than
+        proposing anything new.
+      </div>
+
+      <!-- ============ PREVIEW RESULT — the whole point of this page ============ -->
+      <div class="cs-panel" *ngIf="previewResult">
+        <div class="alert alert-info cs-headline">
+          <strong>Preview only — nothing was written.</strong>
+          {{ previewResult.entries?.length || 0 }} {{ (previewResult.entries?.length === 1) ? 'entry' : 'entries' }}
+          totalling {{ previewTotal | number:'1.2-2' }} for {{ previewResult.periodName || periodLabel() }}.
+          Generating turns these into <strong>Draft</strong> entries, which still have to be approved before payroll can pay them.
+        </div>
+
+        <!-- Response-level warnings: the ones that were invisible until now -->
+        <div class="alert alert-warning" *ngIf="previewResult.warnings?.length">
+          <strong>{{ previewResult.warnings.length }} warning{{ previewResult.warnings.length === 1 ? '' : 's' }} about this period</strong>
+          <ul class="cs-list"><li *ngFor="let w of previewResult.warnings">{{ w }}</li></ul>
+        </div>
+
+        <!-- Skipped rules, each with the reason the evaluator refused it -->
+        <div class="alert alert-danger" *ngIf="previewResult.skippedRules?.length">
+          <strong>{{ previewResult.skippedRules.length }} rule{{ previewResult.skippedRules.length === 1 ? '' : 's' }} paid nobody</strong>
+          <ul class="cs-list">
+            <li *ngFor="let s of previewResult.skippedRules"><strong>{{ s.configName }}</strong> — {{ s.reason }}</li>
+          </ul>
+        </div>
+
+        <table class="cs-table" *ngIf="previewResult.entries?.length">
+          <thead>
+            <tr>
+              <th>Employee</th><th>Rule</th><th>Basis</th><th>Earned When</th>
+              <th class="cs-num">Measured</th><th class="cs-num">Rate</th><th class="cs-num">Raw</th><th class="cs-num">Would Pay</th><th>Notes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let e of previewResult.entries">
+              <td>{{ e.employeeName }}</td>
+              <td>{{ e.configName }}</td>
+              <td>{{ e.basisName }}</td>
+              <td>{{ e.earnEventName }}</td>
+              <td class="cs-num">{{ e.metricValue | number:'1.0-2' }}</td>
+              <td class="cs-num">{{ e.rate | number:'1.0-4' }}</td>
+              <td class="cs-num">{{ e.rawAmount | number:'1.2-2' }}</td>
+              <td class="cs-num cs-strong" [class.cs-zero]="e.commissionAmount === 0">{{ e.commissionAmount | number:'1.2-2' }}</td>
+              <td class="cs-notes">
+                <span class="cs-flag" *ngIf="e.usedTiers">tiered</span>
+                <span class="cs-flag" *ngIf="e.minimumApplied">floor applied</span>
+                <span class="cs-flag" *ngIf="e.maximumApplied">cap applied</span>
+                <span class="cs-warn" *ngFor="let w of e.warnings">{{ w }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- ============ GENERATE RESULT ============ -->
+      <div class="cs-panel" *ngIf="generateResult">
+        <div class="alert alert-success cs-headline">
+          <strong>{{ generateResult.entriesCreated }} Draft entr{{ generateResult.entriesCreated === 1 ? 'y' : 'ies' }}</strong>
+          created from {{ generateResult.linesCreated }} source line{{ generateResult.linesCreated === 1 ? '' : 's' }},
+          totalling {{ generateResult.totalAmount | number:'1.2-2' }} for {{ generateResult.periodName || periodLabel() }}.
+          Draft entries do <strong>not</strong> reach a payslip until they are approved.
+        </div>
+
+        <!-- What a regeneration MOVED. These three are the ones nobody must discover from a payslip. -->
+        <div class="alert alert-warning" *ngIf="generateResult.draftEntriesReplaced || generateResult.approvedEntriesNeutralised || generateResult.paidEntriesReversed">
+          <ul class="cs-list">
+            <li *ngIf="generateResult.draftEntriesReplaced">{{ generateResult.draftEntriesReplaced }} previous draft entr{{ generateResult.draftEntriesReplaced === 1 ? 'y was' : 'ies were' }} replaced.</li>
+            <li *ngIf="generateResult.approvedEntriesNeutralised"><strong>{{ generateResult.approvedEntriesNeutralised }} already-approved entr{{ generateResult.approvedEntriesNeutralised === 1 ? 'y was' : 'ies were' }} reversed and must be approved again.</strong></li>
+            <li *ngIf="generateResult.paidEntriesReversed"><strong>{{ generateResult.paidEntriesReversed }} already-paid entr{{ generateResult.paidEntriesReversed === 1 ? 'y' : 'ies' }} raised a negative clawback awaiting approval.</strong> The original payment stands.</li>
+          </ul>
+        </div>
+
+        <div class="alert alert-warning" *ngIf="generateResult.entriesWithWarnings?.length">
+          <strong>{{ generateResult.entriesWithWarnings.length }} entr{{ generateResult.entriesWithWarnings.length === 1 ? 'y needs' : 'ies need' }} attention before approval</strong>
+          <ul class="cs-list">
+            <li *ngFor="let e of generateResult.entriesWithWarnings">
+              <strong>{{ e.employeeName }}</strong> — {{ e.configName }} — {{ e.commissionAmount | number:'1.2-2' }}
+              <span *ngFor="let w of e.warnings" class="cs-warn">{{ w }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <div class="alert alert-warning" *ngIf="generateResult.warnings?.length">
+          <ul class="cs-list"><li *ngFor="let w of generateResult.warnings">{{ w }}</li></ul>
+        </div>
+
+        <div class="alert alert-danger" *ngIf="generateResult.skippedRules?.length">
+          <strong>{{ generateResult.skippedRules.length }} rule{{ generateResult.skippedRules.length === 1 ? '' : 's' }} paid nobody</strong>
+          <ul class="cs-list">
+            <li *ngFor="let s of generateResult.skippedRules"><strong>{{ s.configName }}</strong> — {{ s.reason }}</li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- ============ THE STATEMENT ITSELF ============ -->
+      <div class="cs-panel" *ngIf="statementLoaded">
+        <h5 class="cs-section">Recorded for {{ periodLabel() }}</h5>
+
+        <div class="cs-totals">
+          <div class="cs-total"><span class="cs-total-label">Proposed (Draft)</span><span class="cs-total-value cs-draft">{{ totals.draft | number:'1.2-2' }}</span><span class="cs-total-note">not payable until approved</span></div>
+          <div class="cs-total"><span class="cs-total-label">Payable (Approved)</span><span class="cs-total-value cs-approved">{{ totals.approved | number:'1.2-2' }}</span><span class="cs-total-note">will be picked up by a payroll run</span></div>
+          <div class="cs-total"><span class="cs-total-label">Settled (Paid)</span><span class="cs-total-value">{{ totals.paid | number:'1.2-2' }}</span><span class="cs-total-note">already on a payslip line</span></div>
+          <div class="cs-total"><span class="cs-total-label">Reversed</span><span class="cs-total-value cs-reversed">{{ totals.reversed | number:'1.2-2' }}</span><span class="cs-total-note">clawbacks against earlier entries</span></div>
+          <div class="cs-total"><span class="cs-total-label">Carried forward in</span><span class="cs-total-value">{{ totals.carried | number:'1.2-2' }}</span><span class="cs-total-note">earned in an earlier period</span></div>
+        </div>
+
+        <div class="alert alert-secondary cs-note" *ngIf="!entries.length">
+          Nothing has been recorded for this period yet.
+        </div>
+
+        <table class="cs-table" *ngIf="entries.length">
+          <thead>
+            <tr><th>Employee</th><th>Description</th><th>Source</th><th class="cs-num">Measured</th><th class="cs-num">Amount</th><th>Status</th><th>Paid</th><th>Lines</th></tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let e of entries">
+              <td>{{ e.employeeName }}</td>
+              <td>
+                {{ e.description }}
+                <span class="cs-flag" *ngIf="e.isCarriedForward">from {{ e.originPeriodMonth }}/{{ e.originPeriodYear }}</span>
+                <span class="cs-flag cs-flag-warn" *ngIf="e.isReversal">reverses #{{ e.reversesCommissionEntryID }}</span>
+              </td>
+              <td>{{ e.sourceType }}</td>
+              <td class="cs-num">{{ e.metricValue | number:'1.0-2' }}</td>
+              <td class="cs-num cs-strong" [class.cs-negative]="e.commissionAmount < 0">{{ e.commissionAmount | number:'1.2-2' }}</td>
+              <td><span [ngClass]="statusClass(e)">{{ e.statusName }}</span></td>
+              <td>{{ e.isPaid ? 'Yes' : '' }}</td>
+              <td>{{ e.lineCount }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+    </div>
+  `, isInline: true, styles: [".cs-container{padding:16px}.cs-title{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:#333;font-weight:500}.cs-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:8px}.cs-period,.cs-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.cs-year{width:110px}.cs-month{width:160px}.cs-note{font-size:14px}.cs-panel{margin-top:8px}.cs-headline{font-size:14px}.cs-section{color:#333;font-weight:500;margin:16px 0 8px}.cs-list{margin:6px 0 0;padding-left:20px}.cs-list li{margin-bottom:3px}.cs-table{width:100%;border-collapse:collapse;font-size:13px}.cs-table th{text-align:left;padding:8px 12px;background:#f5f5f5;border-bottom:2px solid #e0e0e0;font-weight:500;white-space:nowrap}.cs-table td{padding:8px 12px;border-bottom:1px solid #eee;vertical-align:top}.cs-table tr:hover{background:#fafafa}.cs-num{text-align:right;white-space:nowrap}.cs-strong{font-weight:600}.cs-zero{color:#e65100}.cs-negative{color:#c62828}.cs-notes{max-width:320px}.cs-flag{display:inline-block;margin:1px 4px 1px 0;padding:1px 7px;border-radius:10px;background:#eceff1;color:#455a64;font-size:11px;white-space:nowrap}.cs-flag-warn{background:#fff3cd;color:#664d03}.cs-warn{display:block;color:#664d03;font-size:12px;margin-top:2px}.cs-totals{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}.cs-total{display:flex;flex-direction:column;min-width:170px;flex:1 1 170px;padding:10px 14px;border:1px solid #e0e0e0;border-radius:6px;background:#fff}.cs-total-label{font-size:12px;color:#607d8b}.cs-total-value{font-size:20px;font-weight:600}.cs-total-note{font-size:11px;color:#90a4ae}.cs-draft{color:#757575}.cs-approved{color:#2e7d32}.cs-reversed{color:#c62828}.cs-status-draft{color:#757575}.cs-status-approved{color:#2e7d32;font-weight:600}.cs-status-reversed{color:#c62828}@media (max-width: 700px){.cs-bar{flex-direction:column;align-items:stretch}.cs-actions button{flex:1 1 auto}.cs-panel{overflow-x:auto}.cs-notes{max-width:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: i1$2.DecimalPipe, name: "number" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CommissionStatementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-commission-statement', template: `
+    <div class="cs-container">
+
+      <h4 class="cs-title"><mat-icon>receipt_long</mat-icon> Driver Commission Statement</h4>
+
+      <!-- Period, and the two actions. Preview and Generate render only where trip commission is switched on,
+           which in practice means Shift — every other app gets the statement without the generator. -->
+      <div class="cs-bar">
+        <div class="cs-period">
+          <mat-form-field appearance="outline" class="cs-year">
+            <mat-label>Year</mat-label>
+            <input matInput type="number" [(ngModel)]="periodYear" (change)="clearResults()">
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="cs-month">
+            <mat-label>Month</mat-label>
+            <mat-select [(ngModel)]="periodMonth" (selectionChange)="clearResults()">
+              <mat-option *ngFor="let m of months" [value]="m.value">{{ m.name }}</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <button mat-stroked-button color="primary" (click)="loadStatement()" [disabled]="busy">Show Statement</button>
+        </div>
+
+        <div class="cs-actions" *ngIf="tripCommissionEnabled">
+          <button mat-stroked-button (click)="preview()" [disabled]="busy"><mat-icon>visibility</mat-icon> Preview (writes nothing)</button>
+          <button mat-flat-button color="primary" (click)="generate()" [disabled]="busy"><mat-icon>playlist_add</mat-icon> Generate from Trips</button>
+        </div>
+      </div>
+
+      <div class="alert alert-secondary cs-note" *ngIf="!tripCommissionEnabled">
+        Commission is not generated from trips in this app, so this page reports what has been recorded rather than
+        proposing anything new.
+      </div>
+
+      <!-- ============ PREVIEW RESULT — the whole point of this page ============ -->
+      <div class="cs-panel" *ngIf="previewResult">
+        <div class="alert alert-info cs-headline">
+          <strong>Preview only — nothing was written.</strong>
+          {{ previewResult.entries?.length || 0 }} {{ (previewResult.entries?.length === 1) ? 'entry' : 'entries' }}
+          totalling {{ previewTotal | number:'1.2-2' }} for {{ previewResult.periodName || periodLabel() }}.
+          Generating turns these into <strong>Draft</strong> entries, which still have to be approved before payroll can pay them.
+        </div>
+
+        <!-- Response-level warnings: the ones that were invisible until now -->
+        <div class="alert alert-warning" *ngIf="previewResult.warnings?.length">
+          <strong>{{ previewResult.warnings.length }} warning{{ previewResult.warnings.length === 1 ? '' : 's' }} about this period</strong>
+          <ul class="cs-list"><li *ngFor="let w of previewResult.warnings">{{ w }}</li></ul>
+        </div>
+
+        <!-- Skipped rules, each with the reason the evaluator refused it -->
+        <div class="alert alert-danger" *ngIf="previewResult.skippedRules?.length">
+          <strong>{{ previewResult.skippedRules.length }} rule{{ previewResult.skippedRules.length === 1 ? '' : 's' }} paid nobody</strong>
+          <ul class="cs-list">
+            <li *ngFor="let s of previewResult.skippedRules"><strong>{{ s.configName }}</strong> — {{ s.reason }}</li>
+          </ul>
+        </div>
+
+        <table class="cs-table" *ngIf="previewResult.entries?.length">
+          <thead>
+            <tr>
+              <th>Employee</th><th>Rule</th><th>Basis</th><th>Earned When</th>
+              <th class="cs-num">Measured</th><th class="cs-num">Rate</th><th class="cs-num">Raw</th><th class="cs-num">Would Pay</th><th>Notes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let e of previewResult.entries">
+              <td>{{ e.employeeName }}</td>
+              <td>{{ e.configName }}</td>
+              <td>{{ e.basisName }}</td>
+              <td>{{ e.earnEventName }}</td>
+              <td class="cs-num">{{ e.metricValue | number:'1.0-2' }}</td>
+              <td class="cs-num">{{ e.rate | number:'1.0-4' }}</td>
+              <td class="cs-num">{{ e.rawAmount | number:'1.2-2' }}</td>
+              <td class="cs-num cs-strong" [class.cs-zero]="e.commissionAmount === 0">{{ e.commissionAmount | number:'1.2-2' }}</td>
+              <td class="cs-notes">
+                <span class="cs-flag" *ngIf="e.usedTiers">tiered</span>
+                <span class="cs-flag" *ngIf="e.minimumApplied">floor applied</span>
+                <span class="cs-flag" *ngIf="e.maximumApplied">cap applied</span>
+                <span class="cs-warn" *ngFor="let w of e.warnings">{{ w }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- ============ GENERATE RESULT ============ -->
+      <div class="cs-panel" *ngIf="generateResult">
+        <div class="alert alert-success cs-headline">
+          <strong>{{ generateResult.entriesCreated }} Draft entr{{ generateResult.entriesCreated === 1 ? 'y' : 'ies' }}</strong>
+          created from {{ generateResult.linesCreated }} source line{{ generateResult.linesCreated === 1 ? '' : 's' }},
+          totalling {{ generateResult.totalAmount | number:'1.2-2' }} for {{ generateResult.periodName || periodLabel() }}.
+          Draft entries do <strong>not</strong> reach a payslip until they are approved.
+        </div>
+
+        <!-- What a regeneration MOVED. These three are the ones nobody must discover from a payslip. -->
+        <div class="alert alert-warning" *ngIf="generateResult.draftEntriesReplaced || generateResult.approvedEntriesNeutralised || generateResult.paidEntriesReversed">
+          <ul class="cs-list">
+            <li *ngIf="generateResult.draftEntriesReplaced">{{ generateResult.draftEntriesReplaced }} previous draft entr{{ generateResult.draftEntriesReplaced === 1 ? 'y was' : 'ies were' }} replaced.</li>
+            <li *ngIf="generateResult.approvedEntriesNeutralised"><strong>{{ generateResult.approvedEntriesNeutralised }} already-approved entr{{ generateResult.approvedEntriesNeutralised === 1 ? 'y was' : 'ies were' }} reversed and must be approved again.</strong></li>
+            <li *ngIf="generateResult.paidEntriesReversed"><strong>{{ generateResult.paidEntriesReversed }} already-paid entr{{ generateResult.paidEntriesReversed === 1 ? 'y' : 'ies' }} raised a negative clawback awaiting approval.</strong> The original payment stands.</li>
+          </ul>
+        </div>
+
+        <div class="alert alert-warning" *ngIf="generateResult.entriesWithWarnings?.length">
+          <strong>{{ generateResult.entriesWithWarnings.length }} entr{{ generateResult.entriesWithWarnings.length === 1 ? 'y needs' : 'ies need' }} attention before approval</strong>
+          <ul class="cs-list">
+            <li *ngFor="let e of generateResult.entriesWithWarnings">
+              <strong>{{ e.employeeName }}</strong> — {{ e.configName }} — {{ e.commissionAmount | number:'1.2-2' }}
+              <span *ngFor="let w of e.warnings" class="cs-warn">{{ w }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <div class="alert alert-warning" *ngIf="generateResult.warnings?.length">
+          <ul class="cs-list"><li *ngFor="let w of generateResult.warnings">{{ w }}</li></ul>
+        </div>
+
+        <div class="alert alert-danger" *ngIf="generateResult.skippedRules?.length">
+          <strong>{{ generateResult.skippedRules.length }} rule{{ generateResult.skippedRules.length === 1 ? '' : 's' }} paid nobody</strong>
+          <ul class="cs-list">
+            <li *ngFor="let s of generateResult.skippedRules"><strong>{{ s.configName }}</strong> — {{ s.reason }}</li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- ============ THE STATEMENT ITSELF ============ -->
+      <div class="cs-panel" *ngIf="statementLoaded">
+        <h5 class="cs-section">Recorded for {{ periodLabel() }}</h5>
+
+        <div class="cs-totals">
+          <div class="cs-total"><span class="cs-total-label">Proposed (Draft)</span><span class="cs-total-value cs-draft">{{ totals.draft | number:'1.2-2' }}</span><span class="cs-total-note">not payable until approved</span></div>
+          <div class="cs-total"><span class="cs-total-label">Payable (Approved)</span><span class="cs-total-value cs-approved">{{ totals.approved | number:'1.2-2' }}</span><span class="cs-total-note">will be picked up by a payroll run</span></div>
+          <div class="cs-total"><span class="cs-total-label">Settled (Paid)</span><span class="cs-total-value">{{ totals.paid | number:'1.2-2' }}</span><span class="cs-total-note">already on a payslip line</span></div>
+          <div class="cs-total"><span class="cs-total-label">Reversed</span><span class="cs-total-value cs-reversed">{{ totals.reversed | number:'1.2-2' }}</span><span class="cs-total-note">clawbacks against earlier entries</span></div>
+          <div class="cs-total"><span class="cs-total-label">Carried forward in</span><span class="cs-total-value">{{ totals.carried | number:'1.2-2' }}</span><span class="cs-total-note">earned in an earlier period</span></div>
+        </div>
+
+        <div class="alert alert-secondary cs-note" *ngIf="!entries.length">
+          Nothing has been recorded for this period yet.
+        </div>
+
+        <table class="cs-table" *ngIf="entries.length">
+          <thead>
+            <tr><th>Employee</th><th>Description</th><th>Source</th><th class="cs-num">Measured</th><th class="cs-num">Amount</th><th>Status</th><th>Paid</th><th>Lines</th></tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let e of entries">
+              <td>{{ e.employeeName }}</td>
+              <td>
+                {{ e.description }}
+                <span class="cs-flag" *ngIf="e.isCarriedForward">from {{ e.originPeriodMonth }}/{{ e.originPeriodYear }}</span>
+                <span class="cs-flag cs-flag-warn" *ngIf="e.isReversal">reverses #{{ e.reversesCommissionEntryID }}</span>
+              </td>
+              <td>{{ e.sourceType }}</td>
+              <td class="cs-num">{{ e.metricValue | number:'1.0-2' }}</td>
+              <td class="cs-num cs-strong" [class.cs-negative]="e.commissionAmount < 0">{{ e.commissionAmount | number:'1.2-2' }}</td>
+              <td><span [ngClass]="statusClass(e)">{{ e.statusName }}</span></td>
+              <td>{{ e.isPaid ? 'Yes' : '' }}</td>
+              <td>{{ e.lineCount }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+    </div>
+  `, standalone: false, styles: [".cs-container{padding:16px}.cs-title{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:#333;font-weight:500}.cs-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:8px}.cs-period,.cs-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.cs-year{width:110px}.cs-month{width:160px}.cs-note{font-size:14px}.cs-panel{margin-top:8px}.cs-headline{font-size:14px}.cs-section{color:#333;font-weight:500;margin:16px 0 8px}.cs-list{margin:6px 0 0;padding-left:20px}.cs-list li{margin-bottom:3px}.cs-table{width:100%;border-collapse:collapse;font-size:13px}.cs-table th{text-align:left;padding:8px 12px;background:#f5f5f5;border-bottom:2px solid #e0e0e0;font-weight:500;white-space:nowrap}.cs-table td{padding:8px 12px;border-bottom:1px solid #eee;vertical-align:top}.cs-table tr:hover{background:#fafafa}.cs-num{text-align:right;white-space:nowrap}.cs-strong{font-weight:600}.cs-zero{color:#e65100}.cs-negative{color:#c62828}.cs-notes{max-width:320px}.cs-flag{display:inline-block;margin:1px 4px 1px 0;padding:1px 7px;border-radius:10px;background:#eceff1;color:#455a64;font-size:11px;white-space:nowrap}.cs-flag-warn{background:#fff3cd;color:#664d03}.cs-warn{display:block;color:#664d03;font-size:12px;margin-top:2px}.cs-totals{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}.cs-total{display:flex;flex-direction:column;min-width:170px;flex:1 1 170px;padding:10px 14px;border:1px solid #e0e0e0;border-radius:6px;background:#fff}.cs-total-label{font-size:12px;color:#607d8b}.cs-total-value{font-size:20px;font-weight:600}.cs-total-note{font-size:11px;color:#90a4ae}.cs-draft{color:#757575}.cs-approved{color:#2e7d32}.cs-reversed{color:#c62828}.cs-status-draft{color:#757575}.cs-status-approved{color:#2e7d32;font-weight:600}.cs-status-reversed{color:#c62828}@media (max-width: 700px){.cs-bar{flex-direction:column;align-items:stretch}.cs-actions button{flex:1 1 auto}.cs-panel{overflow-x:auto}.cs-notes{max-width:none}}\n"] }]
+        }] });
+
 class SalaryAdvancesComponent {
     constructor() {
         this.payrollService = inject(PayrollService);
@@ -28749,6 +30070,7 @@ const PAYROLL_ROUTES = [
     { path: "runs", component: PayrollRunsComponent },
     { path: "commission-configs", component: CommissionConfigsComponent },
     { path: "commission-entries", component: CommissionEntriesComponent },
+    { path: "commission-statement", component: CommissionStatementComponent }, // Added (Phase 6): cap86 — routed and registered, granted in no role template
     { path: "salary-advances", component: SalaryAdvancesComponent },
     { path: "overtime-entries", component: OvertimeEntriesComponent },
     { path: "dashboard", component: PayrollDashboardComponent }
@@ -29045,11 +30367,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         }] });
 
 class TenantSettingsComponent {
-    constructor(dataService, messageService, authService, dialog) {
+    constructor(dataService, messageService, authService, dialog, apiErrorService) {
         this.dataService = dataService;
         this.messageService = messageService;
         this.authService = authService;
         this.dialog = dialog;
+        this.apiErrorService = apiErrorService;
         this.roles = [
             { roleName: 'Default', roleID: 1 },
         ];
@@ -29203,7 +30526,7 @@ class TenantSettingsComponent {
             loadAction: { url: 'mailerconfigs/all/x' },
             formConfig: this.mailerFormConfig
         };
-    }
+    } // Changed: injected ApiErrorService for the switch failure
     ngOnInit() {
         this.authService.myRoleObserv.subscribe(rol => this.myRole = rol);
         this.loadData();
@@ -29248,6 +30571,9 @@ class TenantSettingsComponent {
                     if (apiResponse.success) {
                         this.forceLogin();
                     }
+                    else {
+                        this.apiErrorService.presentAppFailure(apiResponse, 'action', 'tenants/dto?action=switch'); // Added: was silent. The user picked an organisation, confirmed it, and got NOTHING — no switch, no message — leaving them unable to tell whether they had changed organisation or not, on the one screen where that question matters most
+                    }
                 });
             }
         });
@@ -29256,13 +30582,13 @@ class TenantSettingsComponent {
         this.messageService.toast("Switched Successfully, please login again");
         this.authService.logoff();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TenantSettingsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TenantSettingsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TenantSettingsComponent, isStandalone: false, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\n\n  <div>\n\n    <label class=\"title\" >Organisation Details</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\n\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\n      </div>\n\n    </div>\n\n  </div>\n\n\n  <ng-container *ngIf=\"ownTenant\" >\n <!-- Members -->\n  <div class=\"mt-3\" >\n\n    <label class=\"title\" >Members</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\n\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\n\n  </div>\n\n\n<!-- My Organisations -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\" >My Organisations</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\n\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\n\n  </div>\n\n\n  <!-- My Invitations -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\">My Invitations</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\n\n\n    <spa-invitations-table></spa-invitations-table>\n\n  </div>\n\n  <!-- Billing -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\" >Billing and Subscription</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\n      </div>\n\n  </div>\n\n    <!-- Email -->\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\n\n  <label class=\"title\">Email Configuration</label>\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\n\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\n\n  </div>\n\n\n  </ng-container>\n\n\n\n</div>\n\n\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format", "suffix", "size"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TenantSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-tenant-settings', standalone: false, template: "<div class=\"container\">\n\n  <div>\n\n    <label class=\"title\" >Organisation Details</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\n\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\n      </div>\n\n    </div>\n\n  </div>\n\n\n  <ng-container *ngIf=\"ownTenant\" >\n <!-- Members -->\n  <div class=\"mt-3\" >\n\n    <label class=\"title\" >Members</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\n\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\n\n  </div>\n\n\n<!-- My Organisations -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\" >My Organisations</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\n\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\n\n  </div>\n\n\n  <!-- My Invitations -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\">My Invitations</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\n\n\n    <spa-invitations-table></spa-invitations-table>\n\n  </div>\n\n  <!-- Billing -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\" >Billing and Subscription</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\n      </div>\n\n  </div>\n\n    <!-- Email -->\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\n\n  <label class=\"title\">Email Configuration</label>\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\n\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\n\n  </div>\n\n\n  </ng-container>\n\n\n\n</div>\n\n\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"] }]
-        }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }, { type: i4.MatDialog }] });
+        }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: AuthService }, { type: i4.MatDialog }, { type: ApiErrorService }] });
 
 class TenantsComponent {
     constructor() {
@@ -29544,10 +30870,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 
 // Subscription management page — current plan display, plan comparison, upgrade/downgrade
 class SubscriptionPageComponent {
-    constructor(httpService, subscriptionService, snackBar) {
+    constructor(httpService, subscriptionService, snackBar, apiErrorService // Changed: injected so a failed load or plan change is classified rather than swallowed or echoed
+    ) {
         this.httpService = httpService;
         this.subscriptionService = subscriptionService;
         this.snackBar = snackBar;
+        this.apiErrorService = apiErrorService;
         this.currentSubscription = null;
         this.availablePlans = [];
         this.loading = true;
@@ -29566,6 +30894,9 @@ class SubscriptionPageComponent {
                 if (response?.success) {
                     this.currentSubscription = response.data;
                 }
+                else {
+                    this.apiErrorService.presentAppFailure(response, 'load', 'subscriptions/current'); // Added: was silent — the "your current plan" panel stayed blank, and a user comparing plans could not tell which one they were already on
+                }
                 this.loading = false;
             },
             error: () => { this.loading = false; }
@@ -29578,6 +30909,9 @@ class SubscriptionPageComponent {
                 if (response?.success) {
                     this.availablePlans = response.data || [];
                 }
+                else {
+                    this.apiErrorService.presentAppFailure(response, 'load', 'subscriptions/plans'); // Added: was silent. A plan-comparison page with no plans on it reads as "there is nothing to upgrade to", which is a commercially wrong thing to tell someone by accident
+                }
             }
         });
     }
@@ -29617,7 +30951,7 @@ class SubscriptionPageComponent {
                     this.subscriptionService.loadFeatures(); // Refresh enabled features for UI gating
                 }
                 else {
-                    this.snackBar.open(response?.message || 'Failed to change plan', '', { duration: 3000 });
+                    this.apiErrorService.presentAppFailure(response, 'action', 'subscriptions/change'); // Changed: was a bare MatSnackBar carrying response.message verbatim for 3 seconds. 'action' rather than 'submit' — this sits behind a confirmation panel with nothing typed into it, so the 'submit' wording about a still-populated form would not be true
                 }
             },
             error: () => {
@@ -29626,7 +30960,7 @@ class SubscriptionPageComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SubscriptionPageComponent, deps: [{ token: HttpService }, { token: SubscriptionService }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SubscriptionPageComponent, deps: [{ token: HttpService }, { token: SubscriptionService }, { token: i2$1.MatSnackBar }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SubscriptionPageComponent, isStandalone: false, selector: "spa-subscription", ngImport: i0, template: `
     <div class="subscription-container">
       <h4 class="page-title"><mat-icon>card_membership</mat-icon> Subscription</h4>
@@ -29860,13 +31194,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
       </div>
     </div>
   `, standalone: false, styles: [".subscription-container{padding:16px;max-width:1200px}.page-title{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:#333;font-weight:500}.section-title{margin:24px 0 16px;color:#555}.current-plan-card{margin-bottom:24px}.plan-avatar{font-size:40px;width:40px;height:40px;color:#1976d2}.plan-details{display:flex;gap:32px;flex-wrap:wrap;padding:8px 0}.detail-item{display:flex;flex-direction:column}.detail-label{font-size:12px;color:#888;text-transform:uppercase}.detail-value{font-size:16px;font-weight:500}.status-badge{padding:2px 10px;border-radius:12px;font-size:12px;font-weight:500}.status-0{background:#e3f2fd;color:#1565c0}.status-1{background:#e8f5e9;color:#2e7d32}.status-2{background:#fff3e0;color:#e65100}.status-3{background:#fce4ec;color:#c62828}.status-4{background:#f5f5f5;color:#616161}.no-plan-message{display:flex;align-items:center;gap:8px;color:#666;margin:0}.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}.plan-card{display:flex;flex-direction:column}.plan-card.current{border:2px solid #1976d2}.plan-price{text-align:center;padding:16px 0}.price-amount{font-size:32px;font-weight:700;color:#1976d2}.price-period{font-size:14px;color:#888}.plan-limits{display:flex;gap:16px;justify-content:center;padding-bottom:12px}.limit-item{display:flex;align-items:center;gap:4px;font-size:13px;color:#666}.limit-item mat-icon{font-size:18px;width:18px;height:18px}.feature-list{padding:12px 0}.feature-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px}.feature-check{color:#4caf50;font-size:18px;width:18px;height:18px}.feature-limit{font-size:12px;color:#999}.no-features{display:flex;align-items:center;gap:4px;color:#999;font-size:13px}mat-card-actions{margin-top:auto}mat-card-actions button{width:100%}.overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.confirm-dialog{max-width:440px;width:90%}.price-info{font-size:16px}.trial-info{display:flex;align-items:center;gap:4px;color:#1976d2;font-size:14px}\n"] }]
-        }], ctorParameters: () => [{ type: HttpService }, { type: SubscriptionService }, { type: i2$1.MatSnackBar }] });
+        }], ctorParameters: () => [{ type: HttpService }, { type: SubscriptionService }, { type: i2$1.MatSnackBar }, { type: ApiErrorService }] });
 
 // Billing page — invoice history table, invoice detail dialog, and payment flow dialog
 class BillingPageComponent {
-    constructor(httpService, snackBar) {
+    constructor(httpService, snackBar, apiErrorService // Changed: injected so failures on this page are classified, not swallowed or echoed
+    ) {
         this.httpService = httpService;
         this.snackBar = snackBar;
+        this.apiErrorService = apiErrorService;
         this.currentSubscription = null;
         this.invoices = [];
         this.loading = true;
@@ -29890,6 +31226,9 @@ class BillingPageComponent {
                 if (response?.success) {
                     this.currentSubscription = response.data;
                 }
+                else {
+                    this.apiErrorService.presentAppFailure(response, 'load', 'subscriptions/current'); // Added: was silent — the subscription summary card simply did not render, so a tenant could not tell a broken read from having no plan
+                }
             }
         });
     }
@@ -29900,6 +31239,9 @@ class BillingPageComponent {
                 if (response?.success) {
                     this.invoices = response.data || [];
                 }
+                else {
+                    this.apiErrorService.presentAppFailure(response, 'load', 'tenantinvoices/all/x'); // Added: was silent. An empty invoice list is a perfectly normal state for a new tenant, which is precisely why a FAILED one must not look the same — "you have no invoices" is a different fact from "we could not fetch them"
+                }
                 this.loading = false;
             },
             error: () => { this.loading = false; }
@@ -29929,7 +31271,7 @@ class BillingPageComponent {
                     this.showDetail = true;
                 }
                 else {
-                    this.snackBar.open(response?.message || 'Failed to load invoice detail', '', { duration: 3000 });
+                    this.apiErrorService.presentAppFailure(response, 'action', 'tenantinvoices/detail/' + invoice.tenantInvoiceID); // Changed: was a bare MatSnackBar carrying response.message — raw server text for 3 seconds, ApiErrorService bypassed entirely, the same shape Phase 3 removed from groups.component.ts
                 }
             },
             error: () => {
@@ -29967,7 +31309,7 @@ class BillingPageComponent {
                     this.paymentResult = { success: false, redirectUrl: response.data.redirectUrl };
                 }
                 else {
-                    this.paymentResult = { success: false, message: response?.message || 'Payment failed' };
+                    this.paymentResult = { success: false, message: this.paymentFailureText(response, 'payments/process/' + this.paymentInvoice.tenantInvoiceID) }; // Changed: was `response?.message || 'Payment failed'` rendered verbatim at the template's failure state
                 }
             },
             error: () => {
@@ -29976,6 +31318,24 @@ class BillingPageComponent {
             }
         });
     }
+    // Added: the payment dialog is the one place in this sweep where a MODAL is the WRONG answer. It already
+    // owns a dedicated failure state — error icon, red panel, inside the dialog the user is staring at — so
+    // stacking presentAppFailure's dialog on top of it would talk over a surface that is already doing the job,
+    // and would leave the panel underneath still showing the raw sentence anyway.
+    //
+    // What was actually wrong was the TEXT, not the surface. So the classifier is reused directly: a message a
+    // backend author wrote for a human ("Insufficient funds", "Card declined") is exactly what someone paying an
+    // invoice needs and is shown unchanged, while an implementation leak is replaced. The reference, when the
+    // catch-all minted one, is kept — a failed payment is the single most likely thing a tenant phones about.
+    paymentFailureText(response, url) {
+        const raw = response?.message;
+        console.error('[tin-spa] payment failure', { url, message: raw, response }); // the technical detail still reaches the console, exactly as presentAppFailure does
+        if (this.apiErrorService.classifyMessage(raw) === 'business')
+            return raw;
+        const reference = this.apiErrorService.extractReference(raw);
+        return `We couldn't complete that payment because of a technical problem — not anything you did wrong. Nothing was charged.` +
+            (reference ? ` Please try again shortly, and quote reference ${reference} if you contact your administrator.` : ` Please try again shortly.`);
+    }
     // Close the payment dialog
     closePayment() {
         this.showPayment = false;
@@ -29985,7 +31345,7 @@ class BillingPageComponent {
             this.loadInvoices(); // Refresh if payment was successful
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: BillingPageComponent, deps: [{ token: HttpService }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: BillingPageComponent, deps: [{ token: HttpService }, { token: i2$1.MatSnackBar }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: BillingPageComponent, isStandalone: false, selector: "spa-billing", ngImport: i0, template: `
     <div class="billing-container">
       <h4 class="page-title"><mat-icon>receipt_long</mat-icon> Billing & Invoices</h4>
@@ -30399,7 +31759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
       </div>
     </div>
   `, standalone: false, styles: [".billing-container{padding:16px;max-width:1200px}.page-title{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:#333;font-weight:500}.summary-card{margin-bottom:24px}.summary-row{display:flex;gap:32px;flex-wrap:wrap}.summary-item{display:flex;flex-direction:column}.summary-label{font-size:12px;color:#888;text-transform:uppercase}.summary-value{font-size:16px;font-weight:500}.status-badge{padding:2px 10px;border-radius:12px;font-size:12px;font-weight:500}.status-0{background:#e3f2fd;color:#1565c0}.status-1{background:#e8f5e9;color:#2e7d32}.status-2{background:#fff3e0;color:#e65100}.status-3{background:#fce4ec;color:#c62828}.status-4{background:#f5f5f5;color:#616161}.invoices-card{margin-bottom:24px}.table-container{overflow-x:auto}.invoice-table,.transaction-table{width:100%;border-collapse:collapse}.invoice-table th,.invoice-table td,.transaction-table th,.transaction-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #e0e0e0;font-size:14px}.invoice-table th,.transaction-table th{font-weight:500;color:#666;font-size:12px;text-transform:uppercase}.invoice-table tbody tr:hover{background:#f5f5f5}.invoice-status{padding:2px 8px;border-radius:10px;font-size:12px;font-weight:500}.inv-status-0{background:#fff3e0;color:#e65100}.inv-status-1{background:#e8f5e9;color:#2e7d32}.inv-status-2{background:#fce4ec;color:#c62828}.inv-status-3{background:#f3e5f5;color:#6a1b9a}.txn-status{padding:2px 8px;border-radius:10px;font-size:12px;font-weight:500}.txn-status-0{background:#e3f2fd;color:#1565c0}.txn-status-1{background:#fff3e0;color:#e65100}.txn-status-2{background:#e8f5e9;color:#2e7d32}.txn-status-3{background:#fce4ec;color:#c62828}.txn-status-4{background:#f5f5f5;color:#616161}.empty-state,.loading-state{display:flex;flex-direction:column;align-items:center;padding:32px;color:#999}.empty-state mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:8px}.overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.detail-dialog{max-width:640px;width:90%;max-height:80vh;overflow-y:auto}.payment-dialog{max-width:440px;width:90%}.close-btn{position:absolute;top:8px;right:8px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.detail-field{display:flex;flex-direction:column}.field-label{font-size:12px;color:#888;text-transform:uppercase}.field-value{font-size:14px;font-weight:500}.transactions-section{margin-top:16px}.transactions-section h5{margin:0 0 8px;color:#555}.no-transactions{color:#999;font-size:13px}.payment-summary{margin-bottom:16px}.payment-summary p{margin:4px 0;font-size:15px}.payment-state{display:flex;flex-direction:column;align-items:center;padding:24px;text-align:center}.result-icon{font-size:48px;width:48px;height:48px;margin-bottom:8px}.success-icon{color:#4caf50}.redirect-icon{color:#1976d2}.error-icon{color:#f44336}.payment-ref{font-size:12px;color:#888}\n"] }]
-        }], ctorParameters: () => [{ type: HttpService }, { type: i2$1.MatSnackBar }] });
+        }], ctorParameters: () => [{ type: HttpService }, { type: i2$1.MatSnackBar }, { type: ApiErrorService }] });
 
 const TENANCY_ROUTES = [
     { path: "settings", component: TenantSettingsComponent }, // Changed: Removed "tenant-" prefix — module path provides the namespace
@@ -30432,7 +31792,7 @@ class ApprovalsComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ApprovalsComponent, deps: [{ token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ApprovalsComponent, isStandalone: false, selector: "spa-approvals", ngImport: i0, template: "<h4>Approvals</h4>\n<hr>\n\n<mat-tab-group>\n  <mat-tab label=\"Received\">\n    <div class=\"mt-3\">\n      <spa-table [config]=\"dataService.receivedApprovalsTableConfig\"></spa-table>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Sent\">\n    <div class=\"mt-3\">\n      <spa-table [config]=\"dataService.sentApprovalsTableConfig\"></spa-table>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [""], dependencies: [{ kind: "component", type: i5$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ApprovalsComponent, isStandalone: false, selector: "spa-approvals", ngImport: i0, template: "<h4>Approvals</h4>\n<hr>\n\n<mat-tab-group>\n  <mat-tab label=\"Received\">\n    <div class=\"mt-3\">\n      <spa-table [config]=\"dataService.receivedApprovalsTableConfig\"></spa-table>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Sent\">\n    <div class=\"mt-3\">\n      <spa-table [config]=\"dataService.sentApprovalsTableConfig\"></spa-table>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [""], dependencies: [{ kind: "component", type: i3$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ApprovalsComponent, decorators: [{
             type: Component,
@@ -31338,6 +32698,7 @@ class PayrollModule {
             PayrollRunsComponent,
             CommissionConfigsComponent,
             CommissionEntriesComponent,
+            CommissionStatementComponent,
             SalaryAdvancesComponent,
             OvertimeEntriesComponent,
             PayrollDashboardComponent], imports: [CommonModule,
@@ -31354,6 +32715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         PayrollRunsComponent,
                         CommissionConfigsComponent,
                         CommissionEntriesComponent,
+                        CommissionStatementComponent,
                         SalaryAdvancesComponent,
                         OvertimeEntriesComponent,
                         PayrollDashboardComponent