restructuring for rental requests. started double blind reviews

frontend/src/pages/Profile.tsx

@@ -4,6 +4,8 @@ import { userAPI, itemAPI, rentalAPI, addressAPI } from "../services/api";
 import { User, Item, Rental, Address } from "../types";
 import { getImageUrl } from "../utils/imageUrl";
 import AvailabilitySettings from "../components/AvailabilitySettings";
+import ReviewItemModal from "../components/ReviewModal";
+import ReviewRenterModal from "../components/ReviewRenterModal";
 
 const Profile: React.FC = () => {
   const { user, updateUser, logout } = useAuth();
@@ -59,12 +61,22 @@ const Profile: React.FC = () => {
     zipCode: "",
     country: "US",
   });
+  
+  // Rental history state
+  const [pastRenterRentals, setPastRenterRentals] = useState<Rental[]>([]);
+  const [pastOwnerRentals, setPastOwnerRentals] = useState<Rental[]>([]);
+  const [rentalHistoryLoading, setRentalHistoryLoading] = useState(true);
+  const [showReviewModal, setShowReviewModal] = useState(false);
+  const [showReviewRenterModal, setShowReviewRenterModal] = useState(false);
+  const [selectedRental, setSelectedRental] = useState<Rental | null>(null);
+  const [selectedRentalForReview, setSelectedRentalForReview] = useState<Rental | null>(null);
 
   useEffect(() => {
     fetchProfile();
     fetchStats();
     fetchUserAddresses();
     fetchUserAvailability();
+    fetchRentalHistory();
   }, []);
 
   const fetchUserAvailability = async () => {
@@ -141,6 +153,73 @@ const Profile: React.FC = () => {
     }
   };
 
+  // Helper functions for rental history
+  const formatTime = (timeString?: string) => {
+    if (!timeString || timeString.trim() === "") return "";
+    try {
+      const [hour, minute] = timeString.split(":");
+      const hourNum = parseInt(hour);
+      const hour12 = hourNum === 0 ? 12 : hourNum > 12 ? hourNum - 12 : hourNum;
+      const period = hourNum < 12 ? "AM" : "PM";
+      return `${hour12}:${minute} ${period}`;
+    } catch (error) {
+      return "";
+    }
+  };
+
+  const formatDateTime = (dateString: string, timeString?: string) => {
+    const date = new Date(dateString).toLocaleDateString();
+    const formattedTime = formatTime(timeString);
+    return formattedTime ? `${date} at ${formattedTime}` : date;
+  };
+
+  const fetchRentalHistory = async () => {
+    try {
+      // Fetch past rentals as a renter
+      const renterResponse = await rentalAPI.getMyRentals();
+      const pastRenterRentals = renterResponse.data.filter((r: Rental) =>
+        ["completed", "cancelled"].includes(r.status)
+      );
+      setPastRenterRentals(pastRenterRentals);
+
+      // Fetch past rentals as an owner
+      const ownerResponse = await rentalAPI.getMyListings();
+      const pastOwnerRentals = ownerResponse.data.filter((r: Rental) =>
+        ["completed", "cancelled"].includes(r.status)
+      );
+      setPastOwnerRentals(pastOwnerRentals);
+    } catch (err) {
+      console.error("Failed to fetch rental history:", err);
+    } finally {
+      setRentalHistoryLoading(false);
+    }
+  };
+
+  const handleReviewClick = (rental: Rental) => {
+    setSelectedRental(rental);
+    setShowReviewModal(true);
+  };
+
+  const handleReviewSuccess = () => {
+    fetchRentalHistory(); // Refresh to show updated review status
+    alert("Thank you for your review!");
+  };
+
+  const handleCompleteClick = async (rental: Rental) => {
+    try {
+      await rentalAPI.markAsCompleted(rental.id);
+      setSelectedRentalForReview(rental);
+      setShowReviewRenterModal(true);
+      fetchRentalHistory(); // Refresh rental history
+    } catch (err: any) {
+      alert("Failed to mark rental as completed: " + (err.response?.data?.error || err.message));
+    }
+  };
+
+  const handleReviewRenterSuccess = () => {
+    fetchRentalHistory(); // Refresh to show updated review status
+  };
+
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
@@ -472,6 +551,15 @@ const Profile: React.FC = () => {
                 <i className="bi bi-gear me-2"></i>
                 Owner Settings
               </button>
+              <button
+                className={`list-group-item list-group-item-action ${
+                  activeSection === "rental-history" ? "active" : ""
+                }`}
+                onClick={() => setActiveSection("rental-history")}
+              >
+                <i className="bi bi-clock-history me-2"></i>
+                Rental History
+              </button>
               <button
                 className={`list-group-item list-group-item-action ${
                   activeSection === "personal-info" ? "active" : ""
@@ -677,6 +765,225 @@ const Profile: React.FC = () => {
             </div>
           )}
 
+          {/* Rental History Section */}
+          {activeSection === "rental-history" && (
+            <div>
+              <h4 className="mb-4">Rental History</h4>
+
+              {rentalHistoryLoading ? (
+                <div className="text-center py-5">
+                  <div className="spinner-border" role="status">
+                    <span className="visually-hidden">Loading...</span>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* As Renter Section */}
+                  {pastRenterRentals.length > 0 && (
+                    <div className="mb-5">
+                      <h5 className="mb-3">
+                        <i className="bi bi-person me-2"></i>
+                        As Renter ({pastRenterRentals.length})
+                      </h5>
+                      <div className="row">
+                        {pastRenterRentals.map((rental) => (
+                          <div key={rental.id} className="col-md-6 col-lg-4 mb-4">
+                            <div className="card h-100">
+                              {rental.item?.images && rental.item.images[0] && (
+                                <img
+                                  src={rental.item.images[0]}
+                                  className="card-img-top"
+                                  alt={rental.item.name}
+                                  style={{ height: "150px", objectFit: "cover" }}
+                                />
+                              )}
+                              <div className="card-body">
+                                <h6 className="card-title">
+                                  {rental.item ? rental.item.name : "Item Unavailable"}
+                                </h6>
+                                
+                                <div className="mb-2">
+                                  <span
+                                    className={`badge ${
+                                      rental.status === "completed" ? "bg-success" : "bg-danger"
+                                    }`}
+                                  >
+                                    {rental.status.charAt(0).toUpperCase() + rental.status.slice(1)}
+                                  </span>
+                                </div>
+
+                                <p className="mb-1 small">
+                                  <strong>Period:</strong>
+                                  <br />
+                                  <strong>Start:</strong> {formatDateTime(rental.startDate, rental.startTime)}
+                                  <br />
+                                  <strong>End:</strong> {formatDateTime(rental.endDate, rental.endTime)}
+                                </p>
+
+                                <p className="mb-1 small">
+                                  <strong>Total:</strong> ${rental.totalAmount}
+                                </p>
+
+                                {rental.owner && (
+                                  <p className="mb-1 small">
+                                    <strong>Owner:</strong> {rental.owner.firstName} {rental.owner.lastName}
+                                  </p>
+                                )}
+
+                                {rental.renterPrivateMessage && rental.renterReviewVisible && (
+                                  <div className="alert alert-info mt-2 mb-2 p-2 small">
+                                    <strong><i className="bi bi-envelope-fill me-1"></i>Private Note from Owner:</strong>
+                                    <br />
+                                    {rental.renterPrivateMessage}
+                                  </div>
+                                )}
+
+                                {rental.status === "cancelled" && rental.rejectionReason && (
+                                  <div className="alert alert-warning mt-2 mb-1 p-2 small">
+                                    <strong>Rejection reason:</strong> {rental.rejectionReason}
+                                  </div>
+                                )}
+
+                                <div className="d-flex gap-2 mt-3">
+                                  {rental.status === "completed" && !rental.itemRating && !rental.itemReviewSubmittedAt && (
+                                    <button
+                                      className="btn btn-sm btn-primary"
+                                      onClick={() => handleReviewClick(rental)}
+                                    >
+                                      Review
+                                    </button>
+                                  )}
+                                  {rental.itemReviewSubmittedAt && !rental.itemReviewVisible && (
+                                    <div className="text-info small">
+                                      <i className="bi bi-clock me-1"></i>
+                                      Review Submitted
+                                    </div>
+                                  )}
+                                  {rental.itemReviewVisible && rental.itemRating && (
+                                    <div className="text-success small">
+                                      <i className="bi bi-check-circle-fill me-1"></i>
+                                      Review Published ({rental.itemRating}/5)
+                                    </div>
+                                  )}
+                                  {rental.status === "completed" && rental.rating && !rental.itemRating && (
+                                    <div className="text-success small">
+                                      <i className="bi bi-check-circle-fill me-1"></i>
+                                      Reviewed ({rental.rating}/5)
+                                    </div>
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* As Owner Section */}
+                  {pastOwnerRentals.length > 0 && (
+                    <div className="mb-5">
+                      <h5 className="mb-3">
+                        <i className="bi bi-house me-2"></i>
+                        As Owner ({pastOwnerRentals.length})
+                      </h5>
+                      <div className="row">
+                        {pastOwnerRentals.map((rental) => (
+                          <div key={rental.id} className="col-md-6 col-lg-4 mb-4">
+                            <div className="card h-100">
+                              {rental.item?.images && rental.item.images[0] && (
+                                <img
+                                  src={rental.item.images[0]}
+                                  className="card-img-top"
+                                  alt={rental.item.name}
+                                  style={{ height: "150px", objectFit: "cover" }}
+                                />
+                              )}
+                              <div className="card-body">
+                                <h6 className="card-title">
+                                  {rental.item ? rental.item.name : "Item Unavailable"}
+                                </h6>
+                                
+                                {rental.renter && (
+                                  <p className="mb-1 small">
+                                    <strong>Renter:</strong> {rental.renter.firstName} {rental.renter.lastName}
+                                  </p>
+                                )}
+                                
+                                <div className="mb-2">
+                                  <span
+                                    className={`badge ${
+                                      rental.status === "completed" ? "bg-success" : "bg-danger"
+                                    }`}
+                                  >
+                                    {rental.status.charAt(0).toUpperCase() + rental.status.slice(1)}
+                                  </span>
+                                </div>
+
+                                <p className="mb-1 small">
+                                  <strong>Period:</strong>
+                                  <br />
+                                  {formatDateTime(rental.startDate, rental.startTime)} - {formatDateTime(rental.endDate, rental.endTime)}
+                                </p>
+
+                                <p className="mb-1 small">
+                                  <strong>Total:</strong> ${rental.totalAmount}
+                                </p>
+
+                                {rental.itemPrivateMessage && rental.itemReviewVisible && (
+                                  <div className="alert alert-info mt-2 mb-2 p-2 small">
+                                    <strong><i className="bi bi-envelope-fill me-1"></i>Private Note from Renter:</strong>
+                                    <br />
+                                    {rental.itemPrivateMessage}
+                                  </div>
+                                )}
+
+                                <div className="d-flex gap-2 mt-3">
+                                  {rental.status === "completed" && !rental.renterRating && !rental.renterReviewSubmittedAt && (
+                                    <button
+                                      className="btn btn-sm btn-primary"
+                                      onClick={() => {
+                                        setSelectedRentalForReview(rental);
+                                        setShowReviewRenterModal(true);
+                                      }}
+                                    >
+                                      Review Renter
+                                    </button>
+                                  )}
+                                  {rental.renterReviewSubmittedAt && !rental.renterReviewVisible && (
+                                    <div className="text-info small">
+                                      <i className="bi bi-clock me-1"></i>
+                                      Review Submitted
+                                    </div>
+                                  )}
+                                  {rental.renterReviewVisible && rental.renterRating && (
+                                    <div className="text-success small">
+                                      <i className="bi bi-check-circle-fill me-1"></i>
+                                      Review Published ({rental.renterRating}/5)
+                                    </div>
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Empty State */}
+                  {pastRenterRentals.length === 0 && pastOwnerRentals.length === 0 && (
+                    <div className="text-center py-5">
+                      <i className="bi bi-clock-history text-muted mb-3" style={{ fontSize: "3rem" }}></i>
+                      <h5 className="text-muted">No Rental History</h5>
+                      <p className="text-muted">Your completed rentals and rental requests will appear here.</p>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+
           {/* Personal Information Section */}
           {activeSection === "personal-info" && (
             <div>
@@ -710,7 +1017,7 @@ const Profile: React.FC = () => {
                         name="phone"
                         value={formData.phone}
                         onChange={handleChange}
-                        placeholder="+1 (555) 123-4567"
+                        placeholder="(123) 456-7890"
                         disabled={!editing}
                       />
                     </div>
@@ -1022,6 +1329,31 @@ const Profile: React.FC = () => {
           )}
         </div>
       </div>
+
+      {/* Review Modals */}
+      {selectedRental && (
+        <ReviewItemModal
+          show={showReviewModal}
+          onClose={() => {
+            setShowReviewModal(false);
+            setSelectedRental(null);
+          }}
+          rental={selectedRental}
+          onSuccess={handleReviewSuccess}
+        />
+      )}
+
+      {selectedRentalForReview && (
+        <ReviewRenterModal
+          show={showReviewRenterModal}
+          onClose={() => {
+            setShowReviewRenterModal(false);
+            setSelectedRentalForReview(null);
+          }}
+          rental={selectedRentalForReview}
+          onSuccess={handleReviewRenterSuccess}
+        />
+      )}
     </div>
   );
 };