637eb012f5
Extract ObligationModal, ObligationDetail, ObligationCard, ObligationsHeader, StatsGrid, FilterBar and InfoBanners into _components/, plus _types.ts for shared types/constants. page.tsx drops from 987 to 325 LOC, below the 300 soft target region and well under the 500 hard cap. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
24 lines
1.0 KiB
TypeScript
24 lines
1.0 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import type { ObligationStats } from '../_types'
|
|
|
|
export default function StatsGrid({ stats }: { stats: ObligationStats | 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'},
|
|
]
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-4 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>
|
|
)
|
|
}
|