# Profile – État Fonctionnel (web + mobile)

Ce document reflète le comportement actuel du module **Profile** après lecture du code en place.

## Vue d'ensemble (UI)
- **Desktop** : `apps/web/src/modules/profile/pages/ProfilePage.web.vue`  
  Onglets Infos / Stats / Badges / Quotas / Activité / Apparence / Sécurité, avec carte header, actions (refresh/export), métriques héro et carte quota.
- **Mobile** : `apps/web/src/modules/profile/pages/ProfilePage.mobile.vue`  
  Navigation toggle, cartes animées, graphique de progression (area), timeline filtrable (7j/30j/90j) et mêmes sections que desktop adaptées.
- **Quota** : composant commun `apps/web/src/modules/profile/components/QuotaDetailCard.vue`, affiché dans l’onglet Quotas sur web et mobile.

## Données & appels
- **Profil** : `profileService.fetchProfile()` → `GET /api/profile` (cache offline `profile:current`), hydrates `UserProfileResponse`.
- **Billing** : `BillingService.fetchSummary()` → `GET /api/billing/subscription` (plan, quota, subscription).  
  Mappage dans `useQuotaInfo` et fusion dans `profileStore.fetchProfile()` pour synchroniser plan/quota.
- **Sessions / export** : actions `revokeSession`, `requestDataExport` via `profileService`.
- **Stockage avatar** : `avatarService.uploadAvatar()` vers Firebase Storage.

## Stores & composables
- `apps/web/src/modules/profile/stores/profileStore.ts`
  - Gère profil, prefs, avatar, icône, sessions, recommandations.
  - **Sécurité offline** : `updateProfile` refuse les champs sensibles (email/password/phone/twoFactor) si `navigator.onLine === false` avec rollback.
  - Fusionne billing summary pour `account.plan` et `account.quota`; met en cache offline.
- `apps/web/src/modules/profile/composables/useQuotaInfo.ts`
  - Appelle `fetchSummary` au mount, auto-refresh 5 min, expose `quotaData`, `tier`, `planName`, `usageInsights`, `recommendations`, `subscription`, `loading`, `error`, `refetch`.
- `apps/web/src/modules/billing/services/billingService.ts`
  - Normalise `SubscriptionSummary` (valeurs par défaut sûres pour plan/quota/subscription).

## Quotas (UI + logique)
- `QuotaDetailCard.vue`
  - Props : `quota: UserQuota | null`, `tier: PlanTier`, `planName?`, `subscriptionStatus? (default: 'active')`.
  - États couleur : `<75% accent`, `75–89% warning`, `>=90% negative`.
  - CTA upgrade si tier ≠ `pro` et au moins une barre ≥75%.
  - Fallbacks par tier si `quota` est `null` (Free/Premium/Pro).
  - Reset affiché via `quota.window.periodEnd` ou fin de mois courante.
- `ProfilePage.web.vue` / `ProfilePage.mobile.vue`
  - Intègrent `useQuotaInfo` et passent `subscription?.status` au composant.
  - Gestion des erreurs quota : état "Quotas indisponibles" + bouton Réessayer (`refetch`).

## Activité / stats
- **Hero stats & insights** : fournis par `useSettingsViewModel` (données profil + gamification).
- **Timeline mobile** : `ProfilePage.mobile.vue` construit des activités à partir de `loginHistory`, `account.lastActive`, `preferences.updatedAt`, `monthlyActivity`, gamification (niveau/points). Filtre par période (all/7d/30d/90d).
- **Graphique progression (mobile)** : area chart basé sur `monthlyActivity` avec distribution quotidienne approximative pour la période sélectionnée (7/30/90 jours).

## Tests E2E
- `tests/e2e/profile-page.spec.ts`
  - Navigation onglets desktop/mobile, affichage plan/identité, badge Premium, progression 100%.
  - Quotas : test de retry après erreur 500 sur `/api/billing/subscription`.
  - Timeline mobile : filtre 7j réduit le nombre d’items.

## Points d'attention / TODO
- `LogsViewer` et `AlertsPanel` ne concernent pas le profil (pas d’impact ici).
- Les données quota utilisent `/api/billing/subscription`; l’ancien `/api/billing/usage` n’est plus consommé par les pages profil.
- Les données graphiques mobiles répartissent `monthlyActivity` sur les jours (approximation destinée à l’affichage).
- Prévoir un endpoint réel pour `usageInsights`/`recommendations` si exposés côté backend (déjà supporté par `useQuotaInfo`).

## Références rapides
- Pages : `ProfilePage.web.vue`, `ProfilePage.mobile.vue`
- Store : `profileStore.ts`
- Services : `profileService.ts`, `avatarService.ts`, `billingService.ts`
- Quota : `useQuotaInfo.ts`, `QuotaDetailCard.vue`
- Types utilisés : `@my-roadtrip/types` (`UserProfileResponse`, `UserPreferences`, `SubscriptionSummary`, `UserQuota`, `PlanTier`, `ProfileIconId`, `ProfileIconColor`)
- Tests : `tests/e2e/profile-page.spec.ts`
