127 lines
4.5 KiB
TypeScript
127 lines
4.5 KiB
TypeScript
'use client'
|
|
|
|
import { useRouter, useSearchParams, usePathname } from 'next/navigation'
|
|
import { useCallback, useState, useTransition, Suspense } from 'react'
|
|
|
|
const STATUS_OPTIONS = [
|
|
{ value: '', label: 'All Statuses' },
|
|
{ value: 'reported', label: 'Reported' },
|
|
{ value: 'triaged', label: 'Triaged' },
|
|
{ value: 'investigating', label: 'Investigating' },
|
|
{ value: 'capa_pending', label: 'CAPA Pending' },
|
|
{ value: 'verification', label: 'Pending Verification' },
|
|
{ value: 'closed', label: 'Closed' },
|
|
]
|
|
|
|
const TYPE_OPTIONS = [
|
|
{ value: '', label: 'All Types' },
|
|
{ value: 'injury', label: 'Injury' },
|
|
{ value: 'near_miss', label: 'Near Miss' },
|
|
{ value: 'dangerous_occurrence', label: 'Dangerous Occurrence' },
|
|
{ value: 'occupational_disease', label: 'Occupational Disease' },
|
|
{ value: 'environmental', label: 'Environmental' },
|
|
{ value: 'mhe_asset', label: 'MHE / Asset' },
|
|
{ value: 'security', label: 'Security' },
|
|
{ value: 'fire', label: 'Fire' },
|
|
]
|
|
|
|
export interface SiteOption { id: string; name: string }
|
|
|
|
interface FiltersProps {
|
|
sites: SiteOption[]
|
|
}
|
|
|
|
function FiltersInner({ sites }: FiltersProps) {
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
const searchParams = useSearchParams()
|
|
const [, startTransition] = useTransition()
|
|
const [search, setSearch] = useState(searchParams.get('q') ?? '')
|
|
|
|
const updateParam = useCallback((key: string, value: string) => {
|
|
const params = new URLSearchParams(searchParams.toString())
|
|
if (value) {
|
|
params.set(key, value)
|
|
} else {
|
|
params.delete(key)
|
|
}
|
|
params.delete('page')
|
|
startTransition(() => {
|
|
router.replace(`${pathname}?${params.toString()}`)
|
|
})
|
|
}, [router, pathname, searchParams])
|
|
|
|
const handleSearch = useCallback((value: string) => {
|
|
setSearch(value)
|
|
const timer = setTimeout(() => updateParam('q', value), 300)
|
|
return () => clearTimeout(timer)
|
|
}, [updateParam])
|
|
|
|
const hasFilters = searchParams.get('q') || searchParams.get('status') ||
|
|
searchParams.get('type') || searchParams.get('site_id')
|
|
|
|
return (
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
<div className="relative flex-1 min-w-48">
|
|
<svg
|
|
className="absolute left-2.5 top-2 h-4 w-4 text-gray-400 pointer-events-none"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<input
|
|
type="search"
|
|
placeholder="Search reference or description..."
|
|
value={search}
|
|
onChange={e => handleSearch(e.target.value)}
|
|
className="w-full pl-8 pr-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
<select
|
|
value={searchParams.get('status') ?? ''}
|
|
onChange={e => updateParam('status', e.target.value)}
|
|
className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
|
|
>
|
|
{STATUS_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
|
|
</select>
|
|
<select
|
|
value={searchParams.get('type') ?? ''}
|
|
onChange={e => updateParam('type', e.target.value)}
|
|
className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
|
|
>
|
|
{TYPE_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
|
|
</select>
|
|
{sites.length > 0 && (
|
|
<select
|
|
value={searchParams.get('site_id') ?? ''}
|
|
onChange={e => updateParam('site_id', e.target.value)}
|
|
className="text-sm border border-gray-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
|
|
>
|
|
<option value="">All Sites</option>
|
|
{sites.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
|
|
</select>
|
|
)}
|
|
{hasFilters && (
|
|
<button
|
|
onClick={() => {
|
|
setSearch('')
|
|
router.replace(pathname)
|
|
}}
|
|
className="text-sm text-gray-500 hover:text-gray-700 px-2 py-1.5 underline"
|
|
>
|
|
Clear filters
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function IncidentFilters({ sites }: FiltersProps) {
|
|
return (
|
|
<Suspense fallback={<div className="h-10 mb-4" />}>
|
|
<FiltersInner sites={sites} />
|
|
</Suspense>
|
|
)
|
|
}
|