m/KanzlAI-mGMT
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add array guards to all frontend components consuming API responses

Browse Source 
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).
This commit is contained in:
m
2026-03-25 18:34:11 +01:00
parent e635efa71e
commit 50bfa3deb4
14 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/appointments/AppointmentList.tsx
View File

@@ -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)}

4
frontend/src/components/dashboard/AISummaryCard.tsx
View File

@@ -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) {

7
frontend/src/components/dashboard/CaseOverviewGrid.tsx
View File

@@ -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",

11
frontend/src/components/dashboard/DeadlineTrafficLights.tsx
View File

@@ -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",

7
frontend/src/components/dashboard/UpcomingTimeline.tsx
View File

@@ -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,

8
frontend/src/components/deadlines/DeadlineList.tsx
View File

@@ -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)}

1
frontend/src/components/layout/TenantSwitcher.tsx
View File

@@ -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];

2
frontend/src/components/settings/TeamSettings.tsx
View File

@@ -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;