641 lines
24 KiB
JavaScript
641 lines
24 KiB
JavaScript
'use client';
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useRouter } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import {
|
|
User,
|
|
Mail,
|
|
Phone,
|
|
MessageCircle,
|
|
Camera,
|
|
Save,
|
|
X,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
ArrowLeft,
|
|
Building,
|
|
Home,
|
|
Calendar,
|
|
MapPin,
|
|
Edit,
|
|
Loader2,
|
|
Upload,
|
|
Check,
|
|
Pencil
|
|
} from 'lucide-react';
|
|
import toast, { Toaster } from 'react-hot-toast';
|
|
|
|
export default function ProfilePage() {
|
|
const router = useRouter();
|
|
const [user, setUser] = useState(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
const [editingField, setEditingField] = useState(null);
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
whatsapp: '',
|
|
bio: '',
|
|
location: '',
|
|
joinedDate: ''
|
|
});
|
|
|
|
const [tempValues, setTempValues] = useState({});
|
|
const [avatar, setAvatar] = useState(null);
|
|
const [avatarPreview, setAvatarPreview] = useState('');
|
|
const [errors, setErrors] = useState({});
|
|
|
|
const fileInputRef = useRef(null);
|
|
const inputRefs = {
|
|
name: useRef(null),
|
|
email: useRef(null),
|
|
phone: useRef(null),
|
|
whatsapp: useRef(null),
|
|
location: useRef(null),
|
|
bio: useRef(null)
|
|
};
|
|
|
|
useEffect(() => {
|
|
const storedUser = localStorage.getItem('user');
|
|
if (storedUser) {
|
|
const userData = JSON.parse(storedUser);
|
|
setUser(userData);
|
|
|
|
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);
|
|
setTempValues(profileData);
|
|
|
|
const savedAvatar = localStorage.getItem('userAvatar');
|
|
if (savedAvatar) {
|
|
setAvatarPreview(savedAvatar);
|
|
}
|
|
|
|
setIsLoading(false);
|
|
} else {
|
|
router.push('/login');
|
|
}
|
|
}, [router]);
|
|
|
|
useEffect(() => {
|
|
if (editingField && inputRefs[editingField]?.current) {
|
|
inputRefs[editingField].current.focus();
|
|
}
|
|
}, [editingField]);
|
|
|
|
const handleImageUpload = (file) => {
|
|
if (!file) return;
|
|
|
|
if (!file.type.startsWith('image/')) {
|
|
toast.error('الرجاء اختيار صورة صالحة');
|
|
return;
|
|
}
|
|
|
|
if (file.size > 2 * 1024 * 1024) {
|
|
toast.error('حجم الصورة يجب أن يكون أقل من 2 ميجابايت');
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
setAvatarPreview(reader.result);
|
|
localStorage.setItem('userAvatar', reader.result);
|
|
toast.success('تم تغيير الصورة بنجاح');
|
|
};
|
|
reader.readAsDataURL(file);
|
|
};
|
|
|
|
const validateField = (field, value) => {
|
|
if (field === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
|
|
return 'البريد الإلكتروني غير صالح';
|
|
}
|
|
if ((field === 'phone' || field === 'whatsapp') && value && !/^(09|05)[0-9]{8}$/.test(value)) {
|
|
return 'رقم الهاتف غير صالح (يجب أن يبدأ 09 أو 05)';
|
|
}
|
|
if (field === 'name' && !value?.trim()) {
|
|
return 'الاسم مطلوب';
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const startEditing = (field) => {
|
|
setEditingField(field);
|
|
setTempValues(prev => ({ ...prev, [field]: formData[field] }));
|
|
setErrors(prev => ({ ...prev, [field]: null }));
|
|
};
|
|
|
|
const cancelEditing = () => {
|
|
setEditingField(null);
|
|
setTempValues({});
|
|
setErrors({});
|
|
};
|
|
|
|
const saveField = (field) => {
|
|
const value = tempValues[field];
|
|
const error = validateField(field, value);
|
|
|
|
if (error) {
|
|
setErrors(prev => ({ ...prev, [field]: error }));
|
|
return;
|
|
}
|
|
|
|
const updatedData = { ...formData, [field]: value };
|
|
setFormData(updatedData);
|
|
|
|
localStorage.setItem('userProfile', JSON.stringify(updatedData));
|
|
|
|
if (field === 'name') {
|
|
const updatedUser = { ...user, name: value };
|
|
localStorage.setItem('user', JSON.stringify(updatedUser));
|
|
setUser(updatedUser);
|
|
}
|
|
|
|
setEditingField(null);
|
|
setTempValues({});
|
|
toast.success(`تم تحديث ${getFieldLabel(field)} بنجاح`);
|
|
};
|
|
|
|
const handleKeyDown = (e, field) => {
|
|
if (e.key === 'Enter') {
|
|
saveField(field);
|
|
} else if (e.key === 'Escape') {
|
|
cancelEditing();
|
|
}
|
|
};
|
|
|
|
const getFieldLabel = (field) => {
|
|
const labels = {
|
|
name: 'الاسم',
|
|
email: 'البريد الإلكتروني',
|
|
phone: 'رقم الهاتف',
|
|
whatsapp: 'رقم الواتساب',
|
|
location: 'الموقع',
|
|
bio: 'نبذة عني'
|
|
};
|
|
return labels[field] || field;
|
|
};
|
|
|
|
const getFieldIcon = (field) => {
|
|
const icons = {
|
|
name: User,
|
|
email: Mail,
|
|
phone: Phone,
|
|
whatsapp: MessageCircle,
|
|
location: MapPin,
|
|
bio: User
|
|
};
|
|
const Icon = icons[field];
|
|
return Icon ? <Icon className="w-5 h-5 text-gray-400" /> : null;
|
|
};
|
|
|
|
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 cursor-pointer"
|
|
onClick={() => fileInputRef.current?.click()}>
|
|
{avatarPreview ? (
|
|
<img
|
|
src={avatarPreview}
|
|
alt={formData.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
formData.name?.charAt(0).toUpperCase() || 'U'
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className="absolute bottom-0 right-0 w-8 h-8 bg-amber-500 rounded-full flex items-center justify-center text-white hover:bg-amber-600 transition-colors shadow-lg"
|
|
title="تغيير الصورة"
|
|
>
|
|
<Camera className="w-4 h-4" />
|
|
</button>
|
|
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={(e) => handleImageUpload(e.target.files?.[0])}
|
|
className="hidden"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center mb-6">
|
|
<div className="flex items-center justify-center gap-2">
|
|
{editingField === 'name' ? (
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
ref={inputRefs.name}
|
|
type="text"
|
|
value={tempValues.name || ''}
|
|
onChange={(e) => setTempValues({...tempValues, name: e.target.value})}
|
|
onKeyDown={(e) => handleKeyDown(e, 'name')}
|
|
className="text-3xl font-bold text-center border-b-2 border-amber-500 outline-none px-2 py-1 w-64"
|
|
placeholder="الاسم الكامل"
|
|
/>
|
|
<button
|
|
onClick={() => saveField('name')}
|
|
className="p-2 bg-green-500 text-white rounded-full hover:bg-green-600 transition-colors"
|
|
title="حفظ"
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={cancelEditing}
|
|
className="p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
|
|
title="إلغاء"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<h1 className="text-3xl font-bold text-gray-900">{formData.name}</h1>
|
|
<button
|
|
onClick={() => startEditing('name')}
|
|
className="p-2 text-gray-400 hover:text-amber-500 transition-colors"
|
|
title="تعديل الاسم"
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
{errors.name && (
|
|
<p className="text-red-500 text-sm mt-1">{errors.name}</p>
|
|
)}
|
|
|
|
<div className="flex items-center justify-center gap-2 text-gray-500 mt-2">
|
|
<MapPin className="w-4 h-4" />
|
|
{editingField === 'location' ? (
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
ref={inputRefs.location}
|
|
type="text"
|
|
value={tempValues.location || ''}
|
|
onChange={(e) => setTempValues({...tempValues, location: e.target.value})}
|
|
onKeyDown={(e) => handleKeyDown(e, 'location')}
|
|
className="border-b border-amber-500 outline-none px-2 py-1"
|
|
placeholder="الموقع"
|
|
/>
|
|
<button
|
|
onClick={() => saveField('location')}
|
|
className="text-green-500 hover:text-green-600"
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={cancelEditing}
|
|
className="text-red-500 hover:text-red-600"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<span>{formData.location || 'الموقع غير محدد'}</span>
|
|
<button
|
|
onClick={() => startEditing('location')}
|
|
className="text-gray-400 hover:text-amber-500 transition-colors"
|
|
>
|
|
<Pencil className="w-3 h-3" />
|
|
</button>
|
|
</>
|
|
)}
|
|
</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>
|
|
{editingField !== 'email' && (
|
|
<button
|
|
onClick={() => startEditing('email')}
|
|
className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{editingField === 'email' ? (
|
|
<div className="space-y-2">
|
|
<div className="flex gap-2">
|
|
<input
|
|
ref={inputRefs.email}
|
|
type="email"
|
|
value={tempValues.email || ''}
|
|
onChange={(e) => setTempValues({...tempValues, email: e.target.value})}
|
|
onKeyDown={(e) => handleKeyDown(e, 'email')}
|
|
className="flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
|
|
placeholder="example@domain.com"
|
|
/>
|
|
<button
|
|
onClick={() => saveField('email')}
|
|
className="p-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
|
|
title="حفظ"
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={cancelEditing}
|
|
className="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
|
|
title="إلغاء"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
{errors.email && (
|
|
<p className="text-red-500 text-xs">{errors.email}</p>
|
|
)}
|
|
</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>
|
|
{editingField !== 'phone' && (
|
|
<button
|
|
onClick={() => startEditing('phone')}
|
|
className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{editingField === 'phone' ? (
|
|
<div className="space-y-2">
|
|
<div className="flex gap-2">
|
|
<input
|
|
ref={inputRefs.phone}
|
|
type="tel"
|
|
value={tempValues.phone || ''}
|
|
onChange={(e) => setTempValues({...tempValues, phone: e.target.value})}
|
|
onKeyDown={(e) => handleKeyDown(e, 'phone')}
|
|
className="flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
|
|
placeholder="09XXXXXXXX"
|
|
/>
|
|
<button
|
|
onClick={() => saveField('phone')}
|
|
className="p-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={cancelEditing}
|
|
className="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
{errors.phone && (
|
|
<p className="text-red-500 text-xs">{errors.phone}</p>
|
|
)}
|
|
</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>
|
|
{editingField !== 'whatsapp' && (
|
|
<button
|
|
onClick={() => startEditing('whatsapp')}
|
|
className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{editingField === 'whatsapp' ? (
|
|
<div className="space-y-2">
|
|
<div className="flex gap-2">
|
|
<input
|
|
ref={inputRefs.whatsapp}
|
|
type="tel"
|
|
value={tempValues.whatsapp || ''}
|
|
onChange={(e) => setTempValues({...tempValues, whatsapp: e.target.value})}
|
|
onKeyDown={(e) => handleKeyDown(e, 'whatsapp')}
|
|
className="flex-1 px-3 py-2 border rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-transparent"
|
|
placeholder="09XXXXXXXX"
|
|
/>
|
|
<button
|
|
onClick={() => saveField('whatsapp')}
|
|
className="p-2 bg-green-500 text-white rounded-lg hover:bg-green-600"
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={cancelEditing}
|
|
className="p-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
{errors.whatsapp && (
|
|
<p className="text-red-500 text-xs">{errors.whatsapp}</p>
|
|
)}
|
|
</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>
|
|
{editingField !== 'bio' && (
|
|
<button
|
|
onClick={() => startEditing('bio')}
|
|
className="opacity-0 group-hover:opacity-100 transition-opacity text-gray-400 hover:text-amber-500"
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{editingField === 'bio' ? (
|
|
<div className="space-y-2">
|
|
<textarea
|
|
ref={inputRefs.bio}
|
|
value={tempValues.bio || ''}
|
|
onChange={(e) => setTempValues({...tempValues, bio: e.target.value})}
|
|
rows="4"
|
|
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={() => saveField('bio')}
|
|
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={cancelEditing}
|
|
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>
|
|
);
|
|
} |