{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.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 */}
-
+
{
+
+
{
+
{
+
+
{
+
{
+
{
-
-
+
{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) => (
+ })
+ ))
+ ) : (
+
+
+ No photos uploaded
+
+ )}
+
+ ) : (
+ // Text OR No Data
+ <>
+ {value ? (
+
+ {value}
+
+ ) : (
+
+
+ No data available
+
+ )}
+
+ )}
+
+
+
);
- }
- return null;
+
+
})}
-
+
))}
-
+
+
+ ) : (
+
+
+
+ )}
+
+ ))}
+ {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 {idx + 1}
+
*/}
+
+
+
+
+
+ {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 */}
+
+
+ {/* Content */}
+
+
+ {notification.user}{' '}
+ {notification.message}
+
+
+
+
+ {/* Time and Menu */}
+
+ {notification.time}
+ handleMenuOpen(e, notification.id)}
+ sx={{
+ color: '#6b7280',
+ '&:hover': { backgroundColor: '#f3f4f6' }
+ }}
+ >
+
+
+
+
+
+ ))}
+
+ )}
+
+
+ {/* Delete Menu */}
+
+
+