Invoice Detail

🎬 Simulate:

Invoice & Billing

Invoice No: INV-2026-0047
Invoice Date: 2026-06-18 09:10
Learner Name: Bounmy Keodara
Learner Email: bounmy.keodara@example.com
Product: Basic Digital Skills · Lifetime

Billing Name: Bounmy Keodara
Billing Address: 123 Phonxai Road, Chanthabouly District Vientiane Capital 01001, Lao PDR
Contact Number: +856 20 5555 1234

Payment details

Amount: 500,000 LAK
Payment Channel: BCEL
Payment Date: 2026-06-18 09:14
Payment Reference: BCEL-REF-2026061800047
Payment Status: Pending

Status history

Changed At	Changed By	New Status	Comment
2026-06-18 09:14	System	Pending	Invoice created on payment initiation

← Back to Invoice List

Screen Flow (from uc-bil-10-manage-invoice.flow.puml):

← Back → Invoice Admin

📝 Spec notes — UC-BIL.10 / SCR-BIL.17 Invoice Detail (fields, actions, requirements)

Identity

Screen: SCR-BIL.17 — Invoice Detail
Use case: UC-BIL.10 — Manage Invoice

Brief description

Admin-facing Invoice Detail page supporting UC-BIL.10 Manage Invoice. Presents all information required for payment verification in one place. The Invoice & Billing section consolidates invoice identity (invoice number, issue date), learner identity (name, email), product purchased, and billing profile snapshot captured at checkout (billing name, address, contact number). The Payment details section shows transaction data (amount, payment channel, payment date, payment reference, current status). A chronological status change history provides the audit trail for any manual status corrections. The "Edit Payment Status" button opens the Edit Payment Status dialog (SCR-BIL.18). Accessed via "View Detail" on the Invoice Admin page (SCR-BIL.16).

Regions

Invoice & Billing — invoice identity, learner identity, product, and billing profile (name, address, contact)
Payment details — transaction data (amount, channel, date, reference, status)
Status history — chronological audit trail of all status changes

Fields (all read-only)

invoice_no "Invoice No" — text · lookup.Invoice.invoice_no · Invoice & Billing
invoice_date "Invoice Date" — datetime · lookup.Invoice.created_at · Invoice & Billing
learner_name "Learner Name" — text · lookup.User.full_name · Invoice & Billing
learner_email "Learner Email" — text · lookup.User.email · Invoice & Billing
product_name "Product" — text · lookup.Product.name · Invoice & Billing
billing_name "Billing Name" — text · lookup.BillingProfile.name · Invoice & Billing
billing_address "Billing Address" — textarea · lookup.BillingProfile.address · Invoice & Billing
billing_contact "Contact Number" — phone · lookup.BillingProfile.contact · Invoice & Billing
amount "Amount" — number · lookup.Invoice.amount · Payment details
payment_channel "Payment Channel" — text · lookup.Invoice.payment_channel · Payment details
payment_date "Payment Date" — datetime · lookup.Invoice.payment_date · Payment details
payment_reference "Payment Reference" — text · lookup.Invoice.payment_reference · Payment details
status "Payment Status" — enum (pending/paid/failed/cancelled) · lookup.Invoice.status · Payment details
history_changed_at "Changed At" — datetime · lookup.InvoiceStatusLog.changed_at · Status history
history_changed_by "Changed By" — text · lookup.InvoiceStatusLog.actor_name · Status history
history_new_status "New Status" — enum (pending/paid/failed/cancelled) · lookup.InvoiceStatusLog.new_status · Status history
history_comment "Comment" — text · lookup.InvoiceStatusLog.comment · Status history
history_empty_state — text · literal "No status changes recorded yet." · visible when history_count == 0 · Status history

Actions

edit_payment_status "Edit Payment Status" — always enabled · triggers UC-BIL.10-M-6 · opens SCR-BIL.18 modal
back "Back to Invoice List" — always enabled · navigates to SCR-BIL.16

Additional requirements

RBAC — Sale Admin (ACT-12) only; reject 403 and log a security event if the user lacks the required role. [refs: NFR-10]
TLS 1.2+; invoice PII (learner name, email, billing name, billing address, contact number) transmitted only over secure channel. [refs: NFR-03]
WCAG — all sections use semantic heading structure; status badge has text alternative; all controls keyboard-navigable. [refs: NFR-09]

↳ Embedded dialog: SCR-BIL.18 — Edit Payment Status Dialog

Brief description

Dialog overlaid on the Invoice Detail page (SCR-BIL.17) that allows Sale Admin to update the payment status of an invoice. The dialog operates in two phases: (1) Edit form — Sale Admin selects the new payment status from four options (Pending / Paid / Failed / Cancelled per SS-BIL.07) and enters a mandatory comment; (2) Confirmation view — a read-only summary of the pending change is displayed for final review before saving. Confirming saves the new status with a full audit record (new status, actor, timestamp, comment) and closes the dialog. Cancelling in either phase returns the user to the Invoice Detail page without any change.

Regions

Edit form (visible when dialog_phase == edit)
Confirmation (visible when dialog_phase == confirmation)

Fields

new_status "New Payment Status" — enum (pending/paid/failed/cancelled) · required · default: lookup.Invoice.status · visible when dialog_phase == edit · editable
comment "Comment" — textarea · required · min 1 / max 1000 · visible when dialog_phase == edit · editable
confirm_new_status "New Payment Status" — text · computed · visible when dialog_phase == confirmation · read-only
confirm_comment "Comment" — text · computed · visible when dialog_phase == confirmation · read-only

Actions

proceed_to_confirm "Confirm Change" — enabled when new_status != null && comment != '' && dialog_phase == edit · triggers UC-BIL.10-M-9
cancel_dialog "Cancel" — enabled when dialog_phase == edit · closes dialog
confirm_save "Confirm" — enabled when dialog_phase == confirmation · triggers UC-BIL.10-M-10
back_to_edit "Cancel" — enabled when dialog_phase == confirmation · triggers UC-BIL.10-A-10A-1

Additional requirements

RBAC — Sale Admin (ACT-12) only; dialog must reject 403 if the user session lacks the required role (inherits from parent page SCR-BIL.17). [refs: NFR-10]
TLS 1.2+; new status and comment transmitted only over secure channel. [refs: NFR-03]
WCAG — dialog traps focus on open; New Payment Status selector provides accessible description for each option; focus returns to "Edit Payment Status" button on dialog close; all controls keyboard-navigable. [refs: NFR-09]