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>

app/epd/clients/[id]/components/client-tabs.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { FileText, User, Target } from 'lucide-react';
+import { IntakeTab } from './intake-tab';
+import { ProfileTab } from './profile-tab';
+import { PlanTab } from './plan-tab';
+
+interface ClientTabsProps {
+  clientId: string;
+  activeTab?: string;
+}
+
+type TabId = 'intake' | 'profile' | 'plan';
+
+const tabs = [
+  {
+    id: 'intake' as TabId,
+    label: 'Intake',
+    icon: FileText,
+    description: 'Intake gesprekken en notities',
+  },
+  {
+    id: 'profile' as TabId,
+    label: 'Profiel',
+    icon: User,
+    description: 'Probleemprofielen en DSM categorieën',
+  },
+  {
+    id: 'plan' as TabId,
+    label: 'Behandelplan',
+    icon: Target,
+    description: 'Behandeldoelen en interventies',
+  },
+];
+
+export function ClientTabs({ clientId, activeTab }: ClientTabsProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [currentTab, setCurrentTab] = useState<TabId>(
+    (activeTab as TabId) || 'intake'
+  );
+
+  const handleTabChange = (tabId: TabId) => {
+    setCurrentTab(tabId);
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('tab', tabId);
+    router.push(`/epd/clients/${clientId}?${params.toString()}`);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Tab Navigation */}
+      <div className="bg-white rounded-lg border border-slate-200 p-1">
+        <div className="flex gap-1">
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            const isActive = currentTab === tab.id;
+
+            return (
+              <button
+                key={tab.id}
+                onClick={() => handleTabChange(tab.id)}
+                className={`
+                  flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md text-sm font-medium transition-all
+                  ${
+                    isActive
+                      ? 'bg-teal-50 text-teal-700 shadow-sm'
+                      : 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
+                  }
+                `}
+              >
+                <Icon className="h-4 w-4" />
+                <span className="hidden sm:inline">{tab.label}</span>
+                <span className="sm:hidden">{tab.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Tab Content */}
+      <div className="bg-white rounded-lg border border-slate-200">
+        {currentTab === 'intake' && <IntakeTab clientId={clientId} />}
+        {currentTab === 'profile' && <ProfileTab clientId={clientId} />}
+        {currentTab === 'plan' && <PlanTab clientId={clientId} />}
+      </div>
+    </div>
+  );
+}