feat: build ProblemsView with traffic light status system

- 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

src/components/PMRInterface.tsx

@@ -5,6 +5,7 @@ import { PatientBanner } from './PatientBanner'
 import { SummaryView } from './views/SummaryView'
 import { ConsultationsView } from './views/ConsultationsView'
 import { MedicationsView } from './views/MedicationsView'
+import { ProblemsView } from './views/ProblemsView'
 
 interface PMRInterfaceProps {
   children?: React.ReactNode
@@ -43,6 +44,8 @@ export function PMRInterface({ children }: PMRInterfaceProps) {
         return <ConsultationsView />
       case 'medications':
         return <MedicationsView />
+      case 'problems':
+        return <ProblemsView onNavigate={handleNavigate} />
       default:
         return (
           <div className="bg-white border border-gray-200 rounded p-6">