Tipo de página

Gantt: una tabla de tareas se vuelve cronograma.

Este cronograma corre en la app de ejemplo, publicada en la Prueba online. Son 14 tareas de la implantación de un CRM, con fases, subtareas, progreso y responsable, todo leído de una tabla común.

La implantación del CRM en tres meses

A la izquierda están las fases, cada una con sus subtareas. A la derecha, las barras con el progreso, la línea roja de hoy y un minimapa. El pie resume el proyecto: 14 tareas, progreso promedio de 48%.

Diagrama de Gantt de la implantación del Mini CRM, con fases, subtareas, responsables y progreso — La implantación cabe en tres meses, con fases que se abren y se cierran, progreso en cada barra y la línea del día actual.

Los campos de la tarea y las columnas de la lista

Apuntas la tabla y los campos de nombre, inicio, fin, tarea padre y progreso. Después eliges las columnas de la lista lateral. Lo demás ya viene listo.

resources/views/…blade.php

<mad-ganttmodel="ProjetoTarefa"name-field="nome" start-field="inicio" end-field="fim"parent-field="parent_id" progress-field="progresso"color-field="cor" owner-field="responsavel"order-by="ordem" interval="90"striped-rows show-minimap><mad-gantt-column field="name"     label="Tarea"       width="300" tree /><mad-gantt-column field="owner"    label="Responsable" width="150" /><mad-gantt-column field="progress" label="%"           width="70" align="center" /></mad-gantt>

Cinco niveles de zoom, de la hora al año

Ves el proyecto por hora, día, semana, mes o año. Buscas una tarea con ⌘K, vuelves a hoy con un botón y resaltas la ruta crítica con un clic.

El mismo cronograma de Gantt con zoom por semana, con el nombre y el porcentaje dentro de cada barra — El mismo cronograma con zoom por semana, con la regla de tiempo marcando de la S28 a la S35.

Cuándo usar el Gantt

El Gantt sirve cuando el trabajo tiene inicio, fin y orden, y el atraso de una tarea empuja a las demás. Muestra el plazo de todo el proyecto y dónde puede deslizarse.

Implantación de sistemas. Como en este ejemplo, fases con subtareas, responsable y progreso.
Obras y remodelaciones. Etapas que dependen unas de otras, con los días hábiles y los feriados marcados en el cronograma.
Lanzamiento de producto. La ruta crítica muestra qué atrasos cambian la fecha final.
Producción por encargo. El panel de carga muestra quién tiene demasiadas horas en el día.

Si las tareas no dependen unas de otras y solo importa la etapa de cada una, el kanban es más simple. Para compromisos con día y hora, usa el calendario. El Gantt se arma en el editor visual, con dependencias, ruta crítica y línea base.

Lo que configuras

Además de los campos de la tarea, el cronograma tiene atributos para la planificación y para el calendario de trabajo.

Dependencias <mad-gantt-dependencies>: La tabla que une las tareas, con los cuatro tipos de enlace (fin-inicio, inicio-inicio, fin-fin e inicio-fin) y un intervalo entre ellas.
Reprogramación auto-schedule: Cuando mueves una tarea, las que dependen de ella se mueven junto con ella.
Ruta crítica critical-path: Resalta en rojo las tareas sin holgura, las que atrasan el proyecto si se atrasan.
Línea base <mad-gantt-baseline>: Informa el inicio y el fin planificados de cada tarea, para comparar lo planificado con lo real.
Días hábiles working-days: Los días que cuentan como trabajo, de lunes a viernes por defecto. Cada feriado entra como una fecha (<mad-gantt-holiday>).
Zoom y ventana zoom: El zoom con el que se abre el cronograma, día por defecto. interval define cuántos días aparecen al inicio, 90 en este ejemplo.

Lo que va al proyecto Laravel

El Gantt viene en par, el cronograma y el registro de tareas, cada uno con su clase en app/Control y su vista Blade. El cronograma habla con tu PHP así:

Cada gesto llama a un método tuyo. El cronograma avisa a la pantalla cuando alguien hace clic en una tarea (on-task-click), mueve o estira una barra (on-task-update) o crea una dependencia (on-dependency-create).
Botones en el encabezado. <mad-gantt-header-action> pone un botón arriba del cronograma que llama a un método PHP, como onAddTask, o abre otra pantalla.
El árbol viene de un campo. Fases y subtareas salen del campo de tarea padre (parent-field), y la columna marcada con tree abre y cierra cada fase en la lista lateral.

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 el Gantt

¿El Gantt funciona con mi tabla de tareas?

Funciona con una tabla común. Apuntas los campos de nombre, inicio y fin y, como en este ejemplo, los de tarea padre, progreso, color y responsable. Las dependencias quedan en una tabla aparte.

¿Se puede editar la tarea sin salir del Gantt?

Sí. Un doble clic en una celda de la lista lateral edita ahí mismo. Y el clic en la tarea puede abrir el formulario de tareas, que viene junto con este tipo de página.

¿El Gantt muestra quién está sobrecargado?

Sí, si activas el panel de carga. A partir de una tabla de asignaciones, con tarea, persona y horas, dibuja debajo del cronograma las horas de cada responsable por día y resalta la sobrecarga.

Y más

Flechas que unen las tareas que dependen unas de otrasMover una tarea empuja a las que dependen de ellaRuta crítica resaltadaComparación entre lo planificado y lo realPanel con la carga de trabajo de cada recursoDoble clic en la lista lateral para editar ahí mismoTu código PHP corre cuando alguien mueve, estira o enlaza tareas

Mira también la Timeline 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

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