-
- {/* Scroll to bottom button - only shows when scrolled up */}
- {showScrollButton && (
-
- )}
-
-
- {/* Message input */}
-
-
- ) : (
-
- Select a conversation to start messaging
-
- )}
-
-
-
-
+
+
+
);
}
diff --git a/src/app/(user)/user/message/page.tsx b/src/app/(user)/user/message/page.tsx
new file mode 100644
index 0000000..09867bb
--- /dev/null
+++ b/src/app/(user)/user/message/page.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import { MessagingPage } from '@/components/message';
+
+export default function UserMessagePage() {
+ return (
+
+
+
+ );
+}
diff --git a/src/app/(user)/user/profile/[id]/page.tsx b/src/app/(user)/user/profile/[id]/page.tsx
index 10f4c8b..4c18cca 100644
--- a/src/app/(user)/user/profile/[id]/page.tsx
+++ b/src/app/(user)/user/profile/[id]/page.tsx
@@ -129,6 +129,7 @@ export default function AgentProfileView() {
bio={agentData.bio}
expertise={agentData.expertise}
showEditButton={false}
+ messageHref="/user/message"
/>
{/* Experience Section */}
diff --git a/src/app/faq/page.tsx b/src/app/faq/page.tsx
new file mode 100644
index 0000000..30dd5aa
--- /dev/null
+++ b/src/app/faq/page.tsx
@@ -0,0 +1,217 @@
+'use client';
+
+import Image from 'next/image';
+import { useState } from 'react';
+import { CommonHeader } from '@/components/layout/CommonHeader';
+import { Footer } from '@/components/layout/Footer';
+
+const categories = [
+ { id: 'all', label: 'All Questions' },
+ { id: 'agent', label: 'Agent Resources' },
+ { id: 'buying', label: 'Buying a Home' },
+ { id: 'selling', label: 'Selling a Home' },
+ { id: 'platform', label: 'Platform & Account' },
+];
+
+const faqs = [
+ {
+ id: 1,
+ icon: '/assets/icons/home-icon.svg',
+ question: 'How do I update my listing status?',
+ answer: 'To update your listing status, log in to your Agent Dashboard. Locate the property in your "Active Listings" tab, click the three-dot menu on the right, and select "Update Status." You can change it to Pending, Sold, or Temporarily Off Market. Changes are reflected immediately.',
+ category: 'agent',
+ },
+ {
+ id: 2,
+ icon: '/assets/icons/wallet-icon.svg',
+ question: 'What is the pre-approval process?',
+ answer: 'The pre-approval process involves submitting your financial documents to a lender who will review your credit history, income, assets, and debts. Once approved, you\'ll receive a pre-approval letter stating how much you can borrow, which strengthens your position when making offers on properties.',
+ category: 'buying',
+ },
+ {
+ id: 3,
+ icon: '/assets/icons/calendar-orange-icon.svg',
+ question: 'How do I schedule an open house?',
+ answer: 'To schedule an open house, navigate to your Agent Dashboard and select the property you want to showcase. Click on "Schedule Open House" and choose your preferred date and time. You can add details about the event and it will be automatically listed on the property page for potential buyers to see.',
+ category: 'agent',
+ },
+ {
+ id: 4,
+ icon: '/assets/icons/reset-icon.svg',
+ question: 'How do I reset my password?',
+ answer: 'To reset your password, click on the "Login" button and then select "Forgot Password." Enter your registered email address and we\'ll send you a password reset link. Follow the link to create a new password. For security, the link expires after 24 hours.',
+ category: 'platform',
+ },
+ {
+ id: 5,
+ icon: '/assets/icons/contact-icon.svg',
+ question: 'How do I contact a listing agent directly?',
+ answer: 'You can contact a listing agent by visiting the property page and clicking the "Contact Agent" button. You\'ll be able to send a message directly to the agent through our secure messaging system. Alternatively, you can call the agent using the phone number displayed on their profile.',
+ category: 'buying',
+ },
+ {
+ id: 6,
+ icon: '/assets/icons/caution-icon.svg',
+ question: 'What if I find inaccurate data on a listing?',
+ answer: 'If you find inaccurate information on a listing, please use the "Report Issue" button on the property page. Describe the inaccuracy and our team will review and correct it within 24-48 hours. You can also contact the listing agent directly to request corrections.',
+ category: 'platform',
+ },
+];
+
+export default function FAQPage() {
+ const [activeCategory, setActiveCategory] = useState('all');
+ const [expandedFaq, setExpandedFaq] = useState(1);
+
+ const filteredFaqs = activeCategory === 'all'
+ ? faqs
+ : faqs.filter(faq => faq.category === activeCategory);
+
+ const toggleFaq = (id: number) => {
+ setExpandedFaq(expandedFaq === id ? null : id);
+ };
+
+ return (
+
+ {/* Header */}
+
+
+
+
+ {/* Main Content */}
+
+
+ {/* Categories Sidebar */}
+
+
+ {/* Sidebar Header */}
+
+
+ Categories
+
+
+
+ {/* Category Items */}
+
+ {categories.map((category) => (
+
+ ))}
+
+
+
+
+ {/* FAQ Content */}
+
+ {/* Title */}
+
+ Frequently Asked Questions ?
+
+
+ {/* FAQ Accordion */}
+
+ {filteredFaqs.map((faq) => (
+
+
+
+ {expandedFaq === faq.id && (
+
+
+ {faq.answer}
+
+
+ )}
+
+ ))}
+
+
+ {/* Still Need Help Section */}
+
+
+
+
+ Still Need Help ?
+
+
+ Our Support Team Is Available
+ Mon-Fri, 9am-6pm IST
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Footer */}
+
+
+ );
+}
diff --git a/src/app/(agent)/agent/message/component/ChatHeader.tsx b/src/components/message/ChatHeader.tsx
similarity index 100%
rename from src/app/(agent)/agent/message/component/ChatHeader.tsx
rename to src/components/message/ChatHeader.tsx
diff --git a/src/app/(agent)/agent/message/component/MessageInput.tsx b/src/components/message/MessageInput.tsx
similarity index 100%
rename from src/app/(agent)/agent/message/component/MessageInput.tsx
rename to src/components/message/MessageInput.tsx
diff --git a/src/components/message/MessagingPage.tsx b/src/components/message/MessagingPage.tsx
new file mode 100644
index 0000000..be20701
--- /dev/null
+++ b/src/components/message/MessagingPage.tsx
@@ -0,0 +1,442 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import Image from 'next/image';
+import { ChatHeader } from './ChatHeader';
+import { MessageInput } from './MessageInput';
+
+// Custom scrollbar styles
+const customScrollbarStyles = `
+ .custom-scrollbar::-webkit-scrollbar {
+ width: 8px;
+ }
+ .custom-scrollbar::-webkit-scrollbar-track {
+ background: transparent;
+ }
+ .custom-scrollbar::-webkit-scrollbar-thumb {
+ background: rgba(0, 41, 61, 0.5);
+ border-radius: 10px;
+ }
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+ background: rgba(0, 41, 61, 0.7);
+ }
+`;
+
+// Types
+interface Conversation {
+ id: string;
+ name: string;
+ avatar: string;
+ lastMessage: string;
+ date: string;
+ isOnline: boolean;
+}
+
+interface Message {
+ id: string;
+ senderId: string;
+ text: string;
+ timestamp: string;
+ isOwn: boolean;
+}
+
+interface SelectedUser {
+ name: string;
+ role: string;
+ lastSeen: string;
+ avatar: string;
+ isOnline: boolean;
+ pronouns?: string;
+ expertise?: string[];
+}
+
+interface MessagingPageProps {
+ conversations?: Conversation[];
+ messages?: Message[];
+ selectedUser?: SelectedUser;
+}
+
+// Mock data for conversations
+const defaultConversations: Conversation[] = [
+ {
+ id: '1',
+ name: 'Pradeep Ram',
+ avatar: '/assets/icons/user-placeholder-icon.svg',
+ lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ date: 'Dec 4',
+ isOnline: true,
+ },
+ {
+ id: '2',
+ name: 'Pradeep',
+ avatar: '/assets/icons/user-placeholder-icon.svg',
+ lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ date: 'Dec 4',
+ isOnline: true,
+ },
+ {
+ id: '3',
+ name: 'Gokulraj',
+ avatar: '/assets/icons/user-placeholder-icon.svg',
+ lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ date: 'Dec 4',
+ isOnline: true,
+ },
+ {
+ id: '4',
+ name: 'Suriya s',
+ avatar: '/assets/icons/user-placeholder-icon.svg',
+ lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ date: 'Dec 4',
+ isOnline: true,
+ },
+ {
+ id: '5',
+ name: 'Sanjay',
+ avatar: '/assets/icons/user-placeholder-icon.svg',
+ lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ date: 'Dec 4',
+ isOnline: true,
+ },
+ {
+ id: '6',
+ name: 'Pradeep Ram',
+ avatar: '/assets/icons/user-placeholder-icon.svg',
+ lastMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ date: 'Dec 4',
+ isOnline: false,
+ },
+ {
+ id: '7',
+ name: 'Rahul Kumar',
+ avatar: '/assets/icons/user-placeholder-icon.svg',
+ lastMessage: 'Thanks for your help with the property listing!',
+ date: 'Dec 3',
+ isOnline: true,
+ },
+ {
+ id: '8',
+ name: 'Anita Singh',
+ avatar: '/assets/icons/user-placeholder-icon.svg',
+ lastMessage: 'Can we schedule a viewing for tomorrow?',
+ date: 'Dec 3',
+ isOnline: false,
+ },
+ {
+ id: '9',
+ name: 'Vikram Patel',
+ avatar: '/assets/icons/user-placeholder-icon.svg',
+ lastMessage: 'The documents have been submitted.',
+ date: 'Dec 2',
+ isOnline: true,
+ },
+ {
+ id: '10',
+ name: 'Meera Sharma',
+ avatar: '/assets/icons/user-placeholder-icon.svg',
+ lastMessage: 'Looking forward to our meeting next week.',
+ date: 'Dec 2',
+ isOnline: false,
+ },
+];
+
+// Mock data for selected user
+const defaultSelectedUser: SelectedUser = {
+ name: 'Pradeep Ram',
+ role: 'Advisor',
+ lastSeen: '21h Ago',
+ avatar: '/assets/icons/user-placeholder-icon.svg',
+ isOnline: true,
+ pronouns: 'He/Him',
+ expertise: ['Sales', 'Analytics', 'Inspection', 'Residential', 'Commercial'],
+};
+
+// Mock messages data
+const defaultMessages: Message[] = [
+ {
+ id: '1',
+ senderId: '1',
+ text: 'Hi! I saw your profile and I think you might be a great fit for what I\'m looking for.',
+ timestamp: '10:30 AM',
+ isOwn: false,
+ },
+ {
+ id: '2',
+ senderId: 'me',
+ text: 'Hello! Thank you for reaching out. I\'d be happy to help. What kind of property are you looking for?',
+ timestamp: '10:32 AM',
+ isOwn: true,
+ },
+ {
+ id: '3',
+ senderId: '1',
+ text: 'I\'m looking for a residential property in the downtown area. Preferably a 3-bedroom apartment with modern amenities.',
+ timestamp: '10:35 AM',
+ isOwn: false,
+ },
+ {
+ id: '4',
+ senderId: 'me',
+ text: 'That sounds great! I have several listings that might interest you. Do you have a specific budget range in mind?',
+ timestamp: '10:38 AM',
+ isOwn: true,
+ },
+ {
+ id: '5',
+ senderId: '1',
+ text: 'My budget is around $500,000 to $700,000. I\'m also interested in properties with good investment potential.',
+ timestamp: '10:40 AM',
+ isOwn: false,
+ },
+ {
+ id: '6',
+ senderId: 'me',
+ text: 'Perfect! I have a few properties in that range. Would you like to schedule a viewing this weekend?',
+ timestamp: '10:42 AM',
+ isOwn: true,
+ },
+ {
+ id: '7',
+ senderId: '1',
+ text: 'Yes, that would be great! Saturday afternoon works best for me.',
+ timestamp: '10:45 AM',
+ isOwn: false,
+ },
+ {
+ id: '8',
+ senderId: 'me',
+ text: 'Saturday at 2 PM works for me. I\'ll send you the addresses and details of the properties we\'ll be visiting.',
+ timestamp: '10:48 AM',
+ isOwn: true,
+ },
+ {
+ id: '9',
+ senderId: '1',
+ text: 'Sounds perfect! Looking forward to it. Thank you for your quick response.',
+ timestamp: '10:50 AM',
+ isOwn: false,
+ },
+ {
+ id: '10',
+ senderId: 'me',
+ text: 'You\'re welcome! See you on Saturday. Feel free to reach out if you have any questions before then.',
+ timestamp: '10:52 AM',
+ isOwn: true,
+ },
+];
+
+export function MessagingPage({
+ conversations = defaultConversations,
+ messages = defaultMessages,
+ selectedUser = defaultSelectedUser,
+}: MessagingPageProps) {
+ const [selectedConversation, setSelectedConversation] = useState('1');
+ const [searchQuery, setSearchQuery] = useState('');
+ const [showScrollButton, setShowScrollButton] = useState(false);
+ const messagesContainerRef = useRef(null);
+
+ const handleSendMessage = (message: string) => {
+ console.log('Sending message:', message);
+ // In production, this would send the message to the API
+ };
+
+ const handleScroll = () => {
+ if (messagesContainerRef.current) {
+ const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
+ // Show button if not at bottom (with 100px threshold)
+ setShowScrollButton(scrollHeight - scrollTop - clientHeight > 100);
+ }
+ };
+
+ const scrollToBottom = () => {
+ if (messagesContainerRef.current) {
+ messagesContainerRef.current.scrollTo({
+ top: messagesContainerRef.current.scrollHeight,
+ behavior: 'smooth'
+ });
+ }
+ };
+
+ useEffect(() => {
+ // Scroll to bottom on initial load
+ scrollToBottom();
+ }, [selectedConversation]);
+
+ const filteredConversations = conversations.filter((conv) =>
+ conv.name.toLowerCase().includes(searchQuery.toLowerCase())
+ );
+
+ return (
+ <>
+
+