feat: implement home page, business directory, and administrative management features with updated schema and API routes

app/page.tsx

@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { Search, MapPin, Briefcase, TrendingUp, Loader2, ArrowRight } from 'lucide-react';
-import { CATEGORIES, Business, BlogPost } from '../types';
+import { Business, BlogPost } from '../types';
 import BusinessCard from '../components/BusinessCard';
 import { useUser } from '../components/UserProvider';
 
@@ -14,6 +14,7 @@ const HomePage = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const [featuredBusinesses, setFeaturedBusinesses] = useState<Business[]>([]);
   const [posts, setPosts] = useState<BlogPost[]>([]);
+  const [categories, setCategories] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [loadingPosts, setLoadingPosts] = useState(true);
 
@@ -46,7 +47,15 @@ const HomePage = () => {
         setLoadingPosts(false);
       }
     };
+    const fetchCategories = async () => {
+      try {
+        const res = await fetch('/api/categories');
+        const data = await res.json();
+        if (Array.isArray(data)) setCategories(data);
+      } catch (e) {}
+    };
     fetchPosts();
+    fetchCategories();
   }, []);
 
   const handleSearch = (e: React.FormEvent) => {
@@ -96,7 +105,7 @@ const HomePage = () => {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
         <h2 className="text-3xl font-bold text-gray-900 mb-8 font-serif">Secteurs en vedette</h2>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          {(settings?.homeCategories || CATEGORIES.slice(0, 4)).map((cat: string, idx: number) => (
+          {(settings?.homeCategories || categories.slice(0, 4).map(c => c.name)).map((cat: string, idx: number) => (
             <Link 
               key={idx} 
               href={`/annuaire?category=${encodeURIComponent(cat)}`}