fixed cors bug, separating rental confirmation for owner and renter, removing condition checks from my-listings

frontend/src/components/ReturnStatusModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { rentalAPI, conditionCheckAPI } from "../services/api";
 import { Rental } from "../types";
 
@@ -69,6 +69,18 @@ const ReturnStatusModal: React.FC<ReturnStatusModalProps> = ({
     }
   }, [show, rental]);
 
+  // Create blob URLs for photo previews and clean them up
+  const photoBlobUrls = useMemo(() => {
+    return photos.map(photo => URL.createObjectURL(photo));
+  }, [photos]);
+
+  // Cleanup blob URLs when photos change or component unmounts
+  useEffect(() => {
+    return () => {
+      photoBlobUrls.forEach(url => URL.revokeObjectURL(url));
+    };
+  }, [photoBlobUrls]);
+
   const formatCurrency = (amount: number | string | undefined) => {
     const numAmount = Number(amount) || 0;
     return `$${numAmount.toFixed(2)}`;
@@ -325,7 +337,7 @@ const ReturnStatusModal: React.FC<ReturnStatusModalProps> = ({
     }
   };
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     // Reset all states
     setStatusOptions({
       returned: false,
@@ -345,7 +357,7 @@ const ReturnStatusModal: React.FC<ReturnStatusModalProps> = ({
     setReplacementCost("");
     setProofOfOwnership([]);
     onHide();
-  };
+  }, [onHide]);
 
   const handleBackdropClick = useCallback(
     (e: React.MouseEvent) => {
@@ -630,7 +642,7 @@ const ReturnStatusModal: React.FC<ReturnStatusModalProps> = ({
                           <div key={index} className="col-md-3 mb-2">
                             <div className="position-relative">
                               <img
-                                src={URL.createObjectURL(photo)}
+                                src={photoBlobUrls[index]}
                                 alt={`Photo ${index + 1}`}
                                 className="img-fluid rounded"
                                 style={{

frontend/src/pages/MyListings.tsx

@@ -59,7 +59,6 @@ const MyListings: React.FC = () => {
     checkType: string;
   } | null>(null);
   const [availableChecks, setAvailableChecks] = useState<any[]>([]);
-  const [conditionChecks, setConditionChecks] = useState<any[]>([]);
   const [showReturnStatusModal, setShowReturnStatusModal] = useState(false);
   const [rentalForReturn, setRentalForReturn] = useState<Rental | null>(null);
 
@@ -69,12 +68,6 @@ const MyListings: React.FC = () => {
     fetchAvailableChecks();
   }, [user]);
 
-  useEffect(() => {
-    if (ownerRentals.length > 0) {
-      fetchConditionChecks();
-    }
-  }, [ownerRentals]);
-
   const fetchMyListings = async () => {
     if (!user) return;
 
@@ -148,31 +141,6 @@ const MyListings: React.FC = () => {
     }
   };
 
-  const fetchConditionChecks = async () => {
-    try {
-      // Fetch condition checks for all owner rentals
-      const allChecks: any[] = [];
-      for (const rental of ownerRentals) {
-        try {
-          const response = await conditionCheckAPI.getConditionChecks(
-            rental.id
-          );
-          const checks = Array.isArray(response.data.conditionChecks)
-            ? response.data.conditionChecks
-            : [];
-          allChecks.push(...checks);
-        } catch (err) {
-          // Continue even if one rental fails
-          console.error(`Failed to fetch checks for rental ${rental.id}:`, err);
-        }
-      }
-      setConditionChecks(allChecks);
-    } catch (err: any) {
-      console.error("Failed to fetch condition checks:", err);
-      setConditionChecks([]);
-    }
-  };
-
   // Owner functionality handlers
   const handleAcceptRental = async (rentalId: string) => {
     try {
@@ -271,7 +239,6 @@ const MyListings: React.FC = () => {
 
   const handleConditionCheckSuccess = () => {
     fetchAvailableChecks();
-    fetchConditionChecks();
     alert("Condition check submitted successfully!");
   };
 
@@ -283,20 +250,10 @@ const MyListings: React.FC = () => {
     );
   };
 
-  const getCompletedChecksForRental = (rentalId: string) => {
-    if (!Array.isArray(conditionChecks)) return [];
-    return conditionChecks.filter(
-      (check) =>
-        check.rentalId === rentalId &&
-        (check.checkType === "pre_rental_owner" ||
-          check.checkType === "post_rental_owner")
-    );
-  };
-
-  // Filter owner rentals
+  // Filter owner rentals - exclude cancelled (shown in Rental History)
   const allOwnerRentals = ownerRentals
     .filter((r) =>
-      ["pending", "confirmed", "active", "cancelled"].includes(r.status)
+      ["pending", "confirmed", "active"].includes(r.status)
     )
     .sort((a, b) => {
       const statusOrder = { pending: 0, confirmed: 1, active: 2 };
@@ -502,30 +459,6 @@ const MyListings: React.FC = () => {
                         )}
                       </div>
 
-                      {/* Condition Check Status */}
-                      {getCompletedChecksForRental(rental.id).length > 0 && (
-                        <div className="mb-2">
-                          {getCompletedChecksForRental(rental.id).map(
-                            (check) => (
-                              <div
-                                key={`${rental.id}-${check.checkType}-status`}
-                                className="text-success small"
-                              >
-                                <i className="bi bi-camera-fill me-1"></i>
-                                {check.checkType === "pre_rental_owner"
-                                  ? "Pre-Rental Check Completed"
-                                  : "Post-Rental Check Completed"}
-                                <small className="text-muted ms-2">
-                                  {new Date(
-                                    check.createdAt
-                                  ).toLocaleDateString()}
-                                </small>
-                              </div>
-                            )
-                          )}
-                        </div>
-                      )}
-
                       {/* Condition Check Buttons */}
                       {getAvailableChecksForRental(rental.id).map((check) => (
                         <button