feat: migrate clients module to patients + add docs

app/epd/_archive/clients_backup_20251122/[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>
+  );
+}

app/epd/_archive/clients_backup_20251122/[id]/components/intake-tab.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Plus } from 'lucide-react';
+import Link from 'next/link';
+import { getIntakesByClientId, Intake } from '../intakes/actions';
+import { IntakeList } from '../intakes/components/intake-list';
+
+interface IntakeTabProps {
+  clientId: string;
+}
+
+export function IntakeTab({ clientId }: IntakeTabProps) {
+  const [intakes, setIntakes] = useState<Intake[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchIntakes() {
+      try {
+        const data = await getIntakesByClientId(clientId);
+        setIntakes(data);
+      } catch (error) {
+        console.error('Failed to fetch intakes:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchIntakes();
+  }, [clientId]);
+
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-lg font-semibold text-slate-900">
+            Intakes
+          </h2>
+          <p className="text-sm text-slate-600 mt-1">
+            Overzicht van alle intakes
+          </p>
+        </div>
+        <Link
+          href={`/epd/clients/${clientId}/intakes/new`}
+          className="inline-flex items-center gap-2 px-4 py-2 bg-teal-600 text-white font-medium rounded-lg hover:bg-teal-700 transition-colors"
+        >
+          <Plus className="h-4 w-4" />
+          <span>Nieuwe Intake</span>
+        </Link>
+      </div>
+
+      <IntakeList intakes={intakes} clientId={clientId} isLoading={isLoading} />
+    </div>
+  );
+}

app/epd/_archive/clients_backup_20251122/[id]/components/plan-tab.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { Target, Sparkles, Clock } from 'lucide-react';
+
+interface PlanTabProps {
+  clientId: string;
+}
+
+export function PlanTab({ clientId }: PlanTabProps) {
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-lg font-semibold text-slate-900">
+            Behandelplan
+          </h2>
+          <p className="text-sm text-slate-600 mt-1">
+            SMART doelen en interventies
+          </p>
+        </div>
+        <button
+          disabled
+          className="inline-flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-400 font-medium rounded-lg cursor-not-allowed"
+          title="Beschikbaar in Week 3"
+        >
+          <Sparkles className="h-4 w-4" />
+          <span>Genereer Plan</span>
+        </button>
+      </div>
+
+      {/* Coming Soon State */}
+      <div className="py-12 text-center">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-amber-50 mb-4">
+          <Target className="h-8 w-8 text-amber-500" />
+        </div>
+        <h3 className="text-lg font-semibold text-slate-900 mb-2">
+          Coming Soon - Week 3
+        </h3>
+        <p className="text-sm text-slate-600 max-w-md mx-auto mb-6">
+          AI-gegenereerde behandelplannen met SMART doelen en evidence-based
+          interventies worden toegevoegd in Week 3.
+        </p>
+
+        {/* Feature Preview */}
+        <div className="max-w-2xl mx-auto">
+          <div className="bg-slate-50 rounded-lg border border-slate-200 p-6 text-left">
+            <h4 className="font-medium text-slate-900 mb-3">
+              🎯 Plan Structuur:
+            </h4>
+            <div className="space-y-4">
+              {/* SMART Doelen */}
+              <div className="p-4 bg-white rounded-lg border border-slate-200">
+                <h5 className="font-medium text-slate-800 mb-2">
+                  1. SMART Doelen
+                </h5>
+                <p className="text-sm text-slate-600">
+                  Specifieke, Meetbare, Acceptabele, Realistische en
+                  Tijdgebonden behandeldoelen
+                </p>
+              </div>
+
+              {/* Interventies */}
+              <div className="p-4 bg-white rounded-lg border border-slate-200">
+                <h5 className="font-medium text-slate-800 mb-2">
+                  2. Interventies
+                </h5>
+                <p className="text-sm text-slate-600">
+                  Evidence-based behandelmethoden (CGT, ACT, EMDR, etc.)
+                </p>
+              </div>
+
+              {/* Frequentie */}
+              <div className="p-4 bg-white rounded-lg border border-slate-200">
+                <h5 className="font-medium text-slate-800 mb-2">
+                  3. Frequentie
+                </h5>
+                <p className="text-sm text-slate-600">
+                  Sessie planning en behandelintensiteit
+                </p>
+              </div>
+
+              {/* Meetmomenten */}
+              <div className="p-4 bg-white rounded-lg border border-slate-200">
+                <h5 className="font-medium text-slate-800 mb-2">
+                  4. Meetmomenten
+                </h5>
+                <p className="text-sm text-slate-600">
+                  Evaluatie en voortgangsmetingen
+                </p>
+              </div>
+            </div>
+
+            <h4 className="font-medium text-slate-900 mb-3 mt-6">
+              ✨ Geplande Features:
+            </h4>
+            <ul className="space-y-2 text-sm text-slate-700">
+              <li className="flex items-start gap-2">
+                <span className="text-teal-600 font-bold">✓</span>
+                <span>
+                  <strong>AI Plan Generator</strong> - Gebaseerd op intake +
+                  profiel
+                </span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-teal-600 font-bold">✓</span>
+                <span>
+                  <strong>Versioning</strong> - Meerdere versies per cliënt
+                </span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-teal-600 font-bold">✓</span>
+                <span>
+                  <strong>Status Tracking</strong> - Concept vs. Gepubliceerd
+                </span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-teal-600 font-bold">✓</span>
+                <span>
+                  <strong>JSONB Opslag</strong> - Flexibele datastructuur
+                </span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-teal-600 font-bold">✓</span>
+                <span>
+                  <strong>Export Functie</strong> - PDF generatie voor dossier
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Timeline Preview */}
+        <div className="mt-8 inline-flex items-center gap-2 px-4 py-2 bg-teal-50 border border-teal-200 rounded-full text-sm">
+          <Clock className="h-4 w-4 text-teal-600" />
+          <span className="text-teal-800">
+            <strong>Week 3:</strong> 18-24 November 2024
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

app/epd/_archive/clients_backup_20251122/[id]/components/profile-tab.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { User, Brain, Clock } from 'lucide-react';
+
+interface ProfileTabProps {
+  clientId: string;
+}
+
+export function ProfileTab({ clientId }: ProfileTabProps) {
+  return (
+    <div className="p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-lg font-semibold text-slate-900">
+            Probleemprofiel
+          </h2>
+          <p className="text-sm text-slate-600 mt-1">
+            DSM-light categorisatie en ernst indicatie
+          </p>
+        </div>
+        <button
+          disabled
+          className="inline-flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-400 font-medium rounded-lg cursor-not-allowed"
+          title="Beschikbaar in Week 3"
+        >
+          <Brain className="h-4 w-4" />
+          <span>AI Analyse</span>
+        </button>
+      </div>
+
+      {/* Coming Soon State */}
+      <div className="py-12 text-center">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-amber-50 mb-4">
+          <User className="h-8 w-8 text-amber-500" />
+        </div>
+        <h3 className="text-lg font-semibold text-slate-900 mb-2">
+          Coming Soon - Week 3
+        </h3>
+        <p className="text-sm text-slate-600 max-w-md mx-auto mb-6">
+          AI-gestuurde probleemclassificatie met DSM-light categorieën wordt
+          toegevoegd in Week 3.
+        </p>
+
+        {/* Feature Preview */}
+        <div className="max-w-2xl mx-auto">
+          <div className="bg-slate-50 rounded-lg border border-slate-200 p-6 text-left">
+            <h4 className="font-medium text-slate-900 mb-3">
+              🎯 DSM-light Categorieën:
+            </h4>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
+              <div className="flex items-center gap-2 p-3 bg-white rounded-lg border border-slate-200">
+                <div className="h-2 w-2 rounded-full bg-blue-500" />
+                <span className="text-slate-700">Stemming & Depressie</span>
+              </div>
+              <div className="flex items-center gap-2 p-3 bg-white rounded-lg border border-slate-200">
+                <div className="h-2 w-2 rounded-full bg-purple-500" />
+                <span className="text-slate-700">Angst</span>
+              </div>
+              <div className="flex items-center gap-2 p-3 bg-white rounded-lg border border-slate-200">
+                <div className="h-2 w-2 rounded-full bg-red-500" />
+                <span className="text-slate-700">Gedrag & Impuls</span>
+              </div>
+              <div className="flex items-center gap-2 p-3 bg-white rounded-lg border border-slate-200">
+                <div className="h-2 w-2 rounded-full bg-orange-500" />
+                <span className="text-slate-700">Middelengebruik</span>
+              </div>
+              <div className="flex items-center gap-2 p-3 bg-white rounded-lg border border-slate-200">
+                <div className="h-2 w-2 rounded-full bg-green-500" />
+                <span className="text-slate-700">Cognitief</span>
+              </div>
+              <div className="flex items-center gap-2 p-3 bg-white rounded-lg border border-slate-200">
+                <div className="h-2 w-2 rounded-full bg-teal-500" />
+                <span className="text-slate-700">Context & Psychosociaal</span>
+              </div>
+            </div>
+
+            <h4 className="font-medium text-slate-900 mb-3 mt-6">
+              📊 Geplande Features:
+            </h4>
+            <ul className="space-y-2 text-sm text-slate-700">
+              <li className="flex items-start gap-2">
+                <span className="text-teal-600 font-bold">✓</span>
+                <span>
+                  <strong>AI Categorisatie</strong> - Automatische DSM-light
+                  classificatie
+                </span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-teal-600 font-bold">✓</span>
+                <span>
+                  <strong>Ernst Indicatie</strong> - Laag, Middel, Hoog scoring
+                </span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-teal-600 font-bold">✓</span>
+                <span>
+                  <strong>Visuele Dashboard</strong> - Overzichtelijke
+                  weergave per categorie
+                </span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-teal-600 font-bold">✓</span>
+                <span>
+                  <strong>Bronverwijzing</strong> - Link naar intake notities
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Timeline Preview */}
+        <div className="mt-8 inline-flex items-center gap-2 px-4 py-2 bg-teal-50 border border-teal-200 rounded-full text-sm">
+          <Clock className="h-4 w-4 text-teal-600" />
+          <span className="text-teal-800">
+            <strong>Week 3:</strong> 18-24 November 2024
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}