Entendido, voy a deshacer los cambios de React Native y volver a la versión anterior del proyecto con Next.js.

¡Listo! He deshecho los cambios y volvimos a la versión anterior del proyecto con Next.js. Esta es la página de historial de reciclaje que habíamos implementado anteriormente, con las siguientes características:

• Muestra el historial de actividades de reciclaje del usuario
• Permite filtrar por tipo de material (Plástico, Papel, Vidrio, Metal)
• Muestra estadísticas de puntos ganados y actividad reciente

• Cada actividad muestra:

  • Fecha y hora del reciclaje
  • Contenedor y ubicación
  • Materiales reciclados (con posibilidad de múltiples materiales)
  • Puntos ganados
  • Lista detallada de items reciclados
• Incluye una sección de impacto ambiental
• Mantiene la navegación inferior consistente con el resto de la aplicación

¿Hay alguna otra página o funcionalidad que quieras que implementemos o modifiquemos en el proyecto?

Perfecto, voy a crear la pantalla para la validación del código enviado por email. Esta pantalla aparecerá después de que el usuario solicite recuperar su contraseña.

¡Perfecto! He creado las pantallas para la validación del código y el restablecimiento de contraseña. Aquí están las características principales:

Pantalla de Verificación de Código (/verify-code)

Características principales:

• Entrada de código de 6 dígitos con campos individuales
• Auto-focus al siguiente campo al escribir
• Soporte para pegar código completo desde el email
• Botón de reenvío con countdown de 60 segundos
• Validación en tiempo real del código
• Estados de carga para verificación y reenvío
• Navegación de regreso a forgot-password

Funcionalidades:

• Manejo de backspace para navegar entre campos
• Solo permite números en los campos
• Simula verificación del código (acepta "123456" como código válido)
• Consejos útiles para el usuario
• Redirección automática a reset-password al verificar correctamente

Pantalla de Restablecimiento de Contraseña (/reset-password)

Características principales:

• Validación robusta de contraseña con requisitos visuales
• Confirmación de contraseña con indicador de coincidencia
• Mostrar/ocultar contraseña en ambos campos

• Requisitos de seguridad mostrados en tiempo real:

  • Mínimo 8 caracteres
  • Una letra mayúscula
  • Una letra minúscula
  • Un número
  • Un carácter especial

Funcionalidades:

• Validación visual con checkmarks verdes
• Estados de carga durante el proceso
• Nota de seguridad para el usuario
• Redirección al login después del éxito

Flujo Completo de Recuperación:

1. Login → "¿Olvidaste tu contraseña?"
2. Forgot Password → Ingresa email
3. Verify Code → Ingresa código de 6 dígitos
4. Reset Password → Crea nueva contraseña
5. Login → Inicia sesión con nueva contraseña

Ambas pantallas mantienen la consistencia visual con el resto de la aplicación y incluyen todos los archivos loading.tsx necesarios.