propuesta de historial de cambios como tabla reducida con data estatica

src/app/app.module.ts

@@ -424,6 +424,7 @@ import { WorkflowDetailsComponent } from './components/process-management/workfl
 import { ChangeStatusWorkflowComponent } from './components/process-management/workflow-management/change-status-workflow/change-status-workflow.component';
 import { AddNewTaskComponent } from './components/process-management/workflow-management/view-task-workflow/add-new-task/add-new-task.component';
 import { ConfigureUsersComponent } from './components/process-management/workflow-management/view-task-workflow/add-new-task/configure-users/configure-users.component';
+import { WorkflowHistoryComponent } from './components/process-management/workflow-management/workflow-history/workflow-history.component';
 import { SelectColorComponent } from './components/system-admin/system-params/select-color/select-color.component';
 import { GridIconsSelectorComponent } from './components/system-admin/system-params/grid-icons-selector/grid-icons-selector.component';
 import { OrganizationComponent } from './components/personal-management/organization/organization.component';
@@ -829,6 +830,7 @@ import { SignaturePadModule } from 'angular-signature-pad-v2';
     ChangeStatusWorkflowComponent,
     AddNewTaskComponent,
     ConfigureUsersComponent,
+    WorkflowHistoryComponent,
     SelectColorComponent,
     GridIconsSelectorComponent,
     TableManagementFormComponent,

src/app/components/process-management/workflow-management/workflow-history/workflow-history.component.css

@@ -0,0 +1,27 @@
+.history-table {
+  width: 100%;
+  margin-top: 16px;
+}
+
+.type-badge {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.type-version {
+  background-color: #e3f2fd;
+  color: #1976d2;
+}
+
+.type-estado {
+  background-color: #f3e5f5;
+  color: #7b1fa2;
+}
+
+mat-dialog-content {
+  min-width: 600px;
+  max-height: 400px;
+  overflow-y: auto;
+}

src/app/components/process-management/workflow-management/workflow-history/workflow-history.component.html

@@ -0,0 +1,40 @@
+<div mat-dialog-content>
+  <h2 mat-dialog-title>Historial de Cambios</h2>
+  
+  <table mat-table [dataSource]="dataSource" class="history-table">
+    <ng-container matColumnDef="fecha">
+      <th mat-header-cell *matHeaderCellDef>Fecha</th>
+      <td mat-cell *matCellDef="let item">
+        {{ item.FECHA_CAMBIO | date:'dd/MM/yyyy HH:mm' }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="tipo">
+      <th mat-header-cell *matHeaderCellDef>Tipo</th>
+      <td mat-cell *matCellDef="let item">
+        <span class="type-badge" [ngClass]="'type-' + item.TIPO.toLowerCase()">
+          {{ item.TIPO }}
+        </span>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="cambio">
+      <th mat-header-cell *matHeaderCellDef>Cambio</th>
+      <td mat-cell *matCellDef="let item">
+        {{ getChangeDescription(item) }}
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="comentario">
+      <th mat-header-cell *matHeaderCellDef>Comentario</th>
+      <td mat-cell *matCellDef="let item">{{ item.COMENTARIO }}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+</div>
+
+<div mat-dialog-actions align="end">
+  <button mat-button (click)="close()">Cerrar</button>
+</div>

src/app/components/process-management/workflow-management/workflow-history/workflow-history.component.ts

@@ -0,0 +1,83 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatTableDataSource } from '@angular/material/table';
+
+interface WorkflowHistoryItem {
+  TIPO: string;
+  VERSION?: string;
+  NOMBRE_WORKFLOW?: string;
+  DESCRIPCION?: string;
+  ESTADO?: string;
+  ID_WORKFLOW: string;
+  FECHA_CAMBIO: string;
+  COMENTARIO: string;
+}
+
+@Component({
+  selector: 'app-workflow-history',
+  templateUrl: './workflow-history.component.html',
+  styleUrls: ['./workflow-history.component.css'],
+  standalone: false
+})
+export class WorkflowHistoryComponent implements OnInit {
+  public dataSource = new MatTableDataSource<WorkflowHistoryItem>();
+  public displayedColumns = ['fecha', 'tipo', 'cambio', 'comentario'];
+
+  constructor(
+    public dialogRef: MatDialogRef<WorkflowHistoryComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { idWorkflow: number }
+  ) {}
+
+  ngOnInit() {
+    this.loadHistoryData();
+  }
+
+  private loadHistoryData() {
+    const historyData: WorkflowHistoryItem[] = [
+      {
+        TIPO: 'VERSION',
+        VERSION: '3',
+        NOMBRE_WORKFLOW: 'Mantenimiento Correctivo de Vías Ferreas',
+        DESCRIPCION: 'Workflow para gestión de mantenimiento correctivo en vías férreas.',
+        ID_WORKFLOW: '1',
+        FECHA_CAMBIO: '2025-09-09 14:05:28',
+        COMENTARIO: 'test 2'
+      },
+      {
+        TIPO: 'ESTADO',
+        ESTADO: 'Activo',
+        ID_WORKFLOW: '1',
+        FECHA_CAMBIO: '2025-09-09 14:05:28',
+        COMENTARIO: 'test 2'
+      },
+      {
+        TIPO: 'VERSION',
+        VERSION: '3',
+        NOMBRE_WORKFLOW: 'Mantenimiento Correctivo de Vías Ferreas',
+        DESCRIPCION: 'Workflow para gestión de mantenimiento correctivo.',
+        ID_WORKFLOW: '1',
+        FECHA_CAMBIO: '2025-09-09 14:03:45',
+        COMENTARIO: 'test'
+      },
+      {
+        TIPO: 'ESTADO',
+        ESTADO: 'Eliminado',
+        ID_WORKFLOW: '1',
+        FECHA_CAMBIO: '2025-09-09 14:03:45',
+        COMENTARIO: 'test'
+      }
+    ];
+
+    this.dataSource.data = historyData.sort((a, b) => 
+      new Date(b.FECHA_CAMBIO).getTime() - new Date(a.FECHA_CAMBIO).getTime()
+    );
+  }
+
+  public getChangeDescription(item: WorkflowHistoryItem): string {
+    return item.TIPO === 'VERSION' ? `Versión ${item.VERSION}` : `Estado: ${item.ESTADO}`;
+  }
+
+  public close() {
+    this.dialogRef.close();
+  }
+}

src/app/components/process-management/workflow-management/workflow-management.component.html

@@ -131,6 +131,18 @@
               </button>
             </td>
           </ng-container>
+          <ng-container matColumnDef="HISTORIAL">
+            <th mat-header-cell *matHeaderCellDef>Historial</th>
+            <td mat-cell *matCellDef="let element">
+              <button
+                mat-icon-button
+                (click)="viewWorkflowHistory(element.ID_WORKFLOW)"
+                [matTooltip]="'Ver historial de cambios'"
+              >
+                <mat-icon>history</mat-icon>
+              </button>
+            </td>
+          </ng-container>
           <ng-container matColumnDef="ACCIONES">
             <th mat-header-cell *matHeaderCellDef mat-sort-header>
               {{ interService.get("acciones") }}
@@ -189,7 +201,7 @@
           <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
 
           <tr class="mat-row" *matNoDataRow>
-            <td class="mat-cell p-20 align-center" colspan="8">
+            <td class="mat-cell p-20 align-center" colspan="9">
               <object data="assets/img/empty_data.svg" width="150"></object>
               <h2>Sin datos</h2>
             </td>

src/app/components/process-management/workflow-management/workflow-management.component.ts

@@ -26,6 +26,7 @@ import { RequestUserNumberLine } from '../../../interfaces/response-data';
 import { ViewGraphicWorkflowComponent } from './view-graphic-workflow/view-graphic-workflow.component';
 import { WorkflowDetailsComponent } from './workflow-details/workflow-details.component';
 import { ChangeStatusWorkflowComponent } from './change-status-workflow/change-status-workflow.component';
+import { WorkflowHistoryComponent } from './workflow-history/workflow-history.component';
 
 @Component({
   selector: 'app-workflow-management',
@@ -62,6 +63,7 @@ export class WorkflowManagementComponent implements OnInit, AfterViewInit {
       'PREDETERMINADO',
       'VERSION',
       'ESTADO',
+      'HISTORIAL',
       'ACCIONES',
     ];
   }
@@ -311,4 +313,12 @@ export class WorkflowManagementComponent implements OnInit, AfterViewInit {
     );
     this.isLoading = false;
   }
+
+  public viewWorkflowHistory(idWorkflow: number) {
+    this._dialog.open(WorkflowHistoryComponent, {
+      disableClose: true,
+      width: '700px',
+      data: { idWorkflow }
+    });
+  }
 }