9356ba6d1b
New Job page:
- OCR result now shows source image and editable textarea side by side
- Grounding-box overlay preview moved into the non-commit branch
Browse Jobs / Review page:
- JobDetail uses a 2-column layout: image + read-only info on left,
all editable fields on right
- Author, book, chapter, and page are now editable inputs (not read-only)
- Text textarea is always editable (for both unreviewed and reviewed jobs)
- Reviewer name pre-filled for reviewed jobs; button becomes "Save Changes"
- Outer grid changed to 1/3 list + 2/3 detail for more review space
Backend:
- PUT /api/jobs/{id}/review now accepts and saves author, book,
chapter, page alongside reviewed_text and reviewer_name
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
535 lines
19 KiB
JavaScript
535 lines
19 KiB
JavaScript
import { useState, useEffect, useCallback } from 'react'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import {
|
|
Search, ChevronLeft, ChevronRight, CheckCircle2, Clock,
|
|
User, BookOpen, FileText, Calendar, Hash, Loader2, X, Save,
|
|
RefreshCw, Image as ImageIcon,
|
|
} from 'lucide-react'
|
|
import axios from 'axios'
|
|
|
|
const API_BASE = import.meta.env.VITE_API_URL || '/api'
|
|
|
|
const STATUS_COLORS = {
|
|
unreviewed: 'text-amber-400 bg-amber-400/10 border-amber-400/30',
|
|
reviewed: 'text-green-400 bg-green-400/10 border-green-400/30',
|
|
}
|
|
|
|
const STATUS_ICONS = {
|
|
unreviewed: Clock,
|
|
reviewed: CheckCircle2,
|
|
}
|
|
|
|
function StatusBadge({ status }) {
|
|
const Icon = STATUS_ICONS[status] || Clock
|
|
return (
|
|
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border ${STATUS_COLORS[status] || 'text-gray-400'}`}>
|
|
<Icon className="w-3 h-3" />
|
|
{status}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
function JobDetail({ jobId, onClose, onReviewed }) {
|
|
const [job, setJob] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState(null)
|
|
|
|
// Editable fields
|
|
const [editedText, setEditedText] = useState('')
|
|
const [editAuthor, setEditAuthor] = useState('')
|
|
const [editBook, setEditBook] = useState('')
|
|
const [editChapter, setEditChapter] = useState('')
|
|
const [editPage, setEditPage] = useState('')
|
|
const [reviewerName, setReviewerName] = useState('')
|
|
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [saveResult, setSaveResult] = useState(null)
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
setLoading(true)
|
|
setError(null)
|
|
setSaveResult(null)
|
|
|
|
axios.get(`${API_BASE}/jobs/${jobId}`)
|
|
.then(res => {
|
|
if (!cancelled) {
|
|
const d = res.data
|
|
setJob(d)
|
|
setEditedText(d.reviewed_text ?? d.ocr_text ?? '')
|
|
setEditAuthor(d.author || '')
|
|
setEditBook(d.book || '')
|
|
setEditChapter(d.chapter || '')
|
|
setEditPage(d.page || '')
|
|
setReviewerName(d.reviewer_name || '')
|
|
}
|
|
})
|
|
.catch(err => {
|
|
if (!cancelled) setError(err.response?.data?.detail || err.message)
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) setLoading(false)
|
|
})
|
|
|
|
return () => { cancelled = true }
|
|
}, [jobId])
|
|
|
|
const handleSave = async () => {
|
|
if (!reviewerName.trim()) {
|
|
setSaveResult({ success: false, error: 'Reviewer name is required.' })
|
|
return
|
|
}
|
|
setSubmitting(true)
|
|
setSaveResult(null)
|
|
try {
|
|
const res = await axios.put(`${API_BASE}/jobs/${jobId}/review`, {
|
|
reviewed_text: editedText,
|
|
reviewer_name: reviewerName.trim(),
|
|
author: editAuthor,
|
|
book: editBook,
|
|
chapter: editChapter,
|
|
page: editPage,
|
|
})
|
|
setJob(res.data)
|
|
setSaveResult({ success: true })
|
|
onReviewed(res.data)
|
|
} catch (err) {
|
|
setSaveResult({ success: false, error: err.response?.data?.detail || err.message })
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const inputClass =
|
|
'w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
|
|
'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'
|
|
|
|
const isReviewed = job?.status === 'reviewed'
|
|
|
|
return (
|
|
<div className="glass rounded-2xl flex flex-col overflow-hidden" style={{ minHeight: '600px' }}>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-5 py-4 border-b border-white/10 flex-shrink-0">
|
|
<div className="flex items-center gap-3">
|
|
{job && <StatusBadge status={job.status} />}
|
|
<h3 className="font-semibold text-gray-200">Job Detail</h3>
|
|
</div>
|
|
<button onClick={onClose} className="glass glass-hover p-1.5 rounded-lg">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{loading && (
|
|
<div className="flex justify-center py-16">
|
|
<Loader2 className="w-8 h-8 animate-spin text-purple-400" />
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="m-5 glass p-4 rounded-xl border-red-500/30 bg-red-500/10">
|
|
<p className="text-sm text-red-400">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{job && !loading && (
|
|
<div className="grid grid-cols-2 divide-x divide-white/10 flex-1 min-h-0">
|
|
|
|
{/* ── Left column: image + read-only info ── */}
|
|
<div className="overflow-y-auto p-5 space-y-4">
|
|
<div>
|
|
<p className="text-xs text-gray-400 mb-2 flex items-center gap-1">
|
|
<ImageIcon className="w-3.5 h-3.5" /> Source Image
|
|
</p>
|
|
<img
|
|
src={`${API_BASE}/jobs/${job.id}/image`}
|
|
alt="Job source"
|
|
className="w-full rounded-xl border border-white/10 bg-black/30"
|
|
onError={e => { e.target.style.display = 'none' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Read-only job info */}
|
|
<div className="space-y-1.5 text-xs text-gray-500">
|
|
<p className="font-mono break-all">{job.id}</p>
|
|
<p>Submitted: {new Date(job.submitted_at).toLocaleString()}</p>
|
|
{job.mode && <p>Mode: {job.mode}</p>}
|
|
{isReviewed && job.reviewed_at && (
|
|
<p>Last reviewed: {new Date(job.reviewed_at).toLocaleString()}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Original OCR text (collapsed, for reviewed jobs) */}
|
|
{isReviewed && job.ocr_text && (
|
|
<details className="glass rounded-xl overflow-hidden">
|
|
<summary className="px-3 py-2 cursor-pointer text-xs text-gray-500 hover:bg-white/5 transition-colors">
|
|
Original OCR Text
|
|
</summary>
|
|
<div className="px-3 py-3 border-t border-white/10">
|
|
<pre className="text-xs text-gray-500 whitespace-pre-wrap font-mono">{job.ocr_text}</pre>
|
|
</div>
|
|
</details>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Right column: all editable fields ── */}
|
|
<div className="overflow-y-auto p-5 space-y-5">
|
|
|
|
{/* Metadata */}
|
|
<div className="space-y-3">
|
|
<p className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Metadata</p>
|
|
<div>
|
|
<label className="text-xs text-gray-400 mb-1 block">Author</label>
|
|
<input
|
|
type="text"
|
|
value={editAuthor}
|
|
onChange={e => setEditAuthor(e.target.value)}
|
|
placeholder="Author name"
|
|
className={inputClass}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-400 mb-1 block">Book</label>
|
|
<input
|
|
type="text"
|
|
value={editBook}
|
|
onChange={e => setEditBook(e.target.value)}
|
|
placeholder="Book title"
|
|
className={inputClass}
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<label className="text-xs text-gray-400 mb-1 block">Chapter</label>
|
|
<input
|
|
type="text"
|
|
value={editChapter}
|
|
onChange={e => setEditChapter(e.target.value)}
|
|
placeholder="Chapter"
|
|
className={inputClass}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-400 mb-1 block">Page</label>
|
|
<input
|
|
type="text"
|
|
value={editPage}
|
|
onChange={e => setEditPage(e.target.value)}
|
|
placeholder="Page"
|
|
className={inputClass}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* OCR / reviewed text */}
|
|
<div className="space-y-1">
|
|
<label className="text-xs text-gray-400 block">
|
|
{isReviewed ? 'Reviewed Text' : 'OCR Text'}
|
|
<span className="text-purple-400 ml-1">(editable)</span>
|
|
</label>
|
|
<textarea
|
|
value={editedText}
|
|
onChange={e => setEditedText(e.target.value)}
|
|
rows={12}
|
|
className={`${inputClass} resize-y font-mono`}
|
|
placeholder="Text content..."
|
|
/>
|
|
</div>
|
|
|
|
{/* Reviewer + save */}
|
|
<div className="space-y-3 pt-3 border-t border-white/10">
|
|
<div>
|
|
<label className="text-xs text-gray-400 mb-1 block">Reviewer Name</label>
|
|
<input
|
|
type="text"
|
|
value={reviewerName}
|
|
onChange={e => setReviewerName(e.target.value)}
|
|
placeholder="Your name"
|
|
className={inputClass}
|
|
/>
|
|
</div>
|
|
|
|
{saveResult && (
|
|
<div className={`p-3 rounded-lg text-sm ${saveResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}>
|
|
{saveResult.success
|
|
? (isReviewed ? 'Changes saved!' : 'Job marked as reviewed!')
|
|
: saveResult.error}
|
|
</div>
|
|
)}
|
|
|
|
<motion.button
|
|
onClick={handleSave}
|
|
disabled={submitting || !reviewerName.trim()}
|
|
className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-medium text-sm transition-all ${
|
|
submitting || !reviewerName.trim()
|
|
? 'opacity-50 cursor-not-allowed bg-white/5'
|
|
: isReviewed
|
|
? 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500'
|
|
: 'bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-500 hover:to-emerald-500'
|
|
}`}
|
|
whileHover={!submitting && reviewerName.trim() ? { scale: 1.02 } : {}}
|
|
whileTap={!submitting && reviewerName.trim() ? { scale: 0.98 } : {}}
|
|
>
|
|
{submitting ? (
|
|
<><Loader2 className="w-4 h-4 animate-spin" /> Saving...</>
|
|
) : isReviewed ? (
|
|
<><Save className="w-4 h-4" /> Save Changes</>
|
|
) : (
|
|
<><CheckCircle2 className="w-4 h-4" /> Mark Reviewed</>
|
|
)}
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function JobsPanel() {
|
|
const [search, setSearch] = useState('')
|
|
const [filterStatus, setFilterStatus] = useState('')
|
|
const [filterAuthor, setFilterAuthor] = useState('')
|
|
const [filterBook, setFilterBook] = useState('')
|
|
const [jobs, setJobs] = useState([])
|
|
const [total, setTotal] = useState(0)
|
|
const [page, setPage] = useState(0)
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState(null)
|
|
const [selectedJobId, setSelectedJobId] = useState(null)
|
|
|
|
const LIMIT = 20
|
|
|
|
const fetchJobs = useCallback(async (pageNum = 0) => {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
const params = new URLSearchParams()
|
|
if (search.trim()) params.set('search', search.trim())
|
|
if (filterStatus) params.set('status', filterStatus)
|
|
if (filterAuthor.trim()) params.set('author', filterAuthor.trim())
|
|
if (filterBook.trim()) params.set('book', filterBook.trim())
|
|
params.set('limit', LIMIT)
|
|
params.set('offset', pageNum * LIMIT)
|
|
|
|
const res = await axios.get(`${API_BASE}/jobs?${params}`)
|
|
setJobs(res.data.jobs)
|
|
setTotal(res.data.total)
|
|
setPage(pageNum)
|
|
} catch (err) {
|
|
setError(err.response?.data?.detail || err.message)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [search, filterStatus, filterAuthor, filterBook])
|
|
|
|
useEffect(() => {
|
|
fetchJobs(0)
|
|
}, []) // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
const handleSearch = (e) => {
|
|
e.preventDefault()
|
|
fetchJobs(0)
|
|
}
|
|
|
|
const handleReviewed = (updatedJob) => {
|
|
setJobs(prev => prev.map(j => j.id === updatedJob.id ? { ...j, ...updatedJob } : j))
|
|
}
|
|
|
|
const totalPages = Math.ceil(total / LIMIT)
|
|
|
|
const inputClass =
|
|
'bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
|
|
'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'
|
|
|
|
return (
|
|
// 1/3 list — 2/3 detail on large screens
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
{/* ── Left: Search + List ── */}
|
|
<div className="lg:col-span-1 space-y-4">
|
|
<div className="glass p-4 rounded-2xl space-y-3">
|
|
<form onSubmit={handleSearch} className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={search}
|
|
onChange={e => setSearch(e.target.value)}
|
|
placeholder="Search all fields..."
|
|
className={`${inputClass} flex-1`}
|
|
/>
|
|
<motion.button
|
|
type="submit"
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-sm font-medium"
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
<Search className="w-4 h-4" />
|
|
Search
|
|
</motion.button>
|
|
</form>
|
|
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<select
|
|
value={filterStatus}
|
|
onChange={e => setFilterStatus(e.target.value)}
|
|
className={inputClass}
|
|
>
|
|
<option value="">All statuses</option>
|
|
<option value="unreviewed">Unreviewed</option>
|
|
<option value="reviewed">Reviewed</option>
|
|
</select>
|
|
<input
|
|
type="text"
|
|
value={filterAuthor}
|
|
onChange={e => setFilterAuthor(e.target.value)}
|
|
placeholder="Author..."
|
|
className={inputClass}
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={filterBook}
|
|
onChange={e => setFilterBook(e.target.value)}
|
|
placeholder="Book..."
|
|
className={inputClass}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs text-gray-500">
|
|
{total} job{total !== 1 ? 's' : ''} found
|
|
</span>
|
|
<button
|
|
onClick={() => fetchJobs(page)}
|
|
className="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-200 transition-colors"
|
|
>
|
|
<RefreshCw className="w-3 h-3" />
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{loading && (
|
|
<div className="flex justify-center py-8">
|
|
<Loader2 className="w-6 h-6 animate-spin text-purple-400" />
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="glass p-4 rounded-xl border-red-500/30 bg-red-500/10">
|
|
<p className="text-sm text-red-400">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{!loading && !error && jobs.length === 0 && (
|
|
<div className="glass p-8 rounded-2xl text-center">
|
|
<FileText className="w-10 h-10 mx-auto mb-3 text-gray-600" />
|
|
<p className="text-gray-400">No jobs found</p>
|
|
<p className="text-xs text-gray-500 mt-1">Commit your first OCR job from the New Job tab</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<AnimatePresence>
|
|
{jobs.map(job => (
|
|
<motion.button
|
|
key={job.id}
|
|
onClick={() => setSelectedJobId(job.id === selectedJobId ? null : job.id)}
|
|
className={`w-full text-left glass p-4 rounded-xl transition-all border ${
|
|
selectedJobId === job.id
|
|
? 'border-purple-500/50 bg-purple-500/5'
|
|
: 'border-white/5 hover:border-white/20 hover:bg-white/5'
|
|
}`}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
layout
|
|
>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
|
{job.book && (
|
|
<span className="text-sm font-medium text-gray-200 truncate">{job.book}</span>
|
|
)}
|
|
{job.chapter && (
|
|
<span className="text-xs text-gray-500">Ch. {job.chapter}</span>
|
|
)}
|
|
{job.page && (
|
|
<span className="text-xs text-gray-500">p. {job.page}</span>
|
|
)}
|
|
</div>
|
|
{job.author && (
|
|
<p className="text-xs text-gray-400">{job.author}</p>
|
|
)}
|
|
<p className="text-xs text-gray-600 mt-1 font-mono">
|
|
{new Date(job.submitted_at).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<div className="flex-shrink-0">
|
|
<StatusBadge status={job.status} />
|
|
</div>
|
|
</div>
|
|
</motion.button>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{totalPages > 1 && (
|
|
<div className="flex items-center justify-center gap-3">
|
|
<button
|
|
onClick={() => fetchJobs(page - 1)}
|
|
disabled={page === 0}
|
|
className="glass glass-hover p-2 rounded-lg disabled:opacity-30"
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
</button>
|
|
<span className="text-sm text-gray-400">
|
|
Page {page + 1} of {totalPages}
|
|
</span>
|
|
<button
|
|
onClick={() => fetchJobs(page + 1)}
|
|
disabled={page >= totalPages - 1}
|
|
className="glass glass-hover p-2 rounded-lg disabled:opacity-30"
|
|
>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── Right: Detail panel ── */}
|
|
<div className="lg:col-span-2">
|
|
<AnimatePresence mode="wait">
|
|
{selectedJobId ? (
|
|
<motion.div
|
|
key={selectedJobId}
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: 20 }}
|
|
>
|
|
<JobDetail
|
|
jobId={selectedJobId}
|
|
onClose={() => setSelectedJobId(null)}
|
|
onReviewed={handleReviewed}
|
|
/>
|
|
</motion.div>
|
|
) : (
|
|
<motion.div
|
|
key="empty"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="glass p-8 rounded-2xl flex flex-col items-center justify-center text-center"
|
|
style={{ minHeight: '300px' }}
|
|
>
|
|
<Search className="w-10 h-10 mb-3 text-gray-600" />
|
|
<p className="text-gray-400">Select a job to view and edit details</p>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|