# Analyse - Pourquoi les informations utilisateur ne s'affichent pas

## 🔍 Problème Identifié

Les informations de l'utilisateur connecté (nom, prénom, email) ne s'affichent pas dans le dashboard layout.

## 📊 Architecture du Flux de Données

### 1. **Flux d'Authentification**

```
Login/Register
    ↓
apiLogin() ou apiRegister()
    ↓
getCurrentUser() via GET /api/v1/auth/me
    ↓
setUser(currentUser)
    ↓
localStorage.setItem('user', JSON.stringify(currentUser))
    ↓
Affichage dans DashboardLayout
```

### 2. **Fichiers Impliqués**

#### Frontend
- **[auth-context.tsx](apps/frontend/src/lib/context/auth-context.tsx:39)** - Gère l'état utilisateur
- **[dashboard/layout.tsx](apps/frontend/app/dashboard/layout.tsx:16)** - Affiche les infos user
- **[api/auth.ts](apps/frontend/src/lib/api/auth.ts:69)** - Fonction `getCurrentUser()`
- **[types/api.ts](apps/frontend/src/types/api.ts:34)** - Type `UserPayload`

#### Backend
- **[auth.controller.ts](apps/backend/src/application/controllers/auth.controller.ts:219)** - Endpoint `/auth/me`
- **[jwt.strategy.ts](apps/backend/src/application/auth/jwt.strategy.ts:68)** - Validation JWT
- **[current-user.decorator.ts](apps/backend/src/application/decorators/current-user.decorator.ts:6)** - Type `UserPayload`

## 🐛 Causes Possibles

### A. **Objet User est `null` ou `undefined`**

**Dans le layout (lignes 95-102):**
```typescript
{user?.firstName?.[0]}  // ← Si user est null, rien ne s'affiche
{user?.lastName?.[0]}
{user?.firstName} {user?.lastName}
{user?.email}
```

**Pourquoi `user` pourrait être null:**
1. **Auth Context n'a pas chargé** - `loading: true` bloque
2. **getCurrentUser() échoue** - Token invalide ou endpoint erreur
3. **Mapping incorrect** - Les champs ne correspondent pas

### B. **Type `UserPayload` Incompatible**

**Frontend ([types/api.ts:34](apps/frontend/src/types/api.ts:34)):**
```typescript
export interface UserPayload {
  id?: string;
  sub?: string;
  email: string;
  firstName?: string;  // ← Optionnel
  lastName?: string;   // ← Optionnel
  role: UserRole;
  organizationId: string;
}
```

**Backend ([current-user.decorator.ts:6](apps/backend/src/application/decorators/current-user.decorator.ts:6)):**
```typescript
export interface UserPayload {
  id: string;
  email: string;
  role: string;
  organizationId: string;
  firstName: string;  // ← Requis
  lastName: string;   // ← Requis
}
```

**⚠️ PROBLÈME:** Les types ne correspondent pas!

### C. **Endpoint `/auth/me` ne retourne pas les bonnes données**

**Nouveau code ([auth.controller.ts:219](apps/backend/src/application/controllers/auth.controller.ts:219)):**
```typescript
async getProfile(@CurrentUser() user: UserPayload) {
  const fullUser = await this.userRepository.findById(user.id);

  if (!fullUser) {
    throw new NotFoundException('User not found');
  }

  return UserMapper.toDto(fullUser);
}
```

**Questions:**
1. ✅ `user.id` existe-t-il? (vient du JWT Strategy)
2. ✅ `userRepository.findById()` trouve-t-il l'utilisateur?
3. ✅ `UserMapper.toDto()` retourne-t-il `firstName` et `lastName`?

### D. **JWT Strategy retourne bien les données**

**Bon code ([jwt.strategy.ts:68](apps/backend/src/application/auth/jwt.strategy.ts:68)):**
```typescript
return {
  id: user.id,
  email: user.email,
  role: user.role,
  organizationId: user.organizationId,
  firstName: user.firstName,   // ✅ Présent
  lastName: user.lastName,     // ✅ Présent
};
```

## 🧪 Composant de Debug Ajouté

**Fichier créé:** [DebugUser.tsx](apps/frontend/src/components/DebugUser.tsx:1)

Ce composant affiche en bas à droite de l'écran:
- ✅ État `loading`
- ✅ Objet `user` complet (JSON)
- ✅ Contenu de `localStorage.getItem('user')`
- ✅ Token JWT (50 premiers caractères)

## 🔧 Solutions à Tester

### Solution 1: Vérifier la Console Navigateur

1. Ouvrez les **DevTools** (F12)
2. Allez dans l'**onglet Console**
3. Cherchez les erreurs:
   - `Auth check failed:`
   - `Failed to refresh user:`
   - Erreurs 401 ou 404

### Solution 2: Vérifier le Panel Debug

Regardez le **panel noir en bas à droite** qui affiche:
```json
{
  "id": "uuid-user",
  "email": "user@example.com",
  "firstName": "John",   // ← Doit être présent
  "lastName": "Doe",     // ← Doit être présent
  "role": "USER",
  "organizationId": "uuid-org"
}
```

**Si `firstName` et `lastName` sont absents:**
- L'endpoint `/api/v1/auth/me` ne retourne pas les bonnes données

**Si tout l'objet `user` est `null`:**
- Le token est invalide ou expiré
- Déconnectez-vous et reconnectez-vous

### Solution 3: Tester l'Endpoint Manuellement

```bash
# Récupérez votre token depuis localStorage (F12 > Application > Local Storage)
TOKEN="votre-token-ici"

# Testez l'endpoint
curl -H "Authorization: Bearer $TOKEN" http://localhost:4000/api/v1/auth/me
```

**Réponse attendue:**
```json
{
  "id": "...",
  "email": "...",
  "firstName": "...",  // ← DOIT être présent
  "lastName": "...",   // ← DOIT être présent
  "role": "...",
  "organizationId": "...",
  "isActive": true,
  "createdAt": "...",
  "updatedAt": "..."
}
```

### Solution 4: Forcer un Rafraîchissement

Ajoutez un console.log dans [auth-context.tsx](apps/frontend/src/lib/context/auth-context.tsx:63):

```typescript
const currentUser = await getCurrentUser();
console.log('🔍 User fetched:', currentUser); // ← AJOUTEZ CECI
setUser(currentUser);
```

## 📋 Checklist de Diagnostic

- [ ] **Backend démarré?** → http://localhost:4000/api/docs
- [ ] **Token valide?** → Vérifier dans DevTools > Application > Local Storage
- [ ] **Endpoint `/auth/me` fonctionne?** → Tester avec curl/Postman
- [ ] **Panel Debug affiche des données?** → Voir coin bas-droite de l'écran
- [ ] **Console a des erreurs?** → F12 > Console
- [ ] **User object dans console?** → Ajoutez des console.log

## 🎯 Prochaines Étapes

1. **Rechargez la page du dashboard**
2. **Regardez le panel debug en bas à droite**
3. **Ouvrez la console (F12)**
4. **Partagez ce que vous voyez:**
   - Contenu du panel debug
   - Erreurs dans la console
   - Réponse de `/auth/me` si vous testez avec curl

---

**Fichiers modifiés pour debug:**
- ✅ [DebugUser.tsx](apps/frontend/src/components/DebugUser.tsx:1) - Composant de debug
- ✅ [dashboard/layout.tsx](apps/frontend/app/dashboard/layout.tsx:162) - Ajout du debug panel

**Pour retirer le debug plus tard:**
Supprimez simplement `<DebugUser />` de la ligne 162 du layout.