762 lines
29 KiB
JavaScript
762 lines
29 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 {
|
|
// DollarSign,
|
|
// TrendingUp,
|
|
// TrendingDown,
|
|
// Calendar,
|
|
// Home,
|
|
// Building,
|
|
// Download,
|
|
// Filter,
|
|
// ChevronLeft,
|
|
// ChevronRight,
|
|
// ArrowLeft,
|
|
// Loader2,
|
|
// Eye,
|
|
// PieChart,
|
|
// BarChart,
|
|
// LineChart,
|
|
// Wallet,
|
|
// CreditCard,
|
|
// Clock,
|
|
// CheckCircle,
|
|
// XCircle
|
|
// } from 'lucide-react';
|
|
// import toast, { Toaster } from 'react-hot-toast';
|
|
// import AuthService from '../../services/AuthService';
|
|
|
|
// const StatCard = ({ title, value, change, icon: Icon, color, trend }) => {
|
|
// return (
|
|
// <motion.div
|
|
// initial={{ opacity: 0, y: 20 }}
|
|
// animate={{ opacity: 1, y: 0 }}
|
|
// className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all"
|
|
// >
|
|
// <div className="flex justify-between items-start mb-4">
|
|
// <div className={`w-12 h-12 ${color} rounded-xl flex items-center justify-center`}>
|
|
// <Icon className="w-6 h-6 text-white" />
|
|
// </div>
|
|
// <div className={`flex items-center gap-1 text-sm ${trend === 'up' ? 'text-green-600' : 'text-red-600'}`}>
|
|
// {trend === 'up' ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
|
|
// <span>{Math.abs(change)}%</span>
|
|
// </div>
|
|
// </div>
|
|
// <h3 className="text-sm text-gray-600 mb-1">{title}</h3>
|
|
// <div className="text-2xl font-bold text-gray-900">{value}</div>
|
|
// </motion.div>
|
|
// );
|
|
// };
|
|
|
|
// const PropertyProfitCard = ({ property, onViewDetails }) => {
|
|
// const formatCurrency = (amount) => {
|
|
// return amount?.toLocaleString() + ' ل.س';
|
|
// };
|
|
|
|
// return (
|
|
// <motion.div
|
|
// initial={{ opacity: 0, y: 20 }}
|
|
// animate={{ opacity: 1, y: 0 }}
|
|
// className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-all"
|
|
// >
|
|
// <div className="p-5">
|
|
// <div className="flex justify-between items-start mb-4">
|
|
// <div>
|
|
// <h3 className="font-bold text-gray-900 mb-1">{property.title}</h3>
|
|
// <p className="text-sm text-gray-500">{property.location}</p>
|
|
// </div>
|
|
// <span className={`px-2 py-1 rounded-lg text-xs font-medium ${
|
|
// property.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'
|
|
// }`}>
|
|
// {property.status === 'active' ? 'نشط' : 'غير نشط'}
|
|
// </span>
|
|
// </div>
|
|
|
|
// <div className="grid grid-cols-2 gap-4 mb-4">
|
|
// <div className="bg-gray-50 p-3 rounded-xl text-center">
|
|
// <DollarSign className="w-5 h-5 text-amber-500 mx-auto mb-1" />
|
|
// <div className="text-xs text-gray-500">إجمالي الأرباح</div>
|
|
// <div className="text-lg font-bold text-amber-600">{formatCurrency(property.totalProfit)}</div>
|
|
// </div>
|
|
// <div className="bg-gray-50 p-3 rounded-xl text-center">
|
|
// <Calendar className="w-5 h-5 text-blue-500 mx-auto mb-1" />
|
|
// <div className="text-xs text-gray-500">عدد الحجوزات</div>
|
|
// <div className="text-lg font-bold text-blue-600">{property.totalBookings}</div>
|
|
// </div>
|
|
// </div>
|
|
|
|
// <div className="space-y-2 mb-4">
|
|
// <div className="flex justify-between text-sm">
|
|
// <span className="text-gray-500">هذا الشهر</span>
|
|
// <span className="font-medium text-gray-900">{formatCurrency(property.monthlyProfit)}</span>
|
|
// </div>
|
|
// <div className="flex justify-between text-sm">
|
|
// <span className="text-gray-500">الأسبوع الماضي</span>
|
|
// <span className="font-medium text-gray-900">{formatCurrency(property.weeklyProfit)}</span>
|
|
// </div>
|
|
// <div className="flex justify-between text-sm">
|
|
// <span className="text-gray-500">متوسط السعر اليومي</span>
|
|
// <span className="font-medium text-gray-900">{formatCurrency(property.avgDailyPrice)}</span>
|
|
// </div>
|
|
// </div>
|
|
|
|
// <button
|
|
// onClick={() => onViewDetails(property)}
|
|
// className="w-full bg-gray-100 text-gray-700 py-2 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors flex items-center justify-center gap-2"
|
|
// >
|
|
// <Eye className="w-4 h-4" />
|
|
// عرض التفاصيل
|
|
// </button>
|
|
// </div>
|
|
// </motion.div>
|
|
// );
|
|
// };
|
|
|
|
// const ProfitDetailsModal = ({ property, isOpen, onClose }) => {
|
|
// if (!isOpen || !property) return null;
|
|
|
|
// const formatCurrency = (amount) => {
|
|
// return amount?.toLocaleString() + ' ل.س';
|
|
// };
|
|
|
|
// const monthlyData = [
|
|
// { month: 'يناير', profit: 1250000 },
|
|
// { month: 'فبراير', profit: 1500000 },
|
|
// { month: 'مارس', profit: 1800000 },
|
|
// { month: 'إبريل', profit: 2100000 },
|
|
// { month: 'مايو', profit: 2500000 },
|
|
// { month: 'يونيو', profit: 2300000 }
|
|
// ];
|
|
|
|
// const maxProfit = Math.max(...monthlyData.map(d => d.profit));
|
|
|
|
// return (
|
|
// <motion.div
|
|
// initial={{ opacity: 0 }}
|
|
// animate={{ opacity: 1 }}
|
|
// exit={{ opacity: 0 }}
|
|
// className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
|
|
// onClick={onClose}
|
|
// >
|
|
// <motion.div
|
|
// initial={{ scale: 0.9, y: 20 }}
|
|
// animate={{ scale: 1, y: 0 }}
|
|
// exit={{ scale: 0.9, y: 20 }}
|
|
// className="bg-white rounded-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto shadow-2xl"
|
|
// onClick={(e) => e.stopPropagation()}
|
|
// >
|
|
// <div className="sticky top-0 bg-gradient-to-r from-amber-500 to-amber-600 p-6 text-white">
|
|
// <div className="flex justify-between items-center">
|
|
// <div>
|
|
// <h2 className="text-xl font-bold">{property.title}</h2>
|
|
// <p className="text-amber-100 text-sm mt-1">{property.location}</p>
|
|
// </div>
|
|
// <button onClick={onClose} className="p-1 hover:bg-white/20 rounded-full">
|
|
// <XCircle className="w-6 h-6" />
|
|
// </button>
|
|
// </div>
|
|
// </div>
|
|
|
|
// <div className="p-6 space-y-6">
|
|
// <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
// <div className="bg-amber-50 p-4 rounded-xl text-center">
|
|
// <div className="text-2xl font-bold text-amber-600">{formatCurrency(property.totalProfit)}</div>
|
|
// <div className="text-xs text-gray-600 mt-1">إجمالي الأرباح</div>
|
|
// </div>
|
|
// <div className="bg-blue-50 p-4 rounded-xl text-center">
|
|
// <div className="text-2xl font-bold text-blue-600">{property.totalBookings}</div>
|
|
// <div className="text-xs text-gray-600 mt-1">عدد الحجوزات</div>
|
|
// </div>
|
|
// <div className="bg-green-50 p-4 rounded-xl text-center">
|
|
// <div className="text-2xl font-bold text-green-600">{property.occupancyRate}%</div>
|
|
// <div className="text-xs text-gray-600 mt-1">نسبة الإشغال</div>
|
|
// </div>
|
|
// <div className="bg-purple-50 p-4 rounded-xl text-center">
|
|
// <div className="text-2xl font-bold text-purple-600">{formatCurrency(property.avgDailyPrice)}</div>
|
|
// <div className="text-xs text-gray-600 mt-1">متوسط السعر اليومي</div>
|
|
// </div>
|
|
// </div>
|
|
|
|
// <div className="bg-gray-50 p-4 rounded-xl">
|
|
// <h3 className="font-bold text-gray-900 mb-4">الأرباح الشهرية</h3>
|
|
// <div className="space-y-3">
|
|
// {monthlyData.map((data, index) => (
|
|
// <div key={index}>
|
|
// <div className="flex justify-between text-sm mb-1">
|
|
// <span className="text-gray-600">{data.month}</span>
|
|
// <span className="font-medium text-gray-900">{formatCurrency(data.profit)}</span>
|
|
// </div>
|
|
// <div className="w-full bg-gray-200 rounded-full h-2">
|
|
// <motion.div
|
|
// initial={{ width: 0 }}
|
|
// animate={{ width: `${(data.profit / maxProfit) * 100}%` }}
|
|
// transition={{ duration: 0.8, delay: index * 0.1 }}
|
|
// className="bg-amber-500 h-2 rounded-full"
|
|
// />
|
|
// </div>
|
|
// </div>
|
|
// ))}
|
|
// </div>
|
|
// </div>
|
|
|
|
// <div className="bg-gray-50 p-4 rounded-xl">
|
|
// <h3 className="font-bold text-gray-900 mb-4">آخر الحجوزات</h3>
|
|
// <div className="space-y-3">
|
|
// {property.recentBookings?.map((booking, index) => (
|
|
// <div key={index} className="bg-white p-3 rounded-lg flex justify-between items-center">
|
|
// <div>
|
|
// <p className="font-medium text-gray-900">{booking.tenantName}</p>
|
|
// <p className="text-xs text-gray-500">{booking.startDate} - {booking.endDate}</p>
|
|
// </div>
|
|
// <div className="text-right">
|
|
// <p className="font-bold text-amber-600">{formatCurrency(booking.amount)}</p>
|
|
// <p className="text-xs text-gray-500">{booking.status === 'completed' ? 'مكتمل' : 'قيد التنفيذ'}</p>
|
|
// </div>
|
|
// </div>
|
|
// ))}
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// </motion.div>
|
|
// </motion.div>
|
|
// );
|
|
// };
|
|
|
|
// export default function OwnerProfitsPage() {
|
|
// const router = useRouter();
|
|
// const [user, setUser] = useState(null);
|
|
// const [properties, setProperties] = useState([]);
|
|
// const [filteredProperties, setFilteredProperties] = useState([]);
|
|
// const [isLoading, setIsLoading] = useState(true);
|
|
// const [selectedProperty, setSelectedProperty] = useState(null);
|
|
// const [dateRange, setDateRange] = useState({ start: '', end: '' });
|
|
// const [selectedPeriod, setSelectedPeriod] = useState('month');
|
|
|
|
// useEffect(() => {
|
|
// const authUser = AuthService.getUser();
|
|
// if (authUser && AuthService.isOwner()) {
|
|
// setUser({
|
|
// name: authUser.name || authUser.email,
|
|
// email: authUser.email,
|
|
// role: 'owner',
|
|
// });
|
|
// loadData();
|
|
// } else {
|
|
// router.push('/auth/choose-role');
|
|
// }
|
|
// }, [router]); // month, year, all
|
|
|
|
|
|
|
|
// const loadProfitsData = () => {
|
|
// const storedProfits = localStorage.getItem('ownerProfits');
|
|
// if (storedProfits) {
|
|
// setProperties(JSON.parse(storedProfits));
|
|
// setFilteredProperties(JSON.parse(storedProfits));
|
|
// } else {
|
|
// const mockProperties = [
|
|
// {
|
|
// id: 1,
|
|
// title: 'فيلا فاخرة في المزة',
|
|
// location: 'دمشق، المزة',
|
|
// status: 'active',
|
|
// totalProfit: 12500000,
|
|
// totalBookings: 24,
|
|
// monthlyProfit: 3200000,
|
|
// weeklyProfit: 850000,
|
|
// avgDailyPrice: 500000,
|
|
// occupancyRate: 78,
|
|
// recentBookings: [
|
|
// { tenantName: 'أحمد محمد', startDate: '2024-03-10', endDate: '2024-03-15', amount: 2500000, status: 'completed' },
|
|
// { tenantName: 'سارة أحمد', startDate: '2024-03-05', endDate: '2024-03-08', amount: 1500000, status: 'completed' }
|
|
// ]
|
|
// },
|
|
// {
|
|
// id: 2,
|
|
// title: 'شقة حديثة في الشهباء',
|
|
// location: 'حلب، الشهباء',
|
|
// status: 'active',
|
|
// totalProfit: 5800000,
|
|
// totalBookings: 18,
|
|
// monthlyProfit: 1500000,
|
|
// weeklyProfit: 400000,
|
|
// avgDailyPrice: 250000,
|
|
// occupancyRate: 65,
|
|
// recentBookings: [
|
|
// { tenantName: 'محمد علي', startDate: '2024-03-12', endDate: '2024-03-14', amount: 750000, status: 'completed' }
|
|
// ]
|
|
// },
|
|
// {
|
|
// id: 3,
|
|
// title: 'بيت عائلي في بابا عمرو',
|
|
// location: 'حمص، بابا عمرو',
|
|
// status: 'active',
|
|
// totalProfit: 8400000,
|
|
// totalBookings: 12,
|
|
// monthlyProfit: 2100000,
|
|
// weeklyProfit: 525000,
|
|
// avgDailyPrice: 350000,
|
|
// occupancyRate: 45,
|
|
// recentBookings: []
|
|
// }
|
|
// ];
|
|
// setProperties(mockProperties);
|
|
// setFilteredProperties(mockProperties);
|
|
// localStorage.setItem('ownerProfits', JSON.stringify(mockProperties));
|
|
// }
|
|
// setIsLoading(false);
|
|
// };
|
|
|
|
// const totalStats = {
|
|
// totalProfit: properties.reduce((sum, p) => sum + p.totalProfit, 0),
|
|
// totalBookings: properties.reduce((sum, p) => sum + p.totalBookings, 0),
|
|
// avgOccupancy: Math.round(properties.reduce((sum, p) => sum + p.occupancyRate, 0) / properties.length),
|
|
// activeProperties: properties.filter(p => p.status === 'active').length
|
|
// };
|
|
|
|
// const formatCurrency = (amount) => {
|
|
// if (amount >= 1000000) {
|
|
// return (amount / 1000000).toFixed(1) + ' مليون ل.س';
|
|
// }
|
|
// return amount?.toLocaleString() + ' ل.س';
|
|
// };
|
|
|
|
// 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} />
|
|
|
|
// <ProfitDetailsModal
|
|
// property={selectedProperty}
|
|
// isOpen={!!selectedProperty}
|
|
// onClose={() => setSelectedProperty(null)}
|
|
// />
|
|
|
|
// <div className="container mx-auto px-4">
|
|
// <motion.div
|
|
// initial={{ opacity: 0, y: -20 }}
|
|
// animate={{ opacity: 1, y: 0 }}
|
|
// className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4"
|
|
// >
|
|
// <div>
|
|
// <h1 className="text-3xl font-bold text-gray-900 mb-2">الأرباح والإحصائيات</h1>
|
|
// <p className="text-gray-600">مرحباً {user?.name}، إليك ملخص أرباحك</p>
|
|
// </div>
|
|
|
|
// <div className="flex gap-3">
|
|
// <select
|
|
// value={selectedPeriod}
|
|
// onChange={(e) => setSelectedPeriod(e.target.value)}
|
|
// className="px-4 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
|
|
// >
|
|
// <option value="month">آخر 30 يوم</option>
|
|
// <option value="year">آخر 12 شهر</option>
|
|
// <option value="all">جميع الفترات</option>
|
|
// </select>
|
|
// {/* <button className="px-4 py-2 bg-green-600 text-white rounded-xl hover:bg-green-700 transition-colors flex items-center gap-2">
|
|
// <Download className="w-5 h-5" />
|
|
// تصدير التقرير
|
|
// </button> */}
|
|
// </div>
|
|
// </motion.div>
|
|
|
|
// <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
// <StatCard
|
|
// title="إجمالي الأرباح"
|
|
// value={formatCurrency(totalStats.totalProfit)}
|
|
// change={12.5}
|
|
// icon={Wallet}
|
|
// color="bg-amber-500"
|
|
// trend="up"
|
|
// />
|
|
// <StatCard
|
|
// title="عدد الحجوزات"
|
|
// value={totalStats.totalBookings}
|
|
// change={8.2}
|
|
// icon={Calendar}
|
|
// color="bg-blue-500"
|
|
// trend="up"
|
|
// />
|
|
// <StatCard
|
|
// title="متوسط نسبة الإشغال"
|
|
// value={`${totalStats.avgOccupancy}%`}
|
|
// change={5.3}
|
|
// icon={PieChart}
|
|
// color="bg-green-500"
|
|
// trend="up"
|
|
// />
|
|
// <StatCard
|
|
// title="العقارات النشطة"
|
|
// value={totalStats.activeProperties}
|
|
// change={0}
|
|
// icon={Building}
|
|
// color="bg-purple-500"
|
|
// trend="up"
|
|
// />
|
|
// </div>
|
|
|
|
// <div className="mb-6">
|
|
// <div className="flex justify-between items-center mb-4">
|
|
// <h2 className="text-xl font-bold text-gray-900">أرباح العقارات</h2>
|
|
// <div className="flex gap-2">
|
|
// <button
|
|
// onClick={() => setFilteredProperties(properties)}
|
|
// className="px-3 py-1.5 bg-gray-100 rounded-lg text-sm hover:bg-gray-200 transition-colors"
|
|
// >
|
|
// عرض الكل
|
|
// </button>
|
|
// </div>
|
|
// </div>
|
|
|
|
// {filteredProperties.length === 0 ? (
|
|
// <div className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300">
|
|
// <div className="w-24 h-24 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
// <DollarSign className="w-12 h-12 text-amber-600" />
|
|
// </div>
|
|
// <h3 className="text-xl font-bold text-gray-900 mb-2">لا توجد بيانات</h3>
|
|
// <p className="text-gray-600">لا توجد أرباح مسجلة حتى الآن</p>
|
|
// </div>
|
|
// ) : (
|
|
// <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
// {filteredProperties.map((property) => (
|
|
// <PropertyProfitCard
|
|
// key={property.id}
|
|
// property={property}
|
|
// onViewDetails={setSelectedProperty}
|
|
// />
|
|
// ))}
|
|
// </div>
|
|
// )}
|
|
// </div>
|
|
|
|
// <motion.div
|
|
// initial={{ opacity: 0 }}
|
|
// animate={{ opacity: 1 }}
|
|
// transition={{ delay: 0.6 }}
|
|
// className="bg-gradient-to-r from-amber-500 to-amber-600 rounded-2xl p-6 text-white mt-8"
|
|
// >
|
|
// <div className="flex items-center justify-between flex-wrap gap-4">
|
|
// <div>
|
|
// <h3 className="text-lg font-bold mb-1">احصل على المزيد من الأرباح</h3>
|
|
// <p className="text-amber-100 text-sm">أضف عقارات جديدة وحسّن أسعارك لزيادة الإشغال</p>
|
|
// </div>
|
|
// <Link
|
|
// href="/owner/properties/add"
|
|
// className="px-6 py-2 bg-white text-amber-600 rounded-xl font-medium hover:bg-amber-50 transition-colors"
|
|
// >
|
|
// إضافة عقار جديد
|
|
// </Link>
|
|
// </div>
|
|
// </motion.div>
|
|
// </div>
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
|
|
|
|
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { useRouter } from 'next/navigation';
|
|
import {
|
|
DollarSign,
|
|
TrendingUp,
|
|
Wallet,
|
|
Star,
|
|
Eye,
|
|
Download,
|
|
CalendarDays
|
|
} from 'lucide-react';
|
|
import toast, { Toaster } from 'react-hot-toast';
|
|
import AuthService from '@/app/services/AuthService';
|
|
|
|
const StatCard = ({ title, value, icon: Icon, color }) => {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all"
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className={`w-12 h-12 ${color} rounded-xl flex items-center justify-center`}>
|
|
<Icon className="w-6 h-6 text-white" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-sm text-gray-500 mb-1">{title}</h3>
|
|
<div className="text-2xl font-bold text-gray-900">{value}</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
const PropertyProfitCard = ({ property, onViewDetails }) => {
|
|
const formatCurrency = (amount) => `$${amount?.toLocaleString()}`;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-all"
|
|
>
|
|
<div className="p-5">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<div>
|
|
<h3 className="font-bold text-lg text-gray-900">{property.title}</h3>
|
|
{property.isNotSeized && (
|
|
<span className="inline-block mt-1 px-2 py-0.5 bg-amber-100 text-amber-800 rounded-full text-xs font-medium">
|
|
غير محجوز
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="text-xs text-gray-500">{property.location}</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-4 mb-4">
|
|
<div className="text-center">
|
|
<div className="text-sm text-gray-500">الإيرادات</div>
|
|
<div className="text-lg font-bold text-amber-600">{formatCurrency(property.revenue)}</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-sm text-gray-500">العمولة</div>
|
|
<div className="text-lg font-bold text-blue-600">{formatCurrency(property.commission)}</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-sm text-gray-500">المتبقي</div>
|
|
<div className="text-lg font-bold text-green-600">{formatCurrency(property.remaining)}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center pt-3 border-t border-gray-100">
|
|
<div className="flex items-center gap-2">
|
|
<Star className="w-4 h-4 text-amber-500" />
|
|
<span className="text-sm font-medium text-gray-700">التقييم العام:</span>
|
|
<span className="text-sm font-medium text-gray-900">{property.valuation}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1 text-sm text-gray-500">
|
|
<CalendarDays className="w-4 h-4" />
|
|
<span>مؤجر {property.rentedCount} مرة</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => onViewDetails(property)}
|
|
className="w-full mt-4 py-2 bg-gray-100 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
عرض التفاصيل
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
const PropertyCalendar = ({ year, month }) => {
|
|
const [currentMonth, setCurrentMonth] = useState(new Date(year, month - 1));
|
|
const monthNames = ['يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'];
|
|
const weekDays = ['إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت', 'أحد'];
|
|
|
|
const getDaysInMonth = (date) => {
|
|
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
|
|
};
|
|
|
|
const getFirstDayOfMonth = (date) => {
|
|
const day = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
|
|
return day === 0 ? 6 : day - 1;
|
|
};
|
|
|
|
const daysInMonth = getDaysInMonth(currentMonth);
|
|
const firstDayIndex = getFirstDayOfMonth(currentMonth);
|
|
|
|
const cells = [];
|
|
for (let i = 0; i < firstDayIndex; i++) {
|
|
cells.push(<div key={`empty-${i}`} className="p-2 md:p-3 text-center" />);
|
|
}
|
|
for (let d = 1; d <= daysInMonth; d++) {
|
|
cells.push(
|
|
<div
|
|
key={d}
|
|
className="p-2 md:p-3 text-center rounded-xl hover:bg-gray-100 transition-colors"
|
|
>
|
|
{d}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
|
|
<CalendarDays className="w-5 h-5 text-amber-500" />
|
|
{monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
|
|
</h3>
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1))}
|
|
className="p-2 hover:bg-gray-100 rounded-lg"
|
|
>
|
|
←
|
|
</button>
|
|
<button
|
|
onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1))}
|
|
className="p-2 hover:bg-gray-100 rounded-lg"
|
|
>
|
|
→
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-7 gap-1 mb-3 text-center text-sm font-medium text-gray-500">
|
|
{weekDays.map(day => (
|
|
<div key={day}>{day}</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-7 gap-1">
|
|
{cells}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default function OwnerProfitsPage() {
|
|
const router = useRouter();
|
|
const [user, setUser] = useState(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
const [summary] = useState({
|
|
totalRevenue: 4290,
|
|
totalCommission: 644,
|
|
remainingBalance: 3647,
|
|
});
|
|
|
|
const [properties] = useState([
|
|
{
|
|
id: 1,
|
|
title: 'Damascus Olive Residence',
|
|
location: 'دمشق، المزة',
|
|
isNotSeized: true,
|
|
revenue: 3240,
|
|
commission: 486,
|
|
remaining: 2754,
|
|
valuation: 'جيد جدا',
|
|
rentedCount: 18,
|
|
},
|
|
]);
|
|
|
|
useEffect(() => {
|
|
if (AuthService.isGuest()) {
|
|
router.push('/auth/choose-role');
|
|
return;
|
|
}
|
|
if (!AuthService.isOwner()) {
|
|
router.push('/');
|
|
return;
|
|
}
|
|
|
|
const authUser = AuthService.getUser();
|
|
if (authUser) {
|
|
setUser({
|
|
name: authUser.name || authUser.email,
|
|
email: authUser.email,
|
|
});
|
|
}
|
|
setIsLoading(false);
|
|
}, [router]);
|
|
|
|
const formatCurrency = (amount) => `$${amount?.toLocaleString()}`;
|
|
|
|
const handleViewDetails = (property) => {
|
|
toast.info(`عرض تفاصيل ${property.title}`);
|
|
};
|
|
|
|
const handleExportReport = () => {
|
|
toast.success('جاري تصدير التقرير...');
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="w-16 h-16 border-4 border-amber-500 border-t-transparent rounded-full 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-6xl">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">دفتر الحسابات</h1>
|
|
<p className="text-gray-600">نظرة عامة على أرباح المالك</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
|
|
<StatCard
|
|
title="الإيرادات"
|
|
value={formatCurrency(summary.totalRevenue)}
|
|
icon={DollarSign}
|
|
color="bg-green-500"
|
|
/>
|
|
<StatCard
|
|
title="العمولة"
|
|
value={formatCurrency(summary.totalCommission)}
|
|
icon={TrendingUp}
|
|
color="bg-blue-500"
|
|
/>
|
|
<StatCard
|
|
title="المتبقي"
|
|
value={formatCurrency(summary.remainingBalance)}
|
|
icon={Wallet}
|
|
color="bg-amber-500"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-12">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4">عقاراتي</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{properties.map((property) => (
|
|
<PropertyProfitCard
|
|
key={property.id}
|
|
property={property}
|
|
onViewDetails={handleViewDetails}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-12">
|
|
<h2 className="text-xl font-bold text-gray-900 mb-4">تقويم العقار</h2>
|
|
<PropertyCalendar year={2026} month={3} />
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<button
|
|
onClick={handleExportReport}
|
|
className="px-6 py-3 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 transition-colors flex items-center justify-center gap-2"
|
|
>
|
|
<Download className="w-5 h-5" />
|
|
تصدير التقرير
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |