From 8d7efe82a4ac8d89b7f92f5de8bfe29cb358829e Mon Sep 17 00:00:00 2001
From: Rahaf <User@DESKTOP-JSF2AL8>
Date: Wed, 1 Apr 2026 01:34:51 +0300
Subject: [PATCH] Edit profits for owner

---
 app/owner/profits/page.js | 1021 ++++++++++++++++++++++++-------------
 1 file changed, 662 insertions(+), 359 deletions(-)

diff --git a/app/owner/profits/page.js b/app/owner/profits/page.js
index 22e0815..a341528 100644
--- a/app/owner/profits/page.js
+++ b/app/owner/profits/page.js
@@ -1,52 +1,512 @@
+// '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 Link from 'next/link';
-import {
-  DollarSign,
-  TrendingUp,
-  TrendingDown,
-  Calendar,
-  Home,
-  Building,
-  Download,
-  Filter,
-  ChevronLeft,
-  ChevronRight,
-  ArrowLeft,
-  Loader2,
-  Eye,
-  PieChart,
-  BarChart,
-  LineChart,
+import { 
+  DollarSign, 
+  TrendingUp, 
+  TrendingDown, 
   Wallet,
-  CreditCard,
-  Clock,
-  CheckCircle,
-  XCircle
+  Home,
+  Calendar,
+  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, change, 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="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>
+        {change !== undefined && (
+          <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>
   );
@@ -54,7 +514,7 @@ const StatCard = ({ title, value, change, icon: Icon, color, trend }) => {
 
 const PropertyProfitCard = ({ property, onViewDetails }) => {
   const formatCurrency = (amount) => {
-    return amount?.toLocaleString() + ' ل.س';
+    return `$${amount?.toLocaleString()}`;
   };
 
   return (
@@ -66,47 +526,46 @@ const PropertyProfitCard = ({ property, onViewDetails }) => {
       <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">
+            <Calendar 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 +575,134 @@ const PropertyProfitCard = ({ property, onViewDetails }) => {
   );
 };
 
-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); // 0 = الإثنين
+
+  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 authUser = AuthService.getUser();
-    if (authUser && AuthService.isOwner()) {
-      setUser({
-        name: authUser.name || authUser.email,
-        email: authUser.email,
-        role: 'owner',
-      });
-      loadData();
+  const [summary] = useState({
+    totalRevenue: 4290,
+    totalCommission: 644,
+    remainingBalance: 3647,
+  });
+
+  const [properties] = useState([
+    {
+      id: 1,
+      title: 'Damascus Olive Residence',
+      location: 'دمشق، كفرسوسة',
+      isNotSeized: true,
+      revenue: 8888,
+      commission: 444,
+      remaining: 4454,
+      valuation: 'جيد ',
+      rentedCount: 19,
+    },
+  ]);
+
+  useEffect(() => {
+    const storedUser = localStorage.getItem('user');
+    if (storedUser) {
+      const userData = JSON.parse(storedUser);
+      if (userData.role !== 'owner') {
+        router.push('/');
+      } else {
+        setUser(userData);
+      }
     } 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
-  };
+  }, [router]);
 
   const formatCurrency = (amount) => {
-    if (amount >= 1000000) {
-      return (amount / 1000000).toFixed(1) + ' مليون ل.س';
-    }
-    return amount?.toLocaleString() + ' ل.س';
+    return `$${amount?.toLocaleString()}`;
+  };
+
+  const handleViewDetails = (property) => {
+    setSelectedProperty(property);
+    toast.info(`عرض تفاصيل ${property.title}`);
+  };
+
+  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,130 +711,61 @@ export default function OwnerProfitsPage() {
   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 gap-2"
+          >
+            <Download className="w-5 h-5" />
+            تصدير التقرير
+          </button>
+        </div>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file