Blocks and templates

The landing screen of a management app: the period's figures with their change, revenue per month, the latest invoices and the latest activity. It is what people check every morning, so every invoice can be pressed to open it.

Uses: PageHeader, Stat, BarChart, Table, History, Tag, Amount, Card and Grid.

Data: everything comes in through props; the block does not call any server.

Every customer in a table that can be searched, filtered by status, sorted and paginated, with multiple selection to act on several at once. With no customers yet, it shows how to add the first one instead of an empty table.

Uses: PageHeader, TextField, SegmentedGroup, Table, Tag, Amount, Button and EmptyState.

Search: by name, tax ID or email, ignoring case and accents.

The form to add (or edit) a customer: individual or company, tax ID with its check letter verified, email, phone, address, IBAN and payment terms. It validates with a schema the block exports (customerSchema), the same one the server must use.

Uses: Form, FormTextField, FormDocumentField, FormPhoneField, FormAddressField, FormIbanField, FormSelect, FormRadioGroup, FormTextArea, SubmitButton and Card.

Needs react-hook-form and zod in the project.

Everything about a customer on one screen: what they have been invoiced and what they owe, their details, their invoices and their history, in tabs so there is no scrolling. From here they can be edited or sent a new invoice.

Uses: PageHeader with breadcrumbs, Stat, Tabs, DataList, Table, History, Tag, Amount, Button and Grid.

Making an invoice from start to finish: customer, issue and due dates, payment method, lines with VAT, discount and withholding, and the total worked out while typing. It is saved as a draft or issued, and issuing asks for confirmation because an issued invoice is never deleted: it is corrected.

Uses: Combobox, DatePicker, Select, InvoiceLinesEditor, TextArea, ConfirmAction, Alert, Button and Card.

Dates: they go in and out as YYYY-MM-DD text, with no time or time zone.

Account settings in sections: profile, email notifications, language and theme, and a danger zone to delete the account. «Save changes» only turns on when there is something to save, and undo goes back to what was saved.

Uses: Tabs, Card, TextField, Switch, Select, SegmentedGroup, ConfirmAction, Alert and Button.

Theme: it is applied with applyTheme as soon as it is saved, and remembered in this browser.

Signing in with email and password: both fields with the browser's autofill, remember me, the link to recover the password and the server error where it belongs. While checking, the button waits and does not allow sending twice.

Uses: Card, TextField, PasswordField, Checkbox, Button, Link and Alert.

Security: the block does not store the password anywhere; it hands it to onSubmit and forgets it.