847 lines
35 KiB
JavaScript
847 lines
35 KiB
JavaScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import '../i18n/config';
|
|
import {
|
|
Users,
|
|
Home,
|
|
Calendar,
|
|
User,
|
|
Clock,
|
|
DollarSign,
|
|
PlusCircle,
|
|
Edit,
|
|
Trash2,
|
|
CheckCircle,
|
|
XCircle,
|
|
Search,
|
|
Filter,
|
|
Download,
|
|
Eye,
|
|
MapPin,
|
|
Bed,
|
|
Bath,
|
|
Square,
|
|
Star,
|
|
Phone,
|
|
Mail,
|
|
CalendarDays
|
|
} from 'lucide-react';
|
|
|
|
export default function AdminPage() {
|
|
const { t, i18n } = useTranslation();
|
|
const [activeTab, setActiveTab] = useState('properties');
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [selectedUser, setSelectedUser] = useState(null);
|
|
|
|
// احصل على اللغة الحالية من i18n
|
|
const currentLanguage = i18n.language || 'en';
|
|
|
|
const [stats, setStats] = useState({
|
|
totalUsers: 0,
|
|
totalProperties: 0,
|
|
activeBookings: 0,
|
|
availableProperties: 0
|
|
});
|
|
|
|
const [properties, setProperties] = useState([
|
|
{
|
|
id: 1,
|
|
name: "luxuryVillaDamascus",
|
|
type: "villa",
|
|
price: 500000,
|
|
location: "Damascus, Al-Mazzeh",
|
|
bedrooms: 5,
|
|
bathrooms: 4,
|
|
area: 450,
|
|
status: "available",
|
|
images: [],
|
|
features: ["swimmingPool", "privateGarden", "parking", "superLuxFinish"]
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "modernApartmentAleppo",
|
|
type: "apartment",
|
|
price: 250000,
|
|
location: "Aleppo, Al-Shahba",
|
|
bedrooms: 3,
|
|
bathrooms: 2,
|
|
area: 180,
|
|
status: "booked",
|
|
images: [],
|
|
features: ["equippedKitchen", "centralHeating", "balcony", "securitySystem"]
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "familyHouseHoms",
|
|
type: "house",
|
|
price: 350000,
|
|
location: "Homs, Baba Amr",
|
|
bedrooms: 4,
|
|
bathrooms: 3,
|
|
area: 300,
|
|
status: "available",
|
|
images: [],
|
|
features: ["largeGarden", "receptionHall", "maidRoom", "garage"]
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "seasideApartmentLatakia",
|
|
type: "apartment",
|
|
price: 300000,
|
|
location: "Latakia, Blue Beach",
|
|
bedrooms: 3,
|
|
bathrooms: 2,
|
|
area: 200,
|
|
status: "available",
|
|
images: [],
|
|
features: ["seaView", "centralHeating", "centralAC", "parking"]
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "villaDaraa",
|
|
type: "villa",
|
|
price: 400000,
|
|
location: "Daraa, Doctors District",
|
|
bedrooms: 4,
|
|
bathrooms: 3,
|
|
area: 350,
|
|
status: "booked",
|
|
images: [],
|
|
features: ["fruitGarden", "highWall", "advancedSecurity", "storage"]
|
|
}
|
|
]);
|
|
|
|
const [users, setUsers] = useState([
|
|
{
|
|
id: 1,
|
|
name: "Ahmed Mohamed",
|
|
email: "ahmed@example.com",
|
|
phone: "+963 123 456 789",
|
|
joinDate: "2024-01-15",
|
|
activeBookings: 1,
|
|
totalBookings: 3,
|
|
currentBooking: {
|
|
propertyId: 2,
|
|
propertyName: "modernApartmentAleppo",
|
|
startDate: "2024-02-01",
|
|
endDate: "2024-08-01",
|
|
duration: "6 months",
|
|
totalAmount: 1500000
|
|
}
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Sara Ahmed",
|
|
email: "sara@example.com",
|
|
phone: "+963 987 654 321",
|
|
joinDate: "2024-02-10",
|
|
activeBookings: 0,
|
|
totalBookings: 2,
|
|
currentBooking: null
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Mohammed Al-Halabi",
|
|
email: "mohammed@example.com",
|
|
phone: "+963 555 123 456",
|
|
joinDate: "2024-01-25",
|
|
activeBookings: 1,
|
|
totalBookings: 1,
|
|
currentBooking: {
|
|
propertyId: 5,
|
|
propertyName: "villaDaraa",
|
|
startDate: "2024-02-15",
|
|
endDate: "2024-05-15",
|
|
duration: "3 months",
|
|
totalAmount: 1200000
|
|
}
|
|
}
|
|
]);
|
|
|
|
const [bookingRequests, setBookingRequests] = useState([
|
|
{
|
|
id: "B001",
|
|
userId: 2,
|
|
userName: "Sara Ahmed",
|
|
propertyId: 1,
|
|
propertyName: "luxuryVillaDamascus",
|
|
startDate: "2024-03-01",
|
|
endDate: "2024-06-01",
|
|
duration: "3 months",
|
|
totalAmount: 1500000,
|
|
status: "pending",
|
|
requestDate: "2024-02-20"
|
|
},
|
|
{
|
|
id: "B002",
|
|
userId: 1,
|
|
userName: "Ahmed Mohamed",
|
|
propertyId: 4,
|
|
propertyName: "seasideApartmentLatakia",
|
|
startDate: "2024-03-15",
|
|
endDate: "2024-05-15",
|
|
duration: "2 months",
|
|
totalAmount: 600000,
|
|
status: "pending",
|
|
requestDate: "2024-02-18"
|
|
}
|
|
]);
|
|
|
|
const formatNumber = (num) => {
|
|
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
};
|
|
|
|
const fadeInUp = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.5 }
|
|
}
|
|
};
|
|
|
|
const staggerContainer = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.1
|
|
}
|
|
}
|
|
};
|
|
|
|
const cardHover = {
|
|
rest: {
|
|
scale: 1,
|
|
y: 0,
|
|
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.05)"
|
|
},
|
|
hover: {
|
|
scale: 1.02,
|
|
y: -5,
|
|
boxShadow: "0 10px 25px rgba(0, 0, 0, 0.1)",
|
|
transition: {
|
|
type: "spring",
|
|
stiffness: 300
|
|
}
|
|
}
|
|
};
|
|
|
|
const buttonHover = {
|
|
rest: { scale: 1 },
|
|
hover: { scale: 1.05 },
|
|
tap: { scale: 0.98 }
|
|
};
|
|
|
|
useEffect(() => {
|
|
const totalBookings = users.reduce((sum, user) => sum + user.activeBookings, 0);
|
|
const availableProps = properties.filter(p => p.status === "available").length;
|
|
|
|
setStats({
|
|
totalUsers: users.length,
|
|
totalProperties: properties.length,
|
|
activeBookings: totalBookings,
|
|
availableProperties: availableProps
|
|
});
|
|
}, [users, properties]);
|
|
|
|
const handleBookingAction = (bookingId, action) => {
|
|
setBookingRequests(prev =>
|
|
prev.map(booking =>
|
|
booking.id === bookingId
|
|
? { ...booking, status: action === 'accept' ? 'approved' : 'rejected' }
|
|
: booking
|
|
)
|
|
);
|
|
};
|
|
|
|
const handlePropertyAction = (propertyId, action) => {
|
|
if (action === 'delete') {
|
|
setProperties(prev => prev.filter(p => p.id !== propertyId));
|
|
}
|
|
};
|
|
|
|
const showUserDetails = (user) => {
|
|
setSelectedUser(user);
|
|
};
|
|
|
|
const getLocation = (location) => {
|
|
const [city, district] = location.split(",").map(s => s.trim());
|
|
|
|
// تحويل القيم إلى مفاتيح ترجمة
|
|
const cityKey = city.toLowerCase();
|
|
const districtKey = district.replace(/\s+/g, '');
|
|
|
|
return `${t(cityKey)}, ${t(districtKey)}`;
|
|
};
|
|
|
|
return (
|
|
<div className={`min-h-screen bg-gray-50 p-4 md:p-6 font-sans ${currentLanguage === 'ar' ? 'text-right' : 'text-left'}`}>
|
|
{/* Header بدون زر اختيار اللغة */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="mb-8"
|
|
>
|
|
<div>
|
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2 tracking-tight">
|
|
{t("adminDashboard")}
|
|
</h1>
|
|
<p className="text-gray-600 text-base mb-1">{t("manageProperties")}</p>
|
|
<p className="text-gray-500 text-sm">{t("pricesInSYP")}</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* إحصائيات */}
|
|
<motion.div
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
<motion.div
|
|
variants={fadeInUp}
|
|
whileHover="hover"
|
|
variants={cardHover}
|
|
className="bg-gradient-to-br from-blue-600 to-blue-700 text-white rounded-xl shadow p-5"
|
|
>
|
|
<div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<div className="p-3 bg-white/20 rounded-lg">
|
|
<Users className="w-6 h-6" />
|
|
</div>
|
|
<div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
|
|
<div className="text-2xl font-bold mb-1">{stats.totalUsers}</div>
|
|
<div className="text-blue-100 text-sm">{t("totalUsers")}</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-blue-100 mt-3 pt-3 border-t border-blue-400/30">
|
|
{users.filter(u => u.activeBookings > 0).length} {t("usersWithActiveBookings")}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={fadeInUp}
|
|
whileHover="hover"
|
|
variants={cardHover}
|
|
className="bg-gradient-to-br from-emerald-600 to-emerald-700 text-white rounded-xl shadow p-5"
|
|
>
|
|
<div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<div className="p-3 bg-white/20 rounded-lg">
|
|
<Home className="w-6 h-6" />
|
|
</div>
|
|
<div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
|
|
<div className="text-2xl font-bold mb-1">{stats.totalProperties}</div>
|
|
<div className="text-emerald-100 text-sm">{t("totalProperties")}</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-emerald-100 mt-3 pt-3 border-t border-emerald-400/30">
|
|
{stats.availableProperties} {t("propertiesAvailable")}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={fadeInUp}
|
|
whileHover="hover"
|
|
variants={cardHover}
|
|
className="bg-gradient-to-br from-purple-600 to-purple-700 text-white rounded-xl shadow p-5"
|
|
>
|
|
<div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<div className="p-3 bg-white/20 rounded-lg">
|
|
<Calendar className="w-6 h-6" />
|
|
</div>
|
|
<div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
|
|
<div className="text-2xl font-bold mb-1">{stats.activeBookings}</div>
|
|
<div className="text-purple-100 text-sm">{t("activeBookings")}</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-purple-100 mt-3 pt-3 border-t border-purple-400/30">
|
|
{bookingRequests.filter(b => b.status === 'pending').length} {t("bookingRequestsPending")}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={fadeInUp}
|
|
whileHover="hover"
|
|
variants={cardHover}
|
|
className="bg-gradient-to-br from-amber-600 to-amber-700 text-white rounded-xl shadow p-5"
|
|
>
|
|
<div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<div className="p-3 bg-white/20 rounded-lg">
|
|
<Home className="w-6 h-6" />
|
|
</div>
|
|
<div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
|
|
<div className="text-2xl font-bold mb-1">{stats.availableProperties}</div>
|
|
<div className="text-amber-100 text-sm">{t("availableProperties")}</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-amber-100 mt-3 pt-3 border-t border-amber-400/30">
|
|
{properties.filter(p => p.status === 'available').length} {t("propertiesReadyForRent")}
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
className="mb-6"
|
|
>
|
|
<div className={`flex flex-wrap gap-2 border-b border-gray-200 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<button
|
|
onClick={() => setActiveTab('properties')}
|
|
className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-all ${activeTab === 'properties' ? 'bg-white border-t border-x border-gray-300 text-blue-700' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-100'}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Home className="w-4 h-4" />
|
|
<span>{t("properties")}</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setActiveTab('bookings')}
|
|
className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-all ${activeTab === 'bookings' ? 'bg-white border-t border-x border-gray-300 text-blue-700' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-100'}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Calendar className="w-4 h-4" />
|
|
<span>{t("bookingRequests")}</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setActiveTab('users')}
|
|
className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-all ${activeTab === 'users' ? 'bg-white border-t border-x border-gray-300 text-blue-700' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-100'}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Users className="w-4 h-4" />
|
|
<span>{t("users")}</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
|
|
|
{activeTab === 'properties' && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<div className={`flex flex-col md:flex-row md:items-center justify-between mb-6 ${currentLanguage === 'ar' ? 'md:flex-row-reverse' : ''}`}>
|
|
<div>
|
|
<h2 className="text-xl font-bold text-gray-900 mb-1">{t("propertiesManagement")}</h2>
|
|
<p className="text-gray-600 text-sm">{t("addEditDeleteProperties")}</p>
|
|
</div>
|
|
<motion.button
|
|
variants={buttonHover}
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
className="mt-3 md:mt-0 bg-blue-700 hover:bg-blue-800 text-white px-5 py-3 rounded-lg flex items-center gap-2 text-sm"
|
|
>
|
|
<PlusCircle className="w-4 h-4" />
|
|
{t("addNewProperty")}
|
|
</motion.button>
|
|
</div>
|
|
|
|
<div className={`mb-6 flex flex-col md:flex-row gap-3 ${currentLanguage === 'ar' ? 'md:flex-row-reverse' : ''}`}>
|
|
<div className="relative flex-1">
|
|
<Search className={`absolute ${currentLanguage === 'ar' ? 'right-3' : 'left-3'} top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-500`} />
|
|
<input
|
|
type="text"
|
|
placeholder={t("searchProperties")}
|
|
className={`w-full ${currentLanguage === 'ar' ? 'pr-3 pl-10' : 'pl-3 pr-10'} py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm placeholder:text-gray-400`}
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className={`flex gap-2 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<motion.button
|
|
variants={buttonHover}
|
|
whileHover="hover"
|
|
className="px-4 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-2 text-sm"
|
|
>
|
|
<Filter className="w-4 h-4" />
|
|
{t("filter")}
|
|
</motion.button>
|
|
<motion.button
|
|
variants={buttonHover}
|
|
whileHover="hover"
|
|
className="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg flex items-center gap-2 text-sm"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
{t("export")}
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
|
|
{properties.map((property) => (
|
|
<motion.div
|
|
key={property.id}
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.3 }}
|
|
whileHover={{ y: -4 }}
|
|
className="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-all duration-200"
|
|
>
|
|
<div className="p-5">
|
|
<div className={`flex justify-between items-start mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<div>
|
|
<h3 className="text-base font-bold text-gray-900 mb-1">{t(property.name)}</h3>
|
|
<div className="flex items-center gap-2 text-gray-600 text-xs">
|
|
<MapPin className="w-3 h-3" />
|
|
<span>{getLocation(property.location)}</span>
|
|
</div>
|
|
</div>
|
|
<span className={`px-2.5 py-1 rounded-full text-xs font-medium ${property.status === 'available' ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'}`}>
|
|
{property.status === 'available' ? t("available") : t("booked")}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
|
|
<div className="text-center bg-gray-50 p-3 rounded-lg">
|
|
<div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
|
|
<Bed className="w-3 h-3" />
|
|
<span>{t("bedrooms")}</span>
|
|
</div>
|
|
<div className="font-bold text-gray-900 text-sm">{property.bedrooms}</div>
|
|
</div>
|
|
|
|
<div className="text-center bg-gray-50 p-3 rounded-lg">
|
|
<div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
|
|
<Bath className="w-3 h-3" />
|
|
<span>{t("bathrooms")}</span>
|
|
</div>
|
|
<div className="font-bold text-gray-900 text-sm">{property.bathrooms}</div>
|
|
</div>
|
|
|
|
<div className="text-center bg-gray-50 p-3 rounded-lg">
|
|
<div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
|
|
<Square className="w-3 h-3" />
|
|
<span>{t("area")}</span>
|
|
</div>
|
|
<div className="font-bold text-gray-900 text-sm">{property.area} m²</div>
|
|
</div>
|
|
|
|
<div className="text-center bg-gray-50 p-3 rounded-lg">
|
|
<div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
|
|
<DollarSign className="w-3 h-3" />
|
|
<span>{t("price")}</span>
|
|
</div>
|
|
<div className="font-bold text-gray-900 text-sm">{formatNumber(property.price)} SYP/{t("month")}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-5">
|
|
<h4 className="font-bold text-gray-900 text-sm mb-2">{t("features")}:</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{property.features.map((feature, idx) => (
|
|
<span key={idx} className="px-2.5 py-1 bg-blue-50 text-blue-800 rounded-full text-xs font-medium">
|
|
{t(feature)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`flex justify-end gap-2 pt-4 border-t border-gray-100 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="px-3 py-2 bg-blue-100 text-blue-800 hover:bg-blue-200 rounded-lg flex items-center gap-2 text-xs"
|
|
>
|
|
<Eye className="w-3 h-3" />
|
|
{t("viewDetails")}
|
|
</motion.button>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className="px-3 py-2 bg-amber-100 text-amber-800 hover:bg-amber-200 rounded-lg flex items-center gap-2 text-xs"
|
|
>
|
|
<Edit className="w-3 h-3" />
|
|
{t("edit")}
|
|
</motion.button>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={() => handlePropertyAction(property.id, 'delete')}
|
|
className="px-3 py-2 bg-red-100 text-red-800 hover:bg-red-200 rounded-lg flex items-center gap-2 text-xs"
|
|
>
|
|
<Trash2 className="w-3 h-3" />
|
|
{t("delete")}
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{activeTab === 'bookings' && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<div className="mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-1">{t("bookingRequests")}</h2>
|
|
<p className="text-gray-600 text-sm">{t("manageBookingRequests")}</p>
|
|
</div>
|
|
|
|
<div className="space-y-5">
|
|
{bookingRequests.map((request) => (
|
|
<motion.div
|
|
key={request.id}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="border border-gray-200 rounded-lg p-5 hover:shadow-sm transition-shadow"
|
|
>
|
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
|
<div className="flex-1">
|
|
<div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<h3 className="text-base font-bold text-gray-900">{t("bookingRequest")} #{request.id}</h3>
|
|
<span className={`px-3 py-1 rounded-full text-xs font-medium ${request.status === 'pending' ? 'bg-yellow-100 text-yellow-800' : request.status === 'approved' ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'}`}>
|
|
{request.status === 'pending' ? t("pending") : request.status === 'approved' ? t("approved") : t("rejected")}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
|
|
<div className="bg-gray-50 p-3 rounded-lg">
|
|
<div className="text-xs text-gray-600 mb-1">{t("user")}</div>
|
|
<div className="font-bold text-gray-900 text-sm">{request.userName}</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-3 rounded-lg">
|
|
<div className="text-xs text-gray-600 mb-1">{t("property")}</div>
|
|
<div className="font-bold text-gray-900 text-sm">{t(request.propertyName)}</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-3 rounded-lg">
|
|
<div className="text-xs text-gray-600 mb-1">{t("duration")}</div>
|
|
<div className="font-bold text-gray-900 text-sm">{request.duration}</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-3 rounded-lg">
|
|
<div className="text-xs text-gray-600 mb-1">{t("totalAmount")}</div>
|
|
<div className="font-bold text-gray-900 text-sm">{formatNumber(request.totalAmount)} SYP</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-xs text-gray-600 space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<CalendarDays className="w-3 h-3" />
|
|
<span>{t("from")} <span className="font-medium">{request.startDate}</span> {t("to")} <span className="font-medium">{request.endDate}</span></span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Clock className="w-3 h-3" />
|
|
<span>{t("requestDate")}: <span className="font-medium">{request.requestDate}</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{request.status === 'pending' && (
|
|
<div className={`flex gap-2 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<motion.button
|
|
variants={buttonHover}
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onClick={() => handleBookingAction(request.id, 'accept')}
|
|
className="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg flex items-center gap-2 text-sm"
|
|
>
|
|
<CheckCircle className="w-4 h-4" />
|
|
{t("accept")}
|
|
</motion.button>
|
|
<motion.button
|
|
variants={buttonHover}
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onClick={() => handleBookingAction(request.id, 'reject')}
|
|
className="px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center gap-2 text-sm"
|
|
>
|
|
<XCircle className="w-4 h-4" />
|
|
{t("reject")}
|
|
</motion.button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{activeTab === 'users' && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<div className="mb-6">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-1">{t("users")}</h2>
|
|
<p className="text-gray-600 text-sm">{t("viewUserDetails")}</p>
|
|
</div>
|
|
|
|
<div className="space-y-5">
|
|
{users.map((user) => (
|
|
<motion.div
|
|
key={user.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="border border-gray-200 rounded-lg overflow-hidden hover:shadow-sm transition-all"
|
|
>
|
|
<div className="p-5">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-5">
|
|
<div className={`flex items-center gap-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
|
|
<User className="w-6 h-6 text-blue-700" />
|
|
</div>
|
|
<div className={currentLanguage === 'ar' ? 'text-right' : 'text-left'}>
|
|
<h3 className="text-base font-bold text-gray-900 mb-1">{user.name}</h3>
|
|
<div className="flex flex-wrap gap-3 text-xs">
|
|
<div className="flex items-center gap-1 text-gray-700">
|
|
<Mail className="w-3 h-3" />
|
|
<span>{user.email}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-gray-700">
|
|
<Phone className="w-3 h-3" />
|
|
<span>{user.phone}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`flex gap-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<div className="text-center bg-blue-50 p-3 rounded-lg">
|
|
<div className="text-lg font-bold text-blue-700">{user.activeBookings}</div>
|
|
<div className="text-gray-700 text-xs">{t("activeBookings")}</div>
|
|
</div>
|
|
<div className="text-center bg-emerald-50 p-3 rounded-lg">
|
|
<div className="text-lg font-bold text-emerald-700">{user.totalBookings}</div>
|
|
<div className="text-gray-700 text-xs">{t("totalBookings")}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{user.currentBooking ? (
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-5">
|
|
<h4 className="font-bold text-blue-900 text-sm mb-3 flex items-center gap-2">
|
|
<Calendar className="w-4 h-4" />
|
|
{t("currentActiveBooking")}
|
|
</h4>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
|
|
<div className="bg-white p-3 rounded">
|
|
<div className="text-xs text-blue-700 mb-1">{t("property")}</div>
|
|
<div className="font-bold text-blue-900 text-sm">{t(user.currentBooking.propertyName)}</div>
|
|
</div>
|
|
<div className="bg-white p-3 rounded">
|
|
<div className="text-xs text-blue-700 mb-1">{t("duration")}</div>
|
|
<div className="font-bold text-blue-900 text-sm">{user.currentBooking.duration}</div>
|
|
</div>
|
|
<div className="bg-white p-3 rounded">
|
|
<div className="text-xs text-blue-700 mb-1">{t("totalAmount")}</div>
|
|
<div className="font-bold text-blue-900 text-sm">{formatNumber(user.currentBooking.totalAmount)} SYP</div>
|
|
</div>
|
|
<div className="bg-white p-3 rounded">
|
|
<div className="text-xs text-blue-700 mb-1">{t("bookingPeriod")}</div>
|
|
<div className="font-bold text-blue-900 text-sm">
|
|
{user.currentBooking.startDate} {t("to")} {user.currentBooking.endDate}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="bg-gray-100 border border-gray-300 rounded-lg p-4 mb-5 text-center">
|
|
<div className="text-gray-600 text-sm">{t("noActiveBookings")}</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end">
|
|
<motion.button
|
|
variants={buttonHover}
|
|
whileHover="hover"
|
|
whileTap="tap"
|
|
onClick={() => showUserDetails(user)}
|
|
className="px-4 py-2.5 bg-blue-700 hover:bg-blue-800 text-white rounded-lg flex items-center gap-2 text-sm"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
{t("viewFullDetails")}
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
|
|
{selectedUser && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
className="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto"
|
|
>
|
|
<div className="p-6">
|
|
<div className={`flex justify-between items-center mb-6 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
|
|
<h3 className="text-lg font-bold text-gray-900">{t("userDetails")}: {selectedUser.name}</h3>
|
|
<button
|
|
onClick={() => setSelectedUser(null)}
|
|
className="p-2 hover:bg-gray-100 rounded-lg"
|
|
>
|
|
<XCircle className="w-5 h-5 text-gray-600" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="bg-gray-50 p-4 rounded-lg">
|
|
<h4 className="font-bold text-sm text-gray-800 mb-3">{t("personalInformation")}</h4>
|
|
<div className="space-y-3 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">{t("fullName")}:</span>
|
|
<span className="font-medium">{selectedUser.name}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">{t("email")}:</span>
|
|
<span className="font-medium">{selectedUser.email}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">{t("phoneNumber")}:</span>
|
|
<span className="font-medium">{selectedUser.phone}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-600">{t("joinDate")}:</span>
|
|
<span className="font-medium">{selectedUser.joinDate}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-blue-50 p-4 rounded-lg">
|
|
<h4 className="font-bold text-sm text-blue-800 mb-3">{t("bookingStatistics")}</h4>
|
|
<div className="space-y-3 text-sm">
|
|
<div className="flex justify-between">
|
|
<span className="text-blue-600">{t("activeBookings")}:</span>
|
|
<span className="font-medium text-blue-800">{selectedUser.activeBookings}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-blue-600">{t("totalBookings")}:</span>
|
|
<span className="font-medium text-blue-800">{selectedUser.totalBookings}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |