admin can soft delete listings
This commit is contained in:
jackiettran
@@ -141,6 +141,26 @@ const Item = sequelize.define("Item", {
|
||||
key: "id",
|
||||
},
|
||||
},
|
||||
isDeleted: {
|
||||
type: DataTypes.BOOLEAN,
|
||||
defaultValue: false,
|
||||
},
|
||||
deletedBy: {
|
||||
type: DataTypes.UUID,
|
||||
allowNull: true,
|
||||
references: {
|
||||
model: "Users",
|
||||
key: "id",
|
||||
},
|
||||
},
|
||||
deletedAt: {
|
||||
type: DataTypes.DATE,
|
||||
allowNull: true,
|
||||
},
|
||||
deletionReason: {
|
||||
type: DataTypes.TEXT,
|
||||
allowNull: true,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = Item;
|
||||
|
||||
@@ -13,6 +13,7 @@ const Feedback = require("./Feedback");
|
||||
|
||||
User.hasMany(Item, { as: "ownedItems", foreignKey: "ownerId" });
|
||||
Item.belongsTo(User, { as: "owner", foreignKey: "ownerId" });
|
||||
Item.belongsTo(User, { as: "deleter", foreignKey: "deletedBy" });
|
||||
|
||||
User.hasMany(Rental, { as: "rentalsAsRenter", foreignKey: "renterId" });
|
||||
User.hasMany(Rental, { as: "rentalsAsOwner", foreignKey: "ownerId" });
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const express = require("express");
|
||||
const { Op } = require("sequelize");
|
||||
const { Item, User, Rental } = require("../models"); // Import from models/index.js to get models with associations
|
||||
const { authenticateToken, requireVerifiedEmail } = require("../middleware/auth");
|
||||
const { authenticateToken, requireVerifiedEmail, requireAdmin, optionalAuth } = require("../middleware/auth");
|
||||
const logger = require("../utils/logger");
|
||||
const router = express.Router();
|
||||
|
||||
@@ -17,7 +17,9 @@ router.get("/", async (req, res) => {
|
||||
limit = 20,
|
||||
} = req.query;
|
||||
|
||||
const where = {};
|
||||
const where = {
|
||||
isDeleted: false // Always exclude soft-deleted items from public browse
|
||||
};
|
||||
|
||||
if (minPrice || maxPrice) {
|
||||
where.pricePerDay = {};
|
||||
@@ -97,6 +99,7 @@ router.get("/recommendations", authenticateToken, async (req, res) => {
|
||||
const recommendations = await Item.findAll({
|
||||
where: {
|
||||
availability: true,
|
||||
isDeleted: false,
|
||||
},
|
||||
limit: 10,
|
||||
order: [["createdAt", "DESC"]],
|
||||
@@ -170,7 +173,7 @@ router.get('/:id/reviews', async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
router.get("/:id", async (req, res) => {
|
||||
router.get("/:id", optionalAuth, async (req, res) => {
|
||||
try {
|
||||
const item = await Item.findByPk(req.params.id, {
|
||||
include: [
|
||||
@@ -179,6 +182,11 @@ router.get("/:id", async (req, res) => {
|
||||
as: "owner",
|
||||
attributes: ["id", "username", "firstName", "lastName"],
|
||||
},
|
||||
{
|
||||
model: User,
|
||||
as: "deleter",
|
||||
attributes: ["id", "username", "firstName", "lastName"],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@@ -186,6 +194,15 @@ router.get("/:id", async (req, res) => {
|
||||
return res.status(404).json({ error: "Item not found" });
|
||||
}
|
||||
|
||||
// Check if item is deleted - only allow admins to view
|
||||
if (item.isDeleted) {
|
||||
const isAdmin = req.user?.role === 'admin';
|
||||
|
||||
if (!isAdmin) {
|
||||
return res.status(404).json({ error: "Item not found" });
|
||||
}
|
||||
}
|
||||
|
||||
// Round coordinates to 2 decimal places for map display while keeping precise values in database
|
||||
const itemResponse = item.toJSON();
|
||||
if (itemResponse.latitude !== null && itemResponse.latitude !== undefined) {
|
||||
@@ -347,4 +364,156 @@ router.delete("/:id", authenticateToken, async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
// Admin endpoints
|
||||
router.delete("/admin/:id", authenticateToken, requireAdmin, async (req, res) => {
|
||||
try {
|
||||
const { reason } = req.body;
|
||||
|
||||
if (!reason || !reason.trim()) {
|
||||
return res.status(400).json({ error: "Deletion reason is required" });
|
||||
}
|
||||
|
||||
const item = await Item.findByPk(req.params.id, {
|
||||
include: [
|
||||
{
|
||||
model: User,
|
||||
as: "owner",
|
||||
attributes: ["id", "username", "firstName", "lastName", "email"],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
if (!item) {
|
||||
return res.status(404).json({ error: "Item not found" });
|
||||
}
|
||||
|
||||
if (item.isDeleted) {
|
||||
return res.status(400).json({ error: "Item is already deleted" });
|
||||
}
|
||||
|
||||
// Check for active or upcoming rentals
|
||||
const activeRentals = await Rental.count({
|
||||
where: {
|
||||
itemId: req.params.id,
|
||||
status: {
|
||||
[Op.in]: ['pending', 'confirmed', 'active']
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (activeRentals > 0) {
|
||||
return res.status(400).json({
|
||||
error: "Cannot delete item with active or upcoming rentals",
|
||||
code: "ACTIVE_RENTALS_EXIST",
|
||||
activeRentalsCount: activeRentals
|
||||
});
|
||||
}
|
||||
|
||||
// Soft delete the item
|
||||
await item.update({
|
||||
isDeleted: true,
|
||||
deletedBy: req.user.id,
|
||||
deletedAt: new Date(),
|
||||
deletionReason: reason.trim()
|
||||
});
|
||||
|
||||
const updatedItem = await Item.findByPk(item.id, {
|
||||
include: [
|
||||
{
|
||||
model: User,
|
||||
as: "owner",
|
||||
attributes: ["id", "username", "firstName", "lastName"],
|
||||
},
|
||||
{
|
||||
model: User,
|
||||
as: "deleter",
|
||||
attributes: ["id", "username", "firstName", "lastName"],
|
||||
}
|
||||
],
|
||||
});
|
||||
|
||||
// Send email notification to owner
|
||||
try {
|
||||
const emailServices = require("../services/email");
|
||||
await emailServices.userEngagement.sendItemDeletionNotificationToOwner(
|
||||
item.owner,
|
||||
item,
|
||||
reason.trim()
|
||||
);
|
||||
console.log(`Item deletion notification email sent to owner ${item.ownerId}`);
|
||||
} catch (emailError) {
|
||||
// Log but don't fail the deletion
|
||||
console.error('Failed to send item deletion notification email:', emailError.message);
|
||||
}
|
||||
|
||||
const reqLogger = logger.withRequestId(req.id);
|
||||
reqLogger.info("Item soft deleted by admin", {
|
||||
itemId: req.params.id,
|
||||
deletedBy: req.user.id,
|
||||
ownerId: item.ownerId,
|
||||
reason: reason.trim()
|
||||
});
|
||||
|
||||
res.json(updatedItem);
|
||||
} catch (error) {
|
||||
const reqLogger = logger.withRequestId(req.id);
|
||||
reqLogger.error("Admin item soft delete failed", {
|
||||
error: error.message,
|
||||
stack: error.stack,
|
||||
itemId: req.params.id,
|
||||
adminId: req.user.id
|
||||
});
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
router.patch("/admin/:id/restore", authenticateToken, requireAdmin, async (req, res) => {
|
||||
try {
|
||||
const item = await Item.findByPk(req.params.id);
|
||||
|
||||
if (!item) {
|
||||
return res.status(404).json({ error: "Item not found" });
|
||||
}
|
||||
|
||||
if (!item.isDeleted) {
|
||||
return res.status(400).json({ error: "Item is not deleted" });
|
||||
}
|
||||
|
||||
// Restore the item
|
||||
await item.update({
|
||||
isDeleted: false,
|
||||
deletedBy: null,
|
||||
deletedAt: null
|
||||
});
|
||||
|
||||
const updatedItem = await Item.findByPk(item.id, {
|
||||
include: [
|
||||
{
|
||||
model: User,
|
||||
as: "owner",
|
||||
attributes: ["id", "username", "firstName", "lastName"],
|
||||
}
|
||||
],
|
||||
});
|
||||
|
||||
const reqLogger = logger.withRequestId(req.id);
|
||||
reqLogger.info("Item restored by admin", {
|
||||
itemId: req.params.id,
|
||||
restoredBy: req.user.id,
|
||||
ownerId: item.ownerId
|
||||
});
|
||||
|
||||
res.json(updatedItem);
|
||||
} catch (error) {
|
||||
const reqLogger = logger.withRequestId(req.id);
|
||||
reqLogger.error("Admin item restore failed", {
|
||||
error: error.message,
|
||||
stack: error.stack,
|
||||
itemId: req.params.id,
|
||||
adminId: req.user.id
|
||||
});
|
||||
res.status(500).json({ error: error.message });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
||||
@@ -54,6 +54,7 @@ class TemplateManager {
|
||||
"rentalCompletionCongratsToOwner.html",
|
||||
"payoutReceivedToOwner.html",
|
||||
"firstListingCelebrationToOwner.html",
|
||||
"itemDeletionToOwner.html",
|
||||
"alphaInvitationToUser.html",
|
||||
"feedbackConfirmationToUser.html",
|
||||
"feedbackNotificationToAdmin.html",
|
||||
|
||||
@@ -72,6 +72,52 @@ class UserEngagementEmailService {
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Send item deletion notification email to owner
|
||||
* @param {Object} owner - Owner user object
|
||||
* @param {string} owner.firstName - Owner's first name
|
||||
* @param {string} owner.email - Owner's email address
|
||||
* @param {Object} item - Item object
|
||||
* @param {number} item.id - Item ID
|
||||
* @param {string} item.name - Item name
|
||||
* @param {string} deletionReason - Reason for deletion
|
||||
* @returns {Promise<{success: boolean, messageId?: string, error?: string}>}
|
||||
*/
|
||||
async sendItemDeletionNotificationToOwner(owner, item, deletionReason) {
|
||||
if (!this.initialized) {
|
||||
await this.initialize();
|
||||
}
|
||||
|
||||
try {
|
||||
const frontendUrl = process.env.FRONTEND_URL || "http://localhost:3000";
|
||||
const supportEmail = process.env.SUPPORT_EMAIL;
|
||||
|
||||
const variables = {
|
||||
ownerName: owner.firstName || "there",
|
||||
itemName: item.name,
|
||||
deletionReason,
|
||||
supportEmail,
|
||||
dashboardUrl: `${frontendUrl}/owning`,
|
||||
};
|
||||
|
||||
const htmlContent = await this.templateManager.renderTemplate(
|
||||
"itemDeletionToOwner",
|
||||
variables
|
||||
);
|
||||
|
||||
const subject = `Important: Your listing "${item.name}" has been removed`;
|
||||
|
||||
return await this.emailClient.sendEmail(
|
||||
owner.email,
|
||||
subject,
|
||||
htmlContent
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to send item deletion notification email:", error);
|
||||
return { success: false, error: error.message };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = UserEngagementEmailService;
|
||||
|
||||
305
backend/templates/emails/itemDeletionToOwner.html
Normal file
305
backend/templates/emails/itemDeletionToOwner.html
Normal file
@@ -0,0 +1,305 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Your Listing Has Been Removed</title>
|
||||
<style>
|
||||
/* Reset styles */
|
||||
body, table, td, p, a, li, blockquote {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
table, td {
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
}
|
||||
img {
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100% !important;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f8f9fa;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.email-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Header - Warning red gradient */
|
||||
.header {
|
||||
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
|
||||
padding: 40px 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #f8d7da;
|
||||
font-size: 16px;
|
||||
margin-top: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.content {
|
||||
padding: 40px 30px;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 20px 0;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
margin: 30px 0 15px 0;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.content p {
|
||||
margin: 0 0 16px 0;
|
||||
color: #6c757d;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.content strong {
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
/* Warning box */
|
||||
.warning-box {
|
||||
background-color: #fff3cd;
|
||||
border-left: 4px solid #ffc107;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.warning-box p {
|
||||
margin: 0 0 10px 0;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.warning-box p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Alert box */
|
||||
.alert-box {
|
||||
background-color: #f8d7da;
|
||||
border-left: 4px solid #dc3545;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.alert-box p {
|
||||
margin: 0 0 10px 0;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.alert-box p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Item highlight */
|
||||
.item-highlight {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-highlight .item-name {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #dc3545;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.button {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #ffffff !important;
|
||||
text-decoration: none;
|
||||
padding: 16px 32px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
/* Info box */
|
||||
.info-box {
|
||||
background-color: #e7f3ff;
|
||||
border-left: 4px solid #667eea;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0 0 10px 0;
|
||||
color: #004085;
|
||||
}
|
||||
|
||||
.info-box p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: #f8f9fa;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 14px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media only screen and (max-width: 600px) {
|
||||
.email-container {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.header, .content, .footer {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-highlight .item-name {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="email-container">
|
||||
<div class="header">
|
||||
<div class="logo">RentAll</div>
|
||||
<div class="tagline">⚠️ Important: Listing Removal Notice</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>Hi {{ownerName}},</p>
|
||||
|
||||
<h1>Your Listing Has Been Removed</h1>
|
||||
|
||||
<p>We're writing to inform you that your listing has been removed from RentAll by our moderation team.</p>
|
||||
|
||||
<div class="item-highlight">
|
||||
<div class="item-name">{{itemName}}</div>
|
||||
</div>
|
||||
|
||||
<div class="alert-box">
|
||||
<p><strong>Reason for Removal:</strong></p>
|
||||
<p>{{deletionReason}}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<p><strong>What this means:</strong></p>
|
||||
<ul style="margin: 10px 0; padding-left: 20px; color: #004085;">
|
||||
<li>Your listing is no longer visible to renters</li>
|
||||
<li>You can still view it in your dashboard</li>
|
||||
<li>No new rentals can be requested</li>
|
||||
<li>Existing active rentals are not affected</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2>Need Help or Have Questions?</h2>
|
||||
<p>If you believe this removal was made in error or if you have questions about our policies, please don't hesitate to contact our support team:</p>
|
||||
|
||||
<p style="text-align: center;">
|
||||
<a href="mailto:{{supportEmail}}" class="button">Contact Support</a>
|
||||
</p>
|
||||
|
||||
<div class="warning-box">
|
||||
<p><strong>Review Our Policies:</strong></p>
|
||||
<p>To prevent future removals, please familiarize yourself with our community guidelines and listing standards. Our team is happy to help you understand what makes a great RentAll listing.</p>
|
||||
</div>
|
||||
|
||||
<p>You can view your listings anytime from your <a href="{{dashboardUrl}}" style="color: #667eea;">dashboard</a>.</p>
|
||||
|
||||
<p>Thank you for your understanding.</p>
|
||||
|
||||
<p><strong>Best regards,</strong><br>
|
||||
The RentAll Team</p>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p><strong>RentAll</strong></p>
|
||||
<p>Building a community of sharing and trust</p>
|
||||
<p>This email was sent because your listing was removed by our moderation team.</p>
|
||||
<p>If you have questions, please contact <a href="mailto:{{supportEmail}}">{{supportEmail}}</a></p>
|
||||
<p>© 2024 RentAll. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -10,6 +10,11 @@ interface ConfirmationModalProps {
|
||||
cancelText?: string;
|
||||
confirmButtonClass?: string;
|
||||
loading?: boolean;
|
||||
showReasonInput?: boolean;
|
||||
reason?: string;
|
||||
onReasonChange?: (reason: string) => void;
|
||||
reasonPlaceholder?: string;
|
||||
reasonRequired?: boolean;
|
||||
}
|
||||
|
||||
const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
|
||||
@@ -21,40 +26,62 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
|
||||
confirmText = 'Confirm',
|
||||
cancelText = 'Cancel',
|
||||
confirmButtonClass = 'btn-danger',
|
||||
loading = false
|
||||
loading = false,
|
||||
showReasonInput = false,
|
||||
reason = '',
|
||||
onReasonChange,
|
||||
reasonPlaceholder = 'Enter reason...',
|
||||
reasonRequired = false
|
||||
}) => {
|
||||
if (!show) return null;
|
||||
|
||||
const isConfirmDisabled = loading || (reasonRequired && showReasonInput && !reason.trim());
|
||||
|
||||
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">{title}</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>{message}</p>
|
||||
{showReasonInput && (
|
||||
<div className="mt-3">
|
||||
<label className="form-label">
|
||||
Reason {reasonRequired && <span className="text-danger">*</span>}
|
||||
</label>
|
||||
<textarea
|
||||
className="form-control"
|
||||
rows={3}
|
||||
value={reason}
|
||||
onChange={(e) => onReasonChange?.(e.target.value)}
|
||||
placeholder={reasonPlaceholder}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
{cancelText}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
<button
|
||||
type="button"
|
||||
className={`btn ${confirmButtonClass}`}
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
disabled={isConfirmDisabled}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { useAuth } from "../contexts/AuthContext";
|
||||
import { itemAPI, rentalAPI } from "../services/api";
|
||||
import GoogleMapWithRadius from "../components/GoogleMapWithRadius";
|
||||
import ItemReviews from "../components/ItemReviews";
|
||||
import ConfirmationModal from "../components/ConfirmationModal";
|
||||
|
||||
const ItemDetail: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
@@ -24,6 +25,13 @@ const ItemDetail: React.FC = () => {
|
||||
const [totalCost, setTotalCost] = useState(0);
|
||||
const [costLoading, setCostLoading] = useState(false);
|
||||
const [costError, setCostError] = useState<string | null>(null);
|
||||
const [deleteLoading, setDeleteLoading] = useState(false);
|
||||
const [deleteError, setDeleteError] = useState<string | null>(null);
|
||||
const [showConfirmModal, setShowConfirmModal] = useState(false);
|
||||
const [confirmAction, setConfirmAction] = useState<
|
||||
"delete" | "restore" | null
|
||||
>(null);
|
||||
const [deletionReason, setDeletionReason] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
fetchItem();
|
||||
@@ -68,6 +76,50 @@ const ItemDetail: React.FC = () => {
|
||||
navigate(`/items/${id}/edit`);
|
||||
};
|
||||
|
||||
const handleAdminSoftDelete = () => {
|
||||
setConfirmAction("delete");
|
||||
setShowConfirmModal(true);
|
||||
};
|
||||
|
||||
const handleAdminRestore = () => {
|
||||
setConfirmAction("restore");
|
||||
setShowConfirmModal(true);
|
||||
};
|
||||
|
||||
const handleConfirmAction = async () => {
|
||||
try {
|
||||
setDeleteLoading(true);
|
||||
setDeleteError(null);
|
||||
|
||||
if (confirmAction === "delete") {
|
||||
await itemAPI.adminSoftDeleteItem(id!, deletionReason);
|
||||
} else if (confirmAction === "restore") {
|
||||
await itemAPI.adminRestoreItem(id!);
|
||||
}
|
||||
|
||||
await fetchItem(); // Refresh the item to show updated status
|
||||
setShowConfirmModal(false);
|
||||
setConfirmAction(null);
|
||||
setDeletionReason("");
|
||||
} catch (err: any) {
|
||||
const errorMessage =
|
||||
err.response?.data?.error || `Failed to ${confirmAction} item`;
|
||||
setDeleteError(errorMessage);
|
||||
console.error(`Admin ${confirmAction} failed:`, err);
|
||||
setShowConfirmModal(false);
|
||||
setConfirmAction(null);
|
||||
setDeletionReason("");
|
||||
} finally {
|
||||
setDeleteLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelConfirm = () => {
|
||||
setShowConfirmModal(false);
|
||||
setConfirmAction(null);
|
||||
setDeletionReason("");
|
||||
};
|
||||
|
||||
const handleRent = () => {
|
||||
const params = new URLSearchParams({
|
||||
startDate: rentalDates.startDate,
|
||||
@@ -260,17 +312,101 @@ const ItemDetail: React.FC = () => {
|
||||
}
|
||||
|
||||
const isOwner = user?.id === item.ownerId;
|
||||
const isAdmin = user?.role === "admin";
|
||||
|
||||
return (
|
||||
<div className="container mt-5">
|
||||
<div className="row justify-content-center">
|
||||
<div className="col-md-10">
|
||||
{isOwner && (
|
||||
<div className="d-flex justify-content-end mb-3">
|
||||
<button className="btn btn-outline-primary" onClick={handleEdit}>
|
||||
<i className="bi bi-pencil me-2"></i>
|
||||
Edit Listing
|
||||
</button>
|
||||
{/* Deleted Status Indicator for Admins */}
|
||||
{item.isDeleted && isAdmin && (
|
||||
<div className="alert alert-warning mb-3" role="alert">
|
||||
<i className="bi bi-exclamation-triangle-fill me-2"></i>
|
||||
<strong>Item Soft Deleted</strong> - This item is hidden from
|
||||
public listings.
|
||||
{item.deleter && (
|
||||
<span className="ms-2">
|
||||
Deleted by {item.deleter.firstName} {item.deleter.lastName}
|
||||
</span>
|
||||
)}
|
||||
{item.deletedAt && (
|
||||
<span className="ms-2">
|
||||
on {new Date(item.deletedAt).toLocaleDateString()}
|
||||
</span>
|
||||
)}
|
||||
{item.deletionReason && (
|
||||
<div className="mt-2">
|
||||
<strong>Reason:</strong> {item.deletionReason}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Error Alert */}
|
||||
{deleteError && (
|
||||
<div className="alert alert-danger mb-3" role="alert">
|
||||
{deleteError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Buttons (Owner Edit + Admin Soft Delete/Restore) */}
|
||||
{(isOwner || isAdmin) && (
|
||||
<div className="d-flex justify-content-end gap-2 mb-3">
|
||||
{isOwner && (
|
||||
<button
|
||||
className="btn btn-outline-primary"
|
||||
onClick={handleEdit}
|
||||
>
|
||||
<i className="bi bi-pencil me-2"></i>
|
||||
Edit Listing
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && !item.isDeleted && (
|
||||
<button
|
||||
className="btn btn-outline-danger"
|
||||
onClick={handleAdminSoftDelete}
|
||||
disabled={deleteLoading}
|
||||
>
|
||||
{deleteLoading ? (
|
||||
<>
|
||||
<span
|
||||
className="spinner-border spinner-border-sm me-2"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
Deleting...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="bi bi-trash me-2"></i>
|
||||
Delete
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{isAdmin && item.isDeleted && (
|
||||
<button
|
||||
className="btn btn-outline-success"
|
||||
onClick={handleAdminRestore}
|
||||
disabled={deleteLoading}
|
||||
>
|
||||
{deleteLoading ? (
|
||||
<>
|
||||
<span
|
||||
className="spinner-border spinner-border-sm me-2"
|
||||
role="status"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
Restoring...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="bi bi-arrow-counterclockwise me-2"></i>
|
||||
Restore
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -582,8 +718,13 @@ const ItemDetail: React.FC = () => {
|
||||
{rentalDates.startDate && rentalDates.endDate && (
|
||||
<div className="mb-3 p-2 bg-light rounded text-center">
|
||||
{costLoading ? (
|
||||
<div className="spinner-border spinner-border-sm" role="status">
|
||||
<span className="visually-hidden">Calculating...</span>
|
||||
<div
|
||||
className="spinner-border spinner-border-sm"
|
||||
role="status"
|
||||
>
|
||||
<span className="visually-hidden">
|
||||
Calculating...
|
||||
</span>
|
||||
</div>
|
||||
) : costError ? (
|
||||
<small className="text-danger">{costError}</small>
|
||||
@@ -627,6 +768,32 @@ const ItemDetail: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Confirmation Modal */}
|
||||
<ConfirmationModal
|
||||
show={showConfirmModal}
|
||||
onClose={handleCancelConfirm}
|
||||
onConfirm={handleConfirmAction}
|
||||
title={
|
||||
confirmAction === "delete" ? "Confirm Delete" : "Confirm Restore"
|
||||
}
|
||||
message={
|
||||
confirmAction === "delete"
|
||||
? "Are you sure you want to delete this item? It will be hidden from public listings."
|
||||
: "Are you sure you want to restore this item? It will be visible to the public again."
|
||||
}
|
||||
confirmText={confirmAction === "delete" ? "Delete" : "Restore"}
|
||||
cancelText="Cancel"
|
||||
confirmButtonClass={
|
||||
confirmAction === "delete" ? "btn-danger" : "btn-success"
|
||||
}
|
||||
loading={deleteLoading}
|
||||
showReasonInput={confirmAction === "delete"}
|
||||
reason={deletionReason}
|
||||
onReasonChange={setDeletionReason}
|
||||
reasonPlaceholder="Enter reason for deletion (e.g., policy violation, inappropriate content)"
|
||||
reasonRequired={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -533,7 +533,7 @@ const Owning: React.FC = () => {
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
<div className="mb-2">
|
||||
<div className="mb-2 d-flex gap-2 flex-wrap">
|
||||
<span
|
||||
className={`badge ${
|
||||
item.availability ? "bg-success" : "bg-secondary"
|
||||
@@ -541,6 +541,12 @@ const Owning: React.FC = () => {
|
||||
>
|
||||
{item.availability ? "Available" : "Not Available"}
|
||||
</span>
|
||||
{item.isDeleted && (
|
||||
<span className="badge bg-danger">
|
||||
<i className="bi bi-exclamation-triangle-fill me-1"></i>
|
||||
Deleted by Admin
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
|
||||
@@ -202,6 +202,10 @@ export const itemAPI = {
|
||||
deleteItem: (id: string) => api.delete(`/items/${id}`),
|
||||
getRecommendations: () => api.get("/items/recommendations"),
|
||||
getItemReviews: (id: string) => api.get(`/items/${id}/reviews`),
|
||||
// Admin endpoints
|
||||
adminSoftDeleteItem: (id: string, reason: string) =>
|
||||
api.delete(`/items/admin/${id}`, { data: { reason } }),
|
||||
adminRestoreItem: (id: string) => api.patch(`/items/admin/${id}/restore`),
|
||||
};
|
||||
|
||||
export const rentalAPI = {
|
||||
|
||||
@@ -109,6 +109,11 @@ export interface Item {
|
||||
};
|
||||
ownerId: string;
|
||||
owner?: User;
|
||||
isDeleted?: boolean;
|
||||
deletedBy?: string;
|
||||
deletedAt?: string;
|
||||
deletionReason?: string;
|
||||
deleter?: User;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user