restructuring for rental requests. started double blind reviews
This commit is contained in:
jackiettran
@@ -110,15 +110,80 @@ const ItemDetail: React.FC = () => {
|
||||
setTotalCost(cost);
|
||||
};
|
||||
|
||||
const generateTimeOptions = () => {
|
||||
const generateTimeOptions = (item: Item | null, selectedDate: string) => {
|
||||
const options = [];
|
||||
let availableAfter = "00:00";
|
||||
let availableBefore = "23:59";
|
||||
|
||||
console.log('generateTimeOptions called with:', {
|
||||
itemId: item?.id,
|
||||
selectedDate,
|
||||
hasItem: !!item
|
||||
});
|
||||
|
||||
// Determine time constraints only if we have both item and a valid selected date
|
||||
if (item && selectedDate && selectedDate.trim() !== "") {
|
||||
const date = new Date(selectedDate);
|
||||
const dayName = date.toLocaleDateString('en-US', { weekday: 'long' }).toLowerCase() as
|
||||
'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
|
||||
|
||||
console.log('Date analysis:', {
|
||||
selectedDate,
|
||||
dayName,
|
||||
specifyTimesPerDay: item.specifyTimesPerDay,
|
||||
hasWeeklyTimes: !!item.weeklyTimes,
|
||||
globalAvailableAfter: item.availableAfter,
|
||||
globalAvailableBefore: item.availableBefore
|
||||
});
|
||||
|
||||
// Use day-specific times if available
|
||||
if (item.specifyTimesPerDay && item.weeklyTimes && item.weeklyTimes[dayName]) {
|
||||
const dayTimes = item.weeklyTimes[dayName];
|
||||
availableAfter = dayTimes.availableAfter;
|
||||
availableBefore = dayTimes.availableBefore;
|
||||
console.log('Using day-specific times:', { availableAfter, availableBefore });
|
||||
}
|
||||
// Otherwise use global times
|
||||
else if (item.availableAfter && item.availableBefore) {
|
||||
availableAfter = item.availableAfter;
|
||||
availableBefore = item.availableBefore;
|
||||
console.log('Using global times:', { availableAfter, availableBefore });
|
||||
} else {
|
||||
console.log('No time constraints found, using default 24-hour availability');
|
||||
}
|
||||
} else {
|
||||
console.log('Missing item or selectedDate, using default 24-hour availability');
|
||||
}
|
||||
|
||||
for (let hour = 0; hour < 24; hour++) {
|
||||
const time24 = `${hour.toString().padStart(2, "0")}:00`;
|
||||
const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
|
||||
const period = hour < 12 ? "AM" : "PM";
|
||||
const time12 = `${hour12}:00 ${period}`;
|
||||
options.push({ value: time24, label: time12 });
|
||||
|
||||
// Ensure consistent format for comparison (normalize to HH:MM)
|
||||
const normalizedAvailableAfter = availableAfter.length === 5 ? availableAfter : availableAfter + ":00";
|
||||
const normalizedAvailableBefore = availableBefore.length === 5 ? availableBefore : availableBefore + ":00";
|
||||
|
||||
// Check if this time is within the available range
|
||||
if (time24 >= normalizedAvailableAfter && time24 <= normalizedAvailableBefore) {
|
||||
const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
|
||||
const period = hour < 12 ? "AM" : "PM";
|
||||
const time12 = `${hour12}:00 ${period}`;
|
||||
options.push({ value: time24, label: time12 });
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Time filtering results:', {
|
||||
availableAfter,
|
||||
availableBefore,
|
||||
optionsGenerated: options.length,
|
||||
firstFewOptions: options.slice(0, 3)
|
||||
});
|
||||
|
||||
// If no options are available, return at least one option to prevent empty dropdown
|
||||
if (options.length === 0) {
|
||||
console.log('No valid time options found, showing Not Available');
|
||||
options.push({ value: "00:00", label: "Not Available" });
|
||||
}
|
||||
|
||||
return options;
|
||||
};
|
||||
|
||||
@@ -126,6 +191,34 @@ const ItemDetail: React.FC = () => {
|
||||
calculateTotalCost();
|
||||
}, [rentalDates, item]);
|
||||
|
||||
// Validate and adjust selected times based on item availability
|
||||
useEffect(() => {
|
||||
if (!item) return;
|
||||
|
||||
const validateAndAdjustTime = (date: string, currentTime: string) => {
|
||||
if (!date) return currentTime;
|
||||
|
||||
const availableOptions = generateTimeOptions(item, date);
|
||||
if (availableOptions.length === 0) return currentTime;
|
||||
|
||||
// If current time is not in available options, use the first available time
|
||||
const isCurrentTimeValid = availableOptions.some(option => option.value === currentTime);
|
||||
return isCurrentTimeValid ? currentTime : availableOptions[0].value;
|
||||
};
|
||||
|
||||
const adjustedStartTime = validateAndAdjustTime(rentalDates.startDate, rentalDates.startTime);
|
||||
const adjustedEndTime = validateAndAdjustTime(rentalDates.endDate || rentalDates.startDate, rentalDates.endTime);
|
||||
|
||||
// Update state if times have changed
|
||||
if (adjustedStartTime !== rentalDates.startTime || adjustedEndTime !== rentalDates.endTime) {
|
||||
setRentalDates(prev => ({
|
||||
...prev,
|
||||
startTime: adjustedStartTime,
|
||||
endTime: adjustedEndTime
|
||||
}));
|
||||
}
|
||||
}, [item, rentalDates.startDate, rentalDates.endDate]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="container mt-5">
|
||||
@@ -392,8 +485,9 @@ const ItemDetail: React.FC = () => {
|
||||
handleDateTimeChange("startTime", e.target.value)
|
||||
}
|
||||
style={{ flex: '1 1 50%' }}
|
||||
disabled={!!(rentalDates.startDate && generateTimeOptions(item, rentalDates.startDate).every(opt => opt.label === "Not Available"))}
|
||||
>
|
||||
{generateTimeOptions().map((option) => (
|
||||
{generateTimeOptions(item, rentalDates.startDate).map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
@@ -425,8 +519,9 @@ const ItemDetail: React.FC = () => {
|
||||
handleDateTimeChange("endTime", e.target.value)
|
||||
}
|
||||
style={{ flex: '1 1 50%' }}
|
||||
disabled={!!((rentalDates.endDate || rentalDates.startDate) && generateTimeOptions(item, rentalDates.endDate || rentalDates.startDate).every(opt => opt.label === "Not Available"))}
|
||||
>
|
||||
{generateTimeOptions().map((option) => (
|
||||
{generateTimeOptions(item, rentalDates.endDate || rentalDates.startDate).map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
|
||||
@@ -4,18 +4,43 @@ import { useAuth } from "../contexts/AuthContext";
|
||||
import api from "../services/api";
|
||||
import { Item, Rental } from "../types";
|
||||
import { rentalAPI } from "../services/api";
|
||||
import ReviewRenterModal from "../components/ReviewRenterModal";
|
||||
|
||||
const MyListings: React.FC = () => {
|
||||
// Helper function to format time
|
||||
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 "";
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function to format date and time together
|
||||
const formatDateTime = (dateString: string, timeString?: string) => {
|
||||
const date = new Date(dateString).toLocaleDateString();
|
||||
const formattedTime = formatTime(timeString);
|
||||
return formattedTime ? `${date} at ${formattedTime}` : date;
|
||||
};
|
||||
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [listings, setListings] = useState<Item[]>([]);
|
||||
const [rentals, setRentals] = useState<Rental[]>([]);
|
||||
const [ownerRentals, setOwnerRentals] = useState<Rental[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
// Owner rental management state
|
||||
const [showReviewRenterModal, setShowReviewRenterModal] = useState(false);
|
||||
const [selectedRentalForReview, setSelectedRentalForReview] = useState<Rental | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMyListings();
|
||||
fetchRentalRequests();
|
||||
fetchOwnerRentals();
|
||||
}, [user]);
|
||||
|
||||
const fetchMyListings = async () => {
|
||||
@@ -23,7 +48,7 @@ const MyListings: React.FC = () => {
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(""); // Clear any previous errors
|
||||
setError("");
|
||||
const response = await api.get("/items");
|
||||
|
||||
// Filter items to only show ones owned by current user
|
||||
@@ -33,7 +58,6 @@ const MyListings: React.FC = () => {
|
||||
setListings(myItems);
|
||||
} catch (err: any) {
|
||||
console.error("Error fetching listings:", err);
|
||||
// Only show error for actual API failures
|
||||
if (err.response && err.response.status >= 500) {
|
||||
setError("Failed to get your listings. Please try again later.");
|
||||
}
|
||||
@@ -70,40 +94,64 @@ const MyListings: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const fetchRentalRequests = async () => {
|
||||
if (!user) return;
|
||||
|
||||
const fetchOwnerRentals = async () => {
|
||||
try {
|
||||
const response = await rentalAPI.getMyListings();
|
||||
setRentals(response.data);
|
||||
} catch (err) {
|
||||
console.error("Error fetching rental requests:", err);
|
||||
console.log("Owner rentals data from backend:", response.data);
|
||||
setOwnerRentals(response.data);
|
||||
} catch (err: any) {
|
||||
console.error("Failed to fetch owner rentals:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// Owner functionality handlers
|
||||
const handleAcceptRental = async (rentalId: string) => {
|
||||
try {
|
||||
await rentalAPI.updateRentalStatus(rentalId, "confirmed");
|
||||
// Refresh the rentals list
|
||||
fetchRentalRequests();
|
||||
fetchOwnerRentals();
|
||||
} catch (err) {
|
||||
console.error("Failed to accept rental request:", err);
|
||||
alert("Failed to accept rental request");
|
||||
}
|
||||
};
|
||||
|
||||
const handleRejectRental = async (rentalId: string) => {
|
||||
try {
|
||||
await api.put(`/rentals/${rentalId}/status`, {
|
||||
status: "cancelled",
|
||||
rejectionReason: "Request declined by owner",
|
||||
});
|
||||
// Refresh the rentals list
|
||||
fetchRentalRequests();
|
||||
await rentalAPI.updateRentalStatus(rentalId, "cancelled");
|
||||
fetchOwnerRentals();
|
||||
} catch (err) {
|
||||
console.error("Failed to reject rental request:", err);
|
||||
alert("Failed to reject rental request");
|
||||
}
|
||||
};
|
||||
|
||||
const handleCompleteClick = async (rental: Rental) => {
|
||||
try {
|
||||
console.log('Marking rental as completed:', rental.id);
|
||||
await rentalAPI.markAsCompleted(rental.id);
|
||||
|
||||
setSelectedRentalForReview(rental);
|
||||
setShowReviewRenterModal(true);
|
||||
|
||||
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));
|
||||
}
|
||||
};
|
||||
|
||||
const handleReviewRenterSuccess = () => {
|
||||
fetchOwnerRentals();
|
||||
};
|
||||
|
||||
// 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];
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="container mt-4">
|
||||
@@ -119,7 +167,7 @@ const MyListings: React.FC = () => {
|
||||
return (
|
||||
<div className="container mt-4">
|
||||
<div className="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1>Listings</h1>
|
||||
<h1>My Listings</h1>
|
||||
<Link to="/create-item" className="btn btn-primary">
|
||||
Add New Item
|
||||
</Link>
|
||||
@@ -131,26 +179,103 @@ const MyListings: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(() => {
|
||||
const pendingCount = rentals.filter(
|
||||
(r) => r.status === "pending"
|
||||
).length;
|
||||
{/* Rental Requests Section - Moved to top for priority */}
|
||||
{allOwnerRentals.length > 0 && (
|
||||
<div className="mb-5">
|
||||
<h4 className="mb-3">
|
||||
<i className="bi bi-calendar-check me-2"></i>
|
||||
Rental Requests ({allOwnerRentals.length})
|
||||
</h4>
|
||||
<div className="row">
|
||||
{allOwnerRentals.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: "200px", objectFit: "cover" }}
|
||||
/>
|
||||
)}
|
||||
<div className="card-body">
|
||||
<h5 className="card-title text-dark">
|
||||
{rental.item ? rental.item.name : "Item Unavailable"}
|
||||
</h5>
|
||||
|
||||
if (pendingCount > 0) {
|
||||
return (
|
||||
<div
|
||||
className="alert alert-info d-flex align-items-center"
|
||||
role="alert"
|
||||
>
|
||||
<i className="bi bi-bell-fill me-2"></i>
|
||||
You have {pendingCount} pending rental request
|
||||
{pendingCount > 1 ? "s" : ""} to review.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})()}
|
||||
{rental.renter && (
|
||||
<p className="mb-1 text-dark small">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<p className="mb-1 text-dark small">
|
||||
<strong>Period:</strong>
|
||||
<br />
|
||||
{formatDateTime(rental.startDate, rental.startTime)} - {formatDateTime(rental.endDate, rental.endTime)}
|
||||
</p>
|
||||
|
||||
<p className="mb-1 text-dark 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 === "pending" && (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-success"
|
||||
onClick={() => handleAcceptRental(rental.id)}
|
||||
>
|
||||
Accept
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleRejectRental(rental.id)}
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{(rental.status === "active" || rental.status === "confirmed") && (
|
||||
<button
|
||||
className="btn btn-sm btn-success"
|
||||
onClick={() => handleCompleteClick(rental)}
|
||||
>
|
||||
Complete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h4 className="mb-3">
|
||||
<i className="bi bi-list-ul me-2"></i>
|
||||
My Items ({listings.length})
|
||||
</h4>
|
||||
|
||||
{listings.length === 0 ? (
|
||||
<div className="text-center py-5">
|
||||
<p className="text-muted">You haven't listed any items yet.</p>
|
||||
@@ -162,210 +287,132 @@ const MyListings: React.FC = () => {
|
||||
<div className="row">
|
||||
{listings.map((item) => (
|
||||
<div key={item.id} className="col-md-6 col-lg-4 mb-4">
|
||||
<div
|
||||
className="card h-100"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (
|
||||
target.closest("button") ||
|
||||
target.closest("a") ||
|
||||
target.closest(".rental-requests")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
navigate(`/items/${item.id}`);
|
||||
}}
|
||||
>
|
||||
{item.images && item.images[0] && (
|
||||
<img
|
||||
src={item.images[0]}
|
||||
className="card-img-top"
|
||||
alt={item.name}
|
||||
style={{ height: "200px", objectFit: "cover" }}
|
||||
/>
|
||||
)}
|
||||
<div className="card-body">
|
||||
<h5 className="card-title text-dark">{item.name}</h5>
|
||||
<p className="card-text text-truncate text-dark">
|
||||
{item.description}
|
||||
</p>
|
||||
<div
|
||||
className="card h-100"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.closest("button") || target.closest("a")) {
|
||||
return;
|
||||
}
|
||||
navigate(`/items/${item.id}`);
|
||||
}}
|
||||
>
|
||||
{item.images && item.images[0] && (
|
||||
<img
|
||||
src={item.images[0]}
|
||||
className="card-img-top"
|
||||
alt={item.name}
|
||||
style={{ height: "200px", objectFit: "cover" }}
|
||||
/>
|
||||
)}
|
||||
<div className="card-body">
|
||||
<h5 className="card-title text-dark">{item.name}</h5>
|
||||
<p className="card-text text-truncate text-dark">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
<div className="mb-2">
|
||||
<span
|
||||
className={`badge ${
|
||||
item.availability ? "bg-success" : "bg-secondary"
|
||||
}`}
|
||||
>
|
||||
{item.availability ? "Available" : "Not Available"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
{item.pricePerDay && (
|
||||
<div className="text-muted small">
|
||||
${item.pricePerDay}/day
|
||||
</div>
|
||||
)}
|
||||
{item.pricePerHour && (
|
||||
<div className="text-muted small">
|
||||
${item.pricePerHour}/hour
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="d-flex gap-2">
|
||||
<Link
|
||||
to={`/items/${item.id}/edit`}
|
||||
className="btn btn-sm btn-outline-primary"
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => toggleAvailability(item)}
|
||||
className="btn btn-sm btn-outline-info"
|
||||
>
|
||||
{item.availability
|
||||
? "Mark Unavailable"
|
||||
: "Mark Available"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(item.id)}
|
||||
className="btn btn-sm btn-outline-danger"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<span
|
||||
className={`badge ${
|
||||
item.availability ? "bg-success" : "bg-secondary"
|
||||
}`}
|
||||
>
|
||||
{item.availability ? "Available" : "Not Available"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
{(() => {
|
||||
const pendingRentals = rentals.filter(
|
||||
(r) => r.itemId === item.id && r.status === "pending"
|
||||
);
|
||||
const acceptedRentals = rentals.filter(
|
||||
(r) =>
|
||||
r.itemId === item.id &&
|
||||
["confirmed", "active"].includes(r.status)
|
||||
);
|
||||
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);
|
||||
|
||||
if (
|
||||
pendingRentals.length > 0 ||
|
||||
acceptedRentals.length > 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);
|
||||
|
||||
if (!hasAnyPositivePrice && hasAnyZeroPrice) {
|
||||
return (
|
||||
<div className="mt-3 border-top pt-3 rental-requests">
|
||||
{pendingRentals.length > 0 && (
|
||||
<>
|
||||
<h6 className="text-primary mb-2">
|
||||
<i className="bi bi-bell-fill"></i> Pending
|
||||
Requests ({pendingRentals.length})
|
||||
</h6>
|
||||
{pendingRentals.map((rental) => (
|
||||
<div
|
||||
key={rental.id}
|
||||
className="border rounded p-2 mb-2 bg-light"
|
||||
>
|
||||
<div className="d-flex justify-content-between align-items-start">
|
||||
<div className="small">
|
||||
<strong>
|
||||
{rental.renter?.firstName}{" "}
|
||||
{rental.renter?.lastName}
|
||||
</strong>
|
||||
<br />
|
||||
{new Date(
|
||||
rental.startDate
|
||||
).toLocaleDateString()}{" "}
|
||||
-{" "}
|
||||
{new Date(
|
||||
rental.endDate
|
||||
).toLocaleDateString()}
|
||||
<br />
|
||||
<span className="text-muted">
|
||||
${rental.totalAmount}
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex gap-1">
|
||||
<button
|
||||
className="btn btn-success btn-sm"
|
||||
onClick={() =>
|
||||
handleAcceptRental(rental.id)
|
||||
}
|
||||
>
|
||||
Accept
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-danger btn-sm"
|
||||
onClick={() =>
|
||||
handleRejectRental(rental.id)
|
||||
}
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{acceptedRentals.length > 0 && (
|
||||
<>
|
||||
<h6 className="text-success mb-2 mt-3">
|
||||
<i className="bi bi-check-circle-fill"></i>{" "}
|
||||
Accepted Rentals ({acceptedRentals.length})
|
||||
</h6>
|
||||
{acceptedRentals.map((rental) => (
|
||||
<div
|
||||
key={rental.id}
|
||||
className="border rounded p-2 mb-2 bg-light"
|
||||
>
|
||||
<div className="small">
|
||||
<div className="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<strong>
|
||||
{rental.renter?.firstName}{" "}
|
||||
{rental.renter?.lastName}
|
||||
</strong>
|
||||
<br />
|
||||
{new Date(
|
||||
rental.startDate
|
||||
).toLocaleDateString()}{" "}
|
||||
-{" "}
|
||||
{new Date(
|
||||
rental.endDate
|
||||
).toLocaleDateString()}
|
||||
<br />
|
||||
<span className="text-muted">
|
||||
${rental.totalAmount}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={`badge ${
|
||||
rental.status === "active"
|
||||
? "bg-success"
|
||||
: "bg-info"
|
||||
}`}
|
||||
>
|
||||
{rental.status === "active"
|
||||
? "Active"
|
||||
: "Confirmed"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
<div className="text-success small fw-bold">
|
||||
Free to Borrow
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{item.pricePerDay && Number(item.pricePerDay) > 0 && (
|
||||
<div className="text-muted small">
|
||||
${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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
<div className="d-flex gap-2">
|
||||
<Link
|
||||
to={`/items/${item.id}/edit`}
|
||||
className="btn btn-sm btn-outline-primary"
|
||||
>
|
||||
Edit
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => toggleAvailability(item)}
|
||||
className="btn btn-sm btn-outline-info"
|
||||
>
|
||||
{item.availability
|
||||
? "Mark Unavailable"
|
||||
: "Mark Available"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(item.id)}
|
||||
className="btn btn-sm btn-outline-danger"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Review Modal */}
|
||||
{selectedRentalForReview && (
|
||||
<ReviewRenterModal
|
||||
show={showReviewRenterModal}
|
||||
onClose={() => {
|
||||
setShowReviewRenterModal(false);
|
||||
setSelectedRentalForReview(null);
|
||||
}}
|
||||
rental={selectedRentalForReview}
|
||||
onSuccess={handleReviewRenterSuccess}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,15 +3,35 @@ import { Link } from "react-router-dom";
|
||||
import { useAuth } from "../contexts/AuthContext";
|
||||
import { rentalAPI } from "../services/api";
|
||||
import { Rental } from "../types";
|
||||
import ReviewModal from "../components/ReviewModal";
|
||||
import ReviewItemModal from "../components/ReviewModal";
|
||||
import ConfirmationModal from "../components/ConfirmationModal";
|
||||
|
||||
const MyRentals: React.FC = () => {
|
||||
// Helper function to format time
|
||||
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 "";
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function to format date and time together
|
||||
const formatDateTime = (dateString: string, timeString?: string) => {
|
||||
const date = new Date(dateString).toLocaleDateString();
|
||||
const formattedTime = formatTime(timeString);
|
||||
return formattedTime ? `${date} at ${formattedTime}` : date;
|
||||
};
|
||||
|
||||
const { user } = useAuth();
|
||||
const [rentals, setRentals] = useState<Rental[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<"active" | "past">("active");
|
||||
const [showReviewModal, setShowReviewModal] = useState(false);
|
||||
const [selectedRental, setSelectedRental] = useState<Rental | null>(null);
|
||||
const [showCancelModal, setShowCancelModal] = useState(false);
|
||||
@@ -25,6 +45,10 @@ const MyRentals: React.FC = () => {
|
||||
const fetchRentals = async () => {
|
||||
try {
|
||||
const response = await rentalAPI.getMyRentals();
|
||||
console.log("MyRentals data from backend:", response.data);
|
||||
if (response.data.length > 0) {
|
||||
console.log("First rental object:", response.data[0]);
|
||||
}
|
||||
setRentals(response.data);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.message || "Failed to fetch rentals");
|
||||
@@ -44,7 +68,7 @@ const MyRentals: React.FC = () => {
|
||||
setCancelling(true);
|
||||
try {
|
||||
await rentalAPI.updateRentalStatus(rentalToCancel, "cancelled");
|
||||
fetchRentals(); // Refresh the list
|
||||
fetchRentals();
|
||||
setShowCancelModal(false);
|
||||
setRentalToCancel(null);
|
||||
} catch (err: any) {
|
||||
@@ -60,19 +84,14 @@ const MyRentals: React.FC = () => {
|
||||
};
|
||||
|
||||
const handleReviewSuccess = () => {
|
||||
fetchRentals(); // Refresh to show the review has been added
|
||||
fetchRentals();
|
||||
alert("Thank you for your review!");
|
||||
};
|
||||
|
||||
// Filter rentals based on status
|
||||
const activeRentals = rentals.filter((r) =>
|
||||
// Filter rentals - only show active rentals (pending, confirmed, active)
|
||||
const renterActiveRentals = rentals.filter((r) =>
|
||||
["pending", "confirmed", "active"].includes(r.status)
|
||||
);
|
||||
const pastRentals = rentals.filter((r) =>
|
||||
["completed", "cancelled"].includes(r.status)
|
||||
);
|
||||
|
||||
const displayedRentals = activeTab === "active" ? activeRentals : pastRentals;
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -100,156 +119,134 @@ const MyRentals: React.FC = () => {
|
||||
<div className="container mt-4">
|
||||
<h1>My Rentals</h1>
|
||||
|
||||
<ul className="nav nav-tabs mb-4">
|
||||
<li className="nav-item">
|
||||
<button
|
||||
className={`nav-link ${activeTab === "active" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("active")}
|
||||
>
|
||||
Active Rentals ({activeRentals.length})
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button
|
||||
className={`nav-link ${activeTab === "past" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("past")}
|
||||
>
|
||||
Past Rentals ({pastRentals.length})
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{displayedRentals.length === 0 ? (
|
||||
{renterActiveRentals.length === 0 ? (
|
||||
<div className="text-center py-5">
|
||||
<p className="text-muted">
|
||||
{activeTab === "active"
|
||||
? "You don't have any active rentals."
|
||||
: "You don't have any past rentals."}
|
||||
</p>
|
||||
<Link to="/items" className="btn btn-primary mt-3">
|
||||
<h5 className="text-muted">No Active Rental Requests</h5>
|
||||
<p className="text-muted">You don't have any rental requests at the moment.</p>
|
||||
<Link to="/items" className="btn btn-primary">
|
||||
Browse Items to Rent
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="row">
|
||||
{displayedRentals.map((rental) => (
|
||||
<div key={rental.id} className="col-md-6 col-lg-4 mb-4">
|
||||
<Link
|
||||
to={rental.item ? `/items/${rental.item.id}` : "#"}
|
||||
className="text-decoration-none"
|
||||
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!rental.item || target.closest("button")) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="card h-100"
|
||||
style={{ cursor: rental.item ? "pointer" : "default" }}
|
||||
{renterActiveRentals.map((rental) => (
|
||||
<div key={rental.id} className="col-md-6 col-lg-4 mb-4">
|
||||
<Link
|
||||
to={rental.item ? `/items/${rental.item.id}` : "#"}
|
||||
className="text-decoration-none"
|
||||
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (!rental.item || target.closest("button")) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{rental.item?.images && rental.item.images[0] && (
|
||||
<img
|
||||
src={rental.item.images[0]}
|
||||
className="card-img-top"
|
||||
alt={rental.item.name}
|
||||
style={{ height: "200px", objectFit: "cover" }}
|
||||
/>
|
||||
)}
|
||||
<div className="card-body">
|
||||
<h5 className="card-title text-dark">
|
||||
{rental.item ? rental.item.name : "Item Unavailable"}
|
||||
</h5>
|
||||
|
||||
<div className="mb-2">
|
||||
<span
|
||||
className={`badge ${
|
||||
rental.status === "active"
|
||||
? "bg-success"
|
||||
: rental.status === "pending"
|
||||
? "bg-warning"
|
||||
: rental.status === "confirmed"
|
||||
? "bg-info"
|
||||
: rental.status === "completed"
|
||||
? "bg-secondary"
|
||||
: "bg-danger"
|
||||
}`}
|
||||
>
|
||||
{rental.status.charAt(0).toUpperCase() +
|
||||
rental.status.slice(1)}
|
||||
</span>
|
||||
{rental.paymentStatus === "paid" && (
|
||||
<span className="badge bg-success ms-2">Paid</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="mb-1 text-dark">
|
||||
<strong>Rental Period:</strong>
|
||||
<br />
|
||||
{new Date(rental.startDate).toLocaleDateString()} -{" "}
|
||||
{new Date(rental.endDate).toLocaleDateString()}
|
||||
</p>
|
||||
|
||||
<p className="mb-1 text-dark">
|
||||
<strong>Total:</strong> ${rental.totalAmount}
|
||||
</p>
|
||||
|
||||
<p className="mb-1 text-dark">
|
||||
<strong>Delivery:</strong>{" "}
|
||||
{rental.deliveryMethod === "pickup"
|
||||
? "Pick-up"
|
||||
: "Delivery"}
|
||||
</p>
|
||||
|
||||
{rental.owner && (
|
||||
<p className="mb-1 text-dark">
|
||||
<strong>Owner:</strong> {rental.owner.firstName}{" "}
|
||||
{rental.owner.lastName}
|
||||
</p>
|
||||
<div className="card h-100" style={{ cursor: rental.item ? "pointer" : "default" }}>
|
||||
{rental.item?.images && rental.item.images[0] && (
|
||||
<img
|
||||
src={rental.item.images[0]}
|
||||
className="card-img-top"
|
||||
alt={rental.item.name}
|
||||
style={{ height: "200px", objectFit: "cover" }}
|
||||
/>
|
||||
)}
|
||||
<div className="card-body">
|
||||
<h5 className="card-title text-dark">
|
||||
{rental.item ? rental.item.name : "Item Unavailable"}
|
||||
</h5>
|
||||
|
||||
{rental.status === "cancelled" &&
|
||||
rental.rejectionReason && (
|
||||
<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>
|
||||
{rental.paymentStatus === "paid" && (
|
||||
<span className="badge bg-success ms-2">Paid</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="mb-1 text-dark">
|
||||
<strong>Rental 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 text-dark">
|
||||
<strong>Total:</strong> ${rental.totalAmount}
|
||||
</p>
|
||||
|
||||
{rental.owner && (
|
||||
<p className="mb-1 text-dark">
|
||||
<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}
|
||||
<strong>Rejection reason:</strong> {rental.rejectionReason}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="d-flex gap-2 mt-3">
|
||||
{rental.status === "pending" && (
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleCancelClick(rental.id)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
{rental.status === "completed" && !rental.rating && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => handleReviewClick(rental)}
|
||||
>
|
||||
Leave Review
|
||||
</button>
|
||||
)}
|
||||
{rental.status === "completed" && rental.rating && (
|
||||
<div className="text-success small">
|
||||
<i className="bi bi-check-circle-fill me-1"></i>
|
||||
Reviewed ({rental.rating}/5)
|
||||
</div>
|
||||
)}
|
||||
<div className="d-flex gap-2 mt-3">
|
||||
{rental.status === "pending" && (
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleCancelClick(rental.id)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
{rental.status === "active" && !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>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Review Modal */}
|
||||
{selectedRental && (
|
||||
<ReviewModal
|
||||
<ReviewItemModal
|
||||
show={showReviewModal}
|
||||
onClose={() => {
|
||||
setShowReviewModal(false);
|
||||
@@ -278,4 +275,4 @@ const MyRentals: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default MyRentals;
|
||||
export default MyRentals;
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -312,7 +312,7 @@ const RentItem: React.FC = () => {
|
||||
name="cardName"
|
||||
value={formData.cardName}
|
||||
onChange={handleChange}
|
||||
placeholder="John Doe"
|
||||
placeholder=""
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user