admin
f20791a7ff
- Create ProblemsView with two tables: Active Problems and Resolved Problems - Traffic light indicators: 8px circles with text labels (green=Active/Resolved, amber=In Progress) - Expandable rows showing full narrative and linked consultations - Linked consultations navigate to Consultations view - Proper semantic table markup with scope="col" - Height animation for expand/collapse (200ms, respects reduced motion) - Task 9 complete
295 lines
10 KiB
TypeScript
295 lines
10 KiB
TypeScript
import { useState, useEffect, useRef } from 'react'
|
|
import { ChevronDown, ChevronUp, ExternalLink } from 'lucide-react'
|
|
import { problems } from '@/data/problems'
|
|
import { consultations } from '@/data/consultations'
|
|
import type { Problem, Consultation } from '@/types/pmr'
|
|
|
|
interface ProblemsViewProps {
|
|
onNavigate?: (view: 'consultations', itemId?: string) => void
|
|
}
|
|
|
|
type ProblemStatus = 'Active' | 'In Progress' | 'Resolved'
|
|
|
|
function TrafficLight({ status }: { status: ProblemStatus }) {
|
|
const colorMap: Record<ProblemStatus, { bg: string; label: string }> = {
|
|
Active: { bg: 'bg-green-500', label: 'Active' },
|
|
'In Progress': { bg: 'bg-amber-500', label: 'In Progress' },
|
|
Resolved: { bg: 'bg-green-500', label: 'Resolved' },
|
|
}
|
|
|
|
const { bg, label } = colorMap[status]
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`w-2 h-2 rounded-full ${bg}`}
|
|
aria-label={`Status: ${label}`}
|
|
role="img"
|
|
/>
|
|
<span className="text-xs text-gray-600">{label}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ProblemRow({
|
|
problem,
|
|
isExpanded,
|
|
onToggle,
|
|
onNavigate,
|
|
showOutcome,
|
|
}: {
|
|
problem: Problem
|
|
isExpanded: boolean
|
|
onToggle: () => void
|
|
onNavigate?: (view: 'consultations', itemId?: string) => void
|
|
showOutcome: boolean
|
|
}) {
|
|
const contentRef = useRef<HTMLDivElement>(null)
|
|
const [contentHeight, setContentHeight] = useState<number | undefined>(undefined)
|
|
const prefersReducedMotion = useRef(
|
|
window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
|
).current
|
|
|
|
useEffect(() => {
|
|
if (contentRef.current) {
|
|
setContentHeight(contentRef.current.scrollHeight)
|
|
}
|
|
}, [isExpanded])
|
|
|
|
const linkedConsultations = (problem.linkedConsultations ?? [])
|
|
.map((id) => consultations.find((c) => c.id === id))
|
|
.filter((c): c is Consultation => c !== undefined)
|
|
|
|
const handleLinkedClick = (consultationId: string) => {
|
|
if (onNavigate) {
|
|
onNavigate('consultations', consultationId)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<tr
|
|
className={`cursor-pointer hover:bg-blue-50 transition-colors ${
|
|
isExpanded ? 'bg-blue-50' : ''
|
|
}`}
|
|
onClick={onToggle}
|
|
aria-expanded={isExpanded}
|
|
>
|
|
<td className="border border-gray-200 px-3 py-2.5">
|
|
<TrafficLight status={problem.status} />
|
|
</td>
|
|
<td className="border border-gray-200 px-3 py-2.5">
|
|
<span className="font-mono text-xs text-gray-500">[{problem.code}]</span>
|
|
</td>
|
|
<td className="border border-gray-200 px-3 py-2.5">
|
|
<span className="text-sm text-gray-900">{problem.description}</span>
|
|
</td>
|
|
<td className="border border-gray-200 px-3 py-2.5">
|
|
<span className="font-mono text-xs text-gray-500">
|
|
{problem.resolved || problem.since}
|
|
</span>
|
|
</td>
|
|
{showOutcome && (
|
|
<td className="border border-gray-200 px-3 py-2.5">
|
|
{problem.outcome && (
|
|
<span className="text-sm text-gray-700">{problem.outcome}</span>
|
|
)}
|
|
</td>
|
|
)}
|
|
<td className="border border-gray-200 px-3 py-2.5 w-10">
|
|
<button
|
|
className="p-1 hover:bg-gray-100 rounded transition-colors"
|
|
aria-label={isExpanded ? 'Collapse' : 'Expand'}
|
|
>
|
|
{isExpanded ? (
|
|
<ChevronUp className="w-4 h-4 text-gray-400" />
|
|
) : (
|
|
<ChevronDown className="w-4 h-4 text-gray-400" />
|
|
)}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colSpan={showOutcome ? 6 : 5} className="p-0 border border-gray-200">
|
|
<div
|
|
style={{
|
|
height: isExpanded ? contentHeight : 0,
|
|
overflow: 'hidden',
|
|
transition: prefersReducedMotion ? 'none' : 'height 200ms ease-out',
|
|
}}
|
|
>
|
|
<div ref={contentRef} className="bg-gray-50 p-4">
|
|
<div className="text-sm text-gray-700 leading-relaxed mb-4">
|
|
{problem.narrative}
|
|
</div>
|
|
{linkedConsultations.length > 0 && (
|
|
<div>
|
|
<span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
|
|
Linked Consultations:
|
|
</span>
|
|
<div className="mt-2 flex flex-wrap gap-2">
|
|
{linkedConsultations.map((consultation) => (
|
|
<button
|
|
key={consultation.id}
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
handleLinkedClick(consultation.id)
|
|
}}
|
|
className="inline-flex items-center gap-1 text-xs text-nhsblue hover:underline"
|
|
>
|
|
<ExternalLink className="w-3 h-3" />
|
|
{consultation.organization} — {consultation.role}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export function ProblemsView({ onNavigate }: ProblemsViewProps) {
|
|
const [expandedId, setExpandedId] = useState<string | null>(null)
|
|
|
|
const activeProblems = problems.filter(
|
|
(p) => p.status === 'Active' || p.status === 'In Progress'
|
|
)
|
|
const resolvedProblems = problems.filter((p) => p.status === 'Resolved')
|
|
|
|
const handleToggle = (id: string) => {
|
|
setExpandedId(expandedId === id ? null : id)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="bg-white border border-gray-200 rounded">
|
|
<div className="bg-gray-50 border-b border-gray-200 px-4 py-3">
|
|
<h2 className="font-inter font-semibold text-sm uppercase tracking-wider text-gray-500">
|
|
Active Problems
|
|
</h2>
|
|
</div>
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr className="bg-gray-50">
|
|
<th
|
|
scope="col"
|
|
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
|
|
>
|
|
Status
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
|
|
>
|
|
Code
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400"
|
|
>
|
|
Problem
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
|
|
>
|
|
Since
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-10"
|
|
>
|
|
<span className="sr-only">Expand</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{activeProblems.map((problem) => (
|
|
<ProblemRow
|
|
key={problem.id}
|
|
problem={problem}
|
|
isExpanded={expandedId === problem.id}
|
|
onToggle={() => handleToggle(problem.id)}
|
|
onNavigate={onNavigate}
|
|
showOutcome={false}
|
|
/>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{activeProblems.length === 0 && (
|
|
<div className="p-4 text-sm text-gray-500 text-center">No active problems</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-white border border-gray-200 rounded">
|
|
<div className="bg-gray-50 border-b border-gray-200 px-4 py-3">
|
|
<h2 className="font-inter font-semibold text-sm uppercase tracking-wider text-gray-500">
|
|
Resolved Problems
|
|
</h2>
|
|
</div>
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr className="bg-gray-50">
|
|
<th
|
|
scope="col"
|
|
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
|
|
>
|
|
Status
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
|
|
>
|
|
Code
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400"
|
|
>
|
|
Problem
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-28"
|
|
>
|
|
Resolved
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400"
|
|
>
|
|
Outcome
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
className="border border-gray-200 px-3 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wider text-gray-400 w-10"
|
|
>
|
|
<span className="sr-only">Expand</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{resolvedProblems.map((problem) => (
|
|
<ProblemRow
|
|
key={problem.id}
|
|
problem={problem}
|
|
isExpanded={expandedId === problem.id}
|
|
onToggle={() => handleToggle(problem.id)}
|
|
onNavigate={onNavigate}
|
|
showOutcome={true}
|
|
/>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{resolvedProblems.length === 0 && (
|
|
<div className="p-4 text-sm text-gray-500 text-center">No resolved problems</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|