Audit Grid - Copy this React, Tailwind Component to your project

Lenguaje/Framework: Angular + Material (puedes adaptarlo a otro framework si es necesario) Descripción: Crea un componente en Angular que incluya un grid con funcionalidad CRUD dentro de un modal. El grid debe mostrar las siguientes columnas: Número de Auditoría: Campo numérico. Cliente: Campo de texto. Fecha: Campo de tipo fecha (Date). Apto/No Apto: Un campo tipo booleano con dos opciones (checkbox o select). El componente debe cumplir con los siguientes requisitos funcionales: Botón de agregar: Al hacer clic en "Agregar" se abrirá un modal donde se pueden añadir nuevas filas al grid. El modal debe incluir un formulario con los campos mencionados. Editar: Cada fila del grid debe tener un botón de editar. Al hacer clic en "Editar", se debe abrir el modal con los datos precargados de esa fila para su edición. Eliminar: Cada fila del grid debe tener un botón de eliminar, el cual debe mostrar una alerta de confirmación antes de eliminar la fila. Validaciones: El formulario dentro del modal debe validar los campos requeridos: Número de auditoría: Debe ser obligatorio y numérico. Cliente: Debe ser obligatorio y alfabético. Fecha: Debe ser obligatoria y una fecha válida. Apto/No Apto: Debe ser obligatorio y tener dos opciones (Apto o No Apto). Persistencia: Al agregar, editar o eliminar datos en el modal, los cambios deben reflejarse inmediatamente en el grid. Responsive: El grid y el modal deben ser completamente responsivos para que se ajusten bien en dispositivos móviles y en pantallas más grandes. Estructura básica del componente: Grid: Utiliza Angular Material Table para el grid con columnas definidas por los campos indicados. Modal: Usa Angular Material Dialog para el modal que contendrá el formulario CRUD. Ejemplo de estructura del código (Angular): HTML (grid con botón para abrir modal): html Copiar código <div> <button mat button (click)="openAddModal()">Agregar</button> <table mat table [dataSource]="dataSource" class="mat elevation z8"> <ng container matColumnDef="numeroAuditoria"> <th mat header cell *matHeaderCellDef> Número de Auditoría </th> <td mat cell *matCellDef="let element"> {{element.numeroAuditoria}} </td> </ng container> <ng container matColumnDef="cliente"> <th mat header cell *matHeaderCellDef> Cliente </th> <td mat cell *matCellDef="let element"> {{element.cliente}} </td> </ng container> <ng container matColumnDef="fecha"> <th mat header cell *matHeaderCellDef> Fecha </th> <td mat cell *matCellDef="let element"> {{element.fecha | date}} </td> </ng container> <ng container matColumnDef="aptoNoApto"> <th mat header cell *matHeaderCellDef> Apto/No Apto </th> <td mat cell *matCellDef="let element"> {{element.aptoNoApto ? 'Apto' : 'No Apto'}} </td> </ng container> <ng container matColumnDef="actions"> <th mat header cell *matHeaderCellDef> Acciones </th> <td mat cell *matCellDef="let element"> <button mat icon button (click)="openEditModal(element)"> <mat icon>edit</mat icon> </button> <button mat icon button (click)="delete(element)"> <mat icon>delete</mat icon> </button> </td> </ng container> <tr mat header row *matHeaderRowDef="displayedColumns"></tr> <tr mat row *matRowDef="let row; columns: displayedColumns;"></tr> </table> </div> TS (component logic): typescript Copiar código export class AuditComponent { displayedColumns: string[] = ['numeroAuditoria', 'cliente', 'fecha', 'aptoNoApto', 'actions']; dataSource = new MatTableDataSource<any>([]); constructor(private dialog: MatDialog) {} openAddModal() { const dialogRef = this.dialog.open(AuditModalComponent, { width: '400px', data: { mode: 'add' } }); dialogRef.afterClosed().subscribe(result => { if (result) { this.dataSource.data.push(result); this.dataSource._updateChangeSubscription(); } }); } openEditModal(element) { const dialogRef = this.dialog.open(AuditModalComponent, { width: '400px', data: { mode: 'edit', element } }); dialogRef.afterClosed().subscribe(result => { if (result) { const index = this.dataSource.data.findIndex(a => a.numeroAuditoria === result.numeroAuditoria); this.dataSource.data[index] = result; this.dataSource._updateChangeSubscription(); } }); } delete(element) { this.dataSource.data = this.dataSource.data.filter(a => a !== element); } } Modal TS: typescript Copiar código export class AuditModalComponent { form: FormGroup; constructor( private fb: FormBuilder, public dialogRef: MatDialogRef<AuditModalComponent>, @Inject(MAT_DIALOG_DATA) public data: any ) { this.form = this.fb.group({ numeroAuditoria: [data.element?.numeroAuditoria || '', Validators.required], cliente: [data.element?.cliente || '', Validators.required], fecha: [data.element?.fecha || '', Validators.required], aptoNoApto: [data.element?.aptoNoApto || false, Validators.required] }); } onSubmit() { if (this.form.valid) { this.dialogRef.close(this.form.value); } } } Este es un esquema inicial que puedes personalizar según las necesidades específicas de tu proyecto. ¡Avísame si necesitas más detalles o ajustes!