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>

app/(marketing)/documentatie/layout.tsx

@@ -6,7 +6,7 @@
 
 import type { ReactNode } from 'react'
 import { getAllReleases, getCategoryMetadata } from '@/lib/mdx/documentatie'
-import ReleaseSidebar from './components/release-sidebar-wrapper'
+import { ReleaseSidebar } from './components/release-sidebar'
 
 interface ReleasesLayoutProps {
   children: ReactNode

app/epd/clients/[id]/page.tsx

@@ -10,7 +10,7 @@ interface ClientDetailPageProps {
  * Wanneer een gebruiker direct naar /epd/clients/[id] navigeert,
  * wordt deze automatisch doorgestuurd naar het dashboard.
  */
-export default async function ClientDetailPage({
+export default async function ClientRedirect({
   params,
 }: ClientDetailPageProps) {
   const { id } = await params;

app/epd/components/epd-header.tsx

@@ -1,26 +1,54 @@
 "use client";
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Search, ChevronDown } from 'lucide-react';
 import { usePathname } from 'next/navigation';
+import { getClient } from '../clients/actions';
 
 interface EPDHeaderProps {
   className?: string;
 }
 
+interface ClientData {
+  id: string;
+  first_name: string;
+  last_name: string;
+  birth_date: string;
+}
+
 export function EPDHeader({ className = "" }: EPDHeaderProps) {
   const pathname = usePathname();
+  const [selectedClient, setSelectedClient] = useState<ClientData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   // 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
+  useEffect(() => {
-  // For now, hardcoded demo data
+    async function fetchClient() {
-  const selectedClient = clientId ? {
+      if (!clientId) {
-    name: "Bas Jansen",
+        setSelectedClient(null);
-    id: "CL0002",
+        return;
-    birthDate: "20-11-1992"
+      }
-  } : null;
+
+      // Don't re-fetch if we already have the correct client
+      if (selectedClient?.id === clientId) return;
+
+      setIsLoading(true);
+      try {
+        const client = await getClient(clientId);
+        if (client) {
+          setSelectedClient(client);
+        }
+      } catch (error) {
+        console.error('Failed to fetch client for header:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchClient();
+  }, [clientId, selectedClient?.id]);
 
   return (
     <header className={`h-[60px] bg-white border-b border-slate-200 flex items-center px-6 ${className}`}>
@@ -31,17 +59,23 @@ export function EPDHeader({ className = "" }: EPDHeaderProps) {
 
       {/* Center: Client Selector (only in Level 2) */}
       <div className="flex-1 flex justify-center">
-        {selectedClient && (
+        {(selectedClient || isLoading) && clientId && (
           <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">
+            {isLoading ? (
-              <span className="text-sm font-medium text-slate-900">
+              <div className="h-8 w-32 bg-slate-100 animate-pulse rounded" />
-                {selectedClient.name}
+            ) : selectedClient ? (
-              </span>
+              <>
-              <ChevronDown className="h-4 w-4 text-slate-400 group-hover:text-slate-600 transition-colors" />
+                <div className="flex items-center gap-1.5">
-            </div>
+                  <span className="text-sm font-medium text-slate-900">
-            <span className="text-xs text-slate-500">
+                    {selectedClient.first_name} {selectedClient.last_name}
-              ID: {selectedClient.id} | Geb: {selectedClient.birthDate}
+                  </span>
-            </span>
+                  <ChevronDown className="h-4 w-4 text-slate-400 group-hover:text-slate-600 transition-colors" />
+                </div>
+                <span className="text-xs text-slate-500">
+                  ID: {selectedClient.id.substring(0, 8)}... | Geb: {new Date(selectedClient.birth_date).toLocaleDateString('nl-NL')}
+                </span>
+              </>
+            ) : null}
           </button>
         )}
       </div>