feat: reporter clickable rows, CAPA owner action buttons, triage segmented severity

2026-07-12 16:42:49 +08:00
parent 180b0dc0a3
commit f6064b9580
11 changed files with 694 additions and 16 deletions
@@ -0,0 +1,126 @@
+'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>
+  )
+}