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

components/admin/user-manager.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { ALL_ROLES, type UserRole } from '@/lib/auth/roles'
+
+export type AdminUser = {
+  id: string
+  name: string
+  email: string
+  role: string
+  department: string | null
+  site_id: string | null
+  active: boolean
+}
+
+export type SiteOption = { id: string; name: string }
+
+interface Props {
+  users: AdminUser[]
+  sites: SiteOption[]
+}
+
+export function UserManager({ users, sites }: Props) {
+  const router = useRouter()
+  const [busyId, setBusyId] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [invite, setInvite] = useState({ email: '', name: '', role: 'reporter' as UserRole, site_id: '' })
+  const [inviting, setInviting] = useState(false)
+
+  const patchUser = async (id: string, update: Record<string, unknown>) => {
+    setBusyId(id)
+    setError(null)
+    const res = await fetch('/ims/api/admin/users', {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, ...update }),
+    })
+    setBusyId(null)
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}))
+      setError(data.error ?? 'Update failed')
+      return
+    }
+    router.refresh()
+  }
+
+  const sendInvite = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setInviting(true)
+    setError(null)
+    const res = await fetch('/ims/api/admin/users', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ...invite, site_id: invite.site_id || undefined }),
+    })
+    setInviting(false)
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}))
+      setError(data.error ?? 'Invite failed')
+      return
+    }
+    setInvite({ email: '', name: '', role: 'reporter', site_id: '' })
+    router.refresh()
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm p-5">
+      <h2 className="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">Users</h2>
+
+      <form onSubmit={sendInvite} className="flex flex-wrap gap-2 mb-5 items-end">
+        <input
+          type="email" required placeholder="email@company.com"
+          value={invite.email}
+          onChange={e => setInvite(v => ({ ...v, email: e.target.value }))}
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-52"
+        />
+        <input
+          type="text" placeholder="Full name"
+          value={invite.name}
+          onChange={e => setInvite(v => ({ ...v, name: e.target.value }))}
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-40"
+        />
+        <select
+          value={invite.role}
+          onChange={e => setInvite(v => ({ ...v, role: e.target.value as UserRole }))}
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
+        >
+          {ALL_ROLES.map(r => <option key={r} value={r}>{r.replace(/_/g, ' ')}</option>)}
+        </select>
+        <select
+          value={invite.site_id}
+          onChange={e => setInvite(v => ({ ...v, site_id: e.target.value }))}
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
+        >
+          <option value="">No site</option>
+          {sites.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
+        </select>
+        <button
+          type="submit" disabled={inviting}
+          className="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-blue-700 disabled:opacity-50"
+        >
+          {inviting ? 'Inviting…' : 'Invite User'}
+        </button>
+      </form>
+
+      {error && <p className="text-sm text-red-600 mb-3">{error}</p>}
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="text-left text-xs text-gray-500 uppercase tracking-wide border-b border-gray-100">
+              <th className="py-2 pr-3">Name</th>
+              <th className="py-2 pr-3">Email</th>
+              <th className="py-2 pr-3">Role</th>
+              <th className="py-2 pr-3">Site</th>
+              <th className="py-2">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {users.map(u => (
+              <tr key={u.id} className={`border-b border-gray-50 ${u.active ? '' : 'opacity-50'}`}>
+                <td className="py-2 pr-3 text-gray-900">{u.name || '—'}</td>
+                <td className="py-2 pr-3 text-gray-600">{u.email}</td>
+                <td className="py-2 pr-3">
+                  <select
+                    value={u.role}
+                    disabled={busyId === u.id}
+                    onChange={e => patchUser(u.id, { role: e.target.value })}
+                    className="border border-gray-200 rounded px-2 py-1 text-xs"
+                  >
+                    {ALL_ROLES.map(r => <option key={r} value={r}>{r.replace(/_/g, ' ')}</option>)}
+                  </select>
+                </td>
+                <td className="py-2 pr-3">
+                  <select
+                    value={u.site_id ?? ''}
+                    disabled={busyId === u.id}
+                    onChange={e => patchUser(u.id, { site_id: e.target.value || null })}
+                    className="border border-gray-200 rounded px-2 py-1 text-xs"
+                  >
+                    <option value="">No site</option>
+                    {sites.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
+                  </select>
+                </td>
+                <td className="py-2">
+                  <button
+                    disabled={busyId === u.id}
+                    onClick={() => patchUser(u.id, { active: !u.active })}
+                    className={`text-xs px-2 py-1 rounded-full font-medium ${
+                      u.active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
+                    }`}
+                  >
+                    {u.active ? 'Active' : 'Deactivated'}
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}