import { Head, Link } from "@inertiajs/react"; import { router } from "@inertiajs/react"; import { useState, useEffect } from "react"; import { PageContainer, Card, SectionTitle, StatusBadge, formatDate, ConfirmModal, useRole, ViewViolationModal, } from "../Violations/ViolationUI"; import { PaymentModal, PaymentSummaryModal } from "../Violations/PaymentModal"; const styles = ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .page-enter { animation: fadeIn 0.4s ease both; } .filter-bar-enter { animation: fadeInDown 0.4s ease both; } .row-enter { animation: fadeInUp 0.35s ease both; } .row-hover { transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .row-hover:hover { background: #f1f5f9; transform: translateX(2px); box-shadow: -3px 0 0 0 #3b82f6; } `; export default function Show({ violator }) { const [confirmId, setConfirmId] = useState(null); const [viewTarget, setViewTarget] = useState(null); const [mounted, setMounted] = useState(false); const [paymentTarget, setPaymentTarget] = useState(null); const [paidResult, setPaidResult] = useState(null); const [paymentToast, setPaymentToast] = useState(null); const { isAdminOrAbove, isSuperadmin } = useRole(); const currentAge = violator.birthday ? Math.floor( (new Date() - new Date(violator.birthday)) / (365.25 * 24 * 60 * 60 * 1000), ) : null; const isMinor = currentAge !== null && currentAge < 16; function getAgeAtOffense(dateOfViolation) { if (!violator.birthday || !dateOfViolation) return null; return Math.floor( (new Date(dateOfViolation) - new Date(violator.birthday)) / (365.25 * 24 * 60 * 60 * 1000), ); } function handlePaid(result) { setPaymentTarget(null); setPaidResult(result); } function handleFinishPayment() { const message = paidResult ? `Payment recorded successfully. Receipt #${paidResult.receiptNumber}.` : null; setPaidResult(null); router.reload({ only: ["violator"] }); if (message) { setPaymentToast(message); setTimeout(() => setPaymentToast(null), 3000); } } useEffect(() => { const t = setTimeout(() => setMounted(true), 10); return () => clearTimeout(t); }, []); function handleDelete() { router.delete( `/violations/${confirmId}?source=violator&violator_id=${violator.id}`, ); setConfirmId(null); } return (
setConfirmId(null)} /> setViewTarget(null)} /> setPaymentTarget(null)} onPaid={handlePaid} />
← Back to Violators

{violator.first_name} {violator.last_name}

Violator Profile

{isMinor && (
⚠ This violator is a minor
)}
File Violation
Personal Information {isAdminOrAbove && ( Edit )}

Full Name

{violator.first_name} {violator.last_name}

Gender

{violator.gender}

Birthday

{formatDate(violator.birthday)}

Age

{currentAge !== null ? `${currentAge} years old` : "—"} {isMinor && ( ⚠ Minor )}

Contact Number

{violator.contact_number}

Address

{violator.address}

Violation Records {violator.violations.length === 0 ? (

No violations recorded for this person.

) : (
{[ "Ticket No.", "Violation Type", "Offense #", "Fine", "Status", "Date", "Age at Offense", "Location", "View", isAdminOrAbove && "Actions", ] .filter(Boolean) .map((h) => ( ))} {violator.violations.map( (violation, i) => ( {isAdminOrAbove && ( )} ), )}
{h}
{violation.violation_number ?? "—"} { violation .violation_type .name } # { violation.offense_number } ₱ {Number( violation.fine_amount, ).toLocaleString()} {formatDate( violation.date_of_violation, )} {(() => { const ageAtOffense = getAgeAtOffense( violation.date_of_violation, ); const wasMinor = ageAtOffense !== null && ageAtOffense < 16; return ( {ageAtOffense !== null ? ageAtOffense : "—"} {wasMinor && ( Minor )} ); })()} {violation.location}
{violation.status === "paid" ? ( ) : ( )} {isAdminOrAbove && (violation.status === "paid" ? ( ) : ( Edit Violation ))} {isSuperadmin && (violation.status === "paid" ? ( ) : ( ))}
)}
{paymentToast && (
✓

{paymentToast}

)}
); }