From 50bfa3deb419cd4793461802dbd31316df1ddca1 Mon Sep 17 00:00:00 2001
From: m <paragraphenreiter@gmail.com>
Date: Wed, 25 Mar 2026 18:34:11 +0100
Subject: [PATCH] fix: add array guards to all frontend components consuming
 API responses

Prevents "M.forEach is not a function" crashes when API returns error
objects or unexpected shapes instead of arrays. Guards all useQuery
consumers with Array.isArray checks and safe defaults for object props.

Files fixed: DeadlineList, AppointmentList, TenantSwitcher,
DeadlineTrafficLights, UpcomingTimeline, CaseOverviewGrid,
AISummaryCard, TeamSettings, and all page-level components
(dashboard, cases, fristen, termine, ai/extract).
---
 frontend/src/app/(app)/ai/extract/page.tsx            |  2 +-
 frontend/src/app/(app)/cases/[id]/page.tsx            | 10 +++++-----
 frontend/src/app/(app)/cases/page.tsx                 |  2 +-
 frontend/src/app/(app)/dashboard/page.tsx             |  8 ++++----
 frontend/src/app/(app)/fristen/page.tsx               |  2 +-
 frontend/src/app/(app)/termine/page.tsx               |  2 +-
 .../src/components/appointments/AppointmentList.tsx   |  9 +++++----
 frontend/src/components/dashboard/AISummaryCard.tsx   |  4 +++-
 .../src/components/dashboard/CaseOverviewGrid.tsx     |  7 ++++---
 .../components/dashboard/DeadlineTrafficLights.tsx    | 11 ++++++-----
 .../src/components/dashboard/UpcomingTimeline.tsx     |  7 +++++--
 frontend/src/components/deadlines/DeadlineList.tsx    |  8 ++++----
 frontend/src/components/layout/TenantSwitcher.tsx     |  1 +
 frontend/src/components/settings/TeamSettings.tsx     |  2 +-
 14 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/(app)/ai/extract/page.tsx b/frontend/src/app/(app)/ai/extract/page.tsx
index c9eb691..ff1fc08 100644
--- a/frontend/src/app/(app)/ai/extract/page.tsx
+++ b/frontend/src/app/(app)/ai/extract/page.tsx
@@ -27,7 +27,7 @@ export default function AIExtractPage() {
     queryFn: () => api.get<PaginatedResponse<Case>>("/cases"),
   });
 
-  const cases = casesData?.data ?? [];
+  const cases = Array.isArray(casesData?.data) ? casesData.data : [];
 
   async function handleExtract(file: File | null, text: string) {
     setIsExtracting(true);
diff --git a/frontend/src/app/(app)/cases/[id]/page.tsx b/frontend/src/app/(app)/cases/[id]/page.tsx
index d5e6b2e..0aac465 100644
--- a/frontend/src/app/(app)/cases/[id]/page.tsx
+++ b/frontend/src/app/(app)/cases/[id]/page.tsx
@@ -132,8 +132,8 @@ export default function CaseDetailPage() {
     );
   }
 
-  const deadlines = deadlinesData?.deadlines ?? [];
-  const documents = documentsData ?? [];
+  const deadlines = Array.isArray(deadlinesData?.deadlines) ? deadlinesData.deadlines : [];
+  const documents = Array.isArray(documentsData) ? documentsData : [];
 
   return (
     <div className="animate-fade-in">
@@ -205,7 +205,7 @@ export default function CaseDetailPage() {
                   {caseDetail.deadlines_count}
                 </span>
               )}
-              {tab.key === "parties" && caseDetail.parties.length > 0 && (
+              {tab.key === "parties" && Array.isArray(caseDetail.parties) && caseDetail.parties.length > 0 && (
                 <span className="ml-1 rounded-full bg-neutral-100 px-1.5 py-0.5 text-xs text-neutral-500">
                   {caseDetail.parties.length}
                 </span>
@@ -217,7 +217,7 @@ export default function CaseDetailPage() {
 
       <div className="mt-6">
         {activeTab === "timeline" && (
-          <CaseTimeline events={caseDetail.recent_events ?? []} />
+          <CaseTimeline events={Array.isArray(caseDetail.recent_events) ? caseDetail.recent_events : []} />
         )}
 
         {activeTab === "deadlines" && (
@@ -229,7 +229,7 @@ export default function CaseDetailPage() {
         )}
 
         {activeTab === "parties" && (
-          <PartyList caseId={id} parties={caseDetail.parties ?? []} />
+          <PartyList caseId={id} parties={Array.isArray(caseDetail.parties) ? caseDetail.parties : []} />
         )}
       </div>
     </div>
diff --git a/frontend/src/app/(app)/cases/page.tsx b/frontend/src/app/(app)/cases/page.tsx
index b16d707..5a125c8 100644
--- a/frontend/src/app/(app)/cases/page.tsx
+++ b/frontend/src/app/(app)/cases/page.tsx
@@ -68,7 +68,7 @@ export default function CasesPage() {
     },
   });
 
-  const cases = data?.cases ?? [];
+  const cases = Array.isArray(data?.cases) ? data.cases : [];
 
   return (
     <div className="animate-fade-in">
diff --git a/frontend/src/app/(app)/dashboard/page.tsx b/frontend/src/app/(app)/dashboard/page.tsx
index 8a4fc03..7ae7549 100644
--- a/frontend/src/app/(app)/dashboard/page.tsx
+++ b/frontend/src/app/(app)/dashboard/page.tsx
@@ -80,17 +80,17 @@ export default function DashboardPage() {
         </p>
       </div>
 
-      <DeadlineTrafficLights data={data.deadline_summary} />
+      <DeadlineTrafficLights data={data.deadline_summary ?? { overdue_count: 0, due_this_week: 0, due_next_week: 0, ok_count: 0 }} />
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
         <div className="lg:col-span-2">
           <UpcomingTimeline
-            deadlines={data.upcoming_deadlines}
-            appointments={data.upcoming_appointments}
+            deadlines={Array.isArray(data.upcoming_deadlines) ? data.upcoming_deadlines : []}
+            appointments={Array.isArray(data.upcoming_appointments) ? data.upcoming_appointments : []}
           />
         </div>
         <div className="space-y-6">
-          <CaseOverviewGrid data={data.case_summary} />
+          <CaseOverviewGrid data={data.case_summary ?? { active_count: 0, new_this_month: 0, closed_count: 0 }} />
           <AISummaryCard data={data} />
           <QuickActions />
         </div>
diff --git a/frontend/src/app/(app)/fristen/page.tsx b/frontend/src/app/(app)/fristen/page.tsx
index 213d52d..6a620f0 100644
--- a/frontend/src/app/(app)/fristen/page.tsx
+++ b/frontend/src/app/(app)/fristen/page.tsx
@@ -66,7 +66,7 @@ export default function FristenPage() {
       {view === "list" ? (
         <DeadlineList />
       ) : (
-        <DeadlineCalendarView deadlines={deadlines || []} />
+        <DeadlineCalendarView deadlines={Array.isArray(deadlines) ? deadlines : []} />
       )}
     </div>
   );
diff --git a/frontend/src/app/(app)/termine/page.tsx b/frontend/src/app/(app)/termine/page.tsx
index b080919..2c6f4d4 100644
--- a/frontend/src/app/(app)/termine/page.tsx
+++ b/frontend/src/app/(app)/termine/page.tsx
@@ -84,7 +84,7 @@ export default function TerminePage() {
         <AppointmentList onEdit={handleEdit} />
       ) : (
         <AppointmentCalendar
-          appointments={appointments || []}
+          appointments={Array.isArray(appointments) ? appointments : []}
           onAppointmentClick={handleEdit}
         />
       )}
diff --git a/frontend/src/components/appointments/AppointmentList.tsx b/frontend/src/components/appointments/AppointmentList.tsx
index c1d21ae..78fb0b0 100644
--- a/frontend/src/components/appointments/AppointmentList.tsx
+++ b/frontend/src/components/appointments/AppointmentList.tsx
@@ -73,12 +73,13 @@ export function AppointmentList({ onEdit }: AppointmentListProps) {
 
   const caseMap = useMemo(() => {
     const map = new Map<string, Case>();
-    cases?.cases?.forEach((c) => map.set(c.id, c));
+    const arr = Array.isArray(cases?.cases) ? cases.cases : [];
+    arr.forEach((c) => map.set(c.id, c));
     return map;
   }, [cases]);
 
   const filtered = useMemo(() => {
-    if (!appointments) return [];
+    if (!Array.isArray(appointments)) return [];
     return appointments
       .filter((a) => {
         if (caseFilter !== "all" && a.case_id !== caseFilter) return false;
@@ -91,7 +92,7 @@ export function AppointmentList({ onEdit }: AppointmentListProps) {
   const grouped = useMemo(() => groupByDate(filtered), [filtered]);
 
   const counts = useMemo(() => {
-    if (!appointments) return { today: 0, thisWeek: 0, total: 0 };
+    if (!Array.isArray(appointments)) return { today: 0, thisWeek: 0, total: 0 };
     let today = 0;
     let thisWeek = 0;
     for (const a of appointments) {
@@ -148,7 +149,7 @@ export function AppointmentList({ onEdit }: AppointmentListProps) {
             </option>
           ))}
         </select>
-        {cases?.cases && cases.cases.length > 0 && (
+        {Array.isArray(cases?.cases) && cases.cases.length > 0 && (
           <select
             value={caseFilter}
             onChange={(e) => setCaseFilter(e.target.value)}
diff --git a/frontend/src/components/dashboard/AISummaryCard.tsx b/frontend/src/components/dashboard/AISummaryCard.tsx
index a1c1b1f..c8facc8 100644
--- a/frontend/src/components/dashboard/AISummaryCard.tsx
+++ b/frontend/src/components/dashboard/AISummaryCard.tsx
@@ -9,7 +9,9 @@ interface Props {
 
 function generateSummary(data: DashboardData): string {
   const parts: string[] = [];
-  const { deadline_summary: ds, case_summary: cs, upcoming_deadlines: ud } = data;
+  const ds = data.deadline_summary ?? { overdue_count: 0, due_this_week: 0, due_next_week: 0, ok_count: 0 };
+  const cs = data.case_summary ?? { active_count: 0, new_this_month: 0, closed_count: 0 };
+  const ud = Array.isArray(data.upcoming_deadlines) ? data.upcoming_deadlines : [];
 
   // Deadline urgency
   if (ds.overdue_count > 0) {
diff --git a/frontend/src/components/dashboard/CaseOverviewGrid.tsx b/frontend/src/components/dashboard/CaseOverviewGrid.tsx
index 3d013cf..1cef318 100644
--- a/frontend/src/components/dashboard/CaseOverviewGrid.tsx
+++ b/frontend/src/components/dashboard/CaseOverviewGrid.tsx
@@ -8,24 +8,25 @@ interface Props {
 }
 
 export function CaseOverviewGrid({ data }: Props) {
+  const safe = data ?? { active_count: 0, new_this_month: 0, closed_count: 0 };
   const items = [
     {
       label: "Aktive Akten",
-      value: data.active_count,
+      value: safe.active_count ?? 0,
       icon: FolderOpen,
       color: "text-blue-600",
       bg: "bg-blue-50",
     },
     {
       label: "Neu (Monat)",
-      value: data.new_this_month,
+      value: safe.new_this_month ?? 0,
       icon: FolderPlus,
       color: "text-violet-600",
       bg: "bg-violet-50",
     },
     {
       label: "Abgeschlossen",
-      value: data.closed_count,
+      value: safe.closed_count ?? 0,
       icon: Archive,
       color: "text-neutral-500",
       bg: "bg-neutral-50",
diff --git a/frontend/src/components/dashboard/DeadlineTrafficLights.tsx b/frontend/src/components/dashboard/DeadlineTrafficLights.tsx
index 82cd5cf..4825072 100644
--- a/frontend/src/components/dashboard/DeadlineTrafficLights.tsx
+++ b/frontend/src/components/dashboard/DeadlineTrafficLights.tsx
@@ -31,24 +31,25 @@ interface Props {
 }
 
 export function DeadlineTrafficLights({ data, onFilter }: Props) {
+  const safe = data ?? { overdue_count: 0, due_this_week: 0, due_next_week: 0, ok_count: 0 };
   const cards = [
     {
       key: "overdue" as const,
       label: "Überfällig",
-      count: data.overdue_count,
+      count: safe.overdue_count ?? 0,
       icon: AlertTriangle,
       bg: "bg-red-50",
       border: "border-red-200",
       iconColor: "text-red-500",
       countColor: "text-red-700",
       labelColor: "text-red-600",
-      ring: data.overdue_count > 0 ? "ring-2 ring-red-300 ring-offset-1" : "",
-      pulse: data.overdue_count > 0,
+      ring: (safe.overdue_count ?? 0) > 0 ? "ring-2 ring-red-300 ring-offset-1" : "",
+      pulse: (safe.overdue_count ?? 0) > 0,
     },
     {
       key: "this_week" as const,
       label: "Diese Woche",
-      count: data.due_this_week,
+      count: safe.due_this_week ?? 0,
       icon: Clock,
       bg: "bg-amber-50",
       border: "border-amber-200",
@@ -61,7 +62,7 @@ export function DeadlineTrafficLights({ data, onFilter }: Props) {
     {
       key: "ok" as const,
       label: "Im Zeitplan",
-      count: data.ok_count + data.due_next_week,
+      count: (safe.ok_count ?? 0) + (safe.due_next_week ?? 0),
       icon: CheckCircle,
       bg: "bg-emerald-50",
       border: "border-emerald-200",
diff --git a/frontend/src/components/dashboard/UpcomingTimeline.tsx b/frontend/src/components/dashboard/UpcomingTimeline.tsx
index 77c6dee..df96255 100644
--- a/frontend/src/components/dashboard/UpcomingTimeline.tsx
+++ b/frontend/src/components/dashboard/UpcomingTimeline.tsx
@@ -21,13 +21,16 @@ function formatDayLabel(date: Date): string {
 }
 
 export function UpcomingTimeline({ deadlines, appointments }: Props) {
+  const safeDeadlines = Array.isArray(deadlines) ? deadlines : [];
+  const safeAppointments = Array.isArray(appointments) ? appointments : [];
+
   const items: TimelineItem[] = [
-    ...deadlines.map((d) => ({
+    ...safeDeadlines.map((d) => ({
       type: "deadline" as const,
       date: parseISO(d.due_date),
       data: d,
     })),
-    ...appointments.map((a) => ({
+    ...safeAppointments.map((a) => ({
       type: "appointment" as const,
       date: parseISO(a.start_at),
       data: a,
diff --git a/frontend/src/components/deadlines/DeadlineList.tsx b/frontend/src/components/deadlines/DeadlineList.tsx
index 750c3d0..b935c27 100644
--- a/frontend/src/components/deadlines/DeadlineList.tsx
+++ b/frontend/src/components/deadlines/DeadlineList.tsx
@@ -76,12 +76,12 @@ export function DeadlineList() {
 
   const caseMap = useMemo(() => {
     const map = new Map<string, Case>();
-    cases?.forEach((c) => map.set(c.id, c));
+    (Array.isArray(cases) ? cases : []).forEach((c) => map.set(c.id, c));
     return map;
   }, [cases]);
 
   const filtered = useMemo(() => {
-    if (!deadlines) return [];
+    if (!Array.isArray(deadlines)) return [];
     return deadlines.filter((d) => {
       if (statusFilter === "pending" && d.status !== "pending") return false;
       if (statusFilter === "completed" && d.status !== "completed")
@@ -96,7 +96,7 @@ export function DeadlineList() {
   }, [deadlines, statusFilter, caseFilter]);
 
   const counts = useMemo(() => {
-    if (!deadlines) return { overdue: 0, thisWeek: 0, ok: 0 };
+    if (!Array.isArray(deadlines)) return { overdue: 0, thisWeek: 0, ok: 0 };
     let overdue = 0,
       thisWeek = 0,
       ok = 0;
@@ -188,7 +188,7 @@ export function DeadlineList() {
           <option value="completed">Erledigt</option>
           <option value="overdue">Überfällig</option>
         </select>
-        {cases && cases.length > 0 && (
+        {Array.isArray(cases) && cases.length > 0 && (
           <select
             value={caseFilter}
             onChange={(e) => setCaseFilter(e.target.value)}
diff --git a/frontend/src/components/layout/TenantSwitcher.tsx b/frontend/src/components/layout/TenantSwitcher.tsx
index fa96926..405eb38 100644
--- a/frontend/src/components/layout/TenantSwitcher.tsx
+++ b/frontend/src/components/layout/TenantSwitcher.tsx
@@ -15,6 +15,7 @@ export function TenantSwitcher() {
     api
       .get<TenantWithRole[]>("/tenants")
       .then((data) => {
+        if (!Array.isArray(data)) return;
         setTenants(data);
         const savedId = localStorage.getItem("kanzlai_tenant_id");
         const match = data.find((t) => t.id === savedId) || data[0];
diff --git a/frontend/src/components/settings/TeamSettings.tsx b/frontend/src/components/settings/TeamSettings.tsx
index f3ff977..8a1def3 100644
--- a/frontend/src/components/settings/TeamSettings.tsx
+++ b/frontend/src/components/settings/TeamSettings.tsx
@@ -118,7 +118,7 @@ export function TeamSettings() {
       </form>
 
       {/* Members List */}
-      {members && members.length > 0 ? (
+      {Array.isArray(members) && members.length > 0 ? (
         <div className="overflow-hidden rounded-md border border-neutral-200">
           {members.map((member, i) => {
             const roleInfo = ROLE_LABELS[member.role] || ROLE_LABELS.member;