350 lines
12 KiB
JavaScript
350 lines
12 KiB
JavaScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import {
|
|
User,
|
|
Mail,
|
|
Phone,
|
|
MessageCircle,
|
|
Check,
|
|
X,
|
|
ArrowLeft,
|
|
Building,
|
|
Home,
|
|
Calendar,
|
|
MapPin,
|
|
Loader2,
|
|
Pencil
|
|
} from 'lucide-react';
|
|
import toast, { Toaster } from 'react-hot-toast';
|
|
import AuthService from '../services/AuthService';
|
|
import { getCustomerByUserId, getOwnerByUserId } from '../utils/api';
|
|
|
|
export default function ProfilePage() {
|
|
const router = useRouter();
|
|
const [user, setUser] = useState(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const [editingBio, setEditingBio] = useState(false);
|
|
const [bioDraft, setBioDraft] = useState('');
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
whatsapp: '',
|
|
bio: '',
|
|
location: '',
|
|
joinedDate: ''
|
|
});
|
|
|
|
const [avatarPreview, setAvatarPreview] = useState('');
|
|
|
|
useEffect(() => {
|
|
const authUser = AuthService.getUser();
|
|
if (authUser) {
|
|
const userData = {
|
|
id: authUser.id,
|
|
name: authUser.name || '',
|
|
email: authUser.email || '',
|
|
phone: authUser.phone || '',
|
|
role: AuthService.isOwner() ? 'owner' : 'customer',
|
|
};
|
|
setUser(userData);
|
|
|
|
async function fetchProfile() {
|
|
try {
|
|
const fetchFn = userData.role === 'owner' ? getOwnerByUserId : getCustomerByUserId;
|
|
const profile = await fetchFn(userData.id);
|
|
|
|
if (profile) {
|
|
const profileData = {
|
|
name: profile.fullName || profile.name || `${profile.firstName || ''} ${profile.lastName || ''}`.trim() || userData.name || '',
|
|
email: profile.email || userData.email || '',
|
|
phone: profile.phone || profile.phoneNumber || userData.phone || '',
|
|
whatsapp: profile.whatsAppNumber || profile.whatsapp || '',
|
|
bio: profile.bio || '',
|
|
location: profile.address || profile.location || '',
|
|
joinedDate: profile.createdAt
|
|
? new Date(profile.createdAt).toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' })
|
|
: new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' }),
|
|
};
|
|
setFormData(profileData);
|
|
setBioDraft(profileData.bio);
|
|
localStorage.setItem('userProfile', JSON.stringify(profileData));
|
|
setIsLoading(false);
|
|
return;
|
|
}
|
|
} catch (err) {
|
|
// Ignore API errors and fall back to local data.
|
|
}
|
|
|
|
const savedProfile = localStorage.getItem('userProfile');
|
|
let profileData;
|
|
if (savedProfile) {
|
|
profileData = JSON.parse(savedProfile);
|
|
} else {
|
|
profileData = {
|
|
name: userData.name || '',
|
|
email: userData.email || '',
|
|
phone: '',
|
|
whatsapp: '',
|
|
bio: '',
|
|
location: '',
|
|
joinedDate: new Date().toLocaleDateString('ar-SA', { month: 'long', year: 'numeric' })
|
|
};
|
|
}
|
|
setFormData(profileData);
|
|
setBioDraft(profileData.bio || '');
|
|
setIsLoading(false);
|
|
}
|
|
|
|
const savedAvatar = localStorage.getItem('userAvatar');
|
|
if (savedAvatar) {
|
|
setAvatarPreview(savedAvatar);
|
|
}
|
|
|
|
fetchProfile();
|
|
} else {
|
|
router.push('/login');
|
|
}
|
|
}, [router]);
|
|
|
|
const startBioEditing = () => {
|
|
setBioDraft(formData.bio || '');
|
|
setEditingBio(true);
|
|
};
|
|
|
|
const cancelBioEditing = () => {
|
|
setBioDraft(formData.bio || '');
|
|
setEditingBio(false);
|
|
};
|
|
|
|
const saveBio = () => {
|
|
const updatedData = { ...formData, bio: bioDraft };
|
|
setFormData(updatedData);
|
|
localStorage.setItem('userProfile', JSON.stringify(updatedData));
|
|
setEditingBio(false);
|
|
toast.success('تم تحديث نبذة عني بنجاح');
|
|
};
|
|
|
|
const fadeInUp = {
|
|
initial: { opacity: 0, y: 20 },
|
|
animate: { opacity: 1, y: 0 },
|
|
transition: { duration: 0.5 }
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<Loader2 className="w-12 h-12 text-amber-500 animate-spin mx-auto mb-4" />
|
|
<p className="text-gray-600">جاري تحميل الملف الشخصي...</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 py-8">
|
|
<Toaster position="top-center" reverseOrder={false} />
|
|
|
|
<div className="container mx-auto px-4 max-w-4xl">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="flex justify-between items-center mb-6"
|
|
>
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors"
|
|
>
|
|
<ArrowLeft className="w-5 h-5" />
|
|
<span>العودة للرئيسية</span>
|
|
</Link>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={fadeInUp}
|
|
initial="initial"
|
|
animate="animate"
|
|
className="bg-white rounded-3xl shadow-xl overflow-hidden"
|
|
>
|
|
<div className="h-48 bg-gradient-to-r from-amber-500 to-amber-600 relative overflow-hidden">
|
|
<motion.div
|
|
className="absolute inset-0 bg-white/10"
|
|
animate={{
|
|
x: ['-100%', '100%'],
|
|
}}
|
|
transition={{
|
|
duration: 3,
|
|
repeat: Infinity,
|
|
ease: 'linear',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="px-8 pb-8">
|
|
<div className="flex justify-center -mt-16 mb-6">
|
|
<div className="relative group">
|
|
<div className="w-32 h-32 rounded-full border-4 border-white bg-gradient-to-br from-amber-500 to-amber-600 flex items-center justify-center text-white text-4xl font-bold shadow-xl overflow-hidden">
|
|
{avatarPreview ? (
|
|
<img
|
|
src={avatarPreview}
|
|
alt={formData.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
formData.name?.charAt(0).toUpperCase() || 'U'
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center mb-6">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<h1 className="text-3xl font-bold text-gray-900">{formData.name}</h1>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-2 text-gray-500 mt-2">
|
|
<MapPin className="w-4 h-4" />
|
|
<span>{formData.location || 'الموقع غير محدد'}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-2 text-gray-500 mt-1">
|
|
<Calendar className="w-4 h-4" />
|
|
<span>عضو منذ {formData.joinedDate}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="bg-gray-50 p-4 rounded-xl group">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<label className="text-sm font-medium text-gray-600">
|
|
البريد الإلكتروني
|
|
</label>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-gray-900">
|
|
<Mail className="w-5 h-5 text-gray-400" />
|
|
<span>{formData.email}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-4 rounded-xl group">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<label className="text-sm font-medium text-gray-600">
|
|
رقم الهاتف
|
|
</label>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-gray-900">
|
|
<Phone className="w-5 h-5 text-gray-400" />
|
|
<span>{formData.phone || 'غير محدد'}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-4 rounded-xl group">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<label className="text-sm font-medium text-gray-600">
|
|
رقم الواتساب
|
|
</label>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-gray-900">
|
|
<MessageCircle className="w-5 h-5 text-gray-400" />
|
|
<span>{formData.whatsapp || 'غير محدد'}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-4 rounded-xl">
|
|
<label className="block text-sm font-medium text-gray-600 mb-2">
|
|
نوع الحساب
|
|
</label>
|
|
<div className="flex items-center gap-2">
|
|
{user?.role === 'owner' ? (
|
|
<>
|
|
<Building className="w-5 h-5 text-amber-500" />
|
|
<span className="text-gray-900">مالك عقار</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Home className="w-5 h-5 text-blue-500" />
|
|
<span className="text-gray-900">مستأجر</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 bg-gray-50 p-4 rounded-xl group">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<label className="text-sm font-medium text-gray-600">
|
|
نبذة عني
|
|
</label>
|
|
{!editingBio && (
|
|
<button
|
|
onClick={startBioEditing}
|
|
className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{editingBio ? (
|
|
<div className="space-y-2">
|
|
<textarea
|
|
value={bioDraft}
|
|
onChange={(e) => setBioDraft(e.target.value)}
|
|
rows="4"
|
|
autoFocus
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
|
|
placeholder="اكتب نبذة عن نفسك..."
|
|
/>
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
onClick={saveBio}
|
|
className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center gap-2"
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
حفظ
|
|
</button>
|
|
<button
|
|
onClick={cancelBioEditing}
|
|
className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 flex items-center gap-2"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
إلغاء
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<p className="text-gray-700 leading-relaxed">
|
|
{formData.bio || 'لا توجد نبذة تعريفية بعد'}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{user?.role === 'owner' && (
|
|
<div className="grid grid-cols-3 gap-4 mt-6">
|
|
<div className="bg-amber-50 p-4 rounded-xl text-center">
|
|
<div className="text-2xl font-bold text-amber-600">12</div>
|
|
<div className="text-xs text-gray-600">عقارات</div>
|
|
</div>
|
|
<div className="bg-blue-50 p-4 rounded-xl text-center">
|
|
<div className="text-2xl font-bold text-blue-600">8</div>
|
|
<div className="text-xs text-gray-600">حجوزات نشطة</div>
|
|
</div>
|
|
<div className="bg-green-50 p-4 rounded-xl text-center">
|
|
<div className="text-2xl font-bold text-green-600">4.8</div>
|
|
<div className="text-xs text-gray-600">تقييم</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |