@mindbill/angular 0.12.0 → 0.14.0

package/fesm2022/mindbill-angular.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Input, Component, EventEmitter, effect, Output, Directive, inject, ChangeDetectorRef, HostListener } from '@angular/core';
-import { createBillLifecycleClient, BILL_TASKS_AGING_BUCKETS, createBillReferenceClient, createBillSubmissionClient, createOrganizationClient } from '@mindbill/browser';
+import { signal, computed, Input, Component, EventEmitter, Output, inject, ChangeDetectorRef, HostListener, effect, Directive } from '@angular/core';
+import { createBillLifecycleClient, createBillReferenceClient, createBillSubmissionClient, REPORT_BILL_STATUS_OPTIONS, reportBillStatusContacts, BILL_TASKS_AGING_BUCKETS, createOrganizationClient } from '@mindbill/browser';
+export { REPORT_BILL_STATUS_OPTIONS, reportBillStatusContacts } from '@mindbill/browser';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -54,7 +55,10 @@ class MindBillLifecycleStore {
     getEor(id) { return this.requireClient().getEor(id); }
     closeBill(input) { return this.mutate(() => this.requireClient().closeBill(input)); }
     postPayment(input) { return this.mutate(() => this.requireClient().postPayment(input)); }
+    resubmitBill(input) { return this.mutate(() => this.requireClient().resubmitBill(input)); }
     submitSecondReview(input) { return this.mutate(() => this.requireClient().submitSecondReview(input)); }
+    sendDuplicateBill(input) { return this.mutate(() => this.requireClient().sendDuplicateBill(input)); }
+    reportBillStatus(input) { return this.mutate(() => this.requireClient().reportBillStatus(input)); }
     requireClient() {
         if (!this.client)
             throw new Error("Connect the lifecycle store before using it.");
@@ -188,363 +192,430 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }] } });
 
-class MindBillBillLifecycleComponent {
-    billId = "";
-    sessionEndpoint = "/api/mindbill/session";
-    apiBaseUrl = "https://app.mindbill.org";
-    getSession;
-    refreshInterval = 60_000;
-    appearance = { preset: "mindbill" };
-    billingError = new EventEmitter();
-    store = new MindBillLifecycleStore();
-    lifecycleStages = [
-        { id: "submitted", label: "Submitted" }, { id: "accepted", label: "Accepted" },
-        { id: "response", label: "Payer response" }, { id: "follow_up", label: "Follow-up" },
-        { id: "closed", label: "Closed" },
-    ];
-    panel = "";
-    notice = "";
-    closeReason = "";
-    payment = { amount: 0, method: "check", depositDate: new Date().toISOString().slice(0, 10) };
-    review = { reason: "", payerClaimControlNumber: "", disputedAmount: 0 };
-    constructor() { effect(() => { const error = this.store.error(); if (error)
-        this.billingError.emit(error); }); }
-    ngOnChanges(changes) {
-        if (changes["billId"] || changes["sessionEndpoint"] || changes["apiBaseUrl"] || changes["getSession"]) {
-            if (!this.billId.trim()) {
-                this.store.disconnect();
-                return;
+/** Date helpers shared by the Angular submission surfaces. Mirrors the React
+ * package's parseBillSubmissionDate/formatBillSubmissionDate exactly so both
+ * frameworks accept and render the same values. */
+function parseMindBillSubmissionDate(value) {
+    const trimmed = value.trim();
+    const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(trimmed);
+    const us = /^(\d{1,2})[/-](\d{1,2})[/-](\d{4})$/.exec(trimmed);
+    const digits = /^(\d{2})(\d{2})(\d{4})$/.exec(trimmed.replace(/\D/g, ""));
+    const match = iso ? [iso[2], iso[3], iso[1]] : us ? [us[1], us[2], us[3]] : digits ? [digits[1], digits[2], digits[3]] : null;
+    if (!match)
+        return undefined;
+    const month = Number(match[0]);
+    const day = Number(match[1]);
+    const year = Number(match[2]);
+    const date = new Date(Date.UTC(year, month - 1, day));
+    if (date.getUTCFullYear() !== year || date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day)
+        return undefined;
+    return `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+}
+function formatMindBillSubmissionDate(value) {
+    const parsed = value ? parseMindBillSubmissionDate(value) : undefined;
+    if (!parsed)
+        return "";
+    const [year, month, day] = parsed.split("-");
+    return `${month}/${day}/${year}`;
+}
+/** Accepts complete CPT (5 digits), HCPCS (letter + 4 digits), or California
+ * medical-legal codes typed directly into the procedure picker. */
+function mindBillCustomProcedureOption(query) {
+    const code = query.trim().toUpperCase().replace(/\s+/g, "");
+    if (!/^(?:\d{5}|[A-Z]\d{4}|ML(?:20[0-5]|PRR))$/.test(code))
+        return null;
+    return { id: code, label: code, detail: "Use this CPT, HCPCS, or medical-legal code" };
+}
+
+/** Styled searchable dropdown shared by the submission form's procedure,
+ * modifier, taxonomy, payer, and diagnosis pickers. Mirrors the React
+ * package's ComboBox: query filtering, optional custom-code creation,
+ * loading states, and infinite scroll via (endReached). */
+class MindBillComboBoxComponent {
+    value = "";
+    placeholder = "";
+    options = [];
+    disabled = false;
+    loading = false;
+    loadingMore = false;
+    invalid = false;
+    preserveValueOnOpen = false;
+    ariaLabel = "";
+    createOption;
+    opened = new EventEmitter();
+    queryChange = new EventEmitter();
+    endReached = new EventEmitter();
+    selected = new EventEmitter();
+    open = false;
+    query = "";
+    closeTimer;
+    get visible() {
+        const q = this.query.trim().toLowerCase();
+        const matches = q
+            ? this.options.filter((option) => `${option.id} ${option.label} ${option.detail ?? ""}`.toLowerCase().includes(q))
+            : this.options;
+        const custom = this.createOption?.(this.query) ?? null;
+        return custom && !matches.some((option) => option.id.toUpperCase() === custom.id.toUpperCase())
+            ? [...matches, custom]
+            : matches;
+    }
+    get showMenu() {
+        return this.open && (this.loading || this.visible.length > 0 || this.query.trim().length >= 2);
+    }
+    onFocus() {
+        clearTimeout(this.closeTimer);
+        const next = this.preserveValueOnOpen ? this.value : "";
+        this.open = true;
+        this.query = next;
+        this.opened.emit();
+        if (next)
+            this.queryChange.emit(next);
+    }
+    onInput(event) {
+        this.open = true;
+        this.query = event.target.value;
+        this.queryChange.emit(this.query);
+    }
+    onBlur() {
+        this.closeTimer = setTimeout(() => { this.open = false; }, 120);
+    }
+    onScroll(event) {
+        const menu = event.currentTarget;
+        if (menu.scrollHeight - menu.scrollTop - menu.clientHeight < 120)
+            this.endReached.emit();
+    }
+    choose(option) {
+        this.selected.emit(option);
+        this.open = false;
+        this.query = "";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillComboBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillComboBoxComponent, isStandalone: true, selector: "mindbill-combo-box", inputs: { value: "value", placeholder: "placeholder", options: "options", disabled: "disabled", loading: "loading", loadingMore: "loadingMore", invalid: "invalid", preserveValueOnOpen: "preserveValueOnOpen", ariaLabel: "ariaLabel", createOption: "createOption" }, outputs: { opened: "opened", queryChange: "queryChange", endReached: "endReached", selected: "selected" }, ngImport: i0, template: `
+    <div class="combo">
+      <input
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        [attr.aria-label]="ariaLabel"
+        [attr.aria-invalid]="invalid || null"
+        [attr.aria-expanded]="showMenu"
+        [disabled]="disabled"
+        [placeholder]="placeholder"
+        [value]="open ? query : value"
+        (focus)="onFocus()"
+        (click)="onFocus()"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+      />
+      @if (showMenu) {
+        <div class="menu" role="listbox" (scroll)="onScroll($event)">
+          @if (loading && !visible.length) { <div class="status">Loading…</div> }
+          @else if (visible.length) {
+            @for (option of visible; track option.id) {
+              <button type="button" role="option" (mousedown)="$event.preventDefault()" (click)="choose(option)">
+                <strong>{{ option.label }}</strong>
+                @if (option.detail) { <small>{{ option.detail }}</small> }
+              </button>
             }
-            this.store.connect({ billId: this.billId, sessionEndpoint: this.sessionEndpoint, apiBaseUrl: this.apiBaseUrl, ...(this.getSession ? { getSession: this.getSession } : {}) }, this.refreshInterval);
+          } @else { <div class="status">No matches</div> }
+          @if (loadingMore) { <div class="status">Loading more…</div> }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.combo{position:relative}input{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}input[aria-invalid=true]{border-color:#c83c3c}.menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;max-height:320px;overflow:auto;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);box-shadow:0 14px 35px #172b3730}.menu button{display:grid;width:100%;gap:3px;border:0;border-bottom:1px solid color-mix(in srgb,var(--b) 60%,transparent);background:var(--s);padding:11px 14px;text-align:left;color:var(--t);font:inherit;cursor:pointer}.menu button:last-child{border-bottom:0}.menu button:hover{background:color-mix(in srgb,var(--a) 7%,var(--s))}.menu strong{font-weight:720}.menu small{color:var(--m);font-size:12px}.status{padding:11px 14px;color:var(--m);font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillComboBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mindbill-combo-box", standalone: true, imports: [CommonModule], template: `
+    <div class="combo">
+      <input
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        [attr.aria-label]="ariaLabel"
+        [attr.aria-invalid]="invalid || null"
+        [attr.aria-expanded]="showMenu"
+        [disabled]="disabled"
+        [placeholder]="placeholder"
+        [value]="open ? query : value"
+        (focus)="onFocus()"
+        (click)="onFocus()"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+      />
+      @if (showMenu) {
+        <div class="menu" role="listbox" (scroll)="onScroll($event)">
+          @if (loading && !visible.length) { <div class="status">Loading…</div> }
+          @else if (visible.length) {
+            @for (option of visible; track option.id) {
+              <button type="button" role="option" (mousedown)="$event.preventDefault()" (click)="choose(option)">
+                <strong>{{ option.label }}</strong>
+                @if (option.detail) { <small>{{ option.detail }}</small> }
+              </button>
+            }
+          } @else { <div class="status">No matches</div> }
+          @if (loadingMore) { <div class="status">Loading more…</div> }
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block}.combo{position:relative}input{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}input[aria-invalid=true]{border-color:#c83c3c}.menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;max-height:320px;overflow:auto;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);box-shadow:0 14px 35px #172b3730}.menu button{display:grid;width:100%;gap:3px;border:0;border-bottom:1px solid color-mix(in srgb,var(--b) 60%,transparent);background:var(--s);padding:11px 14px;text-align:left;color:var(--t);font:inherit;cursor:pointer}.menu button:last-child{border-bottom:0}.menu button:hover{background:color-mix(in srgb,var(--a) 7%,var(--s))}.menu strong{font-weight:720}.menu small{color:var(--m);font-size:12px}.status{padding:11px 14px;color:var(--m);font-size:13px}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], loadingMore: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], preserveValueOnOpen: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], createOption: [{
+                type: Input
+            }], opened: [{
+                type: Output
+            }], queryChange: [{
+                type: Output
+            }], endReached: [{
+                type: Output
+            }], selected: [{
+                type: Output
+            }] } });
+/** MM/DD/YYYY masked date input. Emits only parseable ISO dates (or "" when
+ * cleared) and reformats the display once a complete date round-trips, exactly
+ * like the React package's TextDateInput. */
+class MindBillDateInputComponent {
+    value;
+    disabled = false;
+    ariaLabel = "";
+    valueChange = new EventEmitter();
+    display = "";
+    invalid = false;
+    ngOnChanges(changes) {
+        if (changes["value"]) {
+            this.display = formatMindBillSubmissionDate(this.value);
+            this.invalid = false;
         }
     }
-    ngOnDestroy() { this.store.disconnect(); }
-    get themeStyle() {
-        return mindBillAngularAppearanceStyle(this.appearance);
+    onInput(event) {
+        const next = event.target.value;
+        const parsed = parseMindBillSubmissionDate(next);
+        this.display = next;
+        this.invalid = Boolean(next && !parsed);
+        if (!next.trim())
+            this.valueChange.emit("");
+        else if (parsed)
+            this.valueChange.emit(parsed);
     }
-    stateLabel(data) { return data.lifecycle.state.replace(/_/g, " ").replace(/\b\w/g, (value) => value.toUpperCase()); }
-    lifecycleDetail(data) { return data.lifecycle.submittedAt ? `Submitted ${new Date(data.lifecycle.submittedAt).toLocaleDateString()}${data.lifecycle.agingDays != null ? ` · ${data.lifecycle.agingDays} days old` : ""}` : "Submitted bill"; }
-    currentStageIndex(data) { const value = data.lifecycle.state.toLowerCase(); if (value.includes("closed") || value.includes("written_off"))
-        return 4; if (value.includes("second_review") || value.includes("ibr") || value.includes("lien") || value.includes("appeal"))
-        return 3; if (value.includes("processed") || value.includes("paid") || value.includes("denied") || value.includes("rejected") || value.includes("response"))
-        return 2; if (value.includes("accepted"))
-        return 1; return 0; }
-    activityLabel(type) { return type.replace(/[._-]+/g, " ").replace(/\b\w/g, (value) => value.toUpperCase()); }
-    historyExpanded = new Set();
-    toggleHistory(id) { if (this.historyExpanded.has(id))
-        this.historyExpanded.delete(id);
-    else
-        this.historyExpanded.add(id); }
-    isHistoryOpen(id) { return this.historyExpanded.has(id); }
-    historyDate(iso) { const parsed = new Date(iso); return Number.isNaN(parsed.getTime()) ? iso : parsed.toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" }); }
-    payerContact(data) { const contacts = data.delivery.contacts; return contacts.adjusterName || contacts.adjusterPhone || contacts.adjusterEmail || contacts.claimsEmail || contacts.faxNumber || contacts.mailingAddress || "No payer contact details are available."; }
-    beginAction(action, data) { if (action === "post_payment")
-        this.panel = "payment";
-    else if (action === "second_review" || action === "independent_bill_review")
-        this.panel = "review";
-    else if (action === "close")
-        this.panel = "close";
-    else if (action === "view_eor" && data.eors[0])
-        void this.openEor(data.eors[0].id, data.eors[0].filename); }
-    async openAttachment(id, filename) { this.openBlob(await this.store.getAttachment(id), filename); }
-    async openEor(id, filename) { this.openBlob(await this.store.getEor(id), filename); }
-    async postPayment() { await this.store.postPayment(this.payment); this.panel = ""; this.notice = "Payment posted."; }
-    async submitReview() { await this.store.submitSecondReview({ ...this.review, disputedAmount: this.review.disputedAmount > 0 ? this.review.disputedAmount : undefined, attachmentIds: this.store.data()?.bill.attachments.map((document) => document.id) ?? [], route: "ebill" }); this.panel = ""; this.notice = "Second Review submitted."; }
-    async closeBill() { if (!this.closeReason.trim())
-        return; await this.store.closeBill({ reason: this.closeReason }); this.panel = ""; this.notice = "Bill closed."; }
-    openBlob(blob, filename) { const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.target = "_blank"; link.rel = "noopener"; link.download = filename; link.click(); setTimeout(() => URL.revokeObjectURL(url), 60_000); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillLifecycleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillLifecycleComponent, isStandalone: true, selector: "mindbill-bill-lifecycle", inputs: { billId: "billId", sessionEndpoint: "sessionEndpoint", apiBaseUrl: "apiBaseUrl", getSession: "getSession", refreshInterval: "refreshInterval", appearance: "appearance" }, outputs: { billingError: "billingError" }, usesOnChanges: true, ngImport: i0, template: `
-    <section class="mb" [ngStyle]="themeStyle">
-      @if (!billId) {
-        <div class="state error"><strong>A submitted bill ID is required.</strong></div>
-      } @else if (store.loading() && !store.data()) {
-        <div class="state">Loading billing…</div>
-      } @else if (store.error() && !store.data()) {
-        <div class="state error"><strong>Billing is temporarily unavailable</strong><span>{{ store.error()?.message }}</span><button type="button" (click)="store.refresh()">Try again</button></div>
-      } @else if (store.data(); as data) {
-        <header class="summary">
-          <div><span class="eyebrow">Bill {{ data.bill.billNumber }}</span><h2>{{ stateLabel(data) }}</h2><p>{{ lifecycleDetail(data) }}</p></div>
-          <div class="money"><span>{{ data.bill.balanceDue | currency }}</span><small>balance</small></div>
-        </header>
-
-        @if (data.lifecycle.state.toLowerCase() === 'rejected' && data.rejection) {
-          <mindbill-bill-rejection-notice
-            class="rejection"
-            [rejection]="data.rejection"
-            [submittedAt]="data.lifecycle.submittedAt ?? null"
-            [appearance]="appearance"
-          />
-        } @else {
-          <section class="card progress" aria-label="Bill lifecycle">
-            <ol>@for (stage of lifecycleStages; track stage.id; let i=$index) { <li [class.complete]="i < currentStageIndex(data)" [class.current]="i === currentStageIndex(data)"><b>{{ i < currentStageIndex(data) ? '✓' : i + 1 }}</b><span>{{ stage.label }}</span></li> }</ol>
-          </section>
-        }
-
-        <section class="card snapshot" aria-label="Bill snapshot">
-          <div class="card-title"><div><h3>Bill snapshot</h3><p>The immutable values submitted to the payer.</p></div></div>
-          <dl><div><dt>Patient</dt><dd>{{ data.patient.name }}</dd></div><div><dt>Claim</dt><dd>{{ data.injury.claimNumber || '—' }}</dd></div><div><dt>Payer</dt><dd>{{ data.delivery.payerName || data.injury.claimsAdminName || '—' }}</dd></div><div><dt>Date of service</dt><dd>{{ data.bill.dos || '—' }}</dd></div><div><dt>Charged</dt><dd>{{ data.bill.totalCharge | currency }}</dd></div><div><dt>Balance</dt><dd>{{ data.bill.balanceDue | currency }}</dd></div></dl>
-        </section>
-
-        <div class="columns">
-          <section class="card"><div class="card-title"><div><h3>Remittance</h3><p>Amounts reported by the payer and posted to this bill.</p></div></div><dl><div><dt>Billed</dt><dd>{{ data.remittance.billedAmount | currency }}</dd></div><div><dt>Payer reported</dt><dd>{{ data.remittance.payerReportedPaid == null ? '—' : (data.remittance.payerReportedPaid | currency) }}</dd></div><div><dt>Principal posted</dt><dd>{{ data.remittance.postedPrincipal | currency }}</dd></div><div><dt>Penalty &amp; interest</dt><dd>{{ data.remittance.postedAdditional | currency }}</dd></div><div><dt>Total received</dt><dd>{{ data.remittance.totalPostedCash | currency }}</dd></div><div><dt>Balance</dt><dd>{{ data.remittance.balanceDue | currency }}</dd></div></dl></section>
-          <section class="card"><div class="card-title"><div><h3>{{ data.delivery.payerName || 'Payer' }}</h3><p>Billing and follow-up contacts.</p></div></div><p class="muted">{{ payerContact(data) }}</p></section>
-        </div>
-
-        <section class="card"><div class="card-title"><div><h3>Documents</h3><p>Documents preserved with the submitted bill.</p></div><span>{{ data.bill.attachments.length }}</span></div>@if (data.bill.attachments.length) { <ul class="rows">@for (doc of data.bill.attachments; track doc.id) { <li><div><strong>{{ doc.filename }}</strong><small>{{ doc.description || doc.documentType }}</small></div><button type="button" (click)="openAttachment(doc.id, doc.filename)">View</button></li> }</ul> } @else { <p class="muted">No documents available.</p> }</section>
-
-        <section class="card"><div class="card-title"><div><h3>Payments</h3><p>Payments posted to this bill.</p></div><span>{{ data.payments.length }}</span></div>@if (data.payments.length) { <ul class="rows">@for (payment of data.payments; track payment.id) { <li><div><strong>{{ payment.amount | currency }}</strong><small>{{ payment.method | uppercase }} · {{ payment.depositDate || payment.postedAt }}</small></div></li> }</ul> } @else { <p class="muted">No payments posted.</p> }</section>
-
-        <section class="card"><div class="card-title"><div><h3>Bill history</h3><p>Submissions, payer responses, follow-up, and payments.</p></div><span>{{ data.history?.length ?? data.activity.length }}</span></div>
-          @if (data.history?.length) {
-            <!-- daisyBill-style Date/Action/User/Details table: submissions are pale-blue
-                 expandable rows (documents + compliance due dates), notes pale-yellow,
-                 277 responses expand into decoded status-code sentences. Rows arrive
-                 pre-worded from the MindBill API (BillLifecycleData.history). -->
-            <div class="history">
-              <div class="history-head" aria-hidden="true"><span>Date</span><span>Action</span><span>User</span><span>Details</span></div>
-              <ul class="history-rows">
-                @for (entry of data.history; track entry.id) {
-                  <li [class.is-submission]="entry.tone === 'submission'" [class.is-note]="entry.tone === 'note'" [class.is-problem]="entry.tone === 'problem'">
-                    <button type="button" class="history-line" [disabled]="!entry.details" [attr.aria-expanded]="entry.details ? isHistoryOpen(entry.id) : null" (click)="toggleHistory(entry.id)">
-                      <span class="h-date">{{ historyDate(entry.date) }}</span>
-                      <span class="h-action">{{ entry.action }}</span>
-                      <span class="h-actor">{{ entry.actor || '—' }}</span>
-                      <span class="h-summary">@if (entry.details) { <i [class.open]="isHistoryOpen(entry.id)" aria-hidden="true"></i> }{{ entry.summary }}</span>
-                    </button>
-                    @if (entry.details; as details) {
-                      @if (isHistoryOpen(entry.id)) {
-                        <div class="history-details">
-                          @if (details.rows?.length) { <dl class="h-kv">@for (row of details.rows ?? []; track row.label) { <div><dt>{{ row.label }}</dt><dd>{{ row.value }}</dd></div> }</dl> }
-                          @if (details.documents?.length) { <dl class="h-kv"><div><dt>Documents</dt><dd>@for (doc of details.documents ?? []; track doc.id) { <span class="h-doc">{{ doc.filename }}</span> }</dd></div></dl> }
-                          @if (details.codes?.length) { <dl class="h-codes">@for (code of details.codes ?? []; track code.code) { <div><dt>{{ code.code }}</dt><dd>{{ code.text }}</dd></div> }</dl> }
-                          @if (details.complianceDueDates?.length) { <div class="h-due"><em>Compliance Due Dates</em><dl>@for (due of details.complianceDueDates ?? []; track due.text) { <div><dt>{{ historyDate(due.date) }}</dt><dd>{{ due.text }}</dd></div> }</dl></div> }
-                          @if (details.text) { <p class="h-text">{{ details.text }}</p> }
-                        </div>
-                      }
-                    }
-                  </li>
-                }
-              </ul>
-            </div>
-          } @else {
-            <ul class="timeline">@for (event of data.activity; track event.id) { <li><i></i><div><strong>{{ activityLabel(event.type) }}</strong><p>{{ event.description }}</p><small>{{ event.createdAt | date:'medium' }}</small></div></li> }</ul>
-          }
-        </section>
-
-        @if (notice) { <p class="notice">{{ notice }}</p> }
-        <div class="actions">@for (action of data.lifecycle.actions; track action.id) { @if (action.id !== 'view_eor' || data.eors.length) { <button type="button" [class.primary]="action.primary" [disabled]="!action.enabled || store.mutating()" (click)="beginAction(action.id, data)">{{ action.label }}</button> } }</div>
-
-        @if (panel === 'payment') { <form class="card action-form" (submit)="$event.preventDefault(); postPayment()"><h3>Post payment</h3><label>Amount<input required type="number" min="0.01" step="0.01" [(ngModel)]="payment.amount" name="amount"></label><label>Method<select [(ngModel)]="payment.method" name="method"><option value="check">Check</option><option value="eft">EFT</option></select></label><label>Deposit date<input required type="date" [(ngModel)]="payment.depositDate" name="depositDate"></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Post payment</button></div></form> }
-        @if (panel === 'review') { <form class="card action-form" (submit)="$event.preventDefault(); submitReview()"><h3>Submit Second Bill Review</h3><label>Reason<textarea required [(ngModel)]="review.reason" name="reason"></textarea></label><label>Payer claim control number<input required [(ngModel)]="review.payerClaimControlNumber" name="control"></label><label>Disputed amount<input type="number" min="0" step="0.01" [(ngModel)]="review.disputedAmount" name="disputed"></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Submit review</button></div></form> }
-        @if (panel === 'close') { <form class="card action-form" (submit)="$event.preventDefault(); closeBill()"><h3>Close bill</h3><label>Reason<textarea required [(ngModel)]="closeReason" name="closeReason"></textarea></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Close bill</button></div></form> }
-      }
-    </section>
-  `, isInline: true, styles: [":host{display:block}.mb{font-family:var(--font);color:var(--t);background:var(--bg);padding:20px}.summary,.card,.columns,.rejection{display:block;max-width:1120px;margin:0 auto 16px}.summary{display:flex;justify-content:space-between;align-items:end}.summary h2{margin:4px 0}.summary p,.muted{color:var(--m)}.eyebrow,dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m)}.money{text-align:right}.money span{display:block;font-size:28px;font-weight:800}.money small{color:var(--m)}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:20px}.card-title{display:flex;justify-content:space-between;gap:20px}.card-title h3{margin:0}.card-title p{margin:5px 0;color:var(--m)}.progress ol{display:flex;list-style:none;padding:0;margin:0}.progress li{flex:1;text-align:center;position:relative;color:var(--m)}.progress li:before{content:\"\";position:absolute;top:16px;left:0;right:0;border-top:2px solid var(--b)}.progress li:first-child:before{left:50%}.progress li:last-child:before{right:50%}.progress b{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;margin:auto;border:2px solid var(--b);border-radius:50%;background:var(--s)}.progress .complete b,.progress .current b{border-color:var(--a);background:var(--a);color:var(--ac)}.progress span{display:block;margin-top:8px;font-size:12px;font-weight:700}.snapshot dl,.columns dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.snapshot dd,.columns dd{font-weight:700;margin:6px 0}.columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.columns .card{margin:0}.rows,.timeline{list-style:none;margin:12px 0 0;padding:0}.rows li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--b)}.rows small{display:block;color:var(--m);margin-top:3px}.timeline li{display:flex;gap:14px;padding:10px 0}.timeline i{width:10px;height:10px;margin-top:5px;border:3px solid var(--a);border-radius:50%}.timeline p{margin:4px 0}.timeline small{color:var(--m)}button,input,select,textarea{font:inherit;border:1px solid var(--b);border-radius:var(--cr);padding:9px 12px;background:var(--s);color:var(--t)}button{cursor:pointer;font-weight:700}.primary{background:var(--a);border-color:var(--a);color:var(--ac)}.actions{max-width:1120px;margin:0 auto;display:flex;justify-content:flex-end;gap:10px}.action-form{display:grid;gap:12px}.action-form label{display:grid;gap:5px;font-weight:700}.action-form div{display:flex;justify-content:flex-end;gap:10px}.state{max-width:720px;margin:auto;padding:32px;text-align:center}.state span{display:block;margin:8px}.error{color:#9b1c1c}.notice{max-width:1120px;margin:0 auto 12px;color:var(--m)}@media(max-width:760px){.mb{padding:12px}.summary,.columns{display:block}.money{text-align:left;margin-top:12px}.columns .card{margin-bottom:12px}.snapshot dl,.columns dl{grid-template-columns:1fr 1fr}.progress span{font-size:10px}.card{padding:15px}}.history{border:1px solid var(--b);border-radius:10px;overflow:hidden;margin-top:12px}.history-head{display:grid;grid-template-columns:96px 150px 130px minmax(0,1fr);gap:12px;padding:8px 14px;background:color-mix(in srgb,var(--b) 26%,var(--s));color:var(--m);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.history-rows{list-style:none;margin:0;padding:0}.history-rows>li{border-top:1px solid var(--b)}.history-rows>li.is-submission{background:color-mix(in srgb,var(--a) 9%,var(--s))}.history-rows>li.is-note{background:color-mix(in srgb,#f2c344 13%,var(--s))}.history-line{display:grid;grid-template-columns:96px 150px 130px minmax(0,1fr);gap:12px;width:100%;padding:10px 14px;border:0;border-radius:0;background:transparent;text-align:left;font-weight:400;cursor:default}.history-line:not(:disabled){cursor:pointer}.history-line:not(:disabled):hover .h-summary{text-decoration:underline}.h-date,.h-actor{color:var(--m);font-size:13px;overflow-wrap:anywhere}.h-action{font-weight:700;font-size:13.5px}.is-problem .h-action{color:#9b1c1c}.h-summary{display:flex;gap:7px;min-width:0;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}.h-summary i{flex:0 0 auto;margin-top:5px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--m);border-radius:0;transition:transform .12s ease}.h-summary i.open{transform:rotate(90deg)}.history-details{padding:4px 14px 14px 122px;font-size:13.5px;line-height:1.5}.h-kv,.h-codes,.h-due dl{display:grid;gap:4px;margin:0}.h-kv>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);padding-top:4px}.h-kv dt,.h-codes dt,.h-due dt{font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--t)}.h-kv dd,.h-codes dd,.h-due dd{margin:0;overflow-wrap:anywhere}.h-doc{display:block}.h-codes>div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px}.h-codes dt{font-weight:800}.h-due{margin-top:8px}.h-due em{display:block;color:var(--m);font-size:12.5px;margin-bottom:4px}.h-due dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);padding-top:4px}.h-text{margin:8px 0 0;white-space:pre-wrap}@media(max-width:760px){.history-head{display:none}.history-line{grid-template-columns:1fr;gap:2px;padding:10px 12px}.history-details{padding:4px 12px 12px}.h-kv>div,.h-due dl>div{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MindBillBillRejectionNoticeComponent, selector: "mindbill-bill-rejection-notice", inputs: ["rejection", "submittedAt", "title", "appearance"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    onBlur() {
+        this.invalid = Boolean(this.display && !parseMindBillSubmissionDate(this.display));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillDateInputComponent, isStandalone: true, selector: "mindbill-date-input", inputs: { value: "value", disabled: "disabled", ariaLabel: "ariaLabel" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
+    <input
+      type="text"
+      inputmode="numeric"
+      autocomplete="off"
+      placeholder="MM/DD/YYYY"
+      [attr.aria-label]="ariaLabel"
+      [attr.aria-invalid]="invalid || null"
+      [disabled]="disabled"
+      [value]="display"
+      (input)="onInput($event)"
+      (blur)="onBlur()"
+    />
+    @if (invalid) { <small>Use MM/DD/YYYY</small> }
+  `, isInline: true, styles: [":host{display:block}input{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}input[aria-invalid=true]{border-color:#c83c3c}small{display:block;margin-top:6px;color:#c83c3c;font-weight:450}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillLifecycleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillDateInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mindbill-bill-lifecycle", standalone: true, imports: [CommonModule, FormsModule, MindBillBillRejectionNoticeComponent], template: `
-    <section class="mb" [ngStyle]="themeStyle">
-      @if (!billId) {
-        <div class="state error"><strong>A submitted bill ID is required.</strong></div>
-      } @else if (store.loading() && !store.data()) {
-        <div class="state">Loading billing…</div>
-      } @else if (store.error() && !store.data()) {
-        <div class="state error"><strong>Billing is temporarily unavailable</strong><span>{{ store.error()?.message }}</span><button type="button" (click)="store.refresh()">Try again</button></div>
-      } @else if (store.data(); as data) {
-        <header class="summary">
-          <div><span class="eyebrow">Bill {{ data.bill.billNumber }}</span><h2>{{ stateLabel(data) }}</h2><p>{{ lifecycleDetail(data) }}</p></div>
-          <div class="money"><span>{{ data.bill.balanceDue | currency }}</span><small>balance</small></div>
-        </header>
-
-        @if (data.lifecycle.state.toLowerCase() === 'rejected' && data.rejection) {
-          <mindbill-bill-rejection-notice
-            class="rejection"
-            [rejection]="data.rejection"
-            [submittedAt]="data.lifecycle.submittedAt ?? null"
-            [appearance]="appearance"
-          />
-        } @else {
-          <section class="card progress" aria-label="Bill lifecycle">
-            <ol>@for (stage of lifecycleStages; track stage.id; let i=$index) { <li [class.complete]="i < currentStageIndex(data)" [class.current]="i === currentStageIndex(data)"><b>{{ i < currentStageIndex(data) ? '✓' : i + 1 }}</b><span>{{ stage.label }}</span></li> }</ol>
-          </section>
-        }
-
-        <section class="card snapshot" aria-label="Bill snapshot">
-          <div class="card-title"><div><h3>Bill snapshot</h3><p>The immutable values submitted to the payer.</p></div></div>
-          <dl><div><dt>Patient</dt><dd>{{ data.patient.name }}</dd></div><div><dt>Claim</dt><dd>{{ data.injury.claimNumber || '—' }}</dd></div><div><dt>Payer</dt><dd>{{ data.delivery.payerName || data.injury.claimsAdminName || '—' }}</dd></div><div><dt>Date of service</dt><dd>{{ data.bill.dos || '—' }}</dd></div><div><dt>Charged</dt><dd>{{ data.bill.totalCharge | currency }}</dd></div><div><dt>Balance</dt><dd>{{ data.bill.balanceDue | currency }}</dd></div></dl>
-        </section>
-
-        <div class="columns">
-          <section class="card"><div class="card-title"><div><h3>Remittance</h3><p>Amounts reported by the payer and posted to this bill.</p></div></div><dl><div><dt>Billed</dt><dd>{{ data.remittance.billedAmount | currency }}</dd></div><div><dt>Payer reported</dt><dd>{{ data.remittance.payerReportedPaid == null ? '—' : (data.remittance.payerReportedPaid | currency) }}</dd></div><div><dt>Principal posted</dt><dd>{{ data.remittance.postedPrincipal | currency }}</dd></div><div><dt>Penalty &amp; interest</dt><dd>{{ data.remittance.postedAdditional | currency }}</dd></div><div><dt>Total received</dt><dd>{{ data.remittance.totalPostedCash | currency }}</dd></div><div><dt>Balance</dt><dd>{{ data.remittance.balanceDue | currency }}</dd></div></dl></section>
-          <section class="card"><div class="card-title"><div><h3>{{ data.delivery.payerName || 'Payer' }}</h3><p>Billing and follow-up contacts.</p></div></div><p class="muted">{{ payerContact(data) }}</p></section>
-        </div>
-
-        <section class="card"><div class="card-title"><div><h3>Documents</h3><p>Documents preserved with the submitted bill.</p></div><span>{{ data.bill.attachments.length }}</span></div>@if (data.bill.attachments.length) { <ul class="rows">@for (doc of data.bill.attachments; track doc.id) { <li><div><strong>{{ doc.filename }}</strong><small>{{ doc.description || doc.documentType }}</small></div><button type="button" (click)="openAttachment(doc.id, doc.filename)">View</button></li> }</ul> } @else { <p class="muted">No documents available.</p> }</section>
-
-        <section class="card"><div class="card-title"><div><h3>Payments</h3><p>Payments posted to this bill.</p></div><span>{{ data.payments.length }}</span></div>@if (data.payments.length) { <ul class="rows">@for (payment of data.payments; track payment.id) { <li><div><strong>{{ payment.amount | currency }}</strong><small>{{ payment.method | uppercase }} · {{ payment.depositDate || payment.postedAt }}</small></div></li> }</ul> } @else { <p class="muted">No payments posted.</p> }</section>
-
-        <section class="card"><div class="card-title"><div><h3>Bill history</h3><p>Submissions, payer responses, follow-up, and payments.</p></div><span>{{ data.history?.length ?? data.activity.length }}</span></div>
-          @if (data.history?.length) {
-            <!-- daisyBill-style Date/Action/User/Details table: submissions are pale-blue
-                 expandable rows (documents + compliance due dates), notes pale-yellow,
-                 277 responses expand into decoded status-code sentences. Rows arrive
-                 pre-worded from the MindBill API (BillLifecycleData.history). -->
-            <div class="history">
-              <div class="history-head" aria-hidden="true"><span>Date</span><span>Action</span><span>User</span><span>Details</span></div>
-              <ul class="history-rows">
-                @for (entry of data.history; track entry.id) {
-                  <li [class.is-submission]="entry.tone === 'submission'" [class.is-note]="entry.tone === 'note'" [class.is-problem]="entry.tone === 'problem'">
-                    <button type="button" class="history-line" [disabled]="!entry.details" [attr.aria-expanded]="entry.details ? isHistoryOpen(entry.id) : null" (click)="toggleHistory(entry.id)">
-                      <span class="h-date">{{ historyDate(entry.date) }}</span>
-                      <span class="h-action">{{ entry.action }}</span>
-                      <span class="h-actor">{{ entry.actor || '—' }}</span>
-                      <span class="h-summary">@if (entry.details) { <i [class.open]="isHistoryOpen(entry.id)" aria-hidden="true"></i> }{{ entry.summary }}</span>
-                    </button>
-                    @if (entry.details; as details) {
-                      @if (isHistoryOpen(entry.id)) {
-                        <div class="history-details">
-                          @if (details.rows?.length) { <dl class="h-kv">@for (row of details.rows ?? []; track row.label) { <div><dt>{{ row.label }}</dt><dd>{{ row.value }}</dd></div> }</dl> }
-                          @if (details.documents?.length) { <dl class="h-kv"><div><dt>Documents</dt><dd>@for (doc of details.documents ?? []; track doc.id) { <span class="h-doc">{{ doc.filename }}</span> }</dd></div></dl> }
-                          @if (details.codes?.length) { <dl class="h-codes">@for (code of details.codes ?? []; track code.code) { <div><dt>{{ code.code }}</dt><dd>{{ code.text }}</dd></div> }</dl> }
-                          @if (details.complianceDueDates?.length) { <div class="h-due"><em>Compliance Due Dates</em><dl>@for (due of details.complianceDueDates ?? []; track due.text) { <div><dt>{{ historyDate(due.date) }}</dt><dd>{{ due.text }}</dd></div> }</dl></div> }
-                          @if (details.text) { <p class="h-text">{{ details.text }}</p> }
-                        </div>
-                      }
-                    }
-                  </li>
-                }
-              </ul>
-            </div>
-          } @else {
-            <ul class="timeline">@for (event of data.activity; track event.id) { <li><i></i><div><strong>{{ activityLabel(event.type) }}</strong><p>{{ event.description }}</p><small>{{ event.createdAt | date:'medium' }}</small></div></li> }</ul>
-          }
-        </section>
-
-        @if (notice) { <p class="notice">{{ notice }}</p> }
-        <div class="actions">@for (action of data.lifecycle.actions; track action.id) { @if (action.id !== 'view_eor' || data.eors.length) { <button type="button" [class.primary]="action.primary" [disabled]="!action.enabled || store.mutating()" (click)="beginAction(action.id, data)">{{ action.label }}</button> } }</div>
-
-        @if (panel === 'payment') { <form class="card action-form" (submit)="$event.preventDefault(); postPayment()"><h3>Post payment</h3><label>Amount<input required type="number" min="0.01" step="0.01" [(ngModel)]="payment.amount" name="amount"></label><label>Method<select [(ngModel)]="payment.method" name="method"><option value="check">Check</option><option value="eft">EFT</option></select></label><label>Deposit date<input required type="date" [(ngModel)]="payment.depositDate" name="depositDate"></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Post payment</button></div></form> }
-        @if (panel === 'review') { <form class="card action-form" (submit)="$event.preventDefault(); submitReview()"><h3>Submit Second Bill Review</h3><label>Reason<textarea required [(ngModel)]="review.reason" name="reason"></textarea></label><label>Payer claim control number<input required [(ngModel)]="review.payerClaimControlNumber" name="control"></label><label>Disputed amount<input type="number" min="0" step="0.01" [(ngModel)]="review.disputedAmount" name="disputed"></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Submit review</button></div></form> }
-        @if (panel === 'close') { <form class="card action-form" (submit)="$event.preventDefault(); closeBill()"><h3>Close bill</h3><label>Reason<textarea required [(ngModel)]="closeReason" name="closeReason"></textarea></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Close bill</button></div></form> }
-      }
-    </section>
-  `, styles: [":host{display:block}.mb{font-family:var(--font);color:var(--t);background:var(--bg);padding:20px}.summary,.card,.columns,.rejection{display:block;max-width:1120px;margin:0 auto 16px}.summary{display:flex;justify-content:space-between;align-items:end}.summary h2{margin:4px 0}.summary p,.muted{color:var(--m)}.eyebrow,dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m)}.money{text-align:right}.money span{display:block;font-size:28px;font-weight:800}.money small{color:var(--m)}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:20px}.card-title{display:flex;justify-content:space-between;gap:20px}.card-title h3{margin:0}.card-title p{margin:5px 0;color:var(--m)}.progress ol{display:flex;list-style:none;padding:0;margin:0}.progress li{flex:1;text-align:center;position:relative;color:var(--m)}.progress li:before{content:\"\";position:absolute;top:16px;left:0;right:0;border-top:2px solid var(--b)}.progress li:first-child:before{left:50%}.progress li:last-child:before{right:50%}.progress b{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;margin:auto;border:2px solid var(--b);border-radius:50%;background:var(--s)}.progress .complete b,.progress .current b{border-color:var(--a);background:var(--a);color:var(--ac)}.progress span{display:block;margin-top:8px;font-size:12px;font-weight:700}.snapshot dl,.columns dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.snapshot dd,.columns dd{font-weight:700;margin:6px 0}.columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.columns .card{margin:0}.rows,.timeline{list-style:none;margin:12px 0 0;padding:0}.rows li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--b)}.rows small{display:block;color:var(--m);margin-top:3px}.timeline li{display:flex;gap:14px;padding:10px 0}.timeline i{width:10px;height:10px;margin-top:5px;border:3px solid var(--a);border-radius:50%}.timeline p{margin:4px 0}.timeline small{color:var(--m)}button,input,select,textarea{font:inherit;border:1px solid var(--b);border-radius:var(--cr);padding:9px 12px;background:var(--s);color:var(--t)}button{cursor:pointer;font-weight:700}.primary{background:var(--a);border-color:var(--a);color:var(--ac)}.actions{max-width:1120px;margin:0 auto;display:flex;justify-content:flex-end;gap:10px}.action-form{display:grid;gap:12px}.action-form label{display:grid;gap:5px;font-weight:700}.action-form div{display:flex;justify-content:flex-end;gap:10px}.state{max-width:720px;margin:auto;padding:32px;text-align:center}.state span{display:block;margin:8px}.error{color:#9b1c1c}.notice{max-width:1120px;margin:0 auto 12px;color:var(--m)}@media(max-width:760px){.mb{padding:12px}.summary,.columns{display:block}.money{text-align:left;margin-top:12px}.columns .card{margin-bottom:12px}.snapshot dl,.columns dl{grid-template-columns:1fr 1fr}.progress span{font-size:10px}.card{padding:15px}}.history{border:1px solid var(--b);border-radius:10px;overflow:hidden;margin-top:12px}.history-head{display:grid;grid-template-columns:96px 150px 130px minmax(0,1fr);gap:12px;padding:8px 14px;background:color-mix(in srgb,var(--b) 26%,var(--s));color:var(--m);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.history-rows{list-style:none;margin:0;padding:0}.history-rows>li{border-top:1px solid var(--b)}.history-rows>li.is-submission{background:color-mix(in srgb,var(--a) 9%,var(--s))}.history-rows>li.is-note{background:color-mix(in srgb,#f2c344 13%,var(--s))}.history-line{display:grid;grid-template-columns:96px 150px 130px minmax(0,1fr);gap:12px;width:100%;padding:10px 14px;border:0;border-radius:0;background:transparent;text-align:left;font-weight:400;cursor:default}.history-line:not(:disabled){cursor:pointer}.history-line:not(:disabled):hover .h-summary{text-decoration:underline}.h-date,.h-actor{color:var(--m);font-size:13px;overflow-wrap:anywhere}.h-action{font-weight:700;font-size:13.5px}.is-problem .h-action{color:#9b1c1c}.h-summary{display:flex;gap:7px;min-width:0;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}.h-summary i{flex:0 0 auto;margin-top:5px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--m);border-radius:0;transition:transform .12s ease}.h-summary i.open{transform:rotate(90deg)}.history-details{padding:4px 14px 14px 122px;font-size:13.5px;line-height:1.5}.h-kv,.h-codes,.h-due dl{display:grid;gap:4px;margin:0}.h-kv>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);padding-top:4px}.h-kv dt,.h-codes dt,.h-due dt{font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--t)}.h-kv dd,.h-codes dd,.h-due dd{margin:0;overflow-wrap:anywhere}.h-doc{display:block}.h-codes>div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px}.h-codes dt{font-weight:800}.h-due{margin-top:8px}.h-due em{display:block;color:var(--m);font-size:12.5px;margin-bottom:4px}.h-due dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);padding-top:4px}.h-text{margin:8px 0 0;white-space:pre-wrap}@media(max-width:760px){.history-head{display:none}.history-line{grid-template-columns:1fr;gap:2px;padding:10px 12px}.history-details{padding:4px 12px 12px}.h-kv>div,.h-due dl>div{grid-template-columns:1fr}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { billId: [{
-                type: Input
-            }], sessionEndpoint: [{
-                type: Input
-            }], apiBaseUrl: [{
-                type: Input
-            }], getSession: [{
+            args: [{ selector: "mindbill-date-input", standalone: true, imports: [CommonModule], template: `
+    <input
+      type="text"
+      inputmode="numeric"
+      autocomplete="off"
+      placeholder="MM/DD/YYYY"
+      [attr.aria-label]="ariaLabel"
+      [attr.aria-invalid]="invalid || null"
+      [disabled]="disabled"
+      [value]="display"
+      (input)="onInput($event)"
+      (blur)="onBlur()"
+    />
+    @if (invalid) { <small>Use MM/DD/YYYY</small> }
+  `, styles: [":host{display:block}input{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}input[aria-invalid=true]{border-color:#c83c3c}small{display:block;margin-top:6px;color:#c83c3c;font-weight:450}\n"] }]
+        }], propDecorators: { value: [{
                 type: Input
-            }], refreshInterval: [{
+            }], disabled: [{
                 type: Input
-            }], appearance: [{
+            }], ariaLabel: [{
                 type: Input
-            }], billingError: [{
+            }], valueChange: [{
                 type: Output
             }] } });
 
-const EMPTY_PROCEDURE_LINE = {
-    code: "",
-    modifiers: [],
-    units: 1,
-    charge: 0,
-};
-function isEmptyProcedureLine(line) {
-    return !line.code.trim()
-        && line.modifiers.length === 0
-        && line.units === 1
-        && !line.serviceDate
-        && !line.serviceDateEnd
-        && !(line.diagnosisPointers?.length)
-        && !line.charge;
-}
-/** Keeps completed/partial lines plus one keyboard-ready empty row. */
-function ensureTrailingProcedureLine(lines) {
-    const entered = lines
-        .filter((line) => !isEmptyProcedureLine(line))
-        .map((line) => ({ ...line, modifiers: [...line.modifiers] }));
-    return entered.length < 50
-        ? [...entered, { ...EMPTY_PROCEDURE_LINE, modifiers: [] }]
-        : entered;
-}
-
+const MAX_PDF_BYTES = 25 * 1024 * 1024;
+const MAX_UPLOAD_BYTES = 100 * 1024 * 1024;
+const MAX_DOCUMENTS = 20;
+const PROCEDURES = [
+    { code: "ML200", description: "Missed appointment for a medical-legal evaluation", allowedAmount: 503.75 },
+    { code: "ML201", description: "Comprehensive medical-legal evaluation", allowedAmount: 2015 },
+    { code: "ML202", description: "Follow-up medical-legal evaluation", allowedAmount: 1316.25 },
+    { code: "ML203", description: "Supplemental medical-legal evaluation", allowedAmount: 650 },
+    { code: "ML204", description: "Medical-legal testimony", allowedAmount: 113.75 },
+    { code: "ML205", description: "Review of sub rosa recordings", allowedAmount: 81.25 },
+    { code: "MLPRR", description: "Medical-legal record review", allowedAmount: 3 },
+    { code: "90791", description: "Psychiatric diagnostic evaluation" },
+    { code: "90792", description: "Psychiatric diagnostic evaluation with medical services" },
+    { code: "90832", description: "Psychotherapy, 30 minutes" },
+    { code: "90834", description: "Psychotherapy, 45 minutes" },
+    { code: "90837", description: "Psychotherapy, 60 minutes" },
+    { code: "99203", description: "New patient office visit, level 3" },
+    { code: "99204", description: "New patient office visit, level 4" },
+    { code: "99205", description: "New patient office visit, level 5", allowedAmount: 349.48 },
+    { code: "99213", description: "Established patient office visit, level 3" },
+    { code: "99214", description: "Established patient office visit, level 4" },
+    { code: "99215", description: "Established patient office visit, level 5" },
+    { code: "96130", description: "Psychological testing evaluation, first hour" },
+    { code: "96131", description: "Psychological testing evaluation, each additional hour", allowedAmount: 131.96 },
+    { code: "97161", description: "Physical therapy evaluation, low complexity" },
+    { code: "97162", description: "Physical therapy evaluation, moderate complexity" },
+    { code: "97163", description: "Physical therapy evaluation, high complexity" },
+    { code: "97110", description: "Therapeutic exercises" },
+    { code: "97140", description: "Manual therapy techniques" },
+    { code: "98940", description: "Chiropractic manipulative treatment, 1–2 regions" },
+    { code: "98941", description: "Chiropractic manipulative treatment, 3–4 regions" },
+    { code: "72141", description: "MRI cervical spine without contrast" },
+    { code: "72148", description: "MRI lumbar spine without contrast" },
+    { code: "73721", description: "MRI lower-extremity joint without contrast" },
+    { code: "20610", description: "Major joint injection or aspiration" },
+    { code: "99070", description: "Supplies and materials" },
+];
+const MODIFIERS = [
+    { code: "92", description: "Primary Treating Physician evaluation" },
+    { code: "93", description: "Interpreter required" },
+    { code: "94", description: "Agreed Medical Evaluator" },
+    { code: "95", description: "Qualified Medical Evaluator" },
+    { code: "96", description: "Psychiatric/psychological evaluation" },
+    { code: "97", description: "Toxicology evaluation" },
+    { code: "98", description: "Oncology evaluation" },
+    { code: "59", description: "Distinct procedural service" },
+    { code: "XE", description: "Separate encounter" },
+    { code: "XS", description: "Separate structure" },
+    { code: "XP", description: "Separate practitioner" },
+    { code: "XU", description: "Unusual non-overlapping service" },
+];
+const TAXONOMIES = [
+    { code: "103G00000X", description: "Clinical Neuropsychologist" },
+    { code: "103T00000X", description: "Psychologist" },
+    { code: "111N00000X", description: "Chiropractor" },
+    { code: "207Q00000X", description: "Family Medicine" },
+    { code: "207R00000X", description: "Internal Medicine" },
+    { code: "207X00000X", description: "Orthopaedic Surgery" },
+    { code: "207XS0117X", description: "Orthopaedic Surgery of the Spine" },
+    { code: "208100000X", description: "Physical Medicine & Rehabilitation" },
+    { code: "2083X0100X", description: "Occupational Medicine" },
+    { code: "2084N0400X", description: "Neurology" },
+    { code: "2084P0800X", description: "Psychiatry" },
+    { code: "208VP0000X", description: "Pain Medicine" },
+    { code: "213E00000X", description: "Podiatrist" },
+    { code: "225100000X", description: "Physical Therapist" },
+    { code: "225X00000X", description: "Occupational Therapist" },
+    { code: "363A00000X", description: "Physician Assistant" },
+    { code: "363L00000X", description: "Nurse Practitioner" },
+];
+const QUICK_DIAGNOSES = [
+    { label: "Psych", code: "Z04.6", description: "General psychiatric examination requested by authority" },
+    { label: "Back", code: "M54.50", description: "Low back pain, unspecified" },
+    { label: "Neck", code: "M54.2", description: "Cervicalgia" },
+    { label: "Left hand", code: "M79.642", description: "Pain in left hand" },
+    { label: "Right hand", code: "M79.641", description: "Pain in right hand" },
+    { label: "Left knee", code: "M25.562", description: "Pain in left knee" },
+    { label: "Right knee", code: "M25.561", description: "Pain in right knee" },
+];
 const THEME$4 = {
     mindbill: { a: "#238dbd", ac: "#fff", bg: "#f3f8fa", s: "#fff", t: "#203743", m: "#657982", b: "#dbe6ea", r: "14px", cr: "8px", font: "Inter,system-ui,sans-serif" },
     "qme-companion": { a: "#53b5dc", ac: "#173542", bg: "#f2f8fb", s: "#fff", t: "#1d3440", m: "#617783", b: "#d7e5eb", r: "12px", cr: "8px", font: "Inter,system-ui,sans-serif" },
     "orange-bright": { a: "#f4510b", ac: "#fff", bg: "#fffaf6", s: "#fffefd", t: "#090f1f", m: "#626a73", b: "#e7e1da", r: "16px", cr: "10px", font: "Inter,system-ui,sans-serif" },
-    "clinical-blue": { a: "#1677ff", ac: "#fff", bg: "#f5f7fa", s: "#fff", t: "#1f2d3d", m: "#66788a", b: "#d9e2ec", r: "8px", cr: "6px", font: "Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif" },
+    "clinical-blue": { a: "#1677ff", ac: "#fff", bg: "#fff", s: "#fff", t: "#1f2d3d", m: "#66788a", b: "#d9e2ec", r: "8px", cr: "6px", font: "Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif" },
 };
-function mindBillAgingDays(bill, now = new Date()) {
-    if (bill.agingDays != null)
-        return Math.max(0, Math.floor(bill.agingDays));
-    const source = bill.submittedAt ?? bill.updatedAt;
-    if (!source)
-        return 0;
-    const time = new Date(source).getTime();
-    return Number.isFinite(time) ? Math.max(0, Math.floor((now.getTime() - time) / 86_400_000)) : 0;
-}
-function mindBillAgingBucket(days) {
-    if (days <= 30)
-        return "current";
-    if (days <= 60)
-        return "31-60";
-    if (days <= 90)
-        return "61-90";
-    return "91+";
-}
-function summarizeMindBillDashboard(bills, now = new Date()) {
-    const aging = [
-        { id: "current", label: "0–30 days", count: 0, balance: 0 },
-        { id: "31-60", label: "31–60 days", count: 0, balance: 0 },
-        { id: "61-90", label: "61–90 days", count: 0, balance: 0 },
-        { id: "91+", label: "91+ days", count: 0, balance: 0 },
-    ];
-    for (const bill of bills) {
-        const bucket = aging.find((item) => item.id === mindBillAgingBucket(mindBillAgingDays(bill, now)));
-        bucket.count += 1;
-        bucket.balance += bill.balanceDue;
-    }
-    return {
-        totalBilled: bills.reduce((sum, item) => sum + item.totalCharge, 0),
-        totalPaid: bills.reduce((sum, item) => sum + item.totalPaid, 0),
-        outstanding: bills.reduce((sum, item) => sum + item.balanceDue, 0),
-        openCount: bills.filter((item) => !/closed|paid|written.off/i.test(item.state)).length,
-        submittedThisMonth: bills.filter((item) => sameMonth(item.submittedAt, now)).length,
-        closedThisMonth: bills.filter((item) => /closed|paid|written.off/i.test(item.state) && sameMonth(item.updatedAt ?? item.submittedAt, now)).length,
-        bills,
-        aging,
-    };
-}
-function sameMonth(value, now) {
-    if (!value)
-        return false;
-    const date = new Date(value);
-    return Number.isFinite(date.getTime()) && date.getUTCFullYear() === now.getUTCFullYear() && date.getUTCMonth() === now.getUTCMonth();
+function deepCopyBill(value) {
+    return JSON.parse(JSON.stringify(value));
 }
-function buildMindBillReportRows(bills, dimension) {
-    const rows = new Map();
-    for (const bill of bills) {
-        const key = dimension === "payer" ? bill.payerName || "Unassigned payer" : dimension === "aging" ? mindBillAgingBucket(mindBillAgingDays(bill)) : bill.state;
-        const label = key.replace(/_/g, " ").replace(/\b\w/g, (value) => value.toUpperCase());
-        const row = rows.get(key) ?? { key, label, billCount: 0, totalBilled: 0, totalPaid: 0, balanceDue: 0 };
-        row.billCount += 1;
-        row.totalBilled += bill.totalCharge;
-        row.totalPaid += bill.totalPaid;
-        row.balanceDue += bill.balanceDue;
-        rows.set(key, row);
-    }
-    return [...rows.values()].sort((a, b) => b.balanceDue - a.balanceDue || a.label.localeCompare(b.label));
+function required(value) {
+    return typeof value === "string" ? value.trim().length > 0 : value != null;
 }
-function buildMindBillReportCsv(rows) {
-    const quote = (value) => `"${String(value).replace(/"/g, '""')}"`;
-    return ["Group,Bills,Total billed,Total paid,Balance due", ...rows.map((row) => [row.label, row.billCount, row.totalBilled, row.totalPaid, row.balanceDue].map(quote).join(","))].join("\n");
+async function blobToBase64(blob) {
+    const buffer = new Uint8Array(await blob.arrayBuffer());
+    let binary = "";
+    for (const byte of buffer)
+        binary += String.fromCharCode(byte);
+    return btoa(binary);
 }
-class DashboardBase {
+class MindBillBillSubmissionComponent {
+    initialBill;
+    attachments = [];
     appearance = { preset: "mindbill" };
+    sessionEndpoint = "/api/mindbill/session";
+    getSession;
+    apiBaseUrl;
+    heading = "Bill information";
+    description = "Review the bill details, add attachments, and submit.";
+    submitLabel = "Submit bill";
+    attentionFields = [];
+    procedureOptions = PROCEDURES;
+    modifierOptions = MODIFIERS;
+    taxonomyOptions = TAXONOMIES;
+    submitter;
+    submitted = new EventEmitter();
+    submissionError = new EventEmitter();
+    billChange = new EventEmitter();
+    bill = {};
+    workingAttachments = [];
+    payerQuery = "";
+    payerResults = [];
+    payerBusy = false;
+    diagnosisQuery = "";
+    diagnosisResults = [];
+    diagnosisOffset = 0;
+    diagnosisBusy = false;
+    submitting = false;
+    errorMessage = "";
+    postalStatus = "";
+    dragActive = false;
+    invalidFields = new Set();
+    attentionFieldSet = new Set();
+    quickDiagnoses = QUICK_DIAGNOSES;
+    // Zoneless-safe rendering: async work (debounced lookups, fetches, file reads)
+    // must schedule change detection explicitly for zone-less Angular hosts.
+    changeDetector = inject(ChangeDetectorRef);
+    customProcedureOption = mindBillCustomProcedureOption;
+    customTaxonomyOption = (query) => {
+        const code = query.trim().toUpperCase();
+        return /^[A-Z0-9]{10}$/.test(code) ? { id: code, label: code, detail: "Use this taxonomy code" } : null;
+    };
+    searchTimer;
+    postalTimer;
+    ngOnChanges(changes) {
+        if (changes["initialBill"] && this.initialBill) {
+            this.bill = deepCopyBill(this.initialBill);
+            if (!this.bill.serviceLines.length)
+                this.bill.serviceLines = [{ code: "", units: 1 }];
+            this.ensureTrailingLine();
+            this.payerQuery = this.bill.claim.claimsAdministrator.name ?? "";
+        }
+        if (changes["attachments"])
+            this.workingAttachments = this.attachments.map((item) => ({ ...item }));
+        if (changes["attentionFields"])
+            this.attentionFieldSet = new Set(this.attentionFields);
+    }
     get themeStyle() {
         const base = THEME$4[this.appearance.preset ?? "mindbill"] ?? THEME$4["mindbill"];
         return {
@@ -555,885 +626,1383 @@ class DashboardBase {
             "--cr": this.appearance.controlRadius ?? base["cr"], "--font": this.appearance.fontFamily ?? base["font"],
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DashboardBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: DashboardBase, isStandalone: true, inputs: { appearance: "appearance" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DashboardBase, decorators: [{
-            type: Directive
-        }], propDecorators: { appearance: [{
-                type: Input
-            }] } });
-const sharedStyles = `
-  :host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}
-  .money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}
-`;
-class MindBillBillAgingSummaryComponent extends DashboardBase {
-    buckets = [];
-    selectedBucket = "";
-    bucketSelected = new EventEmitter();
-    width(balance) { const max = Math.max(1, ...this.buckets.map((item) => item.balance)); return Math.max(balance ? 8 : 0, balance / max * 100); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillAgingSummaryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillAgingSummaryComponent, isStandalone: true, selector: "mindbill-bill-aging-summary", inputs: { buckets: "buckets", selectedBucket: "selectedBucket" }, outputs: { bucketSelected: "bucketSelected" }, usesInheritance: true, ngImport: i0, template: `<section class="mbd aging" [ngStyle]="themeStyle" aria-label="Accounts receivable aging">@for (bucket of buckets; track bucket.id) { <button type="button" class="card" [class.selected]="selectedBucket === bucket.id" (click)="bucketSelected.emit(bucket.id)"><div><strong>{{ bucket.label }}</strong><span>{{ bucket.count }} bill{{ bucket.count === 1 ? '' : 's' }}</span></div><b class="money">{{ bucket.balance | currency }}</b><i><em [style.width.%]="width(bucket.balance)"></em></i></button> }</section>`, isInline: true, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".aging{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.aging>button{border:1px solid var(--b);padding:16px;text-align:left;color:var(--t);cursor:pointer}.aging>button:hover,.aging>button.selected{border-color:var(--a);background:color-mix(in srgb,var(--a) 6%,var(--s))}.aging button>div{display:flex;justify-content:space-between;gap:8px}.aging span{color:var(--m);font-size:12px}.aging b{display:block;font-size:20px;margin:14px 0 12px}.aging i{display:block;height:5px;border-radius:99px;background:color-mix(in srgb,var(--b) 70%,transparent);overflow:hidden}.aging em{display:block;height:100%;background:var(--a)}@media(max-width:760px){.aging{grid-template-columns:1fr 1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillAgingSummaryComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mindbill-bill-aging-summary", standalone: true, imports: [CommonModule], template: `<section class="mbd aging" [ngStyle]="themeStyle" aria-label="Accounts receivable aging">@for (bucket of buckets; track bucket.id) { <button type="button" class="card" [class.selected]="selectedBucket === bucket.id" (click)="bucketSelected.emit(bucket.id)"><div><strong>{{ bucket.label }}</strong><span>{{ bucket.count }} bill{{ bucket.count === 1 ? '' : 's' }}</span></div><b class="money">{{ bucket.balance | currency }}</b><i><em [style.width.%]="width(bucket.balance)"></em></i></button> }</section>`, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".aging{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.aging>button{border:1px solid var(--b);padding:16px;text-align:left;color:var(--t);cursor:pointer}.aging>button:hover,.aging>button.selected{border-color:var(--a);background:color-mix(in srgb,var(--a) 6%,var(--s))}.aging button>div{display:flex;justify-content:space-between;gap:8px}.aging span{color:var(--m);font-size:12px}.aging b{display:block;font-size:20px;margin:14px 0 12px}.aging i{display:block;height:5px;border-radius:99px;background:color-mix(in srgb,var(--b) 70%,transparent);overflow:hidden}.aging em{display:block;height:100%;background:var(--a)}@media(max-width:760px){.aging{grid-template-columns:1fr 1fr}}\n"] }]
-        }], propDecorators: { buckets: [{
-                type: Input
-            }], selectedBucket: [{
-                type: Input
-            }], bucketSelected: [{
-                type: Output
-            }] } });
-class MindBillBillListComponent extends DashboardBase {
-    bills = [];
-    billSelected = new EventEmitter();
-    age(bill) { return mindBillAgingDays(bill); }
-    label(value) { return value.replace(/_/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase()); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillListComponent, isStandalone: true, selector: "mindbill-bill-list", inputs: { bills: "bills" }, outputs: { billSelected: "billSelected" }, usesInheritance: true, ngImport: i0, template: `<section class="mbd list card" [ngStyle]="themeStyle"><div class="head"><strong>Bill</strong><strong>Payer</strong><strong>Status</strong><strong>Age</strong><strong>Balance</strong></div>@for (bill of bills; track bill.id) { <button type="button" (click)="billSelected.emit(bill)"><span><b>{{ bill.patientName }}</b><small>{{ bill.claimNumber || bill.workItemLabel || bill.externalId || bill.id }}</small></span><span>{{ bill.payerName || '—' }}</span><span><i class="pill">{{ label(bill.state) }}</i></span><span>{{ age(bill) }} days</span><span class="money"><b>{{ bill.balanceDue | currency }}</b><small>{{ bill.totalPaid | currency }} paid</small></span></button> } @empty { <p class="empty">No bills match these filters.</p> }</section>`, isInline: true, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".list{overflow:hidden}.head,.list button{display:grid;grid-template-columns:1.6fr 1.2fr .85fr .55fr .8fr;gap:18px;align-items:center;text-align:left}.head{padding:11px 16px;background:color-mix(in srgb,var(--bg) 78%,var(--s));color:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.list button{width:100%;border:0;border-top:1px solid var(--b);background:var(--s);color:var(--t);padding:15px 16px;cursor:pointer}.list button:hover{background:color-mix(in srgb,var(--a) 5%,var(--s))}.list span,.list small{min-width:0}.list small{display:block;color:var(--m);margin-top:4px}.money{text-align:right}.empty{padding:24px;text-align:center;color:var(--m)}@media(max-width:760px){.head{display:none}.list button{grid-template-columns:1fr auto;gap:10px}.list button>span:nth-child(2){grid-column:1}.list button>span:nth-child(3){grid-row:1;grid-column:2}.list button>span:nth-child(4){grid-column:1}.money{grid-column:2;grid-row:2/4}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mindbill-bill-list", standalone: true, imports: [CommonModule], template: `<section class="mbd list card" [ngStyle]="themeStyle"><div class="head"><strong>Bill</strong><strong>Payer</strong><strong>Status</strong><strong>Age</strong><strong>Balance</strong></div>@for (bill of bills; track bill.id) { <button type="button" (click)="billSelected.emit(bill)"><span><b>{{ bill.patientName }}</b><small>{{ bill.claimNumber || bill.workItemLabel || bill.externalId || bill.id }}</small></span><span>{{ bill.payerName || '—' }}</span><span><i class="pill">{{ label(bill.state) }}</i></span><span>{{ age(bill) }} days</span><span class="money"><b>{{ bill.balanceDue | currency }}</b><small>{{ bill.totalPaid | currency }} paid</small></span></button> } @empty { <p class="empty">No bills match these filters.</p> }</section>`, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".list{overflow:hidden}.head,.list button{display:grid;grid-template-columns:1.6fr 1.2fr .85fr .55fr .8fr;gap:18px;align-items:center;text-align:left}.head{padding:11px 16px;background:color-mix(in srgb,var(--bg) 78%,var(--s));color:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.list button{width:100%;border:0;border-top:1px solid var(--b);background:var(--s);color:var(--t);padding:15px 16px;cursor:pointer}.list button:hover{background:color-mix(in srgb,var(--a) 5%,var(--s))}.list span,.list small{min-width:0}.list small{display:block;color:var(--m);margin-top:4px}.money{text-align:right}.empty{padding:24px;text-align:center;color:var(--m)}@media(max-width:760px){.head{display:none}.list button{grid-template-columns:1fr auto;gap:10px}.list button>span:nth-child(2){grid-column:1}.list button>span:nth-child(3){grid-row:1;grid-column:2}.list button>span:nth-child(4){grid-column:1}.money{grid-column:2;grid-row:2/4}}\n"] }]
-        }], propDecorators: { bills: [{
-                type: Input
-            }], billSelected: [{
-                type: Output
-            }] } });
-class MindBillBillingDashboardComponent extends DashboardBase {
-    bills = [];
-    heading = "Billing dashboard";
-    description = "Track every submitted bill from payer acceptance through payment.";
-    billSelected = new EventEmitter();
-    createBill = new EventEmitter();
-    query = "";
-    state = "";
-    agingBucket = "";
-    get summary() { return summarizeMindBillDashboard(this.bills); }
-    get states() { return [...new Set(this.bills.map((bill) => bill.state))].sort(); }
-    get filteredBills() { const query = this.query.trim().toLowerCase(); return this.bills.filter((bill) => (!this.state || bill.state === this.state) && (!this.agingBucket || mindBillAgingBucket(mindBillAgingDays(bill)) === this.agingBucket) && (!query || [bill.patientName, bill.claimNumber, bill.payerName, bill.externalId, bill.billNumber].some((value) => String(value ?? "").toLowerCase().includes(query)))); }
-    get agingLabel() { return this.summary.aging.find((item) => item.id === this.agingBucket)?.label ?? ""; }
-    toggleAging(bucket) { this.agingBucket = this.agingBucket === bucket ? "" : bucket; }
-    label(value) { return value.replace(/_/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase()); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillingDashboardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillingDashboardComponent, isStandalone: true, selector: "mindbill-billing-dashboard", inputs: { bills: "bills", heading: "heading", description: "description" }, outputs: { billSelected: "billSelected", createBill: "createBill" }, usesInheritance: true, ngImport: i0, template: `<section class="mbd dashboard" [ngStyle]="themeStyle"><header><div><p>Billing operations</p><h2>{{ heading }}</h2><span class="muted">{{ description }}</span></div><button type="button" (click)="createBill.emit()">+ New bill</button></header><div class="metrics"><article class="card"><span>Total billed</span><b>{{ summary.totalBilled | currency }}</b></article><article class="card"><span>Outstanding</span><b>{{ summary.outstanding | currency }}</b></article><article class="card"><span>Submitted this month</span><b>{{ summary.submittedThisMonth }}</b></article><article class="card"><span>Closed this month</span><b>{{ summary.closedThisMonth }}</b></article></div><mindbill-bill-aging-summary [buckets]="summary.aging" [selectedBucket]="agingBucket" [appearance]="appearance" (bucketSelected)="toggleAging($event)"/><div class="filters"><input [(ngModel)]="query" placeholder="Search patient, claim, or payer" aria-label="Search bills"><select [(ngModel)]="state"><option value="">All statuses</option>@for (option of states; track option) { <option [value]="option">{{ label(option) }}</option> }</select>@if (agingBucket) { <button type="button" class="clear" (click)="agingBucket=''">{{ agingLabel }} ×</button> }</div><mindbill-bill-list [bills]="filteredBills" [appearance]="appearance" (billSelected)="billSelected.emit($event)"/></section>`, isInline: true, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".dashboard{display:grid;gap:18px}.dashboard header{display:flex;justify-content:space-between;align-items:end;gap:20px}.dashboard h2{font-size:28px;margin:2px 0 5px}.dashboard header p{margin:0;color:var(--a);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.dashboard header button{border:0;border-radius:var(--cr);background:var(--a);color:var(--ac);padding:11px 16px;font-weight:750;cursor:pointer}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metrics article{padding:18px}.metrics span{display:block;color:var(--m);font-size:12px}.metrics b{display:block;margin-top:8px;font-size:24px}.filters{display:grid;grid-template-columns:1fr 190px auto;gap:10px}.filters input,.filters select,.filters .clear{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);color:var(--t);padding:11px 13px}.filters .clear{color:var(--a);font-weight:700;cursor:pointer}@media(max-width:760px){.dashboard header{align-items:start}.metrics{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MindBillBillAgingSummaryComponent, selector: "mindbill-bill-aging-summary", inputs: ["buckets", "selectedBucket"], outputs: ["bucketSelected"] }, { kind: "component", type: MindBillBillListComponent, selector: "mindbill-bill-list", inputs: ["bills"], outputs: ["billSelected"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillingDashboardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mindbill-billing-dashboard", standalone: true, imports: [CommonModule, FormsModule, MindBillBillAgingSummaryComponent, MindBillBillListComponent], template: `<section class="mbd dashboard" [ngStyle]="themeStyle"><header><div><p>Billing operations</p><h2>{{ heading }}</h2><span class="muted">{{ description }}</span></div><button type="button" (click)="createBill.emit()">+ New bill</button></header><div class="metrics"><article class="card"><span>Total billed</span><b>{{ summary.totalBilled | currency }}</b></article><article class="card"><span>Outstanding</span><b>{{ summary.outstanding | currency }}</b></article><article class="card"><span>Submitted this month</span><b>{{ summary.submittedThisMonth }}</b></article><article class="card"><span>Closed this month</span><b>{{ summary.closedThisMonth }}</b></article></div><mindbill-bill-aging-summary [buckets]="summary.aging" [selectedBucket]="agingBucket" [appearance]="appearance" (bucketSelected)="toggleAging($event)"/><div class="filters"><input [(ngModel)]="query" placeholder="Search patient, claim, or payer" aria-label="Search bills"><select [(ngModel)]="state"><option value="">All statuses</option>@for (option of states; track option) { <option [value]="option">{{ label(option) }}</option> }</select>@if (agingBucket) { <button type="button" class="clear" (click)="agingBucket=''">{{ agingLabel }} ×</button> }</div><mindbill-bill-list [bills]="filteredBills" [appearance]="appearance" (billSelected)="billSelected.emit($event)"/></section>`, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".dashboard{display:grid;gap:18px}.dashboard header{display:flex;justify-content:space-between;align-items:end;gap:20px}.dashboard h2{font-size:28px;margin:2px 0 5px}.dashboard header p{margin:0;color:var(--a);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.dashboard header button{border:0;border-radius:var(--cr);background:var(--a);color:var(--ac);padding:11px 16px;font-weight:750;cursor:pointer}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metrics article{padding:18px}.metrics span{display:block;color:var(--m);font-size:12px}.metrics b{display:block;margin-top:8px;font-size:24px}.filters{display:grid;grid-template-columns:1fr 190px auto;gap:10px}.filters input,.filters select,.filters .clear{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);color:var(--t);padding:11px 13px}.filters .clear{color:var(--a);font-weight:700;cursor:pointer}@media(max-width:760px){.dashboard header{align-items:start}.metrics{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr}}\n"] }]
-        }], propDecorators: { bills: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], billSelected: [{
-                type: Output
-            }], createBill: [{
-                type: Output
-            }] } });
-class MindBillBillingReportComponent extends DashboardBase {
-    bills = [];
-    heading = "Billing report";
-    dimension = "status";
-    get rows() { return buildMindBillReportRows(this.bills, this.dimension); }
-    downloadCsv() { const blob = new Blob([buildMindBillReportCsv(this.rows)], { type: "text/csv;charset=utf-8" }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `mindbill-${this.dimension}-report.csv`; link.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillingReportComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillingReportComponent, isStandalone: true, selector: "mindbill-billing-report", inputs: { bills: "bills", heading: "heading" }, usesInheritance: true, ngImport: i0, template: `<section class="mbd report card" [ngStyle]="themeStyle"><header><div><h2>{{ heading }}</h2><p>Operational totals grouped for reconciliation and follow-up.</p></div><div><select [(ngModel)]="dimension"><option value="status">Status</option><option value="payer">Payer</option><option value="aging">Aging</option></select><button type="button" (click)="downloadCsv()">Export CSV</button></div></header><div class="thead"><b>Group</b><b>Bills</b><b>Total billed</b><b>Total paid</b><b>Balance due</b></div>@for (row of rows; track row.key) { <div class="row"><strong>{{ row.label }}</strong><span>{{ row.billCount }}</span><span>{{ row.totalBilled | currency }}</span><span>{{ row.totalPaid | currency }}</span><b>{{ row.balanceDue | currency }}</b></div> }</section>`, isInline: true, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".report{overflow:hidden}.report header{display:flex;justify-content:space-between;align-items:center;padding:18px}.report h2{margin:0;font-size:22px}.report p{margin:4px 0 0;color:var(--m)}.report header div:last-child{display:flex;gap:8px}.report select,.report button{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);color:var(--t);padding:9px 12px}.report button{background:var(--a);border-color:var(--a);color:var(--ac);font-weight:750;cursor:pointer}.thead,.row{display:grid;grid-template-columns:1.5fr .5fr 1fr 1fr 1fr;gap:14px;padding:12px 18px;border-top:1px solid var(--b);align-items:center}.thead{background:color-mix(in srgb,var(--bg) 78%,var(--s));color:var(--m);font-size:11px;text-transform:uppercase}.row span,.row b:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}@media(max-width:700px){.report header{align-items:flex-start}.thead{display:none}.row{grid-template-columns:1fr 1fr}.row>*:nth-child(n+2){text-align:right}.row strong{grid-column:1}.row span:nth-child(2){grid-column:2}.row span:nth-child(3):before{content:\"Billed \";color:var(--m)}.row span:nth-child(4):before{content:\"Paid \";color:var(--m)}.row b:before{content:\"Due \";color:var(--m)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillingReportComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mindbill-billing-report", standalone: true, imports: [CommonModule, FormsModule], template: `<section class="mbd report card" [ngStyle]="themeStyle"><header><div><h2>{{ heading }}</h2><p>Operational totals grouped for reconciliation and follow-up.</p></div><div><select [(ngModel)]="dimension"><option value="status">Status</option><option value="payer">Payer</option><option value="aging">Aging</option></select><button type="button" (click)="downloadCsv()">Export CSV</button></div></header><div class="thead"><b>Group</b><b>Bills</b><b>Total billed</b><b>Total paid</b><b>Balance due</b></div>@for (row of rows; track row.key) { <div class="row"><strong>{{ row.label }}</strong><span>{{ row.billCount }}</span><span>{{ row.totalBilled | currency }}</span><span>{{ row.totalPaid | currency }}</span><b>{{ row.balanceDue | currency }}</b></div> }</section>`, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".report{overflow:hidden}.report header{display:flex;justify-content:space-between;align-items:center;padding:18px}.report h2{margin:0;font-size:22px}.report p{margin:4px 0 0;color:var(--m)}.report header div:last-child{display:flex;gap:8px}.report select,.report button{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);color:var(--t);padding:9px 12px}.report button{background:var(--a);border-color:var(--a);color:var(--ac);font-weight:750;cursor:pointer}.thead,.row{display:grid;grid-template-columns:1.5fr .5fr 1fr 1fr 1fr;gap:14px;padding:12px 18px;border-top:1px solid var(--b);align-items:center}.thead{background:color-mix(in srgb,var(--bg) 78%,var(--s));color:var(--m);font-size:11px;text-transform:uppercase}.row span,.row b:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}@media(max-width:700px){.report header{align-items:flex-start}.thead{display:none}.row{grid-template-columns:1fr 1fr}.row>*:nth-child(n+2){text-align:right}.row strong{grid-column:1}.row span:nth-child(2){grid-column:2}.row span:nth-child(3):before{content:\"Billed \";color:var(--m)}.row span:nth-child(4):before{content:\"Paid \";color:var(--m)}.row b:before{content:\"Due \";color:var(--m)}}\n"] }]
-        }], propDecorators: { bills: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }] } });
-
-const MINDBILL_STATUS_AGING_BUCKETS = [
-    { id: "current", label: "0–30 days" },
-    { id: "31-60", label: "31–60 days" },
-    { id: "61-90", label: "61–90 days" },
-    { id: "91+", label: "91+ days" },
-];
-const DEFAULT_STATE_ORDER = [
-    "draft", "incomplete", "created", "sent", "submitted", "accepted", "processed",
-    "paid", "underpaid", "denied", "rejected", "appealing", "second_review", "ibr", "lien", "closed",
-];
-const agingDays = (bill, now) => {
-    if (bill.agingDays != null)
-        return Math.max(0, Math.floor(bill.agingDays));
-    const source = bill.submittedAt ?? bill.updatedAt;
-    if (!source)
-        return 0;
-    const time = new Date(source).getTime();
-    return Number.isFinite(time) ? Math.max(0, Math.floor((now.getTime() - time) / 86_400_000)) : 0;
-};
-const agingBucketIndex = (days) => (days <= 30 ? 0 : days <= 60 ? 1 : days <= 90 ? 2 : 3);
-const stateLabel = (state) => state.replace(/_/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
-const emptyCell = (state, bucket) => ({ state, bucket, count: 0, balance: 0, bills: [] });
-function buildMindBillStatusAgingMatrix(bills, stateOrder = DEFAULT_STATE_ORDER, now = new Date()) {
-    const orderIndex = new Map(stateOrder.map((state, index) => [state.toLowerCase(), index]));
-    const states = [...new Set(bills.map((bill) => bill.state))].sort((a, b) => {
-        const left = orderIndex.get(a.toLowerCase()) ?? stateOrder.length;
-        const right = orderIndex.get(b.toLowerCase()) ?? stateOrder.length;
-        return left - right || a.localeCompare(b);
-    });
-    const columnTotals = MINDBILL_STATUS_AGING_BUCKETS.map((bucket) => emptyCell("all", bucket.id));
-    const grandTotal = emptyCell("all", "total");
-    const rows = states.map((state) => ({
-        state,
-        label: stateLabel(state),
-        cells: MINDBILL_STATUS_AGING_BUCKETS.map((bucket) => emptyCell(state, bucket.id)),
-        total: emptyCell(state, "total"),
-    }));
-    const rowByState = new Map(rows.map((row) => [row.state, row]));
-    for (const bill of bills) {
-        const row = rowByState.get(bill.state);
-        const bucketIndex = agingBucketIndex(agingDays(bill, now));
-        for (const cell of [row.cells[bucketIndex], row.total, columnTotals[bucketIndex], grandTotal]) {
-            cell.count += 1;
-            cell.balance += bill.balanceDue;
-            cell.bills.push(bill);
+    get procedureComboOptions() {
+        return this.procedureOptions.map((item) => ({ id: item.code, label: item.code, detail: item.description }));
+    }
+    get taxonomyComboOptions() {
+        return this.taxonomyOptions.map((item) => ({ id: item.code, label: item.description, detail: item.code }));
+    }
+    modifierComboOptions(line) {
+        return this.modifierOptions
+            .filter((item) => !(line.modifiers ?? []).includes(item.code))
+            .map((item) => ({ id: item.code, label: `−${item.code}`, detail: item.description }));
+    }
+    referenceClient() {
+        return createBillReferenceClient({ sessionEndpoint: this.sessionEndpoint, ...(this.getSession ? { getSession: this.getSession } : {}), ...(this.apiBaseUrl ? { apiBaseUrl: this.apiBaseUrl } : {}) });
+    }
+    setDate(path, value) {
+        if (path === "patient.dateOfBirth")
+            this.bill.patient.dateOfBirth = value;
+        else if (path === "service.date")
+            this.bill.service.date = value;
+        else
+            this.bill.claim.dateOfInjury = value;
+        if (value)
+            this.invalidFields.delete(path);
+        this.billChange.emit(this.bill);
+    }
+    postalChanged(value) {
+        clearTimeout(this.postalTimer);
+        this.postalStatus = "";
+        if (!/^\d{5}$/.test(value.trim()))
+            return;
+        this.postalStatus = "Looking up ZIP…";
+        this.postalTimer = setTimeout(async () => {
+            try {
+                const place = await this.referenceClient().lookupPostalCode(value);
+                if (place) {
+                    this.bill.patient.address.city = place.city;
+                    this.bill.patient.address.state = place.state.toUpperCase();
+                    this.postalStatus = `${place.city}, ${place.state.toUpperCase()} filled from ZIP`;
+                    this.invalidFields.delete("patient.address.city");
+                    this.invalidFields.delete("patient.address.state");
+                    this.billChange.emit(this.bill);
+                }
+                else {
+                    this.postalStatus = "ZIP not found";
+                }
+            }
+            catch {
+                this.postalStatus = "ZIP lookup unavailable";
+            }
+            this.changeDetector.markForCheck();
+        }, 180);
+    }
+    searchPayers() {
+        clearTimeout(this.searchTimer);
+        this.searchTimer = setTimeout(async () => {
+            this.payerBusy = true;
+            try {
+                this.payerResults = await this.referenceClient().searchClaimsAdministrators(this.payerQuery, this.bill.claim.claimNumber);
+            }
+            catch {
+                this.payerResults = [];
+            }
+            finally {
+                this.payerBusy = false;
+                this.changeDetector.markForCheck();
+            }
+        }, 180);
+    }
+    selectPayer(payer) {
+        this.bill.claim.claimsAdministrator = { id: payer.id, name: payer.name };
+        this.payerQuery = payer.name;
+        this.payerResults = [];
+        this.invalidFields.delete("claim.claimsAdministrator");
+        this.billChange.emit(this.bill);
+    }
+    searchDiagnoses(reset) {
+        if (this.diagnosisBusy)
+            return;
+        if (reset) {
+            this.diagnosisOffset = 0;
+            this.diagnosisResults = [];
+        }
+        clearTimeout(this.searchTimer);
+        this.searchTimer = setTimeout(async () => {
+            this.diagnosisBusy = true;
+            try {
+                const results = await this.referenceClient().searchDiagnosisCodes(this.diagnosisQuery, 60, this.diagnosisOffset);
+                this.diagnosisResults = reset ? results : [...this.diagnosisResults, ...results];
+                this.diagnosisOffset = this.diagnosisResults.length;
+            }
+            catch {
+                if (reset)
+                    this.diagnosisResults = [];
+            }
+            finally {
+                this.diagnosisBusy = false;
+                this.changeDetector.markForCheck();
+            }
+        }, reset ? 160 : 0);
+    }
+    diagnosisScrolled(event) {
+        const element = event.currentTarget;
+        if (element.scrollTop + element.clientHeight >= element.scrollHeight - 80)
+            this.searchDiagnoses(false);
+    }
+    hasDiagnosis(code) { return this.bill.diagnoses.includes(code); }
+    toggleDiagnosis(item) {
+        if (this.hasDiagnosis(item.code))
+            this.removeDiagnosis(item.code);
+        else
+            this.addDiagnosis(item);
+    }
+    addDiagnosis(item) { if (!this.hasDiagnosis(item.code))
+        this.bill.diagnoses.push(item.code); this.diagnosisQuery = ""; this.diagnosisResults = []; this.invalidFields.delete("diagnoses"); this.billChange.emit(this.bill); }
+    removeDiagnosis(code) { this.bill.diagnoses = this.bill.diagnoses.filter((item) => item !== code); this.billChange.emit(this.bill); }
+    ensureTrailingLine() {
+        const last = this.bill.serviceLines.at(-1);
+        if (!last || last.code.trim())
+            this.bill.serviceLines.push({ code: "", units: 1 });
+        this.billChange.emit(this.bill);
+    }
+    removeLine(index) { this.bill.serviceLines.splice(index, 1); if (!this.bill.serviceLines.length)
+        this.bill.serviceLines.push({ code: "", units: 1 }); this.ensureTrailingLine(); }
+    selectProcedure(index, option) {
+        this.bill.serviceLines[index].code = option.id;
+        this.invalidFields.delete("serviceLines");
+        this.ensureTrailingLine();
+    }
+    addModifier(index, option) {
+        const line = this.bill.serviceLines[index];
+        line.modifiers = [...new Set([...(line.modifiers ?? []), option.id])];
+        this.billChange.emit(this.bill);
+    }
+    removeModifier(index, modifier) {
+        const line = this.bill.serviceLines[index];
+        line.modifiers = (line.modifiers ?? []).filter((item) => item !== modifier);
+        this.billChange.emit(this.bill);
+    }
+    dxLetter(pointer) { return String.fromCharCode(64 + pointer); }
+    hasDiagnosisPointer(line, pointer) {
+        return (line.diagnosisPointers ?? []).includes(pointer);
+    }
+    toggleDiagnosisPointer(index, pointer) {
+        const line = this.bill.serviceLines[index];
+        line.diagnosisPointers = this.hasDiagnosisPointer(line, pointer)
+            ? (line.diagnosisPointers ?? []).filter((item) => item !== pointer)
+            : [...(line.diagnosisPointers ?? []), pointer].sort((left, right) => left - right);
+        this.billChange.emit(this.bill);
+    }
+    setAuthorizationNumber(value) {
+        this.bill.service.authorizationNumber = value.trim() ? value : null;
+        this.billChange.emit(this.bill);
+    }
+    selectTaxonomy(option) {
+        this.bill.renderingProvider.taxonomy = option.id;
+        this.invalidFields.delete("renderingProvider.taxonomy");
+        this.billChange.emit(this.bill);
+    }
+    procedureDescription(code) { return this.procedureOptions.find((item) => item.code.toLowerCase() === code.trim().toLowerCase())?.description ?? ""; }
+    allowed(line) { const base = this.procedureOptions.find((item) => item.code.toLowerCase() === line.code.trim().toLowerCase())?.allowedAmount; return base == null ? (line.charge ?? null) : Math.round(base * Math.max(1, line.units ?? 1) * 100) / 100; }
+    get totalAllowed() { return this.bill.serviceLines.reduce((sum, line) => sum + (this.allowed(line) ?? 0), 0); }
+    onWindowDragOver(event) {
+        if (event.dataTransfer?.types.includes("Files")) {
+            event.preventDefault();
+            this.dragActive = true;
+            this.changeDetector.markForCheck();
         }
     }
-    return { rows, columnTotals, grandTotal };
-}
-function buildMindBillStatusAgingCsv(bills, stateOrder) {
-    const matrix = buildMindBillStatusAgingMatrix(bills, stateOrder);
-    const quote = (value) => `"${String(value).replace(/"/g, '""')}"`;
-    const header = ["Status", ...MINDBILL_STATUS_AGING_BUCKETS.map((bucket) => bucket.label), "Total"];
-    const lines = matrix.rows.map((row) => [row.label, ...row.cells.map((cell) => cell.count), row.total.count]);
-    lines.push(["Total", ...matrix.columnTotals.map((cell) => cell.count), matrix.grandTotal.count]);
-    return [header, ...lines].map((line) => line.map(quote).join(",")).join("\n");
-}
-
-const THEME$3 = {
-    mindbill: { a: "#238dbd", ac: "#fff", bg: "#f3f8fa", s: "#fff", t: "#203743", m: "#657982", b: "#dbe6ea", r: "14px", cr: "8px", font: "Inter,system-ui,sans-serif" },
-    "qme-companion": { a: "#53b5dc", ac: "#173542", bg: "#f2f8fb", s: "#fff", t: "#1d3440", m: "#617783", b: "#d7e5eb", r: "12px", cr: "8px", font: "Inter,system-ui,sans-serif" },
-    "orange-bright": { a: "#f4510b", ac: "#fff", bg: "#fffaf6", s: "#fffefd", t: "#090f1f", m: "#626a73", b: "#e7e1da", r: "16px", cr: "10px", font: "Inter,system-ui,sans-serif" },
-    "clinical-blue": { a: "#1677ff", ac: "#fff", bg: "#f5f7fa", s: "#fff", t: "#1f2d3d", m: "#66788a", b: "#d9e2ec", r: "8px", cr: "6px", font: "Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif" },
-};
-class MindBillStatusAgingMatrixComponent {
-    bills = [];
-    heading = "Bills by status and age";
-    description = "Every bill grouped by lifecycle status, then by days outstanding.";
-    stateOrder;
-    showBalances = true;
-    appearance = { preset: "mindbill" };
-    cellSelected = new EventEmitter();
-    buckets = MINDBILL_STATUS_AGING_BUCKETS;
-    get matrix() {
-        return buildMindBillStatusAgingMatrix(this.bills, this.stateOrder);
+    onWindowDragLeave(event) {
+        if (!event.relatedTarget) {
+            this.dragActive = false;
+            this.changeDetector.markForCheck();
+        }
     }
-    get themeStyle() {
-        const base = THEME$3[this.appearance.preset ?? "mindbill"] ?? THEME$3["mindbill"];
-        return {
-            "--a": this.appearance.accentColor ?? base["a"], "--ac": this.appearance.accentTextColor ?? base["ac"],
-            "--bg": this.appearance.backgroundColor ?? base["bg"], "--s": this.appearance.surfaceColor ?? base["s"],
-            "--t": this.appearance.textColor ?? base["t"], "--m": this.appearance.mutedColor ?? base["m"],
-            "--b": this.appearance.borderColor ?? base["b"], "--r": this.appearance.borderRadius ?? base["r"],
-            "--cr": this.appearance.controlRadius ?? base["cr"], "--font": this.appearance.fontFamily ?? base["font"],
-        };
+    onWindowDrop(event) {
+        if (event.dataTransfer?.files.length) {
+            event.preventDefault();
+            this.dragActive = false;
+            void this.addFiles(event.dataTransfer.files);
+            this.changeDetector.markForCheck();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillStatusAgingMatrixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillStatusAgingMatrixComponent, isStandalone: true, selector: "mindbill-status-aging-matrix", inputs: { bills: "bills", heading: "heading", description: "description", stateOrder: "stateOrder", showBalances: "showBalances", appearance: "appearance" }, outputs: { cellSelected: "cellSelected" }, ngImport: i0, template: `
-    <section class="mbmx" [ngStyle]="themeStyle" aria-label="Bills by status and age">
-      <header><h2>{{ heading }}</h2><p>{{ description }}</p></header>
-      <div class="card">
-        <table>
-          <thead>
-            <tr><th class="status">Status</th>@for (bucket of buckets; track bucket.id) { <th>{{ bucket.label }}</th> }<th>Total</th></tr>
-          </thead>
-          <tbody>
-            @for (row of matrix.rows; track row.state) {
-              <tr>
-                <td class="status"><i class="pill">{{ row.label }}</i></td>
-                @for (cell of row.cells; track cell.bucket) {
-                  <td><button type="button" [disabled]="cell.count === 0" (click)="cellSelected.emit(cell)"><b [class.zero]="cell.count === 0">{{ cell.count === 0 ? '—' : cell.count }}</b>@if (showBalances && cell.count > 0) { <small>{{ cell.balance | currency }}</small> }</button></td>
-                }
-                <td class="rowtotal"><button type="button" [disabled]="row.total.count === 0" (click)="cellSelected.emit(row.total)"><b>{{ row.total.count }}</b>@if (showBalances) { <small>{{ row.total.balance | currency }}</small> }</button></td>
-              </tr>
-            }
-            <tr class="totals">
-              <td class="status">Total</td>
-              @for (cell of matrix.columnTotals; track cell.bucket) {
-                <td><button type="button" [disabled]="cell.count === 0" (click)="cellSelected.emit(cell)"><b [class.zero]="cell.count === 0">{{ cell.count === 0 ? '—' : cell.count }}</b>@if (showBalances && cell.count > 0) { <small>{{ cell.balance | currency }}</small> }</button></td>
-              }
-              <td class="rowtotal"><button type="button" [disabled]="matrix.grandTotal.count === 0" (click)="cellSelected.emit(matrix.grandTotal)"><b>{{ matrix.grandTotal.count }}</b>@if (showBalances) { <small>{{ matrix.grandTotal.balance | currency }}</small> }</button></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
-  `, isInline: true, styles: [":host{display:block}.mbmx{font-family:var(--font);color:var(--t)}.mbmx header{margin-bottom:16px}.mbmx h2{margin:0;font-size:24px}.mbmx header p{margin:5px 0 0;color:var(--m)}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);overflow:auto}table{width:100%;border-collapse:collapse;min-width:640px}th{padding:13px 16px;border-bottom:1px solid var(--b);color:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:right;white-space:nowrap}th.status{text-align:left}td{padding:0;border-bottom:1px solid var(--b);border-left:1px solid color-mix(in srgb,var(--b) 55%,transparent);text-align:right}td.status{border-left:0;padding:14px 16px;text-align:left;white-space:nowrap}tr:last-child td{border-bottom:0}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-style:normal;font-weight:750;padding:5px 9px}td button{display:block;width:100%;min-height:56px;padding:9px 16px;border:0;background:none;color:var(--t);font:inherit;text-align:right;cursor:pointer}td button:disabled{cursor:default}td button:not(:disabled):hover{background:color-mix(in srgb,var(--a) 8%,var(--s))}td button b{display:block;font-size:17px;font-weight:760;font-variant-numeric:tabular-nums}td button b.zero{color:var(--m);font-weight:500}td button small{display:block;margin-top:2px;color:var(--m);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}td.rowtotal,tr.totals td{background:color-mix(in srgb,var(--bg) 78%,var(--s));font-weight:750}tr.totals td.status{color:var(--t);font-weight:750}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillStatusAgingMatrixComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "mindbill-status-aging-matrix", standalone: true, imports: [CommonModule], template: `
-    <section class="mbmx" [ngStyle]="themeStyle" aria-label="Bills by status and age">
-      <header><h2>{{ heading }}</h2><p>{{ description }}</p></header>
-      <div class="card">
-        <table>
-          <thead>
-            <tr><th class="status">Status</th>@for (bucket of buckets; track bucket.id) { <th>{{ bucket.label }}</th> }<th>Total</th></tr>
-          </thead>
-          <tbody>
-            @for (row of matrix.rows; track row.state) {
-              <tr>
-                <td class="status"><i class="pill">{{ row.label }}</i></td>
-                @for (cell of row.cells; track cell.bucket) {
-                  <td><button type="button" [disabled]="cell.count === 0" (click)="cellSelected.emit(cell)"><b [class.zero]="cell.count === 0">{{ cell.count === 0 ? '—' : cell.count }}</b>@if (showBalances && cell.count > 0) { <small>{{ cell.balance | currency }}</small> }</button></td>
-                }
-                <td class="rowtotal"><button type="button" [disabled]="row.total.count === 0" (click)="cellSelected.emit(row.total)"><b>{{ row.total.count }}</b>@if (showBalances) { <small>{{ row.total.balance | currency }}</small> }</button></td>
-              </tr>
-            }
-            <tr class="totals">
-              <td class="status">Total</td>
-              @for (cell of matrix.columnTotals; track cell.bucket) {
-                <td><button type="button" [disabled]="cell.count === 0" (click)="cellSelected.emit(cell)"><b [class.zero]="cell.count === 0">{{ cell.count === 0 ? '—' : cell.count }}</b>@if (showBalances && cell.count > 0) { <small>{{ cell.balance | currency }}</small> }</button></td>
-              }
-              <td class="rowtotal"><button type="button" [disabled]="matrix.grandTotal.count === 0" (click)="cellSelected.emit(matrix.grandTotal)"><b>{{ matrix.grandTotal.count }}</b>@if (showBalances) { <small>{{ matrix.grandTotal.balance | currency }}</small> }</button></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
-  `, styles: [":host{display:block}.mbmx{font-family:var(--font);color:var(--t)}.mbmx header{margin-bottom:16px}.mbmx h2{margin:0;font-size:24px}.mbmx header p{margin:5px 0 0;color:var(--m)}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);overflow:auto}table{width:100%;border-collapse:collapse;min-width:640px}th{padding:13px 16px;border-bottom:1px solid var(--b);color:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:right;white-space:nowrap}th.status{text-align:left}td{padding:0;border-bottom:1px solid var(--b);border-left:1px solid color-mix(in srgb,var(--b) 55%,transparent);text-align:right}td.status{border-left:0;padding:14px 16px;text-align:left;white-space:nowrap}tr:last-child td{border-bottom:0}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-style:normal;font-weight:750;padding:5px 9px}td button{display:block;width:100%;min-height:56px;padding:9px 16px;border:0;background:none;color:var(--t);font:inherit;text-align:right;cursor:pointer}td button:disabled{cursor:default}td button:not(:disabled):hover{background:color-mix(in srgb,var(--a) 8%,var(--s))}td button b{display:block;font-size:17px;font-weight:760;font-variant-numeric:tabular-nums}td button b.zero{color:var(--m);font-weight:500}td button small{display:block;margin-top:2px;color:var(--m);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}td.rowtotal,tr.totals td{background:color-mix(in srgb,var(--bg) 78%,var(--s));font-weight:750}tr.totals td.status{color:var(--t);font-weight:750}\n"] }]
-        }], propDecorators: { bills: [{
-                type: Input
-            }], heading: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], stateOrder: [{
-                type: Input
-            }], showBalances: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }], cellSelected: [{
-                type: Output
-            }] } });
-
-const MINDBILL_BILL_TASKS_TONES = {
-    violet: "#7c53c3",
-    red: "#cf4437",
-    blue: "#2f7fd1",
-    green: "#2c9a5b",
-    amber: "#d9931f",
-    neutral: "#8195a1",
-};
-const MINDBILL_BILL_TASKS_PILL_BASES = ["#2c9a5b", "#1f9aa8", "#dcbb28", "#e08a2e", "#d75d8a"];
-function mindBillBillTasksTone(tone) {
-    return MINDBILL_BILL_TASKS_TONES[tone] ?? MINDBILL_BILL_TASKS_TONES.neutral;
-}
-function mindBillBillTasksPillBase(index) {
-    return MINDBILL_BILL_TASKS_PILL_BASES[index % MINDBILL_BILL_TASKS_PILL_BASES.length];
-}
-/** Click-through payload for a bucket cell (bucketIndex) or a row total (null). */
-function mindBillBillTasksCell(section, row, bucketIndex, buckets) {
-    if (bucketIndex === null) {
-        return {
-            sectionId: section.id,
-            rowId: row.id,
-            bucketId: null,
-            refs: row.refs.flat(),
-            count: row.total,
-        };
+    async addFiles(fileList) {
+        const files = Array.from(fileList);
+        if (!files.length)
+            return;
+        this.errorMessage = "";
+        const invalid = files.find((file) => file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf"));
+        if (invalid) {
+            this.errorMessage = `${invalid.name} is not a PDF.`;
+            return;
+        }
+        const oversized = files.find((file) => file.size > MAX_PDF_BYTES);
+        if (oversized) {
+            this.errorMessage = `${oversized.name} is larger than 25 MB.`;
+            return;
+        }
+        if (this.workingAttachments.length + files.length > MAX_DOCUMENTS) {
+            this.errorMessage = `A bill can include at most ${MAX_DOCUMENTS} attachments.`;
+            return;
+        }
+        const existingBytes = this.workingAttachments.reduce((sum, item) => sum + (item.contentBase64 ? item.contentBase64.length * 0.75 : 0), 0);
+        if (existingBytes + files.reduce((sum, file) => sum + file.size, 0) > MAX_UPLOAD_BYTES) {
+            this.errorMessage = "Attachments exceed the 100 MB upload limit.";
+            return;
+        }
+        for (const file of files)
+            this.workingAttachments.push({ filename: file.name, description: "Supporting document", documentType: "other", contentBase64: await blobToBase64(file), contentUrl: URL.createObjectURL(file) });
+        this.changeDetector.markForCheck();
     }
-    return {
-        sectionId: section.id,
-        rowId: row.id,
-        bucketId: buckets[bucketIndex]?.id ?? null,
-        refs: row.refs[bucketIndex] ?? [],
-        count: row.counts[bucketIndex] ?? 0,
-    };
-}
-
-// daisyBill-style "Bill Tasks" dashboard: one rounded, tone-colored card per
-// task section, rows bucketed by age in days with colored bucket header pills,
-// per-cell click-through counts, and a closing grand-total card. The pure
-// aggregation lives in @mindbill/browser (buildBillTasksDashboard) so React
-// and Angular render the exact same data shape.
-class MindBillBillTasksDashboardComponent {
-    data = null;
-    buckets = BILL_TASKS_AGING_BUCKETS;
-    heading = "";
-    grandTotalLabel = "Bill Tasks Total";
-    emptyLabel = "No Tasks";
-    appearance = { preset: "mindbill" };
-    cellSelected = new EventEmitter();
-    get themeStyle() {
-        return {
-            ...mindBillAngularAppearanceStyle(this.appearance),
-            "--cols": `minmax(150px,1.6fr) repeat(${this.buckets.length},minmax(84px,1fr)) minmax(84px,1fr)`,
-        };
+    async filesSelected(event) {
+        const input = event.target;
+        await this.addFiles(input.files ?? []);
+        input.value = "";
     }
-    tone(section) {
-        return mindBillBillTasksTone(section.tone);
+    removeAttachment(index) { const item = this.workingAttachments[index]; if (item?.contentUrl?.startsWith("blob:"))
+        URL.revokeObjectURL(item.contentUrl); this.workingAttachments.splice(index, 1); }
+    async previewAttachment(attachment) {
+        if (attachment.loadBlob) {
+            const url = URL.createObjectURL(await attachment.loadBlob());
+            window.open(url, "_blank", "noopener,noreferrer");
+            setTimeout(() => URL.revokeObjectURL(url), 60_000);
+        }
+        else if (attachment.contentUrl)
+            window.open(attachment.contentUrl, "_blank", "noopener,noreferrer");
+        else if (attachment.contentBase64)
+            window.open(`data:application/pdf;base64,${attachment.contentBase64}`, "_blank", "noopener,noreferrer");
     }
-    pillBackground(index) {
-        return `color-mix(in srgb,${mindBillBillTasksPillBase(index)} 20%,var(--s))`;
+    bad(path) { return this.invalidFields.has(path) || this.attentionFieldSet.has(path); }
+    validate() {
+        const candidates = [
+            ["patient.firstName", this.bill.patient.firstName], ["patient.lastName", this.bill.patient.lastName], ["patient.dateOfBirth", parseMindBillSubmissionDate(this.bill.patient.dateOfBirth ?? "")],
+            ["patient.address.line1", this.bill.patient.address.line1], ["patient.address.city", this.bill.patient.address.city], ["patient.address.state", this.bill.patient.address.state], ["patient.address.postalCode", this.bill.patient.address.postalCode],
+            ["service.date", parseMindBillSubmissionDate(this.bill.service.date ?? "")], ["claim.dateOfInjury", parseMindBillSubmissionDate(this.bill.claim.dateOfInjury ?? "")], ["claim.claimNumber", this.bill.claim.claimNumber], ["claim.employer", this.bill.claim.employer],
+            ["claim.claimsAdministrator", this.bill.claim.claimsAdministrator.id], ["diagnoses", this.bill.diagnoses.length],
+            ["billingProvider.name", this.bill.billingProvider.name], ["billingProvider.taxId", this.bill.billingProvider.taxId], ["billingProvider.npi", this.bill.billingProvider.npi], ["billingProvider.phone", this.bill.billingProvider.phone],
+            ["billingProvider.address.line1", this.bill.billingProvider.address.line1], ["billingProvider.address.city", this.bill.billingProvider.address.city], ["billingProvider.address.state", this.bill.billingProvider.address.state], ["billingProvider.address.postalCode", this.bill.billingProvider.address.postalCode],
+            ["renderingProvider.name", this.bill.renderingProvider.name], ["renderingProvider.npi", this.bill.renderingProvider.npi], ["renderingProvider.taxonomy", this.bill.renderingProvider.taxonomy],
+            ["serviceLocation.placeOfServiceCode", this.bill.serviceLocation.placeOfServiceCode], ["serviceLocation.address.line1", this.bill.serviceLocation.address.line1], ["serviceLocation.address.city", this.bill.serviceLocation.address.city], ["serviceLocation.address.state", this.bill.serviceLocation.address.state], ["serviceLocation.address.postalCode", this.bill.serviceLocation.address.postalCode],
+            ["serviceLines", this.bill.serviceLines.some((line) => required(line.code) && (line.units ?? 1) > 0)],
+        ];
+        this.invalidFields = new Set(candidates.filter(([, value]) => !value || !required(value)).map(([path]) => path));
+        if (this.invalidFields.size) {
+            this.errorMessage = `Complete ${this.invalidFields.size} highlighted required field${this.invalidFields.size === 1 ? "" : "s"} before submitting.`;
+            setTimeout(() => document.querySelector(".mbs .invalid,.mbs .invalid-set")?.scrollIntoView({ behavior: "smooth", block: "center" }));
+            return false;
+        }
+        return true;
     }
-    pillColor(index) {
-        return `color-mix(in srgb,${mindBillBillTasksPillBase(index)} 62%,var(--t))`;
+    async submissionDocuments() {
+        const documents = [];
+        for (const attachment of this.workingAttachments) {
+            let contentBase64 = attachment.contentBase64;
+            if (!contentBase64 && attachment.loadBlob)
+                contentBase64 = await blobToBase64(await attachment.loadBlob());
+            if (!contentBase64 && attachment.contentUrl) {
+                const response = await fetch(attachment.contentUrl);
+                if (!response.ok)
+                    throw new Error(`Could not load ${attachment.filename}.`);
+                contentBase64 = await blobToBase64(await response.blob());
+            }
+            if (!contentBase64)
+                continue;
+            documents.push({
+                filename: attachment.filename,
+                documentType: attachment.documentType,
+                contentBase64,
+                ...(attachment.externalId ? { externalId: attachment.externalId } : {}),
+                ...(attachment.description ? { description: attachment.description } : {}),
+                ...(attachment.reportTypeCode ? { reportTypeCode: attachment.reportTypeCode } : {}),
+            });
+        }
+        return documents;
     }
-    select(section, row, bucketIndex) {
-        this.cellSelected.emit(mindBillBillTasksCell(section, row, bucketIndex, this.buckets));
+    async submit(event) {
+        event.preventDefault();
+        this.errorMessage = "";
+        if (!this.validate())
+            return;
+        this.submitting = true;
+        try {
+            const bill = deepCopyBill(this.bill);
+            bill.patient.dateOfBirth = parseMindBillSubmissionDate(bill.patient.dateOfBirth ?? "") ?? bill.patient.dateOfBirth;
+            bill.service.date = parseMindBillSubmissionDate(bill.service.date ?? "") ?? bill.service.date;
+            bill.claim.dateOfInjury = parseMindBillSubmissionDate(bill.claim.dateOfInjury ?? "") ?? bill.claim.dateOfInjury;
+            bill.serviceLines = bill.serviceLines
+                .filter((line) => line.code.trim())
+                .map((line) => {
+                const charge = line.charge ?? this.allowed(line);
+                return charge == null ? line : { ...line, charge };
+            });
+            const input = { bill, documents: await this.submissionDocuments() };
+            const result = this.submitter
+                ? await this.submitter(input)
+                : await createBillSubmissionClient({ sessionEndpoint: this.sessionEndpoint, ...(this.getSession ? { getSession: this.getSession } : {}), ...(this.apiBaseUrl ? { apiBaseUrl: this.apiBaseUrl } : {}) }).submitBill(input);
+            this.submitted.emit(result);
+        }
+        catch (value) {
+            const error = value instanceof Error ? value : new Error("The bill could not be submitted.");
+            this.errorMessage = error.message;
+            this.submissionError.emit(error);
+        }
+        finally {
+            this.submitting = false;
+            this.changeDetector.markForCheck();
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillTasksDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillTasksDashboardComponent, isStandalone: true, selector: "mindbill-bill-tasks-dashboard", inputs: { data: "data", buckets: "buckets", heading: "heading", grandTotalLabel: "grandTotalLabel", emptyLabel: "emptyLabel", appearance: "appearance" }, outputs: { cellSelected: "cellSelected" }, ngImport: i0, template: `
-    <div class="mbtk" [ngStyle]="themeStyle">
-      @if (heading) { <header class="heading"><h2>{{ heading }}</h2></header> }
-      @for (section of data?.sections ?? []; track section.id) {
-        <section class="card" [style.borderColor]="tone(section)" [attr.aria-label]="section.label">
-          <div class="grid head" [style.borderBottomColor]="tone(section)">
-            <span class="title">
-              <i class="dot" [style.background]="tone(section)"></i>
-              <span class="title-text"><strong>{{ section.label }}</strong><span class="basis">by {{ section.agingBasisLabel }}</span></span>
-            </span>
-            @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
-              <span class="pill" [style.background]="pillBackground(bucketIndex)" [style.color]="pillColor(bucketIndex)">{{ bucket.label }}</span>
-            }
-            <span class="colhead">Task Total</span>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillSubmissionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillSubmissionComponent, isStandalone: true, selector: "mindbill-bill-submission", inputs: { initialBill: "initialBill", attachments: "attachments", appearance: "appearance", sessionEndpoint: "sessionEndpoint", getSession: "getSession", apiBaseUrl: "apiBaseUrl", heading: "heading", description: "description", submitLabel: "submitLabel", attentionFields: "attentionFields", procedureOptions: "procedureOptions", modifierOptions: "modifierOptions", taxonomyOptions: "taxonomyOptions", submitter: "submitter" }, outputs: { submitted: "submitted", submissionError: "submissionError", billChange: "billChange" }, host: { listeners: { "window:dragover": "onWindowDragOver($event)", "window:dragleave": "onWindowDragLeave($event)", "window:drop": "onWindowDrop($event)" } }, usesOnChanges: true, ngImport: i0, template: `
+    <form class="mbs" [ngStyle]="themeStyle" (submit)="submit($event)" novalidate>
+      <div class="intro"><div><h2>{{ heading }}</h2><p>{{ description }}</p></div><span><b>*</b> Required</span></div>
+
+      <fieldset id="mbs-patient"><legend>Patient</legend><div class="grid">
+        <label [class.invalid]="bad('patient.firstName')">First name <b>*</b><input name="firstName" [(ngModel)]="bill.patient.firstName"></label>
+        <label [class.invalid]="bad('patient.lastName')">Last name <b>*</b><input name="lastName" [(ngModel)]="bill.patient.lastName"></label>
+        <label [class.invalid]="bad('patient.dateOfBirth')">Date of birth <b>*</b><mindbill-date-input ariaLabel="Date of birth" [value]="bill.patient.dateOfBirth" (valueChange)="setDate('patient.dateOfBirth', $event)"/></label>
+        <label>Phone (optional)<input name="phone" type="tel" [(ngModel)]="bill.patient.phone"></label>
+        <label class="wide" [class.invalid]="bad('patient.address.line1')">Address <b>*</b><input name="address" [(ngModel)]="bill.patient.address.line1"></label>
+        <label [class.invalid]="bad('patient.address.postalCode')">ZIP <b>*</b><input name="zip" [(ngModel)]="bill.patient.address.postalCode" (ngModelChange)="postalChanged($event)" inputmode="numeric">@if (postalStatus) { <small>{{ postalStatus }}</small> }</label>
+        <label [class.invalid]="bad('patient.address.city')">City <b>*</b><input name="city" [(ngModel)]="bill.patient.address.city"></label>
+        <label [class.invalid]="bad('patient.address.state')">State <b>*</b><input name="state" [(ngModel)]="bill.patient.address.state" maxlength="2"></label>
+      </div></fieldset>
+
+      <fieldset id="mbs-claim"><legend>Injury &amp; claim</legend><div class="grid">
+        <label [class.invalid]="bad('service.date')">Date of service <b>*</b><mindbill-date-input ariaLabel="Date of service" [value]="bill.service.date" (valueChange)="setDate('service.date', $event)"/></label>
+        <label [class.invalid]="bad('claim.dateOfInjury')">Date of injury <b>*</b><mindbill-date-input ariaLabel="Date of injury" [value]="bill.claim.dateOfInjury" (valueChange)="setDate('claim.dateOfInjury', $event)"/></label>
+        <label class="wide">Treatment authorization # (optional)<input name="authNumber" [ngModel]="bill.service.authorizationNumber || ''" (ngModelChange)="setAuthorizationNumber($event)" placeholder="Utilization-review authorization number"><small>Rides on the bill as CMS-1500 Box 23 / 837 REF*G1.</small></label>
+        <label [class.invalid]="bad('claim.claimNumber')">Claim number <b>*</b><input name="claimNumber" [(ngModel)]="bill.claim.claimNumber"></label>
+        <label [class.invalid]="bad('claim.employer')">Employer <b>*</b><input name="employer" [(ngModel)]="bill.claim.employer"></label>
+        <div class="wide lookup" [class.invalid]="bad('claim.claimsAdministrator')"><label>Claims administrator <b>*</b></label>
+          <input name="payerQuery" [(ngModel)]="payerQuery" (focus)="searchPayers()" (input)="searchPayers()" placeholder="Search the MindBill payer directory…" autocomplete="off">
+          @if (payerBusy) { <small>Searching directory…</small> }
+          @if (payerResults.length) { <div class="options">@for (payer of payerResults; track payer.id) { <button type="button" (click)="selectPayer(payer)"><strong>{{ payer.name }}</strong><span>{{ payer.hasElectronic ? 'Electronic routing' : 'Paper / fax' }}@if (payer.confidence) { · {{ payer.confidence }} match }</span></button> }</div> }
+          @if (bill.claim.claimsAdministrator.id) { <small class="selected">✓ Routed to {{ bill.claim.claimsAdministrator.name }}</small> }
+        </div>
+        <label class="wide">Injury description (optional)<input name="description" [(ngModel)]="bill.claim.description"></label>
+        <div class="wide diagnosis" [class.invalid]="bad('diagnoses')"><label>Diagnosis codes (ICD-10) <b>*</b></label>
+          <div class="quick">@for (item of quickDiagnoses; track item.code) { <button type="button" [class.on]="hasDiagnosis(item.code)" (click)="toggleDiagnosis(item)">{{ hasDiagnosis(item.code) ? '✓' : '+' }} {{ item.label }}</button> }</div>
+          @if (bill.diagnoses.length) { <div class="chips">@for (code of bill.diagnoses; track code) { <button type="button" (click)="removeDiagnosis(code)"><strong>{{ code }}</strong> ×</button> }</div> }
+          <input name="diagnosisQuery" [(ngModel)]="diagnosisQuery" (focus)="searchDiagnoses(true)" (input)="searchDiagnoses(true)" placeholder="Search ICD-10 codes…" autocomplete="off">
+          @if (diagnosisBusy && !diagnosisResults.length) { <small>Searching ICD-10 directory…</small> }
+          @if (diagnosisResults.length) { <div class="options diagnoses" (scroll)="diagnosisScrolled($event)">@for (item of diagnosisResults; track item.code) { <button type="button" (click)="addDiagnosis(item)"><strong>{{ item.code }}</strong><span>{{ item.description }}</span></button> }</div> }
+        </div>
+      </div></fieldset>
+
+      <fieldset id="mbs-provider"><legend>Providers &amp; place of service</legend><div class="grid">
+        <h3 class="wide">Billing provider</h3>
+        <label [class.invalid]="bad('billingProvider.name')">Billing provider name <b>*</b><input name="billingProvider" [(ngModel)]="bill.billingProvider.name"></label>
+        <label [class.invalid]="bad('billingProvider.taxId')">Tax ID <b>*</b><input name="taxId" [(ngModel)]="bill.billingProvider.taxId"></label>
+        <label [class.invalid]="bad('billingProvider.npi')">Billing NPI <b>*</b><input name="billingNpi" [(ngModel)]="bill.billingProvider.npi" inputmode="numeric" maxlength="10"></label>
+        <label [class.invalid]="bad('billingProvider.phone')">Billing phone <b>*</b><input name="billingPhone" type="tel" [(ngModel)]="bill.billingProvider.phone"></label>
+        <label class="wide" [class.invalid]="bad('billingProvider.address.line1')">Billing address <b>*</b><input name="billingAddress" [(ngModel)]="bill.billingProvider.address.line1"></label>
+        <label [class.invalid]="bad('billingProvider.address.postalCode')">Billing ZIP <b>*</b><input name="billingZip" [(ngModel)]="bill.billingProvider.address.postalCode" inputmode="numeric"></label>
+        <label [class.invalid]="bad('billingProvider.address.city')">Billing city <b>*</b><input name="billingCity" [(ngModel)]="bill.billingProvider.address.city"></label>
+        <label [class.invalid]="bad('billingProvider.address.state')">Billing state <b>*</b><input name="billingState" [(ngModel)]="bill.billingProvider.address.state" maxlength="2"></label>
+        <h3 class="wide">Rendering provider</h3>
+        <label [class.invalid]="bad('renderingProvider.name')">Rendering provider name <b>*</b><input name="renderingProvider" [(ngModel)]="bill.renderingProvider.name"></label>
+        <label [class.invalid]="bad('renderingProvider.npi')">Rendering provider NPI <b>*</b><input name="renderingNpi" [(ngModel)]="bill.renderingProvider.npi" inputmode="numeric" maxlength="10"></label>
+        <div class="wide" [class.invalid]="bad('renderingProvider.taxonomy')"><label>Rendering taxonomy <b>*</b></label>
+          <mindbill-combo-box ariaLabel="Rendering taxonomy" [value]="bill.renderingProvider.taxonomy || ''" [invalid]="bad('renderingProvider.taxonomy')" [preserveValueOnOpen]="true" placeholder="Search specialty name or taxonomy code…" [options]="taxonomyComboOptions" [createOption]="customTaxonomyOption" (selected)="selectTaxonomy($event)"/>
+          <small>Search by specialty name or 10-character taxonomy code.</small>
+        </div>
+        <h3 class="wide">Place of service</h3>
+        <label [class.invalid]="bad('serviceLocation.placeOfServiceCode')">Place of service code <b>*</b><input name="pos" [(ngModel)]="bill.serviceLocation.placeOfServiceCode" placeholder="11" inputmode="numeric" maxlength="2"></label>
+        <label class="wide" [class.invalid]="bad('serviceLocation.address.line1')">Service address <b>*</b><input name="serviceAddress" [(ngModel)]="bill.serviceLocation.address.line1"></label>
+        <label [class.invalid]="bad('serviceLocation.address.postalCode')">Service ZIP <b>*</b><input name="serviceZip" [(ngModel)]="bill.serviceLocation.address.postalCode" inputmode="numeric"></label>
+        <label [class.invalid]="bad('serviceLocation.address.city')">Service city <b>*</b><input name="serviceCity" [(ngModel)]="bill.serviceLocation.address.city"></label>
+        <label [class.invalid]="bad('serviceLocation.address.state')">Service state <b>*</b><input name="serviceState" [(ngModel)]="bill.serviceLocation.address.state" maxlength="2"></label>
+      </div></fieldset>
+
+      <fieldset id="mbs-lines" [class.invalid-set]="bad('serviceLines')"><legend>Service lines</legend>
+        <div class="line-head"><span>Procedure code *</span><span>Modifiers</span><span>Dx</span><span>Units *</span><span>Allowed</span><span></span></div>
+        @for (line of bill.serviceLines; track $index; let index = $index) { <div class="service-line">
+          <div class="cell"><span class="mobile-label">Procedure</span>
+            <mindbill-combo-box [ariaLabel]="'Procedure code ' + (index + 1)" [value]="line.code" placeholder="Search or enter code…" [options]="procedureComboOptions" [createOption]="customProcedureOption" (selected)="selectProcedure(index, $event)"/>
+            @if (line.code) { <small>{{ procedureDescription(line.code) || 'Custom CPT, HCPCS, or medical-legal code' }}</small> }
           </div>
-          @if (section.empty) {
-            <p class="empty">{{ emptyLabel }}</p>
-          } @else {
-            @for (row of section.rows; track row.id) {
-              <div class="grid row">
-                <span class="rowlabel">{{ row.label }}</span>
-                @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
-                  <span class="count">
-                    @if ((row.counts[bucketIndex] ?? 0) > 0) {
-                      <button type="button" class="link" (click)="select(section, row, bucketIndex)">{{ row.counts[bucketIndex] }}</button>
-                    } @else { <span class="zero">0</span> }
-                  </span>
+          <div class="cell"><span class="mobile-label">Modifiers</span>
+            @if (line.modifiers?.length) { <div class="chips">@for (modifier of line.modifiers; track modifier) { <button type="button" (click)="removeModifier(index, modifier)" [attr.aria-label]="'Remove modifier ' + modifier">−{{ modifier }} ×</button> }</div> }
+            <mindbill-combo-box [ariaLabel]="'Modifiers ' + (index + 1)" value="" [placeholder]="line.modifiers?.length ? line.modifiers!.length + ' modifier' + (line.modifiers!.length === 1 ? '' : 's') : 'Add modifiers…'" [options]="modifierComboOptions(line)" (selected)="addModifier(index, $event)"/>
+          </div>
+          <div class="cell"><span class="mobile-label">Dx pointers</span>
+            <div class="dx">
+              @if (bill.diagnoses.length) {
+                @for (code of bill.diagnoses; track code; let dxIndex = $index) {
+                  <button type="button" [class.on]="hasDiagnosisPointer(line, dxIndex + 1)" [title]="dxLetter(dxIndex + 1) + ' — ' + code" [attr.aria-pressed]="hasDiagnosisPointer(line, dxIndex + 1)" [attr.aria-label]="'Point line ' + (index + 1) + ' at diagnosis ' + code" (click)="toggleDiagnosisPointer(index, dxIndex + 1)">{{ dxLetter(dxIndex + 1) }}</button>
                 }
-                <span class="total">
-                  @if (row.total > 0) {
-                    <button type="button" class="link" (click)="select(section, row, null)">{{ row.total }}</button>
-                  } @else { <span class="zero">0</span> }
-                </span>
-              </div>
-            }
-            <div class="grid row totals">
-              <span class="rowlabel">Total</span>
-              @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
-                <span class="count">{{ section.totals[bucketIndex] ?? 0 }}</span>
-              }
-              <span class="total">{{ section.total }}</span>
+              } @else { <small>Add diagnoses above</small> }
             </div>
-          }
-        </section>
-      }
-      <section class="card grand" [attr.aria-label]="grandTotalLabel">
-        <div class="grid row totals">
-          <span class="rowlabel grand-label">{{ grandTotalLabel }}</span>
-          @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
-            <span class="count">{{ data?.grandTotals?.[bucketIndex] ?? 0 }}</span>
-          }
-          <span class="total">{{ data?.grandTotal ?? 0 }}</span>
-        </div>
-      </section>
-    </div>
-  `, isInline: true, styles: [":host{display:block}.mbtk{color:var(--t);font-family:var(--font);font-size:14px}.heading{margin-bottom:14px}.heading h2{margin:0;font-size:24px}.card{margin-bottom:16px;border:1.5px solid var(--b);border-radius:var(--r);background:var(--s);overflow:hidden}.grid{display:grid;grid-template-columns:var(--cols);gap:0 10px;align-items:center;padding:0 16px}.head{padding:12px 16px;border-bottom:1px solid var(--b)}.title{display:flex;align-items:center;gap:9px;min-width:0}.dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%}.title-text{min-width:0}.title-text strong{display:block;font-size:15.5px;line-height:1.3}.basis{display:block;color:var(--m);font-size:12px;line-height:1.35}.pill{justify-self:stretch;padding:5px 6px;border-radius:999px;font-size:11px;font-weight:750;line-height:1.25;text-align:center;white-space:nowrap}.colhead{justify-self:stretch;color:var(--m);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:center;white-space:nowrap}.row{border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);min-height:44px}.row:first-of-type{border-top:0}.rowlabel{color:var(--m);font-size:13px;line-height:1.35;padding:9px 0;overflow-wrap:anywhere}.count,.total{text-align:center;font-variant-numeric:tabular-nums}.zero{color:var(--m)}.link{border:0;background:none;padding:6px 8px;color:var(--a);font:inherit;font-weight:750;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:6px}.link:hover{text-decoration:underline;background:color-mix(in srgb,var(--a) 8%,transparent)}.totals{background:color-mix(in srgb,var(--bg) 78%,var(--s));border-top:1px solid var(--b);font-weight:760}.totals .rowlabel{color:var(--t);font-weight:760}.empty{margin:0;padding:22px 16px;color:var(--m);text-align:center}.grand{border-color:var(--b)}.grand .row{min-height:52px}.grand-label{font-size:14px;font-weight:800}@media(max-width:760px){.pill,.colhead,.count{display:none}.grid{grid-template-columns:minmax(0,1fr) auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+          </div>
+          <label><span class="mobile-label">Units</span><input [name]="'units'+index" type="number" min="1" [(ngModel)]="line.units"></label>
+          <strong>{{ allowed(line) == null ? '—' : (allowed(line) | currency) }}</strong>
+          <button class="remove" type="button" (click)="removeLine(index)" aria-label="Remove service line">×</button>
+        </div> }
+        <div class="total"><span>Total</span><strong>{{ totalAllowed | currency }}</strong></div>
+      </fieldset>
+
+      <fieldset><legend>Attachments</legend>
+        @for (attachment of workingAttachments; track attachment.filename; let index = $index) { <div class="attachment" [class.locked]="attachment.locked"><div><strong>{{ attachment.filename }}</strong><span>{{ attachment.description || attachment.badge || 'Supporting document' }}</span></div><div class="attachment-actions"><button type="button" (click)="previewAttachment(attachment)">Preview</button>@if (!attachment.locked) { <button type="button" (click)="removeAttachment(index)" aria-label="Remove attachment">×</button> }</div></div> }
+        <label class="dropzone" [class.drag-active]="dragActive"><input type="file" accept="application/pdf,.pdf" multiple (change)="filesSelected($event)"><strong>Drop additional PDF files here, or click to choose</strong><span>Add supporting documents by dropping them anywhere on this screen.</span></label>
+      </fieldset>
+
+      @if (errorMessage) { <div class="error" role="alert">{{ errorMessage }}</div> }
+      <div class="submit-row"><span>{{ invalidFields.size ? 'Complete the highlighted required fields.' : 'All required billing data is ready.' }}</span><button type="submit" [disabled]="submitting">{{ submitting ? 'Submitting…' : submitLabel }}</button></div>
+      @if (dragActive) { <div class="drop-overlay" aria-hidden="true"><div><strong>Drop PDFs to attach</strong><span>Supporting documents are added to this submission.</span></div></div> }
+    </form>
+  `, isInline: true, styles: [":host{display:block}.mbs{--danger:#c83c3c;font-family:var(--font);color:var(--t)}*{box-sizing:border-box}.intro{display:flex;justify-content:space-between;align-items:start;margin:0 0 24px}.intro h2{margin:0;font-size:24px;font-weight:600}.intro p{margin:6px 0 0;color:var(--m)}.intro>span{color:var(--m);font-size:13px}.mbs b{color:inherit}.intro b,label>b,.lookup>label>b,.diagnosis>label>b,.cell>label>b{color:var(--danger)}fieldset{border:1px solid var(--b);border-radius:var(--r);margin:0 0 22px;padding:24px 26px 26px;background:var(--s)}legend{padding:0 10px;font-size:18px;font-weight:700}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}.wide{grid-column:1/-1}h3{margin:4px 0 -4px;padding-top:12px;border-top:1px solid var(--b);font-size:16px}h3:first-child{border:0;padding-top:0}label,.lookup,.diagnosis{display:grid;gap:8px;font-size:14px;font-weight:700}.grid>label{display:flex;flex-wrap:wrap;align-content:start;align-items:center;column-gap:4px;row-gap:8px}.grid>label>input,.grid>label>select,.grid>label>small,.grid>label>mindbill-date-input{flex:0 0 100%}.grid>div.wide{display:grid;gap:8px;font-size:14px;font-weight:700}input,select{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus,select:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}.invalid input,.invalid select,.invalid-set{border-color:var(--danger)!important;background:color-mix(in srgb,var(--danger) 4%,var(--s))}.invalid>label{color:var(--danger)}small{color:var(--m);font-weight:450}.selected{color:#238655}.options{position:relative;z-index:4;max-height:300px;overflow:auto;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);box-shadow:0 14px 35px #172b3730}.options button{display:grid;width:100%;gap:3px;border:0;border-bottom:1px solid var(--b);background:var(--s);padding:12px 14px;text-align:left;color:var(--t);cursor:pointer}.options button:hover{background:color-mix(in srgb,var(--a) 7%,var(--s))}.options span{color:var(--m);font-size:12px}.quick,.chips{display:flex;flex-wrap:wrap;gap:8px}.quick button,.chips button{border:1px solid var(--b);border-radius:999px;background:var(--s);padding:7px 11px;color:var(--t);font:inherit;font-size:13px;cursor:pointer}.quick .on{border-color:var(--a);color:var(--a);background:color-mix(in srgb,var(--a) 8%,var(--s))}.chips button{border-color:color-mix(in srgb,var(--a) 40%,var(--b));background:color-mix(in srgb,var(--a) 7%,var(--s));font-weight:700}.dx{display:flex;flex-wrap:wrap;gap:5px;padding-top:6px}.dx button{width:30px;height:30px;border:1px solid var(--b);border-radius:8px;background:var(--s);color:var(--m);font:inherit;font-size:13px;font-weight:750;cursor:pointer;padding:0}.dx button.on{border-color:var(--a);background:color-mix(in srgb,var(--a) 10%,var(--s));color:var(--a)}.line-head,.service-line{display:grid;grid-template-columns:1.5fr 1.35fr .8fr .5fr .7fr 36px;gap:14px;align-items:start}.line-head{padding:0 0 9px;color:var(--m);font-size:12px;font-weight:700}.service-line{border-top:1px solid var(--b);padding:12px 0}.service-line label,.service-line .cell{display:grid;gap:6px;font-size:14px;font-weight:700}.service-line strong{text-align:right;padding-top:12px}.remove{border:0;background:transparent;color:var(--m);font-size:25px;cursor:pointer}.mobile-label{display:none}.total{display:flex;justify-content:flex-end;gap:36px;border-top:1px solid var(--b);padding-top:14px;font-size:17px}.attachment{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--b);border-radius:var(--cr);margin-bottom:10px;padding:14px 16px}.attachment.locked{border-color:#9fd6b4;background:#f3fcf6}.attachment>div:first-child{display:grid;gap:4px}.attachment span{color:var(--m);font-size:13px}.attachment-actions{display:flex;gap:8px}.attachment button{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:8px 12px;color:var(--t);font-weight:700;cursor:pointer}.dropzone{position:relative;display:grid;min-height:170px;place-content:center;gap:8px;border:2px dashed color-mix(in srgb,var(--m) 60%,transparent);border-radius:var(--cr);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.dropzone.drag-active{border-color:var(--a);background:color-mix(in srgb,var(--a) 8%,var(--s))}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.dropzone span{color:var(--m);font-weight:450}.drop-overlay{position:fixed;inset:0;z-index:60;display:grid;place-content:center;background:color-mix(in srgb,var(--a) 14%,#ffffffd9);pointer-events:none}.drop-overlay div{display:grid;gap:6px;border:2px dashed var(--a);border-radius:var(--r);background:var(--s);padding:34px 44px;text-align:center;box-shadow:0 24px 60px #172b3740}.drop-overlay strong{font-size:19px}.drop-overlay span{color:var(--m)}.error{margin:0 0 14px;border-left:4px solid var(--danger);border-radius:var(--cr);background:color-mix(in srgb,var(--danger) 10%,var(--s));padding:14px;color:var(--danger)}.submit-row{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--b);border-radius:var(--r);background:color-mix(in srgb,var(--s) 96%,transparent);box-shadow:0 -8px 24px #172b3718;padding:14px 18px}.submit-row>span{color:#43835f}.submit-row button{min-width:190px;border:0;border-radius:var(--cr);background:var(--a);color:var(--ac);padding:12px 24px;font:inherit;font-weight:800;cursor:pointer}.submit-row button:disabled{opacity:.6;cursor:wait}@media(max-width:760px){fieldset{padding:18px 16px}.grid{grid-template-columns:1fr}.wide{grid-column:auto}.intro{display:grid;gap:10px}.line-head{display:none}.service-line{grid-template-columns:1fr 1fr}.service-line>*{grid-column:1/-1}.service-line label:nth-child(3){grid-column:1}.service-line>strong{grid-column:2;grid-row:3;text-align:left}.service-line>.remove{grid-column:1/-1}.mobile-label{display:block;color:var(--m);font-size:12px}.attachment{align-items:flex-start}.attachment-actions{align-items:center}.submit-row>span{display:none}.submit-row button{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MindBillComboBoxComponent, selector: "mindbill-combo-box", inputs: ["value", "placeholder", "options", "disabled", "loading", "loadingMore", "invalid", "preserveValueOnOpen", "ariaLabel", "createOption"], outputs: ["opened", "queryChange", "endReached", "selected"] }, { kind: "component", type: MindBillDateInputComponent, selector: "mindbill-date-input", inputs: ["value", "disabled", "ariaLabel"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillTasksDashboardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillSubmissionComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mindbill-bill-tasks-dashboard", standalone: true, imports: [CommonModule], template: `
-    <div class="mbtk" [ngStyle]="themeStyle">
-      @if (heading) { <header class="heading"><h2>{{ heading }}</h2></header> }
-      @for (section of data?.sections ?? []; track section.id) {
-        <section class="card" [style.borderColor]="tone(section)" [attr.aria-label]="section.label">
-          <div class="grid head" [style.borderBottomColor]="tone(section)">
-            <span class="title">
-              <i class="dot" [style.background]="tone(section)"></i>
-              <span class="title-text"><strong>{{ section.label }}</strong><span class="basis">by {{ section.agingBasisLabel }}</span></span>
-            </span>
-            @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
-              <span class="pill" [style.background]="pillBackground(bucketIndex)" [style.color]="pillColor(bucketIndex)">{{ bucket.label }}</span>
-            }
-            <span class="colhead">Task Total</span>
+            args: [{ selector: "mindbill-bill-submission", standalone: true, imports: [CommonModule, FormsModule, MindBillComboBoxComponent, MindBillDateInputComponent], template: `
+    <form class="mbs" [ngStyle]="themeStyle" (submit)="submit($event)" novalidate>
+      <div class="intro"><div><h2>{{ heading }}</h2><p>{{ description }}</p></div><span><b>*</b> Required</span></div>
+
+      <fieldset id="mbs-patient"><legend>Patient</legend><div class="grid">
+        <label [class.invalid]="bad('patient.firstName')">First name <b>*</b><input name="firstName" [(ngModel)]="bill.patient.firstName"></label>
+        <label [class.invalid]="bad('patient.lastName')">Last name <b>*</b><input name="lastName" [(ngModel)]="bill.patient.lastName"></label>
+        <label [class.invalid]="bad('patient.dateOfBirth')">Date of birth <b>*</b><mindbill-date-input ariaLabel="Date of birth" [value]="bill.patient.dateOfBirth" (valueChange)="setDate('patient.dateOfBirth', $event)"/></label>
+        <label>Phone (optional)<input name="phone" type="tel" [(ngModel)]="bill.patient.phone"></label>
+        <label class="wide" [class.invalid]="bad('patient.address.line1')">Address <b>*</b><input name="address" [(ngModel)]="bill.patient.address.line1"></label>
+        <label [class.invalid]="bad('patient.address.postalCode')">ZIP <b>*</b><input name="zip" [(ngModel)]="bill.patient.address.postalCode" (ngModelChange)="postalChanged($event)" inputmode="numeric">@if (postalStatus) { <small>{{ postalStatus }}</small> }</label>
+        <label [class.invalid]="bad('patient.address.city')">City <b>*</b><input name="city" [(ngModel)]="bill.patient.address.city"></label>
+        <label [class.invalid]="bad('patient.address.state')">State <b>*</b><input name="state" [(ngModel)]="bill.patient.address.state" maxlength="2"></label>
+      </div></fieldset>
+
+      <fieldset id="mbs-claim"><legend>Injury &amp; claim</legend><div class="grid">
+        <label [class.invalid]="bad('service.date')">Date of service <b>*</b><mindbill-date-input ariaLabel="Date of service" [value]="bill.service.date" (valueChange)="setDate('service.date', $event)"/></label>
+        <label [class.invalid]="bad('claim.dateOfInjury')">Date of injury <b>*</b><mindbill-date-input ariaLabel="Date of injury" [value]="bill.claim.dateOfInjury" (valueChange)="setDate('claim.dateOfInjury', $event)"/></label>
+        <label class="wide">Treatment authorization # (optional)<input name="authNumber" [ngModel]="bill.service.authorizationNumber || ''" (ngModelChange)="setAuthorizationNumber($event)" placeholder="Utilization-review authorization number"><small>Rides on the bill as CMS-1500 Box 23 / 837 REF*G1.</small></label>
+        <label [class.invalid]="bad('claim.claimNumber')">Claim number <b>*</b><input name="claimNumber" [(ngModel)]="bill.claim.claimNumber"></label>
+        <label [class.invalid]="bad('claim.employer')">Employer <b>*</b><input name="employer" [(ngModel)]="bill.claim.employer"></label>
+        <div class="wide lookup" [class.invalid]="bad('claim.claimsAdministrator')"><label>Claims administrator <b>*</b></label>
+          <input name="payerQuery" [(ngModel)]="payerQuery" (focus)="searchPayers()" (input)="searchPayers()" placeholder="Search the MindBill payer directory…" autocomplete="off">
+          @if (payerBusy) { <small>Searching directory…</small> }
+          @if (payerResults.length) { <div class="options">@for (payer of payerResults; track payer.id) { <button type="button" (click)="selectPayer(payer)"><strong>{{ payer.name }}</strong><span>{{ payer.hasElectronic ? 'Electronic routing' : 'Paper / fax' }}@if (payer.confidence) { · {{ payer.confidence }} match }</span></button> }</div> }
+          @if (bill.claim.claimsAdministrator.id) { <small class="selected">✓ Routed to {{ bill.claim.claimsAdministrator.name }}</small> }
+        </div>
+        <label class="wide">Injury description (optional)<input name="description" [(ngModel)]="bill.claim.description"></label>
+        <div class="wide diagnosis" [class.invalid]="bad('diagnoses')"><label>Diagnosis codes (ICD-10) <b>*</b></label>
+          <div class="quick">@for (item of quickDiagnoses; track item.code) { <button type="button" [class.on]="hasDiagnosis(item.code)" (click)="toggleDiagnosis(item)">{{ hasDiagnosis(item.code) ? '✓' : '+' }} {{ item.label }}</button> }</div>
+          @if (bill.diagnoses.length) { <div class="chips">@for (code of bill.diagnoses; track code) { <button type="button" (click)="removeDiagnosis(code)"><strong>{{ code }}</strong> ×</button> }</div> }
+          <input name="diagnosisQuery" [(ngModel)]="diagnosisQuery" (focus)="searchDiagnoses(true)" (input)="searchDiagnoses(true)" placeholder="Search ICD-10 codes…" autocomplete="off">
+          @if (diagnosisBusy && !diagnosisResults.length) { <small>Searching ICD-10 directory…</small> }
+          @if (diagnosisResults.length) { <div class="options diagnoses" (scroll)="diagnosisScrolled($event)">@for (item of diagnosisResults; track item.code) { <button type="button" (click)="addDiagnosis(item)"><strong>{{ item.code }}</strong><span>{{ item.description }}</span></button> }</div> }
+        </div>
+      </div></fieldset>
+
+      <fieldset id="mbs-provider"><legend>Providers &amp; place of service</legend><div class="grid">
+        <h3 class="wide">Billing provider</h3>
+        <label [class.invalid]="bad('billingProvider.name')">Billing provider name <b>*</b><input name="billingProvider" [(ngModel)]="bill.billingProvider.name"></label>
+        <label [class.invalid]="bad('billingProvider.taxId')">Tax ID <b>*</b><input name="taxId" [(ngModel)]="bill.billingProvider.taxId"></label>
+        <label [class.invalid]="bad('billingProvider.npi')">Billing NPI <b>*</b><input name="billingNpi" [(ngModel)]="bill.billingProvider.npi" inputmode="numeric" maxlength="10"></label>
+        <label [class.invalid]="bad('billingProvider.phone')">Billing phone <b>*</b><input name="billingPhone" type="tel" [(ngModel)]="bill.billingProvider.phone"></label>
+        <label class="wide" [class.invalid]="bad('billingProvider.address.line1')">Billing address <b>*</b><input name="billingAddress" [(ngModel)]="bill.billingProvider.address.line1"></label>
+        <label [class.invalid]="bad('billingProvider.address.postalCode')">Billing ZIP <b>*</b><input name="billingZip" [(ngModel)]="bill.billingProvider.address.postalCode" inputmode="numeric"></label>
+        <label [class.invalid]="bad('billingProvider.address.city')">Billing city <b>*</b><input name="billingCity" [(ngModel)]="bill.billingProvider.address.city"></label>
+        <label [class.invalid]="bad('billingProvider.address.state')">Billing state <b>*</b><input name="billingState" [(ngModel)]="bill.billingProvider.address.state" maxlength="2"></label>
+        <h3 class="wide">Rendering provider</h3>
+        <label [class.invalid]="bad('renderingProvider.name')">Rendering provider name <b>*</b><input name="renderingProvider" [(ngModel)]="bill.renderingProvider.name"></label>
+        <label [class.invalid]="bad('renderingProvider.npi')">Rendering provider NPI <b>*</b><input name="renderingNpi" [(ngModel)]="bill.renderingProvider.npi" inputmode="numeric" maxlength="10"></label>
+        <div class="wide" [class.invalid]="bad('renderingProvider.taxonomy')"><label>Rendering taxonomy <b>*</b></label>
+          <mindbill-combo-box ariaLabel="Rendering taxonomy" [value]="bill.renderingProvider.taxonomy || ''" [invalid]="bad('renderingProvider.taxonomy')" [preserveValueOnOpen]="true" placeholder="Search specialty name or taxonomy code…" [options]="taxonomyComboOptions" [createOption]="customTaxonomyOption" (selected)="selectTaxonomy($event)"/>
+          <small>Search by specialty name or 10-character taxonomy code.</small>
+        </div>
+        <h3 class="wide">Place of service</h3>
+        <label [class.invalid]="bad('serviceLocation.placeOfServiceCode')">Place of service code <b>*</b><input name="pos" [(ngModel)]="bill.serviceLocation.placeOfServiceCode" placeholder="11" inputmode="numeric" maxlength="2"></label>
+        <label class="wide" [class.invalid]="bad('serviceLocation.address.line1')">Service address <b>*</b><input name="serviceAddress" [(ngModel)]="bill.serviceLocation.address.line1"></label>
+        <label [class.invalid]="bad('serviceLocation.address.postalCode')">Service ZIP <b>*</b><input name="serviceZip" [(ngModel)]="bill.serviceLocation.address.postalCode" inputmode="numeric"></label>
+        <label [class.invalid]="bad('serviceLocation.address.city')">Service city <b>*</b><input name="serviceCity" [(ngModel)]="bill.serviceLocation.address.city"></label>
+        <label [class.invalid]="bad('serviceLocation.address.state')">Service state <b>*</b><input name="serviceState" [(ngModel)]="bill.serviceLocation.address.state" maxlength="2"></label>
+      </div></fieldset>
+
+      <fieldset id="mbs-lines" [class.invalid-set]="bad('serviceLines')"><legend>Service lines</legend>
+        <div class="line-head"><span>Procedure code *</span><span>Modifiers</span><span>Dx</span><span>Units *</span><span>Allowed</span><span></span></div>
+        @for (line of bill.serviceLines; track $index; let index = $index) { <div class="service-line">
+          <div class="cell"><span class="mobile-label">Procedure</span>
+            <mindbill-combo-box [ariaLabel]="'Procedure code ' + (index + 1)" [value]="line.code" placeholder="Search or enter code…" [options]="procedureComboOptions" [createOption]="customProcedureOption" (selected)="selectProcedure(index, $event)"/>
+            @if (line.code) { <small>{{ procedureDescription(line.code) || 'Custom CPT, HCPCS, or medical-legal code' }}</small> }
           </div>
-          @if (section.empty) {
-            <p class="empty">{{ emptyLabel }}</p>
-          } @else {
-            @for (row of section.rows; track row.id) {
-              <div class="grid row">
-                <span class="rowlabel">{{ row.label }}</span>
-                @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
-                  <span class="count">
-                    @if ((row.counts[bucketIndex] ?? 0) > 0) {
-                      <button type="button" class="link" (click)="select(section, row, bucketIndex)">{{ row.counts[bucketIndex] }}</button>
-                    } @else { <span class="zero">0</span> }
-                  </span>
+          <div class="cell"><span class="mobile-label">Modifiers</span>
+            @if (line.modifiers?.length) { <div class="chips">@for (modifier of line.modifiers; track modifier) { <button type="button" (click)="removeModifier(index, modifier)" [attr.aria-label]="'Remove modifier ' + modifier">−{{ modifier }} ×</button> }</div> }
+            <mindbill-combo-box [ariaLabel]="'Modifiers ' + (index + 1)" value="" [placeholder]="line.modifiers?.length ? line.modifiers!.length + ' modifier' + (line.modifiers!.length === 1 ? '' : 's') : 'Add modifiers…'" [options]="modifierComboOptions(line)" (selected)="addModifier(index, $event)"/>
+          </div>
+          <div class="cell"><span class="mobile-label">Dx pointers</span>
+            <div class="dx">
+              @if (bill.diagnoses.length) {
+                @for (code of bill.diagnoses; track code; let dxIndex = $index) {
+                  <button type="button" [class.on]="hasDiagnosisPointer(line, dxIndex + 1)" [title]="dxLetter(dxIndex + 1) + ' — ' + code" [attr.aria-pressed]="hasDiagnosisPointer(line, dxIndex + 1)" [attr.aria-label]="'Point line ' + (index + 1) + ' at diagnosis ' + code" (click)="toggleDiagnosisPointer(index, dxIndex + 1)">{{ dxLetter(dxIndex + 1) }}</button>
                 }
-                <span class="total">
-                  @if (row.total > 0) {
-                    <button type="button" class="link" (click)="select(section, row, null)">{{ row.total }}</button>
-                  } @else { <span class="zero">0</span> }
-                </span>
-              </div>
-            }
-            <div class="grid row totals">
-              <span class="rowlabel">Total</span>
-              @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
-                <span class="count">{{ section.totals[bucketIndex] ?? 0 }}</span>
-              }
-              <span class="total">{{ section.total }}</span>
+              } @else { <small>Add diagnoses above</small> }
             </div>
-          }
-        </section>
-      }
-      <section class="card grand" [attr.aria-label]="grandTotalLabel">
-        <div class="grid row totals">
-          <span class="rowlabel grand-label">{{ grandTotalLabel }}</span>
-          @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
-            <span class="count">{{ data?.grandTotals?.[bucketIndex] ?? 0 }}</span>
-          }
-          <span class="total">{{ data?.grandTotal ?? 0 }}</span>
-        </div>
-      </section>
-    </div>
-  `, styles: [":host{display:block}.mbtk{color:var(--t);font-family:var(--font);font-size:14px}.heading{margin-bottom:14px}.heading h2{margin:0;font-size:24px}.card{margin-bottom:16px;border:1.5px solid var(--b);border-radius:var(--r);background:var(--s);overflow:hidden}.grid{display:grid;grid-template-columns:var(--cols);gap:0 10px;align-items:center;padding:0 16px}.head{padding:12px 16px;border-bottom:1px solid var(--b)}.title{display:flex;align-items:center;gap:9px;min-width:0}.dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%}.title-text{min-width:0}.title-text strong{display:block;font-size:15.5px;line-height:1.3}.basis{display:block;color:var(--m);font-size:12px;line-height:1.35}.pill{justify-self:stretch;padding:5px 6px;border-radius:999px;font-size:11px;font-weight:750;line-height:1.25;text-align:center;white-space:nowrap}.colhead{justify-self:stretch;color:var(--m);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:center;white-space:nowrap}.row{border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);min-height:44px}.row:first-of-type{border-top:0}.rowlabel{color:var(--m);font-size:13px;line-height:1.35;padding:9px 0;overflow-wrap:anywhere}.count,.total{text-align:center;font-variant-numeric:tabular-nums}.zero{color:var(--m)}.link{border:0;background:none;padding:6px 8px;color:var(--a);font:inherit;font-weight:750;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:6px}.link:hover{text-decoration:underline;background:color-mix(in srgb,var(--a) 8%,transparent)}.totals{background:color-mix(in srgb,var(--bg) 78%,var(--s));border-top:1px solid var(--b);font-weight:760}.totals .rowlabel{color:var(--t);font-weight:760}.empty{margin:0;padding:22px 16px;color:var(--m);text-align:center}.grand{border-color:var(--b)}.grand .row{min-height:52px}.grand-label{font-size:14px;font-weight:800}@media(max-width:760px){.pill,.colhead,.count{display:none}.grid{grid-template-columns:minmax(0,1fr) auto}}\n"] }]
-        }], propDecorators: { data: [{
+          </div>
+          <label><span class="mobile-label">Units</span><input [name]="'units'+index" type="number" min="1" [(ngModel)]="line.units"></label>
+          <strong>{{ allowed(line) == null ? '—' : (allowed(line) | currency) }}</strong>
+          <button class="remove" type="button" (click)="removeLine(index)" aria-label="Remove service line">×</button>
+        </div> }
+        <div class="total"><span>Total</span><strong>{{ totalAllowed | currency }}</strong></div>
+      </fieldset>
+
+      <fieldset><legend>Attachments</legend>
+        @for (attachment of workingAttachments; track attachment.filename; let index = $index) { <div class="attachment" [class.locked]="attachment.locked"><div><strong>{{ attachment.filename }}</strong><span>{{ attachment.description || attachment.badge || 'Supporting document' }}</span></div><div class="attachment-actions"><button type="button" (click)="previewAttachment(attachment)">Preview</button>@if (!attachment.locked) { <button type="button" (click)="removeAttachment(index)" aria-label="Remove attachment">×</button> }</div></div> }
+        <label class="dropzone" [class.drag-active]="dragActive"><input type="file" accept="application/pdf,.pdf" multiple (change)="filesSelected($event)"><strong>Drop additional PDF files here, or click to choose</strong><span>Add supporting documents by dropping them anywhere on this screen.</span></label>
+      </fieldset>
+
+      @if (errorMessage) { <div class="error" role="alert">{{ errorMessage }}</div> }
+      <div class="submit-row"><span>{{ invalidFields.size ? 'Complete the highlighted required fields.' : 'All required billing data is ready.' }}</span><button type="submit" [disabled]="submitting">{{ submitting ? 'Submitting…' : submitLabel }}</button></div>
+      @if (dragActive) { <div class="drop-overlay" aria-hidden="true"><div><strong>Drop PDFs to attach</strong><span>Supporting documents are added to this submission.</span></div></div> }
+    </form>
+  `, styles: [":host{display:block}.mbs{--danger:#c83c3c;font-family:var(--font);color:var(--t)}*{box-sizing:border-box}.intro{display:flex;justify-content:space-between;align-items:start;margin:0 0 24px}.intro h2{margin:0;font-size:24px;font-weight:600}.intro p{margin:6px 0 0;color:var(--m)}.intro>span{color:var(--m);font-size:13px}.mbs b{color:inherit}.intro b,label>b,.lookup>label>b,.diagnosis>label>b,.cell>label>b{color:var(--danger)}fieldset{border:1px solid var(--b);border-radius:var(--r);margin:0 0 22px;padding:24px 26px 26px;background:var(--s)}legend{padding:0 10px;font-size:18px;font-weight:700}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}.wide{grid-column:1/-1}h3{margin:4px 0 -4px;padding-top:12px;border-top:1px solid var(--b);font-size:16px}h3:first-child{border:0;padding-top:0}label,.lookup,.diagnosis{display:grid;gap:8px;font-size:14px;font-weight:700}.grid>label{display:flex;flex-wrap:wrap;align-content:start;align-items:center;column-gap:4px;row-gap:8px}.grid>label>input,.grid>label>select,.grid>label>small,.grid>label>mindbill-date-input{flex:0 0 100%}.grid>div.wide{display:grid;gap:8px;font-size:14px;font-weight:700}input,select{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus,select:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}.invalid input,.invalid select,.invalid-set{border-color:var(--danger)!important;background:color-mix(in srgb,var(--danger) 4%,var(--s))}.invalid>label{color:var(--danger)}small{color:var(--m);font-weight:450}.selected{color:#238655}.options{position:relative;z-index:4;max-height:300px;overflow:auto;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);box-shadow:0 14px 35px #172b3730}.options button{display:grid;width:100%;gap:3px;border:0;border-bottom:1px solid var(--b);background:var(--s);padding:12px 14px;text-align:left;color:var(--t);cursor:pointer}.options button:hover{background:color-mix(in srgb,var(--a) 7%,var(--s))}.options span{color:var(--m);font-size:12px}.quick,.chips{display:flex;flex-wrap:wrap;gap:8px}.quick button,.chips button{border:1px solid var(--b);border-radius:999px;background:var(--s);padding:7px 11px;color:var(--t);font:inherit;font-size:13px;cursor:pointer}.quick .on{border-color:var(--a);color:var(--a);background:color-mix(in srgb,var(--a) 8%,var(--s))}.chips button{border-color:color-mix(in srgb,var(--a) 40%,var(--b));background:color-mix(in srgb,var(--a) 7%,var(--s));font-weight:700}.dx{display:flex;flex-wrap:wrap;gap:5px;padding-top:6px}.dx button{width:30px;height:30px;border:1px solid var(--b);border-radius:8px;background:var(--s);color:var(--m);font:inherit;font-size:13px;font-weight:750;cursor:pointer;padding:0}.dx button.on{border-color:var(--a);background:color-mix(in srgb,var(--a) 10%,var(--s));color:var(--a)}.line-head,.service-line{display:grid;grid-template-columns:1.5fr 1.35fr .8fr .5fr .7fr 36px;gap:14px;align-items:start}.line-head{padding:0 0 9px;color:var(--m);font-size:12px;font-weight:700}.service-line{border-top:1px solid var(--b);padding:12px 0}.service-line label,.service-line .cell{display:grid;gap:6px;font-size:14px;font-weight:700}.service-line strong{text-align:right;padding-top:12px}.remove{border:0;background:transparent;color:var(--m);font-size:25px;cursor:pointer}.mobile-label{display:none}.total{display:flex;justify-content:flex-end;gap:36px;border-top:1px solid var(--b);padding-top:14px;font-size:17px}.attachment{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--b);border-radius:var(--cr);margin-bottom:10px;padding:14px 16px}.attachment.locked{border-color:#9fd6b4;background:#f3fcf6}.attachment>div:first-child{display:grid;gap:4px}.attachment span{color:var(--m);font-size:13px}.attachment-actions{display:flex;gap:8px}.attachment button{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:8px 12px;color:var(--t);font-weight:700;cursor:pointer}.dropzone{position:relative;display:grid;min-height:170px;place-content:center;gap:8px;border:2px dashed color-mix(in srgb,var(--m) 60%,transparent);border-radius:var(--cr);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.dropzone.drag-active{border-color:var(--a);background:color-mix(in srgb,var(--a) 8%,var(--s))}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.dropzone span{color:var(--m);font-weight:450}.drop-overlay{position:fixed;inset:0;z-index:60;display:grid;place-content:center;background:color-mix(in srgb,var(--a) 14%,#ffffffd9);pointer-events:none}.drop-overlay div{display:grid;gap:6px;border:2px dashed var(--a);border-radius:var(--r);background:var(--s);padding:34px 44px;text-align:center;box-shadow:0 24px 60px #172b3740}.drop-overlay strong{font-size:19px}.drop-overlay span{color:var(--m)}.error{margin:0 0 14px;border-left:4px solid var(--danger);border-radius:var(--cr);background:color-mix(in srgb,var(--danger) 10%,var(--s));padding:14px;color:var(--danger)}.submit-row{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--b);border-radius:var(--r);background:color-mix(in srgb,var(--s) 96%,transparent);box-shadow:0 -8px 24px #172b3718;padding:14px 18px}.submit-row>span{color:#43835f}.submit-row button{min-width:190px;border:0;border-radius:var(--cr);background:var(--a);color:var(--ac);padding:12px 24px;font:inherit;font-weight:800;cursor:pointer}.submit-row button:disabled{opacity:.6;cursor:wait}@media(max-width:760px){fieldset{padding:18px 16px}.grid{grid-template-columns:1fr}.wide{grid-column:auto}.intro{display:grid;gap:10px}.line-head{display:none}.service-line{grid-template-columns:1fr 1fr}.service-line>*{grid-column:1/-1}.service-line label:nth-child(3){grid-column:1}.service-line>strong{grid-column:2;grid-row:3;text-align:left}.service-line>.remove{grid-column:1/-1}.mobile-label{display:block;color:var(--m);font-size:12px}.attachment{align-items:flex-start}.attachment-actions{align-items:center}.submit-row>span{display:none}.submit-row button{width:100%}}\n"] }]
+        }], propDecorators: { initialBill: [{
                 type: Input
-            }], buckets: [{
+            }], attachments: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], sessionEndpoint: [{
+                type: Input
+            }], getSession: [{
+                type: Input
+            }], apiBaseUrl: [{
                 type: Input
             }], heading: [{
                 type: Input
-            }], grandTotalLabel: [{
+            }], description: [{
                 type: Input
-            }], emptyLabel: [{
+            }], submitLabel: [{
                 type: Input
-            }], appearance: [{
+            }], attentionFields: [{
                 type: Input
-            }], cellSelected: [{
+            }], procedureOptions: [{
+                type: Input
+            }], modifierOptions: [{
+                type: Input
+            }], taxonomyOptions: [{
+                type: Input
+            }], submitter: [{
+                type: Input
+            }], submitted: [{
+                type: Output
+            }], submissionError: [{
                 type: Output
+            }], billChange: [{
+                type: Output
+            }], onWindowDragOver: [{
+                type: HostListener,
+                args: ["window:dragover", ["$event"]]
+            }], onWindowDragLeave: [{
+                type: HostListener,
+                args: ["window:dragleave", ["$event"]]
+            }], onWindowDrop: [{
+                type: HostListener,
+                args: ["window:drop", ["$event"]]
             }] } });
 
-/** Date helpers shared by the Angular submission surfaces. Mirrors the React
- * package's parseBillSubmissionDate/formatBillSubmissionDate exactly so both
- * frameworks accept and render the same values. */
-function parseMindBillSubmissionDate(value) {
-    const trimmed = value.trim();
-    const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(trimmed);
-    const us = /^(\d{1,2})[/-](\d{1,2})[/-](\d{4})$/.exec(trimmed);
-    const digits = /^(\d{2})(\d{2})(\d{4})$/.exec(trimmed.replace(/\D/g, ""));
-    const match = iso ? [iso[2], iso[3], iso[1]] : us ? [us[1], us[2], us[3]] : digits ? [digits[1], digits[2], digits[3]] : null;
-    if (!match)
-        return undefined;
-    const month = Number(match[0]);
-    const day = Number(match[1]);
-    const year = Number(match[2]);
-    const date = new Date(Date.UTC(year, month - 1, day));
-    if (date.getUTCFullYear() !== year || date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day)
-        return undefined;
-    return `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-}
-function formatMindBillSubmissionDate(value) {
-    const parsed = value ? parseMindBillSubmissionDate(value) : undefined;
-    if (!parsed)
-        return "";
-    const [year, month, day] = parsed.split("-");
-    return `${month}/${day}/${year}`;
-}
-/** Accepts complete CPT (5 digits), HCPCS (letter + 4 digits), or California
- * medical-legal codes typed directly into the procedure picker. */
-function mindBillCustomProcedureOption(query) {
-    const code = query.trim().toUpperCase().replace(/\s+/g, "");
-    if (!/^(?:\d{5}|[A-Z]\d{4}|ML(?:20[0-5]|PRR))$/.test(code))
-        return null;
-    return { id: code, label: code, detail: "Use this CPT, HCPCS, or medical-legal code" };
-}
-
-/** Styled searchable dropdown shared by the submission form's procedure,
- * modifier, taxonomy, payer, and diagnosis pickers. Mirrors the React
- * package's ComboBox: query filtering, optional custom-code creation,
- * loading states, and infinite scroll via (endReached). */
-class MindBillComboBoxComponent {
-    value = "";
-    placeholder = "";
-    options = [];
-    disabled = false;
-    loading = false;
-    loadingMore = false;
-    invalid = false;
-    preserveValueOnOpen = false;
-    ariaLabel = "";
-    createOption;
-    opened = new EventEmitter();
-    queryChange = new EventEmitter();
-    endReached = new EventEmitter();
-    selected = new EventEmitter();
-    open = false;
-    query = "";
-    closeTimer;
-    get visible() {
-        const q = this.query.trim().toLowerCase();
-        const matches = q
-            ? this.options.filter((option) => `${option.id} ${option.label} ${option.detail ?? ""}`.toLowerCase().includes(q))
-            : this.options;
-        const custom = this.createOption?.(this.query) ?? null;
-        return custom && !matches.some((option) => option.id.toUpperCase() === custom.id.toUpperCase())
-            ? [...matches, custom]
-            : matches;
+class MindBillBillLifecycleComponent {
+    billId = "";
+    sessionEndpoint = "/api/mindbill/session";
+    apiBaseUrl = "https://app.mindbill.org";
+    getSession;
+    refreshInterval = 60_000;
+    appearance = { preset: "mindbill" };
+    billingError = new EventEmitter();
+    store = new MindBillLifecycleStore();
+    lifecycleStages = [
+        { id: "submitted", label: "Submitted" }, { id: "accepted", label: "Accepted" },
+        { id: "response", label: "Payer response" }, { id: "follow_up", label: "Follow-up" },
+        { id: "closed", label: "Closed" },
+    ];
+    panel = "";
+    notice = "";
+    closeReason = "";
+    payment = { amount: 0, method: "check", depositDate: new Date().toISOString().slice(0, 10) };
+    review = { reason: "", payerClaimControlNumber: "", disputedAmount: 0 };
+    reportStatusOptions = REPORT_BILL_STATUS_OPTIONS;
+    duplicateDelivery = null;
+    duplicateDeliveryError = "";
+    duplicate = { route: "ebill", faxNumber: "", email: "", mailingAddress: "" };
+    report = { status: null, company: "", representativeName: "", representativeRole: "", phone: "", callReference: "", note: "" };
+    reportContactSummary = "";
+    correctionInitialBill = null;
+    correctionAttachments = [];
+    correctionAttentionFields = [];
+    correctionReason = "";
+    constructor() { effect(() => { const error = this.store.error(); if (error)
+        this.billingError.emit(error); }); }
+    ngOnChanges(changes) {
+        if (changes["billId"] || changes["sessionEndpoint"] || changes["apiBaseUrl"] || changes["getSession"]) {
+            if (!this.billId.trim()) {
+                this.store.disconnect();
+                return;
+            }
+            this.store.connect({ billId: this.billId, sessionEndpoint: this.sessionEndpoint, apiBaseUrl: this.apiBaseUrl, ...(this.getSession ? { getSession: this.getSession } : {}) }, this.refreshInterval);
+        }
     }
-    get showMenu() {
-        return this.open && (this.loading || this.visible.length > 0 || this.query.trim().length >= 2);
+    ngOnDestroy() { this.store.disconnect(); }
+    get themeStyle() {
+        return mindBillAngularAppearanceStyle(this.appearance);
     }
-    onFocus() {
-        clearTimeout(this.closeTimer);
-        const next = this.preserveValueOnOpen ? this.value : "";
-        this.open = true;
-        this.query = next;
-        this.opened.emit();
-        if (next)
-            this.queryChange.emit(next);
+    stateLabel(data) { return data.lifecycle.state.replace(/_/g, " ").replace(/\b\w/g, (value) => value.toUpperCase()); }
+    lifecycleDetail(data) { return data.lifecycle.submittedAt ? `Submitted ${new Date(data.lifecycle.submittedAt).toLocaleDateString()}${data.lifecycle.agingDays != null ? ` · ${data.lifecycle.agingDays} days old` : ""}` : "Submitted bill"; }
+    currentStageIndex(data) { const value = data.lifecycle.state.toLowerCase(); if (value.includes("closed") || value.includes("written_off"))
+        return 4; if (value.includes("second_review") || value.includes("ibr") || value.includes("lien") || value.includes("appeal"))
+        return 3; if (value.includes("processed") || value.includes("paid") || value.includes("denied") || value.includes("rejected") || value.includes("response"))
+        return 2; if (value.includes("accepted"))
+        return 1; return 0; }
+    activityLabel(type) { return type.replace(/[._-]+/g, " ").replace(/\b\w/g, (value) => value.toUpperCase()); }
+    historyExpanded = new Set();
+    toggleHistory(id) { if (this.historyExpanded.has(id))
+        this.historyExpanded.delete(id);
+    else
+        this.historyExpanded.add(id); }
+    isHistoryOpen(id) { return this.historyExpanded.has(id); }
+    historyDate(iso) { const parsed = new Date(iso); return Number.isNaN(parsed.getTime()) ? iso : parsed.toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" }); }
+    payerContact(data) { const contacts = data.delivery.contacts; return contacts.adjusterName || contacts.adjusterPhone || contacts.adjusterEmail || contacts.claimsEmail || contacts.faxNumber || contacts.mailingAddress || "No payer contact details are available."; }
+    beginAction(action, data) {
+        if (action === "resubmit")
+            this.prepareCorrection(data);
+        else if (action === "post_payment")
+            this.panel = "payment";
+        else if (action === "second_review" || action === "independent_bill_review")
+            this.panel = "review";
+        else if (action === "close")
+            this.panel = "close";
+        else if (action === "send_duplicate")
+            this.beginSendDuplicate();
+        else if (action === "report_bill_status")
+            this.beginReportStatus(data);
+        else if (action === "view_eor" && data.eors[0])
+            void this.openEor(data.eors[0].id, data.eors[0].filename);
+    }
+    beginSendDuplicate() { this.panel = "duplicate"; this.loadDuplicateDelivery(); }
+    loadDuplicateDelivery() {
+        this.duplicateDeliveryError = "";
+        if (this.duplicateDelivery)
+            return;
+        this.store.getDeliveryOptions().then((delivery) => {
+            this.duplicateDelivery = delivery;
+            this.duplicate.route = delivery.recommended.route;
+            this.duplicate.faxNumber = delivery.contacts.faxNumber || "";
+            this.duplicate.email = delivery.contacts.claimsEmail || "";
+            this.duplicate.mailingAddress = delivery.contacts.mailingAddress || "";
+        }).catch((cause) => {
+            this.duplicateDeliveryError = cause instanceof Error ? cause.message : "Delivery options could not be loaded.";
+        });
     }
-    onInput(event) {
-        this.open = true;
-        this.query = event.target.value;
-        this.queryChange.emit(this.query);
+    duplicateRoutes() {
+        const seen = new Set();
+        return (this.duplicateDelivery?.options ?? []).filter((option) => {
+            if (seen.has(option.route))
+                return false;
+            seen.add(option.route);
+            return true;
+        });
     }
-    onBlur() {
-        this.closeTimer = setTimeout(() => { this.open = false; }, 120);
+    duplicateReady() {
+        if (this.duplicate.route === "fax")
+            return this.duplicate.faxNumber.replace(/\D/g, "").length >= 10;
+        if (this.duplicate.route === "email")
+            return this.duplicate.email.includes("@");
+        if (this.duplicate.route === "mail")
+            return this.duplicate.mailingAddress.trim().length > 2;
+        return true;
     }
-    onScroll(event) {
-        const menu = event.currentTarget;
-        if (menu.scrollHeight - menu.scrollTop - menu.clientHeight < 120)
-            this.endReached.emit();
+    async sendDuplicate() {
+        if (!this.duplicateDelivery || !this.duplicateReady())
+            return;
+        const route = this.duplicate.route;
+        const destination = route === "fax" ? { faxNumber: this.duplicate.faxNumber.trim() }
+            : route === "email" ? { email: this.duplicate.email.trim() }
+                : route === "mail" ? { mailingAddress: this.duplicate.mailingAddress.trim() }
+                    : null;
+        await this.store.sendDuplicateBill({ route, ...(destination ? { destination } : {}) });
+        this.panel = "";
+        this.notice = "Duplicate bill sent.";
+    }
+    beginReportStatus(data) {
+        const contacts = reportBillStatusContacts(data.delivery);
+        const parts = [];
+        if (contacts.claimsAdmin) {
+            const phones = contacts.claimsAdmin.phones.map((phone) => `${phone.label} ${phone.value}`).join(", ");
+            parts.push(`${contacts.claimsAdmin.name}${phones ? ` (${phones})` : ""}${contacts.claimsAdmin.hoursOfOperation ? ` · Hours: ${contacts.claimsAdmin.hoursOfOperation}` : ""}`);
+        }
+        if (contacts.billReview)
+            parts.push(`Bill Review: ${contacts.billReview.name}${contacts.billReview.phone ? ` ${contacts.billReview.phone}` : ""}`);
+        this.reportContactSummary = parts.length
+            ? `Call ${parts.join(" · ")} to request the payment status of this bill, then record the status reported and who provided it.`
+            : "Call the Claims Administrator or Bill Review vendor for this bill, then record the status reported and who provided it.";
+        this.report = { status: null, company: "", representativeName: "", representativeRole: "", phone: "", callReference: "", note: "" };
+        this.panel = "report_status";
+    }
+    async reportStatus() {
+        const status = this.report.status;
+        if (!status)
+            return;
+        await this.store.reportBillStatus({
+            status,
+            ...(this.report.company.trim() ? { company: this.report.company.trim() } : {}),
+            ...(this.report.representativeName.trim() ? { representativeName: this.report.representativeName.trim() } : {}),
+            ...(this.report.representativeRole.trim() ? { representativeRole: this.report.representativeRole.trim() } : {}),
+            ...(this.report.phone.trim() ? { phone: this.report.phone.trim() } : {}),
+            ...(this.report.callReference.trim() ? { callReference: this.report.callReference.trim() } : {}),
+            ...(this.report.note.trim() ? { note: this.report.note.trim() } : {}),
+        });
+        this.panel = "";
+        this.notice = "Bill status reported.";
     }
-    choose(option) {
-        this.selected.emit(option);
-        this.open = false;
-        this.query = "";
+    async openAttachment(id, filename) { this.openBlob(await this.store.getAttachment(id), filename); }
+    async openEor(id, filename) { this.openBlob(await this.store.getEor(id), filename); }
+    async postPayment() { await this.store.postPayment(this.payment); this.panel = ""; this.notice = "Payment posted."; }
+    async submitReview() { await this.store.submitSecondReview({ ...this.review, disputedAmount: this.review.disputedAmount > 0 ? this.review.disputedAmount : undefined, attachmentIds: this.store.data()?.bill.attachments.map((document) => document.id) ?? [], route: "ebill" }); this.panel = ""; this.notice = "Second Review submitted."; }
+    async closeBill() { if (!this.closeReason.trim())
+        return; await this.store.closeBill({ reason: this.closeReason }); this.panel = ""; this.notice = "Bill closed."; }
+    resubmitFromForm = async (input) => {
+        const data = await this.store.resubmitBill({
+            bill: input.bill,
+            ...(input.documents?.length ? { documents: input.documents } : {}),
+            ...(this.correctionReason.trim() ? { reason: this.correctionReason.trim() } : {}),
+        });
+        return { billId: data.bill.id, bill: { id: data.bill.id, state: data.lifecycle.state } };
+    };
+    finishCorrection() { this.panel = ""; this.correctionReason = ""; this.notice = "Corrected submission sent."; }
+    closeCorrectionBackdrop(event) { if (event.currentTarget === event.target)
+        this.panel = ""; }
+    prepareCorrection(data) {
+        this.correctionInitialBill = correctionBill(data);
+        this.correctionAttachments = data.bill.attachments.map((attachment) => ({
+            filename: attachment.filename,
+            documentType: correctionDocumentType(attachment.documentType),
+            ...(attachment.description ? { description: attachment.description } : {}),
+            ...(attachment.reportType ? { reportTypeCode: attachment.reportType } : {}),
+            loadBlob: () => this.store.getAttachment(attachment.id),
+            ...(attachment.documentType === "w9" ? { locked: true, badge: "Auto-attached" } : {}),
+        }));
+        this.correctionAttentionFields = [...new Set(data.rejection?.issues?.flatMap((issue) => issue.fieldPaths || []) ?? [])];
+        this.correctionReason = "";
+        this.panel = "resubmit";
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillComboBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillComboBoxComponent, isStandalone: true, selector: "mindbill-combo-box", inputs: { value: "value", placeholder: "placeholder", options: "options", disabled: "disabled", loading: "loading", loadingMore: "loadingMore", invalid: "invalid", preserveValueOnOpen: "preserveValueOnOpen", ariaLabel: "ariaLabel", createOption: "createOption" }, outputs: { opened: "opened", queryChange: "queryChange", endReached: "endReached", selected: "selected" }, ngImport: i0, template: `
-    <div class="combo">
-      <input
-        type="text"
-        role="combobox"
-        autocomplete="off"
-        [attr.aria-label]="ariaLabel"
-        [attr.aria-invalid]="invalid || null"
-        [attr.aria-expanded]="showMenu"
-        [disabled]="disabled"
-        [placeholder]="placeholder"
-        [value]="open ? query : value"
-        (focus)="onFocus()"
-        (click)="onFocus()"
-        (input)="onInput($event)"
-        (blur)="onBlur()"
-      />
-      @if (showMenu) {
-        <div class="menu" role="listbox" (scroll)="onScroll($event)">
-          @if (loading && !visible.length) { <div class="status">Loading…</div> }
-          @else if (visible.length) {
-            @for (option of visible; track option.id) {
-              <button type="button" role="option" (mousedown)="$event.preventDefault()" (click)="choose(option)">
-                <strong>{{ option.label }}</strong>
-                @if (option.detail) { <small>{{ option.detail }}</small> }
-              </button>
-            }
-          } @else { <div class="status">No matches</div> }
-          @if (loadingMore) { <div class="status">Loading more…</div> }
+    openBlob(blob, filename) { const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.target = "_blank"; link.rel = "noopener"; link.download = filename; link.click(); setTimeout(() => URL.revokeObjectURL(url), 60_000); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillLifecycleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillLifecycleComponent, isStandalone: true, selector: "mindbill-bill-lifecycle", inputs: { billId: "billId", sessionEndpoint: "sessionEndpoint", apiBaseUrl: "apiBaseUrl", getSession: "getSession", refreshInterval: "refreshInterval", appearance: "appearance" }, outputs: { billingError: "billingError" }, usesOnChanges: true, ngImport: i0, template: `
+    <section class="mb" [ngStyle]="themeStyle">
+      @if (!billId) {
+        <div class="state error"><strong>A submitted bill ID is required.</strong></div>
+      } @else if (store.loading() && !store.data()) {
+        <div class="state">Loading billing…</div>
+      } @else if (store.error() && !store.data()) {
+        <div class="state error"><strong>Billing is temporarily unavailable</strong><span>{{ store.error()?.message }}</span><button type="button" (click)="store.refresh()">Try again</button></div>
+      } @else if (store.data(); as data) {
+        <header class="summary">
+          <div><span class="eyebrow">Bill {{ data.bill.billNumber }}</span><h2>{{ stateLabel(data) }}</h2><p>{{ lifecycleDetail(data) }}</p></div>
+          <div class="money"><span>{{ data.bill.balanceDue | currency }}</span><small>balance</small></div>
+        </header>
+
+        @if (data.lifecycle.state.toLowerCase() === 'rejected' && data.rejection) {
+          <mindbill-bill-rejection-notice
+            class="rejection"
+            [rejection]="data.rejection"
+            [submittedAt]="data.lifecycle.submittedAt ?? null"
+            [appearance]="appearance"
+          />
+        } @else {
+          <section class="card progress" aria-label="Bill lifecycle">
+            <ol>@for (stage of lifecycleStages; track stage.id; let i=$index) { <li [class.complete]="i < currentStageIndex(data)" [class.current]="i === currentStageIndex(data)"><b>{{ i < currentStageIndex(data) ? '✓' : i + 1 }}</b><span>{{ stage.label }}</span></li> }</ol>
+          </section>
+        }
+
+        <section class="card snapshot" aria-label="Bill snapshot">
+          <div class="card-title"><div><h3>Bill snapshot</h3><p>The immutable values submitted to the payer.</p></div></div>
+          <dl><div><dt>Patient</dt><dd>{{ data.patient.name }}</dd></div><div><dt>Claim</dt><dd>{{ data.injury.claimNumber || '—' }}</dd></div><div><dt>Payer</dt><dd>{{ data.delivery.payerName || data.injury.claimsAdminName || '—' }}</dd></div><div><dt>Date of service</dt><dd>{{ data.bill.dos || '—' }}</dd></div><div><dt>Charged</dt><dd>{{ data.bill.totalCharge | currency }}</dd></div><div><dt>Balance</dt><dd>{{ data.bill.balanceDue | currency }}</dd></div></dl>
+        </section>
+
+        <div class="columns">
+          <section class="card"><div class="card-title"><div><h3>Remittance</h3><p>Amounts reported by the payer and posted to this bill.</p></div></div><dl><div><dt>Billed</dt><dd>{{ data.remittance.billedAmount | currency }}</dd></div><div><dt>Payer reported</dt><dd>{{ data.remittance.payerReportedPaid == null ? '—' : (data.remittance.payerReportedPaid | currency) }}</dd></div><div><dt>Principal posted</dt><dd>{{ data.remittance.postedPrincipal | currency }}</dd></div><div><dt>Penalty &amp; interest</dt><dd>{{ data.remittance.postedAdditional | currency }}</dd></div><div><dt>Total received</dt><dd>{{ data.remittance.totalPostedCash | currency }}</dd></div><div><dt>Balance</dt><dd>{{ data.remittance.balanceDue | currency }}</dd></div></dl></section>
+          <section class="card"><div class="card-title"><div><h3>{{ data.delivery.payerName || 'Payer' }}</h3><p>Billing and follow-up contacts.</p></div></div><p class="muted">{{ payerContact(data) }}</p></section>
         </div>
+
+        <section class="card"><div class="card-title"><div><h3>Documents</h3><p>Documents preserved with the submitted bill.</p></div><span>{{ data.bill.attachments.length }}</span></div>@if (data.bill.attachments.length) { <ul class="rows">@for (doc of data.bill.attachments; track doc.id) { <li><div><strong>{{ doc.filename }}</strong><small>{{ doc.description || doc.documentType }}</small></div><button type="button" (click)="openAttachment(doc.id, doc.filename)">View</button></li> }</ul> } @else { <p class="muted">No documents available.</p> }</section>
+
+        <section class="card"><div class="card-title"><div><h3>Payments</h3><p>Payments posted to this bill.</p></div><span>{{ data.payments.length }}</span></div>@if (data.payments.length) { <ul class="rows">@for (payment of data.payments; track payment.id) { <li><div><strong>{{ payment.amount | currency }}</strong><small>{{ payment.method | uppercase }} · {{ payment.depositDate || payment.postedAt }}</small></div></li> }</ul> } @else { <p class="muted">No payments posted.</p> }</section>
+
+        <section class="card"><div class="card-title"><div><h3>Bill history</h3><p>Submissions, payer responses, follow-up, and payments.</p></div><span>{{ data.history?.length ?? data.activity.length }}</span></div>
+          @if (data.history?.length) {
+            <!-- daisyBill-style Date/Action/User/Details table: submissions are pale-blue
+                 expandable rows (documents + compliance due dates), notes pale-yellow,
+                 277 responses expand into decoded status-code sentences. Rows arrive
+                 pre-worded from the MindBill API (BillLifecycleData.history). -->
+            <div class="history">
+              <div class="history-head" aria-hidden="true"><span>Date</span><span>Action</span><span>User</span><span>Details</span></div>
+              <ul class="history-rows">
+                @for (entry of data.history; track entry.id) {
+                  <li [class.is-submission]="entry.tone === 'submission'" [class.is-note]="entry.tone === 'note'" [class.is-problem]="entry.tone === 'problem'">
+                    <button type="button" class="history-line" [disabled]="!entry.details" [attr.aria-expanded]="entry.details ? isHistoryOpen(entry.id) : null" (click)="toggleHistory(entry.id)">
+                      <span class="h-date">{{ historyDate(entry.date) }}</span>
+                      <span class="h-action">{{ entry.action }}</span>
+                      <span class="h-actor">{{ entry.actor || '—' }}</span>
+                      <span class="h-summary">@if (entry.details) { <i [class.open]="isHistoryOpen(entry.id)" aria-hidden="true"></i> }{{ entry.summary }}</span>
+                    </button>
+                    @if (entry.details; as details) {
+                      @if (isHistoryOpen(entry.id)) {
+                        <div class="history-details">
+                          @if (details.rows?.length) { <dl class="h-kv">@for (row of details.rows ?? []; track row.label) { <div><dt>{{ row.label }}</dt><dd>{{ row.value }}</dd></div> }</dl> }
+                          @if (details.documents?.length) { <dl class="h-kv"><div><dt>Documents</dt><dd>@for (doc of details.documents ?? []; track doc.id) { <span class="h-doc">{{ doc.filename }}</span> }</dd></div></dl> }
+                          @if (details.codes?.length) { <dl class="h-codes">@for (code of details.codes ?? []; track code.code) { <div><dt>{{ code.code }}</dt><dd>{{ code.text }}</dd></div> }</dl> }
+                          @if (details.complianceDueDates?.length) { <div class="h-due"><em>Compliance Due Dates</em><dl>@for (due of details.complianceDueDates ?? []; track due.text) { <div><dt>{{ historyDate(due.date) }}</dt><dd>{{ due.text }}</dd></div> }</dl></div> }
+                          @if (details.text) { <p class="h-text">{{ details.text }}</p> }
+                        </div>
+                      }
+                    }
+                  </li>
+                }
+              </ul>
+            </div>
+          } @else {
+            <ul class="timeline">@for (event of data.activity; track event.id) { <li><i></i><div><strong>{{ activityLabel(event.type) }}</strong><p>{{ event.description }}</p><small>{{ event.createdAt | date:'medium' }}</small></div></li> }</ul>
+          }
+        </section>
+
+        @if (notice) { <p class="notice">{{ notice }}</p> }
+        <div class="actions">@for (action of data.lifecycle.actions; track action.id) { @if (action.id !== 'view_eor' || data.eors.length) { <button type="button" [class.primary]="action.primary" [disabled]="!action.enabled || store.mutating()" (click)="beginAction(action.id, data)">{{ action.label }}</button> } }</div>
+
+        @if (panel === 'payment') { <form class="card action-form" (submit)="$event.preventDefault(); postPayment()"><h3>Post payment</h3><label>Amount<input required type="number" min="0.01" step="0.01" [(ngModel)]="payment.amount" name="amount"></label><label>Method<select [(ngModel)]="payment.method" name="method"><option value="check">Check</option><option value="eft">EFT</option></select></label><label>Deposit date<input required type="date" [(ngModel)]="payment.depositDate" name="depositDate"></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Post payment</button></div></form> }
+        @if (panel === 'review') { <form class="card action-form" (submit)="$event.preventDefault(); submitReview()"><h3>Submit Second Bill Review</h3><label>Reason<textarea required [(ngModel)]="review.reason" name="reason"></textarea></label><label>Payer claim control number<input required [(ngModel)]="review.payerClaimControlNumber" name="control"></label><label>Disputed amount<input type="number" min="0" step="0.01" [(ngModel)]="review.disputedAmount" name="disputed"></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Submit review</button></div></form> }
+        @if (panel === 'close') { <form class="card action-form" (submit)="$event.preventDefault(); closeBill()"><h3>Close bill</h3><label>Reason<textarea required [(ngModel)]="closeReason" name="closeReason"></textarea></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Close bill</button></div></form> }
+        @if (panel === 'duplicate') {
+          <form class="card action-form" (submit)="$event.preventDefault(); sendDuplicate()">
+            <h3>Send duplicate bill</h3>
+            @if (!duplicateDelivery) {
+              <p class="muted">{{ duplicateDeliveryError || 'Loading delivery options…' }}</p>
+              <div><button type="button" (click)="panel=''">Cancel</button>@if (duplicateDeliveryError) { <button class="primary" type="button" (click)="loadDuplicateDelivery()">Try again</button> }</div>
+            } @else {
+              <p class="muted">Resend the unchanged submission packet to {{ duplicateDelivery.payerName }}.</p>
+              <label>Delivery method<select [(ngModel)]="duplicate.route" name="duplicateRoute">@for (option of duplicateRoutes(); track option.route) { <option [ngValue]="option.route">{{ option.label }}</option> }</select></label>
+              @if (duplicate.route === 'fax') { <label>Fax number<input required [(ngModel)]="duplicate.faxNumber" name="duplicateFax" placeholder="(000) 000-0000"></label> }
+              @if (duplicate.route === 'email') { <label>Email<input required type="email" [(ngModel)]="duplicate.email" name="duplicateEmail" placeholder="claims@payer.example"></label> }
+              @if (duplicate.route === 'mail') { <label>Mailing address<textarea required [(ngModel)]="duplicate.mailingAddress" name="duplicateMail"></textarea></label> }
+              <div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit" [disabled]="store.mutating() || !duplicateReady()">Send duplicate</button></div>
+            }
+          </form>
+        }
+        @if (panel === 'report_status') {
+          <form class="card action-form" (submit)="$event.preventDefault(); reportStatus()">
+            <h3>Report Bill Status</h3>
+            <p class="muted">{{ reportContactSummary }}</p>
+            <div class="report-options" role="radiogroup" aria-label="Reported bill payment status">
+              @for (option of reportStatusOptions; track option.id) {
+                <label class="report-option"><input type="radio" [value]="option.id" [(ngModel)]="report.status" name="reportStatus"><span><strong>{{ option.label }}</strong><small>{{ option.description }}</small></span></label>
+              }
+            </div>
+            <label>Company<input [(ngModel)]="report.company" name="reportCompany"></label>
+            <label>Name<input [(ngModel)]="report.representativeName" name="reportRepresentativeName"></label>
+            <label>Role<input [(ngModel)]="report.representativeRole" name="reportRepresentativeRole"></label>
+            <label>Phone Number<input [(ngModel)]="report.phone" name="reportPhone"></label>
+            <label>Call Reference Number<input [(ngModel)]="report.callReference" name="reportCallReference"></label>
+            <label>Message Note<textarea [(ngModel)]="report.note" name="reportNote"></textarea></label>
+            <div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit" [disabled]="!report.status || store.mutating()">Save</button></div>
+          </form>
+        }
+        @if (panel === 'resubmit' && correctionInitialBill) {
+          <div class="correction-backdrop" (mousedown)="closeCorrectionBackdrop($event)">
+            <section class="correction-dialog" role="dialog" aria-modal="true" aria-label="Correct and resubmit">
+              <button type="button" class="dialog-close" aria-label="Close" (click)="panel=''">×</button>
+              <header><h2>Correct and resubmit</h2><p>The original submission remains immutable. Review the rejected values and create the next submission attempt on this bill.</p></header>
+              @if (data.rejection; as rejection) {
+                <div class="correction-reason"><strong>{{ rejection.reason || 'Why it was rejected' }}</strong>@for (issue of rejection.issues || []; track issue.code) { <span><b>{{ issue.code }}</b> {{ issue.description }}</span> }</div>
+              }
+              @if (payerContact(data) !== 'No payer contact details are available.') { <p class="contact-hint"><strong>Questions?</strong> {{ payerContact(data) }}</p> }
+              <label class="correction-note">Correction note (optional)<textarea [(ngModel)]="correctionReason" name="correctionReason" placeholder="What changed before resubmission?"></textarea></label>
+              <mindbill-bill-submission
+                [initialBill]="correctionInitialBill"
+                [attachments]="correctionAttachments"
+                [attentionFields]="correctionAttentionFields"
+                [appearance]="appearance"
+                [sessionEndpoint]="sessionEndpoint"
+                [getSession]="getSession"
+                [apiBaseUrl]="apiBaseUrl"
+                [submitter]="resubmitFromForm"
+                heading="Corrected bill information"
+                description="Correct the highlighted values, confirm every required field, then resubmit."
+                submitLabel="Resubmit bill"
+                (submitted)="finishCorrection()"
+              />
+            </section>
+          </div>
+        }
       }
-    </div>
-  `, isInline: true, styles: [":host{display:block}.combo{position:relative}input{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}input[aria-invalid=true]{border-color:#c83c3c}.menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;max-height:320px;overflow:auto;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);box-shadow:0 14px 35px #172b3730}.menu button{display:grid;width:100%;gap:3px;border:0;border-bottom:1px solid color-mix(in srgb,var(--b) 60%,transparent);background:var(--s);padding:11px 14px;text-align:left;color:var(--t);font:inherit;cursor:pointer}.menu button:last-child{border-bottom:0}.menu button:hover{background:color-mix(in srgb,var(--a) 7%,var(--s))}.menu strong{font-weight:720}.menu small{color:var(--m);font-size:12px}.status{padding:11px 14px;color:var(--m);font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    </section>
+  `, isInline: true, styles: [":host{display:block}.mb{font-family:var(--font);color:var(--t);background:var(--bg);padding:20px}.summary,.card,.columns,.rejection{display:block;max-width:1120px;margin:0 auto 16px}.summary{display:flex;justify-content:space-between;align-items:end}.summary h2{margin:4px 0}.summary p,.muted{color:var(--m)}.eyebrow,dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m)}.money{text-align:right}.money span{display:block;font-size:28px;font-weight:800}.money small{color:var(--m)}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:20px}.card-title{display:flex;justify-content:space-between;gap:20px}.card-title h3{margin:0}.card-title p{margin:5px 0;color:var(--m)}.progress ol{display:flex;list-style:none;padding:0;margin:0}.progress li{flex:1;text-align:center;position:relative;color:var(--m)}.progress li:before{content:\"\";position:absolute;top:16px;left:0;right:0;border-top:2px solid var(--b)}.progress li:first-child:before{left:50%}.progress li:last-child:before{right:50%}.progress b{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;margin:auto;border:2px solid var(--b);border-radius:50%;background:var(--s)}.progress .complete b,.progress .current b{border-color:var(--a);background:var(--a);color:var(--ac)}.progress span{display:block;margin-top:8px;font-size:12px;font-weight:700}.snapshot dl,.columns dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.snapshot dd,.columns dd{font-weight:700;margin:6px 0}.columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.columns .card{margin:0}.rows,.timeline{list-style:none;margin:12px 0 0;padding:0}.rows li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--b)}.rows small{display:block;color:var(--m);margin-top:3px}.timeline li{display:flex;gap:14px;padding:10px 0}.timeline i{width:10px;height:10px;margin-top:5px;border:3px solid var(--a);border-radius:50%}.timeline p{margin:4px 0}.timeline small{color:var(--m)}button,input,select,textarea{font:inherit;border:1px solid var(--b);border-radius:var(--cr);padding:9px 12px;background:var(--s);color:var(--t)}button{cursor:pointer;font-weight:700}.primary{background:var(--a);border-color:var(--a);color:var(--ac)}.actions{max-width:1120px;margin:0 auto;display:flex;justify-content:flex-end;gap:10px}.action-form{display:grid;gap:12px}.action-form label{display:grid;gap:5px;font-weight:700}.action-form div{display:flex;justify-content:flex-end;gap:10px}.state{max-width:720px;margin:auto;padding:32px;text-align:center}.state span{display:block;margin:8px}.error{color:#9b1c1c}.notice{max-width:1120px;margin:0 auto 12px;color:var(--m)}@media(max-width:760px){.mb{padding:12px}.summary,.columns{display:block}.money{text-align:left;margin-top:12px}.columns .card{margin-bottom:12px}.snapshot dl,.columns dl{grid-template-columns:1fr 1fr}.progress span{font-size:10px}.card{padding:15px}}.history{border:1px solid var(--b);border-radius:10px;overflow:hidden;margin-top:12px}.history-head{display:grid;grid-template-columns:96px 150px 130px minmax(0,1fr);gap:12px;padding:8px 14px;background:color-mix(in srgb,var(--b) 26%,var(--s));color:var(--m);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.history-rows{list-style:none;margin:0;padding:0}.history-rows>li{border-top:1px solid var(--b)}.history-rows>li.is-submission{background:color-mix(in srgb,var(--a) 9%,var(--s))}.history-rows>li.is-note{background:color-mix(in srgb,#f2c344 13%,var(--s))}.history-line{display:grid;grid-template-columns:96px 150px 130px minmax(0,1fr);gap:12px;width:100%;padding:10px 14px;border:0;border-radius:0;background:transparent;text-align:left;font-weight:400;cursor:default}.history-line:not(:disabled){cursor:pointer}.history-line:not(:disabled):hover .h-summary{text-decoration:underline}.h-date,.h-actor{color:var(--m);font-size:13px;overflow-wrap:anywhere}.h-action{font-weight:700;font-size:13.5px}.is-problem .h-action{color:#9b1c1c}.h-summary{display:flex;gap:7px;min-width:0;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}.h-summary i{flex:0 0 auto;margin-top:5px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--m);border-radius:0;transition:transform .12s ease}.h-summary i.open{transform:rotate(90deg)}.history-details{padding:4px 14px 14px 122px;font-size:13.5px;line-height:1.5}.h-kv,.h-codes,.h-due dl{display:grid;gap:4px;margin:0}.h-kv>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);padding-top:4px}.h-kv dt,.h-codes dt,.h-due dt{font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--t)}.h-kv dd,.h-codes dd,.h-due dd{margin:0;overflow-wrap:anywhere}.h-doc{display:block}.h-codes>div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px}.h-codes dt{font-weight:800}.h-due{margin-top:8px}.h-due em{display:block;color:var(--m);font-size:12.5px;margin-bottom:4px}.h-due dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);padding-top:4px}.h-text{margin:8px 0 0;white-space:pre-wrap}@media(max-width:760px){.history-head{display:none}.history-line{grid-template-columns:1fr;gap:2px;padding:10px 12px}.history-details{padding:4px 12px 12px}.h-kv>div,.h-due dl>div{grid-template-columns:1fr}}.report-options{display:grid;gap:8px}.action-form label.report-option{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--b);border-radius:var(--cr);padding:10px 12px;font-weight:400;cursor:pointer}.report-option input{width:16px;min-height:16px;margin-top:3px;padding:0;border:0}.report-option strong{display:block;font-size:13.5px}.report-option small{display:block;color:var(--m);margin-top:2px;font-size:12.5px}.correction-backdrop{position:fixed;inset:0;z-index:100;overflow:auto;background:#172b37b8;padding:28px}.correction-dialog{position:relative;max-width:1180px;margin:0 auto;background:var(--bg);border-radius:var(--r);box-shadow:0 24px 80px #0006;padding:26px}.correction-dialog>header{padding-right:48px;margin-bottom:18px}.correction-dialog h2{margin:0 0 6px}.correction-dialog p{margin:0;color:var(--m)}.dialog-close{position:absolute;right:20px;top:20px;width:40px;height:40px;padding:0;font-size:24px}.correction-reason{display:grid;gap:8px;margin-bottom:14px;border-left:4px solid #c43d3d;border-radius:8px;background:#fff5f5;padding:14px;color:#8f2525}.correction-reason span{display:block}.correction-reason b{margin-right:6px}.contact-hint{margin:0 0 14px!important;border:1px solid var(--b);border-radius:8px;background:var(--s);padding:12px!important;color:var(--t)!important}.correction-note{display:grid;gap:6px;margin-bottom:18px;font-weight:700}.correction-note textarea{min-height:76px}.correction-dialog mindbill-bill-submission{display:block}.correction-dialog .mb{padding:0}@media(max-width:760px){.correction-backdrop{padding:0}.correction-dialog{min-height:100%;border-radius:0;padding:18px 12px}.dialog-close{right:12px;top:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MindBillBillRejectionNoticeComponent, selector: "mindbill-bill-rejection-notice", inputs: ["rejection", "submittedAt", "title", "appearance"] }, { kind: "component", type: MindBillBillSubmissionComponent, selector: "mindbill-bill-submission", inputs: ["initialBill", "attachments", "appearance", "sessionEndpoint", "getSession", "apiBaseUrl", "heading", "description", "submitLabel", "attentionFields", "procedureOptions", "modifierOptions", "taxonomyOptions", "submitter"], outputs: ["submitted", "submissionError", "billChange"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillComboBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillLifecycleComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mindbill-combo-box", standalone: true, imports: [CommonModule], template: `
-    <div class="combo">
-      <input
-        type="text"
-        role="combobox"
-        autocomplete="off"
-        [attr.aria-label]="ariaLabel"
-        [attr.aria-invalid]="invalid || null"
-        [attr.aria-expanded]="showMenu"
-        [disabled]="disabled"
-        [placeholder]="placeholder"
-        [value]="open ? query : value"
-        (focus)="onFocus()"
-        (click)="onFocus()"
-        (input)="onInput($event)"
-        (blur)="onBlur()"
-      />
-      @if (showMenu) {
-        <div class="menu" role="listbox" (scroll)="onScroll($event)">
-          @if (loading && !visible.length) { <div class="status">Loading…</div> }
-          @else if (visible.length) {
-            @for (option of visible; track option.id) {
-              <button type="button" role="option" (mousedown)="$event.preventDefault()" (click)="choose(option)">
-                <strong>{{ option.label }}</strong>
-                @if (option.detail) { <small>{{ option.detail }}</small> }
-              </button>
+            args: [{ selector: "mindbill-bill-lifecycle", standalone: true, imports: [CommonModule, FormsModule, MindBillBillRejectionNoticeComponent, MindBillBillSubmissionComponent], template: `
+    <section class="mb" [ngStyle]="themeStyle">
+      @if (!billId) {
+        <div class="state error"><strong>A submitted bill ID is required.</strong></div>
+      } @else if (store.loading() && !store.data()) {
+        <div class="state">Loading billing…</div>
+      } @else if (store.error() && !store.data()) {
+        <div class="state error"><strong>Billing is temporarily unavailable</strong><span>{{ store.error()?.message }}</span><button type="button" (click)="store.refresh()">Try again</button></div>
+      } @else if (store.data(); as data) {
+        <header class="summary">
+          <div><span class="eyebrow">Bill {{ data.bill.billNumber }}</span><h2>{{ stateLabel(data) }}</h2><p>{{ lifecycleDetail(data) }}</p></div>
+          <div class="money"><span>{{ data.bill.balanceDue | currency }}</span><small>balance</small></div>
+        </header>
+
+        @if (data.lifecycle.state.toLowerCase() === 'rejected' && data.rejection) {
+          <mindbill-bill-rejection-notice
+            class="rejection"
+            [rejection]="data.rejection"
+            [submittedAt]="data.lifecycle.submittedAt ?? null"
+            [appearance]="appearance"
+          />
+        } @else {
+          <section class="card progress" aria-label="Bill lifecycle">
+            <ol>@for (stage of lifecycleStages; track stage.id; let i=$index) { <li [class.complete]="i < currentStageIndex(data)" [class.current]="i === currentStageIndex(data)"><b>{{ i < currentStageIndex(data) ? '✓' : i + 1 }}</b><span>{{ stage.label }}</span></li> }</ol>
+          </section>
+        }
+
+        <section class="card snapshot" aria-label="Bill snapshot">
+          <div class="card-title"><div><h3>Bill snapshot</h3><p>The immutable values submitted to the payer.</p></div></div>
+          <dl><div><dt>Patient</dt><dd>{{ data.patient.name }}</dd></div><div><dt>Claim</dt><dd>{{ data.injury.claimNumber || '—' }}</dd></div><div><dt>Payer</dt><dd>{{ data.delivery.payerName || data.injury.claimsAdminName || '—' }}</dd></div><div><dt>Date of service</dt><dd>{{ data.bill.dos || '—' }}</dd></div><div><dt>Charged</dt><dd>{{ data.bill.totalCharge | currency }}</dd></div><div><dt>Balance</dt><dd>{{ data.bill.balanceDue | currency }}</dd></div></dl>
+        </section>
+
+        <div class="columns">
+          <section class="card"><div class="card-title"><div><h3>Remittance</h3><p>Amounts reported by the payer and posted to this bill.</p></div></div><dl><div><dt>Billed</dt><dd>{{ data.remittance.billedAmount | currency }}</dd></div><div><dt>Payer reported</dt><dd>{{ data.remittance.payerReportedPaid == null ? '—' : (data.remittance.payerReportedPaid | currency) }}</dd></div><div><dt>Principal posted</dt><dd>{{ data.remittance.postedPrincipal | currency }}</dd></div><div><dt>Penalty &amp; interest</dt><dd>{{ data.remittance.postedAdditional | currency }}</dd></div><div><dt>Total received</dt><dd>{{ data.remittance.totalPostedCash | currency }}</dd></div><div><dt>Balance</dt><dd>{{ data.remittance.balanceDue | currency }}</dd></div></dl></section>
+          <section class="card"><div class="card-title"><div><h3>{{ data.delivery.payerName || 'Payer' }}</h3><p>Billing and follow-up contacts.</p></div></div><p class="muted">{{ payerContact(data) }}</p></section>
+        </div>
+
+        <section class="card"><div class="card-title"><div><h3>Documents</h3><p>Documents preserved with the submitted bill.</p></div><span>{{ data.bill.attachments.length }}</span></div>@if (data.bill.attachments.length) { <ul class="rows">@for (doc of data.bill.attachments; track doc.id) { <li><div><strong>{{ doc.filename }}</strong><small>{{ doc.description || doc.documentType }}</small></div><button type="button" (click)="openAttachment(doc.id, doc.filename)">View</button></li> }</ul> } @else { <p class="muted">No documents available.</p> }</section>
+
+        <section class="card"><div class="card-title"><div><h3>Payments</h3><p>Payments posted to this bill.</p></div><span>{{ data.payments.length }}</span></div>@if (data.payments.length) { <ul class="rows">@for (payment of data.payments; track payment.id) { <li><div><strong>{{ payment.amount | currency }}</strong><small>{{ payment.method | uppercase }} · {{ payment.depositDate || payment.postedAt }}</small></div></li> }</ul> } @else { <p class="muted">No payments posted.</p> }</section>
+
+        <section class="card"><div class="card-title"><div><h3>Bill history</h3><p>Submissions, payer responses, follow-up, and payments.</p></div><span>{{ data.history?.length ?? data.activity.length }}</span></div>
+          @if (data.history?.length) {
+            <!-- daisyBill-style Date/Action/User/Details table: submissions are pale-blue
+                 expandable rows (documents + compliance due dates), notes pale-yellow,
+                 277 responses expand into decoded status-code sentences. Rows arrive
+                 pre-worded from the MindBill API (BillLifecycleData.history). -->
+            <div class="history">
+              <div class="history-head" aria-hidden="true"><span>Date</span><span>Action</span><span>User</span><span>Details</span></div>
+              <ul class="history-rows">
+                @for (entry of data.history; track entry.id) {
+                  <li [class.is-submission]="entry.tone === 'submission'" [class.is-note]="entry.tone === 'note'" [class.is-problem]="entry.tone === 'problem'">
+                    <button type="button" class="history-line" [disabled]="!entry.details" [attr.aria-expanded]="entry.details ? isHistoryOpen(entry.id) : null" (click)="toggleHistory(entry.id)">
+                      <span class="h-date">{{ historyDate(entry.date) }}</span>
+                      <span class="h-action">{{ entry.action }}</span>
+                      <span class="h-actor">{{ entry.actor || '—' }}</span>
+                      <span class="h-summary">@if (entry.details) { <i [class.open]="isHistoryOpen(entry.id)" aria-hidden="true"></i> }{{ entry.summary }}</span>
+                    </button>
+                    @if (entry.details; as details) {
+                      @if (isHistoryOpen(entry.id)) {
+                        <div class="history-details">
+                          @if (details.rows?.length) { <dl class="h-kv">@for (row of details.rows ?? []; track row.label) { <div><dt>{{ row.label }}</dt><dd>{{ row.value }}</dd></div> }</dl> }
+                          @if (details.documents?.length) { <dl class="h-kv"><div><dt>Documents</dt><dd>@for (doc of details.documents ?? []; track doc.id) { <span class="h-doc">{{ doc.filename }}</span> }</dd></div></dl> }
+                          @if (details.codes?.length) { <dl class="h-codes">@for (code of details.codes ?? []; track code.code) { <div><dt>{{ code.code }}</dt><dd>{{ code.text }}</dd></div> }</dl> }
+                          @if (details.complianceDueDates?.length) { <div class="h-due"><em>Compliance Due Dates</em><dl>@for (due of details.complianceDueDates ?? []; track due.text) { <div><dt>{{ historyDate(due.date) }}</dt><dd>{{ due.text }}</dd></div> }</dl></div> }
+                          @if (details.text) { <p class="h-text">{{ details.text }}</p> }
+                        </div>
+                      }
+                    }
+                  </li>
+                }
+              </ul>
+            </div>
+          } @else {
+            <ul class="timeline">@for (event of data.activity; track event.id) { <li><i></i><div><strong>{{ activityLabel(event.type) }}</strong><p>{{ event.description }}</p><small>{{ event.createdAt | date:'medium' }}</small></div></li> }</ul>
+          }
+        </section>
+
+        @if (notice) { <p class="notice">{{ notice }}</p> }
+        <div class="actions">@for (action of data.lifecycle.actions; track action.id) { @if (action.id !== 'view_eor' || data.eors.length) { <button type="button" [class.primary]="action.primary" [disabled]="!action.enabled || store.mutating()" (click)="beginAction(action.id, data)">{{ action.label }}</button> } }</div>
+
+        @if (panel === 'payment') { <form class="card action-form" (submit)="$event.preventDefault(); postPayment()"><h3>Post payment</h3><label>Amount<input required type="number" min="0.01" step="0.01" [(ngModel)]="payment.amount" name="amount"></label><label>Method<select [(ngModel)]="payment.method" name="method"><option value="check">Check</option><option value="eft">EFT</option></select></label><label>Deposit date<input required type="date" [(ngModel)]="payment.depositDate" name="depositDate"></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Post payment</button></div></form> }
+        @if (panel === 'review') { <form class="card action-form" (submit)="$event.preventDefault(); submitReview()"><h3>Submit Second Bill Review</h3><label>Reason<textarea required [(ngModel)]="review.reason" name="reason"></textarea></label><label>Payer claim control number<input required [(ngModel)]="review.payerClaimControlNumber" name="control"></label><label>Disputed amount<input type="number" min="0" step="0.01" [(ngModel)]="review.disputedAmount" name="disputed"></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Submit review</button></div></form> }
+        @if (panel === 'close') { <form class="card action-form" (submit)="$event.preventDefault(); closeBill()"><h3>Close bill</h3><label>Reason<textarea required [(ngModel)]="closeReason" name="closeReason"></textarea></label><div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit">Close bill</button></div></form> }
+        @if (panel === 'duplicate') {
+          <form class="card action-form" (submit)="$event.preventDefault(); sendDuplicate()">
+            <h3>Send duplicate bill</h3>
+            @if (!duplicateDelivery) {
+              <p class="muted">{{ duplicateDeliveryError || 'Loading delivery options…' }}</p>
+              <div><button type="button" (click)="panel=''">Cancel</button>@if (duplicateDeliveryError) { <button class="primary" type="button" (click)="loadDuplicateDelivery()">Try again</button> }</div>
+            } @else {
+              <p class="muted">Resend the unchanged submission packet to {{ duplicateDelivery.payerName }}.</p>
+              <label>Delivery method<select [(ngModel)]="duplicate.route" name="duplicateRoute">@for (option of duplicateRoutes(); track option.route) { <option [ngValue]="option.route">{{ option.label }}</option> }</select></label>
+              @if (duplicate.route === 'fax') { <label>Fax number<input required [(ngModel)]="duplicate.faxNumber" name="duplicateFax" placeholder="(000) 000-0000"></label> }
+              @if (duplicate.route === 'email') { <label>Email<input required type="email" [(ngModel)]="duplicate.email" name="duplicateEmail" placeholder="claims@payer.example"></label> }
+              @if (duplicate.route === 'mail') { <label>Mailing address<textarea required [(ngModel)]="duplicate.mailingAddress" name="duplicateMail"></textarea></label> }
+              <div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit" [disabled]="store.mutating() || !duplicateReady()">Send duplicate</button></div>
             }
-          } @else { <div class="status">No matches</div> }
-          @if (loadingMore) { <div class="status">Loading more…</div> }
-        </div>
+          </form>
+        }
+        @if (panel === 'report_status') {
+          <form class="card action-form" (submit)="$event.preventDefault(); reportStatus()">
+            <h3>Report Bill Status</h3>
+            <p class="muted">{{ reportContactSummary }}</p>
+            <div class="report-options" role="radiogroup" aria-label="Reported bill payment status">
+              @for (option of reportStatusOptions; track option.id) {
+                <label class="report-option"><input type="radio" [value]="option.id" [(ngModel)]="report.status" name="reportStatus"><span><strong>{{ option.label }}</strong><small>{{ option.description }}</small></span></label>
+              }
+            </div>
+            <label>Company<input [(ngModel)]="report.company" name="reportCompany"></label>
+            <label>Name<input [(ngModel)]="report.representativeName" name="reportRepresentativeName"></label>
+            <label>Role<input [(ngModel)]="report.representativeRole" name="reportRepresentativeRole"></label>
+            <label>Phone Number<input [(ngModel)]="report.phone" name="reportPhone"></label>
+            <label>Call Reference Number<input [(ngModel)]="report.callReference" name="reportCallReference"></label>
+            <label>Message Note<textarea [(ngModel)]="report.note" name="reportNote"></textarea></label>
+            <div><button type="button" (click)="panel=''">Cancel</button><button class="primary" type="submit" [disabled]="!report.status || store.mutating()">Save</button></div>
+          </form>
+        }
+        @if (panel === 'resubmit' && correctionInitialBill) {
+          <div class="correction-backdrop" (mousedown)="closeCorrectionBackdrop($event)">
+            <section class="correction-dialog" role="dialog" aria-modal="true" aria-label="Correct and resubmit">
+              <button type="button" class="dialog-close" aria-label="Close" (click)="panel=''">×</button>
+              <header><h2>Correct and resubmit</h2><p>The original submission remains immutable. Review the rejected values and create the next submission attempt on this bill.</p></header>
+              @if (data.rejection; as rejection) {
+                <div class="correction-reason"><strong>{{ rejection.reason || 'Why it was rejected' }}</strong>@for (issue of rejection.issues || []; track issue.code) { <span><b>{{ issue.code }}</b> {{ issue.description }}</span> }</div>
+              }
+              @if (payerContact(data) !== 'No payer contact details are available.') { <p class="contact-hint"><strong>Questions?</strong> {{ payerContact(data) }}</p> }
+              <label class="correction-note">Correction note (optional)<textarea [(ngModel)]="correctionReason" name="correctionReason" placeholder="What changed before resubmission?"></textarea></label>
+              <mindbill-bill-submission
+                [initialBill]="correctionInitialBill"
+                [attachments]="correctionAttachments"
+                [attentionFields]="correctionAttentionFields"
+                [appearance]="appearance"
+                [sessionEndpoint]="sessionEndpoint"
+                [getSession]="getSession"
+                [apiBaseUrl]="apiBaseUrl"
+                [submitter]="resubmitFromForm"
+                heading="Corrected bill information"
+                description="Correct the highlighted values, confirm every required field, then resubmit."
+                submitLabel="Resubmit bill"
+                (submitted)="finishCorrection()"
+              />
+            </section>
+          </div>
+        }
       }
-    </div>
-  `, styles: [":host{display:block}.combo{position:relative}input{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}input[aria-invalid=true]{border-color:#c83c3c}.menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;max-height:320px;overflow:auto;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);box-shadow:0 14px 35px #172b3730}.menu button{display:grid;width:100%;gap:3px;border:0;border-bottom:1px solid color-mix(in srgb,var(--b) 60%,transparent);background:var(--s);padding:11px 14px;text-align:left;color:var(--t);font:inherit;cursor:pointer}.menu button:last-child{border-bottom:0}.menu button:hover{background:color-mix(in srgb,var(--a) 7%,var(--s))}.menu strong{font-weight:720}.menu small{color:var(--m);font-size:12px}.status{padding:11px 14px;color:var(--m);font-size:13px}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], placeholder: [{
+    </section>
+  `, styles: [":host{display:block}.mb{font-family:var(--font);color:var(--t);background:var(--bg);padding:20px}.summary,.card,.columns,.rejection{display:block;max-width:1120px;margin:0 auto 16px}.summary{display:flex;justify-content:space-between;align-items:end}.summary h2{margin:4px 0}.summary p,.muted{color:var(--m)}.eyebrow,dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--m)}.money{text-align:right}.money span{display:block;font-size:28px;font-weight:800}.money small{color:var(--m)}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);padding:20px}.card-title{display:flex;justify-content:space-between;gap:20px}.card-title h3{margin:0}.card-title p{margin:5px 0;color:var(--m)}.progress ol{display:flex;list-style:none;padding:0;margin:0}.progress li{flex:1;text-align:center;position:relative;color:var(--m)}.progress li:before{content:\"\";position:absolute;top:16px;left:0;right:0;border-top:2px solid var(--b)}.progress li:first-child:before{left:50%}.progress li:last-child:before{right:50%}.progress b{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;margin:auto;border:2px solid var(--b);border-radius:50%;background:var(--s)}.progress .complete b,.progress .current b{border-color:var(--a);background:var(--a);color:var(--ac)}.progress span{display:block;margin-top:8px;font-size:12px;font-weight:700}.snapshot dl,.columns dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.snapshot dd,.columns dd{font-weight:700;margin:6px 0}.columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.columns .card{margin:0}.rows,.timeline{list-style:none;margin:12px 0 0;padding:0}.rows li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--b)}.rows small{display:block;color:var(--m);margin-top:3px}.timeline li{display:flex;gap:14px;padding:10px 0}.timeline i{width:10px;height:10px;margin-top:5px;border:3px solid var(--a);border-radius:50%}.timeline p{margin:4px 0}.timeline small{color:var(--m)}button,input,select,textarea{font:inherit;border:1px solid var(--b);border-radius:var(--cr);padding:9px 12px;background:var(--s);color:var(--t)}button{cursor:pointer;font-weight:700}.primary{background:var(--a);border-color:var(--a);color:var(--ac)}.actions{max-width:1120px;margin:0 auto;display:flex;justify-content:flex-end;gap:10px}.action-form{display:grid;gap:12px}.action-form label{display:grid;gap:5px;font-weight:700}.action-form div{display:flex;justify-content:flex-end;gap:10px}.state{max-width:720px;margin:auto;padding:32px;text-align:center}.state span{display:block;margin:8px}.error{color:#9b1c1c}.notice{max-width:1120px;margin:0 auto 12px;color:var(--m)}@media(max-width:760px){.mb{padding:12px}.summary,.columns{display:block}.money{text-align:left;margin-top:12px}.columns .card{margin-bottom:12px}.snapshot dl,.columns dl{grid-template-columns:1fr 1fr}.progress span{font-size:10px}.card{padding:15px}}.history{border:1px solid var(--b);border-radius:10px;overflow:hidden;margin-top:12px}.history-head{display:grid;grid-template-columns:96px 150px 130px minmax(0,1fr);gap:12px;padding:8px 14px;background:color-mix(in srgb,var(--b) 26%,var(--s));color:var(--m);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.history-rows{list-style:none;margin:0;padding:0}.history-rows>li{border-top:1px solid var(--b)}.history-rows>li.is-submission{background:color-mix(in srgb,var(--a) 9%,var(--s))}.history-rows>li.is-note{background:color-mix(in srgb,#f2c344 13%,var(--s))}.history-line{display:grid;grid-template-columns:96px 150px 130px minmax(0,1fr);gap:12px;width:100%;padding:10px 14px;border:0;border-radius:0;background:transparent;text-align:left;font-weight:400;cursor:default}.history-line:not(:disabled){cursor:pointer}.history-line:not(:disabled):hover .h-summary{text-decoration:underline}.h-date,.h-actor{color:var(--m);font-size:13px;overflow-wrap:anywhere}.h-action{font-weight:700;font-size:13.5px}.is-problem .h-action{color:#9b1c1c}.h-summary{display:flex;gap:7px;min-width:0;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}.h-summary i{flex:0 0 auto;margin-top:5px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid var(--m);border-radius:0;transition:transform .12s ease}.h-summary i.open{transform:rotate(90deg)}.history-details{padding:4px 14px 14px 122px;font-size:13.5px;line-height:1.5}.h-kv,.h-codes,.h-due dl{display:grid;gap:4px;margin:0}.h-kv>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);padding-top:4px}.h-kv dt,.h-codes dt,.h-due dt{font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--t)}.h-kv dd,.h-codes dd,.h-due dd{margin:0;overflow-wrap:anywhere}.h-doc{display:block}.h-codes>div{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px}.h-codes dt{font-weight:800}.h-due{margin-top:8px}.h-due em{display:block;color:var(--m);font-size:12.5px;margin-bottom:4px}.h-due dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);padding-top:4px}.h-text{margin:8px 0 0;white-space:pre-wrap}@media(max-width:760px){.history-head{display:none}.history-line{grid-template-columns:1fr;gap:2px;padding:10px 12px}.history-details{padding:4px 12px 12px}.h-kv>div,.h-due dl>div{grid-template-columns:1fr}}.report-options{display:grid;gap:8px}.action-form label.report-option{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--b);border-radius:var(--cr);padding:10px 12px;font-weight:400;cursor:pointer}.report-option input{width:16px;min-height:16px;margin-top:3px;padding:0;border:0}.report-option strong{display:block;font-size:13.5px}.report-option small{display:block;color:var(--m);margin-top:2px;font-size:12.5px}.correction-backdrop{position:fixed;inset:0;z-index:100;overflow:auto;background:#172b37b8;padding:28px}.correction-dialog{position:relative;max-width:1180px;margin:0 auto;background:var(--bg);border-radius:var(--r);box-shadow:0 24px 80px #0006;padding:26px}.correction-dialog>header{padding-right:48px;margin-bottom:18px}.correction-dialog h2{margin:0 0 6px}.correction-dialog p{margin:0;color:var(--m)}.dialog-close{position:absolute;right:20px;top:20px;width:40px;height:40px;padding:0;font-size:24px}.correction-reason{display:grid;gap:8px;margin-bottom:14px;border-left:4px solid #c43d3d;border-radius:8px;background:#fff5f5;padding:14px;color:#8f2525}.correction-reason span{display:block}.correction-reason b{margin-right:6px}.contact-hint{margin:0 0 14px!important;border:1px solid var(--b);border-radius:8px;background:var(--s);padding:12px!important;color:var(--t)!important}.correction-note{display:grid;gap:6px;margin-bottom:18px;font-weight:700}.correction-note textarea{min-height:76px}.correction-dialog mindbill-bill-submission{display:block}.correction-dialog .mb{padding:0}@media(max-width:760px){.correction-backdrop{padding:0}.correction-dialog{min-height:100%;border-radius:0;padding:18px 12px}.dialog-close{right:12px;top:12px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { billId: [{
                 type: Input
-            }], options: [{
+            }], sessionEndpoint: [{
                 type: Input
-            }], disabled: [{
+            }], apiBaseUrl: [{
                 type: Input
-            }], loading: [{
+            }], getSession: [{
                 type: Input
-            }], loadingMore: [{
+            }], refreshInterval: [{
                 type: Input
-            }], invalid: [{
+            }], appearance: [{
                 type: Input
-            }], preserveValueOnOpen: [{
+            }], billingError: [{
+                type: Output
+            }] } });
+const CORRECTION_DOCUMENT_TYPES = new Set(["final_report", "letter_of_attestation", "proof_of_service", "form_122", "return_to_work_voucher", "w9", "medical_records", "appeal", "other"]);
+function correctionDocumentType(value) { return (CORRECTION_DOCUMENT_TYPES.has(value) ? value : "other"); }
+function correctionBill(data) {
+    const billing = data.bill.billingSnapshot?.billingProvider;
+    const rendering = data.bill.billingSnapshot?.renderingProvider;
+    const location = data.bill.billingSnapshot?.placeOfService;
+    const nameParts = data.patient.name.trim().split(/\s+/);
+    return {
+        billingMode: data.bill.billingMode,
+        patient: {
+            firstName: data.patient.firstName || nameParts[0] || "",
+            ...(data.patient.middleName ? { middleName: data.patient.middleName } : {}),
+            lastName: data.patient.lastName || nameParts.slice(1).join(" ") || "",
+            dateOfBirth: data.patient.dob || "",
+            ...(data.patient.phone ? { phone: data.patient.phone } : {}),
+            address: { line1: data.patient.address?.line1 || "", city: data.patient.address?.city || "", state: data.patient.address?.state || "", postalCode: data.patient.address?.postalCode || "" },
+        },
+        claim: {
+            claimNumber: data.injury.claimNumber || "",
+            ...(data.injury.adjNumber ? { adjNumber: data.injury.adjNumber } : {}),
+            employer: data.injury.employer || "",
+            dateOfInjury: data.injury.doi || "",
+            ...(data.injury.injuryDescription ? { description: data.injury.injuryDescription } : {}),
+            claimsAdministrator: { id: data.injury.claimsAdminId || "", name: data.injury.claimsAdminName || "" },
+        },
+        service: { date: data.bill.dos, ...(data.bill.dosEnd !== undefined ? { endDate: data.bill.dosEnd } : {}), ...(data.bill.authorizationNumber !== undefined ? { authorizationNumber: data.bill.authorizationNumber } : {}) },
+        billingProvider: {
+            name: billing?.name || "", taxId: billing?.taxId || "", npi: billing?.npi || "", phone: billing?.phone || "",
+            address: { line1: billing?.billingStreet || "", city: billing?.billingCity || "", state: billing?.billingState || "", postalCode: billing?.billingZip || "" },
+        },
+        renderingProvider: {
+            name: rendering?.name || "", npi: rendering?.npi || "", taxonomy: rendering?.taxonomy || "",
+            ...(rendering?.specialty ? { specialty: rendering.specialty } : {}), ...(rendering?.licenseNumber ? { licenseNumber: rendering.licenseNumber } : {}), ...(rendering?.licenseState ? { licenseState: rendering.licenseState } : {}),
+            ...(rendering?.isQME !== undefined ? { isQme: rendering.isQME } : {}), ...(rendering?.isAME !== undefined ? { isAme: rendering.isAME } : {}),
+        },
+        serviceLocation: {
+            ...(location?.name ? { name: location.name } : {}),
+            address: { line1: location?.street || "", city: location?.city || "", state: location?.state || "", postalCode: location?.zip || "" },
+            placeOfServiceCode: location?.posCode || "",
+        },
+        diagnoses: [...(data.injury.diagnosisCodes || [])],
+        serviceLines: data.bill.lineItems.map((line) => ({ code: line.code, modifiers: [...line.modifiers], units: line.units, charge: line.charge, ...(line.serviceDate ? { serviceDate: line.serviceDate } : {}), ...(line.serviceDateEnd !== undefined ? { serviceDateEnd: line.serviceDateEnd } : {}), ...(line.diagnosisPointers ? { diagnosisPointers: [...line.diagnosisPointers] } : {}) })),
+    };
+}
+
+const EMPTY_PROCEDURE_LINE = {
+    code: "",
+    modifiers: [],
+    units: 1,
+    charge: 0,
+};
+function isEmptyProcedureLine(line) {
+    return !line.code.trim()
+        && line.modifiers.length === 0
+        && line.units === 1
+        && !line.serviceDate
+        && !line.serviceDateEnd
+        && !(line.diagnosisPointers?.length)
+        && !line.charge;
+}
+/** Keeps completed/partial lines plus one keyboard-ready empty row. */
+function ensureTrailingProcedureLine(lines) {
+    const entered = lines
+        .filter((line) => !isEmptyProcedureLine(line))
+        .map((line) => ({ ...line, modifiers: [...line.modifiers] }));
+    return entered.length < 50
+        ? [...entered, { ...EMPTY_PROCEDURE_LINE, modifiers: [] }]
+        : entered;
+}
+
+const THEME$3 = {
+    mindbill: { a: "#238dbd", ac: "#fff", bg: "#f3f8fa", s: "#fff", t: "#203743", m: "#657982", b: "#dbe6ea", r: "14px", cr: "8px", font: "Inter,system-ui,sans-serif" },
+    "qme-companion": { a: "#53b5dc", ac: "#173542", bg: "#f2f8fb", s: "#fff", t: "#1d3440", m: "#617783", b: "#d7e5eb", r: "12px", cr: "8px", font: "Inter,system-ui,sans-serif" },
+    "orange-bright": { a: "#f4510b", ac: "#fff", bg: "#fffaf6", s: "#fffefd", t: "#090f1f", m: "#626a73", b: "#e7e1da", r: "16px", cr: "10px", font: "Inter,system-ui,sans-serif" },
+    "clinical-blue": { a: "#1677ff", ac: "#fff", bg: "#f5f7fa", s: "#fff", t: "#1f2d3d", m: "#66788a", b: "#d9e2ec", r: "8px", cr: "6px", font: "Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif" },
+};
+function mindBillAgingDays(bill, now = new Date()) {
+    if (bill.agingDays != null)
+        return Math.max(0, Math.floor(bill.agingDays));
+    const source = bill.submittedAt ?? bill.updatedAt;
+    if (!source)
+        return 0;
+    const time = new Date(source).getTime();
+    return Number.isFinite(time) ? Math.max(0, Math.floor((now.getTime() - time) / 86_400_000)) : 0;
+}
+function mindBillAgingBucket(days) {
+    if (days <= 30)
+        return "current";
+    if (days <= 60)
+        return "31-60";
+    if (days <= 90)
+        return "61-90";
+    return "91+";
+}
+function summarizeMindBillDashboard(bills, now = new Date()) {
+    const aging = [
+        { id: "current", label: "0–30 days", count: 0, balance: 0 },
+        { id: "31-60", label: "31–60 days", count: 0, balance: 0 },
+        { id: "61-90", label: "61–90 days", count: 0, balance: 0 },
+        { id: "91+", label: "91+ days", count: 0, balance: 0 },
+    ];
+    for (const bill of bills) {
+        const bucket = aging.find((item) => item.id === mindBillAgingBucket(mindBillAgingDays(bill, now)));
+        bucket.count += 1;
+        bucket.balance += bill.balanceDue;
+    }
+    return {
+        totalBilled: bills.reduce((sum, item) => sum + item.totalCharge, 0),
+        totalPaid: bills.reduce((sum, item) => sum + item.totalPaid, 0),
+        outstanding: bills.reduce((sum, item) => sum + item.balanceDue, 0),
+        openCount: bills.filter((item) => !/closed|paid|written.off/i.test(item.state)).length,
+        submittedThisMonth: bills.filter((item) => sameMonth(item.submittedAt, now)).length,
+        closedThisMonth: bills.filter((item) => /closed|paid|written.off/i.test(item.state) && sameMonth(item.updatedAt ?? item.submittedAt, now)).length,
+        bills,
+        aging,
+    };
+}
+function sameMonth(value, now) {
+    if (!value)
+        return false;
+    const date = new Date(value);
+    return Number.isFinite(date.getTime()) && date.getUTCFullYear() === now.getUTCFullYear() && date.getUTCMonth() === now.getUTCMonth();
+}
+function buildMindBillReportRows(bills, dimension) {
+    const rows = new Map();
+    for (const bill of bills) {
+        const key = dimension === "payer" ? bill.payerName || "Unassigned payer" : dimension === "aging" ? mindBillAgingBucket(mindBillAgingDays(bill)) : bill.state;
+        const label = key.replace(/_/g, " ").replace(/\b\w/g, (value) => value.toUpperCase());
+        const row = rows.get(key) ?? { key, label, billCount: 0, totalBilled: 0, totalPaid: 0, balanceDue: 0 };
+        row.billCount += 1;
+        row.totalBilled += bill.totalCharge;
+        row.totalPaid += bill.totalPaid;
+        row.balanceDue += bill.balanceDue;
+        rows.set(key, row);
+    }
+    return [...rows.values()].sort((a, b) => b.balanceDue - a.balanceDue || a.label.localeCompare(b.label));
+}
+function buildMindBillReportCsv(rows) {
+    const quote = (value) => `"${String(value).replace(/"/g, '""')}"`;
+    return ["Group,Bills,Total billed,Total paid,Balance due", ...rows.map((row) => [row.label, row.billCount, row.totalBilled, row.totalPaid, row.balanceDue].map(quote).join(","))].join("\n");
+}
+class DashboardBase {
+    appearance = { preset: "mindbill" };
+    get themeStyle() {
+        const base = THEME$3[this.appearance.preset ?? "mindbill"] ?? THEME$3["mindbill"];
+        return {
+            "--a": this.appearance.accentColor ?? base["a"], "--ac": this.appearance.accentTextColor ?? base["ac"],
+            "--bg": this.appearance.backgroundColor ?? base["bg"], "--s": this.appearance.surfaceColor ?? base["s"],
+            "--t": this.appearance.textColor ?? base["t"], "--m": this.appearance.mutedColor ?? base["m"],
+            "--b": this.appearance.borderColor ?? base["b"], "--r": this.appearance.borderRadius ?? base["r"],
+            "--cr": this.appearance.controlRadius ?? base["cr"], "--font": this.appearance.fontFamily ?? base["font"],
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DashboardBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: DashboardBase, isStandalone: true, inputs: { appearance: "appearance" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: DashboardBase, decorators: [{
+            type: Directive
+        }], propDecorators: { appearance: [{
                 type: Input
-            }], ariaLabel: [{
+            }] } });
+const sharedStyles = `
+  :host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}
+  .money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}
+`;
+class MindBillBillAgingSummaryComponent extends DashboardBase {
+    buckets = [];
+    selectedBucket = "";
+    bucketSelected = new EventEmitter();
+    width(balance) { const max = Math.max(1, ...this.buckets.map((item) => item.balance)); return Math.max(balance ? 8 : 0, balance / max * 100); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillAgingSummaryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillAgingSummaryComponent, isStandalone: true, selector: "mindbill-bill-aging-summary", inputs: { buckets: "buckets", selectedBucket: "selectedBucket" }, outputs: { bucketSelected: "bucketSelected" }, usesInheritance: true, ngImport: i0, template: `<section class="mbd aging" [ngStyle]="themeStyle" aria-label="Accounts receivable aging">@for (bucket of buckets; track bucket.id) { <button type="button" class="card" [class.selected]="selectedBucket === bucket.id" (click)="bucketSelected.emit(bucket.id)"><div><strong>{{ bucket.label }}</strong><span>{{ bucket.count }} bill{{ bucket.count === 1 ? '' : 's' }}</span></div><b class="money">{{ bucket.balance | currency }}</b><i><em [style.width.%]="width(bucket.balance)"></em></i></button> }</section>`, isInline: true, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".aging{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.aging>button{border:1px solid var(--b);padding:16px;text-align:left;color:var(--t);cursor:pointer}.aging>button:hover,.aging>button.selected{border-color:var(--a);background:color-mix(in srgb,var(--a) 6%,var(--s))}.aging button>div{display:flex;justify-content:space-between;gap:8px}.aging span{color:var(--m);font-size:12px}.aging b{display:block;font-size:20px;margin:14px 0 12px}.aging i{display:block;height:5px;border-radius:99px;background:color-mix(in srgb,var(--b) 70%,transparent);overflow:hidden}.aging em{display:block;height:100%;background:var(--a)}@media(max-width:760px){.aging{grid-template-columns:1fr 1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillAgingSummaryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mindbill-bill-aging-summary", standalone: true, imports: [CommonModule], template: `<section class="mbd aging" [ngStyle]="themeStyle" aria-label="Accounts receivable aging">@for (bucket of buckets; track bucket.id) { <button type="button" class="card" [class.selected]="selectedBucket === bucket.id" (click)="bucketSelected.emit(bucket.id)"><div><strong>{{ bucket.label }}</strong><span>{{ bucket.count }} bill{{ bucket.count === 1 ? '' : 's' }}</span></div><b class="money">{{ bucket.balance | currency }}</b><i><em [style.width.%]="width(bucket.balance)"></em></i></button> }</section>`, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".aging{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.aging>button{border:1px solid var(--b);padding:16px;text-align:left;color:var(--t);cursor:pointer}.aging>button:hover,.aging>button.selected{border-color:var(--a);background:color-mix(in srgb,var(--a) 6%,var(--s))}.aging button>div{display:flex;justify-content:space-between;gap:8px}.aging span{color:var(--m);font-size:12px}.aging b{display:block;font-size:20px;margin:14px 0 12px}.aging i{display:block;height:5px;border-radius:99px;background:color-mix(in srgb,var(--b) 70%,transparent);overflow:hidden}.aging em{display:block;height:100%;background:var(--a)}@media(max-width:760px){.aging{grid-template-columns:1fr 1fr}}\n"] }]
+        }], propDecorators: { buckets: [{
                 type: Input
-            }], createOption: [{
+            }], selectedBucket: [{
                 type: Input
-            }], opened: [{
-                type: Output
-            }], queryChange: [{
-                type: Output
-            }], endReached: [{
+            }], bucketSelected: [{
                 type: Output
-            }], selected: [{
+            }] } });
+class MindBillBillListComponent extends DashboardBase {
+    bills = [];
+    billSelected = new EventEmitter();
+    age(bill) { return mindBillAgingDays(bill); }
+    label(value) { return value.replace(/_/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase()); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillListComponent, isStandalone: true, selector: "mindbill-bill-list", inputs: { bills: "bills" }, outputs: { billSelected: "billSelected" }, usesInheritance: true, ngImport: i0, template: `<section class="mbd list card" [ngStyle]="themeStyle"><div class="head"><strong>Bill</strong><strong>Payer</strong><strong>Status</strong><strong>Age</strong><strong>Balance</strong></div>@for (bill of bills; track bill.id) { <button type="button" (click)="billSelected.emit(bill)"><span><b>{{ bill.patientName }}</b><small>{{ bill.claimNumber || bill.workItemLabel || bill.externalId || bill.id }}</small></span><span>{{ bill.payerName || '—' }}</span><span><i class="pill">{{ label(bill.state) }}</i></span><span>{{ age(bill) }} days</span><span class="money"><b>{{ bill.balanceDue | currency }}</b><small>{{ bill.totalPaid | currency }} paid</small></span></button> } @empty { <p class="empty">No bills match these filters.</p> }</section>`, isInline: true, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".list{overflow:hidden}.head,.list button{display:grid;grid-template-columns:1.6fr 1.2fr .85fr .55fr .8fr;gap:18px;align-items:center;text-align:left}.head{padding:11px 16px;background:color-mix(in srgb,var(--bg) 78%,var(--s));color:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.list button{width:100%;border:0;border-top:1px solid var(--b);background:var(--s);color:var(--t);padding:15px 16px;cursor:pointer}.list button:hover{background:color-mix(in srgb,var(--a) 5%,var(--s))}.list span,.list small{min-width:0}.list small{display:block;color:var(--m);margin-top:4px}.money{text-align:right}.empty{padding:24px;text-align:center;color:var(--m)}@media(max-width:760px){.head{display:none}.list button{grid-template-columns:1fr auto;gap:10px}.list button>span:nth-child(2){grid-column:1}.list button>span:nth-child(3){grid-row:1;grid-column:2}.list button>span:nth-child(4){grid-column:1}.money{grid-column:2;grid-row:2/4}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mindbill-bill-list", standalone: true, imports: [CommonModule], template: `<section class="mbd list card" [ngStyle]="themeStyle"><div class="head"><strong>Bill</strong><strong>Payer</strong><strong>Status</strong><strong>Age</strong><strong>Balance</strong></div>@for (bill of bills; track bill.id) { <button type="button" (click)="billSelected.emit(bill)"><span><b>{{ bill.patientName }}</b><small>{{ bill.claimNumber || bill.workItemLabel || bill.externalId || bill.id }}</small></span><span>{{ bill.payerName || '—' }}</span><span><i class="pill">{{ label(bill.state) }}</i></span><span>{{ age(bill) }} days</span><span class="money"><b>{{ bill.balanceDue | currency }}</b><small>{{ bill.totalPaid | currency }} paid</small></span></button> } @empty { <p class="empty">No bills match these filters.</p> }</section>`, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".list{overflow:hidden}.head,.list button{display:grid;grid-template-columns:1.6fr 1.2fr .85fr .55fr .8fr;gap:18px;align-items:center;text-align:left}.head{padding:11px 16px;background:color-mix(in srgb,var(--bg) 78%,var(--s));color:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.list button{width:100%;border:0;border-top:1px solid var(--b);background:var(--s);color:var(--t);padding:15px 16px;cursor:pointer}.list button:hover{background:color-mix(in srgb,var(--a) 5%,var(--s))}.list span,.list small{min-width:0}.list small{display:block;color:var(--m);margin-top:4px}.money{text-align:right}.empty{padding:24px;text-align:center;color:var(--m)}@media(max-width:760px){.head{display:none}.list button{grid-template-columns:1fr auto;gap:10px}.list button>span:nth-child(2){grid-column:1}.list button>span:nth-child(3){grid-row:1;grid-column:2}.list button>span:nth-child(4){grid-column:1}.money{grid-column:2;grid-row:2/4}}\n"] }]
+        }], propDecorators: { bills: [{
+                type: Input
+            }], billSelected: [{
                 type: Output
             }] } });
-/** MM/DD/YYYY masked date input. Emits only parseable ISO dates (or "" when
- * cleared) and reformats the display once a complete date round-trips, exactly
- * like the React package's TextDateInput. */
-class MindBillDateInputComponent {
-    value;
-    disabled = false;
-    ariaLabel = "";
-    valueChange = new EventEmitter();
-    display = "";
-    invalid = false;
-    ngOnChanges(changes) {
-        if (changes["value"]) {
-            this.display = formatMindBillSubmissionDate(this.value);
-            this.invalid = false;
-        }
-    }
-    onInput(event) {
-        const next = event.target.value;
-        const parsed = parseMindBillSubmissionDate(next);
-        this.display = next;
-        this.invalid = Boolean(next && !parsed);
-        if (!next.trim())
-            this.valueChange.emit("");
-        else if (parsed)
-            this.valueChange.emit(parsed);
-    }
-    onBlur() {
-        this.invalid = Boolean(this.display && !parseMindBillSubmissionDate(this.display));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillDateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillDateInputComponent, isStandalone: true, selector: "mindbill-date-input", inputs: { value: "value", disabled: "disabled", ariaLabel: "ariaLabel" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: `
-    <input
-      type="text"
-      inputmode="numeric"
-      autocomplete="off"
-      placeholder="MM/DD/YYYY"
-      [attr.aria-label]="ariaLabel"
-      [attr.aria-invalid]="invalid || null"
-      [disabled]="disabled"
-      [value]="display"
-      (input)="onInput($event)"
-      (blur)="onBlur()"
-    />
-    @if (invalid) { <small>Use MM/DD/YYYY</small> }
-  `, isInline: true, styles: [":host{display:block}input{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}input[aria-invalid=true]{border-color:#c83c3c}small{display:block;margin-top:6px;color:#c83c3c;font-weight:450}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+class MindBillBillingDashboardComponent extends DashboardBase {
+    bills = [];
+    heading = "Billing dashboard";
+    description = "Track every submitted bill from payer acceptance through payment.";
+    billSelected = new EventEmitter();
+    createBill = new EventEmitter();
+    query = "";
+    state = "";
+    agingBucket = "";
+    get summary() { return summarizeMindBillDashboard(this.bills); }
+    get states() { return [...new Set(this.bills.map((bill) => bill.state))].sort(); }
+    get filteredBills() { const query = this.query.trim().toLowerCase(); return this.bills.filter((bill) => (!this.state || bill.state === this.state) && (!this.agingBucket || mindBillAgingBucket(mindBillAgingDays(bill)) === this.agingBucket) && (!query || [bill.patientName, bill.claimNumber, bill.payerName, bill.externalId, bill.billNumber].some((value) => String(value ?? "").toLowerCase().includes(query)))); }
+    get agingLabel() { return this.summary.aging.find((item) => item.id === this.agingBucket)?.label ?? ""; }
+    toggleAging(bucket) { this.agingBucket = this.agingBucket === bucket ? "" : bucket; }
+    label(value) { return value.replace(/_/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase()); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillingDashboardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillingDashboardComponent, isStandalone: true, selector: "mindbill-billing-dashboard", inputs: { bills: "bills", heading: "heading", description: "description" }, outputs: { billSelected: "billSelected", createBill: "createBill" }, usesInheritance: true, ngImport: i0, template: `<section class="mbd dashboard" [ngStyle]="themeStyle"><header><div><p>Billing operations</p><h2>{{ heading }}</h2><span class="muted">{{ description }}</span></div><button type="button" (click)="createBill.emit()">+ New bill</button></header><div class="metrics"><article class="card"><span>Total billed</span><b>{{ summary.totalBilled | currency }}</b></article><article class="card"><span>Outstanding</span><b>{{ summary.outstanding | currency }}</b></article><article class="card"><span>Submitted this month</span><b>{{ summary.submittedThisMonth }}</b></article><article class="card"><span>Closed this month</span><b>{{ summary.closedThisMonth }}</b></article></div><mindbill-bill-aging-summary [buckets]="summary.aging" [selectedBucket]="agingBucket" [appearance]="appearance" (bucketSelected)="toggleAging($event)"/><div class="filters"><input [(ngModel)]="query" placeholder="Search patient, claim, or payer" aria-label="Search bills"><select [(ngModel)]="state"><option value="">All statuses</option>@for (option of states; track option) { <option [value]="option">{{ label(option) }}</option> }</select>@if (agingBucket) { <button type="button" class="clear" (click)="agingBucket=''">{{ agingLabel }} ×</button> }</div><mindbill-bill-list [bills]="filteredBills" [appearance]="appearance" (billSelected)="billSelected.emit($event)"/></section>`, isInline: true, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".dashboard{display:grid;gap:18px}.dashboard header{display:flex;justify-content:space-between;align-items:end;gap:20px}.dashboard h2{font-size:28px;margin:2px 0 5px}.dashboard header p{margin:0;color:var(--a);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.dashboard header button{border:0;border-radius:var(--cr);background:var(--a);color:var(--ac);padding:11px 16px;font-weight:750;cursor:pointer}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metrics article{padding:18px}.metrics span{display:block;color:var(--m);font-size:12px}.metrics b{display:block;margin-top:8px;font-size:24px}.filters{display:grid;grid-template-columns:1fr 190px auto;gap:10px}.filters input,.filters select,.filters .clear{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);color:var(--t);padding:11px 13px}.filters .clear{color:var(--a);font-weight:700;cursor:pointer}@media(max-width:760px){.dashboard header{align-items:start}.metrics{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MindBillBillAgingSummaryComponent, selector: "mindbill-bill-aging-summary", inputs: ["buckets", "selectedBucket"], outputs: ["bucketSelected"] }, { kind: "component", type: MindBillBillListComponent, selector: "mindbill-bill-list", inputs: ["bills"], outputs: ["billSelected"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillDateInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillingDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mindbill-date-input", standalone: true, imports: [CommonModule], template: `
-    <input
-      type="text"
-      inputmode="numeric"
-      autocomplete="off"
-      placeholder="MM/DD/YYYY"
-      [attr.aria-label]="ariaLabel"
-      [attr.aria-invalid]="invalid || null"
-      [disabled]="disabled"
-      [value]="display"
-      (input)="onInput($event)"
-      (blur)="onBlur()"
-    />
-    @if (invalid) { <small>Use MM/DD/YYYY</small> }
-  `, styles: [":host{display:block}input{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}input[aria-invalid=true]{border-color:#c83c3c}small{display:block;margin-top:6px;color:#c83c3c;font-weight:450}\n"] }]
-        }], propDecorators: { value: [{
+            args: [{ selector: "mindbill-billing-dashboard", standalone: true, imports: [CommonModule, FormsModule, MindBillBillAgingSummaryComponent, MindBillBillListComponent], template: `<section class="mbd dashboard" [ngStyle]="themeStyle"><header><div><p>Billing operations</p><h2>{{ heading }}</h2><span class="muted">{{ description }}</span></div><button type="button" (click)="createBill.emit()">+ New bill</button></header><div class="metrics"><article class="card"><span>Total billed</span><b>{{ summary.totalBilled | currency }}</b></article><article class="card"><span>Outstanding</span><b>{{ summary.outstanding | currency }}</b></article><article class="card"><span>Submitted this month</span><b>{{ summary.submittedThisMonth }}</b></article><article class="card"><span>Closed this month</span><b>{{ summary.closedThisMonth }}</b></article></div><mindbill-bill-aging-summary [buckets]="summary.aging" [selectedBucket]="agingBucket" [appearance]="appearance" (bucketSelected)="toggleAging($event)"/><div class="filters"><input [(ngModel)]="query" placeholder="Search patient, claim, or payer" aria-label="Search bills"><select [(ngModel)]="state"><option value="">All statuses</option>@for (option of states; track option) { <option [value]="option">{{ label(option) }}</option> }</select>@if (agingBucket) { <button type="button" class="clear" (click)="agingBucket=''">{{ agingLabel }} ×</button> }</div><mindbill-bill-list [bills]="filteredBills" [appearance]="appearance" (billSelected)="billSelected.emit($event)"/></section>`, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".dashboard{display:grid;gap:18px}.dashboard header{display:flex;justify-content:space-between;align-items:end;gap:20px}.dashboard h2{font-size:28px;margin:2px 0 5px}.dashboard header p{margin:0;color:var(--a);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.dashboard header button{border:0;border-radius:var(--cr);background:var(--a);color:var(--ac);padding:11px 16px;font-weight:750;cursor:pointer}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metrics article{padding:18px}.metrics span{display:block;color:var(--m);font-size:12px}.metrics b{display:block;margin-top:8px;font-size:24px}.filters{display:grid;grid-template-columns:1fr 190px auto;gap:10px}.filters input,.filters select,.filters .clear{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);color:var(--t);padding:11px 13px}.filters .clear{color:var(--a);font-weight:700;cursor:pointer}@media(max-width:760px){.dashboard header{align-items:start}.metrics{grid-template-columns:1fr 1fr}.filters{grid-template-columns:1fr}}\n"] }]
+        }], propDecorators: { bills: [{
                 type: Input
-            }], disabled: [{
+            }], heading: [{
                 type: Input
-            }], ariaLabel: [{
+            }], description: [{
                 type: Input
-            }], valueChange: [{
+            }], billSelected: [{
+                type: Output
+            }], createBill: [{
                 type: Output
             }] } });
+class MindBillBillingReportComponent extends DashboardBase {
+    bills = [];
+    heading = "Billing report";
+    dimension = "status";
+    get rows() { return buildMindBillReportRows(this.bills, this.dimension); }
+    downloadCsv() { const blob = new Blob([buildMindBillReportCsv(this.rows)], { type: "text/csv;charset=utf-8" }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `mindbill-${this.dimension}-report.csv`; link.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillingReportComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillingReportComponent, isStandalone: true, selector: "mindbill-billing-report", inputs: { bills: "bills", heading: "heading" }, usesInheritance: true, ngImport: i0, template: `<section class="mbd report card" [ngStyle]="themeStyle"><header><div><h2>{{ heading }}</h2><p>Operational totals grouped for reconciliation and follow-up.</p></div><div><select [(ngModel)]="dimension"><option value="status">Status</option><option value="payer">Payer</option><option value="aging">Aging</option></select><button type="button" (click)="downloadCsv()">Export CSV</button></div></header><div class="thead"><b>Group</b><b>Bills</b><b>Total billed</b><b>Total paid</b><b>Balance due</b></div>@for (row of rows; track row.key) { <div class="row"><strong>{{ row.label }}</strong><span>{{ row.billCount }}</span><span>{{ row.totalBilled | currency }}</span><span>{{ row.totalPaid | currency }}</span><b>{{ row.balanceDue | currency }}</b></div> }</section>`, isInline: true, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".report{overflow:hidden}.report header{display:flex;justify-content:space-between;align-items:center;padding:18px}.report h2{margin:0;font-size:22px}.report p{margin:4px 0 0;color:var(--m)}.report header div:last-child{display:flex;gap:8px}.report select,.report button{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);color:var(--t);padding:9px 12px}.report button{background:var(--a);border-color:var(--a);color:var(--ac);font-weight:750;cursor:pointer}.thead,.row{display:grid;grid-template-columns:1.5fr .5fr 1fr 1fr 1fr;gap:14px;padding:12px 18px;border-top:1px solid var(--b);align-items:center}.thead{background:color-mix(in srgb,var(--bg) 78%,var(--s));color:var(--m);font-size:11px;text-transform:uppercase}.row span,.row b:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}@media(max-width:700px){.report header{align-items:flex-start}.thead{display:none}.row{grid-template-columns:1fr 1fr}.row>*:nth-child(n+2){text-align:right}.row strong{grid-column:1}.row span:nth-child(2){grid-column:2}.row span:nth-child(3):before{content:\"Billed \";color:var(--m)}.row span:nth-child(4):before{content:\"Paid \";color:var(--m)}.row b:before{content:\"Due \";color:var(--m)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillingReportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mindbill-billing-report", standalone: true, imports: [CommonModule, FormsModule], template: `<section class="mbd report card" [ngStyle]="themeStyle"><header><div><h2>{{ heading }}</h2><p>Operational totals grouped for reconciliation and follow-up.</p></div><div><select [(ngModel)]="dimension"><option value="status">Status</option><option value="payer">Payer</option><option value="aging">Aging</option></select><button type="button" (click)="downloadCsv()">Export CSV</button></div></header><div class="thead"><b>Group</b><b>Bills</b><b>Total billed</b><b>Total paid</b><b>Balance due</b></div>@for (row of rows; track row.key) { <div class="row"><strong>{{ row.label }}</strong><span>{{ row.billCount }}</span><span>{{ row.totalBilled | currency }}</span><span>{{ row.totalPaid | currency }}</span><b>{{ row.balanceDue | currency }}</b></div> }</section>`, styles: [":host{display:block}.mbd{font-family:var(--font);color:var(--t)}button,input,select{font:inherit}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r)}.money{font-variant-numeric:tabular-nums}.muted{color:var(--m)}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-weight:750;padding:5px 9px}\n", ".report{overflow:hidden}.report header{display:flex;justify-content:space-between;align-items:center;padding:18px}.report h2{margin:0;font-size:22px}.report p{margin:4px 0 0;color:var(--m)}.report header div:last-child{display:flex;gap:8px}.report select,.report button{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);color:var(--t);padding:9px 12px}.report button{background:var(--a);border-color:var(--a);color:var(--ac);font-weight:750;cursor:pointer}.thead,.row{display:grid;grid-template-columns:1.5fr .5fr 1fr 1fr 1fr;gap:14px;padding:12px 18px;border-top:1px solid var(--b);align-items:center}.thead{background:color-mix(in srgb,var(--bg) 78%,var(--s));color:var(--m);font-size:11px;text-transform:uppercase}.row span,.row b:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}@media(max-width:700px){.report header{align-items:flex-start}.thead{display:none}.row{grid-template-columns:1fr 1fr}.row>*:nth-child(n+2){text-align:right}.row strong{grid-column:1}.row span:nth-child(2){grid-column:2}.row span:nth-child(3):before{content:\"Billed \";color:var(--m)}.row span:nth-child(4):before{content:\"Paid \";color:var(--m)}.row b:before{content:\"Due \";color:var(--m)}}\n"] }]
+        }], propDecorators: { bills: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }] } });
 
-const MAX_PDF_BYTES = 25 * 1024 * 1024;
-const MAX_UPLOAD_BYTES = 100 * 1024 * 1024;
-const MAX_DOCUMENTS = 20;
-const PROCEDURES = [
-    { code: "ML200", description: "Missed appointment for a medical-legal evaluation", allowedAmount: 503.75 },
-    { code: "ML201", description: "Comprehensive medical-legal evaluation", allowedAmount: 2015 },
-    { code: "ML202", description: "Follow-up medical-legal evaluation", allowedAmount: 1316.25 },
-    { code: "ML203", description: "Supplemental medical-legal evaluation", allowedAmount: 650 },
-    { code: "ML204", description: "Medical-legal testimony", allowedAmount: 113.75 },
-    { code: "ML205", description: "Review of sub rosa recordings", allowedAmount: 81.25 },
-    { code: "MLPRR", description: "Medical-legal record review", allowedAmount: 3 },
-    { code: "90791", description: "Psychiatric diagnostic evaluation" },
-    { code: "90792", description: "Psychiatric diagnostic evaluation with medical services" },
-    { code: "90832", description: "Psychotherapy, 30 minutes" },
-    { code: "90834", description: "Psychotherapy, 45 minutes" },
-    { code: "90837", description: "Psychotherapy, 60 minutes" },
-    { code: "99203", description: "New patient office visit, level 3" },
-    { code: "99204", description: "New patient office visit, level 4" },
-    { code: "99205", description: "New patient office visit, level 5", allowedAmount: 349.48 },
-    { code: "99213", description: "Established patient office visit, level 3" },
-    { code: "99214", description: "Established patient office visit, level 4" },
-    { code: "99215", description: "Established patient office visit, level 5" },
-    { code: "96130", description: "Psychological testing evaluation, first hour" },
-    { code: "96131", description: "Psychological testing evaluation, each additional hour", allowedAmount: 131.96 },
-    { code: "97161", description: "Physical therapy evaluation, low complexity" },
-    { code: "97162", description: "Physical therapy evaluation, moderate complexity" },
-    { code: "97163", description: "Physical therapy evaluation, high complexity" },
-    { code: "97110", description: "Therapeutic exercises" },
-    { code: "97140", description: "Manual therapy techniques" },
-    { code: "98940", description: "Chiropractic manipulative treatment, 1–2 regions" },
-    { code: "98941", description: "Chiropractic manipulative treatment, 3–4 regions" },
-    { code: "72141", description: "MRI cervical spine without contrast" },
-    { code: "72148", description: "MRI lumbar spine without contrast" },
-    { code: "73721", description: "MRI lower-extremity joint without contrast" },
-    { code: "20610", description: "Major joint injection or aspiration" },
-    { code: "99070", description: "Supplies and materials" },
-];
-const MODIFIERS = [
-    { code: "92", description: "Primary Treating Physician evaluation" },
-    { code: "93", description: "Interpreter required" },
-    { code: "94", description: "Agreed Medical Evaluator" },
-    { code: "95", description: "Qualified Medical Evaluator" },
-    { code: "96", description: "Psychiatric/psychological evaluation" },
-    { code: "97", description: "Toxicology evaluation" },
-    { code: "98", description: "Oncology evaluation" },
-    { code: "59", description: "Distinct procedural service" },
-    { code: "XE", description: "Separate encounter" },
-    { code: "XS", description: "Separate structure" },
-    { code: "XP", description: "Separate practitioner" },
-    { code: "XU", description: "Unusual non-overlapping service" },
-];
-const TAXONOMIES = [
-    { code: "103G00000X", description: "Clinical Neuropsychologist" },
-    { code: "103T00000X", description: "Psychologist" },
-    { code: "111N00000X", description: "Chiropractor" },
-    { code: "207Q00000X", description: "Family Medicine" },
-    { code: "207R00000X", description: "Internal Medicine" },
-    { code: "207X00000X", description: "Orthopaedic Surgery" },
-    { code: "207XS0117X", description: "Orthopaedic Surgery of the Spine" },
-    { code: "208100000X", description: "Physical Medicine & Rehabilitation" },
-    { code: "2083X0100X", description: "Occupational Medicine" },
-    { code: "2084N0400X", description: "Neurology" },
-    { code: "2084P0800X", description: "Psychiatry" },
-    { code: "208VP0000X", description: "Pain Medicine" },
-    { code: "213E00000X", description: "Podiatrist" },
-    { code: "225100000X", description: "Physical Therapist" },
-    { code: "225X00000X", description: "Occupational Therapist" },
-    { code: "363A00000X", description: "Physician Assistant" },
-    { code: "363L00000X", description: "Nurse Practitioner" },
+const MINDBILL_STATUS_AGING_BUCKETS = [
+    { id: "current", label: "0–30 days" },
+    { id: "31-60", label: "31–60 days" },
+    { id: "61-90", label: "61–90 days" },
+    { id: "91+", label: "91+ days" },
 ];
-const QUICK_DIAGNOSES = [
-    { label: "Psych", code: "Z04.6", description: "General psychiatric examination requested by authority" },
-    { label: "Back", code: "M54.50", description: "Low back pain, unspecified" },
-    { label: "Neck", code: "M54.2", description: "Cervicalgia" },
-    { label: "Left hand", code: "M79.642", description: "Pain in left hand" },
-    { label: "Right hand", code: "M79.641", description: "Pain in right hand" },
-    { label: "Left knee", code: "M25.562", description: "Pain in left knee" },
-    { label: "Right knee", code: "M25.561", description: "Pain in right knee" },
+const DEFAULT_STATE_ORDER = [
+    "draft", "incomplete", "created", "sent", "submitted", "accepted", "processed",
+    "paid", "underpaid", "denied", "rejected", "appealing", "second_review", "ibr", "lien", "closed",
 ];
+const agingDays = (bill, now) => {
+    if (bill.agingDays != null)
+        return Math.max(0, Math.floor(bill.agingDays));
+    const source = bill.submittedAt ?? bill.updatedAt;
+    if (!source)
+        return 0;
+    const time = new Date(source).getTime();
+    return Number.isFinite(time) ? Math.max(0, Math.floor((now.getTime() - time) / 86_400_000)) : 0;
+};
+const agingBucketIndex = (days) => (days <= 30 ? 0 : days <= 60 ? 1 : days <= 90 ? 2 : 3);
+const stateLabel = (state) => state.replace(/_/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
+const emptyCell = (state, bucket) => ({ state, bucket, count: 0, balance: 0, bills: [] });
+function buildMindBillStatusAgingMatrix(bills, stateOrder = DEFAULT_STATE_ORDER, now = new Date()) {
+    const orderIndex = new Map(stateOrder.map((state, index) => [state.toLowerCase(), index]));
+    const states = [...new Set(bills.map((bill) => bill.state))].sort((a, b) => {
+        const left = orderIndex.get(a.toLowerCase()) ?? stateOrder.length;
+        const right = orderIndex.get(b.toLowerCase()) ?? stateOrder.length;
+        return left - right || a.localeCompare(b);
+    });
+    const columnTotals = MINDBILL_STATUS_AGING_BUCKETS.map((bucket) => emptyCell("all", bucket.id));
+    const grandTotal = emptyCell("all", "total");
+    const rows = states.map((state) => ({
+        state,
+        label: stateLabel(state),
+        cells: MINDBILL_STATUS_AGING_BUCKETS.map((bucket) => emptyCell(state, bucket.id)),
+        total: emptyCell(state, "total"),
+    }));
+    const rowByState = new Map(rows.map((row) => [row.state, row]));
+    for (const bill of bills) {
+        const row = rowByState.get(bill.state);
+        const bucketIndex = agingBucketIndex(agingDays(bill, now));
+        for (const cell of [row.cells[bucketIndex], row.total, columnTotals[bucketIndex], grandTotal]) {
+            cell.count += 1;
+            cell.balance += bill.balanceDue;
+            cell.bills.push(bill);
+        }
+    }
+    return { rows, columnTotals, grandTotal };
+}
+function buildMindBillStatusAgingCsv(bills, stateOrder) {
+    const matrix = buildMindBillStatusAgingMatrix(bills, stateOrder);
+    const quote = (value) => `"${String(value).replace(/"/g, '""')}"`;
+    const header = ["Status", ...MINDBILL_STATUS_AGING_BUCKETS.map((bucket) => bucket.label), "Total"];
+    const lines = matrix.rows.map((row) => [row.label, ...row.cells.map((cell) => cell.count), row.total.count]);
+    lines.push(["Total", ...matrix.columnTotals.map((cell) => cell.count), matrix.grandTotal.count]);
+    return [header, ...lines].map((line) => line.map(quote).join(",")).join("\n");
+}
+
 const THEME$2 = {
     mindbill: { a: "#238dbd", ac: "#fff", bg: "#f3f8fa", s: "#fff", t: "#203743", m: "#657982", b: "#dbe6ea", r: "14px", cr: "8px", font: "Inter,system-ui,sans-serif" },
     "qme-companion": { a: "#53b5dc", ac: "#173542", bg: "#f2f8fb", s: "#fff", t: "#1d3440", m: "#617783", b: "#d7e5eb", r: "12px", cr: "8px", font: "Inter,system-ui,sans-serif" },
     "orange-bright": { a: "#f4510b", ac: "#fff", bg: "#fffaf6", s: "#fffefd", t: "#090f1f", m: "#626a73", b: "#e7e1da", r: "16px", cr: "10px", font: "Inter,system-ui,sans-serif" },
-    "clinical-blue": { a: "#1677ff", ac: "#fff", bg: "#fff", s: "#fff", t: "#1f2d3d", m: "#66788a", b: "#d9e2ec", r: "8px", cr: "6px", font: "Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif" },
+    "clinical-blue": { a: "#1677ff", ac: "#fff", bg: "#f5f7fa", s: "#fff", t: "#1f2d3d", m: "#66788a", b: "#d9e2ec", r: "8px", cr: "6px", font: "Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif" },
 };
-function deepCopyBill(value) {
-    return JSON.parse(JSON.stringify(value));
-}
-function required(value) {
-    return typeof value === "string" ? value.trim().length > 0 : value != null;
-}
-async function blobToBase64(blob) {
-    const buffer = new Uint8Array(await blob.arrayBuffer());
-    let binary = "";
-    for (const byte of buffer)
-        binary += String.fromCharCode(byte);
-    return btoa(binary);
-}
-class MindBillBillSubmissionComponent {
-    initialBill;
-    attachments = [];
-    appearance = { preset: "mindbill" };
-    sessionEndpoint = "/api/mindbill/session";
-    getSession;
-    apiBaseUrl;
-    heading = "Bill information";
-    description = "Review the bill details, add attachments, and submit.";
-    submitLabel = "Submit bill";
-    procedureOptions = PROCEDURES;
-    modifierOptions = MODIFIERS;
-    taxonomyOptions = TAXONOMIES;
-    submitter;
-    submitted = new EventEmitter();
-    submissionError = new EventEmitter();
-    billChange = new EventEmitter();
-    bill = {};
-    workingAttachments = [];
-    payerQuery = "";
-    payerResults = [];
-    payerBusy = false;
-    diagnosisQuery = "";
-    diagnosisResults = [];
-    diagnosisOffset = 0;
-    diagnosisBusy = false;
-    submitting = false;
-    errorMessage = "";
-    postalStatus = "";
-    dragActive = false;
-    invalidFields = new Set();
-    quickDiagnoses = QUICK_DIAGNOSES;
-    // Zoneless-safe rendering: async work (debounced lookups, fetches, file reads)
-    // must schedule change detection explicitly for zone-less Angular hosts.
-    changeDetector = inject(ChangeDetectorRef);
-    customProcedureOption = mindBillCustomProcedureOption;
-    customTaxonomyOption = (query) => {
-        const code = query.trim().toUpperCase();
-        return /^[A-Z0-9]{10}$/.test(code) ? { id: code, label: code, detail: "Use this taxonomy code" } : null;
-    };
-    searchTimer;
-    postalTimer;
-    ngOnChanges(changes) {
-        if (changes["initialBill"] && this.initialBill) {
-            this.bill = deepCopyBill(this.initialBill);
-            if (!this.bill.serviceLines.length)
-                this.bill.serviceLines = [{ code: "", units: 1 }];
-            this.ensureTrailingLine();
-            this.payerQuery = this.bill.claim.claimsAdministrator.name ?? "";
-        }
-        if (changes["attachments"])
-            this.workingAttachments = this.attachments.map((item) => ({ ...item }));
+class MindBillStatusAgingMatrixComponent {
+    bills = [];
+    heading = "Bills by status and age";
+    description = "Every bill grouped by lifecycle status, then by days outstanding.";
+    stateOrder;
+    showBalances = true;
+    appearance = { preset: "mindbill" };
+    cellSelected = new EventEmitter();
+    buckets = MINDBILL_STATUS_AGING_BUCKETS;
+    get matrix() {
+        return buildMindBillStatusAgingMatrix(this.bills, this.stateOrder);
     }
     get themeStyle() {
         const base = THEME$2[this.appearance.preset ?? "mindbill"] ?? THEME$2["mindbill"];
@@ -1445,547 +2014,282 @@ class MindBillBillSubmissionComponent {
             "--cr": this.appearance.controlRadius ?? base["cr"], "--font": this.appearance.fontFamily ?? base["font"],
         };
     }
-    get procedureComboOptions() {
-        return this.procedureOptions.map((item) => ({ id: item.code, label: item.code, detail: item.description }));
-    }
-    get taxonomyComboOptions() {
-        return this.taxonomyOptions.map((item) => ({ id: item.code, label: item.description, detail: item.code }));
-    }
-    modifierComboOptions(line) {
-        return this.modifierOptions
-            .filter((item) => !(line.modifiers ?? []).includes(item.code))
-            .map((item) => ({ id: item.code, label: `−${item.code}`, detail: item.description }));
-    }
-    referenceClient() {
-        return createBillReferenceClient({ sessionEndpoint: this.sessionEndpoint, ...(this.getSession ? { getSession: this.getSession } : {}), ...(this.apiBaseUrl ? { apiBaseUrl: this.apiBaseUrl } : {}) });
-    }
-    setDate(path, value) {
-        if (path === "patient.dateOfBirth")
-            this.bill.patient.dateOfBirth = value;
-        else if (path === "service.date")
-            this.bill.service.date = value;
-        else
-            this.bill.claim.dateOfInjury = value;
-        if (value)
-            this.invalidFields.delete(path);
-        this.billChange.emit(this.bill);
-    }
-    postalChanged(value) {
-        clearTimeout(this.postalTimer);
-        this.postalStatus = "";
-        if (!/^\d{5}$/.test(value.trim()))
-            return;
-        this.postalStatus = "Looking up ZIP…";
-        this.postalTimer = setTimeout(async () => {
-            try {
-                const place = await this.referenceClient().lookupPostalCode(value);
-                if (place) {
-                    this.bill.patient.address.city = place.city;
-                    this.bill.patient.address.state = place.state.toUpperCase();
-                    this.postalStatus = `${place.city}, ${place.state.toUpperCase()} filled from ZIP`;
-                    this.invalidFields.delete("patient.address.city");
-                    this.invalidFields.delete("patient.address.state");
-                    this.billChange.emit(this.bill);
-                }
-                else {
-                    this.postalStatus = "ZIP not found";
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillStatusAgingMatrixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillStatusAgingMatrixComponent, isStandalone: true, selector: "mindbill-status-aging-matrix", inputs: { bills: "bills", heading: "heading", description: "description", stateOrder: "stateOrder", showBalances: "showBalances", appearance: "appearance" }, outputs: { cellSelected: "cellSelected" }, ngImport: i0, template: `
+    <section class="mbmx" [ngStyle]="themeStyle" aria-label="Bills by status and age">
+      <header><h2>{{ heading }}</h2><p>{{ description }}</p></header>
+      <div class="card">
+        <table>
+          <thead>
+            <tr><th class="status">Status</th>@for (bucket of buckets; track bucket.id) { <th>{{ bucket.label }}</th> }<th>Total</th></tr>
+          </thead>
+          <tbody>
+            @for (row of matrix.rows; track row.state) {
+              <tr>
+                <td class="status"><i class="pill">{{ row.label }}</i></td>
+                @for (cell of row.cells; track cell.bucket) {
+                  <td><button type="button" [disabled]="cell.count === 0" (click)="cellSelected.emit(cell)"><b [class.zero]="cell.count === 0">{{ cell.count === 0 ? '—' : cell.count }}</b>@if (showBalances && cell.count > 0) { <small>{{ cell.balance | currency }}</small> }</button></td>
                 }
+                <td class="rowtotal"><button type="button" [disabled]="row.total.count === 0" (click)="cellSelected.emit(row.total)"><b>{{ row.total.count }}</b>@if (showBalances) { <small>{{ row.total.balance | currency }}</small> }</button></td>
+              </tr>
             }
-            catch {
-                this.postalStatus = "ZIP lookup unavailable";
-            }
-            this.changeDetector.markForCheck();
-        }, 180);
-    }
-    searchPayers() {
-        clearTimeout(this.searchTimer);
-        this.searchTimer = setTimeout(async () => {
-            this.payerBusy = true;
-            try {
-                this.payerResults = await this.referenceClient().searchClaimsAdministrators(this.payerQuery, this.bill.claim.claimNumber);
-            }
-            catch {
-                this.payerResults = [];
-            }
-            finally {
-                this.payerBusy = false;
-                this.changeDetector.markForCheck();
-            }
-        }, 180);
-    }
-    selectPayer(payer) {
-        this.bill.claim.claimsAdministrator = { id: payer.id, name: payer.name };
-        this.payerQuery = payer.name;
-        this.payerResults = [];
-        this.invalidFields.delete("claim.claimsAdministrator");
-        this.billChange.emit(this.bill);
-    }
-    searchDiagnoses(reset) {
-        if (this.diagnosisBusy)
-            return;
-        if (reset) {
-            this.diagnosisOffset = 0;
-            this.diagnosisResults = [];
-        }
-        clearTimeout(this.searchTimer);
-        this.searchTimer = setTimeout(async () => {
-            this.diagnosisBusy = true;
-            try {
-                const results = await this.referenceClient().searchDiagnosisCodes(this.diagnosisQuery, 60, this.diagnosisOffset);
-                this.diagnosisResults = reset ? results : [...this.diagnosisResults, ...results];
-                this.diagnosisOffset = this.diagnosisResults.length;
-            }
-            catch {
-                if (reset)
-                    this.diagnosisResults = [];
-            }
-            finally {
-                this.diagnosisBusy = false;
-                this.changeDetector.markForCheck();
+            <tr class="totals">
+              <td class="status">Total</td>
+              @for (cell of matrix.columnTotals; track cell.bucket) {
+                <td><button type="button" [disabled]="cell.count === 0" (click)="cellSelected.emit(cell)"><b [class.zero]="cell.count === 0">{{ cell.count === 0 ? '—' : cell.count }}</b>@if (showBalances && cell.count > 0) { <small>{{ cell.balance | currency }}</small> }</button></td>
+              }
+              <td class="rowtotal"><button type="button" [disabled]="matrix.grandTotal.count === 0" (click)="cellSelected.emit(matrix.grandTotal)"><b>{{ matrix.grandTotal.count }}</b>@if (showBalances) { <small>{{ matrix.grandTotal.balance | currency }}</small> }</button></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  `, isInline: true, styles: [":host{display:block}.mbmx{font-family:var(--font);color:var(--t)}.mbmx header{margin-bottom:16px}.mbmx h2{margin:0;font-size:24px}.mbmx header p{margin:5px 0 0;color:var(--m)}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);overflow:auto}table{width:100%;border-collapse:collapse;min-width:640px}th{padding:13px 16px;border-bottom:1px solid var(--b);color:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:right;white-space:nowrap}th.status{text-align:left}td{padding:0;border-bottom:1px solid var(--b);border-left:1px solid color-mix(in srgb,var(--b) 55%,transparent);text-align:right}td.status{border-left:0;padding:14px 16px;text-align:left;white-space:nowrap}tr:last-child td{border-bottom:0}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-style:normal;font-weight:750;padding:5px 9px}td button{display:block;width:100%;min-height:56px;padding:9px 16px;border:0;background:none;color:var(--t);font:inherit;text-align:right;cursor:pointer}td button:disabled{cursor:default}td button:not(:disabled):hover{background:color-mix(in srgb,var(--a) 8%,var(--s))}td button b{display:block;font-size:17px;font-weight:760;font-variant-numeric:tabular-nums}td button b.zero{color:var(--m);font-weight:500}td button small{display:block;margin-top:2px;color:var(--m);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}td.rowtotal,tr.totals td{background:color-mix(in srgb,var(--bg) 78%,var(--s));font-weight:750}tr.totals td.status{color:var(--t);font-weight:750}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillStatusAgingMatrixComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mindbill-status-aging-matrix", standalone: true, imports: [CommonModule], template: `
+    <section class="mbmx" [ngStyle]="themeStyle" aria-label="Bills by status and age">
+      <header><h2>{{ heading }}</h2><p>{{ description }}</p></header>
+      <div class="card">
+        <table>
+          <thead>
+            <tr><th class="status">Status</th>@for (bucket of buckets; track bucket.id) { <th>{{ bucket.label }}</th> }<th>Total</th></tr>
+          </thead>
+          <tbody>
+            @for (row of matrix.rows; track row.state) {
+              <tr>
+                <td class="status"><i class="pill">{{ row.label }}</i></td>
+                @for (cell of row.cells; track cell.bucket) {
+                  <td><button type="button" [disabled]="cell.count === 0" (click)="cellSelected.emit(cell)"><b [class.zero]="cell.count === 0">{{ cell.count === 0 ? '—' : cell.count }}</b>@if (showBalances && cell.count > 0) { <small>{{ cell.balance | currency }}</small> }</button></td>
+                }
+                <td class="rowtotal"><button type="button" [disabled]="row.total.count === 0" (click)="cellSelected.emit(row.total)"><b>{{ row.total.count }}</b>@if (showBalances) { <small>{{ row.total.balance | currency }}</small> }</button></td>
+              </tr>
             }
-        }, reset ? 160 : 0);
-    }
-    diagnosisScrolled(event) {
-        const element = event.currentTarget;
-        if (element.scrollTop + element.clientHeight >= element.scrollHeight - 80)
-            this.searchDiagnoses(false);
-    }
-    hasDiagnosis(code) { return this.bill.diagnoses.includes(code); }
-    toggleDiagnosis(item) {
-        if (this.hasDiagnosis(item.code))
-            this.removeDiagnosis(item.code);
-        else
-            this.addDiagnosis(item);
-    }
-    addDiagnosis(item) { if (!this.hasDiagnosis(item.code))
-        this.bill.diagnoses.push(item.code); this.diagnosisQuery = ""; this.diagnosisResults = []; this.invalidFields.delete("diagnoses"); this.billChange.emit(this.bill); }
-    removeDiagnosis(code) { this.bill.diagnoses = this.bill.diagnoses.filter((item) => item !== code); this.billChange.emit(this.bill); }
-    ensureTrailingLine() {
-        const last = this.bill.serviceLines.at(-1);
-        if (!last || last.code.trim())
-            this.bill.serviceLines.push({ code: "", units: 1 });
-        this.billChange.emit(this.bill);
-    }
-    removeLine(index) { this.bill.serviceLines.splice(index, 1); if (!this.bill.serviceLines.length)
-        this.bill.serviceLines.push({ code: "", units: 1 }); this.ensureTrailingLine(); }
-    selectProcedure(index, option) {
-        this.bill.serviceLines[index].code = option.id;
-        this.invalidFields.delete("serviceLines");
-        this.ensureTrailingLine();
-    }
-    addModifier(index, option) {
-        const line = this.bill.serviceLines[index];
-        line.modifiers = [...new Set([...(line.modifiers ?? []), option.id])];
-        this.billChange.emit(this.bill);
-    }
-    removeModifier(index, modifier) {
-        const line = this.bill.serviceLines[index];
-        line.modifiers = (line.modifiers ?? []).filter((item) => item !== modifier);
-        this.billChange.emit(this.bill);
-    }
-    dxLetter(pointer) { return String.fromCharCode(64 + pointer); }
-    hasDiagnosisPointer(line, pointer) {
-        return (line.diagnosisPointers ?? []).includes(pointer);
-    }
-    toggleDiagnosisPointer(index, pointer) {
-        const line = this.bill.serviceLines[index];
-        line.diagnosisPointers = this.hasDiagnosisPointer(line, pointer)
-            ? (line.diagnosisPointers ?? []).filter((item) => item !== pointer)
-            : [...(line.diagnosisPointers ?? []), pointer].sort((left, right) => left - right);
-        this.billChange.emit(this.bill);
-    }
-    setAuthorizationNumber(value) {
-        this.bill.service.authorizationNumber = value.trim() ? value : null;
-        this.billChange.emit(this.bill);
-    }
-    selectTaxonomy(option) {
-        this.bill.renderingProvider.taxonomy = option.id;
-        this.invalidFields.delete("renderingProvider.taxonomy");
-        this.billChange.emit(this.bill);
-    }
-    procedureDescription(code) { return this.procedureOptions.find((item) => item.code.toLowerCase() === code.trim().toLowerCase())?.description ?? ""; }
-    allowed(line) { const base = this.procedureOptions.find((item) => item.code.toLowerCase() === line.code.trim().toLowerCase())?.allowedAmount; return base == null ? (line.charge ?? null) : Math.round(base * Math.max(1, line.units ?? 1) * 100) / 100; }
-    get totalAllowed() { return this.bill.serviceLines.reduce((sum, line) => sum + (this.allowed(line) ?? 0), 0); }
-    onWindowDragOver(event) {
-        if (event.dataTransfer?.types.includes("Files")) {
-            event.preventDefault();
-            this.dragActive = true;
-            this.changeDetector.markForCheck();
-        }
-    }
-    onWindowDragLeave(event) {
-        if (!event.relatedTarget) {
-            this.dragActive = false;
-            this.changeDetector.markForCheck();
-        }
-    }
-    onWindowDrop(event) {
-        if (event.dataTransfer?.files.length) {
-            event.preventDefault();
-            this.dragActive = false;
-            void this.addFiles(event.dataTransfer.files);
-            this.changeDetector.markForCheck();
-        }
+            <tr class="totals">
+              <td class="status">Total</td>
+              @for (cell of matrix.columnTotals; track cell.bucket) {
+                <td><button type="button" [disabled]="cell.count === 0" (click)="cellSelected.emit(cell)"><b [class.zero]="cell.count === 0">{{ cell.count === 0 ? '—' : cell.count }}</b>@if (showBalances && cell.count > 0) { <small>{{ cell.balance | currency }}</small> }</button></td>
+              }
+              <td class="rowtotal"><button type="button" [disabled]="matrix.grandTotal.count === 0" (click)="cellSelected.emit(matrix.grandTotal)"><b>{{ matrix.grandTotal.count }}</b>@if (showBalances) { <small>{{ matrix.grandTotal.balance | currency }}</small> }</button></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  `, styles: [":host{display:block}.mbmx{font-family:var(--font);color:var(--t)}.mbmx header{margin-bottom:16px}.mbmx h2{margin:0;font-size:24px}.mbmx header p{margin:5px 0 0;color:var(--m)}.card{background:var(--s);border:1px solid var(--b);border-radius:var(--r);overflow:auto}table{width:100%;border-collapse:collapse;min-width:640px}th{padding:13px 16px;border-bottom:1px solid var(--b);color:var(--m);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:right;white-space:nowrap}th.status{text-align:left}td{padding:0;border-bottom:1px solid var(--b);border-left:1px solid color-mix(in srgb,var(--b) 55%,transparent);text-align:right}td.status{border-left:0;padding:14px 16px;text-align:left;white-space:nowrap}tr:last-child td{border-bottom:0}.pill{display:inline-flex;border-radius:999px;background:color-mix(in srgb,var(--a) 12%,var(--s));color:var(--a);font-size:12px;font-style:normal;font-weight:750;padding:5px 9px}td button{display:block;width:100%;min-height:56px;padding:9px 16px;border:0;background:none;color:var(--t);font:inherit;text-align:right;cursor:pointer}td button:disabled{cursor:default}td button:not(:disabled):hover{background:color-mix(in srgb,var(--a) 8%,var(--s))}td button b{display:block;font-size:17px;font-weight:760;font-variant-numeric:tabular-nums}td button b.zero{color:var(--m);font-weight:500}td button small{display:block;margin-top:2px;color:var(--m);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}td.rowtotal,tr.totals td{background:color-mix(in srgb,var(--bg) 78%,var(--s));font-weight:750}tr.totals td.status{color:var(--t);font-weight:750}\n"] }]
+        }], propDecorators: { bills: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], stateOrder: [{
+                type: Input
+            }], showBalances: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], cellSelected: [{
+                type: Output
+            }] } });
+
+const MINDBILL_BILL_TASKS_TONES = {
+    violet: "#7c53c3",
+    red: "#cf4437",
+    blue: "#2f7fd1",
+    green: "#2c9a5b",
+    amber: "#d9931f",
+    neutral: "#8195a1",
+};
+const MINDBILL_BILL_TASKS_PILL_BASES = ["#2c9a5b", "#1f9aa8", "#dcbb28", "#e08a2e", "#d75d8a"];
+function mindBillBillTasksTone(tone) {
+    return MINDBILL_BILL_TASKS_TONES[tone] ?? MINDBILL_BILL_TASKS_TONES.neutral;
+}
+function mindBillBillTasksPillBase(index) {
+    return MINDBILL_BILL_TASKS_PILL_BASES[index % MINDBILL_BILL_TASKS_PILL_BASES.length];
+}
+/** Click-through payload for a bucket cell (bucketIndex) or a row total (null). */
+function mindBillBillTasksCell(section, row, bucketIndex, buckets) {
+    if (bucketIndex === null) {
+        return {
+            sectionId: section.id,
+            rowId: row.id,
+            bucketId: null,
+            refs: row.refs.flat(),
+            count: row.total,
+        };
     }
-    async addFiles(fileList) {
-        const files = Array.from(fileList);
-        if (!files.length)
-            return;
-        this.errorMessage = "";
-        const invalid = files.find((file) => file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf"));
-        if (invalid) {
-            this.errorMessage = `${invalid.name} is not a PDF.`;
-            return;
-        }
-        const oversized = files.find((file) => file.size > MAX_PDF_BYTES);
-        if (oversized) {
-            this.errorMessage = `${oversized.name} is larger than 25 MB.`;
-            return;
-        }
-        if (this.workingAttachments.length + files.length > MAX_DOCUMENTS) {
-            this.errorMessage = `A bill can include at most ${MAX_DOCUMENTS} attachments.`;
-            return;
-        }
-        const existingBytes = this.workingAttachments.reduce((sum, item) => sum + (item.contentBase64 ? item.contentBase64.length * 0.75 : 0), 0);
-        if (existingBytes + files.reduce((sum, file) => sum + file.size, 0) > MAX_UPLOAD_BYTES) {
-            this.errorMessage = "Attachments exceed the 100 MB upload limit.";
-            return;
-        }
-        for (const file of files)
-            this.workingAttachments.push({ filename: file.name, description: "Supporting document", documentType: "other", contentBase64: await blobToBase64(file), contentUrl: URL.createObjectURL(file) });
-        this.changeDetector.markForCheck();
+    return {
+        sectionId: section.id,
+        rowId: row.id,
+        bucketId: buckets[bucketIndex]?.id ?? null,
+        refs: row.refs[bucketIndex] ?? [],
+        count: row.counts[bucketIndex] ?? 0,
+    };
+}
+
+// daisyBill-style "Bill Tasks" dashboard: one rounded, tone-colored card per
+// task section, rows bucketed by age in days with colored bucket header pills,
+// per-cell click-through counts, and a closing grand-total card. The pure
+// aggregation lives in @mindbill/browser (buildBillTasksDashboard) so React
+// and Angular render the exact same data shape.
+class MindBillBillTasksDashboardComponent {
+    data = null;
+    buckets = BILL_TASKS_AGING_BUCKETS;
+    heading = "";
+    grandTotalLabel = "Bill Tasks Total";
+    emptyLabel = "No Tasks";
+    appearance = { preset: "mindbill" };
+    cellSelected = new EventEmitter();
+    get themeStyle() {
+        return {
+            ...mindBillAngularAppearanceStyle(this.appearance),
+            "--cols": `minmax(150px,1.6fr) repeat(${this.buckets.length},minmax(84px,1fr)) minmax(84px,1fr)`,
+        };
     }
-    async filesSelected(event) {
-        const input = event.target;
-        await this.addFiles(input.files ?? []);
-        input.value = "";
+    tone(section) {
+        return mindBillBillTasksTone(section.tone);
     }
-    removeAttachment(index) { const item = this.workingAttachments[index]; if (item?.contentUrl?.startsWith("blob:"))
-        URL.revokeObjectURL(item.contentUrl); this.workingAttachments.splice(index, 1); }
-    previewAttachment(attachment) { if (attachment.contentUrl)
-        window.open(attachment.contentUrl, "_blank", "noopener,noreferrer");
-    else if (attachment.contentBase64)
-        window.open(`data:application/pdf;base64,${attachment.contentBase64}`, "_blank", "noopener,noreferrer"); }
-    bad(path) { return this.invalidFields.has(path); }
-    validate() {
-        const candidates = [
-            ["patient.firstName", this.bill.patient.firstName], ["patient.lastName", this.bill.patient.lastName], ["patient.dateOfBirth", parseMindBillSubmissionDate(this.bill.patient.dateOfBirth ?? "")],
-            ["patient.address.line1", this.bill.patient.address.line1], ["patient.address.city", this.bill.patient.address.city], ["patient.address.state", this.bill.patient.address.state], ["patient.address.postalCode", this.bill.patient.address.postalCode],
-            ["service.date", parseMindBillSubmissionDate(this.bill.service.date ?? "")], ["claim.dateOfInjury", parseMindBillSubmissionDate(this.bill.claim.dateOfInjury ?? "")], ["claim.claimNumber", this.bill.claim.claimNumber], ["claim.employer", this.bill.claim.employer],
-            ["claim.claimsAdministrator", this.bill.claim.claimsAdministrator.id], ["diagnoses", this.bill.diagnoses.length],
-            ["billingProvider.name", this.bill.billingProvider.name], ["billingProvider.taxId", this.bill.billingProvider.taxId], ["billingProvider.npi", this.bill.billingProvider.npi], ["billingProvider.phone", this.bill.billingProvider.phone],
-            ["billingProvider.address.line1", this.bill.billingProvider.address.line1], ["billingProvider.address.city", this.bill.billingProvider.address.city], ["billingProvider.address.state", this.bill.billingProvider.address.state], ["billingProvider.address.postalCode", this.bill.billingProvider.address.postalCode],
-            ["renderingProvider.name", this.bill.renderingProvider.name], ["renderingProvider.npi", this.bill.renderingProvider.npi], ["renderingProvider.taxonomy", this.bill.renderingProvider.taxonomy],
-            ["serviceLocation.placeOfServiceCode", this.bill.serviceLocation.placeOfServiceCode], ["serviceLocation.address.line1", this.bill.serviceLocation.address.line1], ["serviceLocation.address.city", this.bill.serviceLocation.address.city], ["serviceLocation.address.state", this.bill.serviceLocation.address.state], ["serviceLocation.address.postalCode", this.bill.serviceLocation.address.postalCode],
-            ["serviceLines", this.bill.serviceLines.some((line) => required(line.code) && (line.units ?? 1) > 0)],
-        ];
-        this.invalidFields = new Set(candidates.filter(([, value]) => !value || !required(value)).map(([path]) => path));
-        if (this.invalidFields.size) {
-            this.errorMessage = `Complete ${this.invalidFields.size} highlighted required field${this.invalidFields.size === 1 ? "" : "s"} before submitting.`;
-            setTimeout(() => document.querySelector(".mbs .invalid,.mbs .invalid-set")?.scrollIntoView({ behavior: "smooth", block: "center" }));
-            return false;
-        }
-        return true;
+    pillBackground(index) {
+        return `color-mix(in srgb,${mindBillBillTasksPillBase(index)} 20%,var(--s))`;
     }
-    async submissionDocuments() {
-        const documents = [];
-        for (const attachment of this.workingAttachments) {
-            let contentBase64 = attachment.contentBase64;
-            if (!contentBase64 && attachment.contentUrl) {
-                const response = await fetch(attachment.contentUrl);
-                if (!response.ok)
-                    throw new Error(`Could not load ${attachment.filename}.`);
-                contentBase64 = await blobToBase64(await response.blob());
-            }
-            if (!contentBase64)
-                continue;
-            documents.push({
-                filename: attachment.filename,
-                documentType: attachment.documentType,
-                contentBase64,
-                ...(attachment.externalId ? { externalId: attachment.externalId } : {}),
-                ...(attachment.description ? { description: attachment.description } : {}),
-                ...(attachment.reportTypeCode ? { reportTypeCode: attachment.reportTypeCode } : {}),
-            });
-        }
-        return documents;
+    pillColor(index) {
+        return `color-mix(in srgb,${mindBillBillTasksPillBase(index)} 62%,var(--t))`;
     }
-    async submit(event) {
-        event.preventDefault();
-        this.errorMessage = "";
-        if (!this.validate())
-            return;
-        this.submitting = true;
-        try {
-            const bill = deepCopyBill(this.bill);
-            bill.patient.dateOfBirth = parseMindBillSubmissionDate(bill.patient.dateOfBirth ?? "") ?? bill.patient.dateOfBirth;
-            bill.service.date = parseMindBillSubmissionDate(bill.service.date ?? "") ?? bill.service.date;
-            bill.claim.dateOfInjury = parseMindBillSubmissionDate(bill.claim.dateOfInjury ?? "") ?? bill.claim.dateOfInjury;
-            bill.serviceLines = bill.serviceLines
-                .filter((line) => line.code.trim())
-                .map((line) => {
-                const charge = line.charge ?? this.allowed(line);
-                return charge == null ? line : { ...line, charge };
-            });
-            const input = { bill, documents: await this.submissionDocuments() };
-            const result = this.submitter
-                ? await this.submitter(input)
-                : await createBillSubmissionClient({ sessionEndpoint: this.sessionEndpoint, ...(this.getSession ? { getSession: this.getSession } : {}), ...(this.apiBaseUrl ? { apiBaseUrl: this.apiBaseUrl } : {}) }).submitBill(input);
-            this.submitted.emit(result);
-        }
-        catch (value) {
-            const error = value instanceof Error ? value : new Error("The bill could not be submitted.");
-            this.errorMessage = error.message;
-            this.submissionError.emit(error);
-        }
-        finally {
-            this.submitting = false;
-            this.changeDetector.markForCheck();
-        }
+    select(section, row, bucketIndex) {
+        this.cellSelected.emit(mindBillBillTasksCell(section, row, bucketIndex, this.buckets));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillSubmissionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillSubmissionComponent, isStandalone: true, selector: "mindbill-bill-submission", inputs: { initialBill: "initialBill", attachments: "attachments", appearance: "appearance", sessionEndpoint: "sessionEndpoint", getSession: "getSession", apiBaseUrl: "apiBaseUrl", heading: "heading", description: "description", submitLabel: "submitLabel", procedureOptions: "procedureOptions", modifierOptions: "modifierOptions", taxonomyOptions: "taxonomyOptions", submitter: "submitter" }, outputs: { submitted: "submitted", submissionError: "submissionError", billChange: "billChange" }, host: { listeners: { "window:dragover": "onWindowDragOver($event)", "window:dragleave": "onWindowDragLeave($event)", "window:drop": "onWindowDrop($event)" } }, usesOnChanges: true, ngImport: i0, template: `
-    <form class="mbs" [ngStyle]="themeStyle" (submit)="submit($event)" novalidate>
-      <div class="intro"><div><h2>{{ heading }}</h2><p>{{ description }}</p></div><span><b>*</b> Required</span></div>
-
-      <fieldset id="mbs-patient"><legend>Patient</legend><div class="grid">
-        <label [class.invalid]="bad('patient.firstName')">First name <b>*</b><input name="firstName" [(ngModel)]="bill.patient.firstName"></label>
-        <label [class.invalid]="bad('patient.lastName')">Last name <b>*</b><input name="lastName" [(ngModel)]="bill.patient.lastName"></label>
-        <label [class.invalid]="bad('patient.dateOfBirth')">Date of birth <b>*</b><mindbill-date-input ariaLabel="Date of birth" [value]="bill.patient.dateOfBirth" (valueChange)="setDate('patient.dateOfBirth', $event)"/></label>
-        <label>Phone (optional)<input name="phone" type="tel" [(ngModel)]="bill.patient.phone"></label>
-        <label class="wide" [class.invalid]="bad('patient.address.line1')">Address <b>*</b><input name="address" [(ngModel)]="bill.patient.address.line1"></label>
-        <label [class.invalid]="bad('patient.address.postalCode')">ZIP <b>*</b><input name="zip" [(ngModel)]="bill.patient.address.postalCode" (ngModelChange)="postalChanged($event)" inputmode="numeric">@if (postalStatus) { <small>{{ postalStatus }}</small> }</label>
-        <label [class.invalid]="bad('patient.address.city')">City <b>*</b><input name="city" [(ngModel)]="bill.patient.address.city"></label>
-        <label [class.invalid]="bad('patient.address.state')">State <b>*</b><input name="state" [(ngModel)]="bill.patient.address.state" maxlength="2"></label>
-      </div></fieldset>
-
-      <fieldset id="mbs-claim"><legend>Injury &amp; claim</legend><div class="grid">
-        <label [class.invalid]="bad('service.date')">Date of service <b>*</b><mindbill-date-input ariaLabel="Date of service" [value]="bill.service.date" (valueChange)="setDate('service.date', $event)"/></label>
-        <label [class.invalid]="bad('claim.dateOfInjury')">Date of injury <b>*</b><mindbill-date-input ariaLabel="Date of injury" [value]="bill.claim.dateOfInjury" (valueChange)="setDate('claim.dateOfInjury', $event)"/></label>
-        <label class="wide">Treatment authorization # (optional)<input name="authNumber" [ngModel]="bill.service.authorizationNumber || ''" (ngModelChange)="setAuthorizationNumber($event)" placeholder="Utilization-review authorization number"><small>Rides on the bill as CMS-1500 Box 23 / 837 REF*G1.</small></label>
-        <label [class.invalid]="bad('claim.claimNumber')">Claim number <b>*</b><input name="claimNumber" [(ngModel)]="bill.claim.claimNumber"></label>
-        <label [class.invalid]="bad('claim.employer')">Employer <b>*</b><input name="employer" [(ngModel)]="bill.claim.employer"></label>
-        <div class="wide lookup" [class.invalid]="bad('claim.claimsAdministrator')"><label>Claims administrator <b>*</b></label>
-          <input name="payerQuery" [(ngModel)]="payerQuery" (focus)="searchPayers()" (input)="searchPayers()" placeholder="Search the MindBill payer directory…" autocomplete="off">
-          @if (payerBusy) { <small>Searching directory…</small> }
-          @if (payerResults.length) { <div class="options">@for (payer of payerResults; track payer.id) { <button type="button" (click)="selectPayer(payer)"><strong>{{ payer.name }}</strong><span>{{ payer.hasElectronic ? 'Electronic routing' : 'Paper / fax' }}@if (payer.confidence) { · {{ payer.confidence }} match }</span></button> }</div> }
-          @if (bill.claim.claimsAdministrator.id) { <small class="selected">✓ Routed to {{ bill.claim.claimsAdministrator.name }}</small> }
-        </div>
-        <label class="wide">Injury description (optional)<input name="description" [(ngModel)]="bill.claim.description"></label>
-        <div class="wide diagnosis" [class.invalid]="bad('diagnoses')"><label>Diagnosis codes (ICD-10) <b>*</b></label>
-          <div class="quick">@for (item of quickDiagnoses; track item.code) { <button type="button" [class.on]="hasDiagnosis(item.code)" (click)="toggleDiagnosis(item)">{{ hasDiagnosis(item.code) ? '✓' : '+' }} {{ item.label }}</button> }</div>
-          @if (bill.diagnoses.length) { <div class="chips">@for (code of bill.diagnoses; track code) { <button type="button" (click)="removeDiagnosis(code)"><strong>{{ code }}</strong> ×</button> }</div> }
-          <input name="diagnosisQuery" [(ngModel)]="diagnosisQuery" (focus)="searchDiagnoses(true)" (input)="searchDiagnoses(true)" placeholder="Search ICD-10 codes…" autocomplete="off">
-          @if (diagnosisBusy && !diagnosisResults.length) { <small>Searching ICD-10 directory…</small> }
-          @if (diagnosisResults.length) { <div class="options diagnoses" (scroll)="diagnosisScrolled($event)">@for (item of diagnosisResults; track item.code) { <button type="button" (click)="addDiagnosis(item)"><strong>{{ item.code }}</strong><span>{{ item.description }}</span></button> }</div> }
-        </div>
-      </div></fieldset>
-
-      <fieldset id="mbs-provider"><legend>Providers &amp; place of service</legend><div class="grid">
-        <h3 class="wide">Billing provider</h3>
-        <label [class.invalid]="bad('billingProvider.name')">Billing provider name <b>*</b><input name="billingProvider" [(ngModel)]="bill.billingProvider.name"></label>
-        <label [class.invalid]="bad('billingProvider.taxId')">Tax ID <b>*</b><input name="taxId" [(ngModel)]="bill.billingProvider.taxId"></label>
-        <label [class.invalid]="bad('billingProvider.npi')">Billing NPI <b>*</b><input name="billingNpi" [(ngModel)]="bill.billingProvider.npi" inputmode="numeric" maxlength="10"></label>
-        <label [class.invalid]="bad('billingProvider.phone')">Billing phone <b>*</b><input name="billingPhone" type="tel" [(ngModel)]="bill.billingProvider.phone"></label>
-        <label class="wide" [class.invalid]="bad('billingProvider.address.line1')">Billing address <b>*</b><input name="billingAddress" [(ngModel)]="bill.billingProvider.address.line1"></label>
-        <label [class.invalid]="bad('billingProvider.address.postalCode')">Billing ZIP <b>*</b><input name="billingZip" [(ngModel)]="bill.billingProvider.address.postalCode" inputmode="numeric"></label>
-        <label [class.invalid]="bad('billingProvider.address.city')">Billing city <b>*</b><input name="billingCity" [(ngModel)]="bill.billingProvider.address.city"></label>
-        <label [class.invalid]="bad('billingProvider.address.state')">Billing state <b>*</b><input name="billingState" [(ngModel)]="bill.billingProvider.address.state" maxlength="2"></label>
-        <h3 class="wide">Rendering provider</h3>
-        <label [class.invalid]="bad('renderingProvider.name')">Rendering provider name <b>*</b><input name="renderingProvider" [(ngModel)]="bill.renderingProvider.name"></label>
-        <label [class.invalid]="bad('renderingProvider.npi')">Rendering provider NPI <b>*</b><input name="renderingNpi" [(ngModel)]="bill.renderingProvider.npi" inputmode="numeric" maxlength="10"></label>
-        <div class="wide" [class.invalid]="bad('renderingProvider.taxonomy')"><label>Rendering taxonomy <b>*</b></label>
-          <mindbill-combo-box ariaLabel="Rendering taxonomy" [value]="bill.renderingProvider.taxonomy || ''" [invalid]="bad('renderingProvider.taxonomy')" [preserveValueOnOpen]="true" placeholder="Search specialty name or taxonomy code…" [options]="taxonomyComboOptions" [createOption]="customTaxonomyOption" (selected)="selectTaxonomy($event)"/>
-          <small>Search by specialty name or 10-character taxonomy code.</small>
-        </div>
-        <h3 class="wide">Place of service</h3>
-        <label [class.invalid]="bad('serviceLocation.placeOfServiceCode')">Place of service code <b>*</b><input name="pos" [(ngModel)]="bill.serviceLocation.placeOfServiceCode" placeholder="11" inputmode="numeric" maxlength="2"></label>
-        <label class="wide" [class.invalid]="bad('serviceLocation.address.line1')">Service address <b>*</b><input name="serviceAddress" [(ngModel)]="bill.serviceLocation.address.line1"></label>
-        <label [class.invalid]="bad('serviceLocation.address.postalCode')">Service ZIP <b>*</b><input name="serviceZip" [(ngModel)]="bill.serviceLocation.address.postalCode" inputmode="numeric"></label>
-        <label [class.invalid]="bad('serviceLocation.address.city')">Service city <b>*</b><input name="serviceCity" [(ngModel)]="bill.serviceLocation.address.city"></label>
-        <label [class.invalid]="bad('serviceLocation.address.state')">Service state <b>*</b><input name="serviceState" [(ngModel)]="bill.serviceLocation.address.state" maxlength="2"></label>
-      </div></fieldset>
-
-      <fieldset id="mbs-lines" [class.invalid-set]="bad('serviceLines')"><legend>Service lines</legend>
-        <div class="line-head"><span>Procedure code *</span><span>Modifiers</span><span>Dx</span><span>Units *</span><span>Allowed</span><span></span></div>
-        @for (line of bill.serviceLines; track $index; let index = $index) { <div class="service-line">
-          <div class="cell"><span class="mobile-label">Procedure</span>
-            <mindbill-combo-box [ariaLabel]="'Procedure code ' + (index + 1)" [value]="line.code" placeholder="Search or enter code…" [options]="procedureComboOptions" [createOption]="customProcedureOption" (selected)="selectProcedure(index, $event)"/>
-            @if (line.code) { <small>{{ procedureDescription(line.code) || 'Custom CPT, HCPCS, or medical-legal code' }}</small> }
-          </div>
-          <div class="cell"><span class="mobile-label">Modifiers</span>
-            @if (line.modifiers?.length) { <div class="chips">@for (modifier of line.modifiers; track modifier) { <button type="button" (click)="removeModifier(index, modifier)" [attr.aria-label]="'Remove modifier ' + modifier">−{{ modifier }} ×</button> }</div> }
-            <mindbill-combo-box [ariaLabel]="'Modifiers ' + (index + 1)" value="" [placeholder]="line.modifiers?.length ? line.modifiers!.length + ' modifier' + (line.modifiers!.length === 1 ? '' : 's') : 'Add modifiers…'" [options]="modifierComboOptions(line)" (selected)="addModifier(index, $event)"/>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillTasksDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: MindBillBillTasksDashboardComponent, isStandalone: true, selector: "mindbill-bill-tasks-dashboard", inputs: { data: "data", buckets: "buckets", heading: "heading", grandTotalLabel: "grandTotalLabel", emptyLabel: "emptyLabel", appearance: "appearance" }, outputs: { cellSelected: "cellSelected" }, ngImport: i0, template: `
+    <div class="mbtk" [ngStyle]="themeStyle">
+      @if (heading) { <header class="heading"><h2>{{ heading }}</h2></header> }
+      @for (section of data?.sections ?? []; track section.id) {
+        <section class="card" [style.borderColor]="tone(section)" [attr.aria-label]="section.label">
+          <div class="grid head" [style.borderBottomColor]="tone(section)">
+            <span class="title">
+              <i class="dot" [style.background]="tone(section)"></i>
+              <span class="title-text"><strong>{{ section.label }}</strong><span class="basis">by {{ section.agingBasisLabel }}</span></span>
+            </span>
+            @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+              <span class="pill" [style.background]="pillBackground(bucketIndex)" [style.color]="pillColor(bucketIndex)">{{ bucket.label }}</span>
+            }
+            <span class="colhead">Task Total</span>
           </div>
-          <div class="cell"><span class="mobile-label">Dx pointers</span>
-            <div class="dx">
-              @if (bill.diagnoses.length) {
-                @for (code of bill.diagnoses; track code; let dxIndex = $index) {
-                  <button type="button" [class.on]="hasDiagnosisPointer(line, dxIndex + 1)" [title]="dxLetter(dxIndex + 1) + ' — ' + code" [attr.aria-pressed]="hasDiagnosisPointer(line, dxIndex + 1)" [attr.aria-label]="'Point line ' + (index + 1) + ' at diagnosis ' + code" (click)="toggleDiagnosisPointer(index, dxIndex + 1)">{{ dxLetter(dxIndex + 1) }}</button>
+          @if (section.empty) {
+            <p class="empty">{{ emptyLabel }}</p>
+          } @else {
+            @for (row of section.rows; track row.id) {
+              <div class="grid row">
+                <span class="rowlabel">{{ row.label }}</span>
+                @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+                  <span class="count">
+                    @if ((row.counts[bucketIndex] ?? 0) > 0) {
+                      <button type="button" class="link" (click)="select(section, row, bucketIndex)">{{ row.counts[bucketIndex] }}</button>
+                    } @else { <span class="zero">0</span> }
+                  </span>
                 }
-              } @else { <small>Add diagnoses above</small> }
+                <span class="total">
+                  @if (row.total > 0) {
+                    <button type="button" class="link" (click)="select(section, row, null)">{{ row.total }}</button>
+                  } @else { <span class="zero">0</span> }
+                </span>
+              </div>
+            }
+            <div class="grid row totals">
+              <span class="rowlabel">Total</span>
+              @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+                <span class="count">{{ section.totals[bucketIndex] ?? 0 }}</span>
+              }
+              <span class="total">{{ section.total }}</span>
             </div>
-          </div>
-          <label><span class="mobile-label">Units</span><input [name]="'units'+index" type="number" min="1" [(ngModel)]="line.units"></label>
-          <strong>{{ allowed(line) == null ? '—' : (allowed(line) | currency) }}</strong>
-          <button class="remove" type="button" (click)="removeLine(index)" aria-label="Remove service line">×</button>
-        </div> }
-        <div class="total"><span>Total</span><strong>{{ totalAllowed | currency }}</strong></div>
-      </fieldset>
-
-      <fieldset><legend>Attachments</legend>
-        @for (attachment of workingAttachments; track attachment.filename; let index = $index) { <div class="attachment" [class.locked]="attachment.locked"><div><strong>{{ attachment.filename }}</strong><span>{{ attachment.description || attachment.badge || 'Supporting document' }}</span></div><div class="attachment-actions"><button type="button" (click)="previewAttachment(attachment)">Preview</button>@if (!attachment.locked) { <button type="button" (click)="removeAttachment(index)" aria-label="Remove attachment">×</button> }</div></div> }
-        <label class="dropzone" [class.drag-active]="dragActive"><input type="file" accept="application/pdf,.pdf" multiple (change)="filesSelected($event)"><strong>Drop additional PDF files here, or click to choose</strong><span>Add supporting documents by dropping them anywhere on this screen.</span></label>
-      </fieldset>
-
-      @if (errorMessage) { <div class="error" role="alert">{{ errorMessage }}</div> }
-      <div class="submit-row"><span>{{ invalidFields.size ? 'Complete the highlighted required fields.' : 'All required billing data is ready.' }}</span><button type="submit" [disabled]="submitting">{{ submitting ? 'Submitting…' : submitLabel }}</button></div>
-      @if (dragActive) { <div class="drop-overlay" aria-hidden="true"><div><strong>Drop PDFs to attach</strong><span>Supporting documents are added to this submission.</span></div></div> }
-    </form>
-  `, isInline: true, styles: [":host{display:block}.mbs{--danger:#c83c3c;font-family:var(--font);color:var(--t)}*{box-sizing:border-box}.intro{display:flex;justify-content:space-between;align-items:start;margin:0 0 24px}.intro h2{margin:0;font-size:24px;font-weight:600}.intro p{margin:6px 0 0;color:var(--m)}.intro>span{color:var(--m);font-size:13px}.mbs b{color:inherit}.intro b,label>b,.lookup>label>b,.diagnosis>label>b,.cell>label>b{color:var(--danger)}fieldset{border:1px solid var(--b);border-radius:var(--r);margin:0 0 22px;padding:24px 26px 26px;background:var(--s)}legend{padding:0 10px;font-size:18px;font-weight:700}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}.wide{grid-column:1/-1}h3{margin:4px 0 -4px;padding-top:12px;border-top:1px solid var(--b);font-size:16px}h3:first-child{border:0;padding-top:0}label,.lookup,.diagnosis{display:grid;gap:8px;font-size:14px;font-weight:700}.grid>label{display:flex;flex-wrap:wrap;align-content:start;align-items:center;column-gap:4px;row-gap:8px}.grid>label>input,.grid>label>select,.grid>label>small,.grid>label>mindbill-date-input{flex:0 0 100%}.grid>div.wide{display:grid;gap:8px;font-size:14px;font-weight:700}input,select{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus,select:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}.invalid input,.invalid select,.invalid-set{border-color:var(--danger)!important;background:color-mix(in srgb,var(--danger) 4%,var(--s))}.invalid>label{color:var(--danger)}small{color:var(--m);font-weight:450}.selected{color:#238655}.options{position:relative;z-index:4;max-height:300px;overflow:auto;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);box-shadow:0 14px 35px #172b3730}.options button{display:grid;width:100%;gap:3px;border:0;border-bottom:1px solid var(--b);background:var(--s);padding:12px 14px;text-align:left;color:var(--t);cursor:pointer}.options button:hover{background:color-mix(in srgb,var(--a) 7%,var(--s))}.options span{color:var(--m);font-size:12px}.quick,.chips{display:flex;flex-wrap:wrap;gap:8px}.quick button,.chips button{border:1px solid var(--b);border-radius:999px;background:var(--s);padding:7px 11px;color:var(--t);font:inherit;font-size:13px;cursor:pointer}.quick .on{border-color:var(--a);color:var(--a);background:color-mix(in srgb,var(--a) 8%,var(--s))}.chips button{border-color:color-mix(in srgb,var(--a) 40%,var(--b));background:color-mix(in srgb,var(--a) 7%,var(--s));font-weight:700}.dx{display:flex;flex-wrap:wrap;gap:5px;padding-top:6px}.dx button{width:30px;height:30px;border:1px solid var(--b);border-radius:8px;background:var(--s);color:var(--m);font:inherit;font-size:13px;font-weight:750;cursor:pointer;padding:0}.dx button.on{border-color:var(--a);background:color-mix(in srgb,var(--a) 10%,var(--s));color:var(--a)}.line-head,.service-line{display:grid;grid-template-columns:1.5fr 1.35fr .8fr .5fr .7fr 36px;gap:14px;align-items:start}.line-head{padding:0 0 9px;color:var(--m);font-size:12px;font-weight:700}.service-line{border-top:1px solid var(--b);padding:12px 0}.service-line label,.service-line .cell{display:grid;gap:6px;font-size:14px;font-weight:700}.service-line strong{text-align:right;padding-top:12px}.remove{border:0;background:transparent;color:var(--m);font-size:25px;cursor:pointer}.mobile-label{display:none}.total{display:flex;justify-content:flex-end;gap:36px;border-top:1px solid var(--b);padding-top:14px;font-size:17px}.attachment{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--b);border-radius:var(--cr);margin-bottom:10px;padding:14px 16px}.attachment.locked{border-color:#9fd6b4;background:#f3fcf6}.attachment>div:first-child{display:grid;gap:4px}.attachment span{color:var(--m);font-size:13px}.attachment-actions{display:flex;gap:8px}.attachment button{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:8px 12px;color:var(--t);font-weight:700;cursor:pointer}.dropzone{position:relative;display:grid;min-height:170px;place-content:center;gap:8px;border:2px dashed color-mix(in srgb,var(--m) 60%,transparent);border-radius:var(--cr);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.dropzone.drag-active{border-color:var(--a);background:color-mix(in srgb,var(--a) 8%,var(--s))}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.dropzone span{color:var(--m);font-weight:450}.drop-overlay{position:fixed;inset:0;z-index:60;display:grid;place-content:center;background:color-mix(in srgb,var(--a) 14%,#ffffffd9);pointer-events:none}.drop-overlay div{display:grid;gap:6px;border:2px dashed var(--a);border-radius:var(--r);background:var(--s);padding:34px 44px;text-align:center;box-shadow:0 24px 60px #172b3740}.drop-overlay strong{font-size:19px}.drop-overlay span{color:var(--m)}.error{margin:0 0 14px;border-left:4px solid var(--danger);border-radius:var(--cr);background:color-mix(in srgb,var(--danger) 10%,var(--s));padding:14px;color:var(--danger)}.submit-row{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--b);border-radius:var(--r);background:color-mix(in srgb,var(--s) 96%,transparent);box-shadow:0 -8px 24px #172b3718;padding:14px 18px}.submit-row>span{color:#43835f}.submit-row button{min-width:190px;border:0;border-radius:var(--cr);background:var(--a);color:var(--ac);padding:12px 24px;font:inherit;font-weight:800;cursor:pointer}.submit-row button:disabled{opacity:.6;cursor:wait}@media(max-width:760px){fieldset{padding:18px 16px}.grid{grid-template-columns:1fr}.wide{grid-column:auto}.intro{display:grid;gap:10px}.line-head{display:none}.service-line{grid-template-columns:1fr 1fr}.service-line>*{grid-column:1/-1}.service-line label:nth-child(3){grid-column:1}.service-line>strong{grid-column:2;grid-row:3;text-align:left}.service-line>.remove{grid-column:1/-1}.mobile-label{display:block;color:var(--m);font-size:12px}.attachment{align-items:flex-start}.attachment-actions{align-items:center}.submit-row>span{display:none}.submit-row button{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MindBillComboBoxComponent, selector: "mindbill-combo-box", inputs: ["value", "placeholder", "options", "disabled", "loading", "loadingMore", "invalid", "preserveValueOnOpen", "ariaLabel", "createOption"], outputs: ["opened", "queryChange", "endReached", "selected"] }, { kind: "component", type: MindBillDateInputComponent, selector: "mindbill-date-input", inputs: ["value", "disabled", "ariaLabel"], outputs: ["valueChange"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
+          }
+        </section>
+      }
+      <section class="card grand" [attr.aria-label]="grandTotalLabel">
+        <div class="grid row totals">
+          <span class="rowlabel grand-label">{{ grandTotalLabel }}</span>
+          @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+            <span class="count">{{ data?.grandTotals?.[bucketIndex] ?? 0 }}</span>
+          }
+          <span class="total">{{ data?.grandTotal ?? 0 }}</span>
+        </div>
+      </section>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.mbtk{color:var(--t);font-family:var(--font);font-size:14px}.heading{margin-bottom:14px}.heading h2{margin:0;font-size:24px}.card{margin-bottom:16px;border:1.5px solid var(--b);border-radius:var(--r);background:var(--s);overflow:hidden}.grid{display:grid;grid-template-columns:var(--cols);gap:0 10px;align-items:center;padding:0 16px}.head{padding:12px 16px;border-bottom:1px solid var(--b)}.title{display:flex;align-items:center;gap:9px;min-width:0}.dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%}.title-text{min-width:0}.title-text strong{display:block;font-size:15.5px;line-height:1.3}.basis{display:block;color:var(--m);font-size:12px;line-height:1.35}.pill{justify-self:stretch;padding:5px 6px;border-radius:999px;font-size:11px;font-weight:750;line-height:1.25;text-align:center;white-space:nowrap}.colhead{justify-self:stretch;color:var(--m);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:center;white-space:nowrap}.row{border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);min-height:44px}.row:first-of-type{border-top:0}.rowlabel{color:var(--m);font-size:13px;line-height:1.35;padding:9px 0;overflow-wrap:anywhere}.count,.total{text-align:center;font-variant-numeric:tabular-nums}.zero{color:var(--m)}.link{border:0;background:none;padding:6px 8px;color:var(--a);font:inherit;font-weight:750;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:6px}.link:hover{text-decoration:underline;background:color-mix(in srgb,var(--a) 8%,transparent)}.totals{background:color-mix(in srgb,var(--bg) 78%,var(--s));border-top:1px solid var(--b);font-weight:760}.totals .rowlabel{color:var(--t);font-weight:760}.empty{margin:0;padding:22px 16px;color:var(--m);text-align:center}.grand{border-color:var(--b)}.grand .row{min-height:52px}.grand-label{font-size:14px;font-weight:800}@media(max-width:760px){.pill,.colhead,.count{display:none}.grid{grid-template-columns:minmax(0,1fr) auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillSubmissionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: MindBillBillTasksDashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mindbill-bill-submission", standalone: true, imports: [CommonModule, FormsModule, MindBillComboBoxComponent, MindBillDateInputComponent], template: `
-    <form class="mbs" [ngStyle]="themeStyle" (submit)="submit($event)" novalidate>
-      <div class="intro"><div><h2>{{ heading }}</h2><p>{{ description }}</p></div><span><b>*</b> Required</span></div>
-
-      <fieldset id="mbs-patient"><legend>Patient</legend><div class="grid">
-        <label [class.invalid]="bad('patient.firstName')">First name <b>*</b><input name="firstName" [(ngModel)]="bill.patient.firstName"></label>
-        <label [class.invalid]="bad('patient.lastName')">Last name <b>*</b><input name="lastName" [(ngModel)]="bill.patient.lastName"></label>
-        <label [class.invalid]="bad('patient.dateOfBirth')">Date of birth <b>*</b><mindbill-date-input ariaLabel="Date of birth" [value]="bill.patient.dateOfBirth" (valueChange)="setDate('patient.dateOfBirth', $event)"/></label>
-        <label>Phone (optional)<input name="phone" type="tel" [(ngModel)]="bill.patient.phone"></label>
-        <label class="wide" [class.invalid]="bad('patient.address.line1')">Address <b>*</b><input name="address" [(ngModel)]="bill.patient.address.line1"></label>
-        <label [class.invalid]="bad('patient.address.postalCode')">ZIP <b>*</b><input name="zip" [(ngModel)]="bill.patient.address.postalCode" (ngModelChange)="postalChanged($event)" inputmode="numeric">@if (postalStatus) { <small>{{ postalStatus }}</small> }</label>
-        <label [class.invalid]="bad('patient.address.city')">City <b>*</b><input name="city" [(ngModel)]="bill.patient.address.city"></label>
-        <label [class.invalid]="bad('patient.address.state')">State <b>*</b><input name="state" [(ngModel)]="bill.patient.address.state" maxlength="2"></label>
-      </div></fieldset>
-
-      <fieldset id="mbs-claim"><legend>Injury &amp; claim</legend><div class="grid">
-        <label [class.invalid]="bad('service.date')">Date of service <b>*</b><mindbill-date-input ariaLabel="Date of service" [value]="bill.service.date" (valueChange)="setDate('service.date', $event)"/></label>
-        <label [class.invalid]="bad('claim.dateOfInjury')">Date of injury <b>*</b><mindbill-date-input ariaLabel="Date of injury" [value]="bill.claim.dateOfInjury" (valueChange)="setDate('claim.dateOfInjury', $event)"/></label>
-        <label class="wide">Treatment authorization # (optional)<input name="authNumber" [ngModel]="bill.service.authorizationNumber || ''" (ngModelChange)="setAuthorizationNumber($event)" placeholder="Utilization-review authorization number"><small>Rides on the bill as CMS-1500 Box 23 / 837 REF*G1.</small></label>
-        <label [class.invalid]="bad('claim.claimNumber')">Claim number <b>*</b><input name="claimNumber" [(ngModel)]="bill.claim.claimNumber"></label>
-        <label [class.invalid]="bad('claim.employer')">Employer <b>*</b><input name="employer" [(ngModel)]="bill.claim.employer"></label>
-        <div class="wide lookup" [class.invalid]="bad('claim.claimsAdministrator')"><label>Claims administrator <b>*</b></label>
-          <input name="payerQuery" [(ngModel)]="payerQuery" (focus)="searchPayers()" (input)="searchPayers()" placeholder="Search the MindBill payer directory…" autocomplete="off">
-          @if (payerBusy) { <small>Searching directory…</small> }
-          @if (payerResults.length) { <div class="options">@for (payer of payerResults; track payer.id) { <button type="button" (click)="selectPayer(payer)"><strong>{{ payer.name }}</strong><span>{{ payer.hasElectronic ? 'Electronic routing' : 'Paper / fax' }}@if (payer.confidence) { · {{ payer.confidence }} match }</span></button> }</div> }
-          @if (bill.claim.claimsAdministrator.id) { <small class="selected">✓ Routed to {{ bill.claim.claimsAdministrator.name }}</small> }
-        </div>
-        <label class="wide">Injury description (optional)<input name="description" [(ngModel)]="bill.claim.description"></label>
-        <div class="wide diagnosis" [class.invalid]="bad('diagnoses')"><label>Diagnosis codes (ICD-10) <b>*</b></label>
-          <div class="quick">@for (item of quickDiagnoses; track item.code) { <button type="button" [class.on]="hasDiagnosis(item.code)" (click)="toggleDiagnosis(item)">{{ hasDiagnosis(item.code) ? '✓' : '+' }} {{ item.label }}</button> }</div>
-          @if (bill.diagnoses.length) { <div class="chips">@for (code of bill.diagnoses; track code) { <button type="button" (click)="removeDiagnosis(code)"><strong>{{ code }}</strong> ×</button> }</div> }
-          <input name="diagnosisQuery" [(ngModel)]="diagnosisQuery" (focus)="searchDiagnoses(true)" (input)="searchDiagnoses(true)" placeholder="Search ICD-10 codes…" autocomplete="off">
-          @if (diagnosisBusy && !diagnosisResults.length) { <small>Searching ICD-10 directory…</small> }
-          @if (diagnosisResults.length) { <div class="options diagnoses" (scroll)="diagnosisScrolled($event)">@for (item of diagnosisResults; track item.code) { <button type="button" (click)="addDiagnosis(item)"><strong>{{ item.code }}</strong><span>{{ item.description }}</span></button> }</div> }
-        </div>
-      </div></fieldset>
-
-      <fieldset id="mbs-provider"><legend>Providers &amp; place of service</legend><div class="grid">
-        <h3 class="wide">Billing provider</h3>
-        <label [class.invalid]="bad('billingProvider.name')">Billing provider name <b>*</b><input name="billingProvider" [(ngModel)]="bill.billingProvider.name"></label>
-        <label [class.invalid]="bad('billingProvider.taxId')">Tax ID <b>*</b><input name="taxId" [(ngModel)]="bill.billingProvider.taxId"></label>
-        <label [class.invalid]="bad('billingProvider.npi')">Billing NPI <b>*</b><input name="billingNpi" [(ngModel)]="bill.billingProvider.npi" inputmode="numeric" maxlength="10"></label>
-        <label [class.invalid]="bad('billingProvider.phone')">Billing phone <b>*</b><input name="billingPhone" type="tel" [(ngModel)]="bill.billingProvider.phone"></label>
-        <label class="wide" [class.invalid]="bad('billingProvider.address.line1')">Billing address <b>*</b><input name="billingAddress" [(ngModel)]="bill.billingProvider.address.line1"></label>
-        <label [class.invalid]="bad('billingProvider.address.postalCode')">Billing ZIP <b>*</b><input name="billingZip" [(ngModel)]="bill.billingProvider.address.postalCode" inputmode="numeric"></label>
-        <label [class.invalid]="bad('billingProvider.address.city')">Billing city <b>*</b><input name="billingCity" [(ngModel)]="bill.billingProvider.address.city"></label>
-        <label [class.invalid]="bad('billingProvider.address.state')">Billing state <b>*</b><input name="billingState" [(ngModel)]="bill.billingProvider.address.state" maxlength="2"></label>
-        <h3 class="wide">Rendering provider</h3>
-        <label [class.invalid]="bad('renderingProvider.name')">Rendering provider name <b>*</b><input name="renderingProvider" [(ngModel)]="bill.renderingProvider.name"></label>
-        <label [class.invalid]="bad('renderingProvider.npi')">Rendering provider NPI <b>*</b><input name="renderingNpi" [(ngModel)]="bill.renderingProvider.npi" inputmode="numeric" maxlength="10"></label>
-        <div class="wide" [class.invalid]="bad('renderingProvider.taxonomy')"><label>Rendering taxonomy <b>*</b></label>
-          <mindbill-combo-box ariaLabel="Rendering taxonomy" [value]="bill.renderingProvider.taxonomy || ''" [invalid]="bad('renderingProvider.taxonomy')" [preserveValueOnOpen]="true" placeholder="Search specialty name or taxonomy code…" [options]="taxonomyComboOptions" [createOption]="customTaxonomyOption" (selected)="selectTaxonomy($event)"/>
-          <small>Search by specialty name or 10-character taxonomy code.</small>
-        </div>
-        <h3 class="wide">Place of service</h3>
-        <label [class.invalid]="bad('serviceLocation.placeOfServiceCode')">Place of service code <b>*</b><input name="pos" [(ngModel)]="bill.serviceLocation.placeOfServiceCode" placeholder="11" inputmode="numeric" maxlength="2"></label>
-        <label class="wide" [class.invalid]="bad('serviceLocation.address.line1')">Service address <b>*</b><input name="serviceAddress" [(ngModel)]="bill.serviceLocation.address.line1"></label>
-        <label [class.invalid]="bad('serviceLocation.address.postalCode')">Service ZIP <b>*</b><input name="serviceZip" [(ngModel)]="bill.serviceLocation.address.postalCode" inputmode="numeric"></label>
-        <label [class.invalid]="bad('serviceLocation.address.city')">Service city <b>*</b><input name="serviceCity" [(ngModel)]="bill.serviceLocation.address.city"></label>
-        <label [class.invalid]="bad('serviceLocation.address.state')">Service state <b>*</b><input name="serviceState" [(ngModel)]="bill.serviceLocation.address.state" maxlength="2"></label>
-      </div></fieldset>
-
-      <fieldset id="mbs-lines" [class.invalid-set]="bad('serviceLines')"><legend>Service lines</legend>
-        <div class="line-head"><span>Procedure code *</span><span>Modifiers</span><span>Dx</span><span>Units *</span><span>Allowed</span><span></span></div>
-        @for (line of bill.serviceLines; track $index; let index = $index) { <div class="service-line">
-          <div class="cell"><span class="mobile-label">Procedure</span>
-            <mindbill-combo-box [ariaLabel]="'Procedure code ' + (index + 1)" [value]="line.code" placeholder="Search or enter code…" [options]="procedureComboOptions" [createOption]="customProcedureOption" (selected)="selectProcedure(index, $event)"/>
-            @if (line.code) { <small>{{ procedureDescription(line.code) || 'Custom CPT, HCPCS, or medical-legal code' }}</small> }
-          </div>
-          <div class="cell"><span class="mobile-label">Modifiers</span>
-            @if (line.modifiers?.length) { <div class="chips">@for (modifier of line.modifiers; track modifier) { <button type="button" (click)="removeModifier(index, modifier)" [attr.aria-label]="'Remove modifier ' + modifier">−{{ modifier }} ×</button> }</div> }
-            <mindbill-combo-box [ariaLabel]="'Modifiers ' + (index + 1)" value="" [placeholder]="line.modifiers?.length ? line.modifiers!.length + ' modifier' + (line.modifiers!.length === 1 ? '' : 's') : 'Add modifiers…'" [options]="modifierComboOptions(line)" (selected)="addModifier(index, $event)"/>
+            args: [{ selector: "mindbill-bill-tasks-dashboard", standalone: true, imports: [CommonModule], template: `
+    <div class="mbtk" [ngStyle]="themeStyle">
+      @if (heading) { <header class="heading"><h2>{{ heading }}</h2></header> }
+      @for (section of data?.sections ?? []; track section.id) {
+        <section class="card" [style.borderColor]="tone(section)" [attr.aria-label]="section.label">
+          <div class="grid head" [style.borderBottomColor]="tone(section)">
+            <span class="title">
+              <i class="dot" [style.background]="tone(section)"></i>
+              <span class="title-text"><strong>{{ section.label }}</strong><span class="basis">by {{ section.agingBasisLabel }}</span></span>
+            </span>
+            @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+              <span class="pill" [style.background]="pillBackground(bucketIndex)" [style.color]="pillColor(bucketIndex)">{{ bucket.label }}</span>
+            }
+            <span class="colhead">Task Total</span>
           </div>
-          <div class="cell"><span class="mobile-label">Dx pointers</span>
-            <div class="dx">
-              @if (bill.diagnoses.length) {
-                @for (code of bill.diagnoses; track code; let dxIndex = $index) {
-                  <button type="button" [class.on]="hasDiagnosisPointer(line, dxIndex + 1)" [title]="dxLetter(dxIndex + 1) + ' — ' + code" [attr.aria-pressed]="hasDiagnosisPointer(line, dxIndex + 1)" [attr.aria-label]="'Point line ' + (index + 1) + ' at diagnosis ' + code" (click)="toggleDiagnosisPointer(index, dxIndex + 1)">{{ dxLetter(dxIndex + 1) }}</button>
+          @if (section.empty) {
+            <p class="empty">{{ emptyLabel }}</p>
+          } @else {
+            @for (row of section.rows; track row.id) {
+              <div class="grid row">
+                <span class="rowlabel">{{ row.label }}</span>
+                @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+                  <span class="count">
+                    @if ((row.counts[bucketIndex] ?? 0) > 0) {
+                      <button type="button" class="link" (click)="select(section, row, bucketIndex)">{{ row.counts[bucketIndex] }}</button>
+                    } @else { <span class="zero">0</span> }
+                  </span>
                 }
-              } @else { <small>Add diagnoses above</small> }
+                <span class="total">
+                  @if (row.total > 0) {
+                    <button type="button" class="link" (click)="select(section, row, null)">{{ row.total }}</button>
+                  } @else { <span class="zero">0</span> }
+                </span>
+              </div>
+            }
+            <div class="grid row totals">
+              <span class="rowlabel">Total</span>
+              @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+                <span class="count">{{ section.totals[bucketIndex] ?? 0 }}</span>
+              }
+              <span class="total">{{ section.total }}</span>
             </div>
-          </div>
-          <label><span class="mobile-label">Units</span><input [name]="'units'+index" type="number" min="1" [(ngModel)]="line.units"></label>
-          <strong>{{ allowed(line) == null ? '—' : (allowed(line) | currency) }}</strong>
-          <button class="remove" type="button" (click)="removeLine(index)" aria-label="Remove service line">×</button>
-        </div> }
-        <div class="total"><span>Total</span><strong>{{ totalAllowed | currency }}</strong></div>
-      </fieldset>
-
-      <fieldset><legend>Attachments</legend>
-        @for (attachment of workingAttachments; track attachment.filename; let index = $index) { <div class="attachment" [class.locked]="attachment.locked"><div><strong>{{ attachment.filename }}</strong><span>{{ attachment.description || attachment.badge || 'Supporting document' }}</span></div><div class="attachment-actions"><button type="button" (click)="previewAttachment(attachment)">Preview</button>@if (!attachment.locked) { <button type="button" (click)="removeAttachment(index)" aria-label="Remove attachment">×</button> }</div></div> }
-        <label class="dropzone" [class.drag-active]="dragActive"><input type="file" accept="application/pdf,.pdf" multiple (change)="filesSelected($event)"><strong>Drop additional PDF files here, or click to choose</strong><span>Add supporting documents by dropping them anywhere on this screen.</span></label>
-      </fieldset>
-
-      @if (errorMessage) { <div class="error" role="alert">{{ errorMessage }}</div> }
-      <div class="submit-row"><span>{{ invalidFields.size ? 'Complete the highlighted required fields.' : 'All required billing data is ready.' }}</span><button type="submit" [disabled]="submitting">{{ submitting ? 'Submitting…' : submitLabel }}</button></div>
-      @if (dragActive) { <div class="drop-overlay" aria-hidden="true"><div><strong>Drop PDFs to attach</strong><span>Supporting documents are added to this submission.</span></div></div> }
-    </form>
-  `, styles: [":host{display:block}.mbs{--danger:#c83c3c;font-family:var(--font);color:var(--t)}*{box-sizing:border-box}.intro{display:flex;justify-content:space-between;align-items:start;margin:0 0 24px}.intro h2{margin:0;font-size:24px;font-weight:600}.intro p{margin:6px 0 0;color:var(--m)}.intro>span{color:var(--m);font-size:13px}.mbs b{color:inherit}.intro b,label>b,.lookup>label>b,.diagnosis>label>b,.cell>label>b{color:var(--danger)}fieldset{border:1px solid var(--b);border-radius:var(--r);margin:0 0 22px;padding:24px 26px 26px;background:var(--s)}legend{padding:0 10px;font-size:18px;font-weight:700}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}.wide{grid-column:1/-1}h3{margin:4px 0 -4px;padding-top:12px;border-top:1px solid var(--b);font-size:16px}h3:first-child{border:0;padding-top:0}label,.lookup,.diagnosis{display:grid;gap:8px;font-size:14px;font-weight:700}.grid>label{display:flex;flex-wrap:wrap;align-content:start;align-items:center;column-gap:4px;row-gap:8px}.grid>label>input,.grid>label>select,.grid>label>small,.grid>label>mindbill-date-input{flex:0 0 100%}.grid>div.wide{display:grid;gap:8px;font-size:14px;font-weight:700}input,select{width:100%;min-height:46px;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:10px 12px;color:var(--t);font:inherit;font-weight:450}input:focus,select:focus{outline:3px solid color-mix(in srgb,var(--a) 22%,transparent);border-color:var(--a)}.invalid input,.invalid select,.invalid-set{border-color:var(--danger)!important;background:color-mix(in srgb,var(--danger) 4%,var(--s))}.invalid>label{color:var(--danger)}small{color:var(--m);font-weight:450}.selected{color:#238655}.options{position:relative;z-index:4;max-height:300px;overflow:auto;border:1px solid var(--b);border-radius:var(--cr);background:var(--s);box-shadow:0 14px 35px #172b3730}.options button{display:grid;width:100%;gap:3px;border:0;border-bottom:1px solid var(--b);background:var(--s);padding:12px 14px;text-align:left;color:var(--t);cursor:pointer}.options button:hover{background:color-mix(in srgb,var(--a) 7%,var(--s))}.options span{color:var(--m);font-size:12px}.quick,.chips{display:flex;flex-wrap:wrap;gap:8px}.quick button,.chips button{border:1px solid var(--b);border-radius:999px;background:var(--s);padding:7px 11px;color:var(--t);font:inherit;font-size:13px;cursor:pointer}.quick .on{border-color:var(--a);color:var(--a);background:color-mix(in srgb,var(--a) 8%,var(--s))}.chips button{border-color:color-mix(in srgb,var(--a) 40%,var(--b));background:color-mix(in srgb,var(--a) 7%,var(--s));font-weight:700}.dx{display:flex;flex-wrap:wrap;gap:5px;padding-top:6px}.dx button{width:30px;height:30px;border:1px solid var(--b);border-radius:8px;background:var(--s);color:var(--m);font:inherit;font-size:13px;font-weight:750;cursor:pointer;padding:0}.dx button.on{border-color:var(--a);background:color-mix(in srgb,var(--a) 10%,var(--s));color:var(--a)}.line-head,.service-line{display:grid;grid-template-columns:1.5fr 1.35fr .8fr .5fr .7fr 36px;gap:14px;align-items:start}.line-head{padding:0 0 9px;color:var(--m);font-size:12px;font-weight:700}.service-line{border-top:1px solid var(--b);padding:12px 0}.service-line label,.service-line .cell{display:grid;gap:6px;font-size:14px;font-weight:700}.service-line strong{text-align:right;padding-top:12px}.remove{border:0;background:transparent;color:var(--m);font-size:25px;cursor:pointer}.mobile-label{display:none}.total{display:flex;justify-content:flex-end;gap:36px;border-top:1px solid var(--b);padding-top:14px;font-size:17px}.attachment{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--b);border-radius:var(--cr);margin-bottom:10px;padding:14px 16px}.attachment.locked{border-color:#9fd6b4;background:#f3fcf6}.attachment>div:first-child{display:grid;gap:4px}.attachment span{color:var(--m);font-size:13px}.attachment-actions{display:flex;gap:8px}.attachment button{border:1px solid var(--b);border-radius:var(--cr);background:var(--s);padding:8px 12px;color:var(--t);font-weight:700;cursor:pointer}.dropzone{position:relative;display:grid;min-height:170px;place-content:center;gap:8px;border:2px dashed color-mix(in srgb,var(--m) 60%,transparent);border-radius:var(--cr);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.dropzone.drag-active{border-color:var(--a);background:color-mix(in srgb,var(--a) 8%,var(--s))}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.dropzone span{color:var(--m);font-weight:450}.drop-overlay{position:fixed;inset:0;z-index:60;display:grid;place-content:center;background:color-mix(in srgb,var(--a) 14%,#ffffffd9);pointer-events:none}.drop-overlay div{display:grid;gap:6px;border:2px dashed var(--a);border-radius:var(--r);background:var(--s);padding:34px 44px;text-align:center;box-shadow:0 24px 60px #172b3740}.drop-overlay strong{font-size:19px}.drop-overlay span{color:var(--m)}.error{margin:0 0 14px;border-left:4px solid var(--danger);border-radius:var(--cr);background:color-mix(in srgb,var(--danger) 10%,var(--s));padding:14px;color:var(--danger)}.submit-row{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--b);border-radius:var(--r);background:color-mix(in srgb,var(--s) 96%,transparent);box-shadow:0 -8px 24px #172b3718;padding:14px 18px}.submit-row>span{color:#43835f}.submit-row button{min-width:190px;border:0;border-radius:var(--cr);background:var(--a);color:var(--ac);padding:12px 24px;font:inherit;font-weight:800;cursor:pointer}.submit-row button:disabled{opacity:.6;cursor:wait}@media(max-width:760px){fieldset{padding:18px 16px}.grid{grid-template-columns:1fr}.wide{grid-column:auto}.intro{display:grid;gap:10px}.line-head{display:none}.service-line{grid-template-columns:1fr 1fr}.service-line>*{grid-column:1/-1}.service-line label:nth-child(3){grid-column:1}.service-line>strong{grid-column:2;grid-row:3;text-align:left}.service-line>.remove{grid-column:1/-1}.mobile-label{display:block;color:var(--m);font-size:12px}.attachment{align-items:flex-start}.attachment-actions{align-items:center}.submit-row>span{display:none}.submit-row button{width:100%}}\n"] }]
-        }], propDecorators: { initialBill: [{
-                type: Input
-            }], attachments: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }], sessionEndpoint: [{
-                type: Input
-            }], getSession: [{
+          }
+        </section>
+      }
+      <section class="card grand" [attr.aria-label]="grandTotalLabel">
+        <div class="grid row totals">
+          <span class="rowlabel grand-label">{{ grandTotalLabel }}</span>
+          @for (bucket of buckets; track bucket.id; let bucketIndex = $index) {
+            <span class="count">{{ data?.grandTotals?.[bucketIndex] ?? 0 }}</span>
+          }
+          <span class="total">{{ data?.grandTotal ?? 0 }}</span>
+        </div>
+      </section>
+    </div>
+  `, styles: [":host{display:block}.mbtk{color:var(--t);font-family:var(--font);font-size:14px}.heading{margin-bottom:14px}.heading h2{margin:0;font-size:24px}.card{margin-bottom:16px;border:1.5px solid var(--b);border-radius:var(--r);background:var(--s);overflow:hidden}.grid{display:grid;grid-template-columns:var(--cols);gap:0 10px;align-items:center;padding:0 16px}.head{padding:12px 16px;border-bottom:1px solid var(--b)}.title{display:flex;align-items:center;gap:9px;min-width:0}.dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%}.title-text{min-width:0}.title-text strong{display:block;font-size:15.5px;line-height:1.3}.basis{display:block;color:var(--m);font-size:12px;line-height:1.35}.pill{justify-self:stretch;padding:5px 6px;border-radius:999px;font-size:11px;font-weight:750;line-height:1.25;text-align:center;white-space:nowrap}.colhead{justify-self:stretch;color:var(--m);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:center;white-space:nowrap}.row{border-top:1px solid color-mix(in srgb,var(--b) 60%,transparent);min-height:44px}.row:first-of-type{border-top:0}.rowlabel{color:var(--m);font-size:13px;line-height:1.35;padding:9px 0;overflow-wrap:anywhere}.count,.total{text-align:center;font-variant-numeric:tabular-nums}.zero{color:var(--m)}.link{border:0;background:none;padding:6px 8px;color:var(--a);font:inherit;font-weight:750;font-variant-numeric:tabular-nums;cursor:pointer;border-radius:6px}.link:hover{text-decoration:underline;background:color-mix(in srgb,var(--a) 8%,transparent)}.totals{background:color-mix(in srgb,var(--bg) 78%,var(--s));border-top:1px solid var(--b);font-weight:760}.totals .rowlabel{color:var(--t);font-weight:760}.empty{margin:0;padding:22px 16px;color:var(--m);text-align:center}.grand{border-color:var(--b)}.grand .row{min-height:52px}.grand-label{font-size:14px;font-weight:800}@media(max-width:760px){.pill,.colhead,.count{display:none}.grid{grid-template-columns:minmax(0,1fr) auto}}\n"] }]
+        }], propDecorators: { data: [{
                 type: Input
-            }], apiBaseUrl: [{
+            }], buckets: [{
                 type: Input
             }], heading: [{
                 type: Input
-            }], description: [{
-                type: Input
-            }], submitLabel: [{
-                type: Input
-            }], procedureOptions: [{
-                type: Input
-            }], modifierOptions: [{
+            }], grandTotalLabel: [{
                 type: Input
-            }], taxonomyOptions: [{
+            }], emptyLabel: [{
                 type: Input
-            }], submitter: [{
+            }], appearance: [{
                 type: Input
-            }], submitted: [{
-                type: Output
-            }], submissionError: [{
-                type: Output
-            }], billChange: [{
+            }], cellSelected: [{
                 type: Output
-            }], onWindowDragOver: [{
-                type: HostListener,
-                args: ["window:dragover", ["$event"]]
-            }], onWindowDragLeave: [{
-                type: HostListener,
-                args: ["window:dragleave", ["$event"]]
-            }], onWindowDrop: [{
-                type: HostListener,
-                args: ["window:drop", ["$event"]]
             }] } });
 
 const THEME$1 = {