restructuring for rental requests. started double blind reviews

frontend/src/components/AuthModal.tsx

@@ -310,7 +310,7 @@ const AuthModal: React.FC<AuthModalProps> = ({
                         <input
                           type="tel"
                           className="form-control"
-                          placeholder="(555) 123-4567"
+                          placeholder="(123) 456-7890"
                           value={phoneNumber}
                           onChange={handlePhoneChange}
                           required

frontend/src/components/Navbar.tsx

@@ -148,18 +148,18 @@ const Navbar: React.FC = () => {
                           <li>
                             <Link className="dropdown-item" to="/my-rentals">
                               <i className="bi bi-calendar-check me-2"></i>
-                              Rentals
+                              Renting
                             </Link>
                           </li>
                           <li>
                             <Link className="dropdown-item" to="/my-listings">
-                              <i className="bi bi-list-ul me-2"></i>Listings
+                              <i className="bi bi-list-ul me-2"></i>Owning
                             </Link>
                           </li>
                           <li>
                             <Link className="dropdown-item" to="/my-requests">
                               <i className="bi bi-clipboard-check me-2"></i>
-                              Requests
+                              Looking For
                             </Link>
                           </li>
                           <li>

frontend/src/components/ReviewModal.tsx

@@ -2,16 +2,17 @@ import React, { useState } from 'react';
 import { rentalAPI } from '../services/api';
 import { Rental } from '../types';
 
-interface ReviewModalProps {
+interface ReviewItemModalProps {
   show: boolean;
   onClose: () => void;
   rental: Rental;
   onSuccess: () => void;
 }
 
-const ReviewModal: React.FC<ReviewModalProps> = ({ 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 [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -21,16 +22,25 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ show, onClose, rental, onSucc
     setSubmitting(true);
 
     try {
-      await rentalAPI.addReview(rental.id, {
+      const response = await rentalAPI.reviewItem(rental.id, {
         rating,
-        review
+        review,
+        privateMessage
       });
 
       // Reset form
       setRating(5);
       setReview('');
+      setPrivateMessage('');
       onSuccess();
       onClose();
+
+      // Show success message based on review visibility
+      if (response.data.reviewVisible) {
+        alert('Review published successfully!');
+      } else {
+        alert('Review submitted! It will be published when both parties have reviewed or after 10 minutes.');
+      }
     } catch (err: any) {
       setError(err.response?.data?.error || 'Failed to submit review');
     } finally {
@@ -49,7 +59,7 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ show, onClose, rental, onSucc
       <div className="modal-dialog modal-dialog-centered">
         <div className="modal-content">
           <div className="modal-header">
-            <h5 className="modal-title">Review Your Rental</h5>
+            <h5 className="modal-title">Review Item</h5>
             <button type="button" className="btn-close" onClick={onClose}></button>
           </div>
           <form onSubmit={handleSubmit}>
@@ -96,7 +106,9 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ show, onClose, rental, onSucc
               </div>
 
               <div className="mb-3">
-                <label htmlFor="review" className="form-label">Your Review</label>
+                <label htmlFor="review" className="form-label">
+                  Public Review <span className="text-danger">*</span>
+                </label>
                 <textarea
                   className="form-control"
                   id="review"
@@ -108,7 +120,25 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ show, onClose, rental, onSucc
                   disabled={submitting}
                 ></textarea>
                 <small className="text-muted">
-                  Tell others about the item condition, owner communication, and overall experience
+                  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>
+                </label>
+                <textarea
+                  className="form-control"
+                  id="privateMessage"
+                  rows={3}
+                  value={privateMessage}
+                  onChange={(e) => setPrivateMessage(e.target.value)}
+                  placeholder="Send a private message to the owner (only they will see this)..."
+                  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>
@@ -143,4 +173,4 @@ const ReviewModal: React.FC<ReviewModalProps> = ({ show, onClose, rental, onSucc
   );
 };
 
-export default ReviewModal;
+export default ReviewItemModal;

frontend/src/components/ReviewRenterModal.tsx

@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+import { rentalAPI } from '../services/api';
+import { Rental } from '../types';
+
+interface ReviewRenterModalProps {
+  show: boolean;
+  onClose: () => void;
+  rental: Rental;
+  onSuccess: () => void;
+}
+
+const ReviewRenterModal: React.FC<ReviewRenterModalProps> = ({ show, onClose, rental, onSuccess }) => {
+  const [rating, setRating] = useState(5);
+  const [review, setReview] = useState('');
+  const [privateMessage, setPrivateMessage] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+
+    try {
+      const response = await rentalAPI.reviewRenter(rental.id, {
+        rating,
+        review,
+        privateMessage
+      });
+
+      // Reset form
+      setRating(5);
+      setReview('');
+      setPrivateMessage('');
+      onSuccess();
+      onClose();
+
+      // Show success message based on review visibility
+      if (response.data.reviewVisible) {
+        alert('Review published successfully!');
+      } else {
+        alert('Review submitted! It will be published when both parties have reviewed or after 10 minutes.');
+      }
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Failed to submit review');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleStarClick = (value: number) => {
+    setRating(value);
+  };
+
+  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">
+            <h5 className="modal-title">Review Renter</h5>
+            <button type="button" className="btn-close" onClick={onClose}></button>
+          </div>
+          <form onSubmit={handleSubmit}>
+            <div className="modal-body">
+              {rental.renter && (
+                <div className="mb-4 text-center">
+                  <h6>{rental.renter.firstName} {rental.renter.lastName}</h6>
+                  <small className="text-muted">
+                    Rental period: {new Date(rental.startDate).toLocaleDateString()} to {new Date(rental.endDate).toLocaleDateString()}
+                  </small>
+                </div>
+              )}
+
+              {error && (
+                <div className="alert alert-danger" role="alert">
+                  {error}
+                </div>
+              )}
+              
+              <div className="mb-3">
+                <label className="form-label">Rating</label>
+                <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' }}
+                    >
+                      <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>
+                </label>
+                <textarea
+                  className="form-control"
+                  id="privateMessage"
+                  rows={3}
+                  value={privateMessage}
+                  onChange={(e) => setPrivateMessage(e.target.value)}
+                  placeholder="Send a private message to the renter (only they will see this)..."
+                  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">
+              <button 
+                type="button" 
+                className="btn btn-secondary" 
+                onClick={onClose}
+                disabled={submitting}
+              >
+                Cancel
+              </button>
+              <button 
+                type="submit" 
+                className="btn btn-primary"
+                disabled={submitting || !review.trim()}
+              >
+                {submitting ? (
+                  <>
+                    <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                    Submitting...
+                  </>
+                ) : (
+                  'Submit Review'
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReviewRenterModal;