Added knowledge base enhancements for documentation viewing and preloaded Ivanti config for next feature

frontend/src/App.js

@@ -7,6 +7,8 @@ import UserManagement from './components/UserManagement';
 import AuditLog from './components/AuditLog';
 import NvdSyncModal from './components/NvdSyncModal';
 import WeeklyReportModal from './components/WeeklyReportModal';
+import KnowledgeBaseModal from './components/KnowledgeBaseModal';
+import KnowledgeBaseViewer from './components/KnowledgeBaseViewer';
 import './App.css';
 
 const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
@@ -175,6 +177,9 @@ export default function App() {
   const [showAuditLog, setShowAuditLog] = useState(false);
   const [showNvdSync, setShowNvdSync] = useState(false);
   const [showWeeklyReport, setShowWeeklyReport] = useState(false);
+  const [showKnowledgeBase, setShowKnowledgeBase] = useState(false);
+  const [knowledgeBaseArticles, setKnowledgeBaseArticles] = useState([]);
+  const [selectedKBArticle, setSelectedKBArticle] = useState(null);
   const [newCVE, setNewCVE] = useState({
     cve_id: '',
     vendor: '',
@@ -278,6 +283,19 @@ export default function App() {
     }
   };
 
+  const fetchKnowledgeBaseArticles = async () => {
+    try {
+      const response = await fetch(`${API_BASE}/knowledge-base`, {
+        credentials: 'include'
+      });
+      if (!response.ok) throw new Error('Failed to fetch knowledge base articles');
+      const data = await response.json();
+      setKnowledgeBaseArticles(data);
+    } catch (err) {
+      console.error('Error fetching knowledge base articles:', err);
+    }
+  };
+
   const fetchJiraTickets = async () => {
     try {
       const response = await fetch(`${API_BASE}/jira-tickets`, {
@@ -346,6 +364,45 @@ export default function App() {
     alert(`Exporting ${selectedDocuments.length} documents for report attachment`);
   };
 
+  const handleViewKBArticle = async (articleId) => {
+    try {
+      const response = await fetch(`${API_BASE}/knowledge-base/${articleId}`, {
+        credentials: 'include'
+      });
+
+      if (!response.ok) throw new Error('Failed to fetch article');
+
+      const article = await response.json();
+      setSelectedKBArticle(article);
+    } catch (err) {
+      console.error('Error fetching knowledge base article:', err);
+      setError('Failed to load article');
+    }
+  };
+
+  const handleDownloadKBArticle = async (id, filename) => {
+    try {
+      const response = await fetch(`${API_BASE}/knowledge-base/${id}/download`, {
+        credentials: 'include'
+      });
+
+      if (!response.ok) throw new Error('Download failed');
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (err) {
+      console.error('Error downloading knowledge base article:', err);
+      setError('Failed to download document');
+    }
+  };
+
   const handleAddCVE = async (e) => {
     e.preventDefault();
     try {
@@ -694,6 +751,7 @@ export default function App() {
       fetchCVEs();
       fetchVendors();
       fetchJiraTickets();
+      fetchKnowledgeBaseArticles();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAuthenticated]);
@@ -826,6 +884,14 @@ export default function App() {
           <WeeklyReportModal onClose={() => setShowWeeklyReport(false)} />
         )}
 
+        {/* Knowledge Base Modal */}
+        {showKnowledgeBase && (
+          <KnowledgeBaseModal
+            onClose={() => setShowKnowledgeBase(false)}
+            onUpdate={fetchKnowledgeBaseArticles}
+          />
+        )}
+
         {/* Add CVE Modal */}
         {showAddCVE && (
           <div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
@@ -1276,47 +1342,85 @@ export default function App() {
           {/* LEFT PANEL - Wiki/Knowledge Base */}
           <div className="col-span-12 lg:col-span-3 space-y-4">
             <div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '3px solid #10B981'}} className="rounded-lg">
-              <h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#10B981', marginBottom: '1rem', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(16, 185, 129, 0.4)' }}>
-                Knowledge Base
-              </h2>
+              <div className="flex items-center justify-between mb-4">
+                <h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#10B981', marginBottom: '0', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(16, 185, 129, 0.4)' }}>
+                  Knowledge Base
+                </h2>
+                {(user?.role === 'admin' || user?.role === 'editor') && (
+                  <button
+                    onClick={() => setShowKnowledgeBase(true)}
+                    className="intel-button intel-button-small"
+                    style={{ fontSize: '0.75rem', padding: '0.375rem 0.75rem' }}
+                    title="Manage Knowledge Base"
+                  >
+                    <Plus className="w-3 h-3" />
+                  </button>
+                )}
+              </div>
 
-              {/* Wiki/Blog Style Entries */}
+              {/* Knowledge Base Entries */}
               <div className="space-y-3">
-                <div style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
-                  <h3 className="text-white font-semibold text-sm mb-1 font-mono">CVE Response Procedures</h3>
-                  <p className="text-gray-400 text-xs mb-2">Standard operating procedures for vulnerability response and escalation...</p>
-                  <span className="text-xs text-intel-success font-mono">Last updated: 2024-02-08</span>
-                </div>
-
-                <div style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
-                  <h3 className="text-white font-semibold text-sm mb-1 font-mono">Vendor Contact Matrix</h3>
-                  <p className="text-gray-400 text-xs mb-2">Emergency contacts and escalation paths for security vendors...</p>
-                  <span className="text-xs text-intel-success font-mono">Last updated: 2024-02-05</span>
-                </div>
-
-                <div style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
-                  <h3 className="text-white font-semibold text-sm mb-1 font-mono">Severity Classification Guide</h3>
-                  <p className="text-gray-400 text-xs mb-2">Guidelines for assessing and classifying vulnerability severity levels...</p>
-                  <span className="text-xs text-intel-success font-mono">Last updated: 2024-01-28</span>
-                </div>
-
-                <div style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
-                  <h3 className="text-white font-semibold text-sm mb-1 font-mono">Patching Policy</h3>
-                  <p className="text-gray-400 text-xs mb-2">Enterprise patch management timelines and approval workflow...</p>
-                  <span className="text-xs text-intel-success font-mono">Last updated: 2024-01-15</span>
-                </div>
-
-                <div style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }} className="hover:border-intel-success">
-                  <h3 className="text-white font-semibold text-sm mb-1 font-mono">Documentation Standards</h3>
-                  <p className="text-gray-400 text-xs mb-2">Required documentation for vulnerability tracking and audit compliance...</p>
-                  <span className="text-xs text-intel-success font-mono">Last updated: 2024-01-10</span>
-                </div>
+                {knowledgeBaseArticles.length === 0 ? (
+                  <div className="text-center py-8" style={{ color: '#64748B' }}>
+                    <FileText className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                    <p className="text-sm">No documents yet</p>
+                    {(user?.role === 'admin' || user?.role === 'editor') && (
+                      <button
+                        onClick={() => setShowKnowledgeBase(true)}
+                        className="intel-button intel-button-small mt-3"
+                      >
+                        Add First Document
+                      </button>
+                    )}
+                  </div>
+                ) : (
+                  knowledgeBaseArticles.slice(0, 5).map((article) => (
+                    <div
+                      key={article.id}
+                      onClick={() => handleViewKBArticle(article.id)}
+                      style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }}
+                      className="hover:border-intel-success"
+                    >
+                      <h3 className="text-white font-semibold text-sm mb-1 font-mono">{article.title}</h3>
+                      {article.description && (
+                        <p className="text-gray-400 text-xs mb-2 line-clamp-2">{article.description}</p>
+                      )}
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs text-intel-success font-mono">
+                          {new Date(article.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+                        </span>
+                        {article.category && article.category !== 'General' && (
+                          <span className="text-xs px-2 py-0.5 rounded" style={{ background: 'rgba(16, 185, 129, 0.2)', color: '#10B981' }}>
+                            {article.category}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  ))
+                )}
+                {knowledgeBaseArticles.length > 5 && (
+                  <button
+                    onClick={() => setShowKnowledgeBase(true)}
+                    className="text-xs text-center w-full py-2"
+                    style={{ color: '#10B981' }}
+                  >
+                    View all {knowledgeBaseArticles.length} documents →
+                  </button>
+                )}
               </div>
             </div>
           </div>
 
           {/* CENTER PANEL - Main Content */}
           <div className="col-span-12 lg:col-span-6 space-y-4">
+            {/* Knowledge Base Viewer */}
+            {selectedKBArticle ? (
+              <KnowledgeBaseViewer
+                article={selectedKBArticle}
+                onClose={() => setSelectedKBArticle(null)}
+              />
+            ) : (
+              <>
             {/* Quick Check */}
             <div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
               <div className="scan-line"></div>
@@ -1753,6 +1857,8 @@ export default function App() {
                 <p className="text-gray-300">Try adjusting your search criteria or filters</p>
               </div>
             )}
+            </>
+            )}
           </div>
           {/* End Center Panel */}