Files
ims/components/incidents/evidence-gallery.tsx
T
adminandClaude Fable 5 576557181a 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

63 lines
2.0 KiB
TypeScript

'use client'
import type { EvidenceStage } from '@/lib/supabase/storage'
type EvidenceFile = {
id: string
stage: string
file_url: string
file_type: string
uploaded_at: string
}
interface Props {
files: EvidenceFile[]
stage?: EvidenceStage
}
function isImage(type: string) { return type.startsWith('image/') }
function isVideo(type: string) { return type.startsWith('video/') }
// Supabase Storage image transform endpoint. Falls back to the original object
// URL via onError if the project plan has no image transformation.
function thumbnailUrl(url: string, width = 320): string {
if (!url.includes('/storage/v1/object/public/')) return url
return `${url.replace('/storage/v1/object/public/', '/storage/v1/render/image/public/')}?width=${width}&quality=60`
}
export function EvidenceGallery({ files, stage }: Props) {
const filtered = stage ? files.filter(f => f.stage === stage) : files
if (filtered.length === 0) return <p className="text-sm text-gray-400">No files for this stage</p>
return (
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
{filtered.map(file => (
<a
key={file.id}
href={file.file_url}
target="_blank"
rel="noopener noreferrer"
className="block rounded-lg overflow-hidden bg-gray-100 aspect-square hover:opacity-90 transition-opacity"
>
{isImage(file.file_type) ? (
<img
src={thumbnailUrl(file.file_url)}
alt="Evidence"
loading="lazy"
className="w-full h-full object-cover"
onError={e => {
const img = e.currentTarget
if (img.src !== file.file_url) img.src = file.file_url
}}
/>
) : isVideo(file.file_type) ? (
<div className="w-full h-full flex items-center justify-center text-3xl">🎥</div>
) : (
<div className="w-full h-full flex items-center justify-center text-3xl">📄</div>
)}
</a>
))}
</div>
)
}