# Gift batches A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Education](https://beamline.io/components/apps/education) app. Live demo: https://beamline.io/components/gift-batches Gift batches between counting and the books: batches a counting team enters, each with the day the gifts were received (apart from when they were entered and committed), its defaults (fund, method) and the gifts that override them marked; batches gathered into a group and the group committed as one; totals by fund. A counter prepares, a bookkeeper commits after seeing what donors will see and whether receipts go (consequence-preview); a refused commit keeps every batch in progress, and receipts failing is said apart from the commit. Each gift's fund reads as a value (its own, or the batch default) and opens its own menu; the batch's defaults (fund, method, group) read as one line of values, each changed from its menu. ## Use it for - Gifts counted and entered in batches before they reach the books: a church's Sunday offering, a charity's mailed checks, a school's fundraiser envelopes. - Anywhere one role prepares records and another commits them, with what the commit reaches said before it runs. ## Not for - Taking one gift in person ([gift-desk](https://beamline.io/components/gift-desk)). - A shop's or a firm's ledger of invoices ([invoices](https://beamline.io/components/invoices)). - Approving one record at a time ([approval-card](https://beamline.io/components/approval-card)). ## Anatomy - header: the product's mark and the title - list (nav): In progress or Committed (segmented control); groups with their batches hanging under them, then the batches in no group; each with its gift count and total - sheet head: the batch's name, received, entered and committed days; or the group's batch and gift counts; the total - defaults (an open batch): fund, method and group (selects) - gifts (table): donor, amount, fund (a select: the batch default or one set on this gift, marked), method (batch default or set on this gift) - a group's batches: each with its received day, gift count and total - totals by fund (side): each fund's total with a hairline of its share, in ink - bar (sticky): Send receipts (switch) and Commit batch or Commit group (consequence-preview: donors who see it, receipts or none, gifts locked); for a counter, why the commit is a bookkeeper's ## States - uncommitted batch, grouped batch, defaults set, a row's override marked - counter review: the commit said as a bookkeeper's - bookkeeper commit: the preview, working, the receipt - committed: read only, the commit's day and who, the receipts' result - receipt disabled: no receipts sent, said - commit failure: every batch stays in progress - loading, no batches - phone: the list, then the batch with Back - right to left: the list's threads and the table mirror - reduced motion: through the tokens ## Keyboard - Tab through the list, the defaults, each gift's fund, the switch and the commit - Escape closes the commit preview ## Motion The tab's thumb slides; the commit preview opens and moves through working to its receipt (consequence-preview). Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `batches` | `GiftBatch[]` | — | | | `defaultBatches` | `GiftBatch[]` | — | | | `onBatchesChange` | `((batches: GiftBatch[]) => void)` | — | | | `groups` | `BatchGroup[]` | — | | | `funds` (required) | `BatchOption[]` | — | | | `methods` (required) | `BatchOption[]` | — | | | `role` | `"bookkeeper" \| "counter"` | — | "counter" prepares batches (defaults, overrides, groups) but cannot commit; "bookkeeper" commits. | | `onCommit` | `((batchIds: string[], options: { receipts: boolean; }) => Promise)` | — | Commit these batches atomically. Reject to keep them all in progress (said so). | | `open` | `string` | — | The open batch or group (`group:`). | | `defaultOpen` | `string` | — | Initial open state when uncontrolled; defaults to false. | | `onOpenChange` | `((id: string) => void)` | — | Reports an open-state change; no callback by default. | | `by` | `string` | — | Who is signed in, written on a commit. | | `currency` | `string` | — | | | `loading` | `boolean` | — | | | `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) - [Chip group](https://beamline.io/components/chip-group.md) - [Consequence preview](https://beamline.io/components/consequence-preview.md) - [Copy button](https://beamline.io/components/copy-button.md) - [Description list](https://beamline.io/components/description-list.md) - [Dropdown menu](https://beamline.io/components/dropdown-menu.md) - [Empty state](https://beamline.io/components/empty-state.md) - [Glow](https://beamline.io/components/glow.md) - [Kbd](https://beamline.io/components/kbd.md) - [Label](https://beamline.io/components/label.md) - [Pagination](https://beamline.io/components/pagination.md) - [Search field](https://beamline.io/components/search-field.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Skeleton](https://beamline.io/components/skeleton.md) - [Spinner](https://beamline.io/components/spinner.md) - [Switch](https://beamline.io/components/switch.md) - [Table](https://beamline.io/components/table.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { GiftBatches } from "@beamline/gift-batches"; ``` ## Get it Gift batches 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 Education - [Course builder](https://beamline.io/components/course-builder): Setting a course up. The learning path as ordered sets, each with its release rule in place (at once, a delay after the set before drawn as a bar you… - [Program modules](https://beamline.io/components/program-modules): A wellness or coaching program's modules as a practitioner builds them. The modules down the side with where each stands (draft, published at a revision… - [Question builder](https://beamline.io/components/question-builder): Questions built beside their material. A reading passage (imported, with an import pending or failed said with Try again, or pasted) whose words become… - [Grading desk](https://beamline.io/components/grading-desk): Grading a quiz or an assignment. The submissions down the side, not graded first, the open one beside its grade. A quiz attempt shows each question's… - [Course dashboard](https://beamline.io/components/course-dashboard): A course's staff view: its identity (draft or published, who may join, how it runs, its lessons) with Publish through your app, Preview as a learner and… - [Course home](https://beamline.io/components/course-home): A learner's course, week by week, in the cohort's time zone: each lesson done or not, a project's draft or submission, a reflection answered or not, a… - [Volunteer rota](https://beamline.io/components/volunteer-rota): Several plans side by side for the people who staff them: plans as columns, teams and their positions as rows, each cell the people scheduled with their… - [Gift desk](https://beamline.io/components/gift-desk): A gift or tickets taken in person, on a phone at an event or at a desk: the gift entered large in its currency, once or monthly (monthly said as an… 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).