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).
57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { FolderOpen, FolderPlus, Archive } from "lucide-react";
|
|
import type { CaseSummary } from "@/lib/types";
|
|
|
|
interface Props {
|
|
data: CaseSummary;
|
|
}
|
|
|
|
export function CaseOverviewGrid({ data }: Props) {
|
|
const safe = data ?? { active_count: 0, new_this_month: 0, closed_count: 0 };
|
|
const items = [
|
|
{
|
|
label: "Aktive Akten",
|
|
value: safe.active_count ?? 0,
|
|
icon: FolderOpen,
|
|
color: "text-blue-600",
|
|
bg: "bg-blue-50",
|
|
},
|
|
{
|
|
label: "Neu (Monat)",
|
|
value: safe.new_this_month ?? 0,
|
|
icon: FolderPlus,
|
|
color: "text-violet-600",
|
|
bg: "bg-violet-50",
|
|
},
|
|
{
|
|
label: "Abgeschlossen",
|
|
value: safe.closed_count ?? 0,
|
|
icon: Archive,
|
|
color: "text-neutral-500",
|
|
bg: "bg-neutral-50",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="rounded-xl border border-neutral-200 bg-white p-5">
|
|
<h2 className="text-sm font-semibold text-neutral-900">Aktenübersicht</h2>
|
|
<div className="mt-4 space-y-3">
|
|
{items.map((item) => (
|
|
<div key={item.label} className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className={`rounded-md p-1.5 ${item.bg}`}>
|
|
<item.icon className={`h-4 w-4 ${item.color}`} />
|
|
</div>
|
|
<span className="text-sm text-neutral-600">{item.label}</span>
|
|
</div>
|
|
<span className="text-lg font-semibold tabular-nums text-neutral-900">
|
|
{item.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|