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>

app/epd/components/epd-header.tsx

@@ -1,53 +1,60 @@
 "use client";
 import React from 'react';
-import { Bell, Search } from 'lucide-react';
+import { Search, ChevronDown } from 'lucide-react';
+import { usePathname } from 'next/navigation';
 
 interface EPDHeaderProps {
-  title?: string;
-  subtitle?: string;
+  className?: string;
 }
 
-export function EPDHeader({ title, subtitle }: EPDHeaderProps) {
+export function EPDHeader({ className = "" }: EPDHeaderProps) {
+  const pathname = usePathname();
+
+  // Context detection: Level 2 if URL contains /clients/[id]
+  const isClientContext = pathname.match(/\/epd\/clients\/[^\/]+/);
+  const clientId = isClientContext ? pathname.split('/')[3] : null;
+
+  // TODO: Fetch actual client data based on clientId
+  // For now, hardcoded demo data
+  const selectedClient = clientId ? {
+    name: "Bas Jansen",
+    id: "CL0002",
+    birthDate: "20-11-1992"
+  } : null;
+
   return (
-    <header className="sticky top-0 z-20 bg-white border-b border-slate-200 shadow-sm">
-      <div className="px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
-        {/* Left: Page Title */}
-        <div className="flex-1">
-          {title && (
-            <div>
-              <h1 className="text-lg font-semibold text-slate-900">
-                {title}
-              </h1>
-              {subtitle && (
-                <p className="text-xs text-slate-500 mt-0.5">
-                  {subtitle}
-                </p>
-              )}
+    <header className={`h-[60px] bg-white border-b border-slate-200 flex items-center px-6 ${className}`}>
+      {/* Left: Logo */}
+      <div className="flex items-center">
+        <span className="text-base font-medium text-slate-800">Mini-ECD</span>
+      </div>
+
+      {/* Center: Client Selector (only in Level 2) */}
+      <div className="flex-1 flex justify-center">
+        {selectedClient && (
+          <button className="flex flex-col items-center px-4 py-1 hover:bg-slate-50 rounded-md transition-colors group">
+            <div className="flex items-center gap-1.5">
+              <span className="text-sm font-medium text-slate-900">
+                {selectedClient.name}
+              </span>
+              <ChevronDown className="h-4 w-4 text-slate-400 group-hover:text-slate-600 transition-colors" />
             </div>
-          )}
-        </div>
-
-        {/* Right: Search & Notifications */}
-        <div className="flex items-center gap-3">
-          {/* Search Bar - Hidden on mobile */}
-          <div className="hidden md:block relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
-            <input
-              type="text"
-              placeholder="Zoeken..."
-              className="w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
-            />
-          </div>
-
-          {/* Notifications */}
-          <button
-            className="relative p-2 text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-colors"
-            aria-label="Notificaties"
-          >
-            <Bell className="h-5 w-5" />
-            {/* Notification badge */}
-            <span className="absolute top-1 right-1 h-2 w-2 bg-red-500 rounded-full" />
+            <span className="text-xs text-slate-500">
+              ID: {selectedClient.id} | Geb: {selectedClient.birthDate}
+            </span>
           </button>
+        )}
+      </div>
+
+      {/* Right: Search */}
+      <div className="flex items-center">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
+          <input
+            type="text"
+            placeholder="Zoek cliënt..."
+            className="w-64 pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all duration-200"
+          />
         </div>
       </div>
     </header>