done pages
This commit is contained in:
meena committed
1 parent
05f30375d7
commit
a0ecee38b1
15 files changed
+1263
-242
No files matched your search
@@ -28,6 +28,7 @@ const EducationalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-20 gap-y-10 mb-6">
|
||||
{/* Highest Qualification */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-gray-900 text-[15px]">Enter Highest Qualification</label>
|
||||
<TextField
|
||||
fullWidth
|
||||
inputRef={inputRef}
|
||||
@@ -44,6 +45,7 @@ const EducationalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
|
||||
{/* Field of Study */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-gray-900 text-[15px]">Enter Field of Study</label>
|
||||
<TextField
|
||||
fullWidth
|
||||
name="fieldOfStudy"
|
||||
@@ -59,6 +61,7 @@ const EducationalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
|
||||
{/* Occupation */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-gray-900 text-[15px]">Enter Occupation</label>
|
||||
<TextField
|
||||
fullWidth
|
||||
name="occupation"
|
||||
@@ -74,6 +77,7 @@ const EducationalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
|
||||
{/* Company / Organization Name */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-gray-900 text-[15px]">Enter Company / Organization Name</label>
|
||||
<TextField
|
||||
fullWidth
|
||||
name="organization"
|
||||
@@ -89,6 +93,7 @@ const EducationalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
|
||||
{/* Annual Income */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-gray-900 text-[15px]">Enter Annual Income</label>
|
||||
<TextField
|
||||
fullWidth
|
||||
name="income"
|
||||
@@ -104,6 +109,7 @@ const EducationalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
|
||||
{/* Work Location */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-gray-900 text-[15px]">Enter Work Location</label>
|
||||
<TextField
|
||||
fullWidth
|
||||
name="workLocation"
|
||||
@@ -129,10 +135,10 @@ const EducationalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
}}
|
||||
>
|
||||
<Button variant="outlined" onClick={onSkipStep}>
|
||||
Skip
|
||||
Next
|
||||
</Button>
|
||||
<Button variant="contained" color="primary" onClick={handleSubmit}>
|
||||
Next
|
||||
Submit
|
||||
</Button>
|
||||
</Grid>
|
||||
</form>
|
||||
|
||||
@@ -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 }) => {
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-20 gap-y-10 mb-6">
|
||||
{/* Highest Qualification */}
|
||||
<div className="flex flex-col gap-4">
|
||||
|
||||
<label className="text-gray-900 text-[15px]">Enter Father Name</label>
|
||||
<TextField
|
||||
fullWidth
|
||||
inputRef={inputRef}
|
||||
@@ -49,6 +54,8 @@ const FamilyDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-gray-900 text-[15px]">Enter Father Occupation</label>
|
||||
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
@@ -64,6 +71,7 @@ const FamilyDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-gray-900 text-[15px]">Enter Mother Name</label>
|
||||
<TextField
|
||||
fullWidth
|
||||
name="motherName"
|
||||
@@ -78,6 +86,8 @@ const FamilyDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-gray-900 text-[15px]">Enter Mother Occupation</label>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
name="motherOccupation"
|
||||
@@ -93,6 +103,7 @@ const FamilyDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-gray-900 text-[15px]">Enter Number of Brothers / Sisters</label>
|
||||
<TextField
|
||||
fullWidth
|
||||
name="siblings"
|
||||
@@ -108,6 +119,7 @@ const FamilyDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-gray-900 text-[15px]"> Brothers / Sisters (Married / Unmarried)</label>
|
||||
<FormControl
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
@@ -143,15 +155,23 @@ const FamilyDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
|
||||
</div>
|
||||
|
||||
<Grid item xs={12} style={{ marginTop: 16, display: "flex", gap: 16 , justifyContent: "center"}}>
|
||||
<Button variant="outlined" fullWidth onClick={onSkipStep}>
|
||||
|
||||
</div>
|
||||
|
||||
<Grid item
|
||||
xs={12} sx={{ marginTop: 10, display: "flex", gap: 4 , justifyContent: "center"}}>
|
||||
<Button variant="outlined" onClick={onSkipStep}>
|
||||
Skip
|
||||
</Button>
|
||||
<Button variant="contained" color="primary" fullWidth onClick={onSubmitStep}>
|
||||
Submit & Next
|
||||
<Button variant="contained" color="primary" onClick={handleSubmit}>
|
||||
Submit
|
||||
</Button>
|
||||
</Grid>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -95,7 +95,7 @@ const LifestyleDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
item
|
||||
xs={12}
|
||||
style={{
|
||||
marginTop: 24,
|
||||
marginTop: 50,
|
||||
display: "flex",
|
||||
gap: 16,
|
||||
justifyContent: "center",
|
||||
|
||||
@@ -52,12 +52,10 @@ const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
name="ageRange"
|
||||
value={data.ageRange}
|
||||
onChange={(e) => handleChange("ageRange", e.target.value)}
|
||||
displayEmpty
|
||||
|
||||
inputRef={inputRef}
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>Select Preferred Age Range</em>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem value="25 - 28">25 - 28</MenuItem>
|
||||
<MenuItem value="29 - 32">29 - 32</MenuItem>
|
||||
<MenuItem value="33 - 36">33 - 36</MenuItem>
|
||||
@@ -97,11 +95,9 @@ const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
onChange={(e) =>
|
||||
handleChange("religionCaste", e.target.value)
|
||||
}
|
||||
displayEmpty
|
||||
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>Select Religion / Caste Preference</em>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem value="Hindu">Hindu</MenuItem>
|
||||
<MenuItem value="Muslim">Muslim</MenuItem>
|
||||
<MenuItem value="Christian">Christian</MenuItem>
|
||||
@@ -142,11 +138,9 @@ const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
onChange={(e) =>
|
||||
handleChange("occupationPref", e.target.value)
|
||||
}
|
||||
displayEmpty
|
||||
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>Select Occupation Preference</em>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem value="IT, Business">IT, Business</MenuItem>
|
||||
<MenuItem value="Doctor">Doctor</MenuItem>
|
||||
<MenuItem value="Engineer">Engineer</MenuItem>
|
||||
@@ -187,11 +181,9 @@ const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
onChange={(e) =>
|
||||
handleChange("lifestylePref", e.target.value)
|
||||
}
|
||||
displayEmpty
|
||||
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>Select Lifestyle & Habits Preference</em>
|
||||
</MenuItem>
|
||||
|
||||
<MenuItem value="Non-Smoking, Non-Drinking">
|
||||
Non-Smoking, Non-Drinking
|
||||
</MenuItem>
|
||||
@@ -287,7 +279,7 @@ const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
item
|
||||
xs={12}
|
||||
style={{
|
||||
marginTop: 24,
|
||||
marginTop: 40,
|
||||
display: "flex",
|
||||
gap: 16,
|
||||
justifyContent: "center",
|
||||
|
||||
@@ -765,7 +765,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
|
||||
onClick={handleSubmit}
|
||||
// disabled={!mobileOtpVerified}
|
||||
>
|
||||
Submit & Next
|
||||
Submit
|
||||
</Button>
|
||||
</Grid>
|
||||
</form>
|
||||
|
||||
@@ -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 (
|
||||
<Box p={3} maxWidth={720} mx="auto" minHeight="100vh" bgcolor="#f9fafb">
|
||||
<Grid container spacing={3}>
|
||||
<Box p={3} sx={{maxWidth:"1400px", width:"100%"}} mx="auto" >
|
||||
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-4 my-10'>
|
||||
|
||||
{sections.map((section) => (
|
||||
<Grid item xs={12} key={section.title}>
|
||||
<Card variant="outlined" sx={{ borderRadius: 2 }}>
|
||||
|
||||
<Card key={section.title} variant="outlined" sx={{ borderRadius: 2, background:"#fff5ed" }}>
|
||||
<CardHeader
|
||||
title={
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
@@ -66,57 +68,122 @@ const PreviewScreen = ({ onEdit, onSubmit }) => {
|
||||
<Edit2 size={20} />
|
||||
</IconButton>
|
||||
}
|
||||
sx={{ pb: 0 }}
|
||||
sx={{padding:"15px 15px", background:"#f5fbff" }}
|
||||
/>
|
||||
<Divider />
|
||||
<CardContent sx={{ pt: 1 }}>
|
||||
<CardContent sx={{ pt: 1, }}>
|
||||
{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 (
|
||||
|
||||
<Box
|
||||
key={key}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
py={0.7}
|
||||
borderBottom="1px solid #e0e0e0"
|
||||
>
|
||||
<Typography color="text.secondary" sx={{ fontWeight: 500 }}>
|
||||
{formattedKey}:
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{ fontWeight: 600, ml: 2, maxWidth: '60%', wordBreak: 'break-word' }}
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
</Box>
|
||||
key={key}
|
||||
py={0.7}
|
||||
borderBottom="1px solid #e0e0e0"
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "1fr 1fr",
|
||||
},
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography color="text.secondary" sx={{ fontWeight: 500 }}>
|
||||
{formattedKey}:
|
||||
</Typography>
|
||||
|
||||
{/* Special Case: Profiles Image Preview */}
|
||||
{key === "profiles" ? (
|
||||
<Box display="flex" gap={0} flexWrap="wrap">
|
||||
{value && value.length > 0 ? (
|
||||
value.map((imgObj, index) => (
|
||||
<img
|
||||
key={index}
|
||||
src={URL.createObjectURL(imgObj.file)}
|
||||
alt="Profile"
|
||||
style={{
|
||||
width: "90px",
|
||||
height: "90px",
|
||||
objectFit: "cover",
|
||||
borderRadius: "50%",
|
||||
border: "1px solid #ccc",
|
||||
marginLeft:"-20px"
|
||||
}}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Box display="flex" alignItems="center" gap={1} sx={{ color: "#888" }}>
|
||||
<Info size={16} />
|
||||
<Typography>No photos uploaded</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
// Text OR No Data
|
||||
<>
|
||||
{value ? (
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
wordBreak: "break-word",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
) : (
|
||||
<Box
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
sx={{ color: "#888", fontStyle: "italic" }}
|
||||
>
|
||||
<Info size={16} />
|
||||
<Typography>No data available</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
return null;
|
||||
|
||||
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
))}
|
||||
<Grid item xs={12}>
|
||||
|
||||
</div>
|
||||
|
||||
<Grid item xs={12} sx={{display:"flex", justifyContent:"center"}}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="success"
|
||||
fullWidth
|
||||
|
||||
size="large"
|
||||
onClick={onSubmit}
|
||||
sx={{ borderRadius: 2 }}
|
||||
>
|
||||
Submit
|
||||
Submit full Completed Data
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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) => (
|
||||
<Box
|
||||
py={0.7}
|
||||
borderBottom="1px solid #e0e0e0"
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "1fr 1fr",
|
||||
},
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography color="text.secondary" sx={{ fontWeight: 500 }}>
|
||||
{label}:
|
||||
</Typography>
|
||||
{value ? (
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 600,
|
||||
wordBreak: "break-word",
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</Typography>
|
||||
) : (
|
||||
<Box
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
sx={{ color: "#888", fontStyle: "italic" }}
|
||||
>
|
||||
<Info size={16} />
|
||||
<Typography>No data available</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
||||
const renderPersonalSection = () => (
|
||||
<Card variant="outlined" sx={{ borderRadius: 2, background: "#fff5ed" }}>
|
||||
<CardHeader
|
||||
title={
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
Personal Details
|
||||
</Typography>
|
||||
}
|
||||
action={
|
||||
<IconButton
|
||||
aria-label="edit"
|
||||
color="primary"
|
||||
onClick={() => handleEditSection(1)}
|
||||
size="large"
|
||||
>
|
||||
<Edit2 size={20} />
|
||||
</IconButton>
|
||||
}
|
||||
sx={{ padding: "15px 15px", background: "#f5fbff" }}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
<CardContent sx={{ pt: 1 }}>
|
||||
{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 */}
|
||||
<Box
|
||||
py={0.7}
|
||||
borderBottom="1px solid #e0e0e0"
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
|
||||
gap: "10px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography color="text.secondary" sx={{ fontWeight: 500 }}>
|
||||
Profile Photos:
|
||||
</Typography>
|
||||
{personalDetails.profiles && personalDetails.profiles.length > 0 ? (
|
||||
<Box display="flex" flexWrap="wrap" gap={1}>
|
||||
{personalDetails.profiles.slice(0, 4).map((profile, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
width={60}
|
||||
height={60}
|
||||
borderRadius={1}
|
||||
overflow="hidden"
|
||||
sx={{ border: "1px solid #ddd", position: "relative" }}
|
||||
>
|
||||
{profile.preview || profile.url ? (
|
||||
<img
|
||||
src={profile.preview || profile.url}
|
||||
alt={`Profile ${index + 1}`}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
height="100%"
|
||||
bgcolor="#f5f5f5"
|
||||
>
|
||||
<ImageIcon size={24} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
{personalDetails.profiles.length > 4 && (
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
+{personalDetails.profiles.length - 4} more
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
sx={{ color: "#888", fontStyle: "italic" }}
|
||||
>
|
||||
<Info size={16} />
|
||||
<Typography>No photos uploaded</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const renderEducationalSection = () => (
|
||||
<Card variant="outlined" sx={{ borderRadius: 2, background: "#fff5ed" }}>
|
||||
<CardHeader
|
||||
title={
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
Education Details
|
||||
</Typography>
|
||||
}
|
||||
action={
|
||||
<IconButton
|
||||
aria-label="edit"
|
||||
color="primary"
|
||||
onClick={() => handleEditSection(2)}
|
||||
size="large"
|
||||
>
|
||||
<Edit2 size={20} />
|
||||
</IconButton>
|
||||
}
|
||||
sx={{ padding: "15px 15px", background: "#f5fbff" }}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
<CardContent sx={{ pt: 1 }}>
|
||||
{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)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const renderFamilySection = () => (
|
||||
<Card variant="outlined" sx={{ borderRadius: 2, background: "#fff5ed" }}>
|
||||
<CardHeader
|
||||
title={
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
Family Details
|
||||
</Typography>
|
||||
}
|
||||
action={
|
||||
<IconButton
|
||||
aria-label="edit"
|
||||
color="primary"
|
||||
onClick={() => handleEditSection(2)}
|
||||
size="large"
|
||||
>
|
||||
<Edit2 size={20} />
|
||||
</IconButton>
|
||||
}
|
||||
sx={{ padding: "15px 15px", background: "#f5fbff" }}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
<CardContent sx={{ pt: 1 }}>
|
||||
{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)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const renderLifestyleSection = () => (
|
||||
<Card variant="outlined" sx={{ borderRadius: 2, background: "#fff5ed" }}>
|
||||
<CardHeader
|
||||
title={
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
Lifestyle Details
|
||||
</Typography>
|
||||
}
|
||||
action={
|
||||
<IconButton
|
||||
aria-label="edit"
|
||||
color="primary"
|
||||
onClick={() => handleEditSection(2)}
|
||||
size="large"
|
||||
>
|
||||
<Edit2 size={20} />
|
||||
</IconButton>
|
||||
}
|
||||
sx={{ padding: "15px 15px", background: "#f5fbff" }}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
<CardContent sx={{ pt: 1 }}>
|
||||
{renderField("Diet", lifestyleDetails.diet)}
|
||||
{renderField("Drinking", lifestyleDetails.drinking)}
|
||||
{renderField("Smoking", lifestyleDetails.smoking)}
|
||||
{renderField("Hobbies", lifestyleDetails.hobbies)}
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
|
||||
const renderPreferenceSection = () => (
|
||||
<Card variant="outlined" sx={{ borderRadius: 2, background: "#fff5ed" }}>
|
||||
<CardHeader
|
||||
title={
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
Lifestyle Details
|
||||
</Typography>
|
||||
}
|
||||
action={
|
||||
<IconButton
|
||||
aria-label="edit"
|
||||
color="primary"
|
||||
onClick={() => handleEditSection(2)}
|
||||
size="large"
|
||||
>
|
||||
<Edit2 size={20} />
|
||||
</IconButton>
|
||||
}
|
||||
sx={{ padding: "15px 15px", background: "#f5fbff" }}
|
||||
/>
|
||||
<Divider />
|
||||
|
||||
<CardContent sx={{ pt: 1 }}>
|
||||
{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)}
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="custom-swiper-hero flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-7xl relative">
|
||||
{/* Left Arrow */}
|
||||
<button className="swiper-button-prev-custom absolute left-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
|
||||
<ChevronLeft className="w-6 h-6 text-white" />
|
||||
</button>
|
||||
|
||||
{/* Right Arrow */}
|
||||
<button className="swiper-button-next-custom absolute right-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
|
||||
<ChevronRight className="w-6 h-6 text-white" />
|
||||
</button>
|
||||
|
||||
<Swiper
|
||||
modules={[Navigation, Autoplay]}
|
||||
navigation={{
|
||||
prevEl: ".swiper-button-prev-custom",
|
||||
nextEl: ".swiper-button-next-custom",
|
||||
}}
|
||||
grabCursor={true}
|
||||
centeredSlides={true}
|
||||
slidesPerView="auto"
|
||||
spaceBetween={10}
|
||||
autoplay={{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
loop={true}
|
||||
className="mySwiper"
|
||||
>
|
||||
{images.map((img, idx) => (
|
||||
<SwiperSlide key={idx}>
|
||||
<div className="relative overflow-hidden rounded-3xl w-[100%] ">
|
||||
<img
|
||||
src={img}
|
||||
alt={`Slide ${idx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{/* <LazyImage
|
||||
src={img}
|
||||
alt={`Slide ${idx + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/> */}
|
||||
{/* <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/50 backdrop-blur-sm px-6 py-2 rounded-full">
|
||||
<span className="text-white font-semibold text-lg">Slide {idx + 1}</span>
|
||||
</div> */}
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
.custom-swiper-hero .swiper {
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.custom-swiper-hero .swiper-slide {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
transition: all 0.4s ease;
|
||||
opacity: 1;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
.custom-swiper-hero .swiper-slide-active {
|
||||
width: 630px !important;
|
||||
height: 320px !important;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.custom-swiper-hero .swiper-slide {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.custom-swiper-hero .swiper-slide-active {
|
||||
width: 300px !important;
|
||||
height: 150px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-swiper-hero .swiper-slide > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.custom-swiper-hero .swiper-button-prev-custom,
|
||||
.custom-swiper-hero .swiper-button-next-custom {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.custom-swiper-hero .swiper-slide {
|
||||
width: 240px;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.custom-swiper-hero .swiper-slide-active {
|
||||
width: 380px !important;
|
||||
height: 480px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.custom-swiper-hero .swiper-slide {
|
||||
width: 180px;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.custom-swiper-hero .swiper-slide-active {
|
||||
width: 300px !important;
|
||||
height: 280px !important;
|
||||
}
|
||||
|
||||
.custom-swiper-hero .swiper-button-prev-custom,
|
||||
.custom-swiper-hero .swiper-button-next-custom {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.custom-swiper-hero .swiper-slide {
|
||||
width: 140px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.custom-swiper-hero .swiper-slide-active {
|
||||
width: 300px !important;
|
||||
height: 220px !important;
|
||||
}
|
||||
|
||||
.custom-swiper-hero .swiper-button-prev-custom,
|
||||
.custom-swiper-hero .swiper-button-next-custom {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
<ProfileCompletion />
|
||||
|
||||
|
||||
|
||||
{/* personal details start */}
|
||||
<Box p={3} sx={{ maxWidth: "1400px", width: "100%" }} mx="auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-5">
|
||||
{renderPersonalSection()}
|
||||
{renderEducationalSection()}
|
||||
{renderFamilySection()}
|
||||
{renderLifestyleSection()}
|
||||
{renderPreferenceSection()}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* personal details end */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfilePreviewPage;
|
||||
@@ -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]) {
|
||||
|
||||
Reference in new issue
Block a user