step 1 api

.env

@@ -0,0 +1 @@
+VITE_THIRUKALYANAM_API_BASE_URL=https://www.thirukalyanam.amrithaa.net/backend/api/

package.json

@@ -22,8 +22,10 @@
     "@mui/x-date-pickers": "^8.19.0",
     "@reduxjs/toolkit": "^2.11.0",
     "@tailwindcss/vite": "^4.1.17",
+    "@tanstack/react-query": "^5.90.21",
     "axios": "^1.13.2",
     "date-fns": "^4.1.0",
+    "firebase": "^12.10.0",
     "framer-motion": "^12.23.24",
     "lightswind": "^3.1.18",
     "lucide-react": "^0.553.0",

public/firebase-messaging-sw.js

@@ -0,0 +1,43 @@
+// Give the service worker access to Firebase Messaging.
+// Note that you can only use Firebase Messaging here. Other Firebase libraries
+// are not available in the service worker.
+// Replace 10.13.2 with latest version of the Firebase JS SDK.
+importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
+importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');
+
+// Initialize the Firebase app in the service worker by passing in
+// your app's Firebase config object.
+// https://firebase.google.com/docs/web/setup#config-object
+firebase.initializeApp({
+  apiKey: "AIzaSyC14hS0_idUIRS9JEigObmT-_CGl3zb8Fo",
+  authDomain: "thirukalyanam-c8e1c.firebaseapp.com",
+  projectId: "thirukalyanam-c8e1c",
+  storageBucket: "thirukalyanam-c8e1c.firebasestorage.app",
+  messagingSenderId: "433615056618",
+  appId: "1:433615056618:web:309a920f408ba826907193",
+  measurementId: "G-1L93F6DS7K"
+});
+
+// Retrieve an instance of Firebase Messaging so that it can handle background
+// messages.
+const messaging = firebase.messaging();
+
+
+
+messaging.onBackgroundMessage((payload) => {
+  console.log(
+    '[firebase-messaging-sw.js] Received background message ',
+    payload
+  );
+  // Customize notification here
+  const notificationTitle = payload.notification.title;
+  const notificationOptions = {
+    body: payload.notification.body,
+    icon: payload.notification.image || "/favicon.ico",
+     data: {
+      url: "/notification" // 👈 set target URL
+    }
+  };
+
+  self.registration.showNotification(notificationTitle, notificationOptions);
+});

src/App.jsx

@@ -2,7 +2,15 @@ import "./App.css";
 import { BrowserRouter as Router } from "react-router-dom";
 import AppRoutes from "./routes/AppRoutes";
 import { Toaster } from "react-hot-toast";
+import { useEffect } from "react";
+import { generateToken, listenToMessages } from "./notifications/firebase";
 function App() {
+  useEffect(()=>{
+
+  generateToken();
+  listenToMessages(); // foreground notifications
+ 
+},[]);
   return (
     <>  <Toaster position="top-center" />
       <Router>

src/api/apiEndpoints.js

@@ -0,0 +1,28 @@
+export const API_ENDPOINTS = {
+  LOGOUT: "logout",
+  TERMS_AND_POLICIES_PRIVACY:"terms-and-policies",
+ // registration api's
+PERSONAL_DETAILS_MASTER :"personal_details_masters",
+CASTE_MASTER : "get_caste_masters",
+SUB_CASTE_MASTER : "get_sub_caste_masters",
+CITY_MASTER :    "get_district_masters",
+STAR_MASTER : "get_star_masters",
+MOBILE_SEND_OTP: "send_otp",
+MOBILE_VERIFY_OTP: "verify_otp",
+
+EDUCATION_DETAILS_MASTER: "educational_details_masters",
+EDUCATION_LIST_API:"get_education",
+
+FAMILY_DETAILS_MASTER: "family_details_masters", // family details master api
+
+LIFESTYLE_DETAILS_MASTER:"lifetstyle_details_masters",
+
+PREFERED_PARTNER_DETAILS_MASTER:"prefered_details_masters",
+
+REGISTER_STEP1: "register", // register api
+REGISTER_STEP2:"update_educational_details",  // educational details updated  api
+REGSITER_STEP3:"update_family_details",   // family details updated  api
+REGISTER_STEP4:"update_lifestyle_details",   // lifestyle details updated  api
+REGISTER_STEP5:"update_preferred_details",   // partner preference details updated  api
+
+};

src/api/auth.api.js

@@ -0,0 +1,22 @@
+import axiosInstance from "./axiosInstance";
+import { API_ENDPOINTS } from "./apiEndpoints";
+
+export const sendOtpAPI = async (mobile) => {
+  const res = await axiosInstance.post(API_ENDPOINTS.MOBILE_SEND_OTP, {
+    mobile,
+  });
+  return res.data;
+};
+
+export const verifyOtpAPI = async ({ mobile, otp }) => {
+  const res = await axiosInstance.post(API_ENDPOINTS.MOBILE_VERIFY_OTP, {
+    mobile,
+    otp,
+  });
+  return res.data;
+};
+
+export const logoutAPI = async () => {
+  const res = await axiosInstance.post(API_ENDPOINTS.LOGOUT);
+  return res.data;
+};

src/api/axiosInstance.js

@@ -7,8 +7,8 @@ import { API_ENDPOINTS } from "./apiEndpoints";
  * and default headers for JSON communication.
  */
 const axiosInstance = axios.create({
-  baseURL: import.meta.env.VITE_UNICORN_API_BASE_URL ||
+  baseURL: import.meta.env.VITE_THIRUKALYANAM_API_BASE_URL ||
-  "https://www.unicorn.amrithaa.net/backend/api/" ,
+  "https://www.thirukalyanam.amrithaa.net/backend/api/" ,
   headers: {
     "Content-Type": "application/json",
   },
@@ -19,7 +19,7 @@ const axiosInstance = axios.create({
  * while sharing the same base URL and authorization mechanism.
  */
 const apiForFiles = axios.create({
-  baseURL: import.meta.env.VITE_UNICORN_API_BASE_URL,
+  baseURL: import.meta.env.VITE_THIRUKALYANAM_API_BASE_URL,
   headers: {
     "Content-Type": "multipart/form-data",
   },
@@ -69,7 +69,8 @@ const addErrorInterceptor = (instance) => {
         console.error("Unauthorized access - logging out...");
         localStorage.removeItem("access_token");
         // window.location.href = "/";
-        navigate("/");
+         // SAFE redirect (works outside React)
+        window.location.replace("/");
       } else if (error.response && error.response.status === 403) {
         window.location.href = "/";
         // navigate("/");
@@ -178,7 +179,8 @@ export const logoutAPI = async () => {
     console.log("Clearing local storage...");
     // always clear local storage
     localStorage.removeItem("access_token");
-    // clearFcmToken();
+    clearFcmToken();
+    window.location.replace("/");
   }
 };
 

src/api/masters.api.js

@@ -0,0 +1,57 @@
+import axiosInstance from "./axiosInstance";
+import { API_ENDPOINTS } from "./apiEndpoints";
+
+export const getPersonalDetailsMasters = async () => {
+  const res = await axiosInstance.get(API_ENDPOINTS.PERSONAL_DETAILS_MASTER);
+  return res.data;
+};
+
+export const getCasteMasters = async (religion_id) => {
+  const res = await axiosInstance.get(API_ENDPOINTS.CASTE_MASTER, {
+    params: { religion_id },
+  });
+  return res.data;
+};
+
+export const getSubCasteMasters = async (caste_id) => {
+  const res = await axiosInstance.get(API_ENDPOINTS.SUB_CASTE_MASTER, {
+    params: { caste_id },
+  });
+  return res.data;
+};
+
+export const getCityMasters = async (state_id) => {
+  const res = await axiosInstance.get(API_ENDPOINTS.CITY_MASTER, {
+    params: { state_id },
+  });
+  return res.data;
+};
+
+export const getStarMasters = async (raasi_id) => {
+  const res = await axiosInstance.get(API_ENDPOINTS.STAR_MASTER, {
+    params: { raasi_id },
+  });
+  return res.data;
+};
+
+export const getEducationMasters = async () => {
+  const res = await axiosInstance.get(API_ENDPOINTS.EDUCATION_DETAILS_MASTER);
+  return res.data;
+};
+
+export const getFamilyMasters = async () => {
+  const res = await axiosInstance.get(API_ENDPOINTS.FAMILY_DETAILS_MASTER);
+  return res.data;
+};
+
+export const getLifestyleMasters = async () => {
+  const res = await axiosInstance.get(API_ENDPOINTS.LIFESTYLE_DETAILS_MASTER);
+  return res.data;
+};
+
+export const getPartnerPreferenceMasters = async () => {
+  const res = await axiosInstance.get(
+    API_ENDPOINTS.PREFERED_PARTNER_DETAILS_MASTER
+  );
+  return res.data;
+};

src/api/register.api.js

@@ -0,0 +1,34 @@
+import axiosInstance from "./axiosInstance";
+import { API_ENDPOINTS } from "./apiEndpoints";
+
+/**
+ * STEP 1 – Personal Details
+ */
+export const registerStep1API = async (payload) => {
+  const res = await axiosInstance.post(API_ENDPOINTS.REGISTER_STEP1, payload);
+  return res.data;
+};
+
+/**
+ * STEP 2 – Education Details
+ */
+export const registerStep2API = async (payload) => {
+  const res = await axiosInstance.post(API_ENDPOINTS.REGISTER_STEP2, payload);
+  return res.data;
+};
+
+/**
+ * STEP 3 – Family Details
+ */
+export const registerStep3API = async (payload) => {
+  const res = await axiosInstance.post(API_ENDPOINTS.REGSITER_STEP3, payload);
+  return res.data;
+};
+
+/**
+ * STEP 4 – Lifestyle Details
+ */
+export const registerStep4API = async (payload) => {
+  const res = await axiosInstance.post(API_ENDPOINTS.REGISTER_STEP4, payload);
+  return res.data;
+};

src/feature/AdvancedDropzone.jsx

@@ -59,10 +59,10 @@ const AdvancedDropzone = ({ value, onChange }) => {
         onChange={updateFiles}
         minHeight="195px"
         value={extFiles}
-        accept="image/*, video/*"
+        accept="image/*"
         maxFiles={3}
-        maxFileSize={2 * 1024 * 1024}
+        maxFileSize={10 * 1024 * 1024}
-        label="Drag'n drop files here or click to browse"
+        label="Drag'n drop up to 3 images (max 10 MB each)"
         uploadConfig={{
           url: BASE_URL + "/file",
           cleanOnUpload: true,

src/feature/PersonalDetailsForm.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { updatePersonalDetails } from "../redux/registrationFormSlice";
 import {
@@ -12,19 +12,31 @@ import {
   Box,
   Typography,
   Link,
+  InputAdornment,
 } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import AdvancedDropzone from "./AdvancedDropzone";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import toast from "react-hot-toast";
 
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import {
+  usePersonalDetailsMasters,
+  useCasteMasters,
+  useSubCasteMasters,
+  useCityMasters,
+  useStarMasters,
+} from "../hooks/useDependentMasters";
+import { useSendOtp, useVerifyOtp } from "../hooks/useAuth";
 const OTP_LENGTH = 4;
 const OTP_TIMER_SEC = 120; // 2 minutes
 
-const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
+const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
   const dispatch = useDispatch();
   const data = useSelector((state) => state.registerform.personalDetails);
   const nameInputRef = useRef(null);
+  const requiredMark = <span style={{ color: "#d32f2f" }}> *</span>;
 
   const [showOtp, setShowOtp] = useState(false);
   const [otp, setOtp] = useState(new Array(OTP_LENGTH).fill(""));
@@ -32,6 +44,93 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
   const [otpError, setOtpError] = useState("");
   const [mobileOtpVerified, setMobileOtpVerified] = useState(false);
   const [mobileNumberError, setMobileNumberError] = useState("");
+  const sendOtp = useSendOtp();
+  const verifyOtp = useVerifyOtp();
+
+  const { data: personalMasters, isLoading: isPersonalMastersLoading } =
+    usePersonalDetailsMasters();
+
+  const genderOptions = useMemo(
+    () => personalMasters?.gender ?? [],
+    [personalMasters]
+  );
+  const maritalStatusOptions = useMemo(
+    () => personalMasters?.marital_status ?? [],
+    [personalMasters]
+  );
+  const religionOptions = useMemo(
+    () => personalMasters?.religion ?? [],
+    [personalMasters]
+  );
+  const profileCreatedForOptions = useMemo(
+    () => personalMasters?.profileCreatedFor ?? [],
+    [personalMasters]
+  );
+  const gothramOptions = useMemo(
+    () => personalMasters?.gothram ?? [],
+    [personalMasters]
+  );
+  const raasiOptions = useMemo(
+    () => personalMasters?.raasi ?? [],
+    [personalMasters]
+  );
+  const stateOptions = useMemo(
+    () => personalMasters?.state ?? [],
+    [personalMasters]
+  );
+
+  const casteQuery = useCasteMasters(data.religion);
+  const subCasteQuery = useSubCasteMasters(data.caste);
+  const cityQuery = useCityMasters(data.state);
+  const starQuery = useStarMasters(data.raasi);
+
+  const casteOptions = useMemo(() => {
+    const raw = casteQuery.data;
+    if (!raw) return [];
+    if (Array.isArray(raw)) return raw;
+    return raw.caste || raw.data || [];
+  }, [casteQuery.data]);
+
+  const subCasteOptions = useMemo(() => {
+    const raw = subCasteQuery.data;
+    if (!raw) return [];
+    if (Array.isArray(raw)) return raw;
+    return raw.sub_caste || raw.subCaste || raw.data || [];
+  }, [subCasteQuery.data]);
+
+  const cityOptions = useMemo(() => {
+    const raw = cityQuery.data;
+    if (!raw) return [];
+    if (Array.isArray(raw)) return raw;
+    return raw.city || raw.district || raw.data || [];
+  }, [cityQuery.data]);
+
+  const starOptions = useMemo(() => {
+    const raw = starQuery.data;
+    if (!raw) return [];
+    if (Array.isArray(raw)) return raw;
+    return raw.star || raw.data || [];
+  }, [starQuery.data]);
+
+  const getOptionLabel = useCallback((item, fallback = "") => {
+    if (!item) return fallback;
+    if (typeof item === "string") return item;
+    return (
+      item.name ||
+      item.caste_name ||
+      item.sub_caste_name ||
+      item.district_name ||
+      item.city_name ||
+      item.state_name ||
+      item.religion_name ||
+      item.marital_status_name ||
+      item.gothram_name ||
+      item.raasi_name ||
+      item.profile_for_name ||
+      item.star_name ||
+      fallback
+    );
+  }, []);
 
   const startOtpTimer = useCallback(() => {
     setOtpTimer(OTP_TIMER_SEC);
@@ -60,27 +159,60 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
     }
   };
 
+  const handleOtpKeyDown = (index, event) => {
+    if (event.key !== "Backspace") return;
+    event.preventDefault();
+    const newOtp = [...otp];
+    if (newOtp[index]) {
+      newOtp[index] = "";
+      setOtp(newOtp);
+      return;
+    }
+    if (index > 0) {
+      newOtp[index - 1] = "";
+      setOtp(newOtp);
+      const prev = document.getElementById(`otp-${index - 1}`);
+      if (prev) prev.focus();
+    }
+  };
+
   const resetOtp = () => {
     setOtp(new Array(OTP_LENGTH).fill(""));
     setOtpError("");
     startOtpTimer();
   };
 
-  const handleMobileSubmit = () => {
+  const handleMobileSubmit = async () => {
     if (!data.mobileNumber || data.mobileNumber.length !== 10) {
       setMobileNumberError(
         "Please enter a valid 10-digit mobile number before sending OTP"
       );
       return;
     }
+    try {
       setMobileNumberError("");
+      const res = await sendOtp.mutateAsync(data.mobileNumber);
+      const successMessage =
+        res?.message ||
+        res?.status ||
+        "OTP sent successfully";
+      toast.success(successMessage);
       setShowOtp(true);
       resetOtp();
       setMobileOtpVerified(false);
+    } catch (error) {
+      setMobileNumberError("Failed to send OTP. Please try again.");
+      const message =
+        error?.response?.data?.message ||
+        error?.response?.data?.otp ||
+        error?.message ||
+        "Failed to send OTP";
+      toast.error(message);
+    }
   };
 
   const handleChange = (field, value) => {
-    dispatch(updatePersonalDetails({ [field]: value }));
+    const updates = { [field]: value };
     if (field === "mobileNumber") {
       setMobileNumberError("");
       setShowOtp(false);
@@ -89,31 +221,50 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
       setOtpTimer(0);
       setMobileOtpVerified(false);
     }
+    if (field === "religion") {
+      updates.caste = "";
+      updates.subCaste = "";
+    }
+    if (field === "caste") {
+      updates.subCaste = "";
+    }
+    if (field === "state") {
+      updates.city = "";
+    }
+    if (field === "raasi") {
+      updates.star = "";
+    }
+    dispatch(updatePersonalDetails(updates));
   };
 
   const isOtpComplete = otp.every((digit) => digit !== "");
 
-  // Simulated API OTP verification (replace with actual)
-  const verifyOtpApi = async (mobile, otpValue) => {
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        if (otpValue === "1234") resolve(true);
-        else reject("Invalid OTP");
-      }, 1000);
-    });
-  };
-
   const handleOtpSubmit = async () => {
     if (!isOtpComplete) {
       setOtpError("Complete OTP is required");
       return;
     }
     try {
-      await verifyOtpApi(data.mobileNumber, otp.join(""));
+      const res = await verifyOtp.mutateAsync({
+        mobile: data.mobileNumber,
+        otp: otp.join(""),
+      });
+      const successMessage =
+        res?.message ||
+        res?.status ||
+        "OTP verified successfully";
+      toast.success(successMessage);
       setMobileOtpVerified(true);
       setMobileNumberError("");
+      setOtpError("");
     } catch (error) {
-      setOtpError(error || "OTP verification failed");
+      const message =
+        error?.response?.data?.otp ||
+        error?.response?.data?.message ||
+        error?.message ||
+        "Invalid or expired OTP";
+      setOtpError(message);
+      toast.error(message);
     }
   };
 
@@ -159,7 +310,10 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
   if (showOtp && !mobileOtpVerified) {
     try {
-      await verifyOtpApi(data.mobileNumber, otp.join(""));
+      await verifyOtp.mutateAsync({
+        mobile: data.mobileNumber,
+        otp: otp.join(""),
+      });
       setMobileOtpVerified(true);
       setOtpError("");
       console.log("Submitting personal details:", data); // log here
@@ -193,7 +347,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
             {/* Name */}
             <div className="flex flex-col gap-4">
               <label className="text-gray-900 text-[17px]">
-                Enter the Name
+                Enter the Name{requiredMark}
               </label>
               <TextField
                 fullWidth
@@ -212,7 +366,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
             {/* Gender */}
             <div className="flex flex-col gap-6">
               <label className="text-gray-900 text-[17px]">
-                Enter the Gender
+                Enter the Gender{requiredMark}
               </label>
               <FormControl
                 fullWidth
@@ -227,8 +381,11 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                   value={data.gender}
                   onChange={(e) => handleChange("gender", e.target.value)}
                 >
-                  <MenuItem value="Male">Male</MenuItem>
+                  {genderOptions.map((gender) => (
-                  <MenuItem value="Female">Female</MenuItem>
+                    <MenuItem key={gender} value={gender}>
+                      {gender}
+                    </MenuItem>
+                  ))}
                 </Select>
                 {errors.gender && (
                   <p
@@ -246,6 +403,10 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
             {/* Mobile Number and Send OTP Button */}
             <div className="flex flex-col gap-6 relative">
+              <label className="text-gray-900 text-[17px]">
+                Mobile Number{requiredMark}
+              </label>
+              <Box sx={{ display: "flex", alignItems: "start", gap: 2 }}>
                 <TextField
                   fullWidth
                   name="mobileNumber"
@@ -259,23 +420,43 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                   helperText={mobileNumberError || errors.mobileNumber}
                   placeholder="Enter Mobile Number"
                   inputProps={{ maxLength: 10 }}
-                variant="outlined"
+                  InputProps={{
-                disabled={mobileOtpVerified}
+                    endAdornment: mobileOtpVerified ? (
-                // sx={{ maxWidth: "430px" }}
+                      <InputAdornment position="end">
+                        <CheckCircleIcon
+                          sx={{
+                            color: "#2e7d32",
+                            animation: "verifiedPulse 1.2s ease-in-out infinite",
+                            "@keyframes verifiedPulse": {
+                              "0%": { transform: "scale(1)", opacity: 0.8 },
+                              "50%": { transform: "scale(1.08)", opacity: 1 },
+                              "100%": { transform: "scale(1)", opacity: 0.8 },
+                            },
+                          }}
+                        />
+                      </InputAdornment>
+                    ) : null,
+                  }}
+                  variant="outlined"
+                  sx={{
+                    "& .MuiInputBase-input.Mui-disabled": {
+                      cursor: "not-allowed",
+                    },
+                  }}
                 />
-              <Box sx={{ position: "absolute", right: 0 }}>
                   {!showOtp && !mobileOtpVerified && (
                     <Button
                       variant="outlined"
                       color="primary"
                       onClick={handleMobileSubmit}
                     sx={{
-                      padding: "15px 10px",
+                      whiteSpace: "nowrap",
+                      height: "56px",
                       background: "green",
                       color: "#fff",
                     }}
                   >
-                    Send OTP
+                    Verify
                   </Button>
                 )}
               </Box>
@@ -296,10 +477,16 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                             textAlign: "center",
                             width: 40,
                             fontSize: 20,
+                            borderRadius: 4,
+                            backgroundColor:  digit
+                              ? "#028f02"
+                              : "transparent",
+                            color:  digit ? "#fff" : "#000",
                           },
                         }}
                         value={digit}
                         onChange={(e) => handleOtpChange(index, e.target.value)}
+                        onKeyDown={(e) => handleOtpKeyDown(index, e)}
                         error={Boolean(otpError)}
                         autoFocus={index === 0}
                         variant="outlined"
@@ -340,22 +527,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 </>
               )}
 
-              {mobileOtpVerified && (
+              
-                <Typography
-                  color="primary"
-                  variant="body2"
-                  sx={{
-                    background: "green",
-                    padding: "17px 15px",
-                    width: "fit-content",
-                    borderRadius: "5px",
-                    color: "#fff",
-                    fontSize: "18px",
-                  }}
-                >
-                  Mobile number verified
-                </Typography>
-              )}
             </div>
 
             {/* Other fields like DOB, height, marital status, etc. */}
@@ -378,7 +550,9 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
             {/* DOB with MUI DatePicker */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">Date of Birth</label>
+            <label className="text-gray-900 text-[15px]">
+              Date of Birth{requiredMark}
+            </label>
              <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DatePicker
               format="dd/MM/yyyy"
@@ -411,10 +585,12 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
               fullWidth
               name="height"
               label="Enter Height"
+              type="number"
               value={data.height}
               onChange={(e) => handleChange("height", e.target.value)}
               error={Boolean(errors.height)}
               helperText={errors.height}
+              inputProps={{ min: 0, max: 10, step: "0.1" }}
               variant="outlined"
             />
           </div>
@@ -426,17 +602,21 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
               fullWidth
               name="weight"
               label="Enter Weight"
+              type="number"
               value={data.weight}
               onChange={(e) => handleChange("weight", e.target.value)}
               error={Boolean(errors.weight)}
               helperText={errors.weight}
+              inputProps={{ min: 0, max: 300, step: "0.1" }}
               variant="outlined"
             />
           </div>
 
           {/* Marital Status */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">Marital Status</label>
+            <label className="text-gray-900 text-[15px]">
+              Marital Status{requiredMark}
+            </label>
             <FormControl
               fullWidth
               variant="outlined"
@@ -454,9 +634,11 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                   handleChange("maritalStatus", e.target.value)
                 }
               >
-                <MenuItem value="Single">Single</MenuItem>
+                {maritalStatusOptions.map((status) => (
-                <MenuItem value="Divorced">Divorced</MenuItem>
+                  <MenuItem key={status.id} value={status.id}>
-                <MenuItem value="Widowed">Widowed</MenuItem>
+                    {status.marital_status_name}
+                  </MenuItem>
+                ))}
               </Select>
               {errors.maritalStatus && (
                 <Typography
@@ -472,7 +654,9 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
           {/* Religion */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">Religion</label>
+            <label className="text-gray-900 text-[15px]">
+              Religion
+            </label>
             <FormControl
               fullWidth
               variant="outlined"
@@ -486,10 +670,11 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 value={data.religion}
                 onChange={(e) => handleChange("religion", e.target.value)}
               >
-                <MenuItem value="Hindu">Hindu</MenuItem>
+                {religionOptions.map((religion) => (
-                <MenuItem value="Muslim">Muslim</MenuItem>
+                  <MenuItem key={religion.id} value={religion.id}>
-                <MenuItem value="Christian">Christian</MenuItem>
+                    {religion.religion_name}
-                <MenuItem value="Others">Others</MenuItem>
+                  </MenuItem>
+                ))}
               </Select>
               {errors.religion && (
                 <Typography
@@ -503,10 +688,48 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
             </FormControl>
           </div>
 
+          {/* Profile Created For */}
+          <div className="flex flex-col gap-2">
+            <label className="text-gray-900 text-[15px]">
+              Profile Created For{requiredMark}
+            </label>
+            <FormControl
+              fullWidth
+              variant="outlined"
+              error={Boolean(errors.profileFor)}
+            >
+              <InputLabel id="profileFor-label">
+                Select Profile Created For
+              </InputLabel>
+              <Select
+                labelId="profileFor-label"
+                label="Select Profile Created For"
+                name="profileFor"
+                value={data.profileFor}
+                onChange={(e) => handleChange("profileFor", e.target.value)}
+              >
+                {profileCreatedForOptions.map((profileFor) => (
+                  <MenuItem key={profileFor.id} value={profileFor.id}>
+                    {profileFor.profile_for_name}
+                  </MenuItem>
+                ))}
+              </Select>
+              {errors.profileFor && (
+                <Typography
+                  color="error"
+                  variant="caption"
+                  sx={{ mt: 0.5, ml: 1.8 }}
+                >
+                  {errors.profileFor}
+                </Typography>
+              )}
+            </FormControl>
+          </div>
+
           {/* Caste / Community */}
           <div className="flex flex-col gap-2">
             <label className="text-gray-900 text-[15px]">
-              Caste / Community
+              Caste / Community{requiredMark}
             </label>
             <FormControl
               fullWidth
@@ -520,10 +743,18 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 name="caste"
                 value={data.caste}
                 onChange={(e) => handleChange("caste", e.target.value)}
+                disabled={!data.religion || casteQuery.isLoading}
+                sx={{
+                  "& .MuiSelect-select.Mui-disabled": {
+                    cursor: "not-allowed",
+                  },
+                }}
               >
-                <MenuItem value="Agamudayar">Agamudayar</MenuItem>
+                {casteOptions.map((caste) => (
-                <MenuItem value="Brahmin">Brahmin</MenuItem>
+                  <MenuItem key={caste.id} value={caste.id}>
-                <MenuItem value="Others">Others</MenuItem>
+                    {getOptionLabel(caste, "Caste")}
+                  </MenuItem>
+                ))}
               </Select>
               {errors.caste && (
                 <Typography
@@ -552,11 +783,21 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 name="subCaste"
                 value={data.subCaste}
                 onChange={(e) => handleChange("subCaste", e.target.value)}
+                disabled={!data.caste || subCasteQuery.isLoading}
+                sx={{
+                  "& .MuiSelect-select.Mui-disabled": {
+                    cursor: "not-allowed",
+                  },
+                }}
               >
                 <MenuItem value="">
                   <em>None</em>
                 </MenuItem>
-                <MenuItem value="Thuluva vellala">Thuluva vellala</MenuItem>
+                {subCasteOptions.map((subCaste) => (
+                  <MenuItem key={subCaste.id} value={subCaste.id}>
+                    {getOptionLabel(subCaste, "Sub Caste")}
+                  </MenuItem>
+                ))}
               </Select>
             </FormControl>
           </div>
@@ -580,41 +821,91 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 <MenuItem value="">
                   <em>None</em>
                 </MenuItem>
-                <MenuItem value="Siva Gotheram">Siva Gotheram</MenuItem>
+                {gothramOptions.map((gothram) => (
+                  <MenuItem key={gothram.id} value={gothram.id}>
+                    {gothram.gothram_name}
+                  </MenuItem>
+                ))}
               </Select>
             </FormControl>
           </div>
 
-          {/* Blood Group (optional) */}
+          {/* Raasi */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">
+            <label className="text-gray-900 text-[15px]">Raasi</label>
-              Blood Group (optional)
+            <FormControl
-            </label>
+              fullWidth
-            <FormControl fullWidth variant="outlined">
+              variant="outlined"
-              <InputLabel id="blood-label">
+              error={Boolean(errors.raasi)}
-                Select Blood Group (optional)
-              </InputLabel>
-              <Select
-                labelId="blood-label"
-                label="Select Blood Group (optional)"
-                name="bloodGroup"
-                value={data.bloodGroup}
-                onChange={(e) => handleChange("bloodGroup", e.target.value)}
             >
-                <MenuItem value="">
+              <InputLabel id="raasi-label">Select Raasi</InputLabel>
-                  <em>None</em>
+              <Select
+                labelId="raasi-label"
+                label="Select Raasi"
+                name="raasi"
+                value={data.raasi}
+                onChange={(e) => handleChange("raasi", e.target.value)}
+              >
+                {raasiOptions.map((raasi) => (
+                  <MenuItem key={raasi.id} value={raasi.id}>
+                    {raasi.raasi_name}
                   </MenuItem>
-                <MenuItem value="O+">O+</MenuItem>
+                ))}
-                <MenuItem value="A+">A+</MenuItem>
-                <MenuItem value="B+">B+</MenuItem>
-                <MenuItem value="AB+">AB+</MenuItem>
               </Select>
+              {errors.raasi && (
+                <Typography
+                  color="error"
+                  variant="caption"
+                  sx={{ mt: 0.5, ml: 1.8 }}
+                >
+                  {errors.raasi}
+                </Typography>
+              )}
             </FormControl>
           </div>
 
+          {/* Star */}
+          <div className="flex flex-col gap-2">
+            <label className="text-gray-900 text-[15px]">Star</label>
+            <FormControl
+              fullWidth
+              variant="outlined"
+              error={Boolean(errors.star)}
+            >
+              <InputLabel id="star-label">Select Star</InputLabel>
+              <Select
+                labelId="star-label"
+                label="Select Star"
+                name="star"
+                value={data.star}
+                onChange={(e) => handleChange("star", e.target.value)}
+                disabled={!data.raasi || starQuery.isLoading}
+              >
+                {starOptions.map((star) => (
+                  <MenuItem key={star.id} value={star.id}>
+                    {getOptionLabel(star, "Star")}
+                  </MenuItem>
+                ))}
+              </Select>
+              {errors.star && (
+                <Typography
+                  color="error"
+                  variant="caption"
+                  sx={{ mt: 0.5, ml: 1.8 }}
+                >
+                  {errors.star}
+                </Typography>
+              )}
+            </FormControl>
+          </div>
+
+          
+
           {/* Email Id */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">Email Id</label>
+            <label className="text-gray-900 text-[15px]">
+              Email Id{requiredMark}
+            </label>
             <TextField
               fullWidth
               name="email"
@@ -627,9 +918,47 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
             />
           </div>
 
+          {/* Password */}
+          <div className="flex flex-col gap-2">
+            <label className="text-gray-900 text-[15px]">
+              Password{requiredMark}
+            </label>
+            <TextField
+              fullWidth
+              type="password"
+              name="password"
+              label="Enter Password"
+              value={data.password}
+              onChange={(e) => handleChange("password", e.target.value)}
+              error={Boolean(errors.password)}
+              helperText={errors.password}
+              variant="outlined"
+            />
+          </div>
+
+          {/* Confirm Password */}
+          <div className="flex flex-col gap-2">
+            <label className="text-gray-900 text-[15px]">
+              Confirm Password{requiredMark}
+            </label>
+            <TextField
+              fullWidth
+              type="password"
+              name="confirmPassword"
+              label="Confirm Password"
+              value={data.confirmPassword}
+              onChange={(e) => handleChange("confirmPassword", e.target.value)}
+              error={Boolean(errors.confirmPassword)}
+              helperText={errors.confirmPassword}
+              variant="outlined"
+            />
+          </div>
+
           {/* State */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">State</label>
+            <label className="text-gray-900 text-[15px]">
+              State{requiredMark}
+            </label>
             <FormControl
               fullWidth
               variant="outlined"
@@ -642,10 +971,18 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 name="state"
                 value={data.state}
                 onChange={(e) => handleChange("state", e.target.value)}
+                disabled={isPersonalMastersLoading}
+                sx={{
+                  "& .MuiSelect-select.Mui-disabled": {
+                    cursor: "not-allowed",
+                  },
+                }}
               >
-                <MenuItem value="Tamil Nadu">Tamil Nadu</MenuItem>
+                {stateOptions.map((state) => (
-                <MenuItem value="Kerala">Kerala</MenuItem>
+                  <MenuItem key={state.id} value={state.id}>
-                <MenuItem value="Karnataka">Karnataka</MenuItem>
+                    {state.state_name}
+                  </MenuItem>
+                ))}
               </Select>
               {errors.state && (
                 <Typography
@@ -661,7 +998,9 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
           {/* City */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">City</label>
+            <label className="text-gray-900 text-[15px]">
+              City{requiredMark}
+            </label>
             <FormControl
               fullWidth
               variant="outlined"
@@ -674,10 +1013,18 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 name="city"
                 value={data.city}
                 onChange={(e) => handleChange("city", e.target.value)}
+                disabled={!data.state || cityQuery.isLoading}
+                sx={{
+                  "& .MuiSelect-select.Mui-disabled": {
+                    cursor: "not-allowed",
+                  },
+                }}
               >
-                <MenuItem value="Chennai">Chennai</MenuItem>
+                {cityOptions.map((city) => (
-                <MenuItem value="Coimbatore">Coimbatore</MenuItem>
+                  <MenuItem key={city.id} value={city.id}>
-                <MenuItem value="Madurai">Madurai</MenuItem>
+                    {getOptionLabel(city, "City")}
+                  </MenuItem>
+                ))}
               </Select>
               {errors.city && (
                 <Typography
@@ -693,7 +1040,9 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
           {/* Pin code */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">Pin code</label>
+            <label className="text-gray-900 text-[15px]">
+              Pin code{requiredMark}
+            </label>
             <TextField
               fullWidth
               name="pincode"
@@ -722,7 +1071,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
           <div className="flex flex-col gap-2 md:col-span-2 w-full">
   <label className="text-gray-900 text-[15px]">
-    Upload Profile (Multi - Select)
+    Upload Profile (Max 3 images, 10 MB each)
   </label>
   <AdvancedDropzone
     value={data.profiles || []}
@@ -752,13 +1101,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
               justifyContent: "center",
             }}
           >
-            <Button
+            
-              variant="outlined"
-              onClick={onSkipStep}
-              disabled={mobileOtpVerified}
-            >
-              Skip
-            </Button>
             <Button
               variant="contained"
               color="primary"

src/feature/StepperForm.jsx

@@ -16,6 +16,7 @@ import LifestyleDetailsForm from "./LifestyleDetailsForm";
 import PartnerPreferencesForm from "./PartnerPreferencesForm";
 import PreviewScreen from "./PreviewScreen";
 import { useLocation } from "react-router-dom";
+import { useRegisterStep1 } from "../hooks/useRegister";
 const Stepper = ({ currentStep, onStepClick }) => {
   
 
@@ -82,6 +83,7 @@ const StepperForm = () => {
   const [currentStep, setCurrentStep] = useState(initialStep);
   const [errors, setErrors] = useState({});
 
+  const registerStep1 = useRegisterStep1();
 
 
    useEffect(() => {
@@ -104,12 +106,12 @@ const StepperForm = () => {
         "mobileNumber",
         "gender",
         "dob",
-        "height",
-        "weight",
         "maritalStatus",
-        "religion",
+        "profileFor",
         "caste",
         "email",
+        "password",
+        "confirmPassword",
         "state",
         "city",
         "pincode",
@@ -133,6 +135,19 @@ const StepperForm = () => {
       ) {
         newErrors.mobileNumber = "Mobile number must be 10 digits";
       }
+      if (personalDetails.height && Number(personalDetails.height) > 10) {
+        newErrors.height = "Height must be 10 or less";
+      }
+      if (personalDetails.weight && Number(personalDetails.weight) > 300) {
+        newErrors.weight = "Weight must be 300 or less";
+      }
+      if (
+        personalDetails.password &&
+        personalDetails.confirmPassword &&
+        personalDetails.password !== personalDetails.confirmPassword
+      ) {
+        newErrors.confirmPassword = "Passwords do not match";
+      }
     } else if (step === 2) {
       const required = [
         "qualification",
@@ -199,18 +214,38 @@ const StepperForm = () => {
     return Object.keys(newErrors).length === 0;
   };
 
-  // API call simulation for each step submit
+  const buildRegisterStep1Payload = () => ({
-  const submitStepAPI = async (step) => {
+    name: personalDetails.name,
-    // Replace with actual API call
+    mobile: personalDetails.mobileNumber,
-    return new Promise((resolve) => setTimeout(resolve, 500));
+    email: personalDetails.email,
-  };
+    pincode: personalDetails.pincode,
+    gender: personalDetails.gender,
+    dob: personalDetails.dob,
+    height: personalDetails.height || "",
+    weight: personalDetails.weight || "",
+    marital_status: personalDetails.maritalStatus,
+    religion: personalDetails.religion,
+    profile_for: personalDetails.profileFor || "",
+    caste: personalDetails.caste,
+    sub_caste: personalDetails.subCaste || "",
+    gothram: personalDetails.gothram || "",
+    raasi: personalDetails.raasi || "",
+    star: personalDetails.star || "",
+    state: personalDetails.state,
+    district: personalDetails.city,
+    password: personalDetails.password || "",
+    fcm_token: localStorage.getItem("fcm_token") || "",
+  });
 
   const handleStepSubmit = async () => {
     const isValid = validateStep(currentStep);
     if (!isValid) return;
 
     try {
-      await submitStepAPI(currentStep);
+      if (currentStep === 1) {
+        const payload = buildRegisterStep1Payload();
+        await registerStep1.mutateAsync(payload);
+      }
       setCurrentStep((prev) => Math.min(prev + 1, 6));
       window.scrollTo(0, 0);
     } catch (e) {
@@ -260,7 +295,6 @@ const StepperForm = () => {
         return (
           <PersonalDetailsForm
             onSubmitStep={handleStepSubmit}
-            onSkipStep={handleSkip}
             errors={errors}
           />
         );

src/hooks/useAuth.js

@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { sendOtpAPI, verifyOtpAPI, logoutAPI } from "../api/auth.api";
+
+/**
+ * Send OTP
+ */
+export const useSendOtp = () =>
+  useMutation({
+    mutationFn: sendOtpAPI,
+  });
+
+/**
+ * Verify OTP
+ */
+export const useVerifyOtp = () =>
+  useMutation({
+    mutationFn: verifyOtpAPI,
+  });
+
+/**
+ * Logout
+ */
+export const useLogout = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: logoutAPI,
+    onSuccess: () => {
+      queryClient.clear(); // 🔥 clear all cached APIs
+      localStorage.clear();
+      window.location.href = "/login";
+    },
+  });
+};

src/hooks/useDependentMasters.js

@@ -0,0 +1,48 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  getPersonalDetailsMasters,
+  getCasteMasters,
+  getSubCasteMasters,
+  getCityMasters,
+  getStarMasters,
+} from "../api/masters.api";
+
+/** Personal details masters (gender, marital status, religion, gothram, raasi, state, etc.) */
+export const usePersonalDetailsMasters = () =>
+  useQuery({
+    queryKey: ["personal-details-masters"],
+    queryFn: getPersonalDetailsMasters,
+    staleTime: 1000 * 60 * 60, // 1 hour
+  });
+
+/** Caste depends on religion */
+export const useCasteMasters = (religion_id) =>
+  useQuery({
+    queryKey: ["caste-masters", religion_id],
+    queryFn: () => getCasteMasters(religion_id),
+    enabled: !!religion_id, // 🚫 prevents unwanted call
+  });
+
+/** Sub caste depends on caste */
+export const useSubCasteMasters = (caste_id) =>
+  useQuery({
+    queryKey: ["sub-caste-masters", caste_id],
+    queryFn: () => getSubCasteMasters(caste_id),
+    enabled: !!caste_id,
+  });
+
+/** City depends on state */
+export const useCityMasters = (state_id) =>
+  useQuery({
+    queryKey: ["city-masters", state_id],
+    queryFn: () => getCityMasters(state_id),
+    enabled: !!state_id,
+  });
+
+/** Star depends on raasi */
+export const useStarMasters = (raasi_id) =>
+  useQuery({
+    queryKey: ["star-masters", raasi_id],
+    queryFn: () => getStarMasters(raasi_id),
+    enabled: !!raasi_id,
+  });

src/hooks/useMasters.js

@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/react-query";
+import {
+  getPersonalDetailsMasters,
+  getEducationMasters,
+  getFamilyMasters,
+  getLifestyleMasters,
+  getPartnerPreferenceMasters,
+} from "../api/masters.api";
+
+/** Personal details master */
+export const usePersonalMasters = () =>
+  useQuery({
+    queryKey: ["personal-masters"],
+    queryFn: getPersonalDetailsMasters,
+  });
+
+/** Education master */
+export const useEducationMasters = () =>
+  useQuery({
+    queryKey: ["education-masters"],
+    queryFn: getEducationMasters,
+  });
+
+/** Family master */
+export const useFamilyMasters = () =>
+  useQuery({
+    queryKey: ["family-masters"],
+    queryFn: getFamilyMasters,
+  });
+
+/** Lifestyle master */
+export const useLifestyleMasters = () =>
+  useQuery({
+    queryKey: ["lifestyle-masters"],
+    queryFn: getLifestyleMasters,
+  });
+
+/** Partner preference master */
+export const usePartnerPreferenceMasters = () =>
+  useQuery({
+    queryKey: ["partner-masters"],
+    queryFn: getPartnerPreferenceMasters,
+  });

src/hooks/useRegister.js

@@ -0,0 +1,39 @@
+import { useMutation } from "@tanstack/react-query";
+import {
+  registerStep1API,
+  registerStep2API,
+  registerStep3API,
+  registerStep4API,
+} from "../api/register.api";
+
+/**
+ * Register - Step 1
+ */
+export const useRegisterStep1 = () =>
+  useMutation({
+    mutationFn: registerStep1API,
+  });
+
+/**
+ * Register - Step 2
+ */
+export const useRegisterStep2 = () =>
+  useMutation({
+    mutationFn: registerStep2API,
+  });
+
+/**
+ * Register - Step 3
+ */
+export const useRegisterStep3 = () =>
+  useMutation({
+    mutationFn: registerStep3API,
+  });
+
+/**
+ * Register - Step 4
+ */
+export const useRegisterStep4 = () =>
+  useMutation({
+    mutationFn: registerStep4API,
+  });

src/main.jsx

@@ -8,12 +8,33 @@ import theme from "./theme";
 
 import { Provider } from "react-redux";
 import { store } from "./redux/store.js";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+// Disable noisy logs in production while keeping warnings/errors.
+if (import.meta.env.PROD) {
+  console.log = () => {};
+  console.info = () => {};
+  console.debug = () => {};
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 30, // 30 mins – masters don't change often
+      cacheTime: 1000 * 60 * 60, // 1 hour
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
+
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
+ 
      <ThemeProvider theme={theme}>
        <Provider store={store}>
+         <QueryClientProvider client={queryClient}>
     <App />
+    </QueryClientProvider>
     </Provider>
     </ThemeProvider>
-  </React.StrictMode>
+ 
 );

src/notifications/firebase.js

@@ -0,0 +1,78 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getMessaging , getToken,onMessage } from "firebase/messaging";
+
+// import { getAnalytics } from "firebase/analytics";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+ apiKey: "AIzaSyC14hS0_idUIRS9JEigObmT-_CGl3zb8Fo",
+  authDomain: "thirukalyanam-c8e1c.firebaseapp.com",
+  projectId: "thirukalyanam-c8e1c",
+  storageBucket: "thirukalyanam-c8e1c.firebasestorage.app",
+  messagingSenderId: "433615056618",
+  appId: "1:433615056618:web:309a920f408ba826907193",
+  measurementId: "G-1L93F6DS7K"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+// const analytics = getAnalytics(app);
+
+// Initialize Firebase Cloud Messaging and get a reference to the service
+export const messaging = getMessaging(app);
+
+
+
+// 🔔 Foreground notification handler
+export const listenToMessages = () => {
+  onMessage(messaging, (payload) => {
+    console.log("🔥 Foreground FCM:", payload);
+
+    if (Notification.permission === "granted" && payload.notification) {
+      const notification = new Notification(
+        payload.notification.title,
+        {
+          body: payload.notification.body,
+          icon: "/favicon.ico",
+          data: {
+            url: "/notification",
+          },
+        }
+      );
+
+      // ✅ Handle click
+      notification.onclick = () => {
+        window.focus();
+        window.location.href = "/notification";
+      };
+    }
+  });
+};
+
+
+
+export const generateToken = async () => {
+  try {
+    const permission = await Notification.requestPermission();
+    console.log("Notification permission:", permission);
+
+    if (permission !== "granted") {
+      return null;
+    }
+
+    const token = await getToken(messaging, {
+      vapidKey: "BK8tzfEX7yITqrGmWXH-GFYZMXLbVntdfPiOqosyTgCLtHDZm6Rp-K1ro6CPbdMLFgmTa4Fwtc8F2HGFp4Hex7A",
+    });
+
+    console.log("FCM Token:", token);
+    localStorage.setItem("fcm_token", token);
+    return token; // ✅ MUST return
+  } catch (error) {
+    console.error("FCM error:", error);
+    return null;
+  }
+};

src/redux/registrationFormSlice.jsx

@@ -12,11 +12,16 @@ const registrationformSlice = createSlice({
       weight: "",
       maritalStatus: "",
       religion: "",
+      profileFor: "",
       caste: "",
       subCaste: "",
       gothram: "",
+      raasi: "",
+      star: "",
       bloodGroup: "",
       email: "",
+      password: "",
+      confirmPassword: "",
       state: "",
       city: "",
       pincode: "",