KnowledgeBase.jsx

Go to the documentation of this file.

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import MainLayout from '../components/Layout/MainLayout';
// import removed: TenantSelector
import './KnowledgeBase.css';
import { apiFetch } from '../lib/api';
import { isAdmin } from '../utils/auth';
 
function KnowledgeBase() {
  const token = localStorage.getItem('token');
  let tenantId = '';
  if (token) {
    try {
      const payload = token.split('.')[1];
      const decoded = JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
      tenantId = decoded.tenant_id || decoded.tenantId || '';
    } catch { }
  }
  const navigate = useNavigate();
  const [documents, setDocuments] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [tenantMap, setTenantMap] = useState({});
  const [selectedDoc, setSelectedDoc] = useState(null);
  const [editorContent, setEditorContent] = useState('');
  const [deleteConfirm, setDeleteConfirm] = useState(null);
  const perPage = 10;
 
  // Optionally fetch tenant map for display, but don't use isRootTenant for column logic
  useEffect(() => {
    const fetchTenantMap = async () => {
      try {
        const token = localStorage.getItem('token');
        const res = await apiFetch('/tenants', {
          headers: { Authorization: `Bearer ${token}` }
        });
        if (res.ok) {
          const data = await res.json();
          const map = {};
          data.tenants?.forEach(t => {
            map[t.tenant_id] = t.name;
          });
          setTenantMap(map);
        }
      } catch (err) {
        // Silently fail - 403 is expected for non-MSP users
      }
    };
    fetchTenantMap();
  }, []);
 
  const fetchDocuments = async (fetchTenantId = tenantId) => {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      let url = `/documents?page=${page}&limit=${perPage}`;
      url += `&tenant_id=${tenantId}`;
      const res = await apiFetch(url, { headers: { Authorization: `Bearer ${token}` } });
      if (!res.ok) throw new Error('Failed to load documents');
      const data = await res.json();
      setDocuments(data.documents);
      setTotalPages(Math.ceil(data.total / perPage));
    } catch (err) {
      console.error(err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  useEffect(() => {
    fetchDocuments(tenantId);
  }, [page, tenantId]);
 
  const handleCreateClick = () => {
    setSelectedDoc({ title: '', content: '', category: '', doc_id: null });
    setEditorContent('');
  };
 
  const handleEditClick = (docId) => {
    const doc = documents.find(d => d.doc_id === docId);
    setSelectedDoc(doc);
    setEditorContent(doc?.content || '');
  };
 
  const handleSave = async () => {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      const method = selectedDoc.doc_id ? 'PUT' : 'POST';
      const url = selectedDoc.doc_id ? `/documents/${selectedDoc.doc_id}` : '/documents';
      const res = await apiFetch(url, {
        method,
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify({ ...selectedDoc, content: editorContent, tenant_id: tenantId })
      });
      if (!res.ok) throw new Error('Failed to save document');
      setSelectedDoc(null);
      fetchDocuments(tenantId);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  const handleDelete = async (docId) => {
    setLoading(true);
    try {
      const token = localStorage.getItem('token');
      const res = await apiFetch(`/documents/${docId}`, {
        method: 'DELETE',
        headers: { Authorization: `Bearer ${token}` }
      });
      if (!res.ok) throw new Error('Failed to delete document');
      setDeleteConfirm(null);
      fetchDocuments(tenantId);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };
 
  const handleDeleteClick = (doc) => {
    setDeleteConfirm(doc);
  };
 
  // Show tenant column if any document has tenant_id
  const showTenantColumn = documents.some(doc => doc.tenant_id !== undefined && doc.tenant_id !== null);
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <h2>Documentation</h2>
          <button className="btn" onClick={handleCreateClick}>
            <span className="material-symbols-outlined">add</span>
            Create Document
          </button>
        </div>
        {error && <div className="error-message">{error}</div>}
        {loading ? (
          <div className="loading">Loading documents...</div>
        ) : selectedDoc ? (
          <div className="editor-container">
            <input
              type="text"
              value={selectedDoc.title}
              onChange={e => setSelectedDoc({ ...selectedDoc, title: e.target.value })}
              placeholder="Title"
              style={{ width: '100%', marginBottom: 8, padding: 8 }}
            />
            <input
              type="text"
              value={selectedDoc.category}
              onChange={e => setSelectedDoc({ ...selectedDoc, category: e.target.value })}
              placeholder="Category"
              style={{ width: '100%', marginBottom: 8, padding: 8 }}
            />
            <textarea
              value={editorContent}
              onChange={e => setEditorContent(e.target.value)}
              placeholder="Document content..."
              style={{ width: '100%', minHeight: 300, marginBottom: 16, padding: 8, borderRadius: 4, background: '#fff', color: '#222' }}
            />
            <div>
              <button className="btn" onClick={handleSave} style={{ marginRight: 8 }}>Save</button>
              <button className="btn" onClick={() => setSelectedDoc(null)}>Cancel</button>
            </div>
          </div>
        ) : (
          <>
            <div className="table-container">
              <table className="data-table">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Title</th>
                    {showTenantColumn && <th>Tenant</th>}
                    <th>Category</th>
                    <th>Last Updated</th>
                    <th>Author</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {documents.map(doc => (
                    <tr key={doc.doc_id}>
                      <td>#{doc.doc_id}</td>
                      <td>{doc.title}</td>
                      {showTenantColumn && (
                        <td>{doc.tenant_id === 1
                          ? 'Root Tenant'
                          : (doc.tenant_name || tenantMap[doc.tenant_id] || '-')}</td>
                      )}
                      <td>{doc.category}</td>
                      <td>{new Date(doc.updated_at).toLocaleDateString()}</td>
                      <td>{doc.author_name}</td>
                      <td>
                        <button
                          className="btn"
                          onClick={() => handleEditClick(doc.doc_id)}
                          style={{ marginRight: '8px' }}
                        >
                          <span className="material-symbols-outlined">edit</span>
                        </button>
                        {isAdmin() && (
                          <button
                            className="btn danger"
                            onClick={() => handleDeleteClick(doc)}
                          >
                            <span className="material-symbols-outlined">delete</span>
                          </button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <div className="pagination">
              <button className="btn" disabled={page === 1} onClick={() => setPage(p => p - 1)}>
                <span className="material-symbols-outlined">navigate_before</span>
              </button>
              <span>
                Page {page} of {totalPages}
              </span>
              <button className="btn" disabled={page === totalPages} onClick={() => setPage(p => p + 1)}>
                <span className="material-symbols-outlined">navigate_next</span>
              </button>
            </div>
          </>
        )}
 
        {deleteConfirm && (
          <div className="modal-overlay" onClick={() => setDeleteConfirm(null)}>
            <div className="modal-content" onClick={e => e.stopPropagation()}>
              <div className="modal-header">
                <h3>Confirm Delete</h3>
                <button
                  className="btn"
                  onClick={() => setDeleteConfirm(null)}
                  style={{ padding: '4px', minWidth: 'auto' }}
                >
                  <span className="material-symbols-outlined">close</span>
                </button>
              </div>
              <div className="modal-body">
                <p>Are you sure you want to delete the document:</p>
                <p><strong>"{deleteConfirm.title}"</strong></p>
                <p style={{ color: 'var(--error)', fontSize: '0.9em' }}>
                  This action cannot be undone.
                </p>
              </div>
              <div className="modal-footer">
                <button
                  className="btn"
                  onClick={() => setDeleteConfirm(null)}
                  style={{ marginRight: '8px' }}
                >
                  Cancel
                </button>
                <button
                  className="btn danger"
                  onClick={() => handleDelete(deleteConfirm.doc_id)}
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </MainLayout>
  );
}
 
export default KnowledgeBase;