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>
This commit is contained in:
colinislit
2025-11-19 21:03:43 +01:00
parent 2ae7b37e5f
commit 78e3019063
11 changed files with 869 additions and 51 deletions

27
app/epd/reports/page.tsx Normal file
View File

@@ -0,0 +1,27 @@
/**
* Behandelaar Rapportage - Level 1
*
* BI dashboards, KPI's en statistieken.
*/
export default function ReportsPage() {
return (
<div>
<h1 className="text-2xl font-bold text-slate-900 mb-6">
Rapportage
</h1>
<div className="bg-slate-100 border-2 border-dashed border-slate-300 rounded-lg p-12 text-center">
<p className="text-slate-600 text-lg mb-2">
Behandelaar Rapportage
</p>
<p className="text-slate-500 text-sm">
BI dashboards, KPI's, trends en statistieken
</p>
<p className="text-xs text-slate-400 mt-4">
Placeholder - Not designed yet
</p>
</div>
</div>
);
}