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>
78 lines
3.5 KiB
TypeScript
78 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import type { ApplicableRegulation } from '@/lib/sdk/compliance-scope-types'
|
|
import type { ObligationStats } from '../_types'
|
|
|
|
export function ApplicableRegsBanner({ regs }: { regs: ApplicableRegulation[] }) {
|
|
if (regs.length === 0) return null
|
|
return (
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
|
<h3 className="text-sm font-semibold text-blue-900 mb-2">Anwendbare Regulierungen (aus Auto-Profiling)</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{regs.map(reg => (
|
|
<span
|
|
key={reg.id}
|
|
className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-white border border-blue-300 text-blue-800"
|
|
>
|
|
<svg className="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
{reg.name}
|
|
{reg.classification && <span className="text-blue-500">({reg.classification})</span>}
|
|
<span className="text-blue-400">{reg.obligation_count} Pflichten</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function NoProfileWarning() {
|
|
return (
|
|
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-700">
|
|
Kein Unternehmensprofil vorhanden. Auto-Profiling verwendet Beispieldaten.{' '}
|
|
<a href="/sdk/company-profile" className="underline font-medium">Profil anlegen →</a>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function OverdueAlert({ stats }: { stats: ObligationStats | null }) {
|
|
if ((stats?.overdue ?? 0) <= 0) return null
|
|
return (
|
|
<div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-3">
|
|
<div className="w-9 h-9 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
|
|
<svg className="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-red-800 text-sm">Achtung: {stats?.overdue} ueberfaellige Pflicht(en)</h4>
|
|
<p className="text-xs text-red-600">Diese Pflichten erfordern sofortige Aufmerksamkeit.</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function EmptyList({ onCreate }: { onCreate: () => void }) {
|
|
return (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
|
<div className="w-14 h-14 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg className="w-7 h-7 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-base font-semibold text-gray-900">Keine Pflichten gefunden</h3>
|
|
<p className="mt-2 text-sm text-gray-500">
|
|
Klicken Sie auf "Pflicht hinzufuegen", um die erste Compliance-Pflicht zu erfassen.
|
|
</p>
|
|
<button
|
|
onClick={onCreate}
|
|
className="mt-4 px-5 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700"
|
|
>
|
|
Erste Pflicht erstellen
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|