reviews and review history

frontend/src/components/ReviewDetailsModal.tsx

@@ -0,0 +1,229 @@
+import React from "react";
+import { Rental } from "../types";
+import StarRating from "./StarRating";
+
+interface ReviewDetailsModalProps {
+  show: boolean;
+  onClose: () => void;
+  rental: Rental;
+  userType: "renter" | "owner";
+}
+
+const ReviewDetailsModal: React.FC<ReviewDetailsModalProps> = ({
+  show,
+  onClose,
+  rental,
+  userType,
+}) => {
+  if (!show) return null;
+
+  const formatDateTime = (dateString: string, timeString?: string) => {
+    const date = new Date(dateString).toLocaleDateString();
+    const formattedTime = timeString
+      ? (() => {
+          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 {
+            return "";
+          }
+        })()
+      : "";
+    return formattedTime ? `${date} at ${formattedTime}` : date;
+  };
+
+  const isRenter = userType === "renter";
+
+  return (
+    <div
+      className="modal d-block"
+      tabIndex={-1}
+      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+    >
+      <div className="modal-dialog modal-dialog-centered modal-lg">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">Review Details</h5>
+            <button
+              type="button"
+              className="btn-close"
+              onClick={onClose}
+            ></button>
+          </div>
+          <div className="modal-body">
+            {/* Header with user info */}
+            {rental.item && (
+              <div className="mb-4 text-center">
+                <h6 className="mb-1">{rental.item.name}</h6>
+                <small className="text-muted">
+                  {formatDateTime(rental.startDate, rental.startTime)} to{" "}
+                  {formatDateTime(rental.endDate, rental.endTime)}
+                </small>
+              </div>
+            )}
+
+            {/* What I Sent Section */}
+            {((isRenter &&
+              (rental.itemPrivateMessage ||
+                rental.itemReview ||
+                rental.itemRating)) ||
+              (!isRenter &&
+                (rental.renterPrivateMessage ||
+                  rental.renterReview ||
+                  rental.renterRating))) && (
+              <div className="mb-4">
+                <h6 className="text-primary mb-3">
+                  <i className="bi bi-arrow-up-right-circle me-2"></i>
+                  What I Sent
+                </h6>
+
+                {/* My Private Message */}
+                {((isRenter && rental.itemPrivateMessage) ||
+                  (!isRenter && rental.renterPrivateMessage)) && (
+                  <div className="mb-3">
+                    <small className="text-muted fw-bold">
+                      Private Note to {isRenter ? "Owner" : "Renter"}:
+                    </small>
+                    <div className="border rounded p-2 mt-1">
+                      {isRenter
+                        ? rental.itemPrivateMessage
+                        : rental.renterPrivateMessage}
+                    </div>
+                  </div>
+                )}
+
+                {/* My Public Review */}
+                {((isRenter && (rental.itemReview || rental.itemRating)) ||
+                  (!isRenter &&
+                    (rental.renterReview || rental.renterRating))) && (
+                  <div className="mb-3">
+                    <small className="text-muted fw-bold">
+                      Public Review of {isRenter ? "Item" : "Renter"}:
+                    </small>
+                    <div className="border rounded p-2 mt-1">
+                      {((isRenter && rental.itemRating) ||
+                        (!isRenter && rental.renterRating)) && (
+                        <div className="d-flex align-items-center mb-2">
+                          <StarRating
+                            rating={
+                              isRenter
+                                ? rental.itemRating!
+                                : rental.renterRating!
+                            }
+                            size="small"
+                          />
+                        </div>
+                      )}
+                      {((isRenter && rental.itemReview) ||
+                        (!isRenter && rental.renterReview)) && (
+                        <p className="small mb-0">
+                          {isRenter ? rental.itemReview : rental.renterReview}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* What I Received Section */}
+            {((isRenter &&
+              (rental.renterPrivateMessage ||
+                rental.renterReview ||
+                rental.renterRating)) ||
+              (!isRenter &&
+                (rental.itemPrivateMessage ||
+                  rental.itemReview ||
+                  rental.itemRating))) && (
+              <div className="mb-4">
+                <h6 className="text-success mb-3">
+                  <i className="bi bi-arrow-down-left-circle me-2"></i>
+                  What I Received
+                </h6>
+
+                {/* Their Private Message */}
+                {((isRenter && rental.renterPrivateMessage) ||
+                  (!isRenter && rental.itemPrivateMessage)) && (
+                  <div className="mb-3">
+                    <small className="text-muted fw-bold">
+                      Private Note from {isRenter ? "Owner" : "Renter"}:
+                    </small>
+                    <div className="border rounded p-2 mt-1">
+                      {isRenter
+                        ? rental.renterPrivateMessage
+                        : rental.itemPrivateMessage}
+                    </div>
+                  </div>
+                )}
+
+                {/* Their Public Review */}
+                {((isRenter && (rental.renterReview || rental.renterRating)) ||
+                  (!isRenter && (rental.itemReview || rental.itemRating))) && (
+                  <div className="mb-3">
+                    <small className="text-muted fw-bold">
+                      {isRenter
+                        ? "Owner's Review of Me:"
+                        : "Renter's Review of Item:"}
+                    </small>
+                    <div className="border rounded p-2 mt-1">
+                      {((isRenter && rental.renterRating) ||
+                        (!isRenter && rental.itemRating)) && (
+                        <div className="d-flex align-items-center mb-2">
+                          <StarRating
+                            rating={
+                              isRenter
+                                ? rental.renterRating!
+                                : rental.itemRating!
+                            }
+                            size="small"
+                          />
+                        </div>
+                      )}
+                      {((isRenter && rental.renterReview) ||
+                        (!isRenter && rental.itemReview)) && (
+                        <p className="small mb-0">
+                          {isRenter ? rental.renterReview : rental.itemReview}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Empty state */}
+            {!rental.itemPrivateMessage &&
+              !rental.renterPrivateMessage &&
+              !rental.itemReview &&
+              !rental.renterReview &&
+              !rental.itemRating &&
+              !rental.renterRating && (
+                <div className="text-center text-muted py-4">
+                  <i
+                    className="bi bi-chat-text mb-3"
+                    style={{ fontSize: "2rem" }}
+                  ></i>
+                  <p>No review details available.</p>
+                </div>
+              )}
+          </div>
+          <div className="modal-footer">
+            <button
+              type="button"
+              className="btn btn-secondary"
+              onClick={onClose}
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReviewDetailsModal;

frontend/src/components/ReviewModal.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
-import { rentalAPI } from '../services/api';
-import { Rental } from '../types';
+import React, { useState } from "react";
+import { rentalAPI } from "../services/api";
+import { Rental } from "../types";
+import SuccessModal from "./SuccessModal";
 
 interface ReviewItemModalProps {
   show: boolean;
@@ -9,12 +10,19 @@ interface ReviewItemModalProps {
   onSuccess: () => void;
 }
 
-const ReviewItemModal: React.FC<ReviewItemModalProps> = ({ show, onClose, rental, onSuccess }) => {
+const ReviewItemModal: React.FC<ReviewItemModalProps> = ({
+  show,
+  onClose,
+  rental,
+  onSuccess,
+}) => {
   const [rating, setRating] = useState(5);
-  const [review, setReview] = useState('');
-  const [privateMessage, setPrivateMessage] = useState('');
+  const [review, setReview] = useState("");
+  const [privateMessage, setPrivateMessage] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [successMessage, setSuccessMessage] = useState("");
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -25,24 +33,23 @@ const ReviewItemModal: React.FC<ReviewItemModalProps> = ({ show, onClose, rental
       const response = await rentalAPI.reviewItem(rental.id, {
         rating,
         review,
-        privateMessage
+        privateMessage,
       });
 
       // Reset form
       setRating(5);
-      setReview('');
-      setPrivateMessage('');
-      onSuccess();
-      onClose();
+      setReview("");
+      setPrivateMessage("");
       
-      // Show success message based on review visibility
+      // Show success modal with appropriate message
       if (response.data.reviewVisible) {
-        alert('Review published successfully!');
+        setSuccessMessage("Review published successfully!");
       } else {
-        alert('Review submitted! It will be published when both parties have reviewed or after 10 minutes.');
+        setSuccessMessage("Review submitted! It will be published when both parties have reviewed or after 10 minutes.");
       }
+      setShowSuccessModal(true);
     } catch (err: any) {
-      setError(err.response?.data?.error || 'Failed to submit review');
+      setError(err.response?.data?.error || "Failed to submit review");
     } finally {
       setSubmitting(false);
     }
@@ -52,23 +59,63 @@ const ReviewItemModal: React.FC<ReviewItemModalProps> = ({ show, onClose, rental
     setRating(value);
   };
 
+  const handleSuccessModalClose = () => {
+    setShowSuccessModal(false);
+    onSuccess();
+    onClose();
+  };
+
   if (!show) return null;
 
   return (
-    <div className="modal d-block" tabIndex={-1} style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+    <div
+      className="modal d-block"
+      tabIndex={-1}
+      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+    >
       <div className="modal-dialog modal-dialog-centered">
         <div className="modal-content">
           <div className="modal-header">
             <h5 className="modal-title">Review Item</h5>
-            <button type="button" className="btn-close" onClick={onClose}></button>
+            <button
+              type="button"
+              className="btn-close"
+              onClick={onClose}
+            ></button>
           </div>
           <form onSubmit={handleSubmit}>
             <div className="modal-body">
-              {rental.item && (
+              {rental.owner && rental.item && (
                 <div className="mb-4 text-center">
-                  <h6>{rental.item.name}</h6>
+                  <div className="d-flex justify-content-center mb-3">
+                    {rental.owner.profileImage ? (
+                      <img
+                        src={rental.owner.profileImage}
+                        alt={`${rental.owner.firstName} ${rental.owner.lastName}`}
+                        className="rounded-circle"
+                        style={{
+                          width: "60px",
+                          height: "60px",
+                          objectFit: "cover",
+                        }}
+                      />
+                    ) : (
+                      <div
+                        className="rounded-circle bg-primary d-flex align-items-center justify-content-center text-white fw-bold"
+                        style={{ width: "60px", height: "60px" }}
+                      >
+                        {rental.owner.firstName[0]}
+                        {rental.owner.lastName[0]}
+                      </div>
+                    )}
+                  </div>
+                  <h6 className="mb-1">
+                    {rental.owner.firstName} {rental.owner.lastName}
+                  </h6>
+                  <p className="mb-1 text-muted small">{rental.item.name}</p>
                   <small className="text-muted">
-                    Rented from {new Date(rental.startDate).toLocaleDateString()} to {new Date(rental.endDate).toLocaleDateString()}
+                    {new Date(rental.startDate).toLocaleDateString()} to{" "}
+                    {new Date(rental.endDate).toLocaleDateString()}
                   </small>
                 </div>
               )}
@@ -80,53 +127,31 @@ const ReviewItemModal: React.FC<ReviewItemModalProps> = ({ show, onClose, rental
               )}
 
               <div className="mb-3">
-                <label className="form-label">Rating</label>
-                <div className="d-flex justify-content-center gap-1" style={{ fontSize: '2rem' }}>
+                <div
+                  className="d-flex justify-content-center gap-1"
+                  style={{ fontSize: "2rem" }}
+                >
                   {[1, 2, 3, 4, 5].map((star) => (
                     <button
                       key={star}
                       type="button"
                       className="btn btn-link p-0 text-decoration-none"
                       onClick={() => handleStarClick(star)}
-                      style={{ color: star <= rating ? '#ffc107' : '#dee2e6' }}
+                      style={{ color: star <= rating ? "#ffc107" : "#dee2e6" }}
                     >
-                      <i className={`bi ${star <= rating ? 'bi-star-fill' : 'bi-star'}`}></i>
+                      <i
+                        className={`bi ${
+                          star <= rating ? "bi-star-fill" : "bi-star"
+                        }`}
+                      ></i>
                     </button>
                   ))}
                 </div>
-                <div className="text-center mt-2">
-                  <small className="text-muted">
-                    {rating === 1 && 'Poor'}
-                    {rating === 2 && 'Fair'}
-                    {rating === 3 && 'Good'}
-                    {rating === 4 && 'Very Good'}
-                    {rating === 5 && 'Excellent'}
-                  </small>
-                </div>
-              </div>
-
-              <div className="mb-3">
-                <label htmlFor="review" className="form-label">
-                  Public Review <span className="text-danger">*</span>
-                </label>
-                <textarea
-                  className="form-control"
-                  id="review"
-                  rows={4}
-                  value={review}
-                  onChange={(e) => setReview(e.target.value)}
-                  placeholder="Share your experience with this rental..."
-                  required
-                  disabled={submitting}
-                ></textarea>
-                <small className="text-muted">
-                  This will be visible to everyone. Tell others about the item condition, owner communication, and overall experience.
-                </small>
               </div>
 
               <div className="mb-3">
                 <label htmlFor="privateMessage" className="form-label">
-                  Private Message to Owner <span className="text-muted">(Optional)</span>
+                  Private Message to Owner{" "}
                 </label>
                 <textarea
                   className="form-control"
@@ -134,12 +159,24 @@ const ReviewItemModal: React.FC<ReviewItemModalProps> = ({ show, onClose, rental
                   rows={3}
                   value={privateMessage}
                   onChange={(e) => setPrivateMessage(e.target.value)}
-                  placeholder="Send a private message to the owner (only they will see this)..."
+                  placeholder=""
+                  disabled={submitting}
+                ></textarea>
+              </div>
+
+              <div className="mb-3">
+                <label htmlFor="review" className="form-label">
+                  Public Review
+                </label>
+                <textarea
+                  className="form-control"
+                  id="review"
+                  rows={4}
+                  value={review}
+                  onChange={(e) => setReview(e.target.value)}
+                  placeholder=""
                   disabled={submitting}
                 ></textarea>
-                <small className="text-muted">
-                  This message will only be visible to the owner. Use this for specific feedback or suggestions.
-                </small>
               </div>
             </div>
             <div className="modal-footer">
@@ -158,17 +195,28 @@ const ReviewItemModal: React.FC<ReviewItemModalProps> = ({ show, onClose, rental
               >
                 {submitting ? (
                   <>
-                    <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                    <span
+                      className="spinner-border spinner-border-sm me-2"
+                      role="status"
+                      aria-hidden="true"
+                    ></span>
                     Submitting...
                   </>
                 ) : (
-                  'Submit Review'
+                  "Submit Review"
                 )}
               </button>
             </div>
           </form>
         </div>
       </div>
+      
+      <SuccessModal
+        show={showSuccessModal}
+        onClose={handleSuccessModalClose}
+        title="Thank you for your review!"
+        message={successMessage}
+      />
     </div>
   );
 };

frontend/src/components/ReviewRenterModal.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
-import { rentalAPI } from '../services/api';
-import { Rental } from '../types';
+import React, { useState } from "react";
+import { rentalAPI } from "../services/api";
+import { Rental } from "../types";
+import SuccessModal from "./SuccessModal";
 
 interface ReviewRenterModalProps {
   show: boolean;
@@ -9,12 +10,19 @@ interface ReviewRenterModalProps {
   onSuccess: () => void;
 }
 
-const ReviewRenterModal: React.FC<ReviewRenterModalProps> = ({ show, onClose, rental, onSuccess }) => {
+const ReviewRenterModal: React.FC<ReviewRenterModalProps> = ({
+  show,
+  onClose,
+  rental,
+  onSuccess,
+}) => {
   const [rating, setRating] = useState(5);
-  const [review, setReview] = useState('');
-  const [privateMessage, setPrivateMessage] = useState('');
+  const [review, setReview] = useState("");
+  const [privateMessage, setPrivateMessage] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [successMessage, setSuccessMessage] = useState("");
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -25,24 +33,23 @@ const ReviewRenterModal: React.FC<ReviewRenterModalProps> = ({ show, onClose, re
       const response = await rentalAPI.reviewRenter(rental.id, {
         rating,
         review,
-        privateMessage
+        privateMessage,
       });
 
       // Reset form
       setRating(5);
-      setReview('');
-      setPrivateMessage('');
-      onSuccess();
-      onClose();
+      setReview("");
+      setPrivateMessage("");
       
-      // Show success message based on review visibility
+      // Show success modal with appropriate message
       if (response.data.reviewVisible) {
-        alert('Review published successfully!');
+        setSuccessMessage("Review published successfully!");
       } else {
-        alert('Review submitted! It will be published when both parties have reviewed or after 10 minutes.');
+        setSuccessMessage("Review submitted! It will be published when both parties have reviewed or after 10 minutes.");
       }
+      setShowSuccessModal(true);
     } catch (err: any) {
-      setError(err.response?.data?.error || 'Failed to submit review');
+      setError(err.response?.data?.error || "Failed to submit review");
     } finally {
       setSubmitting(false);
     }
@@ -52,23 +59,63 @@ const ReviewRenterModal: React.FC<ReviewRenterModalProps> = ({ show, onClose, re
     setRating(value);
   };
 
+  const handleSuccessModalClose = () => {
+    setShowSuccessModal(false);
+    onSuccess();
+    onClose();
+  };
+
   if (!show) return null;
 
   return (
-    <div className="modal d-block" tabIndex={-1} style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+    <div
+      className="modal d-block"
+      tabIndex={-1}
+      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+    >
       <div className="modal-dialog modal-dialog-centered">
         <div className="modal-content">
           <div className="modal-header">
             <h5 className="modal-title">Review Renter</h5>
-            <button type="button" className="btn-close" onClick={onClose}></button>
+            <button
+              type="button"
+              className="btn-close"
+              onClick={onClose}
+            ></button>
           </div>
           <form onSubmit={handleSubmit}>
             <div className="modal-body">
-              {rental.renter && (
+              {rental.renter && rental.item && (
                 <div className="mb-4 text-center">
-                  <h6>{rental.renter.firstName} {rental.renter.lastName}</h6>
+                  <div className="d-flex justify-content-center mb-3">
+                    {rental.renter.profileImage ? (
+                      <img
+                        src={rental.renter.profileImage}
+                        alt={`${rental.renter.firstName} ${rental.renter.lastName}`}
+                        className="rounded-circle"
+                        style={{
+                          width: "60px",
+                          height: "60px",
+                          objectFit: "cover",
+                        }}
+                      />
+                    ) : (
+                      <div
+                        className="rounded-circle bg-primary d-flex align-items-center justify-content-center text-white fw-bold"
+                        style={{ width: "60px", height: "60px" }}
+                      >
+                        {rental.renter.firstName[0]}
+                        {rental.renter.lastName[0]}
+                      </div>
+                    )}
+                  </div>
+                  <h6 className="mb-1">
+                    {rental.renter.firstName} {rental.renter.lastName}
+                  </h6>
+                  <p className="mb-1 text-muted small">{rental.item.name}</p>
                   <small className="text-muted">
-                    Rental period: {new Date(rental.startDate).toLocaleDateString()} to {new Date(rental.endDate).toLocaleDateString()}
+                    {new Date(rental.startDate).toLocaleDateString()} to{" "}
+                    {new Date(rental.endDate).toLocaleDateString()}
                   </small>
                 </div>
               )}
@@ -80,53 +127,31 @@ const ReviewRenterModal: React.FC<ReviewRenterModalProps> = ({ show, onClose, re
               )}
 
               <div className="mb-3">
-                <label className="form-label">Rating</label>
-                <div className="d-flex justify-content-center gap-1" style={{ fontSize: '2rem' }}>
+                <div
+                  className="d-flex justify-content-center gap-1"
+                  style={{ fontSize: "2rem" }}
+                >
                   {[1, 2, 3, 4, 5].map((star) => (
                     <button
                       key={star}
                       type="button"
                       className="btn btn-link p-0 text-decoration-none"
                       onClick={() => handleStarClick(star)}
-                      style={{ color: star <= rating ? '#ffc107' : '#dee2e6' }}
+                      style={{ color: star <= rating ? "#ffc107" : "#dee2e6" }}
                     >
-                      <i className={`bi ${star <= rating ? 'bi-star-fill' : 'bi-star'}`}></i>
+                      <i
+                        className={`bi ${
+                          star <= rating ? "bi-star-fill" : "bi-star"
+                        }`}
+                      ></i>
                     </button>
                   ))}
                 </div>
-                <div className="text-center mt-2">
-                  <small className="text-muted">
-                    {rating === 1 && 'Poor'}
-                    {rating === 2 && 'Fair'}
-                    {rating === 3 && 'Good'}
-                    {rating === 4 && 'Very Good'}
-                    {rating === 5 && 'Excellent'}
-                  </small>
-                </div>
-              </div>
-
-              <div className="mb-3">
-                <label htmlFor="review" className="form-label">
-                  Public Review <span className="text-danger">*</span>
-                </label>
-                <textarea
-                  className="form-control"
-                  id="review"
-                  rows={4}
-                  value={review}
-                  onChange={(e) => setReview(e.target.value)}
-                  placeholder="Share your experience with this renter..."
-                  required
-                  disabled={submitting}
-                ></textarea>
-                <small className="text-muted">
-                  This will be visible to everyone. Consider communication, condition of returned item, timeliness, and overall experience.
-                </small>
               </div>
 
               <div className="mb-3">
                 <label htmlFor="privateMessage" className="form-label">
-                  Private Message to Renter <span className="text-muted">(Optional)</span>
+                  Private Message to Renter{" "}
                 </label>
                 <textarea
                   className="form-control"
@@ -134,12 +159,24 @@ const ReviewRenterModal: React.FC<ReviewRenterModalProps> = ({ show, onClose, re
                   rows={3}
                   value={privateMessage}
                   onChange={(e) => setPrivateMessage(e.target.value)}
-                  placeholder="Send a private message to the renter (only they will see this)..."
+                  placeholder=""
+                  disabled={submitting}
+                ></textarea>
+              </div>
+
+              <div className="mb-3">
+                <label htmlFor="review" className="form-label">
+                  Public Review
+                </label>
+                <textarea
+                  className="form-control"
+                  id="review"
+                  rows={4}
+                  value={review}
+                  onChange={(e) => setReview(e.target.value)}
+                  placeholder=""
                   disabled={submitting}
                 ></textarea>
-                <small className="text-muted">
-                  This message will only be visible to the renter. Use this for specific feedback or suggestions.
-                </small>
               </div>
             </div>
             <div className="modal-footer">
@@ -158,17 +195,28 @@ const ReviewRenterModal: React.FC<ReviewRenterModalProps> = ({ show, onClose, re
               >
                 {submitting ? (
                   <>
-                    <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                    <span
+                      className="spinner-border spinner-border-sm me-2"
+                      role="status"
+                      aria-hidden="true"
+                    ></span>
                     Submitting...
                   </>
                 ) : (
-                  'Submit Review'
+                  "Submit Review"
                 )}
               </button>
             </div>
           </form>
         </div>
       </div>
+      
+      <SuccessModal
+        show={showSuccessModal}
+        onClose={handleSuccessModalClose}
+        title="Thank you for your review!"
+        message={successMessage}
+      />
     </div>
   );
 };

frontend/src/components/StarRating.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+interface StarRatingProps {
+  rating: number;
+  size?: 'small' | 'medium' | 'large';
+  className?: string;
+}
+
+const StarRating: React.FC<StarRatingProps> = ({ 
+  rating, 
+  size = 'small', 
+  className = '' 
+}) => {
+  const getSizeStyle = () => {
+    switch (size) {
+      case 'large':
+        return { fontSize: '1.5rem' };
+      case 'medium':
+        return { fontSize: '1.2rem' };
+      case 'small':
+      default:
+        return { fontSize: '1rem' };
+    }
+  };
+
+  const renderStars = () => {
+    const stars = [];
+    const fullStars = Math.floor(rating);
+    const hasHalfStar = rating % 1 !== 0;
+
+    // Render filled stars
+    for (let i = 0; i < fullStars; i++) {
+      stars.push(
+        <i
+          key={`filled-${i}`}
+          className="bi bi-star-fill"
+          style={{ color: '#ffc107' }}
+        ></i>
+      );
+    }
+
+    // Render half star if needed
+    if (hasHalfStar) {
+      stars.push(
+        <i
+          key="half"
+          className="bi bi-star-half"
+          style={{ color: '#ffc107' }}
+        ></i>
+      );
+    }
+
+    // Render empty stars
+    const emptyStars = 5 - Math.ceil(rating);
+    for (let i = 0; i < emptyStars; i++) {
+      stars.push(
+        <i
+          key={`empty-${i}`}
+          className="bi bi-star"
+          style={{ color: '#dee2e6' }}
+        ></i>
+      );
+    }
+
+    return stars;
+  };
+
+  return (
+    <div className={`d-inline-flex align-items-center gap-1 ${className}`} style={getSizeStyle()}>
+      {renderStars()}
+    </div>
+  );
+};
+
+export default StarRating;

frontend/src/components/SuccessModal.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+interface SuccessModalProps {
+  show: boolean;
+  onClose: () => void;
+  title?: string;
+  message: string;
+}
+
+const SuccessModal: React.FC<SuccessModalProps> = ({ 
+  show, 
+  onClose, 
+  title = "Success!",
+  message 
+}) => {
+  if (!show) return null;
+
+  return (
+    <div 
+      className="modal d-block" 
+      tabIndex={-1} 
+      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+    >
+      <div className="modal-dialog modal-dialog-centered">
+        <div className="modal-content">
+          <div className="modal-header border-0 pb-0">
+            <div className="w-100 text-center">
+              <div 
+                className="mx-auto mb-3 d-flex align-items-center justify-content-center bg-success rounded-circle"
+                style={{ width: '60px', height: '60px' }}
+              >
+                <i className="bi bi-check-lg text-white" style={{ fontSize: '2rem' }}></i>
+              </div>
+              <h5 className="modal-title">{title}</h5>
+            </div>
+            <button 
+              type="button" 
+              className="btn-close" 
+              onClick={onClose}
+            ></button>
+          </div>
+          <div className="modal-body text-center pt-0">
+            <p className="mb-4">{message}</p>
+          </div>
+          <div className="modal-footer border-0 pt-0 justify-content-center">
+            <button 
+              type="button" 
+              className="btn btn-primary px-4"
+              onClick={onClose}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SuccessModal;

frontend/src/pages/MyListings.tsx

@@ -36,7 +36,8 @@ const MyListings: React.FC = () => {
   const [error, setError] = useState("");
   // Owner rental management state
   const [showReviewRenterModal, setShowReviewRenterModal] = useState(false);
-  const [selectedRentalForReview, setSelectedRentalForReview] = useState<Rental | null>(null);
+  const [selectedRentalForReview, setSelectedRentalForReview] =
+    useState<Rental | null>(null);
 
   useEffect(() => {
     fetchMyListings();
@@ -127,7 +128,7 @@ const MyListings: React.FC = () => {
 
   const handleCompleteClick = async (rental: Rental) => {
     try {
-      console.log('Marking rental as completed:', rental.id);
+      console.log("Marking rental as completed:", rental.id);
       await rentalAPI.markAsCompleted(rental.id);
 
       setSelectedRentalForReview(rental);
@@ -135,8 +136,11 @@ const MyListings: React.FC = () => {
 
       fetchOwnerRentals();
     } catch (err: any) {
-      console.error('Error marking rental as completed:', err);
-      alert("Failed to mark rental as completed: " + (err.response?.data?.error || err.message));
+      console.error("Error marking rental as completed:", err);
+      alert(
+        "Failed to mark rental as completed: " +
+          (err.response?.data?.error || err.message)
+      );
     }
   };
 
@@ -145,12 +149,15 @@ const MyListings: React.FC = () => {
   };
 
   // Filter owner rentals
-  const allOwnerRentals = ownerRentals.filter((r) => 
-    ["pending", "confirmed", "active"].includes(r.status)
-  ).sort((a, b) => {
-    const statusOrder = { "pending": 0, "confirmed": 1, "active": 2 };
-    return statusOrder[a.status as keyof typeof statusOrder] - statusOrder[b.status as keyof typeof statusOrder];
-  });
+  const allOwnerRentals = ownerRentals
+    .filter((r) => ["pending", "confirmed", "active"].includes(r.status))
+    .sort((a, b) => {
+      const statusOrder = { pending: 0, confirmed: 1, active: 2 };
+      return (
+        statusOrder[a.status as keyof typeof statusOrder] -
+        statusOrder[b.status as keyof typeof statusOrder]
+      );
+    });
 
   if (loading) {
     return (
@@ -167,7 +174,7 @@ const MyListings: React.FC = () => {
   return (
     <div className="container mt-4">
       <div className="d-flex justify-content-between align-items-center mb-4">
-        <h1>My Listings</h1>
+        <h1>Owning</h1>
         <Link to="/create-item" className="btn btn-primary">
           Add New Item
         </Link>
@@ -184,7 +191,7 @@ const MyListings: React.FC = () => {
         <div className="mb-5">
           <h4 className="mb-3">
             <i className="bi bi-calendar-check me-2"></i>
-            Rental Requests ({allOwnerRentals.length})
+            Rental Requests
           </h4>
           <div className="row">
             {allOwnerRentals.map((rental) => (
@@ -205,24 +212,35 @@ const MyListings: React.FC = () => {
 
                     {rental.renter && (
                       <p className="mb-1 text-dark small">
-                        <strong>Renter:</strong> {rental.renter.firstName} {rental.renter.lastName}
+                        <strong>Renter:</strong> {rental.renter.firstName}{" "}
+                        {rental.renter.lastName}
                       </p>
                     )}
 
                     <div className="mb-2">
-                      <span className={`badge ${
-                        rental.status === "active" ? "bg-success" :
-                        rental.status === "pending" ? "bg-warning" :
-                        rental.status === "confirmed" ? "bg-info" : "bg-danger"
-                      }`}>
-                        {rental.status.charAt(0).toUpperCase() + rental.status.slice(1)}
+                      <span
+                        className={`badge ${
+                          rental.status === "active"
+                            ? "bg-success"
+                            : rental.status === "pending"
+                            ? "bg-warning"
+                            : rental.status === "confirmed"
+                            ? "bg-info"
+                            : "bg-danger"
+                        }`}
+                      >
+                        {rental.status.charAt(0).toUpperCase() +
+                          rental.status.slice(1)}
                       </span>
                     </div>
 
                     <p className="mb-1 text-dark small">
                       <strong>Period:</strong>
                       <br />
-                      {formatDateTime(rental.startDate, rental.startTime)} - {formatDateTime(rental.endDate, rental.endTime)}
+                      {formatDateTime(
+                        rental.startDate,
+                        rental.startTime
+                      )} - {formatDateTime(rental.endDate, rental.endTime)}
                     </p>
 
                     <p className="mb-1 text-dark small">
@@ -231,7 +249,10 @@ const MyListings: React.FC = () => {
 
                     {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>
+                        <strong>
+                          <i className="bi bi-envelope-fill me-1"></i>Private
+                          Note from Renter:
+                        </strong>
                         <br />
                         {rental.itemPrivateMessage}
                       </div>
@@ -254,7 +275,8 @@ const MyListings: React.FC = () => {
                           </button>
                         </>
                       )}
-                      {(rental.status === "active" || rental.status === "confirmed") && (
+                      {(rental.status === "active" ||
+                        rental.status === "confirmed") && (
                         <button
                           className="btn btn-sm btn-success"
                           onClick={() => handleCompleteClick(rental)}
@@ -273,7 +295,7 @@ const MyListings: React.FC = () => {
 
       <h4 className="mb-3">
         <i className="bi bi-list-ul me-2"></i>
-        My Items ({listings.length})
+        Listings
       </h4>
 
       {listings.length === 0 ? (
@@ -325,16 +347,24 @@ const MyListings: React.FC = () => {
                   <div className="mb-3">
                     {(() => {
                       const hasAnyPositivePrice =
-                        (item.pricePerHour !== undefined && Number(item.pricePerHour) > 0) ||
-                        (item.pricePerDay !== undefined && Number(item.pricePerDay) > 0) ||
-                        (item.pricePerWeek !== undefined && Number(item.pricePerWeek) > 0) ||
-                        (item.pricePerMonth !== undefined && Number(item.pricePerMonth) > 0);
+                        (item.pricePerHour !== undefined &&
+                          Number(item.pricePerHour) > 0) ||
+                        (item.pricePerDay !== undefined &&
+                          Number(item.pricePerDay) > 0) ||
+                        (item.pricePerWeek !== undefined &&
+                          Number(item.pricePerWeek) > 0) ||
+                        (item.pricePerMonth !== undefined &&
+                          Number(item.pricePerMonth) > 0);
 
                       const hasAnyZeroPrice =
-                        (item.pricePerHour !== undefined && Number(item.pricePerHour) === 0) ||
-                        (item.pricePerDay !== undefined && Number(item.pricePerDay) === 0) ||
-                        (item.pricePerWeek !== undefined && Number(item.pricePerWeek) === 0) ||
-                        (item.pricePerMonth !== undefined && Number(item.pricePerMonth) === 0);
+                        (item.pricePerHour !== undefined &&
+                          Number(item.pricePerHour) === 0) ||
+                        (item.pricePerDay !== undefined &&
+                          Number(item.pricePerDay) === 0) ||
+                        (item.pricePerWeek !== undefined &&
+                          Number(item.pricePerWeek) === 0) ||
+                        (item.pricePerMonth !== undefined &&
+                          Number(item.pricePerMonth) === 0);
 
                       if (!hasAnyPositivePrice && hasAnyZeroPrice) {
                         return (
@@ -351,21 +381,24 @@ const MyListings: React.FC = () => {
                               ${item.pricePerDay}/day
                             </div>
                           )}
-                          {item.pricePerHour && Number(item.pricePerHour) > 0 && (
-                            <div className="text-muted small">
-                              ${item.pricePerHour}/hour
-                            </div>
-                          )}
-                          {item.pricePerWeek && Number(item.pricePerWeek) > 0 && (
-                            <div className="text-muted small">
-                              ${item.pricePerWeek}/week
-                            </div>
-                          )}
-                          {item.pricePerMonth && Number(item.pricePerMonth) > 0 && (
-                            <div className="text-muted small">
-                              ${item.pricePerMonth}/month
-                            </div>
-                          )}
+                          {item.pricePerHour &&
+                            Number(item.pricePerHour) > 0 && (
+                              <div className="text-muted small">
+                                ${item.pricePerHour}/hour
+                              </div>
+                            )}
+                          {item.pricePerWeek &&
+                            Number(item.pricePerWeek) > 0 && (
+                              <div className="text-muted small">
+                                ${item.pricePerWeek}/week
+                              </div>
+                            )}
+                          {item.pricePerMonth &&
+                            Number(item.pricePerMonth) > 0 && (
+                              <div className="text-muted small">
+                                ${item.pricePerMonth}/month
+                              </div>
+                            )}
                         </>
                       );
                     })()}
@@ -400,7 +433,6 @@ const MyListings: React.FC = () => {
         </div>
       )}
 
-
       {/* Review Modal */}
       {selectedRentalForReview && (
         <ReviewRenterModal

frontend/src/pages/Profile.tsx

@@ -6,6 +6,8 @@ import { getImageUrl } from "../utils/imageUrl";
 import AvailabilitySettings from "../components/AvailabilitySettings";
 import ReviewItemModal from "../components/ReviewModal";
 import ReviewRenterModal from "../components/ReviewRenterModal";
+import StarRating from "../components/StarRating";
+import ReviewDetailsModal from "../components/ReviewDetailsModal";
 
 const Profile: React.FC = () => {
   const { user, updateUser, logout } = useAuth();
@@ -69,7 +71,14 @@ const Profile: React.FC = () => {
   const [showReviewModal, setShowReviewModal] = useState(false);
   const [showReviewRenterModal, setShowReviewRenterModal] = useState(false);
   const [selectedRental, setSelectedRental] = useState<Rental | null>(null);
-  const [selectedRentalForReview, setSelectedRentalForReview] = useState<Rental | null>(null);
+  const [selectedRentalForReview, setSelectedRentalForReview] =
+    useState<Rental | null>(null);
+  const [showReviewDetailsModal, setShowReviewDetailsModal] = useState(false);
+  const [selectedRentalForDetails, setSelectedRentalForDetails] =
+    useState<Rental | null>(null);
+  const [reviewDetailsUserType, setReviewDetailsUserType] = useState<
+    "renter" | "owner"
+  >("renter");
 
   useEffect(() => {
     fetchProfile();
@@ -212,7 +221,10 @@ const Profile: React.FC = () => {
       setShowReviewRenterModal(true);
       fetchRentalHistory(); // Refresh rental history
     } catch (err: any) {
-      alert("Failed to mark rental as completed: " + (err.response?.data?.error || err.message));
+      alert(
+        "Failed to mark rental as completed: " +
+          (err.response?.data?.error || err.message)
+      );
     }
   };
 
@@ -220,6 +232,20 @@ const Profile: React.FC = () => {
     fetchRentalHistory(); // Refresh to show updated review status
   };
 
+  const handleViewReviewDetails = (
+    rental: Rental,
+    userType: "renter" | "owner"
+  ) => {
+    setSelectedRentalForDetails(rental);
+    setReviewDetailsUserType(userType);
+    setShowReviewDetailsModal(true);
+  };
+
+  const handleCloseReviewDetails = () => {
+    setShowReviewDetailsModal(false);
+    setSelectedRentalForDetails(null);
+  };
+
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
@@ -787,37 +813,56 @@ const Profile: React.FC = () => {
                       </h5>
                       <div className="row">
                         {pastRenterRentals.map((rental) => (
-                          <div key={rental.id} className="col-md-6 col-lg-4 mb-4">
+                          <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" }}
+                                  style={{
+                                    height: "150px",
+                                    objectFit: "cover",
+                                  }}
                                 />
                               )}
                               <div className="card-body">
                                 <h6 className="card-title">
-                                  {rental.item ? rental.item.name : "Item Unavailable"}
+                                  {rental.item
+                                    ? rental.item.name
+                                    : "Item Unavailable"}
                                 </h6>
 
                                 <div className="mb-2">
                                   <span
                                     className={`badge ${
-                                      rental.status === "completed" ? "bg-success" : "bg-danger"
+                                      rental.status === "completed"
+                                        ? "bg-success"
+                                        : "bg-danger"
                                     }`}
                                   >
-                                    {rental.status.charAt(0).toUpperCase() + rental.status.slice(1)}
+                                    {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)}
+                                  <strong>Start:</strong>{" "}
+                                  {formatDateTime(
+                                    rental.startDate,
+                                    rental.startTime
+                                  )}
                                   <br />
-                                  <strong>End:</strong> {formatDateTime(rental.endDate, rental.endTime)}
+                                  <strong>End:</strong>{" "}
+                                  {formatDateTime(
+                                    rental.endDate,
+                                    rental.endTime
+                                  )}
                                 </p>
 
                                 <p className="mb-1 small">
@@ -826,51 +871,64 @@ const Profile: React.FC = () => {
 
                                 {rental.owner && (
                                   <p className="mb-1 small">
-                                    <strong>Owner:</strong> {rental.owner.firstName} {rental.owner.lastName}
+                                    <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>
-                                )}
+                                {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 && (
+                                  {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.renterPrivateMessage &&
+                                    rental.renterReviewVisible) ||
+                                    (rental.itemReviewVisible &&
+                                      rental.itemRating)) && (
                                     <button
-                                      className="btn btn-sm btn-primary"
-                                      onClick={() => handleReviewClick(rental)}
+                                      className="btn btn-sm btn-outline-primary mt-2"
+                                      onClick={() =>
+                                        handleViewReviewDetails(
+                                          rental,
+                                          "renter"
+                                        )
+                                      }
                                     >
-                                      Review
+                                      View Review Details
                                     </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>
-                                  )}
+                                  {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>
@@ -889,79 +947,102 @@ const Profile: React.FC = () => {
                       </h5>
                       <div className="row">
                         {pastOwnerRentals.map((rental) => (
-                          <div key={rental.id} className="col-md-6 col-lg-4 mb-4">
+                          <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" }}
+                                  style={{
+                                    height: "150px",
+                                    objectFit: "cover",
+                                  }}
                                 />
                               )}
                               <div className="card-body">
                                 <h6 className="card-title">
-                                  {rental.item ? rental.item.name : "Item Unavailable"}
+                                  {rental.item
+                                    ? rental.item.name
+                                    : "Item Unavailable"}
                                 </h6>
 
                                 {rental.renter && (
                                   <p className="mb-1 small">
-                                    <strong>Renter:</strong> {rental.renter.firstName} {rental.renter.lastName}
+                                    <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 === "completed"
+                                        ? "bg-success"
+                                        : "bg-danger"
                                     }`}
                                   >
-                                    {rental.status.charAt(0).toUpperCase() + rental.status.slice(1)}
+                                    {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)}
+                                  {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 && (
+                                  {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.itemPrivateMessage &&
+                                    rental.itemReviewVisible) ||
+                                    (rental.renterReviewVisible &&
+                                      rental.renterRating)) && (
                                     <button
-                                      className="btn btn-sm btn-primary"
-                                      onClick={() => {
-                                        setSelectedRentalForReview(rental);
-                                        setShowReviewRenterModal(true);
-                                      }}
+                                      className="btn btn-sm btn-outline-primary mt-2"
+                                      onClick={() =>
+                                        handleViewReviewDetails(rental, "owner")
+                                      }
                                     >
-                                      Review Renter
+                                      View Review Details
                                     </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>
@@ -972,13 +1053,20 @@ const Profile: React.FC = () => {
                   )}
 
                   {/* 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>
-                  )}
+                  {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>
@@ -1354,6 +1442,16 @@ const Profile: React.FC = () => {
           onSuccess={handleReviewRenterSuccess}
         />
       )}
+
+      {/* Review Details Modal */}
+      {selectedRentalForDetails && (
+        <ReviewDetailsModal
+          show={showReviewDetailsModal}
+          onClose={handleCloseReviewDetails}
+          rental={selectedRentalForDetails}
+          userType={reviewDetailsUserType}
+        />
+      )}
     </div>
   );
 };