gestion des messages page 404

admin/src/app/actions/settings.ts

@@ -29,6 +29,7 @@ export async function getSiteSettings() {
       homeBlogIds: [],
       homeBlogCategories: [],
       homeCategories: ["Technologie & IT", "Agriculture & Agrobusiness", "Mode & Textile", "Cosmétique & Beauté"],
+      notFoundQuotes: ["L'échec est une étape vers la réussite, mais une erreur 404 est juste une impasse."],
       resetPasswordSubject: "Réinitialisation de votre mot de passe - Afrohub",
       resetPasswordTemplate: `<div style="font-family: sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px;">
   <h2 style="color: #0d9488; text-align: center;">{siteName}</h2>

admin/src/app/settings/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect, useTransition } from 'react';
-import { Save, Globe, Mail, Phone, MapPin, Share2, Link as LinkIcon, Loader2, Newspaper, Briefcase } from 'lucide-react';
+import { Save, Globe, Mail, Phone, MapPin, Share2, Link as LinkIcon, Loader2, Newspaper, Briefcase, Plus, Trash2 } from 'lucide-react';
 import { getSiteSettings, updateSiteSettings } from '@/app/actions/settings';
 import { toast } from 'react-hot-toast';
 import { getBlogPosts } from '@/app/actions/actualites';
@@ -46,6 +46,7 @@ export default function SettingsPage({
   const [selectedPostIds, setSelectedPostIds] = useState<string[]>([]);
   const [selectedHomeCategories, setSelectedHomeCategories] = useState<string[]>([]);
   const [selectedBlogCategories, setSelectedBlogCategories] = useState<string[]>([]);
+  const [notFoundQuotes, setNotFoundQuotes] = useState<string[]>([]);
   const [resetPasswordTemplate, setResetPasswordTemplate] = useState('');
   const [verifyEmailTemplate, setVerifyEmailTemplate] = useState('');
 
@@ -65,6 +66,7 @@ export default function SettingsPage({
         setSelectedPostIds(settingsData?.homeBlogIds || []);
         setSelectedHomeCategories(settingsData?.homeCategories || []);
         setSelectedBlogCategories(settingsData?.homeBlogCategories || []);
+        setNotFoundQuotes(settingsData?.notFoundQuotes || ["L'échec est une étape vers la réussite, mais une erreur 404 est juste une impasse."]);
         setResetPasswordTemplate(settingsData?.resetPasswordTemplate || '');
         setVerifyEmailTemplate(settingsData?.verifyEmailTemplate || '');
       } catch (error) {
@@ -99,6 +101,7 @@ export default function SettingsPage({
       homeBlogIds: selectedPostIds,
       homeBlogCategories: selectedBlogCategories,
       homeCategories: selectedHomeCategories,
+      notFoundQuotes: notFoundQuotes.filter(q => q.trim() !== ''),
       resetPasswordSubject: formData.get('resetPasswordSubject'),
       resetPasswordTemplate: resetPasswordTemplate,
       verifyEmailSubject: formData.get('verifyEmailSubject'),
@@ -133,6 +136,22 @@ export default function SettingsPage({
     );
   };
 
+  const handleAddQuote = () => {
+    setNotFoundQuotes(prev => [...prev, '']);
+  };
+
+  const handleUpdateQuote = (index: number, value: string) => {
+    setNotFoundQuotes(prev => {
+      const updated = [...prev];
+      updated[index] = value;
+      return updated;
+    });
+  };
+
+  const handleRemoveQuote = (index: number) => {
+    setNotFoundQuotes(prev => prev.filter((_, i) => i !== index));
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center p-20">
@@ -205,6 +224,57 @@ export default function SettingsPage({
               </div>
             </div>
 
+            {/* Section Page 404 - Phrases */}
+            <div className="bg-slate-900/50 border border-slate-700 rounded-2xl overflow-hidden">
+              <div className="p-4 bg-slate-800/50 border-b border-slate-700 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Globe className="w-5 h-5 text-rose-400" />
+                  <h2 className="font-semibold text-white">Phrases de la Page 404</h2>
+                </div>
+                <span className="text-xs bg-rose-500/10 text-rose-400 border border-rose-500/20 px-2.5 py-1 rounded-full font-bold">
+                  {notFoundQuotes.length} configurée{notFoundQuotes.length > 1 ? 's' : ''}
+                </span>
+              </div>
+              <div className="p-6 space-y-4">
+                <p className="text-sm text-slate-400">
+                  Configurez ici les différentes phrases ou citations qui s'afficheront de manière aléatoire sur la page d'erreur 404.
+                </p>
+
+                <div className="space-y-3">
+                  {notFoundQuotes.map((quote, index) => (
+                    <div key={index} className="flex items-center gap-2">
+                      <input
+                        type="text"
+                        value={quote}
+                        onChange={(e) => handleUpdateQuote(index, e.target.value)}
+                        placeholder="Saisissez une citation..."
+                        className="flex-grow bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500 text-sm"
+                      />
+                      {notFoundQuotes.length > 1 && (
+                        <button
+                          type="button"
+                          onClick={() => handleRemoveQuote(index)}
+                          className="p-3 bg-slate-950 border border-slate-700 hover:border-rose-500/50 text-slate-400 hover:text-rose-400 rounded-xl transition-all"
+                          title="Supprimer cette phrase"
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+
+                <button
+                  type="button"
+                  onClick={handleAddQuote}
+                  className="inline-flex items-center gap-2 px-4 py-2.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 rounded-xl text-sm font-bold transition-all"
+                >
+                  <Plus className="w-4 h-4" />
+                  Ajouter une phrase
+                </button>
+              </div>
+            </div>
+
             {/* Section Page d'Accueil - Secteurs */}
             <div className="bg-slate-900/50 border border-slate-700 rounded-2xl overflow-hidden">
               <div className="p-4 bg-slate-800/50 border-b border-slate-700 flex items-center gap-2">