import { Head, Link } from "@inertiajs/react"; import { router } from "@inertiajs/react"; import { useState, useEffect, useMemo } from "react"; import { PageContainer, Card, formatDate, StatusBadge, ConfirmModal, useRole, Pagination, ViewViolationModal, } from "./ViolationUI"; import { PaymentModal, PaymentSummaryModal } from "./PaymentModal"; import { ExportReportModal } from "./ExportReportModal"; const styles = ` @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); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .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; animation-fill-mode: both; } .row-hover { transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } `; const PAGE_SIZE = 10; export default function Index({ violations }) { const [search, setSearch] = useState(""); const [statusFilter, setStatusFilter] = useState(""); const [dateFilter, setDateFilter] = useState(""); const [offenseFilter, setOffenseFilter] = useState(""); const [yearFilter, setYearFilter] = useState(""); const [confirmId, setConfirmId] = useState(null); const [changeRequestTarget, setChangeRequestTarget] = useState(null); // { id, type } const [viewTarget, setViewTarget] = useState(null); const [page, setPage] = useState(1); const [paymentTarget, setPaymentTarget] = useState(null); const [paidResult, setPaidResult] = useState(null); const [paymentToast, setPaymentToast] = useState(null); const [mounted, setMounted] = useState(false); const { isAdmin, isSuperadmin, isAdminOrAbove } = useRole(); const [showReportModal, setShowReportModal] = useState(false); const availableYears = useMemo(() => { const currentYear = new Date().getFullYear(); const years = violations .map( (v) => v.date_of_violation && new Date(v.date_of_violation).getFullYear(), ) .filter(Boolean); const minYear = years.length ? Math.min(...years) : currentYear; const result = []; for (let y = currentYear; y >= minYear; y--) result.push(y); return result; }, [violations]); useEffect(() => { const t = setTimeout(() => setMounted(true), 10); return () => clearTimeout(t); }, []); useEffect(() => { setPage(1); }, [search, statusFilter, dateFilter, offenseFilter, yearFilter]); const filtered = violations .filter((v) => { const matchesSearch = `${v.violation_number} ${v.violator.first_name} ${v.violator.last_name} ${v.violation_type?.name ?? ""} ${v.location}` .toLowerCase() .includes(search.toLowerCase()); const matchesStatus = statusFilter ? v.status === statusFilter : true; const matchesDate = dateFilter ? v.date_of_violation.startsWith(dateFilter) : true; const matchesOffense = offenseFilter ? v.offense_number === Number(offenseFilter) : true; const matchesYear = yearFilter ? v.date_of_violation.startsWith(yearFilter) : true; return ( matchesSearch && matchesStatus && matchesDate && matchesOffense && matchesYear ); }) .sort((a, b) => { const aPaid = a.status === "paid" ? 1 : 0; const bPaid = b.status === "paid" ? 1 : 0; return ( aPaid - bPaid || (a.violator?.last_name ?? "").localeCompare( b.violator?.last_name ?? "", ) || (a.violator?.first_name ?? "").localeCompare( b.violator?.first_name ?? "", ) ); }); const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE)); useEffect(() => { if (page > totalPages) setPage(totalPages); }, [totalPages, page]); const paginated = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE); function handleDelete() { if (!confirmId) return; router.delete(route("violations.destroy", { violation: confirmId }), { data: { source: "index" }, preserveScroll: true, onSuccess: () => setConfirmId(null), onError: () => setConfirmId(null), }); } function handlePaid(result) { setPaymentTarget(null); setPaidResult(result); } function handleFinishPayment() { const message = paidResult ? `Payment recorded successfully. Receipt #${paidResult.receiptNumber}.` : null; setPaidResult(null); router.reload({ only: ["violations"] }); if (message) { setPaymentToast(message); setTimeout(() => setPaymentToast(null), 3000); } } function handleSubmitChangeRequest() { if (!changeRequestTarget) return; router.post( route("violations.change-request", changeRequestTarget.id), { type: changeRequestTarget.type }, { preserveScroll: true, onSuccess: () => setChangeRequestTarget(null), onError: () => setChangeRequestTarget(null), }, ); } function resetFilters() { setSearch(""); setStatusFilter(""); setDateFilter(""); setOffenseFilter(""); setYearFilter(""); setPage(1); } return (
setPaymentTarget(null)} onPaid={handlePaid} /> setConfirmId(null)} /> setChangeRequestTarget(null)} /> setViewTarget(null)} /> setShowReportModal(false)} availableYears={availableYears} /> {/* Header */}
{isSuperadmin && ( Archive View Archived )}

Violations

All recorded violation cases

+ File a Violation
{/* Card + filters */}
setSearch(e.target.value)} placeholder="Search violator, type, or location…" className="flex-1 rounded-lg border border-slate-300 px-4 py-2.5 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none text-sm dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100" /> setDateFilter(e.target.value)} className="rounded-lg border border-slate-300 px-4 py-2.5 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none text-sm dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100" /> setYearFilter(e.target.value)} className="rounded-lg border border-slate-300 px-4 py-2.5 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none text-sm dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100" placeholder="Year e.g. 2026" /> {isAdminOrAbove && ( )}

{filtered.length} total {filtered.length === 1 ? " violation" : " violations"}

{filtered.length === 0 ? (

No violations recorded yet

Filed violations will appear here

) : (
{[ "Ticket No.", "Violator", "Violation Type", "Offense #", "Fine", "Status", "Date", "Location", "View", isAdminOrAbove && "Actions", ] .filter(Boolean) .map((h) => ( ))} {paginated.map((v, i) => ( {isAdminOrAbove && ( )} ))}
{h}
{v.violation_number ?? "—"} {v.violator.last_name},{" "} {v.violator.first_name} {v.violation_type?.name ?? "—"} #{v.offense_number} ₱ {Number( v.fine_amount, ).toLocaleString()} {formatDate( v.date_of_violation, )} {v.location}
{v.status === "paid" ? ( ) : ( )} {isSuperadmin ? ( <> {/* Superadmin: direct edit */} {v.status === "paid" ? ( ) : ( Edit )} {/* Superadmin: direct delete */} {v.status === "paid" ? ( ) : ( )} ) : ( <> {/* Admin: request edit */} {v.status === "paid" ? ( ) : ( Request Edit )} {/* Admin: request delete */} {v.status === "paid" ? ( ) : ( )} )}
)}
{paymentToast && (
✓

{paymentToast}

)}
); }