@mindbill/angular 0.3.0 → 0.4.1

package/fesm2022/mindbill-angular.mjs

@@ -14,14 +14,10 @@ class MindBillLifecycleStore {
     mutating = signal(false, ...(ngDevMode ? [{ debugName: "mutating" }] : /* istanbul ignore next */ []));
     ready = computed(() => this.data() !== null && !this.loading(), ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
     client = null;
-    createInput;
-    onBillCreated;
     refreshTimer = null;
-    connect(options, refreshInterval = 60_000, createInput, onBillCreated) {
+    connect(options, refreshInterval = 60_000) {
         this.disconnect();
-        this.billId.set(options.billId ?? "");
-        this.createInput = createInput;
-        this.onBillCreated = onBillCreated;
+        this.billId.set(options.billId);
         this.client = createBillLifecycleClient(options);
         void this.refresh();
         if (refreshInterval > 0) {
@@ -34,29 +30,13 @@ class MindBillLifecycleStore {
         this.refreshTimer = null;
         this.client?.clearSession();
         this.client = null;
-        this.createInput = undefined;
-        this.onBillCreated = undefined;
     }
     async refresh() {
         if (!this.client)
             return null;
         this.loading.set(this.data() === null);
         try {
-            let data;
-            if (!this.client.getBillId()) {
-                if (!this.createInput) {
-                    throw new Error("Pass billId to open a bill or create to start a new one.");
-                }
-                const created = await this.client.createBill(this.createInput);
-                const isNew = !this.billId();
-                this.billId.set(created.billId);
-                if (isNew)
-                    this.onBillCreated?.(created.billId, created.data);
-                data = created.data;
-            }
-            else {
-                data = await this.client.getLifecycle();
-            }
+            const data = await this.client.getLifecycle();
             this.data.set(data);
             this.error.set(null);
             return data;
@@ -69,37 +49,12 @@ class MindBillLifecycleStore {
             this.loading.set(false);
         }
     }
-    searchClaimsAdministrators(query, claimNumber) {
-        return this.requireClient().searchClaimsAdministrators(query, claimNumber);
-    }
     getDeliveryOptions() { return this.requireClient().getDeliveryOptions(); }
-    saveReview(input) { return this.mutate(() => this.requireClient().saveReview(input)); }
-    submitBill(input, submission) { return this.mutate(() => this.requireClient().submitBill(input, submission)); }
-    addAttachment(file, type, description) { return this.mutate(() => this.requireClient().addAttachment(file, type, description)); }
-    removeAttachment(id) { return this.mutate(() => this.requireClient().removeAttachment(id)); }
     getAttachment(id) { return this.requireClient().getAttachment(id); }
     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)); }
     submitSecondReview(input) { return this.mutate(() => this.requireClient().submitSecondReview(input)); }
-    async startCorrection() {
-        this.mutating.set(true);
-        try {
-            const result = await this.requireClient().startCorrection();
-            this.billId.set(result.replacementBillId);
-            this.data.set(result.data);
-            this.error.set(null);
-            return result.data;
-        }
-        catch (cause) {
-            const error = cause instanceof Error ? cause : new Error("Correction draft could not be created.");
-            this.error.set(error);
-            throw error;
-        }
-        finally {
-            this.mutating.set(false);
-        }
-    }
     requireClient() {
         if (!this.client)
             throw new Error("Connect the lifecycle store before using it.");
@@ -124,533 +79,163 @@ class MindBillLifecycleStore {
     }
 }
 
-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 THEMES = {
     mindbill: { preset: "mindbill", accentColor: "#238dbd", accentTextColor: "#fff", backgroundColor: "#f3f8fa", surfaceColor: "#fff", textColor: "#203743", mutedColor: "#657982", borderColor: "#dbe6ea", borderRadius: "14px", controlRadius: "8px", fontFamily: "Inter,system-ui,sans-serif" },
     "qme-companion": { preset: "qme-companion", accentColor: "#53b5dc", accentTextColor: "#173542", backgroundColor: "#f2f8fb", surfaceColor: "#fff", textColor: "#1d3440", mutedColor: "#617783", borderColor: "#d7e5eb", borderRadius: "12px", controlRadius: "8px", fontFamily: "Inter,system-ui,sans-serif" },
-    "orange-bright": { preset: "orange-bright", accentColor: "#ff4f0a", accentTextColor: "#fff", backgroundColor: "#fffaf6", surfaceColor: "#fff", textColor: "#111827", mutedColor: "#626a73", borderColor: "#e5e1dc", borderRadius: "8px", controlRadius: "6px", fontFamily: "Inter,system-ui,sans-serif" },
+    "orange-bright": { preset: "orange-bright", accentColor: "#f4510b", accentTextColor: "#fff", backgroundColor: "#fffaf6", surfaceColor: "#fffefd", textColor: "#090f1f", mutedColor: "#626a73", borderColor: "#e7e1da", borderRadius: "16px", controlRadius: "10px", fontFamily: "Inter,system-ui,sans-serif" },
     "clinical-blue": { preset: "clinical-blue", accentColor: "#1677ff", accentTextColor: "#fff", backgroundColor: "#f5f7fa", surfaceColor: "#fff", textColor: "#1f2d3d", mutedColor: "#66788a", borderColor: "#d9e2ec", borderRadius: "8px", controlRadius: "6px", fontFamily: "Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif" },
 };
-const DOCUMENT_TYPES = [
-    { value: "final_report", label: "Final report" },
-    { value: "proof_of_service", label: "Proof of service" },
-    { value: "letter_of_attestation", label: "Letter of attestation" },
-    { value: "form_122", label: "Required form" },
-    { value: "return_to_work_voucher", label: "Return-to-work voucher" },
-    { value: "w9", label: "W-9" },
-    { value: "appeal", label: "Appeal support" },
-    { value: "medical_records", label: "Medical records (intentional)" },
-    { value: "other", label: "Other supporting document" },
-];
 class MindBillBillLifecycleComponent {
     billId = "";
-    create;
     sessionEndpoint = "/api/mindbill/session";
     apiBaseUrl = "https://app.mindbill.org";
     getSession;
     refreshInterval = 60_000;
     appearance = { preset: "mindbill" };
-    billIdChange = new EventEmitter();
-    billCreated = new EventEmitter();
-    submitted = new EventEmitter();
     billingError = new EventEmitter();
     store = new MindBillLifecycleStore();
-    documentTypes = DOCUMENT_TYPES;
-    medLegalCodes = ["ML200", "ML201", "ML202", "ML203", "ML204", "ML205", "ML206", "MLPRR"];
-    draft = null;
-    dirty = false;
-    payerQuery = "";
-    payerResults = [];
-    documentType = "other";
-    pendingFile = null;
-    deliveryOptions = null;
-    submission = { route: "ebill" };
-    showSubmit = false;
-    deliveryBusy = false;
+    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 };
-    payerTimer = null;
-    constructor() {
-        effect(() => {
-            const data = this.store.data();
-            if (data && !this.dirty)
-                this.draft = this.makeDraft(data);
-            const error = this.store.error();
-            if (error)
-                this.billingError.emit(error);
-        });
-    }
+    constructor() { effect(() => { const error = this.store.error(); if (error)
+        this.billingError.emit(error); }); }
     ngOnChanges(changes) {
-        if (changes["billId"] || changes["create"] || changes["sessionEndpoint"] || changes["apiBaseUrl"] || changes["getSession"]) {
-            if (!this.billId && !this.create) {
+        if (changes["billId"] || changes["sessionEndpoint"] || changes["apiBaseUrl"] || changes["getSession"]) {
+            if (!this.billId.trim()) {
                 this.store.disconnect();
                 return;
             }
-            this.store.connect({
-                ...(this.billId ? { billId: this.billId } : {}),
-                sessionEndpoint: this.sessionEndpoint,
-                apiBaseUrl: this.apiBaseUrl,
-                ...(this.getSession ? { getSession: this.getSession } : {}),
-            }, this.refreshInterval, this.create, (billId, data) => {
-                this.billIdChange.emit(billId);
-                this.billCreated.emit({ billId, data });
-            });
+            this.store.connect({ billId: this.billId, sessionEndpoint: this.sessionEndpoint, apiBaseUrl: this.apiBaseUrl, ...(this.getSession ? { getSession: this.getSession } : {}) }, this.refreshInterval);
         }
     }
-    ngOnDestroy() { this.store.disconnect(); if (this.payerTimer)
-        clearTimeout(this.payerTimer); }
+    ngOnDestroy() { this.store.disconnect(); }
     get themeStyle() {
         const base = THEMES[this.appearance.preset ?? "mindbill"];
-        return {
-            "--a": this.appearance.accentColor ?? base.accentColor,
-            "--ac": this.appearance.accentTextColor ?? base.accentTextColor,
-            "--bg": this.appearance.backgroundColor ?? base.backgroundColor,
-            "--s": this.appearance.surfaceColor ?? base.surfaceColor,
-            "--t": this.appearance.textColor ?? base.textColor,
-            "--m": this.appearance.mutedColor ?? base.mutedColor,
-            "--b": this.appearance.borderColor ?? base.borderColor,
-            "--r": this.appearance.borderRadius ?? base.borderRadius,
-            "--cr": this.appearance.controlRadius ?? base.controlRadius,
-            "--font": this.appearance.fontFamily ?? base.fontFamily,
-        };
+        return { "--a": this.appearance.accentColor ?? base.accentColor, "--ac": this.appearance.accentTextColor ?? base.accentTextColor, "--bg": this.appearance.backgroundColor ?? base.backgroundColor, "--s": this.appearance.surfaceColor ?? base.surfaceColor, "--t": this.appearance.textColor ?? base.textColor, "--m": this.appearance.mutedColor ?? base.mutedColor, "--b": this.appearance.borderColor ?? base.borderColor, "--r": this.appearance.borderRadius ?? base.borderRadius, "--cr": this.appearance.controlRadius ?? base.controlRadius, "--font": this.appearance.fontFamily ?? base.fontFamily };
     }
     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` : ""}` : "Review the prefilled bill and payer packet before submission."; }
-    isEditable(data) { return data.lifecycle.actions.some((action) => action.id === "edit_and_submit" && action.enabled) || ["incomplete", "draft", "not_submitted"].includes(data.lifecycle.state.toLowerCase()); }
-    payerExplanation(payer) { return payer.signals?.map((signal) => signal.label).join(" · ") || (payer.hasElectronic ? "Electronic billing available" : "Available in payer directory"); }
-    queuePayerSearch() { if (this.payerTimer)
-        clearTimeout(this.payerTimer); this.payerTimer = setTimeout(() => void this.searchPayers(), 250); }
-    async searchPayers() { if (!this.payerQuery.trim()) {
-        this.payerResults = [];
-        return;
-    } this.payerResults = await this.store.searchClaimsAdministrators(this.payerQuery, this.draft?.injury.claimNumber); }
-    selectPayer(payer) { if (!this.draft)
-        return; this.draft.injury.claimsAdminId = payer.id; this.draft.injury.claimsAdminName = payer.name; this.payerQuery = ""; this.payerResults = []; this.dirty = true; }
-    clearPayer() { if (!this.draft)
-        return; this.draft.injury.claimsAdminId = ""; this.draft.injury.claimsAdminName = ""; this.dirty = true; }
-    lineChanged() { this.normalizeLineItems(); this.dirty = true; }
-    removeLine(index) { this.draft?.bill.lineItems.splice(index, 1); this.normalizeLineItems(); this.dirty = true; }
-    setModifiers(line, value) { line.modifiers = value.split(",").map((item) => item.trim().replace(/^-/, "")).filter(Boolean); this.normalizeLineItems(); this.dirty = true; }
-    setDiagnosisPointers(line, value) { line.diagnosisPointers = value.split(",").map((item) => Number(item.trim())).filter((item) => Number.isInteger(item) && item >= 1 && item <= 12); this.normalizeLineItems(); this.dirty = true; }
-    applyPreset(kind) {
-        if (!this.draft)
-            return;
-        const modifier = kind === "ame" ? "94" : kind === "psych" ? "96" : "95";
-        const entered = this.draft.bill.lineItems.filter((line) => line.code.trim());
-        if (entered.length === 0)
-            entered.push({ code: "ML201", modifiers: [modifier], units: 1, charge: 0 });
-        else
-            entered.forEach((line) => { if (!line.modifiers.length)
-                line.modifiers = [modifier]; });
-        this.draft.bill.lineItems = ensureTrailingProcedureLine(entered);
-        this.dirty = true;
-    }
-    fileSelected(event) { this.pendingFile = event.target.files?.[0] ?? null; }
-    async attach() { if (!this.pendingFile)
-        return; await this.store.addAttachment(this.pendingFile, this.documentType); this.pendingFile = null; this.notice = "Document attached."; }
-    async removeAttachment(id) { await this.store.removeAttachment(id); this.notice = "Document removed."; }
-    async openAttachment(id, filename) { this.openBlob(await this.store.getAttachment(id), filename); }
-    async openEor(id, filename) { this.openBlob(await this.store.getEor(id), filename); }
-    canSubmit() {
-        const input = this.buildInput();
-        if (!input || !input.claimsAdminId || !input.billingProvider?.name || !input.billingProvider.taxId || !input.billingProvider.npi || !input.renderingProvider?.name || !input.renderingProvider.npi || !input.lineItems.length)
-            return false;
-        return input.lineItems.every((line) => line.code && line.units > 0 && (this.draft?.bill.billingMode !== "professional" || Boolean(line.serviceDate && line.charge && line.charge > 0)));
-    }
-    async save() { const input = this.buildInput(); if (!input)
-        return; const data = await this.store.saveReview(input); this.dirty = false; this.draft = this.makeDraft(data); this.notice = "Bill saved."; }
-    async openSubmit() {
-        if (!this.canSubmit())
-            return;
-        this.deliveryBusy = true;
-        try {
-            this.deliveryOptions = await this.store.getDeliveryOptions();
-            this.chooseDelivery(this.deliveryOptions.recommended);
-            this.showSubmit = true;
-        }
-        finally {
-            this.deliveryBusy = false;
-        }
-    }
-    closeSubmit() { this.showSubmit = false; }
-    selectedDelivery() { return this.deliveryOptions?.options.find((option) => option.route === this.submission.route); }
-    chooseDelivery(option) {
-        const destination = option.route === "fax" ? { faxNumber: option.target ?? this.deliveryOptions?.contacts.faxNumber ?? "" }
-            : option.route === "email" ? { email: option.target ?? this.deliveryOptions?.contacts.claimsEmail ?? "" }
-                : option.route === "mail" ? { mailingAddress: option.target ?? this.deliveryOptions?.contacts.mailingAddress ?? "" }
-                    : undefined;
-        this.submission = { route: option.route, ...(destination ? { destination } : {}) };
-    }
-    setDestination(key, value) { this.submission = { ...this.submission, destination: { ...this.submission.destination, [key]: value } }; }
-    deliveryReady() {
-        if (this.submission.route === "fax")
-            return Boolean(this.submission.destination?.faxNumber?.trim());
-        if (this.submission.route === "email")
-            return Boolean(this.submission.destination?.email?.trim());
-        if (this.submission.route === "mail")
-            return Boolean(this.submission.destination?.mailingAddress?.trim());
-        return true;
-    }
-    async submit() { const input = this.buildInput(); if (!input || !this.canSubmit() || !this.deliveryReady())
-        return; const data = await this.store.submitBill(input, this.submission); this.showSubmit = false; this.dirty = false; this.draft = this.makeDraft(data); this.notice = "Bill submitted."; this.submitted.emit(data); }
-    beginAction(action) { if (action === "post_payment")
+    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()); }
+    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" && this.store.data()?.eors[0]) {
-        const eor = this.store.data().eors[0];
-        void this.openEor(eor.id, eor.filename);
-    }
-    else if (action === "correct_and_resubmit")
-        void this.correct(); }
-    async correct() { const data = await this.store.startCorrection(); this.billIdChange.emit(this.store.billId()); this.dirty = false; this.draft = this.makeDraft(data); this.notice = "Correction draft created."; }
-    async postPayment() { await this.store.postPayment({ ...this.payment }); this.panel = ""; this.notice = "Payment posted."; }
-    async submitReview() { const data = this.store.data(); if (!data)
-        return; await this.store.submitSecondReview({ ...this.review, disputedAmount: this.review.disputedAmount || undefined, route: "ebill", attachmentIds: data.bill.attachments.map((doc) => doc.id) }); this.panel = ""; this.notice = "Second Review submitted."; }
+    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."; }
-    buildInput() {
-        if (!this.draft)
-            return null;
-        return {
-            claimsAdminId: this.draft.injury.claimsAdminId ?? "",
-            patientOverrides: {
-                firstName: this.draft.patient.firstName,
-                lastName: this.draft.patient.lastName,
-                ...(this.draft.patient.middleName ? { middleName: this.draft.patient.middleName } : {}),
-                ...(this.draft.patient.dob ? { dob: this.draft.patient.dob } : {}),
-            },
-            injuryOverrides: {
-                ...(this.draft.injury.claimNumber ? { claimNumber: this.draft.injury.claimNumber } : {}),
-                ...(this.draft.injury.employer ? { employer: this.draft.injury.employer } : {}),
-                ...(this.draft.injury.doi ? { doi: this.draft.injury.doi } : {}),
-                ...(this.draft.injury.injuryEndDate ? { injuryEndDate: this.draft.injury.injuryEndDate } : {}),
-                ...(typeof this.draft.injury.cumulativeTrauma === "boolean" ? { cumulativeTrauma: this.draft.injury.cumulativeTrauma } : {}),
-                ...(this.draft.injury.adjNumber ? { adjNumber: this.draft.injury.adjNumber } : {}),
-            },
-            dos: this.draft.bill.dos,
-            billingProvider: this.draft.billingProvider,
-            renderingProvider: this.draft.clinician,
-            placeOfService: this.draft.location,
-            lineItems: this.draft.bill.lineItems.filter((line) => line.code.trim()).map((line) => ({
-                ...(line.id ? { id: line.id } : {}),
-                code: line.code,
-                modifiers: line.modifiers,
-                units: line.units,
-                ...(line.charge > 0 ? { charge: line.charge } : {}),
-                ...(line.serviceDate ? { serviceDate: line.serviceDate } : {}),
-                ...(line.serviceDateEnd ? { serviceDateEnd: line.serviceDateEnd } : {}),
-                ...(line.diagnosisPointers?.length ? { diagnosisPointers: line.diagnosisPointers } : {}),
-            })),
-        };
-    }
-    makeDraft(data) {
-        const snapshot = data.bill.billingSnapshot ?? {};
-        const names = data.patient.name.trim().split(/\s+/);
-        return { patient: { ...data.patient, firstName: data.patient.firstName ?? names[0] ?? "", lastName: data.patient.lastName ?? names.slice(1).join(" ") }, injury: { ...data.injury }, bill: { ...data.bill, lineItems: ensureTrailingProcedureLine(data.bill.lineItems) }, billingProvider: snapshot.billingProvider ?? { name: "", taxId: "", npi: "", billType: "Professional" }, clinician: snapshot.renderingProvider ?? { name: "", specialty: "", npi: "" }, location: snapshot.placeOfService ?? { name: "", street: "", city: "", state: "", zip: "", posCode: "11" } };
-    }
-    normalizeLineItems() { if (this.draft)
-        this.draft.bill.lineItems = ensureTrailingProcedureLine(this.draft.bill.lineItems); }
     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", create: "create", sessionEndpoint: "sessionEndpoint", apiBaseUrl: "apiBaseUrl", getSession: "getSession", refreshInterval: "refreshInterval", appearance: "appearance" }, outputs: { billIdChange: "billIdChange", billCreated: "billCreated", submitted: "submitted", billingError: "billingError" }, usesOnChanges: true, ngImport: i0, template: `
+    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 (store.loading() && !store.data()) {
+      @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 (click)="store.refresh()">Try again</button></div>
+        <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 (isEditable(data) && draft) {
-          <form class="review" (submit)="$event.preventDefault(); submit()">
-            <section class="card">
-              <div class="card-title"><div><h3>Patient and claim</h3><p>Prefilled from the case. Correct anything that should print differently on this bill.</p></div><span>Required</span></div>
-              <div class="grid four">
-                <label><span>First name</span><input required [(ngModel)]="draft.patient.firstName" name="firstName" (ngModelChange)="dirty=true"></label>
-                <label><span>Last name</span><input required [(ngModel)]="draft.patient.lastName" name="lastName" (ngModelChange)="dirty=true"></label>
-                <label><span>Date of birth</span><input type="date" [(ngModel)]="draft.patient.dob" name="dob" (ngModelChange)="dirty=true"></label>
-                <label><span>Date of injury</span><input type="date" [(ngModel)]="draft.injury.doi" name="doi" (ngModelChange)="dirty=true"></label>
-                <label><span>Claim number</span><input [(ngModel)]="draft.injury.claimNumber" name="claimNumber" (ngModelChange)="dirty=true"></label>
-                <label><span>Employer</span><input [(ngModel)]="draft.injury.employer" name="employer" (ngModelChange)="dirty=true"></label>
-                <label><span>WCAB / case number</span><input [(ngModel)]="draft.injury.adjNumber" name="adjNumber" (ngModelChange)="dirty=true"></label>
-                <label><span>Date of service</span><input required type="date" [(ngModel)]="draft.bill.dos" name="dos" (ngModelChange)="dirty=true"></label>
-              </div>
-            </section>
+        <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 payer">
-              <div class="card-title"><div><h3>Claims administrator</h3><p>Select who should receive this bill. Search uses payer names and claim-number patterns.</p></div><span>Required</span></div>
-              @if (draft.injury.claimsAdminId) { <div class="selected"><div><strong>{{ draft.injury.claimsAdminName }}</strong><small>Selected recipient</small></div><button type="button" (click)="clearPayer()">Change</button></div> }
-              @else {
-                <label><span>Insurance company or claims administrator</span><input name="payerSearch" [(ngModel)]="payerQuery" (ngModelChange)="queuePayerSearch()" placeholder="Search by payer or administrator name" autocomplete="off"></label>
-                @if (payerResults.length) { <div class="results">@for (payer of payerResults; track payer.id) { <button type="button" (click)="selectPayer(payer)"><strong>{{ payer.name }}</strong><span>{{ payerExplanation(payer) }}</span></button> }</div> }
-              }
-            </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>
 
-            <section class="card">
-              <div class="card-title"><div><h3>Billing identity</h3><p>The payee, rendering clinician, and place of service are bill snapshots—not synchronization records.</p></div><span>Prefilled</span></div>
-              <div class="subhead">Billing provider</div>
-              <div class="grid three">
-                <label><span>Practice name</span><input required [(ngModel)]="draft.billingProvider.name" name="practiceName" (ngModelChange)="dirty=true"></label>
-                <label><span>Tax ID</span><input required [(ngModel)]="draft.billingProvider.taxId" name="taxId" (ngModelChange)="dirty=true"></label>
-                <label><span>Billing NPI</span><input required [(ngModel)]="draft.billingProvider.npi" name="billingNpi" (ngModelChange)="dirty=true"></label>
-              </div>
-              <div class="subhead">Rendering clinician</div>
-              <div class="grid three">
-                <label><span>Name</span><input required [(ngModel)]="draft.clinician.name" name="clinicianName" (ngModelChange)="dirty=true"></label>
-                <label><span>NPI</span><input required [(ngModel)]="draft.clinician.npi" name="clinicianNpi" (ngModelChange)="dirty=true"></label>
-                <label><span>Taxonomy</span><input [(ngModel)]="draft.clinician.taxonomy" name="taxonomy" (ngModelChange)="dirty=true"></label>
-              </div>
-              <div class="subhead">Service location</div>
-              <div class="grid three">
-                <label><span>Location</span><input required [(ngModel)]="draft.location.name" name="locationName" (ngModelChange)="dirty=true"></label>
-                <label><span>Street</span><input required [(ngModel)]="draft.location.street" name="street" (ngModelChange)="dirty=true"></label>
-                <label><span>City</span><input required [(ngModel)]="draft.location.city" name="city" (ngModelChange)="dirty=true"></label>
-                <label><span>State</span><input required list="mb-states" maxlength="2" [(ngModel)]="draft.location.state" name="state" (ngModelChange)="dirty=true"></label>
-                <label><span>ZIP</span><input required [(ngModel)]="draft.location.zip" name="zip" (ngModelChange)="dirty=true"></label>
-                <label><span>Place of service</span><input required [(ngModel)]="draft.location.posCode" name="pos" (ngModelChange)="dirty=true"></label>
-              </div>
-            </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>Payer reported</dt><dd>{{ data.remittance.payerReportedPaid == null ? '—' : (data.remittance.payerReportedPaid | currency) }}</dd></div><div><dt>Posted</dt><dd>{{ data.remittance.totalPaid | 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>Charges</h3><p>{{ draft.bill.billingMode === 'professional' ? 'Enter each treatment or professional service.' : 'Choose medical-legal codes, modifiers, units, and allowed amounts.' }} A keyboard-ready row appears automatically.</p></div></div>
-              @if (draft.bill.billingMode === 'med_legal') {
-                <div class="presets"><button type="button" (click)="applyPreset('qme')">QME</button><button type="button" (click)="applyPreset('ame')">AME</button><button type="button" (click)="applyPreset('psych')">Psych QME</button></div>
-              }
-              <div class="lines">@for (line of draft.bill.lineItems; track $index; let i=$index) {
-                <div class="line" [class.professional]="draft.bill.billingMode === 'professional'">
-                  <label><span>Procedure</span>
-                    @if (draft.bill.billingMode === 'med_legal') {
-                      <select [(ngModel)]="line.code" [name]="'code'+i" (ngModelChange)="lineChanged()"><option value="">Choose code…</option>@for (code of medLegalCodes; track code) { <option [value]="code">{{ code }}</option> }</select>
-                    } @else { <input [(ngModel)]="line.code" [name]="'code'+i" (ngModelChange)="lineChanged()" placeholder="e.g. 99204"> }
-                  </label>
-                  <label><span>Modifiers</span><input [ngModel]="line.modifiers.join(', ')" (ngModelChange)="setModifiers(line,$any($event))" [name]="'modifiers'+i" placeholder="e.g. 25, 95"></label>
-                  @if (draft.bill.billingMode === 'professional') {
-                    <label><span>Service date</span><input type="date" [(ngModel)]="line.serviceDate" [name]="'serviceDate'+i" (ngModelChange)="lineChanged()"></label>
-                    <label><span>End date</span><input type="date" [(ngModel)]="line.serviceDateEnd" [name]="'serviceDateEnd'+i" (ngModelChange)="lineChanged()"></label>
-                    <label><span>Charge</span><input type="number" min="0" step="0.01" [(ngModel)]="line.charge" [name]="'charge'+i" (ngModelChange)="lineChanged()"></label>
-                    <label><span>Diagnosis pointers</span><input [ngModel]="(line.diagnosisPointers || []).join(', ')" (ngModelChange)="setDiagnosisPointers(line,$any($event))" [name]="'pointers'+i" placeholder="1, 2"></label>
-                  }
-                  <label><span>Units</span><input type="number" min="1" [(ngModel)]="line.units" [name]="'units'+i" (ngModelChange)="lineChanged()"></label>
-                  <div class="allowed"><span>{{ draft.bill.billingMode === 'professional' ? 'Charge' : 'Allowed' }}</span><strong>{{ line.charge | currency }}</strong></div>
-                  <button type="button" class="remove" (click)="removeLine(i)" aria-label="Remove line">×</button>
-                </div>
-              }</div>
-            </section>
+        <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>Payer packet</h3><p>Only these documents will be sent. Medical records are never attached unless selected intentionally.</p></div><span>{{ data.bill.attachments.length }} files</span></div>
-              <ul class="docs">@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><button type="button" (click)="removeAttachment(doc.id)">Remove</button></li> }</ul>
-              <div class="upload"><select [(ngModel)]="documentType" name="documentType">@for (type of documentTypes; track type.value) { <option [value]="type.value">{{ type.label }}</option> }</select><input #fileInput type="file" accept="application/pdf" (change)="fileSelected($event)"><button type="button" [disabled]="!pendingFile || store.mutating()" (click)="attach()">Attach document</button></div>
-            </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="delivery"><div><span class="eyebrow">Delivery</span><h3>Submit this bill</h3><p>Review the exact electronic, fax, email, or mail destination before anything is sent.</p></div><div class="actions"><button type="button" (click)="save()" [disabled]="store.mutating()">Save changes</button><button class="primary" type="button" (click)="openSubmit()" [disabled]="store.mutating() || deliveryBusy || !canSubmit()">{{ deliveryBusy ? 'Loading routes…' : 'Review delivery' }}</button></div></section>
+        <section class="card"><div class="card-title"><div><h3>Bill history</h3><p>Submission, payer responses, follow-up, and payments.</p></div><span>{{ data.activity.length }}</span></div><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 (showSubmit && deliveryOptions) {
-              <div class="modal-backdrop" (click)="closeSubmit()">
-                <section class="submit-modal" role="dialog" aria-modal="true" aria-labelledby="mb-submit-title" (click)="$event.stopPropagation()">
-                  <header><div><span class="eyebrow">Send bill</span><h3 id="mb-submit-title">Choose a delivery route</h3><p>{{ deliveryOptions.payerName }}</p></div><button type="button" class="close" (click)="closeSubmit()" aria-label="Close">×</button></header>
-                  <div class="route-list">@for (option of deliveryOptions.options; track option.route) {
-                    <button type="button" class="route-option" [class.selected]="submission.route === option.route" (click)="chooseDelivery(option)"><span class="radio"></span><span><strong>{{ option.label }}</strong><small>{{ option.detail }}</small></span>@if (option.route === deliveryOptions.recommended.route) { <b>Recommended</b> }</button>
-                  }</div>
-                  @if (selectedDelivery(); as option) {
-                    @if (option.route === 'fax') { <label><span>Fax number</span><input [ngModel]="submission.destination?.faxNumber || ''" (ngModelChange)="setDestination('faxNumber',$any($event))" name="submitFax"></label> }
-                    @if (option.route === 'email') { <label><span>Email address</span><input type="email" [ngModel]="submission.destination?.email || ''" (ngModelChange)="setDestination('email',$any($event))" name="submitEmail"></label><label><span>Subject</span><input [(ngModel)]="submission.subject" name="submitSubject"></label> }
-                    @if (option.route === 'mail') { <label><span>Mailing address</span><textarea [ngModel]="submission.destination?.mailingAddress || ''" (ngModelChange)="setDestination('mailingAddress',$any($event))" name="submitMail"></textarea></label> }
-                    @if (option.route !== 'ebill') { <label><span>Attention (optional)</span><input [(ngModel)]="submission.attention" name="submitAttention"></label> }
-                  }
-                  <footer><button type="button" (click)="closeSubmit()">Cancel</button><button type="button" class="primary" (click)="submit()" [disabled]="store.mutating() || !deliveryReady()">{{ store.mutating() ? 'Submitting…' : 'Submit bill' }}</button></footer>
-                </section>
-              </div>
-            }
-          </form>
-        } @else {
-          <section class="card lifecycle">
-            <div class="card-title"><div><h3>Billing activity</h3><p>Available actions change automatically with bill status.</p></div><button (click)="store.refresh()">Refresh</button></div>
-            @if (data.eors.length) { <div class="eors"><h4>Explanation of Review</h4>@for (eor of data.eors; track eor.id) { <button (click)="openEor(eor.id,eor.filename)"><span><strong>{{ eor.filename }}</strong><small>{{ eor.description || 'Payer response' }}</small></span><b>View PDF</b></button> }</div> }
-            <div class="actionbar">@for (action of data.lifecycle.actions; track action.id) { @if (action.enabled) { <button [class.primary]="action.primary" (click)="beginAction(action.id)">{{ action.label }}</button> } }</div>
-            @if (panel === 'payment') { <div class="panel"><h4>Post payment</h4><div class="grid three"><label><span>Amount</span><input type="number" min="0.01" [(ngModel)]="payment.amount"></label><label><span>Method</span><select [(ngModel)]="payment.method"><option value="check">Check</option><option value="eft">EFT</option></select></label><label><span>Deposit date</span><input type="date" [(ngModel)]="payment.depositDate"></label></div><div class="actions"><button (click)="panel=''">Cancel</button><button class="primary" (click)="postPayment()">Post payment</button></div></div> }
-            @if (panel === 'review') { <div class="panel"><h4>Submit Second Review</h4><label><span>Reason</span><textarea [(ngModel)]="review.reason"></textarea></label><div class="grid two"><label><span>Payer control number</span><input [(ngModel)]="review.payerClaimControlNumber"></label><label><span>Disputed amount</span><input type="number" [(ngModel)]="review.disputedAmount"></label></div><div class="actions"><button (click)="panel=''">Cancel</button><button class="primary" (click)="submitReview()">Submit review</button></div></div> }
-            @if (panel === 'close') { <div class="panel"><h4>Close bill</h4><label><span>Reason</span><textarea [(ngModel)]="closeReason"></textarea></label><div class="actions"><button (click)="panel=''">Cancel</button><button class="danger" (click)="closeBill()">Close bill</button></div></div> }
-          </section>
-        }
-        @if (notice) { <div class="notice">{{ notice }}</div> }
-        @if (store.error()) { <div class="notice error">{{ store.error()?.message }}</div> }
-        <footer class="powered">Powered by MindBill</footer>
+        @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> }
       }
-      <datalist id="mb-states"><option value="CA"></option><option value="AZ"></option><option value="NV"></option><option value="OR"></option><option value="WA"></option><option value="TX"></option><option value="NY"></option></datalist>
     </section>
-  `, isInline: true, styles: [":host{display:block}.mb{--a:#238dbd;--ac:#fff;--bg:#f3f8fa;--s:#fff;--t:#203743;--m:#657982;--b:#dbe6ea;--r:12px;--cr:8px;display:grid;gap:16px;color:var(--t);font:14px/1.45 var(--font,Inter,system-ui,sans-serif)}*{box-sizing:border-box}h2,h3,h4,p{margin:0}.summary,.card,.delivery,.state{border:1px solid var(--b);border-radius:var(--r);background:var(--s)}.summary{display:flex;justify-content:space-between;gap:20px;padding:20px}.summary h2{font-size:24px}.summary p,.card p,.delivery p,small{color:var(--m)}.eyebrow{color:var(--m);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.money{text-align:right}.money span{display:block;font-size:28px;font-weight:800}.money small{font-size:12px}.review{display:grid;gap:16px}.card{padding:20px}.card-title{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:18px}.card-title h3,.delivery h3{font-size:18px}.card-title>span{border-radius:999px;background:var(--bg);padding:5px 9px;color:var(--m);font-size:11px;font-weight:800;text-transform:uppercase}.grid{display:grid;gap:14px}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}label{display:grid;gap:6px;color:var(--t);font-size:12px;font-weight:700}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;min-height:42px;border:1px solid var(--b);border-radius:var(--cr);background:#fff;color:var(--t);padding:9px 11px}textarea{min-height:90px;resize:vertical}button{min-height:38px;border:1px solid var(--b);border-radius:var(--cr);background:#fff;color:var(--t);padding:8px 13px;cursor:pointer;font-weight:700}button.primary{border-color:var(--a);background:var(--a);color:var(--ac)}button.danger{border-color:#d4380d;background:#d4380d;color:#fff}button:disabled{cursor:not-allowed;opacity:.5}.subhead{margin:18px 0 9px;border-top:1px solid var(--b);padding-top:15px;font-size:12px;font-weight:800}.selected{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--b);border-radius:var(--cr);padding:12px}.selected div{display:grid}.results{position:relative;z-index:3;display:grid;margin-top:5px;border:1px solid var(--b);border-radius:var(--cr);background:#fff;box-shadow:0 12px 30px #1f2d3d1f;overflow:hidden}.results button{display:grid;gap:2px;text-align:left;border:0;border-bottom:1px solid var(--b);border-radius:0;padding:12px}.results span{color:var(--m);font-weight:400}.presets{display:flex;gap:8px;margin:-4px 0 12px}.lines{display:grid;gap:10px}.line{display:grid;grid-template-columns:1.2fr 1.2fr 110px 120px 40px;align-items:end;gap:10px;border-radius:var(--cr);background:var(--bg);padding:12px}.line.professional{grid-template-columns:1.1fr 1fr 1fr 1fr 110px 1fr 90px 110px 40px}.allowed{display:grid;gap:7px;text-align:right}.allowed span{color:var(--m);font-size:11px;font-weight:800;text-transform:uppercase}.allowed strong{font-size:17px}.remove{border:0;background:transparent;font-size:20px}.docs{list-style:none;margin:0;padding:0}.docs li{display:flex;align-items:center;gap:8px;border-top:1px solid var(--b);padding:11px 0}.docs li>div{display:grid;flex:1}.upload{display:grid;grid-template-columns:240px 1fr auto;gap:10px;margin-top:12px;border-radius:var(--cr);background:var(--bg);padding:12px}.delivery{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px;background:color-mix(in srgb,var(--a) 5%,white)}.actions,.actionbar{display:flex;justify-content:flex-end;gap:8px}.lifecycle{display:grid;gap:16px}.actionbar{flex-wrap:wrap}.eors{display:grid;gap:8px}.eors>button{display:flex;align-items:center;justify-content:space-between;text-align:left}.eors span{display:grid}.panel{display:grid;gap:14px;border-top:1px solid var(--b);padding-top:16px}.notice,.state{padding:13px 15px}.notice{border-radius:var(--cr);background:#edf8f2;color:#23734c}.notice.error,.state.error{background:#fff2f0;color:#b42318}.state{display:grid;gap:10px}.state button{justify-self:start}.powered{text-align:right;color:var(--m);font-size:11px}.modal-backdrop{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;background:#0f20288f;padding:20px}.submit-modal{display:grid;gap:18px;width:min(680px,100%);max-height:calc(100vh - 40px);overflow:auto;border:1px solid var(--b);border-radius:var(--r);background:var(--s);padding:22px;box-shadow:0 24px 80px #0f202847}.submit-modal>header,.submit-modal>footer{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.submit-modal>footer{justify-content:flex-end}.submit-modal .close{border:0;background:transparent;font-size:26px}.route-list{display:grid;gap:8px}.route-option{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:12px;text-align:left;padding:13px}.route-option>span:nth-child(2){display:grid}.route-option.selected{border-color:var(--a);box-shadow:0 0 0 2px color-mix(in srgb,var(--a) 18%,transparent)}.route-option .radio{width:16px;height:16px;border:2px solid var(--b);border-radius:50%}.route-option.selected .radio{border:5px solid var(--a)}.route-option b{color:var(--a);font-size:11px;text-transform:uppercase}@media(max-width:1100px){.line.professional{grid-template-columns:repeat(3,minmax(0,1fr))}.line.professional .allowed{grid-column:auto}}@media(max-width:900px){.grid.four,.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.line{grid-template-columns:1fr 1fr 90px}.allowed{grid-column:1/-2;text-align:left}.upload{grid-template-columns:1fr}.delivery{align-items:stretch;flex-direction:column}.actions{justify-content:flex-start}}@media(max-width:600px){.summary,.card-title{align-items:stretch;flex-direction:column}.money{text-align:left}.grid.four,.grid.three,.grid.two,.line,.line.professional{grid-template-columns:1fr}.allowed{grid-column:auto}.docs li{align-items:flex-start;flex-wrap:wrap}.modal-backdrop{padding:8px}.submit-modal{max-height:calc(100vh - 16px);padding:16px}.route-option{grid-template-columns:20px 1fr}.route-option b{grid-column:2}}\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.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: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
+  `, isInline: true, styles: [":host{display:block}.mb{font-family:var(--font);color:var(--t);background:var(--bg);padding:20px}.summary,.card,.columns{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}}\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: "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: MindBillBillLifecycleComponent, decorators: [{
             type: Component,
             args: [{ selector: "mindbill-bill-lifecycle", standalone: true, imports: [CommonModule, FormsModule], template: `
     <section class="mb" [ngStyle]="themeStyle">
-      @if (store.loading() && !store.data()) {
+      @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 (click)="store.refresh()">Try again</button></div>
+        <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 (isEditable(data) && draft) {
-          <form class="review" (submit)="$event.preventDefault(); submit()">
-            <section class="card">
-              <div class="card-title"><div><h3>Patient and claim</h3><p>Prefilled from the case. Correct anything that should print differently on this bill.</p></div><span>Required</span></div>
-              <div class="grid four">
-                <label><span>First name</span><input required [(ngModel)]="draft.patient.firstName" name="firstName" (ngModelChange)="dirty=true"></label>
-                <label><span>Last name</span><input required [(ngModel)]="draft.patient.lastName" name="lastName" (ngModelChange)="dirty=true"></label>
-                <label><span>Date of birth</span><input type="date" [(ngModel)]="draft.patient.dob" name="dob" (ngModelChange)="dirty=true"></label>
-                <label><span>Date of injury</span><input type="date" [(ngModel)]="draft.injury.doi" name="doi" (ngModelChange)="dirty=true"></label>
-                <label><span>Claim number</span><input [(ngModel)]="draft.injury.claimNumber" name="claimNumber" (ngModelChange)="dirty=true"></label>
-                <label><span>Employer</span><input [(ngModel)]="draft.injury.employer" name="employer" (ngModelChange)="dirty=true"></label>
-                <label><span>WCAB / case number</span><input [(ngModel)]="draft.injury.adjNumber" name="adjNumber" (ngModelChange)="dirty=true"></label>
-                <label><span>Date of service</span><input required type="date" [(ngModel)]="draft.bill.dos" name="dos" (ngModelChange)="dirty=true"></label>
-              </div>
-            </section>
+        <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 payer">
-              <div class="card-title"><div><h3>Claims administrator</h3><p>Select who should receive this bill. Search uses payer names and claim-number patterns.</p></div><span>Required</span></div>
-              @if (draft.injury.claimsAdminId) { <div class="selected"><div><strong>{{ draft.injury.claimsAdminName }}</strong><small>Selected recipient</small></div><button type="button" (click)="clearPayer()">Change</button></div> }
-              @else {
-                <label><span>Insurance company or claims administrator</span><input name="payerSearch" [(ngModel)]="payerQuery" (ngModelChange)="queuePayerSearch()" placeholder="Search by payer or administrator name" autocomplete="off"></label>
-                @if (payerResults.length) { <div class="results">@for (payer of payerResults; track payer.id) { <button type="button" (click)="selectPayer(payer)"><strong>{{ payer.name }}</strong><span>{{ payerExplanation(payer) }}</span></button> }</div> }
-              }
-            </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>
 
-            <section class="card">
-              <div class="card-title"><div><h3>Billing identity</h3><p>The payee, rendering clinician, and place of service are bill snapshots—not synchronization records.</p></div><span>Prefilled</span></div>
-              <div class="subhead">Billing provider</div>
-              <div class="grid three">
-                <label><span>Practice name</span><input required [(ngModel)]="draft.billingProvider.name" name="practiceName" (ngModelChange)="dirty=true"></label>
-                <label><span>Tax ID</span><input required [(ngModel)]="draft.billingProvider.taxId" name="taxId" (ngModelChange)="dirty=true"></label>
-                <label><span>Billing NPI</span><input required [(ngModel)]="draft.billingProvider.npi" name="billingNpi" (ngModelChange)="dirty=true"></label>
-              </div>
-              <div class="subhead">Rendering clinician</div>
-              <div class="grid three">
-                <label><span>Name</span><input required [(ngModel)]="draft.clinician.name" name="clinicianName" (ngModelChange)="dirty=true"></label>
-                <label><span>NPI</span><input required [(ngModel)]="draft.clinician.npi" name="clinicianNpi" (ngModelChange)="dirty=true"></label>
-                <label><span>Taxonomy</span><input [(ngModel)]="draft.clinician.taxonomy" name="taxonomy" (ngModelChange)="dirty=true"></label>
-              </div>
-              <div class="subhead">Service location</div>
-              <div class="grid three">
-                <label><span>Location</span><input required [(ngModel)]="draft.location.name" name="locationName" (ngModelChange)="dirty=true"></label>
-                <label><span>Street</span><input required [(ngModel)]="draft.location.street" name="street" (ngModelChange)="dirty=true"></label>
-                <label><span>City</span><input required [(ngModel)]="draft.location.city" name="city" (ngModelChange)="dirty=true"></label>
-                <label><span>State</span><input required list="mb-states" maxlength="2" [(ngModel)]="draft.location.state" name="state" (ngModelChange)="dirty=true"></label>
-                <label><span>ZIP</span><input required [(ngModel)]="draft.location.zip" name="zip" (ngModelChange)="dirty=true"></label>
-                <label><span>Place of service</span><input required [(ngModel)]="draft.location.posCode" name="pos" (ngModelChange)="dirty=true"></label>
-              </div>
-            </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>Payer reported</dt><dd>{{ data.remittance.payerReportedPaid == null ? '—' : (data.remittance.payerReportedPaid | currency) }}</dd></div><div><dt>Posted</dt><dd>{{ data.remittance.totalPaid | 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>Charges</h3><p>{{ draft.bill.billingMode === 'professional' ? 'Enter each treatment or professional service.' : 'Choose medical-legal codes, modifiers, units, and allowed amounts.' }} A keyboard-ready row appears automatically.</p></div></div>
-              @if (draft.bill.billingMode === 'med_legal') {
-                <div class="presets"><button type="button" (click)="applyPreset('qme')">QME</button><button type="button" (click)="applyPreset('ame')">AME</button><button type="button" (click)="applyPreset('psych')">Psych QME</button></div>
-              }
-              <div class="lines">@for (line of draft.bill.lineItems; track $index; let i=$index) {
-                <div class="line" [class.professional]="draft.bill.billingMode === 'professional'">
-                  <label><span>Procedure</span>
-                    @if (draft.bill.billingMode === 'med_legal') {
-                      <select [(ngModel)]="line.code" [name]="'code'+i" (ngModelChange)="lineChanged()"><option value="">Choose code…</option>@for (code of medLegalCodes; track code) { <option [value]="code">{{ code }}</option> }</select>
-                    } @else { <input [(ngModel)]="line.code" [name]="'code'+i" (ngModelChange)="lineChanged()" placeholder="e.g. 99204"> }
-                  </label>
-                  <label><span>Modifiers</span><input [ngModel]="line.modifiers.join(', ')" (ngModelChange)="setModifiers(line,$any($event))" [name]="'modifiers'+i" placeholder="e.g. 25, 95"></label>
-                  @if (draft.bill.billingMode === 'professional') {
-                    <label><span>Service date</span><input type="date" [(ngModel)]="line.serviceDate" [name]="'serviceDate'+i" (ngModelChange)="lineChanged()"></label>
-                    <label><span>End date</span><input type="date" [(ngModel)]="line.serviceDateEnd" [name]="'serviceDateEnd'+i" (ngModelChange)="lineChanged()"></label>
-                    <label><span>Charge</span><input type="number" min="0" step="0.01" [(ngModel)]="line.charge" [name]="'charge'+i" (ngModelChange)="lineChanged()"></label>
-                    <label><span>Diagnosis pointers</span><input [ngModel]="(line.diagnosisPointers || []).join(', ')" (ngModelChange)="setDiagnosisPointers(line,$any($event))" [name]="'pointers'+i" placeholder="1, 2"></label>
-                  }
-                  <label><span>Units</span><input type="number" min="1" [(ngModel)]="line.units" [name]="'units'+i" (ngModelChange)="lineChanged()"></label>
-                  <div class="allowed"><span>{{ draft.bill.billingMode === 'professional' ? 'Charge' : 'Allowed' }}</span><strong>{{ line.charge | currency }}</strong></div>
-                  <button type="button" class="remove" (click)="removeLine(i)" aria-label="Remove line">×</button>
-                </div>
-              }</div>
-            </section>
+        <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>Payer packet</h3><p>Only these documents will be sent. Medical records are never attached unless selected intentionally.</p></div><span>{{ data.bill.attachments.length }} files</span></div>
-              <ul class="docs">@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><button type="button" (click)="removeAttachment(doc.id)">Remove</button></li> }</ul>
-              <div class="upload"><select [(ngModel)]="documentType" name="documentType">@for (type of documentTypes; track type.value) { <option [value]="type.value">{{ type.label }}</option> }</select><input #fileInput type="file" accept="application/pdf" (change)="fileSelected($event)"><button type="button" [disabled]="!pendingFile || store.mutating()" (click)="attach()">Attach document</button></div>
-            </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="delivery"><div><span class="eyebrow">Delivery</span><h3>Submit this bill</h3><p>Review the exact electronic, fax, email, or mail destination before anything is sent.</p></div><div class="actions"><button type="button" (click)="save()" [disabled]="store.mutating()">Save changes</button><button class="primary" type="button" (click)="openSubmit()" [disabled]="store.mutating() || deliveryBusy || !canSubmit()">{{ deliveryBusy ? 'Loading routes…' : 'Review delivery' }}</button></div></section>
+        <section class="card"><div class="card-title"><div><h3>Bill history</h3><p>Submission, payer responses, follow-up, and payments.</p></div><span>{{ data.activity.length }}</span></div><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 (showSubmit && deliveryOptions) {
-              <div class="modal-backdrop" (click)="closeSubmit()">
-                <section class="submit-modal" role="dialog" aria-modal="true" aria-labelledby="mb-submit-title" (click)="$event.stopPropagation()">
-                  <header><div><span class="eyebrow">Send bill</span><h3 id="mb-submit-title">Choose a delivery route</h3><p>{{ deliveryOptions.payerName }}</p></div><button type="button" class="close" (click)="closeSubmit()" aria-label="Close">×</button></header>
-                  <div class="route-list">@for (option of deliveryOptions.options; track option.route) {
-                    <button type="button" class="route-option" [class.selected]="submission.route === option.route" (click)="chooseDelivery(option)"><span class="radio"></span><span><strong>{{ option.label }}</strong><small>{{ option.detail }}</small></span>@if (option.route === deliveryOptions.recommended.route) { <b>Recommended</b> }</button>
-                  }</div>
-                  @if (selectedDelivery(); as option) {
-                    @if (option.route === 'fax') { <label><span>Fax number</span><input [ngModel]="submission.destination?.faxNumber || ''" (ngModelChange)="setDestination('faxNumber',$any($event))" name="submitFax"></label> }
-                    @if (option.route === 'email') { <label><span>Email address</span><input type="email" [ngModel]="submission.destination?.email || ''" (ngModelChange)="setDestination('email',$any($event))" name="submitEmail"></label><label><span>Subject</span><input [(ngModel)]="submission.subject" name="submitSubject"></label> }
-                    @if (option.route === 'mail') { <label><span>Mailing address</span><textarea [ngModel]="submission.destination?.mailingAddress || ''" (ngModelChange)="setDestination('mailingAddress',$any($event))" name="submitMail"></textarea></label> }
-                    @if (option.route !== 'ebill') { <label><span>Attention (optional)</span><input [(ngModel)]="submission.attention" name="submitAttention"></label> }
-                  }
-                  <footer><button type="button" (click)="closeSubmit()">Cancel</button><button type="button" class="primary" (click)="submit()" [disabled]="store.mutating() || !deliveryReady()">{{ store.mutating() ? 'Submitting…' : 'Submit bill' }}</button></footer>
-                </section>
-              </div>
-            }
-          </form>
-        } @else {
-          <section class="card lifecycle">
-            <div class="card-title"><div><h3>Billing activity</h3><p>Available actions change automatically with bill status.</p></div><button (click)="store.refresh()">Refresh</button></div>
-            @if (data.eors.length) { <div class="eors"><h4>Explanation of Review</h4>@for (eor of data.eors; track eor.id) { <button (click)="openEor(eor.id,eor.filename)"><span><strong>{{ eor.filename }}</strong><small>{{ eor.description || 'Payer response' }}</small></span><b>View PDF</b></button> }</div> }
-            <div class="actionbar">@for (action of data.lifecycle.actions; track action.id) { @if (action.enabled) { <button [class.primary]="action.primary" (click)="beginAction(action.id)">{{ action.label }}</button> } }</div>
-            @if (panel === 'payment') { <div class="panel"><h4>Post payment</h4><div class="grid three"><label><span>Amount</span><input type="number" min="0.01" [(ngModel)]="payment.amount"></label><label><span>Method</span><select [(ngModel)]="payment.method"><option value="check">Check</option><option value="eft">EFT</option></select></label><label><span>Deposit date</span><input type="date" [(ngModel)]="payment.depositDate"></label></div><div class="actions"><button (click)="panel=''">Cancel</button><button class="primary" (click)="postPayment()">Post payment</button></div></div> }
-            @if (panel === 'review') { <div class="panel"><h4>Submit Second Review</h4><label><span>Reason</span><textarea [(ngModel)]="review.reason"></textarea></label><div class="grid two"><label><span>Payer control number</span><input [(ngModel)]="review.payerClaimControlNumber"></label><label><span>Disputed amount</span><input type="number" [(ngModel)]="review.disputedAmount"></label></div><div class="actions"><button (click)="panel=''">Cancel</button><button class="primary" (click)="submitReview()">Submit review</button></div></div> }
-            @if (panel === 'close') { <div class="panel"><h4>Close bill</h4><label><span>Reason</span><textarea [(ngModel)]="closeReason"></textarea></label><div class="actions"><button (click)="panel=''">Cancel</button><button class="danger" (click)="closeBill()">Close bill</button></div></div> }
-          </section>
-        }
-        @if (notice) { <div class="notice">{{ notice }}</div> }
-        @if (store.error()) { <div class="notice error">{{ store.error()?.message }}</div> }
-        <footer class="powered">Powered by MindBill</footer>
+        @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> }
       }
-      <datalist id="mb-states"><option value="CA"></option><option value="AZ"></option><option value="NV"></option><option value="OR"></option><option value="WA"></option><option value="TX"></option><option value="NY"></option></datalist>
     </section>
-  `, styles: [":host{display:block}.mb{--a:#238dbd;--ac:#fff;--bg:#f3f8fa;--s:#fff;--t:#203743;--m:#657982;--b:#dbe6ea;--r:12px;--cr:8px;display:grid;gap:16px;color:var(--t);font:14px/1.45 var(--font,Inter,system-ui,sans-serif)}*{box-sizing:border-box}h2,h3,h4,p{margin:0}.summary,.card,.delivery,.state{border:1px solid var(--b);border-radius:var(--r);background:var(--s)}.summary{display:flex;justify-content:space-between;gap:20px;padding:20px}.summary h2{font-size:24px}.summary p,.card p,.delivery p,small{color:var(--m)}.eyebrow{color:var(--m);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.money{text-align:right}.money span{display:block;font-size:28px;font-weight:800}.money small{font-size:12px}.review{display:grid;gap:16px}.card{padding:20px}.card-title{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:18px}.card-title h3,.delivery h3{font-size:18px}.card-title>span{border-radius:999px;background:var(--bg);padding:5px 9px;color:var(--m);font-size:11px;font-weight:800;text-transform:uppercase}.grid{display:grid;gap:14px}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}label{display:grid;gap:6px;color:var(--t);font-size:12px;font-weight:700}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;min-height:42px;border:1px solid var(--b);border-radius:var(--cr);background:#fff;color:var(--t);padding:9px 11px}textarea{min-height:90px;resize:vertical}button{min-height:38px;border:1px solid var(--b);border-radius:var(--cr);background:#fff;color:var(--t);padding:8px 13px;cursor:pointer;font-weight:700}button.primary{border-color:var(--a);background:var(--a);color:var(--ac)}button.danger{border-color:#d4380d;background:#d4380d;color:#fff}button:disabled{cursor:not-allowed;opacity:.5}.subhead{margin:18px 0 9px;border-top:1px solid var(--b);padding-top:15px;font-size:12px;font-weight:800}.selected{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--b);border-radius:var(--cr);padding:12px}.selected div{display:grid}.results{position:relative;z-index:3;display:grid;margin-top:5px;border:1px solid var(--b);border-radius:var(--cr);background:#fff;box-shadow:0 12px 30px #1f2d3d1f;overflow:hidden}.results button{display:grid;gap:2px;text-align:left;border:0;border-bottom:1px solid var(--b);border-radius:0;padding:12px}.results span{color:var(--m);font-weight:400}.presets{display:flex;gap:8px;margin:-4px 0 12px}.lines{display:grid;gap:10px}.line{display:grid;grid-template-columns:1.2fr 1.2fr 110px 120px 40px;align-items:end;gap:10px;border-radius:var(--cr);background:var(--bg);padding:12px}.line.professional{grid-template-columns:1.1fr 1fr 1fr 1fr 110px 1fr 90px 110px 40px}.allowed{display:grid;gap:7px;text-align:right}.allowed span{color:var(--m);font-size:11px;font-weight:800;text-transform:uppercase}.allowed strong{font-size:17px}.remove{border:0;background:transparent;font-size:20px}.docs{list-style:none;margin:0;padding:0}.docs li{display:flex;align-items:center;gap:8px;border-top:1px solid var(--b);padding:11px 0}.docs li>div{display:grid;flex:1}.upload{display:grid;grid-template-columns:240px 1fr auto;gap:10px;margin-top:12px;border-radius:var(--cr);background:var(--bg);padding:12px}.delivery{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px;background:color-mix(in srgb,var(--a) 5%,white)}.actions,.actionbar{display:flex;justify-content:flex-end;gap:8px}.lifecycle{display:grid;gap:16px}.actionbar{flex-wrap:wrap}.eors{display:grid;gap:8px}.eors>button{display:flex;align-items:center;justify-content:space-between;text-align:left}.eors span{display:grid}.panel{display:grid;gap:14px;border-top:1px solid var(--b);padding-top:16px}.notice,.state{padding:13px 15px}.notice{border-radius:var(--cr);background:#edf8f2;color:#23734c}.notice.error,.state.error{background:#fff2f0;color:#b42318}.state{display:grid;gap:10px}.state button{justify-self:start}.powered{text-align:right;color:var(--m);font-size:11px}.modal-backdrop{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;background:#0f20288f;padding:20px}.submit-modal{display:grid;gap:18px;width:min(680px,100%);max-height:calc(100vh - 40px);overflow:auto;border:1px solid var(--b);border-radius:var(--r);background:var(--s);padding:22px;box-shadow:0 24px 80px #0f202847}.submit-modal>header,.submit-modal>footer{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.submit-modal>footer{justify-content:flex-end}.submit-modal .close{border:0;background:transparent;font-size:26px}.route-list{display:grid;gap:8px}.route-option{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:12px;text-align:left;padding:13px}.route-option>span:nth-child(2){display:grid}.route-option.selected{border-color:var(--a);box-shadow:0 0 0 2px color-mix(in srgb,var(--a) 18%,transparent)}.route-option .radio{width:16px;height:16px;border:2px solid var(--b);border-radius:50%}.route-option.selected .radio{border:5px solid var(--a)}.route-option b{color:var(--a);font-size:11px;text-transform:uppercase}@media(max-width:1100px){.line.professional{grid-template-columns:repeat(3,minmax(0,1fr))}.line.professional .allowed{grid-column:auto}}@media(max-width:900px){.grid.four,.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}.line{grid-template-columns:1fr 1fr 90px}.allowed{grid-column:1/-2;text-align:left}.upload{grid-template-columns:1fr}.delivery{align-items:stretch;flex-direction:column}.actions{justify-content:flex-start}}@media(max-width:600px){.summary,.card-title{align-items:stretch;flex-direction:column}.money{text-align:left}.grid.four,.grid.three,.grid.two,.line,.line.professional{grid-template-columns:1fr}.allowed{grid-column:auto}.docs li{align-items:flex-start;flex-wrap:wrap}.modal-backdrop{padding:8px}.submit-modal{max-height:calc(100vh - 16px);padding:16px}.route-option{grid-template-columns:20px 1fr}.route-option b{grid-column:2}}\n"] }]
+  `, styles: [":host{display:block}.mb{font-family:var(--font);color:var(--t);background:var(--bg);padding:20px}.summary,.card,.columns{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}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { billId: [{
                 type: Input
-            }], create: [{
-                type: Input
             }], sessionEndpoint: [{
                 type: Input
             }], apiBaseUrl: [{
@@ -661,16 +246,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], appearance: [{
                 type: Input
-            }], billIdChange: [{
-                type: Output
-            }], billCreated: [{
-                type: Output
-            }], submitted: [{
-                type: Output
             }], billingError: [{
                 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;
+}
+
 /**
  * Generated bundle index. Do not edit.
  */