From 1e167c447ae85fa42bf0079246a160c3ad707331 Mon Sep 17 00:00:00 2001
From: Rahaf <User@DESKTOP-JSF2AL8>
Date: Wed, 22 Apr 2026 10:52:08 +0300
Subject: [PATCH] Edit profits for owner

---
 app/owner/profits/page.js | 1008 +++++++++++++++----------------------
 1 file changed, 419 insertions(+), 589 deletions(-)

diff --git a/app/owner/profits/page.js b/app/owner/profits/page.js
index e03d79a..1f92d86 100644
--- a/app/owner/profits/page.js
+++ b/app/owner/profits/page.js
@@ -3,59 +3,38 @@
 // 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,
+// import { 
+//   DollarSign, 
+//   TrendingUp, 
 //   Wallet,
-//   CreditCard,
-//   Clock,
-//   CheckCircle,
-//   XCircle
+//   Star,
+//   Eye,
+//   Download,
+//   CalendarDays
 // } from 'lucide-react';
 // import toast, { Toaster } from 'react-hot-toast';
-// import AuthService from '../../services/AuthService';
+// import AuthService from '@/app/services/AuthService';
 
-// const StatCard = ({ title, value, change, icon: Icon, color, trend }) => {
+// 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 justify-between items-start mb-4">
+//       <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 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>
+//       <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) => {
-//     return amount?.toLocaleString() + ' ل.س';
-//   };
+//   const formatCurrency = (amount) => `$${amount?.toLocaleString()}`;
 
 //   return (
 //     <motion.div
@@ -66,47 +45,46 @@
 //       <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>
+//             <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={`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>
+//           <span className="text-xs text-gray-500">{property.location}</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 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="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 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="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 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 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 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 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"
+//           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" />
 //           عرض التفاصيل
@@ -116,221 +94,135 @@
 //   );
 // };
 
-// const ProfitDetailsModal = ({ property, isOpen, onClose }) => {
-//   if (!isOpen || !property) return null;
+// const PropertyCalendar = ({ year, month }) => {
+//   const [currentMonth, setCurrentMonth] = useState(new Date(year, month - 1));
+//   const monthNames = ['يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'];
+//   const weekDays = ['إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت', 'أحد'];
 
-//   const formatCurrency = (amount) => {
-//     return amount?.toLocaleString() + ' ل.س';
+//   const getDaysInMonth = (date) => {
+//     return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
 //   };
 
-//   const monthlyData = [
-//     { month: 'يناير', profit: 1250000 },
-//     { month: 'فبراير', profit: 1500000 },
-//     { month: 'مارس', profit: 1800000 },
-//     { month: 'إبريل', profit: 2100000 },
-//     { month: 'مايو', profit: 2500000 },
-//     { month: 'يونيو', profit: 2300000 }
-//   ];
+//   const getFirstDayOfMonth = (date) => {
+//     const day = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+//     return day === 0 ? 6 : day - 1;
+//   };
 
-//   const maxProfit = Math.max(...monthlyData.map(d => d.profit));
+//   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 (
-//     <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 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"
+//           >
+//             &larr;
+//           </button>
+//           <button
+//             onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1))}
+//             className="p-2 hover:bg-gray-100 rounded-lg"
+//           >
+//             &rarr;
+//           </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="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="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>
+//       <div className="grid grid-cols-7 gap-1">
+//         {cells}
+//       </div>
+//     </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 [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 && AuthService.isOwner()) {
+//     if (authUser) {
 //       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);
+//   }, [router]);
+
+//   const formatCurrency = (amount) => `$${amount?.toLocaleString()}`;
+
+//   const handleViewDetails = (property) => {
+//     toast.info(`عرض تفاصيل ${property.title}`);
 //   };
 
-//   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() + ' ل.س';
+//   const handleExportReport = () => {
+//     toast.success('جاري تصدير التقرير...');
 //   };
 
 //   if (isLoading) {
 //     return (
-//       <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+//       <div className="min-h-screen 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 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>
 //     );
@@ -339,324 +231,129 @@
 //   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 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="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">
+//         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
 //           <StatCard
-//             title="إجمالي الأرباح"
-//             value={formatCurrency(totalStats.totalProfit)}
-//             change={12.5}
+//             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"
-//             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 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>
-
-//           {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 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>
 //   );
 // }
 
-
-
 '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 { Download, Loader2 } from 'lucide-react';
 import toast, { Toaster } from 'react-hot-toast';
+import * as XLSX from 'xlsx';
 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"
-          >
-            &larr;
-          </button>
-          <button
-            onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1))}
-            className="p-2 hover:bg-gray-100 rounded-lg"
-          >
-            &rarr;
-          </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 [tableData, setTableData] = useState([]);
 
-  const [summary] = useState({
-    totalRevenue: 4290,
-    totalCommission: 644,
-    remainingBalance: 3647,
-  });
-
-  const [properties] = useState([
+  const sampleData = [
     {
       id: 1,
-      title: 'Damascus Olive Residence',
-      location: 'دمشق، المزة',
-      isNotSeized: true,
-      revenue: 3240,
-      commission: 486,
-      remaining: 2754,
-      valuation: 'جيد جدا',
-      rentedCount: 18,
+      property: 'A000000001',
+      bookingNumber: 'XX-101',
+      fromDate: '2025-05-01',
+      toDate: '2025-05-07',
+      amountReceived: 500,
+      platformCommission: 0,
+      transferredToOwner: 0,
+      transferReceipt: '—',
     },
-  ]);
+    {
+      id: 2,
+      property: 'A000000002',
+      bookingNumber: 'XX-202',
+      fromDate: '2025-05-10',
+      toDate: '2025-05-15',
+      amountReceived: 300,
+      platformCommission: 0,
+      transferredToOwner: 0,
+      transferReceipt: '—',
+    },
+    {
+      id: 3,
+      property: 'A000000003',
+      bookingNumber: 'XX-309',
+      fromDate: '2025-06-01',
+      toDate: '2025-06-05',
+      amountReceived: 800,
+      platformCommission: 150,
+      transferredToOwner: 0,
+      transferReceipt: 'قيد الانتظار',
+    },
+  ];
+
+
+  const computeRows = (data) => {
+    return data.map((item) => {
+      const platformProfit = item.amountReceived * 0.05;
+      const ownerDue = item.amountReceived - platformProfit;
+      return {
+        ...item,
+        platformProfit,
+        ownerDue,
+      };
+    });
+  };
 
   useEffect(() => {
     if (AuthService.isGuest()) {
@@ -675,87 +372,220 @@ export default function OwnerProfitsPage() {
         email: authUser.email,
       });
     }
+
+    const stored = localStorage.getItem('ownerProfitsTable');
+    if (stored) {
+      setTableData(computeRows(JSON.parse(stored)));
+    } else {
+      setTableData(computeRows(sampleData));
+      localStorage.setItem('ownerProfitsTable', JSON.stringify(sampleData));
+    }
     setIsLoading(false);
   }, [router]);
 
-  const formatCurrency = (amount) => `$${amount?.toLocaleString()}`;
-
-  const handleViewDetails = (property) => {
-    toast.info(`عرض تفاصيل ${property.title}`);
-  };
+  const totals = tableData.reduce(
+    (acc, row) => {
+      acc.totalAmountReceived += row.amountReceived;
+      acc.totalCommission += row.platformCommission;
+      acc.totalPlatformProfit += row.platformProfit;
+      acc.totalOwnerDue += row.ownerDue;
+      acc.totalTransferred += row.transferredToOwner;
+      return acc;
+    },
+    {
+      totalAmountReceived: 0,
+      totalCommission: 0,
+      totalPlatformProfit: 0,
+      totalOwnerDue: 0,
+      totalTransferred: 0,
+    }
+  );
 
   const handleExportReport = () => {
-    toast.success('جاري تصدير التقرير...');
+    try {
+      const exportData = tableData.map((row) => ({
+        'العقار': row.property,
+        'رقم الحجز': row.bookingNumber,
+        'من تاريخ': row.fromDate,
+        'حتى تاريخ': row.toDate,
+        'العروض المستلم': row.amountReceived,
+        'عمولة المنصة': row.platformCommission,
+        'ربح المنصة (5%)': row.platformProfit,
+        'المستحق للمالك': row.ownerDue,
+        'تم التحويل للمالك': row.transferredToOwner,
+        'رقم وصل التحويل': row.transferReceipt,
+      }));
+
+      exportData.push({
+        'العقار': 'الإجمالي العام',
+        'رقم الحجز': '',
+        'من تاريخ': '',
+        'حتى تاريخ': '',
+        'العروض المستلم': totals.totalAmountReceived,
+        'عمولة المنصة': totals.totalCommission,
+        'ربح المنصة (5%)': totals.totalPlatformProfit,
+        'المستحق للمالك': totals.totalOwnerDue,
+        'تم التحويل للمالك': totals.totalTransferred,
+        'رقم وصل التحويل': '—',
+      });
+
+      const worksheet = XLSX.utils.json_to_sheet(exportData);
+      const colWidths = [
+        { wch: 15 }, 
+        { wch: 12 }, 
+        { wch: 12 }, 
+        { wch: 12 }, 
+        { wch: 14 },
+        { wch: 14 }, 
+        { wch: 16 }, 
+        { wch: 16 }, 
+        { wch: 16 },
+        { wch: 18 }, 
+      ];
+      worksheet['!cols'] = colWidths;
+
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'أرباح المالك');
+      
+      XLSX.writeFile(workbook, `تقرير_الأرباح_${new Date().toISOString().slice(0,19).replace(/:/g, '-')}.xlsx`);
+      
+      toast.success('تم تصدير التقرير بنجاح!');
+    } catch (error) {
+      console.error('خطأ في التصدير:', error);
+      toast.error('حدث خطأ أثناء تصدير التقرير');
+    }
   };
 
   if (isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center">
+      <div className="min-h-screen bg-gray-50 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>
+          <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">
+    <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
       <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 className="container mx-auto px-4 max-w-7xl">
+        <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>
-
-        <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"
+            className="px-5 py-2.5 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 transition-colors flex items-center gap-2 shadow-sm"
           >
             <Download className="w-5 h-5" />
             تصدير التقرير
           </button>
-        </div> */}
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden"
+        >
+          <div className="overflow-x-auto">
+            <table className="min-w-full divide-y divide-gray-200 text-sm">
+              <thead className="bg-gray-800 text-gray-100">
+                <tr>
+                  <th className="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider">العقار</th>
+                  <th className="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider">رقم الحجز</th>
+                  <th className="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider">من تاريخ</th>
+                  <th className="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider">حتى تاريخ</th>
+                  <th className="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider">العروض المستلم</th>
+                  <th className="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider">عمولة المنصة</th>
+                  <th className="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider bg-amber-50 text-amber-800">
+                    ربح المنصة <span className="font-normal text-[11px] block">(5% من العربون)</span>
+                  </th>
+                  <th className="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider">المستحق للمالك</th>
+                  <th className="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider">تم التحويل للمالك</th>
+                  <th className="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider">رقم وصل التحويل</th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-100">
+                {tableData.map((row, idx) => (
+                  <tr
+                    key={row.id}
+                    className={`hover:bg-amber-50/40 transition-colors ${
+                      idx % 2 === 0 ? 'bg-white' : 'bg-gray-50'
+                    }`}
+                  >
+                    <td className="px-4 py-3 whitespace-nowrap text-center font-medium text-gray-800">
+                      {row.property}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-center text-gray-700">
+                      {row.bookingNumber}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-center text-gray-700">
+                      {row.fromDate}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-center text-gray-700">
+                      {row.toDate}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-center font-mono font-semibold text-gray-800">
+                      {row.amountReceived}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-center font-mono text-gray-700">
+                      {row.platformCommission}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-center font-mono font-bold text-amber-700 bg-amber-50/50">
+                      {row.platformProfit}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-center font-mono font-semibold text-emerald-700">
+                      {row.ownerDue}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-center font-mono text-gray-700">
+                      {row.transferredToOwner}
+                    </td>
+                    <td className="px-4 py-3 whitespace-nowrap text-center text-gray-500 text-xs">
+                      {row.transferReceipt}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+              <tfoot className="bg-gray-100 border-t-2 border-gray-300">
+                <tr>
+                  <td colSpan="4" className="px-4 py-4 text-right font-bold text-gray-800">
+                    الإجمالي العام
+                  </td>
+                  <td className="px-4 py-4 text-center font-bold font-mono text-gray-800">
+                    {totals.totalAmountReceived}
+                  </td>
+                  <td className="px-4 py-4 text-center font-bold font-mono text-gray-800">
+                    {totals.totalCommission}
+                  </td>
+                  <td className="px-4 py-4 text-center font-bold font-mono text-amber-700 bg-amber-100/60">
+                    {totals.totalPlatformProfit}
+                  </td>
+                  <td className="px-4 py-4 text-center font-bold font-mono text-emerald-700">
+                    {totals.totalOwnerDue}
+                  </td>
+                  <td className="px-4 py-4 text-center font-bold font-mono text-gray-800">
+                    {totals.totalTransferred}
+                  </td>
+                  <td className="px-4 py-4 text-center text-gray-500">—</td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+
+          <div className="bg-gray-50 px-6 py-3 text-xs text-gray-500 border-t border-gray-200">
+            <span className="inline-flex items-center gap-1"></span> ملاحظة: 
+            <strong> ربح المنصة </strong> يُحتسب تلقائياً بنسبة <strong className="text-amber-600">5%</strong> من قيمة «العروض المستلم». 
+          </div>
+        </motion.div>
       </div>
     </div>
   );