Merge branch 'master' into dev

README.md

@@ -1,6 +1,6 @@
 # Cronogramas PrimeNG Application
 
-Este proyecto es una aplicación Angular 19 utilizando PrimeNG para la gestión de cronogramas.
+Este proyecto es una aplicación Angular 19 utilizando PrimeNG para la gestión de cronogramas de concesiones.
 
 ## Instalación
 
@@ -25,6 +25,8 @@ Este proyecto es una aplicación Angular 19 utilizando PrimeNG para la gestión
    npm install
    ```
 
+   > **Importante**: Durante la instalación, se ejecutará automáticamente el script `setup-project.js` (definido como `postinstall` en package.json) que solicitará el nombre del nuevo proyecto para personalizar la configuración.
+
 3. **Iniciar el Servidor de Desarrollo**
 
    ```bash
@@ -33,7 +35,7 @@ Este proyecto es una aplicación Angular 19 utilizando PrimeNG para la gestión
 
    La aplicación estará disponible en `http://localhost:4200/`
 
-### Dependencias Principales
+## Dependencias Principales
 
 El proyecto utiliza las siguientes bibliotecas clave:
 
@@ -57,16 +59,66 @@ El proyecto utiliza las siguientes bibliotecas clave:
   npm install primeicons
   ```
 
+- **PDFMake 0.2.19**: Para generación de PDFs
+  ```bash
+  npm install pdfmake @types/pdfmake
+  ```
+
 - **ExcelJS 4.4.0**: Para exportación a Excel
   ```bash
   npm install exceljs
   ```
 
-- **File-Saver 2.0.5**: Para guardar archivos en el cliente
+- **File-Saver 2.5.0**: Para guardar archivos en el cliente
   ```bash
   npm install file-saver @types/file-saver
   ```
 
+- **Animate.css 4.1.1**: Para animaciones CSS
+  ```bash
+  npm install animate.css
+  ```
+
+## Configuración del Proyecto
+
+### Script de Configuración (setup-project.js)
+
+El proyecto incluye un script de configuración post-instalación (`setup-project.js`) que se ejecuta automáticamente después de `npm install`. Este script realiza las siguientes tareas:
+
+1. Solicita el nombre del nuevo proyecto
+2. Actualiza package.json con el nuevo nombre
+3. Modifica angular.json para actualizar todas las referencias al nombre del proyecto
+4. Actualiza el título en src/index.html
+
+Este script facilita la reutilización del template para crear nuevos proyectos basados en esta estructura.
+
+### Configuración de Estilos en angular.json
+
+El proyecto está configurado para utilizar varios estilos externos a través del archivo `angular.json`:
+
+```json
+"styles": [
+  "src/styles.scss",
+  {
+    "input": "node_modules/animate.css/animate.min.css",
+    "bundleName": "animate",
+    "inject": true
+  },
+  {
+    "input": "node_modules/primeflex/primeflex.css",
+    "bundleName": "primeflex",
+    "inject": true
+  },
+  {
+    "input": "node_modules/primeicons/primeicons.css",
+    "bundleName": "primeicons",
+    "inject": true
+  }
+]
+```
+
+Para añadir nuevos estilos externos, sigue el mismo patrón en el archivo angular.json.
+
 ## Estructura del Proyecto
 
 ```
@@ -74,33 +126,40 @@ El proyecto utiliza las siguientes bibliotecas clave:
 ├── src/                      # Código fuente
 │   ├── app/                  # Componentes Angular
 │   │   ├── components/       # Componentes compartidos 
+│   │   │   ├── alert-dialog/ # Diálogo de alertas
+│   │   │   ├── footer/       # Pie de página
+│   │   │   ├── layout/       # Estructura principal
+│   │   │   ├── navbar/       # Barra de navegación
+│   │   │   ├── sidebar/      # Barra lateral
+│   │   │   └── visor-pdf/    # Visualizador de PDF
 │   │   ├── guards/           # Guardias de ruta
 │   │   ├── interceptors/     # Interceptores HTTP
 │   │   ├── models/           # Interfaces de datos
 │   │   ├── pages/            # Componentes de página
 │   │   ├── services/         # Servicios
 │   │   └── utils/            # Utilidades
+│   ├── pipes/                # Pipes personalizados
 │   ├── index.html            # HTML principal
 │   ├── main.ts               # Punto de entrada  
 │   └── styles.scss           # Estilos globales
 ├── public/                   # Recursos estáticos
 ├── angular.json              # Configuración de Angular
 ├── package.json              # Dependencias y scripts
+├── setup-project.js          # Script de configuración post-instalación
 ├── tsconfig.json             # Configuración TypeScript
-├── Dockerfile                # Configuración de Docker
+└── sonar-project.properties  # Configuración para SonarQube
-└── docker-compose.yml        # Configuración Docker Compose
 ```
 
-## Estructura de Interfaces
+## Modelos de Datos (Interfaces)
 
-Se han creado las siguientes interfaces para los modelos de datos:
+El proyecto define las siguientes interfaces para los modelos de datos:
 
 - **Cronograma**: Modelo base para todos los cronogramas
 - **Empresa**: Modelo para empresas
 - **TipoCarga**: Modelo para tipos de carga
 - **EstadoAprobacion**: Modelo para estados de aprobación
-- **ActualizacionPd**: Modelo para actualizaciones de PD
+- **ActualizacionPd**: Modelo para actualizaciones de Plan de Desarrollo
-- **AjustePd**: Modelo para ajustes de PD
+- **AjustePd**: Modelo para ajustes de Plan de Desarrollo
 - **UnidadInformacion**: Modelo para unidades de información
 
 ## Servicios
@@ -115,14 +174,103 @@ Los servicios implementados permiten conectarse a un backend mediante HTTP:
 - **TipoCargaService**: Consulta de tipos de carga
 - **EstadoAprobacionService**: Consulta de estados de aprobación
 - **AuthService**: Autenticación y gestión de tokens
+- **PdfService**: Generación y manejo de PDFs
+- **AlertService**: Gestión de alertas
+
+## Generación de PDFs con PDFMake
+
+El proyecto utiliza PDFMake para la generación dinámica de PDFs. La configuración básica se realiza así:
+
+1. **Importar pdfMake en el servicio**:
+
+```typescript
+import pdfMake from 'pdfmake/build/pdfmake';
+import pdfFonts from 'pdfmake/build/vfs_fonts';
+
+pdfMake.vfs = pdfFonts.vfs;
+```
+
+2. **Definir el documento PDF** usando la estructura de pdfMake:
+
+```typescript
+const docDefinition = {
+  content: [
+    { text: 'Título del Documento', style: 'header' },
+    // Contenido del documento
+  ],
+  styles: {
+    header: {
+      fontSize: 18,
+      bold: true
+    }
+  }
+};
+```
+
+3. **Generar o descargar el PDF**:
+
+```typescript
+// Generar como URL de datos
+const pdfDocGenerator = pdfMake.createPdf(docDefinition);
+pdfDocGenerator.getDataUrl((dataUrl) => {
+  // Usar dataUrl para mostrar el PDF en un iframe
+});
+
+// Descargar el PDF
+pdfMake.createPdf(docDefinition).download('nombre-archivo.pdf');
+```
+
+4. **Visualizar el PDF** usando el componente `visor-pdf`:
+
+```typescript
+// En el componente que necesita mostrar el PDF
+import { DialogService } from 'primeng/dynamicdialog';
+import { VisorPdfComponent } from 'path/to/visor-pdf.component';
+
+constructor(private dialogService: DialogService) {}
+
+mostrarPDF() {
+  this.dialogService.open(VisorPdfComponent, {
+    header: 'Cronograma PDF',
+    width: '80%',
+    data: {
+      product: this.item // Datos para el PDF
+    }
+  });
+}
+```
 
 ## Seguridad
 
 La aplicación incluye:
 
-- Interceptor HTTP para añadir tokens de autenticación
+- **AuthInterceptor**: Interceptor HTTP para añadir tokens de autenticación a las solicitudes
-- Guard para proteger rutas
+- **AuthGuard**: Guard para proteger rutas que requieren autenticación
-- Login y sistema de autenticación
+- **Login**: Componente para autenticación de usuarios
+
+## Animaciones de Ruta
+
+El proyecto implementa animaciones de transición entre rutas usando:
+
+- **RouteAnimationsComponent**: Define las animaciones para las transiciones de ruta
+- **Animate.css**: Proporciona clases CSS predefinidas para animaciones
+
+## Componentes Principales
+
+### Layout Component
+
+Define la estructura principal de la aplicación, incluyendo:
+- Barra de navegación (navbar)
+- Barra lateral (sidebar)
+- Contenido principal con soporte para animaciones de ruta
+- Pie de página (footer)
+
+### VisorPDF Component
+
+Componente standalone que permite:
+- Visualizar PDFs generados dinámicamente
+- Descargar el PDF visualizado
+- Enviar el PDF a través del sistema
 
 ## Comandos Disponibles
 
@@ -134,45 +282,37 @@ La aplicación incluye:
 | `npm run watch` | Compila en modo observador |
 | `npm test` | Ejecuta pruebas unitarias |
 
-## Despliegue con Docker
+## Extendiendo el Proyecto
 
-El proyecto incluye archivos Docker para facilitar el despliegue:
+Para extender este proyecto como base para un nuevo desarrollo:
 
-1. Construir y ejecutar con Docker Compose:
+1. Clona el repositorio
+2. Ejecuta `npm install` (esto iniciará automáticamente el script setup-project.js)
+3. Proporciona el nombre del nuevo proyecto cuando se te solicite
+4. El script actualizará automáticamente la configuración con el nuevo nombre
+5. Comienza a desarrollar tu aplicación personalizada
 
-```bash
+## Buenas Prácticas
-docker-compose up --build
-```
 
-Esto expone la aplicación en `http://localhost:80`.
+1. **Organización de Componentes**:
+   - Componentes de página en la carpeta `pages/`
+   - Componentes reutilizables en `components/`
 
-2. Construir manualmente con Docker:
+2. **Modelo de Datos**:
+   - Definir interfaces para todos los modelos en `models/`
+   - Exportar todas las interfaces desde `models/index.ts`
 
-```bash
+3. **Servicios**:
-docker build -t cronogramas-primeng .
+   - Mantener la responsabilidad única para cada servicio
-docker run -p 80:80 cronogramas-primeng
+   - Centralizar la lógica de negocio en los servicios
-```
 
-## Development server
+4. **Gestión de Estado**:
+   - Utilizar servicios para compartir estado entre componentes
 
-Para iniciar un servidor de desarrollo local, ejecute:
+## Recursos Adicionales
 
-```bash
+- [Documentación de Angular](https://angular.dev/)
-ng serve
+- [Documentación de PrimeNG](https://primeng.org/installation)
-```
+- [Documentación de PrimeFlex](https://primeflex.org/)
-
+- [Documentación de PDFMake](http://pdfmake.org/)
-Una vez que el servidor esté en funcionamiento, abra su navegador y navegue a `http://localhost:4200/`. La aplicación se recargará automáticamente cuando modifique cualquiera de los archivos fuente.
+- [Documentación de ExcelJS](https://github.com/exceljs/exceljs)
-
-## Building
-
-Para compilar el proyecto ejecute:
-
-```bash
-ng build
-```
-
-Esto compilará su proyecto y almacenará los artefactos de compilación en el directorio `dist/`. Por defecto, la compilación para producción optimiza su aplicación para el rendimiento y la velocidad.
-
-## Additional Resources
-
-Para más información sobre el uso de Angular CLI, incluyendo referencias detalladas de comandos, visite la página [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli).