feat: wrap rapportage split view and add qa plan

hooks/use-media-query.ts

@@ -0,0 +1,23 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const mediaQuery = window.matchMedia(query);
+    const handleChange = (event: MediaQueryListEvent | MediaQueryList) => {
+      setMatches('matches' in event ? event.matches : event.matches);
+    };
+
+    setMatches(mediaQuery.matches);
+
+    const listener = (event: MediaQueryListEvent) => handleChange(event);
+    mediaQuery.addEventListener?.('change', listener);
+    return () => mediaQuery.removeEventListener?.('change', listener);
+  }, [query]);
+
+  return matches;
+}