89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
'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('/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>
|
|
)
|
|
}
|