feat: CAPA board — kanban/table view, create CAPA from incident, status tracking
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FFDuBhMKvoWjrWT3ZnGmmr
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,135 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
type CapaStatus = 'open' | 'in_progress' | 'overdue' | 'pending_verification' | 'verified' | 'reopened' | 'closed'
|
||||
|
||||
type CapaAction = {
|
||||
id: string
|
||||
incident_id: string
|
||||
description: string
|
||||
department: string
|
||||
due_date: string
|
||||
priority: 'low' | 'med' | 'high'
|
||||
status: CapaStatus
|
||||
incidents: { reference_no: string | null } | null
|
||||
owner: { name: string } | null
|
||||
}
|
||||
|
||||
const STATUS_ORDER: CapaStatus[] = ['open', 'in_progress', 'overdue', 'pending_verification', 'verified', 'closed']
|
||||
const STATUS_LABELS: Record<CapaStatus, string> = {
|
||||
open: 'Open',
|
||||
in_progress: 'In Progress',
|
||||
overdue: 'Overdue',
|
||||
pending_verification: 'Pending Verification',
|
||||
verified: 'Verified',
|
||||
reopened: 'Reopened',
|
||||
closed: 'Closed',
|
||||
}
|
||||
const STATUS_COLORS: Record<CapaStatus, string> = {
|
||||
open: 'bg-blue-50 border-blue-200',
|
||||
in_progress: 'bg-yellow-50 border-yellow-200',
|
||||
overdue: 'bg-red-50 border-red-200',
|
||||
pending_verification: 'bg-purple-50 border-purple-200',
|
||||
verified: 'bg-green-50 border-green-200',
|
||||
reopened: 'bg-orange-50 border-orange-200',
|
||||
closed: 'bg-gray-50 border-gray-200',
|
||||
}
|
||||
const PRIORITY_BADGE: Record<'low' | 'med' | 'high', string> = {
|
||||
low: 'bg-gray-100 text-gray-600',
|
||||
med: 'bg-yellow-100 text-yellow-700',
|
||||
high: 'bg-red-100 text-red-700',
|
||||
}
|
||||
|
||||
interface Props {
|
||||
capas: CapaAction[]
|
||||
}
|
||||
|
||||
export function CapaBoard({ capas }: Props) {
|
||||
const [view, setView] = useState<'board' | 'table'>('board')
|
||||
|
||||
const byStatus = STATUS_ORDER.reduce<Record<CapaStatus, CapaAction[]>>((acc, s) => {
|
||||
acc[s] = capas.filter(c => c.status === s)
|
||||
return acc
|
||||
}, {} as Record<CapaStatus, CapaAction[]>)
|
||||
|
||||
if (view === 'table') {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-end mb-3">
|
||||
<button onClick={() => setView('board')} className="text-sm text-blue-600 hover:underline">Board view</button>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="text-left text-xs text-gray-500 uppercase border-b">
|
||||
<th className="pb-2 pr-4">Ref</th>
|
||||
<th className="pb-2 pr-4">Action</th>
|
||||
<th className="pb-2 pr-4">Owner</th>
|
||||
<th className="pb-2 pr-4">Due</th>
|
||||
<th className="pb-2 pr-4">Priority</th>
|
||||
<th className="pb-2">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{capas.map(c => (
|
||||
<tr key={c.id}>
|
||||
<td className="py-2 pr-4 text-gray-500 text-xs">
|
||||
{(c.incidents as { reference_no: string | null } | null)?.reference_no ?? '—'}
|
||||
</td>
|
||||
<td className="py-2 pr-4">
|
||||
<Link href={`/hse/capa/${c.id}`} className="text-blue-600 hover:underline line-clamp-2">
|
||||
{c.description}
|
||||
</Link>
|
||||
</td>
|
||||
<td className="py-2 pr-4 text-gray-600">{(c.owner as { name: string } | null)?.name ?? '—'}</td>
|
||||
<td className="py-2 pr-4 text-gray-600">{c.due_date}</td>
|
||||
<td className="py-2 pr-4">
|
||||
<span className={`px-2 py-0.5 rounded text-xs font-medium ${PRIORITY_BADGE[c.priority]}`}>
|
||||
{c.priority}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-2 text-gray-600 text-xs">{STATUS_LABELS[c.status]}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-end mb-3">
|
||||
<button onClick={() => setView('table')} className="text-sm text-blue-600 hover:underline">Table view</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{STATUS_ORDER.filter(s => s !== 'reopened').map(status => (
|
||||
<div key={status} className={`rounded-xl border p-4 ${STATUS_COLORS[status]}`}>
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wide text-gray-600 mb-3">
|
||||
{STATUS_LABELS[status]} ({byStatus[status].length})
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{byStatus[status].map(c => (
|
||||
<Link key={c.id} href={`/hse/capa/${c.id}`}
|
||||
className="block bg-white rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow border border-gray-100">
|
||||
<p className="text-sm text-gray-800 line-clamp-2 mb-1">{c.description}</p>
|
||||
<div className="flex items-center justify-between text-xs text-gray-500">
|
||||
<span>{(c.owner as { name: string } | null)?.name ?? '—'}</span>
|
||||
<span className={`px-1.5 py-0.5 rounded ${PRIORITY_BADGE[c.priority]}`}>{c.priority}</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-1">Due {c.due_date}</p>
|
||||
</Link>
|
||||
))}
|
||||
{byStatus[status].length === 0 && (
|
||||
<p className="text-xs text-gray-400 text-center py-3">Empty</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user