MadBuilder
Probar la app ahora
Tipo de página

Timeline: toda tabla con fecha se vuelve una línea de tiempo.

Esta línea de tiempo lee las mismas 52 ventas de la app de ejemplo. Aparecen en orden de fecha, agrupadas por día, cada una con vendedor y forma de pago.

Las ventas más recientes, agrupadas por día

No escribes consultas. Apuntas la tabla y dices cuál campo es el título, cuál es el cuerpo y cuál es la fecha. La página ordena los registros, los agrupa por día y dibuja el riel.

Línea de tiempo de ventas agrupada por fecha, con cliente, valor, vendedor y forma de pago en cada entrada
Cada día gana un sello con la fecha, y cada venta muestra cliente y valor en el título, con vendedor, pago e ítems justo debajo.

Una etiqueta arma la página completa

En el código generado, la página cabe en una sola etiqueta. El mismo formato sirve para historial de pedidos, movimiento de inventario, auditoría y atención al cliente.

resources/views/…blade.php 
<mad-timelinemodel="Venda"title_field="titulo_timeline"   {{-- accessor: cliente + valor --}}body_field="resumo_timeline"    {{-- accessor: vendedor · pago · ítems --}}date_field="data_venda"color_field="status"date_format="d/m/Y":limit="14"cards />

Cuándo usar la timeline

La timeline sirve para contar la historia de algo: qué pasó, en qué orden y en qué día. Está hecha para leerse de arriba hacia abajo, sin columnas ni cuadrícula de días.

  • Historial del cliente. Pedidos, contactos y tickets en orden de fecha, para que quien atiende sepa qué ya pasó.
  • Movimiento de inventario. Entradas y salidas de un producto, cada una con su color.
  • Auditoría. Quién cambió qué y cuándo, con los cambios agrupados por día.
  • Seguimiento de pedido. Pagado, preparado, enviado: cada paso con su fecha y su ícono.

Si la persona necesita filtrar, ordenar por otras columnas o exportar, el listado es el tipo correcto. Si necesita ver la semana y el mes en cuadrícula, o cambiar la fecha arrastrando, usa el calendario. También puedes describir la timeline en español y pedírsela al agente de IA, que crea la página con el PHP y el Blade.

Lo que configuras

Todo queda en la misma etiqueta. Estos son los atributos del ejemplo y lo que cambia cada uno.

Tabla model
De dónde vienen las entradas. Aquí, la tabla de ventas.
Título y cuerpo title_field
El campo que se vuelve el título de cada entrada. El texto justo debajo viene de body_field.
Fecha date_field
El campo que ordena las entradas y decide en qué día se agrupa cada una. El formato del sello va en date_format.
Color color_field
El campo que da el color de cada entrada. Aquí, el estado de la venta.
Cantidad limit
Cuántas entradas muestra la página. El ejemplo se detiene en 14.
Tarjetas cards
Muestra cada entrada en una tarjeta. Sin él, la entrada queda en una línea simple.

Lo que va al proyecto Laravel

La timeline es una clase en app/Control con la vista <mad-timeline>. Los ítems pueden venir de tres lugares:

  • Título y cuerpo en accessors del model. En el ejemplo, titulo_timeline y resumo_timeline son accessors del model Venda. Uno junta cliente y valor, el otro junta vendedor, pago e ítems.
  • Ítems armados en PHP. Sin tabla, la lista sale de un método de la pantalla (:items="$that->timelineItems()"), con fecha, título, cuerpo, ícono y color de cada ítem.
  • Ítems escritos en la vista. Para una línea de tiempo fija, cada entrada es una etiqueta <mad-timeline-item>, con título, fecha e ícono.

Como toda pantalla de MadBuilder, esos archivos se abren en tu editor, van a tu Git y aceptan código a mano en bloques protegidos, que siguen ahí cuando la pantalla se genera de nuevo. Mira cómo se genera el código.

Preguntas sobre la timeline

¿Cualquier tabla se vuelve una timeline?

Cualquier tabla con un campo de fecha. Apuntas ese campo, el del título y el del cuerpo, y la página ordena las entradas y las agrupa por día.

¿La timeline carga todos los registros de una vez?

No hace falta. Limitas cuántas entradas aparecen, y la página puede cargar más cuando la persona lo pide. En este ejemplo, son las 14 ventas más recientes.

¿Cuál es la diferencia entre timeline y calendario?

El calendario muestra los eventos en una cuadrícula de días, con vistas de día, semana, mes y lista, y deja arrastrar para cambiar la fecha. La timeline es una lista en orden de fecha, agrupada por día, hecha para leer el historial.

Y más

Agrupa las entradas por fecha solaTarjetas o línea simple, tú eligesEntradas a los dos lados del riel, para historiales largosÍcono y color propios en cada entradaCarga más entradas cuando lo pidesÍtems escritos a mano, cuando los datos no vienen de una tablaTítulo y cuerpo que juntan varios campos, como cliente y valor

Mira también el Calendario o los tipos de página.

Crea la cuenta, arma una pantalla, descarga el proyecto.

Sin demo agendada ni llamada de descubrimiento. Si el Laravel que sale no pasa la revisión de tu equipo, perdiste una tarde.

Probar la app ahora Ver el código generado
  1. Crea la cuentaBeta abierta, sin tarjeta.
  2. Arma una pantallaEn el editor visual, en código o pidiéndoselo a la IA.
  3. Descarga el .zipUn proyecto Laravel que corre donde quieras.