admin can soft delete listings

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 
-              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 ? (
                 <>