admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mark Task 12 complete and update progress log

Browse Source
This commit is contained in:
A Charlwood
2026-02-11 02:28:40 +00:00
parent 4104dd32d8
commit 89e93b805e
2 changed files with 32 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Ralph/IMPLEMENTATION_PLAN.md
+1 -1
View File
@@ -151,7 +151,7 @@ src/
Create `src/components/views/DocumentsView.tsx`. Education presented as attached documents. Table: Type (icon), Document, Date, Source. Icons: FileText (certificates), Award (registrations), GraduationCap (academic), FlaskConical (research). 4 documents: MPharm (Hons) 2:1 UEA 2015, GPhC Registration 2016, Mary Seacole Programme 2018, A-Levels 2011 + Drug Delivery Research. Click to expand "preview" panel with tree-indented details: Type, Date Awarded, Institution, Classification, Duration, Research details, Notes. Consistent with Investigations expanded view style.
- [ ] **Task 12: Build ReferralsView with clinical referral form**
- [x] **Task 12: Build ReferralsView with clinical referral form**
Create `src/components/views/ReferralsView.tsx`. Contact presented as clinical referral form. Form fields: Referring to (pre-filled: CHARLWOOD, Andrew), NHS Number (pre-filled), Priority toggle (radio: Urgent [red], Routine [blue/selected], Two-Week Wait [amber] with tongue-in-cheek tooltips), Referrer Name/Email/Org inputs, Reason for Referral textarea, Contact Method radio (Email/Phone/LinkedIn). Submit button: NHS blue, full width right half. On submit: loading spinner, then success message with reference number (REF-2026-0210-001 format). Below form: Direct Contact table with Email, Phone, LinkedIn, Location as clickable links.
Ralph/progress.txt
+31
View File
@@ -364,3 +364,34 @@ This is a complete redesign of the CV presentation, moving from the ECG animatio
- Research documents show both detail and grade in same field with line break
- Tree-indented structure consistency across Investigations and Documents views
### Iteration 12 — Task 12: Build ReferralsView with clinical referral form
- **Completed**: Task 12 - Created ReferralsView with clinical referral form and direct contact section
- **Files created**:
- `src/components/views/ReferralsView.tsx` - Full Referrals view with form and contact table
- **Files modified**:
- `src/components/PMRInterface.tsx` - Added ReferralsView to renderView switch
- **Design decisions**:
- Form layout: two-column grid for patient info and referrer fields
- Pre-filled patient info: CHARLWOOD, Andrew (Mr); NHS Number: 221 181 0
- Priority radio buttons: Urgent (red), Routine (NHS blue, default), Two-Week Wait (amber)
- Tongue-in-cheek tooltips on priority options
- Form fields: Referrer Name (required), Referrer Email (required, validated), Referrer Org (optional), Reason (textarea)
- Contact method radio: Email, Phone, LinkedIn
- Submit button: NHS blue (#005EB8), loading spinner on submit
- Success state: green checkmark, reference number (REF-YYYY-MMDD-NNN), 24-48hr response message
- Direct Contact table below form: Email (mailto), Phone (tel), LinkedIn (external link), Location
- Form validation with inline error messages
- Input styling: 1px border-gray-300, 4px radius, 8px 12px padding, NHS blue focus ring
- **Accessibility**:
- Proper form labels with `htmlFor` associations
- Required field indicators (red asterisk)
- Error messages announced
- Radio buttons properly grouped with hidden inputs and visible styled indicators
- Respects `prefers-reduced-motion`: no animations
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
- **Learnings**:
- Form validation uses simple state-based approach with error objects
- Radio buttons styled with hidden `<input>` and custom styled `<span>` for visual control
- Reference number uses current date plus random sequence for uniqueness
- Direct Contact table uses same key-value layout as Patient Demographics card