Spaces:
Running
Running
File size: 5,372 Bytes
df4a1a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | import React from 'react';
import { ScanSearch, FileText, CheckCircle2, ChevronRight, Zap } from 'lucide-react';
import { motion } from 'motion/react';
export default function DocumentViewer() {
return (
<div className="h-full bg-slate-900 rounded-xl overflow-hidden flex flex-col shadow-inner border border-slate-800 text-slate-300">
{/* Header */}
<div className="h-12 border-b border-slate-800 flex items-center justify-between px-4 bg-slate-900/50">
<div className="flex items-center gap-2">
<FileText size={16} className="text-slate-400" />
<span className="text-sm font-medium text-slate-200">Q3_Invoice_7482.pdf</span>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-1.5 text-xs text-brand-400 bg-brand-500/10 px-2.5 py-1 rounded-full border border-brand-500/20">
<Zap size={12} className="animate-pulse" />
AI Extraction: 98% Confidence
</div>
</div>
</div>
{/* Document Area */}
<div className="flex-1 p-6 relative overflow-auto bg-slate-950/50 flex items-center justify-center">
<div className="w-full max-w-lg aspect-[1/1.4] bg-white rounded shadow-2xl relative p-8">
{/* Faux Document Content */}
<div className="space-y-6">
<div className="flex justify-between items-start border-b-2 border-slate-200 pb-4">
<div>
<h1 className="text-3xl font-serif text-slate-800 font-bold tracking-tight">INVOICE</h1>
<p className="text-slate-500 text-sm mt-1">Acme Corp Ltd.</p>
</div>
<div className="text-right text-sm text-slate-600 space-y-1">
<p><strong>Date:</strong> Oct 14, 2026</p>
<p><strong>Inv #:</strong> INV-7482</p>
<p><strong>Due:</strong> Net 30</p>
</div>
</div>
{/* Simulated Table to be extracted */}
<div className="relative mt-8">
<table className="w-full text-sm text-left border-collapse">
<thead>
<tr className="border-b border-slate-300">
<th className="py-2 text-slate-700">Description</th>
<th className="py-2 text-slate-700">Quantity</th>
<th className="py-2 text-slate-700">Unit Price</th>
<th className="py-2 text-slate-700 text-right">Total</th>
</tr>
</thead>
<tbody className="text-slate-600">
<tr className="border-b border-slate-100">
<td className="py-3">Consulting Retainer - September</td>
<td>1</td>
<td>$4,500.00</td>
<td className="text-right">$4,500.00</td>
</tr>
<tr className="border-b border-slate-100">
<td className="py-3">Server Infrastructure (Q3)</td>
<td>3</td>
<td>$850.00</td>
<td className="text-right">$2,550.00</td>
</tr>
<tr>
<td className="py-3">Priority Support Add-on</td>
<td>1</td>
<td>$999.00</td>
<td className="text-right">$999.00</td>
</tr>
</tbody>
</table>
{/* AI Overlay Bounding Box */}
<motion.div
initial={{ opacity: 0, scale: 0.98 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="absolute -inset-4 border-2 border-brand-500 bg-brand-500/5 rounded-lg pointer-events-none"
>
<div className="absolute -top-3 -right-3 bg-brand-500 text-white rounded p-1 shadow-lg">
<CheckCircle2 size={14} />
</div>
<div className="absolute top-0 right-6 -translate-y-1/2 bg-brand-500 text-white text-[10px] font-bold px-2 py-0.5 rounded tracking-wide uppercase">
Data Extracted
</div>
{/* Visual scanning line */}
<motion.div
initial={{ top: '0%' }}
animate={{ top: '100%' }}
transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
className="absolute left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-brand-400 to-transparent shadow-[0_0_8px_rgba(59,130,246,0.6)] z-10"
/>
</motion.div>
</div>
<div className="mt-8 flex justify-end">
<div className="w-1/3 space-y-2 text-sm">
<div className="flex justify-between text-slate-600"><span>Subtotal:</span> <span>$8,049.00</span></div>
<div className="flex justify-between text-slate-600 border-b border-slate-200 pb-2"><span>Tax (10%):</span> <span>$804.90</span></div>
<div className="flex justify-between font-bold text-slate-800 text-lg"><span>Total:</span> <span>$8,853.90</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
|