admin can soft delete listings

backend/models/Item.js

@@ -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;

backend/models/index.js

@@ -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" });

backend/routes/items.js

@@ -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;

backend/services/email/core/TemplateManager.js

@@ -54,6 +54,7 @@ class TemplateManager {
         "rentalCompletionCongratsToOwner.html",
         "payoutReceivedToOwner.html",
         "firstListingCelebrationToOwner.html",
+        "itemDeletionToOwner.html",
         "alphaInvitationToUser.html",
         "feedbackConfirmationToUser.html",
         "feedbackNotificationToAdmin.html",

backend/services/email/domain/UserEngagementEmailService.js

@@ -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;

backend/templates/emails/itemDeletionToOwner.html

@@ -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>&copy; 2024 RentAll. All rights reserved.</p>
+        </div>
+    </div>
+</body>
+</html>

frontend/src/components/ConfirmationModal.tsx

@@ -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 
+            <button
-              type="button" 
+              type="button"
-              className="btn-close" 
+              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 
+            <button
-              type="button" 
+              type="button"
-              className="btn btn-secondary" 
+              className="btn btn-secondary"
               onClick={onClose}
               disabled={loading}
             >
               {cancelText}
             </button>
-            <button 
+            <button
-              type="button" 
+              type="button"
               className={`btn ${confirmButtonClass}`}
               onClick={onConfirm}
-              disabled={loading}
+              disabled={isConfirmDisabled}
             >
               {loading ? (
                 <>

frontend/src/pages/ItemDetail.tsx

@@ -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 && (
+          {/* Deleted Status Indicator for Admins */}
-            <div className="d-flex justify-content-end mb-3">
+          {item.isDeleted && isAdmin && (
-              <button className="btn btn-outline-primary" onClick={handleEdit}>
+            <div className="alert alert-warning mb-3" role="alert">
-                <i className="bi bi-pencil me-2"></i>
+              <i className="bi bi-exclamation-triangle-fill me-2"></i>
-                Edit Listing
+              <strong>Item Soft Deleted</strong> - This item is hidden from
-              </button>
+              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">
+                              <div
-                                <span className="visually-hidden">Calculating...</span>
+                                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>
   );
 };

frontend/src/pages/Owning.tsx

@@ -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">

frontend/src/services/api.ts

@@ -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 = {

frontend/src/types/index.ts

@@ -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;
 }