+ {/* رأس التقويم */}
+
+ );
+};
+
+const BookingCard = ({ booking, onViewDetails, onContact }) => {
+ const formatCurrency = (amount) => {
+ return amount?.toLocaleString() + ' ل.س';
+ };
+
+ const getStatusBadge = (status) => {
+ const statusConfig = {
+ pending: { label: 'قيد الانتظار', color: 'bg-yellow-100 text-yellow-800', icon: Clock },
+ confirmed: { label: 'مؤكد', color: 'bg-green-100 text-green-800', icon: CheckCircle },
+ cancelled: { label: 'ملغي', color: 'bg-red-100 text-red-800', icon: XCircle },
+ completed: { label: 'منتهي', color: 'bg-gray-100 text-gray-800', icon: CheckCircle }
+ };
+
+ const config = statusConfig[status] || statusConfig.pending;
+ const Icon = config.icon;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {/* أيام الأسبوع */}
+
+
+
+
+
+
+
+ أحد
+ إثنين
+ ثلاثاء
+ أربعاء
+ خميس
+ جمعة
+ سبت
+
+ {renderDays()}
+
+
+
+
+
+
+ محجوز
+
+
+
+ محدد
+
+
+
+ ضمن الفترة
+
+
+
+ اليوم
+
+
+
+
+
+
+
+
+
+
+ {booking.propertyTitle}
+ {getStatusBadge(booking.status)} +
+
+
+
+ {formatCurrency(booking.totalAmount)}
+ إجمالي المبلغ
+
+
+
+
+
+
+
+
+
+ {booking.tenantName}
+
+
+
+
+
+
+
+ من
+ {booking.startDate}
+
+
+ إلى
+ {booking.endDate}
+
+
+ المدة
+ {booking.days} يوم
+
+
+ {/* */}
+
+
+
+
+
+
+ تفاصيل الحجز
+ +رقم الحجز: #{booking.id}
+
+
+
+
+
+ معلومات العقار
+
+
+ العقار: {booking.propertyTitle}
+الموقع: {booking.location}
+ {booking.propertyDetails && ( +
+ {booking.propertyDetails.bedrooms} غرف
+ {booking.propertyDetails.bathrooms} حمامات
+ {booking.propertyDetails.area} م²
+
+ )}
+
+
+
+ معلومات المستأجر
+
+
+ الاسم: {booking.tenantName}
+البريد الإلكتروني: {booking.tenantEmail}
+رقم الهاتف: {booking.tenantPhone}
+
+
+
+ تفاصيل الحجز
+
+
+
+
+ تاريخ البداية
+{booking.startDate}
+
+
+ تاريخ النهاية
+{booking.endDate}
+
+
+ عدد الأيام
+{booking.days} يوم
+
+
+ حالة الحجز
+{booking.status === 'pending' ? 'قيد الانتظار' : + booking.status === 'confirmed' ? 'مؤكد' : + booking.status === 'cancelled' ? 'ملغي' : 'منتهي'}
+
+
+
+ {booking.notes && (
+ المعلومات المالية
+
+
+
+ السعر اليومي
+ {formatCurrency(booking.dailyPrice)}
+
+
+ المدة ({booking.days} أيام)
+ {formatCurrency(booking.dailyPrice * booking.days)}
+
+
+ سلفة الضمان
+ {formatCurrency(booking.securityDeposit || 0)}
+
+
+ الإجمالي
+ {formatCurrency(booking.totalAmount)}
+
+
+
+ )}
+ ملاحظات
+{booking.notes}
+
+
+ );
+ }
+
+ return (
+
+
+ جاري تحميل الحجوزات...
+
+ setSelectedBooking(null)}
+ />
+
+
+ );
+}
\ No newline at end of file
diff --git a/app/owner/calendar/page.js b/app/owner/calendar/page.js
new file mode 100644
index 0000000..29cf948
--- /dev/null
+++ b/app/owner/calendar/page.js
@@ -0,0 +1,736 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import {
+ Calendar,
+ ChevronLeft,
+ ChevronRight,
+ Home,
+ Building,
+ MapPin,
+ Bed,
+ Bath,
+ Square,
+ DollarSign,
+ Eye,
+ ArrowLeft,
+ Loader2,
+ Filter,
+ Download,
+ Printer,
+ ChevronDown,
+ X,
+ CheckCircle,
+ XCircle,
+ Clock,
+ Users,
+ TrendingUp,
+ CalendarDays,
+ LayoutGrid,
+ List,
+ AlertCircle,
+ XCircle as XCircleIcon,
+ Calendar as CalendarIcon
+} from 'lucide-react';
+import toast, { Toaster } from 'react-hot-toast';
+
+const MonthlyCalendar = ({ properties, selectedPropertyId, onDateClick, onPropertySelect }) => {
+ const [currentMonth, setCurrentMonth] = useState(new Date());
+ const [selectedDate, setSelectedDate] = useState(null);
+ const [viewType, setViewType] = useState('grid');
+
+ const monthNames = [
+ 'يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو',
+ 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+ ];
+
+ const daysInMonth = new Date(
+ currentMonth.getFullYear(),
+ currentMonth.getMonth() + 1,
+ 0
+ ).getDate();
+
+ const firstDayOfMonth = new Date(
+ currentMonth.getFullYear(),
+ currentMonth.getMonth(),
+ 1
+ ).getDay();
+
+ const isDateBookedForProperty = (date, property) => {
+ if (!property?.bookings) return false;
+ const dateStr = date.toISOString().split('T')[0];
+ return property.bookings.some(booking => {
+ const start = new Date(booking.startDate);
+ const end = new Date(booking.endDate);
+ const current = new Date(date);
+ return current >= start && current <= end;
+ });
+ };
+
+ const getDayStatus = (date) => {
+ if (selectedPropertyId === 'all') {
+ const totalProperties = properties.length;
+ const bookedCount = properties.filter(p => isDateBookedForProperty(date, p)).length;
+
+ if (bookedCount === 0) return { status: 'all_available', label: 'جميع العقارات متاحة', color: 'bg-green-100 text-green-800' };
+ if (bookedCount === totalProperties) return { status: 'all_booked', label: 'جميع العقارات محجوزة', color: 'bg-red-100 text-red-800' };
+ return { status: 'partial', label: `${bookedCount}/${totalProperties} محجوز`, color: 'bg-yellow-100 text-yellow-800' };
+ } else {
+ const property = properties.find(p => p.id === selectedPropertyId);
+ if (!property) return { status: 'no_property', label: 'غير متاح', color: 'bg-gray-100 text-gray-500' };
+
+ const isBooked = isDateBookedForProperty(date, property);
+ return {
+ status: isBooked ? 'booked' : 'available',
+ label: isBooked ? 'محجوز' : 'متاح',
+ color: isBooked ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'
+ };
+ }
+ };
+
+ const handleDateClick = (date) => {
+ setSelectedDate(date);
+ onDateClick?.(date);
+ };
+
+ const changeMonth = (direction) => {
+ setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + direction, 1));
+ };
+
+ const renderDays = () => {
+ const days = [];
+ const totalDays = daysInMonth + firstDayOfMonth;
+
+ for (let i = 0; i < totalDays; i++) {
+ if (i < firstDayOfMonth) {
+ days.push();
+ } else {
+ const dayNumber = i - firstDayOfMonth + 1;
+ const date = new Date(
+ currentMonth.getFullYear(),
+ currentMonth.getMonth(),
+ dayNumber
+ );
+
+ const isToday = date.toDateString() === new Date().toDateString();
+ const status = getDayStatus(date);
+ const isSelected = selectedDate?.toDateString() === date.toDateString();
+
+ days.push(
+
+ );
+ }
+ }
+ return days;
+ };
+
+ return (
+
+
+
+
+
+ console.log('Date selected:', date)}
+ />
+
+ )}
+
+ {filteredBookings.length === 0 ? (
+
+
+ ) : (
+
+
+
+
+ حجوزاتي
+مرحباً {user?.name}، لديك {bookings.length} حجز
+
+
+ {/* */}
+
+
+ setFilterStatus('all')}
+ >
+
+ setFilterStatus('pending')}
+ >
+
+ setFilterStatus('confirmed')}
+ >
+
+ setFilterStatus('completed')}
+ >
+
+ setFilterStatus('cancelled')}
+ >
+
+
+
+ {statusCounts.all}
+ جميع الحجوزات
+ {statusCounts.pending}
+ قيد الانتظار
+ {statusCounts.confirmed}
+ مؤكدة
+ {statusCounts.completed}
+ منتهية
+ {statusCounts.cancelled}
+ ملغية
+
+
+
+ {showCalendar && (
+
+
+
+ setDateRange({...dateRange, start: e.target.value})}
+ className="px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
+ placeholder="من تاريخ"
+ />
+ setDateRange({...dateRange, end: e.target.value})}
+ className="px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
+ placeholder="إلى تاريخ"
+ />
+ {(dateRange.start || dateRange.end) && (
+
+ )}
+
+
+
+ لا توجد حجوزات
++ {filterStatus !== 'all' ? 'لا توجد حجوزات في هذه الفئة' : 'لم يتم استلام أي حجوزات بعد'} +
+ {filterStatus !== 'all' && ( + + )} +
+ {filteredBookings.map((booking) => (
+
+ )}
+
+
+ );
+};
+
+const PropertyCalendarList = ({ properties, selectedDate, onPropertyClick }) => {
+ const formatCurrency = (amount) => {
+ return amount?.toLocaleString() + ' ل.س';
+ };
+
+ const isDateBooked = (property, date) => {
+ if (!property?.bookings || !date) return false;
+ const dateStr = date.toISOString().split('T')[0];
+ return property.bookings.some(booking => {
+ const start = new Date(booking.startDate);
+ const end = new Date(booking.endDate);
+ const current = new Date(date);
+ return current >= start && current <= end;
+ });
+ };
+
+ const getBookingForDate = (property, date) => {
+ if (!property?.bookings || !date) return null;
+ const dateStr = date.toISOString().split('T')[0];
+ return property.bookings.find(booking => {
+ const start = new Date(booking.startDate);
+ const end = new Date(booking.endDate);
+ const current = new Date(date);
+ return current >= start && current <= end;
+ });
+ };
+
+ if (!selectedDate) {
+ return (
+
+
+
+
+
+
+
+
+
+ + {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()} +
+ +
+
+
+
+
+
+
+
+ {['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت'].map((day, index) => (
+
+
+
+ {day}
+
+ ))}
+
+
+
+
+ {renderDays()}
+
+
+
+
+
+
+
+ متاح
+
+
+
+ محجوز
+
+
+
+ محجوز جزئياً
+
+
+
+ اليوم
+
+
+
+ محدد
+
+
+
+ );
+ }
+
+ const formattedDate = selectedDate.toLocaleDateString('ar-SA', {
+ weekday: 'long',
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ });
+
+ return (
+ اختر تاريخاً
+اضغط على أي يوم في التقويم لعرض حالة العقارات في ذلك التاريخ
+
+
+ );
+};
+
+const PropertyDetailsModal = ({ property, isOpen, onClose }) => {
+ if (!isOpen || !property) return null;
+
+ const formatCurrency = (amount) => {
+ return amount?.toLocaleString() + ' ل.س';
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ {properties.map((property) => {
+ const isBooked = isDateBooked(property, selectedDate);
+ const booking = getBookingForDate(property, selectedDate);
+
+ return (
+ onPropertyClick(property)}
+ >
+
+ );
+ })}
+
+
+
+
+
+
+
+
+ {property.title}
+ + {isBooked ? 'محجوز' : 'متاح'} + +
+
+
+
+
+
+
+
+
+
+
+
+ {formatCurrency(property.price)}
+ /يوم
+ {isBooked && booking && (
+
+
+ )}
+ مستأجر: {booking.tenantName || 'غير معروف'}
+ من: {booking.startDate} إلى {booking.endDate}
+
+
+
+
+
+
+
+
+ {property.title}
+{property.location}
+
+ {property.images && property.images.length > 0 && (
+
+
+
+
+ )}
+
+ صور العقار
+
+ {property.images.slice(0, 4).map((image, index) => (
+
+
+ 
+
+ ))}
+
+
+
+ {property.features && property.features.length > 0 && (
+
+
+ {property.bedrooms}
+ غرف نوم
+
+
+ {property.bathrooms}
+ حمامات
+
+
+ {property.area}
+ م²
+
+
+ {formatCurrency(property.price)}
+ /يوم
+
+
+ )}
+
+ {property.bookings && property.bookings.length > 0 && (
+ المميزات
+
+ {property.features.map((feature, index) => (
+
+ {feature}
+
+ ))}
+
+
+
+
+
+ )}
+
+
+
+ {property.bookings.slice(0, 3).map((booking, index) => (
+
+
+
+ ))}
+
+
+ {formatCurrency(booking.totalAmount)}
+ {booking.startDate} - {booking.endDate}
+مستأجر: {booking.tenantName || 'غير معروف'}
+
+
+ تعديل العقار
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ جاري تحميل التقويم...
+
+ setSelectedProperty(null)}
+ />
+
+
+ );
+}
\ No newline at end of file
diff --git a/app/owner/profits/page.js b/app/owner/profits/page.js
new file mode 100644
index 0000000..779222c
--- /dev/null
+++ b/app/owner/profits/page.js
@@ -0,0 +1,466 @@
+'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';
+
+const StatCard = ({ title, value, change, icon: Icon, color, trend }) => {
+ return (
+
+
+
+
+
+ {showFilters && (
+
+
+ )}
+
+
+
+
+ )}
+
+
+
+
+ تقويم العقارات
+مرحباً {user?.name}، تتبع حالة عقاراتك عبر التقويم
+
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {calendarStats.totalProperties}
+ إجمالي العقارات
+ {calendarStats.availableToday}
+ متاح اليوم
+ {calendarStats.bookedToday}
+ محجوز اليوم
+ {calendarStats.upcomingBookings}
+ حجوزات قادمة
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {selectedDate && (
+
+
+
+
+
+ {trend === 'up' ?
+ {title}
+{value}
+
+
+
+
+
+
+
+
+ {property.status === 'active' ? 'نشط' : 'غير نشط'}
+
+ {property.title}
+{property.location}
+
+
+
+
+
+ إجمالي الأرباح
+ {formatCurrency(property.totalProfit)}
+
+
+ عدد الحجوزات
+ {property.totalBookings}
+
+
+
+
+
+ هذا الشهر
+ {formatCurrency(property.monthlyProfit)}
+
+
+ الأسبوع الماضي
+ {formatCurrency(property.weeklyProfit)}
+
+
+ متوسط السعر اليومي
+ {formatCurrency(property.avgDailyPrice)}
+
+
+
+
+
+
+
+
+
+ {property.title}
+{property.location}
+
+
+
+
+
+
+
+ {formatCurrency(property.totalProfit)}
+ إجمالي الأرباح
+
+
+ {property.totalBookings}
+ عدد الحجوزات
+
+
+ {property.occupancyRate}%
+ نسبة الإشغال
+
+
+ {formatCurrency(property.avgDailyPrice)}
+ متوسط السعر اليومي
+
+
+
+ الأرباح الشهرية
+
+ {monthlyData.map((data, index) => (
+
+
+
+ ))}
+
+ {data.month}
+ {formatCurrency(data.profit)}
+
+
+
+
+
+ آخر الحجوزات
+
+ {property.recentBookings?.map((booking, index) => (
+
+
+
+ ))}
+
+
+ {booking.tenantName}
+{booking.startDate} - {booking.endDate}
+
+
+ {formatCurrency(booking.amount)}
+{booking.status === 'completed' ? 'مكتمل' : 'قيد التنفيذ'}
+
+
+ );
+ }
+
+ return (
+
+
+ جاري تحميل بيانات الأرباح...
+
+ setSelectedProperty(null)}
+ />
+
+
+ );
+}
diff --git a/app/page.js b/app/page.js
index 6bde01b..c8e5e45 100644
--- a/app/page.js
+++ b/app/page.js
@@ -379,13 +379,13 @@ export default function HomePage() {
+
+
+
+
+
+
+
+
+
+ الأرباح والإحصائيات
+مرحباً {user?.name}، إليك ملخص أرباحك
+
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+
+ {filteredProperties.length === 0 ? (
+ أرباح العقارات
+
+
+
+
+
+ ) : (
+
+
+ لا توجد بيانات
+لا توجد أرباح مسجلة حتى الآن
+
+ {filteredProperties.map((property) => (
+
+ )}
+
+
+
+
+
+ إضافة عقار جديد
+
+ احصل على المزيد من الأرباح
+أضف عقارات جديدة وحسّن أسعارك لزيادة الإشغال
+يمكنك إدارة عقاراتك من خلال لوحة التحكم الخاصة بك
- {/*