jramos
18ad31228e
Replaces the 'coming soon' placeholder with a full library UI.
No backend changes needed — all existing endpoints and components
(KnowledgeBaseViewer, KnowledgeBaseModal) are reused.
Features:
- Article card grid (responsive auto-fill, min 240px per card)
- Category filter tabs (Procedure, Guide, Policy, Reference, General)
with live article counts; tabs only shown for populated categories
- Search bar — filters by title and description, client-side
- Inline viewer — clicking a card opens KnowledgeBaseViewer below
the grid; clicking again or pressing the close button collapses it
- Upload modal (editor/admin only) refreshes the grid on success
- Delete button on each card (editor/admin only) with confirmation
- Graceful empty states for no articles and no search results
- Loading and error states with retry
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
485 lines
22 KiB
JavaScript
485 lines
22 KiB
JavaScript
// KnowledgeBasePage.js
|
|
// Full-page knowledge base library — browse, search, filter, and read
|
|
// articles inline. Upload and delete require editor/admin role.
|
|
// Reuses existing KnowledgeBaseViewer and KnowledgeBaseModal components.
|
|
|
|
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
|
import {
|
|
BookOpen, Search, Upload, RefreshCw, Loader,
|
|
AlertCircle, FileText, File, Trash2, X,
|
|
} from 'lucide-react';
|
|
import { useAuth } from '../../contexts/AuthContext';
|
|
import KnowledgeBaseModal from '../KnowledgeBaseModal';
|
|
import KnowledgeBaseViewer from '../KnowledgeBaseViewer';
|
|
|
|
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
|
const GREEN = '#10B981';
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Static config
|
|
// ---------------------------------------------------------------------------
|
|
const CATEGORY_COLORS = {
|
|
General: '#94A3B8',
|
|
Policy: '#0EA5E9',
|
|
Procedure: GREEN,
|
|
Guide: '#F59E0B',
|
|
Reference: '#8B5CF6',
|
|
};
|
|
|
|
const FILE_EXT_COLORS = {
|
|
pdf: '#EF4444',
|
|
md: '#10B981',
|
|
txt: '#94A3B8',
|
|
doc: '#0EA5E9',
|
|
docx: '#0EA5E9',
|
|
xls: '#10B981',
|
|
xlsx: '#10B981',
|
|
ppt: '#F97316',
|
|
pptx: '#F97316',
|
|
html: '#8B5CF6',
|
|
};
|
|
|
|
const CATEGORY_ORDER = ['Procedure', 'Guide', 'Policy', 'Reference', 'General'];
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Helpers
|
|
// ---------------------------------------------------------------------------
|
|
function extOf(filename) {
|
|
return (filename || '').split('.').pop().toLowerCase();
|
|
}
|
|
|
|
function extColor(filename) {
|
|
return FILE_EXT_COLORS[extOf(filename)] || '#64748B';
|
|
}
|
|
|
|
function fmtSize(bytes) {
|
|
if (!bytes) return '';
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
|
}
|
|
|
|
function fmtDate(str) {
|
|
if (!str) return '';
|
|
return new Date(str).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
|
|
}
|
|
|
|
function catColor(cat) {
|
|
return CATEGORY_COLORS[cat] || '#94A3B8';
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// ArticleCard
|
|
// ---------------------------------------------------------------------------
|
|
function ArticleCard({ article, selected, onSelect, onDelete, canDelete }) {
|
|
const color = catColor(article.category);
|
|
const fileColor = extColor(article.file_name);
|
|
const ext = extOf(article.file_name).toUpperCase();
|
|
|
|
return (
|
|
<div
|
|
onClick={() => onSelect(article)}
|
|
style={{
|
|
background: selected
|
|
? `linear-gradient(135deg,rgba(16,185,129,0.1) 0%,rgba(15,23,42,0.98) 100%)`
|
|
: 'linear-gradient(135deg,rgba(30,41,59,0.95) 0%,rgba(15,23,42,0.98) 100%)',
|
|
border: `1.5px solid ${selected ? GREEN : 'rgba(16,185,129,0.12)'}`,
|
|
borderRadius: '0.5rem',
|
|
padding: '1rem',
|
|
cursor: 'pointer',
|
|
transition: 'all 0.15s',
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '0.5rem',
|
|
}}
|
|
onMouseEnter={e => { if (!selected) e.currentTarget.style.borderColor = 'rgba(16,185,129,0.35)'; }}
|
|
onMouseLeave={e => { if (!selected) e.currentTarget.style.borderColor = 'rgba(16,185,129,0.12)'; }}
|
|
>
|
|
{/* File type badge + delete button */}
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<span style={{
|
|
fontFamily: 'monospace', fontSize: '0.58rem', fontWeight: '700',
|
|
color: fileColor, padding: '0.15rem 0.4rem',
|
|
background: `${fileColor}15`, borderRadius: '0.2rem',
|
|
border: `1px solid ${fileColor}30`,
|
|
}}>
|
|
{ext}
|
|
</span>
|
|
{canDelete && (
|
|
<button
|
|
onClick={e => { e.stopPropagation(); onDelete(article); }}
|
|
title="Delete article"
|
|
style={{
|
|
background: 'none', border: 'none', cursor: 'pointer',
|
|
color: '#334155', padding: '0.15rem',
|
|
borderRadius: '0.2rem', display: 'flex', alignItems: 'center',
|
|
}}
|
|
onMouseEnter={e => { e.currentTarget.style.color = '#EF4444'; }}
|
|
onMouseLeave={e => { e.currentTarget.style.color = '#334155'; }}
|
|
>
|
|
<Trash2 style={{ width: '12px', height: '12px' }} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<div style={{
|
|
fontFamily: 'monospace', fontSize: '0.82rem', fontWeight: '700',
|
|
color: selected ? GREEN : '#E2E8F0',
|
|
lineHeight: 1.3,
|
|
}}>
|
|
{article.title}
|
|
</div>
|
|
|
|
{/* Description */}
|
|
{article.description && (
|
|
<div style={{
|
|
fontSize: '0.7rem', color: '#475569',
|
|
lineHeight: 1.45, display: '-webkit-box',
|
|
WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
|
|
overflow: 'hidden',
|
|
}}>
|
|
{article.description}
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer — category + date */}
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 'auto', paddingTop: '0.375rem', borderTop: '1px solid rgba(255,255,255,0.04)' }}>
|
|
<span style={{
|
|
fontFamily: 'monospace', fontSize: '0.6rem', fontWeight: '600',
|
|
color, padding: '0.15rem 0.4rem',
|
|
background: `${color}12`, borderRadius: '0.2rem',
|
|
border: `1px solid ${color}25`,
|
|
textTransform: 'uppercase', letterSpacing: '0.04em',
|
|
}}>
|
|
{article.category}
|
|
</span>
|
|
<div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
|
|
{article.file_size && (
|
|
<span style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#334155' }}>
|
|
{fmtSize(article.file_size)}
|
|
</span>
|
|
)}
|
|
<span style={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#334155' }}>
|
|
{fmtDate(article.created_at)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Empty state
|
|
// ---------------------------------------------------------------------------
|
|
function EmptyState({ hasFilter, onClear }) {
|
|
return (
|
|
<div style={{
|
|
gridColumn: '1 / -1',
|
|
display: 'flex', flexDirection: 'column', alignItems: 'center',
|
|
justifyContent: 'center', padding: '4rem 2rem',
|
|
border: '1px dashed rgba(16,185,129,0.15)', borderRadius: '0.5rem',
|
|
color: '#334155',
|
|
}}>
|
|
<BookOpen style={{ width: '36px', height: '36px', marginBottom: '1rem', opacity: 0.4 }} />
|
|
<div style={{ fontFamily: 'monospace', fontSize: '0.8rem', marginBottom: '0.375rem' }}>
|
|
{hasFilter ? 'No articles match your search' : 'No articles yet'}
|
|
</div>
|
|
{hasFilter ? (
|
|
<button onClick={onClear} style={{
|
|
background: 'none', border: 'none', cursor: 'pointer',
|
|
color: GREEN, fontFamily: 'monospace', fontSize: '0.72rem',
|
|
marginTop: '0.375rem',
|
|
}}>
|
|
Clear filters
|
|
</button>
|
|
) : (
|
|
<div style={{ fontFamily: 'monospace', fontSize: '0.7rem', color: '#475569' }}>
|
|
Upload a document to get started
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Main page
|
|
// ---------------------------------------------------------------------------
|
|
export default function KnowledgeBasePage() {
|
|
const { canWrite } = useAuth();
|
|
|
|
const [articles, setArticles] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [search, setSearch] = useState('');
|
|
const [activeCategory, setActiveCategory] = useState('All');
|
|
const [selected, setSelected] = useState(null);
|
|
const [showUpload, setShowUpload] = useState(false);
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Fetch
|
|
// -------------------------------------------------------------------------
|
|
const fetchArticles = useCallback(async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const res = await fetch(`${API_BASE}/knowledge-base`, { credentials: 'include' });
|
|
if (!res.ok) throw new Error('Failed to load articles');
|
|
const data = await res.json();
|
|
setArticles(data);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => { fetchArticles(); }, [fetchArticles]);
|
|
|
|
// -------------------------------------------------------------------------
|
|
// 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}`);
|
|
}
|
|
}, [selected]);
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Filtering
|
|
// -------------------------------------------------------------------------
|
|
const filtered = useMemo(() => {
|
|
const q = search.trim().toLowerCase();
|
|
return articles.filter(a => {
|
|
const matchesCat = activeCategory === 'All' || a.category === activeCategory;
|
|
const matchesSearch = !q ||
|
|
a.title.toLowerCase().includes(q) ||
|
|
(a.description || '').toLowerCase().includes(q);
|
|
return matchesCat && matchesSearch;
|
|
});
|
|
}, [articles, activeCategory, search]);
|
|
|
|
// Category tab counts (always from full list, not filtered by search)
|
|
const categoryCounts = useMemo(() => {
|
|
const counts = { All: articles.length };
|
|
CATEGORY_ORDER.forEach(cat => {
|
|
counts[cat] = articles.filter(a => a.category === cat).length;
|
|
});
|
|
return counts;
|
|
}, [articles]);
|
|
|
|
const activeTabs = ['All', ...CATEGORY_ORDER.filter(c => categoryCounts[c] > 0)];
|
|
|
|
const clearFilters = () => { setSearch(''); setActiveCategory('All'); };
|
|
|
|
const hasFilter = search.trim() !== '' || activeCategory !== 'All';
|
|
|
|
// -------------------------------------------------------------------------
|
|
// Render
|
|
// -------------------------------------------------------------------------
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', paddingBottom: '2rem' }}>
|
|
|
|
{/* ── Page header ─────────────────────────────────────────── */}
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
|
<div>
|
|
<h2 style={{
|
|
fontFamily: 'monospace', fontSize: '1.5rem', fontWeight: '700',
|
|
color: GREEN, textTransform: 'uppercase', letterSpacing: '0.1em',
|
|
textShadow: `0 0 16px ${GREEN}40`, marginBottom: '0.25rem',
|
|
}}>
|
|
Knowledge Base
|
|
</h2>
|
|
<div style={{ fontSize: '0.72rem', color: '#475569', fontFamily: 'monospace' }}>
|
|
{loading ? '…' : `${articles.length} article${articles.length !== 1 ? 's' : ''}`}
|
|
{articles.length > 0 && activeCategory !== 'All' && (
|
|
<span style={{ marginLeft: '0.5rem', color: '#334155' }}>
|
|
· {categoryCounts[activeCategory] || 0} in {activeCategory}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', gap: '0.5rem', flexShrink: 0 }}>
|
|
<button
|
|
onClick={fetchArticles}
|
|
title="Refresh"
|
|
style={{
|
|
background: 'none', border: `1px solid rgba(16,185,129,0.25)`,
|
|
borderRadius: '0.375rem', padding: '0.5rem', cursor: 'pointer', color: '#475569',
|
|
}}
|
|
onMouseEnter={e => { e.currentTarget.style.color = GREEN; e.currentTarget.style.borderColor = `${GREEN}60`; }}
|
|
onMouseLeave={e => { e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'rgba(16,185,129,0.25)'; }}
|
|
>
|
|
<RefreshCw style={{ width: '16px', height: '16px' }} />
|
|
</button>
|
|
{canWrite() && (
|
|
<button
|
|
onClick={() => setShowUpload(true)}
|
|
style={{
|
|
display: 'flex', alignItems: 'center', gap: '0.4rem',
|
|
background: `${GREEN}18`, border: `1px solid ${GREEN}`,
|
|
color: GREEN, padding: '0.5rem 1rem',
|
|
fontFamily: 'monospace', fontSize: '0.75rem', fontWeight: '600',
|
|
textTransform: 'uppercase', letterSpacing: '0.05em',
|
|
cursor: 'pointer', borderRadius: '0.375rem',
|
|
}}
|
|
>
|
|
<Upload style={{ width: '14px', height: '14px' }} />
|
|
Upload Article
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Search + category tabs ───────────────────────────────── */}
|
|
<div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
|
|
|
|
{/* Search */}
|
|
<div style={{ position: 'relative', flexShrink: 0 }}>
|
|
<Search style={{
|
|
position: 'absolute', left: '0.625rem', top: '50%', transform: 'translateY(-50%)',
|
|
width: '13px', height: '13px', color: '#334155', pointerEvents: 'none',
|
|
}} />
|
|
<input
|
|
value={search}
|
|
onChange={e => setSearch(e.target.value)}
|
|
placeholder="Search articles…"
|
|
style={{
|
|
paddingLeft: '2rem', paddingRight: search ? '2rem' : '0.625rem',
|
|
paddingTop: '0.4rem', paddingBottom: '0.4rem',
|
|
background: 'rgba(15,23,42,0.8)',
|
|
border: '1px solid rgba(16,185,129,0.2)',
|
|
borderRadius: '0.375rem', color: '#E2E8F0',
|
|
outline: 'none', fontFamily: 'monospace', fontSize: '0.75rem',
|
|
width: '220px',
|
|
}}
|
|
onFocus={e => e.target.style.borderColor = `${GREEN}60`}
|
|
onBlur={e => e.target.style.borderColor = 'rgba(16,185,129,0.2)'}
|
|
/>
|
|
{search && (
|
|
<button
|
|
onClick={() => setSearch('')}
|
|
style={{
|
|
position: 'absolute', right: '0.5rem', top: '50%', transform: 'translateY(-50%)',
|
|
background: 'none', border: 'none', cursor: 'pointer', color: '#334155', padding: 0,
|
|
}}
|
|
>
|
|
<X style={{ width: '12px', height: '12px' }} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Category tabs */}
|
|
<div style={{ display: 'flex', gap: '0.3rem', flexWrap: 'wrap' }}>
|
|
{activeTabs.map(cat => {
|
|
const isActive = activeCategory === cat;
|
|
const color = cat === 'All' ? GREEN : catColor(cat);
|
|
return (
|
|
<button
|
|
key={cat}
|
|
onClick={() => setActiveCategory(cat)}
|
|
style={{
|
|
padding: '0.35rem 0.75rem',
|
|
fontFamily: 'monospace', fontSize: '0.7rem', fontWeight: '600',
|
|
textTransform: 'uppercase', letterSpacing: '0.05em',
|
|
cursor: 'pointer', borderRadius: '0.25rem',
|
|
border: isActive ? `1px solid ${color}` : '1px solid transparent',
|
|
background: isActive ? `${color}15` : 'transparent',
|
|
color: isActive ? color : '#475569',
|
|
transition: 'all 0.12s',
|
|
}}
|
|
onMouseEnter={e => { if (!isActive) { e.currentTarget.style.color = '#94A3B8'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'; }}}
|
|
onMouseLeave={e => { if (!isActive) { e.currentTarget.style.color = '#475569'; e.currentTarget.style.borderColor = 'transparent'; }}}
|
|
>
|
|
{cat}
|
|
<span style={{ marginLeft: '0.35rem', opacity: 0.6, fontWeight: '400' }}>
|
|
{categoryCounts[cat] ?? 0}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Error state ──────────────────────────────────────────── */}
|
|
{error && (
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', gap: '0.5rem',
|
|
padding: '0.875rem 1rem',
|
|
background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.3)',
|
|
borderRadius: '0.5rem', color: '#F87171',
|
|
fontFamily: 'monospace', fontSize: '0.78rem',
|
|
}}>
|
|
<AlertCircle style={{ width: '15px', height: '15px', flexShrink: 0 }} />
|
|
{error}
|
|
<button
|
|
onClick={fetchArticles}
|
|
style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: '#F87171', fontFamily: 'monospace', fontSize: '0.72rem' }}
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Loading state ────────────────────────────────────────── */}
|
|
{loading && (
|
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '3rem' }}>
|
|
<Loader style={{ width: '28px', height: '28px', color: GREEN, animation: 'spin 1s linear infinite' }} />
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Article grid ─────────────────────────────────────────── */}
|
|
{!loading && !error && (
|
|
<div style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
|
|
gap: '0.875rem',
|
|
}}>
|
|
{filtered.length === 0 ? (
|
|
<EmptyState hasFilter={hasFilter} onClear={clearFilters} />
|
|
) : (
|
|
filtered.map(article => (
|
|
<ArticleCard
|
|
key={article.id}
|
|
article={article}
|
|
selected={selected?.id === article.id}
|
|
onSelect={a => setSelected(selected?.id === a.id ? null : a)}
|
|
onDelete={handleDelete}
|
|
canDelete={canWrite()}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Inline viewer ────────────────────────────────────────── */}
|
|
{selected && (
|
|
<div style={{ marginTop: '0.25rem' }}>
|
|
<KnowledgeBaseViewer
|
|
article={selected}
|
|
onClose={() => setSelected(null)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Upload modal ─────────────────────────────────────────── */}
|
|
{showUpload && (
|
|
<KnowledgeBaseModal
|
|
onClose={() => setShowUpload(false)}
|
|
onUpdate={() => { fetchArticles(); setShowUpload(false); }}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|