mageshwaran/thirukalyanamweb
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

filter master integrate

Browse Source
This commit is contained in:
meena committed 2026-03-10 18:03:17 +05:30
1 parent 5392a4211e
commit 9427677a72
16 files changed
+784 -468
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/feature/AdvancedDropzone.jsx
+3 -3
View File
@@ -107,14 +107,14 @@ const AdvancedDropzone = ({ value, onChange }) => {
<FileMosaic
{...file}
onDelete={onDelete}
// onSee={handleSee}
// onWatch={handleWatch}
onSee={handleSee}
onWatch={handleWatch}
onAbort={handleAbort}
onCancel={handleCancel}
resultOnTooltip
alwaysActive
preview
// info={false}
info={false}
/>
{hoveredId === file.id && (
<div
src/feature/FilterForm.jsx
+305 -238
View File
@@ -1,15 +1,12 @@
import React, { useState } from "react";
import React, { useState, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
setAge,
setHeight,
setMaritalStatus,
setMotherTongue,
setReligion,
setMatchesWithHoroscope,
setCaste,
setSubCaste,
updateFilter,
resetFilters,
} from "../redux/filterSlice";
import {
Slider,
@@ -26,8 +23,12 @@ import {
Accordion,
AccordionSummary,
AccordionDetails,
CircularProgress,
} from "@mui/material";
import { ChevronDown } from "lucide-react";
import { ChevronDown, Lock, Crown, RotateCcw, Check } from "lucide-react";
import { useProfilesFilterMasters } from "../hooks/useProfiles";
import { useCityMasters } from "../hooks/useDependentMasters";
import toast from "react-hot-toast";
const FilterForm = () => {
const dispatch = useDispatch();
@@ -40,34 +41,61 @@ const FilterForm = () => {
location: false,
lifestyle: false,
family: false,
paidBenefit: false,
});
const { data: filterMasters, isLoading, isError } = useProfilesFilterMasters();
const { data: cityData } = useCityMasters(
filters.state && filters.state.length > 0 ? filters.state : null
);
const cityOptions = useMemo(() => {
const raw = cityData;
if (!raw) return [];
if (Array.isArray(raw)) return raw;
return raw.subCaste || raw.district || raw.data || [];
}, [cityData]);
const handleAccordionChange = (section) => (event, isExpanded) => {
setExpandedSections((prev) => ({ ...prev, [section]: isExpanded }));
};
const casteOptions = ["Agamudayar", "Pillai", "Vellalar"];
const motherTongueOptions = [
"Tamil",
"Telugu",
"Malayalam",
"Kannada",
"Hindi",
];
const handleSubmit = () => {
console.log("Filter Values:", filters);
};
const handleClear = () => {
dispatch(resetFilters());
toast.success("Filters cleared");
};
const handleSelectionChange = (field, value) => {
console.log(`${field} selected:`, value);
};
if (isLoading) {
return (
<div className="flex justify-center items-center min-h-[300px]">
<CircularProgress />
</div>
);
}
if (isError) {
return (
<div className="flex justify-center items-center min-h-[300px]">
<Typography color="error">Failed to load filter options</Typography>
</div>
);
}
return (
<div className="max-w-6xl mx-auto p-4 px-0 md:p-6 ">
<div className="bg-white rounded-lg shadow-sm">
{/* Header */}
<div className="border-b border-pink-200 p-4 bg-[#fff5ed]">
<div className="border-b border-pink-200 p-4 bg-[#f2f2f2]">
<Typography variant="h5" className="font-semibold text-center">
Partner Filter preference
</Typography>
@@ -98,7 +126,7 @@ const FilterForm = () => {
<Typography gutterBottom sx={{marginBottom:"30px"}}>Age</Typography>
<div className="px-2">
<Slider
value={filters.age}
value={[filters.from_age, filters.to_age]}
onChange={(e, newValue) => {
dispatch(setAge(newValue));
handleSelectionChange("Age", newValue);
@@ -119,7 +147,7 @@ const FilterForm = () => {
<Typography gutterBottom sx={{marginBottom:"30px"}}>Height</Typography>
<div className="px-2">
<Slider
value={filters.height}
value={[filters.from_height, filters.to_height]}
onChange={(e, newValue) => {
dispatch(setHeight(newValue));
handleSelectionChange("Height", newValue);
@@ -141,46 +169,40 @@ const FilterForm = () => {
<FormControl fullWidth>
<InputLabel>Marital Status</InputLabel>
<Select
value={filters.maritalStatus}
multiple
value={filters.marital_status || []}
label="Marital Status"
onChange={(e) => {
dispatch(setMaritalStatus(e.target.value));
dispatch(updateFilter({ marital_status: e.target.value }));
handleSelectionChange("Marital Status", e.target.value);
}}
>
<MenuItem value="All Profile">All Profile</MenuItem>
<MenuItem value="Never Married">Never Married</MenuItem>
<MenuItem value="Divorced">Divorced</MenuItem>
<MenuItem value="Widowed">Widowed</MenuItem>
</Select>
</FormControl>
{/* Mother Tongue */}
<FormControl fullWidth>
<InputLabel>Mother Tongue</InputLabel>
<Select
multiple
value={filters.motherTongue}
label="Mother Tongue"
onChange={(e) => {
dispatch(setMotherTongue(e.target.value));
handleSelectionChange("Mother Tongue", e.target.value);
}}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} size="small" />
))}
{selected.map((value) => {
const label = filterMasters?.marital_statuses?.find((s) => s.id === value)?.marital_status_name || value;
return (
<Chip
key={value}
label={label}
size="small"
onDelete={() => dispatch(updateFilter({ marital_status: filters.marital_status.filter((v) => v !== value) }))}
onMouseDown={(e) => e.stopPropagation()}
/>
);
})}
</Box>
)}
>
{motherTongueOptions.map((lang) => (
<MenuItem key={lang} value={lang}>
{lang}
{filterMasters?.marital_statuses?.map((status) => (
<MenuItem key={status.id} value={status.id}>
{status.marital_status_name}
</MenuItem>
))}
</Select>
</FormControl>
</div>
</AccordionDetails>
</Accordion>
@@ -207,61 +229,69 @@ const FilterForm = () => {
<FormControl fullWidth>
<InputLabel>Religion</InputLabel>
<Select
value={filters.religion}
multiple
value={filters.religion || []}
label="Religion"
onChange={(e) => {
dispatch(setReligion(e.target.value));
dispatch(updateFilter({ religion: e.target.value }));
handleSelectionChange("Religion", e.target.value);
}}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => {
const label = filterMasters?.religions?.find((r) => r.id === value)?.religion_name || value;
return (
<Chip
key={value}
label={label}
size="small"
onDelete={() => dispatch(updateFilter({ religion: filters.religion.filter((v) => v !== value) }))}
onMouseDown={(e) => e.stopPropagation()}
/>
);
})}
</Box>
)}
>
<MenuItem value="Hindu">Hindu</MenuItem>
<MenuItem value="Muslim">Muslim</MenuItem>
<MenuItem value="Christian">Christian</MenuItem>
<MenuItem value="Sikh">Sikh</MenuItem>
{filterMasters?.religions?.map((rel) => (
<MenuItem key={rel.id} value={rel.id}>
{rel.religion_name}
</MenuItem>
))}
</Select>
</FormControl>
{/* Matches with Horoscope */}
<FormControlLabel
control={
<Checkbox
checked={filters.matchesWithHoroscope}
onChange={(e) => {
dispatch(setMatchesWithHoroscope(e.target.checked));
handleSelectionChange(
"Matches with Horoscope",
e.target.checked
);
}}
/>
}
label="Matches with horoscope"
/>
{/* Caste */}
<FormControl fullWidth>
<InputLabel>Caste (Multi Select)</InputLabel>
<InputLabel>Caste</InputLabel>
<Select
multiple
value={filters.caste}
label="Caste (Multi Select)"
label="Caste"
onChange={(e) => {
dispatch(setCaste(e.target.value));
handleSelectionChange("Caste", e.target.value);
}}
renderValue={(selected) => (
<Box
sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}
>
{selected.map((value) => (
<Chip key={value} label={value} size="small" />
))}
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => {
const label = filterMasters?.castes?.find((c) => c.id === value)?.caste_name || value;
return (
<Chip
key={value}
label={label}
size="small"
onDelete={() => dispatch(setCaste(filters.caste.filter((v) => v !== value)))}
onMouseDown={(e) => e.stopPropagation()}
/>
);
})}
</Box>
)}
>
{["Agamudayar", "Pillai", "Vellalar"].map((caste) => (
<MenuItem key={caste} value={caste}>
{caste}
{filterMasters?.castes?.map((caste) => (
<MenuItem key={caste.id} value={caste.id}>
{caste.caste_name}
</MenuItem>
))}
</Select>
@@ -269,21 +299,19 @@ const FilterForm = () => {
{/* Sub-Caste */}
<FormControl fullWidth>
<InputLabel>Sub-Caste (Multi Select)</InputLabel>
<InputLabel>Sub-Caste</InputLabel>
<Select
multiple
value={filters.subCaste}
label="Sub-Caste (Multi Select)"
value={filters.sub_caste}
label="Sub-Caste"
onChange={(e) => {
dispatch(setSubCaste(e.target.value));
handleSelectionChange("Sub-Caste", e.target.value);
}}
renderValue={(selected) => (
<Box
sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}
>
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} size="small" />
<Chip key={value} label={value} size="small" onDelete={() => dispatch(setSubCaste(filters.sub_caste.filter((v) => v !== value)))} onMouseDown={(e) => e.stopPropagation()} />
))}
</Box>
)}
@@ -296,39 +324,7 @@ const FilterForm = () => {
</Select>
</FormControl>
{/* Star */}
<FormControl fullWidth>
<InputLabel>Star</InputLabel>
<Select
value={filters.star}
label="Star"
onChange={(e) => {
dispatch(updateFilter({ star: e.target.value }));
handleSelectionChange("Star", e.target.value);
}}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="Ashwini">Ashwini</MenuItem>
<MenuItem value="Bharani">Bharani</MenuItem>
</Select>
</FormControl>
{/* Dasham */}
<FormControl fullWidth>
<InputLabel>Dasham</InputLabel>
<Select
value={filters.dasham}
label="Dasham"
onChange={(e) => {
dispatch(updateFilter({ dasham: e.target.value }));
handleSelectionChange("Dasham", e.target.value);
}}
>
<MenuItem value="Doesn't matter">Doesn't matter</MenuItem>
<MenuItem value="Yes">Yes</MenuItem>
<MenuItem value="No">No</MenuItem>
</Select>
</FormControl>
</div>
</AccordionDetails>
</Accordion>
@@ -356,66 +352,108 @@ const FilterForm = () => {
<FormControl fullWidth>
<InputLabel>Occupation</InputLabel>
<Select
value={filters.occupation}
multiple
value={filters.occupation || []}
label="Occupation"
onChange={(e) => {
dispatch(updateFilter({ occupation: e.target.value }));
handleSelectionChange("Occupation", e.target.value);
}}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => {
const label = filterMasters?.occupations?.find((o) => o.id === value)?.occupation_name || value;
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ occupation: filters.occupation.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
})}
</Box>
)}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="Software Engineer">
Software Engineer
</MenuItem>
<MenuItem value="Doctor">Doctor</MenuItem>
{filterMasters?.occupations?.map((occ) => (
<MenuItem key={occ.id} value={occ.id}>
{occ.occupation_name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel>Annual Income</InputLabel>
<Select
value={filters.annualIncome}
multiple
value={filters.annual_income || []}
label="Annual Income"
onChange={(e) => {
dispatch(updateFilter({ annualIncome: e.target.value }));
dispatch(updateFilter({ annual_income: e.target.value }));
handleSelectionChange("Annual Income", e.target.value);
}}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => {
const label = filterMasters?.annual_incomes?.find((i) => i.id === value)?.annual_income_name || value;
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ annual_income: filters.annual_income.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
})}
</Box>
)}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="0-5 Lakhs">0-5 Lakhs</MenuItem>
<MenuItem value="5-10 Lakhs">5-10 Lakhs</MenuItem>
{filterMasters?.annual_incomes?.map((inc) => (
<MenuItem key={inc.id} value={inc.id}>
{inc.annual_income_name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel>Employee Type</InputLabel>
<Select
value={filters.employeeType}
multiple
value={filters.employee_type || []}
label="Employee Type"
onChange={(e) => {
dispatch(updateFilter({ employeeType: e.target.value }));
dispatch(updateFilter({ employee_type: e.target.value }));
handleSelectionChange("Employee Type", e.target.value);
}}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => {
const label = filterMasters?.employee_types?.find((et) => et.id === value)?.employee_type_name || value;
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ employee_type: filters.employee_type.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
})}
</Box>
)}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="Government">Government</MenuItem>
<MenuItem value="Private">Private</MenuItem>
{filterMasters?.employee_types?.map((emp) => (
<MenuItem key={emp.id} value={emp.id}>
{emp.employee_type_name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel>Education</InputLabel>
<Select
value={filters.education}
multiple
value={filters.education || []}
label="Education"
onChange={(e) => {
dispatch(updateFilter({ education: e.target.value }));
handleSelectionChange("Education", e.target.value);
}}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => {
const label = filterMasters?.educations?.find((ed) => ed.id === value)?.education_name || value;
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ education: filters.education.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
})}
</Box>
)}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="Bachelor">Bachelor</MenuItem>
<MenuItem value="Master">Master</MenuItem>
{filterMasters?.educations?.map((edu) => (
<MenuItem key={edu.id} value={edu.id}>
{edu.education_name}
</MenuItem>
))}
</Select>
</FormControl>
</div>
@@ -443,50 +481,59 @@ const FilterForm = () => {
<FormControl fullWidth>
<InputLabel>State</InputLabel>
<Select
value={filters.state}
multiple
value={filters.state || []}
label="State"
onChange={(e) => {
dispatch(updateFilter({ state: e.target.value }));
dispatch(updateFilter({ state: e.target.value, district: [] }));
handleSelectionChange("State", e.target.value);
}}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => {
const label = filterMasters?.states?.find((s) => s.id === value)?.state_name || value;
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ state: filters.state.filter((v) => v !== value), district: [] }))} onMouseDown={(e) => e.stopPropagation()} />;
})}
</Box>
)}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="Tamil Nadu">Tamil Nadu</MenuItem>
<MenuItem value="Karnataka">Karnataka</MenuItem>
{filterMasters?.states?.map((state) => (
<MenuItem key={state.id} value={state.id}>
{state.state_name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel>Country</InputLabel>
<InputLabel>City</InputLabel>
<Select
value={filters.country}
label="Country"
multiple
value={filters.district || []}
label="City"
disabled={!filters.state || filters.state.length === 0}
onChange={(e) => {
dispatch(updateFilter({ country: e.target.value }));
handleSelectionChange("Country", e.target.value);
dispatch(updateFilter({ district: e.target.value }));
handleSelectionChange("City", e.target.value);
}}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => {
const label = cityOptions.find((c) => c.id === value)?.district_name || value;
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ district: filters.district.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
})}
</Box>
)}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="India">India</MenuItem>
<MenuItem value="USA">USA</MenuItem>
{cityOptions.map((city) => (
<MenuItem key={city.id} value={city.id}>
{city.district_name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel>Citizenship</InputLabel>
<Select
value={filters.citizenship}
label="Citizenship"
onChange={(e) => {
dispatch(updateFilter({ citizenship: e.target.value }));
handleSelectionChange("Citizenship", e.target.value);
}}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="Indian">Indian</MenuItem>
<MenuItem value="US Citizen">US Citizen</MenuItem>
</Select>
</FormControl>
</div>
</AccordionDetails>
</Accordion>
@@ -512,54 +559,22 @@ const FilterForm = () => {
<FormControl fullWidth>
<InputLabel>Eating Habits</InputLabel>
<Select
value={filters.eatingHabits}
value={filters.diet}
label="Eating Habits"
onChange={(e) => {
dispatch(updateFilter({ eatingHabits: e.target.value }));
dispatch(updateFilter({ diet: e.target.value }));
handleSelectionChange("Eating Habits", e.target.value);
}}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="Vegetarian">Vegetarian</MenuItem>
<MenuItem value="Non-Vegetarian">Non-Vegetarian</MenuItem>
{filterMasters?.diets?.map((diet) => (
<MenuItem key={diet.id} value={diet.id}>
{diet.diet_name}
</MenuItem>
))}
</Select>
</FormControl>
{/* <FormControl fullWidth>
<InputLabel>Smoking Habits</InputLabel>
<Select
value={filters.smokingHabits}
label="Smoking Habits"
onChange={(e) => {
dispatch(
updateFilter({ smokingHabits: e.target.value })
);
handleSelectionChange("Smoking Habits", e.target.value);
}}
>
<MenuItem value="Doesn't matter">Doesn't matter</MenuItem>
<MenuItem value="Non-Smoker">Non-Smoker</MenuItem>
<MenuItem value="Smoker">Smoker</MenuItem>
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel>Drinking Habits</InputLabel>
<Select
value={filters.drinkingHabits}
label="Drinking Habits"
onChange={(e) => {
dispatch(
updateFilter({ drinkingHabits: e.target.value })
);
handleSelectionChange("Drinking Habits", e.target.value);
}}
>
<MenuItem value="Doesn't matter">Doesn't matter</MenuItem>
<MenuItem value="Non-Drinker">Non-Drinker</MenuItem>
<MenuItem value="Social Drinker">Social Drinker</MenuItem>
</Select>
</FormControl> */}
</div>
</AccordionDetails>
</Accordion>
@@ -585,64 +600,116 @@ const FilterForm = () => {
<FormControl fullWidth>
<InputLabel>Family Type</InputLabel>
<Select
value={filters.familyType}
multiple
value={filters.family_type || []}
label="Family Type"
onChange={(e) => {
dispatch(updateFilter({ familyType: e.target.value }));
dispatch(updateFilter({ family_type: e.target.value }));
handleSelectionChange("Family Type", e.target.value);
}}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => {
const label = filterMasters?.family_types?.find((t) => t.id === value)?.family_type_name || value;
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ family_type: filters.family_type.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
})}
</Box>
)}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="Nuclear">Nuclear</MenuItem>
<MenuItem value="Joint">Joint</MenuItem>
{filterMasters?.family_types?.map((type) => (
<MenuItem key={type.id} value={type.id}>
{type.family_type_name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl fullWidth>
<InputLabel>Family Status</InputLabel>
<Select
value={filters.familyStatus}
label="Family Status"
onChange={(e) => {
dispatch(updateFilter({ familyStatus: e.target.value }));
handleSelectionChange("Family Status", e.target.value);
}}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="Middle Class">Middle Class</MenuItem>
<MenuItem value="Upper Middle Class">
Upper Middle Class
</MenuItem>
</Select>
</FormControl>
</div>
</AccordionDetails>
</Accordion>
{/* Paid Membership Benefit Section */}
<Accordion
expanded={expandedSections.paidBenefit && filters.isPaidMember}
onChange={(e, isExpanded) => {
if (!filters.isPaidMember) {
toast.error("This feature is locked for paid members only", {
icon: "🔒",
});
return;
}
handleAccordionChange("paidBenefit")(e, isExpanded);
}}
className="mb-4"
>
<AccordionSummary
expandIcon={filters.isPaidMember ? <ChevronDown /> : <Lock size={18} className="text-gray-400" />}
sx={{
backgroundColor: "#f5fbff",
"&:hover": {
backgroundColor: "#fff6f0",
},
}}
>
<div className="flex items-center gap-2 -mx-4 -my-2 px-4 py-2 w-full">
<Crown size={20} className="text-yellow-600" />
<Typography className="font-semibold">
Paid Membership Benefit
</Typography>
</div>
</AccordionSummary>
<AccordionDetails>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
{/* Star Filter */}
<FormControl fullWidth>
<InputLabel>Family Value</InputLabel>
<InputLabel>Star</InputLabel>
<Select
value={filters.familyValue}
label="Family Value"
multiple
value={filters.star || []}
label="Star"
disabled={!filters.isPaidMember}
onChange={(e) => {
dispatch(updateFilter({ familyValue: e.target.value }));
handleSelectionChange("Family Value", e.target.value);
dispatch(updateFilter({ star: e.target.value }));
handleSelectionChange("Star", e.target.value);
}}
renderValue={(selected) => (
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
{selected.map((value) => {
const label = filterMasters?.stars?.find((s) => s.id === value)?.star_name || value;
return <Chip key={value} label={label} size="small" onDelete={() => dispatch(updateFilter({ star: filters.star.filter((v) => v !== value) }))} onMouseDown={(e) => e.stopPropagation()} />;
})}
</Box>
)}
>
<MenuItem value="Any">Any</MenuItem>
<MenuItem value="Traditional">Traditional</MenuItem>
<MenuItem value="Moderate">Moderate</MenuItem>
<MenuItem value="Liberal">Liberal</MenuItem>
{filterMasters?.stars?.map((star) => (
<MenuItem key={star.id} value={star.id}>
{star.star_name}
</MenuItem>
))}
</Select>
</FormControl>
</div>
</AccordionDetails>
</Accordion>
{/* Submit Button */}
<div className="mt-6 flex justify-center">
{/* Sticky Footer Actions */}
<div className="sticky bottom-0 bg-white p-4 border-t border-gray-200 flex justify-between gap-4 mt-4 z-10 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
<Button
variant="outlined"
size="large"
onClick={handleClear}
className="px-8"
color="inherit"
startIcon={<RotateCcw size={20} />}
>
Clear Filters
</Button>
<Button
variant="contained"
size="large"
onClick={handleSubmit}
className="px-12"
startIcon={<Check size={20} />}
>
Apply Filters
</Button>
src/feature/FilterModal.jsx
+1 -1
View File
@@ -27,7 +27,7 @@ const FilterModal = () => {
open={open}
onClose={handleClose}
fullWidth
maxWidth="lg" // adjust: "sm" | "md" | "lg"
maxWidth="md" // adjust: "sm" | "md" | "lg"
>
<DialogTitle sx={{background:"#f5fbff"}}>
<Box display="flex" alignItems="center" justifyContent="space-between">
src/feature/LifestyleDetailsForm.jsx
+14 -1
View File
@@ -16,6 +16,7 @@ import {
DialogContent,
DialogContentText,
DialogActions,
Tooltip,
} from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
@@ -184,6 +185,7 @@ const LifestyleDetailsForm = ({
};
const renderChartCell = (label, value, onChange) => (
<Tooltip title={value && value.length > 0 ? value.join(", ") : ""} arrow placement="top">
<div className="bg-white border border-gray-300 rounded-lg p-2 flex flex-col items-center justify-center min-h-[70px]">
<span className="text-[10px] font-medium text-gray-700 text-center">
{label}
@@ -196,7 +198,17 @@ const LifestyleDetailsForm = ({
onChange={(e) => onChange(e.target.value)}
renderValue={(selected) => {
if (!selected || selected.length === 0) return `+ Add ${label}`;
return selected.join(", ");
return (
<div style={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
maxWidth: "60px",
fontSize: "11px"
}}>
{selected.join(", ")}
</div>
);
}}
MenuProps={{
PaperProps: { style: { maxHeight: 280 } },
@@ -211,6 +223,7 @@ const LifestyleDetailsForm = ({
</Select>
</FormControl>
</div>
</Tooltip>
);
const renderChartGrid = (type) => {
src/feature/PersonalDetailsForm.jsx
+40 -35
View File
@@ -39,6 +39,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
const dispatch = useDispatch();
const data = useSelector((state) => state.registerform.personalDetails);
const nameInputRef = useRef(null);
const mobileInputRef = useRef(null);
const requiredMark = <span style={{ color: "#d32f2f" }}> *</span>;
const [showOtp, setShowOtp] = useState(false);
@@ -56,15 +57,23 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
if (isStep1Update && data.mobileNumber && !data.verifiedMobileNumber) {
dispatch(updatePersonalDetails({ verifiedMobileNumber: data.mobileNumber }));
setMobileOtpVerified(true);
setMobileNumberError("");
}
}, [isStep1Update, data.mobileNumber, data.verifiedMobileNumber, dispatch]);
useEffect(() => {
if (data.verifiedMobileNumber && data.mobileNumber === data.verifiedMobileNumber) {
setMobileOtpVerified(true);
setMobileNumberError("");
}
}, [data.verifiedMobileNumber, data.mobileNumber]);
useEffect(() => {
if (!isStep1Update && !data.religion) {
dispatch(updatePersonalDetails({ religion: 1 }));
}
}, [isStep1Update, data.religion, dispatch]);
const { data: personalMasters, isLoading: isPersonalMastersLoading } =
usePersonalDetailsMasters();
@@ -120,7 +129,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
const raw = cityQuery.data;
if (!raw) return [];
if (Array.isArray(raw)) return raw;
return raw.subCaste || raw.district || raw.data || [];
return raw.subCaste || raw.sub_caste || raw.district || raw.data || [];
}, [cityQuery.data]);
const starOptions = useMemo(() => {
@@ -384,12 +393,6 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
}
};
useEffect(() => {
if (showOtp && !mobileOtpVerified && isOtpComplete) {
handleOtpSubmit();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [otp]);
// file upload
@@ -426,32 +429,31 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
const handleSubmit = async () => {
if (showOtp && !isOtpComplete) {
setOtpError("OTP is required and must be complete");
return;
}
if (showOtp && !mobileOtpVerified) {
try {
await verifyOtp.mutateAsync({
mobile: data.mobileNumber,
otp: otp.join(""),
});
setMobileOtpVerified(true);
setOtpError("");
console.log("Submitting personal details:", data); // log here
onSubmitStep();
console.log("OTP verified on submit");
} catch (err) {
setOtpError(err || "OTP verification failed");
// For new registrations, mobile verification is mandatory.
// For updates, it's also mandatory if the number was changed.
// The `mobileOtpVerified` state covers both scenarios.
if (!mobileOtpVerified) {
// Provide a more specific error message.
if (showOtp) {
if (!isOtpComplete) {
setOtpError("OTP is required and must be complete");
} else {
setOtpError("Please submit the OTP to verify your number.");
}
const firstOtpInput = document.getElementById("otp-0");
if (firstOtpInput) {
firstOtpInput.focus();
}
} else {
setMobileNumberError("Please verify your mobile number to proceed.");
if (mobileInputRef.current) {
mobileInputRef.current.focus();
}
}
return;
}
return;
}
// no OTP or already verified
console.log("Submitting personal details:", data); // log here
onSubmitStep();
};
onSubmitStep();
};
const formatTimer = (sec) => {
@@ -532,6 +534,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
<Box sx={{ display: "flex", alignItems: "start", gap: 2 }}>
<TextField
fullWidth
inputRef={mobileInputRef}
name="mobileNumber"
label="Mobile Number"
type="tel"
@@ -629,15 +632,15 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
</Button>
</Box>
<Typography sx={{ ml: 2, minWidth: 56 }}>
<Typography sx={{ ml: 0, minWidth: 56 }}>
{otpTimer > 0 ? (
` ${formatTimer(otpTimer) } Seconds`
) : (
<button
component="button"
variant="body2"
type="button"
onClick={handleMobileSubmit}
disabled={otpTimer > 0}
style={{ background: "none", border: "none", padding: 0, textDecoration: "underline", cursor: "pointer", color: "inherit", font: "inherit" }}
>
Resend OTP
</button>
@@ -712,6 +715,8 @@ const PersonalDetailsForm = ({ onSubmitStep, errors, onFieldChange, isStep1Updat
fullWidth
name="height"
label="Enter Height"
max={3}
type="number"
value={data.height}
onChange={(e) => handleChange("height", e.target.value)}
src/feature/StepperForm.jsx
+87 -68
View File
@@ -233,8 +233,7 @@ const StepperForm = () => {
const location = useLocation();
const navigate = useNavigate();
const hideStepperRoutes = ["/profile-edit"];
const shouldHideStepper = hideStepperRoutes.includes(location.pathname);
const shouldHideStepper = hideStepperRoutes.some((route) => location.pathname.startsWith(route));
const personalDetails = useSelector(
(state) => state.registerform.personalDetails
);
@@ -421,78 +420,84 @@ const [completedSteps, setCompletedSteps] = useState([]);
}
}, [location.state, navigate, location.pathname]);
const { data: personalDetailsData } = useQuery({
queryKey: ["personalDetails"],
queryFn: async () => {
const response = await axiosInstance.get(API_ENDPOINTS.EDIT_PERSONAL_DETAILS);
return response.data;
},
enabled: isAuth || shouldHideStepper,
retry: false,
refetchOnWindowFocus: false,
});
useEffect(() => {
if (!isAuth) return;
const fetchPersonalDetails = async () => {
try {
const response = await axiosInstance.get(API_ENDPOINTS.EDIT_PERSONAL_DETAILS);
const data = response.data;
if (data.status === "success" && data.personal_details) {
const pd = data.personal_details;
setIsStep1Update(true);
const processData = async () => {
if (personalDetailsData?.status === "success" && personalDetailsData?.personal_details) {
const pd = personalDetailsData.personal_details;
setIsStep1Update(true);
const rawImages = pd.profile_images || pd.images || [];
const mappedImages = await Promise.all(
rawImages.map(async (url, index) => {
const imageUrl = typeof url === "string" ? url : url?.url;
let file = null;
let mimeType = "image/jpeg";
let fileName = `image-${index}.jpg`;
const rawImages = pd.profile_images || pd.images || [];
const mappedImages = await Promise.all(
rawImages.map(async (url, index) => {
const imageUrl = typeof url === "string" ? url : url?.url;
let file = null;
let mimeType = "image/jpeg";
let fileName = `image-${index}.jpg`;
try {
try {
if (imageUrl) {
const response = await fetch(imageUrl);
const blob = await response.blob();
if (blob.type) mimeType = blob.type;
const ext = mimeType.split("/")[1] || "jpg";
fileName = `image-${index}.${ext}`;
file = new File([blob], fileName, { type: mimeType });
} catch (error) {
console.error("Error converting image URL to File:", error);
}
return {
id: `server-${index}`,
preview: imageUrl,
imageUrl: imageUrl,
file: file,
name: fileName,
type: mimeType,
valid: true,
};
})
);
} catch (error) {
console.error("Error converting image URL to File:", error);
}
return {
id: `server-${index}`,
preview: imageUrl,
imageUrl: imageUrl,
file: file,
name: fileName,
type: mimeType,
valid: true,
};
})
);
const formattedDob = pd.dob ? pd.dob.split("T")[0] : "";
const formattedDob = pd.dob ? pd.dob.split("T")[0] : "";
dispatch(
updatePersonalDetails({
name: pd.name || "",
mobileNumber: pd.mobile || "",
email: pd.email || "",
gender: pd.gender || "",
dob: formattedDob,
height: pd.height || "",
weight: pd.weight || "",
maritalStatus: pd.marital_status_id || "",
religion: pd.religion_id || "",
profileFor: pd.profile_for_id || "",
caste: pd.caste_id || "",
subCaste: pd.sub_caste_id || "",
gothram: pd.gothram_id || "",
raasi: pd.raasi_id || "",
star: pd.star_id || "",
state: pd.state_id || "",
city: pd.district_id || "",
pincode: pd.pincode || "",
profiles: mappedImages,
})
);
}
} catch (error) {
console.error("Error fetching personal details:", error);
dispatch(
updatePersonalDetails({
name: pd.name || "",
mobileNumber: pd.mobile || "",
email: pd.email || "",
gender: pd.gender || "",
dob: formattedDob,
height: pd.height || "",
weight: pd.weight || "",
maritalStatus: pd.marital_status_id || "",
religion: pd.religion_id || "",
profileFor: pd.profile_for_id || "",
caste: pd.caste_id || "",
subCaste: pd.sub_caste_id || "",
gothram: pd.gothram_id || "",
raasi: pd.raasi_id || "",
star: pd.star_id || "",
state: pd.state_id || "",
city: pd.district_id || "",
pincode: pd.pincode || "",
profiles: mappedImages,
})
);
}
};
fetchPersonalDetails();
}, [dispatch, isAuth]);
processData();
}, [personalDetailsData, dispatch]);
// Fetch Educational Details
@@ -502,7 +507,7 @@ const [completedSteps, setCompletedSteps] = useState([]);
const response = await axiosInstance.get(API_ENDPOINTS.EDIT_EDUCATION_DETAILS);
return response.data;
},
enabled: isAuth,
enabled: isAuth || shouldHideStepper,
retry: false,
refetchOnWindowFocus: false,
});
@@ -535,7 +540,7 @@ const {data:familyData} = useQuery({
const response = await axiosInstance.get(API_ENDPOINTS.EDIT_FAMILY_DETAILS);
return response.data;
},
enabled: isAuth,
enabled: isAuth || shouldHideStepper,
retry:false,
refetchOnWindowFocus:false,
});
@@ -584,9 +589,10 @@ useEffect(()=>{
const response = await axiosInstance.get(API_ENDPOINTS.EDIT_LIFESTYLE_DETAILS);
return response.data;
},
enabled: isAuth,
enabled: isAuth || shouldHideStepper,
retry: false,
refetchOnWindowFocus: false,
refetchOnMount: true,
});
useEffect(() => {
@@ -608,8 +614,8 @@ useEffect(()=>{
updateLifestyleDetails({
diets: ld.diet_id || "",
hobbies: ld.hobbies_ids || [],
dob: ld.time_of_birth || "",
tob: ld.date_of_birth ? ld.date_of_birth.substring(0, 5) : "",
dob: ld.time_of_birth ? ld.time_of_birth.split("T")[0] : "",
tob: ld.time_of_birth_formated ? ld.time_of_birth_formated.substring(0, 5) : "",
placeOfBirth: ld.place_of_birth || "",
graha: mapChart("graha"),
amsam: mapChart("amsam"),
@@ -626,7 +632,7 @@ useEffect(()=>{
const response = await axiosInstance.get(API_ENDPOINTS.EDIT_PREFERED_PARTNER_DETAILS);
return response.data;
},
enabled: isAuth,
enabled: isAuth || shouldHideStepper,
retry: false,
refetchOnWindowFocus: false,
});
@@ -878,6 +884,8 @@ useEffect(()=>{
if (fileToAppend) {
formData.append(`profile_images[${index}]`, fileToAppend);
} else if (item.preview && typeof item.preview === "string") {
formData.append(`profile_images[${index}]`, item.preview);
}
})
);
@@ -932,7 +940,7 @@ useEffect(()=>{
formData.append("tob", lifestyleDetails.tob || "");
formData.append("place_of_birth", lifestyleDetails.placeOfBirth || "");
formData.append("diet", lifestyleDetails.diets || "");
formData.append("diets", lifestyleDetails.diets || "");
(lifestyleDetails.hobbies || []).forEach((id, index) => {
formData.append(`hobbies[${index}]`, id);
@@ -1022,6 +1030,9 @@ useEffect(()=>{
try {
const previewData = await getPreviewDetails();
queryClient.invalidateQueries({
queryKey: ["preview-details"]
});
if (previewData?.personal_details) {
const pd = previewData.personal_details;
const images = pd.images || pd.profile_images;
@@ -1032,7 +1043,7 @@ useEffect(()=>{
dispatch(updatePersonalDetails({ profiles: formattedImages }));
}
}
queryClient.invalidateQueries({ queryKey: ["previewDetails"] });
queryClient.invalidateQueries({ queryKey: ["personalDetails"] });
} catch (error) {
console.error("Error refreshing preview details:", error);
}
@@ -1047,21 +1058,29 @@ useEffect(()=>{
case 2:
payload = buildRegisterStep2Payload();
await registerStep2.mutateAsync(payload);
queryClient.invalidateQueries({ queryKey: ["educationalDetails"] });
queryClient.invalidateQueries({ queryKey: ["preview-details"] });
break;
case 3:
payload = buildRegisterStep3Payload();
await registerStep3.mutateAsync(payload);
queryClient.invalidateQueries({ queryKey: ["familyDetails"] })
queryClient.invalidateQueries({ queryKey: ["preview-details"] });
break;
case 4:
payload = buildRegisterStep4Payload();
await registerStep4.mutateAsync(payload);
queryClient.invalidateQueries({ queryKey: ["lifestyleDetails"] });
queryClient.invalidateQueries({ queryKey: ["preview-details"] });
break;
case 5:
payload = buildRegisterStep5Payload();
await registerStep5.mutateAsync(payload);
queryClient.invalidateQueries({ queryKey: ["partnerPreferences"] });
queryClient.invalidateQueries({ queryKey: ["preview-details"] });
break;
default: