{"_id":"@afernandez81/gantt-produccion","name":"@afernandez81/gantt-produccion","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@afernandez81/gantt-produccion","description":"Módulo Gantt para Directus - visualización interactiva de órdenes de producción (MES)","icon":"view_timeline","version":"1.0.0","license":"MIT","author":{"name":"afernandez81"},"repository":{"type":"git","url":""},"keywords":["directus","directus-extension","directus-extension-module","gantt","produccion","mes"],"type":"module","directus:extension":{"type":"module","path":"dist/index.js","source":"src/index.js","host":"^11.15.1"},"scripts":{"build":"directus-extension build","dev":"directus-extension build -w --no-minify","link":"directus-extension link","validate":"directus-extension validate"},"devDependencies":{"@directus/extensions-sdk":"17.0.7","sass":"^1.97.3","vue":"^3.5.27"},"_id":"@afernandez81/gantt-produccion@1.0.0","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-xo19Nl6aUB5jmQh09w5B5sZ2n5rDOL1J+2l+MMpzll4Op+K9HZbRiFA2gQUkPq44hFbichHm++B4YZlZ5/ITxA==","shasum":"bcf26664b5b2db3e4bc15ce42cf17b0076a9571b","tarball":"https://registry.npmjs.org/@afernandez81/gantt-produccion/-/gantt-produccion-1.0.0.tgz","fileCount":3,"unpackedSize":72522,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIB+Vf1RZS5GC+CuCKbjIPXeLFXw6oPHkjzuzSJ+dSCmBAiEAzQoxDRC5kfEB3cv90w9h7aInYL+4VZeJFGl0NxCLJws="}]},"_npmUser":{"name":"afernandez81","email":"sistemas.agf@gmail.com"},"directories":{},"maintainers":[{"name":"afernandez81","email":"sistemas.agf@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gantt-produccion_1.0.0_1775483849320_0.14329852110665042"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-06T13:57:29.202Z","1.0.0":"2026-04-06T13:57:29.446Z","modified":"2026-04-06T13:57:29.914Z"},"maintainers":[{"name":"afernandez81","email":"sistemas.agf@gmail.com"}],"description":"Módulo Gantt para Directus - visualización interactiva de órdenes de producción (MES)","keywords":["directus","directus-extension","directus-extension-module","gantt","produccion","mes"],"repository":{"type":"git","url":""},"author":{"name":"afernandez81"},"license":"MIT","readme":"# Gantt Producción — Extensión Directus\n\nMódulo personalizado para Directus que provee una vista interactiva de **Diagrama de Gantt** orientada a la gestión visual de órdenes de producción.\n\n---\n\n## Descripción\n\nEsta 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](https://frappe.io/gantt) e integrada con Vue 3 y el SDK oficial de Directus.\n\n### Funcionalidades principales\n\n- Visualización de órdenes de producción en formato Gantt\n- Soporte para dependencias entre tareas\n- Indicador de progreso por tarea (%)\n- Colores personalizados por tarea (con oscurecimiento automático para la barra de progreso)\n- Botón **Hoy** para navegar rápidamente a la fecha actual\n- Múltiples modos de vista temporal:\n  - Hora\n  - Cuarto de Día\n  - Medio Día\n  - Día *(por defecto)*\n  - Semana\n  - Mes\n  - Año\n- Popup de detalle al hacer hover sobre cada tarea\n- Resaltado automático de fines de semana\n- Interfaz en español\n- Integración con el sistema de temas de Directus (variables CSS)\n\n---\n\n## Estructura del proyecto\n\n```\ngantt-produccion/\n├── src/\n│   ├── index.js                    # Punto de entrada del módulo Directus\n│   ├── module.vue                  # Componente Vue principal\n│   ├── assets/\n│   │   ├── frappe-gantt-scoped.css # Estilos CSS con scope (.gantt-wrapper)\n│   │   └── frappe-gantt.css        # Estilos CSS originales de Frappe Gantt\n│   └── vendor/\n│       └── frappe-gantt.mjs        # Librería Frappe Gantt empaquetada (ES Module)\n├── dist/\n│   └── index.js                    # Archivo compilado para producción\n├── package.json\n└── README.md\n```\n\n---\n\n## Requisitos\n\n| Requisito | Versión mínima |\n|---|---|\n| Directus | ^11.15.1 |\n| Node.js | 18+ |\n| npm | 8+ |\n\n---\n\n## Instalación\n\nLa extensión ya se encuentra instalada en el entorno del proyecto principal (`/home/MES/extensions/gantt-produccion`).\n\nPara instalar manualmente en otro entorno Directus:\n\n```bash\n# Desde la carpeta de la extensión\nnpm install\n\n# Compilar para producción\nnpm run build\n\n# Copiar o vincular la carpeta al directorio de extensiones de Directus\ncp -r . /ruta/a/directus/extensions/gantt-produccion\n```\n\n> Directus detecta automáticamente extensiones en la carpeta `extensions/` configurada en el `.env` del proyecto principal (`EXTENSIONS_PATH`).\n\n---\n\n## Desarrollo\n\n```bash\n# Instalar dependencias\nnpm install\n\n# Modo desarrollo con watch (sin minificación)\nnpm run dev\n\n# Compilar para producción\nnpm run build\n\n# Validar la extensión\nnpm run validate\n```\n\n---\n\n## Configuración del módulo\n\nEl módulo se registra en Directus con los siguientes parámetros (`src/index.js`):\n\n```javascript\n{\n  id: 'gantt-produccion',\n  name: 'Gantt Producción',\n  icon: 'box',\n  routes: [{ path: '', component: ModuleComponent }]\n}\n```\n\nUna vez activo, aparece en la barra lateral de Directus con el ícono `box` bajo el nombre **Gantt Producción**.\n\n---\n\n## Estructura de datos de tareas\n\nCada tarea del diagrama tiene la siguiente estructura:\n\n```javascript\n{\n  id: '1',                        // Identificador único (string)\n  name: 'Orden #101 - Corte',    // Nombre visible en el Gantt\n  start: '2026-02-01',           // Fecha de inicio (formato YYYY-MM-DD)\n  end: '2026-02-05',             // Fecha de fin (formato YYYY-MM-DD)\n  progress: 60,                  // Porcentaje de avance (0-100)\n  dependencies: '1',             // ID de tarea predecesora (opcional)\n  color: '#4CAF50'               // Color hexadecimal de la barra (opcional)\n}\n```\n\n---\n\n## Configuración del Gantt\n\nLa instancia de Frappe Gantt se inicializa con los siguientes parámetros en `src/module.vue`:\n\n| Parámetro | Valor | Descripción |\n|---|---|---|\n| `bar_height` | 44 | Altura de las barras en px |\n| `bar_corner_radius` | 5 | Radio de borde de las barras |\n| `view_mode` | `'Day'` | Modo de vista por defecto |\n| `language` | `'es'` | Idioma español |\n| `highlight_weekend` | `true` | Resalta fines de semana |\n| `scroll_to` | `'today'` | Desplaza a la fecha actual al cargar |\n| `popup_on` | `'hover'` | Popup al pasar el mouse |\n| `readonly` | `false` | Permite editar fechas y progreso |\n| `date_format` | `'YYYY-MM-DD'` | Formato de fechas de entrada |\n\n---\n\n## Callbacks disponibles\n\nLa extensión expone dos callbacks en la configuración del Gantt para integrar cambios con la API de Directus:\n\n```javascript\non_date_change(task, start, end) {\n  // Se ejecuta al arrastrar una barra para cambiar fechas\n  // TODO: implementar PATCH a la API de Directus\n}\n\non_progress_change(task, progress) {\n  // Se ejecuta al ajustar el progreso de una tarea\n  // TODO: implementar PATCH a la API de Directus\n}\n```\n\n> **Nota:** Actualmente estos callbacks solo registran en consola. La integración con la API de Directus está pendiente de implementar.\n\n---\n\n## Integración con la API de Directus\n\nActualmente los datos del Gantt son estáticos (hardcodeados en `module.vue`). El siguiente paso es conectarlos a colecciones de Directus mediante el composable `useApi()`:\n\n```javascript\nimport { useApi } from '@directus/extensions-sdk';\nconst api = useApi();\n\n// Ejemplo: obtener órdenes de producción\nconst response = await api.get('/items/ordenes_produccion', {\n  params: { fields: ['id', 'nombre', 'fecha_inicio', 'fecha_fin', 'progreso'] }\n});\n```\n\n---\n\n## Tecnologías utilizadas\n\n| Tecnología | Versión | Uso |\n|---|---|---|\n| Vue 3 | ^3.5.27 | Framework de componentes (Composition API) |\n| Frappe Gantt | bundled | Librería de diagrama Gantt (vendor) |\n| @directus/extensions-sdk | 17.0.7 | SDK oficial para extensiones Directus |\n| Sass | ^1.97.3 | Preprocesador CSS/SCSS |\n\n---\n\n## Estado actual\n\n| Funcionalidad | Estado |\n|---|---|\n| Visualización del Gantt | Funcionando |\n| Cambio de modo de vista | Funcionando |\n| Navegación a \"Hoy\" | Funcionando |\n| Colores personalizados por tarea | Funcionando |\n| Dependencias entre tareas | Funcionando |\n| Integración con temas Directus | Funcionando |\n| Conexión a API de Directus | Pendiente |\n| Guardar cambios de fechas vía API | Pendiente |\n| Guardar cambios de progreso vía API | Pendiente |\n\n---\n\n## Seguridad\n\nEl módulo utiliza `<private-view>` de Directus, lo que garantiza que solo usuarios autenticados con los permisos correspondientes pueden acceder a la vista.\n\n---\n\n## Autor\n\nDesarrollado como extensión personalizada para el sistema MES (Manufacturing Execution System) del proyecto `sol-ind.space`.\n\n---\n\n## Licencia\n\nMIT\n","readmeFilename":"README.md","_rev":"1-fc543480117a69c073a67575f922dbdf"}