src/Redux/services/profile.service.ts

@@ -12,7 +12,7 @@ export const profileApi = createApi({
 
         getUserProfileDetails: builder.query({
             query: (id) => `/website/user/${id}`,
-            providesTags:["userDetails"]
+            providesTags: ["userDetails"]
         }),
 
         updateUserProfileDetails: builder.mutation({
@@ -21,7 +21,18 @@ export const profileApi = createApi({
                 method: "PUT",
                 body: userDetails
             }),
-            invalidatesTags:["userDetails"]
+            invalidatesTags: ["userDetails"]
+        }),
+
+        getUserPasses: builder.query({
+            query: ({ cardMode, sort }) => {
+                const params = new URLSearchParams()
+
+                if(cardMode) params.append('cardMode',cardMode);
+                if(sort) params.append('sort',sort);
+
+                return `/website/passes/all?${params.toString()}`
+            }
         })
 
     })
@@ -29,5 +40,6 @@ export const profileApi = createApi({
 
 export const {
     useGetUserProfileDetailsQuery,
-    useUpdateUserProfileDetailsMutation
+    useUpdateUserProfileDetailsMutation,
+    useGetUserPassesQuery
 } = profileApi;

src/components/LoginModal.tsx

@@ -96,12 +96,20 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
   };
 
   const handleOTPKeyDown = (index: number, e: React.KeyboardEvent) => {
-    if (e.key === 'Backspace' && !otp[index] && index > 0) {
+    if (e.key === "Backspace" && !otp[index] && index > 0) {
       const prevInput = document.querySelector(
         `input[data-otp-index="${index - 1}"]`
       ) as HTMLInputElement;
       prevInput?.focus();
     }
+
+    // ✅ Trigger verify on Enter if all 6 digits are filled
+    if (e.key === "Enter") {
+      const otpString = otp.join("");
+      if (otpString.length === 6) {
+        handleVerifyLogin();
+      }
+    }
   };
 
   // Rest of your functions remain the same
@@ -140,10 +148,10 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
       }).unwrap();
 
       const userData = {
-        userId:response?.user?.id,
+        userId: response?.user?.id,
         email: response?.email || email,
         name: response?.name || email.split('@')[0].charAt(0).toUpperCase() + email.split('@')[0].slice(1),
-        accessToken:response?.accessToken,
+        accessToken: response?.accessToken,
       };
 
       login(userData);
@@ -292,7 +300,7 @@ export function LoginModal({ isOpen, onClose }: LoginModalProps) {
                           }}
                           className="w-full text-sm text-gray-600 hover:text-gray-800 font-poppins cursor-pointer"
                         >
-                          Didn't receive OTP? 
+                          Didn't receive OTP?
                           <span className="text-primary font-semibold">  Send again</span>
                           {/* Send again */}
                         </button>

src/main.tsx

@@ -9,7 +9,7 @@ import { Toaster } from "sonner";
 createRoot(document.getElementById("root")!).render(
   <Provider store={store}>
     <BrowserRouter>
-      <Toaster position="top-right" richColors duration={2000} />
+      <Toaster position="top-right" richColors duration={2000} closeButton />
       <App />
     </BrowserRouter>
   </Provider>

src/pages/ProfilePage.tsx

@@ -28,6 +28,7 @@ import { Footer } from '../components/Footer';
 import { ImageWithFallback } from '../components/figma/ImageWithFallback';
 import { useGetUserProfileDetailsQuery, useUpdateUserProfileDetailsMutation } from '../Redux/services/profile.service';
 import { toast } from 'sonner';
+import { useNavigate } from 'react-router-dom';
 
 interface ProfilePageProps {
   onBackClick: () => void;
@@ -57,18 +58,6 @@ interface ProfilePageProps {
   currentPage: string;
 }
 
-// Mock user data
-const mockUserData = {
-  firstName: 'John',
-  lastName: 'Doe',
-  email: 'john.doe@example.com',
-  phone: '+1 (555) 123-4567',
-  country: 'us',
-  address: '123 Main Street',
-  city: 'New York',
-  postalCode: '10001'
-};
-
 // Mock passes data
 const mockPasses = [
   {
@@ -174,8 +163,11 @@ export function ProfilePage({
     postalCode: ''
   });
 
+  const navigate = useNavigate()
   const userId = localStorage.getItem("userId")
   const { data: userDetails, isLoading } = useGetUserProfileDetailsQuery(userId)
+  const [updateUserProfileDetails, { isLoading: savingChanges }] = useUpdateUserProfileDetailsMutation();
+  const { data: passes, isLoading: loadingPasses } = useGetUserProfileDetailsQuery(userId)
 
   useEffect(() => {
     if (userDetails) {
@@ -194,7 +186,6 @@ export function ProfilePage({
 
   }, [userDetails])
 
-  const [updateUserProfileDetails] = useUpdateUserProfileDetailsMutation();
 
   const handleInputChange = (field: string, value: string) => {
     setFormData(prev => ({ ...prev, [field]: value }));
@@ -215,7 +206,7 @@ export function ProfilePage({
   const activePasses = mockPasses.filter(pass => pass.status === 'active');
   const expiredPasses = mockPasses.filter(pass => pass.status === 'expired');
 
-  if (isLoading) {
+  if (isLoading && loadingPasses) {
     return (
       <div className="min-h-screen bg-gray-50 flex items-center justify-center">
         <div className="text-center">
@@ -259,8 +250,8 @@ export function ProfilePage({
         <div className="container mx-auto px-4">
           {/* Back Button */}
           <motion.button
-            onClick={onBackClick}
-            className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6 transition-colors duration-200"
+            onClick={() => navigate(-1)}
+            className="flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-6 transition-colors duration-200 cursor-pointer"
             initial={{ opacity: 0, x: -20 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.5 }}
@@ -434,7 +425,7 @@ export function ProfilePage({
                           onClick={handleSaveProfile}
                           className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 text-white font-normal py-3 font-poppins cursor-pointer"
                         >
-                          Save Changes
+                          {savingChanges ? "Saving Changes..." : "Save Changes"}
                         </Button>
                       </CardContent>
                     </Card>