1f45d6cca8
Whistleblower (1220 -> 349 LOC) split into 6 colocated components:
TabNavigation, StatCard, FilterBar, ReportCard, WhistleblowerCreateModal,
CaseDetailPanel. All under the 300 LOC soft target.
Drive-by fix: the earlier fc6a330 split of compliance-scope-types.ts
dropped several helper exports that downstream consumers still import
(lib/sdk/index.ts, compliance-scope-engine.ts, obligations page,
compliance-scope page, constraint-enforcer, drafting-engine validate).
Restored them in the appropriate domain modules:
- core-levels.ts: maxDepthLevel, getDepthLevelNumeric, depthLevelFromNumeric
- state.ts: createEmptyScopeState
- decisions.ts: createEmptyScopeDecision + ApplicableRegulation,
RegulationObligation, RegulationAssessmentResult, SupervisoryAuthorityInfo
Verification: next build clean (142 pages generated), /sdk/whistleblower
still builds at ~11.5 kB.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
350 lines
15 KiB
TypeScript
350 lines
15 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect, useMemo, useCallback } from 'react'
|
|
import { useSDK } from '@/lib/sdk'
|
|
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
|
|
import {
|
|
WhistleblowerReport,
|
|
WhistleblowerStatistics,
|
|
ReportCategory,
|
|
ReportStatus,
|
|
ReportPriority,
|
|
isAcknowledgmentOverdue,
|
|
isFeedbackOverdue,
|
|
} from '@/lib/sdk/whistleblower/types'
|
|
import { fetchSDKWhistleblowerList } from '@/lib/sdk/whistleblower/api'
|
|
import { TabNavigation, type Tab, type TabId } from './_components/TabNavigation'
|
|
import { StatCard } from './_components/StatCard'
|
|
import { FilterBar } from './_components/FilterBar'
|
|
import { ReportCard } from './_components/ReportCard'
|
|
import { WhistleblowerCreateModal } from './_components/WhistleblowerCreateModal'
|
|
import { CaseDetailPanel } from './_components/CaseDetailPanel'
|
|
|
|
// =============================================================================
|
|
// MAIN PAGE
|
|
// =============================================================================
|
|
|
|
export default function WhistleblowerPage() {
|
|
const { state } = useSDK()
|
|
const [activeTab, setActiveTab] = useState<TabId>('overview')
|
|
const [reports, setReports] = useState<WhistleblowerReport[]>([])
|
|
const [statistics, setStatistics] = useState<WhistleblowerStatistics | null>(null)
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [showCreateModal, setShowCreateModal] = useState(false)
|
|
const [selectedReport, setSelectedReport] = useState<WhistleblowerReport | null>(null)
|
|
|
|
// Filters
|
|
const [selectedCategory, setSelectedCategory] = useState<ReportCategory | 'all'>('all')
|
|
const [selectedStatus, setSelectedStatus] = useState<ReportStatus | 'all'>('all')
|
|
const [selectedPriority, setSelectedPriority] = useState<ReportPriority | 'all'>('all')
|
|
|
|
// Load data from SDK backend
|
|
const loadData = useCallback(async () => {
|
|
setIsLoading(true)
|
|
try {
|
|
const { reports: wbReports, statistics: wbStats } = await fetchSDKWhistleblowerList()
|
|
setReports(wbReports)
|
|
setStatistics(wbStats)
|
|
} catch (error) {
|
|
console.error('Failed to load Whistleblower data:', error)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
loadData()
|
|
}, [loadData])
|
|
|
|
// Locally computed overdue counts (always fresh)
|
|
const overdueCounts = useMemo(() => {
|
|
const overdueAck = reports.filter(r => isAcknowledgmentOverdue(r)).length
|
|
const overdueFb = reports.filter(r => isFeedbackOverdue(r)).length
|
|
return { overdueAck, overdueFb }
|
|
}, [reports])
|
|
|
|
// Calculate tab counts
|
|
const tabCounts = useMemo(() => {
|
|
const investigationStatuses: ReportStatus[] = ['acknowledged', 'under_review', 'investigation', 'measures_taken']
|
|
const closedStatuses: ReportStatus[] = ['closed', 'rejected']
|
|
return {
|
|
new_reports: reports.filter(r => r.status === 'new').length,
|
|
investigation: reports.filter(r => investigationStatuses.includes(r.status)).length,
|
|
closed: reports.filter(r => closedStatuses.includes(r.status)).length
|
|
}
|
|
}, [reports])
|
|
|
|
// Filter reports based on active tab and filters
|
|
const filteredReports = useMemo(() => {
|
|
let filtered = [...reports]
|
|
|
|
// Tab-based filtering
|
|
const investigationStatuses: ReportStatus[] = ['acknowledged', 'under_review', 'investigation', 'measures_taken']
|
|
const closedStatuses: ReportStatus[] = ['closed', 'rejected']
|
|
|
|
if (activeTab === 'new_reports') {
|
|
filtered = filtered.filter(r => r.status === 'new')
|
|
} else if (activeTab === 'investigation') {
|
|
filtered = filtered.filter(r => investigationStatuses.includes(r.status))
|
|
} else if (activeTab === 'closed') {
|
|
filtered = filtered.filter(r => closedStatuses.includes(r.status))
|
|
}
|
|
|
|
// Category filter
|
|
if (selectedCategory !== 'all') {
|
|
filtered = filtered.filter(r => r.category === selectedCategory)
|
|
}
|
|
|
|
// Status filter
|
|
if (selectedStatus !== 'all') {
|
|
filtered = filtered.filter(r => r.status === selectedStatus)
|
|
}
|
|
|
|
// Priority filter
|
|
if (selectedPriority !== 'all') {
|
|
filtered = filtered.filter(r => r.priority === selectedPriority)
|
|
}
|
|
|
|
// Sort: overdue first, then by priority, then by date
|
|
return filtered.sort((a, b) => {
|
|
const closedStatuses: ReportStatus[] = ['closed', 'rejected']
|
|
|
|
const getUrgency = (r: WhistleblowerReport) => {
|
|
if (closedStatuses.includes(r.status)) return 1000
|
|
const ackOd = isAcknowledgmentOverdue(r)
|
|
const fbOd = isFeedbackOverdue(r)
|
|
if (ackOd || fbOd) return -100
|
|
const priorityScore = { critical: 0, high: 1, normal: 2, low: 3 }
|
|
return priorityScore[r.priority] ?? 2
|
|
}
|
|
|
|
const urgencyDiff = getUrgency(a) - getUrgency(b)
|
|
if (urgencyDiff !== 0) return urgencyDiff
|
|
|
|
return new Date(b.receivedAt).getTime() - new Date(a.receivedAt).getTime()
|
|
})
|
|
}, [reports, activeTab, selectedCategory, selectedStatus, selectedPriority])
|
|
|
|
const tabs: Tab[] = [
|
|
{ id: 'overview', label: 'Uebersicht' },
|
|
{ id: 'new_reports', label: 'Neue Meldungen', count: tabCounts.new_reports, countColor: 'bg-blue-100 text-blue-600' },
|
|
{ id: 'investigation', label: 'In Untersuchung', count: tabCounts.investigation, countColor: 'bg-yellow-100 text-yellow-600' },
|
|
{ id: 'closed', label: 'Abgeschlossen', count: tabCounts.closed, countColor: 'bg-green-100 text-green-600' },
|
|
{ id: 'settings', label: 'Einstellungen' }
|
|
]
|
|
|
|
const stepInfo = STEP_EXPLANATIONS['whistleblower']
|
|
|
|
const clearFilters = () => {
|
|
setSelectedCategory('all')
|
|
setSelectedStatus('all')
|
|
setSelectedPriority('all')
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Step Header */}
|
|
<StepHeader
|
|
stepId="whistleblower"
|
|
title={stepInfo.title}
|
|
description={stepInfo.description}
|
|
explanation={stepInfo.explanation}
|
|
tips={stepInfo.tips}
|
|
>
|
|
<button
|
|
onClick={() => setShowCreateModal(true)}
|
|
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
</svg>
|
|
Meldung erfassen
|
|
</button>
|
|
</StepHeader>
|
|
|
|
{/* Tab Navigation */}
|
|
<TabNavigation
|
|
tabs={tabs}
|
|
activeTab={activeTab}
|
|
onTabChange={setActiveTab}
|
|
/>
|
|
|
|
{/* Loading State */}
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<svg className="animate-spin w-8 h-8 text-purple-600" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
</div>
|
|
) : activeTab === 'settings' ? (
|
|
/* Settings Tab */
|
|
<div className="bg-white rounded-xl border border-gray-200 p-8 text-center">
|
|
<div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900">Einstellungen</h3>
|
|
<p className="mt-2 text-gray-500">
|
|
Hinweisgebersystem-Einstellungen, Meldekanal-Konfiguration, Ombudsperson-Verwaltung
|
|
und E-Mail-Vorlagen werden in einer spaeteren Version verfuegbar sein.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Statistics (Overview Tab) */}
|
|
{activeTab === 'overview' && statistics && (
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<StatCard
|
|
label="Gesamt Meldungen"
|
|
value={statistics.totalReports}
|
|
color="gray"
|
|
/>
|
|
<StatCard
|
|
label="Neue Meldungen"
|
|
value={statistics.newReports}
|
|
color="blue"
|
|
/>
|
|
<StatCard
|
|
label="In Untersuchung"
|
|
value={statistics.underReview}
|
|
color="yellow"
|
|
/>
|
|
<StatCard
|
|
label="Ueberfaellige Bestaetigung"
|
|
value={overdueCounts.overdueAck}
|
|
color={overdueCounts.overdueAck > 0 ? 'red' : 'green'}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Overdue Alert for Acknowledgment Deadline (7 days HinSchG) */}
|
|
{(overdueCounts.overdueAck > 0 || overdueCounts.overdueFb > 0) && (activeTab === 'overview' || activeTab === 'new_reports' || activeTab === 'investigation') && (
|
|
<div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-4">
|
|
<div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
|
|
<svg className="w-5 h-5 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 className="flex-1">
|
|
<h4 className="font-medium text-red-800">
|
|
Achtung: Gesetzliche Fristen ueberschritten
|
|
</h4>
|
|
<p className="text-sm text-red-600 mt-0.5">
|
|
{overdueCounts.overdueAck > 0 && (
|
|
<span>{overdueCounts.overdueAck} Meldung(en) ohne Eingangsbestaetigung (mehr als 7 Tage, HinSchG ss 17 Abs. 1). </span>
|
|
)}
|
|
{overdueCounts.overdueFb > 0 && (
|
|
<span>{overdueCounts.overdueFb} Meldung(en) ohne Rueckmeldung (mehr als 3 Monate, HinSchG ss 17 Abs. 2). </span>
|
|
)}
|
|
Handeln Sie umgehend, um Bussgelder und Haftungsrisiken zu vermeiden.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
if (overdueCounts.overdueAck > 0) {
|
|
setActiveTab('new_reports')
|
|
} else {
|
|
setActiveTab('investigation')
|
|
}
|
|
}}
|
|
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium"
|
|
>
|
|
Anzeigen
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Info Box about HinSchG Deadlines (Overview Tab) */}
|
|
{activeTab === 'overview' && (
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
|
<div className="flex items-start gap-3">
|
|
<svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<div>
|
|
<h4 className="font-medium text-blue-800">HinSchG-Fristen</h4>
|
|
<p className="text-sm text-blue-600 mt-1">
|
|
Nach dem Hinweisgeberschutzgesetz (HinSchG) gelten folgende Fristen:
|
|
Die Eingangsbestaetigung muss innerhalb von <strong>7 Tagen</strong> an den
|
|
Hinweisgeber versendet werden (ss 17 Abs. 1 S. 2).
|
|
Eine Rueckmeldung ueber ergriffene Massnahmen muss innerhalb von <strong>3 Monaten</strong> nach
|
|
Eingangsbestaetigung erfolgen (ss 17 Abs. 2).
|
|
Der Schutz des Hinweisgebers vor Repressalien ist zwingend sicherzustellen (ss 36).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Filters */}
|
|
<FilterBar
|
|
selectedCategory={selectedCategory}
|
|
selectedStatus={selectedStatus}
|
|
selectedPriority={selectedPriority}
|
|
onCategoryChange={setSelectedCategory}
|
|
onStatusChange={setSelectedStatus}
|
|
onPriorityChange={setSelectedPriority}
|
|
onClear={clearFilters}
|
|
/>
|
|
|
|
{/* Report List */}
|
|
<div className="space-y-4">
|
|
{filteredReports.map(report => (
|
|
<ReportCard
|
|
key={report.id}
|
|
report={report}
|
|
onClick={() => setSelectedReport(report)}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Empty State */}
|
|
{filteredReports.length === 0 && (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
|
<div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900">Keine Meldungen gefunden</h3>
|
|
<p className="mt-2 text-gray-500">
|
|
{selectedCategory !== 'all' || selectedStatus !== 'all' || selectedPriority !== 'all'
|
|
? 'Passen Sie die Filter an oder setzen Sie sie zurueck.'
|
|
: 'Es sind noch keine Meldungen im Hinweisgebersystem vorhanden. Meldungen werden ueber das oeffentliche Meldeformular eingereicht.'
|
|
}
|
|
</p>
|
|
{(selectedCategory !== 'all' || selectedStatus !== 'all' || selectedPriority !== 'all') && (
|
|
<button
|
|
onClick={clearFilters}
|
|
className="mt-4 px-4 py-2 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
|
|
>
|
|
Filter zuruecksetzen
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Modals */}
|
|
{showCreateModal && (
|
|
<WhistleblowerCreateModal
|
|
onClose={() => setShowCreateModal(false)}
|
|
onSuccess={() => { setShowCreateModal(false); loadData() }}
|
|
/>
|
|
)}
|
|
{selectedReport && (
|
|
<CaseDetailPanel
|
|
report={selectedReport}
|
|
onClose={() => setSelectedReport(null)}
|
|
onUpdated={() => { setSelectedReport(null); loadData() }}
|
|
onDeleted={() => { setSelectedReport(null); loadData() }}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|