colin/triqura-ecd
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
70 Commits 1 Branch 0 Tags
0130e28f1ef90626b61cbcdf4b457a21f14e7115
Commit Graph

8 Commits

Author SHA1 Message Date
colinislit
0130e28f1e feat: move patient info to top header with React Context 
Refactored patient display from separate ClientHeader to integrated EPDHeader.

Architecture changes:
- Implemented React Context pattern for patient data sharing
- Created PatientContext with useState + setPatient for dynamic updates
- Created useSetPatient hook for patient injection from nested layouts
- Created EPDLayoutClient wrapper with PatientProvider
- Context flow: EPDLayout → EPDLayoutClient → EPDHeader (consumer)

UI improvements:
- Removed "Mini-ECD" logo from header
- Left-aligned patient info: name + status + John Doe indicator
- Added geboortedatum (dd-mm-yyyy Dutch format)
- Added BSN extraction from FHIR identifiers
- Compact layout: Patient details | Timestamp | Actions ⋮ | Search
- Actions dropdown with "Nieuwe rapportage" (expandable)

Cleanup:
- Deleted ClientHeader component (141 lines duplicate code)
- Simplified PatientLayoutClient (only useSetPatient hook)
- Single source of truth for patient display

Result: Clean context-based architecture, improved UX, -141 LOC

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-24 14:11:35 +01:00
colinislit
b30f8edf19 fix: remove duplicate patient name from EPDHeader 
Bug fix: Dubbele patient naam verwijderd (EPDHeader + ClientHeader).

Design conflict ontstaan tijdens parallel development:
- Epic 1: EPDHeader kreeg patient selector (naam, ID, geb.datum)
- Epic 2: ClientHeader toegevoegd met volledige patient context
- Resultaat: Patient naam werd twee keer getoond

Changes:
- Removed: Patient selector UI from EPDHeader center section
- Removed: Patient fetch logic (useState, useEffect)
- Removed: Unused imports (ChevronDown, usePathname, getPatient)
- Simplified: EPDHeader from 91 to 34 lines (-57 lines)

Component ownership clarified:
- EPDHeader = General navigation (logo, search)
- ClientHeader = Patient context (name, status, actions)

Result: Clean separation of concerns, no duplicate patient info

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-23 20:33:37 +01:00
colinislit
6fcb9a0e7b feat: migrate clients module to patients + add docs 2025-11-23 10:13:00 +01:00
colinislit
a167bdcc6e feat: enhance EPD header with dynamic client data fetching 
- Update EPD header to fetch and display real client data from database
- Add loading state while fetching client information
- Improve client name and birth date formatting
- Rename ClientDetailPage component to ClientRedirect for clarity
- Fix import path for ReleaseSidebar in documentation layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-20 00:12:01 +01:00
colinislit
78e3019063 Epic 1: Implement two-level EPD layout and navigation 
Implemented complete two-level navigation system with context-aware
sidebar and header components.

## Changes

### Layout (E1.S1)
- Add fixed header (60px) to EPD layout
- Maintain fixed sidebar (240px)
- Add scrollable main content area with padding

### Context-Aware Sidebar (E1.S2)
- Level 1 (Behandelaar): Dashboard | Cliënten | Agenda | Rapportage
- Level 2 (Client Dossier): ← Cliënten | Dashboard | Intake | Diagnose | Behandelplan | Rapportage
- URL-based context detection (/epd/clients/[id])
- Dynamic menu switching with back button in Level 2

### Context-Aware Header (E1.S3)
- Logo left, search right (both levels)
- Client selector center (Level 2 only)
- Shows client name, ID, and birthdate
- Dropdown icon for future client switching

### Routes & Placeholders (E1.S4)
- Level 1: /epd/dashboard, /epd/agenda, /epd/reports
- Level 2: /epd/clients/[id]/intake, diagnose, plan, reports
- All placeholder pages with clear Epic indicators

### Documentation
- Add comprehensive bouwplan: docs/specs/UI/bouwplan-mini-epd-v1.0.md
- 7 Epics with detailed stories and tech notes

### Fixes
- Fix MDX component type import for build

🚀 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-19 21:03:43 +01:00
colinislit
6de5166373 logout - sidebar 2025-11-19 15:43:02 +01:00
colinislit
146c7041f8 UX refinements: Color strategy + Hero Section 2 implementation 
## Color Strategy: "Dark Elegance with Innovation Sparks"

Reduced teal usage from ~30% to ~5% as strategic AI/innovation accent.
Introduced amber for speed/performance metrics. Slate foundation for
professional, calm aesthetic suitable for healthcare EPD application.

### Login Page (app/login/page.tsx)
- Bento grid: Color variety (teal=AI, amber=speed, blue/indigo=general)
- Stats footer: Amber for time metrics (90%+, <5 sec), slate for build time
- Focus rings: teal-500 → slate-400 (subtle, professional)
- Clock icon for time savings feature

### Homepage (app/(marketing)/page.tsx)
- CTA background: teal-50 → slate-50 (calm, elegant)
- Teal CTA button remains (strategic conversion accent)
- NEW: Hero Section 2 implementation with:
  - Split-screen layout (60% content, 40% background image)
  - Framer Motion animations (staggered reveal + clip-path)
  - Logo, slogan, title with teal accent, CTA, contact footer
  - Tech-themed Unsplash background image

### EPD Sidebar (app/epd/components/epd-sidebar.tsx)
- Kept LIGHT theme (white/slate-50) - suitable for long EPD sessions
- Active states: teal-50 → slate-100 (professional, not distracting)
- Navigation: Subtle slate colors, not teal
- Teal AI logo only (innovation marker)
- Slate avatar (neutral, professional)

### New Files
- app/(marketing)/components/hero-section-client.tsx
  Client wrapper for HeroSection (framer-motion compatibility)

## Result
- Teal is now meaningful AI/innovation signal (not decorative)
- Amber signals speed ("aispeedrun.nl" brand alignment)
- Slate provides professional foundation for EPD context
- Build succeeds ✅

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-17 19:48:54 +01:00
colinislit
b7d19a8e1a feat: Epic 1 completion - Marketing refactor met timeline en Bento Grid login 
Epic 1 Stories (E1.S1 t/m E1.S6):

✨ E1.S1 - Verwijder EPD demo pagina
- Removed /epd route en credentials-box component
- Updated navigation: EPD Prototype → Login link
- Removed demo_users references from middleware en auth libs
- Cleaned up TypeScript errors in hero-section-2

✨ E1.S2 - Homepage vereenvoudigen
- Replaced lange manifesto (8000+ woorden) met statement section
- Added problem-solution-proof format (3 paragrafen)
- Removed comparison table, experiment CTA, manifesto content
- Timeline placeholder toegevoegd (completed in E1.S3)

✨ E1.S3 - Timeline component integreren
- Created BuildTimeline component (Aceternity UI pattern)
- Added timeline.json met 4 weken data (Week 1 completed)
- Features per week met icons, metrics, achievements
- Scroll-based animation met Framer Motion
- Responsive design (sticky titles, mobile/desktop layouts)

✨ E1.S4 - Timeline content structuur
- Structured JSON data in content/nl/timeline.json
- 15 Lucide icons voor feature types
- Week status badges (completed/in_progress/planned)
- Time savings display (< 5 sec vs 30 min)

✨ E1.S5 - Login pagina refactor
- Split-screen layout (60% features, 40% login)
- Teal gradient showcase met 4 feature cards
- Time savings badges per feature
- Responsive stack layout voor mobile
- Footer met AI Speedrun branding

✨ E1.S6 - Bento Grid showcase
- Replaced feature grid met Bento Grid layout
- Variable card sizes voor visual hierarchy (col-span-2, col-span-1)
- Dark slate background (from-slate-900)
- Gradient backgrounds per card (teal, amber, purple)
- Stats footer met 3 key metrics (90%+, < 5 sec, 4 weken)
- Hover animations en glassmorphism effects

🎨 Design System:
- Teal-first brand colors (#0D9488)
- Amber accents voor AI features (#F59E0B)
- Slate scale voor neutral colors
- WCAG AA compliant contrast

📦 Components:
- BuildTimeline (app/(marketing)/components)
- BentoGrid & BentoCard (components/ui)
- Button variants (components/ui)

📄 Content:
- timeline.json met volledige 4-weken data
- Features array per week
- Metrics en achievements tracking

🔧 Technical:
- Removed demo user scripts en migrations
- Updated middleware routes (removed /epd)
- TypeScript type fixes (hero-section-2, auth)
- Build succesvol: 13 routes generated

🚀 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-17 19:22:49 +01:00