Commit Graph

39 Commits

Author SHA1 Message Date
colinislit
d9340ba296 fix(overdracht): Filter op rapportages i.p.v. encounters + report types
Overdracht dashboard:
- Patiënten nu gefilterd op rapportages (laatste 24u) i.p.v. encounters
- Reports-block toont correcte type labels en kleuren

Rapportage module:
- Alle report types toegevoegd aan centrale lib/types/report.ts
- Quick actions met alle 8 rapportage types en icons
- Default type gewijzigd naar 'voortgang'

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-06 01:05:38 +01:00
colinislit
9e4e16035b feat(behandelplan): E3 UI componenten en documentatie updates
Behandelplan UI (E3):
- page-client.tsx: Client-side behandelplan pagina
- actions.ts: Server actions voor CRUD operaties
- behandelplan-view.tsx: Volledige behandelplan weergave
- behandelplan-list.tsx: Lijst van behandelplannen
- editable-section.tsx: Herbruikbare edit sectie component
- sections/: Goal, intervention en behandelstructuur forms

UI Componenten:
- components/ui/checkbox.tsx (shadcn)
- components/ui/input.tsx (shadcn)
- components/ui/select.tsx (shadcn)

Documentatie:
- agenda-systeem.mdx toegevoegd
- _index.json en metadata.json bijgewerkt

Dependencies:
- @radix-ui/react-checkbox toegevoegd

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-06 00:35:00 +01:00
colinislit
d965f69a9b feat(overdracht): E4 + E5 + E6 - Overdracht UI compleet
Epic 4 - Overdracht Overzicht:
- /epd/overdracht pagina met patiënten grid
- PatientCard component met alert badges
- Filter tabs (Alle patiënten / Met alerts)
- Responsive grid layout

Epic 5 - Overdracht Detail:
- /epd/overdracht/[patientId] pagina
- VitalsBlock: vitale functies met interpretatie kleuren
- ReportsBlock: rapportages laatste 24 uur
- NursingLogsBlock: gemarkeerde dagnotities
- RisksBlock: actieve risico's gesorteerd op niveau
- AISummaryBlock: Claude AI samenvatting met bronverwijzingen

Epic 6 - Integratie & Polish:
- Overdracht link in EPD sidebar
- Navigatie links dagregistratie <-> overdracht
- Build en type check passed

Bouwplan v1.3: alle 19 stories afgerond

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-06 00:33:49 +01:00
colinislit
d622ac8035 feat(overdracht): E2 + E3 - API overdracht en dagregistratie UI
Epic 2 - API Overdracht:
- GET /api/overdracht/patients (patiënten met alerts)
- GET /api/overdracht/[patientId] (detail met vitals, reports, logs, risks)
- POST /api/overdracht/generate (AI samenvatting met bronverwijzingen)
- lib/ai/overdracht-prompt.ts (system + user prompt)
- lib/types/overdracht.ts (TypeScript types)

Epic 3 - Dagregistratie UI:
- /epd/dagregistratie/[patientId] pagina
- Quick entry form (categorie, tijd, tekst, overdracht checkbox)
- Edit/Delete functionaliteit met inline editing
- Confirm delete dialog
- Summary cards (totaal, overdracht, incidenten)

Bouwplan bijgewerkt naar v1.2 (10/19 stories voltooid)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-06 00:18:06 +01:00
colinislit
8e8a8e6f49 Samenvatting van de fixes:
1. min-w-0 en box-border toegevoegd aan inputClassName en selectClassName - dit voorkomt dat inputs buiten hun
  grid-cellen groeien
  2. overflow-hidden toegevoegd aan de DialogContent - voorkomt dat content buiten de modal zichtbaar is
  3. overflow-hidden toegevoegd aan het form element
  4. Grid layout verbeterd voor datum/tijd: grid-cols-[1fr_auto_auto] met vaste breedte (w-24) voor de tijd inputs,
  zodat de datum meer ruimte krijgt
  5. min-w-0 toegevoegd aan alle grid children voor Type/Locatie

  Deze wijzigingen zorgen ervoor dat:
  - Invoervelden nooit buiten hun containers groeien
  - De modal content netjes binnen de grenzen blijft
  - De datum input meer ruimte krijgt dan de tijd inputs
  - Select dropdowns niet overflow veroorzaken
2025-12-03 17:02:27 +01:00
colinislit
56c4f1cedc git minicalender-view, improved agenda-view 2025-12-03 14:30:40 +01:00
colinislit
b7b5a0888b feat(agenda): Epic 4 - EPD Koppeling (appointment-report integration)
Implements bidirectional linking between appointments and reports:
- E4.S1: Create report from appointment modal with encounter pre-linked
- E4.S2: Link existing reports to appointments via EncounterSelector
- E4.S3: Show linked reports in appointment modal edit view
- E4.S4: Navigation between appointments and reports with deep linking

Also includes bug fixes for patient search:
- Fix FHIR to internal format mapping for patient data
- Fix debounced search interference after patient selection
- Fix UUID handling for optional practitioner_id

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-02 19:34:07 +01:00
colinislit
e661c97491 feat(agenda): Epic 1 - Calendar views with FullCalendar
- E1.S1: FullCalendar setup with React wrapper
- E1.S2: Day view (timeGridDay) with hourly slots
- E1.S3: Week view (timeGridWeek) with 7-day grid
- E1.S4: Workweek view (timeGridWorkWeek, Mon-Fri)

Features:
- View switcher toolbar (Dag/Week/Werkweek)
- Date navigation (prev/next/today)
- Dutch localization (nl)
- Business hours highlighting (08:00-18:00)
- Color-coded appointments by type
- Drag-and-drop rescheduling support
- Server actions for encounter CRUD

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-02 17:13:55 +01:00
colinislit
1782809599 feat: integrate docs chat widget in EPD layout (E4)
- Add DocsChatWidget to epd-layout-client.tsx
- Widget now visible for all authenticated EPD users
- Update bouwplan status: all epics complete

Completes AI Documentatie Assistent feature (E0-E4, 12 stories)

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 15:51:00 +01:00
colinislit
56b66ae6ff feat: improve streaming mic and deepgram token handling 2025-11-25 22:53:04 +01:00
colinislit
779ab85e5d feat: improve rapportage composer UX with TipTap editor
UI improvements based on UX review:
- Replace textarea with TipTap rich text editor
- Add mic button in editor toolbar (collapsible recorder)
- Remove duplicate type selection (keep only quick action buttons)
- Remove redundant "Nieuwe rapportage:" label
- Add streaming highlight on editor border during recording
- Extend RichTextEditor with toolbarExtra, isStreaming props

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 14:46:03 +01:00
colinislit
dce3943963 feat: rapportage UI refactor, speech streaming, docs & seed data
Rapportage:
- Refactor workspace into modular components (quick-actions, timeline-card, timeline-sidebar)
- Add updateReport action for inline editing
- Improve report timeline with better UX

Speech:
- Add Deepgram token API endpoint
- Add use-deepgram-streaming hook
- Add confidence-text component

Docs:
- Add architecture documentation
- Add performance optimization plan
- Add speech specs and seed data docs

Scripts & Data:
- Add seed-reports script and migration
- Update AGENTS.md guidelines

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 14:07:08 +01:00
colinislit
f7e33d0335 perf: optimize menu and navigation response time
- Add React.memo + useMemo/useCallback to EPD sidebar, header, and tabs
- Prevent unnecessary re-renders on pathname changes
- Fix context reset causing UI flashing during navigation
- Target: <250ms menu response (was ~260ms)

Files: epd-sidebar, epd-header, patient-context, intake-tabs

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 14:05:58 +01:00
colinislit
7033329e0f feat: add speech telemetry and bundle guard 2025-11-25 13:37:00 +01:00
colinislit
b6c5d1a6d3 fix: resolve build errors for Vercel deployment
TypeScript and ESLint fixes:
- Fixed unescaped quotes in report-timeline.tsx (ESLint error)
- Restored database.types.ts from git history (was empty)
- Added reports table type definition to database.types.ts
- Fixed missing getCookieHeader import in intakes/actions.ts
- Fixed use-media-query.ts ternary operator (TypeScript error)
- Simplified z.enum() in report.ts (removed unsupported error options)

All type checking and linting now passes successfully.
Build tested locally and ready for Vercel deployment.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-24 14:37:36 +01:00
colinislit
a789bebe96 feat: rapportage API, speech recorder refactor, docs reorganisatie
Multiple features and improvements:

Reports/Rapportage API:
- Created REST API endpoints: /api/reports (GET/POST), /api/reports/[id] (GET/PATCH/DELETE)
- Added /api/reports/classify endpoint for AI classification
- Supabase migrations: reports table + RLS policies
- Server utilities: api-client.ts for DRY fetch logic
- Type definitions: lib/types/report.ts with Zod schemas
- Removed old rapportage-modal component (replaced by split-view)

Speech Recorder Refactor:
- Moved speech-recorder from intake-specific to shared components/
- Updated treatment-advice-form to use new location
- Updated intake actions for speech functionality

UI Components (shadcn):
- Added dialog, dropdown-menu, toast, toaster components
- Added use-toast hook for toast notifications

Documentation:
- Reorganized docs/release/ → docs/reports/ for better structure
- Archived old specs to docs/specs/archive/
- Added screening-system.mdx documentation
- Added rapportage-split-view-design.md
- Added UI screenshots for troubleshooting

Dependencies:
- Updated package.json and pnpm-lock.yaml
- Regenerated database.types.ts from Supabase

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-24 14:14:06 +01:00
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
ce2e08449d feat: wrap rapportage split view and add qa plan 2025-11-23 21:46:07 +01:00
colinislit
9e4dff615f fix: restore PatientLayoutClient for split-view compatibility
Adapted cleanup to work with split-view rapportage refactor.

Split-view refactor replaced modal flow with dual-pane workspace:
- Composer is now on the rapportage page itself (no modal)
- "Nieuwe rapportage" button scrolls to #rapportage-composer
- Timeline and composer visible simultaneously

Changes:
- Recreated PatientLayoutClient WITHOUT RapportageModal
- Kept ClientHeader with focusElementId prop for scroll navigation
- Kept layout.tsx using PatientLayoutClient wrapper
- ClientSidebar removal still valid (EPDSidebar handles navigation)

Result: Clean codebase compatible with split-view design

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:43:32 +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
50dc2a57d7 refactor: remove duplicate ClientSidebar component
Bug fix: Dubbele sidebar verwijderd in patient detail routes.

ClientSidebar was een duplicate van EPDSidebar's Level 2 navigatie.
EPDSidebar is al context-aware en switcht automatisch tussen Level 1
(behandelaar context) en Level 2 (patient context) navigatie.

Changes:
- Removed: ClientSidebar component (117 lines duplicate code)
- Removed: EPDLayoutClient wrapper (conditional sidebar hiding)
- Simplified: Patient detail layout uses only PatientLayoutClient
- Restored: EPD layout to direct EPDSidebar rendering

Result: Single sidebar component, -117 lines code, DRY principle restored

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:22:15 +01:00
colinislit
24c43a693d feat: round out rapportage epic 2025-11-23 20:20:03 +01:00
colinislit
ab2bec1260 fix: resolve TypeScript type errors across application
Fixed multiple TypeScript compilation errors that blocked production build:

Component Type Fixes:
- client-sidebar.tsx: Changed icon type from React.ElementType to
  React.ComponentType<{ className?: string }> for proper prop typing
- patient-form.tsx: Added type casting for FHIR extension property access
- page.tsx: Added explicit Intake[] type annotation
- document-card.tsx: Added null check for file_size property
- rich-text-editor.tsx: Removed invalid false parameter from setContent()

Data Model Fixes:
- actions.ts (intakes): Changed encounter status 'finished' to 'completed'
  (FHIR-compliant value)
- actions.ts (intakes): Set diagnosis clinical_status to always use 'active'
- actions.ts (intakes): Cast treatment_advice to Record<string, any>

Schema Extensions:
- lib/fhir/types/index.ts: Added extension property to FHIRPatient interface
  to support custom FHIR extensions (john-doe, insurance, GP, episode-status)

Validation Fixes:
- lib/types/intake.ts: Fixed Zod enum errorMap syntax (changed to message)

All changes ensure type safety while maintaining runtime functionality.
Build now completes successfully with zero TypeScript errors.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 12:20:14 +01:00
colinislit
00ca026382 fix: stabilize build and archive configs 2025-11-23 11:42:40 +01:00
colinislit
c12063d58d fix: escape lint strings and add intake table types 2025-11-23 11:03:17 +01:00
colinislit
6fcb9a0e7b feat: migrate clients module to patients + add docs 2025-11-23 10:13:00 +01:00
colinislit
9dac485e8e feat: implement client header and navigation (E2.S3)
Epic 2 - Cliëntenbeheer: Complete Level 2 navigation structure with
context-aware header and sidebar for patient dossier.

E2.S3 - Cliënt Header & Nav:
- Create ClientHeader component showing:
  * Full patient name with prefix support
  * Color-coded status badge (screening/actief/afgerond/afgemeld)
  * Last modified timestamp (Dutch format)
  * John Doe indicator badge
  * Patient ID (subtle display)
- Create ClientSidebar navigation component with:
  * Back button to patient list
  * Navigation items for all tabs (always visible)
  * Active state highlighting
  * Icon support for each tab
- Create patient detail layout wrapper:
  * Combines header and sidebar
  * Full-height flex layout
  * Scrollable main content area
- Update patient detail page to dashboard view:
  * Quick action cards for Basisgegevens, Screening, Intake
  * Next steps guide for workflow
  * Remove old edit-only view
- Create Basisgegevens tab page:
  * Patient form for editing
  * John Doe warning for incomplete registrations
  * Pre-populated with existing data
- Create placeholder pages for future epics:
  * Screening (Epic 3)
  * Intake (Epic 4)
  * Diagnose (Epic 6)
  * Behandelplan (future)
  * Rapportage (future)

Technical implementation:
- app/epd/patients/[id]/components/client-header.tsx: New
- app/epd/patients/[id]/components/client-sidebar.tsx: New
- app/epd/patients/[id]/layout.tsx: New
- app/epd/patients/[id]/page.tsx: Completely rewritten as dashboard
- app/epd/patients/[id]/basisgegevens/page.tsx: New
- app/epd/patients/[id]/screening/page.tsx: New placeholder
- app/epd/patients/[id]/intake/page.tsx: New placeholder
- app/epd/patients/[id]/diagnose/page.tsx: New placeholder
- app/epd/patients/[id]/behandelplan/page.tsx: New placeholder
- app/epd/patients/[id]/rapportage/page.tsx: New placeholder
- docs/specs/screening-intake/bouwplan-screening-intake-v1.0.md: Updated

Epic 2 is now complete with all 3 stories implemented!

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-22 14:09:16 +01:00
colinislit
88440b7ac8 feat(intake): implement epic 4 intake core (overview, new flow, layout) 2025-11-22 14:03:22 +01:00
colinislit
86995a4466 feat: implement patient list and new patient form (E2.S1 & E2.S2)
Epic 2 - Cliëntenbeheer: Complete implementation of patient list with
search/filter functionality and comprehensive new patient form with
John Doe crisis admission support.

E2.S1 - Cliëntenlijst:
- Add client-side search bar with form submission
- Implement status filter dropdown (all/screening/active/finished/cancelled)
- Create StatusBadge component with color-coded status indicators
- Update table columns: Status, Name, BSN, Last Updated
- Add status filtering support to FHIR Patient API route
- Update FHIR patient transform to include episode-status extension
- Sort patients by updated_at descending (newest first)

E2.S2 - Nieuwe Cliënt Flow:
- Complete rewrite of patient form with all FO-required fields
- Implement John Doe checkbox with conditional BSN requirement
- Add BSN validation with Dutch Modulo-11 check algorithm
- Add comprehensive form fields:
  * Name fields: prefix, given name, family name
  * BSN with 9-digit pattern validation
  * Birth date with max date validation
  * Gender selection
  * Address: street, postal code, city
  * Contact: phone, email
  * Insurance: company, policy number
- Add warning messages for John Doe crisis admissions
- Set default episode status to 'planned' for all new patients
- Redirect to patient detail page after successful creation
- Update FHIR transform bidirectional insurance extension support:
  * dbPatientToFHIR: serialize insurance to JSON extension
  * fhirPatientToDB: parse insurance from JSON extension
- Pre-populate form fields when editing existing patients

Technical changes:
- app/api/fhir/Patient/route.ts: Add status query param and sorting
- app/epd/patients/actions.ts: Add status filter parameter
- app/epd/patients/page.tsx: Pass status searchParam
- app/epd/patients/components/patient-list.tsx: Complete UI rewrite
- app/epd/patients/components/patient-form.tsx: Complete form rewrite
- lib/fhir/transforms/patient.ts: Add insurance extension handling
- docs/specs/screening-intake/bouwplan-screening-intake-v1.0.md: Update status

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-22 13:58:31 +01:00
colinislit
d5c6cf208b FHIR, API, datamodel 2025-11-21 22:32:29 +01:00
colinislit
5f7ef0801d bento-grid login page, mobile friendly docs page 2025-11-20 20:14:29 +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
4b71c4a615 clientlist selectie & dashboardpage 2025-11-19 23:19:56 +01:00
colinislit
e9f4ffc297 feat: add comprehensive documentation and client dashboard
- Rename releases.ts to documentatie.ts for better naming
- Add 'use client' directives to UI components for client-side rendering
- Add new documentation pages for features:
  - Client Management (CRUD operations)
  - Intake System (AI-powered intake analysis)
  - Treatment Planning (SMART goals and progress tracking)
  - Verpleegkundige Overdracht (nursing handover with ROM measurements)
  - Voice-Controlled Reporting (AI-driven speech recording)
  - Interface Design System (complete UI/UX specifications)
  - Build Errors Fix (troubleshooting guide)
- Add client dashboard page with route structure
- Update documentation index with new categories and planned features
- Refactor BentoCard to use native anchor tags instead of Button component

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-19 22:48:41 +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
00f7452d54 Add client detail pages with tabbed interface (E1.S6)
Implements comprehensive client detail view with three tabs:
Profile, Intake, and Treatment Plan. Improves UX by redirecting
to client detail after create/edit instead of list view.

## New Files

### Client Detail Page (app/epd/clients/[id]/page.tsx)
- Server component with async params/searchParams
- Breadcrumb navigation back to clients list
- Client header with name, age, BSN, status badge
- Tab navigation for Profile, Intake, Plan
- Edit button linking to edit page

### Tab Components (app/epd/clients/[id]/components/)
- client-tabs.tsx: Tab navigation wrapper with search params
- profile-tab.tsx: Client demographic info, contact details
- intake-tab.tsx: Coming Soon - Week 3 feature preview
- plan-tab.tsx: Coming Soon - Week 3 feature preview

### Edit Page (app/epd/clients/[id]/edit/page.tsx)
- Reuses ClientForm component
- Breadcrumb navigation back to client detail

## Modified Files

### Client Form (app/epd/clients/components/client-form.tsx)
- IMPROVED UX: Redirect to /epd/clients/{id} after save
- Previously redirected to list view (/epd/clients)
- Better flow: Create → Detail view, Edit → Back to detail
- Captures new client ID from createClient() for redirect

## Features
- Tabbed interface with query params (?tab=profile|intake|plan)
- Professional header with status badges
- Breadcrumb navigation throughout
- Coming Soon placeholders for Week 3 features
- Consistent slate-based color scheme (no teal overload)

Part of Epic 1, Story 6 (E1.S6) - Client Detail View

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 19:50:47 +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