Billing Blocks

A current-plan billing summary card with price, renewal, and usage.

A billing invoices card displaying a table of past invoices with invoice number, date, amount, a status badge, and a per-row download link.

Billing page with plan summary, usage bar, payment method card, and invoice history table

A usage metering dashboard card with progress bars for seats, storage, API requests, and bandwidth, a near-limit highlight, an estimated total, and a manage-plan action.

A payment-methods manager listing saved cards with a default badge, set-default and remove actions, and an add-card dialog.

An add-payment-method form card with name, card number, expiry, CVC, a country select, and a set-as-default switch.

Pro billing: a revenue console with a count-up outstanding-balance summary, a hairline metric strip, a past-due recovery banner, and an animated invoice ledger table with inlined customer marks, status pills, and pagination.

Pro billing: a plan catalog editor with three plan cards, per-seat pricing, feature and add-on rows, and Active/Public switches that surface an animated unsaved-changes banner with a live edit count.

Pro billing: a subscription catalog with three count-up recovery stat cards and a tab-filtered account table featuring inlined customer marks, health star ratings, owner avatar clusters, and animated radial readiness gauges.

Pro billing: a four-step invoice composer wizard with an animated stepper, blur cross-fade step transitions, form fields and selects, quantity steppers, and a running invoice total that counts up as line items, tax, and discount change.

Pro billing: a two-column change-plan flow with a radio tier picker on the left and a live proration preview on the right that recomputes the count-up amount due today, current-plan credit, and new-plan charge as the tier changes.

Pro billing: a recovery and dunning queue with three count-up metric cards, trend sparks, and accent meters over a past-due table whose rows expand to reveal an animated retry-attempt timeline with failure codes.

Pro billing: a coupons manager as an accordion of promo codes with usage meters and status badges that expand to an inline editor with a discount-type toggle, amount and limit inputs, a duration select, an unlimited switch, and an eligible-plans toggle group.

Pro billing: a customer billing detail view with an account header, a count-up balance due, a corner net mesh, a tabbed invoices panel with an empty state, and an animated account-activity timeline with a live pulse on the latest event.