portfolio/Ralph/refs/ref-investigations-documents.md

Reference: Investigations View (= Projects) + Documents View (= Education)

Extracted from goal.md — Investigations and Documents sections. Two simpler views that share the expandable-row pattern.

---

Investigations View (= Projects)

Projects presented as diagnostic investigations — tests that were ordered, performed, and returned results.

Investigation List

+--[ Investigation Results ]----------------------------------------------+
| Test Name                    | Requested | Status   | Result            |
|------------------------------+-----------+----------+-------------------|
| PharMetrics Interactive      | 2024      | Complete | Live (green)      |
|   Platform                   |           |          |                   |
| Patient Switching Algorithm  | 2025      | Complete | 14,000 pts found  |
| Blueteq Generator            | 2023      | Complete | 70% reduction     |
| CD Monitoring System         | 2024      | Complete | Population-scale  |
| Sankey Chart Analysis Tool   | 2023      | Complete | Pathway audit     |
| Patient Pathway Analysis     | 2024      | Ongoing  | In development    |
+-------------------------------------------------------------------------+

Status Badges

Styled like laboratory result status indicators:

• Complete (green dot): Investigation finished, results available
• Ongoing (amber dot): Investigation still in progress
• Live (pulsing green dot): Results are actively being used (for PharMetrics, which is a live URL)

Expanded Investigation View

Clicking an investigation row reveals a detailed "results panel" below the row:

PharMetrics Interactive Platform
|-- Date Requested:  2024
|-- Date Reported:   2024
|-- Status:          Complete - Live at medicines.charlwood.xyz
|-- Requesting Clinician: A. Charlwood
|-- Methodology:
|    Real-time medicines expenditure dashboard providing
|    actionable analytics for NHS decision-makers. Built with
|    Power BI and SQL, tracking expenditure across the 220M
|    prescribing budget.
|-- Results:
|    - Real-time tracking of medicines expenditure
|    - Actionable analytics for budget holders
|    - Self-serve model for wider team
|-- Tech Stack:     Power BI, SQL, DAX
|-- [View Results ->]  (external link to medicines.charlwood.xyz)

The expanded view uses a tree-like indented structure (with box-drawing characters in monospace) to present the investigation report. This mirrors how lab results and imaging reports appear in clinical systems — structured, indented, with labelled fields.

"View Results" Link

For PharMetrics (the only project with a live URL), a "View Results" button appears styled as an NHS blue action button. For internal projects, this button is absent.

---

Documents View (= Education & Certifications)

Education and certifications presented as attached documents in the patient record.

Document List

+--[ Attached Documents ]-------------------------------------------------+
| Type           | Document                         | Date    | Source     |
|----------------+----------------------------------+---------+------------|
| Certificate    | MPharm (Hons) 2:1                | 2015    | UEA        |
| Registration   | GPhC Pharmacist Registration     | 2016    | GPhC       |
| Certificate    | Mary Seacole Programme (78%)     | 2018    | NHS LA     |
| Results        | A-Levels: Maths A*, Chem B,     | 2011    | Highworth  |
|                | Politics C                       |         | Grammar    |
| Research       | Drug Delivery & Cocrystals       | 2015    | UEA        |
|                | (75.1% Distinction)              |         |            |
+-------------------------------------------------------------------------+

Document Type Icons

Small document icons from Lucide:

• FileText for certificates
• Award for registrations
• GraduationCap for academic results
• FlaskConical for research

Expanded Document Preview

MPharm (Hons) 2:1 - University of East Anglia
|-- Type:           Academic Qualification
|-- Date Awarded:   2015
|-- Institution:    University of East Anglia, Norwich
|-- Classification: Upper Second-Class Honours (2:1)
|-- Duration:       2011 - 2015 (4 years)
|-- Research:       Drug delivery and cocrystals
|                   Grade: 75.1% (Distinction)
|-- Notes:          MPharm is a 4-year integrated Master's degree
                    required for pharmacist registration in the UK.

The preview panel uses the same tree-indented structure as the Investigations expanded view, maintaining visual consistency across the PMR interface.

---

Design Guidance

Aesthetic Direction

Tone: Clinical Luxury — the structure of clinical investigation results and attached documents (tables, status badges, expandable rows) executed with premium refinement. Borders provide authentic clinical structuring; layered shadows, generous spacing, and refined typography provide the luxury finish. Light-mode only.

Differentiation: The expanded-row tree-indented monospace structure using box-drawing characters is the signature element. It transforms a flat data table into something that reads like a lab report or radiology result — structured, indented, with labelled fields in Geist Mono. The pipe-and-branch characters (├─, │, └─) create a distinctly clinical aesthetic that no standard portfolio site would ever use.

Key Design Decisions

ExpandableRow Component Pattern

Both views share an identical expand/collapse mechanic:

1. Collapsed State: Standard table row with hover feedback (slight background tint)
2. Expand Trigger: Click anywhere on the row
3. Expanded State: Full-width panel slides down below the row with AnimatePresence
4. Visual Connection: Expanded panel has left border matching the row's status color
5. Tree Structure: Expanded content uses box-drawing characters for clinical report aesthetic

Status Badge System:

• Complete (green dot): #10B981 background, used for finished investigations
• Ongoing (amber dot): #F59E0B background, used for in-progress work
• Live (pulsing green dot): #10B981 with CSS pulse animation, used for active/live URLs

Typography & Spacing

• Primary font: [UI font] (text, labels, table headers — Elvaro or Blumir, see CLAUDE.md)
• Monospace font: Geist Mono (tree-indented expanded content)
• Border radius: 4px throughout
• Border color: #E5E7EB (Tailwind gray-200)
• NHS Blue: #005EB8 (action buttons, links)
• Card shadow: Multi-layered per design system

Implementation Patterns

StatusBadge Component

interface StatusBadgeProps {
  status: 'complete' | 'ongoing' | 'live';
  label: string;
}

const StatusBadge = ({ status, label }: StatusBadgeProps) => {
  const styles = {
    complete: 'bg-emerald-100 text-emerald-800 border-emerald-200',
    ongoing: 'bg-amber-100 text-amber-800 border-amber-200',
    live: 'bg-emerald-100 text-emerald-800 border-emerald-200 animate-pulse',
  };

  const dotColors = {
    complete: 'bg-emerald-500',
    ongoing: 'bg-amber-500',
    live: 'bg-emerald-500 animate-ping',
  };

  return (
    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-xs font-medium border ${styles[status]}`}>
      <span className={`w-1.5 h-1.5 rounded-full ${dotColors[status]}`} />
      {label}
    </span>
  );
};

Tree-Indented Content Structure

const TreeLine = ({ label, value, isLast = false }: TreeLineProps) => (
  <div className="font-mono text-sm text-gray-700">
    <span className="text-gray-400">{isLast ? '└─ ' : '├─ '}</span>
    <span className="text-gray-500">{label}:</span>
    <span className="ml-2">{value}</span>
  </div>
);

// Usage in expanded view:
<div className="bg-gray-50 border-l-4 border-emerald-400 pl-4 py-3">
  <TreeLine label="Date Requested" value="2024" />
  <TreeLine label="Status" value="Complete" />
  <TreeLine label="Methodology" value="Power BI dashboard..." isLast />
</div>

ExpandableRow with Framer Motion

const ExpandableRow = ({ 
  children, 
  expandedContent,
  isExpanded,
  onToggle 
}: ExpandableRowProps) => {
  return (
    <>
      <tr 
        onClick={onToggle}
        className="cursor-pointer hover:bg-gray-50 transition-colors"
      >
        {children}
      </tr>
      <AnimatePresence>
        {isExpanded && (
          <motion.tr
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2, ease: 'easeInOut' }}
          >
            <td colSpan={4} className="p-0 border-b">
              {expandedContent}
            </td>
          </motion.tr>
        )}
      </AnimatePresence>
    </>
  );
};

Document Type Icons

import { FileText, Award, GraduationCap, FlaskConical } from 'lucide-react';

const documentIcons = {
  certificate: FileText,
  registration: Award,
  academic: GraduationCap,
  research: FlaskConical,
};

const DocumentIcon = ({ type }: { type: keyof typeof documentIcons }) => {
  const Icon = documentIcons[type];
  return <Icon className="w-4 h-4 text-gray-500" />;
};

Mobile Card Layout

On mobile (<768px), both views switch to card layouts:

// Mobile: Card layout with vertical stacking
<div className="md:hidden space-y-3">
  {investigations.map((inv) => (
    <div key={inv.id} className="bg-white rounded border p-4">
      {/* Card content */}
    </div>
  ))}
</div>

// Desktop: Table layout
<table className="hidden md:table w-full">
  {/* Table content */}
</table>

Tech Stack Integration

• React 18 with TypeScript strict mode
• Tailwind CSS for all styling (no CSS-in-JS)
• Framer Motion 11 for expand/collapse animations
• Lucide React for document type icons
• Geist Mono font for tree-indented content (add to index.html)