Task 9: Rebuild MedicationsView (Skills view)

Rebuild medications/skills view from ref-medications.md spec with
Clinical Luxury design direction. Three category tabs with count
badges, semantic table with sortable columns, expandable prescribing
history with vertical timeline, and Framer Motion height animation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/views/MedicationsView.tsx

@@ -1,8 +1,10 @@
 import { useState, useMemo } from 'react'
-import { ChevronDown, ChevronUp, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react'
 import { medications } from '@/data/medications'
 import type { Medication } from '@/types/pmr'
 import { useBreakpoint } from '@/hooks/useBreakpoint'
+import { useAccessibility } from '@/contexts/AccessibilityContext'
 
 type SortField = 'name' | 'dose' | 'frequency' | 'startYear' | 'status'
 type SortDirection = 'asc' | 'desc' | null
@@ -12,21 +14,30 @@ interface SortState {
   direction: SortDirection
 }
 
-const categoryTabs = [
-  { id: 'Active', label: 'Active Medications', shortLabel: 'Active', description: 'Technical skills (daily use)' },
-  { id: 'Clinical', label: 'Clinical Medications', shortLabel: 'Clinical', description: 'Healthcare domain skills' },
-  { id: 'PRN', label: 'PRN (As Required)', shortLabel: 'PRN', description: 'Strategic & leadership skills' },
-] as const
+type CategoryId = 'Active' | 'Clinical' | 'PRN'
+
+const categoryTabs: { id: CategoryId; label: string; shortLabel: string }[] = [
+  { id: 'Active', label: 'Active Medications', shortLabel: 'Active' },
+  { id: 'Clinical', label: 'Clinical Medications', shortLabel: 'Clinical' },
+  { id: 'PRN', label: 'PRN (As Required)', shortLabel: 'PRN' },
+]
+
+const categoryCounts: Record<CategoryId, number> = {
+  Active: medications.filter(m => m.category === 'Active').length,
+  Clinical: medications.filter(m => m.category === 'Clinical').length,
+  PRN: medications.filter(m => m.category === 'PRN').length,
+}
+
+const prefersReducedMotion = typeof window !== 'undefined'
+  ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  : false
 
 export function MedicationsView() {
-  const [activeTab, setActiveTab] = useState<'Active' | 'Clinical' | 'PRN'>('Active')
+  const [activeTab, setActiveTab] = useState<CategoryId>('Active')
   const [expandedRow, setExpandedRow] = useState<string | null>(null)
   const [sort, setSort] = useState<SortState>({ field: 'name', direction: null })
   const { isMobile } = useBreakpoint()
-
-  const prefersReducedMotion = typeof window !== 'undefined'
-    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
-    : false
+  const { setExpandedItem } = useAccessibility()
 
   const filteredMedications = useMemo(() => {
     return medications.filter(med => med.category === activeTab)
@@ -45,8 +56,8 @@ export function MedicationsView() {
           comparison = a.dose - b.dose
           break
         case 'frequency': {
-          const freqOrder = { 'Daily': 0, 'Weekly': 1, 'Monthly': 2, 'As needed': 3 }
-          comparison = freqOrder[a.frequency] - freqOrder[b.frequency]
+          const freqOrder: Record<string, number> = { 'Daily': 0, 'Weekly': 1, 'Monthly': 2, 'As needed': 3 }
+          comparison = (freqOrder[a.frequency] ?? 4) - (freqOrder[b.frequency] ?? 4)
           break
         }
         case 'startYear':
@@ -74,33 +85,37 @@ export function MedicationsView() {
     }
   }
 
-  const toggleRow = (id: string) => {
-    setExpandedRow(expandedRow === id ? null : id)
+  const toggleRow = (id: string, name: string) => {
+    const nextExpanded = expandedRow === id ? null : id
+    setExpandedRow(nextExpanded)
+    setExpandedItem(nextExpanded ? name : null)
   }
 
-  const getSortIcon = (field: SortField) => {
+  const SortIndicator = ({ field }: { field: SortField }) => {
     if (sort.field !== field || !sort.direction) {
-      return <ArrowUpDown size={12} className="text-gray-400" />
+      return <ChevronsUpDown className="w-3.5 h-3.5 text-gray-400" />
     }
     return sort.direction === 'asc'
-      ? <ArrowUp size={12} className="text-pmr-nhsblue" />
-      : <ArrowDown size={12} className="text-pmr-nhsblue" />
+      ? <ChevronUp className="w-3.5 h-3.5 text-[#005EB8]" />
+      : <ChevronDown className="w-3.5 h-3.5 text-[#005EB8]" />
   }
 
   return (
     <div className="space-y-6">
-      <div className="bg-white border border-gray-200 rounded">
-        <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
-          <h1 className="font-inter font-semibold text-lg text-gray-900">
+      <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr overflow-hidden">
+        {/* Header */}
+        <div className="px-5 py-3 border-b border-[#E5E7EB] bg-[#F9FAFB]">
+          <h1 className="font-ui font-semibold text-[15px] text-gray-900">
             Current Medications
           </h1>
-          <p className="font-inter text-sm text-gray-500 mt-1">
+          <p className="font-ui text-[13px] text-gray-500 mt-0.5">
             Skills mapped as active medications — proficiency shown as dosage
           </p>
         </div>
 
-        <div className="border-b border-gray-200">
-          <nav className="flex" role="tablist">
+        {/* Category Tabs */}
+        <div className="border-b border-[#E5E7EB]">
+          <nav className="flex" role="tablist" aria-label="Medication categories">
             {categoryTabs.map((tab) => (
               <button
                 key={tab.id}
@@ -110,100 +125,76 @@ export function MedicationsView() {
                 onClick={() => {
                   setActiveTab(tab.id)
                   setExpandedRow(null)
+                  setExpandedItem(null)
                 }}
                 className={`
-                  flex-1 px-4 py-3 text-left transition-colors duration-100
+                  flex-1 px-4 py-2.5 transition-colors duration-100 text-left
+                  border-b-2
                   ${activeTab === tab.id
-                    ? 'bg-white border-b-2 border-pmr-nhsblue' 
-                    : 'bg-gray-50 hover:bg-gray-100 border-b-2 border-transparent'}
+                    ? 'bg-white border-[#005EB8]'
+                    : 'bg-[#F9FAFB] border-transparent text-gray-600 hover:bg-white'}
                 `}
               >
-                <span className={`font-inter font-medium text-sm ${activeTab === tab.id ? 'text-gray-900' : 'text-gray-600'}`}>
+                <span className="flex items-center gap-2">
+                  <span className={`font-ui font-medium text-[14px] ${activeTab === tab.id ? 'text-[#005EB8]' : 'text-gray-600'}`}>
                     {isMobile ? tab.shortLabel : tab.label}
                   </span>
-                {!isMobile && (
-                  <span className="block font-inter text-xs text-gray-500 mt-0.5">
-                    {tab.description}
+                  <span
+                    className={`
+                      inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-[11px] font-ui font-medium
+                      ${activeTab === tab.id
+                        ? 'bg-[#005EB8]/10 text-[#005EB8]'
+                        : 'bg-gray-200 text-gray-500'}
+                    `}
+                  >
+                    {categoryCounts[tab.id]}
+                  </span>
                 </span>
-                )}
               </button>
             ))}
           </nav>
         </div>
 
+        {/* Tab Panel */}
+        <div
+          id={`panel-${activeTab}`}
+          role="tabpanel"
+          aria-labelledby={activeTab}
+        >
           {isMobile ? (
             <MobileMedicationList
               medications={sortedMedications}
               expandedRow={expandedRow}
               onToggle={toggleRow}
-            prefersReducedMotion={prefersReducedMotion}
             />
           ) : (
             <div className="overflow-x-auto">
               <table className="w-full" role="grid">
                 <thead>
-                <tr className="border-b border-gray-200 bg-gray-50">
-                  <th scope="col" className="w-8"></th>
-                  <th scope="col" className="text-left">
+                  <tr className="border-b border-[#E5E7EB] bg-[#F9FAFB]">
+                    {(['name', 'dose', 'frequency', 'startYear', 'status'] as SortField[]).map((field) => {
+                      const labels: Record<SortField, string> = {
+                        name: 'Drug Name',
+                        dose: 'Dose',
+                        frequency: 'Frequency',
+                        startYear: 'Start',
+                        status: 'Status',
+                      }
+                      return (
+                        <th key={field} scope="col" className="text-left border-r border-[#E5E7EB] last:border-r-0">
                           <button
                             type="button"
-                      onClick={() => handleSort('name')}
-                      className="w-full px-4 py-3 flex items-center gap-2 hover:bg-gray-100 transition-colors"
+                            onClick={() => handleSort(field)}
+                            className="w-full px-4 h-[40px] flex items-center gap-2 hover:bg-[#EFF6FF] transition-colors duration-100"
                           >
-                      <span className="font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
-                        Drug Name
+                            <span className="font-ui font-semibold text-[13px] uppercase tracking-[0.03em] text-gray-400">
+                              {labels[field]}
                             </span>
-                      {getSortIcon('name')}
-                    </button>
-                  </th>
-                  <th scope="col" className="text-left">
-                    <button
-                      type="button"
-                      onClick={() => handleSort('dose')}
-                      className="w-full px-4 py-3 flex items-center gap-2 hover:bg-gray-100 transition-colors"
-                    >
-                      <span className="font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
-                        Dose
-                      </span>
-                      {getSortIcon('dose')}
-                    </button>
-                  </th>
-                  <th scope="col" className="text-left">
-                    <button
-                      type="button"
-                      onClick={() => handleSort('frequency')}
-                      className="w-full px-4 py-3 flex items-center gap-2 hover:bg-gray-100 transition-colors"
-                    >
-                      <span className="font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
-                        Frequency
-                      </span>
-                      {getSortIcon('frequency')}
-                    </button>
-                  </th>
-                  <th scope="col" className="text-left">
-                    <button
-                      type="button"
-                      onClick={() => handleSort('startYear')}
-                      className="w-full px-4 py-3 flex items-center gap-2 hover:bg-gray-100 transition-colors"
-                    >
-                      <span className="font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
-                        Start
-                      </span>
-                      {getSortIcon('startYear')}
-                    </button>
-                  </th>
-                  <th scope="col" className="text-left">
-                    <button
-                      type="button"
-                      onClick={() => handleSort('status')}
-                      className="w-full px-4 py-3 flex items-center gap-2 hover:bg-gray-100 transition-colors"
-                    >
-                      <span className="font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
-                        Status
-                      </span>
-                      {getSortIcon('status')}
+                            <SortIndicator field={field} />
                           </button>
                         </th>
+                      )
+                    })}
                   </tr>
                 </thead>
                 <tbody>
@@ -212,18 +203,19 @@ export function MedicationsView() {
                       key={med.id}
                       medication={med}
                       isExpanded={expandedRow === med.id}
-                    isAlternating={index % 2 === 1}
-                    onToggle={() => toggleRow(med.id)}
-                    prefersReducedMotion={prefersReducedMotion}
+                      isEven={index % 2 === 1}
+                      onToggle={() => toggleRow(med.id, med.name)}
                     />
                   ))}
                 </tbody>
               </table>
             </div>
           )}
+        </div>
 
-        <div className="px-4 py-3 border-t border-gray-200 bg-gray-50">
-          <p className="font-inter text-xs text-gray-500">
+        {/* Footer */}
+        <div className="px-5 py-3 border-t border-[#E5E7EB] bg-[#F9FAFB]">
+          <p className="font-ui text-[12px] text-gray-500">
             {sortedMedications.length} medications in this category. {isMobile ? 'Tap' : 'Click'} a row to view prescribing history.
           </p>
         </div>
@@ -232,188 +224,209 @@ export function MedicationsView() {
   )
 }
 
+/* ─── Mobile Card Layout ───────────────────────────────────────────── */
+
 interface MobileMedicationListProps {
   medications: Medication[]
   expandedRow: string | null
-  onToggle: (id: string) => void
-  prefersReducedMotion: boolean
+  onToggle: (id: string, name: string) => void
 }
 
-function MobileMedicationList({ medications, expandedRow, onToggle, prefersReducedMotion }: MobileMedicationListProps) {
-  const statusColors = {
-    'Active': 'bg-green-500',
-    'Historical': 'bg-gray-400',
-  }
-
+function MobileMedicationList({ medications, expandedRow, onToggle }: MobileMedicationListProps) {
+  return (
+    <div className="divide-y divide-[#E5E7EB]">
+      {medications.map((med) => {
+        const isExpanded = expandedRow === med.id
         return (
-    <div className="divide-y divide-gray-200">
-      {medications.map((med) => (
           <div key={med.id} className="bg-white">
             <button
               type="button"
-            onClick={() => onToggle(med.id)}
-            className="w-full p-4 text-left"
-            aria-expanded={expandedRow === med.id}
+              onClick={() => onToggle(med.id, med.name)}
+              className="w-full p-4 text-left hover:bg-[#EFF6FF] transition-colors duration-100 focus-visible:ring-2 focus-visible:ring-[#005EB8]/40 focus-visible:ring-inset"
+              aria-expanded={isExpanded}
+              aria-label={`${med.name}, ${med.dose}% proficiency, ${med.frequency}, since ${med.startYear}`}
             >
               <div className="flex items-start justify-between gap-3">
                 <div className="flex-1 min-w-0">
-                <h3 className="font-inter font-medium text-sm text-gray-900">
+                  <h3 className="font-ui font-medium text-[14px] text-gray-900">
                     {med.name}
                   </h3>
-                <div className="flex items-center gap-3 mt-1.5 text-xs text-gray-500">
+                  <div className="flex items-center gap-3 mt-1.5 font-ui text-[12px] text-gray-500">
                     <span className="font-geist">{med.dose}%</span>
-                  <span>•</span>
+                    <span className="text-gray-300">·</span>
                     <span>{med.frequency}</span>
-                  <span>•</span>
+                    <span className="text-gray-300">·</span>
                     <span className="font-geist">Since {med.startYear}</span>
                   </div>
                 </div>
                 <div className="flex items-center gap-2 flex-shrink-0">
-                <span className={`w-2 h-2 rounded-full ${statusColors[med.status]}`} />
-                <span className="text-xs text-gray-600">{med.status}</span>
-                {expandedRow === med.id ? (
-                  <ChevronUp size={16} className="text-gray-400" />
-                ) : (
+                  <StatusDot status={med.status} />
+                  <motion.div
+                    animate={{ rotate: isExpanded ? 180 : 0 }}
+                    transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
+                  >
                     <ChevronDown size={16} className="text-gray-400" />
-                )}
+                  </motion.div>
                 </div>
               </div>
             </button>
-          {expandedRow === med.id && (
-            <div className={`px-4 pb-4 ${prefersReducedMotion ? '' : 'animate-fadeIn'}`}>
-              <div className="bg-gray-50 rounded p-3">
-                <p className="font-inter font-medium text-xs uppercase tracking-wide text-gray-400 mb-2">
-                  Prescribing History
-                </p>
-                <div className="space-y-1.5">
-                  {med.prescribingHistory.map((entry, index) => (
-                    <div key={index} className="flex gap-3">
-                      <span className="font-geist font-medium text-xs text-gray-500 w-10 flex-shrink-0">
-                        {entry.year}
-                      </span>
-                      <span className="font-geist text-xs text-gray-600">
-                        {entry.description}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              </div>
+            <AnimatePresence initial={false}>
+              {isExpanded && (
+                <motion.div
+                  initial={{ height: 0 }}
+                  animate={{ height: 'auto' }}
+                  exit={{ height: 0 }}
+                  transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: [0.4, 0, 0.2, 1] }}
+                  className="overflow-hidden"
+                >
+                  <div className="px-4 pb-4">
+                    <PrescribingHistory history={med.prescribingHistory} />
                   </div>
+                </motion.div>
               )}
+            </AnimatePresence>
           </div>
-      ))}
+        )
+      })}
     </div>
   )
 }
 
+/* ─── Desktop Table Row ────────────────────────────────────────────── */
+
 interface MedicationRowProps {
   medication: Medication
   isExpanded: boolean
-  isAlternating: boolean
+  isEven: boolean
   onToggle: () => void
-  prefersReducedMotion: boolean
 }
 
-function MedicationRow({ medication, isExpanded, isAlternating, onToggle, prefersReducedMotion }: MedicationRowProps) {
-  const statusColors = {
-    'Active': 'bg-green-500',
-    'Historical': 'bg-gray-400',
-  }
-
+function MedicationRow({ medication, isExpanded, isEven, onToggle }: MedicationRowProps) {
   return (
     <>
       <tr
         className={`
-          border-b border-gray-200 cursor-pointer transition-colors duration-100
-          ${isAlternating ? 'bg-gray-50' : 'bg-white'}
-          hover:bg-blue-50
+          h-[40px] border-b border-[#E5E7EB] cursor-pointer transition-colors duration-100
+          ${isEven ? 'bg-[#F9FAFB]' : 'bg-white'}
+          hover:bg-[#EFF6FF]
         `}
         onClick={onToggle}
         role="row"
         aria-expanded={isExpanded}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            onToggle()
+          }
+        }}
       >
-        <td className="w-8 px-2 py-0">
-          <button
-            type="button"
-            className="p-1 hover:bg-gray-200 rounded transition-colors"
-            aria-label={isExpanded ? 'Collapse' : 'Expand'}
+        <td className="px-4 py-2 border-r border-[#E5E7EB]">
+          <div className="flex items-center gap-2">
+            <motion.div
+              animate={{ rotate: isExpanded ? 180 : 0 }}
+              transition={{ duration: prefersReducedMotion ? 0 : 0.2 }}
+              className="flex-shrink-0"
             >
-            {isExpanded ? (
-              <ChevronUp size={16} className="text-gray-500" />
-            ) : (
-              <ChevronDown size={16} className="text-gray-500" />
-            )}
-          </button>
-        </td>
-        <td className="px-4 py-2.5">
-          <span className="font-inter font-medium text-sm text-gray-900">
+              <ChevronDown size={14} className="text-gray-400" />
+            </motion.div>
+            <span className="font-ui font-medium text-[14px] text-gray-900">
               {medication.name}
             </span>
+          </div>
         </td>
-        <td className="px-4 py-2.5">
-          <span className="font-geist text-sm text-gray-700">
+        <td className="px-4 py-2 border-r border-[#E5E7EB]">
+          <span className="font-geist text-[13px] text-gray-700">
             {medication.dose}%
           </span>
         </td>
-        <td className="px-4 py-2.5">
-          <span className="font-inter text-sm text-gray-700">
+        <td className="px-4 py-2 border-r border-[#E5E7EB]">
+          <span className="font-ui text-[13px] text-gray-700">
             {medication.frequency}
           </span>
         </td>
-        <td className="px-4 py-2.5">
-          <span className="font-geist text-sm text-gray-700">
+        <td className="px-4 py-2 border-r border-[#E5E7EB]">
+          <span className="font-geist text-[13px] text-gray-700">
             {medication.startYear}
           </span>
         </td>
-        <td className="px-4 py-2.5">
-          <span className="flex items-center gap-2">
-            <span className={`w-2 h-2 rounded-full ${statusColors[medication.status]}`} />
-            <span className="font-inter text-sm text-gray-600">{medication.status}</span>
-          </span>
+        <td className="px-4 py-2">
+          <StatusDot status={medication.status} />
         </td>
       </tr>
+      <AnimatePresence initial={false}>
         {isExpanded && (
-        <PrescribingHistory
-          history={medication.prescribingHistory}
-          prefersReducedMotion={prefersReducedMotion}
-        />
+          <motion.tr
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: 0 }}
+            transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: [0.4, 0, 0.2, 1] }}
+            className="overflow-hidden"
+          >
+            <td colSpan={5} className="p-0">
+              <motion.div
+                initial={{ height: 0 }}
+                animate={{ height: 'auto' }}
+                exit={{ height: 0 }}
+                transition={{ duration: prefersReducedMotion ? 0 : 0.2, ease: [0.4, 0, 0.2, 1] }}
+                className="overflow-hidden"
+              >
+                <div className="px-6 py-4 bg-[#F9FAFB] border-b border-[#E5E7EB]">
+                  <PrescribingHistory history={medication.prescribingHistory} />
+                </div>
+              </motion.div>
+            </td>
+          </motion.tr>
         )}
+      </AnimatePresence>
     </>
   )
 }
 
-interface PrescribingHistoryProps {
-  history: { year: number; description: string }[]
-  prefersReducedMotion: boolean
+/* ─── Status Dot ───────────────────────────────────────────────────── */
+
+function StatusDot({ status }: { status: 'Active' | 'Historical' }) {
+  const color = status === 'Active' ? 'bg-[#22C55E]' : 'bg-gray-400'
+  return (
+    <div className="flex items-center gap-2">
+      <span className={`w-1.5 h-1.5 rounded-full ${color}`} aria-hidden="true" />
+      <span className="font-ui text-[13px] text-gray-700">{status}</span>
+    </div>
+  )
 }
 
-function PrescribingHistory({ history, prefersReducedMotion }: PrescribingHistoryProps) {
+/* ─── Prescribing History (shared) ─────────────────────────────────── */
+
+interface PrescribingHistoryProps {
+  history: { year: number; description: string }[]
+}
+
+function PrescribingHistory({ history }: PrescribingHistoryProps) {
   return (
-    <tr className="bg-gray-50 border-b border-gray-200">
-      <td colSpan={6} className="px-4 py-4">
-        <div
-          className={`
-            pl-8
-            ${prefersReducedMotion ? '' : 'animate-fadeIn'}
-          `}
-        >
-          <p className="font-inter font-medium text-xs uppercase tracking-wide text-gray-400 mb-3">
+    <div className="pl-6">
+      <p className="font-ui font-semibold text-[12px] uppercase tracking-[0.05em] text-gray-400 mb-3">
         Prescribing History
       </p>
+      <div className="relative">
+        {/* Vertical timeline line */}
+        <div className="absolute left-[18px] top-1 bottom-1 w-px bg-[#E5E7EB]" aria-hidden="true" />
         <div className="space-y-2">
           {history.map((entry, index) => (
-              <div key={index} className="flex gap-4">
-                <span className="font-geist font-medium text-sm text-gray-500 w-12 flex-shrink-0">
+            <div key={index} className="flex gap-4 relative">
+              {/* Timeline dot */}
+              <div className="relative z-10 flex-shrink-0 mt-1.5">
+                <span className="block w-2 h-2 rounded-full bg-[#005EB8] ring-2 ring-white" aria-hidden="true" />
+              </div>
+              <span className="font-geist font-semibold text-[12px] text-gray-600 w-10 flex-shrink-0 pt-[1px]">
                 {entry.year}
               </span>
-                <span className="font-geist text-sm text-gray-600">
+              <span className="font-geist text-[12px] text-gray-500 pt-[1px]">
                 {entry.description}
               </span>
             </div>
           ))}
         </div>
       </div>
-      </td>
-    </tr>
+    </div>
   )
 }