2ade65431a
Each page.tsx was >1000 LOC; extract components to _components/ and hooks to _hooks/ so page files stay under 500 LOC (164 / 255 / 243 respectively). Zero behavior changes — logic relocated verbatim. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import type { ObligationStats } from '../_types'
|
|
|
|
export default function StatsGrid({
|
|
stats,
|
|
complianceScore,
|
|
}: {
|
|
stats: ObligationStats | null
|
|
complianceScore: number | string | null
|
|
}) {
|
|
const items = [
|
|
{ label: 'Ausstehend', value: stats?.pending ?? 0, color: 'text-gray-600', border: 'border-gray-200' },
|
|
{ label: 'In Bearbeitung', value: stats?.in_progress ?? 0, color: 'text-blue-600', border: 'border-blue-200' },
|
|
{ label: 'Ueberfaellig', value: stats?.overdue ?? 0, color: 'text-red-600', border: 'border-red-200' },
|
|
{ label: 'Abgeschlossen', value: stats?.completed ?? 0, color: 'text-green-600', border: 'border-green-200' },
|
|
{ label: 'Compliance-Score', value: complianceScore ?? '—', color: 'text-purple-600', border: 'border-purple-200' },
|
|
]
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-5 gap-4">
|
|
{items.map(s => (
|
|
<div key={s.label} className={`bg-white rounded-xl border ${s.border} p-5`}>
|
|
<div className={`text-xs ${s.color}`}>{s.label}</div>
|
|
<div className={`text-3xl font-bold mt-1 ${s.color}`}>{s.value}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|