streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. Système d'Analytics (Nouveauté Majeure)

Browse Source 
Modèle de Données : Ajout de la table AnalyticsEvent dans prisma/schema.prisma pour suivre les vues de pages, les clics et le temps de rétention (DWELL_TIME).
API Backend : Création de la route app/api/analytics/route.ts pour enregistrer les événements en base de données.
Tracking Client : Création du composant AnalyticsTracker.tsx (intégré dans le layout principal) qui capture automatiquement :
Le changement de page (Page Views).
Les clics sur les boutons et liens importants.
Le temps passé sur chaque page.
2. Intégration Base de Données (PostgreSQL/Prisma)
Fiches Entreprises : Mise à jour de app/directory/[id]/page.tsx pour récupérer les données réelles depuis PostgreSQL via Prisma au lieu d'utiliser les données de test (mockData).
Navigation Dashboard : Correction du bouton "Voir ma fiche" dans le tableau de bord pour qu'il redirige correctement vers le profil public de l'entrepreneur.
3. Administration & Metrics
Nouvelle Application Admin : Initialisation d'un dossier admin/ (application Next.js séparée) destinée à la gestion de la plateforme et à la visualisation des statistiques (Metrics & Analytics).
4. Authentification & Inscription
Nouvelle Page : Création de app/register/page.tsx pour permettre l'inscription des nouveaux utilisateurs.
Gestion de Session : Amélioration de UserProvider.tsx pour une meilleure gestion de l'état utilisateur à travers l'application.
5. Maintenance & Types
Mise à jour des types globaux dans types.ts et rafraîchissement du package-lock.json suite à l'ajout de dépendances.
This commit is contained in:
streaper2
2026-04-11 22:20:41 +02:00
parent d88ba7c53c
commit b227657f19
100 changed files with 14142 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/directory/page.tsx
View File

@@ -3,39 +3,70 @@
import React, { useState, useEffect, useMemo, Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { Search } from 'lucide-react';
import { MOCK_BUSINESSES } from '../../lib/mockData';
import { CATEGORIES } from '../../types';
import { Search, Loader2 } from 'lucide-react';
import { CATEGORIES, Business } from '../../types';
import BusinessCard from '../../components/BusinessCard';
import DirectoryHero from '../../components/DirectoryHero';
const DirectoryPageContent = () => {
const [businesses, setBusinesses] = useState<Business[]>([]);
const [featuredBusiness, setFeaturedBusiness] = useState<Business | null>(null);
const [loading, setLoading] = useState(true);
const [filterCategory, setFilterCategory] = useState('All');
const [searchQuery, setSearchQuery] = useState('');
const searchParams = useSearchParams();
// 1. Fetch Featured Headliner once
useEffect(() => {
const fetchHeadliner = async () => {
try {
const res = await fetch('/api/businesses?featured=true');
const data = await res.json();
if (Array.isArray(data) && data.length > 0) {
setFeaturedBusiness(data[0]);
}
} catch (error) {
console.error('Error fetching headliner:', error);
}
};
fetchHeadliner();
}, []);
// 2. Fetch businesses from API
useEffect(() => {
const fetchBusinesses = async () => {
setLoading(true);
try {
const params = new URLSearchParams();
if (filterCategory !== 'All') params.append('category', filterCategory);
if (searchQuery) params.append('q', searchQuery);
const res = await fetch(`/api/businesses?${params.toString()}`);
const data = await res.json();
if (Array.isArray(data)) {
setBusinesses(data);
}
} catch (error) {
console.error('Error fetching businesses:', error);
} finally {
setLoading(false);
}
};
const timeoutId = setTimeout(fetchBusinesses, 300); // Debounce
return () => clearTimeout(timeoutId);
}, [filterCategory, searchQuery]);
useEffect(() => {
const q = searchParams.get('q');
if (q) setSearchQuery(q);
}, [searchParams]);
const featuredBusiness = useMemo(() => {
return MOCK_BUSINESSES.find(b => b.isFeatured);
}, []);
const filteredBusinesses = useMemo(() => {
return MOCK_BUSINESSES.filter(b => {
const matchesCategory = filterCategory === 'All' || b.category === filterCategory;
const matchesSearch = b.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
b.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
b.tags.some(t => t.toLowerCase().includes(searchQuery.toLowerCase()));
return matchesCategory && matchesSearch;
});
}, [filterCategory, searchQuery]);
const filteredBusinesses = businesses;
return (
<div>
{/* New Hero Section */}
{/* Tête d'affiche (Headliner) - Always visible regardless of filters */}
{featuredBusiness && <DirectoryHero featuredBusiness={featuredBusiness} />}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@@ -95,7 +126,12 @@ const DirectoryPageContent = () => {
<span className="text-sm text-gray-500">{filteredBusinesses.length} résultats</span>
</div>
{filteredBusinesses.length > 0 ? (
{loading ? (
<div className="flex flex-col items-center justify-center py-20 bg-white rounded-xl border border-gray-100 shadow-sm">
<Loader2 className="w-12 h-12 text-brand-600 animate-spin mb-4" />
<p className="text-gray-500 font-medium">Chargement des entreprises...</p>
</div>
) : filteredBusinesses.length > 0 ? (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredBusinesses.map(biz => (
<BusinessCard key={biz.id} business={biz} />