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.

La pantalla para crear una cuenta: nombre, correo y contraseña escrita dos veces, con la fuerza de la contraseña a la vista. Cada campo dice lo que falta antes de enviar, el motivo del servidor (el correo ya existe) sale arriba sin perder lo escrito y no deja enviar dos veces. Con termsHref pide aceptar las condiciones de uso.

Lleva: Card, Center, Container, Stack, Title, TextField, PasswordField, Checkbox, Alert, Button, Link y Text.

Contraseña: mínimo de 8 caracteres; el servidor tiene que volver a comprobarlo.

Todas las facturas en una tabla que se busca, se filtra por estado, se ordena, se pagina y se exporta, con las cifras de lo pendiente de cobro y lo vencido arriba. Se puede marcar varias para actuar sobre ellas a la vez y pulsar una para abrirla. Sin facturas todavía, enseña cómo emitir la primera en vez de una tabla vacía.

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

Búsqueda: por número o cliente, sin distinguir mayúsculas ni acentos.

Quién tiene acceso y con qué rol: cada persona con su rol, que se cambia al momento, la opción de quitarle el acceso con confirmación y un formulario para invitar a alguien nuevo con el rol que se elija. A quien es propietario no se le puede cambiar el rol ni quitar. Sin nadie todavía, enseña cómo invitar a la primera persona.

Lleva: PageHeader, UserRoleEditor, Card, TextField, Select, Button, EmptyState y Text.

Permisos: el bloque solo pinta; que quien cambia un rol pueda hacerlo lo tiene que comprobar el servidor.

La comparativa de planes de un servicio: se elige pagar cada mes o cada año, los precios cambian al momento y cada plan tiene su botón. Avisa de lo que se ahorra pagando el año entero, marca el plan recomendado con texto y deja el plan que ya se tiene como «Tu plan», sin botón. Debajo, lo que incluye cada plan fila a fila.

Lleva: PageHeader, SegmentedGroup, PricingTable, Tag y Button.

Precios: el bloque no calcula descuentos; cada plan trae su precio mensual y el del año entero.