US-018: Create ConsultationDetail renderer for detail panel

- Created ConsultationDetail.tsx component to render full role details
- Displays role title, organization, dates with current badge
- Renders history paragraph (consultation.history)
- Shows achievement bullets (consultation.examination)
- Displays outcomes/impact (consultation.plan)
- Renders coded entries as badges with code + description
- Wired into DetailPanel for both 'consultation' and 'career-role' types
- Styled consistently with dashboard design system
- Typecheck and build pass successfully

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/DetailPanel.tsx

@@ -5,6 +5,7 @@ import { useFocusTrap } from '@/hooks/useFocusTrap'
 import { DetailPanelContent } from '@/types/pmr'
 import type { CardHeaderProps } from './Card'
 import { KPIDetail } from './detail/KPIDetail'
+import { ConsultationDetail } from './detail/ConsultationDetail'
 
 // Width mapping from content type
 const widthMap: Record<DetailPanelContent['type'], 'narrow' | 'wide'> = {
@@ -210,24 +211,29 @@ export function DetailPanel() {
         >
           {/* Render content based on type */}
           {content.type === 'kpi' && <KPIDetail kpi={content.kpi} />}
+          {(content.type === 'consultation' || content.type === 'career-role') && (
+            <ConsultationDetail consultation={content.consultation} />
+          )}
 
           {/* Other content types - placeholder for future stories */}
-          {content.type !== 'kpi' && (
-            <div
-              style={{
-                fontFamily: 'var(--font-ui)',
-                color: 'var(--text-secondary)',
-                fontSize: '14px',
-              }}
-            >
-              <p>
-                Detail panel for: <strong>{content.type}</strong>
-              </p>
-              <p style={{ marginTop: '8px', fontSize: '12px' }}>
-                Content renderers will be implemented in subsequent user stories.
-              </p>
-            </div>
-          )}
+          {content.type !== 'kpi' &&
+            content.type !== 'consultation' &&
+            content.type !== 'career-role' && (
+              <div
+                style={{
+                  fontFamily: 'var(--font-ui)',
+                  color: 'var(--text-secondary)',
+                  fontSize: '14px',
+                }}
+              >
+                <p>
+                  Detail panel for: <strong>{content.type}</strong>
+                </p>
+                <p style={{ marginTop: '8px', fontSize: '12px' }}>
+                  Content renderers will be implemented in subsequent user stories.
+                </p>
+              </div>
+            )}
         </div>
       </div>
     </>