fixed some changes in the ccode

app/owner/properties/page.js

@@ -63,6 +63,7 @@ import {
   editSaleProperty,
   updateRentPropertyStatus,
   updateSalePropertyStatus,
+  uploadPicture,
 } from "../../utils/api";
 import { PropertyService } from "../../enums/PropertyService";
 import { PropertyTerm } from "../../enums/PropertyTerm";
@@ -621,6 +622,16 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
   });
   const [newCustomTerm, setNewCustomTerm] = useState('');
   const [isSaving, setIsSaving] = useState(false);
+  const [existingImages, setExistingImages] = useState([]);
+  const [newImages, setNewImages] = useState([]);
+  const editApiBase =
+    process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api';
+
+  const editImgUrl = (path) => {
+    if (!path) return null;
+    if (path.startsWith('http://') || path.startsWith('https://')) return path;
+    return `${editApiBase}${path}`;
+  };
 
   useEffect(() => {
     if (!property || !isOpen) return;
@@ -718,6 +729,13 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
         : { salePrice: property.salePrice || 0 }),
     });
     setNewCustomTerm('');
+    setNewImages([]);
+    const rawImages = Array.isArray(property.images)
+      ? property.images
+      : Array.isArray(info.images)
+        ? info.images
+        : [];
+    setExistingImages(rawImages.filter((p) => p && p.trim()));
   }, [property, isOpen]);
 
   const handleChange = (field, value) => {
@@ -762,6 +780,76 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
     }));
   };
 
+  const handleRemoveExistingImage = (index) => {
+    setExistingImages((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleMoveExistingImage = (index, direction) => {
+    setExistingImages((prev) => {
+      const next = [...prev];
+      const target = index + direction;
+      if (target < 0 || target >= next.length) return prev;
+      [next[index], next[target]] = [next[target], next[index]];
+      return next;
+    });
+  };
+
+  const handleAddImages = async (files) => {
+    const validFiles = Array.from(files).filter((f) => {
+      if (!f.type.startsWith('image/')) return false;
+      if (f.size > 5 * 1024 * 1024) {
+        toast.error(t('fileTooLarge') || 'الصورة كبيرة جداً');
+        return false;
+      }
+      return true;
+    });
+    if (validFiles.length === 0) return;
+    const maxTotal = 10;
+    const currentCount = existingImages.length + newImages.length;
+    const slots = maxTotal - currentCount;
+    if (slots <= 0) {
+      toast.error(t('maxImagesReached') || 'الحد الأقصى 10 صور');
+      return;
+    }
+    const toAdd = validFiles.slice(0, slots);
+    const entries = toAdd.map((file) => ({
+      file,
+      preview: URL.createObjectURL(file),
+      path: null,
+      uploading: true,
+    }));
+    setNewImages((prev) => [...prev, ...entries]);
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i];
+      try {
+        const result = await uploadPicture(entry.file);
+        const path = result?.value || result?.path || result?.url || result;
+        entry.path = path;
+      } catch {
+        toast.error(t('uploadFailed') || 'فشل رفع الصورة');
+      } finally {
+        entry.uploading = false;
+        setNewImages((prev) => [...prev]);
+      }
+    }
+  };
+
+  const handleRemoveNewImage = (index) => {
+    const entry = newImages[index];
+    if (entry?.preview) URL.revokeObjectURL(entry.preview);
+    setNewImages((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleMoveNewImage = (index, direction) => {
+    setNewImages((prev) => {
+      const next = [...prev];
+      const target = index + direction;
+      if (target < 0 || target >= next.length) return prev;
+      [next[index], next[target]] = [next[target], next[index]];
+      return next;
+    });
+  };
+
   const handleSave = async () => {
     const errors = [];
     if (!formData.description?.trim()) errors.push(t('descriptionRequired') || 'الوصف مطلوب');
@@ -781,7 +869,11 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
     }
     setIsSaving(true);
     try {
-      await onSave(formData);
+      const uploadedPaths = newImages
+        .filter((e) => e.path && !e.uploading)
+        .map((e) => e.path);
+      const allImages = [...existingImages, ...uploadedPaths];
+      await onSave({ ...formData, _images: allImages });
     } catch {
       setIsSaving(false);
     }
@@ -920,6 +1012,76 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
             </div>
           </div>
 
+          {/* Images */}
+          <div className="bg-gray-50 p-4 rounded-xl">
+            <h3 className="text-lg font-bold text-gray-900 mb-4">{t('images')}</h3>
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
+              {existingImages.map((path, i) => (
+                <div key={`e-${i}`} className="relative group aspect-square rounded-xl overflow-hidden bg-white border border-gray-200">
+                  <img src={editImgUrl(path)} alt="" className="w-full h-full object-cover" />
+                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                    <button type="button" onClick={() => handleRemoveExistingImage(i)} className="w-8 h-8 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 shadow-md">
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                    {i > 0 && (
+                      <button type="button" onClick={() => handleMoveExistingImage(i, -1)} className="w-8 h-8 bg-white text-gray-700 rounded-full flex items-center justify-center hover:bg-gray-100 shadow-md">
+                        <ChevronLeft className="w-4 h-4" />
+                      </button>
+                    )}
+                    {i < existingImages.length - 1 && (
+                      <button type="button" onClick={() => handleMoveExistingImage(i, 1)} className="w-8 h-8 bg-white text-gray-700 rounded-full flex items-center justify-center hover:bg-gray-100 shadow-md">
+                        <ChevronRight className="w-4 h-4" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ))}
+              {newImages.map((entry, i) => (
+                <div key={`n-${i}`} className="relative group aspect-square rounded-xl overflow-hidden bg-white border border-gray-200">
+                  {entry.uploading ? (
+                    <div className="w-full h-full flex items-center justify-center bg-gray-100">
+                      <Loader2 className="w-8 h-8 text-amber-500 animate-spin" />
+                    </div>
+                  ) : (
+                    <img src={entry.preview} alt="" className="w-full h-full object-cover" />
+                  )}
+                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                    <button type="button" onClick={() => handleRemoveNewImage(i)} className="w-8 h-8 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 shadow-md">
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                    {i > 0 && (
+                      <button type="button" onClick={() => handleMoveNewImage(i, -1)} className="w-8 h-8 bg-white text-gray-700 rounded-full flex items-center justify-center hover:bg-gray-100 shadow-md">
+                        <ChevronLeft className="w-4 h-4" />
+                      </button>
+                    )}
+                    {i < newImages.length - 1 && (
+                      <button type="button" onClick={() => handleMoveNewImage(i, 1)} className="w-8 h-8 bg-white text-gray-700 rounded-full flex items-center justify-center hover:bg-gray-100 shadow-md">
+                        <ChevronRight className="w-4 h-4" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ))}
+              {existingImages.length + newImages.length < 10 && (
+                <label className="aspect-square rounded-xl border-2 border-dashed border-gray-300 bg-white flex flex-col items-center justify-center gap-1 cursor-pointer hover:border-amber-300 hover:bg-amber-50 transition-all">
+                  <ImageIcon className="w-8 h-8 text-gray-400" />
+                  <span className="text-xs text-gray-500">{t('addImage')}</span>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    multiple
+                    className="hidden"
+                    onChange={(e) => {
+                      handleAddImages(e.target.files);
+                      e.target.value = '';
+                    }}
+                  />
+                </label>
+              )}
+            </div>
+            <p className="text-xs text-gray-400 mt-2">{existingImages.length + newImages.length}/10</p>
+          </div>
+
           {/* Services */}
           <div className="bg-gray-50 p-4 rounded-xl">
             <h3 className="text-lg font-bold text-gray-900 mb-4">{t('services')}</h3>
@@ -1591,7 +1753,7 @@ export default function OwnerPropertiesPage() {
       const propInfo = {
         cordsX: rawInfo.cordsX || '',
         cordsY: rawInfo.cordsY || '',
-        images: rawInfo.images || [],
+        images: formData._images || rawInfo.images || [],
         address: property.address || rawInfo.address || '',
         description:
           formData.description || rawInfo.description || '',

app/utils/api.js

@@ -369,7 +369,7 @@ export async function editRentProperty(id, data) {
 
   return apiFetch(`/RentProperties/EditRentProperty/${id}`, {
     method: "PUT",
-    body: { rentPropertyDto: body },
+    body,
   });
 }
 

edit-property-flow.md

@@ -0,0 +1,199 @@
+# Edit Property Flow - Documentation
+
+## Overview
+
+The edit property flow allows property owners to update their rent property listing, including all fields and images. It shares the same screen as add property (`add_rent_property_screen.dart`) and switches behavior based on `widget.initialListing != null` (edit mode).
+
+## Screen: `add_rent_property_screen.dart`
+
+### State Variables for Images
+
+```dart
+// Existing images loaded from the listing (edit mode)
+List<String> _existingImagePaths = [];
+
+// Newly selected images (both add & edit mode)
+List<XFile> _formImages = [];
+List<String> _imageSlotIds = [];
+List<String> _imageFingerprints = [];
+List<Uint8List> _imagePreviews = [];
+List<String> _uploadedImagePaths = [];
+Set<String> _uploadingImageKeys = {};
+Set<String> _failedImageKeys = {};
+
+int get _totalImageCount => _existingImagePaths.length + _formImages.length;
+```
+
+### Initialization in Edit Mode
+
+When editing, `_prefillFromInitialListing()` populates `_existingImagePaths` from the API response:
+
+```dart
+_existingImagePaths = info.images
+    .map((path) => path.trim())
+    .where((path) => path.isNotEmpty)
+    .toList();
+```
+
+### Image Management UI (Edit Mode)
+
+| Feature | Implementation |
+|---------|---------------|
+| **View existing images** | `Image.network` with `ApiConstants.resolveApiFileUrl()` |
+| **Delete existing image** | X button → `_removeExistingImageAt(index)` removes from `_existingImagePaths` |
+| **Replace existing image** | Tap on image → `_replaceExistingImageAt(index)` → file picker → upload via `POST /Files/UploadPicture` → replaces URL at same index |
+| **Add new image** | Upload button → `_handleImageUpload()` → `_addSelectedImage()` → upload via `POST /Files/UploadPicture` |
+| **Reorder existing images** | Up/down arrow buttons → `_moveExistingImage(index, direction)` |
+| **Reorder new images** | Up/down arrow buttons → `_moveSelectedImage(index, direction)` (moves all 6 parallel lists together) |
+
+### Submit - Image Assembly
+
+On submit, the final image list is built from:
+
+```dart
+final allImagePaths = <String>[
+  ..._existingImagePaths
+      .map((path) => path.trim())
+      .where((path) => path.isNotEmpty),
+  ...uploadedImagePaths,
+];
+```
+
+This combined list is passed to `AddRentPropertyDto` → `PropertyInformationDto` as `images`.
+
+## API Details
+
+### Image Upload Endpoint
+
+```
+POST /Files/UploadPicture
+Headers: Authorization: Bearer <token>, Content-Type: multipart/form-data
+Body: image=<file>
+Response: { "value": "/Pictures/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg" }
+```
+
+The returned path is used in the edit request.
+
+### Edit Property Endpoint
+
+```
+PUT /RentProperties/EditRentProperty/{id}
+Content-Type: application/json
+Authorization: Bearer <token>
+```
+
+#### Request Body (camelCase contract from swagger)
+
+```json
+{
+  "propertyInformation": {
+    "activityStatus": 0,
+    "images": [
+      "/Pictures/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg"
+    ],
+    "cordsX": "33.51599774641418",
+    "cordsY": "36.281279544066294",
+    "address": "string",
+    "description": "string",
+    "numberOfBathRooms": 2,
+    "numberOfRooms": 3,
+    "numberOfBedRooms": 3,
+    "space": 120.0,
+    "detailsJSON": "{}",
+    "buildingType": 0,
+    "status": 0,
+    "propertyType": 0,
+    "city": 0
+  },
+  "deposit": 5.0,
+  "acceptedCertificate": 0,
+  "monthlyRent": 0.0,
+  "dailyRent": 56.0,
+  "rating": 1.0,
+  "currencyId": 1,
+  "rentType": 1,
+  "isSmokeAllow": false,
+  "specializedFor": false,
+  "isVisitorAllow": false,
+  "allowedPaymentPeriod": "10:02:00",
+  "type": 0
+}
+```
+
+### Payload Attempt Order (Flutter side)
+
+The app tries multiple payload shapes as fallback:
+
+| Order | Label | Structure | Example |
+|-------|-------|-----------|---------|
+| 1 | `plain_pascal` | PascalCase direct | `{PropertyInformation: {Images: [...]}}` |
+| 2 | `wrapped_pascal_outer` | PascalCase with DTO wrapper | `{RentPropertyDto: {PropertyInformation: {Images: [...]}}}` |
+| 3 | `wrapped_pascal_inner` | PascalCase inside camelCase wrapper | `{rentPropertyDto: {PropertyInformation: {Images: [...]}}}` |
+| 4 | `wrapped_camel` | camelCase wrapped | `{rentPropertyDto: {propertyInformation: {images: [...]}}}` |
+| 5 | `plain_camel` | camelCase direct | `{propertyInformation: {images: [...]}}` |
+| 6 | `multipart_form` | multipart form fields | `PropertyInformation.Images[0] = url` |
+
+---
+
+## 🚨 CONFIRMED BACKEND BUG
+
+### Symptoms
+- **All scalar fields** (deposit, dailyRent, address, etc.) update correctly via PUT
+- **`propertyInformation.images`** is ALWAYS ignored by the PUT endpoint
+- **`propertyInformation.detailsJSON`** is also ignored by the PUT endpoint
+- The **POST add endpoint** handles both fields correctly
+
+### Evidence from Direct API Tests
+
+**Test 1 - camelCase JSON via curl:**
+```
+PUT /RentProperties/EditRentProperty/1
+→ images sent: ["/Pictures/test1.jpg", "/Pictures/test2.jpg"]
+→ images response: ["/Pictures/f7062fc863a74306a6a0340982669386.png"]  ❌ OLD
+→ address sent: "test address"
+→ address response: "test address" ✅ UPDATED
+```
+
+**Test 2 - PascalCase JSON via curl:**
+```
+PUT /RentProperties/EditRentProperty/1
+→ Images sent: ["/Pictures/new1.jpg", "/Pictures/new2.jpg"]
+→ images response: ["/Pictures/f7062fc863a74306a6a0340982669386.png"]  ❌ OLD
+→ Address sent: "test pascal"
+→ Address response: "test pascal" ✅ UPDATED
+```
+
+**Test 3 - POST add endpoint (works correctly):**
+```
+POST /RentProperties/AddRentProperty
+→ images sent: ["/Pictures/test1.jpg", "/Pictures/test2.jpg"]
+→ images response: ["/Pictures/test1.jpg", "/Pictures/test2.jpg"] ✅ STORED CORRECTLY
+```
+
+### Root Cause (Backend Side)
+
+The `EditRentProperty` PUT handler in the backend likely:
+1. Creates a new `RentProperty` record (or updates it) - scalar fields work
+2. Updates or assigns the `PropertyInformation` record - but only scalar fields are copied
+3. The `Images` and `DetailsJSON` properties of `PropertyInformation` are **not mapped/copied** during update
+
+Comparison with `AddRentProperty`:
+- The POST handler correctly maps all `PropertyInformation` fields including `Images` and `DetailsJSON`
+- The PUT handler appears to skip these two fields specifically
+
+### Required Backend Fix
+
+The PUT endpoint handler needs to be updated to persist `propertyInformation.images` and `propertyInformation.detailsJSON` when updating existing property information records.
+
+---
+
+## Summary
+
+| Aspect | Status |
+|--------|--------|
+| Image upload (to server) | ✅ Working via `POST /Files/UploadPicture` |
+| Image management UI (edit mode) | ✅ Delete, Replace, Add, Reorder all implemented |
+| Image assembly for submit | ✅ Correctly combines kept + new uploaded paths |
+| Payload format (camelCase/PascalCase) | ✅ Both formats tried correctly |
+| **PUT edit endpoint** | **❌ Does NOT update images or detailsJSON** |
+| POST add endpoint | ✅ Fully functional |