Pet Clinical History - Copy this Angular, Tailwind Component to your project
Estoy desarrollando una aplicación en Angular con Tailwind CSS llamada Huella Pet, donde los usuarios pueden gestionar la información de sus mascotas. Necesito una UI para administrar el historial médico de cada mascota. La UI debe tener lo siguiente: 🔹 Estructura de la UI 📌 Vista principal - Lista de mascotas: Muestra tarjetas con información de cada mascota. Cada tarjeta debe tener los botones: "Editar" (para modificar datos de la mascota). "Configuración" (para ajustes adicionales). "Historial Médico" (nuevo botón para acceder al historial de la mascota). 📌 Vista del historial médico de la mascota: Al hacer clic en "Historial Médico", se abre una pantalla con: Nombre de la mascota y su foto. Lista de consultas médicas y tratamientos. Botón "Añadir nueva entrada" para registrar eventos médicos. 📌 CRUD del historial médico (Create, Read, Update, Delete): Crear entrada: Formulario para ingresar una nueva consulta con los siguientes campos: Fecha 📅 Motivo de la consulta ✍️ Diagnóstico 🏥 Tratamiento 💊 Veterinario 👩⚕️ (opcional) Ver detalles: Al hacer clic en una consulta, se abre una modal con toda la información. Editar entrada: Permite modificar cualquier campo de una consulta existente. Eliminar entrada: Botón para borrar una consulta con una confirmación. 📌 Diseño UI: Tailwind CSS debe usarse para el diseño. Diseño responsive, adaptable a móviles y escritorio. Usar pestañas (tabs) para cambiar entre "Perfil", "Historial Médico" y "Configuración". La lista de entradas médicas puede mostrarse como una tabla con filtros o timeline con tarjetas. 📌 Extras: Incluir iconos en botones usando Lucide o Heroicons. Agregar efectos de hover y animaciones sutiles con Framer Motion o Tailwind animations. ⚡ Genera el código en Angular con componentes Standalone y Tailwind CSS. ⚡ Incluye ejemplos de servicios y modelos en TypeScript para manejar datos con un CRUD.
