Receipt Attachment - Copy this React, Tailwind Component to your project
Usa un wording simple y consiso, todo el codigo que escribas tiene que estar optimamente documentado en jsdoc, cumplir con las mejores prácticas, y tener la menor complejidad algoritmica posible. En el caso de estilos, coincidir con el sistema de diseño de los demás componentes y ser responsive. El repo esta usando nextjs 14, las paginas se guardan en pages/[locale]/<nombre_ruta>/page.tsx y las rutas en api/<nombre_ruta>/route.ts. Los componentes se dividen en components/icons, components/composed y components/ ahi dentro cada componente tiene su carpeta con sus estilos, la carpeta inicia con mayuscula, el archivo es igual al nombre de la carpeta .tsx y el scss es Componente.module.scss. Las traducciones se guardan en /messages/[locale].json y se accede a las mismas en la página (page.tsx), y luego se pasan como props a un componente que se renderize por el lado del cliente donde ahi se trae el locale/tema etc. Como administrador de la plataforma de cursos, Quiero poder adjuntar opcionalmente un comprobante de pago (foto o PDF) al realizar pagos mensuales a los gurús, con optimización automática de las imágenes, Para tener un registro visual eficiente de los pagos realizados y facilitar la gestión financiera. Criterios de Aceptación En el panel de gestión de pagos, al iniciar un pago, el administrador debe tener la opción de adjuntar un comprobante. El sistema debe permitir adjuntar comprobantes en formato de imagen (JPG, PNG) o PDF. Una vez adjuntado el comprobante, debe mostrarse una vista previa antes de confirmar el pago. El comprobante adjunto debe almacenarse de forma segura y asociarse correctamente con el registro de pago correspondiente. En la lista de pagos realizados, debe haber un indicador visual que muestre si un pago tiene un comprobante adjunto. En el historial de pagos, debe haber una opción para ver el comprobante, que se abrirá en una nueva pestaña del navegador. Todas las imágenes adjuntas deben optimizarse y convertirse a formato JPG utilizando sharp antes de almacenarse. Los archivos PDF deben mantenerse en su formato original.Validación Técnica Implementar la integración con Sharp para la optimización y conversión de imágenes a formato JPG. Configurar Sharp para reducir el tamaño de las imágenes manteniendo una calidad aceptable. Crear un nuevo campo en la tabla de pagos de la base de datos para almacenar la URL del comprobante (JPG o PDF). Desarrollar un nuevo endpoint para la subida de comprobantes que: Acepte archivos de imagen y PDF Procese las imágenes con Sharp, convirtiéndolas a JPG y optimizándolas. Almacene los archivos PDF sin modificaciones. Retorne la URL del archivo subido y optimizado. Asegurar que la captura de fotos funciona correctamente en diferentes navegadores y dispositivos. Asegurar que la interfaz de usuario para adjuntar comprobantes es intuitiva y fácil de usar en diferentes tamaños de pantalla. Verificar que la asociación entre los comprobantes y los registros de pago se mantiene íntegra en la base de datos. Implementar un sistema de manejo de errores robusto para casos como fallos en la carga de archivos o problemas de almacenamiento. Realizar pruebas de carga para asegurar que el sistema puede manejar múltiples subidas y optimizaciones de comprobantes simultáneamente. Verificar que la apertura de comprobantes en nuevas pestañas funciona correctamente en diferentes navegadores.
