feat: wrap rapportage split view and add qa plan

app/epd/patients/[id]/components/client-header.tsx

@@ -6,12 +6,13 @@
  */
 
 import { Mic } from 'lucide-react';
+import { useRouter, usePathname } from 'next/navigation';
 import type { FHIRPatient } from '@/lib/fhir';
 import { Button } from '@/components/ui/button';
 
 interface ClientHeaderProps {
   patient: FHIRPatient;
-  onNewReport?: () => void;
+  focusElementId?: string;
 }
 
 // Status badge component
@@ -38,7 +39,23 @@ function StatusBadge({ status }: { status?: string }) {
   );
 }
 
-export function ClientHeader({ patient, onNewReport }: ClientHeaderProps) {
+export function ClientHeader({ patient, focusElementId = 'rapportage-composer' }: ClientHeaderProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleNewReportClick = (patientId?: string) => {
+    if (!patientId) return;
+    const rapportagePath = `/epd/patients/${patientId}/rapportage`;
+    const onRapportagePage = pathname?.startsWith(rapportagePath);
+
+    if (onRapportagePage) {
+      handleScrollToComposer(focusElementId);
+      return;
+    }
+
+    const hash = focusElementId ? `#${focusElementId}` : '';
+    router.push(`${rapportagePath}${hash}`);
+  };
   // Extract name
   const name = patient.name?.[0];
   const fullName = [
@@ -104,13 +121,20 @@ export function ClientHeader({ patient, onNewReport }: ClientHeaderProps) {
           <div className="text-xs text-slate-400">
             ID: {patient.id}
           </div>
-          {onNewReport && (
-            <Button type="button" size="sm" onClick={onNewReport}>
-              <Mic className="mr-2 h-4 w-4" /> Nieuwe rapportage
-            </Button>
-          )}
+          <Button type="button" size="sm" onClick={() => handleNewReportClick(patient.id)}>
+            <Mic className="mr-2 h-4 w-4" /> Nieuwe rapportage
+          </Button>
         </div>
       </div>
     </div>
   );
 }
+
+function handleScrollToComposer(targetId?: string) {
+  if (!targetId) return;
+  const element = document.getElementById(targetId);
+  if (element) {
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    (element as HTMLElement).focus?.();
+  }
+}