Bloques y plantillas

La pantalla de entrada de una aplicación de gestión: las cifras del periodo con su variación, los ingresos de cada mes, las últimas facturas y lo último que ha pasado. Es lo que se mira cada mañana, así que cada factura se puede pulsar para ir a ella.

Lleva: PageHeader, Stat, BarChart, Table, History, Tag, Amount, Card y Grid.

Datos: todo llega por props; el bloque no pide nada a ningún servidor.

Todos los clientes en una tabla que se busca, se filtra por estado, se ordena y se pagina, con selección de varios para actuar sobre ellos a la vez. Sin clientes todavía, enseña cómo dar de alta el primero en vez de una tabla vacía.

Lleva: PageHeader, TextField, SegmentedGroup, Table, Tag, Amount, Button y EmptyState.

Búsqueda: por nombre, NIF o correo, sin distinguir mayúsculas ni acentos.

El formulario para dar de alta (o editar) un cliente: particular o empresa, NIF con su letra comprobada, correo, teléfono, dirección, IBAN y forma de pago. Valida con un esquema que el bloque exporta (customerSchema), el mismo que tiene que usar el servidor.

Lleva: Form, FormTextField, FormDocumentField, FormPhoneField, FormAddressField, FormIbanField, FormSelect, FormRadioGroup, FormTextArea, SubmitButton y Card.

Necesita react-hook-form y zod en el proyecto.

Todo lo de un cliente en una pantalla: lo que ha facturado y lo que debe, sus datos, sus facturas y lo que ha pasado con él, en pestañas para no tener que bajar. Desde aquí se edita y se le hace una factura nueva.

Lleva: PageHeader con migas, Stat, Tabs, DataList, Table, History, Tag, Amount, Button y Grid.

Hacer una factura de principio a fin: cliente, fechas de emisión y vencimiento, forma de pago, líneas con IVA, descuento y retención, y el total calculado mientras se escribe. Se guarda como borrador o se emite, y emitir pide confirmación porque una factura emitida ya no se borra: se rectifica.

Lleva: Combobox, DatePicker, Select, InvoiceLinesEditor, TextArea, ConfirmAction, Alert, Button y Card.

Fechas: entran y salen como texto AAAA-MM-DD, sin hora ni zona.

Los ajustes de la cuenta en secciones: perfil, avisos por correo, idioma y tema, y una zona peligrosa para borrar la cuenta. «Guardar cambios» solo se enciende cuando hay algo que guardar, y deshacer vuelve a lo guardado.

Lleva: Tabs, Card, TextField, Switch, Select, SegmentedGroup, ConfirmAction, Alert y Button.

Tema: lo aplica con applyTheme en cuanto se guarda, y queda recordado en este navegador.

Entrar con correo y contraseña: los dos campos con su autocompletado del navegador, recordar la sesión, el enlace para recuperar la contraseña y el error del servidor en su sitio. Mientras se comprueba, el botón espera y no deja enviar dos veces.

Lleva: Card, TextField, PasswordField, Checkbox, Button, Link y Alert.

Seguridad: el bloque no guarda la contraseña en ningún sitio; la manda a onSubmit y la olvida.