Build and deployment update: Refined registration forms, stepper navigation, and chat synchronization fixes

src/pages/ProfileDetailPage.jsx

@@ -1,19 +1,58 @@
+import React, { useState, useEffect } from 'react';
 import { useParams } from "react-router-dom";
 import MatrimonyProfile from "../components/profiledetail/MatrimonyProfile"
 import PartnerPreferences from "../components/profiledetail/PartnerPreferences"
 import MatchingList from "../components/profiledashboard/MatchingList";
+import { getProfileDetail } from "../services/profileActionApi";
+import { CircularProgress, Box } from "@mui/material";
 
 const ProfileDetailPage = () => {
   const { id } = useParams();
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchDetail = async () => {
+      setLoading(true);
+      try {
+        const res = await getProfileDetail(id);
+        setData(res);
+      } catch (error) {
+        console.error("Failed to fetch profile details:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    if (id) {
+      fetchDetail();
+    }
+  }, [id]);
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
+        <CircularProgress color="error" />
+      </Box>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="text-center py-20 text-gray-500 text-xl">
+        Profile details not found.
+      </div>
+    );
+  }
+
   return (
     <>
     <div className="w-[100%] max-w-[1400px] mx-auto my-10">
-    <MatrimonyProfile/>
-<PartnerPreferences/>
-<MatchingList/>
+      <MatrimonyProfile data={data} />
+      <PartnerPreferences data={data} />
+      <MatchingList matches={data.all_matches} />
     </div>
     </>
-  )
-}
+  );
+};
 
-export default ProfileDetailPage
+export default ProfileDetailPage;