Gantt Producción — Extensión Directus

Módulo personalizado para Directus que provee una vista interactiva de Diagrama de Gantt orientada a la gestión visual de órdenes de producción.

Descripción

Esta extensión agrega un módulo al panel de administración de Directus que permite visualizar y gestionar cronogramas de producción en formato Gantt. Está construida sobre la librería Frappe Gantt e integrada con Vue 3 y el SDK oficial de Directus.

Funcionalidades principales

• Visualización de órdenes de producción en formato Gantt
• Soporte para dependencias entre tareas
• Indicador de progreso por tarea (%)
• Colores personalizados por tarea (con oscurecimiento automático para la barra de progreso)
• Botón Hoy para navegar rápidamente a la fecha actual
• Múltiples modos de vista temporal:
  • Hora
  • Cuarto de Día
  • Medio Día
  • Día (por defecto)
  • Semana
  • Mes
  • Año
• Popup de detalle al hacer hover sobre cada tarea
• Resaltado automático de fines de semana
• Interfaz en español
• Integración con el sistema de temas de Directus (variables CSS)

Estructura del proyecto

gantt-produccion/
├── src/
│   ├── index.js                    # Punto de entrada del módulo Directus
│   ├── module.vue                  # Componente Vue principal
│   ├── assets/
│   │   ├── frappe-gantt-scoped.css # Estilos CSS con scope (.gantt-wrapper)
│   │   └── frappe-gantt.css        # Estilos CSS originales de Frappe Gantt
│   └── vendor/
│       └── frappe-gantt.mjs        # Librería Frappe Gantt empaquetada (ES Module)
├── dist/
│   └── index.js                    # Archivo compilado para producción
├── package.json
└── README.md

Requisitos

| Requisito | Versión mínima | |---|---| | Directus | ^11.15.1 | | Node.js | 18+ | | npm | 8+ |

Instalación

La extensión ya se encuentra instalada en el entorno del proyecto principal (/home/MES/extensions/gantt-produccion).

Para instalar manualmente en otro entorno Directus:

# Desde la carpeta de la extensión
npm install

# Compilar para producción
npm run build

# Copiar o vincular la carpeta al directorio de extensiones de Directus
cp -r . /ruta/a/directus/extensions/gantt-produccion

Directus detecta automáticamente extensiones en la carpeta extensions/ configurada en el .env del proyecto principal (EXTENSIONS_PATH).

Desarrollo

# Instalar dependencias
npm install

# Modo desarrollo con watch (sin minificación)
npm run dev

# Compilar para producción
npm run build

# Validar la extensión
npm run validate

Configuración del módulo

El módulo se registra en Directus con los siguientes parámetros (src/index.js):

{
  id: 'gantt-produccion',
  name: 'Gantt Producción',
  icon: 'box',
  routes: [{ path: '', component: ModuleComponent }]
}

Una vez activo, aparece en la barra lateral de Directus con el ícono box bajo el nombre Gantt Producción.

Estructura de datos de tareas

Cada tarea del diagrama tiene la siguiente estructura:

{
  id: '1',                        // Identificador único (string)
  name: 'Orden #101 - Corte',    // Nombre visible en el Gantt
  start: '2026-02-01',           // Fecha de inicio (formato YYYY-MM-DD)
  end: '2026-02-05',             // Fecha de fin (formato YYYY-MM-DD)
  progress: 60,                  // Porcentaje de avance (0-100)
  dependencies: '1',             // ID de tarea predecesora (opcional)
  color: '#4CAF50'               // Color hexadecimal de la barra (opcional)
}

Configuración del Gantt

La instancia de Frappe Gantt se inicializa con los siguientes parámetros en src/module.vue:

| Parámetro | Valor | Descripción | |---|---|---| | bar_height | 44 | Altura de las barras en px | | bar_corner_radius | 5 | Radio de borde de las barras | | view_mode | 'Day' | Modo de vista por defecto | | language | 'es' | Idioma español | | highlight_weekend | true | Resalta fines de semana | | scroll_to | 'today' | Desplaza a la fecha actual al cargar | | popup_on | 'hover' | Popup al pasar el mouse | | readonly | false | Permite editar fechas y progreso | | date_format | 'YYYY-MM-DD' | Formato de fechas de entrada |

Callbacks disponibles

La extensión expone dos callbacks en la configuración del Gantt para integrar cambios con la API de Directus:

on_date_change(task, start, end) {
  // Se ejecuta al arrastrar una barra para cambiar fechas
  // TODO: implementar PATCH a la API de Directus
}

on_progress_change(task, progress) {
  // Se ejecuta al ajustar el progreso de una tarea
  // TODO: implementar PATCH a la API de Directus
}

Nota: Actualmente estos callbacks solo registran en consola. La integración con la API de Directus está pendiente de implementar.

Integración con la API de Directus

Actualmente los datos del Gantt son estáticos (hardcodeados en module.vue). El siguiente paso es conectarlos a colecciones de Directus mediante el composable useApi():

import { useApi } from '@directus/extensions-sdk';
const api = useApi();

// Ejemplo: obtener órdenes de producción
const response = await api.get('/items/ordenes_produccion', {
  params: { fields: ['id', 'nombre', 'fecha_inicio', 'fecha_fin', 'progreso'] }
});

Tecnologías utilizadas

| Tecnología | Versión | Uso | |---|---|---| | Vue 3 | ^3.5.27 | Framework de componentes (Composition API) | | Frappe Gantt | bundled | Librería de diagrama Gantt (vendor) | | @directus/extensions-sdk | 17.0.7 | SDK oficial para extensiones Directus | | Sass | ^1.97.3 | Preprocesador CSS/SCSS |

Estado actual

| Funcionalidad | Estado | |---|---| | Visualización del Gantt | Funcionando | | Cambio de modo de vista | Funcionando | | Navegación a "Hoy" | Funcionando | | Colores personalizados por tarea | Funcionando | | Dependencias entre tareas | Funcionando | | Integración con temas Directus | Funcionando | | Conexión a API de Directus | Pendiente | | Guardar cambios de fechas vía API | Pendiente | | Guardar cambios de progreso vía API | Pendiente |

Seguridad

El módulo utiliza <private-view> de Directus, lo que garantiza que solo usuarios autenticados con los permisos correspondientes pueden acceder a la vista.

Autor

Desarrollado como extensión personalizada para el sistema MES (Manufacturing Execution System) del proyecto sol-ind.space.

Licencia

MIT