# Système de Layout Unifié - Documentation

## Vue d'ensemble

Nous avons implémenté un système de layout unifié professionnel pour l'application d'authentification, remplaçant les entêtes individuels par un layout centralisé et cohérent.

## Architecture

### 1. Layout Principal (`app/Views/layout/main.php`)

**Fonctionnalités :**
- Entête unifié avec logo/lien vers le tableau de bord
- Menu utilisateur avec nom d'utilisateur et menu déroulant
- Système de navigation avec fil d'Ariane (breadcrumbs)
- Gestion des messages flash (succès, erreur, info)
- Design responsive avec Tailwind CSS
- Support pour le contenu dynamique avec sections

**Composants de l'entête :**
- Logo/lien "Tableau de bord" (permanent)
- Titre de la page dynamique
- Informations utilisateur avec dropdown :
  - Nom et prénom
  - Lien vers le profil
  - Bouton de déconnexion

### 2. Helper de Layout (`app/Helpers/LayoutHelper.php`)

**Méthodes principales :**
- `setTitle(string $title)` : Définir le titre de la page
- `addBreadcrumb(string $title, string $url)` : Ajouter un élément au fil d'Ariane
- `setAdminPage(string $title)` : Configuration rapide pour pages admin
- `setUserPage(string $title)` : Configuration rapide pour pages utilisateur
- `getData()` : Récupérer toutes les données de layout

**Fonctions helper (`app/Helpers/layout_helper.php`) :**
- `set_page_title(string $title)`
- `add_breadcrumb(string $title, string $url)`
- `set_admin_page(string $title)`
- `set_user_page(string $title)`

### 3. BaseController Enhanced (`app/Controllers/BaseController.php`)

**Nouvelles méthodes :**
- `renderWithLayout(string $view, array $data = [])` : Rendu avec layout
- `display(string $view, array $data = [])` : Alias pour renderWithLayout
- `checkAuth()` : Vérifier l'authentification
- `checkAdmin()` : Vérifier les droits admin
- `requireAuth()` : Forcer l'authentification
- `requireAdmin()` : Forcer les droits admin

## Contrôleurs Mis à Jour

### 1. Dashboard (`app/Controllers/Dashboard.php`)

**Méthodes modifiées :**
- `index()` : Tableau de bord principal avec nouveau layout
- `applications()` : Liste des applications avec nouveau layout

**Nouvelles vues :**
- `dashboard/index_new.php` : Tableau de bord avec statistiques et accès rapides
- `dashboard/applications_new.php` : Applications groupées par catégorie

### 2. Profile (`app/Controllers/Profile.php`)

**Modifications :**
- Héritage du BaseController enhanced
- Utilisation de `requireAuth()` et `renderWithLayout()`
- Configuration automatique du breadcrumb

### 3. Admin\Applications (`app/Controllers/Admin/Applications.php`)

**Modifications :**
- Héritage du BaseController enhanced
- Utilisation de `requireAdmin()` dans toutes les méthodes
- Remplacement des vues par `renderWithLayout()`
- Configuration automatique des breadcrumbs admin

## Utilisation

### Configuration d'une page standard

```php
public function index()
{
    $this->requireAuth(); // Vérification auth automatique
    
    helper('layout');
    set_page_title('Titre de ma page');
    add_breadcrumb('Tableau de bord', base_url('/dashboard'));
    add_breadcrumb('Ma section', '');
    
    return $this->renderWithLayout('ma-vue', $data);
}
```

### Configuration d'une page admin

```php
public function adminPage()
{
    $this->requireAdmin(); // Vérification admin automatique
    
    helper('layout');
    set_admin_page('Gestion des Utilisateurs'); // Configure automatiquement les breadcrumbs
    
    return $this->renderWithLayout('admin/users/index', $data);
}
```

### Structure d'une vue

```php
<?= $this->extend('layout/main') ?>

<?= $this->section('content') ?>
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
    <!-- Votre contenu ici -->
</div>
<?= $this->endSection() ?>
```

## Avantages

### 1. Maintenance
- Un seul fichier de layout à maintenir
- Modifications de design globales simplifiées
- Cohérence garantie sur toutes les pages

### 2. Fonctionnalités
- Navigation automatique avec breadcrumbs
- Messages flash centralisés
- Authentification automatique
- Design responsive uniforme

### 3. Développement
- Helper functions pour simplifier l'usage
- Configuration rapide avec méthodes utilitaires
- Code plus propre et maintenable

### 4. Expérience utilisateur
- Navigation cohérente
- Lien permanent vers le tableau de bord
- Information utilisateur toujours visible
- Design professionnel et moderne

## Prochaines étapes

1. **Migration des vues existantes** : Adapter toutes les vues existantes au nouveau système
2. **Optimisation** : Ajouter des méta-données, favicon, etc.
3. **Extensions** : Ajouter support pour sidebar, notifications push, etc.
4. **Tests** : Tester toutes les fonctionnalités avec le nouveau layout

## Exemple de breadcrumb automatique

- **Pages utilisateur** : Tableau de bord > Section
- **Pages admin** : Tableau de bord > Administration > Section
- **Pages profil** : Tableau de bord > Mon profil

Le système gère automatiquement la hiérarchie et les liens de navigation.