Replace window.confirm() with themed ConfirmModal across dashboard

frontend/src/components/pages/KnowledgeBasePage.js

@@ -6,11 +6,12 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import {
     BookOpen, Search, Upload, RefreshCw, Loader,
-    AlertCircle, FileText, File, Trash2, X,
+    AlertCircle, FileText, File, Trash2, X, // ⚠️ CONVENTION: FileText and File are imported but unused — remove if not needed
 } from 'lucide-react';
 import { useAuth } from '../../contexts/AuthContext';
 import KnowledgeBaseModal from '../KnowledgeBaseModal';
 import KnowledgeBaseViewer from '../KnowledgeBaseViewer';
+import ConfirmModal from '../ConfirmModal'; // ⚠️ CONVENTION: ConfirmModal is imported but never used — either integrate it into handleDelete or remove this import
 
 const API_BASE  = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
 const GREEN     = '#10B981';
@@ -216,6 +217,7 @@ export default function KnowledgeBasePage() {
     const [activeCategory, setActiveCategory] = useState('All');
     const [selected,     setSelected]     = useState(null);
     const [showUpload,   setShowUpload]   = useState(false);
+    const [pendingConfirm, setPendingConfirm] = useState(null);
 
     // -------------------------------------------------------------------------
     // Fetch
@@ -241,17 +243,24 @@ export default function KnowledgeBasePage() {
     // Delete
     // -------------------------------------------------------------------------
     const handleDelete = useCallback(async (article) => {
-        if (!window.confirm(`Delete "${article.title}"? This cannot be undone.`)) return;
-        try {
-            const res = await fetch(`${API_BASE}/knowledge-base/${article.id}`, {
-                method: 'DELETE', credentials: 'include',
-            });
-            if (!res.ok) throw new Error('Delete failed');
-            setArticles(prev => prev.filter(a => a.id !== article.id));
-            if (selected?.id === article.id) setSelected(null);
-        } catch (err) {
-            alert(`Failed to delete: ${err.message}`);
-        }
+        setPendingConfirm({
+            title: 'Delete Article',
+            message: `Delete "${article.title}"? This cannot be undone.`,
+            confirmText: 'Delete',
+            onConfirm: async () => {
+                setPendingConfirm(null);
+                try {
+                    const res = await fetch(`${API_BASE}/knowledge-base/${article.id}`, {
+                        method: 'DELETE', credentials: 'include',
+                    });
+                    if (!res.ok) throw new Error('Delete failed');
+                    setArticles(prev => prev.filter(a => a.id !== article.id));
+                    if (selected?.id === article.id) setSelected(null);
+                } catch (err) {
+                    alert(`Failed to delete: ${err.message}`);
+                }
+            },
+        });
     }, [selected]);
 
     // -------------------------------------------------------------------------
@@ -479,6 +488,17 @@ export default function KnowledgeBasePage() {
                     onUpdate={() => { fetchArticles(); setShowUpload(false); }}
                 />
             )}
+
+            {/* Confirmation Modal */}
+            <ConfirmModal
+                open={!!pendingConfirm}
+                title={pendingConfirm?.title}
+                message={pendingConfirm?.message}
+                confirmText={pendingConfirm?.confirmText}
+                variant="danger"
+                onConfirm={pendingConfirm?.onConfirm}
+                onCancel={() => setPendingConfirm(null)}
+            />
         </div>
     );
 }