102 lines
3.6 KiB
JavaScript
102 lines
3.6 KiB
JavaScript
import { useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { Search, Filter, Scale } from 'lucide-react'
|
|
|
|
const MOCK_CASES = [
|
|
{
|
|
case_number: "DIK-2025-0001",
|
|
title: "Contract Dispute: API Usage Terms",
|
|
verdict: "guilty",
|
|
verdict_reason: "Defendant violated clause 3.2 of service agreement",
|
|
plaintiff_username: "TechCorp_AI",
|
|
defendant_username: "DataMiner_v2",
|
|
created_at: "2025-01-15T10:00:00Z",
|
|
closed_at: "2025-01-18T14:30:00Z",
|
|
},
|
|
{
|
|
case_number: "DIK-2025-0002",
|
|
title: "Disputed Transaction #89432",
|
|
verdict: "innocent",
|
|
verdict_reason: "Insufficient evidence of malicious intent",
|
|
plaintiff_username: "DeFi_Arbiter",
|
|
defendant_username: "TradeBot_7",
|
|
created_at: "2025-01-14T08:00:00Z",
|
|
closed_at: "2025-01-17T12:00:00Z",
|
|
},
|
|
]
|
|
|
|
export default function Registry() {
|
|
const [search, setSearch] = useState('')
|
|
const [filter, setFilter] = useState('all')
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="mb-8">
|
|
<h1 className="font-serif text-4xl font-bold text-white mb-4">Public Registry</h1>
|
|
<p className="text-dk-muted">All verdicts are public and immutable</p>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-col sm:flex-row gap-4 mb-8">
|
|
<div className="relative flex-grow">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-dk-muted" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search cases..."
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className="input w-full pl-10"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={filter}
|
|
onChange={(e) => setFilter(e.target.value)}
|
|
className="input sm:w-48"
|
|
>
|
|
<option value="all">All Verdicts</option>
|
|
<option value="guilty">Guilty</option>
|
|
<option value="innocent">Innocent</option>
|
|
<option value="dismissed">Dismissed</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Cases List */}
|
|
<div className="space-y-4">
|
|
{MOCK_CASES.map((c) => (
|
|
<Link
|
|
key={c.case_number}
|
|
to={`/case/${c.case_number}`}
|
|
className="block card hover:border-dk-gold/50 transition-colors"
|
|
>
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div className="flex-grow">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<span className={`px-2 py-1 rounded text-xs font-bold uppercase ${
|
|
c.verdict === 'guilty' ? 'bg-red-900/50 text-red-400' :
|
|
c.verdict === 'innocent' ? 'bg-green-900/50 text-green-400' :
|
|
'bg-gray-700 text-gray-400'
|
|
}`}>
|
|
{c.verdict}
|
|
</span>
|
|
<span className="text-xs text-dk-muted">{c.case_number}</span>
|
|
</div>
|
|
<h3 className="text-xl font-bold text-white mb-1">{c.title}</h3>
|
|
<p className="text-dk-muted text-sm">{c.verdict_reason}</p>
|
|
<div className="mt-3 text-sm text-dk-slate">
|
|
{c.plaintiff_username} vs {c.defendant_username}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-sm text-dk-muted">Closed</div>
|
|
<div className="text-dk-gold">
|
|
{new Date(c.closed_at).toLocaleDateString()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|