| import React from 'react'; | |
| interface AppealTrackerModalProps { | |
| onClose: () => void; | |
| onOpenWorkspace: () => void; | |
| } | |
| export const AppealTrackerModal: React.FC<AppealTrackerModalProps> = ({ | |
| onClose, | |
| onOpenWorkspace, | |
| }) => { | |
| const milestones = [ | |
| { | |
| title: 'Formal Filing Submitted', | |
| date: 'Oct 24, 2024 • 10:14 AM', | |
| description: 'Request dispatched to Sgt. Amanda Reyes via electronic statutory gateway.', | |
| status: 'completed', | |
| }, | |
| { | |
| title: 'Agency Acknowledgement & Tracking ID', | |
| date: 'Oct 24, 2024 • 02:40 PM', | |
| description: 'Formal confirmation received. Reference ID: #SPD-REC-8932.', | |
| status: 'completed', | |
| }, | |
| { | |
| title: 'PIO Records Custodian Review', | |
| date: 'In Progress • 18 Days Remaining', | |
| description: 'Records Division reviewing bodycam video timestamps for redactions.', | |
| status: 'current', | |
| }, | |
| { | |
| title: 'Release of Non-Exempt Records', | |
| date: 'Est. Nov 11, 2024', | |
| description: 'Electronic PDF/MP4 link generation and delivery to requester vault.', | |
| status: 'upcoming', | |
| }, | |
| { | |
| title: 'First Appellate Authority Escalation (If Delayed)', | |
| date: 'Automated if no response by Day 20', | |
| description: 'Automatic generation of Section 19 First Appeal petition.', | |
| status: 'upcoming', | |
| }, | |
| ]; | |
| 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]">track_changes</span> | |
| <h2 className="font-headline font-bold text-[20px] text-[#0F172A]"> | |
| Appeal & Filing Tracker | |
| </h2> | |
| </div> | |
| <p className="text-[13px] text-[#64748B] mt-0.5"> | |
| Case #CL-2024-8932 • Public Records Request | |
| </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> | |
| {/* Timeline body */} | |
| <div className="p-6 overflow-y-auto flex-grow flex flex-col gap-6"> | |
| <div className="bg-[#F0FDF4] border border-[#86EFAC] rounded-xl p-4 flex items-center justify-between"> | |
| <div className="flex items-center gap-3"> | |
| <div className="w-9 h-9 rounded-full bg-[#006c4a] text-white flex items-center justify-center"> | |
| <span className="material-symbols-outlined text-[18px]">verified</span> | |
| </div> | |
| <div> | |
| <div className="text-[14px] font-bold text-[#0F172A]"> | |
| Statutory Clock: On Schedule | |
| </div> | |
| <div className="text-[12px] text-[#166534]"> | |
| Agency response window expires in 18 calendar days. | |
| </div> | |
| </div> | |
| </div> | |
| <span className="bg-[#DCFCE7] text-[#166534] font-bold text-[11px] px-2.5 py-1 rounded-full uppercase tracking-wider"> | |
| Healthy | |
| </span> | |
| </div> | |
| <div className="relative pl-6 border-l-2 border-[#E2E8F0] ml-3 flex flex-col gap-6"> | |
| {milestones.map((m, idx) => { | |
| const isCompleted = m.status === 'completed'; | |
| const isCurrent = m.status === 'current'; | |
| return ( | |
| <div key={idx} className="relative"> | |
| {/* Step icon dot */} | |
| <div | |
| className={`absolute -left-[31px] top-0 w-6 h-6 rounded-full flex items-center justify-center text-[12px] font-bold ${ | |
| isCompleted | |
| ? 'bg-[#006c4a] text-white' | |
| : isCurrent | |
| ? 'bg-[#0F172A] text-white ring-4 ring-[#DAE2FD]' | |
| : 'bg-[#E2E8F0] text-[#94A3B8]' | |
| }`} | |
| > | |
| {isCompleted ? ( | |
| <span className="material-symbols-outlined text-[14px]">check</span> | |
| ) : ( | |
| idx + 1 | |
| )} | |
| </div> | |
| <div> | |
| <div className="flex items-center justify-between gap-2"> | |
| <h4 className="font-headline font-bold text-[15px] text-[#0F172A]"> | |
| {m.title} | |
| </h4> | |
| <span className="text-[12px] text-[#64748B] font-mono">{m.date}</span> | |
| </div> | |
| <p className="text-[13px] text-[#475569] mt-1">{m.description}</p> | |
| </div> | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| {/* Footer */} | |
| <div className="p-4 border-t border-[#E2E8F0] bg-[#F8FAFC] flex justify-end gap-2"> | |
| <button | |
| onClick={onClose} | |
| className="px-4 py-2 text-[13px] text-[#64748B] hover:bg-[#E2E8F0] rounded-lg cursor-pointer" | |
| > | |
| Close | |
| </button> | |
| <button | |
| onClick={() => { | |
| onClose(); | |
| onOpenWorkspace(); | |
| }} | |
| className="px-4 py-2 text-[13px] font-medium bg-[#0F172A] text-white hover:bg-[#1E293B] rounded-lg cursor-pointer flex items-center gap-1" | |
| > | |
| <span>Open Case in Workspace</span> | |
| <span className="material-symbols-outlined text-[16px]">arrow_forward</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |