feat(profile): add editable profile details, photo upload, and password change

src/App.jsx

@@ -23,6 +23,7 @@ import PrivacyPolicy from "./components/Privacy-Policy/PrivacyPolicy";
 import TermsConditions from "./components/Terms-Conditions/TermsConditions";
 import Feedback from "./components/Feedback/Feedback";
 import RentCalculator from './components/rent/RentCalculator';
+import { Profile } from "./pages";
 
 const App = () => {
   const [isPreloaderVisible, setIsPreloaderVisible] = useState(true);
@@ -120,6 +121,7 @@ const App = () => {
           <Route path="/Terms-Conditions" element={<TermsConditions />} />
           <Route path="/Feedback" element={<Feedback />} />
           <Route path="/comingsoon" element={<ComingSoon />} />
+          <Route path="/profile" element={<Profile />} />
         </Routes>
       )}
 

src/pages/PasswordChange.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { toast } from "react-toastify";
+
+const PasswordChange = () => {
+    const [passwords, setPasswords] = useState({
+        current: "",
+        new: "",
+        confirm: ""
+    });
+
+    const handleChange = (e) => {
+        setPasswords({ ...passwords, [e.target.name]: e.target.value });
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (passwords.new !== passwords.confirm) {
+            toast.error("New passwords do not match.");
+            return;
+        }
+
+        // Here you'd typically call an API to update password
+        toast.success("Password changed successfully!");
+        // Optionally clear the form
+        setPasswords({ current: "", new: "", confirm: "" });
+    };
+
+    return (
+        <div className="profile-section">
+            <h2>Change Password</h2>
+            <form className="profile-form" onSubmit={handleSubmit}>
+                <label>
+                    Current Password:
+                    <input type="password" name="current" value={passwords.current} onChange={handleChange} />
+                </label>
+
+                <label>
+                    New Password:
+                    <input type="password" name="new" value={passwords.new} onChange={handleChange} />
+                </label>
+
+                <label>
+                    Confirm Password:
+                    <input type="password" name="confirm" value={passwords.confirm} onChange={handleChange} />
+                </label>
+
+                <button type="submit">Update Password</button>
+            </form>
+        </div>
+    );
+};
+
+export default PasswordChange;

src/pages/Profile.css

@@ -0,0 +1,44 @@
+/* src/pages/Profile.css */
+.profile-container {
+    max-width: 800px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.profile-section {
+    margin-bottom: 2rem;
+}
+
+.profile-form label {
+    display: block;
+    margin-bottom: 1rem;
+    font-weight: 500;
+}
+
+.profile-form input,
+.profile-form textarea {
+    width: 100%;
+    padding: 0.5rem;
+    margin-top: 0.25rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.profile-avatar {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: 1rem;
+}
+
+.profile-avatar.placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #eee;
+    color: #777;
+}

src/pages/Profile.jsx

@@ -0,0 +1,19 @@
+// src/pages/Profile.jsx
+import React from "react";
+import ProfileForm from "./ProfileForm";
+import ProfilePhoto from "./ProfilePhoto";
+import PasswordChange from "./PasswordChange";
+import "./Profile.css";
+
+const Profile = () => {
+    return (
+        <div className="profile-container">
+            <h1>Your Profile</h1>
+            <ProfilePhoto />
+            <ProfileForm />
+            <PasswordChange />
+        </div>
+    );
+};
+
+export default Profile;

src/pages/ProfileForm.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { toast } from "react-toastify";
+
+const ProfileForm = () => {
+    const [formData, setFormData] = useState({
+        fullName: "",
+        dob: "",
+        phone: "",
+        address: "",
+        email: "user@example.com", // read-only
+    });
+
+    const handleChange = (e) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Here you could call an API
+        toast.success("Profile details updated successfully!");
+    };
+
+    return (
+        <div className="profile-section">
+            <h2>Personal Information</h2>
+            <form className="profile-form" onSubmit={handleSubmit}>
+                <label>
+                    Full Name:
+                    <input type="text" name="fullName" value={formData.fullName} onChange={handleChange} />
+                </label>
+
+                <label>
+                    Date of Birth:
+                    <input type="date" name="dob" value={formData.dob} onChange={handleChange} />
+                </label>
+
+                <label>
+                    Phone Number:
+                    <input type="text" name="phone" value={formData.phone} onChange={handleChange} />
+                </label>
+
+                <label>
+                    Address:
+                    <textarea name="address" value={formData.address} onChange={handleChange}></textarea>
+                </label>
+
+                <label>
+                    Email:
+                    <input type="email" name="email" value={formData.email} disabled />
+                </label>
+
+                <button type="submit">Save Changes</button>
+            </form>
+        </div>
+    );
+};
+
+export default ProfileForm;

src/pages/ProfilePhoto.jsx

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from "react";
+
+const ProfilePhoto = () => {
+    const [photo, setPhoto] = useState(null);
+
+    const handlePhotoChange = (e) => {
+        const file = e.target.files[0];
+        if (file) setPhoto(URL.createObjectURL(file));
+    };
+
+    // Clean up object URL
+    useEffect(() => {
+        return () => {
+            if (photo) URL.revokeObjectURL(photo);
+        };
+    }, [photo]);
+
+    return (
+        <div className="profile-section">
+            <h2>Profile Photo</h2>
+            {photo ? (
+                <img src={photo} alt="Profile Preview" className="profile-avatar" />
+            ) : (
+                <div className="profile-avatar placeholder">No photo</div>
+            )}
+            <input type="file" accept="image/*" onChange={handlePhotoChange} />
+        </div>
+    );
+};
+
+export default ProfilePhoto;

src/pages/index.js

@@ -2,4 +2,5 @@ export { default as Home } from "./Home";
 export { default as Login } from "./Login";
 export { default as Registration } from "./Registration";
 export { default as Dashboard } from "./Dashboard";
-export { default as ComingSoon } from "./ComingSoon";
+export { default as ComingSoon } from "./ComingSoon";
+export { default as Profile } from "./Profile";