# 🚀 Guide de Démarrage Rapide - Notifications

## Installation terminée ✅

Le système de notifications est déjà intégré dans votre application. Vous pouvez l'utiliser immédiatement !

## Utilisation en 3 étapes simples

### Étape 1 : Importer le composable

Dans votre composant Vue, ajoutez l'import :

```javascript
import { useNotification } from "@/composables/useNotification";
```

### Étape 2 : Initialiser dans setup()

```javascript
export default {
  setup() {
    const notification = useNotification();
    
    return {
      notification
    };
  }
}
```

### Étape 3 : Utiliser dans vos fonctions

```javascript
// Pour une création
notification.created("Le client");

// Pour une mise à jour
notification.updated("La catégorie");

// Pour une suppression
notification.deleted("Le produit");
```

## 📋 Exemple complet pour un formulaire de client

```javascript
<script>
import { useNotification } from "@/composables/useNotification";
import ClientService from "@/services/client";

export default {
  name: "NewClientForm",
  setup() {
    const notification = useNotification();
    
    const createClient = async (formData) => {
      try {
        await ClientService.create(formData);
        notification.created("Le client");
        // Redirection ou autre action...
      } catch (error) {
        notification.error("Erreur", "Impossible de créer le client");
      }
    };
    
    return {
      createClient
    };
  }
}
</script>
```

## 🔄 Pour une mise à jour

```javascript
const updateClient = async (id, formData) => {
  try {
    await ClientService.update(id, formData);
    notification.updated("Le client");
  } catch (error) {
    notification.error("Erreur", error.message);
  }
};
```

## ❌ Pour une suppression

```javascript
const deleteClient = async (id) => {
  try {
    await ClientService.delete(id);
    notification.deleted("Le client");
    await fetchClients(); // Recharger la liste
  } catch (error) {
    notification.error("Erreur", "Impossible de supprimer le client");
  }
};
```

## 🎨 Autres types de notifications

```javascript
// Succès personnalisé
notification.success("Bravo !", "L'opération a réussi");

// Erreur personnalisée
notification.error("Oups !", "Une erreur s'est produite");

// Avertissement
notification.warning("Attention", "Vérifiez vos données");

// Information
notification.info("Info", "Nouvelle fonctionnalité disponible");
```

## ⏱️ Changer la durée d'affichage

Par défaut : 5 secondes. Pour changer :

```javascript
notification.created("Le client", 3000); // 3 secondes
notification.success("Titre", "Message", 10000); // 10 secondes
```

## 📍 Où apparaissent les notifications ?

- **Position** : En haut à droite de l'écran
- **Mobile** : Pleine largeur en haut
- **Animation** : Glisse depuis la droite
- **Fermeture** : Automatique après 5s ou clic sur X

## 🧪 Tester le système

Vous pouvez tester toutes les notifications sur la page d'exemples.
Voir le fichier `NOTIFICATIONS.md` pour plus de détails.

## 💡 Astuce

Pour un code plus propre, vous pouvez utiliser le composable directement dans vos méthodes :

```javascript
const { created, updated, deleted, error, success } = useNotification();

// Puis simplement :
created("Le client");
updated("La catégorie");
deleted("Le produit");
```

## ❓ Questions fréquentes

**Q: Les notifications fonctionnent-elles sur toutes les pages ?**
R: Oui, elles sont globales et fonctionnent partout.

**Q: Puis-je avoir plusieurs notifications en même temps ?**
R: Oui, elles s'empilent automatiquement.

**Q: Comment changer la position des notifications ?**
R: Voir le fichier `NOTIFICATIONS.md` pour la configuration avancée.

---

📚 **Pour plus d'informations**, consultez `NOTIFICATIONS.md`