gestion accueil

frontend/src/components/Pages/Dashboard.jsx

@@ -109,6 +109,35 @@ function Dashboard() {
                 </Typography>
               </CardContent>
             </Card>
+
+            <Card
+              onClick={() => navigate("/admin/Gestion-Page-Accueil")}
+              sx={{
+                cursor: "pointer",
+                textAlign: "center",
+                padding: 2,
+                transition: "0.3s",
+                "&:hover": {
+                  backgroundColor: "#0e467f",
+                  color: "#ffffff",
+                  transform: "scale(1.05)",
+                  boxShadow: 8,
+                },
+                "&:hover svg": {
+                  fill: "#ffffff",
+                },
+              }}
+            >
+              <CardContent>
+                <IconButton sx={{ fontSize: 40, color: "#0e467f" }}>
+                  <ArticleIcon fontSize="inherit" />
+                </IconButton>
+                <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                  Gestion Page d'Accueil
+                </Typography>
+              </CardContent>
+            </Card>
+            
           </Grid>
         </Grid>
       </Box>

frontend/src/components/Pages/GestionPageAccueil.jsx

@@ -0,0 +1,145 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { updateHomePageACF } from "../../wordpress";
+import { getToken } from "../../auth";
+import {
+  Box,
+  Typography,
+  TextField,
+  Button,
+  Container,
+  Paper,
+} from "@mui/material";
+
+const GestionPageAccueil = () => {
+  const navigate = useNavigate();
+  const [heroTitle, setHeroTitle] = useState("");
+  const [heroText, setHeroText] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // ✅ Vérification de l'authentification (Redirection si non connecté)
+  useEffect(() => {
+    if (!getToken()) {
+      navigate("/admin/login");
+    }
+  }, [navigate]);
+
+  // ✅ Chargement des données ACF depuis WordPress
+  useEffect(() => {
+    const fetchPageData = async () => {
+      try {
+        const response = await fetch(
+          "https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/13?_fields=acf",
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        if (!response.ok) {
+          throw new Error("Erreur de chargement des données");
+        }
+
+        const data = await response.json();
+        setHeroTitle(data.acf?.hero_title || "");
+        setHeroText(data.acf?.hero_text || "");
+        setLoading(false);
+      } catch (error) {
+        console.error("❌ Erreur chargement ACF :", error);
+        setError("Impossible de charger les données.");
+        setLoading(false);
+      }
+    };
+
+    fetchPageData();
+  }, []);
+
+  // ✅ Mise à jour des champs ACF
+  const handleSave = async () => {
+    try {
+        const newData = {
+            hero_title: heroTitle,
+            hero_text: heroText,
+        };
+
+        console.log("📢 Données envoyées pour mise à jour ACF :", newData);
+        const updatedData = await updateHomePageACF(13, newData);
+
+        alert("✅ Mise à jour réussie !");
+        console.log("🔍 Données mises à jour reçues :", updatedData);
+
+        window.location.reload(); // 🔄 Rafraîchissement pour voir les changements
+    } catch (error) {
+        console.error("❌ Erreur mise à jour :", error);
+        alert("⚠ Impossible de mettre à jour les champs ACF.");
+    }
+};
+
+  return (
+    <Container maxWidth="md" sx={{ mt: 5 }}>
+      <Paper elevation={3} sx={{ padding: 4, borderRadius: 3 }}>
+        {/* ✅ En-tête */}
+        <Typography variant="h4" sx={{ fontWeight: "bold", textAlign: "center", mb: 3 }}>
+          Gestion de la Page d'Accueil
+        </Typography>
+
+        {/* ✅ Affichage du statut de chargement */}
+        {loading ? (
+          <Typography textAlign="center">Chargement des données...</Typography>
+        ) : error ? (
+          <Typography textAlign="center" color="error">
+            {error}
+          </Typography>
+        ) : (
+          <>
+            {/* ✅ Formulaire de modification */}
+            <TextField
+              label="Titre Héros"
+              fullWidth
+              variant="outlined"
+              value={heroTitle}
+              onChange={(e) => setHeroTitle(e.target.value)}
+              sx={{ mb: 2 }}
+            />
+
+            <TextField
+              label="Texte Héros"
+              fullWidth
+              variant="outlined"
+              value={heroText}
+              onChange={(e) => setHeroText(e.target.value)}
+              sx={{ mb: 2 }}
+            />
+
+            {/* ✅ Bouton d'enregistrement */}
+            <Button
+              variant="contained"
+              color="primary"
+              fullWidth
+              sx={{ mt: 3 }}
+              onClick={handleSave}
+            >
+              Enregistrer les modifications
+            </Button>
+
+            {/* ✅ Bouton retour au Dashboard */}
+            <Button
+              variant="outlined"
+              color="secondary"
+              fullWidth
+              sx={{ mt: 2 }}
+              onClick={() => navigate("/admin/dashboard")}
+            >
+              Retour au Dashboard
+            </Button>
+          </>
+        )}
+      </Paper>
+    </Container>
+  );
+};
+
+export default GestionPageAccueil;

frontend/src/components/Pages/Home.jsx

@@ -21,14 +21,15 @@ const Home = () => {
         setIsLoading(true);
         setError(null);
 
-        const response = await api.get("wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description");
+        // 🔥 Ajout d'un timestamp pour éviter la mise en cache
+        const response = await api.get(`wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description&_=${new Date().getTime()}`);
         const pageContent = response.data;
         setPageData(pageContent);
 
-        // Vérification et récupération de l'image Hero depuis l'API media de WordPress
+        // Récupération de l'image Hero
         const heroImageId = pageContent.acf?.img_hero;
         if (heroImageId) {
-          const mediaResponse = await api.get(`wp/v2/media/${heroImageId}`);
+          const mediaResponse = await api.get(`wp/v2/media/${heroImageId}?_=${new Date().getTime()}`);
           setHeroImage(mediaResponse.data.source_url);
         } else {
           setHeroImage(null);
@@ -42,7 +43,7 @@ const Home = () => {
     };
 
     fetchPageData();
-  }, []);
+}, []);
 
   if (isLoading) {
     return (

frontend/src/main.jsx

@@ -8,6 +8,7 @@ import SimpleReactLightbox from "simple-react-lightbox";
 import NotFound from "./components/Pages/NotFound.jsx";
 import GestionArticles from "./components/Pages/GestionArticles";
 import EditPost from "./components/EditPost";
+import GestionPageAccueil from "./components/Pages/GestionPageAccueil";
 
 
 // Lazy loading des pages
@@ -55,6 +56,7 @@ function YourApp() {
           <Route path="/admin/login" element={<Login />} />
           <Route path="/admin/dashboard" element={<Dashboard />} />
           <Route path="/admin/gestion-articles" element={<GestionArticles />} />
+          <Route path="/admin/gestion-page-accueil" element={<GestionPageAccueil />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
         <Footer />

frontend/src/wordpress.js

@@ -164,4 +164,45 @@ export async function deletePost(postId, imageId) {
         console.error("❌ Erreur suppression :", error.response?.data || error.message);
         throw error;
     }
+}
+
+/**
+ * 🔹 Met à jour les champs ACF d'une page WordPress
+ * @param {number} pageId - L'ID de la page à modifier
+ * @param {object} acfData - Les données des champs ACF à mettre à jour
+ */
+export async function updateHomePageACF(pageId, newData) {
+    const token = getToken();
+    if (!token) {
+        console.error("❌ Aucun token trouvé !");
+        throw new Error("Utilisateur non authentifié.");
+    }
+
+    try {
+        console.log(`📢 Tentative de mise à jour des ACF pour la page ${pageId}...`, newData);
+
+        const response = await fetch(
+            `https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/pages/${pageId}`,
+            {
+                method: "PUT",
+                headers: {
+                    "Authorization": `Basic ${token}`,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ acf: newData }),
+            }
+        );
+
+        const responseData = await response.json();
+
+        if (!response.ok) {
+            throw new Error(`Erreur API: ${JSON.stringify(responseData)}`);
+        }
+
+        console.log("✅ Mise à jour réussie :", responseData);
+        return responseData;
+    } catch (error) {
+        console.error("❌ Erreur mise à jour ACF :", error);
+        throw error;
+    }
 }

server/wp-content/themes/hello-elementor-child/functions.php

@@ -269,4 +269,21 @@ function custom_cors_headers() {
     header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
     header("Access-Control-Allow-Headers: Content-Type, Authorization");
 }
-add_action('init', 'custom_cors_headers');
+add_action('init', 'custom_cors_headers');
+
+// 🔹 Autoriser la modification des champs ACF via l'API REST
+add_action('rest_api_init', function () {
+    register_rest_field(
+        'page', // Type de post
+        'acf',  // Champ ACF
+        [
+            'get_callback'    => function ($object) {
+                return get_fields($object['id']);
+            },
+            'update_callback' => function ($value, $object) {
+                return update_fields($object->ID, $value);
+            },
+            'schema' => null,
+        ]
+    );
+});