+ <>
+ setIsUpgradeModalOpen(false)}
+ />
+
+ {/* View Contact Confirmation Modal */}
+
+ {isViewContactModalOpen && (
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Interest Status Modal (Pending) */}
+ {isInterestStatusModalOpen && (
+ Note
++ You need to view this profile's contact details. If you choose to "Proceed" one count will be deducted from your subscription. +
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Interest Rejected Modal */}
+ {isInterestRejectedModalOpen && (
+ {modalTitle}
+{modalMessage}
+ +
+
+
+
+ )}
+
+ {/* Contact Success Modal */}
+ {isContactSuccessModalOpen && (
+
+
+ Note
++ Your previous interest request was declined. You may resend your interest to this profile +
+ +
+
+
+
+ )}
+
+ {/* Chat Confirmation Modal */}
+ {isChatConfirmModalOpen && (() => {
+ const currentMobile = profile.mobile_number || "";
+ const mobileLower = currentMobile.toLowerCase();
+ const isMobileVisible = currentMobile !== "" &&
+ !mobileLower.includes("upgrade") &&
+ !mobileLower.includes("view contact");
+
+ return (
+
+
+ Success!
+The contact number has been unlocked.
+ +
+
+ {unlockedMobile || (!profile.mobile_number?.toLowerCase().includes("view") ? profile.mobile_number : "Fetching...")}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ })()}
+
+ + {isMobileVisible ? "Ready to Chat?" : "Note"} +
++ {isMobileVisible + ? `Are you ready to chat with ${currentMobile}?` + : "Starting a conversation will use 1 chat count. Are you ready to proceed?"} +
+
+
+
+
+ navigate(`/profile-details/${profile.id}`)}
+ className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border border-green-200 bg-white cursor-pointer hover:shadow-2xl transition-all duration-300"
+ >
+
+
{/* Premium Badge */}
{profile.isPremium && (
{
- e.stopPropagation();
- // Shortlist logic here
- }}
+ onClick={handleShortlistClick}
className="absolute top-4 right-4 z-10 bg-white rounded-full px-4 py-2 shadow-lg flex items-center space-x-2 hover:bg-gray-50 transition-colors"
>
- 
-
-
-
+
+
+
-
-
+ {isOpen && (
+
+ );
+};
+
+export default UpgradeModal;
diff --git a/src/components/matches/MatchesProfilesTab.jsx b/src/components/matches/MatchesProfilesTab.jsx
index 90d8065..96885d5 100644
--- a/src/components/matches/MatchesProfilesTab.jsx
+++ b/src/components/matches/MatchesProfilesTab.jsx
@@ -92,68 +92,69 @@ useEffect(() => {
{
id: "all_matches",
icon:
-
-
-
-
-
- + {profile.name} +
+
+ ID: {profile.member_id || profile.id}
+
+
+
-
- );
-}
\ No newline at end of file
+
+);
+}
+
diff --git a/src/components/common/TinderCard.jsx b/src/components/common/TinderCard.jsx
new file mode 100644
index 0000000..640769f
--- /dev/null
+++ b/src/components/common/TinderCard.jsx
@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react';
+
+const TinderCard = ({ children, onSwipe, onCardLeftScreen, preventSwipe, className }) => {
+ const [pos, setPos] = useState({ x: 0, y: 0 });
+ const [dragging, setDragging] = useState(false);
+ const [startPos, setStartPos] = useState({ x: 0, y: 0 });
+ const [gone, setGone] = useState(false);
+
+ useEffect(() => {
+ setPos({ x: 0, y: 0 });
+ setDragging(false);
+ setGone(false);
+ }, []);
+
+ const handleStart = (clientX, clientY) => {
+ if (gone) return;
+ setDragging(true);
+ setStartPos({ x: clientX - pos.x, y: clientY - pos.y });
+ };
+
+ const handleMove = (clientX, clientY) => {
+ if (!dragging || gone) return;
+ setPos({ x: clientX - startPos.x, y: clientY - startPos.y });
+ };
+
+ const handleEnd = () => {
+ if (gone) return;
+ setDragging(false);
+ if (Math.abs(pos.x) > 120) {
+ const dir = pos.x > 0 ? 'right' : 'left';
+ if (onSwipe) onSwipe(dir);
+ setGone(true);
+ setTimeout(() => onCardLeftScreen && onCardLeftScreen(dir), 300);
+ } else {
+ setPos({ x: 0, y: 0 });
+ }
+ };
+
+ if (gone) return null;
+
+ const rotation = pos.x / 20;
+ const opacity = Math.min(Math.abs(pos.x) / 100, 1);
+
+ return (
+
-
-
-
-
-
+
+ {(profile.age || profile.height) && (
+
-
+
+ )}
+
+ {(profile.religion_name || profile.caste_name) && (
+
+ 
+
+
+ {profile.age ? `${profile.age} yrs` : ""}
+ {profile.age && profile.height ? ", " : ""}
+ {profile.height ? `${profile.height} cm` : ""}
+
+
+
+ )}
+
+ {(profile.annual_income_name || profile.income) && (
+
+ 
+
+
+ {profile.religion_name}
+ {profile.religion_name && profile.caste_name ? " / " : ""}
+ {profile.caste_name}
+
+
+
+ )}
+
+ {(profile.district_name || profile.location) && (
+
+ 
+
+
+ {profile.annual_income_name || profile.income}
+
+
+
+ )}
+ 
+
+
+ {profile.district_name || profile.location}
+
+
-
+ {profile.is_send_interest_received && profile.statusReceived?.toLowerCase() === 'pending' ? (
+ <>
+
+
+
+ ) : (!(profile.is_send_interest || isLiked) && !profile.is_send_interest_received) ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+ )}
-
-
-
-
-
+
+
+
handleStart(e.clientX, e.clientY)}
+ onMouseMove={(e) => handleMove(e.clientX, e.clientY)}
+ onMouseUp={handleEnd}
+ onMouseLeave={() => dragging && handleEnd()}
+ onTouchStart={(e) => handleStart(e.touches[0].clientX, e.touches[0].clientY)}
+ onTouchMove={(e) => handleMove(e.touches[0].clientX, e.touches[0].clientY)}
+ onTouchEnd={handleEnd}
+ >
+ {pos.x > 50 && (
+
+ );
+};
+
+export default TinderCard;
diff --git a/src/components/common/UpgradeModal.jsx b/src/components/common/UpgradeModal.jsx
new file mode 100644
index 0000000..238989b
--- /dev/null
+++ b/src/components/common/UpgradeModal.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+
+const UpgradeModal = ({ isOpen, onClose }) => {
+ const navigate = useNavigate();
+
+ return (
+
+ LIKE
+
+ )}
+ {pos.x < -50 && (
+
+ NOPE
+
+ )}
+ {children}
+
+ {/* Backdrop */}
+
+
+
+ )}
+ Note
+ ++ Membership Upgrade Required +
+ ++ You are currently a Free Member. Upgrade to a Premium Plan to start sending interests and connecting with your perfect match. +
+ +
+
+
+
+
+
Filter Matches
@@ -188,14 +190,17 @@ useEffect(() => { return (
{showCategory && (
-
+
+
{tab.category}
)}
+
{
- dispatch(updateFilter({ filter_type: tab.id }));
+ const finalFilterType = tab.id === "all_matches" ? "" : tab.id;
+ dispatch(updateFilter({ filter_type: finalFilterType }));
}}
+
className={`p-4 rounded-lg mb-3 cursor-pointer transition-all ${
selectedTab === tab.id
? "bg-green-50 border-l-4 border-green-600"
@@ -331,10 +336,22 @@ useEffect(() => {
+
-
-
-
-
);
}
+
diff --git a/src/components/profiledashboard/DailyRecommendedCard.jsx b/src/components/profiledashboard/DailyRecommendedCard.jsx
index 176c14b..72b4dc9 100644
--- a/src/components/profiledashboard/DailyRecommendedCard.jsx
+++ b/src/components/profiledashboard/DailyRecommendedCard.jsx
@@ -1,126 +1,202 @@
-import { useRef, useState } from 'react';
-import { motion } from 'framer-motion';
+import { useRef, useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay, EffectCoverflow } from 'swiper/modules';
-import { Crown, Bookmark, User, Briefcase, MapPin, X, Send, ChevronLeft, ChevronRight } from 'lucide-react';
-import CakeIcon from "@mui/icons-material/Cake";
-import HeightIcon from "@mui/icons-material/Height";
-import GroupsIcon from "@mui/icons-material/Groups";
-import TempleHinduIcon from "@mui/icons-material/TempleHindu";
+import { Crown, Bookmark, X, ChevronLeft, ChevronRight, RotateCcw, Heart, Timer } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-hot-toast';
+import axiosInstance from "../../api/axiosInstance";
+import { API_ENDPOINTS } from "../../api/apiEndpoints";
+import UpgradeModal from '../common/UpgradeModal';
+
+// Custom Icons
+import personIcon from "../../assets/images/personicon.svg";
+import religionIcon from "../../assets/images/religonicon.svg";
+import locationIcon from "../../assets/images/locationicon.svg";
+import cashIcon from "../../assets/images/cashicon.svg";
import SchoolIcon from "@mui/icons-material/School";
-import LocationOnIcon from "@mui/icons-material/LocationOn";
-import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
+
+
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-coverflow';
-import { useNavigate } from 'react-router-dom';
-const DailyRecommendedCard = () => {
+/* ─────────────────────────────────────────────
+ Countdown Timer Component (Popup Style)
+───────────────────────────────────────────── */
+const CountdownTimer = ({ onContinue }) => {
+ const [timeLeft, setTimeLeft] = useState({ hours: 0, minutes: 0, seconds: 0 });
+
+ useEffect(() => {
+ const calculateTimeLeft = () => {
+ const now = new Date();
+ const endOfDay = new Date();
+ endOfDay.setHours(23, 59, 59, 999);
+
+ const diff = endOfDay - now;
+ if (diff <= 0) return { hours: 0, minutes: 0, seconds: 0 };
+
+ return {
+ hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
+ minutes: Math.floor((diff / 1000 / 60) % 60),
+ seconds: Math.floor((diff / 1000) % 60)
+ };
+ };
+
+ setTimeLeft(calculateTimeLeft());
+ const timer = setInterval(() => {
+ setTimeLeft(calculateTimeLeft());
+ }, 1000);
+
+ return () => clearInterval(timer);
+ }, []);
+
+ const fmt = n => String(n).padStart(2, '0');
+
+ return (
+
+
+
+
+ Daily Limit Exceeded
+
+ You've viewed all recommended profiles for today. Your daily limit will reset in:
+
+
+
+ {[
+ { label: 'HOURS', value: timeLeft.hours },
+ { label: 'MINS', value: timeLeft.minutes },
+ { label: 'SECS', value: timeLeft.seconds }
+ ].map((u, i) => (
+
+
+ {fmt(u.value)}
+
+ {u.label}
+
+ ))}
+
+
+
+
+
+ );
+};
+
+import { useQuery } from '@tanstack/react-query';
+import { getHeaderDetails } from "../../api/preview.api";
+
+const DailyRecommendedCard = ({ profiles: initialProfiles = [] }) => {
const swiperRef = useRef(null);
const navigate = useNavigate();
+ const [activeProfiles, setActiveProfiles] = useState(initialProfiles);
+ const [isHidden, setIsHidden] = useState(() => {
+ const hiddenDate = localStorage.getItem('daily_limit_hidden_date');
+ return hiddenDate === new Date().toDateString();
+ });
+ const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);
- // Sample profile data
- const profiles = [
- {
- id: 1,
- name: 'Selva Kumar . R',
- userId: 'TK52586A',
- lastSeen: '14 Nov 25',
- age: 23,
- height: '5\'2"',
- religion: 'Hindu / Agamudayar / Thuluva Vellal',
- education: 'BCA, Data Analyst',
- location: 'Vellore, Tamil Nadu',
- image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=500&fit=crop',
- isPremium: true
- },
- {
- id: 2,
- name: 'Priya Sharma',
- userId: 'TK52587B',
- lastSeen: '15 Nov 25',
- age: 25,
- height: '5\'4"',
- religion: 'Hindu / Brahmin / Iyer',
- education: 'MBA, Marketing Manager',
- location: 'Chennai, Tamil Nadu',
- image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop',
- isPremium: true
- },
- {
- id: 3,
- name: 'Rahul Venkat',
- userId: 'TK52588C',
- lastSeen: '16 Nov 25',
- age: 28,
- height: '5\'10"',
- religion: 'Hindu / Mudaliar / Arcot',
- education: 'B.Tech, Software Engineer',
- location: 'Bangalore, Karnataka',
- image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=500&fit=crop',
- isPremium: false
- },
- {
- id: 4,
- name: 'Aishwarya Reddy',
- userId: 'TK52589D',
- lastSeen: '17 Nov 25',
- age: 26,
- height: '5\'5"',
- religion: 'Hindu / Reddy / Telangana',
- education: 'CA, Chartered Accountant',
- location: 'Hyderabad, Telangana',
- image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=500&fit=crop',
- isPremium: true
- },
- {
- id: 5,
- name: 'Karthik Mohan',
- userId: 'TK52590E',
- lastSeen: '18 Nov 25',
- age: 27,
- height: '5\'8"',
- religion: 'Hindu / Nadar / Tamil',
- education: 'M.Tech, Civil Engineer',
- location: 'Madurai, Tamil Nadu',
- image: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=500&fit=crop',
- isPremium: false
- },
- {
- id: 6,
- name: 'Divya Lakshmi',
- userId: 'TK52591F',
- lastSeen: '19 Nov 25',
- age: 24,
- height: '5\'3"',
- religion: 'Hindu / Pillai / Tamil',
- education: 'B.Com, HR Executive',
- location: 'Coimbatore, Tamil Nadu',
- image: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=500&fit=crop',
- isPremium: true
+ const { data: headerData } = useQuery({
+ queryKey: ["headerDetails"],
+ queryFn: getHeaderDetails,
+ staleTime: 60000,
+ });
+
+ const isUserPaid = headerData?.myDetails?.is_paid_member === true;
+
+ useEffect(() => {
+ setActiveProfiles(initialProfiles);
+ }, [initialProfiles]);
+
+
+ const handleContinueToDashboard = () => {
+ localStorage.setItem('daily_limit_hidden_date', new Date().toDateString());
+ setIsHidden(true);
+ };
+
+ const handleInterest = async (e, profileId, name) => {
+ e.stopPropagation();
+ if (!isUserPaid) {
+ setIsUpgradeModalOpen(true);
+ return;
}
- ];
+ try {
+ await axiosInstance.post(`${API_ENDPOINTS.INTEREST_SEND}?profile_id=${profileId}`);
+ toast.success(`Interest sent to ${name}!`, {
+ icon: '❤️',
+ style: { borderRadius: '10px', background: '#333', color: '#fff' }
+ });
+ setActiveProfiles(prev => prev.filter(p => p.id !== profileId));
+ } catch (error) {
+ toast.error("Failed to send interest. Please try again.");
+ }
+ };
+
+ const handleDecline = async (e, profileId) => {
+ e.stopPropagation();
+ try {
+ await axiosInstance.post(`${API_ENDPOINTS.DAILY_RECOMMENDED_DONT_SHOW}?profile_id=${profileId}`);
+ setActiveProfiles(prev => prev.filter(p => p.id !== profileId));
+ toast.success("Profile hidden");
+ } catch (error) {
+ toast.error("Failed to hide profile.");
+ }
+ };
const ProfileCard = ({ profile }) => {
- const [isLiked, setIsLiked] = useState(false);
+ const image = profile.photo || profile.image;
+ const memberId = profile.member_id || profile.userId;
+ const religion = profile.religion || (profile.religion_name ? `${profile.religion_name}${profile.caste_name ? ' / ' + profile.caste_name : ''}` : null);
+ const education = profile.education || profile.education_name;
+ const occupation = profile.occupation || profile.occupation_name;
+ const location = profile.location || profile.district_name || profile.city_name;
+ const income = profile.income || profile.annual_income || profile.salary;
+
+ const [isShortlisted, setIsShortlisted] = useState(profile.is_shortlisted === 1);
+
+ const handleShortlistClick = async (e) => {
+ e.stopPropagation();
+ try {
+ const res = await axiosInstance.post(`${API_ENDPOINTS.SHORTLIST_API}?profile_id=${profile.id}`);
+ if (res.data?.status === "success") {
+ setIsShortlisted(!isShortlisted);
+ toast.success(res.data.message || "Updated shortlist status");
+ }
+ } catch (error) {
+ toast.error("Failed to update shortlist");
+ }
+ };
return (
navigate(`/profile-details/${profile.id}`)}
- className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 border-green-200"
+ className="w-full max-w-sm rounded-[24px] shadow-xl overflow-hidden border border-green-100 bg-white group hover:shadow-2xl transition-all"
>
-
+
{profile.isPremium && (
{
- e.stopPropagation();
- }}
+ className="absolute top-4 right-4 z-10 bg-white/90 backdrop-blur-sm rounded-full px-4 py-2 shadow-md flex items-center space-x-2 hover:bg-white transition-colors"
+ onClick={handleShortlistClick}
>
-
-
+
-
-
+
+
{profile.name}
-
- Matrimony ID: {profile.userId}
+
+ ID: {memberId}
-
-
+
+ {(profile.age || profile.height) && (
-
-
- Daily Recommended
-
- Find your perfect match today
-
-
- {/* Swiper Container */}
-
-
+ setIsUpgradeModalOpen(false)}
+ />
+
+ {activeProfiles.length === 0 ? (
+
- {profiles.map((profile) => (
-
-
- ))}
-
+
+ Daily Recommended
+
+ Handpicked matches just for you
+
+
+
+
+ {activeProfiles.map((profile) => (
+
+
+ ))}
+
+
+
+
+
+
- {/* Custom Navigation Buttons */}
- swiperRef.current?.swiper.slidePrev()}
- className="hidden sm:flex absolute left-0 top-1/2 -translate-y-1/2 z-10
- bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
- w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
- >
-
- swiperRef.current?.swiper.slideNext()}
- className="hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 z-10
- bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
- w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center transition-all"
- >
-
-
- {/* View All Button */}
-
- navigate("/matches")}
-
- >
- View All Recommendations
-
-
-
-
- {/* Custom Swiper Styles */}
-
+ )}
);
};
diff --git a/src/components/profiledashboard/MatchingList.jsx b/src/components/profiledashboard/MatchingList.jsx
index ea53a26..f5dcb9e 100644
--- a/src/components/profiledashboard/MatchingList.jsx
+++ b/src/components/profiledashboard/MatchingList.jsx
@@ -16,6 +16,13 @@ import {
Heart,
Eye,
} from "lucide-react";
+
+// Custom Icons
+import personIcon from "../../assets/images/personicon.svg";
+import religionIcon from "../../assets/images/religonicon.svg";
+import locationIcon from "../../assets/images/locationicon.svg";
+import cashIcon from "../../assets/images/cashicon.svg";
+
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
@@ -124,67 +131,63 @@ const ProfileCard = ({ profile }) => {
}
}}
>
-
- {name}
-
-
-
- ID: {idNumber}
-
-
+
+
+
+ {name}
+
+
+ ID: {idNumber}
+
+
+
-
- Your Matching List
-
-
- Find your perfect match today
+
+ All Matches List
+
+
+
+ We've found these profiles that match your preferences
+
+
{/* Swiper Container */}
{
}
}}
>
-
+
{/* CONTENT */}
-
-
- {name}
-
-
-
- ID: {idNumber}
-
-
+
+
+
+ {name}
+
+
+ ID: {idNumber}
+
+
+
-
- New Joined
-
- Find your perfect match today
+
+ Newly Joined
+
+ Be the first to connect with our newest members
+
+
{/* Swiper Container */}
[
- [
- {
- icon:
{/* Cards Section */}
-
+
+ {/* Left Side: Astro Chat */}
+
+
- */}
-
-
- {/* 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 "
+ {/* Right Side: Cards & Membership */}
+
+
+
- {/* Icon Container */}
-
-
+ {cards.map((card, index) => (
+ navigate(card.url)}
+ className="border 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"
+ >
+
+
- {/* Text */}
-
- {card.title}
-
+
+ {card.title}
+
+
+ ))}
+
+
+
+
+
+
{/* Additional Info Section */}
{/* {
const navigate = useNavigate();
const queryClient = useQueryClient();
@@ -118,27 +126,48 @@ const ProfileCardItem = ({ profile }) => {
-
- {[
- age,
- height,
- salary,
- location,
- caste,
- zodiac1,
- zodiac2,
- ]
- .filter(Boolean)
- .map((v, i) => (
-
- {v}
+
+ {(age || height) && (
+
+
+
+ {age || ""}
+ {age && height ? ", " : ""}
+ {height || ""}
- ))}
+
+ )}
+
+ {(caste || zodiac1) && (
+
+
+
+ {caste}
+ {caste && zodiac1 ? ` (${zodiac1})` : zodiac1 || ""}
+
+
+ )}
+
+ {salary && (
+
+
+
+ {salary}
+
+
+ )}
+
+ {location && (
+
+
+
+ {location}
+
+
+ )}
+
+
+
+
+ );
+};
+
+import { useQuery } from '@tanstack/react-query';
+import { getHeaderDetails } from "../../api/preview.api";
+
+const DailyRecommendedCard = ({ profiles: initialProfiles = [] }) => {
const swiperRef = useRef(null);
const navigate = useNavigate();
+ const [activeProfiles, setActiveProfiles] = useState(initialProfiles);
+ const [isHidden, setIsHidden] = useState(() => {
+ const hiddenDate = localStorage.getItem('daily_limit_hidden_date');
+ return hiddenDate === new Date().toDateString();
+ });
+ const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);
- // Sample profile data
- const profiles = [
- {
- id: 1,
- name: 'Selva Kumar . R',
- userId: 'TK52586A',
- lastSeen: '14 Nov 25',
- age: 23,
- height: '5\'2"',
- religion: 'Hindu / Agamudayar / Thuluva Vellal',
- education: 'BCA, Data Analyst',
- location: 'Vellore, Tamil Nadu',
- image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=500&fit=crop',
- isPremium: true
- },
- {
- id: 2,
- name: 'Priya Sharma',
- userId: 'TK52587B',
- lastSeen: '15 Nov 25',
- age: 25,
- height: '5\'4"',
- religion: 'Hindu / Brahmin / Iyer',
- education: 'MBA, Marketing Manager',
- location: 'Chennai, Tamil Nadu',
- image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop',
- isPremium: true
- },
- {
- id: 3,
- name: 'Rahul Venkat',
- userId: 'TK52588C',
- lastSeen: '16 Nov 25',
- age: 28,
- height: '5\'10"',
- religion: 'Hindu / Mudaliar / Arcot',
- education: 'B.Tech, Software Engineer',
- location: 'Bangalore, Karnataka',
- image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=500&fit=crop',
- isPremium: false
- },
- {
- id: 4,
- name: 'Aishwarya Reddy',
- userId: 'TK52589D',
- lastSeen: '17 Nov 25',
- age: 26,
- height: '5\'5"',
- religion: 'Hindu / Reddy / Telangana',
- education: 'CA, Chartered Accountant',
- location: 'Hyderabad, Telangana',
- image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=500&fit=crop',
- isPremium: true
- },
- {
- id: 5,
- name: 'Karthik Mohan',
- userId: 'TK52590E',
- lastSeen: '18 Nov 25',
- age: 27,
- height: '5\'8"',
- religion: 'Hindu / Nadar / Tamil',
- education: 'M.Tech, Civil Engineer',
- location: 'Madurai, Tamil Nadu',
- image: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=500&fit=crop',
- isPremium: false
- },
- {
- id: 6,
- name: 'Divya Lakshmi',
- userId: 'TK52591F',
- lastSeen: '19 Nov 25',
- age: 24,
- height: '5\'3"',
- religion: 'Hindu / Pillai / Tamil',
- education: 'B.Com, HR Executive',
- location: 'Coimbatore, Tamil Nadu',
- image: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=500&fit=crop',
- isPremium: true
+ const { data: headerData } = useQuery({
+ queryKey: ["headerDetails"],
+ queryFn: getHeaderDetails,
+ staleTime: 60000,
+ });
+
+ const isUserPaid = headerData?.myDetails?.is_paid_member === true;
+
+ useEffect(() => {
+ setActiveProfiles(initialProfiles);
+ }, [initialProfiles]);
+
+
+ const handleContinueToDashboard = () => {
+ localStorage.setItem('daily_limit_hidden_date', new Date().toDateString());
+ setIsHidden(true);
+ };
+
+ const handleInterest = async (e, profileId, name) => {
+ e.stopPropagation();
+ if (!isUserPaid) {
+ setIsUpgradeModalOpen(true);
+ return;
}
- ];
+ try {
+ await axiosInstance.post(`${API_ENDPOINTS.INTEREST_SEND}?profile_id=${profileId}`);
+ toast.success(`Interest sent to ${name}!`, {
+ icon: '❤️',
+ style: { borderRadius: '10px', background: '#333', color: '#fff' }
+ });
+ setActiveProfiles(prev => prev.filter(p => p.id !== profileId));
+ } catch (error) {
+ toast.error("Failed to send interest. Please try again.");
+ }
+ };
+
+ const handleDecline = async (e, profileId) => {
+ e.stopPropagation();
+ try {
+ await axiosInstance.post(`${API_ENDPOINTS.DAILY_RECOMMENDED_DONT_SHOW}?profile_id=${profileId}`);
+ setActiveProfiles(prev => prev.filter(p => p.id !== profileId));
+ toast.success("Profile hidden");
+ } catch (error) {
+ toast.error("Failed to hide profile.");
+ }
+ };
const ProfileCard = ({ profile }) => {
- const [isLiked, setIsLiked] = useState(false);
+ const image = profile.photo || profile.image;
+ const memberId = profile.member_id || profile.userId;
+ const religion = profile.religion || (profile.religion_name ? `${profile.religion_name}${profile.caste_name ? ' / ' + profile.caste_name : ''}` : null);
+ const education = profile.education || profile.education_name;
+ const occupation = profile.occupation || profile.occupation_name;
+ const location = profile.location || profile.district_name || profile.city_name;
+ const income = profile.income || profile.annual_income || profile.salary;
+
+ const [isShortlisted, setIsShortlisted] = useState(profile.is_shortlisted === 1);
+
+ const handleShortlistClick = async (e) => {
+ e.stopPropagation();
+ try {
+ const res = await axiosInstance.post(`${API_ENDPOINTS.SHORTLIST_API}?profile_id=${profile.id}`);
+ if (res.data?.status === "success") {
+ setIsShortlisted(!isShortlisted);
+ toast.success(res.data.message || "Updated shortlist status");
+ }
+ } catch (error) {
+ toast.error("Failed to update shortlist");
+ }
+ };
return (
+
+
+
+
+ Daily Limit Exceeded
++ You've viewed all recommended profiles for today. Your daily limit will reset in: +
+ +
+ {[
+ { label: 'HOURS', value: timeLeft.hours },
+ { label: 'MINS', value: timeLeft.minutes },
+ { label: 'SECS', value: timeLeft.seconds }
+ ].map((u, i) => (
+
+
+
+
+
+ ))}
+
+ {fmt(u.value)}
+
+ {u.label}
+
+
{profile.isPremium && (
{
- e.stopPropagation();
- }}
+ className="absolute top-4 right-4 z-10 bg-white/90 backdrop-blur-sm rounded-full px-4 py-2 shadow-md flex items-center space-x-2 hover:bg-white transition-colors"
+ onClick={handleShortlistClick}
>
-
-
+
-
-
+
-
+
+
{profile.name}
-
- Matrimony ID: {profile.userId}
+
+ ID: {memberId}
{profile.name}
-- Matrimony ID: {profile.userId} +
+ ID: {memberId}
-
+
{/* CONTENT */}
-
+ {(profile.age || profile.height) && (
+ )}
-
-
+ )}
+ {religion && (
-
-
+ {(education || occupation) && (
+ )}
-
-
-
+ {location && (
+ )}
-
-
-
+ {income && (
+ )}
-
-
-
+
@@ -279,127 +308,70 @@ const DailyRecommendedCard = () => {
);
};
+
+ if (isHidden) return null;
+
return (
-
-
-
+
- {/* Header */}
-
-
-
- {/* Swiper Container */}
-
);
};
diff --git a/src/components/profiledashboard/MatchingList.jsx b/src/components/profiledashboard/MatchingList.jsx
index ea53a26..f5dcb9e 100644
--- a/src/components/profiledashboard/MatchingList.jsx
+++ b/src/components/profiledashboard/MatchingList.jsx
@@ -16,6 +16,13 @@ import {
Heart,
Eye,
} from "lucide-react";
+
+// Custom Icons
+import personIcon from "../../assets/images/personicon.svg";
+import religionIcon from "../../assets/images/religonicon.svg";
+import locationIcon from "../../assets/images/locationicon.svg";
+import cashIcon from "../../assets/images/cashicon.svg";
+
// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
@@ -124,67 +131,63 @@ const ProfileCard = ({ profile }) => {
}
}}
>
- - Daily Recommended -
-Find your perfect match today
-
-
+ setIsUpgradeModalOpen(false)}
+ />
+
+ {activeProfiles.length === 0 ? (
+
- navigate("/matches")}
-
- >
- View All Recommendations
-
-
-
-
- {/* Custom Swiper Styles */}
-
+ )}
+
- {profiles.map((profile) => (
-
-
- ))}
-
+
+
+ swiperRef.current?.swiper.slidePrev()}
- className="hidden sm:flex absolute left-0 top-1/2 -translate-y-1/2 z-10
- bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
- w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
- >
-
- swiperRef.current?.swiper.slideNext()}
- className="hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 z-10
- bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
- w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center transition-all"
- >
-
-
- {/* View All Button */}
- + Daily Recommended +
+Handpicked matches just for you
+
+
+ {activeProfiles.map((profile) => (
+
+
+ ))}
+
+
+
+
+
+
- {/* Custom Navigation Buttons */}
-
-
- {name} -
- -
-
ID: {idNumber}
-
-
+
-
+
+
{/* Swiper Container */}
{
}
}}
>
-
+
{/* CONTENT */}
-
+
- + {name} +
+
+ ID: {idNumber}
+
+
+
- {[
- age,
- height,
- salary,
- location,
- caste,
- zodiac1,
- zodiac2,
- ]
- .filter(Boolean)
- .map((v, i) => (
-
- {v}
+
@@ -210,16 +213,19 @@ const MatchingList = ({ matches }) => {
+ {(age || height) && (
+
+ )}
-
+
+
+
+
+
+ {age || ""}
+ {age && height ? ", " : ""}
+ {height || ""}
- ))}
-
-
+ {(caste || zodiac1) && (
+
+
+ )}
-
+ {location && (
+
+
+
+
+ {caste}
+ {caste && zodiac1 ? ` (${zodiac1})` : zodiac1 || ""}
+
+
+
+ )}
+
+
+
+ {location}
+
+ - Your Matching List -
-- Find your perfect match today +
+ All Matches List +
+ ++ We've found these profiles that match your preferences
-
- {name} -
- -
-
ID: {idNumber}
-
-
+
-
+
+
{/* Swiper Container */}
[
- [
- {
- icon:
+
- + {name} +
+
+ ID: {idNumber}
+
+
+
- {[
- age,
- height,
- salary,
- location,
- caste,
- zodiac1,
- zodiac2,
- ]
- .filter(Boolean)
- .map((v, i) => (
-
- {v}
+
@@ -208,14 +211,16 @@ const NewJoinedProfile = ({ profiles }) => {
+ {(age || height) && (
+
+ )}
-
+
+
+
+
+
+ {age || ""}
+ {age && height ? ", " : ""}
+ {height || ""}
- ))}
-
- {/* */}
+ {(caste || zodiac1) && (
+
+
+ )}
-
+ {location && (
+
+
+
+
+ {caste}
+ {caste && zodiac1 ? ` (${zodiac1})` : zodiac1 || ""}
+
+
+
+ )}
+
+
+
+ {location}
+
+ - New Joined -
-Find your perfect match today
++ Newly Joined +
+Be the first to connect with our newest members
+
+
+
{/* Cards Section */}
-
+
+ {/* Left Side: Astro Chat */}
+
- */}
-
- {
const navigate = useNavigate();
const queryClient = useQueryClient();
@@ -118,27 +126,48 @@ const ProfileCardItem = ({ profile }) => {
-
+
- {/* Desktop Logo */}
- {/*
-
- {/* 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) => (
-
+
+
{/* Additional Info Section */}
{/* 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 "
+ {/* Right Side: Cards & Membership */}
+
-
-
+
+
- {/* Icon Container */}
-
-
+ {cards.map((card, index) => (
+
+
+
+ navigate(card.url)}
+ className="border 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"
+ >
+
+
- {/* Text */}
-
- {card.title}
-
+
+ {card.title}
+
+
+ ))}
+
+
- ))}
-
-
-
- {[
- age,
- height,
- salary,
- location,
- caste,
- zodiac1,
- zodiac2,
- ]
- .filter(Boolean)
- .map((v, i) => (
-
- {v}
+
+ {(age || height) && (
+
+
+
+
+ {age || ""}
+ {age && height ? ", " : ""}
+ {height || ""}
- ))}
+
+ )}
+
+ {(caste || zodiac1) && (
+
+
+
+ {caste}
+ {caste && zodiac1 ? ` (${zodiac1})` : zodiac1 || ""}
+
+
+ )}
+
+ {salary && (
+
+
+
+ {salary}
+
+
+ )}
+
+ {location && (
+
+
+
+ {location}
+
+
+ )}