[FE-U-02] UsernameSetupPage (gate onboarding) + EditProfilePage (avatar R2) + RoleManagementPage (flows activation) + OnboardingFlow

[K0lux]

section: Feature User — Pages | prio: P0 | est: 8h | deps: FE-U-01

Pourquoi

Ces pages constituent le coeur de lidentité utilisateur dans Quantify. Lonboarding guide le nouvel utilisateur de linscription vers sa première activité.

Acceptance Criteria

• UsernameSetupPage : check disponibilité live (debounce 400ms, useUsernameAvailability), ✓ Disponible / ✗ Déjà pris / ✗ Réservé, aperçu quantify.app/@{username}, bouton bloqué si invalide, succès → animation confettis + toast + redirect vers page dorigine
• EditProfilePage : sections Avatar (drag&drop + preview + crop circulaire react-image-crop + upload R2 presigned + progress bar), DisplayName (compteur chars), Bio (300 chars, preview), Username (lecture seule + modal cooldown avec date prochaine modif), Langue, Timezone (searchable IANA), preview profil public temps réel, dirty state tracking (bouton "Enregistrer" actif seulement si changement)
• RoleManagementPage : vue rôles actifs — BUYER (permanent, badge grisé "Rôle de base"), METER_ADMIN (auto, badge orange "Auto-attribué" + lien vers liste des compteurs), SELLER/SERVICE_PROVIDER (activables/désactivables), badge "Équipe Quantify" si is_quantify_team=true (lecture seule, non-gérable ici — attribué uniquement par quantify-admin), flows activation SELLER (4 steps : présentation→pays→catégories→CGU) et SERVICE_PROVIDER (4 steps : présentation→types→zone→CGU), désactivation avec dialog vérification prérequis, SocialGate sur activation si !isSocialReady
• OnboardingFlow : post-inscription (first_login flag), Step 1 bienvenue, Step 2 UsernameSetup (obligatoire), Step 3 profil optionnel, Step 4 choix activité (SELLER / SERVICE_PROVIDER / Énergie uniquement), progress indicator, onboarding_completed_at set après
• Tests composants : availability check, avatar upload flow, role activation steps

Fichiers

src/features/user/ui/
├── UsernameSetupPage.tsx
├── EditProfilePage.tsx + AvatarUploader.tsx + UsernameChangeModal.tsx
├── RoleManagementPage.tsx + ActivateSellerFlow.tsx + ActivateServiceProviderFlow.tsx
└── OnboardingFlow.tsx + WatiWelcomeAnimation.tsx

Scale

Avatar via R2 presigned = zéro bande passante serveur. Onboarding = réduit le taux dabandon post-inscription.