File size: 4,259 Bytes
50a8ea3 | 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 | import React from 'react';
interface RevisionHistoryModalProps {
onClose: () => void;
}
export const RevisionHistoryModal: React.FC<RevisionHistoryModalProps> = ({ onClose }) => {
const revisions = [
{
id: 'rev-3',
version: 'v1.3 (Current)',
time: '35 minutes ago',
author: 'Automated Stress-Tester',
change: 'Injected Public Interest Hardship Waiver Clause to mitigate fee stall tactics.',
scoreChange: '+12% (84% -> 96%)',
badge: 'Optimized',
},
{
id: 'rev-2',
version: 'v1.2',
time: '2 hours ago',
author: 'Privacy Redaction Engine',
change: 'Masked Street Address (124 Main St) and Email (j.doe@email.com) in public draft.',
scoreChange: 'PII Protected',
badge: 'Secured',
},
{
id: 'rev-1',
version: 'v1.0',
time: 'Oct 24, 2024 • 09:30 AM',
author: 'Citizen Intake',
change: 'Initial grievance ingestion and statutory framework mapping to Sunshine Law § 119.07.',
scoreChange: 'Initial Base',
badge: 'Created',
},
];
return (
<div className="fixed inset-0 bg-black/50 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-in fade-in duration-200">
<div className="bg-white rounded-2xl max-w-2xl w-full max-h-[85vh] flex flex-col shadow-2xl border border-[#E2E8F0] overflow-hidden">
{/* Header */}
<div className="p-6 border-b border-[#E2E8F0] flex justify-between items-center bg-[#F8FAFC]">
<div>
<div className="flex items-center gap-2">
<span className="material-symbols-outlined text-[#006c4a] text-[24px]">history</span>
<h2 className="font-headline font-bold text-[20px] text-[#0F172A]">
Revision History & Audit Log
</h2>
</div>
<p className="text-[13px] text-[#64748B] mt-0.5">
Cryptographic integrity log for legal drafting and stress test iterations
</p>
</div>
<button
onClick={onClose}
className="w-8 h-8 rounded-full flex items-center justify-center text-[#64748B] hover:text-[#0F172A] hover:bg-[#E2E8F0] transition-colors cursor-pointer"
>
<span className="material-symbols-outlined text-[20px]">close</span>
</button>
</div>
{/* Content */}
<div className="p-6 overflow-y-auto flex-grow flex flex-col gap-4">
{revisions.map((rev) => (
<div
key={rev.id}
className="bg-white border border-[#CBD5E1] rounded-xl p-4 flex flex-col gap-2 hover:border-[#0F172A] transition-colors shadow-xs"
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="font-headline font-bold text-[14px] text-[#0F172A]">
{rev.version}
</span>
<span className="text-[11px] bg-[#E2E8F0] text-[#334155] px-2 py-0.5 rounded font-mono">
{rev.time}
</span>
</div>
<span className="text-[11px] font-bold text-[#006c4a] bg-[#DCFCE7] px-2.5 py-0.5 rounded-full">
{rev.scoreChange}
</span>
</div>
<p className="text-[13.5px] text-[#475569] leading-relaxed">{rev.change}</p>
<div className="text-[11px] text-[#94A3B8] flex items-center gap-1 pt-1 border-t border-[#F1F5F9]">
<span className="material-symbols-outlined text-[13px]">person</span>
<span>Triggered by: {rev.author}</span>
</div>
</div>
))}
</div>
{/* Footer */}
<div className="p-4 border-t border-[#E2E8F0] bg-[#F8FAFC] flex justify-end">
<button
onClick={onClose}
className="px-4 py-2 text-[13px] font-medium bg-[#0F172A] text-white hover:bg-[#1E293B] rounded-lg cursor-pointer"
>
Done
</button>
</div>
</div>
</div>
);
};
|