feat: US-008 - Add two-column experience and skills layout in Patient Pathway

2026-02-14 18:11:26 +00:00
parent 0e7bef0206
commit b5de609cd5
6 changed files with 640 additions and 8 deletions
@@ -8,11 +8,12 @@ import { CommandPalette } from './CommandPalette'
 import { DetailPanel } from './DetailPanel'
 import { CardHeader } from './Card'
 import { PatientSummaryTile } from './tiles/PatientSummaryTile'
-import { CoreSkillsTile } from './tiles/CoreSkillsTile'
 import { EducationTile } from './tiles/EducationTile'
 import { ProjectsTile } from './tiles/ProjectsTile'
 import { ParentSection } from './ParentSection'
 import CareerConstellation from './CareerConstellation'
+import { WorkExperienceSubsection } from './WorkExperienceSubsection'
+import { RepeatMedicationsSubsection } from './RepeatMedicationsSubsection'
 import { useActiveSection } from '@/hooks/useActiveSection'
 import { useDetailPanel } from '@/contexts/DetailPanelContext'
 import { consultations } from '@/data/consultations'
@@ -373,9 +374,6 @@ export function DashboardLayout() {
            {/* ProjectsTile — half width */}
            <ProjectsTile />

-            {/* CoreSkillsTile — full width */}
-            <CoreSkillsTile />
-
            {/* Patient Pathway — parent section with constellation graph + subsections */}
            <ParentSection title="Patient Pathway" tileId="patient-pathway">
              <CareerConstellation
@@ -385,6 +383,12 @@ export function DashboardLayout() {

              {/* Last Consultation subsection */}
              <LastConsultationSubsection />
+
+              {/* Two-column experience/skills grid */}
+              <div className="pathway-columns" style={{ marginTop: '24px' }}>
+                <WorkExperienceSubsection />
+                <RepeatMedicationsSubsection />
+              </div>
            </ParentSection>

            {/* EducationTile — full width */}
@@ -0,0 +1,274 @@
+import React from 'react'
+import type { LucideIcon } from 'lucide-react'
+import {
+  BarChart3, Code2, Database, PieChart, FileCode2,
+  Sheet, GitBranch, Workflow, Pill, Users, FileCheck,
+  TrendingUp, Route, ShieldAlert, Banknote, Handshake,
+  MessageSquare, UserPlus, RefreshCw, Calculator, Presentation,
+  ChevronRight,
+} from 'lucide-react'
+import { CardHeader } from './Card'
+import { skills } from '@/data/skills'
+import { useDetailPanel } from '@/contexts/DetailPanelContext'
+import type { SkillMedication, SkillCategory } from '@/types/pmr'
+
+const iconMap: Record<string, LucideIcon> = {
+  BarChart3, Code2, Database, PieChart, FileCode2,
+  Sheet, GitBranch, Workflow, Pill, Users, FileCheck,
+  TrendingUp, Route, ShieldAlert, Banknote, Handshake,
+  MessageSquare, UserPlus, RefreshCw, Calculator, Presentation,
+}
+
+const SKILLS_PER_CATEGORY = 4
+
+const categoryConfig: { id: SkillCategory; label: string }[] = [
+  { id: 'Technical', label: 'Technical' },
+  { id: 'Domain', label: 'Healthcare Domain' },
+  { id: 'Leadership', label: 'Strategic & Leadership' },
+]
+
+interface SkillRowProps {
+  skill: SkillMedication
+  onClick: () => void
+}
+
+function SkillRow({ skill, onClick }: SkillRowProps) {
+  const IconComponent = iconMap[skill.icon]
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault()
+      onClick()
+    }
+  }
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      aria-label={`${skill.name}: ${skill.frequency}, ${skill.yearsOfExperience} years experience. Click for details.`}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
+        padding: '8px 10px',
+        minHeight: '44px',
+        background: 'var(--bg-dashboard)',
+        borderRadius: 'var(--radius-sm)',
+        border: '1px solid var(--border-light)',
+        cursor: 'pointer',
+        transition: 'border-color 0.15s, box-shadow 0.15s',
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = 'var(--accent-border)'
+        e.currentTarget.style.boxShadow = 'var(--shadow-md)'
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = 'var(--border-light)'
+        e.currentTarget.style.boxShadow = 'none'
+      }}
+    >
+      <div
+        style={{
+          width: '26px',
+          height: '26px',
+          borderRadius: '6px',
+          background: 'var(--accent-light)',
+          color: 'var(--accent)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+        }}
+      >
+        {IconComponent && <IconComponent size={13} />}
+      </div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            fontSize: '12.5px',
+            fontWeight: 600,
+            color: 'var(--text-primary)',
+            lineHeight: 1.3,
+          }}
+        >
+          {skill.name}
+        </div>
+        <div
+          style={{
+            fontSize: '10.5px',
+            color: 'var(--text-tertiary)',
+            fontFamily: '"Geist Mono", monospace',
+          }}
+        >
+          {skill.frequency} · {skill.yearsOfExperience} yrs
+        </div>
+      </div>
+      <div
+        style={{
+          fontSize: '10px',
+          fontWeight: 500,
+          padding: '2px 7px',
+          borderRadius: '20px',
+          background: 'var(--success-light)',
+          color: 'var(--success)',
+          border: '1px solid var(--success-border)',
+          flexShrink: 0,
+        }}
+      >
+        {skill.status}
+      </div>
+      <ChevronRight
+        size={14}
+        style={{ color: 'var(--text-tertiary)', flexShrink: 0 }}
+      />
+    </div>
+  )
+}
+
+interface CategorySectionProps {
+  label: string
+  categoryId: SkillCategory
+  skills: SkillMedication[]
+  onSkillClick: (skill: SkillMedication) => void
+  onViewAll: (category: SkillCategory) => void
+  isFirst: boolean
+}
+
+function CategorySection({
+  label,
+  categoryId,
+  skills: categorySkills,
+  onSkillClick,
+  onViewAll,
+  isFirst,
+}: CategorySectionProps) {
+  const visibleSkills = categorySkills.slice(0, SKILLS_PER_CATEGORY)
+  const remainingCount = categorySkills.length - SKILLS_PER_CATEGORY
+
+  return (
+    <div style={{ marginTop: isFirst ? 0 : '16px' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          marginBottom: '10px',
+        }}
+      >
+        <span
+          style={{
+            fontSize: '10px',
+            fontWeight: 600,
+            textTransform: 'uppercase',
+            letterSpacing: '0.06em',
+            color: 'var(--text-tertiary)',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {label}
+        </span>
+        <div
+          style={{
+            flex: 1,
+            height: '1px',
+            background: 'var(--border-light)',
+          }}
+        />
+        <span
+          style={{
+            fontSize: '10px',
+            color: 'var(--text-tertiary)',
+            fontFamily: '"Geist Mono", monospace',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {categorySkills.length} items
+        </span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+        {visibleSkills.map((skill) => (
+          <SkillRow
+            key={skill.id}
+            skill={skill}
+            onClick={() => onSkillClick(skill)}
+          />
+        ))}
+      </div>
+      {remainingCount > 0 && (
+        <button
+          onClick={() => onViewAll(categoryId)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+            marginTop: '8px',
+            padding: '4px 0',
+            minHeight: '44px',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            fontSize: '11px',
+            fontWeight: 500,
+            color: 'var(--accent)',
+            fontFamily: 'inherit',
+            transition: 'color 0.15s',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = 'var(--accent-hover)'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--accent)'
+          }}
+          aria-label={`View all ${categorySkills.length} ${label} skills`}
+        >
+          View all ({categorySkills.length})
+          <ChevronRight size={12} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export function RepeatMedicationsSubsection() {
+  const { openPanel } = useDetailPanel()
+
+  const groupedSkills = categoryConfig.map(({ id, label }) => ({
+    id,
+    label,
+    skills: skills
+      .filter((s) => s.category === id)
+      .sort((a, b) => b.proficiency - a.proficiency),
+  }))
+
+  const handleSkillClick = (skill: SkillMedication) => {
+    openPanel({ type: 'skill', skill })
+  }
+
+  const handleViewAll = (category: SkillCategory) => {
+    openPanel({ type: 'skills-all', category })
+  }
+
+  return (
+    <div>
+      <CardHeader
+        dotColor="amber"
+        title="REPEAT MEDICATIONS"
+        rightText="Active prescriptions"
+      />
+      {groupedSkills.map((group, index) => (
+        <CategorySection
+          key={group.id}
+          label={group.label}
+          categoryId={group.id}
+          skills={group.skills}
+          onSkillClick={handleSkillClick}
+          onViewAll={handleViewAll}
+          isFirst={index === 0}
+        />
+      ))}
+    </div>
+  )
+}
@@ -0,0 +1,288 @@
+import React, { useState, useCallback } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { ChevronRight } from 'lucide-react'
+import { CardHeader } from './Card'
+import { consultations } from '@/data/consultations'
+import { useDetailPanel } from '@/contexts/DetailPanelContext'
+
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+interface RoleItemProps {
+  consultation: typeof consultations[0]
+  isExpanded: boolean
+  onToggle: () => void
+  onViewFull: () => void
+}
+
+function RoleItem({ consultation, isExpanded, onToggle, onViewFull }: RoleItemProps) {
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        onToggle()
+      }
+      if (e.key === 'Escape' && isExpanded) {
+        e.preventDefault()
+        onToggle()
+      }
+    },
+    [onToggle, isExpanded],
+  )
+
+  return (
+    <div
+      style={{
+        background: 'var(--bg-dashboard)',
+        borderRadius: 'var(--radius-sm)',
+        border: `1px solid ${isExpanded ? 'var(--accent-border)' : 'var(--border-light)'}`,
+        transition: 'border-color 0.15s, box-shadow 0.15s',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Clickable header */}
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={onToggle}
+        onKeyDown={handleKeyDown}
+        aria-expanded={isExpanded}
+        aria-label={`${consultation.role} at ${consultation.organization}, ${consultation.duration}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
+        style={{
+          display: 'flex',
+          gap: '10px',
+          padding: '10px 12px',
+          cursor: 'pointer',
+          minHeight: '44px',
+          alignItems: 'flex-start',
+        }}
+        onMouseEnter={(e) => {
+          if (!isExpanded) {
+            e.currentTarget.parentElement!.style.borderColor = 'var(--accent-border)'
+            e.currentTarget.parentElement!.style.boxShadow = 'var(--shadow-md)'
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!isExpanded) {
+            e.currentTarget.parentElement!.style.borderColor = 'var(--border-light)'
+            e.currentTarget.parentElement!.style.boxShadow = 'none'
+          }
+        }}
+      >
+        {/* Teal dot */}
+        <div
+          aria-hidden="true"
+          style={{
+            width: '8px',
+            height: '8px',
+            borderRadius: '50%',
+            background: '#0D6E6E',
+            flexShrink: 0,
+            marginTop: '4px',
+          }}
+        />
+
+        {/* Text content */}
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontSize: '12.5px',
+              fontWeight: 600,
+              color: 'var(--text-primary)',
+              lineHeight: 1.3,
+            }}
+          >
+            {consultation.role}
+          </div>
+          <div
+            style={{
+              fontSize: '11px',
+              color: 'var(--text-secondary)',
+              marginTop: '2px',
+            }}
+          >
+            {consultation.organization}
+          </div>
+          <div
+            style={{
+              fontSize: '10px',
+              fontFamily: 'var(--font-mono)',
+              color: 'var(--text-tertiary)',
+              marginTop: '3px',
+            }}
+          >
+            {consultation.duration}
+          </div>
+        </div>
+
+        {/* Chevron */}
+        <ChevronRight
+          size={14}
+          style={{
+            color: 'var(--text-tertiary)',
+            flexShrink: 0,
+            marginTop: '2px',
+            transform: isExpanded ? 'rotate(90deg)' : 'none',
+            transition: 'transform 0.15s ease-out',
+          }}
+        />
+      </div>
+
+      {/* Expandable detail content */}
+      <AnimatePresence>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: 0 }}
+            transition={
+              prefersReducedMotion
+                ? { duration: 0 }
+                : { duration: 0.2, ease: 'easeOut' }
+            }
+            style={{ overflow: 'hidden' }}
+          >
+            <div
+              style={{
+                padding: '0 12px 12px 30px',
+                borderTop: '1px solid var(--border-light)',
+                paddingTop: '12px',
+                borderLeft: '2px solid var(--accent)',
+                marginLeft: '12px',
+              }}
+            >
+              {/* Examination bullets */}
+              <ul
+                style={{
+                  listStyle: 'none',
+                  padding: 0,
+                  margin: '0 0 10px 0',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '5px',
+                }}
+              >
+                {consultation.examination.map((bullet, i) => (
+                  <li
+                    key={i}
+                    style={{
+                      fontSize: '11.5px',
+                      color: 'var(--text-primary)',
+                      lineHeight: 1.5,
+                      paddingLeft: '12px',
+                      position: 'relative',
+                    }}
+                  >
+                    <span
+                      aria-hidden="true"
+                      style={{
+                        position: 'absolute',
+                        left: 0,
+                        top: '6px',
+                        width: '4px',
+                        height: '4px',
+                        borderRadius: '50%',
+                        background: 'var(--accent)',
+                        opacity: 0.5,
+                      }}
+                    />
+                    {bullet}
+                  </li>
+                ))}
+              </ul>
+
+              {/* Coded entries */}
+              <div
+                style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '6px',
+                  marginBottom: '10px',
+                }}
+              >
+                {consultation.codedEntries.map((entry) => (
+                  <span
+                    key={entry.code}
+                    style={{
+                      fontSize: '10px',
+                      fontFamily: 'var(--font-mono)',
+                      padding: '2px 6px',
+                      borderRadius: '4px',
+                      background: 'var(--accent-light)',
+                      color: 'var(--accent)',
+                      border: '1px solid var(--accent-border)',
+                    }}
+                  >
+                    {entry.code}: {entry.description}
+                  </span>
+                ))}
+              </div>
+
+              {/* View full record link */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onViewFull()
+                }}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                  fontSize: '11px',
+                  fontWeight: 500,
+                  color: 'var(--accent)',
+                  background: 'transparent',
+                  border: 'none',
+                  padding: '4px 0',
+                  cursor: 'pointer',
+                  fontFamily: 'inherit',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.color = 'var(--accent-hover)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.color = 'var(--accent)'
+                }}
+              >
+                View full record
+                <ChevronRight size={12} />
+              </button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+export function WorkExperienceSubsection() {
+  const [expandedId, setExpandedId] = useState<string | null>(null)
+  const { openPanel } = useDetailPanel()
+
+  const handleToggle = useCallback((id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id))
+  }, [])
+
+  const handleViewFull = useCallback(
+    (consultation: typeof consultations[0]) => {
+      openPanel({ type: 'career-role', consultation })
+    },
+    [openPanel],
+  )
+
+  return (
+    <div>
+      <CardHeader dotColor="teal" title="WORK EXPERIENCE" rightText={`${consultations.length} roles`} />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {consultations.map((c) => (
+          <RoleItem
+            key={c.id}
+            consultation={c}
+            isExpanded={expandedId === c.id}
+            onToggle={() => handleToggle(c.id)}
+            onViewFull={() => handleViewFull(c)}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -300,6 +300,20 @@ html {
  }
 }

+/* Pathway two-column layout — mobile-first (used in Patient Pathway) */
+.pathway-columns {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+/* Desktop: 2 columns */
+@media (min-width: 768px) {
+  .pathway-columns {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
 /* ===== COMMAND PALETTE ANIMATIONS ===== */
@keyframes palette-overlay-in {
  from { opacity: 0; }