# Benefit changes A React block (a whole screen) in [Beamline](https://beamline.io/)'s [HR & payroll](https://beamline.io/components/apps/hr-payroll) app. Live demo: https://beamline.io/components/benefit-changes An employee's benefit changes after a life event. The centre puts their turn first: each task (a proof to upload, with its deadline in the warning tint when close and the danger tint when past) tied to the request it belongs to, uploaded in place; then their requests, each with its state and who acts next (you, HR by name, the insurer), opening to its dates and lines; "Start a change" becomes "Open your pending request" while one is open; their coverage now stays said as theirs until a change is confirmed. The change runs in four steps: what happened and when (an event past the usual window said, not blocked; a future one said), its proof uploaded now or left as a task, each coverage line kept, changed (plan, who it covers) or dropped, and the review keeping four dates apart (the event, sent, would take effect, confirmed: not yet), a kept line said as a deliberate choice; sending makes a request, never coverage. ## Use it for - An employee changing benefits after a marriage, a birth, a move or lost coverage, and following the request after. - Any request flow where what the person must do next and who acts after them both need saying. ## Not for - Choosing plans in open enrolment ([plan-comparison](https://beamline.io/components/plan-comparison)). - An employer's payroll cycles ([payroll-cycles](https://beamline.io/components/payroll-cycles)). - A generic multi-step form ([step-form](https://beamline.io/components/step-form)). ## Anatomy - header: the product's mark, the title, Start a change or Open your pending request - your turn: each task with the request it's for, its deadline, an upload - your requests: each with the event and date, who acts next, its state; open: the event, sent, would take effect, confirmed, proof, each line - your coverage now - change: back to the centre, the steps; what happened (cards) and when; proof (upload, or later); each line kept, changed or dropped with plan and who it covers; the review; Back, Next, Send the request ## States - tasks: none, due later, due soon (warning), late (danger), uploading, done - a request: requested, needs something from you, approved (confirmed date), declined - a pending request open: Start a change becomes Open your pending request - event: within the window, past it (said, not blocked), in the future (said) - proof: uploaded, left for later (becomes a task) - a line: kept (said as a choice), changed, dropped - sending, sent (requested, next actor said), refused (all kept) - phone: one column - right to left: mirrors ## Keyboard - Tab through Start, each task's upload, each request (Enter opens it); in the change, the cards, the date, the upload, each line's choice and fields, Back, Next and Send ## Motion None of its own. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `lines` (required) | `CoverageLine[]` | — | The employee's coverage now. | | `requests` | `ChangeRequest[]` | — | | | `tasks` | `BenefitTask[]` | — | | | `today` (required) | `string` | — | Today, an ISO date. | | `windowDays` | `number` | — | Days after an event a change is normally accepted. Default 30. | | `onSubmit` | `((draft: ChangeDraft) => Promise)` | — | Send a change; resolve with the request as recorded (requested, never covered). | | `onUpload` | `((file: File) => Promise)` | — | Upload one proof file while making a change. | | `onTaskUpload` | `((taskId: string, file: File) => Promise)` | — | Upload what a task asks for; resolve with the request as it now stands. | | `defaultFlow` | `boolean` | — | | | `defaultDraft` | `(Partial & { step?: number \| undefined; })` | — | Where the change starts when it opens at once: what's chosen so far and the step. | | `defaultOpen` | `string \| null` | — | Initial open state when uncontrolled; defaults to false. | | `product` | `string` | — | | | `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) - [Calendar](https://beamline.io/components/calendar.md) - [Copy button](https://beamline.io/components/copy-button.md) - [Date picker](https://beamline.io/components/date-picker.md) - [Description list](https://beamline.io/components/description-list.md) - [Empty state](https://beamline.io/components/empty-state.md) - [File drop zone](https://beamline.io/components/file-dropzone.md) - [Label](https://beamline.io/components/label.md) - [Radio cards](https://beamline.io/components/radio-cards.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Spinner](https://beamline.io/components/spinner.md) - [Stepper](https://beamline.io/components/stepper.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { BenefitChanges, LIFE_EVENTS } from "@beamline/benefit-changes"; ``` ## Get it Benefit changes 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 HR & payroll - [Shift planner](https://beamline.io/components/shift-planner): A workplace's week of staff shifts against what it needs: a row per person with their week's hours against their contract, each day a 24-hour track with… - [Shift rotations](https://beamline.io/components/shift-rotations): Rotating shift patterns from pattern to people: a pattern of one to four weeks painted day by day with a shift template, a rest day or nothing (pick the… - [Roster publishing](https://beamline.io/components/roster-publish): The week's roster before it goes out: areas down the side and days across, each shift a chip with who works it and its hours, its state its tone (not… - [My shift](https://beamline.io/components/my-shift): The worker's own shift on their phone: today drawn to scale (the plan's areas as blocks on an hour axis, under them what was worked: on-plan time in… - [Timesheet review](https://beamline.io/components/timesheet-review): Timesheets for a manager: the day's counts at the head (scheduled, on shift, late, on break, to approve), the ones that filter being buttons, an… - [Hours ledger](https://beamline.io/components/hours-ledger): One worker's pay cycle of shifts, for the worker or their payroll admin: the wall-clock span and the paid hours as separate columns, a night shift… - [Payroll run](https://beamline.io/components/payroll-run): A pay period from report to submission, one payroll account at a time (a worker on two accounts is on both runs, never combined): the workers on one… - [Payroll cycles](https://beamline.io/components/payroll-cycles): The client's side of an outsourced payroll across countries: every entity's current cycle on one board, its stage drawn as steps, the one thing that… - [Payroll approvals](https://beamline.io/components/payroll-approvals): Payroll approvals for a company paying through a payroll provider. Expenses are split by whose move it is (you, another approver, the employee answering… - [Hiring pipeline](https://beamline.io/components/hiring-pipeline): A recruiting team's pipeline across every open job. Stage groups (reviewing, interviewing, closing) are counted across jobs above job sections that fold… - [Recruiter home](https://beamline.io/components/recruiter-home): A recruiter's own work, in one place. Upcoming interviews with who sits in, today's first; feedback owed, overdue first and on the danger tone, written… - [Stage reports](https://beamline.io/components/stage-reports): Reports on how applications move through stages, built from each application's stage intervals. By week: applications present in each stage (or from each… - [Link booking](https://beamline.io/components/link-booking): A candidate's booking link for one stage of one job: a column with the job, the stage's length, who they meet (each with their role), where and what the… - [Team & members](https://beamline.io/components/team-members): The people page of a workspace: seats used against the plan, members and pending invitations in one list with search and a role filter, role changes that… 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).