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
This commit is contained in:
Claude Fable 5
@@ -0,0 +1,118 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export type SiteWithZones = {
|
||||
id: string
|
||||
name: string
|
||||
address: string | null
|
||||
zones: Array<{ id: string; name: string; qr_code_token: string }>
|
||||
}
|
||||
|
||||
interface Props {
|
||||
sites: SiteWithZones[]
|
||||
}
|
||||
|
||||
export function SiteZoneManager({ sites }: Props) {
|
||||
const router = useRouter()
|
||||
const [siteName, setSiteName] = useState('')
|
||||
const [zoneName, setZoneName] = useState('')
|
||||
const [zoneSiteId, setZoneSiteId] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const post = async (payload: Record<string, unknown>) => {
|
||||
setBusy(true)
|
||||
setError(null)
|
||||
const res = await fetch('/ims/api/admin/sites', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
setBusy(false)
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}))
|
||||
setError(data.error ?? 'Save failed')
|
||||
return false
|
||||
}
|
||||
router.refresh()
|
||||
return true
|
||||
}
|
||||
|
||||
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">Sites & Zones</h2>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
<input
|
||||
type="text" placeholder="New site name"
|
||||
value={siteName}
|
||||
onChange={e => setSiteName(e.target.value)}
|
||||
className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48"
|
||||
/>
|
||||
<button
|
||||
disabled={busy || !siteName.trim()}
|
||||
onClick={async () => { if (await post({ kind: 'site', name: siteName })) setSiteName('') }}
|
||||
className="bg-gray-800 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-900 disabled:opacity-50"
|
||||
>
|
||||
Add Site
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-5">
|
||||
<select
|
||||
value={zoneSiteId}
|
||||
onChange={e => setZoneSiteId(e.target.value)}
|
||||
className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
|
||||
>
|
||||
<option value="">Select site…</option>
|
||||
{sites.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
|
||||
</select>
|
||||
<input
|
||||
type="text" placeholder="New zone name"
|
||||
value={zoneName}
|
||||
onChange={e => setZoneName(e.target.value)}
|
||||
className="border border-gray-300 rounded-lg px-3 py-2 text-sm w-48"
|
||||
/>
|
||||
<button
|
||||
disabled={busy || !zoneName.trim() || !zoneSiteId}
|
||||
onClick={async () => { if (await post({ kind: 'zone', name: zoneName, site_id: zoneSiteId })) setZoneName('') }}
|
||||
className="bg-gray-600 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-gray-700 disabled:opacity-50"
|
||||
>
|
||||
Add Zone
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-sm text-red-600 mb-3">{error}</p>}
|
||||
|
||||
<div className="space-y-4">
|
||||
{sites.map(site => (
|
||||
<div key={site.id} className="border border-gray-100 rounded-lg p-3">
|
||||
<p className="text-sm font-semibold text-gray-900">{site.name}</p>
|
||||
{site.address && <p className="text-xs text-gray-400">{site.address}</p>}
|
||||
{site.zones.length > 0 ? (
|
||||
<ul className="mt-2 space-y-1">
|
||||
{site.zones.map(z => (
|
||||
<li key={z.id} className="flex items-center justify-between text-sm text-gray-600">
|
||||
<span>{z.name}</span>
|
||||
<a
|
||||
href={`/ims/report?zone=${z.qr_code_token}`}
|
||||
target="_blank"
|
||||
className="text-xs text-blue-600 hover:underline"
|
||||
>
|
||||
Report link / QR target
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p className="text-xs text-gray-400 mt-1">No zones</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{sites.length === 0 && <p className="text-sm text-gray-400">No sites yet</p>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user