fixed my propries page and fixed the sidebar again mouaz is the best in the west

app/owner/properties/page.js

@@ -688,11 +688,16 @@ export default function OwnerPropertiesPage() {
   const [properties, setProperties] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [showAddMenu, setShowAddMenu] = useState(false);
+  const [activeTab, setActiveTab] = useState('rent');
   
   const [deleteModal, setDeleteModal] = useState({ isOpen: false, property: null });
   const [viewModal, setViewModal] = useState({ isOpen: false, property: null });
   const [editModal, setEditModal] = useState({ isOpen: false, property: null });
 
+  const filteredProperties = properties.filter(p => p.purpose === activeTab);
+  const rentCount = properties.filter(p => p.purpose === 'rent').length;
+  const saleCount = properties.filter(p => p.purpose === 'sale').length;
+
   useEffect(() => {
     const authUser = AuthService.getUser();
     if (authUser && AuthService.isOwner()) {
@@ -740,7 +745,8 @@ export default function OwnerPropertiesPage() {
         return {
           id: item.id,
           title: info.address || `عقار #${item.id}`,
-          propertyType: { 0: 'apartment', 1: 'villa', 2: 'house' }[info.buildingType] || 'apartment',
+          propertyType: { 0: 'apartment', 1: 'villa', 2: 'sweet', 3: 'room', 4: 'studio', 5: 'office', 6: 'farms', 7: 'shop', 8: 'warehouse' }[info.buildingType] || 'apartment',
+          propertyTypeLabel: { 0: 'شقة', 1: 'فيلا', 2: 'سويت', 3: 'غرفة', 4: 'استوديو', 5: 'مكتب', 6: 'مزرعة', 7: 'متجر', 8: 'مستودع' }[info.buildingType] || 'عقار',
           purpose: 'rent',
           rentType: { 0: 'daily', 1: 'monthly' }[item.rentType] || 'daily',
           dailyPrice: item.dailyRent || 0,
@@ -776,7 +782,8 @@ export default function OwnerPropertiesPage() {
         return {
           id: item.id,
           title: info.address || `عقار للبيع #${item.id}`,
-          propertyType: { 0: 'apartment', 1: 'villa', 2: 'house' }[info.buildingType] || 'apartment',
+          propertyType: { 0: 'apartment', 1: 'villa', 2: 'sweet', 3: 'room', 4: 'studio', 5: 'office', 6: 'farms', 7: 'shop', 8: 'warehouse' }[info.buildingType] || 'apartment',
+          propertyTypeLabel: { 0: 'شقة', 1: 'فيلا', 2: 'سويت', 3: 'غرفة', 4: 'استوديو', 5: 'مكتب', 6: 'مزرعة', 7: 'متجر', 8: 'مستودع' }[info.buildingType] || 'عقار',
           purpose: 'sale',
           dailyPrice: 0,
           monthlyPrice: 0,
@@ -986,7 +993,27 @@ export default function OwnerPropertiesPage() {
           </div>
         </motion.div>
 
-        {properties.length === 0 ? (
+        {/* Tab Switcher */}
+        <div className="flex gap-1 mb-6 bg-gray-100 rounded-xl p-1 w-fit">
+          <button onClick={() => setActiveTab('rent')}
+            className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === 'rent' ? 'bg-white text-amber-600 shadow-sm' : 'text-gray-600 hover:text-gray-800'}`}>
+            <span className="flex items-center gap-2">
+              <Home className="w-4 h-4" />
+              للإيجار
+              {rentCount > 0 && <span className="bg-amber-100 text-amber-800 text-xs px-2 py-0.5 rounded-full">{rentCount}</span>}
+            </span>
+          </button>
+          <button onClick={() => setActiveTab('sale')}
+            className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === 'sale' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-800'}`}>
+            <span className="flex items-center gap-2">
+              <DollarSign className="w-4 h-4" />
+              للبيع
+              {saleCount > 0 && <span className="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full">{saleCount}</span>}
+            </span>
+          </button>
+        </div>
+
+        {filteredProperties.length === 0 ? (
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -995,10 +1022,12 @@ export default function OwnerPropertiesPage() {
             <div className="w-24 h-24 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
               <Building 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 mb-6">ابدأ بإضافة أول عقار لك الآن</p>
+            <h3 className="text-xl font-bold text-gray-900 mb-2">
+              {activeTab === 'rent' ? 'لا توجد عقارات للإيجار' : 'لا توجد عقارات للبيع'}
+            </h3>
+            <p className="text-gray-600 mb-6">ابدأ بإضافة أول عقار {activeTab === 'rent' ? 'للإيجار' : 'للبيع'} الآن</p>
             <Link
-              href="/owner/properties/add"
+              href={`/owner/properties/add?purpose=${activeTab}`}
               className="inline-flex items-center gap-2 bg-amber-500 text-white px-6 py-3 rounded-xl font-medium hover:bg-amber-600 transition-colors"
             >
               <PlusCircle className="w-5 h-5" />
@@ -1007,7 +1036,7 @@ export default function OwnerPropertiesPage() {
           </motion.div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {properties.map((property, index) => (
+            {filteredProperties.map((property, index) => (
               <motion.div
                 key={property.id}
                 variants={fadeInUp}
@@ -1028,18 +1057,31 @@ export default function OwnerPropertiesPage() {
                       <ImageIcon className="w-12 h-12 text-gray-400" />
                     </div>
                   )}
-                  <div className="absolute top-2 right-2">
-                    <span className={`px-2 py-1 rounded-lg text-xs font-medium ${
+                  <div className="absolute top-2 right-2 flex gap-1">
+                    <span className={`px-2 py-1 rounded-lg text-xs font-medium shadow-sm ${
                       property.status === 'available' 
                         ? 'bg-green-100 text-green-800' 
                         : 'bg-yellow-100 text-yellow-800'
                     }`}>
                       {property.status === 'available' ? 'متاح' : 'مؤجر'}
                     </span>
+                    {property.purpose === 'rent' && property.furnished && (
+                      <span className="px-2 py-1 rounded-lg text-xs font-medium bg-amber-100 text-amber-800 shadow-sm">
+                        مفروش
+                      </span>
+                    )}
+                    {property.purpose === 'rent' && !property.furnished && property.furnished !== undefined && (
+                      <span className="px-2 py-1 rounded-lg text-xs font-medium bg-gray-100 text-gray-600 shadow-sm">
+                        غير مفروش
+                      </span>
+                    )}
                   </div>
                 </div>
 
                 <div className="p-4">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs px-2 py-0.5 bg-amber-50 text-amber-700 rounded-full">{property.propertyTypeLabel || (property.propertyType === 'apartment' ? 'شقة' : property.propertyType === 'villa' ? 'فيلا' : property.propertyType === 'sweet' ? 'سويت' : property.propertyType === 'room' ? 'غرفة' : property.propertyType === 'studio' ? 'استوديو' : property.propertyType === 'office' ? 'مكتب' : property.propertyType === 'farms' ? 'مزرعة' : property.propertyType === 'shop' ? 'متجر' : property.propertyType === 'warehouse' ? 'مستودع' : 'عقار')}</span>
+                  </div>
                   <h3 className="font-bold text-gray-900 mb-2">{property.title}</h3>
                   
                   <div className="flex items-center gap-1 text-gray-500 text-sm mb-3">
@@ -1060,6 +1102,12 @@ export default function OwnerPropertiesPage() {
                       <Square className="w-4 h-4" />
                       <span>{property.area}م²</span>
                     </div>
+                    {property.rating > 0 && (
+                      <div className="flex items-center gap-1 text-amber-600">
+                        <Star className="w-3 h-3 fill-amber-500" />
+                        <span>{property.rating.toFixed(1)}</span>
+                      </div>
+                    )}
                   </div>
 
                   <div className="flex justify-between items-center pt-3 border-t border-gray-100">