feat: Phase 5 & 6 — usability, compliance hardening, analytics

Phase 5 (usability + compliance): - In-app notification bell/badge: migration 016 adds read state + per-user RLS + create_in_app_notification SECURITY DEFINER RPC; /api/notifications; wired into incident creation, CAPA assign/verify, escalation cron - Incident closure: new POST /api/incidents/[id]/close (requires verification status + all CAPAs verified); migration 017 locks closed incidents at DB level (update/delete triggers) with append-only incident_addenda + UI panel - Server-side pagination on HSE/supervisor incident inboxes (.range, 25/page) - Investigation form: alcohol/urine test result + witness statement refs (existing schema columns, now editable) - Type-specific intake fields: migration 018 adds incidents.type_details JSONB; whitelist validation; environmental/asset/security/fire field groups in report form; EN/MS/ZH labels; offline queue support - JKKP 8 annual register CSV export (/api/reports/jkkp8) + dashboard button + January statutory deadline banner - Admin page: user invite (service-role client), role/site/active management, site + zone CRUD with QR report links — replaces Phase 0 stub - Evidence gallery thumbnails via Supabase render transform with fallback Phase 6 (analytics): - 12-month stacked trend chart (leading/lagging/other) + top root causes (lib/dashboard/trends.ts pure helpers) - AI rising-risk zones: /api/dashboard/ai/risk-flags aggregates 90-day zone stats, claude-opus-4-8 forced tool_use, panel on HSE + management dashboards, suggestion audit-logged Also fixes 9 pre-existing missing /ims basePath prefixes in client fetches and download links. 132 tests passing, tsc clean, next build clean. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CPf5Rc8QPx6V8KLEEgfKEQ
2026-07-12 10:25:08 +08:00
parent 98c38c3716
commit 576557181a
51 changed files with 2394 additions and 38 deletions
@@ -0,0 +1,88 @@
+'use client'
+
+import { useState } from 'react'
+
+type RiskFlag = {
+  zone: string
+  site: string
+  risk_level: 'low' | 'medium' | 'high'
+  rationale: string
+  recommended_action: string
+}
+
+const LEVEL_COLORS: Record<RiskFlag['risk_level'], string> = {
+  low: 'bg-yellow-50 text-yellow-700 border-yellow-200',
+  medium: 'bg-orange-50 text-orange-700 border-orange-200',
+  high: 'bg-red-50 text-red-700 border-red-200',
+}
+
+export function RiskFlagsPanel() {
+  const [flags, setFlags] = useState<RiskFlag[] | null>(null)
+  const [summary, setSummary] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const analyze = async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await fetch('/ims/api/dashboard/ai/risk-flags', { method: 'POST' })
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}))
+        setError(data.error ?? 'Analysis failed')
+        return
+      }
+      const data: { flags: RiskFlag[]; summary: string } = await res.json()
+      setFlags(data.flags)
+      setSummary(data.summary)
+    } catch {
+      setError('Analysis failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm p-5 mb-4">
+      <div className="flex items-center justify-between mb-1">
+        <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide">
+          Rising-Risk Zones (AI)
+        </h2>
+        <button
+          onClick={analyze}
+          disabled={loading}
+          className="bg-purple-50 text-purple-700 border border-purple-300 rounded-lg px-3 py-1.5 text-xs font-semibold disabled:opacity-50 hover:bg-purple-100"
+        >
+          {loading ? 'Analyzing…' : flags ? 'Re-analyze' : 'Analyze 90-Day Risk'}
+        </button>
+      </div>
+      <p className="text-xs text-gray-400 mb-3">
+        AI suggestion from 90-day incident aggregates — review before acting.
+      </p>
+
+      {error && <p className="text-sm text-red-600">{error}</p>}
+
+      {flags && flags.length === 0 && !error && (
+        <p className="text-sm text-gray-500">No zones flagged — no rising-risk pattern detected.</p>
+      )}
+
+      {flags && flags.length > 0 && (
+        <>
+          <p className="text-sm text-gray-700 mb-3">{summary}</p>
+          <div className="space-y-2">
+            {flags.map(f => (
+              <div key={`${f.site}-${f.zone}`} className={`border rounded-lg p-3 ${LEVEL_COLORS[f.risk_level]}`}>
+                <div className="flex items-center justify-between mb-1">
+                  <span className="text-sm font-semibold">{f.zone} · {f.site}</span>
+                  <span className="text-xs font-bold uppercase">{f.risk_level}</span>
+                </div>
+                <p className="text-sm">{f.rationale}</p>
+                <p className="text-xs mt-1"><strong>Recommended:</strong> {f.recommended_action}</p>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}