feat: implement dynamic home page with configurable blog and category settings

admin/src/app/settings/page.tsx

@@ -1,19 +1,58 @@
 "use client";
 
 import React, { useState, useEffect, useTransition } from 'react';
-import { Save, Globe, Mail, Phone, MapPin, Share2, Link as LinkIcon, Loader2 } from 'lucide-react';
+import { Save, Globe, Mail, Phone, MapPin, Share2, Link as LinkIcon, Loader2, Newspaper, Briefcase } from 'lucide-react';
 import { getSiteSettings, updateSiteSettings } from '@/app/actions/settings';
 import { toast } from 'react-hot-toast';
+import { getBlogPosts } from '@/app/actions/blog';
+
+const BUSINESS_CATEGORIES = [
+  "Technologie & IT",
+  "Agriculture & Agrobusiness",
+  "Mode & Textile",
+  "Cosmétique & Beauté",
+  "Services aux entreprises",
+  "Restauration & Alimentation",
+  "Construction & BTP",
+  "Éducation & Formation",
+  "Santé & Bien-être",
+  "Artisanat & Déco",
+  "Tourisme & Loisirs",
+  "Finance & Assurance",
+  "Immobilier",
+  "Transport & Logistique",
+  "Média & Communication",
+  "Autre"
+];
+
+const BLOG_CATEGORIES = [
+  "Actualité",
+  "Conseils",
+  "Success Story",
+  "Événement",
+  "Formation"
+];
 
 export default function SettingsPage() {
   const [isPending, startTransition] = useTransition();
   const [settings, setSettings] = useState<any>(null);
+  const [allPosts, setAllPosts] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
+  const [selectedPostIds, setSelectedPostIds] = useState<string[]>([]);
+  const [selectedHomeCategories, setSelectedHomeCategories] = useState<string[]>([]);
+  const [selectedBlogCategories, setSelectedBlogCategories] = useState<string[]>([]);
 
   useEffect(() => {
     async function loadData() {
-      const data = await getSiteSettings();
-      setSettings(data);
+      const [settingsData, postsData] = await Promise.all([
+        getSiteSettings(),
+        getBlogPosts()
+      ]);
+      setSettings(settingsData);
+      setAllPosts(postsData);
+      setSelectedPostIds(settingsData?.homeBlogIds || []);
+      setSelectedHomeCategories(settingsData?.homeCategories || []);
+      setSelectedBlogCategories(settingsData?.homeBlogCategories || []);
       setLoading(false);
     }
     loadData();
@@ -33,6 +72,14 @@ export default function SettingsPage() {
       instagramUrl: formData.get('instagramUrl'),
       linkedinUrl: formData.get('linkedinUrl'),
       footerText: formData.get('footerText'),
+      homeBlogShow: formData.get('homeBlogShow') === 'on',
+      homeBlogTitle: formData.get('homeBlogTitle'),
+      homeBlogSubtitle: formData.get('homeBlogSubtitle'),
+      homeBlogCount: parseInt(formData.get('homeBlogCount') as string || '3'),
+      homeBlogSelection: formData.get('homeBlogSelection'),
+      homeBlogIds: selectedPostIds,
+      homeBlogCategories: selectedBlogCategories,
+      homeCategories: selectedHomeCategories,
     };
 
     startTransition(async () => {
@@ -45,6 +92,24 @@ export default function SettingsPage() {
     });
   };
 
+  const togglePostId = (id: string) => {
+    setSelectedPostIds(prev => 
+      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+    );
+  };
+
+  const toggleHomeCategory = (cat: string) => {
+    setSelectedHomeCategories(prev => 
+      prev.includes(cat) ? prev.filter(c => c !== cat) : [...prev, cat]
+    );
+  };
+
+  const toggleBlogCategory = (cat: string) => {
+    setSelectedBlogCategories(prev => 
+      prev.includes(cat) ? prev.filter(c => c !== cat) : [...prev, cat]
+    );
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center p-20">
@@ -97,6 +162,149 @@ export default function SettingsPage() {
           </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">
+            <Briefcase className="w-5 h-5 text-yellow-400" />
+            <h2 className="font-semibold text-white">Secteurs en Vedette (Home)</h2>
+          </div>
+          <div className="p-6">
+            <p className="text-sm text-slate-400 mb-4">Sélectionnez les secteurs d'activité à afficher sur la page d'accueil.</p>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+              {BUSINESS_CATEGORIES.map(cat => (
+                <button
+                  key={cat}
+                  type="button"
+                  onClick={() => toggleHomeCategory(cat)}
+                  className={`text-left p-2 rounded-lg border text-xs transition-all ${
+                    selectedHomeCategories.includes(cat)
+                    ? 'bg-indigo-600/20 border-indigo-500 text-indigo-300'
+                    : 'bg-slate-950 border-slate-700 text-slate-400 hover:border-slate-500'
+                  }`}
+                >
+                  {cat}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Section Page d'Accueil - Blog */}
+        <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">
+            <Newspaper className="w-5 h-5 text-purple-400" />
+            <h2 className="font-semibold text-white">Section Blog sur l'Accueil</h2>
+          </div>
+          <div className="p-6 space-y-6">
+            <div className="flex items-center gap-3 p-3 bg-indigo-600/10 border border-indigo-500/20 rounded-xl">
+              <input 
+                type="checkbox" 
+                name="homeBlogShow" 
+                id="homeBlogShow"
+                defaultChecked={settings?.homeBlogShow}
+                className="w-5 h-5 rounded border-slate-700 bg-slate-950 text-indigo-600 focus:ring-indigo-500"
+              />
+              <label htmlFor="homeBlogShow" className="text-sm font-medium text-slate-300 font-bold uppercase tracking-wider">Activer cette section</label>
+            </div>
+
+            <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">Titre de la section</label>
+                <input 
+                  name="homeBlogTitle" 
+                  defaultValue={settings?.homeBlogTitle}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500" 
+                />
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-slate-400">Sous-titre</label>
+                <input 
+                  name="homeBlogSubtitle" 
+                  defaultValue={settings?.homeBlogSubtitle}
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500" 
+                />
+              </div>
+            </div>
+
+            <div className="border-t border-slate-700 pt-6">
+              <label className="text-sm font-medium text-slate-400 block mb-3">Mode de sélection des articles</label>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <label className={`flex flex-col p-4 rounded-xl border cursor-pointer transition-all ${settings?.homeBlogSelection === 'latest' ? 'bg-indigo-600/10 border-indigo-500' : 'bg-slate-950 border-slate-700 hover:border-slate-500'}`}>
+                  <input type="radio" name="homeBlogSelection" value="latest" defaultChecked={settings?.homeBlogSelection === 'latest'} className="sr-only" />
+                  <span className="text-white font-bold text-sm">Les plus récents</span>
+                  <span className="text-xs text-slate-500 mt-1">Affiche automatiquement les X derniers articles.</span>
+                </label>
+                <label className={`flex flex-col p-4 rounded-xl border cursor-pointer transition-all ${settings?.homeBlogSelection === 'manual' ? 'bg-indigo-600/10 border-indigo-500' : 'bg-slate-950 border-slate-700 hover:border-slate-500'}`}>
+                  <input type="radio" name="homeBlogSelection" value="manual" defaultChecked={settings?.homeBlogSelection === 'manual'} className="sr-only" />
+                  <span className="text-white font-bold text-sm">Sélection manuelle</span>
+                  <span className="text-xs text-slate-500 mt-1">Choisissez précisément les articles à mettre en avant.</span>
+                </label>
+                <label className={`flex flex-col p-4 rounded-xl border cursor-pointer transition-all ${settings?.homeBlogSelection === 'category' ? 'bg-indigo-600/10 border-indigo-500' : 'bg-slate-950 border-slate-700 hover:border-slate-500'}`}>
+                  <input type="radio" name="homeBlogSelection" value="category" defaultChecked={settings?.homeBlogSelection === 'category'} className="sr-only" />
+                  <span className="text-white font-bold text-sm">Par catégorie</span>
+                  <span className="text-xs text-slate-500 mt-1">Affiche les articles appartenant à certaines catégories.</span>
+                </label>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 gap-6">
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-slate-400">Nombre maximum d'articles</label>
+                <input 
+                  type="number"
+                  name="homeBlogCount" 
+                  defaultValue={settings?.homeBlogCount}
+                  min="1" max="12"
+                  className="w-full bg-slate-950 border border-slate-700 rounded-xl p-3 text-white focus:outline-none focus:border-indigo-500" 
+                />
+              </div>
+
+              {/* Manual Selection UI */}
+              <div className="space-y-3">
+                <label className="text-sm font-medium text-slate-400">Articles sélectionnés (si mode manuel)</label>
+                <div className="grid grid-cols-1 gap-2 max-h-60 overflow-y-auto p-2 bg-slate-950 rounded-xl border border-slate-700">
+                  {allPosts.map(post => (
+                    <button
+                      key={post.id}
+                      type="button"
+                      onClick={() => togglePostId(post.id)}
+                      className={`flex items-center justify-between p-3 rounded-lg text-sm transition-all ${
+                        selectedPostIds.includes(post.id)
+                        ? 'bg-indigo-600/20 border-indigo-500/50 text-white'
+                        : 'text-slate-400 hover:bg-slate-900'
+                      }`}
+                    >
+                      <span>{post.title}</span>
+                      {selectedPostIds.includes(post.id) && <span className="text-indigo-400 font-bold text-xs">SÉLECTIONNÉ</span>}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Category Selection UI */}
+              <div className="space-y-3">
+                <label className="text-sm font-medium text-slate-400">Catégories d'articles (si mode catégorie)</label>
+                <div className="flex flex-wrap gap-2">
+                  {BLOG_CATEGORIES.map(cat => (
+                    <button
+                      key={cat}
+                      type="button"
+                      onClick={() => toggleBlogCategory(cat)}
+                      className={`px-4 py-2 rounded-full border text-xs transition-all ${
+                        selectedBlogCategories.includes(cat)
+                        ? 'bg-purple-600 border-purple-500 text-white'
+                        : 'bg-slate-950 border-slate-700 text-slate-400 hover:border-slate-500'
+                      }`}
+                    >
+                      {cat}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
         {/* Section Contact */}
         <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">