Added Admin page, Login, forgot password, register and owner with profile
This commit is contained in:
Rahaf
641
app/profile/page.js
Normal file
641
app/profile/page.js
Normal file
@ -0,0 +1,641 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user