feat: add home featured toggle, improve account deletion UI, and update business schema and database configuration.

2026-05-12 07:17:04 +02:00
parent 01cf4dd5a1
commit b81216210a
18 changed files with 533 additions and 271 deletions
--- a/.env
+++ b/.env
@@ -1,9 +1,6 @@
 # Connexion locale via le Docker Compose fourni :
 #DATABASE_URL="postgresql://admin:adminpassword@localhost:5432/afrohub_dev?schema=public"
-DATABASE_URL="postgresql://admin:adminpassword@192.168.1.25:5432/afrohub_dev?connect_timeout=300"
-
-
-#SHADOW_DATABASE_URL="postgresql://postgres:postgres@localhost:5432/shadow_db?schema=public"
+DATABASE_URL="postgresql://admin:adminpassword@192.168.1.25:5432/afrohub_dev?schema=public"

 # Exemple avec Supabase ou Neon (si base distante)
 # DATABASE_URL="postgresql://postgres:[MOT_DE_PASSE]@db.[ID_PROJET].supabase.co:5432/postgres"
--- a/admin/src/app/actions/business.ts
+++ b/admin/src/app/actions/business.ts
@@ -24,21 +24,24 @@ export async function setFeaturedBusiness(id: string, data: {
  keyMetric: string;
 }) {
  try {
-    // 1. Reset all others (we only want one entrepreneur of the month)
+    // 1. Réinitialiser les autres pour n'avoir qu'une seule Tête d'affiche Afroshine active
    await prisma.business.updateMany({
      where: { isFeatured: true },
      data: { isFeatured: false },
    });

-    // 2. Set the new one
+    // 2. Mettre à jour l'entreprise choisie
    await prisma.business.update({
      where: { id },
      data: {
        isFeatured: true,
-        ...data,
+        founderName: data.founderName || null,
+        founderImageUrl: data.founderImageUrl || null,
+        keyMetric: data.keyMetric || null,
      },
    });

+    revalidatePath("/users");
    revalidatePath("/entrepreneurs");
    revalidatePath("/dashboard");
    return { success: true };
@@ -48,12 +51,28 @@ export async function setFeaturedBusiness(id: string, data: {
  }
 }

+export async function toggleHomeFeatured(id: string, currentStatus: boolean) {
+  try {
+    await prisma.business.update({
+      where: { id },
+      data: { isHomeFeatured: !currentStatus },
+    });
+    revalidatePath("/users");
+    revalidatePath("/");
+    return { success: true };
+  } catch (error) {
+    console.error("Failed to toggle home featured:", error);
+    return { success: false, error: "Erreur lors de la mise à jour de la mise à la une" };
+  }
+}
+
 export async function removeFeaturedBusiness(id: string) {
  try {
    await prisma.business.update({
      where: { id },
      data: { isFeatured: false },
    });
+    revalidatePath("/users");
    revalidatePath("/entrepreneurs");
    return { success: true };
  } catch (error) {
--- a/admin/src/app/dashboard/DashboardClient.tsx
+++ b/admin/src/app/dashboard/DashboardClient.tsx
@@ -6,19 +6,48 @@ import {
  Store, 
  Clock, 
  MessageCircle,
-  Eye
+  Eye,
+  CheckCircle2,
+  UserPlus
 } from 'lucide-react';
+import Link from 'next/link';

-interface Stats {
+interface DashboardData {
+  stats: {
    usersCount: number;
    businessCount: number;
    pendingCount: number;
    commentsCount: number;
    totalViews: number;
    uniqueVisitors: number;
+  };
+  latestBusinesses: Array<{
+    id: string;
+    name: string;
+    category: string;
+    logoUrl: string;
+    location: string;
+    createdAt: Date;
+    verified: boolean;
+    plan: string;
+    owner?: {
+      name: string;
+      email: string;
+    };
+  }>;
+  activities: Array<{
+    id: string;
+    type: 'comment' | 'user';
+    title: string;
+    subtitle: string;
+    timestamp: Date;
+    avatar?: string | null;
+  }>;
 }

-export default function DashboardClient({ stats }: { stats: Stats }) {
+export default function DashboardClient({ initialData }: { initialData: DashboardData }) {
+  const { stats, latestBusinesses, activities } = initialData;
+
  const statCards = [
    { label: 'Utilisateurs', value: stats.usersCount, icon: Users, color: 'text-blue-400' },
    { label: 'Visiteurs Uniques', value: stats.uniqueVisitors, icon: Eye, color: 'text-indigo-400' },
@@ -50,16 +79,86 @@ export default function DashboardClient({ stats }: { stats: Stats }) {
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <div className="card">
-          <h2 className="text-xl font-bold text-white mb-4">Derniers entrepreneurs</h2>
-          <div className="space-y-4">
-            <p className="text-slate-500 italic">Bientôt disponible...</p>
+        {/* Derniers entrepreneurs */}
+        <div className="card flex flex-col">
+          <div className="flex justify-between items-center mb-6">
+            <h2 className="text-xl font-bold text-white">Derniers entrepreneurs</h2>
+            <Link href="/users" className="text-xs text-indigo-400 hover:underline font-semibold">
+              Voir tout
+            </Link>
+          </div>
+
+          <div className="space-y-4 flex-1">
+            {latestBusinesses.length === 0 ? (
+              <p className="text-slate-500 italic py-8 text-center">Aucune entreprise récente.</p>
+            ) : (
+              latestBusinesses.map((b) => (
+                <div key={b.id} className="flex items-center justify-between p-3 rounded-xl bg-slate-800/40 hover:bg-slate-800/80 transition-colors border border-slate-800">
+                  <div className="flex items-center gap-3 min-w-0">
+                    <div className="w-10 h-10 rounded-lg bg-slate-800 overflow-hidden flex items-center justify-center border border-slate-700 flex-shrink-0">
+                      {b.logoUrl ? (
+                        <img src={b.logoUrl} alt={b.name} className="w-full h-full object-cover" />
+                      ) : (
+                        <Store className="w-4 h-4 text-slate-500" />
+                      )}
+                    </div>
+                    <div className="min-w-0">
+                      <div className="font-semibold text-white text-sm truncate">{b.name}</div>
+                      <div className="text-xs text-slate-400 truncate">{b.category} • {b.location}</div>
                    </div>
                  </div>
-        <div className="card">
-          <h2 className="text-xl font-bold text-white mb-4">Activité récente</h2>
-          <div className="space-y-4">
-            <p className="text-slate-500 italic">Bientôt disponible...</p>
+
+                  <div className="flex items-center gap-2 flex-shrink-0 ml-3">
+                    <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full uppercase ${
+                      b.plan === 'EMPIRE' ? 'bg-purple-500/10 text-purple-400 border border-purple-500/20' :
+                      b.plan === 'BOOSTER' ? 'bg-amber-500/10 text-amber-400 border border-amber-500/20' :
+                      'bg-slate-500/10 text-slate-400'
+                    }`}>
+                      {b.plan}
+                    </span>
+                    {b.verified ? (
+                      <CheckCircle2 className="w-4 h-4 text-emerald-500" title="Vérifié" />
+                    ) : (
+                      <Clock className="w-4 h-4 text-amber-500" title="En attente" />
+                    )}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* Activité récente */}
+        <div className="card flex flex-col">
+          <h2 className="text-xl font-bold text-white mb-6">Activité récente</h2>
+
+          <div className="space-y-4 flex-1">
+            {activities.length === 0 ? (
+              <p className="text-slate-500 italic py-8 text-center">Aucune activité enregistrée.</p>
+            ) : (
+              activities.map((act) => (
+                <div key={act.id} className="flex items-start gap-3.5 p-3 rounded-xl bg-slate-800/20 border border-slate-800/50">
+                  <div className="mt-0.5 w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center border border-slate-700 flex-shrink-0 overflow-hidden">
+                    {act.avatar ? (
+                      <img src={act.avatar} alt="" className="w-full h-full object-cover" />
+                    ) : act.type === 'comment' ? (
+                      <MessageCircle className="w-3.5 h-3.5 text-purple-400" />
+                    ) : (
+                      <UserPlus className="w-3.5 h-3.5 text-blue-400" />
+                    )}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-2">
+                      <p className="text-xs font-semibold text-slate-200 truncate">{act.title}</p>
+                      <span className="text-[10px] text-slate-500 flex-shrink-0">
+                        {new Date(act.timestamp).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
+                      </span>
+                    </div>
+                    <p className="text-xs text-slate-400 mt-0.5 line-clamp-2">{act.subtitle}</p>
+                  </div>
+                </div>
+              ))
+            )}
          </div>
        </div>
      </div>
--- a/admin/src/app/dashboard/page.tsx
+++ b/admin/src/app/dashboard/page.tsx
@@ -1,7 +1,7 @@
 import { prisma } from '@/lib/prisma';
 import DashboardClient from './DashboardClient';

-async function getStats() {
+async function getDashboardData() {
  const usersCount = await prisma.user.count();
  const businessCount = await prisma.business.count();
  const pendingCount = await prisma.business.count({ where: { verified: false } });
@@ -21,10 +21,81 @@ async function getStats() {
  });
  const uniqueVisitors = uniqueVisitorsRes.length;

-  return { usersCount, businessCount, pendingCount, commentsCount, totalViews, uniqueVisitors };
+  // Derniers entrepreneurs
+  const latestBusinesses = await prisma.business.findMany({
+    take: 5,
+    orderBy: { createdAt: 'desc' },
+    select: {
+      id: true,
+      name: true,
+      category: true,
+      logoUrl: true,
+      location: true,
+      createdAt: true,
+      verified: true,
+      plan: true,
+      owner: {
+        select: {
+          name: true,
+          email: true,
+        }
+      }
+    }
+  });
+
+  // Activité récente (combiner commentaires et nouveaux utilisateurs)
+  const recentComments = await prisma.comment.findMany({
+    take: 5,
+    orderBy: { createdAt: 'desc' },
+    select: {
+      id: true,
+      content: true,
+      createdAt: true,
+      author: { select: { name: true, avatar: true } },
+      business: { select: { name: true } }
+    }
+  });
+
+  const recentUsers = await prisma.user.findMany({
+    take: 5,
+    orderBy: { createdAt: 'desc' },
+    select: {
+      id: true,
+      name: true,
+      role: true,
+      avatar: true,
+      createdAt: true,
+    }
+  });
+
+  // Mapper et trier
+  const activities = [
+    ...recentComments.map(c => ({
+      id: `comment-${c.id}`,
+      type: 'comment' as const,
+      title: `${c.author?.name || 'Un utilisateur'} a commenté sur ${c.business?.name || 'une entreprise'}`,
+      subtitle: c.content.length > 60 ? c.content.substring(0, 60) + '...' : c.content,
+      timestamp: c.createdAt,
+      avatar: c.author?.avatar
+    })),
+    ...recentUsers.map(u => ({
+      id: `user-${u.id}`,
+      type: 'user' as const,
+      title: `Nouvel utilisateur inscrit`,
+      subtitle: `${u.name} a rejoint la plateforme en tant que ${u.role === 'ENTREPRENEUR' ? 'Entrepreneur' : 'Visiteur'}`,
+      timestamp: u.createdAt,
+      avatar: u.avatar
+    }))
+  ].sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime()).slice(0, 6);
+
+  return {
+    stats: { usersCount, businessCount, pendingCount, commentsCount, totalViews, uniqueVisitors },
+    latestBusinesses,
+    activities
+  };
 }

 export default async function DashboardPage() {
-  const stats = await getStats();
-  return <DashboardClient stats={stats} />;
+  const data = await getDashboardData();
+  return <DashboardClient initialData={data} />;
 }
--- a/admin/src/app/globals.css
+++ b/admin/src/app/globals.css
@@ -17,6 +17,7 @@ body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
+  overflow-x: hidden;
 }

 /* Scrollbar */
@@ -42,12 +43,16 @@ body {
  position: fixed;
  left: 0;
  top: 0;
+  z-index: 50;
 }

 .admin-content {
  margin-left: 260px;
  padding: 2rem;
  min-height: 100vh;
+  width: calc(100% - 260px);
+  max-width: calc(100vw - 260px);
+  box-sizing: border-box;
 }

 .nav-link {
--- a/admin/src/app/layout.tsx
+++ b/admin/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({
      <body className={inter.className}>
        <div className="flex min-h-screen">
          <Sidebar />
-          <main className="admin-content flex-1">
+          <main className="admin-content flex-1 min-w-0">
            <Toaster position="top-right" />
            {children}
          </main>
--- a/admin/src/app/users/page.tsx
+++ b/admin/src/app/users/page.tsx
@@ -2,6 +2,7 @@ import { prisma } from '@/lib/prisma';
 import { getClients } from "@/app/actions/user";
 import ToggleVerifyButton from '@/components/ToggleVerifyButton';
 import FeaturedModal from '@/components/FeaturedModal';
+import ToggleHomeFeatureButton from '@/components/ToggleHomeFeatureButton';
 import EntrepreneurActions from '@/components/EntrepreneurActions';
 import PlanSelector from '@/components/PlanSelector';
 import ClientActions from "@/components/ClientActions";
@@ -9,6 +10,7 @@ import ManualVerifyButton from "@/components/ManualVerifyButton";
 import { Trash2, ShieldAlert, ShieldX, ShieldCheck, Users, Briefcase, User, Mail, Phone, MapPin, MailCheck, MailX } from 'lucide-react';
 import Link from 'next/link';

+// Force Turbopack native load
 async function getBusinesses() {
  return await prisma.business.findMany({
    where: {
@@ -87,30 +89,32 @@ export default async function UsersPage({
            )}

            <div className="card overflow-hidden p-0">
-                <table className="data-table">
+                <div className="overflow-x-auto">
+                <table className="data-table min-w-[1200px]">
                <thead>
                    <tr>
-                    <th>Entreprise</th>
+                    <th className="sticky left-0 z-30 bg-[#1e293b] border-r border-slate-700">Entreprise</th>
                    <th>Catégorie</th>
                    <th>Propriétaire</th>
                    <th>Email</th>
                    <th>Statut</th>
                    <th className="text-center">Forfait</th>
-                    <th className="text-center">Mise en avant</th>
+                    <th className="text-center whitespace-nowrap">À la une (Accueil)</th>
+                    <th className="text-center whitespace-nowrap">Afroshine (Annuaire)</th>
                    <th className="text-right">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {businesses.length === 0 ? (
                    <tr>
-                        <td colSpan={8} className="text-center py-10 text-slate-500">
+                        <td colSpan={9} className="text-center py-10 text-slate-500">
                        Aucun entrepreneur trouvé.
                        </td>
                    </tr>
                    ) : (
                    businesses.map((business: any) => (
-                        <tr key={business.id} className={`transition-colors ${business.owner?.deletedAt ? 'bg-red-500/5 opacity-80' : (business.isSuspended || business.owner?.isSuspended) ? 'opacity-60 grayscale-[0.5]' : ''}`}>
-                        <td>
+                        <tr key={business.id} className={`transition-colors ${business.owner?.deletedAt ? 'bg-red-500/5' : (business.isSuspended || business.owner?.isSuspended) ? 'grayscale-[0.5]' : ''}`}>
+                        <td className="sticky left-0 z-20 bg-[#1e293b] border-r border-slate-700">
                            <div className="flex items-center gap-3">
                            <div className="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center overflow-hidden">
                                {business.logoUrl ? (
@@ -129,11 +133,11 @@ export default async function UsersPage({
                            <span className="text-sm text-slate-300">{business.category}</span>
                        </td>
                        <td>
-                            <div className="text-sm text-white">{business.owner.name}</div>
-                            <div className="text-xs text-slate-500">{business.owner.email}</div>
+                            <div className="text-sm text-white">{business.owner?.name || 'Inconnu'}</div>
+                            <div className="text-xs text-slate-500">{business.owner?.email || 'N/A'}</div>
                        </td>
                        <td>
-                            {business.owner.emailVerified ? (
+                            {business.owner?.emailVerified ? (
                                <span className="flex items-center gap-1.5 text-[10px] text-emerald-500 font-bold uppercase">
                                    <MailCheck className="w-3.5 h-3.5" /> Vérifié
                                </span>
@@ -142,7 +146,7 @@ export default async function UsersPage({
                                    <span className="flex items-center gap-1.5 text-[10px] text-rose-500 font-bold uppercase">
                                        <MailX className="w-3.5 h-3.5" /> Non vérifié
                                    </span>
-                                    <ManualVerifyButton userId={business.owner.id} />
+                                    {business.owner?.id && <ManualVerifyButton userId={business.owner.id} />}
                                </div>
                            )}
                        </td>
@@ -170,6 +174,9 @@ export default async function UsersPage({
                        <td className="text-center">
                            <PlanSelector businessId={business.id} currentPlan={business.plan} />
                        </td>
+                        <td className="text-center">
+                            <ToggleHomeFeatureButton id={business.id} isHomeFeatured={!!business.isHomeFeatured} />
+                        </td>
                        <td className="text-center">
                            <FeaturedModal business={business} />
                        </td>
@@ -180,8 +187,8 @@ export default async function UsersPage({
                                <EntrepreneurActions 
                                    businessId={business.id} 
                                    businessName={business.name}
-                                    userId={business.owner.id}
-                                    userName={business.owner.name}
+                                    userId={business.owner?.id || ''}
+                                    userName={business.owner?.name || 'Inconnu'}
                                    isBusinessSuspended={!!business.isSuspended}
                                    isUserSuspended={!!business.owner?.isSuspended}
                                    metaTitle={business.metaTitle}
@@ -196,13 +203,14 @@ export default async function UsersPage({
                </table>
                </div>
            </div>
+        </div>
      ) : (
-        <div className="card overflow-hidden">
+        <div className="card overflow-hidden p-0">
            <div className="overflow-x-auto">
-            <table className="data-table">
+            <table className="data-table min-w-[1000px]">
                <thead>
                <tr>
-                    <th>Utilisateur</th>
+                    <th className="sticky left-0 z-30 bg-[#1e293b] border-r border-slate-700">Utilisateur</th>
                    <th>Contact</th>
                    <th>Vérification</th>
                    <th>Localisation</th>
@@ -222,8 +230,8 @@ export default async function UsersPage({
                    </tr>
                ) : (
                    clients.map((client: any) => (
-                    <tr key={client.id} className={`hover:bg-slate-800/30 transition-colors ${client.deletedAt ? 'bg-red-500/5 opacity-80' : client.isSuspended ? 'opacity-60 grayscale-[0.5]' : ''}`}>
-                        <td className="py-4">
+                    <tr key={client.id} className={`hover:bg-slate-800/30 transition-colors ${client.deletedAt ? 'bg-red-500/5' : client.isSuspended ? 'grayscale-[0.5]' : ''}`}>
+                        <td className="sticky left-0 z-20 bg-[#1e293b] border-r border-slate-700 py-4">
                        <div className="flex items-center gap-3">
                            <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 font-bold text-sm overflow-hidden border border-slate-700">
                            {client.avatar ? (
--- a/admin/src/components/BusinessSeoModal.tsx
+++ b/admin/src/components/BusinessSeoModal.tsx
@@ -1,6 +1,7 @@
 "use client";

-import React, { useState, useTransition } from 'react';
+import React, { useState, useEffect, useTransition } from 'react';
+import { createPortal } from 'react-dom';
 import { X, Save, Loader2, Globe } from 'lucide-react';
 import { updateBusinessSeo } from '@/app/actions/business';
 import { toast } from 'react-hot-toast';
@@ -20,8 +21,14 @@ export default function BusinessSeoModal({ isOpen, onClose, business }: Business
  const [isPending, startTransition] = useTransition();
  const [metaTitle, setMetaTitle] = useState(business.metaTitle || '');
  const [metaDescription, setMetaDescription] = useState(business.metaDescription || '');
+  const [mounted, setMounted] = useState(false);

-  if (!isOpen) return null;
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!isOpen || !mounted) return null;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
@@ -39,8 +46,8 @@ export default function BusinessSeoModal({ isOpen, onClose, business }: Business
    });
  };

-  return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+  const modalContent = (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-slate-950/80 backdrop-blur-sm" onClick={onClose} />
      
      <div className="relative bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg shadow-2xl animate-in zoom-in duration-200">
@@ -117,4 +124,6 @@ export default function BusinessSeoModal({ isOpen, onClose, business }: Business
      </div>
    </div>
  );
+
+  return createPortal(modalContent, document.body);
 }
--- a/admin/src/components/DeleteAccountButton.tsx
+++ b/admin/src/components/DeleteAccountButton.tsx
@@ -1,6 +1,7 @@
 "use client";

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { UserX, Loader2 } from 'lucide-react';
 import { scheduleUserDeletion } from '@/app/actions/user';
 import { toast } from 'react-hot-toast';
@@ -16,6 +17,12 @@ export default function DeleteAccountButton({ userId, userName }: DeleteAccountB
  const [reason, setReason] = useState("Non-respect des conditions générales d'utilisation");
  const [customReason, setCustomReason] = useState("");
  const [delay, setDelay] = useState(30);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);

  const reasons = [
    "Non-respect des conditions générales d'utilisation",
@@ -57,19 +64,8 @@ export default function DeleteAccountButton({ userId, userName }: DeleteAccountB
    }
  };

-  return (
-    <>
-      <button
-        onClick={() => setIsOpen(true)}
-        className="flex items-center gap-1.5 px-3 py-1.5 bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white rounded-lg transition-all text-[10px] font-bold uppercase border border-red-500/20"
-        title="Supprimer le compte"
-      >
-        <UserX className="w-3 h-3" />
-        Supprimer
-      </button>
-
-      {isOpen && (
-        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
+  const modalContent = (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm animate-in fade-in duration-200">
      <div className="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-lg p-6 shadow-2xl animate-in zoom-in-95 duration-200">
        <div className="flex items-center gap-4 mb-6">
          <div className="w-12 h-12 bg-red-500/10 rounded-xl flex items-center justify-center text-red-500">
@@ -172,7 +168,20 @@ export default function DeleteAccountButton({ userId, userName }: DeleteAccountB
        </div>
      </div>
    </div>
-      )}
+  );
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="flex items-center gap-1.5 px-3 py-1.5 bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white rounded-lg transition-all text-[10px] font-bold uppercase border border-red-500/20"
+        title="Supprimer le compte"
+      >
+        <UserX className="w-3 h-3" />
+        Supprimer
+      </button>
+
+      {mounted && isOpen && createPortal(modalContent, document.body)}
    </>
  );
 }
--- a/admin/src/components/FeaturedModal.tsx
+++ b/admin/src/components/FeaturedModal.tsx
@@ -1,6 +1,7 @@
 "use client";

-import { useState, useTransition } from 'react';
+import { useState, useEffect, useTransition } from 'react';
+import { createPortal } from 'react-dom';
 import { setFeaturedBusiness, removeFeaturedBusiness } from '@/app/actions/business';
 import { Star, X, Loader2, Save } from 'lucide-react';
 import { toast } from 'react-hot-toast';
@@ -19,6 +20,12 @@ interface Props {
 export default function FeaturedModal({ business }: Props) {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);

  const handleToggleFeature = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
@@ -54,23 +61,9 @@ export default function FeaturedModal({ business }: Props) {
    }
  };

-  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">
+  const modalContent = (
+    <div className="modal-overlay" style={{ zIndex: 9999 }}>
+      <div className="modal-content max-w-md shadow-2xl">
        <button 
          onClick={() => setIsOpen(false)}
          className="absolute top-4 right-4 text-slate-500 hover:text-white"
@@ -79,39 +72,38 @@ export default function FeaturedModal({ business }: Props) {
        </button>

        <div className="mb-6">
-              <h2 className="text-2xl font-bold text-white mb-2">💰 Afroshine</h2>
-              <p className="text-slate-400">Configurez les détails pour {business.name}.</p>
+          <h2 className="text-2xl font-bold text-white mb-2">💰 Mise en avant / Afroshine</h2>
+          <p className="text-slate-400 text-sm">
+            Activez la présence dans la section <strong>"Entreprises à la une"</strong> sur l'accueil. Vous pouvez aussi renseigner les détails optionnels pour l'afficher en <strong>Tête d'affiche (Afroshine)</strong> dans l'annuaire.
+          </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>
+            <label className="text-sm font-medium text-slate-400">Nom du fondateur (Optionnel)</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>
+            <label className="text-sm font-medium text-slate-400">URL Photo du fondateur (Optionnel)</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>
+            <label className="text-sm font-medium text-slate-400">Métrique Clé (Optionnel, ex: 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"
            />
@@ -141,7 +133,25 @@ export default function FeaturedModal({ business }: Props) {
        </form>
      </div>
    </div>
-      )}
+  );
+
+  return (
+    <>
+      <button 
+        onClick={() => setIsOpen(true)}
+        className={`px-2.5 py-1 rounded-md border text-xs font-medium transition-all flex items-center gap-1.5 mx-auto whitespace-nowrap w-fit ${
+          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'
+        }`}
+        title="Configurer la mise en avant Afroshine (Annuaire)"
+      >
+        <Star className={`w-3.5 h-3.5 ${business.isFeatured ? 'fill-amber-500' : ''}`} />
+        {business.isFeatured ? 'Actif' : 'Activer'}
+      </button>
+
+      {mounted && isOpen && createPortal(modalContent, document.body)}
    </>
  );
 }
+
--- a/admin/src/components/Sidebar.tsx
+++ b/admin/src/components/Sidebar.tsx
@@ -47,7 +47,7 @@ export default function Sidebar() {
  }, [pathname]); // Refresh on navigation

  return (
-    <div className="admin-sidebar p-6 flex flex-col">
+    <div className="admin-sidebar z-50 p-6 flex flex-col">
      <div className="flex items-center gap-3 mb-10 px-2">
        <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center">
          <ShieldCheck className="text-white" />
--- a/admin/src/components/ToggleHomeFeatureButton.tsx
+++ b/admin/src/components/ToggleHomeFeatureButton.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useTransition } from 'react';
+import { toggleHomeFeatured } from '@/app/actions/business';
+import { Sparkles, Loader2 } from 'lucide-react';
+import { toast } from 'react-hot-toast';
+
+interface Props {
+  id: string;
+  isHomeFeatured: boolean;
+}
+
+export default function ToggleHomeFeatureButton({ id, isHomeFeatured }: Props) {
+  const [isPending, startTransition] = useTransition();
+
+  const handleToggle = () => {
+    startTransition(async () => {
+      const result = await toggleHomeFeatured(id, isHomeFeatured);
+      if (result.success) {
+        toast.success(isHomeFeatured ? "Retiré de l'accueil" : "Ajouté à l'accueil");
+      } else {
+        toast.error(result.error || "Une erreur est survenue");
+      }
+    });
+  };
+
+  return (
+    <button 
+      onClick={handleToggle}
+      disabled={isPending}
+      className={`px-2.5 py-1 rounded-md border text-xs font-medium transition-all flex items-center gap-1.5 mx-auto whitespace-nowrap w-fit ${
+        isHomeFeatured 
+          ? 'bg-indigo-500/10 border-indigo-500/50 text-indigo-400 hover:bg-indigo-500/20' 
+          : 'bg-slate-800 border-slate-700 text-slate-400 hover:border-slate-500 hover:text-white'
+      }`}
+      title="Afficher dans la section 'Entreprises à la une' sur la page d'accueil"
+    >
+      {isPending ? (
+        <Loader2 className="w-3.5 h-3.5 animate-spin" />
+      ) : (
+        <Sparkles className={`w-3.5 h-3.5 ${isHomeFeatured ? 'text-indigo-400 fill-indigo-400' : ''}`} />
+      )}
+      {isHomeFeatured ? 'Actif' : 'Activer'}
+    </button>
+  );
+}
--- a/admin/src/lib/prisma.ts
+++ b/admin/src/lib/prisma.ts
@@ -1,28 +1,19 @@
 import { PrismaClient } from '@prisma/client'
-import { PrismaPg } from '@prisma/adapter-pg'
-import pg from 'pg'

-const globalForPrisma = globalThis as unknown as { prisma_v4?: PrismaClient }
+const connectionString = process.env.DATABASE_URL || "postgresql://admin:adminpassword@192.168.1.25:5432/afrohub_dev?schema=public"

-function createPrismaClient() {
-  const connectionString = process.env.DATABASE_URL
+const globalForPrisma = globalThis as unknown as { prisma_admin_native?: PrismaClient }

-  if (!connectionString && process.env.NODE_ENV === 'production') {
-    console.warn("DATABASE_URL is missing during build.");
-  }
+export const prisma = globalForPrisma.prisma_admin_native || new PrismaClient({
+  datasources: {
+    db: {
+      url: connectionString,
+    },
+  },
+})

-  const pool = new pg.Pool({ connectionString: connectionString || "" })
-  const adapter = new PrismaPg(pool)
-  return new PrismaClient({ adapter })
-}
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma_admin_native = prisma
+
+export default prisma

-export const prisma = new Proxy({} as PrismaClient, {
-  get(target, prop) {
-    if (!globalForPrisma.prisma_v4) {
-      globalForPrisma.prisma_v4 = createPrismaClient();
-    }
-    return (globalForPrisma.prisma_v4 as any)[prop];
-  }
-});

-export default prisma;
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -46,7 +46,7 @@ export default async function HomePage() {
  // Fetch initial data for faster loading and SEO
  const [featuredBusinesses, posts, categories, slides] = await Promise.all([
    prisma.business.findMany({
-      where: { isFeatured: true, isActive: true, isSuspended: false },
+      where: { isHomeFeatured: true, isActive: true, isSuspended: false },
      take: 4,
      include: { categoryRef: true }
    }),
--- a/components/AnnuaireHero.tsx
+++ b/components/AnnuaireHero.tsx
@@ -56,9 +56,11 @@ const AnnuaireHero = ({ featuredBusiness }: { featuredBusiness: Business }) => {
            <h2 className="text-3xl md:text-4xl font-bold font-serif text-gray-900 mb-2">
              {featuredBusiness.name}
            </h2>
+            {featuredBusiness.founderName && (
              <p className="text-lg text-gray-600 mb-4 font-medium">
                Dirigé par <span className="text-brand-600">{featuredBusiness.founderName}</span>
              </p>
+            )}
            
            <div className="flex flex-wrap gap-4 text-sm text-gray-500 mb-6">
              <div className="flex items-center"><Briefcase className="w-4 h-4 mr-1"/> {featuredBusiness.category}</div>
--- a/lib/prisma.ts
+++ b/lib/prisma.ts
@@ -10,11 +10,11 @@ function makePrisma() {
    return new PrismaClient({ adapter })
 }

-const globalForPrisma = globalThis as unknown as { prisma_v2: PrismaClient }
+const globalForPrisma = globalThis as unknown as { prisma_v3: PrismaClient }

-// Updated: 2026-05-10T17:21 (Forced reload for OneShotPlan model)
-export const prisma = globalForPrisma.prisma_v2 || makePrisma()
+// Updated: 2026-05-12 (Forced reload for isHomeFeatured model)
+export const prisma = globalForPrisma.prisma_v3 || makePrisma()

-if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma_v2 = prisma
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma_v3 = prisma

 export default prisma
--- a/package-lock.json
+++ b/package-lock.json
@@ -2471,7 +2471,7 @@
      "version": "19.2.14",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "csstype": "^3.2.2"
@@ -6376,7 +6376,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/js-yaml": {
@@ -6830,7 +6829,6 @@
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "js-tokens": "^3.0.0 || ^4.0.0"
@@ -7139,7 +7137,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -7672,7 +7669,6 @@
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.4.0",
@@ -7684,7 +7680,6 @@
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/protobufjs": {
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -59,6 +59,7 @@ model Business {
  ratingCount       Int               @default(0)
  tags              String[]
  isFeatured        Boolean           @default(false)
+  isHomeFeatured    Boolean           @default(false)
  founderName       String?
  founderImageUrl   String?
  keyMetric         String?