From afc3876210b6efcfd40008da11287664982c834d Mon Sep 17 00:00:00 2001
From: A Charlwood <andrew.charlwood@gmail.com>
Date: Fri, 13 Feb 2026 23:54:59 +0000
Subject: [PATCH] US-013: Add detail panel trigger to LastConsultationTile

- Import useDetailPanel hook and ChevronRight icon
- Make header info row clickable to open consultation detail panel
- Add "View full record" button at bottom of tile
- Both triggers call openPanel({ type: 'consultation', consultation })
- Add hover states to clickable areas
- Include keyboard navigation support (Enter/Space)
- Add aria-labels for accessibility

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/tiles/LastConsultationTile.tsx | 63 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/src/components/tiles/LastConsultationTile.tsx b/src/components/tiles/LastConsultationTile.tsx
index b0e5e3f..7548252 100644
--- a/src/components/tiles/LastConsultationTile.tsx
+++ b/src/components/tiles/LastConsultationTile.tsx
@@ -1,11 +1,26 @@
 import React from 'react'
 import { Card, CardHeader } from '../Card'
 import { consultations } from '@/data/consultations'
+import { useDetailPanel } from '@/contexts/DetailPanelContext'
+import { ChevronRight } from 'lucide-react'
 
 export const LastConsultationTile: React.FC = () => {
+  const { openPanel } = useDetailPanel()
+
   // Use the most recent consultation (first in array)
   const consultation = consultations[0]
 
+  const handleOpenPanel = () => {
+    openPanel({ type: 'consultation', consultation })
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      handleOpenPanel()
+    }
+  }
+
   // Format date to "May 2025" format
   const formatDate = (dateStr: string): string => {
     const date = new Date(dateStr)
@@ -33,8 +48,12 @@ export const LastConsultationTile: React.FC = () => {
     <Card full tileId="last-consultation">
       <CardHeader dotColor="green" title="LAST CONSULTATION" rightText="Most recent role" />
 
-      {/* Header info row */}
+      {/* Header info row - clickable */}
       <div
+        role="button"
+        tabIndex={0}
+        onClick={handleOpenPanel}
+        onKeyDown={handleKeyDown}
         style={{
           display: 'flex',
           flexWrap: 'wrap',
@@ -42,7 +61,19 @@ export const LastConsultationTile: React.FC = () => {
           marginBottom: '14px',
           paddingBottom: '14px',
           borderBottom: '1px solid var(--border-light)',
+          cursor: 'pointer',
+          borderRadius: 'var(--radius-sm)',
+          padding: '8px',
+          margin: '-8px -8px 14px -8px',
+          transition: 'background-color 150ms ease-out',
         }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.backgroundColor = 'rgba(10,128,128,0.04)'
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = 'transparent'
+        }}
+        aria-label={`View full details for ${consultation.role}`}
       >
         <div>
           <div
@@ -158,6 +189,7 @@ export const LastConsultationTile: React.FC = () => {
           display: 'flex',
           flexDirection: 'column',
           gap: '7px',
+          marginBottom: '16px',
         }}
       >
         {consultation.examination.map((bullet, index) => (
@@ -188,6 +220,35 @@ export const LastConsultationTile: React.FC = () => {
           </li>
         ))}
       </ul>
+
+      {/* View full record button */}
+      <button
+        onClick={handleOpenPanel}
+        onKeyDown={handleKeyDown}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '6px',
+          fontSize: '12px',
+          fontWeight: 500,
+          color: 'var(--accent)',
+          background: 'transparent',
+          border: 'none',
+          padding: '6px 0',
+          cursor: 'pointer',
+          transition: 'color 150ms ease-out',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.color = 'var(--accent-hover)'
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.color = 'var(--accent)'
+        }}
+        aria-label="View full consultation record"
+      >
+        <span>View full record</span>
+        <ChevronRight size={14} strokeWidth={2.5} />
+      </button>
     </Card>
   )
 }