feat(intake): implement epic 4 intake core (overview, new flow, layout)

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

@@ -1,99 +1,56 @@
 'use client';
 
-import { FileText, Plus, Calendar, Clock } from 'lucide-react';
+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">
-            Intake Notities
+            Intakes
           </h2>
           <p className="text-sm text-slate-600 mt-1">
-            Gespreksverslagen en intake documenten
+            Overzicht van alle intakes
           </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"
+        <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 notitie</span>
-        </button>
+          <span>Nieuwe Intake</span>
+        </Link>
       </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">
-          <FileText 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">
-          De intake module met TipTap rich text editor en AI-samenvatting wordt
-          toegevoegd in Week 3 van de development sprint.
-        </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">
-              📋 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>TipTap Rich Text Editor</strong> - Professionele
-                  tekstverwerking
-                </span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-teal-600 font-bold">✓</span>
-                <span>
-                  <strong>AI Samenvatting</strong> - Claude 3.5 Sonnet
-                  generatie (&lt; 5 sec)
-                </span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-teal-600 font-bold">✓</span>
-                <span>
-                  <strong>B1 Readability</strong> - Automatische
-                  tekstvereenvoudiging
-                </span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-teal-600 font-bold">✓</span>
-                <span>
-                  <strong>Tags & Categorieën</strong> - Intake, Evaluatie, Plan
-                </span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-teal-600 font-bold">✓</span>
-                <span>
-                  <strong>Versiehistorie</strong> - Track alle wijzigingen
-                </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>
+      <IntakeList intakes={intakes} clientId={clientId} isLoading={isLoading} />
     </div>
   );
 }