chihlasm
3d911d2dc9
- Replace QuickStartPage with FlowPilot-centric dashboard - Add StartSessionInput with Guided/Chat mode toggle - Add PendingEscalations, ActiveFlowPilotSessions, PerformanceCards - Add KnowledgeBaseCards, TeamSummary, RecentFlowPilotSessions - Every number/card is a portal to its detail page - Restructure sidebar: Resolve/Knowledge/Insights sections - Remove redundant nav items (FlowPilot, Flow Editor, Flow Assist, etc.) - Wire prefill from dashboard input to FlowPilot intake - Update mobile nav to match new sidebar structure Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { Network, Code2, ListChecks, ArrowRight } from 'lucide-react'
|
|
import { sidebarApi } from '@/api'
|
|
|
|
export function KnowledgeBaseCards() {
|
|
const navigate = useNavigate()
|
|
const [flowCount, setFlowCount] = useState(0)
|
|
|
|
useEffect(() => {
|
|
sidebarApi.getStats()
|
|
.then((stats) => setFlowCount(stats.tree_counts.total))
|
|
.catch(() => {})
|
|
}, [])
|
|
|
|
const items = [
|
|
{ label: 'Flows', value: flowCount, icon: Network, color: '#a78bfa', href: '/trees' },
|
|
{ label: 'Scripts', value: '\u2014', icon: Code2, color: '#2dd4bf', href: '/scripts' },
|
|
{ label: 'Pending Review', value: '\u2014', icon: ListChecks, color: '#fbbf24', href: '/review-queue' },
|
|
]
|
|
|
|
return (
|
|
<div className="glass-card-static">
|
|
<div
|
|
className="flex items-center justify-between px-5 py-3"
|
|
style={{ borderBottom: '1px solid var(--glass-border)' }}
|
|
>
|
|
<h3 className="font-heading text-sm font-bold text-foreground">Knowledge Base</h3>
|
|
<button
|
|
onClick={() => navigate('/trees')}
|
|
className="flex items-center gap-1 text-[0.6875rem] text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
Browse <ArrowRight size={10} />
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-3 divide-x" style={{ borderColor: 'var(--glass-border)' }}>
|
|
{items.map((item) => (
|
|
<button
|
|
key={item.label}
|
|
onClick={() => navigate(item.href)}
|
|
className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
|
|
>
|
|
<item.icon size={20} style={{ color: item.color }} />
|
|
<p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>
|
|
<p className="font-label text-[0.5625rem] uppercase tracking-[0.1em] text-muted-foreground">
|
|
{item.label}
|
|
</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|