From cd880e10e5e4f28c25840a72353890edf6042adc Mon Sep 17 00:00:00 2001 From: Meenadeveloper Date: Thu, 12 Mar 2026 18:25:29 +0530 Subject: [PATCH] dashboard api integration --- src/api/apiEndpoints.js | 4 ++ src/api/dashboard.api.js | 7 +++ .../profiledashboard/ProfileCompletion.jsx | 50 +++++++++---------- src/components/ui/ProfileCardDemo.jsx | 1 + src/hooks/useDashboardQuery.js | 14 ++++++ src/pages/UserDashboardHome.jsx | 29 ++++++++--- 6 files changed, 71 insertions(+), 34 deletions(-) create mode 100644 src/api/dashboard.api.js create mode 100644 src/hooks/useDashboardQuery.js diff --git a/src/api/apiEndpoints.js b/src/api/apiEndpoints.js index 4ded3e8..5018fb4 100644 --- a/src/api/apiEndpoints.js +++ b/src/api/apiEndpoints.js @@ -58,4 +58,8 @@ PROFILES_FILTER_LIST:"profiles/lists", PROFILES_FILTER_MASTER:"profiles/filter/masters", +DASHBOARD_API:"dashboard", +HEADER_API:"header_data", +SHORTLIST_API:"shortlist_profile", + }; diff --git a/src/api/dashboard.api.js b/src/api/dashboard.api.js new file mode 100644 index 0000000..b42d9ad --- /dev/null +++ b/src/api/dashboard.api.js @@ -0,0 +1,7 @@ +import axiosInstance from "./axiosInstance"; +import { API_ENDPOINTS } from "./apiEndpoints"; + +export const getDashboardDetails = async () => { + const res = await axiosInstance.get(API_ENDPOINTS.DASHBOARD_API); + return res.data; +}; diff --git a/src/components/profiledashboard/ProfileCompletion.jsx b/src/components/profiledashboard/ProfileCompletion.jsx index 09ce286..93ec9be 100644 --- a/src/components/profiledashboard/ProfileCompletion.jsx +++ b/src/components/profiledashboard/ProfileCompletion.jsx @@ -9,8 +9,7 @@ import { useNavigate } from "react-router-dom"; import AstroChatUI from "./AstroChatUI"; import MembershipCard from "./MembershipCard"; -const ProfileCompletion = () => { - const [completeness, setCompleteness] = useState(30); +const ProfileCompletion = ({ percentage = 0, missingDetails }) => { const navigate = useNavigate(); const cards = [ @@ -95,7 +94,7 @@ const ProfileCompletion = () => { transition={{ delay: 0.6, type: "spring", stiffness: 200 }} className="text-lg sm:text-xl font-bold text-gray-900" > - {completeness}% + {percentage}% @@ -103,7 +102,7 @@ const ProfileCompletion = () => {
@@ -123,22 +122,24 @@ const ProfileCompletion = () => { */} -
- - - {cards.map((card, index) => ( - -
navigate(card.url)} - - className=" border border-1 border-red-50 bg-white rounded-3xl hover:bg-red-50 hover:border-2 + +
+ + {/* NOTE: The cards are static for now. To make them dynamic, + the `missingDetails` prop should be an array of objects to map over. */} + {cards.map((card, index) => ( +
navigate(card.url)} + className=" border border-1 border-red-50 bg-white rounded-3xl hover:bg-red-50 hover:border-2 flex flex-col items-center space-x-2 h-32 justify-center transition-colors duration-500 - cursor-pointer "> + cursor-pointer " + > {/* Icon Container */} { {card.title}
+ ))} + - - - ))} - - - - +
+
{/* Additional Info Section */} {/*

Find your perfect match today +

diff --git a/src/hooks/useDashboardQuery.js b/src/hooks/useDashboardQuery.js new file mode 100644 index 0000000..2a696d4 --- /dev/null +++ b/src/hooks/useDashboardQuery.js @@ -0,0 +1,14 @@ +import { useQuery } from "@tanstack/react-query"; +import { getDashboardDetails } from "../api/dashboard.api"; + +export const useDashboardQuery = () => { + return useQuery({ + queryKey: ["dashboardDetails"], + queryFn: getDashboardDetails, + // Performance settings: + staleTime: 1000 * 60 * 5, // Data is considered fresh for 5 minutes (reduces API calls) + gcTime: 1000 * 60 * 10, // Unused data is garbage collected after 10 minutes + refetchOnWindowFocus: false, // Prevents refetching when user switches tabs + retry: 1, // Retry failed requests once + }); +}; diff --git a/src/pages/UserDashboardHome.jsx b/src/pages/UserDashboardHome.jsx index ed43478..736e8ea 100644 --- a/src/pages/UserDashboardHome.jsx +++ b/src/pages/UserDashboardHome.jsx @@ -11,6 +11,7 @@ import weddingpromo2 from "../assets/images/weddingpromo2.jpg"; import weddingpromo3 from "../assets/images/weddingpromo3.jpg"; import weddingpromo4 from "../assets/images/weddingpromo4.jpg"; +import { useDashboardQuery } from "../hooks/useDashboardQuery"; const ProfileCompletion = lazy(() => import("../components/profiledashboard/ProfileCompletion")); const MatrimonyArticles = lazy(() => import("../components/profiledashboard/MatrimonyArticles")); @@ -48,6 +49,15 @@ const SectionFallback = ({ height = 280 }) => ( const UserDashboardHome = () => { + const { data, isLoading } = useDashboardQuery(); + const dashboardData = data?.data; + + const sliderImages = dashboardData?.image_sliders?.length > 0 + ? dashboardData.image_sliders + : images.map((img, index) => ({ id: index, image: img })); + + if (isLoading) return ; + return ( <>
@@ -92,11 +102,11 @@ const UserDashboardHome = () => { }, }} > - {images.map((img, idx) => ( - + {sliderImages.map((slide, idx) => ( +
{`Slide { `}
}> - + {/* */} }> - + {/* */} }> - + }> - + {/* */} {/* */} {/* */} }> - + )