- 99%
- TypeScript
- No backend
- Fully client-side
Overview
A responsive dashboard for monitoring, reporting and tracking AI safety incidents. Built for a SPARKLEHOOD technical assignment, then taken past the brief — filtering, search, date ranges, sorting, pagination, CSV export and a full dark/light theme.
What it took
- 01
Severity filtering, keyword search and date-range filters that compose rather than fight each other.
- 02
Client-side pagination and CSV export, so no backend was needed to make the data useful.
- 03
State handled with React Context rather than Redux — a deliberate call given the scope.
- 04
Session-persisted data, form validation, toast notifications and a consistent dark/light theme.
Code
src/context/IncidentContext.tsx
1useEffect(() => {2 // Apply filtering, sorting, and searching3 let filtered = [...incidents];4 5 // Filter by severity6 if (currentFilter !== "All") {7 filtered = filtered.filter(8 (incident) => incident.severity === currentFilter9 );10 }11 12 // Filter by search term13 if (searchTerm.trim() !== "") {14 const term = searchTerm.toLowerCase();15 filtered = filtered.filter(16 (incident) =>17 incident.title.toLowerCase().includes(term) ||18 incident.description.toLowerCase().includes(term)19 );20 }21 22 // Filter by date range23 if (dateRange.startDate) {24 const startDate = new Date(dateRange.startDate);25 filtered = filtered.filter(26 (incident) => new Date(incident.reported_at) >= startDate27 );28 }29}, [incidents, currentFilter, searchTerm, dateRange]);Share