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,54 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+interface Props {
+  capaId: string
+  currentStatus: string
+}
+
+export function CapaOwnerActions({ capaId, currentStatus }: Props) {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+
+  async function updateStatus(status: string) {
+    setLoading(true)
+    try {
+      await fetch(`/ims/api/capa/${capaId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status }),
+      })
+      router.refresh()
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (currentStatus === 'open' || currentStatus === 'reopened') {
+    return (
+      <button
+        onClick={() => updateStatus('in_progress')}
+        disabled={loading}
+        className="text-sm px-3 py-1.5 border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50"
+      >
+        {loading ? '…' : 'Mark In Progress'}
+      </button>
+    )
+  }
+
+  if (currentStatus === 'in_progress') {
+    return (
+      <button
+        onClick={() => updateStatus('pending_verification')}
+        disabled={loading}
+        className="text-sm px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+      >
+        {loading ? '…' : 'Submit for Verification'}
+      </button>
+    )
+  }
+
+  return null
+}
@@ -0,0 +1,42 @@
+'use client'
+
+import { useRouter, usePathname } from 'next/navigation'
+import { Suspense } from 'react'
+
+const TABS = [
+  { key: 'overview', label: 'Overview' },
+  { key: 'trends', label: 'Trends' },
+  { key: 'zones', label: 'Zones & Types' },
+  { key: 'ai', label: 'AI Insights' },
+]
+
+function TabsInner({ activeTab }: { activeTab: string }) {
+  const router = useRouter()
+  const pathname = usePathname()
+
+  return (
+    <div className="flex border-b border-gray-200 mb-6 overflow-x-auto -mx-4 px-4">
+      {TABS.map(tab => (
+        <button
+          key={tab.key}
+          onClick={() => router.replace(`${pathname}?tab=${tab.key}`)}
+          className={`px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${
+            activeTab === tab.key
+              ? 'border-blue-600 text-blue-600'
+              : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+          }`}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export function DashboardTabs({ activeTab }: { activeTab: string }) {
+  return (
+    <Suspense fallback={<div className="h-11 mb-6 border-b border-gray-200" />}>
+      <TabsInner activeTab={activeTab} />
+    </Suspense>
+  )
+}
@@ -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>
+  )
+}
@@ -94,16 +94,23 @@ export function TriageForm({ incidentId, currentSeverity }: Props) {
  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-1">
-          Severity — {SEVERITY_LABELS[severity]}
-        </label>
-        <input
-          type="range" min={1} max={5} value={severity}
-          onChange={e => setSeverity(Number(e.target.value))}
-          className="w-full accent-blue-600"
-        />
-        <div className="flex justify-between text-xs text-gray-400 mt-1">
-          <span>1 Minor</span><span>3 Moderate</span><span>5 Critical</span>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Severity</label>
+        <div className="flex rounded-lg border border-gray-300 overflow-hidden divide-x divide-gray-300">
+          {([1, 2, 3, 4, 5] as const).map(v => (
+            <button
+              key={v}
+              type="button"
+              onClick={() => setSeverity(v)}
+              className={`flex-1 py-2 text-xs font-medium transition-colors ${
+                severity === v
+                  ? 'bg-blue-600 text-white border-blue-600'
+                  : 'bg-white text-gray-700 hover:bg-gray-50'
+              }`}
+            >
+              <span className="block font-bold">{v}</span>
+              <span className="block">{SEVERITY_LABELS[v].split(' / ')[0]}</span>
+            </button>
+          ))}
        </div>
      </div>