From a0ecee38b132d79649db2a837fbb4fa7f34b1f08 Mon Sep 17 00:00:00 2001 From: Meenadeveloper Date: Sat, 29 Nov 2025 14:49:32 +0530 Subject: [PATCH] done pages --- src/components/auth/ForgotPassworForm.jsx | 16 +- src/components/auth/LoginPanel.jsx | 47 +- src/components/common/ProfileHeader.jsx | 2 +- src/components/matches/MatchesProfilesTab.jsx | 358 ++++++------ src/feature/EducationalDetailsForm.jsx | 10 +- src/feature/FamilyDetailsForm.jsx | 32 +- src/feature/LifestyleDetailsForm.jsx | 2 +- src/feature/PartnerPreferencesForm.jsx | 26 +- src/feature/PersonalDetailsForm.jsx | 2 +- src/feature/PreviewScreen.jsx | 129 +++-- src/feature/ProfilePreviewPage.jsx | 514 ++++++++++++++++++ src/feature/StepperForm.jsx | 27 +- src/pages/NotificationPage.jsx | 227 ++++++++ src/redux/registrationFormSlice.jsx | 101 +++- src/routes/UserRoutes.jsx | 12 +- 15 files changed, 1263 insertions(+), 242 deletions(-) create mode 100644 src/feature/ProfilePreviewPage.jsx create mode 100644 src/pages/NotificationPage.jsx diff --git a/src/components/auth/ForgotPassworForm.jsx b/src/components/auth/ForgotPassworForm.jsx index 2a55b53..bcc7746 100644 --- a/src/components/auth/ForgotPassworForm.jsx +++ b/src/components/auth/ForgotPassworForm.jsx @@ -421,7 +421,7 @@ const ForgotPassworForm = () => { {/* Header */} { @@ -506,7 +506,7 @@ const ForgotPassworForm = () => { justifyContent: 'center', }} > - + @@ -538,11 +538,11 @@ const ForgotPassworForm = () => { mt: 2, py: 1.5, borderRadius: 50, - backgroundColor: '#FF9800', + backgroundColor: '#A70710', fontSize: '1rem', fontWeight: 600, - '&:hover': { backgroundColor: '#F57C00' }, - '&:disabled': { backgroundColor: '#FFB74D', color: 'white' }, + '&:hover': { backgroundColor: '#A70710' }, + '&:disabled': { backgroundColor: '#A70710', color: 'white' }, }} > {loading ? ( @@ -556,7 +556,7 @@ const ForgotPassworForm = () => { { + const navigate = useNavigate(); const [formData, setFormData] = useState({ emailOrMobile: '', password: '', @@ -235,14 +237,13 @@ const LoginPanel = () => { console.log('Navigate to dashboard...') } - const handleOTPLogin = () => { - console.log('Navigate to OTP Login') - } - + const handleForgotPassword = () => { - console.log('Navigate to Forgot Password') + navigate("/forgot-password"); } - +const handleRegister = ()=>{ + navigate("/registration"); +} return ( <> @@ -302,15 +303,34 @@ const LoginPanel = () => { required /> + + Forgot Password? + {/* Keep me logged in Checkbox */} - + /> */} {/* Login Button */} - - +
+ + + + + + + +
+ + + ); @@ -182,132 +187,134 @@ function ProfileCard({ profile }) { // Main Component export default function MatchesInterface() { const navigate = useNavigate(); - const [selectedTab, setSelectedTab] = useState('your-matches'); + const [selectedTab, setSelectedTab] = useState("your-matches"); const tabs = [ { - id: 'your-matches', + id: "your-matches", icon: , - title: 'Your Matches', - description: 'View all the profiles that match your preferences', - category: 'All Matches' + title: "Your Matches", + description: "View all the profiles that match your preferences", + category: "All Matches", }, { - id: 'shortlisted-by-you', + id: "shortlisted-by-you", icon: , - title: 'Shortlisted by you', - description: 'Matches you have shortlisted', - category: 'Based on activity' + title: "Shortlisted by you", + description: "Matches you have shortlisted", + category: "Based on activity", }, { - id: 'viewed-you', + id: "viewed-you", icon: , - title: 'Viewed you', - description: 'Matches who have viewed your profile', - category: 'Based on activity' + title: "Viewed you", + description: "Matches who have viewed your profile", + category: "Based on activity", }, { - id: 'shortlisted-you', + id: "shortlisted-you", icon: , - title: 'Shortlisted you', - description: 'Matches who have shortlisted your profile', - category: 'Based on activity' + title: "Shortlisted you", + description: "Matches who have shortlisted your profile", + category: "Based on activity", }, { - id: 'viewed-by-you', + id: "viewed-by-you", icon: , - title: 'Viewed by you', - description: 'Matches you have viewed', - category: 'Based on activity' - } + title: "Viewed by you", + description: "Matches you have viewed", + category: "Based on activity", + }, ]; const profiles = [ { - id: 'JB2847593', - name: 'Jerome Bell', + id: "JB2847593", + name: "Jerome Bell", age: 22, - height: '5.2', - lastseen: 'Last seen 14 Nov 2025', - education: 'BCA / Data analyst', - location: 'Chennai', - image: bride1 + height: "5.2", + lastseen: "Last seen 14 Nov 2025", + education: "BCA / Data analyst", + location: "Chennai", + image: bride1, }, { - id: 'SA8392847', - name: 'Sarah Anderson', + id: "SA8392847", + name: "Sarah Anderson", age: 24, - height: '5.4', - lastseen: 'Last seen 14 Nov 2025', - education: 'MBA / Marketing Manager', - location: 'Bangalore', - image: bride4 + height: "5.4", + lastseen: "Last seen 14 Nov 2025", + education: "MBA / Marketing Manager", + location: "Bangalore", + image: bride4, }, { - id: 'PR9384756', - name: 'Priya Reddy', + id: "PR9384756", + name: "Priya Reddy", age: 23, - height: '5.3', - lastseen: 'Last seen 14 Nov 2025', - education: 'B.Tech / Software Engineer', - location: 'Hyderabad', - image: bride2 + height: "5.3", + lastseen: "Last seen 14 Nov 2025", + education: "B.Tech / Software Engineer", + location: "Hyderabad", + image: bride2, }, { - id: 'AN4758392', - name: 'Ananya Krishnan', + id: "AN4758392", + name: "Ananya Krishnan", age: 25, - height: '5.5', - lastseen: 'Last seen 14 Nov 2025', - education: 'MD / Doctor', - location: 'Kochi', - image: bride3 + height: "5.5", + lastseen: "Last seen 14 Nov 2025", + education: "MD / Doctor", + location: "Kochi", + image: bride3, }, { - id: 'AN4758392', - name: 'Ananya Krishnan', + id: "AN4758392", + name: "Ananya Krishnan", age: 25, - height: '5.5', - lastseen: 'Last seen 14 Nov 2025', - education: 'MD / Doctor', - location: 'Kochi', - image: groom1 + height: "5.5", + lastseen: "Last seen 14 Nov 2025", + education: "MD / Doctor", + location: "Kochi", + image: groom1, }, { - id: 'AN4758392', - name: 'Ananya Krishnan', + id: "AN4758392", + name: "Ananya Krishnan", age: 25, - height: '5.5', - lastseen: 'Last seen 14 Nov 2025', - education: 'MD / Doctor', - location: 'Kochi', - image: groom2 + height: "5.5", + lastseen: "Last seen 14 Nov 2025", + education: "MD / Doctor", + location: "Kochi", + image: groom2, }, { - id: 'AN4758392', - name: 'Ananya Krishnan', + id: "AN4758392", + name: "Ananya Krishnan", age: 25, - height: '5.5', - lastseen: 'Last seen 14 Nov 2025', - education: 'MD / Doctor', - location: 'Kochi', - image: groom4 + height: "5.5", + lastseen: "Last seen 14 Nov 2025", + education: "MD / Doctor", + location: "Kochi", + image: groom4, }, { - id: 'AN4758392', - name: 'Ananya Krishnan', + id: "AN4758392", + name: "Ananya Krishnan", age: 25, - height: '5.5', - lastseen: 'Last seen 14 Nov 2025', - education: 'MD / Doctor', - location: 'Kochi', - image: groom3 - } + height: "5.5", + lastseen: "Last seen 14 Nov 2025", + education: "MD / Doctor", + location: "Kochi", + image: groom3, + }, ]; - let currentCategory = ''; + let currentCategory = ""; return ( + + <>
- + {/* Left Sidebar - Fixed on desktop, scrollable on mobile */} -
+
{tabs.map((tab) => { const showCategory = tab.category !== currentCategory; @@ -340,31 +349,52 @@ export default function MatchesInterface() { onClick={() => setSelectedTab(tab.id)} className={`p-4 rounded-lg mb-3 cursor-pointer transition-all ${ selectedTab === tab.id - ? 'bg-green-50 border-l-4 border-green-600' - : 'hover:bg-gray-50' + ? "bg-green-50 border-l-4 border-green-600" + : "hover:bg-gray-50" }`} >
-
+
{tab.icon}
-

+

{tab.title}

- - +
-

{tab.description}

+

+ {tab.description} +

@@ -378,17 +408,18 @@ export default function MatchesInterface() {
-

- {tabs.find(t => t.id === selectedTab)?.title} -

-
- - { - navigate("/horoscoper-generate") - }}/> - -
- +

+ {tabs.find((t) => t.id === selectedTab)?.title} +

+
+ { + navigate("/horoscoper-generate"); + }} + /> + +
{profiles.map((profile) => ( @@ -398,5 +429,24 @@ export default function MatchesInterface() {
+ + + + + + + + + + + + + + + + + + + ); -} \ No newline at end of file +} diff --git a/src/feature/EducationalDetailsForm.jsx b/src/feature/EducationalDetailsForm.jsx index 5d96171..700cba9 100644 --- a/src/feature/EducationalDetailsForm.jsx +++ b/src/feature/EducationalDetailsForm.jsx @@ -28,6 +28,7 @@ const EducationalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
{/* Highest Qualification */}
+ { {/* Field of Study */}
+ { {/* Occupation */}
+ { {/* Company / Organization Name */}
+ { {/* Annual Income */}
+ { {/* Work Location */}
+ { }} > diff --git a/src/feature/FamilyDetailsForm.jsx b/src/feature/FamilyDetailsForm.jsx index 48d3bfc..0362ce7 100644 --- a/src/feature/FamilyDetailsForm.jsx +++ b/src/feature/FamilyDetailsForm.jsx @@ -24,6 +24,11 @@ const FamilyDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => { dispatch(updateFamilyDetails({ [field]: value })); }; + const handleSubmit = () => { + console.log("Submitting family details:", data); + onSubmitStep(); + }; + return ( <> @@ -33,7 +38,7 @@ const FamilyDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
{/* Highest Qualification */}
- + {
+ + {
+ {
+ + {
+ {
+ {
- -
+ + + - -
+ + + + +
diff --git a/src/feature/LifestyleDetailsForm.jsx b/src/feature/LifestyleDetailsForm.jsx index cc83a48..edc4946 100644 --- a/src/feature/LifestyleDetailsForm.jsx +++ b/src/feature/LifestyleDetailsForm.jsx @@ -95,7 +95,7 @@ const LifestyleDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => { item xs={12} style={{ - marginTop: 24, + marginTop: 50, display: "flex", gap: 16, justifyContent: "center", diff --git a/src/feature/PartnerPreferencesForm.jsx b/src/feature/PartnerPreferencesForm.jsx index 6010b16..96441ac 100644 --- a/src/feature/PartnerPreferencesForm.jsx +++ b/src/feature/PartnerPreferencesForm.jsx @@ -52,12 +52,10 @@ const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => { name="ageRange" value={data.ageRange} onChange={(e) => handleChange("ageRange", e.target.value)} - displayEmpty + inputRef={inputRef} > - - Select Preferred Age Range - + 25 - 28 29 - 32 33 - 36 @@ -97,11 +95,9 @@ const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => { onChange={(e) => handleChange("religionCaste", e.target.value) } - displayEmpty + > - - Select Religion / Caste Preference - + Hindu Muslim Christian @@ -142,11 +138,9 @@ const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => { onChange={(e) => handleChange("occupationPref", e.target.value) } - displayEmpty + > - - Select Occupation Preference - + IT, Business Doctor Engineer @@ -187,11 +181,9 @@ const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => { onChange={(e) => handleChange("lifestylePref", e.target.value) } - displayEmpty + > - - Select Lifestyle & Habits Preference - + Non-Smoking, Non-Drinking @@ -287,7 +279,7 @@ const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => { item xs={12} style={{ - marginTop: 24, + marginTop: 40, display: "flex", gap: 16, justifyContent: "center", diff --git a/src/feature/PersonalDetailsForm.jsx b/src/feature/PersonalDetailsForm.jsx index 03dafdd..05164ab 100644 --- a/src/feature/PersonalDetailsForm.jsx +++ b/src/feature/PersonalDetailsForm.jsx @@ -765,7 +765,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => { onClick={handleSubmit} // disabled={!mobileOtpVerified} > - Submit & Next + Submit diff --git a/src/feature/PreviewScreen.jsx b/src/feature/PreviewScreen.jsx index eaf5b3e..1958c3c 100644 --- a/src/feature/PreviewScreen.jsx +++ b/src/feature/PreviewScreen.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { useSelector } from 'react-redux'; -import { Edit2 } from 'lucide-react'; +import { Edit2,Info } from 'lucide-react'; import { Card, CardContent, @@ -45,11 +45,13 @@ const PreviewScreen = ({ onEdit, onSubmit }) => { ]; return ( - - + + +
+ {sections.map((section) => ( - - + + @@ -66,57 +68,122 @@ const PreviewScreen = ({ onEdit, onSubmit }) => { } - sx={{ pb: 0 }} + sx={{padding:"15px 15px", background:"#f5fbff" }} /> - + {Object.entries(section.data).map(([key, value]) => { - if (value && key !== 'profiles') { + // if (value && key !== 'profiles') { + + // Convert camelCase or camel_Snake_case to readable words const formattedKey = key .replace(/([A-Z])/g, ' $1') .replace(/_/g, ' ') .replace(/\b\w/g, (l) => l.toUpperCase()) .trim(); - + const isImage = + typeof value === "string" && + (value.startsWith("http") || value.startsWith("data:image")); return ( + - - {formattedKey}: - - - {value} - - + key={key} + py={0.7} + borderBottom="1px solid #e0e0e0" + sx={{ + display: "grid", + gridTemplateColumns: { + xs: "1fr", + sm: "1fr 1fr", + }, + gap: "10px", + alignItems: "center", + }} +> + + {formattedKey}: + + + {/* Special Case: Profiles Image Preview */} + {key === "profiles" ? ( + + {value && value.length > 0 ? ( + value.map((imgObj, index) => ( + Profile + )) + ) : ( + + + No photos uploaded + + )} + + ) : ( + // Text OR No Data + <> + {value ? ( + + {value} + + ) : ( + + + No data available + + )} + + )} + + + ); - } - return null; + + })} - + ))} - + +
+ + - + ); }; diff --git a/src/feature/ProfilePreviewPage.jsx b/src/feature/ProfilePreviewPage.jsx new file mode 100644 index 0000000..8a63550 --- /dev/null +++ b/src/feature/ProfilePreviewPage.jsx @@ -0,0 +1,514 @@ +import { Swiper, SwiperSlide } from "swiper/react"; +import { Navigation, Autoplay } from "swiper/modules"; +import { ChevronLeft, ChevronRight, Edit2 } from "lucide-react"; + +import { useSelector, useDispatch } from "react-redux"; +import { useNavigate } from "react-router-dom"; +import "swiper/css"; +import "swiper/css/navigation"; +import LazyImage from "../components/common/LazyImage"; +import weddingpromo1 from "../assets/images/weddingpromo1.jpg"; +import weddingpromo2 from "../assets/images/weddingpromo2.jpg"; + +import weddingpromo3 from "../assets/images/weddingpromo3.jpg"; + +import weddingpromo4 from "../assets/images/weddingpromo4.jpg"; +import ProfileCompletion from "../components/profiledashboard/ProfileCompletion"; +import { preloadDummyProfile } from "../redux/registrationFormSlice"; +import { useEffect } from "react"; +import { + Box, + Button, + Card, + CardContent, + CardHeader, + Divider, + IconButton, + Typography, +} from "@mui/material"; +import { Info } from "@mui/icons-material"; + +const images = [ + weddingpromo1, // bride in saree + weddingpromo2, // traditional jewellery + weddingpromo3, // flower details + weddingpromo4, // couple hands + weddingpromo1, // bride close-up + weddingpromo3, // groom + bride portrait + weddingpromo2, // wedding decor + weddingpromo4, // bride in temple + weddingpromo1, // traditional ceremony + weddingpromo3, // couple full shot +]; + +const ProfilePreviewPage = () => { + const dispatch = useDispatch(); + const navigate = useNavigate(); + const { + personalDetails, + educationalDetails, + familyDetails, + lifestyleDetails, + partnerPreferences, + } = useSelector((state) => state.registerform); + + // For dummy data on first visit + useEffect(() => { + dispatch(preloadDummyProfile()); + }, [dispatch]); + + const handleEditSection = (stepNum) => { + navigate("/profile-edit", { state: { step: stepNum } }); + }; + + const renderField = (label, value, stepNum = 1) => ( + + + {label}: + + {value ? ( + + {value} + + ) : ( + + + No data available + + )} + + ); + + const renderPersonalSection = () => ( + + + Personal Details + + } + action={ + handleEditSection(1)} + size="large" + > + + + } + sx={{ padding: "15px 15px", background: "#f5fbff" }} + /> + + + + {renderField("Name", personalDetails.name, 1)} + {renderField("Mobile Number", personalDetails.mobileNumber, 1)} + {renderField("Gender", personalDetails.gender, 1)} + {renderField("Date of Birth", personalDetails.dob, 1)} + {renderField("Height", personalDetails.height, 1)} + {renderField("Weight", personalDetails.weight, 1)} + {renderField("Marital Status", personalDetails.maritalStatus, 1)} + {renderField("Religion", personalDetails.religion, 1)} + {renderField("Caste", personalDetails.caste, 1)} + {renderField("Email", personalDetails.email, 1)} + {renderField("State", personalDetails.state, 1)} + {renderField("City", personalDetails.city, 1)} + {renderField("Pincode", personalDetails.pincode, 1)} + + {/* Profile Images */} + + + Profile Photos: + + {personalDetails.profiles && personalDetails.profiles.length > 0 ? ( + + {personalDetails.profiles.slice(0, 4).map((profile, index) => ( + + {profile.preview || profile.url ? ( + {`Profile + ) : ( + + + + )} + + ))} + {personalDetails.profiles.length > 4 && ( + + +{personalDetails.profiles.length - 4} more + + )} + + ) : ( + + + No photos uploaded + + )} + + + + ); + + const renderEducationalSection = () => ( + + + Education Details + + } + action={ + handleEditSection(2)} + size="large" + > + + + } + sx={{ padding: "15px 15px", background: "#f5fbff" }} + /> + + + + {renderField("Qualification", educationalDetails.qualification, 2)} + {renderField("Field of Study", educationalDetails.fieldOfStudy, 2)} + {renderField("Occupation", educationalDetails.occupation, 2)} + {renderField("Organization", educationalDetails.organization, 2)} + {renderField("Income", educationalDetails.income, 2)} + {renderField("Work Location", educationalDetails.workLocation, 2)} + + + ); + + const renderFamilySection = () => ( + + + Family Details + + } + action={ + handleEditSection(2)} + size="large" + > + + + } + sx={{ padding: "15px 15px", background: "#f5fbff" }} + /> + + + + {renderField("Father Name", familyDetails.fatherName)} + {renderField("Father Occupation", familyDetails.fatherOccupation)} + {renderField("Mother Name", familyDetails.motherName)} + {renderField("Mother Occupation", familyDetails.motherOccupation)} + {renderField("Number of Siblings", familyDetails.siblings)} + {renderField("Siblings Marital status", familyDetails.siblingsStatus)} + + + ); + + const renderLifestyleSection = () => ( + + + Lifestyle Details + + } + action={ + handleEditSection(2)} + size="large" + > + + + } + sx={{ padding: "15px 15px", background: "#f5fbff" }} + /> + + + + {renderField("Diet", lifestyleDetails.diet)} + {renderField("Drinking", lifestyleDetails.drinking)} + {renderField("Smoking", lifestyleDetails.smoking)} + {renderField("Hobbies", lifestyleDetails.hobbies)} + + + + ); + + + const renderPreferenceSection = () => ( + + + Lifestyle Details + + } + action={ + handleEditSection(2)} + size="large" + > + + + } + sx={{ padding: "15px 15px", background: "#f5fbff" }} + /> + + + + {renderField("Age", partnerPreferences.ageRange)} + {renderField("Religion", partnerPreferences.religionCaste)} + {renderField("Occupation", partnerPreferences.occupationPref)} + {renderField("Life style", partnerPreferences.lifestylePref)} + {renderField("Qualification", partnerPreferences.qualificationPref)} + {renderField("Occupation", partnerPreferences.occupationText)} + {renderField("Income", partnerPreferences.incomePref)} + {renderField("Location", partnerPreferences.locationPref)} + + + + ); + + return ( + <> +
+
+ {/* Left Arrow */} + + + {/* Right Arrow */} + + + + {images.map((img, idx) => ( + +
+ {`Slide + + {/* */} + {/*
+ Slide {idx + 1} +
*/} +
+ + ))} + +
+ + +
+ + + + + {/* personal details start */} + +
+ {renderPersonalSection()} + {renderEducationalSection()} + {renderFamilySection()} + {renderLifestyleSection()} + {renderPreferenceSection()} +
+ + + {/* personal details end */} + + ); +}; + +export default ProfilePreviewPage; diff --git a/src/feature/StepperForm.jsx b/src/feature/StepperForm.jsx index 515178b..3cc15ab 100644 --- a/src/feature/StepperForm.jsx +++ b/src/feature/StepperForm.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState,useEffect } from "react"; import { ChevronLeft } from "lucide-react"; import { useDispatch, useSelector } from "react-redux"; import { @@ -15,8 +15,10 @@ import FamilyDetailsForm from "./FamilyDetailsForm"; import LifestyleDetailsForm from "./LifestyleDetailsForm"; import PartnerPreferencesForm from "./PartnerPreferencesForm"; import PreviewScreen from "./PreviewScreen"; - +import { useLocation } from "react-router-dom"; const Stepper = ({ currentStep, onStepClick }) => { + + const steps = [ { num: 1, label: "Personal" }, { num: 2, label: "Educational" }, @@ -59,6 +61,7 @@ const Stepper = ({ currentStep, onStepClick }) => { const StepperForm = () => { const dispatch = useDispatch(); + const location = useLocation(); const personalDetails = useSelector( (state) => state.registerform.personalDetails @@ -74,9 +77,24 @@ const StepperForm = () => { (state) => state.registerform.partnerPreferences ); - const [currentStep, setCurrentStep] = useState(1); + const initialStep = location.state?.step || 1; + + const [currentStep, setCurrentStep] = useState(initialStep); const [errors, setErrors] = useState({}); + + + useEffect(() => { + // in case user comes again with a different step + if (location.state?.step) { + setCurrentStep(location.state.step); + window.scrollTo(0, 0); + } + }, [location.state?.step]); + + + + const validateStep = (step) => { const newErrors = {}; @@ -137,8 +155,7 @@ const StepperForm = () => { "motherOccupation", "siblings", "siblingsStatus", - "familyType", - "nativePlace", + ]; required.forEach((field) => { if (!familyDetails[field]) { diff --git a/src/pages/NotificationPage.jsx b/src/pages/NotificationPage.jsx new file mode 100644 index 0000000..ebbbf53 --- /dev/null +++ b/src/pages/NotificationPage.jsx @@ -0,0 +1,227 @@ +import React, { useState } from 'react'; +import { Tabs, Tab, IconButton, Menu, MenuItem } from '@mui/material'; +import { MoreVert, Delete } from '@mui/icons-material'; + +const NotificationPage = () => { + const [activeTab, setActiveTab] = useState(0); + const [anchorEl, setAnchorEl] = useState(null); + const [selectedNotification, setSelectedNotification] = useState(null); + + const [notifications, setNotifications] = useState([ + { + id: 1, + type: 'message', + user: 'Thangavel', + avatar: 'https://i.pravatar.cc/150?img=1', + message: 'has sent you a message', + time: '1d', + action: 'View message', + category: 'all' + }, + { + id: 2, + type: 'profile', + user: 'Thangavel', + avatar: 'https://i.pravatar.cc/150?img=2', + message: 'and 3 others have viewed your profile', + time: '1d', + action: 'See who viewed', + category: 'interactions' + }, + { + id: 3, + type: 'interest', + user: 'Parthiban', + avatar: 'https://i.pravatar.cc/150?img=3', + message: 'has sent you an interest', + time: '1d', + action: 'View interest', + category: 'urgent' + }, + { + id: 4, + type: 'message', + user: 'Rajesh', + avatar: 'https://i.pravatar.cc/150?img=4', + message: 'replied to your message', + time: '2d', + action: 'View message', + category: 'all' + }, + { + id: 5, + type: 'profile', + user: 'Priya', + avatar: 'https://i.pravatar.cc/150?img=5', + message: 'viewed your profile', + time: '2d', + action: 'See profile', + category: 'interactions' + }, + { + id: 6, + type: 'interest', + user: 'Kumar', + avatar: 'https://i.pravatar.cc/150?img=6', + message: 'accepted your interest', + time: '3d', + action: 'View profile', + category: 'urgent' + } + ]); + + const handleTabChange = (event, newValue) => { + setActiveTab(newValue); + }; + + const handleMenuOpen = (event, notificationId) => { + setAnchorEl(event.currentTarget); + setSelectedNotification(notificationId); + }; + + const handleMenuClose = () => { + setAnchorEl(null); + setSelectedNotification(null); + }; + + const handleDelete = () => { + setNotifications(notifications.filter(n => n.id !== selectedNotification)); + handleMenuClose(); + }; + + const getFilteredNotifications = () => { + if (activeTab === 0) return notifications; + if (activeTab === 1) return notifications.filter(n => n.category === 'interactions'); + if (activeTab === 2) return notifications.filter(n => n.category === 'urgent'); + return notifications; + }; + + const filteredNotifications = getFilteredNotifications(); + + return ( +
+
+ {/* Header */} +
+

Notifications

+
+ + {/* Tabs */} +
+ + + + + +
+ + {/* Notification List */} +
+ {filteredNotifications.length === 0 ? ( +
+ No notifications found +
+ ) : ( + <> +
+

Yesterday

+
+ {filteredNotifications.map((notification) => ( +
+
+ {/* Avatar */} + {notification.user} + + {/* Content */} +
+

+ {notification.user}{' '} + {notification.message} +

+ +
+ + {/* Time and Menu */} +
+ {notification.time} + handleMenuOpen(e, notification.id)} + sx={{ + color: '#6b7280', + '&:hover': { backgroundColor: '#f3f4f6' } + }} + > + + +
+
+
+ ))} + + )} +
+ + {/* Delete Menu */} + + + + Delete + + +
+
+ ); +}; + +export default NotificationPage; \ No newline at end of file diff --git a/src/redux/registrationFormSlice.jsx b/src/redux/registrationFormSlice.jsx index 1cd678b..30ceb0c 100644 --- a/src/redux/registrationFormSlice.jsx +++ b/src/redux/registrationFormSlice.jsx @@ -37,8 +37,7 @@ const registrationformSlice = createSlice({ motherOccupation: "", siblings: "", siblingsStatus: "", - familyType: "", - nativePlace: "", + }, lifestyleDetails: { diet: "", @@ -84,6 +83,103 @@ const registrationformSlice = createSlice({ partnerPreferences: state.partnerPreferences, }); }, + + +preloadDummyProfile: (state) => { + state.personalDetails = { + ...state.personalDetails, + name: "John Doe", + mobileNumber: "9876543210", + gender: "Male", + dob: "1995-05-01", + height: "175", + weight: "70", + maritalStatus: "Single", + religion: "Hindu", + caste: "Brahmin", + email: "john@example.com", + state: "Tamil Nadu", + city: "Chennai", + pincode: "600001", + profiles: [ + { + id: 1, + name: "profile1.jpg", + url: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face", + preview: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face", + size: 245760, + }, + { + id: 2, + name: "profile2.jpg", + url: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face", + preview: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face", + size: 189440, + }, + { + id: 3, + name: "profile3.jpg", + url: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=200&h=200&fit=crop&crop=face", + preview: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=200&h=200&fit=crop&crop=face", + size: 312640, + }, + { + id: 4, + name: "profile4.jpg", + url: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face", + preview: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face", + size: 267392, + }, + { + id: 5, + name: "profile5.jpg", + url: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=200&h=200&fit=crop&crop=face", + preview: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=200&h=200&fit=crop&crop=face", + size: 198656, + }, + ], + }; + state.educationalDetails = { + ...state.educationalDetails, + qualification: "B.E", + fieldOfStudy: "CSE", + occupation: "Software Engineer", + organization: "ABC Pvt Ltd", + income: "10 LPA", + workLocation: "Chennai", + }; + state.familyDetails = { + ...state.familyDetails, + fatherName: "Father Name", + fatherOccupation: "Business", + motherName: "Mother Name", + motherOccupation: "Homemaker", + siblings: "1", + siblingsStatus: "Married", + }; + state.lifestyleDetails = { + ...state.lifestyleDetails, + diet: "Veg", + drinking: "No", + smoking: "No", + hobbies: "Reading, Music", + }; + state.partnerPreferences = { + ...state.partnerPreferences, + ageRange: "24-30", + religionCaste: "Hindu / Brahmin", + occupationPref: "IT / Software", + lifestylePref: "Non-smoker, Non-drinker", + qualificationPref: "Degree", + occupationText: "IT, Banking", + incomePref: "10-20 LPA", + locationPref: "Chennai, Bengaluru", + }; + }, + + + + }, }); @@ -94,6 +190,7 @@ export const { updateLifestyleDetails, updatePartnerPreferences, submitForm, + preloadDummyProfile, } = registrationformSlice.actions; export default registrationformSlice.reducer; diff --git a/src/routes/UserRoutes.jsx b/src/routes/UserRoutes.jsx index 7e37d93..a536296 100644 --- a/src/routes/UserRoutes.jsx +++ b/src/routes/UserRoutes.jsx @@ -17,6 +17,8 @@ import ContactUsPage from "../pages/ContactUsPage"; import ChangePasswordPage from "../components/auth/ChangePasswordForm"; import StepperForm from "../feature/StepperForm"; import FilterForm from "../feature/FilterForm"; +import ProfilePreviewPage from "../feature/ProfilePreviewPage"; +import NotificationPage from "../pages/NotificationPage"; const UserRoutes = () => { @@ -52,11 +54,19 @@ const UserRoutes = () => { } /> + }> + } /> + + }> } /> + + }> + } /> + }> } /> @@ -73,7 +83,7 @@ const UserRoutes = () => { } /> }> - } /> + } /> }> } />