diff --git a/public/assets/icons/verified-badge-orange.svg b/public/assets/icons/verified-badge-orange.svg new file mode 100644 index 0000000..bac6816 --- /dev/null +++ b/public/assets/icons/verified-badge-orange.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/(agent)/agent/settings/component/index.ts b/src/app/(agent)/agent/settings/component/index.ts deleted file mode 100644 index 61f27d5..0000000 --- a/src/app/(agent)/agent/settings/component/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { SettingsSidebar } from './SettingsSidebar'; diff --git a/src/app/(agent)/agent/settings/notifications/page.tsx b/src/app/(agent)/agent/settings/notifications/page.tsx index f331c6c..5f889e8 100644 --- a/src/app/(agent)/agent/settings/notifications/page.tsx +++ b/src/app/(agent)/agent/settings/notifications/page.tsx @@ -1,7 +1,6 @@ 'use client'; -import { useState } from 'react'; -import { SettingsSidebar } from '../component/SettingsSidebar'; +import { SettingsSidebar, NotificationsForm } from '@/components/settings'; interface NotificationSetting { id: string; @@ -11,108 +10,17 @@ interface NotificationSetting { } export default function NotificationsPage() { - const [emailNotifications, setEmailNotifications] = useState([ - { - id: 'new_leads', - label: 'New Leads', - description: 'Get notified when you receive new leads', - enabled: true, - }, - { - id: 'messages', - label: 'Messages', - description: 'Get notified when you receive new messages', - enabled: true, - }, - { - id: 'connection_requests', - label: 'Connection Requests', - description: 'Get notified about new connection requests', - enabled: true, - }, - { - id: 'property_updates', - label: 'Property Updates', - description: 'Get notified about property status changes', - enabled: false, - }, - { - id: 'marketing', - label: 'Marketing & Promotions', - description: 'Receive marketing emails and promotions', - enabled: false, - }, - ]); - - const [pushNotifications, setPushNotifications] = useState([ - { - id: 'push_messages', - label: 'Messages', - description: 'Push notifications for new messages', - enabled: true, - }, - { - id: 'push_leads', - label: 'New Leads', - description: 'Push notifications for new leads', - enabled: true, - }, - { - id: 'push_reminders', - label: 'Reminders', - description: 'Push notifications for scheduled reminders', - enabled: false, - }, - ]); - - const toggleEmailNotification = (id: string) => { - setEmailNotifications((prev) => - prev.map((item) => - item.id === id ? { ...item, enabled: !item.enabled } : item - ) - ); + const handleSave = (data: { + emailNotifications: NotificationSetting[]; + pushNotifications: NotificationSetting[]; + }) => { + console.log('Saving agent notification settings:', data); }; - const togglePushNotification = (id: string) => { - setPushNotifications((prev) => - prev.map((item) => - item.id === id ? { ...item, enabled: !item.enabled } : item - ) - ); - }; - - const handleSave = () => { - console.log('Saving notification settings:', { - emailNotifications, - pushNotifications, - }); - }; - - const ToggleSwitch = ({ - enabled, - onToggle, - }: { - enabled: boolean; - onToggle: () => void; - }) => ( - - ); - return (
{/* Left Sidebar */} - + {/* Main Content */}
@@ -123,83 +31,7 @@ export default function NotificationsPage() {
- {/* Email Notifications */} -
-
-

- Email Notifications -

-

- Manage your email notification preferences -

-
- -
- {emailNotifications.map((item) => ( -
-
-

- {item.label} -

-

- {item.description} -

-
- toggleEmailNotification(item.id)} - /> -
- ))} -
-
- - {/* Push Notifications */} -
-
-

- Push Notifications -

-

- Manage your push notification preferences -

-
- -
- {pushNotifications.map((item) => ( -
-
-

- {item.label} -

-

- {item.description} -

-
- togglePushNotification(item.id)} - /> -
- ))} -
-
- - {/* Save Button */} -
- -
+
); diff --git a/src/app/(agent)/agent/settings/page.tsx b/src/app/(agent)/agent/settings/page.tsx index 20367a8..5234273 100644 --- a/src/app/(agent)/agent/settings/page.tsx +++ b/src/app/(agent)/agent/settings/page.tsx @@ -1,177 +1,29 @@ 'use client'; -import { useState } from 'react'; -import Image from 'next/image'; -import { SettingsSidebar } from './component/SettingsSidebar'; +import { SettingsSidebar, ProfileSettingsForm } from '@/components/settings'; export default function ProfileSettingsPage() { - const [formData, setFormData] = useState({ - fullName: 'Brain Neeland', - career: 'Real Estate Agent', - email: 'Brain.Neeland1234@gmail.com', - phone: '+917483849544', - location: 'New York', - }); - - const handleChange = (field: string, value: string) => { - setFormData((prev) => ({ ...prev, [field]: value })); - }; - - const handleSave = () => { - console.log('Saving profile settings:', formData); - }; - - const handleCancel = () => { - console.log('Cancelling changes'); + const handleSave = (data: { + fullName: string; + career: string; + email: string; + phone: string; + location: string; + }) => { + console.log('Saving agent profile settings:', data); }; return (
{/* Left Sidebar */} - + {/* Main Content */}
- {/* Profile Settings Form */} -
- {/* Header */} -
-

- Public Profile -

-

- This information will be displayed on your public agent page. -

-
- - {/* Profile Photo Section */} -
-
-
- Profile -
-
-

- Public Picture -

-
- - -
-

- Supported formats: JPEG, PNG, GIF Max file size: 2MB -

-
-
-
- - {/* Form Fields */} -
- {/* Row 1: Full Name & Career */} -
-
- - handleChange('fullName', e.target.value)} - className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]" - /> -
-
- - handleChange('career', e.target.value)} - className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]" - /> -
-
- - {/* Row 2: Email & Phone */} -
-
- - handleChange('email', e.target.value)} - className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]" - /> -
-
- - handleChange('phone', e.target.value)} - className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]" - /> -
-
- - {/* Row 3: Service Area Location */} -
- -
-
- Location -
- handleChange('location', e.target.value)} - className="w-full sm:w-1/2 h-[44px] pl-10 pr-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]" - /> -
-
-
- - {/* Action Buttons */} -
- - -
-
+
); diff --git a/src/app/(agent)/agent/settings/password/page.tsx b/src/app/(agent)/agent/settings/password/page.tsx index 87d5d33..4dcfdc9 100644 --- a/src/app/(agent)/agent/settings/password/page.tsx +++ b/src/app/(agent)/agent/settings/password/page.tsx @@ -1,41 +1,16 @@ 'use client'; -import { useState } from 'react'; -import { SettingsSidebar } from '../component/SettingsSidebar'; +import { SettingsSidebar, PasswordSecurityForm } from '@/components/settings'; export default function PasswordSecurityPage() { - const [formData, setFormData] = useState({ - currentPassword: '', - newPassword: '', - confirmPassword: '', - }); - - const [showPasswords, setShowPasswords] = useState({ - current: false, - new: false, - confirm: false, - }); - - const handleChange = (field: string, value: string) => { - setFormData((prev) => ({ ...prev, [field]: value })); - }; - - const toggleShowPassword = (field: 'current' | 'new' | 'confirm') => { - setShowPasswords((prev) => ({ ...prev, [field]: !prev[field] })); - }; - - const handleSave = () => { - if (formData.newPassword !== formData.confirmPassword) { - alert('Passwords do not match'); - return; - } - console.log('Updating password'); + const handleSave = (data: { currentPassword: string; newPassword: string }) => { + console.log('Updating agent password:', data); }; return (
{/* Left Sidebar */} - + {/* Main Content */}
@@ -46,119 +21,7 @@ export default function PasswordSecurityPage() {
- {/* Password Form */} -
-
-

- Change Password -

-

- Ensure your account is using a strong password to stay secure -

-
- - {/* Form Fields */} -
- {/* Current Password */} -
- -
- handleChange('currentPassword', e.target.value)} - placeholder="Enter current password" - className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]" - /> - -
-
- - {/* New Password */} -
- -
- handleChange('newPassword', e.target.value)} - placeholder="Enter new password" - className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]" - /> - -
-

- Minimum 8 characters with at least one uppercase, lowercase, and number -

-
- - {/* Confirm Password */} -
- -
- handleChange('confirmPassword', e.target.value)} - placeholder="Confirm new password" - className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]" - /> - -
-
-
- - {/* Save Button */} -
- -
-
- - {/* Two-Factor Authentication Section */} -
-
-
-

- Two-Factor Authentication -

-

- Add an extra layer of security to your account -

-
- -
-
+
); diff --git a/src/app/(agent)/agent/settings/privacy/page.tsx b/src/app/(agent)/agent/settings/privacy/page.tsx index b231110..698b77a 100644 --- a/src/app/(agent)/agent/settings/privacy/page.tsx +++ b/src/app/(agent)/agent/settings/privacy/page.tsx @@ -1,7 +1,6 @@ 'use client'; -import { useState } from 'react'; -import { SettingsSidebar } from '../component/SettingsSidebar'; +import { SettingsSidebar, PrivacyForm } from '@/components/settings'; interface PrivacySetting { id: string; @@ -12,93 +11,25 @@ interface PrivacySetting { } export default function PrivacyPage() { - const [privacySettings, setPrivacySettings] = useState([ - { - id: 'profile_visibility', - label: 'Profile Visibility', - description: 'Control who can see your profile', - value: 'public', - options: [ - { value: 'public', label: 'Public' }, - { value: 'connections', label: 'Connections Only' }, - { value: 'private', label: 'Private' }, - ], - }, - { - id: 'contact_info', - label: 'Contact Information', - description: 'Control who can see your contact details', - value: 'connections', - options: [ - { value: 'public', label: 'Public' }, - { value: 'connections', label: 'Connections Only' }, - { value: 'private', label: 'Hidden' }, - ], - }, - { - id: 'activity_status', - label: 'Activity Status', - description: 'Show when you are active on the platform', - value: 'public', - options: [ - { value: 'public', label: 'Everyone' }, - { value: 'connections', label: 'Connections Only' }, - { value: 'private', label: 'No One' }, - ], - }, - ]); - - const [dataSettings, setDataSettings] = useState({ - shareAnalytics: true, - personalizedAds: false, - thirdPartySharing: false, - }); - - const handlePrivacyChange = (id: string, value: string) => { - setPrivacySettings((prev) => - prev.map((item) => (item.id === id ? { ...item, value } : item)) - ); - }; - - const handleDataSettingChange = (key: keyof typeof dataSettings) => { - setDataSettings((prev) => ({ ...prev, [key]: !prev[key] })); - }; - - const handleSave = () => { - console.log('Saving privacy settings:', { privacySettings, dataSettings }); + const handleSave = (data: { + privacySettings: PrivacySetting[]; + dataSettings: { + shareAnalytics: boolean; + personalizedAds: boolean; + thirdPartySharing: boolean; + }; + }) => { + console.log('Saving agent privacy settings:', data); }; const handleDeleteAccount = () => { - if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) { - console.log('Deleting account'); - } + console.log('Agent account deletion requested'); }; - const ToggleSwitch = ({ - enabled, - onToggle, - }: { - enabled: boolean; - onToggle: () => void; - }) => ( - - ); - return (
{/* Left Sidebar */} - + {/* Main Content */}
@@ -109,146 +40,7 @@ export default function PrivacyPage() {
- {/* Privacy Settings */} -
-
-

- Privacy Settings -

-

- Control your privacy and visibility preferences -

-
- -
- {privacySettings.map((item) => ( -
-
-
-

- {item.label} -

-

- {item.description} -

-
- -
-
- ))} -
-
- - {/* Data & Personalization */} -
-
-

- Data & Personalization -

-

- Manage how your data is used -

-
- -
-
-
-

- Share Analytics -

-

- Help improve our service by sharing usage data -

-
- handleDataSettingChange('shareAnalytics')} - /> -
- -
-
-

- Personalized Ads -

-

- See ads tailored to your interests -

-
- handleDataSettingChange('personalizedAds')} - /> -
- -
-
-

- Third-Party Data Sharing -

-

- Allow sharing data with third-party partners -

-
- handleDataSettingChange('thirdPartySharing')} - /> -
-
-
- - {/* Danger Zone */} -
-
-

- Danger Zone -

-

- Irreversible and destructive actions -

-
- -
-
-

- Delete Account -

-

- Permanently delete your account and all data -

-
- -
-
- - {/* Save Button */} -
- -
+
); diff --git a/src/app/(user)/user/settings/notifications/page.tsx b/src/app/(user)/user/settings/notifications/page.tsx new file mode 100644 index 0000000..e6ddda4 --- /dev/null +++ b/src/app/(user)/user/settings/notifications/page.tsx @@ -0,0 +1,40 @@ +'use client'; + +import { SettingsSidebar, NotificationsForm } from '@/components/settings'; + +interface NotificationSetting { + id: string; + label: string; + description: string; + enabled: boolean; +} + +export default function UserNotificationsPage() { + const handleSave = (data: { + emailNotifications: NotificationSetting[]; + pushNotifications: NotificationSetting[]; + }) => { + console.log('Saving user notification settings:', data); + }; + + return ( +
+
+ {/* Left Sidebar */} + + + {/* Main Content */} +
+ {/* Header Card */} +
+

+ Notifications +

+
+ + +
+
+
+ ); +} diff --git a/src/app/(user)/user/settings/page.tsx b/src/app/(user)/user/settings/page.tsx new file mode 100644 index 0000000..384f805 --- /dev/null +++ b/src/app/(user)/user/settings/page.tsx @@ -0,0 +1,32 @@ +'use client'; + +import { SettingsSidebar, ProfileSettingsForm } from '@/components/settings'; + +export default function UserProfileSettingsPage() { + const handleSave = (data: { + fullName: string; + career: string; + email: string; + phone: string; + location: string; + }) => { + console.log('Saving user profile settings:', data); + }; + + return ( +
+
+ {/* Left Sidebar */} + + + {/* Main Content */} +
+ +
+
+
+ ); +} diff --git a/src/app/(user)/user/settings/password/page.tsx b/src/app/(user)/user/settings/password/page.tsx new file mode 100644 index 0000000..b2b8363 --- /dev/null +++ b/src/app/(user)/user/settings/password/page.tsx @@ -0,0 +1,30 @@ +'use client'; + +import { SettingsSidebar, PasswordSecurityForm } from '@/components/settings'; + +export default function UserPasswordSecurityPage() { + const handleSave = (data: { currentPassword: string; newPassword: string }) => { + console.log('Updating user password:', data); + }; + + return ( +
+
+ {/* Left Sidebar */} + + + {/* Main Content */} +
+ {/* Header Card */} +
+

+ Password Security +

+
+ + +
+
+
+ ); +} diff --git a/src/app/(user)/user/settings/privacy/page.tsx b/src/app/(user)/user/settings/privacy/page.tsx new file mode 100644 index 0000000..38f6034 --- /dev/null +++ b/src/app/(user)/user/settings/privacy/page.tsx @@ -0,0 +1,49 @@ +'use client'; + +import { SettingsSidebar, PrivacyForm } from '@/components/settings'; + +interface PrivacySetting { + id: string; + label: string; + description: string; + value: string; + options: { value: string; label: string }[]; +} + +export default function UserPrivacyPage() { + const handleSave = (data: { + privacySettings: PrivacySetting[]; + dataSettings: { + shareAnalytics: boolean; + personalizedAds: boolean; + thirdPartySharing: boolean; + }; + }) => { + console.log('Saving user privacy settings:', data); + }; + + const handleDeleteAccount = () => { + console.log('User account deletion requested'); + }; + + return ( +
+
+ {/* Left Sidebar */} + + + {/* Main Content */} +
+ {/* Header Card */} +
+

+ Privacy +

+
+ + +
+
+
+ ); +} diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx new file mode 100644 index 0000000..53ef16b --- /dev/null +++ b/src/app/about/page.tsx @@ -0,0 +1,245 @@ +'use client'; + +import Image from 'next/image'; +import Link from 'next/link'; +import { CommonHeader } from '@/components/layout/CommonHeader'; +import { Footer } from '@/components/layout/Footer'; + +const teamMembers = [ + { + name: 'Andrew', + role: 'Founder & CEO', + image: '/assets/images/professional-1.jpg', + }, + { + name: 'Thomas', + role: 'Co-Founder', + image: '/assets/images/professional-2.jpg', + }, + { + name: 'Darren', + role: 'Advisor', + image: '/assets/images/professional-3.jpg', + }, +]; + +const features = [ + { + icon: '/assets/icons/verified-badge-orange.svg', + title: 'Verified Agents', + description: 'Every agent is vetted and verified for credentials, experience, and customer feedback.', + }, + { + icon: '/assets/icons/shield-verified-icon.svg', + title: 'Total Transparency', + description: 'Access honest reviews, transaction history, and verified credentials before connecting.', + }, + { + icon: '/assets/icons/home-icon.svg', + title: 'Simple Journey', + description: 'From search to settlement, we make finding and working with agents effortless.', + }, +]; + +export default function AboutPage() { + return ( +
+ {/* Header */} +
+ +
+ + {/* Main Content */} +
+ {/* Hero Section */} +
+
+ {/* Mission Badge */} +
+ + + Our Mission + +
+ + {/* Headline */} +

+ Connecting You with Trusted Agents. +

+ + {/* Description */} +

+ We believe finding the right home shouldn't be complicated. Our platform bridges the gap between buyers, sellers, and verified real estate agents for a smooth and transparent experience. +

+ + {/* CTA Button */} + + Find Your Agent + +
+
+ + {/* Hero Image with Overlay Text */} +
+
+ City buildings + {/* Overlay Text */} +
+

+ Building the future of property. +

+
+
+
+ + {/* Stats Section */} +
+
+
+

+ 15k+ +

+

+ Verified Agents +

+
+
+

+ 98% +

+

+ Customer Satisfaction +

+
+
+
+ + {/* Why Choose Us Section */} +
+ {/* Section Header */} +
+ + Why Choose Us + +
+ + {/* Feature Cards */} +
+ {features.map((feature, index) => ( +
+
+ +
+

+ {feature.title} +

+

+ {feature.description} +

+
+ ))} +
+
+ + {/* Team Section */} +
+ {/* Section Header */} +
+

+ Meet the minds behind the platform. +

+

+ Our team is passionate about making real estate connections easier and more transparent for everyone. +

+
+ + {/* Team Cards */} +
+ {teamMembers.map((member, index) => ( +
+
+ {member.name} +
+

+ {member.name} +

+

+ {member.role} +

+
+ ))} +
+
+ + {/* CTA Section */} +
+
+
+
+

+ Ready to find an agent? +

+

+ Discover trusted agents and start your property journey with confidence. +

+ + Start Your Search + + + + +
+
+ Find an agent +
+
+
+
+
+ + {/* Footer */} +
+
+ ); +} diff --git a/src/components/settings/NotificationsForm.tsx b/src/components/settings/NotificationsForm.tsx new file mode 100644 index 0000000..b59cbf1 --- /dev/null +++ b/src/components/settings/NotificationsForm.tsx @@ -0,0 +1,203 @@ +'use client'; + +import { useState } from 'react'; + +interface NotificationSetting { + id: string; + label: string; + description: string; + enabled: boolean; +} + +interface NotificationsFormProps { + onSave?: (data: { + emailNotifications: NotificationSetting[]; + pushNotifications: NotificationSetting[]; + }) => void; +} + +export function NotificationsForm({ onSave }: NotificationsFormProps) { + const [emailNotifications, setEmailNotifications] = useState([ + { + id: 'new_leads', + label: 'New Leads', + description: 'Get notified when you receive new leads', + enabled: true, + }, + { + id: 'messages', + label: 'Messages', + description: 'Get notified when you receive new messages', + enabled: true, + }, + { + id: 'connection_requests', + label: 'Connection Requests', + description: 'Get notified about new connection requests', + enabled: true, + }, + { + id: 'property_updates', + label: 'Property Updates', + description: 'Get notified about property status changes', + enabled: false, + }, + { + id: 'marketing', + label: 'Marketing & Promotions', + description: 'Receive marketing emails and promotions', + enabled: false, + }, + ]); + + const [pushNotifications, setPushNotifications] = useState([ + { + id: 'push_messages', + label: 'Messages', + description: 'Push notifications for new messages', + enabled: true, + }, + { + id: 'push_leads', + label: 'New Leads', + description: 'Push notifications for new leads', + enabled: true, + }, + { + id: 'push_reminders', + label: 'Reminders', + description: 'Push notifications for scheduled reminders', + enabled: false, + }, + ]); + + const toggleEmailNotification = (id: string) => { + setEmailNotifications((prev) => + prev.map((item) => + item.id === id ? { ...item, enabled: !item.enabled } : item + ) + ); + }; + + const togglePushNotification = (id: string) => { + setPushNotifications((prev) => + prev.map((item) => + item.id === id ? { ...item, enabled: !item.enabled } : item + ) + ); + }; + + const handleSave = () => { + if (onSave) { + onSave({ emailNotifications, pushNotifications }); + } else { + console.log('Saving notification settings:', { + emailNotifications, + pushNotifications, + }); + } + }; + + const ToggleSwitch = ({ + enabled, + onToggle, + }: { + enabled: boolean; + onToggle: () => void; + }) => ( + + ); + + return ( + <> + {/* Email Notifications */} +
+
+

+ Email Notifications +

+

+ Manage your email notification preferences +

+
+ +
+ {emailNotifications.map((item) => ( +
+
+

+ {item.label} +

+

+ {item.description} +

+
+ toggleEmailNotification(item.id)} + /> +
+ ))} +
+
+ + {/* Push Notifications */} +
+
+

+ Push Notifications +

+

+ Manage your push notification preferences +

+
+ +
+ {pushNotifications.map((item) => ( +
+
+

+ {item.label} +

+

+ {item.description} +

+
+ togglePushNotification(item.id)} + /> +
+ ))} +
+
+ + {/* Save Button */} +
+ +
+ + ); +} diff --git a/src/components/settings/PasswordSecurityForm.tsx b/src/components/settings/PasswordSecurityForm.tsx new file mode 100644 index 0000000..c926293 --- /dev/null +++ b/src/components/settings/PasswordSecurityForm.tsx @@ -0,0 +1,159 @@ +'use client'; + +import { useState } from 'react'; + +interface PasswordSecurityFormProps { + onSave?: (data: { currentPassword: string; newPassword: string }) => void; +} + +export function PasswordSecurityForm({ onSave }: PasswordSecurityFormProps) { + const [formData, setFormData] = useState({ + currentPassword: '', + newPassword: '', + confirmPassword: '', + }); + + const [showPasswords, setShowPasswords] = useState({ + current: false, + new: false, + confirm: false, + }); + + const handleChange = (field: string, value: string) => { + setFormData((prev) => ({ ...prev, [field]: value })); + }; + + const toggleShowPassword = (field: 'current' | 'new' | 'confirm') => { + setShowPasswords((prev) => ({ ...prev, [field]: !prev[field] })); + }; + + const handleSave = () => { + if (formData.newPassword !== formData.confirmPassword) { + alert('Passwords do not match'); + return; + } + if (onSave) { + onSave({ currentPassword: formData.currentPassword, newPassword: formData.newPassword }); + } else { + console.log('Updating password'); + } + }; + + return ( + <> + {/* Password Form */} +
+
+

+ Change Password +

+

+ Ensure your account is using a strong password to stay secure +

+
+ + {/* Form Fields */} +
+ {/* Current Password */} +
+ +
+ handleChange('currentPassword', e.target.value)} + placeholder="Enter current password" + className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]" + /> + +
+
+ + {/* New Password */} +
+ +
+ handleChange('newPassword', e.target.value)} + placeholder="Enter new password" + className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]" + /> + +
+

+ Minimum 8 characters with at least one uppercase, lowercase, and number +

+
+ + {/* Confirm Password */} +
+ +
+ handleChange('confirmPassword', e.target.value)} + placeholder="Confirm new password" + className="w-full h-[40px] px-4 pr-12 border border-[#00293D]/20 rounded-[15px] text-[14px] font-serif text-[#00293D] placeholder:text-[#00293D]/40 focus:outline-none focus:border-[#E58625]" + /> + +
+
+
+ + {/* Save Button */} +
+ +
+
+ + {/* Two-Factor Authentication Section */} +
+
+
+

+ Two-Factor Authentication +

+

+ Add an extra layer of security to your account +

+
+ +
+
+ + ); +} diff --git a/src/components/settings/PrivacyForm.tsx b/src/components/settings/PrivacyForm.tsx new file mode 100644 index 0000000..a0c4378 --- /dev/null +++ b/src/components/settings/PrivacyForm.tsx @@ -0,0 +1,261 @@ +'use client'; + +import { useState } from 'react'; + +interface PrivacySetting { + id: string; + label: string; + description: string; + value: string; + options: { value: string; label: string }[]; +} + +interface PrivacyFormProps { + onSave?: (data: { + privacySettings: PrivacySetting[]; + dataSettings: { + shareAnalytics: boolean; + personalizedAds: boolean; + thirdPartySharing: boolean; + }; + }) => void; + onDeleteAccount?: () => void; +} + +export function PrivacyForm({ onSave, onDeleteAccount }: PrivacyFormProps) { + const [privacySettings, setPrivacySettings] = useState([ + { + id: 'profile_visibility', + label: 'Profile Visibility', + description: 'Control who can see your profile', + value: 'public', + options: [ + { value: 'public', label: 'Public' }, + { value: 'connections', label: 'Connections Only' }, + { value: 'private', label: 'Private' }, + ], + }, + { + id: 'contact_info', + label: 'Contact Information', + description: 'Control who can see your contact details', + value: 'connections', + options: [ + { value: 'public', label: 'Public' }, + { value: 'connections', label: 'Connections Only' }, + { value: 'private', label: 'Hidden' }, + ], + }, + { + id: 'activity_status', + label: 'Activity Status', + description: 'Show when you are active on the platform', + value: 'public', + options: [ + { value: 'public', label: 'Everyone' }, + { value: 'connections', label: 'Connections Only' }, + { value: 'private', label: 'No One' }, + ], + }, + ]); + + const [dataSettings, setDataSettings] = useState({ + shareAnalytics: true, + personalizedAds: false, + thirdPartySharing: false, + }); + + const handlePrivacyChange = (id: string, value: string) => { + setPrivacySettings((prev) => + prev.map((item) => (item.id === id ? { ...item, value } : item)) + ); + }; + + const handleDataSettingChange = (key: keyof typeof dataSettings) => { + setDataSettings((prev) => ({ ...prev, [key]: !prev[key] })); + }; + + const handleSave = () => { + if (onSave) { + onSave({ privacySettings, dataSettings }); + } else { + console.log('Saving privacy settings:', { privacySettings, dataSettings }); + } + }; + + const handleDeleteAccount = () => { + if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) { + if (onDeleteAccount) { + onDeleteAccount(); + } else { + console.log('Deleting account'); + } + } + }; + + const ToggleSwitch = ({ + enabled, + onToggle, + }: { + enabled: boolean; + onToggle: () => void; + }) => ( + + ); + + return ( + <> + {/* Privacy Settings */} +
+
+

+ Privacy Settings +

+

+ Control your privacy and visibility preferences +

+
+ +
+ {privacySettings.map((item) => ( +
+
+
+

+ {item.label} +

+

+ {item.description} +

+
+ +
+
+ ))} +
+
+ + {/* Data & Personalization */} +
+
+

+ Data & Personalization +

+

+ Manage how your data is used +

+
+ +
+
+
+

+ Share Analytics +

+

+ Help improve our service by sharing usage data +

+
+ handleDataSettingChange('shareAnalytics')} + /> +
+ +
+
+

+ Personalized Ads +

+

+ See ads tailored to your interests +

+
+ handleDataSettingChange('personalizedAds')} + /> +
+ +
+
+

+ Third-Party Data Sharing +

+

+ Allow sharing data with third-party partners +

+
+ handleDataSettingChange('thirdPartySharing')} + /> +
+
+
+ + {/* Danger Zone */} +
+
+

+ Danger Zone +

+

+ Irreversible and destructive actions +

+
+ +
+
+

+ Delete Account +

+

+ Permanently delete your account and all data +

+
+ +
+
+ + {/* Save Button */} +
+ +
+ + ); +} diff --git a/src/components/settings/ProfileSettingsForm.tsx b/src/components/settings/ProfileSettingsForm.tsx new file mode 100644 index 0000000..1a76808 --- /dev/null +++ b/src/components/settings/ProfileSettingsForm.tsx @@ -0,0 +1,191 @@ +'use client'; + +import { useState } from 'react'; +import Image from 'next/image'; + +interface ProfileSettingsFormProps { + initialData?: { + fullName: string; + career: string; + email: string; + phone: string; + location: string; + }; + onSave?: (data: { + fullName: string; + career: string; + email: string; + phone: string; + location: string; + }) => void; + descriptionText?: string; +} + +export function ProfileSettingsForm({ + initialData = { + fullName: 'Brain Neeland', + career: 'Real Estate Agent', + email: 'Brain.Neeland1234@gmail.com', + phone: '+917483849544', + location: 'New York', + }, + onSave, + descriptionText = 'This information will be displayed on your public profile page.', +}: ProfileSettingsFormProps) { + const [formData, setFormData] = useState(initialData); + + const handleChange = (field: string, value: string) => { + setFormData((prev) => ({ ...prev, [field]: value })); + }; + + const handleSave = () => { + if (onSave) { + onSave(formData); + } else { + console.log('Saving profile settings:', formData); + } + }; + + const handleCancel = () => { + setFormData(initialData); + }; + + return ( +
+ {/* Header */} +
+

+ Public Profile +

+

+ {descriptionText} +

+
+ + {/* Profile Photo Section */} +
+
+
+ Profile +
+
+

+ Public Picture +

+
+ + +
+

+ Supported formats: JPEG, PNG, GIF Max file size: 2MB +

+
+
+
+ + {/* Form Fields */} +
+ {/* Row 1: Full Name & Career */} +
+
+ + handleChange('fullName', e.target.value)} + className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]" + /> +
+
+ + handleChange('career', e.target.value)} + className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]" + /> +
+
+ + {/* Row 2: Email & Phone */} +
+
+ + handleChange('email', e.target.value)} + className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]" + /> +
+
+ + handleChange('phone', e.target.value)} + className="w-full h-[44px] px-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]" + /> +
+
+ + {/* Row 3: Location */} +
+ +
+
+ Location +
+ handleChange('location', e.target.value)} + className="w-full sm:w-1/2 h-[44px] pl-10 pr-4 border border-[#00293D]/20 rounded-[10px] text-[14px] font-serif text-[#00293D] focus:outline-none focus:border-[#E58625]" + /> +
+
+
+ + {/* Action Buttons */} +
+ + +
+
+ ); +} diff --git a/src/app/(agent)/agent/settings/component/SettingsSidebar.tsx b/src/components/settings/SettingsSidebar.tsx similarity index 83% rename from src/app/(agent)/agent/settings/component/SettingsSidebar.tsx rename to src/components/settings/SettingsSidebar.tsx index 3bc80d1..c3996dd 100644 --- a/src/app/(agent)/agent/settings/component/SettingsSidebar.tsx +++ b/src/components/settings/SettingsSidebar.tsx @@ -10,42 +10,44 @@ interface NavItem { icon: string; } -const navItems: NavItem[] = [ - { - label: 'Profile Settings', - href: '/agent/settings', - icon: '/assets/icons/settings-profile-icon.svg', - }, - { - label: 'Password Security', - href: '/agent/settings/password', - icon: '/assets/icons/settings-lock-icon.svg', - }, - { - label: 'Notifications', - href: '/agent/settings/notifications', - icon: '/assets/icons/settings-bell-icon.svg', - }, - { - label: 'Privacy', - href: '/agent/settings/privacy', - icon: '/assets/icons/settings-privacy-icon.svg', - }, -]; - interface SettingsSidebarProps { profileImage?: string; name?: string; title?: string; + basePath?: '/agent/settings' | '/user/settings'; } export function SettingsSidebar({ profileImage = '/assets/icons/user-placeholder-icon.svg', name = 'Brain Neeland', title = 'Top Real Estate Agent', + basePath = '/agent/settings', }: SettingsSidebarProps) { const pathname = usePathname(); + const navItems: NavItem[] = [ + { + label: 'Profile Settings', + href: basePath, + icon: '/assets/icons/settings-profile-icon.svg', + }, + { + label: 'Password Security', + href: `${basePath}/password`, + icon: '/assets/icons/settings-lock-icon.svg', + }, + { + label: 'Notifications', + href: `${basePath}/notifications`, + icon: '/assets/icons/settings-bell-icon.svg', + }, + { + label: 'Privacy', + href: `${basePath}/privacy`, + icon: '/assets/icons/settings-privacy-icon.svg', + }, + ]; + return (
{/* Profile Card */} diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts new file mode 100644 index 0000000..bca3ea7 --- /dev/null +++ b/src/components/settings/index.ts @@ -0,0 +1,6 @@ +// Shared Settings Components +export { SettingsSidebar } from './SettingsSidebar'; +export { ProfileSettingsForm } from './ProfileSettingsForm'; +export { PasswordSecurityForm } from './PasswordSecurityForm'; +export { NotificationsForm } from './NotificationsForm'; +export { PrivacyForm } from './PrivacyForm';