Add job tracking with PostgreSQL, image storage, and review workflow

- Add PostgreSQL service to docker-compose with health check and postgres_data volume - Mount ./ocr_images as bind volume for persistent image storage - Add backend/database.py with schema init and get_db() context manager - Add 5 new API endpoints: POST /api/jobs, GET /api/jobs (search), GET /api/jobs/{id}, GET /api/jobs/{id}/image, PUT /api/jobs/{id}/review - Jobs are saved with author/book/chapter/page metadata, auto UUID, and submitted_at timestamp - Jobs start as 'unreviewed'; review captures edited text, reviewer name, and reviewed_at - Add MetadataForm.jsx (author/book/chapter/page inputs) to the New Job panel - Add JobsPanel.jsx with search/filter, paginated list, and detail pane with review form - Add "Commit Job" button to ResultPanel (plain_ocr mode only) with success/error feedback - Add "New Job" / "Browse Jobs" navigation to the app header Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-09 16:48:12 +01:00
parent 68147eb97c
commit fd747e6c23
9 changed files with 1208 additions and 212 deletions
--- a/frontend/src/components/JobsPanel.jsx
+++ b/frontend/src/components/JobsPanel.jsx
@@ -0,0 +1,492 @@
+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 MetaRow({ icon: Icon, label, value }) {
+  if (!value) return null
+  return (
+    <div className="flex items-start gap-2 text-sm">
+      <Icon className="w-4 h-4 text-purple-400 mt-0.5 flex-shrink-0" />
+      <span className="text-gray-400 flex-shrink-0">{label}:</span>
+      <span className="text-gray-200">{value}</span>
+    </div>
+  )
+}
+
+function JobDetail({ jobId, onClose, onReviewed }) {
+  const [job, setJob] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+  const [editedText, setEditedText] = useState('')
+  const [reviewerName, setReviewerName] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [reviewResult, setReviewResult] = useState(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+    setReviewResult(null)
+
+    axios.get(`${API_BASE}/jobs/${jobId}`)
+      .then(res => {
+        if (!cancelled) {
+          setJob(res.data)
+          setEditedText(res.data.reviewed_text ?? res.data.ocr_text ?? '')
+        }
+      })
+      .catch(err => {
+        if (!cancelled) setError(err.response?.data?.detail || err.message)
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+
+    return () => { cancelled = true }
+  }, [jobId])
+
+  const handleMarkReviewed = async () => {
+    if (!reviewerName.trim()) {
+      setReviewResult({ success: false, error: 'Reviewer name is required.' })
+      return
+    }
+    setSubmitting(true)
+    setReviewResult(null)
+    try {
+      const res = await axios.put(`${API_BASE}/jobs/${jobId}/review`, {
+        reviewed_text: editedText,
+        reviewer_name: reviewerName.trim(),
+      })
+      setJob(res.data)
+      setReviewResult({ success: true })
+      onReviewed(res.data)
+    } catch (err) {
+      setReviewResult({ 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'
+
+  return (
+    <div className="glass rounded-2xl flex flex-col h-full overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-4 border-b border-white/10 flex-shrink-0">
+        <h3 className="font-semibold text-gray-200">Job Detail</h3>
+        <button onClick={onClose} className="glass glass-hover p-1.5 rounded-lg">
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-5 space-y-5">
+        {loading && (
+          <div className="flex justify-center py-12">
+            <Loader2 className="w-8 h-8 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>
+        )}
+
+        {job && !loading && (
+          <>
+            {/* Status + IDs */}
+            <div className="flex items-center gap-3 flex-wrap">
+              <StatusBadge status={job.status} />
+              <span className="text-xs text-gray-500 font-mono">{job.id}</span>
+            </div>
+
+            {/* Metadata */}
+            <div className="glass p-4 rounded-xl space-y-2">
+              <MetaRow icon={User} label="Author" value={job.author} />
+              <MetaRow icon={BookOpen} label="Book" value={job.book} />
+              <MetaRow icon={Hash} label="Chapter" value={job.chapter} />
+              <MetaRow icon={FileText} label="Page" value={job.page} />
+              <MetaRow icon={Calendar} label="Submitted" value={job.submitted_at ? new Date(job.submitted_at).toLocaleString() : null} />
+              {job.mode && <MetaRow icon={FileText} label="Mode" value={job.mode} />}
+            </div>
+
+            {/* Image */}
+            <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>
+
+            {/* OCR / Reviewed text */}
+            <div>
+              <p className="text-xs text-gray-400 mb-2">
+                {job.status === 'reviewed' ? 'Reviewed Text' : 'OCR Text (editable)'}
+              </p>
+              {job.status === 'reviewed' ? (
+                <div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-60 overflow-y-auto">
+                  <pre className="text-sm text-gray-200 whitespace-pre-wrap font-mono">
+                    {job.reviewed_text}
+                  </pre>
+                </div>
+              ) : (
+                <textarea
+                  value={editedText}
+                  onChange={e => setEditedText(e.target.value)}
+                  rows={8}
+                  className={`${inputClass} resize-y font-mono`}
+                  placeholder="OCR text will appear here for editing..."
+                />
+              )}
+            </div>
+
+            {/* Original OCR text (collapsed) for reviewed jobs */}
+            {job.status === 'reviewed' && job.ocr_text && (
+              <details className="glass rounded-xl overflow-hidden">
+                <summary className="px-4 py-3 cursor-pointer text-sm text-gray-400 hover:bg-white/5 transition-colors">
+                  Original OCR Text
+                </summary>
+                <div className="px-4 py-3 border-t border-white/10">
+                  <pre className="text-sm text-gray-500 whitespace-pre-wrap font-mono">
+                    {job.ocr_text}
+                  </pre>
+                </div>
+              </details>
+            )}
+
+            {/* Review info for reviewed jobs */}
+            {job.status === 'reviewed' && (
+              <div className="glass p-4 rounded-xl space-y-2">
+                <MetaRow icon={User} label="Reviewer" value={job.reviewer_name} />
+                <MetaRow icon={Calendar} label="Reviewed" value={job.reviewed_at ? new Date(job.reviewed_at).toLocaleString() : null} />
+              </div>
+            )}
+
+            {/* Mark Reviewed form */}
+            {job.status === 'unreviewed' && (
+              <div className="glass p-4 rounded-xl space-y-3 border border-purple-500/20">
+                <p className="text-sm font-medium text-gray-300">Mark as Reviewed</p>
+                <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>
+
+                {reviewResult && (
+                  <div className={`p-3 rounded-lg text-sm ${reviewResult.success ? 'bg-green-500/10 text-green-400' : 'bg-red-500/10 text-red-400'}`}>
+                    {reviewResult.success ? 'Job marked as reviewed!' : reviewResult.error}
+                  </div>
+                )}
+
+                <motion.button
+                  onClick={handleMarkReviewed}
+                  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'
+                      : '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...</>
+                  ) : (
+                    <><Save className="w-4 h-4" /> Mark Reviewed</>
+                  )}
+                </motion.button>
+              </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])
+
+  // Initial load
+  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 (
+    <div className="grid lg:grid-cols-2 gap-6 h-full">
+      {/* Left: Search + List */}
+      <div className="space-y-4">
+        {/* Search form */}
+        <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>
+
+          {/* Filters */}
+          <div className="grid grid-cols-3 gap-2">
+            <select
+              value={filterStatus}
+              onChange={e => setFilterStatus(e.target.value)}
+              className={`${inputClass} col-span-1`}
+            >
+              <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} col-span-1`}
+            />
+            <input
+              type="text"
+              value={filterBook}
+              onChange={e => setFilterBook(e.target.value)}
+              placeholder="Book..."
+              className={`${inputClass} col-span-1`}
+            />
+          </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>
+
+        {/* Results */}
+        <div className="space-y-2">
+          {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>
+          )}
+
+          <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>
+
+        {/* Pagination */}
+        {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>
+        <AnimatePresence mode="wait">
+          {selectedJobId ? (
+            <motion.div
+              key={selectedJobId}
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 20 }}
+              className="h-full"
+            >
+              <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 h-full min-h-64"
+            >
+              <Search className="w-10 h-10 mb-3 text-gray-600" />
+              <p className="text-gray-400">Select a job to view details</p>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  )
+}