Function ClientsSearchAndFilters

Composant ClientsSearchAndFilters - Interface de recherche et filtrage des clients AdminJO

Ce composant fournit une interface complète de recherche textuelle et de filtrage par statut pour la gestion des clients. Il s'agit d'un composant contrôlé qui gère la saisie utilisateur et les sélections de filtre via des callbacks vers le composant parent.

Fonctionnalités réellement implémentées

Recherche textuelle en temps réel

• Champ de recherche : Input avec placeholder explicite et icône de loupe
• Recherche multi-critères : Nom, prénom, téléphone ou email
• Temps réel : Mise à jour instantanée lors de la saisie
• Icône visuelle : Emoji loupe (🔍) dans le champ de saisie
• Focus states : États visuels avec bordure bleue et ring sur focus

Filtrage par statut d'activation

• Trois options : Tous, Actifs, Inactifs
• État sélectionné

Indicateur de fonctionnement

• Texte informatif : "Recherche en temps réel"
• Position : Côté droit de l'interface
• Information utilisateur : Clarification du comportement

Composant contrôlé

• Search term : Valeur contrôlée par le parent
• Status filter : Sélection gérée par le parent
• Callbacks : Remontée des changements via props
• Réactivité : Mise à jour immédiate sur interaction

Types de filtres

• 'all' : Affiche tous les clients sans distinction
• 'active' : Filtre sur client.user.is_active = true
• 'inactive' : Filtre sur client.user.is_active = false

Interactions utilisateur

Saisie de recherche

• Event handling : onChange avec e.target.value
• Callback immédiat : onSearchChange appelé à chaque keystroke
• Debouncing : Non implémenté (géré par le parent si nécessaire)
• Vide autorisé : Possibilité de vider la recherche

Sélection de filtre

• Click handlers : onClick sur chaque bouton de statut
• État exclusif : Un seul filtre actif à la fois
• Feedback visuel : Changement immédiat d'apparence