feat: implement business detail client view with interactive features including rating, favoriting, messaging, and analytics tracking

app/annuaire/page.tsx

@@ -19,6 +19,7 @@ const AnnuairePageContent = () => {
     const [filterCategory, setFilterCategory] = useState('All');
     const [filterCountry, setFilterCountry] = useState('All');
     const [searchQuery, setSearchQuery] = useState('');
+    const [locationQuery, setLocationQuery] = useState('');
     const searchParams = useSearchParams();
 
     // 1. Fetch Metadata (Countries & Categories)
@@ -69,6 +70,7 @@ const AnnuairePageContent = () => {
                 if (filterCategory !== 'All') params.append('category', filterCategory);
                 if (filterCountry !== 'All') params.append('countryId', filterCountry);
                 if (searchQuery) params.append('q', searchQuery);
+                if (locationQuery) params.append('location', locationQuery);
                 
                 const res = await fetch(`/api/businesses?${params.toString()}`, {
                     headers: user ? { 'x-user-id': user.id } : {}
@@ -86,12 +88,15 @@ const AnnuairePageContent = () => {
 
         const timeoutId = setTimeout(fetchBusinesses, 300); // Debounce
         return () => clearTimeout(timeoutId);
-    }, [filterCategory, searchQuery, filterCountry]);
+    }, [filterCategory, searchQuery, filterCountry, locationQuery]);
 
     useEffect(() => {
         const q = searchParams.get('q');
         if (q) setSearchQuery(q);
         
+        const loc = searchParams.get('location');
+        if (loc) setLocationQuery(loc);
+        
         const cat = searchParams.get('category');
         if (cat) setFilterCategory(cat);
 
@@ -124,6 +129,17 @@ const AnnuairePageContent = () => {
                                 />
                             </div>
 
+                            <div className="mb-6">
+                                <label className="block text-sm font-medium text-gray-700 mb-2">Ville / Localisation</label>
+                                <input
+                                    type="text"
+                                    value={locationQuery}
+                                    onChange={(e) => setLocationQuery(e.target.value)}
+                                    className="w-full border-gray-300 rounded-md shadow-sm focus:ring-brand-500 focus:border-brand-500 sm:text-sm p-2 border"
+                                    placeholder="Ex: Abidjan, Dakar..."
+                                />
+                            </div>
+
                             <div className="mb-6">
                                 <label className="block text-sm font-medium text-gray-700 mb-2">Pays</label>
                                 <select