You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
2.4 KiB
68 lines
2.4 KiB
'use client';
|
|
|
|
import { getStats } from '@/lib/api';
|
|
import { useEffect, useState } from 'react';
|
|
import { Brain, FileText, Layers, Tag, Link } from 'lucide-react';
|
|
|
|
interface Stats {
|
|
total_documents: number;
|
|
total_chunks: number;
|
|
total_relations: number;
|
|
total_tags: number;
|
|
last_indexed: string | null;
|
|
embedding_model: string;
|
|
chat_model: string;
|
|
}
|
|
|
|
export default function HomePage() {
|
|
const [stats, setStats] = useState<Stats | null>(null);
|
|
|
|
useEffect(() => {
|
|
getStats().then(setStats).catch(console.error);
|
|
}, []);
|
|
|
|
const cards = stats ? [
|
|
{ label: 'Documents', value: stats.total_documents, icon: FileText, color: 'text-blue-600' },
|
|
{ label: 'Chunks', value: stats.total_chunks, icon: Layers, color: 'text-purple-600' },
|
|
{ label: 'Links', value: stats.total_relations, icon: Link, color: 'text-green-600' },
|
|
{ label: 'Tags', value: stats.total_tags, icon: Tag, color: 'text-orange-600' },
|
|
] : [];
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="flex items-center gap-3 mb-8">
|
|
<Brain className="text-brain-600" size={36} />
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-900">Second Brain</h1>
|
|
<p className="text-slate-500">Your AI-powered knowledge base</p>
|
|
</div>
|
|
</div>
|
|
|
|
{stats && (
|
|
<>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
|
{cards.map((card) => (
|
|
<div key={card.label} className="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
|
|
<card.icon className={`${card.color} mb-2`} size={24} />
|
|
<p className="text-2xl font-bold text-slate-900">{card.value.toLocaleString()}</p>
|
|
<p className="text-sm text-slate-500">{card.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-slate-200 p-5 text-sm text-slate-600">
|
|
<p><span className="font-medium">Embedding model:</span> {stats.embedding_model}</p>
|
|
<p><span className="font-medium">Chat model:</span> {stats.chat_model}</p>
|
|
{stats.last_indexed && (
|
|
<p><span className="font-medium">Last indexed:</span> {new Date(stats.last_indexed).toLocaleString()}</p>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{!stats && (
|
|
<div className="text-slate-400 animate-pulse">Loading stats...</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|