# Account ledger A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Clinic](https://beamline.io/components/apps/clinic) app. Live demo: https://beamline.io/components/account-ledger A patient's account. All transactions or the ones needing attention, each dated with its type in a word, its amount and the running balance; entries that belong together are gathered and shown on demand. Opening one shows what it is: a charge's patient and insurer estimate, adjustment, paid and still due; an adjustment reversed whole or code by code, each ticked when done, and blocked while later entries that depend on it aren't reversed (named); a receipt's method, the amount paid in apart from what's still unapplied, who recorded it, where it was applied, refunds, or that it's at a location you can't open. Reversing a receipt's allocations or deleting it lists what it undoes first, deletion needs a reason, and neither refunds the card. A payment request by text takes pending dues or another amount (never both), and sent is not paid. A refresh that fails keeps the rows that were loaded. What the patient owes leads as one figure, with what waits on insurance (and about what's left after it pays) and any credit paid in but not yet applied; each entry's type is a plain word. ## Use it for - A patient's or client's account: charges, payments, adjustments and insurance, with corrections. - Any ledger where reversals have an order and receipts must show what was paid apart from what was applied. ## Not for - Invoices sent to customers ([invoices](https://beamline.io/components/invoices)). - Purchase orders and their spend ([order-ledger](https://beamline.io/components/order-ledger)). ## Anatomy - header: the product's mark, the title and patient, balance, unapplied credit, insurance pending, request a payment - toolbar: all or needing attention, linked entries shown together, refresh - ledger: date, type, description with tags and the link button, amount, running balance - detail: charge figures; adjustment reversal (whole or by code, or what blocks it); receipt facts, allocations, refunds, reverse or delete with what it undoes - payment request sheet: phone, dues or another amount, total, message, send ## States - balance owed (warning), unapplied credit (info) - row: open, linked (info), reversed or deleted (struck), needs attention (warning) - adjustment: blocked by later entries (danger, named), code reversed (success tick), all reversed - receipt: restricted location said; correction impact (warning; delete danger), reason required to delete, done or refused - request: sent is not paid (said), refused (send again safely), amount must be above zero - refresh failed: the loaded rows kept, said with when - phone: one column, the detail first, the ledger scrolls sideways - right to left: the layout mirrors - reduced motion: nothing animates ## Keyboard - Tab through the toolbar, each row's description and link button, then the detail's actions; the request sheet traps focus and closes on Escape ## Motion The request sheet slides in from its edge. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `patient` (required) | `{ name: string; id: string; phones: string[]; }` | — | | | `entries` (required) | `LedgerEntry[]` | — | | | `credit` (required) | `number` | — | Minor units. | | `insurancePending` (required) | `number` | — | | | `defaultView` | `"all" \| "attention"` | — | | | `defaultSelected` | `string \| null` | — | | | `now` | `string` | — | | | `currency` | `string` | — | | | `onRefresh` | `(() => Promise)` | — | | | `onReverse` | `((entryId: string, code: string \| null) => Promise)` | — | Reverse an adjustment, or one code of it; reject with the reason. | | `onCorrect` | `((entryId: string, mode: "delete" \| "reverse", reason: string, key: string) => Promise<…` | — | Reverse a receipt's allocations or delete it; the key makes a retry safe. | | `onRequest` | `((request: PayRequest, key: string) => Promise)` | — | Send a text asking for a payment; the key makes a retry safe. Sent is not paid. | | `product` | `string` | — | Your product's name, shown as its mark. | | `className` | `string` | — | Classes on the documented visual root; no override by default. | | `ref` | `Ref` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [Avatar](https://beamline.io/components/avatar.md) - [Button](https://beamline.io/components/button.md) - [Checkbox](https://beamline.io/components/checkbox.md) - [Empty state](https://beamline.io/components/empty-state.md) - [Input](https://beamline.io/components/input.md) - [Label](https://beamline.io/components/label.md) - [Number field](https://beamline.io/components/number-field.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Sheet](https://beamline.io/components/sheet.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Textarea](https://beamline.io/components/textarea.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Import ```tsx import { AccountLedger } from "@beamline/account-ledger"; ``` ## Get it Account ledger is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Clinic - [Appointment book](https://beamline.io/components/appointment-book): The desk's day with the appointment editor beside it. The appointment being edited is a block on the day like any other, drawn in the accent while it is… - [Book an appointment](https://beamline.io/components/client-booking): A client books an appointment on the practice's own site: a service (length and price beside it), who gives it or anyone free, and where; a day with… - [Services and hours](https://beamline.io/components/booking-setup): A practice's services and the hours its practitioners can be booked, one relation seen from both ends. A service reads as values and changes on demand… - [Patient overview](https://beamline.io/components/patient-overview): One patient's record on a page. A search finds patients by name, chart number or birth date (recent patients when empty; same names told apart by birth… - [Patient chart](https://beamline.io/components/patient-chart): A clinic's chart for one client and their animals. The client's header (phone, email, contact preferences, the balance with what it means and as of when… - [Health questionnaire](https://beamline.io/components/health-questionnaire): A patient's medical history as a versioned questionnaire. Every question takes Yes, No or I don't know, and one not answered says so, never read as No; a… - [Case workspace](https://beamline.io/components/case-workspace): A patient's clinical cases and how cases work at the practice. A case shows its status, type, teeth, staff, location and start; its checklist counts… - [Care plan](https://beamline.io/components/care-plan): A client's care plan composed beside what the client will see of it. Every field says who sees it (the care team only, or the client too) and the… - [Treatment plan](https://beamline.io/components/treatment-plan): A patient's treatment plan in named phases. Each procedure shows its tooth, status and fee beside the patient's and the insurer's estimate (not known… - [Plan templates](https://beamline.io/components/plan-templates): Reusable treatment-plan templates. A template reads as words at rest and changes on demand: its name edits in place; the status its procedures start as… - [Plan acceptance](https://beamline.io/components/plan-acceptance): A treatment plan presented for acceptance, from both sides. The practice chooses the agreement (the account's default or this location's own) and how… - [Plan follow-up](https://beamline.io/components/plan-follow-up): The practice's follow-up lists, for the person who turns accepted treatment into booked chairs. Treatment plans lead with what's at stake: the value… - [Session notes and tasks](https://beamline.io/components/session-notes): A session's note beside its follow-up tasks, each task tied to the exact words it came from: choose a task and its words light in the note or the… - [Note templates](https://beamline.io/components/note-templates): A practitioner's note templates in one library with three ways in. My templates lists their own by kind, favourites first, each with when it was last… - [Probing chart](https://beamline.io/components/probing-chart): A periodontal probing chart. Six sites per tooth (three buccal, three lingual) across both arches as you face the patient, each depth in its cell and… - [Procedure picker](https://beamline.io/components/procedure-picker): Procedures, conditions and bundles put on a patient's teeth from the chair. The mode (existing, planned, completed) is chosen before adding and each… - [Results notebook](https://beamline.io/components/results-notebook): A notebook entry's structured results. The entry's text above a bounded results table with typed columns: a sample link, numbers in their unit with their… - [Insurance claims](https://beamline.io/components/claims-queue): Insurance claims as a queue: every claim at first, in the order a person works them (rejected by the clearinghouse, denied by the payer, partly paid, not… - [Dispensing](https://beamline.io/components/dispensing): Dispensing from the shelf by lot. A product is found with its stock and prices (consumables left out unless asked); the quantity is drawn across its… - [Record sharing](https://beamline.io/components/record-sharing): Records sent out of a clinic. Several visits' records and their documents (record, invoice, plan, lab result, image) are chosen separately, with how much… - [Client journal](https://beamline.io/components/client-journal): A client's journal from both ends. The client's side is their home, built around their day: today's goals with how many are done and a mark each, done… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).