Company Complaint Profile - Copy this Angular, Tailwind Component to your project
<div *ngIf="isOpen()" class="fixed inset-0 z-50 flex items-center justify-center"> <!-- Backdrop --> <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" (click)="close()"></div> <!-- Modal --> <div class="relative bg-white rounded-lg shadow-xl w-full max-w-4xl m-4 animate-modal-up p-8 space-y-6"> <!-- Header --> <div class="flex items-center justify-between"> <h3 class="text-xl font-semibold text-gray-900"> {{ modalPayload?.mode === 'edit' ? 'Editar' : 'Crear nuevo' }} cliente </h3> <button (click)="close()" class="text-gray-500 hover:text-gray-700 transition-colors" > <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> </svg> </button> </div> <div class="p-4 space-y-4" > <p>{{ modalPayload?.data?.application_date }}</p> <p class="-mb-1 text-sm italic text-gray-700">{{ modalPayload?.data?.customer }}</p> <p class="-mb-1 text-sm italic text-gray-700"> {{ modalPayload?.data?.customer }} - {{ modalPayload?.data?.customer }} </p> <p class="mb-4 text-sm italic text-gray-700">{{ modalPayload?.data?.customer }}</p> <p class="text-2xl font-bold text-gray-800">{{ modalPayload?.data?.title }}</p> <p class="text-gray-700">{{ modalPayload?.data?.description }}</p> <!-- FILE --> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mt-4"> <div *ngFor="let evidencia of modalPayload?.data?.evidencias"> <app-file-card [evidence]="modalPayload?.data?.evidencia"></app-file-card> </div> </div> <!-- END FILE --> </div> <!-- Footer --> <div class="flex items-center justify-end gap-2"> <button type="button" (click)="close()" class="px-4 py-2 text-sm text-white bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:ring-gray-200 focus:outline-none rounded-md font-medium text-center">Cancelar</button> <button type="button" class="px-4 py-2 text-sm text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 focus:outline-none rounded-md font-medium text-center">Guardar</button> </div> </div> </div>
