messages and reviews

frontend/src/pages/ItemDetail.tsx

@@ -3,6 +3,8 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { Item, Rental } from '../types';
 import { useAuth } from '../contexts/AuthContext';
 import { itemAPI, rentalAPI } from '../services/api';
+import LocationMap from '../components/LocationMap';
+import ItemReviews from '../components/ItemReviews';
 
 const ItemDetail: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -116,6 +118,30 @@ const ItemDetail: React.FC = () => {
             <div className="col-md-8">
           <h1>{item.name}</h1>
           <p className="text-muted">{item.location}</p>
+          {item.owner && (
+            <div 
+              className="d-flex align-items-center mt-2 mb-3"
+              onClick={() => navigate(`/users/${item.ownerId}`)}
+              style={{ cursor: 'pointer' }}
+            >
+              {item.owner.profileImage ? (
+                <img
+                  src={item.owner.profileImage}
+                  alt={`${item.owner.firstName} ${item.owner.lastName}`}
+                  className="rounded-circle me-2"
+                  style={{ width: '30px', height: '30px', objectFit: 'cover' }}
+                />
+              ) : (
+                <div 
+                  className="rounded-circle bg-secondary d-flex align-items-center justify-content-center me-2"
+                  style={{ width: '30px', height: '30px' }}
+                >
+                  <i className="bi bi-person-fill text-white" style={{ fontSize: '0.8rem' }}></i>
+                </div>
+              )}
+              <span className="text-muted">{item.owner.firstName} {item.owner.lastName}</span>
+            </div>
+          )}
           
           <div className="mb-3">
             {item.tags.map((tag, index) => (
@@ -165,6 +191,13 @@ const ItemDetail: React.FC = () => {
             )}
           </div>
 
+          <LocationMap 
+            latitude={item.latitude}
+            longitude={item.longitude}
+            location={item.location}
+            itemName={item.name}
+          />
+
           {item.rules && (
             <div className="mb-4">
               <h5>Rules</h5>
@@ -172,6 +205,8 @@ const ItemDetail: React.FC = () => {
             </div>
           )}
 
+          <ItemReviews itemId={item.id} />
+
           <div className="d-flex gap-2">
             {isOwner ? (
               <button className="btn btn-primary" onClick={handleEdit}>