1. Système d'Analytics (Nouveauté Majeure)
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:
140
admin/src/components/FeaturedModal.tsx
Normal file
140
admin/src/components/FeaturedModal.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from 'react';
|
||||
import { setFeaturedBusiness, removeFeaturedBusiness } from '@/app/actions/business';
|
||||
import { Star, X, Loader2, Save } from 'lucide-react';
|
||||
|
||||
interface Props {
|
||||
business: {
|
||||
id: string;
|
||||
name: string;
|
||||
isFeatured: boolean;
|
||||
founderName?: string | null;
|
||||
founderImageUrl?: string | null;
|
||||
keyMetric?: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export default function FeaturedModal({ business }: Props) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const handleToggleFeature = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
const formData = new FormData(event.currentTarget);
|
||||
const data = {
|
||||
founderName: formData.get('founderName') as string,
|
||||
founderImageUrl: formData.get('founderImageUrl') as string,
|
||||
keyMetric: formData.get('keyMetric') as string,
|
||||
};
|
||||
|
||||
startTransition(async () => {
|
||||
const result = await setFeaturedBusiness(business.id, data);
|
||||
if (result.success) {
|
||||
setIsOpen(false);
|
||||
} else {
|
||||
alert(result.error);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemove = () => {
|
||||
if (confirm("Retirer cet entrepreneur du titre 'Entrepreneur du mois' ?")) {
|
||||
startTransition(async () => {
|
||||
const result = await removeFeaturedBusiness(business.id);
|
||||
if (result.success) setIsOpen(false);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className={`px-3 py-1.5 rounded-lg border text-sm font-medium transition-all flex items-center gap-2 mx-auto ${
|
||||
business.isFeatured
|
||||
? 'bg-amber-500/10 border-amber-500/50 text-amber-500 hover:bg-amber-500/20'
|
||||
: 'bg-slate-800 border-slate-700 text-slate-400 hover:border-slate-500 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
<Star className={`w-4 h-4 ${business.isFeatured ? 'fill-amber-500' : ''}`} />
|
||||
{business.isFeatured ? 'Vedette Active' : 'Mettre en avant'}
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal-content">
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="absolute top-4 right-4 text-slate-500 hover:text-white"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
|
||||
<div className="mb-6">
|
||||
<h2 className="text-2xl font-bold text-white mb-2">💰 Entrepreneur du Mois</h2>
|
||||
<p className="text-slate-400">Configurez les détails pour {business.name}.</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleToggleFeature} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-400">Nom du fondateur</label>
|
||||
<input
|
||||
name="founderName"
|
||||
defaultValue={business.founderName || ''}
|
||||
required
|
||||
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-amber-500"
|
||||
placeholder="Ex: Aliko Dangote"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-400">URL Photo du fondateur</label>
|
||||
<input
|
||||
name="founderImageUrl"
|
||||
defaultValue={business.founderImageUrl || ''}
|
||||
required
|
||||
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-amber-500"
|
||||
placeholder="https://..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-400">Métrique Clé (ex: Chiffre d'affaires, Impact)</label>
|
||||
<input
|
||||
name="keyMetric"
|
||||
defaultValue={business.keyMetric || ''}
|
||||
required
|
||||
className="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white focus:outline-none focus:border-amber-500"
|
||||
placeholder="Ex: +500 emplois créés"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex flex-col gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isPending}
|
||||
className="w-full bg-amber-500 hover:bg-amber-600 text-slate-900 font-bold py-3 rounded-lg flex items-center justify-center gap-2 transition-colors"
|
||||
>
|
||||
{isPending ? <Loader2 className="w-5 h-5 animate-spin" /> : <Save className="w-5 h-5" />}
|
||||
Définir comme Entrepreneur du Mois
|
||||
</button>
|
||||
|
||||
{business.isFeatured && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRemove}
|
||||
disabled={isPending}
|
||||
className="w-full bg-slate-800 hover:bg-red-900/30 text-red-400 font-semibold py-3 rounded-lg transition-colors border border-red-900/50"
|
||||
>
|
||||
Révoquer le titre
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user