Gestión de Equipo - Three Trackr

Estado Actual

Funcionalidades Implementadas

  • Listado de miembros del equipo (desde GraphQL)
  • Búsqueda de miembros (por nombre o email)
  • Interfaz de invitación (formulario completo)
  • Integración con Supabase Auth para invitaciones
  • Traducciones completas (ES/EN)
  • Estados visuales de usuario (con indicador de "En línea")
  • Manejo de errores con toasts
  • Tipos TypeScript completos

Funcionalidades Pendientes

  • Estado de usuario en tiempo real (planificado)
  • Cambio de roles (UI lista, lógica pendiente)
  • Eliminación de miembros (UI lista, lógica pendiente)

Cómo Probar la Invitación

1. Configuración de Variables de Entorno

Copiar el template y editar con tus credenciales de Supabase:

Variables requeridas:

  • NEXT_PUBLIC_SUPABASE_URL - URL de tu proyecto Supabase
  • NEXT_PUBLIC_SUPABASE_ANON_KEY - Clave anónima
  • SUPABASE_SERVICE_ROLE_KEY - Clave de servicio (MANTENER SECRETO)
  • NEXT_PUBLIC_SITE_URL - URL de tu sitio

2. Obtener las Credenciales de Supabase

  1. Ve a supabase.com
  2. Selecciona tu proyecto
  3. Ve a Settings → API
  4. Copia las claves necesarias

3. Configurar Autenticación en Supabase

  1. Ve a Authentication → Settings
  2. En Site URL agrega tu dominio local
  3. En Redirect URLs agrega tu callback URL

4. Probar la Invitación

  1. Navega a la página del equipo
  2. Haz click en "Invitar Miembro"
  3. Completa el formulario con email y rol
  4. Haz click en "Enviar Invitación"

Flujo de Invitación

  1. Usuario hace click en 'Invitar'
  2. Abre formulario
  3. Completa email y rol
  4. Envía formulario
  5. Supabase Admin: inviteUserByEmail
  6. Supabase envía email
  7. Usuario recibe email
  8. Click en enlace del email
  9. Usuario completa registro

Estructura del Código

El código se organiza en:

  • page.tsx - Página principal con query GraphQL
  • view.tsx - Componente de UI principal
  • actions.ts - Server actions para invitaciones

Componentes Clave

TeamsView (view.tsx)

  • Manejo del estado del formulario
  • Filtrado de miembros
  • Interfaz de invitación
  • Gestión de errores

inviteMemberAction (actions.ts)

  • Integración con Supabase Auth
  • Envío de invitaciones por email
  • Revalidación de la página

UI/UX Features

Estado Visual

  • Indicador online: Punto verde animado
  • Avatares: Con iniciales como fallback
  • Badges de roles: Con iconos distintivos
  • Búsqueda en tiempo real: Filtrado instantáneo

Traducciones

  • Español completo: Todas las cadenas traducidas
  • Inglés completo: Traducciones verificadas
  • Estructura limpia: dashboard.org.team.*

Troubleshooting

Error: "Failed to send invitation"

  1. Verifica las variables de entorno
  2. Confirma que el SUPABASE_SERVICE_ROLE_KEY es correcto
  3. Revisa que la URL del sitio esté configurada en Supabase

Error: "Invalid redirect URL"

  1. Agrega tu dominio local en Supabase Dashboard
  2. Verifica NEXT_PUBLIC_SITE_URL en el .env.local

No se muestran miembros

  1. Verifica que el query GraphQL esté funcionando
  2. Revisa la consola del navegador por errores

Próximos Pasos

Estado en Tiempo Real

Implementar WebSocket/Server-Sent Events para:

  • Estado online/offline de usuarios
  • Actualizaciones automáticas de la lista
  • Notificaciones de nuevas invitaciones

Gestión de Roles Avanzada

Completar las acciones pendientes:

  • updateMemberRoleAction() - Cambiar rol de miembro
  • removeMemberAction() - Eliminar miembro

¿Necesitas Ayuda?

Si encuentras algún problema:

  1. Revisa la consola: Tanto del navegador como del servidor
  2. Verifica las variables: Especialmente las credenciales de Supabase
  3. Supabase Dashboard: Revisa los logs de autenticación
  4. GraphQL: Confirma que el endpoint esté funcionando

¡La funcionalidad de invitación está lista para probar!