81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import FileUpload from './FileUpload'
|
|
import DocumentList from './DocumentList'
|
|
import SearchBar from './SearchBar'
|
|
import OcrAnalytics from './OcrAnalytics'
|
|
import { Document, documentService } from '../services/api'
|
|
|
|
function Dashboard() {
|
|
const [documents, setDocuments] = useState<Document[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [searchResults, setSearchResults] = useState<Document[] | null>(null)
|
|
|
|
useEffect(() => {
|
|
loadDocuments()
|
|
}, [])
|
|
|
|
const loadDocuments = async () => {
|
|
try {
|
|
const response = await documentService.list()
|
|
setDocuments(response.data)
|
|
} catch (error) {
|
|
console.error('Failed to load documents:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleUploadSuccess = (newDocument: Document) => {
|
|
setDocuments(prev => [newDocument, ...prev])
|
|
}
|
|
|
|
const handleSearch = async (query: string) => {
|
|
if (!query.trim()) {
|
|
setSearchResults(null)
|
|
return
|
|
}
|
|
|
|
try {
|
|
const response = await documentService.search({ query })
|
|
setSearchResults(response.data.documents)
|
|
} catch (error) {
|
|
console.error('Search failed:', error)
|
|
}
|
|
}
|
|
|
|
const displayDocuments = searchResults || documents
|
|
|
|
return (
|
|
<div className="px-4 py-6">
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-bold text-gray-900 mb-4">Document Management</h1>
|
|
<FileUpload onUploadSuccess={handleUploadSuccess} />
|
|
</div>
|
|
|
|
<div className="mb-6">
|
|
<SearchBar onSearch={handleSearch} />
|
|
</div>
|
|
|
|
{!searchResults && (
|
|
<div className="mb-6">
|
|
<OcrAnalytics documents={documents} />
|
|
</div>
|
|
)}
|
|
|
|
{searchResults && (
|
|
<div className="mb-4">
|
|
<button
|
|
onClick={() => setSearchResults(null)}
|
|
className="text-blue-600 hover:text-blue-500 text-sm"
|
|
>
|
|
← Back to all documents
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<DocumentList documents={displayDocuments} loading={loading} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Dashboard |