feat: implement core platform features including business directory, admin dashboard, authentication, and API infrastructure

admin/src/components/FeaturedModal.tsx

@@ -40,7 +40,7 @@ export default function FeaturedModal({ business }: Props) {
     });
   };
 
-  const handleRemove = () => {
+  const handleRemove = async () => {
     if (confirm("Retirer cet entrepreneur du titre 'Entrepreneur du mois' ?")) {
       startTransition(async () => {
         const result = await removeFeaturedBusiness(business.id);
@@ -48,7 +48,7 @@ export default function FeaturedModal({ business }: Props) {
           toast.success("Titre révoqué");
           setIsOpen(false);
         } else {
-          toast.error(result.error);
+          toast.error(result.error || "Une erreur est survenue lors de la suppression");
         }
       });
     }

admin/src/components/LegalEditor.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import React, { useState } from 'react';
+import { LegalDocument } from '@prisma/client';
+import RichTextEditor from './RichTextEditor';
+import { updateLegalDocument } from '@/app/actions/legal';
+import { toast } from 'react-hot-toast';
+import { FileText, Save, Loader2 } from 'lucide-react';
+
+interface Props {
+  initialCgu: LegalDocument | null;
+  initialCgv: LegalDocument | null;
+}
+
+export default function LegalEditor({ initialCgu, initialCgv }: Props) {
+  const [activeTab, setActiveTab] = useState<'CGU' | 'CGV'>('CGU');
+  const [cgu, setCgu] = useState({
+    title: initialCgu?.title || "Conditions Générales d'Utilisation",
+    content: initialCgu?.content || ""
+  });
+  const [cgv, setCgv] = useState({
+    title: initialCgv?.title || "Conditions Générales de Vente",
+    content: initialCgv?.content || ""
+  });
+  const [isSaving, setIsSaving] = useState(false);
+
+  const currentDoc = activeTab === 'CGU' ? cgu : cgv;
+
+  const handleUpdate = (field: string, value: string) => {
+    if (activeTab === 'CGU') {
+      setCgu(prev => ({ ...prev, [field]: value }));
+    } else {
+      setCgv(prev => ({ ...prev, [field]: value }));
+    }
+  };
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const result = await updateLegalDocument(activeTab, currentDoc.title, currentDoc.content);
+      if (result.success) {
+        toast.success(`${activeTab} mis à jour avec succès`);
+      } else {
+        toast.error(result.error || "Une erreur est survenue");
+      }
+    } catch (error) {
+      toast.error("Erreur de connexion au serveur");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex bg-slate-900/50 p-1 rounded-xl border border-slate-800 w-fit">
+        <button
+          onClick={() => setActiveTab('CGU')}
+          className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${
+            activeTab === 'CGU' 
+              ? 'bg-indigo-600 text-white shadow-lg' 
+              : 'text-slate-400 hover:text-white hover:bg-slate-800'
+          }`}
+        >
+          CGU
+        </button>
+        <button
+          onClick={() => setActiveTab('CGV')}
+          className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${
+            activeTab === 'CGV' 
+              ? 'bg-indigo-600 text-white shadow-lg' 
+              : 'text-slate-400 hover:text-white hover:bg-slate-800'
+          }`}
+        >
+          CGV
+        </button>
+      </div>
+
+      <div className="card">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-indigo-600/20 text-indigo-400 rounded-xl flex items-center justify-center">
+              <FileText className="w-5 h-5" />
+            </div>
+            <div>
+              <h2 className="text-xl font-bold text-white">Modifier {activeTab}</h2>
+              <p className="text-sm text-slate-400">Dernière mise à jour : {new Date().toLocaleDateString('fr-FR')}</p>
+            </div>
+          </div>
+
+          <button
+            onClick={handleSave}
+            disabled={isSaving}
+            className="btn-primary flex items-center gap-2"
+          >
+            {isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+            Enregistrer les modifications
+          </button>
+        </div>
+
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-400 mb-1.5 ml-1">Titre du document</label>
+            <input
+              type="text"
+              value={currentDoc.title}
+              onChange={(e) => handleUpdate('title', e.target.value)}
+              className="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:ring-2 focus:ring-indigo-500 outline-none transition-all"
+              placeholder="Ex: Conditions Générales d'Utilisation"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-slate-400 mb-1.5 ml-1">Contenu</label>
+            <RichTextEditor 
+              value={currentDoc.content} 
+              onChange={(val) => handleUpdate('content', val)}
+              placeholder={`Commencez à rédiger vos ${activeTab}...`}
+            />
+          </div>
+        </div>
+      </div>
+      
+      <div className="bg-amber-500/10 border border-amber-500/30 p-4 rounded-xl flex items-center gap-3 text-amber-500">
+        <div className="shrink-0 w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center">!</div>
+        <p className="text-sm font-medium">
+          Attention : Les modifications seront immédiatement visibles pour tous les utilisateurs sur le site public une fois enregistrées.
+        </p>
+      </div>
+    </div>
+  );
+}

admin/src/components/PlanEditModal.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import React, { useState } from 'react';
+import { X, Plus, Trash2, Save, Loader2 } from 'lucide-react';
+import { updatePricingPlanDetail } from '@/app/actions/plans';
+import { toast } from 'react-hot-toast';
+
+interface PlanEditModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  plan: any;
+}
+
+export default function PlanEditModal({ isOpen, onClose, plan }: PlanEditModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    name: plan.name,
+    priceXOF: plan.priceXOF,
+    priceEUR: plan.priceEUR,
+    description: plan.description,
+    offerLimit: plan.offerLimit.toString(),
+    recommended: plan.recommended,
+    color: plan.color,
+  });
+  const [features, setFeatures] = useState<string[]>(plan.features || []);
+
+  const handleAddFeature = () => {
+    setFeatures([...features, '']);
+  };
+
+  const handleFeatureChange = (index: number, value: string) => {
+    const newFeatures = [...features];
+    newFeatures[index] = value;
+    setFeatures(newFeatures);
+  };
+
+  const handleRemoveFeature = (index: number) => {
+    setFeatures(features.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const result = await updatePricingPlanDetail(plan.id, {
+        ...formData,
+        features: features.filter(f => f.trim() !== ''),
+      });
+      if (result.success) {
+        toast.success("Détails du forfait mis à jour !");
+        onClose();
+        window.location.reload(); // Refresh to catch changes
+      } else {
+        toast.error(result.error || "Erreur lors de la sauvegarde.");
+      }
+    } catch (error) {
+      toast.error("Erreur réseau");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 sm:p-6">
+      <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-sm transition-opacity" onClick={onClose}></div>
+      
+      <div className="relative bg-slate-900 border border-slate-700 w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden max-h-[90vh] flex flex-col transition-all">
+        {/* Header */}
+        <div className="p-6 border-b border-slate-700 flex justify-between items-center bg-slate-800/50">
+          <div>
+            <h2 className="text-xl font-bold text-white font-serif">Modifier le plan {plan.tier}</h2>
+            <p className="text-sm text-slate-400">Configurez l'affichage et les limites de ce forfait.</p>
+          </div>
+          <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 overflow-y-auto flex-1">
+          <form id="plan-form" onSubmit={handleSubmit} className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Nom affiché</label>
+                <input 
+                  value={formData.name}
+                  onChange={(e) => setFormData({...formData, name: e.target.value})}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Limite d'offres</label>
+                <input 
+                  type="number"
+                  value={formData.offerLimit}
+                  onChange={(e) => setFormData({...formData, offerLimit: e.target.value})}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix XOF (Texte)</label>
+                <input 
+                  value={formData.priceXOF}
+                  onChange={(e) => setFormData({...formData, priceXOF: e.target.value})}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors"
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Prix EUR (Texte)</label>
+                <input 
+                  value={formData.priceEUR}
+                  onChange={(e) => setFormData({...formData, priceEUR: e.target.value})}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Description</label>
+              <textarea 
+                rows={2}
+                value={formData.description}
+                onChange={(e) => setFormData({...formData, description: e.target.value})}
+                className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors resize-none"
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-6">
+                <div className="space-y-2">
+                    <label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Couleur (Tailwind)</label>
+                    <select 
+                        value={formData.color}
+                        onChange={(e) => setFormData({...formData, color: e.target.value})}
+                        className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors"
+                    >
+                        <option value="gray">Gris (Starter)</option>
+                        <option value="brand">Brand (Booster)</option>
+                        <option value="amber">Amber (Empire)</option>
+                        <option value="rose">Rose</option>
+                        <option value="blue">Blue</option>
+                    </select>
+                </div>
+                <div className="flex items-end pb-3">
+                    <label className="flex items-center gap-3 cursor-pointer group">
+                        <div className={`w-10 h-6 rounded-full transition-colors relative ${formData.recommended ? 'bg-indigo-600' : 'bg-slate-700'}`}>
+                            <div className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform ${formData.recommended ? 'translate-x-4' : ''}`} />
+                        </div>
+                        <input 
+                            type="checkbox"
+                            className="sr-only"
+                            checked={formData.recommended}
+                            onChange={(e) => setFormData({...formData, recommended: e.target.checked})}
+                        />
+                        <span className="text-sm font-medium text-slate-300 group-hover:text-white transition-colors uppercase tracking-wider">Mettre en avant</span>
+                    </label>
+                </div>
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <label className="text-sm font-medium text-slate-400 font-sans uppercase tracking-wider">Avantages du plan</label>
+                <button 
+                  type="button" 
+                  onClick={handleAddFeature}
+                  className="text-xs font-bold text-indigo-400 hover:text-indigo-300 flex items-center gap-1 uppercase tracking-tight"
+                >
+                  <Plus className="w-3 h-3" /> Ajouter un avantage
+                </button>
+              </div>
+              <div className="space-y-3">
+                {features.map((feature, index) => (
+                  <div key={index} className="flex gap-2">
+                    <input 
+                      value={feature}
+                      onChange={(e) => handleFeatureChange(index, e.target.value)}
+                      placeholder="Ex: 50 Offres produits"
+                      className="flex-1 bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 transition-colors"
+                    />
+                    <button 
+                      type="button"
+                      onClick={() => handleRemoveFeature(index)}
+                      className="p-3 text-slate-500 hover:text-rose-500 bg-slate-950 border border-slate-700 rounded-xl transition-colors"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </form>
+        </div>
+
+        {/* Footer */}
+        <div className="p-6 border-t border-slate-700 bg-slate-800/50 flex justify-end gap-3">
+          <button 
+            type="button" 
+            onClick={onClose}
+            className="px-6 py-2.5 rounded-xl font-bold text-slate-400 hover:text-white border border-slate-700 hover:bg-slate-700 transition-all uppercase tracking-wider text-sm"
+          >
+            Annuler
+          </button>
+          <button 
+            type="submit" 
+            form="plan-form"
+            disabled={loading}
+            className="px-8 py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:bg-slate-700 text-white rounded-xl font-bold transition-all shadow-lg flex items-center gap-2 uppercase tracking-wider text-sm"
+          >
+            {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : <Save className="w-5 h-5" />}
+            Sauvegarder
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

admin/src/components/PlanSelector.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React, { useState } from 'react';
+import { updateBusinessPlan } from '@/app/actions/plans';
+import { toast } from 'react-hot-toast';
+import { CreditCard, Loader2 } from 'lucide-react';
+
+interface PlanSelectorProps {
+  businessId: string;
+  currentPlan: string;
+}
+
+const PLANS = [
+  { id: 'STARTER', name: 'Starter', color: 'text-slate-400', bg: 'bg-slate-400/10' },
+  { id: 'BOOSTER', name: 'Booster', color: 'text-brand-400', bg: 'bg-brand-400/10' },
+  { id: 'EMPIRE', name: 'Empire', color: 'text-amber-400', bg: 'bg-amber-400/10' }
+];
+
+export default function PlanSelector({ businessId, currentPlan }: PlanSelectorProps) {
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [plan, setPlan] = useState(currentPlan);
+
+  const handlePlanChange = async (newPlan: string) => {
+    setIsUpdating(true);
+    try {
+      const result = await updateBusinessPlan(businessId, newPlan as any);
+      if (result.success) {
+        setPlan(newPlan);
+        toast.success(`Forfait mis à jour vers ${newPlan}`);
+      } else {
+        toast.error(result.error || "Erreur lors du changement de forfait");
+        // Reset to old plan in UI
+        setPlan(currentPlan);
+      }
+    } catch (error) {
+      toast.error("Erreur réseau");
+      setPlan(currentPlan);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  return (
+    <div className="relative inline-flex items-center group">
+      <div className={`absolute left-2 text-slate-500 pointer-events-none ${isUpdating ? 'animate-spin' : ''}`}>
+        {isUpdating ? <Loader2 className="w-3.5 h-3.5" /> : <CreditCard className="w-3.5 h-3.5" />}
+      </div>
+      <select
+        value={plan}
+        onChange={(e) => handlePlanChange(e.target.value)}
+        disabled={isUpdating}
+        className={`appearance-none bg-slate-900 border border-slate-700 pl-8 pr-8 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider focus:outline-none focus:ring-2 focus:ring-brand-500/50 transition-all cursor-pointer hover:border-slate-600 disabled:opacity-50 disabled:cursor-not-allowed ${
+          PLANS.find(p => p.id === plan)?.color || 'text-white'
+        }`}
+      >
+        {PLANS.map((p) => (
+          <option key={p.id} value={p.id} className="bg-slate-900 text-white font-sans capitalize">
+            {p.name}
+          </option>
+        ))}
+      </select>
+      <div className="absolute right-2 pointer-events-none">
+          <svg className="w-3 h-3 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
+          </svg>
+      </div>
+    </div>
+  );
+}

admin/src/components/RatingModerationButtons.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useState } from 'react';
+import { Check, X, Loader2 } from 'lucide-react';
+import { updateRatingStatus } from '@/app/actions/moderation';
+import { toast } from 'react-hot-toast';
+
+interface RatingModerationButtonsProps {
+  ratingId: string;
+}
+
+export default function RatingModerationButtons({ ratingId }: RatingModerationButtonsProps) {
+  const [isPending, setIsPending] = useState(false);
+
+  const handleAction = async (status: 'APPROVED' | 'REJECTED') => {
+    setIsPending(true);
+    try {
+      const result = await updateRatingStatus(ratingId, status);
+      if (result.success) {
+        toast.success(status === 'APPROVED' ? "Avis approuvé !" : "Avis rejeté.");
+      } else {
+        toast.error(result.error);
+      }
+    } catch (error) {
+      toast.error("Erreur lors de l'opération");
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  return (
+    <div className="flex gap-2">
+      <button
+        onClick={() => handleAction('APPROVED')}
+        disabled={isPending}
+        className="flex items-center gap-1.5 bg-brand-600 hover:bg-brand-700 text-white px-3 py-1.5 rounded-lg text-xs font-bold transition-all disabled:opacity-50"
+      >
+        {isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Check className="w-3.5 h-3.5" />}
+        Approuver
+      </button>
+      <button
+        onClick={() => handleAction('REJECTED')}
+        disabled={isPending}
+        className="flex items-center gap-1.5 bg-slate-800 hover:bg-red-500/20 hover:text-red-500 text-slate-400 px-3 py-1.5 rounded-lg text-xs font-bold transition-all border border-slate-700 disabled:opacity-50"
+      >
+        {isPending ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <X className="w-3.5 h-3.5" />}
+        Rejeter
+      </button>
+    </div>
+  );
+}

admin/src/components/Sidebar.tsx

@@ -11,7 +11,10 @@ import {
   ShieldCheck,
   BarChart3,
   Flag,
-  Settings
+  CreditCard,
+  Settings,
+  Globe,
+  FileText
 } from 'lucide-react';
 
 const menuItems = [
@@ -22,11 +25,22 @@ const menuItems = [
   { name: 'Commentaires', icon: MessageSquare, href: '/comments' },
   { name: 'Modération', icon: Flag, href: '/moderation' },
   { name: 'Blog & Interviews', icon: BookOpen, href: '/blog' },
+  { name: 'Tarifs & Plans', icon: CreditCard, href: '/plans' },
+  { name: 'Pays', icon: Globe, href: '/countries' },
+  { name: 'Documents Légaux', icon: FileText, href: '/legal' },
   { name: 'Configuration', icon: Settings, href: '/settings' },
 ];
 
+import { useState, useEffect } from 'react';
+import { getPendingVerificationCount } from '@/app/actions/business';
+
 export default function Sidebar() {
   const pathname = usePathname();
+  const [pendingCount, setPendingCount] = useState(0);
+
+  useEffect(() => {
+    getPendingVerificationCount().then(setPendingCount);
+  }, [pathname]); // Refresh on navigation
 
   return (
     <div className="admin-sidebar p-6 flex flex-col">
@@ -44,10 +58,18 @@ export default function Sidebar() {
             <Link 
               key={item.name} 
               href={item.href}
-              className={`nav-link ${isActive ? 'active' : ''}`}
+              className={`nav-link ${isActive ? 'active' : ''} flex items-center justify-between group`}
             >
-              <item.icon className="w-5 h-5 mr-3" />
-              <span>{item.name}</span>
+              <div className="flex items-center">
+                <item.icon className="w-5 h-5 mr-3" />
+                <span>{item.name}</span>
+              </div>
+              
+              {item.name === 'Entrepreneurs' && pendingCount > 0 && (
+                <span className="bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center shadow-lg group-hover:scale-110 transition-transform">
+                  {pendingCount}
+                </span>
+              )}
             </Link>
           );
         })}